.other-room-page { background: #080806; }

.other-hero {
  width: min(100%, 1600px);
  min-height: 100svh;
  display: grid;
  grid-template-columns: 25px minmax(290px, .86fr) minmax(330px, 1fr) 25px;
  gap: clamp(24px, 4.7vw, 83px);
  align-items: center;
  margin: 0 auto;
  padding: 112px clamp(24px, 4.5vw, 80px) 82px;
  background: radial-gradient(ellipse at 32% 42%, rgba(176, 144, 98, .09), transparent 40%);
}

.other-rail {
  height: min(74svh, 800px);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 23px;
  color: rgba(222, 212, 192, .48);
  font-size: 11px;
  letter-spacing: .2em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.other-rail i { width: 1px; flex: 1; background: linear-gradient(transparent, var(--brass-dark), transparent); }
.other-side-note {
  align-self: end;
  margin: 0 0 24px;
  color: rgba(222, 212, 192, .42);
  font-size: 11px;
  letter-spacing: .16em;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.other-poster { width: min(100%, 46svh, 488px); justify-self: center; margin: 0; }
.other-poster-stage {
  position: relative;
  aspect-ratio: 941 / 1672;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .64), 0 0 0 8px rgba(184, 149, 93, .035);
  background: #cfc2aa;
}
.other-poster-stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.other-poster-stage span { position: absolute; inset: 0; border: 1px solid rgba(250, 233, 201, .38); pointer-events: none; }
.other-poster figcaption {
  margin-top: 15px;
  color: var(--paper-dim);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: 1.5;
}

.other-intro {
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 68px;
  padding: clamp(38px, 8svh, 100px) 0 clamp(22px, 5svh, 60px);
}
.other-intro h1 {
  margin: 34px 0 0;
  color: var(--paper-bright);
  font-family: Baskerville, "Iowan Old Style", Georgia, serif;
  font-size: clamp(73px, 7.8vw, 129px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.055em;
}
.other-intro h1 em { color: #c5a678; font-weight: 400; }
.other-lead {
  max-width: 565px;
  margin: 37px 0 0;
  border-left: 1px solid var(--brass);
  padding-left: 21px;
  color: var(--paper-bright);
  font-family: Baskerville, "Iowan Old Style", Georgia, serif;
  font-size: clamp(23px, 2vw, 30px);
  line-height: 1.34;
}
.other-detail { max-width: 450px; margin: 24px 0 0 22px; color: var(--paper-dim); font-size: 16px; line-height: 1.65; }
.other-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 29px; }
.other-actions a { font-size: 13px; font-weight: 600; letter-spacing: .11em; text-decoration: none; }
.other-primary {
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  border: 1px solid var(--brass);
  padding: 0 20px;
  background: rgba(184, 149, 93, .07);
  color: var(--paper-bright);
}
.other-primary span { color: var(--brass); font-family: Georgia, serif; font-size: 25px; font-weight: 400; }
.other-primary:hover, .other-primary:focus-visible { background: rgba(184, 149, 93, .22); }
.other-secondary { border-bottom: 1px solid var(--brass-dark); padding: 12px 0; color: var(--paper-dim); }
.other-secondary:hover, .other-secondary:focus-visible { color: var(--paper-bright); }

.other-atlas {
  padding: clamp(100px, 12vw, 170px) max(7vw, calc((100vw - 1420px) / 2)) clamp(115px, 13vw, 190px);
  scroll-margin-top: 55px;
  background: radial-gradient(circle at 15% 10%, rgba(255, 255, 255, .35), transparent 40%), #d6cab7;
  color: #1c1a16;
}
.other-atlas .eyebrow { color: #745735; }
.other-atlas-heading { display: grid; grid-template-columns: 1fr minmax(280px, .7fr); gap: 28px clamp(45px, 9vw, 140px); align-items: end; margin-bottom: clamp(60px, 8vw, 115px); }
.other-atlas-heading .eyebrow { grid-column: 1 / -1; margin: 0; }
.other-atlas h2 {
  margin: 0;
  font-family: Baskerville, "Iowan Old Style", Georgia, serif;
  font-size: clamp(55px, 6vw, 97px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.052em;
}
.other-atlas h2 em { color: #795a39; font-weight: 400; }
.other-atlas-heading > p:last-child { max-width: 520px; margin: 0 0 5px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; }
.other-chapters { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(33, 29, 23, .4); }
.other-chapter {
  min-height: 106px;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) minmax(160px, 285px);
  align-items: center;
  gap: clamp(14px, 3vw, 45px);
  border-bottom: 1px solid rgba(33, 29, 23, .3);
  padding: 19px 10px;
}
.other-chapter-number { color: #795a39; font-family: Baskerville, Georgia, serif; font-size: 45px; line-height: 1; }
.other-chapter h3 { margin: 0; font-family: Baskerville, Georgia, serif; font-size: clamp(26px, 2.8vw, 43px); font-weight: 400; line-height: 1.04; }
.other-chapter-state { justify-self: end; color: #786f60; font-size: 12px; letter-spacing: .11em; text-align: right; }
.other-chapter a { justify-self: end; display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid #745735; padding: 9px 0; color: #2b241a; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-decoration: none; text-align: right; }
.other-chapter a:hover, .other-chapter a:focus-visible { color: #795a39; }
.other-chapter a span { font-family: Georgia, serif; font-size: 20px; }

.other-exit { padding: clamp(100px, 13vw, 180px) 7vw clamp(120px, 13vw, 180px); text-align: center; }
.other-exit h2 { margin: 26px auto 47px; font-family: Baskerville, Georgia, serif; font-size: clamp(57px, 8vw, 115px); font-weight: 400; line-height: .95; letter-spacing: -.05em; }
.other-exit nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px 45px; }
.other-exit a { border-bottom: 1px solid var(--brass); padding: 10px 0; color: var(--paper-bright); font-size: 13px; letter-spacing: .11em; text-decoration: none; }
.other-exit a:hover, .other-exit a:focus-visible { color: var(--brass); }
.other-footer { min-height: 120px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); padding: 26px 7vw; color: var(--paper-dim); font-size: 12px; letter-spacing: .13em; }
.other-notice { position: fixed; z-index: 60; left: 50%; bottom: 28px; max-width: calc(100% - 36px); transform: translate(-50%, 12px); opacity: 0; border: 1px solid var(--line); padding: 13px 18px; background: var(--paper-bright); color: var(--ink); font-size: 12px; letter-spacing: .1em; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.other-notice.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1100px) {
  .other-hero { grid-template-columns: minmax(290px, .85fr) minmax(320px, 1fr); padding-inline: 6vw; }
  .other-rail, .other-side-note { display: none; }
}
@media (max-width: 760px) {
  .other-hero { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 88px 22px 95px; }
  .other-poster { width: min(100%, 420px); }
  .other-poster figcaption { font-size: 10px; }
  .other-intro { gap: 45px; padding: 72px 0 0; }
  .other-intro h1 { font-size: clamp(65px, 18vw, 106px); }
  .other-lead { margin-top: 30px; font-size: 23px; }
  .other-atlas { padding: 100px 22px 125px; }
  .other-atlas-heading { display: block; margin-bottom: 60px; }
  .other-atlas h2 { margin: 26px 0 34px; font-size: clamp(54px, 12vw, 84px); }
  .other-chapter { grid-template-columns: 46px minmax(0, 1fr); min-height: 100px; gap: 6px 14px; padding: 17px 3px; }
  .other-chapter-number { font-size: 36px; }
  .other-chapter h3 { font-size: clamp(24px, 6vw, 35px); }
  .other-chapter-state, .other-chapter a { grid-column: 2; justify-self: start; text-align: left; }
  .other-chapter-state { font-size: 11px; }
  .other-exit { padding: 115px 22px 130px; }
  .other-exit h2 { font-size: clamp(60px, 13vw, 90px); }
  .other-footer { min-height: 130px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .other-notice { transition: none; } }