/* The rooms on the house floor (2026-10-01). Layout and wardrobe only: every motion value here is
   the kit's (tokens.css), and the floor (base.css, components.css) is untouched. The three
   grounds are the acts: act one on the deeper cream, act two on the kit's off-white, act three on
   card white; the Log wears the off-white, the Work the cream. */
:root {
  --gutter: max(20px, 4rem);
  --cream: #F1F0EA;
  --dim: #75849A; /* the hero's grey last line: 3.3:1 on the cream (his GO 2026-10-07; #8E9AA3 was 2.5:1, the floor for display type is 3) */
}
body { font-weight: 300; }
h1, h2, h3 { line-height: 1.02; }
a { text-decoration: none; }
p { max-width: 36em; }

@keyframes lift { from { transform: translateY(110%); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise, var(--rise-lg))); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- the first scene: a line and a number on midnight, then the panel lifts away ---------- */
.preloader { background: var(--color-ink); color: var(--color-bg); padding: 0 var(--gutter) max(28px, 4rem); }
.js .preloader { justify-content: flex-end; }
.preloader__wordmark { position: absolute; top: 16px; left: var(--gutter); font-size: 15px; font-weight: 500; animation: fade var(--dur-base) var(--ease-out) both; animation-delay: calc(var(--lead) + 2 * var(--stagger)); }
.preloader__footer { display: block; }
.preloader__text { display: block; overflow: hidden; font-size: 15px; color: #9DB0C0; margin-bottom: 10px; }
.preloader__text span { display: block; animation: lift var(--dur-slow) var(--ease-out) both; animation-delay: var(--lead); }
.preloader__number { display: block; overflow: hidden; font: 500 clamp(64px, 16vw, 160px) / .9 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; animation: lift var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--lead) + var(--stagger)); }
.preloader__track { margin-top: 18px; height: 1px; background: rgba(248, 249, 247, .25); }
.preloader__line { height: 100%; background: var(--color-bg); transform: scaleX(0); transform-origin: left; }

