/* SEASONS Optical. The chapters after the walk-in: the eye test, the frames, the G2, the people, find us; the menu and the booking dialog.
   Tokens live in opening.css. One entrance language throughout: copy and photographs find focus. */

@property --f { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ---- the entrance: copy resolves from soft to sharp; photographs arrive through a soft copy ---- */
.chapter .fl, .menu .fl, .book .fl { transition: --f 1100ms var(--ease-out); transition-delay: var(--d, 0ms); }
.chapter .fl.is-in, .menu .fl.is-in, .book .fl.is-in { --f: 1; }
html:not(.sc-ready) .fl, html:not(.sc-ready) .chart-line { --f: 1; }
.plate-in { position: relative; overflow: hidden; margin: 0; background: var(--night-2); }
.plate-in img { width: 100%; height: 100%; object-fit: cover; }
.plate-in .plate-sharp { position: relative; }
.plate-in .plate-soft { position: absolute; inset: 0; opacity: 1; transition: opacity 1500ms var(--ease-out); pointer-events: none; }
.plate-in.is-in .plate-soft, html:not(.sc-ready) .plate-soft { opacity: 0; }
.plate-in figcaption { position: absolute; left: 1.1rem; bottom: 0.9rem; font-size: 0.8125rem; font-stretch: 92%; color: var(--paper-mute); }
[data-rate] { will-change: transform; }

/* ---- shared type for the chapters ---- */
.chapter { position: relative; background: var(--night); color: var(--paper); }
.statement { font-family: var(--serif); font-weight: 330; font-size: clamp(2.1rem, 0.8rem + 2.55vw, 3.5rem); line-height: 1.04; letter-spacing: -0.014em; }
.statement--small { font-size: clamp(1.7rem, 0.9rem + 1.6vw, 2.5rem); }
.statement .fl { display: block; }
.statement .hang { margin-left: 0.78em; }
.support { margin-top: 1.25rem; max-width: 44ch; color: var(--paper-mute); font-stretch: 92%; line-height: 1.55; }
.index-n { font-family: var(--sans); font-size: 0.75rem; font-stretch: 90%; font-weight: 500; letter-spacing: 0.1em; color: var(--paper-mute); }
.facts { margin: 0; }
.facts dt, .g2-facts dt, .find-facts dt { font-size: 0.75rem; font-stretch: 90%; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-mute); margin-bottom: 0.45rem; }
.g2-facts dd, .find-facts dd { margin: 0; line-height: 1.55; font-stretch: 96%; overflow-wrap: anywhere; }
.find-facts a, .menu-facts a, .book-facts a { text-decoration: none; border-bottom: 1px solid rgba(242,236,230,0.28); transition: color 150ms ease, border-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .find-facts a:hover, .menu-facts a:hover, .book-facts a:hover { color: var(--lacquer-bright); border-color: var(--lacquer-bright); } }
.running { cursor: pointer; }
.chapter .running.fl, .menu .running.fl, .book .running.fl { display: inline-flex; }
#film-toggle[aria-pressed="true"] .arrow { display: none; }
button.running { background: none; border: 0; padding: 0 0 0.16em; margin: 0; font: inherit; font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--paper); appearance: none; }
.hours-line { display: flex; align-items: center; gap: 0.55rem; color: var(--paper-mute); font-size: 0.9375rem; font-stretch: 92%; }
.hours-line .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--paper-mute); opacity: 0.7; flex: none; }
.hours-line.is-open { color: var(--paper); }
.hours-line.is-open .dot { background: var(--lacquer-bright); opacity: 1; box-shadow: 0 0 8px rgba(227,105,39,0.6); }

/* ---- the bar's menu control ---- */
.menu-btn { position: relative; background: none; border: 0; padding: 0.55rem 0 0.3rem; margin: 0 0 0 1.75rem; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.1rem; line-height: 1; color: var(--paper); cursor: pointer; }
.menu-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--paper); opacity: 0.32; }
.menu-rule::after { content: ""; position: absolute; inset: 0; background: var(--paper); transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .menu-btn:hover .menu-rule::after { transform: scaleX(1); } }
.menu-btn:active { transform: translateY(1px); }
.menu-btn[aria-expanded="true"] .menu-rule::after { transform: scaleX(1); background: var(--lacquer-bright); }
/* phones: the lockup takes the top left once inside (the photographed sign holds it at rest); Menu alone at the top right */
@media (max-width: 699px) { .menu-btn { order: 1; margin: 0; padding-top: 0.9rem; font-size: 1.05rem; } .bar { align-items: flex-start; } }

