/* Be Vietnam Pro, self hosted: the display face is the design, so it must not
   wait on a third party before the first screen can paint */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:200;font-display:swap;src:url("fonts/bvp-200.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/bvp-400.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/bvp-600.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:italic;font-weight:800;font-display:swap;src:url("fonts/bvp-800i.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   Variant C, Editorial. Type is the image.
   Dot-grid black, oversized thin uppercase broken across lines,
   small body blocks set into the gaps on a rule that runs off the
   left edge, one bold italic orange accent, orange primary action.
   One family: Be Vietnam Pro 200 (display), 400 (text),
   600 (micro labels, buttons), 800 italic (the accent).
   ============================================================ */

html[data-v="editorial"]{
  --bg:#0A0A0A;
  --raise:#0E0E0D;
  --raise-2:#131312;
  --line:rgba(237,234,228,.12);
  --line-2:rgba(237,234,228,.24);

  --ink:#EDEAE4;
  --ink-2:#8F8C86;
  --ink-3:#86837D;
  --muted-line:#5E5B56;

  --acc:#FF5B1F;
  --acc-hover:#FF7A45;
  --btn-bg:var(--acc);
  --btn-ink:#0A0A0A;
  --btn-bg-hover:var(--acc-hover);
  --ghost-line:rgba(237,234,228,.32);
  --focus:#EDEAE4;
  --bad:#FF9090;
  --good:#9BD8A8;

  --f-display:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-text:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hl-weight:200;
  --hl-track:0em;
  --hl-lh:.94;
  --hl-case:uppercase;
  --hero-size:clamp(40px,11.3vw,76px);
  --hl-size:clamp(38px,10.8vw,64px);
  --sec-size:clamp(40px,min(6.2vw,9.4vh),116px);
  --sub-size:17px;
  --body-size:17px;

  --r-btn:0px;
  --r-card:2px;
  --r-mock:3px;
  --r-field:0px;

  --maxw:1776px;
  --sec-pad:clamp(80px,13vh,168px);
  --col-gap:clamp(16px,2vw,32px);
  --indent:clamp(44px,16%,150px);

  --dots:radial-gradient(circle,rgba(237,234,228,.095) 1px,rgba(237,234,228,0) 1.6px);
  --dot:28px;
  --arr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8h12M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
  --arr-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 12.5 12.5 3.5M5.5 3.5h7v7' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");

  scrollbar-color:rgba(237,234,228,.24) transparent;
}

/* the film sizes its words against the viewport, the story against the width */
html[data-v="editorial"].film{
  --hero-size:clamp(56px,min(6.4vw,10.4vh),116px);
  --hl-size:clamp(44px,min(5.5vw,8.8vh),100px);
  --sub-size:clamp(16px,min(1.2vw,2vh),19px);
}

/* ---------- ground, browser surfaces ---------- */

html[data-v="editorial"] body{
  background:var(--dots) 0 0 / var(--dot) var(--dot),var(--bg);
  color:var(--ink-2);
  caret-color:var(--acc);
}
/* with a mouse the grid is a field of points (site.js): two canvases take
   over from the CSS dots once they have painted, one behind the page and
   one riding the film's world. touch, reduced motion and no-JS keep these */
html[data-v="editorial"] .dots{display:none;pointer-events:none}
html[data-v="editorial"].dots-live body{background:transparent}
html[data-v="editorial"].dots-live .dots--page{
  display:block;position:fixed;inset:0;z-index:-1;width:100%;height:100%;
}
/* while the field is live the pointer is its instrument: a crosshair over
   the ground and the words, as on a drawing table. anything you can act on
   keeps the cursor that says so */
html[data-v="editorial"].dots-live body{cursor:crosshair}
html[data-v="editorial"].dots-live :is(a,button,label,summary,select){cursor:pointer}
html[data-v="editorial"].dots-live :is(input,textarea){cursor:text}
html[data-v="editorial"].dots-live :is(input[type="radio"],input[type="checkbox"]){cursor:pointer}
html[data-v="editorial"].dots-live .btn[disabled]{cursor:default}
html[data-v="editorial"] ::selection{background:var(--acc);color:#0A0A0A}
html[data-v="editorial"] ::-webkit-scrollbar-thumb{background:rgba(237,234,228,.2);border-radius:0;border:3px solid var(--bg)}
html[data-v="editorial"] a{text-decoration-color:rgba(237,234,228,.34);text-underline-offset:.26em}
html[data-v="editorial"] a:hover{text-decoration-color:currentColor}
html[data-v="editorial"] :focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:0}
html[data-v="editorial"] .skip{border-radius:0;font:600 13px/1 var(--f-text);letter-spacing:.12em;text-transform:uppercase}

/* ============================================================
   TYPE
   ============================================================ */

html[data-v="editorial"] .hl{font-kerning:normal;font-synthesis:none;word-spacing:-.05em}
html[data-v="editorial"] .hl .ln--2{color:var(--ink-3)}
html[data-v="editorial"] .hl .ln--strong{font-weight:600;color:var(--ink)}

/* the one accent: the hero's second line, bold italic orange */
html[data-v="editorial"] .hl--hero .ln--2{
  margin-top:.36em;
  font-size:.5em;font-weight:800;font-style:italic;
  line-height:1.04;letter-spacing:-.008em;
  color:var(--acc);
}
/* if the page gains a single-word hook (<em class="acc">), the word carries
   the accent and the second line returns to the thin grey voice */
html[data-v="editorial"] .hl .acc{font-weight:800;font-style:italic;color:var(--acc);letter-spacing:-.01em}
html[data-v="editorial"] .hl--hero:has(.acc) .ln--2{
  margin-top:.08em;font-size:.8em;font-weight:200;font-style:normal;
  line-height:inherit;letter-spacing:0;color:var(--ink-3);
}
/* and an inline mark set into a line, the way the reference sets an icon in a word */
html[data-v="editorial"] .hl .inmark{display:inline-block;width:.9em;height:.54em;margin:0 .08em 0 .14em;vertical-align:.1em}

html[data-v="editorial"] .sub,
html[data-v="editorial"] .lede{color:var(--ink-2);line-height:1.55}
html[data-v="editorial"] .sub{max-width:36ch}
html[data-v="editorial"] .lede{max-width:44ch}

/* a small text block led in by a hairline that runs off the left edge */
html[data-v="editorial"] .band .sub,
html[data-v="editorial"] .sec-head .lede{position:relative}
html[data-v="editorial"] .band:not(.band--hero) .sub::before,
html[data-v="editorial"] .sec-head .lede::before{
  content:"";position:absolute;top:.78em;right:calc(100% + 18px);
  width:100vw;height:1px;background:var(--line-2);pointer-events:none;
  transform-origin:right center;
}

html[data-v="editorial"] .wordmark{
  font:200 clamp(30px,8vw,46px)/1 var(--f-display);
  letter-spacing:.04em;text-transform:uppercase;
}
html[data-v="editorial"] .wordmark__sub{color:var(--ink-3)}

/* ============================================================
   CONTROLS
   ============================================================ */

html[data-v="editorial"] .btn{
  gap:14px;min-height:52px;padding:0 24px;
  border-radius:0;
  font:600 13px/1 var(--f-text);letter-spacing:.12em;text-transform:uppercase;
}
html[data-v="editorial"] .btn--primary::after,
html[data-v="editorial"] .btn--ghost::after{
  content:"";flex:none;width:14px;height:14px;
  background:currentColor;
  -webkit-mask:var(--arr) center / contain no-repeat;mask:var(--arr) center / contain no-repeat;
  transition:transform .3s var(--ease-out);
}
html[data-v="editorial"] .btn--primary:hover::after,
html[data-v="editorial"] .btn--ghost:hover::after{transform:translateX(4px)}
html[data-v="editorial"] .btn--primary:hover{background:var(--btn-bg-hover)}
html[data-v="editorial"] .btn--primary[disabled],
html[data-v="editorial"] .btn--primary[disabled]:hover{background:var(--btn-bg);opacity:.5}
html[data-v="editorial"] .btn--primary[disabled]::after{display:none}

/* the secondary action is a text link with a hairline under it */
html[data-v="editorial"] .btn--ghost{
  min-height:44px;padding:0 2px;border:0;
  color:var(--ink);
  background:linear-gradient(var(--ghost-line),var(--ghost-line)) left calc(50% + 13px) / 100% 1px no-repeat;
}
html[data-v="editorial"] .btn--ghost:hover{
  border:0;
  background:linear-gradient(var(--ink),var(--ink)) left calc(50% + 13px) / 100% 1px no-repeat;
}
html[data-v="editorial"] .btn--lg{min-height:60px;padding:0 30px;font-size:14px}

/* the announcement: a micro uppercase line on a rule that runs off the left edge */
html[data-v="editorial"] .badge{
  position:relative;
  gap:12px;min-height:44px;margin:0 0 clamp(22px,3.6vh,40px);padding:0;
  border:0;border-radius:0;background:none;
  font:600 12px/1.35 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
html[data-v="editorial"] .badge::before{
  content:"";position:absolute;right:calc(100% + 16px);top:50%;
  width:100vw;height:1px;background:var(--line-2);pointer-events:none;
}
html[data-v="editorial"] .badge:hover{background:none;border:0}
html[data-v="editorial"] .badge__tag{
  flex:none;padding:5px 7px 4px;border:1px solid var(--line-2);border-radius:0;
  background:none;color:var(--ink);font-size:11px;font-weight:600;letter-spacing:.14em;
}
html[data-v="editorial"] .badge__txt{color:var(--ink-2);transition:color .25s var(--ease)}
html[data-v="editorial"] .badge:hover .badge__txt{color:var(--ink)}
html[data-v="editorial"] .badge__chev{color:var(--ink)}

/* ============================================================
   HEADER: brand left, quiet text nav top right, text CTA
   ============================================================ */

html[data-v="editorial"] .hdr__in{width:min(var(--maxw),100% - var(--gut) * 2)}
/* no glass: a solid ground that fades out below the bar once the page moves */
html[data-v="editorial"] .hdr::before{
  content:"";position:absolute;inset:0 0 -28px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#0A0A0A 0%,#0A0A0A calc(100% - 28px),rgba(10,10,10,0) 100%);
  opacity:0;transition:opacity .35s var(--ease);
}
html[data-v="editorial"] .hdr.is-scrolled::before{opacity:1}
html[data-v="editorial"] .hdr.is-scrolled{
  background:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom-color:transparent;
}
html[data-v="editorial"] .brand{gap:12px}
html[data-v="editorial"] .brand__mark{width:28px;height:17px}
html[data-v="editorial"] .brand__word{font:600 13px/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase}
html[data-v="editorial"] .brand__sub{color:var(--ink-3);font-weight:400}

html[data-v="editorial"] .nav{gap:clamp(6px,1.4vw,26px)}
html[data-v="editorial"] .nav__link{padding:0 4px;font:400 14px/1 var(--f-text);letter-spacing:.01em;color:var(--ink-2)}
html[data-v="editorial"] .nav__link:hover{color:var(--ink)}
html[data-v="editorial"] .nav__cta{
  margin-left:clamp(6px,1vw,14px);
  min-height:44px;padding:0 2px;gap:10px;
  border:0;border-radius:0;
  color:var(--ink);font:600 12px/1 var(--f-text);letter-spacing:.14em;
  background:linear-gradient(var(--ghost-line),var(--ghost-line)) left calc(50% + 12px) / 100% 1px no-repeat;
}
html[data-v="editorial"] .nav__cta::after{
  content:"";flex:none;width:12px;height:12px;background:currentColor;
  -webkit-mask:var(--arr) center / contain no-repeat;mask:var(--arr) center / contain no-repeat;
  transition:transform .3s var(--ease-out);
}
/* the first screen carries its own button; the header's arrives once it is behind you */
html[data-v="editorial"].js .nav__cta{transition:opacity .35s var(--ease),visibility 0s linear .35s}
html[data-v="editorial"].story:has(.ctabar.is-on) .nav__cta{opacity:0;visibility:hidden}
html[data-v="editorial"] .nav__cta:hover{color:var(--ink);background:linear-gradient(var(--ink),var(--ink)) left calc(50% + 12px) / 100% 1px no-repeat}
html[data-v="editorial"] .nav__cta:hover::after{transform:translateX(3px)}

/* the progress line becomes a vertical side rail on the left edge */
html[data-v="editorial"] .hdr__progress{
  left:clamp(14px,1.9vw,30px);right:auto;top:36vh;bottom:auto;
  width:28vh;height:1px;
  background:rgba(237,234,228,.14);
  transform-origin:0 0;transform:rotate(90deg);
}
html[data-v="editorial"] .hdr__fill{background:var(--ink)}

/* ============================================================
   THE STORY LAYOUT (phones, portrait tablets, reduced motion)
   ============================================================ */

html[data-v="editorial"].story .band .sub{margin-top:24px;margin-left:var(--indent)}
html[data-v="editorial"].story .band--hero .badge{margin-left:var(--indent)}
html[data-v="editorial"].story .band--hero .hl--hero .ln--2{font-size:.7em}
html[data-v="editorial"].story .band--hero .sub{margin-top:26px}
html[data-v="editorial"].story .band--hero .cta{margin-top:30px}
html[data-v="editorial"].story .band:not(.band--hero) .band__in::before{width:1px;height:64px;margin-bottom:26px}
html[data-v="editorial"] .act--still .still{border-radius:0;border:1px solid var(--line)}

/* ============================================================
   THE FILM
   ============================================================ */

/* the words' scrim, a touch deeper so thin strokes hold over the film */
html[data-v="editorial"].film .stage::after{
  background:linear-gradient(90deg,rgba(5,6,8,.8) 0%,rgba(5,6,8,.58) 34%,rgba(5,6,8,.14) 58%,rgba(5,6,8,0) 70%);
}

/* the dot grid rides with the world, so the camera's travel reads; it
   comes up as the chip film goes down */
html[data-v="editorial"].film .world::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--dots) 0 0 / var(--dot) var(--dot);
  opacity:clamp(0,calc((1 - var(--scrim,1)) * 1.54),1);
}
/* the field's film canvas sits where the world's grid did: above the scrim,
   under the world, and fading with the same scrim */
