/* Feature animations (FEATURES.md): home-page feature sections + the /lab/ review page. Media box, then Ogilvy copy. */
.feature { padding: var(--s7) 0; }
.feature + .feature { padding-top: var(--s6); }   /* Owen 2026-10-30: more air between sections */
.feature-wrap { max-width: 1100px; }
.feat-media-wrap { position: relative; width: 100%; aspect-ratio: var(--ar, 16/9); }
@media (max-width: 560px) { .feat-media-wrap { aspect-ratio: var(--ar-n, var(--ar, 16/9)); } }
.feat-media { position: absolute; inset: 0; overflow: hidden; background: var(--bg-2); border-radius: var(--radius); isolation: isolate; }
.feat-media canvas, .feat-media video, .feat-media svg.fill, .feat-media img.fill { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.feat-media video, .feat-media img.fill { object-fit: cover; }
.feature-copy { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s3) var(--s6); align-items: baseline; padding-top: var(--s5); }
.feature-title { font-size: clamp(26px, 2.6vw, 38px); font-weight: 360; letter-spacing: -.008em; line-height: 1.12; text-wrap: balance; }
.feature-sub { color: var(--fg-dim); font-size: clamp(15px, 1.05vw, 18px); line-height: 1.5; text-wrap: pretty; }
.feature-sub-only { padding-top: var(--s4); text-align: center; }
@media (max-width: 760px) { .feature { padding: var(--s6) 0; } .feature-copy { grid-template-columns: 1fr; gap: var(--s2); padding-top: var(--s4); } }
@media (max-width: 520px) { .feature-wrap { padding: 0; } .feat-media { border-radius: 0; } .feature-copy, .feature-sub-only { padding-left: var(--gutter); padding-right: var(--gutter); } }
/* Home hand-over (Owen 2026-10-30, "too much scrolling from the end of the animation"): the first feature starts where the hero
   ends. t 1 (lamp out, .hero-end = the page colour) is the moment the sticky hero releases; the first box's top edge already
   peeks in 8vh before that on wide viewports (over the end sheet, which is >= 0.85 by then), so a moderate scroll (~55 % of the
   viewport at 1440x900) brings it fully into view; on phones the box is short, so a 14vh breath keeps the same feel (~40 %).
   The section is positioned so it paints above the sticky hero where they overlap. */
/* Owen 2026-10-30 (night): the first feature sits ON the hero's last viewport (margin-top -100vh), so its sticky 100vh stage is
   already centred on screen when the lamp finishes dimming out (t = 1 = the sticky release). features.js then fades it in over
   1.2 s (time-based, not scroll-based: it always happens, scrolling or not), the stage holds for 70vh of scroll and the page goes
   on. Without JS (no .has-fade) it is simply visible. */
.is-home .hero-scroller + .feature { position: relative; z-index: 4; margin-top: -100vh; padding: 0; height: 170vh; }
.is-home .hero-scroller + .feature > .feature-wrap { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: center; box-sizing: border-box; }
.is-home .hero-scroller + .feature.has-fade > .feature-wrap { opacity: 0; transition: opacity 1200ms var(--ease); }
.is-home .hero-scroller + .feature.has-fade.is-in > .feature-wrap { opacity: 1; }

/* /lab/ review page only */
.is-lab .feature-alts { list-style: none; margin: var(--s4) 0 0; padding: var(--s3) 0 0; border-top: 1px dashed var(--line); color: var(--fg-dim); font: 13px/1.5 var(--font-ui); }
.is-lab .feature-alts li { padding: 2px 0; } .is-lab .feature-alts strong { color: var(--fg); font-weight: 500; }
.is-lab .lab-head { padding: var(--s6) 0 0; }
.is-lab .lab-head p { color: var(--fg-dim); max-width: 60ch; margin-top: var(--s3); }
.is-lab .lab-meta { font: 11px/1.4 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: var(--s3); display: flex; gap: var(--s4); flex-wrap: wrap; }
@media (max-width: 520px) { .is-lab .lab-meta, .is-lab .feature-alts { padding-left: var(--gutter); padding-right: var(--gutter); } }

/* /lab/ notes box (2026-10-27): one per feature, saves as you type (site/js/lab-feedback.js) */
.is-lab .lab-fb { position: relative; margin-top: var(--s4); }
.is-lab .lab-fb textarea { display: block; width: 100%; min-height: 56px; resize: none; overflow: hidden; padding: var(--s3) var(--s4);
  background: var(--bg-2); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); font: 15px/1.5 var(--font-ui); }
.is-lab .lab-fb textarea::placeholder { color: var(--fg-dim); opacity: .8; }
.is-lab .lab-fb textarea:focus { border-color: var(--accent); outline: none; }
.is-lab .lab-fb-state { position: absolute; right: var(--s3); bottom: calc(100% + 4px); font: 11px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); }
@media (max-width: 520px) { .is-lab .lab-fb { margin-left: var(--gutter); margin-right: var(--gutter); } }
/* Owen 2026-10-30: the first section's stage centres its content in 100vh, which leaves slack below the copy; features.js
   measures that slack so the gap to the next section equals the gap everywhere else (s7 + s6). Phones: smaller first box. */
.is-home .hero-scroller + .feature + .feature { position: relative; margin-top: calc(var(--s7) - var(--first-slack, var(--s7))); }
@media (max-width: 560px) { .is-home .hero-scroller + .feature .feat-media-wrap { width: 84%; margin: 0 auto; } }
@media (max-width: 760px) { .is-home .hero-scroller + .feature + .feature { margin-top: calc(var(--s6) - var(--first-slack, var(--s6))); } }