/* ---- the menu: the contents of the page, on night ---- */
.menu { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--night); color: var(--paper); opacity: 0; transition: opacity 320ms var(--ease-soft); z-index: 95; }
.menu::backdrop { background: transparent; }
.menu[open] { display: block; }
.menu.is-open { opacity: 1; }
.menu-inner { height: 100%; display: flex; flex-direction: column; padding: 1.45rem var(--gutter) var(--foot); overflow: auto; }
.menu-head { display: flex; align-items: baseline; justify-content: space-between; }
.menu-title { font-size: 0.8125rem; font-stretch: 90%; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-mute); }
.menu-close { font-size: 1.1rem; }
.menu-close .arrow { font-style: normal; color: var(--paper-mute); transition: color 180ms ease; }
.menu-list { list-style: none; margin: auto 0; padding: 0; max-width: 46rem; }
.menu-link { --f: 0; position: relative; display: flex; align-items: baseline; gap: 1.4rem; padding: 0.55rem 0 0.6rem; text-decoration: none; color: var(--paper); font-family: var(--serif); font-weight: 330; font-size: clamp(2rem, 1rem + 3.6vw, 4rem); line-height: 1.05; letter-spacing: -0.014em; }
.menu-link::before, .menu-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; }
.menu-link::before { background: var(--paper); opacity: 0.14; }
.menu-link::after { background: var(--paper); opacity: 0.6; transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .menu-link:hover::after { transform: scaleX(1); } }
.menu-link:active { transform: translateY(1px); }
.menu-link.is-here .index-n { color: var(--lacquer-bright); }
.menu-link .index-n { width: 2.2rem; flex: none; }
/* on wide screens the contents carry a photograph of the chapter under the pointer, finding focus as it changes */
.menu-photo { display: none; }
@media (min-width: 900px) {
  .menu-photo { display: block; position: absolute; right: var(--gutter); top: 6.2rem; bottom: 8rem; width: 36%; background: var(--night-2); overflow: hidden; }
  .menu-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: blur(14px); transform: scale(1.03); transition: opacity 700ms var(--ease-soft), filter 1200ms var(--ease-out), transform 1400ms var(--ease-out); }
  .menu-photo img.is-on { opacity: 1; filter: blur(0); transform: none; }
  .menu-list { max-width: 54%; }
}
.menu-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.2rem 2.5rem; padding-top: 2rem; }
.menu-facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-size: 0.9375rem; font-stretch: 92%; color: var(--paper-mute); }
.menu-foot .running--lead { margin-left: auto; }
@media (max-width: 699px) { .menu-inner { padding-top: 1.2rem; } .menu-link { gap: 1rem; padding: 0.5rem 0; } .menu-foot .running--lead { margin-left: 0; } }

/* ---- the booking dialog: the MyHealth1st widget, with the phone and email beside it ---- */
.book { width: min(100vw - 2 * var(--gutter), 76rem); height: min(100vh - 4rem, 52rem); height: min(100svh - 4rem, 52rem); max-width: none; max-height: none; padding: 0; border: 1px solid rgba(242,236,230,0.1); background: var(--night-2); color: var(--paper); opacity: 0; transform: translateY(0.6rem); transition: opacity 320ms var(--ease-soft), transform 520ms var(--ease-out); }
.book::backdrop { background: rgba(15,8,7,0.82); }
.book.is-open { opacity: 1; transform: none; }
.book-inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); height: 100%; }
.book-side { display: flex; flex-direction: column; gap: 1.1rem; padding: 2.4rem 2.2rem; border-right: 1px solid rgba(242,236,230,0.1); }
.book-side .support { margin-top: 0; }
.book-facts { display: flex; flex-direction: column; gap: 0.35rem; font-stretch: 92%; align-items: flex-start; }
.book-side .book-hours { margin-top: auto; }
.book-frame { background: #fff; }
.book-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 899px) { .book { width: min(100vw - 1.5rem, 76rem); height: min(100svh - 1.5rem, 60rem); } .book-inner { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } .book-side { padding: 1.4rem 1.25rem; gap: 0.7rem; border-right: 0; border-bottom: 1px solid rgba(242,236,230,0.1); } .book-side .support, .book-side .book-hours { display: none; } .book-side .statement--small { font-size: 1.4rem; } }