html[data-v="editorial"].dots-live.film .world::before{display:none}
html[data-v="editorial"].dots-live.film .dots--film{
  display:block;position:absolute;inset:0;z-index:2;width:100%;height:100%;
  opacity:clamp(0,calc((1 - var(--scrim,1)) * 1.54),1);
}

/* the story's rising tick takes no room in the film */
html[data-v="editorial"].film .band .band__in::before{display:none}
html[data-v="editorial"].film .band__in{width:calc(var(--hl-size) * 10.7)}
html[data-v="editorial"].film .band .sub{
  margin-top:calc(var(--hl-size) * .46);
  margin-left:calc(var(--hl-size) * 3.1);
}
/* the rule draws out from the text to the edge, driven by the band's --k */
html[data-v="editorial"].film .band:not(.band--hero) .sub::before{
  transform:scaleX(clamp(0,calc((var(--k,1) - .3) * 2),1));
}

/* lines rise out of a mask at their own baseline, scrubbed by --k */
html[data-v="editorial"].film .band .ln{
  --lk:clamp(0,calc((var(--k,1) - var(--i,0) * .2) * 2.2),1);
  opacity:clamp(0,calc(var(--lk) * 4),1);
  transform:translate3d(0,calc((1 - var(--lk)) * 104%),0);
  clip-path:inset(-.3em -.6em calc((1 - var(--lk)) * 104% - .3em) -.6em);
}

/* ---- the first screen ---- */
html[data-v="editorial"].film .band--hero .band__in{width:min(calc(var(--hero-size) * 7.95),49vw)}
html[data-v="editorial"].film .band--hero .badge,
html[data-v="editorial"].film .band--hero .sub,
html[data-v="editorial"].film .band--hero .cta{margin-left:calc(var(--hero-size) * 2.9)}
html[data-v="editorial"].film .band--hero .sub{margin-top:calc(var(--hero-size) * .42);max-width:34ch}
html[data-v="editorial"].film .band--hero .badge{width:max-content;white-space:nowrap}
html[data-v="editorial"].film .band--hero .cta{margin-top:calc(var(--hero-size) * .36);gap:14px 30px;align-items:center;flex-wrap:nowrap;width:max-content}
html[data-v="editorial"].film .band--hero .ln{
  opacity:1;transform:none;clip-path:none;
  animation:ed-rise 1.25s var(--ease-out) both;
}
html[data-v="editorial"].film .band--hero .ln:nth-child(2){animation-delay:.14s}
@keyframes ed-rise{
  from{transform:translate3d(0,104%,0);clip-path:inset(-.3em -.6em 104% -.6em)}
  to{transform:translate3d(0,0,0);clip-path:inset(-.3em -.6em -.3em -.6em)}
}

/* ---- per beat composition ---- */
/* one studio: a narrow column that stays clear of the chip, first line larger,
   the grey voice broken over three short lines */
html[data-v="editorial"].film .band--studio .band__in{width:min(calc(var(--hl-size) * 7.9),42vw)}
html[data-v="editorial"].film .band--studio .hl{font-size:calc(var(--hl-size) * .88)}
html[data-v="editorial"].film .band--studio .ln:first-child{font-size:1.3em}
html[data-v="editorial"].film .band--studio .ln--2{font-size:.8em}
html[data-v="editorial"].film .band--studio .sub{margin-left:calc(var(--hl-size) * 2.75);max-width:32ch}
/* the noise and the panels: a shallower indent keeps the body block clear of
   the notes and of the panels travelling down the line */
html[data-v="editorial"].film .band--noise .band__in{width:min(calc(var(--hl-size) * 8.6),46vw)}
html[data-v="editorial"].film .band--noise .sub{margin-left:calc(var(--hl-size) * 1.4);max-width:30ch}
/* the jobs: a narrower column, so the panels travelling down the line pass clear of it */
html[data-v="editorial"].film .band--jobs .band__in{width:min(calc(var(--hl-size) * 7.8),42vw)}
html[data-v="editorial"].film .band--jobs .hl{font-size:calc(var(--hl-size) * .64)}
html[data-v="editorial"].film .band--jobs .sub{margin-left:calc(var(--hl-size) * 1.4);max-width:24ch}
/* the climb: one statement, set big */
html[data-v="editorial"].film .band--climb .band__in{width:min(calc(var(--hl-size) * 12),52vw)}
html[data-v="editorial"].film .band--climb .hl{font-size:calc(var(--hl-size) * 1.12)}
/* its last two words are tied ("something bigger.") and on a stage narrower
   than 16:9 they run past the column; the reveal's mask reached only .6em
   past it and cut the R off. It reaches as far as the words can now */
