/* Whitman, thirty-seven years: one spread, the scroll its clock. Paper and one ink; one red, for what he changed. */
:root {
  --paper: #f6f2ea;
  --ink: #1e1914;
  --muted: #6e6558;
  --faint: rgba(30, 25, 20, .2);
  --red: #9a3a24;
  --serif: "Old Standard TT", "Libre Caslon Text", Georgia, serif;
  --num: "Bodoni Moda", "Old Standard TT", Georgia, serif;
  --strip: 38px;                       /* the picker's strip */
  --stage: calc(100svh - var(--strip));
  --ph: min(calc(var(--stage) - 205px), 660px);   /* the plate’s height */
  --pw: calc(var(--ph) * .8);
  --m: max(24px, 6vw);                /* the outer margin */
  --gut: clamp(64px, 10vw, 190px);    /* between the pages */
  --wide: 1220px;                     /* the spread's measure */
}
* { box-sizing: border-box; }
html { background: var(--paper); transition: none; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.5 var(--serif); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--faint); }
a:hover { text-decoration-color: currentColor; }
i { font-style: italic; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- the passage: a tall section; its stage sticks under the strip while the years pass ---- */
.passage { position: relative; }
.stage { position: sticky; top: var(--strip); height: var(--stage); display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.spread { display: grid; grid-template-columns: var(--pw) minmax(0, 1fr); column-gap: var(--gut); align-items: start; width: min(var(--wide), calc(100% - 2 * var(--m))); margin: 0 auto; padding-top: max(28px, calc((var(--stage) - var(--ph) - 160px) / 2)); }

/* the left page: his face */
.plate { margin: 0; width: var(--pw); }
.frame { position: relative; width: var(--pw); height: var(--ph); background: #ece4d4; overflow: hidden; }
.face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: opacity; }
.face:first-child { opacity: 1; }
.captions { position: relative; height: 3.2em; margin-top: 12px; font: italic 400 13.5px/1.5 var(--serif); color: var(--muted); }
.cap { position: absolute; inset: 0 0 auto 0; opacity: 0; }
.cap:first-child { opacity: 1; }

/* the right page: the year, then the edition */
.page { position: relative; height: var(--ph); max-width: 620px; }
.year { position: absolute; left: -.04em; top: -.065em; font: 400 calc(var(--ph) * .25) / 1 var(--num); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; color: var(--ink); opacity: 0; }
.year .digits { display: inline-block; }
.year .suffix { display: inline-block; }
.year .dash { display: inline-block; width: .34em; height: max(2px, .028em); margin: 0 .07em 0 .1em; vertical-align: .3em; background: currentColor; }
.st { position: absolute; inset: 0; display: grid; grid-template-rows: calc(var(--ph) * .25) auto 1fr auto; opacity: 0; pointer-events: none; }
.st.on { pointer-events: auto; }
.intro { opacity: 1; grid-template-rows: auto auto 1fr auto; }
.imprint { grid-row: 2; margin: 14px 0 0; font: 400 13px/1.4 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.opening { grid-row: 3; align-self: center; }
.head { margin: 0 0 .7em; font: 400 13px/1.4 var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.line { margin: 0; font: 400 clamp(30px, calc(var(--ph) * .085), 54px) / 1.16 var(--serif); letter-spacing: -.005em; text-wrap: balance; }
.line .sc { text-transform: uppercase; font-size: .76em; letter-spacing: .05em; }
.line .caps { text-transform: uppercase; font-size: .86em; letter-spacing: .04em; }
.line mark { background: none; color: var(--red); }
.line.last { font-style: italic; font-size: clamp(26px, calc(var(--ph) * .068), 44px); }
.fact { grid-row: 4; margin: 0; max-width: 32em; font: 400 16.5px/1.5 var(--serif); color: var(--ink); }
.fact a { white-space: nowrap; }
.ev { grid-template-rows: calc(var(--ph) * .25) 1fr; }
.event { grid-row: 2; align-self: center; margin: 0; max-width: 18em; font: italic 400 clamp(20px, calc(var(--ph) * .045), 28px) / 1.35 var(--serif); color: var(--muted); }

/* the opening state: his name */
.name { grid-row: 1; margin: -.12em 0 0; font: 400 clamp(48px, calc(var(--ph) * .16), 104px) / 1 var(--serif); letter-spacing: -.012em; }
.his-line { grid-row: 2; margin: .5em 0 0; font: 400 clamp(18px, calc(var(--ph) * .036), 23px) / 1.35 var(--serif); color: var(--muted); }
.epigraph { grid-row: 3; align-self: center; margin: 0; max-width: 27em; }
.epigraph p { margin: 0; font: 400 clamp(17px, calc(var(--ph) * .033), 21px) / 1.5 var(--serif); }
.epigraph footer { margin-top: .7em; font: italic 400 14px/1.4 var(--serif); color: var(--muted); }
.cue { grid-row: 4; margin: 0; font: 400 14px/1.5 var(--serif); letter-spacing: .02em; color: var(--muted); }
.cue a { margin-left: .8em; color: var(--ink); }

/* the clock: thirty-eight years along one hairline, a mark at each edition */
.clock { position: relative; width: min(var(--wide), calc(100% - 2 * var(--m))); margin: 0 auto; height: 74px; }
.track { position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: var(--faint); }
.now { position: absolute; top: -9px; left: 0; width: 1px; height: 19px; background: var(--ink); transform: translateX(var(--nx, 0px)); will-change: transform; }
.age { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font: italic 400 13px/1 var(--serif); color: var(--ink); white-space: nowrap; }
.marks { list-style: none; margin: 0; padding: 0; }
.marks li { position: absolute; top: 30px; left: calc(var(--x, 0) * 100%); }
.marks li::before { content: ""; position: absolute; left: 0; top: -4px; width: 1px; height: 9px; background: var(--muted); }
.marks a { position: absolute; top: 12px; left: 0; transform: translateX(-50%); font: 400 12.5px/1 var(--serif); letter-spacing: .03em; color: var(--muted); text-decoration: none; padding: 4px 3px; font-variant-numeric: lining-nums; }
.marks a:hover, .marks a[aria-current] { color: var(--ink); }

/* ---- his rooms ---- */
.rooms { width: min(var(--wide), calc(100% - 2 * var(--m))); margin: 0 auto; padding: 120px 0 40px; }
.rooms-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 0 6vw; padding-bottom: 28px; margin-bottom: 36px; border-bottom: 1px solid var(--faint); }
.rooms-head h2 { margin: 0; font: 400 clamp(40px, 5vw, 72px) / 1 var(--serif); letter-spacing: -.01em; }
.rooms-head p { margin: 0; max-width: 26em; font: 400 18px/1.5 var(--serif); color: var(--muted); }
.room-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 3vw; }
.room-list a { display: block; text-decoration: none; }
.room-list img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #e6dfd2; }
.room-list span { display: block; margin-top: 12px; font: 400 18px/1.35 var(--serif); }
.room-list a:hover span { text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: .18em; }

.colophon { width: min(var(--wide), calc(100% - 2 * var(--m))); margin: 0 auto; padding: 56px 0 72px; }
.more { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 28px; border-top: 1px solid var(--faint); font: 400 13px/1.4 var(--serif); letter-spacing: .16em; text-transform: uppercase; }
.more a { text-decoration: none; color: var(--muted); }
.more a:hover { color: var(--ink); }
.colophon p { max-width: 46em; margin: 28px 0 0; font: italic 400 14px/1.6 var(--serif); color: var(--muted); }

/* ---- without script: the editions one after another ---- */
html:not(.js) .stage { position: static; height: auto; display: block; }
html:not(.js) .page { height: auto; }
html:not(.js) .st { position: static; opacity: 1; display: block; margin-bottom: 48px; }
html:not(.js) .year, html:not(.js) .clock, html:not(.js) .ev { display: none; }
html:not(.js) .sr { position: static; width: auto; height: auto; clip: auto; font: 400 40px/1 var(--num); }

/* ---- a phone: the face above, the page below ---- */
@media (max-width: 820px), (max-height: 560px) {
  :root { --ph: min(40svh, calc(100vw - 48px)); --pw: var(--ph); }
  .spread { grid-template-columns: 1fr; padding-top: 16px; row-gap: 10px; }
  .plate { width: var(--pw); }
  .frame { width: var(--pw); height: var(--ph); }
  .face { object-position: 50% 38%; }
  .captions { height: 2.9em; margin-top: 7px; font-size: 11.5px; line-height: 1.45; }
  .spread { width: 100%; }
  .page { margin: 0 24px; height: calc(var(--stage) - var(--ph) - 2.9em - 7px - 16px - 10px - 64px - 8px); max-width: none; }
  .year { font-size: 52px; top: -.12em; }
  .st { grid-template-rows: 52px auto 1fr auto; }
  .ev { grid-template-rows: 52px 1fr; }
  .imprint { margin-top: 8px; font-size: 11px; }
  .head { font-size: 11px; margin-bottom: .45em; }
  .line { font-size: 27px; }
  .line.last { font-size: 23px; }
  .fact { font-size: 14.5px; line-height: 1.42; }
  .event { font-size: 19px; }
  .intro { grid-template-rows: auto auto 1fr auto; }
  .name { font-size: 46px; }
  .his-line { font-size: 16px; }
  .epigraph p { font-size: 15px; line-height: 1.45; }
  .epigraph footer { font-size: 12.5px; }
  .cue { font-size: 13px; }
  .clock { width: auto; margin: 0 24px; height: 64px; }
  .track { top: 26px; }
  .marks li { top: 26px; }
  .marks a { font-size: 11px; padding: 4px 1px; }
  .marks li:nth-child(2) a { display: none; }   /* ’56 sits a year from 1855: its mark alone */
  .rooms { width: auto; margin: 0 24px; padding: 72px 0 24px; }
  .rooms-head { grid-template-columns: 1fr; gap: 12px; }
  .room-list { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .room-list span { font-size: 15.5px; }
  .colophon { width: auto; margin: 0 24px; padding: 40px 0 56px; }
}
@media (max-width: 820px) and (min-height: 561px) and (max-aspect-ratio: 3/4) { .spread { justify-items: stretch; } .plate { justify-self: center; } }