/* ---- chapter three: the eye test ---- */
.test { height: 360vh; height: 360svh; }
.test-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--night); }
.test-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; }
.test-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--night) 0%, rgba(15,8,7,0.55) 22%, rgba(15,8,7,0.12) 60%, rgba(15,8,7,0) 100%); }
.test-photo img { object-position: 62% 50%; }
.test-read { position: absolute; left: var(--gutter); width: calc(56% - var(--gutter) - 1rem); top: 42%; height: 1px; background: var(--paper); opacity: 0.16; }
.test-read::after { content: ""; position: absolute; left: 0; top: 0; width: 2.4rem; height: 1px; background: var(--lacquer-bright); }
.chart { position: absolute; left: var(--gutter); width: calc(56% - var(--gutter) - 1rem); top: 0; transform: translate3d(0, var(--chart-y, 0px), 0); will-change: transform; }
.chart-lead { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.2rem; color: var(--paper-mute); margin-bottom: 4.2rem; }
.chart-lines { list-style: none; margin: 0; padding: 0; }
.chart-line { --f: 0; font-family: var(--serif); font-weight: 330; line-height: 1.06; letter-spacing: -0.014em; text-wrap: balance; margin-top: 0.85em; opacity: calc(0.42 + 0.58 * var(--f)); filter: blur(calc((1 - var(--f)) * 8px)); will-change: filter, opacity; }
.chart-line:nth-child(1) { font-size: clamp(2.2rem, 0.9rem + 3.4vw, 4.4rem); margin-top: 0; }
.chart-line:nth-child(2) { font-size: clamp(1.9rem, 0.8rem + 2.7vw, 3.5rem); }
.chart-line:nth-child(3) { font-size: clamp(1.65rem, 0.7rem + 2.15vw, 2.9rem); }
.chart-line:nth-child(4) { font-size: clamp(1.45rem, 0.65rem + 1.7vw, 2.4rem); }
.chart-line:nth-child(5) { font-size: clamp(1.25rem, 0.6rem + 1.35vw, 1.95rem); }
.chart-line:nth-child(6) { font-size: clamp(1.1rem, 0.55rem + 1.05vw, 1.6rem); }
.chart-q { font-style: italic; font-size: clamp(1.8rem, 0.8rem + 2.4vw, 3.2rem); margin-top: 1.4em; }
.chart-act { margin-top: 1.1em; }
.chart-act .running { opacity: 1; }
@media (max-width: 899px) {
  .test { height: 320svh; }
  .test-photo { width: 100%; }
  .test-photo::after { background: linear-gradient(to top, rgba(15,8,7,0.94) 0%, rgba(15,8,7,0.86) 45%, rgba(15,8,7,0.62) 75%, rgba(15,8,7,0.5) 100%); }
  .test-read, .chart { width: calc(100% - 2 * var(--gutter)); }
  .chart-lead { margin-bottom: 3rem; color: var(--paper); }
  .chart-line { opacity: calc(0.5 + 0.5 * var(--f)); }
}