html[data-v="editorial"].film .band--climb .ln{clip-path:inset(-.3em -6em calc((1 - var(--lk)) * 104% - .3em) -.6em)}
/* handed back: two long lines, given room */
html[data-v="editorial"].film .band--handed .band__in{width:min(calc(var(--hl-size) * 6.2),30vw,44vh)}
html[data-v="editorial"].film .band--handed .hl{font-size:calc(var(--hl-size) * .86)}
/* the plates take the right half, so the small block keeps well clear of them */
html[data-v="editorial"].film .band--handed .sub{max-width:17ch}
/* the resolve: centred over the mark */
html[data-v="editorial"].film .band--c .band__in{width:min(calc(var(--hl-size) * 14),80vw)}
html[data-v="editorial"].film .band--c .hl{font-size:calc(var(--hl-size) * .78)}
html[data-v="editorial"].film .band--c{padding-top:calc(var(--hdr-h) + 5vh)}

/* ---- props ---- */
html[data-v="editorial"].film .wordmark{font-size:4.2vh;letter-spacing:.03em}
html[data-v="editorial"].film .act--word .rule{height:2px;margin-top:2.2vh}

/* ============================================================
   PANELS AND MOCKS: case-study thumbnails
   ============================================================ */

html[data-v="editorial"] .pan__frame{border-radius:var(--r-card);background:var(--raise);border-color:var(--line)}
html[data-v="editorial"] .pan__frame::before{right:auto;width:56px;height:2px;background:var(--acc)}
html[data-v="editorial"] .pan__media{background:var(--raise-2)}
html[data-v="editorial"] .pan__body{border-top:1px solid var(--line)}
html[data-v="editorial"] .pan__ttl{
  margin:0 0 10px;
  font:200 clamp(26px,2.5vw,42px)/1 var(--f-display);
  letter-spacing:0;text-transform:uppercase;color:var(--ink);
}
html[data-v="editorial"] .pan__h{font-size:18px;line-height:1.4;color:var(--ink);text-wrap:balance}
html[data-v="editorial"] .pan__line{font-size:16px;color:var(--ink-2)}

html[data-v="editorial"].film .pan.act .pan__ttl{font-size:3.1vh;margin-bottom:.9vh}
html[data-v="editorial"].film .pan.act .pan__line{font-size:1.55vh;color:var(--ink-2)}

html[data-v="editorial"].story .pan.act .pan__frame{width:min(100%,520px)}
html[data-v="editorial"].story .pan.act .pan__ttl{font-size:30px}

/* ============================================================
   SECTIONS BELOW THE FILM
   ============================================================ */

html[data-v="editorial"] .sec-head{
  max-width:none;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);
  margin-bottom:clamp(40px,7vh,96px);
}
html[data-v="editorial"] .sec-head .hl{grid-column:1 / -1}
html[data-v="editorial"] .sec-head .lede{grid-column:7 / -1;margin-top:clamp(20px,3vh,40px)}
@media (min-width:1101px){
  html[data-v="editorial"] .sec-head .hl{grid-column:1 / span 9;grid-row:1}
  html[data-v="editorial"] .sec-head .lede{
    grid-column:10 / -1;grid-row:1;align-self:end;
    margin:0 0 .5em;padding-top:18px;border-top:1px solid var(--line-2);
    font-size:16px;max-width:none;
  }
  html[data-v="editorial"] .sec-head .lede::before{display:none}
}

/* ---- the work ---- */
html[data-v="editorial"] .grid{row-gap:clamp(56px,9vh,112px);column-gap:var(--col-gap)}
html[data-v="editorial"] .work .pan__frame{background:none;border:0;border-radius:0;overflow:visible}
html[data-v="editorial"] .work .pan__media{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
html[data-v="editorial"] .work .pan__body{border-top:0;padding:24px 0 0}
html[data-v="editorial"] .work .pan__ttl{margin-bottom:16px}
html[data-v="editorial"] .work .pan__h{margin-bottom:6px}

@media (min-width:1101px){
  html[data-v="editorial"] .grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  html[data-v="editorial"] .pan--site{grid-column:1 / span 7;grid-row:1}
  html[data-v="editorial"] .pan--ad{grid-column:9 / span 4;grid-row:1;margin-top:clamp(96px,18vh,220px)}
  html[data-v="editorial"] .pan--social{grid-column:2 / span 5;grid-row:2}
  html[data-v="editorial"] .pan--seo{grid-column:8 / span 5;grid-row:2;margin-top:clamp(64px,13vh,170px)}
  html[data-v="editorial"] .work .pan--site .pan__media{padding:clamp(36px,4.4vw,72px)}
  html[data-v="editorial"] .work .pan--site .mk{font-size:clamp(11px,1.05vw,16px)}
  html[data-v="editorial"] .work .pan--ad .mk-pair{font-size:clamp(8px,.62vw,11px)}
  html[data-v="editorial"] .work .pan--social .mk{font-size:clamp(9px,.8vw,13px)}
  html[data-v="editorial"] .work .pan--seo .mk{font-size:clamp(9px,.78vw,13px)}
  html[data-v="editorial"] .work .pan--site .pan__body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--col-gap);align-items:start}
  html[data-v="editorial"] .work .pan--site .pan__ttl{grid-row:1 / span 2}
}

/* ---- the problem picker ---- */
html[data-v="editorial"] .pick__opts{gap:0;border-top:1px solid var(--line)}
html[data-v="editorial"] .opt__txt{
  min-height:clamp(64px,8.6vh,92px);padding:14px 2px;gap:24px;
  border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;
  font:200 clamp(21px,2.15vw,36px)/1.08 var(--f-display);letter-spacing:0;text-transform:uppercase;
  color:var(--ink-2);
  transition:color .3s var(--ease),background-color .3s var(--ease);
}
html[data-v="editorial"] .opt__txt::after{
  width:clamp(18px,1.6vw,24px);height:clamp(18px,1.6vw,24px);
  border:0;border-radius:0;box-shadow:none;background:currentColor;
  -webkit-mask:var(--arr) center / contain no-repeat;mask:var(--arr) center / contain no-repeat;
  opacity:0;transform:translateX(-10px);
  transition:opacity .3s var(--ease),transform .45s var(--ease-out);
}
html[data-v="editorial"] .opt:hover .opt__txt{color:var(--ink);background:none;border-color:var(--line)}
html[data-v="editorial"] .opt:hover .opt__txt::after{opacity:.7;transform:none;border:0;box-shadow:none}
html[data-v="editorial"] .opt input:checked + .opt__txt{
  background:none;color:var(--ink);
  border-bottom-color:var(--acc);box-shadow:inset 0 -1px 0 var(--acc);
}
html[data-v="editorial"] .opt input:checked + .opt__txt::after{opacity:1;transform:none;border:0;box-shadow:none;background:var(--acc)}
html[data-v="editorial"] .opt input:focus-visible + .opt__txt{outline:2px solid var(--focus);outline-offset:3px}

html[data-v="editorial"] .pick__plan{
  min-height:clamp(380px,52vh,540px);
  padding:4px 0 4px clamp(40px,4.2vw,68px);
  border:0;border-radius:0;background:none;
}
html[data-v="editorial"] .pick__rise{left:0;top:6px;bottom:6px;width:2px;background:var(--acc);transform-origin:50% 0}
html[data-v="editorial"] .plan--empty{font:400 clamp(19px,1.5vw,24px)/1.45 var(--f-text);color:var(--ink-2);max-width:26ch}
html[data-v="editorial"] .plan:not(.plan--empty){gap:34px}
html[data-v="editorial"] .plan__steps{gap:0;flex-direction:column}
html[data-v="editorial"] .step{padding:clamp(18px,2.6vh,28px) 0;border-top:1px solid var(--line)}
html[data-v="editorial"] .step:last-child{border-bottom:1px solid var(--line)}
html[data-v="editorial"] .step__when{margin-bottom:10px;font:600 12px/1.2 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
html[data-v="editorial"] .step__what{font:400 clamp(20px,1.7vw,28px)/1.3 var(--f-text);letter-spacing:-.012em;color:var(--ink);max-width:28ch}

@media (min-width:901px){
  html[data-v="editorial"] .pick__body{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,96px)}
}

