/* ═══════════ tokens ═══════════
     Colours sampled from the SRS Dynamic logo animation, not invented:
     cyan #98d0d8, chrome highlight #e0e0e0, ground #141414.
     Dark is the design's home. Light is a real second design, not an
     inversion — and the hero stays dark in both, because the product is
     light in a dark room and a pale hero would contradict it.          */

  :root {
    --ink:     #08090a;
    --ink-2:   #0e1113;
    --ink-3:   #14181a;
    --bone:    #e9edee;
    --muted:   #8d989b;
    --faint:   #7e898c;
    --cyan:    #98d0d8;
    --cyan-hi: #cfeaee;
    --line:    #1b2123;
    --line-2:  #2a3235;
    --veil:    rgba(8, 9, 10, .9);

    --logo: url("/assets/logo.png");
    --night: url("/assets/night.jpg");

    --display: "Source Serif 4", "Iowan Old Style", Charter, Georgia, serif;
    --body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --gutter: clamp(1.25rem, 5vw, 4.5rem);
    --measure: 34rem;
    --nav-h: 3.9rem;

    --s1: .4rem;  --s2: .8rem;  --s3: 1.3rem; --s4: 2.2rem;
    --s5: 3.6rem; --s6: 6rem;   --s7: 10rem;
  }

  /* Dark is the site's home and its only default. Light exists solely as
     a deliberate choice through this page's own switch — never inherited
     from the system or a host. */
  :root[data-scheme="light"] {
    --ink:     #f3f4f4;
    --ink-2:   #e8ebeb;
    --ink-3:   #dfe3e3;
    --bone:    #0f1618;
    --muted:   #4d575a;
    --faint:   #5c6669;
    --cyan:    #1d6a76;
    --cyan-hi: #0f5560;
    --line:    #d4dadb;
    --line-2:  #b7c0c2;
    --veil:    rgba(243, 244, 244, .92);
  }

  :root[data-scheme="dark"], :root[data-theme="dark"] {
    --ink:     #08090a;
    --ink-2:   #0e1113;
    --ink-3:   #14181a;
    --bone:    #e9edee;
    --muted:   #8d989b;
    --faint:   #7e898c;
    --cyan:    #98d0d8;
    --cyan-hi: #cfeaee;
    --line:    #1b2123;
    --line-2:  #2a3235;
    --veil:    rgba(8, 9, 10, .9);
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .menu > *, .menu.open > * { transition: none; }
  }

  body {
    margin: 0;
    background: var(--ink);
    color: var(--bone);
    font-family: var(--body);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    transition: background-color .5s ease, color .5s ease;
  }

  ::selection { background: var(--cyan); color: var(--ink); }

  a { color: inherit; text-decoration: none; }
  :focus-visible { outline: 1px solid var(--cyan); outline-offset: 4px; }

  p { text-wrap: pretty; }

  h1, h2, h3 {
    font-family: var(--display);
    font-weight: 400;
    font-optical-sizing: auto;
    text-wrap: balance;
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.02;
  }

  p { margin: 0; }
  img { display: block; max-width: 100%; }

  /* ═══════════ shared ═══════════ */

  .pad { padding-inline: var(--gutter); }
  .col { max-width: 78rem; margin-inline: auto; width: 100%; }
  .measure { max-width: var(--measure); }

  .label {
    font-family: var(--body);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0;
  }

  .label--cyan { color: var(--cyan); }

  .stack { display: flex; flex-direction: column; }
  .g1 { gap: var(--s1); } .g2 { gap: var(--s2); } .g3 { gap: var(--s3); }
  .g4 { gap: var(--s4); } .g5 { gap: var(--s5); }

  .dim { color: var(--muted); }

  /* ═══════════ navigation ═══════════ */

  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 60;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    background: var(--veil);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid transparent;
    transform: translateY(-100%);
    transition: transform .55s cubic-bezier(.22,.61,.36,1), border-color .55s ease;
  }

  .nav.show { transform: none; border-bottom-color: var(--line); }

  .nav__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
  }

  .mark, .nav__mark, .foot__mark {
    display: block;
    background-image: var(--logo);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    background-origin: content-box;
    aspect-ratio: 460 / 226;
  }

  .nav__mark { width: 106px; border-radius: 6px; }

  /* In light mode the mark is a bright glow on a bright ground — sit it on
     its own dark chip rather than letting it dissolve. */
  :root[data-scheme="light"] .nav__mark,
  :root[data-scheme="light"] .foot__mark {
    background-color: #08090a;
    padding: .3rem .55rem;
    border-radius: 2px;
  }

  .nav__right { display: flex; align-items: center; gap: var(--s2); }

  .nav__links { display: none; gap: var(--s4); }

  @media (min-width: 64rem) { .nav__links { display: flex; } }

  .nav__links a {
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    padding-block: .4rem;
    position: relative;
    transition: color .3s ease;
  }

  .nav__links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: var(--cyan);
    transform: scaleX(0); transform-origin: left;
    transition: transform .4s cubic-bezier(.22,.61,.36,1);
  }

  .nav__links a:hover { color: var(--bone); }
  .nav__links a:hover::after { transform: scaleX(1); }

  .btn-ghost {
    font-family: var(--body);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    background: none;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    padding: .55rem .9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    transition: color .3s ease, border-color .3s ease;
  }

  .btn-ghost:hover { color: var(--bone); border-color: var(--cyan); }

  .caret {
    width: .5rem; height: .5rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
  }

  [aria-expanded="true"] .caret { transform: rotate(-135deg) translate(-2px, -2px); }

  /* ── the dropdown ── */

  .menu-wrap { position: relative; }

  .menu {
    position: absolute;
    top: calc(100% + .6rem);
    right: 0;
    min-width: 14rem;
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: var(--s2);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1), visibility .3s;
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
  }

  .menu.open { opacity: 1; visibility: visible; transform: none; }

  .menu a, .menu button {
    font-family: var(--body);
    font-size: .8rem;
    letter-spacing: .06em;
    color: var(--muted);
    background: none; border: 0;
    text-align: left;
    padding: .62rem .7rem;
    border-radius: 2px;
    cursor: pointer;
    transition: color .25s ease, background-color .25s ease;
  }

  .menu a:hover, .menu button:hover { color: var(--bone); background: var(--ink-3); }

  .menu hr { border: 0; border-top: 1px solid var(--line); margin: var(--s1) .7rem; }

  #menuBtn .caret { transition: transform .4s cubic-bezier(.22, .61, .36, 1); }
  #menuBtn[aria-expanded="true"] .caret { transform: rotate(180deg); }

  /* On small screens the dropdown grows into the whole room: a veil of
     blur, the sections in display type, everything cascading in. */
  @media (max-width: 63.99rem) {
    .menu {
      position: fixed;
      inset: 0;
      min-width: 0;
      height: 100vh;
      height: 100svh;
      border: 0; border-radius: 0;
      box-shadow: none;
      /* solid on purpose: a second backdrop-filter nested inside the
         nav's own one composites unreliably */
      background: var(--ink-2);
      z-index: 1;
      padding: calc(var(--nav-h) + 6svh) var(--gutter) 6svh;
      justify-content: center;
      transform: none;
      transition: opacity .45s ease, visibility .45s;
      overflow-y: auto;
    }

    .menu a.big {
      font-family: var(--display);
      font-size: clamp(2.1rem, 9.5vw, 3.2rem);
      letter-spacing: -0.015em;
      line-height: 1.12;
      color: var(--bone);
      padding: .5rem 0;
    }

    .menu a, .menu button { font-size: .92rem; padding: .55rem 0; }
    .menu hr { margin: var(--s2) 0; }
    .menu .head { padding-inline: 0; }
    .scheme { padding-inline: 0; }
    .scheme button { font-size: .7rem; padding: .65rem .2rem; }

    /* the cascade: each row rises in turn once the veil is up */
    .menu > * {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .5s ease, transform .65s cubic-bezier(.22, .61, .36, 1);
    }
    .menu.open > * { opacity: 1; transform: none; }
    .menu.open > :nth-child(1)  { transition-delay: .06s; }
    .menu.open > :nth-child(2)  { transition-delay: .11s; }
    .menu.open > :nth-child(3)  { transition-delay: .16s; }
    .menu.open > :nth-child(4)  { transition-delay: .21s; }
    .menu.open > :nth-child(5)  { transition-delay: .27s; }
    .menu.open > :nth-child(6)  { transition-delay: .31s; }
    .menu.open > :nth-child(7)  { transition-delay: .35s; }
    .menu.open > :nth-child(8)  { transition-delay: .39s; }
    .menu.open > :nth-child(9)  { transition-delay: .44s; }
    .menu.open > :nth-child(10) { transition-delay: .47s; }
    .menu.open > :nth-child(11) { transition-delay: .50s; }

    /* the button stays reachable above its own veil */
    .menu-wrap button { position: relative; z-index: 2; }

    html.menulock, html.menulock body { overflow: hidden; }
  }

  .menu .head {
    font-size: .62rem; letter-spacing: .26em; text-transform: uppercase;
    color: var(--faint); padding: .5rem .7rem .2rem;
  }

  .scheme { display: flex; gap: .3rem; padding: .2rem .7rem .5rem; }

  .scheme button {
    flex: 1;
    text-align: center;
    font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
    border: 1px solid var(--line); border-radius: 2px;
    padding: .7rem .2rem;
  }

  .scheme button[aria-pressed="true"] {
    color: var(--ink); background: var(--cyan); border-color: var(--cyan);
  }

  /* ═══════════ the stage ═══════════
     Scenes 1-4 of the page are a film driven by the scroll position: the
     viewport pins while 540vh of scroll runs the timeline (dark room ->
     projector -> beam projects the headline -> the beam becomes the real
     room). Scenes 5-7 flow as ordinary sections below it. */

  .stage {
    /* Always the dark room, whichever scheme the page is in. */
    --ink: #08090a; --ink-2: #0e1113;
    --bone: #e9edee; --muted: #8d989b; --faint: #7e898c;
    --cyan: #98d0d8; --line: #1b2123; --line-2: #2a3235;

    position: relative;
    height: 540vh;
    background: var(--ink);
    color: var(--bone);
  }

  .stage__pin {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
  }

  /* Scene layers stack in the pin and are driven per-frame by JS. */
  .sc {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: start;
    opacity: 0;
    pointer-events: none;
    will-change: opacity, transform;
  }

  .sc-open {
    justify-items: center;
    align-content: center;
    text-align: center;
  }

  .sc-open p {
    font-family: var(--display);
    font-size: clamp(1.3rem, 3.4vw, 2.4rem);
    letter-spacing: -0.01em;
    color: var(--muted);
    max-width: 24ch;
    text-wrap: balance;
  }

  .sc-head { gap: var(--s4); }

  .sc-text { gap: var(--s3); }

  /* Three words slam into the light, then the payoff. */
  .sc-words {
    display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: clamp(1.1rem, 3vw, 2.6rem); row-gap: .1em;
    font-family: var(--display);
    font-size: clamp(2.5rem, 8vw, 6rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.02em;
  }

  .sc-word {
    display: inline-block;
    opacity: 0;
    transform-origin: left bottom;
    will-change: transform, filter, opacity;
  }

  .sc-punch {
    font-size: clamp(1.5rem, 3.4vw, 2.7rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    opacity: 0;
    margin-top: var(--s2);
  }

  .sc-photo { display: block; }

  .sc-photo__img {
    width: 100%; height: 100%;
    background-image: var(--night);
    background-size: cover;
    background-position: center;
    will-change: transform;
  }

  .sc-photo__veil {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(8,9,10,.55) 0%, transparent 30%, transparent 62%, rgba(8,9,10,.85) 100%);
  }

  .sc-photo figcaption {
    position: absolute;
    left: var(--gutter); right: var(--gutter); bottom: clamp(1.4rem, 4vw, 3rem);
    display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: baseline;
    color: #e9edee;
  }

  .sc-photo figcaption .t {
    font-family: var(--display);
    font-size: clamp(1.1rem, 2.4vw, 1.7rem);
    letter-spacing: -0.01em;
  }

  .sc-photo figcaption .label { color: #98d0d8; }

  .stage__hint {
    position: absolute;
    left: 0; right: 0; bottom: clamp(1.2rem, 3vw, 2.2rem);
    display: flex; justify-content: center;
    will-change: opacity;
  }

  .hero__light { position: absolute; inset: 0; z-index: -2; }
  .hero__light canvas { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* The light has to fall away, or it reads as wallpaper instead of a beam. */
  .hero__veil {
    position: absolute; inset: 0; z-index: -1;
    background:
      radial-gradient(78% 62% at 50% 46%, transparent 0%, rgba(8,9,10,.55) 52%, #08090a 84%),
      linear-gradient(to bottom, rgba(8,9,10,.86) 0%, transparent 26%, transparent 60%, #08090a 97%);
  }

  .hero__top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 5;
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: var(--s3); padding-block: clamp(1.4rem, 3.5vw, 2.6rem);
  }

  .mark { width: clamp(126px, 17vw, 196px); }
  .hero__top .label { text-align: right; line-height: 1.9; }

  /* On a phone the rig hangs centre-top; the venue line would sit in it. */
  @media (max-width: 40rem) { .hero__top .label { display: none; } }

  .stage h1 {
    font-size: clamp(2.7rem, 9.2vw, 8.5rem);
    line-height: .94;
    letter-spacing: -0.02em;
    max-width: 13ch;
  }

  .stage h1 em, .sc-punch em, .statement .big em { font-style: italic; color: var(--cyan); }

  .sc-sub {
    max-width: 38ch;
    color: var(--muted);
    font-size: clamp(.95rem, 1.6vw, 1.05rem);
  }

  /* ── the projector rig: the light on this page has a source ── */

  .rig {
    position: absolute; inset: 0;
    z-index: 0; pointer-events: none;
  }

  .rig {
    --rigw: clamp(205px, 26vw, 340px);
    /* The plate hangs from the viewport's own ceiling. */
    --dock: 2px;
  }

  .rig__slot {
    position: absolute;
    top: var(--dock);
    left: 0; right: 0;
    height: calc(var(--rigw) * .78);
  }

  /* Its own fade: the generic lift keyframes end in transform:none and
     would erase the centering translate. */
  .rig__svg {
    position: absolute; top: 0; left: 50%;
    transform: translateX(-50%);
    width: var(--rigw); height: auto;
    opacity: 0;
    animation: glowon 1s cubic-bezier(.22,.61,.36,1) .1s forwards;
  }

  /* The mark: a title card at rest, then it docks top-centre and the
     projector drives out of it. JS owns y/scale per frame in scrolly mode. */
  .brand {
    position: absolute;
    top: 0; left: 50%;
    width: clamp(230px, 42vw, 400px);
    aspect-ratio: 460 / 226;
    background-image: var(--logo);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform-origin: top center;
    transform: translateX(-50%) translateY(38svh);
    z-index: 4;
    will-change: transform;
  }

  /* Ignition: one bright strike with a thin anamorphic streak, gone as fast
     as it came. Driven per-frame like everything else on the stage. */
  .rig__flash {
    position: absolute; left: 50%;
    top: 0;
    width: 26px; height: 14px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #eafcff;
    box-shadow:
      0 0 18px 6px rgba(207,234,238,.95),
      0 0 60px 24px rgba(152,208,216,.55);
    opacity: 0;
    pointer-events: none;
    will-change: opacity, transform;
  }

  .rig__flash::after {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 46vw; height: 1px;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right, transparent, rgba(207,234,238,.85), transparent);
  }

  /* The swallow's climax: one full-screen breath of light. */
  .rig__wash {
    position: absolute; inset: 0;
    background: radial-gradient(60% 45% at 50% 18%, rgba(207,234,238,.9), rgba(152,208,216,.35) 45%, transparent 75%);
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
  }

  html.no-scrolly .rig__wash { display: none; }

  /* Dust in the beam — tiny, soft, alive only while the cone carries light. */
  .mote {
    position: absolute; top: 0; left: 0;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #cfeaee;
    filter: blur(.6px);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
  }

  html.no-scrolly .mote, html.no-scrolly .rig__flash { display: none; }

  .rig__glow {
    position: absolute; left: 50%;
    top: calc(var(--dock) + var(--rigw) * .46);
    width: 18px; height: 10px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #cfeaee;
    box-shadow:
      0 0 10px 3px rgba(152,208,216,.9),
      0 0 34px 12px rgba(152,208,216,.45);
    opacity: 0;
    animation: glowon .5s ease .62s forwards;
  }

  @keyframes glowon { to { opacity: 1; } }

  .rig__cone {
    position: absolute; left: 0; right: 0;
    top: calc(var(--dock) + var(--rigw) * .46);
    bottom: 0;
    clip-path: polygon(50% 0%, -14% 108%, 114% 108%);
    background: linear-gradient(to bottom,
      rgba(152,208,216,.20) 0%,
      rgba(152,208,216,.075) 34%,
      rgba(152,208,216,.028) 66%,
      transparent 92%);
    transform: scaleY(0);
    transform-origin: top center;
    opacity: 0;
    animation: coneon 1s cubic-bezier(.3,.5,.2,1) .78s forwards;
  }

  @keyframes coneon {
    0%  { opacity: 0; transform: scaleY(0); }
    28% { opacity: 1; }
    100%{ opacity: 1; transform: scaleY(1); }
  }

  /* The pool of light on the "table" appears as a consequence of the beam.
     In scrolly mode the timeline drives it; the animation is the fallback. */
  .hero__light { opacity: 0; animation: glowon 1.3s ease 1.05s forwards; }

  /* ── scrolly mode: JS owns every scene property, CSS intros go quiet ── */
  html.scrolly .rig__glow,
  html.scrolly .rig__cone,
  html.scrolly .hero__light { animation: none; opacity: 0; }
  html.scrolly .rig__svg { animation: none; opacity: 0; transform: translateX(-50%); }
  html.scrolly .rig__cone { transform: scaleY(0); }
  html.scrolly .line > span { animation: none; transform: translateY(110%); }
  html.scrolly .fallback-night { display: none; }
  html.scrolly .statement { display: none; }

  /* ── no-scrolly (reduced motion): the stage collapses to one still frame ── */
  /* A pinned film measured in screen heights punishes the big screens it
     should reward: on a mouse wheel one notch is about 100px, so 2560x1440
     asked for 63 notches where a phone asks for six swipes. Above laptop
     width the film is measured in pixels instead, so it is the same length
     on every desktop — and a shorter one. Touch keeps the vh version,
     because a swipe covers most of a screen and scales with it. */
  @media (min-width: 64rem) {
    .stage { height: min(540vh, 4000px); }
  }

  html.no-scrolly .stage { height: auto; }
  html.no-scrolly .stage__pin { position: relative; }
  html.no-scrolly .sc-open, html.no-scrolly .sc-photo, html.no-scrolly .sc-text, html.no-scrolly .stage__hint { display: none; }
  html.no-scrolly .sc { position: relative; opacity: 1; pointer-events: auto; padding-block: var(--s7) var(--s6); }
  /* Static fallback keeps the old composition: mark above the plate. */
  html.no-scrolly .rig { --dock: calc(16px + var(--rigw) * .56); }
  html.no-scrolly .brand {
    width: calc(clamp(132px, 17vw, 216px) * 1.15);
    transform: translateX(-50%) translateY(16px);
  }

  /* The beam that follows the reader once the hero is gone. */
  .beam {
    position: fixed; top: 0; left: 0; right: 0;
    height: 100vh;
    z-index: 55; pointer-events: none;
    clip-path: polygon(50% -2%, -18% 112%, 118% 112%);
    background: linear-gradient(to bottom,
      rgba(152,208,216,.10) 0%,
      rgba(152,208,216,.035) 40%,
      transparent 82%);
    opacity: 0;
    transition: opacity .9s ease;
  }

  .beam.on { opacity: 1; }

  /* The invitation points the way the page goes: light falls down a thin
     vertical track, and a chevron nods as it lands. */
  .scroll {
    display: inline-flex; flex-direction: column; align-items: center;
    gap: .55rem; color: var(--faint); text-decoration: none;
  }
  .scroll span { font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; }
  .scroll i {
    display: block; width: 1px; height: 2.6rem;
    background: var(--line-2);
    position: relative; overflow: hidden;
  }
  .scroll i::after {
    content: ""; position: absolute; left: 0; right: 0; height: 45%;
    background: linear-gradient(to bottom, transparent, var(--cyan));
    transform: translateY(-110%);
    animation: lightfall 2.6s cubic-bezier(.55, .06, .35, 1) infinite;
  }
  .scroll__chev {
    width: .8rem; height: auto; color: var(--faint);
    animation: chevnod 2.6s ease-in-out infinite;
  }

  @keyframes lightfall {
    0% { transform: translateY(-110%); }
    62%, 100% { transform: translateY(260%); }
  }

  @keyframes chevnod {
    0%, 42% { transform: translateY(0); opacity: .7; }
    62% { transform: translateY(3px); opacity: 1; color: var(--cyan); }
    88%, 100% { transform: translateY(0); opacity: .7; }
  }

  /* Generated plates exist only where deploy/fetch-assets.sh has put their
     files in place — the figure stays collapsed until its image really loads,
     so the preview build never shows a broken frame. */
  .gen-plate { display: none; }
  .gen-plate.on { display: block; }

  .ai-note {
    font-size: .62rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--faint);
  }

  /* ═══════════ statement ═══════════ */

  .statement { padding-block: clamp(5rem, 14vw, var(--s7)); }

  .statement .big {
    font-size: clamp(1.85rem, 4.6vw, 3.9rem);
    line-height: 1.08; max-width: 19ch; letter-spacing: -0.02em;
  }

  .statement .body { max-width: var(--measure); color: var(--muted); }

  .split { display: grid; gap: var(--s4); }

  @media (min-width: 60rem) {
    .split {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr);
      gap: var(--s6); align-items: start;
    }
  }

  /* ═══════════ plates ═══════════ */

  figure { margin: 0; }

  .plate { position: relative; overflow: hidden; background: var(--ink-2); }
  .plate__frame { position: relative; overflow: hidden; }

  .night-bg {
    width: 100%; height: 100%;
    background-image: var(--night);
    background-size: cover;
    background-position: center;
  }

  .plate img {
    width: 100%; height: 100%; object-fit: cover;
    /* The room was lit for work, not for a camera. Seat it into the page. */
    filter: brightness(.9) contrast(1.06) saturate(1.02);
    will-change: transform;
  }

  .plate figcaption::before {
    content: "";
    position: absolute; left: 0; top: -0.9rem;
    height: 1px; width: 100%;
    background: linear-gradient(to right, #98d0d8, transparent);
    transform: scaleX(var(--draw, 0));
    transform-origin: left;
  }

  .plate figcaption { position: absolute; }

  .plate--tall .plate__frame { aspect-ratio: 16 / 10; }
  .plate--band .plate__frame { aspect-ratio: 24 / 7; }

  @media (max-width: 46rem) {
    .plate--tall .plate__frame { aspect-ratio: 4 / 3; }
    .plate--band .plate__frame { aspect-ratio: 16 / 8; }
  }

  /* ── the work reel: one card centred, neighbours peeking in ── */
  .workreel { margin-block: clamp(2.5rem, 6vw, 4.5rem); }

  .reel {
    display: flex;
    gap: clamp(10px, 1.8vw, 20px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: calc((100vw - min(86vw, 56rem)) / 2);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .reel::-webkit-scrollbar { display: none; }

  .reel__slide {
    flex: 0 0 auto;
    width: min(86vw, 56rem);
    margin: 0;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    scroll-snap-align: center;
    background: var(--ink-2);
  }

  .reel__slide img {
    width: 100%; height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
  }

  .reel__slide figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem;
    padding: clamp(.9rem, 2.5vw, 1.5rem);
    background: linear-gradient(to top, rgba(8, 9, 10, .74), transparent);
  }

  .reel__slide .t {
    font-family: var(--display);
    font-size: clamp(1.05rem, 2.4vw, 1.5rem);
    color: #e9edee;
  }

  .reel__dots {
    display: flex; justify-content: center; gap: 0;
    margin-top: calc(var(--s3) - .9rem);
  }

  /* The dot stays 8px to the eye; the button around it is a finger-sized
     target, so the reel can be paged on a phone without aiming. */
  .reel__dots button {
    width: 40px; height: 40px; padding: 0;
    border: 0; background: none; cursor: pointer;
    display: grid; place-items: center;
    -webkit-tap-highlight-color: transparent;
  }

  .reel__dots button::before {
    content: "";
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--line-2);
    transition: background .3s ease, transform .3s ease;
  }

  .reel__dots button.on::before { background: var(--cyan); transform: scale(1.25); }
  .reel__dots button:hover::before { background: var(--muted); }

  /* ── the founder: one card — the face on top, the promise beneath ── */
  /* .pad only sets side gutters, so the section needs its own vertical
     rhythm — without it the card sits flush on the closing section's
     rule and reads as a broken seam. */
  .founder { padding-block: clamp(4rem, 11vw, var(--s7)); }

  .fcard {
    max-width: 30rem;
    margin-inline: auto;
    border-radius: 22px;
    overflow: hidden;
    background: var(--ink-2);
    border: 1px solid var(--line);
  }

  .fcard__img {
    width: 100%; height: auto; display: block;
    transform: scale(1.05);
    transition: transform 1.4s cubic-bezier(.22, .61, .36, 1);
  }

  .rise.in .fcard__img { transform: none; }

  .fcard__body {
    display: grid; gap: var(--s2);
    padding: clamp(1.4rem, 4.5vw, 2.2rem);
  }

  .fcard__body h2 {
    font-size: clamp(1.6rem, 4.2vw, 2.3rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

  .fcard__body p:not(.label) {
    color: var(--muted);
    line-height: 1.75;
    font-size: .98rem;
  }

  .plate::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(8,9,10,.5) 0%, transparent 22%, transparent 64%, rgba(8,9,10,.78) 100%);
  }

  .plate figcaption {
    position: absolute;
    left: var(--gutter); right: var(--gutter); bottom: clamp(1rem, 3vw, 2.2rem);
    z-index: 2; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
    align-items: baseline; color: #e9edee;
  }

  .plate figcaption .t {
    font-family: var(--display);
    font-size: clamp(1.05rem, 2.2vw, 1.5rem); letter-spacing: -0.01em;
  }

  .plate figcaption .label { color: #98d0d8; }

  /* ═══════════ process ═══════════ */

  .process {
    padding-block: clamp(5rem, 14vw, var(--s7));
    position: relative;
    overflow: hidden;
  }

  /* The globe behind the section: soft, out of focus, turning with the
     scroll. The blur sits on the wrapper so the rotating SVG inside
     stays cheap to composite. */
  .globe {
    position: absolute;
    top: 50%; left: 50%;
    width: min(120vw, 58rem);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: .2;
    filter: blur(5.5px);
  }

  .globe svg {
    width: 100%; height: 100%;
    display: block;
    stroke: var(--cyan);
    will-change: transform;
  }

  .process > .col { position: relative; }

  /* The three things the company does. Three columns on a wide screen,
     stacked on a phone; a hairline between them rather than cards, so
     they read as one statement in three parts. */
  .offer {
    display: grid;
    gap: var(--s4);
    border-top: 1px solid var(--line);
    padding-top: var(--s4);
  }

  @media (min-width: 56rem) {
    .offer {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: var(--s5);
    }
  }

  .offer__item h3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    line-height: 1.16;
    letter-spacing: -.01em;
    margin-bottom: var(--s2);
  }

  .offer__item p {
    color: var(--muted);
    font-size: .96rem;
    line-height: 1.72;
  }

  /* ═══════════ the closing ═══════════ */

  .closing {
    position: relative;
    padding-block: clamp(5.5rem, 15vw, var(--s7));
    /* No rule across the page here. The founder card is already a card —
       a hard line under it reads as a seam between two pages rather than
       a change of act. A glow behind the mark does the separating — and
       it is masked at both ends, because a gradient that simply starts at
       the section's edge draws the very line it was meant to replace. */
    background: var(--ink);
    isolation: isolate;
    overflow: hidden;
  }

  .closing::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 74%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(58% 100% at 50% 34%, rgba(152,208,216,.12), transparent 70%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34%, #000 66%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 34%, #000 66%, transparent 100%);
  }

  /* The animated mark leads the closing — a rounded card, the one place on
     the page that borrows the soft geometry of a title screen. The static
     logo sits behind the video, so a failed or reduced-motion load still
     shows the mark. */
  .brandfilm {
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    background: #08090a center / 60% no-repeat;
    background-image: var(--logo);
    aspect-ratio: 16 / 9;
    transform: translateZ(0);
  }

  @media (min-width: 54rem) {
    .brandfilm { aspect-ratio: 21 / 9; }
  }

  .brandfilm__vid {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }

  .closing h2 {
    font-size: clamp(2.2rem, 6.6vw, 5.4rem);
    letter-spacing: -0.02em; max-width: 14ch;
  }

  .closing h2 em { font-style: italic; color: var(--cyan); }

  /* ── the Instagram connector: unmissable, ours in tone ── */
  /* Instagram: just the glyph and the handle, centred and quiet. */
  .igcard {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    justify-self: center;
    align-self: center;
    margin-inline: auto;
    width: fit-content;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    padding: .85rem 1.7rem;
    background: var(--ink-2);
    transition: border-color .35s ease, transform .35s ease;
  }

  .igcard:hover { border-color: var(--cyan); transform: translateY(-2px); }

  .igcard__glyph { width: clamp(24px, 3vw, 30px); height: auto; color: var(--cyan); flex: none; }

  .igcard__handle {
    font-family: var(--display);
    font-size: clamp(1.2rem, 2.6vw, 1.55rem);
    letter-spacing: -0.01em;
    color: var(--bone);
    white-space: nowrap;
  }

  /* ── the projection screen the address rides on ── */
  .screen { max-width: 64rem; }

  /* The housing is a cylinder seen edge-on, not a pill: light catches the
     top eighth, the underside goes almost black, and the whole thing casts
     a shadow onto the page so it sits on it instead of floating. */
  .screen__case {
    position: relative;
    height: 26px;
    border-radius: 4px / 13px;
    background: linear-gradient(to bottom,
      #4d5659 0%, #3a4346 7%, #262e30 32%, #141a1b 68%, #080b0c 100%);
    border: 1px solid #070a0b;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .17),
      inset 0 -2px 3px rgba(0, 0, 0, .55),
      0 12px 26px rgba(0, 0, 0, .45);
    z-index: 2;
  }

  /* The end brackets are separate parts, so they catch light separately
     and sit a little proud of the tube. */
  .screen__case i {
    position: absolute;
    top: -3px; bottom: -3px;
    width: 13px;
    border-radius: 3px;
    background: linear-gradient(to bottom,
      #5c6669 0%, #414a4d 26%, #222a2c 62%, #0d1112 100%);
    border: 1px solid #070a0b;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .22),
      0 7px 14px rgba(0, 0, 0, .42);
  }

  .screen__case i:first-child { left: -6px; }
  .screen__case i:last-child { right: -6px; }

  /* JS measures the real height and rolls it out at motor speed — a fixed
     max-height guess makes the timing lie. height:0 is the parked state. */
  .screen__shade {
    overflow: hidden;
    height: 0;
    margin-inline: clamp(8px, 1.6vw, 18px);
  }

  /* The little status LED on the housing: on while the motor runs. */
  .screen__case::after {
    content: "";
    position: absolute;
    right: 26px; top: 10px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #232d2f;
    transition: background .35s ease, box-shadow .35s ease;
  }

  .screen.deploying .screen__case::after {
    background: var(--cyan);
    box-shadow: 0 0 9px 1px rgba(152, 208, 216, .75);
    animation: screenLed .9s linear infinite;
  }

  @keyframes screenLed { 50% { opacity: .45; } }

  /* The weighted rail arrives with momentum: the cloth stretches a touch
     past its length and springs back. */
  .screen.settle .screen__shade {
    transform-origin: top center;
    animation: screenSettle .85s cubic-bezier(.33, .8, .45, 1);
  }

  @keyframes screenSettle {
    0%   { transform: scaleY(1); }
    32%  { transform: scaleY(1.013); }
    68%  { transform: scaleY(.996); }
    100% { transform: scaleY(1); }
  }

  /* The cloth: matte white with the classic black masking border. Local
     scheme flip — the form's own token-built styles just work on it. */
  .screen__cloth {
    --ink-2: #f1f2f2;
    --ink-3: #fbfcfc;
    --bone: #171c1d;
    --muted: #495457;
    --faint: #56605f;
    --line: #d2d8d9;
    --line-2: #b8c0c1;
    --cyan: #14666f;
    --cyan-hi: #0d545c;

    background:
      /* the housing throws a shadow across the top of the cloth */
      linear-gradient(to bottom, rgba(9, 11, 12, .13), rgba(9, 11, 12, 0) 70px),
      /* fabric, not paper: a faint horizontal weave and a slow fall-off
         toward the sides, both far below the threshold of noticing */
      repeating-linear-gradient(0deg,
        rgba(9, 11, 12, .016) 0 1px, rgba(9, 11, 12, 0) 1px 3px),
      linear-gradient(to right,
        rgba(9, 11, 12, .032), rgba(9, 11, 12, 0) 22%,
        rgba(9, 11, 12, 0) 78%, rgba(9, 11, 12, .032)),
      linear-gradient(to bottom, #f5f6f6, #e7eaea);
    /* Masking band: narrow at the sides, deeper along the bottom, the way
       a real screen is made. Twelve pixels all round read as a CSS box. */
    border: 0 solid #0b0f10;
    border-width: 0 7px 15px;
    padding: clamp(1.2rem, 3vw, 2.2rem);
    color: var(--bone);
    box-shadow: 0 16px 30px rgba(0, 0, 0, .34);
  }

  /* The weighted bar at the hem: round, so the light runs along its upper
     third and the underside disappears. It carries the deepest shadow of
     the three parts, because it hangs furthest from the wall. */
  .screen__rail {
    height: 14px;
    border-radius: 7px / 4px;
    background: linear-gradient(to bottom,
      #5c6669 0%, #3c4548 17%, #1e2527 55%, #0a0d0e 100%);
    border: 1px solid #070a0b;
    margin-inline: -6px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .18),
      0 14px 24px rgba(0, 0, 0, .5);
  }

  html.no-scrolly .screen__shade { height: auto; }
  @media (prefers-reduced-motion: reduce) {
    .screen.settle .screen__shade, .screen.deploying .screen__case::after { animation: none; }
  }

  .btn {
    justify-self: start;
    font-family: var(--body);
    font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
    color: var(--ink); background: var(--cyan);
    border: 1px solid var(--cyan); border-radius: 2px;
    padding: .95rem 2rem; cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
  }

  .btn:hover { background: var(--cyan-hi); border-color: var(--cyan-hi); }

  /* What the screen deploys to show. The address is the whole message:
     one line big enough to read across a room, the other ways under it. */
  .reach { display: grid; gap: var(--s2); justify-items: center; text-align: center; }

  .reach__mail {
    /* Deliberately the body face, not the display one. This began as a
       repair — Bodoni drew the hyphen as a hairline that vanished at
       this size, so the address read "contact@srs dynamic.com" — and it
       stays after the switch to Source Serif, whose hyphen is solid,
       because an address is data and data is set in the body face. */
    font-family: var(--body);
    font-weight: 400;
    font-size: clamp(1.05rem, 3.4vw, 1.95rem);
    letter-spacing: .005em;
    line-height: 1.25;
    color: var(--bone);
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--line-2);
    padding-bottom: .1em;
    transition: color .3s ease, border-color .3s ease;
  }

  .reach__mail:hover { color: var(--cyan); border-color: var(--cyan); }

  .reach__row {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .2rem clamp(1rem, 4vw, 2.4rem);
  }

  .reach__row a {
    font-size: .82rem; letter-spacing: .04em; color: var(--muted);
    display: inline-block; padding-block: .55rem;
  }

  .reach__row a:hover { color: var(--cyan); }

  .reach__note { font-size: .78rem; color: var(--faint); max-width: 46ch; line-height: 1.7; }

  /* The parked screen's call button. Fades once the screen is down.
     The id selector outweighs .rise.in, which also sets opacity. */
  .screen__ctl {
    display: grid; justify-items: center; gap: .55rem;
    margin-block: var(--s2) calc(-1 * var(--s2));
    transition: opacity .7s ease;
  }
  .screen__ctl .btn { justify-self: center; }
  #screenctl.gone { opacity: 0; pointer-events: none; }

  /* The stacked end blocks — big quiet headings, after the manner of the
     old site's footer, in this site's own dark voice. */
  .endcap {
    display: grid;
    gap: var(--s5);
    border-top: 1px solid var(--line);
    padding-top: var(--s5);
  }

  @media (min-width: 54rem) {
    .endcap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
  }

  .endcap__block h3 {
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    margin-bottom: var(--s3);
  }

  .endcap__block p { font-size: 1.02rem; line-height: 2; }

  .endcap__block a,
  .endcap__block button {
    font: inherit; color: inherit;
    background: none; border: 0; cursor: pointer;
    display: inline-block; padding-block: .4rem;
    border-bottom: 1px solid var(--line-2);
    transition: color .3s ease, border-color .3s ease;
  }

  .endcap__block a:hover,
  .endcap__block button:hover { color: var(--cyan); border-color: var(--cyan); }

  .details { display: grid; gap: var(--s4); }

  .details .v {
    font-family: var(--display);
    font-size: clamp(1.05rem, 1.9vw, 1.3rem);
    line-height: 1.45; margin-top: var(--s1);
  }

  .details a {
    border-bottom: 1px solid var(--line-2); padding-bottom: .12em;
    transition: border-color .35s ease, color .35s ease;
  }

  .details a:hover { color: var(--cyan); border-color: var(--cyan); }

  footer { border-top: 1px solid var(--line); padding-block: var(--s4); }

  footer .row {
    display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4);
    justify-content: space-between; align-items: center;
    color: var(--faint); font-size: .78rem; letter-spacing: .04em;
  }

  .foot__mark { width: 96px; opacity: .75; }

  .foot__legal { display: inline-flex; gap: var(--s3); }

  .foot__legal button {
    font: inherit; color: var(--faint);
    background: none; border: 0; padding: 0; cursor: pointer;
    border-bottom: 1px solid var(--line-2);
    transition: color .3s ease, border-color .3s ease;
  }

  .foot__legal button:hover { color: var(--bone); border-color: var(--cyan); }

  .sheet {
    background: var(--ink-2);
    color: var(--bone);
    border: 1px solid var(--line-2);
    border-radius: 4px;
    padding: 0;
    max-width: min(34rem, calc(100vw - 2.5rem));
    margin: auto;
  }

  .sheet::backdrop { background: rgba(0, 0, 0, .65); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

  .sheet__in { padding: clamp(1.6rem, 4vw, 2.6rem); }

  .sheet h3 { font-size: 1.5rem; }

  .sheet a { border-bottom: 1px solid var(--line-2); }
  .sheet a:hover { color: var(--cyan); border-color: var(--cyan); }

  .sheet__close { align-self: flex-start; margin-top: var(--s2); }

  /* Impossible to mistake for finished content. */
  .pending {
    display: inline-block;
    padding: .1rem .5rem;
    border: 1px dashed var(--cyan);
    border-radius: 2px;
    color: var(--cyan);
    font-size: .85em;
    letter-spacing: .04em;
  }

  /* ═══════════ motion ═══════════ */

  /* Unlit means dimmed, never black: everything stays readable, and once
     the beam has passed over a section it stays lit — the projector paints
     the page, it does not flicker. */
  .rise {
    opacity: .38;
    transform: translateY(22px);
    filter: brightness(.6) saturate(.65);
  }

  .rise.in {
    opacity: 1; transform: none; filter: none;
    transition: opacity 1.15s cubic-bezier(.22,.61,.36,1),
                transform 1.15s cubic-bezier(.22,.61,.36,1),
                filter 1.3s ease;
  }

  /* The opening is one orchestrated move, not four independent fades. */
  .lift { opacity: 0; transform: translateY(16px); animation: lift 1.25s cubic-bezier(.22,.61,.36,1) forwards; }
  .lift--1 { animation-delay: .12s; }
  .lift--2 { animation-delay: .34s; }
  .lift--3 { animation-delay: 1.7s; }
  .lift--4 { animation-delay: 1.95s; }

  @keyframes lift { to { opacity: 1; transform: none; } }

  /* Headline lines rise out of their own clip box, like light coming up. */
  .line { display: block; overflow: hidden; }
  .line > span { display: block; transform: translateY(110%); animation: lineup 1.15s cubic-bezier(.19,.65,.22,1) forwards; }
  .line:nth-child(1) > span { animation-delay: 1.15s; }
  .line:nth-child(2) > span { animation-delay: 1.30s; }
  .line:nth-child(3) > span { animation-delay: 1.45s; }

  @keyframes lineup { to { transform: none; } }

  /* Scroll-scrubbed props, written by JS every frame. */
  .rig, .rig__svg, .rig__glow, .rig__cone { will-change: opacity, transform; }

  @media (prefers-reduced-motion: reduce) {
    .rise, .rise.in { opacity: 1; transform: none; filter: none; transition: none; }
    .lift { opacity: 1; transform: none; animation: none; }
    .rig__glow, .rig__cone, .hero__light { animation: none !important; opacity: 1 !important; transform: none !important; }
    .rig__svg { animation: none !important; opacity: 1 !important; transform: translateX(-50%) !important; }
    .line > span { animation: none !important; transform: none !important; }
    .beam { display: none; }
    .scroll i::after { animation: none; transform: translateY(0); }
    .scroll__chev { animation: none; }
    .night-bg {
    width: 100%; height: 100%;
    background-image: var(--night);
    background-size: cover;
    background-position: center;
  }

  .plate img { transform: none !important; }
    .nav { transition: none; }
  }
  /* Keyboard users can bypass the opening film entirely. */
  .skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    padding: .7rem 1.1rem;
    background: var(--cyan); color: var(--ink);
    font-size: .78rem; font-weight: 500; letter-spacing: .12em;
    text-transform: uppercase; text-decoration: none;
  }
  .skip:focus { left: 1rem; top: 1rem; }

  /* Paper gets the content, not the theatre. */
  /* ═══════════ journal ═══════════
     Long-form pages that share the site's tokens but none of its film.
     The measure is deliberately narrow — these are read, not scanned. */
  /* The bar is fixed and always visible here, so the page starts below it. */
  /* Short subpages (404, legal notice) would otherwise leave the footer
     stranded mid-screen. The homepage keeps its own layout untouched. */
  body.sub { min-height: 100svh; display: flex; flex-direction: column; }
  body.sub main { flex: 1 0 auto; }

  .jpage { padding-block: calc(var(--nav-h) + clamp(2.2rem, 6vw, 3.5rem)) clamp(4rem, 10vw, 7rem); }

  .jhead { max-width: 44rem; margin-inline: auto; }
  .jhead h1 {
    font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.05;
    letter-spacing: -.025em; margin: .6rem 0 0;
  }
  .jhead .dim { margin: 1.1rem 0 0; max-width: 34rem; }

  .jlist {
    max-width: 44rem; margin: clamp(2.5rem, 7vw, 4rem) auto 0;
    display: flex; flex-direction: column;
  }

  .jitem {
    display: block; padding-block: clamp(1.6rem, 4vw, 2.2rem);
    border-top: 1px solid var(--line);
    transition: border-color .35s ease;
  }
  .jitem:last-child { border-bottom: 1px solid var(--line); }
  .jitem:hover { border-top-color: var(--cyan); }

  .jitem h2 {
    font-size: clamp(1.35rem, 3.4vw, 1.9rem); line-height: 1.16;
    letter-spacing: -.015em; margin: .5rem 0 0;
    transition: color .35s ease;
  }
  .jitem:hover h2 { color: var(--cyan); }
  .jitem p { color: var(--muted); font-size: .95rem; margin: .6rem 0 0; max-width: 38rem; }

  .jmeta {
    display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: baseline;
    font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--faint);
  }
  .jmeta .k { color: var(--cyan); }

  /* ── a single piece ── */
  .article { max-width: 44rem; margin-inline: auto; }
  .article > * { max-width: 34rem; }

  .article .lead {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(1.2rem, 2.9vw, 1.5rem); line-height: 1.45;
    color: var(--bone); margin: 0 0 var(--s4);
  }

  .article h2 {
    font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.2;
    letter-spacing: -.015em;
    margin: clamp(2.2rem, 5vw, 3rem) 0 .8rem;
  }

  .article p { color: var(--muted); margin: 0 0 1.1rem; }
  .article em { color: var(--bone); font-style: italic; }

  .article .close {
    margin-top: clamp(2.2rem, 5vw, 3rem);
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
    color: var(--bone);
  }

  .jfoot {
    max-width: 44rem; margin: clamp(3rem, 8vw, 4.5rem) auto 0;
    display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4);
    align-items: center; justify-content: space-between;
  }

  .jback {
    font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--faint); display: inline-block; padding-block: .4rem;
    transition: color .3s ease;
  }
  .jback:hover { color: var(--cyan); }

  @media print {
    :root, :root[data-scheme="dark"], :root[data-theme="dark"] {
      --ink: #fff; --ink-2: #fff; --ink-3: #fff;
      --bone: #000; --muted: #333; --faint: #555;
      --cyan: #0a4a52; --cyan-hi: #0a4a52;
      --line: #bbb; --line-2: #999; --veil: #fff;
    }
    body { background: #fff; color: #000; }
    .nav, .stage, .beam, .stage__hint, .stage__ailabel, .hero__light,
    .screen__case, .screen__rail, .screen__ctl, .reel__dots, .globe,
    .brandfilm, dialog, .skip { display: none !important; }
    .rise, .rise.in { opacity: 1 !important; transform: none !important; filter: none !important; }
    .statement { display: block !important; }
    .screen__shade { height: auto !important; overflow: visible !important; }
    .screen__cloth { border-color: #000; background: #fff; }
    .gen-plate { display: block !important; }
    a { text-decoration: underline; }
  }