/* ---- chapter four: the frames ---- */
.shelfstage { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--night); }
.shelf-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.shelfstage.is-lit .shelf-scene { display: block; }
.shelfstage.is-lit .shelf-photo { visibility: hidden; }
.shelf-photo { position: absolute; inset: 0; }
.scrim--frames { opacity: 1; }
.frames-copy { position: absolute; left: var(--gutter); bottom: var(--foot); max-width: 62vw; }
.index-spread { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 3rem clamp(2rem, 6vw, 7rem); padding: clamp(4rem, 9vw, 8rem) var(--gutter) clamp(4rem, 8vw, 7rem); align-items: start; }
.index { list-style: none; margin: 0; padding: 0; position: sticky; top: 6rem; }
.index li { display: flex; align-items: baseline; gap: 1.4rem; padding: 0.6rem 0 0.65rem; border-bottom: 1px solid rgba(242,236,230,0.14); font-family: var(--serif); font-weight: 330; font-size: clamp(1.7rem, 0.9rem + 1.8vw, 2.8rem); line-height: 1.05; letter-spacing: -0.012em; }
.index li:first-child { border-top: 1px solid rgba(242,236,230,0.14); }
.index-name { transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .index li:hover .index-name { color: var(--lacquer-bright); } }
.index-photos { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.4rem; }
.index-photo--tall { grid-column: 1 / 8; aspect-ratio: 3 / 4; }
.index-photo--counter { grid-column: 8 / 13; aspect-ratio: 3 / 4; margin-top: 5rem; }
.index-photo--case { grid-column: 3 / 10; aspect-ratio: 4 / 3; margin-top: -1rem; }
.index-act { grid-column: 1 / -1; }
@media (max-width: 899px) {
  .frames-copy { max-width: none; right: var(--gutter); }
  .index-spread { grid-template-columns: 1fr; gap: 2.5rem; }
  .index { position: static; }
  .index-photo--counter { margin-top: 2.5rem; }
}

/* ---- chapter five: the G2 ---- */
.g2 { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding: clamp(4rem, 9vw, 8rem) var(--gutter) clamp(5rem, 9vw, 8rem); }
.g2-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem clamp(2rem, 6vw, 7rem); align-items: center; }
.film-mount { position: relative; background: #000; box-shadow: 0 40px 90px -40px rgba(0,0,0,0.9), 0 0 0 1px rgba(242,236,230,0.08); }
.film { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.film-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(242,236,230,0.18); }
.film-progress { position: absolute; left: 0; top: 0; bottom: 0; width: var(--t, 0%); background: var(--lacquer-bright); }
.film-control { margin-top: 1.1rem; }
.film-control .running { font-size: 1.2rem; }
.g2-facts { margin: 2rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem; }
.g2-act { margin-top: 2.2rem; }
@media (max-width: 899px) { .g2-grid { grid-template-columns: 1fr; } .g2-facts { grid-template-columns: 1fr 1fr; gap: 1.1rem 1.4rem; } }

/* ---- chapter six: the people ---- */
.people { padding: clamp(4rem, 9vw, 8rem) var(--gutter) clamp(4rem, 8vw, 7rem); background: var(--night-2); }
.people-head { max-width: 60rem; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.people-spread { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem clamp(2.5rem, 6vw, 7rem); align-items: start; }
.people-photo--wide { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; }
.voices { list-style: none; margin: 0; padding: 0; }
.people-spread > .voices:not(.voices--second) { grid-column: 2; grid-row: 1 / 3; }
.voices--second { grid-column: 1; grid-row: 2; }
.people-photo--tall { grid-column: 2; grid-row: 3; width: 58%; aspect-ratio: 2 / 3; justify-self: end; }
.voice { padding: 1.6rem 0; border-top: 1px solid rgba(242,236,230,0.12); }
.voice blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.15rem, 0.9rem + 0.55vw, 1.4rem); line-height: 1.45; text-wrap: pretty; }
.voice::after { content: "Google review"; display: block; margin-top: 0.8rem; font-size: 0.75rem; font-stretch: 90%; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-mute); }
.founder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem clamp(2.5rem, 6vw, 7rem); align-items: center; margin-top: clamp(4rem, 9vw, 8rem); }
.founder-photo { aspect-ratio: 4 / 3; }
@media (max-width: 899px) {
  .people-spread, .founder { grid-template-columns: 1fr; }
  .people-photo--wide { grid-column: 1; grid-row: auto; }
  .people-spread > .voices:not(.voices--second), .voices--second { grid-column: 1; grid-row: auto; }
  .people-photo--tall { grid-column: 1; grid-row: auto; width: 70%; justify-self: end; }
}