/* ---- the close ---- */
html[data-v="editorial"] .contact__in{max-width:none}
html[data-v="editorial"] .sent-note{border-radius:0;border-color:var(--line-2)}
html[data-v="editorial"] .form{gap:clamp(24px,3.6vh,36px);max-width:none}
html[data-v="editorial"] .form__row{gap:clamp(24px,3vw,48px)}
html[data-v="editorial"] .field{gap:4px}
html[data-v="editorial"] .field label{font:600 12px/1.3 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);transition:color .2s var(--ease)}
html[data-v="editorial"] .field:focus-within label{color:var(--ink)}
html[data-v="editorial"] .field__hint{font-size:14px;color:var(--ink-3)}
html[data-v="editorial"] input,
html[data-v="editorial"] select,
html[data-v="editorial"] textarea{
  min-height:56px;padding:8px 0 12px;
  background-color:transparent;
  border:0;border-bottom:1px solid var(--line-2);border-radius:0;
  font:400 clamp(19px,1.5vw,24px)/1.35 var(--f-text);color:var(--ink);
  caret-color:var(--acc);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
html[data-v="editorial"] input::placeholder,
html[data-v="editorial"] textarea::placeholder{color:var(--ink-3)}
html[data-v="editorial"] input:hover,
html[data-v="editorial"] select:hover,
html[data-v="editorial"] textarea:hover{border-color:rgba(237,234,228,.5)}
html[data-v="editorial"] input:focus,
html[data-v="editorial"] select:focus,
html[data-v="editorial"] textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 1px 0 0 var(--ink)}
html[data-v="editorial"] input[aria-invalid="true"],
html[data-v="editorial"] textarea[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 1px 0 0 var(--bad)}
html[data-v="editorial"] textarea{min-height:128px;resize:vertical}
html[data-v="editorial"] select{
  padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23EDEAE4' stroke-width='1.3'/%3E%3C/svg%3E");
  background-position:right 4px center;
}
html[data-v="editorial"] option{background:#111110;color:var(--ink);font-family:var(--f-text)}
html[data-v="editorial"] .more{border-color:var(--line)}
html[data-v="editorial"] .more__sum{min-height:60px;font:600 12px/1.2 var(--f-text);letter-spacing:.14em;text-transform:uppercase}
html[data-v="editorial"] .more__sum::after{border-color:var(--ink)}
html[data-v="editorial"] .more__opt{color:var(--ink-3);font-weight:600}
html[data-v="editorial"] .more__in{gap:clamp(24px,3.6vh,36px);padding:8px 0 32px}
html[data-v="editorial"] .form__foot{gap:16px 28px;margin-top:12px}
html[data-v="editorial"] .form__note{font-size:15px;color:var(--ink-2)}
html[data-v="editorial"] .contact__mail{font-size:15px;color:var(--ink-2)}
html[data-v="editorial"] .contact__mail a{
  display:block;margin-top:6px;padding:8px 0;
  font:200 clamp(17px,1.45vw,26px)/1.25 var(--f-display);color:var(--ink);
  white-space:nowrap;
}

@media (min-width:901px){
  html[data-v="editorial"] .contact__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
  html[data-v="editorial"] .contact__in > .sec-head{grid-column:1 / -1;grid-row:1}
  html[data-v="editorial"] .contact__in > .sent-note{grid-column:1 / span 7;grid-row:2}
  html[data-v="editorial"] .contact__in > .form{grid-column:1 / span 7;grid-row:3}
  html[data-v="editorial"] .contact__in > .contact__mail{grid-column:8 / -1;grid-row:3;align-self:end;margin:0 0 6px}
}

/* ---- footer: the name, set as big as the page allows ---- */
html[data-v="editorial"] .foot{border-top:1px solid var(--line);padding:clamp(56px,9vh,110px) 0 calc(44px + env(safe-area-inset-bottom))}
html[data-v="editorial"] .foot__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px var(--col-gap);align-items:end}
html[data-v="editorial"] .foot .foot__brand{
  grid-column:1 / -1;gap:.16em;justify-content:center;
  font:200 clamp(28px,9.1vw,184px)/.9 var(--f-display)!important;
  letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;
}
html[data-v="editorial"] .foot__mark{width:.9em;height:.54em}
html[data-v="editorial"] .foot__line{grid-column:1 / span 6}
html[data-v="editorial"] .foot__note{grid-column:7 / -1;text-align:right}

/* ---- the contact bar: an orange bar on phones, a side tab on desktop ---- */
html[data-v="editorial"] .ctabar{
  gap:12px;border-radius:0;
  background:var(--acc);color:#0A0A0A;
  font:600 14px/1 var(--f-text);letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.85);
}
html[data-v="editorial"] .ctabar::after{
  content:"";width:14px;height:14px;background:currentColor;
  -webkit-mask:var(--arr) center / contain no-repeat;mask:var(--arr) center / contain no-repeat;
}
html[data-v="editorial"] .ctabar:hover{background:var(--acc-hover)}
html[data-v="editorial"] .ctabar:focus-visible{outline:2px solid #0A0A0A;outline-offset:-6px}
/* on desktop the bar is a quiet ink tab held on the right edge through the page */
html[data-v="editorial"].film .ctabar{display:none}

/* ============================================================
   BREAKPOINTS
   ============================================================ */

@media (max-width:1100px){
  html[data-v="editorial"] .sec-head .lede{grid-column:5 / -1}
}

@media (max-width:900px){
  html[data-v="editorial"] .pick__plan{min-height:0;margin-top:12px}
  html[data-v="editorial"] .contact__mail{margin-top:48px}
}

@media (max-width:760px){
  html[data-v="editorial"]{--sec-pad:clamp(88px,14vh,140px)}
  html[data-v="editorial"] .hdr__progress{display:none}
  html[data-v="editorial"] .nav__cta{margin-left:0;letter-spacing:.1em}
  html[data-v="editorial"] .sec-head .lede{grid-column:1 / -1;margin-left:var(--indent)}
  html[data-v="editorial"] .cta{gap:10px 24px}
  html[data-v="editorial"] .cta .btn--primary{flex:1 1 100%}
  html[data-v="editorial"] .cta .btn--ghost{flex:0 0 auto}
  html[data-v="editorial"] .work .pan__media{padding:24px}
  html[data-v="editorial"] .work .pan__ttl{font-size:32px}
  html[data-v="editorial"] .opt__txt{min-height:64px;padding:14px 2px;font-size:21px;font-weight:400;line-height:1.15}
  html[data-v="editorial"] .pick__plan{padding:4px 0 4px 36px}
  html[data-v="editorial"] input,
  html[data-v="editorial"] select,
  html[data-v="editorial"] textarea{font-size:19px}
  html[data-v="editorial"] .foot{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  html[data-v="editorial"] .foot__line,
  html[data-v="editorial"] .foot__note{grid-column:1 / -1;text-align:left}
}

@media (prefers-reduced-motion:reduce){
  html[data-v="editorial"] .opt__txt,
  html[data-v="editorial"] .opt__txt::after{transition:none}
}

/* the sky's words: in the film they are in the picture; these set the story's
   version over the still, and the words-only fallback */
html[data-v="editorial"] .hl--sky{font:400 clamp(28px,8.5vw,46px)/1.08 var(--f-display);letter-spacing:-.015em;color:var(--ink);word-spacing:-.04em}
html[data-v="editorial"] .hl--sky .ln{display:block}
html[data-v="editorial"] .hl--sky .ln--2{font-size:.6em;color:var(--ink-2);margin-top:.5em}
html[data-v="editorial"] .hl--sky .acc{font-weight:inherit;font-style:normal;letter-spacing:inherit;color:var(--acc)}
html[data-v="editorial"].story .skystill__words .hl--sky{text-shadow:0 2px 6px rgba(0,0,0,.55),0 0 40px rgba(0,0,0,.6)}
html[data-v="editorial"].story .act--sky{margin-inline:calc(var(--gut) * -1);width:calc(100% + var(--gut) * 2)}
html[data-v="editorial"].film .sky__fb .hl--sky{font-size:min(9vw,14vh)}

/* ============================================================
   FINE TUNE: the phone and reduced-motion story
   ============================================================ */

/* the chip still bleeds to the edges and fades into the ground instead of
   sitting in a box like a video that will not play */
html[data-v="editorial"].story .act--still{margin-inline:calc(var(--gut) * -1);width:calc(100% + var(--gut) * 2)}
html[data-v="editorial"].story .act--still .still{
  border:0;aspect-ratio:16/10;object-position:66% 50%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 72%,transparent 100%);
}
@media (max-width:760px){
  html[data-v="editorial"] .contact__mail a{display:inline-block;min-height:44px;padding:10px 0}
}
/* reduced motion on a wide screen: panels and plates at a size that reads */
@media (min-width:900px){
  html[data-v="editorial"].story .pan.act .pan__frame{width:min(100%,640px)}
  html[data-v="editorial"].story .ba{width:min(56vw,460px)}
}

/* the two working sections: the head yields to what you act on */
@media (min-width:1101px){
  html[data-v="editorial"] .pick .hl--sec,
  html[data-v="editorial"] .contact .hl--sec{font-size:calc(var(--sec-size) * .72)}
  html[data-v="editorial"] .pick .sec-head,
  html[data-v="editorial"] .contact .sec-head{margin-bottom:clamp(32px,5vh,64px)}
}

/* ============================================================
   THE JOBS: one treatment of the four cards (railflow), chosen by Karan on 2026-09-17. Every card carries the same parts (a clip, a
   head with its number and name, a stamp) and each treatment shows
   the ones it uses. The film's script gives each card is-lit,
   is-cur, is-done and is-next; --s, its signed distance from its
   station in stations (negative on the way in); and --edge, 1 while
   the card fits on the stage and 0 once the floor or a side would
   slice it (from the wrapper's --ext: below right left, in vh). The
   wrapper gets --jp (the beat's progress), --jvis (the beat's
   visibility), and may steer the camera through the beat with
   --cam-dx/--cam-dy (world units) or --cam-lock (hold the tip at a
   point of the stage). A stage-fixed treatment rides the wrapper
   against the camera, like a band.
   ============================================================ */

@property --cam-lock-x{syntax:"<length>";inherits:true;initial-value:0px}
@property --cam-lock-y{syntax:"<length>";inherits:true;initial-value:0px}
html[data-v="editorial"] .jobs{display:contents}
html[data-v="editorial"] .pan__clip,
html[data-v="editorial"] .pan__head,
html[data-v="editorial"] .pan__stamp{display:none}
html[data-v="editorial"].film .pan.act{--pre:clamp(0,calc(var(--s,-2) * -1),1)}   /* 1 a station out, 0 at the station */

/* ============================================================
   THE RAIL: the dock from Rail pass and the ticket from Spindle. The line is held level as a rail (a hairline
   across the stage at the tip's height, the camera holds the tip
   on it); the live job is a ticket hung from a pin at its top
   centre under the tip; every cleared job hangs on the rail at the
   left as a pin with its struck number and name under it. Shared
   with the mixes: --in (arrival), --gone (the surface and content
   leaving), the panel as the frame's ::before so the record can
   stay while the surface goes.
   ============================================================ */

html[data-v="editorial"].film[data-cards="railflow"] .jobs{
  display:block;position:absolute;left:0;top:0;z-index:2;
  width:100vw;height:100vh;pointer-events:none;opacity:var(--jvis,0);
  --rail:36vh;--cw:min(48vh,35vw);--slot:12vh;
  --cam-lock-x:60vw;--cam-lock-y:36vh;
}
/* the rail itself */
html[data-v="editorial"].film[data-cards="railflow"] .jobs::before{
  content:"";position:absolute;left:3vw;top:var(--rail);width:57vw;height:1px;
  background:var(--muted-line);opacity:.85;
}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act{
  position:absolute;left:calc(60vw - var(--cw) / 2);top:calc(var(--rail) + 4vh);
  width:var(--cw);height:auto;margin:0;padding:0;display:block;
  transform-origin:50% -4vh;
  --in:clamp(0,calc((var(--s,-2) + .02) * 10),1);
  --gone:clamp(0,calc((1.14 - var(--s,-2)) * 10),1);
  transform:translate3d(0,calc((1 - var(--in)) * -9vh),0);
  opacity:var(--in);
}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__frame{
  width:100%;height:auto;opacity:1;filter:none;
  background:transparent;border-color:transparent;box-shadow:none;overflow:visible;
  transform-origin:50% -4vh;transform:rotate(-1deg);
  transition:transform .9s cubic-bezier(.22,1,.36,1);
}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act.is-lit .pan__frame{transform:rotate(0)}
/* cleared: the ticket goes along the rail to its place in the dock */
html[data-v="editorial"].film[data-cards="railflow"] .pan.act.is-done .pan__frame{transform:translate3d(calc(6vw + var(--i) * var(--slot) - 60vw),0,0)}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__frame::before{
  content:"";display:block;position:absolute;inset:0;z-index:0;
  width:auto;height:auto;transform:none;
  background:var(--raise);border:1px solid var(--line-2);border-radius:var(--r-card);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  opacity:var(--gone);transition:none;
}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__frame::after{display:none}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__media,
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__body{
  position:relative;z-index:1;background:transparent;
  opacity:calc(var(--gone) * var(--in));
}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__media{padding:2.2vh 2.2vh 0}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__body{padding:1.9vh 2.2vh 2.4vh}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__ttl{font-size:3.8vh;margin-bottom:.9vh}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__line{font-size:1.7vh;max-width:32ch}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .mk{font-size:1.3vh}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .mk--ad{height:16vh;max-width:none;aspect-ratio:auto}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .mk--social .mk-soc__grid i{height:8.8vh}
/* the pin, on the rail at the ticket's top centre; it fills orange as the
   line passes and goes hollow again in the dock */
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__clip{
  display:block;position:absolute;left:50%;top:-4vh;z-index:3;
  width:2vh;height:2vh;margin:-1vh 0 0 -1vh;border-radius:50%;
  border:2px solid var(--muted-line);background:var(--bg);
  opacity:var(--in);
  transition:border-color .4s var(--ease),background-color .4s var(--ease),box-shadow .7s var(--ease);
}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__clip::after{
  content:"";position:absolute;left:50%;top:100%;width:1px;height:3vh;
  background:var(--muted-line);transform:translateX(-50%);
}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act.is-lit .pan__clip{border-color:var(--acc);background:var(--acc);box-shadow:0 0 18px rgba(255,91,31,.6)}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act.is-done .pan__clip{border-color:var(--muted-line);background:var(--bg);box-shadow:none}
/* the dock's record: the struck number over the name, under the pin */
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__head{
  display:flex;position:absolute;z-index:2;left:50%;top:0;transform:translateX(-50%);
  flex-direction:column;align-items:center;gap:.7vh;
  font:600 1.25vh/1 var(--f-text);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap;
  opacity:0;transition:opacity .4s var(--ease) .6s;
}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__num{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--muted-line)}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act.is-done .pan__head{opacity:1}