/* ---------- the nav: a few plain words, the wordmark in the middle, one ember when the hero's has gone ---------- */
.navigation { position: fixed; inset: 0 0 auto 0; z-index: var(--z-navigation); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 16px var(--gutter); border: 0; font-weight: 400; font-size: 15px; color: var(--color-body); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background-color: color-mix(in srgb, var(--ground, #F1F0EA) 86%, transparent); transition: opacity var(--dur-base) var(--ease-out) calc(var(--lead) + 7 * var(--stagger)), background-color var(--route-duration) var(--ease-out); }
html.is-loading .navigation { opacity: 0; transition: none; }
.navigation__links { gap: 22px; }
.navigation__link { transition: color var(--dur-fast) var(--ease-out); }
.navigation__link:hover { color: var(--color-ink); }
.navigation__link::after { bottom: -3px; height: 1.5px; transition: transform var(--dur-base) var(--ease-scroll); transform-origin: right; }
.navigation__link:hover::after, .navigation__link[aria-current]::after { transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.wordmark { display: inline-flex; align-items: center; justify-content: center; font-weight: 500; color: var(--color-ink); white-space: nowrap; letter-spacing: -.01em; text-align: center; }
.wordmark__mark { display: none; width: 22px; height: 22px; }
.navigation__right { position: relative; display: flex; justify-content: flex-end; align-items: center; min-height: 36px; }
.navigation__word { transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.navigation__word:hover { color: var(--color-ink); }
.navigation__btn { position: absolute; right: 0; top: 50%; translate: 0 -50%; opacity: 0; transform: translateY(var(--rise-sm)); pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-overshoot), background var(--dur-fast) var(--ease-out); }
html[data-ember="nav"] .navigation__word { opacity: 0; pointer-events: none; }
html[data-ember="nav"] .navigation__btn { opacity: 1; transform: none; pointer-events: auto; }
html[data-ember="nav"] .navigation__btn:hover { transform: scale(1.04); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
@media (min-width: 768px) { .navigation { font-size: 16px; grid-template-columns: 1fr auto 1fr; } }
@media (max-width: 767px) {
  .sec .bone { position: relative; left: auto; top: auto; width: auto; margin: -8vh 0 28px; }
  /* On a phone the words scroll under the nav at close range; a frosted strip takes whatever ground the act is wearing. */
  .navigation { padding: 14px var(--gutter); font-size: 14px; grid-template-columns: auto 1fr auto; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .wordmark { order: -1; }
  .wordmark__text { display: none; }
  .wordmark__mark { display: block; }
  .navigation__links { gap: 14px; justify-content: center; }
  .navigation__word { display: none; }
  .navigation__btn { position: static; translate: none; font-size: 13px; padding: 9px 12px; }
}

/* ---------- the one ember object: a state change, the personality in the transition ---------- */
.btn { display: inline-flex; align-items: center; background: var(--color-accent); color: var(--color-on-accent); font-family: var(--font-display); font-weight: 500; font-size: 15px; padding: 13px 18px; border-radius: var(--radius-pill); white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-overshoot); }
.btn:hover { background: var(--color-accent-strong); transform: scale(1.04); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:active { transform: scale(.98); transition-duration: var(--dur-fast); }
.btn--small { font-size: 14px; padding: 10px 14px; }

/* an underline that grows from the left, never moves */
.u { position: relative; padding-bottom: 2px; }
.u::after, .u::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--color-line); }
.u::before { background: var(--color-ink); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-base) var(--ease-scroll); }
.u:hover::before { transform: scaleX(1); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.link { display: inline-block; margin-top: 34px; font-weight: 400; font-size: max(17px, 1.8rem); color: var(--color-ink); }
.link + .link { margin-left: 28px; }
.entry__post { margin-top: 22px; }

/* ---------- act one: the opening, pinned. the figure is held for two more screens while the lines arrive ---------- */
.hero { position: relative; height: 300svh; }
.hero__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gutter) max(28px, 4rem); }
.hero__mark { position: absolute; z-index: 0; top: 8%; right: 7%; height: 42%; width: auto; pointer-events: none; user-select: none; }
.hero__foot { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; }
.hero h1 { font-size: clamp(38px, 9.6vw, 84px); max-width: 11ch; }
.hero h1 .dim { color: var(--dim); }
.hero h1 .l { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.hero h1 .l .t { display: block; transform: translateY(110%); }
.hero.is-in h1 .l:first-child .t { animation: lift var(--dur-slow) var(--ease-out) both; animation-delay: var(--lead); }
/* On the phone (no canvas) the figure settles last, behind the words. On desktop the plane fades in on the canvas instead; animating the image there would fight img[data-gl-ready]. */
@media (max-width: 767px) { .hero__mark { opacity: 0; } .hero.is-in .hero__mark { animation: rise var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--lead) + var(--dur-base)); } }
.hero__row { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hero__cap { font-family: var(--font-mono); font-size: 11px; line-height: 1.55; letter-spacing: .04em; color: var(--color-body); opacity: 0; }
.hero__action { display: inline-block; opacity: 0; }
.hero__cap .t, .hero__action .t { display: block; }
@media (min-width: 768px) {
  .hero__mark { top: max(8%, 84px); right: 13%; height: min(84%, calc(100% - 100px)); } /* the crook starts under the nav strip on a short screen too */
  .hero__foot { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .hero__row { flex-direction: column; align-items: flex-end; gap: 18px; padding-bottom: 6px; }
  .hero__cap { max-width: 250px; font-size: 11.5px; }
}

/* ---------- the timed opening (his read, 2026-10-03): the hero arrives on a timer when the page loads, not by scroll.
   One screen, not pinned. Kit values only: lines one stagger step apart after the lead-in, the caption after them,
   the button fading in at the fast duration so it never pops (decoration follows content). ---------- */
.hero--timed { height: 100svh; }
.hero--timed .hero__pin { position: relative; }
@media (max-width: 767px) { .hero--timed .hero__mark { top: 11%; } } /* the crook starts under the phone's nav strip, not behind it */
.hero--timed.is-in h1 .l .t { animation: lift var(--dur-slow) var(--ease-out) both; animation-delay: var(--lead); }
.hero--timed.is-in h1 .l:nth-child(2) .t { animation-delay: calc(var(--lead) + var(--stagger)); }
.hero--timed.is-in h1 .l:nth-child(3) .t { animation-delay: calc(var(--lead) + 2 * var(--stagger)); }
.hero--timed.is-in .hero__cap { --rise: var(--rise-sm); animation: rise var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--lead) + 3 * var(--stagger) + var(--dur-base)); }
.hero--timed.is-in .hero__action { animation: fade var(--dur-fast) var(--ease-out) both; animation-delay: calc(var(--lead) + 4 * var(--stagger) + var(--dur-base)); }

/* ---------- building from Orlando: the live clock and the places; an ordinary section since 2026-10-03, nothing pinned ---------- */
.orlando h2 { font-size: clamp(32px, 6.2vw, 60px); max-width: 12ch; }
.clock { display: block; margin-top: 18px; font-family: var(--font-mono); font-size: clamp(26px, 4.6vw, 52px); font-weight: 400; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.clock small { display: block; margin-top: 6px; font-family: var(--font-display); font-size: max(15px, 1.6rem); color: var(--color-body); letter-spacing: 0; }
.orlando__lead { font-size: max(18px, 1.9rem); line-height: 1.5; color: var(--color-ink); max-width: 30em; }
.places { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.places li { font-weight: 500; font-size: clamp(22px, 3.6vw, 38px); line-height: 1.12; letter-spacing: -.02em; padding-bottom: .06em; margin-bottom: -.06em; }

/* ---------- the middle and the closing ---------- */
.sec { position: relative; padding: 22vh var(--gutter); }
.grid { display: grid; grid-template-columns: 1fr; gap: 28px; max-width: 1240px; }
.grid h2 { font-size: clamp(32px, 6.2vw, 60px); max-width: 14ch; }
.grid .text { font-size: max(19px, 1.9rem); line-height: 1.55; color: var(--color-ink); max-width: 36em; }
.grid .text p + p { margin-top: 1.1em; }
.grid .text .pull { font-family: var(--font-serif); font-style: italic; font-size: 1.12em; }
@media (min-width: 768px) {
  .sec { padding: 24vh var(--gutter); }
  .grid { grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
  .grid .text { font-size: max(20px, 2.1rem); }
}

/* where the log left off: the last days as a list, the first card as the picture that travels into the Log */
.log { display: grid; grid-template-columns: 1fr; gap: 6px 28px; margin: 0; }
.log dt { font-weight: 500; font-size: clamp(26px, 4.6vw, 40px); line-height: 1; letter-spacing: -.02em; padding-top: 30px; }
.log dt:first-child { padding-top: 0; }
.log dd { margin: 0; font-size: max(18px, 1.9rem); line-height: 1.45; color: var(--color-ink); max-width: 30em; }
.log dd.when { font-size: 15px; color: var(--color-body); }
@media (min-width: 768px) {
  .log { grid-template-columns: 120px 1fr; }
  .log dt { grid-column: 1; }
  .log dd { grid-column: 2; }
  .log dt + dd { padding-top: 30px; }
  .log dt:first-child + dd { padding-top: 0; }
  .log dd { font-size: max(20px, 2.1rem); }
}
.log-figure { margin-top: 40px; max-width: 320px; }
.media-link { display: block; }
.log-figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.log-figure figcaption { margin-top: 10px; font-size: 15px; color: var(--color-body); }
.media-link img { transition: opacity var(--dur-fast) var(--ease-out); }

/* the bones: the switch. the knob lands with the one nudge the system allows */
.switch { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; background: none; border: 0; padding: 0; font: inherit; font-weight: 400; font-size: max(17px, 1.8rem); color: var(--color-ink); cursor: pointer; }
.switch .track { position: relative; width: 46px; height: 26px; border-radius: 999px; background: var(--color-line); transition: background var(--dur-base) var(--ease-out); flex-shrink: 0; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 42, 68, .25); transition: transform var(--dur-base) var(--ease-overshoot); }
.switch:hover .track { background: var(--dim); }
.switch[aria-pressed="true"] .track, .switch[aria-pressed="true"]:hover .track { background: var(--color-ink); }
.switch[aria-pressed="true"] .track::after { transform: translateX(20px); }
.switch .on, .switch[aria-pressed="true"] .off { display: none; }
.switch[aria-pressed="true"] .on { display: inline; }
.map-link { display: inline-block; margin: 18px 0 0; font-size: max(15px, 1.6rem); color: var(--color-body); transition: color var(--dur-fast) var(--ease-out); }
.map-link:hover { color: var(--color-ink); }

/* bones mode: the labels arrive one step apart, the outlines after them (decoration follows content) */
[data-c] { outline: 1.5px dashed transparent; outline-offset: -10px; transition: outline-color var(--dur-base) var(--ease-scroll); }
body.bones [data-c] { outline-color: var(--color-ink); transition-delay: calc(var(--dur-base) + var(--i, 0) * var(--stagger)); }
.bone { display: none; position: absolute; width: max-content; left: var(--gutter); top: 72px; z-index: 2; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; letter-spacing: .02em; color: var(--color-ink); background: var(--color-bg); padding: 8px 10px; border: 1px solid var(--color-ink); max-width: min(560px, calc(100% - 2 * var(--gutter))); }
.bone b { font-weight: 400; color: var(--color-accent); }
body.bones .bone { display: block; --rise: var(--rise-sm); animation: rise var(--dur-base) var(--ease-scroll) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.act { display: none; position: absolute; left: var(--gutter); top: -13px; z-index: 2; font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; color: #fff; background: var(--color-ink); padding: 5px 9px; }
body.bones .act { display: block; animation: fade var(--dur-fast) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.hero .act { top: 52px; }
.hero .bone { top: 88px; }

/* how I work: three lines at scale, the same move as the hero */
.creed { font-weight: 500; font-size: clamp(30px, 5.6vw, 54px); line-height: 1.08; letter-spacing: -.02em; max-width: 12ch; }

/* the studying section: one line per subject, the shelf under it */
.studying .text .shelf { font-size: .9em; color: var(--color-body); }

/* act three: the door */
.close .grid h2 { font-size: clamp(36px, 7.4vw, 72px); max-width: 12ch; }
.door { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 30px; }
.door .addr { font-size: max(16px, 1.7rem); color: var(--color-body); }
.door .addr a { transition: color var(--dur-fast) var(--ease-out); }
.door .addr a:hover { color: var(--color-ink); }
.roads { list-style: none; margin: 72px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.roads a { display: block; font-weight: 500; font-size: clamp(24px, 4.6vw, 36px); line-height: 1.1; letter-spacing: -.02em; color: var(--color-ink); transition: color var(--dur-fast) var(--ease-out); }
.roads a small { display: block; margin-top: 4px; font-weight: 300; font-size: max(15px, 1.6rem); line-height: 1.4; letter-spacing: 0; color: var(--color-body); max-width: 30em; transition: color var(--dur-fast) var(--ease-out); }
.roads a:hover { color: var(--color-primary-strong); }
.roads a:hover small { color: var(--color-ink); }
.roads .films a { display: inline-block; font-size: 15px; font-weight: 400; background: var(--color-primary-strong); color: var(--color-bg); padding: 9px 14px; border-radius: 999px; margin-top: 10px; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-overshoot); }
.roads .films a:hover { background: #000; color: #fff; transform: scale(1.04); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }

footer { padding: 40px var(--gutter) 48px; color: var(--color-body); font-size: 15px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--color-line); }
footer p { max-width: 40em; }
@media (min-width: 768px) { footer { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 40px; } }

/* ---------- the Log room: the archive, newest first, one entry per screen ---------- */
.room-head { padding: calc(80px + 10vh) var(--gutter) 6vh; }
.room-head h1 { font-size: clamp(40px, 8vw, 92px); max-width: 10ch; }
.room-head p { margin-top: 24px; font-size: max(18px, 1.9rem); line-height: 1.5; color: var(--color-ink); max-width: 32em; }
.entry { position: relative; padding: 14vh var(--gutter); scroll-margin-top: 72px; border-top: 1px solid var(--color-line); }
.entry__grid { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 1240px; }
.entry__day { font-weight: 500; font-size: clamp(30px, 5.6vw, 54px); line-height: 1; letter-spacing: -.02em; }
.entry__meta { font-size: 15px; color: var(--color-body); line-height: 1.5; margin-top: 10px; }
.entry h2 { font-size: clamp(26px, 4.4vw, 44px); max-width: 16ch; }
.entry__what { margin-top: 20px; font-size: max(18px, 1.9rem); line-height: 1.55; color: var(--color-ink); max-width: 34em; }
.entry__figure { margin-top: 30px; max-width: 420px; }
.entry__figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.entry__figure figcaption { margin-top: 10px; font-size: 15px; color: var(--color-body); }
.room-foot { padding: 10vh var(--gutter) 16vh; }
@media (min-width: 768px) {
  .entry { padding: 16vh var(--gutter); }
  .entry__grid { grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
}

/* ---------- the Work room (2026-10-04): the work hangs on the wall.
   His read of the first build: "the background in every section is split and repeated." So the plaster is ONE
   seamless surface under the whole page (a photographed stretch of the room's wall, evened and mirrored so it
   never shows an edge), with one slow wash of window light over it; and every frame is its own object: the
   photographed oak frame cut on its edges, a shadow thrown down and to the left (the window is on the right),
   the site laid on the frame's measured board (2.542 / 4.776 / 94.249 / 91.228 percent) ---------- */
.page--work { background-color: #EBE4D7; background-image: linear-gradient(100deg, rgba(120, 100, 70, .10), rgba(255, 250, 238, 0) 38%, rgba(255, 250, 238, .30) 78%, rgba(255, 252, 244, .12)), url("../assets/work/wall.jpg"); background-size: 100% 100%, 760px 760px; background-repeat: no-repeat, repeat; }
.page--work footer { border-top-color: rgba(15, 42, 68, .16); }

.worktop { min-height: 76svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px var(--gutter) 7vh; }
.worktop h1 { font-size: clamp(64px, 19vw, 300px); line-height: .88; letter-spacing: -.04em; }
.worktop p { margin-top: 3vh; font-size: max(18px, 1.9rem); line-height: 1.5; color: var(--color-ink); max-width: 30em; }

.hang { position: relative; display: grid; grid-template-columns: 1fr; gap: 28px; padding: 9vh var(--gutter) 9vh; }
/* the frame: hung a touch off true, it settles as it comes into view, like something just put on its nail */
.hang__frame { position: relative; width: 100%; aspect-ratio: 1652 / 1026; rotate: var(--tilt, -1.4deg); transform-origin: 50% -6%; opacity: 0; box-shadow: -14px 20px 34px rgba(70, 52, 30, .20), -4px 6px 10px rgba(70, 52, 30, .20);
  transition: rotate var(--route-duration) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.hang.is-in .hang__frame { rotate: 0deg; opacity: 1; }
.hang--left .hang__frame { --tilt: 1.4deg; }
.hang__oak { position: absolute; inset: 0; width: 100%; height: 100%; }
.hang__work { position: absolute; display: block; overflow: hidden; left: 2.4%; top: 4.6%; width: 94.5%; height: 91.5%; background: #fff; }
.hang__work img { display: block; width: 100%; height: auto; will-change: transform; }
.hang__work::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(40, 30, 15, .10), inset 3px 3px 9px rgba(40, 30, 15, .24); transition: box-shadow var(--dur-fast) var(--ease-out); }
.hang__work:hover::after { box-shadow: inset 0 0 0 1px rgba(40, 30, 15, .10), inset 2px 2px 5px rgba(40, 30, 15, .12); }
.hang__for { font-size: 15px; color: var(--color-body); }
.hang h2 { margin-top: 10px; font-size: clamp(34px, 4.6vw, 68px); max-width: 11ch; }
.hang__line { margin-top: 16px; font-size: max(18px, 1.9rem); line-height: 1.5; color: var(--color-ink); max-width: 24em; }
.hang .link { margin-top: 22px; }
@media (min-width: 768px) {
  .hang { grid-template-columns: repeat(12, 1fr); gap: 0 28px; align-items: center; padding: 15vh var(--gutter); }
  .hang__frame { grid-row: 1; }
  .hang__text { grid-row: 1; }
  /* three hanging heights and sizes, so the wall reads as hung by a person, not laid out by a grid */
  .hang--right .hang__frame { grid-column: 7 / 13; }
  .hang--right .hang__text { grid-column: 1 / 6; }
  .hang--left .hang__frame { grid-column: 1 / 7; }
  .hang--left .hang__text { grid-column: 8 / 13; }
  .hang--b.hang--right .hang__frame { grid-column: 6 / 13; }
  .hang--b.hang--left .hang__frame { grid-column: 1 / 8; }
  .hang--b { padding-top: 9vh; }
  .hang--c.hang--right .hang__frame { grid-column: 8 / 13; }
  .hang--c.hang--left .hang__frame { grid-column: 2 / 7; }
  .hang--c { padding-top: 20vh; }
}

/* the rest: a plain list, type leading */
.also .grid h2 { font-size: clamp(34px, 5vw, 68px); max-width: 9ch; }
.also__list { list-style: none; margin: 0; padding: 0; }
.also__list a { display: grid; grid-template-columns: 1fr; gap: 2px 28px; padding: 18px 0; border-bottom: 1px solid rgba(15, 42, 68, .16); transition: color var(--dur-fast) var(--ease-out); }
.also__list li:first-child a { border-top: 1px solid rgba(15, 42, 68, .16); }
.also__list b { font-family: var(--font-display); font-weight: 500; font-size: clamp(21px, 2.2vw, 30px); letter-spacing: -.02em; }
.also__list span { font-size: max(15px, 1.6rem); color: var(--color-body); }
.also__list a:hover { color: var(--color-primary-strong); }
@media (min-width: 768px) { .also__list a { grid-template-columns: 5fr 4fr; align-items: baseline; } }

/* the last frame is empty: the ask */
.hang--empty .hang__text .btn { margin-top: 26px; }
.hang--empty .addr { margin-top: 12px; font-size: max(16px, 1.7rem); color: var(--color-body); }
.hang--empty .ways { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; font-family: var(--font-display); font-weight: 500; font-size: max(18px, 1.9rem); }
.hang--empty .ways .films { font-size: 15px; font-weight: 400; background: var(--color-primary-strong); color: var(--color-bg); padding: 9px 14px; border-radius: 999px; }
@media (max-width: 767px) { .hang--empty .btn { width: 100%; justify-content: center; padding-block: 16px; } }

.reduced-motion .hang__frame, .boot-failed .hang__frame { rotate: 0deg !important; opacity: 1 !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .hang__frame { rotate: 0deg !important; opacity: 1 !important; } }

/* ============ the storyboard build (2026-10-04): every screen its own poster; every picture one behaviour ============
   His read: "the hero is cool, then it's boring and no longer telling a story visually", then "more motion".
   Rule 11 of the award-craft skill: the lead changes hands down the page (figure, type, picture, type, picture,
   type, picture, picture). Kit values only; the one new token is --picture-drift. */
h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; margin: 0; }
.text { font-size: max(19px, 1.9rem); line-height: 1.55; color: var(--color-ink); max-width: 36em; }
.text p + p { margin-top: 1.1em; }
.text .pull { font-family: var(--font-serif); font-style: italic; font-size: 1.12em; }
@media (min-width: 768px) { .text { font-size: max(20px, 2.1rem); } }

/* ---- every picture: rises into view by one wipe, settles from a slight enlargement, drifts against the scroll ---- */
/* the wipe sits on the picture inside the box, not on the box: an observed element that clips itself to nothing never reports as seen */
.pic { position: relative; overflow: hidden; }
.pic > video, .pic > img { position: absolute; left: 0; top: calc(-1 * var(--picture-drift)); width: 100%; height: calc(100% + 2 * var(--picture-drift)); object-fit: cover; scale: 1.08; clip-path: inset(100% 0 0 0); transition: scale var(--route-duration) var(--ease-out), clip-path var(--dur-slow) var(--ease-scroll); }
.pic.is-in > video, .pic.is-in > img { scale: 1; clip-path: inset(0); }
.pic[data-pic="fixed"] > video, .pic[data-pic="fixed"] > img { top: 0; height: 100%; }

/* ---- the line that returns: a rule that ends in the crook's curve, growing from the left ---- */
.crook { display: flex; align-items: flex-end; width: min(100%, 440px); height: 34px; }
.crook i { flex: 1; height: 2px; margin-bottom: 2px; background: var(--color-ink); transform: scaleX(0); transform-origin: left; transition: transform var(--route-duration) var(--ease-out); }
.crook svg { flex: none; display: block; width: 30px; height: 34px; margin-left: -1px; overflow: visible; fill: none; stroke: var(--color-ink); stroke-width: 2; }
.crook path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-slow) var(--ease-out) calc(var(--route-duration) - var(--dur-base)); }
.crook.is-in i { transform: scaleX(1); }
.crook.is-in path { stroke-dashoffset: 0; }

/* ---- 2 · the pocket watch (his pick over the full-screen digits, 2026-10-04): a photographed watch, hands drawn on its real dial ---- */
.watchscreen { position: relative; }
.watch { container-type: inline-size; aspect-ratio: 1 / 1; --cx: 50.05%; --cy: 62.67%; --r: 14.1cqw; }
.watch > img { scale: 1 !important; }  /* the hands are registered to the dial, so the picture does not settle from an enlargement */
.watch__wide { display: none; }
.watch__hands { position: absolute; left: var(--cx); top: var(--cy); width: 0; height: 0; opacity: 0; transition: opacity var(--dur-base) var(--ease-out) var(--dur-slow); filter: drop-shadow(0 .14cqw .12cqw rgba(30, 25, 15, .38)); }
.watch.is-in .watch__hands { opacity: 1; }
.watch__hands i { position: absolute; left: 0; bottom: 0; translate: -50% 0; transform-origin: 50% 100%; background: #1B2230; }
.watch__hands .h { width: calc(var(--r) * .09); height: calc(var(--r) * .5); rotate: var(--h, 0deg); clip-path: polygon(50% 0, 100% 76%, 70% 100%, 30% 100%, 0 76%); }
.watch__hands .m { width: calc(var(--r) * .062); height: calc(var(--r) * .8); rotate: var(--m, 0deg); clip-path: polygon(50% 0, 100% 86%, 70% 100%, 30% 100%, 0 86%); }
.watch__hands .s { width: max(1px, calc(var(--r) * .016)); height: calc(var(--r) * .86); rotate: var(--s, 0deg); }
.watch__hands::after { content: ""; position: absolute; left: 0; top: 0; width: calc(var(--r) * .12); height: calc(var(--r) * .12); translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #D2B06A, #6F5524); }
.watchscreen__text { padding: 6vh var(--gutter) 10vh; }
.watchscreen h2 { font-size: clamp(32px, 5vw, 68px); max-width: 9ch; }
.watchscreen__text p { margin-top: 14px; font-size: max(18px, 1.9rem); color: var(--color-ink); }
@media (min-width: 768px) {
  .watch { aspect-ratio: 2688 / 1520; --cx: 74.94%; --cy: 62.47%; --r: 7.7cqw; }
  .watch__wide { display: block; }
  .watch__close { display: none; }
  .watchscreen__text { position: absolute; left: 0; top: 50%; translate: 0 -50%; max-width: 50%; padding: 0 var(--gutter); }
}

/* ---- 3 · the days: one held picture, the number leads ---- */
.days { position: relative; display: grid; grid-template-columns: 1fr; }
.days__pics { position: sticky; top: 0; height: 46svh; z-index: 1; overflow: hidden; background: var(--color-line); }
.daypic { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path 0s linear var(--dur-slow); }
.daypic.is-on { clip-path: inset(0); transition: clip-path var(--dur-slow) var(--ease-scroll); }
.daypic video, .daypic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.days__list { padding: 8vh var(--gutter) 12vh; }
.days__list h2 { font-size: clamp(24px, 3vw, 40px); }
.day { display: grid; grid-template-columns: auto 1fr; gap: 0 clamp(14px, 2.4vw, 40px); align-items: start; padding: 8vh 0; opacity: .38; transition: opacity var(--dur-base) var(--ease-out); }
.day.is-on { opacity: 1; }
.day__n { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(110px, 20vw, 320px); line-height: .78; letter-spacing: -.05em; }
.day__when { font-size: 15px; line-height: 1.4; color: var(--color-body); }
.day h3 { margin-top: 10px; font-size: clamp(21px, 2.3vw, 34px); line-height: 1.22; font-weight: 400; max-width: 18em; }
.days__links { max-width: none; margin-top: 4vh; display: flex; flex-wrap: wrap; gap: 14px 28px; }
.days__links .link { margin: 0; }
@media (min-width: 768px) {
  .days { grid-template-columns: 40% 1fr; }
  .days__pics { height: 100svh; }
  .days__list { padding: 18vh var(--gutter) 22vh clamp(28px, 4.5vw, 72px); }
  .day { padding: 16vh 0; }
}

/* ---- 4 · the page shows its own drawings ---- */
.bonesscreen .grid h2 { font-size: clamp(36px, 7vw, 88px); max-width: 13ch; }
.boards { list-style: none; margin: 9vh 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 12px; max-width: 1240px; }
.boards li { opacity: 0; transform: translateY(var(--rise-sm)); transition: opacity var(--dur-base) var(--ease-scroll), transform var(--dur-base) var(--ease-scroll); transition-delay: calc(var(--i) * var(--stagger)); }
.boards.is-in li { opacity: 1; transform: none; }
.boards img { aspect-ratio: 16 / 10; object-fit: cover; outline: 1px dashed var(--color-ink); outline-offset: 3px; }
.boards span { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; line-height: 1.3; color: var(--color-body); }
@media (min-width: 768px) { .boards { grid-template-columns: repeat(8, 1fr); gap: 16px; } }

/* ---- 5 and 8 · a photograph of the bright room, with the words on its empty wall ---- */
.wallscreen { position: relative; }
.wallscreen__pic { height: 72svh; }
.wallscreen__pic > video { display: none; }
.wallscreen--door .wallscreen__pic { height: 44svh; }
.wallscreen--door .wallscreen__pic > video { display: block; object-position: 62% 80%; }
.wallscreen__text { position: relative; z-index: 1; padding: 7vh var(--gutter) 12vh; }
.wallscreen .creed { font-size: clamp(32px, 5vw, 68px); max-width: none; }
.wallscreen .text { margin-top: 5vh; max-width: 30em; }
.wallscreen--door h2 { font-size: clamp(36px, 6.4vw, 88px); max-width: 10ch; }
.wallscreen--door .crook { margin: 18px 0 4px; }
.wallscreen--door .text { margin-top: 3vh; }
.wallscreen--door .roads { margin-top: 56px; }
@media (max-width: 767px) { .wallscreen--door .door .btn { width: 100%; justify-content: center; padding-block: 16px; } .wallscreen--door .door { align-items: stretch; } }
@media (min-width: 768px) {
  /* picture and words share one grid cell, so the pinned picture releases exactly where the section ends
     (a negative margin lets a sticky box run a full screen past its section) */
  .wallscreen { display: grid; min-height: 100svh; }
  .wallscreen > .wallscreen__pic, .wallscreen > .wallscreen__text { grid-area: 1 / 1; }
  .wallscreen__pic, .wallscreen--door .wallscreen__pic { position: sticky; top: 0; height: 100svh; align-self: start; }
  .wallscreen__pic > video { display: block; }
  .wallscreen__tall { display: none; }
  .wallscreen--door .wallscreen__pic > video { object-position: center; }
  .wallscreen__text { max-width: 54%; padding: 22vh var(--gutter) 18vh; }
  .wallscreen--creed .wallscreen__text { padding-bottom: 46vh; }
}

/* the door's picture travels: the photograph itself, moved by the browser (2026-10-04; the slowed video clip had
   in-between frames that pulsed against the real ones). Half a minute each way, eased at both ends, there and back. */
@keyframes slowpan { from { transform: translate3d(-1.7%, 0, 0) scale(1.05); } to { transform: translate3d(1.7%, 0, 0) scale(1.05); } }
.wallscreen--door .wallscreen__pic > img { object-position: 62% 80%; animation: slowpan 30s ease-in-out infinite alternate; animation-play-state: paused; }
.wallscreen--door .wallscreen__pic.is-in > img { animation-play-state: running; }
@media (min-width: 768px) { .wallscreen--door .wallscreen__pic > img { object-position: center; } }

/* ---- 6 · the shelf: the quiet beat ---- */
.shelfscreen .grid h2 { font-size: clamp(36px, 6.6vw, 92px); max-width: 11ch; }
.band { margin: 9vh calc(-1 * var(--gutter)) 0; height: clamp(170px, 26vw, 420px); }
.band > video { object-position: 12% 50%; }
.shelfscreen .shelf { margin-top: 14px; font-size: 15px; color: var(--color-body); }
@media (min-width: 768px) { .band > video { object-position: center; } }

/* ---- 7 · the film at its own shape; the score on the line ---- */
.filmscreen { position: relative; padding-bottom: 20vh; }
.film { width: 100%; aspect-ratio: 4 / 3; }
.filmscreen__row { display: grid; grid-template-columns: 1fr; gap: 26px; padding: 30px var(--gutter) 0; }
.filmscreen h2 { font-size: clamp(28px, 3.2vw, 46px); align-self: end; }
.score { position: relative; height: clamp(70px, 9vw, 130px); margin-bottom: 34px; }
.score__bars { position: absolute; inset: 0 30px 0 0; display: flex; align-items: flex-end; gap: 2px; }
.score__bars i { flex: 1; min-height: 1px; background: var(--color-ink); }
.score__head { position: absolute; left: calc(var(--play, 0) * (100% - 30px)); bottom: 0; width: 3px; height: 128%; background: var(--color-accent); }
.score .crook { position: absolute; left: 0; right: 0; bottom: -32px; width: 100%; }
/* the film's opening plays over its own silent loop, in the same frame, when it is asked for */
.film > .film__passage { z-index: 1; opacity: 0; background: #000; transition: opacity var(--dur-base) var(--ease-out), scale var(--route-duration) var(--ease-out), clip-path var(--dur-slow) var(--ease-scroll); }
.film.is-sounding > .film__passage { opacity: 1; }
/* the sound (2026-10-04, a first reader expected to hear something at "I started in music."): a quiet ink control,
   never the ember, since the score's mark is this screen's one ember. It plays on a tap only. */
.hear { display: grid; grid-template-columns: 46px auto; column-gap: 14px; align-items: center; justify-self: start; align-self: start; text-align: left; background: none; border: 0; padding: 0; color: var(--color-ink); cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: max(18px, 1.9rem); }
.hear i { grid-row: 1 / 3; position: relative; width: 46px; height: 46px; border: 1.5px solid currentColor; border-radius: 50%; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.hear i::before { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 14px; background: currentColor; transform: translate(-38%, -50%); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: clip-path var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.hear[aria-pressed=true] i::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); width: 12px; height: 12px; transform: translate(-50%, -50%); }
.hear small { grid-column: 2; font-family: var(--font-body, inherit); font-weight: 400; font-size: 15px; color: var(--color-body); }
.hear:hover i { transform: scale(1.06); }
.hear:active i { transform: scale(.96); }
.score__bars i { transition: opacity var(--dur-base) var(--ease-out); }
.score.is-sounding .score__bars i { opacity: .38; }
.score.is-sounding .score__head { transition: left .25s linear; }
@media (min-width: 768px) { .hear { grid-column: 1; grid-row: 2; margin-top: 4vh; } .filmscreen .text { grid-row: 2; } }
.filmscreen .text { margin-top: 2vh; }
@media (min-width: 768px) {
  .film { aspect-ratio: 2.29 / 1; }
  .filmscreen__row { grid-template-columns: 5fr 7fr; gap: 40px 48px; padding-top: 44px; }
  .filmscreen .text { grid-column: 2; margin-top: 4vh; }
}

/* ---- the bones' labels on the new screens ---- */
.watchscreen .act, .days .act, .wallscreen .act, .filmscreen .act { top: 52px; }
.watchscreen .bone, .days .bone, .wallscreen .bone, .filmscreen .bone { top: 88px; z-index: 4; }
@media (max-width: 767px) { .watchscreen .bone, .days .bone, .wallscreen .bone, .filmscreen .bone { position: relative; left: 0; top: 0; width: auto; margin: 76px var(--gutter) 12px; } }

/* ---- for someone who asked for no motion, or when the script did not start: every picture is simply there ---- */
.reduced-motion .daypic.is-on, .boot-failed .daypic.is-on { clip-path: none !important; transition: none !important; }
.reduced-motion .pic > *, .boot-failed .pic > * { scale: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
.reduced-motion .boards li, .boot-failed .boards li { opacity: 1 !important; transform: none !important; }
.reduced-motion .crook i, .boot-failed .crook i { transform: none !important; }
.reduced-motion .crook path, .boot-failed .crook path { stroke-dashoffset: 0 !important; }
.reduced-motion .day, .boot-failed .day { opacity: 1 !important; }
.reduced-motion .watch__hands, .boot-failed .watch__hands { opacity: 1 !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .daypic.is-on { clip-path: none !important; }
  .pic > * { scale: 1 !important; transform: none !important; clip-path: none !important; }
  .boards li { opacity: 1 !important; transform: none !important; }
  .crook i { transform: none !important; }
  .crook path { stroke-dashoffset: 0 !important; }
  .day { opacity: 1 !important; }
  .watch__hands { opacity: 1 !important; }
}

/* ---------- nothing moves for someone who asked it not to ---------- */
.reduced-motion .hero .t, .reduced-motion [data-scrub], .reduced-motion [data-scrub] .t, .reduced-motion .places li .t, .reduced-motion .hero__mark, .reduced-motion .hero__cap, .reduced-motion .hero__action,
.boot-failed .hero .t, .boot-failed [data-scrub], .boot-failed [data-scrub] .t, .boot-failed .places li .t, .boot-failed .hero__mark, .boot-failed .hero__cap, .boot-failed .hero__action { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
.reduced-motion .navigation, .boot-failed .navigation { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .hero .t, [data-scrub], [data-scrub] .t, .places li .t, .hero__mark, .hero__cap, .hero__action, .navigation { opacity: 1 !important; transform: none !important; }
  .bone, .act { animation: none !important; }
}

/* ---------- the floor (course 17, 2026-10-07): every control at least 44 px tall and wide on a phone.
   Padding out, margin back, so the hit area grows and the layout does not move. ---------- */
@media (max-width: 767px) {
  .navigation__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; margin: 0 -11px; }
  .wordmark { min-height: 44px; padding: 0 11px; margin: 0 -11px; }
  .navigation__links { gap: 18px; }
}
.btn { min-height: 44px; }
.link { padding: 10px 0; margin-bottom: -10px; }
.link { margin-top: 24px; }
.switch { padding: 9px 0; margin-top: 21px; margin-bottom: -9px; }
.door .addr a { display: inline-block; padding: 11px 0 13px; margin: -11px 0 -13px; }
.door .addr a::after, .door .addr a::before { bottom: 11px; }
.roads .films a { padding: 14px 16px; }

/* ---------- the Pause control (his yes, 2026-10-07): one word at the foot of the screen that stops the clips and
   the watch; a floor from course 17, not a decoration. Hidden while the first scene runs and when reduced motion
   already holds everything still. ---------- */
.motion { position: fixed; right: var(--gutter); bottom: 14px; z-index: var(--z-navigation); display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--color-line); border-radius: 999px; background: color-mix(in srgb, var(--ground, var(--color-bg)) 72%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--color-ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; opacity: 1; transition: opacity var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.motion:hover { color: var(--color-ink); border-color: var(--color-ink); }
html.is-loading .motion, html.reduced-motion .motion { opacity: 0; pointer-events: none; }