/* ---- chapter seven: find us ---- */
.find { padding: clamp(4rem, 9vw, 8rem) var(--gutter) clamp(2rem, 4vw, 3rem); }
.find-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem clamp(2rem, 6vw, 7rem); align-items: start; }
.find-hours { margin-top: 1.6rem; }
.find-facts { margin: 2.2rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2rem; max-width: 40rem; }
.acts--find { position: static; align-items: flex-start; text-align: left; margin-top: 2.6rem; will-change: auto; }
.find-photo { aspect-ratio: 1; box-shadow: 0 0 0 1px rgba(242,236,230,0.1); }
.find-photo figcaption { left: 0; right: 0; bottom: 0; padding: 0.75rem 1.1rem; background: var(--night); color: var(--paper-mute); font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 0.95rem; }
@media (max-width: 699px) {
  .g2, .people, .find { padding-top: 6.5rem; }
  .index-spread { padding-top: 6rem; }
  .index-photos { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .index-photo--tall { grid-column: 1 / 2; } .index-photo--counter { grid-column: 2 / 3; margin-top: 2.5rem; } .index-photo--case { grid-column: 1 / 3; margin-top: 0; }
}
.colophon-line { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: clamp(4rem, 9vw, 8rem); padding-top: 1.6rem; border-top: 1px solid rgba(242,236,230,0.1); }
.sign--foot img:first-child { height: 2.4rem; width: auto; } .sign--foot img:last-child { height: 0.78rem; width: auto; }
.colophon-note { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.2rem; color: var(--paper-mute); }
@media (max-width: 899px) { .find-grid { grid-template-columns: 1fr; } .find-photo { width: 78%; } .find-facts { grid-template-columns: 1fr 1fr; gap: 1.2rem 1.4rem; } }

/* ---- reduced motion: the chapters are still, sharp, and complete ---- */
@media (prefers-reduced-motion: reduce) {
  .chapter .fl, .menu .fl, .book .fl, .chart-line { --f: 1; transition: none; }
  .plate-in .plate-soft { display: none; }
  [data-rate] { transform: none !important; }
  .test { height: auto; }
  .test-stage { position: relative; height: auto; min-height: 100svh; padding: 7rem 0 5rem; }
  .test-photo { position: absolute; }
  .chart { position: relative; left: auto; top: auto; margin-left: var(--gutter); transform: none; }
  .test-read { display: none; }
  .chart-line { opacity: 1; filter: none; }
  .menu, .book { transition: none; opacity: 1; transform: none; }
  .menu-link::after, .menu-rule::after, .index-name { transition: none; }
}

/* ==== second pass (2026-09-09): chapter turns, focus travelling with the scroll, the index under the wheel, the voices on shelves ==== */

/* the turn: a printed chapter line at each boundary, drawn as it rises into view */
[data-sf] { --f: 0; }
.turn { position: relative; display: flex; align-items: baseline; gap: 1.2rem; margin: 0 var(--gutter) clamp(2.5rem, 6vw, 5rem); padding: 6.2rem 0 0.7rem; /* clears the bar while a stage is pinned beneath it */ font-family: var(--sans); font-size: 0.75rem; font-stretch: 90%; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-mute); }
.turn-n { color: var(--lacquer-bright); }
.turn > span { opacity: calc(0.15 + 0.85 * var(--f)); filter: blur(calc((1 - var(--f)) * 6px)); transform: translate3d(0, calc((1 - var(--f)) * 0.4em), 0); }
.turn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--paper); opacity: 0.18; transform: scaleX(var(--f)); transform-origin: left; }
.g2, .people, .find { padding-top: 0; }
.test .turn, .frames .turn { margin-bottom: 0; padding-bottom: 0.7rem; }
.test { height: calc(360vh + 6rem); height: calc(360svh + 6rem); }
@media (max-width: 899px) { .test { height: calc(320svh + 6rem); } }
@media (max-width: 699px) { .g2, .people, .find { padding-top: 0; } .turn { padding-top: 5.6rem; } .test .turn, .frames .turn { padding-top: 5.6rem; } }

/* photographs: sharp in the middle of the screen, soft toward its edges, so focus travels with the scroll */
.plate-in.is-in .plate-soft { opacity: var(--soft, 0); transition: opacity 400ms var(--ease-soft); }