/* ---- railflow: Rail 5 as Karan asked for it (2026-09-17, "make the big card
   bigger, and I want it to slowly transition to whatever there is in Rail 4").
   The live ticket is bigger. A cleared ticket has two slow steps, each
   scrubbed by the line: as the next job lands it moves along the rail to the
   slot beside the live one and, through that job's hold, eases down to half
   size (Rail 5); as the job after lands it moves on into the dock and eases
   down to a mini ticket with its record under it (Rail 4). Nothing snaps ---- */
html[data-v="editorial"].film[data-cards="railflow"] .jobs{--rail:33vh;--cam-lock-x:64vw;--cam-lock-y:33vh;--cw:min(60vh,42vw);--slot:13vh}
html[data-v="editorial"].film[data-cards="railflow"] .jobs::before{width:61vw}
/* a cleared ticket's two moves each start as the line leaves its station and
   run through most of the travel, so the ticket is carried down the rail
   with the line and is clear before the next job lands; the last of each
   shrink then settles slowly through the next job's hold */
html[data-v="editorial"].film[data-cards="railflow"] .pan.act{
  left:calc(64vw - var(--cw) / 2);
  --m1:clamp(0,calc((var(--s,-2) - .3) * 1.54),1);
  --k1:clamp(0,calc((var(--s,-2) - 1) * 3.33),1);
  --z1:calc(var(--k1) * var(--k1) * (3 - 2 * var(--k1)));
  --m2:clamp(0,calc((var(--s,-2) - 1.3) * 1.54),1);
  --k2:clamp(0,calc((var(--s,-2) - 2) * 3.33),1);
  --z2:calc(var(--k2) * var(--k2) * (3 - 2 * var(--k2)));
  --sc:calc(1 - .4 * var(--m1) - .1 * var(--z1) - .2 * var(--m2) - .08 * var(--z2));
  --gone:1;
}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__frame,
html[data-v="editorial"].film[data-cards="railflow"] .pan.act.is-lit .pan__frame,
html[data-v="editorial"].film[data-cards="railflow"] .pan.act.is-done .pan__frame{
  transition:none;
  transform:translate3d(calc((44vh - 60vw) * var(--m1) + (var(--i) * var(--slot) - 39vh) * var(--m2)),0,0)
            scale(var(--sc)) rotate(calc((1 - var(--in)) * -1.2deg));
}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__frame::before{box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__media{padding:2.8vh 2.8vh 0}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__body{padding:2.2vh 2.8vh 2.8vh}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__ttl{font-size:4.6vh;margin-bottom:1vh}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__line{font-size:1.9vh;max-width:36ch}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .mk{font-size:1.6vh}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .mk--ad{height:20vh}
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .mk--social .mk-soc__grid i{height:11vh}
/* the record appears under the mini ticket, and stays readable while the
   ticket shrinks by counter-scaling against it */
html[data-v="editorial"].film[data-cards="railflow"] .pan.act .pan__head,
html[data-v="editorial"].film[data-cards="railflow"] .pan.act.is-done .pan__head{
  opacity:var(--z2);top:100%;margin-top:calc(2.2vh / var(--sc));
  transform:translateX(-50%) scale(calc(1 / var(--sc)));transform-origin:50% 0;
  transition:none;
}

/* ============================================================
   THE WORK MARK: a caret under the work heading whose arrows move
   between slots. data-workidx on <html> picks the motion.
   Generated by work/idx.py, do not hand edit.
   ============================================================ */


/* ---- shared ---- */
html[data-v="editorial"] .wmk{
  grid-column:8 / -1;align-self:end;
  display:none;width:100%;height:auto;overflow:visible;
  pointer-events:none;
  margin-bottom:clamp(6px,1.1vh,16px);
}
@media (max-width:860px){
  html[data-v="editorial"] .wmk{grid-column:1 / -1;margin-top:26px}
}


/* ---- drop: one arrow falls a slot at a time and the slot it came from is
   left empty; at the end the stack fills back in and it repeats. The faller is
   a fourth arrow that does the travelling, so the three standing arrows only
   have to appear and disappear. The refill overlaps the faller leaving, or the
   corner blinks empty for a frame (gauntlet/drop-check.js traces the loop). */
html[data-v="editorial"] .wmk__dfall{opacity:0}
@keyframes wmkDfall{
  0%,14%   {opacity:0;transform:translateY(0)}
  15%      {opacity:1;transform:translateY(0)}
  32%      {opacity:1;transform:translateY(var(--step))}
  34%,50%  {opacity:1;transform:translateY(var(--step))}
  67%      {opacity:1;transform:translateY(calc(var(--step) * 2))}
  80%      {opacity:1;transform:translateY(calc(var(--step) * 2))}
  88%,100% {opacity:0;transform:translateY(calc(var(--step) * 2))}
}
@keyframes wmkD1{0%,14%{opacity:1}16%,78%{opacity:0}88%,100%{opacity:1}}
@keyframes wmkD2{0%,32%{opacity:1}34%,78%{opacity:0}88%,100%{opacity:1}}
@keyframes wmkD3{0%,62%{opacity:1}67%,78%{opacity:0}88%,100%{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  html[data-v="editorial"] .wmk__dfall{animation:wmkDfall 4.2s ease-in-out infinite}
  html[data-v="editorial"] .wmk__d1{animation:wmkD1 4.2s linear infinite}
  html[data-v="editorial"] .wmk__d2{animation:wmkD2 4.2s linear infinite}
  html[data-v="editorial"] .wmk__d3{animation:wmkD3 4.2s linear infinite}
}
/* stilled: the full stack, which is what the caret means */
@media (prefers-reduced-motion:reduce){
  html[data-v="editorial"] .wmk__dfall{opacity:0}
}

html[data-v="editorial"][data-workidx="drop"] .wmk--drop{display:block}

/* The header, chosen by Karan on 2026-09-29 (variation D of the "client pill"): two things only.
   Dashboard is an outlined pill with its icon, the way in for existing clients (the client portal
   at /dashboard/); Get your plan is a filled orange pill beside it and still leads. The section
   links (How it works, Examples) are gone from the header: the page is one scroll. */
html[data-v="editorial"] .nav__link--dash{
  position:relative;gap:8px;min-height:40px;padding:0 15px 0 13px;
  border:1px solid var(--line-2);border-radius:999px;
  font-size:13px;color:var(--ink);
  transition:border-color .2s,background-color .2s;
}
html[data-v="editorial"] .nav__link--dash:hover{border-color:var(--ink);background:rgba(237,234,228,.06);color:var(--ink)}
html[data-v="editorial"] .nav__ico{display:block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
html[data-v="editorial"] .nav__cta{min-height:40px;padding:0 18px;border-radius:999px;background:var(--acc);color:var(--btn-ink);letter-spacing:.1em}
html[data-v="editorial"] .nav__cta:hover{background:var(--acc-hover);color:var(--btn-ink)}
@media (max-width:760px){
  html[data-v="editorial"] .hdr__in{gap:12px}
}
/* Phones: the Dashboard pill keeps its icon (the word stays for screen readers), the orange pill
   loses its arrow, and on the smallest screens the brand keeps its mark and lets the wordmark go. */
@media (max-width:400px){
  html[data-v="editorial"] .nav__link--dash{padding:0 12px}
  html[data-v="editorial"] .nav__link--dash .nav__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html[data-v="editorial"] .nav__cta{padding:0 12px;letter-spacing:.06em}
  html[data-v="editorial"] .nav__cta::after{display:none}
}
@media (max-width:345px){
  html[data-v="editorial"] .brand__word{display:none}
}

/* ============================================================
   THE PHONE (2026-10-02)
   Fixes that apply to every phone, reduced motion too, because
   they are defects: a headline that ran off the column, a link
   that clipped its arrow, the header's last pill leaving a hole.
   Then the phone's line (assets/phone.js), which hangs off
   html.snake and so never reaches the desktop film.
   ============================================================ */
@media (max-width:760px){
  /* "toward something bigger." carries a no-break space and ran off the
     column at 390px; one size smaller, the deck's own dimmer second line */
  html[data-v="editorial"].story .band--climb .ln--2{font-size:.78em}
  /* the ghost link is one line by design and was wider than the column on
     a 360px phone; it tightens with the width instead of wrapping */
  html[data-v="editorial"].story .band--hero .btn--ghost{max-width:100%;font-size:min(12px,3.2vw);letter-spacing:min(.14em,.36vw);gap:min(16px,3vw)}
  /* the orange pill goes first, so when it hides behind the contact bar the
     Dashboard pill stays in the corner instead of floating mid-header */
  html[data-v="editorial"].story .nav__cta{order:-1}
}
@media (max-width:352px){
  html[data-v="editorial"].story .band--climb .ln--2{font-size:.7em}
  html[data-v="editorial"].story .band--hero .btn--ghost{font-size:10px;letter-spacing:.06em;gap:8px}
}
/* a tapped button on a phone keeps its hover colour until the next tap */
@media (hover:none){
  html[data-v="editorial"].story .btn--primary:hover{background:var(--acc)}
}

/* ---- the phone's film and its line (assets/phone.js), only under html.snake,
   which the head script sets before the first paint ---- */
.snk,.snk__tip,.pscene__film,.pscene__video,.pscene__alt,.pscene__tube{display:none}
.pscene__box{position:relative;width:100%}

/* lanes on both sides of the column: the line runs down one or the other,
   and everything that bled edge to edge still does */
html.snake{--snk-lane:40px;--hl-size:clamp(33px,9.8vw,60px);--hero-size:clamp(34px,10.2vw,64px);--sec-size:clamp(33px,9.5vw,60px)}
html.snake .stage{padding-inline:var(--snk-lane)}
html.snake[data-v="editorial"].story .act--still,
html.snake[data-v="editorial"].story .act--sky{
  margin-inline:calc(var(--snk-lane) * -1);width:calc(100% + var(--snk-lane) * 2);
}
/* the line marks each beat now, so the story's ticks go; the room between
   sections is where the line crosses, so it is generous and even */
html.snake[data-v="editorial"] .band:not(.band--hero) .band__in::before{display:none}
html.snake .band:not(.band--hero){padding:clamp(150px,22vh,200px) 0 clamp(18px,3vh,28px)}
/* the first words rise straight under the held mark */
/* the first words come up in the scene's dark lower edge, below the point
   where the line has turned into its lane, so it never crosses them */
html.snake .band--studio{padding-top:clamp(18px,3vh,30px);margin-top:calc(-.15 * var(--ps-h, 150vw));position:relative;z-index:3}
html.snake .band--jobs{padding-bottom:28px}
html.snake .band--resolve{padding-bottom:8px}
html.snake .act--ba--before{padding-top:clamp(120px,18vh,160px)}
/* ---- the opening: the phone's own cloche film (pfilm.js) ----
   The still's block is a runway: the scene inside it, a 2:3 frame like the
   render, sticks at the middle of the screen for 130vh of scroll while the
   film plays (the lid lifts, the mark rises and unwinds), then goes on with
   the page. All of it is CSS, so it is in place from the first paint, and the
   first frame's still shows at once. */
html.snake[data-v="editorial"].story .act--still{
  --ps-h:150vw;--ps-run:130vh;
  position:relative;z-index:1;display:block;padding:0;
  height:calc(var(--ps-h) + var(--ps-run));
  margin-top:clamp(-170px,-36vw,-110px);
  opacity:1;transform:none;transition:none;
}
html.snake .pscene__box{
  position:-webkit-sticky;position:sticky;top:max(48px,calc(50vh - 75vw));z-index:1;
  width:100%;aspect-ratio:2/3;pointer-events:none;
}
html.snake .pscene__box picture{display:block;position:absolute;inset:0}
/* the film, its first frame and the mark's still fill the frame and melt
   into the page at the top and the bottom; the line's svg does not, and may
   leave it */
html.snake[data-v="editorial"].story .pscene__box .still,
html.snake .pscene__film,html.snake .pscene__video,html.snake .pscene__alt{
  display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;
  aspect-ratio:auto;object-fit:cover;border:0;border-radius:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);
}
html.snake .pscene__film,html.snake .pscene__video{visibility:hidden}
html.snake .pscene__box.has-film .pscene__film,html.snake .pscene__box.has-video .pscene__video{visibility:visible}
html.snake .pscene__alt{opacity:0}
html.snake .pscene__tube{
  display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4;
}
html.snake .band--hero{position:relative;z-index:2}

/* ---- the tube of light ---- */
html.snake .snk{
  display:block;position:absolute;left:0;top:0;z-index:4;
  overflow:visible;pointer-events:none;
}
/* the line's layers, one group each across the whole line: four glows
   widening like a bell curve, so the light falls off rather than reading as
   an outline (each group fades as one, so overlapping ends never double),
   then the body, a lighter band and a hot core */
html.snake .snk__layer{fill:none;stroke-linejoin:round;stroke-linecap:round}
html.snake .snk__g1{opacity:.22}
html.snake .snk__g2{opacity:.1}
html.snake .snk__g3{opacity:.05}
html.snake .snk__g4{opacity:.025}
html.snake .snk__core{stroke:#FFFCF5}

/* the head's light, placed by phone.js: a white-hot point in a warm bloom */
html.snake .snk__tip{
  display:block;position:absolute;left:0;top:0;z-index:4;pointer-events:none;
  width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,252,246,1) 0,rgba(255,246,232,.9) 3%,rgba(255,226,196,.38) 9%,rgba(255,196,150,.14) 26%,rgba(255,170,120,.05) 46%,rgba(255,170,120,0) 66%);
  opacity:0;will-change:transform,opacity;
}

/* the closing mark comes up over the figure the line draws */
html.snake .act--mark{position:relative;z-index:5}

/* the contact bar sits on the column's edges, like everything else */
html.snake .ctabar{left:var(--snk-lane);right:var(--snk-lane)}

/* the hero's words show from the first paint and rise in with CSS alone:
   on one bar of signal they must not wait for a script */
@keyframes heroRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html.snake.js.story .band--hero .ln,html.snake.js.story .band--hero .sub,html.snake.js.story .band--hero .cta{
  opacity:1;transform:none;transition:none;animation:heroRise .9s var(--ease-out) both;
}
html.snake.js.story .band--hero .ln:nth-child(2){animation-delay:.08s}
html.snake.js.story .band--hero .sub{animation-delay:.18s}
html.snake.js.story .band--hero .cta{animation-delay:.28s}

/* ============================================================
   THE PHONE LAYOUT, after the harsh critic's pass (2026-10-02)
   Defects first (every phone, reduced motion too), then the
   composition that goes with the phone's line (html.snake).
   ============================================================ */
@media (max-width:760px){
  /* the header's two pills fit up to the big phones: at 401-560 the
     labelled Dashboard pill ran off the right edge. Both are 44px targets */
  html[data-v="editorial"] .nav__link--dash{padding:0 12px;min-height:44px;min-width:44px;justify-content:center}
  html[data-v="editorial"] .nav__link--dash .nav__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html[data-v="editorial"] .nav__cta{min-height:44px;padding:0 14px;letter-spacing:.08em}
  html[data-v="editorial"] .nav__cta::after{display:none}

  /* the section heads' second line ran past the column ("one on the door."
     is one unbreakable run); it steps down, the deck's own dimmer second line */
  html[data-v="editorial"] .sec-head .hl--sec .ln--2{font-size:.66em;margin-top:.12em}
  html[data-v="editorial"] .hl{text-wrap:balance}
  html[data-v="editorial"] :is(.pan__line,.form__note,.foot p,.lede,.sub,.plan__line){text-wrap:pretty}

  /* the mock ad's tag sat in the column and stretched over its headline */
  html[data-v="editorial"].story .mk--ad > .mk-ad__tag{position:absolute;top:1.6em;left:1.6em;align-self:flex-start}
  /* cream words on daylight photos: the photos go down under the words */
  html[data-v="editorial"].story .mk-site__hero .mk-photo,
  html[data-v="editorial"].story .mk--ad .mk-photo{filter:brightness(.62) saturate(.92)}
  /* the listing's own row: the picture beside both lines, the lines together */
  html[data-v="editorial"].story .mk-seo__row.is-you{display:grid;grid-template-columns:3.4em 1fr;column-gap:.9em;row-gap:.15em;align-items:center}
  html[data-v="editorial"].story .mk-seo__row.is-you .mk-seo__pic{grid-row:1 / 3;margin:0}
  html[data-v="editorial"].story .mk-seo__row.is-you b{margin:0;align-self:end}
  html[data-v="editorial"].story .mk-seo__row.is-you span{align-self:start}

  /* the contact bar gets ground to stand on: content fades out under it
     instead of being cut by its edge */
  html[data-v="editorial"].story body::after{
    content:"";position:fixed;left:0;right:0;bottom:0;z-index:79;pointer-events:none;
    height:calc(100px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(10,10,10,0) 0%,rgba(10,10,10,.86) 55%,#0A0A0A 100%);
    opacity:0;transition:opacity .45s var(--ease-out);
  }
  html[data-v="editorial"].story:has(.ctabar.is-on:not(.snk-hold)) body::after{opacity:1}
  html[data-v="editorial"] .foot{padding-bottom:calc(56px + env(safe-area-inset-bottom))}

  /* the lower page: one even rhythm, no stacked empty bands */
  html[data-v="editorial"] .work,html[data-v="editorial"] .pick,html[data-v="editorial"] .contact{padding:clamp(72px,10vh,96px) 0}
  html[data-v="editorial"] .wmk{display:none!important}

  /* the hero's line under the headline sits on the column, not floating in it */
  html[data-v="editorial"].story .band--hero .sub{margin-left:0;max-width:31ch}

  /* the picker reads as something to tap: the arrow is always there */
  html[data-v="editorial"] .opt__txt{color:var(--ink);font-size:19px}
  html[data-v="editorial"] .opt__txt::after{opacity:.4;transform:none}

  /* the form: tighter fields, the same tap height */
  html[data-v="editorial"] .form{gap:20px}

  /* the footer's wordmark stands on the same left edge as its lines */
  html[data-v="editorial"] .foot .foot__brand{justify-content:flex-start;text-align:left}
}

/* ---- the composition that goes with the line ---- */
/* one left edge for the whole page: the header and the sections below the
   film step in to the line's lane too */
html.snake .hdr__in,html.snake .wrap{width:auto;max-width:none;margin-inline:var(--snk-lane)}

/* the type scale, ported from the film: each beat has a big line and a
   small one, so the page is not one size of thin capitals all the way down */
html.snake .band--studio .ln--strong{font-size:1.4em}
html.snake .band--studio .ln--2{font-size:.72em}
html.snake .band--climb .ln--2,html.snake .band--jobs .ln--2{font-size:.74em}
html.snake .band--handed .ln--2{font-size:.8em}
/* the hairline before a beat's line stops short of the line's lane */
html.snake[data-v="editorial"] .band:not(.band--hero) .sub::before{width:calc(var(--indent) - 4px)}

/* the four jobs: in the film they are a list the line runs beside, the
   number, the job and its line; the pictures are the work section's */
html.snake .film .pan.act{padding:0}
html.snake .film .pan .pan__frame{
  position:relative;width:100%;background:none;border:0;border-radius:0;box-shadow:none;
  border-top:1px solid var(--line);padding:0;transform:none;
}
html.snake .film .pan:last-of-type .pan__frame{border-bottom:1px solid var(--line)}
html.snake .film .pan .pan__media,html.snake .film .pan .pan__clip,
html.snake .film .pan .pan__stamp,html.snake .film .pan .pan__kicker,
html.snake .film .pan .pan__frame::before,html.snake .film .pan .pan__frame::after{display:none}
html.snake .film .pan .pan__head{
  display:block;position:absolute;left:0;top:28px;margin:0;padding:0;background:none;
  font:600 12px/1 var(--f-text);letter-spacing:.14em;color:var(--acc);
}
html.snake .film .pan .pan__body{border:0;padding:22px 0 24px 46px;background:none}
html.snake .film .pan .pan__ttl{font-size:32px;margin:0 0 8px}
html.snake .film .pan .pan__line{margin:0}

/* the closing lockup: one centred stack, the rule as wide as the wordmark */
html.snake .band--resolve .band__in{text-align:center}
html.snake .band--resolve .hl{max-width:15ch;margin-inline:auto}
html.snake .act--word{width:max-content;max-width:100%;align-self:center;margin-left:auto;margin-right:auto}

/* ---- the cloud beats on a phone (sky3d/canyon.py, 2026-10-03) ----
   Layers of cumulus rendered on a clear sky, each at its own depth (11, 20,
   34 and 120 deep), placed here in the render's own frame (1080 wide, the
   vanishing point at row 1008), so the scene is in place from the first
   paint. phone.js flies a camera through them: each layer scales about the
   vanishing point by d / (d - t) as the camera comes t nearer, drops as it
   climbs, and fades as it passes; the line is drawn into the scene on a
   canvas between the far clouds and the near. The first beat flies in under
   a golden light; the second is the same sky turned about, later: the camera
   falls back and the sun leaves the clouds (each far layer has an
   after-sunset twin that comes up over it). Without the line (reduced
   motion) each beat is its last frame, held. */
.sky3{display:none}
@media (max-width:760px){
  html.story .act--sky{display:block;position:relative;padding:0;margin-inline:calc(var(--gut) * -1);width:calc(100% + var(--gut) * 2)}
  html.story .skystill > picture{display:none}
  html.story .skystill{
    --u:calc(100vw / 1080);--vp:42vh;
    --t:12;--rise:1.5;--dx:0;--night:0;
    position:relative;height:100vh;overflow:hidden;background:var(--bg);
  }
  html.story .act--sky-b .skystill{--t:6;--rise:.4;--dx:-1.5;--night:1}
  html.story .sky3{display:block;position:absolute;inset:0;pointer-events:none}
  /* the second beat is the same sky seen the other way */
  html.story .act--sky-b .sky3{transform:scaleX(-1)}
  html.story .sky3__l{
    position:absolute;z-index:var(--z);
    left:calc(var(--x) * var(--u));top:calc(var(--vp) + (var(--y) - 1008) * var(--u));
    width:calc(var(--w) * var(--u));height:auto;max-width:none;
    --s:calc(var(--d) / (var(--d) - var(--t)));
    transform-origin:calc((540 - var(--x)) * var(--u)) calc((1008 - var(--y)) * var(--u));
    transform:translate3d(calc(var(--dx) * 1080 * var(--u) / (var(--d) - var(--t))),calc(var(--rise) * 1080 * var(--u) / (var(--d) - var(--t))),0) scale(var(--s));
    will-change:transform,opacity;
  }
  html.story .sky3__near{opacity:clamp(0, (2.2 - var(--s)) / .6, 1)}
  html.story .sky3__dk{opacity:var(--night)}
  html.story .act--sky-b .sky3__l:not(.sky3__dk){opacity:calc(1 - var(--night))}
  /* held still, the layers that would have passed the camera are gone */
  html.story:not(.snake) .sky3__near{display:none}
  /* the line in the scene: its weave behind every cloud, its lane in front
     of the far ones */
  html.story .sky3__line,html.story .sky3__lane{display:block;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none}
  html.story .sky3__lane{z-index:8}
  html:not(.snake) .sky3__line,html:not(.snake) .sky3__lane{display:none}
  /* the sky the low sun lights: a thin bright band where it went down, an
     amber warmth above the far clouds, and the deep blue of the evening over
     that, going to black overhead (the second beat loses it as night comes) */
  html.story .sky3__glow{
    display:block;position:absolute;inset:0;z-index:0;
    background:
      radial-gradient(70% 3.2% at 50% calc(var(--vp) + 1vh),rgba(255,222,186,.42),rgba(255,200,150,0) 100%),
      radial-gradient(95% 15% at 50% calc(var(--vp) + 1vh),rgba(255,156,96,.22),rgba(255,140,90,.06) 60%,rgba(255,140,90,0) 100%),
      linear-gradient(180deg,rgba(10,10,10,0) 6vh,rgba(22,24,46,.6) 24vh,rgba(58,40,44,.55) calc(var(--vp) - 6vh),rgba(70,44,34,.5) var(--vp),rgba(10,10,10,0) calc(var(--vp) + 16vh));
    opacity:1;will-change:opacity,transform;
  }
  html.story .act--sky-b .sky3__glow{opacity:0}
  /* the clouds melt into the sky at the top and the bottom of the frame */
  html.story .skystill::before,html.story .skystill::after{
    content:"";position:absolute;left:0;right:0;z-index:7;pointer-events:none;
  }
  html.story .skystill::before{top:0;height:12vh;background:linear-gradient(180deg,var(--bg),rgba(10,10,10,0))}
  html.story .skystill::after{bottom:0;height:10vh;background:linear-gradient(0deg,var(--bg),rgba(10,10,10,0))}
  /* the words, in the page's own voice: the thin capitals and the one bold
     italic in the accent, set in the clear above the far clouds; each line
     comes up out of its own mask (phone.js wraps them) */
  html.story .skystill__words{
    position:absolute;left:0;right:0;top:auto;bottom:calc(100vh - var(--vp) + 16vw);z-index:4;
    display:block;padding:0 7vw;text-align:center;
  }
  html.story .act--sky-b .skystill__words{z-index:8}
  html[data-v="editorial"].story .act--sky .hl--sky{
    margin:0;font:200 12.4vw/.96 var(--f-display);letter-spacing:-.012em;word-spacing:-.04em;
    text-transform:uppercase;color:var(--ink);text-shadow:none;
  }
  html[data-v="editorial"].story .act--sky .hl--sky .ln{display:block}
  html[data-v="editorial"].story .act--sky .hl--sky .acc{font-weight:800;font-style:italic;color:var(--acc);letter-spacing:-.02em}
  html[data-v="editorial"].story .act--sky-a .hl--sky .acc{display:block;font-size:1.3em;line-height:1;margin-top:.04em}
  html[data-v="editorial"].story .act--sky-b .hl--sky{font-size:11.2vw}
  /* the narrowest phones: the accent word steps down so the lane's glow
     keeps off its full stop */
  @media (max-width:340px){html[data-v="editorial"].story .act--sky-a .hl--sky .acc{font-size:1.2em}}
  html[data-v="editorial"].story .act--sky-b .hl--sky .ln--2{font-size:.54em;line-height:1.14;margin-top:.6em;color:var(--ink)}
  html.story .sky3__m{display:block;overflow:hidden;padding:0 .14em .12em;margin:0 -.14em -.12em}
  /* each line rises out of its mask on its own clock once the reader is
     there (phone.js sets .is-up), so no stop ever holds a half-risen line */
  html.story .sky3__r{display:block;transform:translate3d(0,112%,0);transition:transform .9s cubic-bezier(.16,.84,.24,1);will-change:transform}
  html.story .sky3__m.is-up > .sky3__r{transform:none}
  html.story .act--sky-a .acc.sky3__m > .sky3__r{transition-delay:.09s}
}
/* with the line, each beat is a runway: the frame holds the screen while the
   camera flies, and the page's line passes behind it, fading out above it
   and back in below; until phone.js has placed it, the first beat waits on
   its first frame */
html.snake .act--sky{height:calc(100vh + var(--sky-run,120vh));opacity:1!important;transform:none!important;transition:none!important}
/* the page's line runs on into the frame as the frame's own line (phone.js),
   so the frame's top does not fade it out; letting go, the whole scene
   (its sky with it) dissolves and the page's line is there again behind it,
   in the same lane */
html.snake .act--sky .skystill{position:-webkit-sticky;position:sticky;top:0;z-index:6;background:transparent}
/* the frame's sky is opaque but soft at its edges (the page's line and dots
   go in over 40px at the top), and it belongs to the scene: letting go, it
   dissolves with the clouds, and the page's line, lying in the same lane as
   the scene's own, is simply there */
html.snake .sky3::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(10,10,10,0) 0,var(--bg) 40px,var(--bg) calc(100% - 10vh),rgba(10,10,10,0) 100%);
}
html.snake .act--sky-a .skystill{--t:0;--rise:0}
/* the words keep clear of the lane the line comes down */
html.snake .act--sky.lane-l .skystill__words{padding-left:calc(10vw + 8px);padding-right:4vw}
html.snake .act--sky.lane-r .skystill__words{padding-left:4vw;padding-right:calc(10vw + 8px)}
html.snake .act--sky .skystill::before,html.snake .act--sky .skystill::after{display:none}
/* the bottom fade belongs to the scene, so it dissolves with it */
/* the night bank never sits on bare black as it leaves: a dim blue haze
   under it */