/* the index under the wheel: each row finds focus and its shelf draws as it rises */
.index { position: static; }
.index li { --f: 0; position: relative; align-items: flex-start; border-bottom: 0; padding: 0.9rem 0 1rem; }
.index li:first-child { border-top: 0; }
.index li::before, .index li::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; transform: scaleX(var(--f)); transform-origin: left; }
.index li::before { right: 0; background: var(--paper); opacity: 0.16; }
.index li::after { width: 2.4rem; background: var(--lacquer-bright); opacity: calc(var(--f) * var(--f)); }
.index li > * { opacity: calc(0.12 + 0.88 * var(--f)); filter: blur(calc((1 - var(--f)) * 10px)); transform: translate3d(0, calc((1 - var(--f)) * 0.3em), 0); }
.index .index-n { padding-top: 0.55em; }
.index-body { display: flex; flex-direction: column; gap: 0.35rem; }
.index-line { font-family: var(--sans); font-size: 0.9375rem; font-stretch: 92%; letter-spacing: 0; color: var(--paper-mute); line-height: 1.45; max-width: 34ch; }
.index-act { margin-top: 2rem; }
@media (min-width: 900px) { .index-photos { position: sticky; top: 6rem; } }

/* the voices: twelve reviews on shelves at three depths; the wheel pulls focus from shelf to shelf, and the room behind them sharpens last */
.voices-stage { position: relative; height: calc(100vh + (var(--n, 3) - 1) * 90vh); height: calc(100svh + (var(--n, 3) - 1) * 90svh); margin: 0 calc(-1 * var(--gutter)); }
.voices-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--night-2); }
.voices-bg { position: absolute; inset: 0; margin: 0; }
.voices-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.voices-bg .plate-soft { opacity: var(--bg-soft, 1); }
.scrim--voices { background: linear-gradient(to top, rgba(26,17,16,0.96) 0%, rgba(26,17,16,0.88) 30%, rgba(26,17,16,0.72) 60%, rgba(26,17,16,0.6) 100%); opacity: 1; }
.shelves { position: absolute; inset: 0; }
.shelf-row { position: absolute; left: var(--gutter); right: var(--gutter); top: 50%; display: grid; grid-template-columns: repeat(var(--per, 4), minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); align-items: end; padding-bottom: 1.4rem; transform: translate3d(0, -50%, 0); will-change: transform, filter, opacity; }
.shelf-row::before, .shelf-row::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; }
.shelf-row::before { right: 0; background: var(--paper); opacity: 0.3; }
.shelf-row::after { width: 2.4rem; background: var(--lacquer-bright); }
.voice { padding: 0; border: 0; }
.voice blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1rem, 0.85rem + 0.4vw, 1.25rem); line-height: 1.42; text-wrap: pretty; }
.voice::after { content: none; }
.voices-cue { position: absolute; left: var(--gutter); bottom: var(--foot); margin: 0; }
.voices-cue .index-n { color: var(--paper-mute); }
.people .founder { padding: 0; margin-top: clamp(4rem, 9vw, 8rem); }
@media (max-width: 699px) { .shelf-row { row-gap: 1.4rem; align-items: start; padding-bottom: 1.2rem; } .voice blockquote { font-size: 1rem; } }

/* reduced motion: the shelves stacked and still, the room behind them sharp */
@media (prefers-reduced-motion: reduce) {
  [data-sf] { --f: 1; }
  .plate-in.is-in .plate-soft { opacity: 0; }
  .voices-stage { height: auto; margin: 0; }
  .voices-pin { position: relative; height: auto; }
  .voices-bg { display: none; }
  .scrim--voices { display: none; }
  .shelves { position: relative; }
  .shelf-row { position: relative; top: auto; left: 0; right: 0; transform: none !important; filter: none !important; opacity: 1 !important; margin-bottom: 3rem; }
  .voices-cue { display: none; }
}

/* ==== third pass (2026-09-09): the index as uniform lines that converge onto their shelf; the voices as a shelf you drag; the bar's folio ==== */