html.snake .act--sky-b .sky3::before{
  background:linear-gradient(180deg,rgba(10,10,10,0) 0,var(--bg) 40px,var(--bg) 52%,#0C111C 74%,#0E1422 88%,rgba(14,20,34,0) 100%);
}
html.snake .sky3::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18vh;z-index:7;background:linear-gradient(0deg,var(--bg) 0,rgba(10,10,10,.92) 18%,rgba(10,10,10,.7) 42%,rgba(10,10,10,.38) 68%,rgba(10,10,10,.12) 88%,rgba(10,10,10,0) 100%)}

/* the pair: one room twice, overlapping on a diagonal, the empty room
   dimmed behind and the full one in front */
html.snake .act--ba{padding:0}
html.snake .act--ba--before{padding-top:clamp(170px,22vh,200px)}
html.snake .act--ba--before .ba{width:82%;margin-right:auto}
html.snake .act--ba--after{margin-top:-44px;position:relative;z-index:2;padding-bottom:clamp(40px,6vh,56px)}
html.snake .act--ba--after .ba{width:82%;margin-left:auto}
html.snake .act--ba--before .ba__img{filter:brightness(.62)}
/* the front plate's label sits on its own lower corner, not on the plate behind */
html.snake .act--ba--after .ba__tab{top:auto;bottom:0;right:0;transform:none}
/* the picker's empty state sits on the column, not floating in a box */
html.snake[data-v="editorial"] .pick__plan{padding-left:0;min-height:0}
html.snake .plan--empty{align-self:flex-start}