/* the index: one line per house, the practice's line for it set to the right; each row slides onto its shelf as it rises */
.index-spread { align-items: start; }
.index li { display: grid; grid-template-columns: 2.4rem minmax(max-content, 1fr) minmax(0, 20rem); column-gap: 1.6rem; align-items: baseline; padding: 1.15rem 0 1.2rem; min-height: 5.6rem; }
.index .index-name { white-space: nowrap; }
.index li > * { opacity: calc(0.1 + 0.9 * var(--f)); filter: blur(calc((1 - var(--f)) * 8px)); }
.index .index-n { padding-top: 0; transform: translate3d(calc((1 - var(--f)) * -0.6em), 0, 0); }
.index .index-name { transform: translate3d(calc((1 - var(--f)) * -0.5em), 0, 0); }
.index .index-line { text-align: right; max-width: none; transform: translate3d(calc((1 - var(--f)) * 0.9em), 0, 0); }
.index-body { display: contents; }
@media (hover: hover) and (pointer: fine) { .index li:hover .index-line { color: var(--paper); } .index-line { transition: color 220ms ease; } }
@media (min-width: 900px) { .index-photos { position: static; } .index-photo--counter { margin-top: 4rem; } .index-photo--case { margin-top: 0; } }
@media (max-width: 899px) { .index li { grid-template-columns: 2.2rem minmax(0, 1fr); min-height: 0; padding: 0.95rem 0 1rem; row-gap: 0.25rem; } .index .index-line { grid-column: 2; text-align: left; } }

/* the voices: twelve reviews on one shelf that you drag, flick, key or step through; the one under your hand is in focus */
.voices { position: relative; margin: 0 calc(-1 * var(--gutter)); padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem); min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: var(--night-2); }
.voices-bg { position: absolute; inset: 0; margin: 0; }
.voices-bg img { position: absolute; inset: -4% -3%; width: 106%; height: 108%; object-fit: cover; object-position: 50% 45%; transform: translate3d(var(--bx, 0px), 0, 0); will-change: transform; }
.scrim--voices { background: linear-gradient(to top, rgba(26,17,16,0.97) 0%, rgba(26,17,16,0.9) 30%, rgba(26,17,16,0.86) 65%, rgba(26,17,16,0.74) 100%); opacity: 1; }
.rail { position: relative; outline: none; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.rail.is-dragging { cursor: grabbing; }
.rail:focus-visible { outline: 0; }
.rail:focus-visible .voice.is-here .voice-n { color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .rail, .rail.is-dragging { cursor: none; } }
.rail-track { display: flex; gap: var(--gap, 4rem); padding: 0 var(--gutter); transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; }
.voice { --f: 0; flex: none; width: var(--w, 30rem); padding: 0 0 1.6rem; position: relative; }
.voice::before { content: ""; position: absolute; left: 0; right: calc(-1 * var(--gap, 4rem)); bottom: 0; height: 1px; background: var(--paper); opacity: 0.22; }
.voice:last-child::before { right: 0; }
.voice-n { display: block; margin-bottom: 0.9rem; transition: color 300ms ease; }
.voice.is-here .voice-n { color: var(--lacquer-bright); }
.voice blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.05rem, 0.85rem + 0.5vw, 1.35rem); line-height: 1.42; text-wrap: pretty; opacity: calc(0.6 + 0.4 * var(--f)); filter: blur(calc((1 - var(--f)) * 3.5px)); will-change: filter, opacity; }
.voice::after { content: none; }
.rail-foot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2rem; margin: 2.4rem var(--gutter) 0; }
.rail-count { color: var(--paper-mute); }
.rail-count #rail-now { color: var(--paper); }
.rail-ticks { display: flex; gap: 0.5rem; height: 2px; align-items: stretch; }
.rail-ticks span { flex: 1; background: var(--paper); opacity: 0.18; transition: opacity 400ms var(--ease-soft), background 400ms var(--ease-soft); }
.rail-ticks span.is-past { opacity: 0.5; }
.rail-ticks span.is-here { background: var(--lacquer-bright); opacity: 1; }
.rail-acts { display: flex; gap: 2rem; margin: 0; }
.rail-btn { font-size: 1.1rem; }
.rail-btn[disabled] { opacity: 0.35; pointer-events: none; }
.rail-btn .arrow { color: var(--paper-mute); }
@media (max-width: 699px) { .voices { padding: 2.5rem 0; min-height: 0; } .rail-track { --gap: 2rem; } .voice { --w: min(78vw, 22rem); } .rail-foot { grid-template-columns: auto minmax(0, 1fr); row-gap: 1.4rem; } .rail-acts { grid-column: 1 / -1; } .rail-ticks { display: none; } }
.people .founder { margin-top: clamp(4rem, 9vw, 8rem); }

/* the bar's control: a folio unit, the chapter you are in and the word; the rule only draws under the hand */
.menu-btn { display: inline-flex; align-items: baseline; gap: 0.85rem; padding-bottom: 0.35rem; }
.menu-folio { font-family: var(--sans); font-style: normal; font-size: 0.75rem; font-stretch: 90%; font-weight: 500; letter-spacing: 0.1em; color: var(--lacquer-bright); }
.menu-of { color: var(--paper-mute); }
.menu-rule { opacity: 0; background: var(--paper); transition: opacity 240ms ease; }
.menu-rule::after { content: none; }
@media (hover: hover) and (pointer: fine) { .menu-btn:hover .menu-rule { opacity: 0.6; } }
.menu-btn[aria-expanded="true"] .menu-rule { opacity: 1; background: var(--lacquer-bright); }
.menu-btn[aria-expanded="true"] .menu-rule::after { content: none; }
@media (max-width: 699px) { .menu-btn { gap: 0.7rem; } }

/* reduced motion: the shelf snaps without drift, every review sharp */
@media (prefers-reduced-motion: reduce) {
  .voice blockquote { opacity: 1; filter: none; }
  .voices-bg img { transform: none; }
  .rail-ticks span { transition: none; }
}

/* ==== fourth pass (2026-09-09): the voices as two shelves that drift on their own; the frames without the case photograph ==== */
.index-photo--tall { grid-column: 1 / 8; }
.index-photo--counter { grid-column: 8 / 13; }
@media (max-width: 699px) { .index-photo--tall { grid-column: 1 / 2; } .index-photo--counter { grid-column: 2 / 3; margin-top: 2.5rem; } }

.voices { padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem); min-height: 0; display: block; }
.rail { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.rail.is-dragging { cursor: grabbing; }
@media (hover: hover) and (pointer: fine) { .rail, .rail.is-dragging { cursor: none; } }
/* every block sits on the shelf; its number hangs beneath the line like a tag, so the row has one clean edge */
.row { position: relative; overflow: hidden; padding: 0.5rem 0 2.4rem; }
.row + .row { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.row-track { display: flex; align-items: flex-end; gap: var(--gap, 3.5rem); width: max-content; transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; }
.row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2.4rem; height: 1px; background: var(--paper); opacity: 0.24; }
.row::before { content: none; }
.voice { --f: 1; flex: none; width: var(--w, 26rem); padding: 0 0 1.1rem; position: relative; }
.voice::before { content: none; }
.voice blockquote { opacity: 1; filter: none; font-size: clamp(1rem, 0.85rem + 0.4vw, 1.2rem); line-height: 1.42; }
.voice-n { position: absolute; left: 0; top: 100%; margin: 0.8rem 0 0; }
.voice-n::before { content: ""; position: absolute; left: 0; top: -0.8rem; width: 1.6rem; height: 1px; background: var(--lacquer-bright); }
.rail-foot { display: none; }
@media (max-width: 699px) { .row-track { --gap: 1.8rem; } .voice { --w: 17rem; } .voice blockquote { font-size: 0.95rem; } }

/* reduced motion: nothing drifts; the shelves wrap so every review is read in place */
@media (prefers-reduced-motion: reduce) {
  .row { overflow: visible; padding: 0 var(--gutter); }
  .row-track { flex-wrap: wrap; width: auto; transform: none !important; row-gap: 2rem; }
  .voice[aria-hidden="true"] { display: none; }
  .row::before { left: 0; }
}

/* ==== sixth pass (2026-09-10): the lens ring is the site's cursor on fine pointers ==== */
@media (hover: hover) and (pointer: fine) {
  html, a, button, [role='button'], summary, label, .rail, .rail.is-dragging { cursor: none; }
  .book, .book * { cursor: auto; }
  .cursor { z-index: 120; }
  /* over anything pressable the ring opens a step and takes the lacquer */
  .cursor.is-link { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-color: var(--lacquer-bright); mix-blend-mode: normal; }
  .cursor.is-link.is-press { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
}