html.snake .band--hero{will-change:opacity}

/* the hero's second link fits the column at 352-380 too */
@media (min-width:353px) and (max-width:380px){
  html[data-v="editorial"].story .band--hero .btn--ghost{font-size:min(12px,3vw);letter-spacing:min(.14em,.25vw)}
}

/* while the opening is held (phone.js sets snk-hold on the two elements
   themselves, so nothing else restyles), the contact bar waits and the
   header keeps its own button */
html.snake .ctabar{will-change:transform}
html.snake .ctabar.snk-hold{transform:translateY(calc(100% + 30px))}
html.snake .nav__cta.snk-hold{opacity:1!important;visibility:visible!important}
/* the header stands on solid ground from the first paint, so nothing that
   scrolls under it runs through the wordmark while a script is still on
   its way */
html.snake[data-v="editorial"] .hdr::before{opacity:1}
/* before phone.js has arrived on a weak signal, the film's words show as they
   are rather than waiting for a script to bring them in */
html.snake:not(.snake-on) .film :is(.band,.act) :is(.ln,.sub,.cta),
html.snake:not(.snake-on) .film .act{opacity:1!important;transform:none!important}
/* the hero's second link in the line's narrower column: one line, always */
@media (max-width:420px){
  html.snake[data-v="editorial"].story .band--hero .btn--ghost{font-size:min(11.5px,2.95vw);letter-spacing:.1em;gap:8px}
}
@media (max-width:352px){
  html.snake[data-v="editorial"].story .band--hero .btn--ghost{font-size:9.6px;letter-spacing:.05em;gap:6px}
}