/* ============================================================
   The background switch: the dashboard's light ground.

   Dark is the page as it was and needs no attribute. With
   html[data-theme="light"] (set by the head script from the
   stored choice, flipped by assets/dash.js) the WHOLE page takes
   the dashboard's light tokens: its cream page, its warm ink and
   hairlines, its dark dot. Karan, 2026-10-04: "make sure the
   whole website switches to light mode. There should not be half
   section in the dark mode and half in the light mode."

   So the scroll film changes ground too. Its words and line are
   drawn in the light tokens. Its two kinds of footage were
   rendered on black:
     the cloche film keeps its own colours and is feathered
       into the cream, a picture at the right that fades out
       toward the words, which stand on the cream beside it; at
       its end, the black it leaves on fades up to the page;
     the cloud films keep their white cloud and white words and
       lose their black, over a morning sky: the night sky's
       day.
   (Two versions came before, both 2026-10-04. The cloche film
   framed as a dark picture and the clouds turned to charcoal:
   "this does not look good ... blend it or something". Then the
   cloche film turned over into a bright room, which blended but
   lost its colours: "i like the way it blends but i want the
   original colors back".)
   Type, the 28px dot pitch and the layout are not touched.

   Order: the tokens and the switch itself (both themes), then
   light: tokens, browser surfaces, the header, cards, the film
   on the desktop, the story layout, the sections, the phone's
   bar, the cross-fade.
   ============================================================ */

/* ---- two tokens the dark page never needed ----
   --acc-ink is orange used as text: the accent itself on the dark ground, a
   deeper orange on cream, where #FF5B1F is under 3:1. --dx-shadow is what a
   framed screen stands on: the orange under-glow here, the dashboard's soft
   shadow on cream. */
html[data-v="editorial"]{
  --acc-ink:var(--acc);
  --acc-display:var(--acc);   /* orange as large display type: the accent itself, a touch deeper on cream */
  --dx-shadow:0 46px 120px -50px rgba(255,91,31,.5),0 2px 0 rgba(0,0,0,.6);
  --card-shadow:none;         /* what a card stands on: nothing on the dark ground, a soft shadow on cream */
}

/* ============================================================
   THE SWITCH (both themes)
   One small round of hairline beside the Dashboard pill, in its
   weight; on a phone the header is tuned for two pills, so the
   switch is a line of text in the footer instead. Without script
   neither shows.
   ============================================================ */

.dx-toggle{display:none}
html.js[data-v="editorial"] .dx-toggle{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;padding:0;
  /* the nav spaces its pills widely; the switch keeps close to the pill it sits beside */
  margin:0 calc(10px - clamp(6px,1.4vw,26px)) 0 0;
  border:1px solid var(--line-2);border-radius:999px;
  background:none;color:var(--ink);font:inherit;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color .2s,background-color .2s;
}
/* a hover that a mouse can leave: a tapped switch would keep it */
@media (hover:hover){
  html.js[data-v="editorial"] .nav .dx-toggle:hover{border-color:var(--ink);background:rgba(237,234,228,.06)}
}
html[data-v="editorial"] .dx-toggle__ico{
  display:block;flex:none;width:16px;height:16px;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
/* the glyph is where the switch leads: the sun on the dark ground, the moon on the light */
.dx-toggle__sun,.dx-toggle__moon{transform-origin:10px 10px}
.dx-toggle__moon{opacity:0;transform:rotate(-50deg) scale(.6)}
html[data-theme="light"] .dx-toggle__sun{opacity:0;transform:rotate(50deg) scale(.6)}
html[data-theme="light"] .dx-toggle__moon{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .dx-toggle__sun,.dx-toggle__moon{transition:opacity .3s var(--ease),transform .5s var(--ease-out)}
}

/* the footer's copy of it: the page's micro label on a hairline, like its other quiet links */
html.js[data-v="editorial"] .dx-toggle--foot{display:none}
@media (max-width:760px){
  html.js[data-v="editorial"] .dx-toggle{display:none}
  html.js[data-v="editorial"] .dx-toggle--foot{
    display:inline-flex;grid-column:1 / -1;justify-self:start;
    width:auto;height:auto;min-height:44px;margin:0;padding:0 2px;gap:10px;
    border:0;border-radius:0;
    font:600 12px/1 var(--f-text);letter-spacing:.14em;text-transform:uppercase;
  }
  html[data-v="editorial"] .dx-toggle__txt{
    padding:9px 0 8px;
    background:linear-gradient(var(--ghost-line),var(--ghost-line)) left bottom / 100% 1px no-repeat;
  }
  html[data-v="editorial"] .dx-toggle--foot:hover .dx-toggle__txt{
    background:linear-gradient(var(--ink),var(--ink)) left bottom / 100% 1px no-repeat;
  }
}

/* ============================================================
   LIGHT: THE TOKENS
   The dashboard's own values (its console's light block). The
   accent fill is unchanged; only its hover, and orange as text.
   ============================================================ */

html[data-v="editorial"][data-theme="light"]{
  color-scheme:light;

  --bg:#F4F1EC;
  /* Karan, 2026-10-04: "it is hard to see the cards, so make them have a
     border or something, or a background shadow". A card is white on the
     cream, its hairline is firmer than the console's, and it stands on the
     dashboard's soft shadow (--card-shadow) */
  --raise:#FFFFFF;
  --raise-2:#F6F2EC;
  --line:rgba(94,72,50,.22);
  --line-2:rgba(94,72,50,.34);

  --ink:#1D1A16;
  --ink-2:#4A443D;
  --ink-3:#6B645B;
  --muted-line:#8A8176;

  --acc-hover:#FF7440;
  --acc-ink:#AE3A0B;
  --acc-display:#E8480C;   /* 3.5:1 on the cream: large display type only */
  --btn-ink:#1D1A16;
  --ghost-line:rgba(29,26,22,.32);
  --focus:#1D1A16;
  --bad:#A8231B;
  --good:#176240;

  --dots:radial-gradient(circle,rgba(10,10,10,.11) 1px,rgba(10,10,10,0) 1.6px);
  --dx-shadow:0 2px 4px rgba(40,30,20,.06),0 30px 70px -34px rgba(40,30,20,.42);
  --card-shadow:0 1px 2px rgba(40,30,20,.06),0 12px 30px -16px rgba(40,30,20,.3);
  /* the page's ground as numbers, for the fades that go to nothing */
  --dx-ground-rgb:244,241,236;

  scrollbar-color:rgba(94,72,50,.28) transparent;
}

/* ============================================================
   LIGHT: BROWSER SURFACES AND TYPE
   ============================================================ */

html[data-v="editorial"][data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(94,72,50,.28)}
html[data-v="editorial"][data-theme="light"] a{text-decoration-color:rgba(29,26,22,.34)}
html[data-v="editorial"][data-theme="light"] a:hover{text-decoration-color:currentColor}

/* the accent word is orange as large display type: on cream it takes the
   slightly deeper orange that holds 3:1 there */
html[data-v="editorial"][data-theme="light"] .hl .acc,
html[data-v="editorial"][data-theme="light"] .hl--hero .ln--2{color:var(--acc-display)}
html[data-v="editorial"][data-theme="light"] .hl--hero:has(.acc) .ln--2{color:var(--ink-3)}

/* ============================================================
   LIGHT: THE HEADER
   ============================================================ */

/* its ground, fading out below the bar */
html[data-v="editorial"][data-theme="light"] .hdr::before{
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg) calc(100% - 28px),rgba(var(--dx-ground-rgb),0) 100%);
}
html[data-v="editorial"][data-theme="light"] .nav__link--dash:hover{background:rgba(94,72,50,.06)}
@media (hover:hover){
  html.js[data-v="editorial"][data-theme="light"] .nav .dx-toggle:hover{background:rgba(94,72,50,.06)}
}
/* the side rail of progress */
html[data-v="editorial"][data-theme="light"] .hdr__progress{background:rgba(94,72,50,.2)}

/* ============================================================
   LIGHT: CARDS
   White on the cream, a firm hairline (the tokens above) and the
   dashboard's soft shadow under every card and plate.
   ============================================================ */

html[data-v="editorial"][data-theme="light"] .opt__txt,
html[data-v="editorial"][data-theme="light"] .pick__plan,
html[data-v="editorial"][data-theme="light"] .work .pan__media,
html[data-v="editorial"][data-theme="light"].story .pan.act .pan__frame,
html[data-v="editorial"][data-theme="light"] .ba__img{box-shadow:var(--card-shadow)}
/* a clip's box inside a white card: the dashboard's own cream, an edge to hold it */
html[data-v="editorial"][data-theme="light"] .dx-media{border-color:var(--line-2)}
/* the framed windows (the film beat's, the full film's) stand on the larger
   shadow; the orange pool under them belongs to the dark ground */
html[data-v="editorial"][data-theme="light"] .dx-frame::before,
html[data-v="editorial"][data-theme="light"] .dx-frame::after,
html[data-v="editorial"][data-theme="light"] .dx-beat::before,
html[data-v="editorial"][data-theme="light"] .dx-beat__screen::after{display:none}
html[data-v="editorial"][data-theme="light"] .dx-beat__screen{box-shadow:var(--dx-shadow)}
/* the film's tickets: the plate behind each one is the card */
html[data-v="editorial"][data-theme="light"].film[data-cards="railflow"] .pan.act .pan__frame::before{
  box-shadow:0 1px 2px rgba(40,30,20,.06),0 26px 60px -30px rgba(40,30,20,.38);
}
html[data-v="editorial"][data-theme="light"].film[data-cards="railflow"] .pan.act.is-lit .pan__clip{box-shadow:0 0 14px rgba(255,91,31,.4)}

/* ============================================================
   LIGHT: THE FILM ON THE DESKTOP
   ============================================================ */

/* ---- the cloche film, in its own colours ----
   Karan, 2026-10-04, of the version that turned it over into a bright room:
   "i like the way it blends but i want the original colors back". So the
   film is the film as it was made, the warm dark kitchen, the lamps, the
   polished cloche, the glowing mark; and it is not framed, it is feathered.
   It cannot be moved or scaled (its last frames hand the line on to the
   page's own), so a mask fades it into the cream on three sides, under the
   header, along its foot and toward the words, and lets it run off the page
   at the right. The ramp toward the words is set in the film's own width,
   so it keeps its place against the cloche and the mark on every screen:
   clear at 41% of the frame, solid by 53%, just short of where the mark's
   left loop and the cloche's rim begin. Smoothstep stops, so the edge has
   no line in it. */
html[data-v="editorial"][data-theme="light"].film .hero{isolation:isolate;background:transparent}
html[data-v="editorial"][data-theme="light"].film .hero__frame{
  -webkit-mask-image:
    linear-gradient(90deg,transparent 41%,rgba(0,0,0,.1) 43.4%,rgba(0,0,0,.35) 45.8%,rgba(0,0,0,.65) 48.2%,rgba(0,0,0,.9) 50.6%,#000 53%),
    linear-gradient(180deg,transparent 2%,rgba(0,0,0,.1) 5.6%,rgba(0,0,0,.35) 9.2%,rgba(0,0,0,.65) 12.8%,rgba(0,0,0,.9) 16.4%,#000 20%,#000 82%,rgba(0,0,0,.9) 85.6%,rgba(0,0,0,.65) 89.2%,rgba(0,0,0,.35) 92.8%,rgba(0,0,0,.1) 96.4%,transparent 100%);
  mask-image:
    linear-gradient(90deg,transparent 41%,rgba(0,0,0,.1) 43.4%,rgba(0,0,0,.35) 45.8%,rgba(0,0,0,.65) 48.2%,rgba(0,0,0,.9) 50.6%,#000 53%),
    linear-gradient(180deg,transparent 2%,rgba(0,0,0,.1) 5.6%,rgba(0,0,0,.35) 9.2%,rgba(0,0,0,.65) 12.8%,rgba(0,0,0,.9) 16.4%,#000 20%,#000 82%,rgba(0,0,0,.9) 85.6%,rgba(0,0,0,.65) 89.2%,rgba(0,0,0,.35) 92.8%,rgba(0,0,0,.1) 96.4%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  transition:filter .7s var(--ease);
}
/* wider than 16:9 the frame stops short of the stage's right edge: it fades out there as well */
@media (min-aspect-ratio:181/100){
  html[data-v="editorial"][data-theme="light"].film .hero__frame{
    -webkit-mask-image:
      linear-gradient(90deg,transparent 41%,rgba(0,0,0,.1) 43.4%,rgba(0,0,0,.35) 45.8%,rgba(0,0,0,.65) 48.2%,rgba(0,0,0,.9) 50.6%,#000 53%,#000 93%,transparent 100%),
      linear-gradient(180deg,transparent 2%,rgba(0,0,0,.1) 5.6%,rgba(0,0,0,.35) 9.2%,rgba(0,0,0,.65) 12.8%,rgba(0,0,0,.9) 16.4%,#000 20%,#000 82%,rgba(0,0,0,.9) 85.6%,rgba(0,0,0,.65) 89.2%,rgba(0,0,0,.35) 92.8%,rgba(0,0,0,.1) 96.4%,transparent 100%);
    mask-image:
      linear-gradient(90deg,transparent 41%,rgba(0,0,0,.1) 43.4%,rgba(0,0,0,.35) 45.8%,rgba(0,0,0,.65) 48.2%,rgba(0,0,0,.9) 50.6%,#000 53%,#000 93%,transparent 100%),
      linear-gradient(180deg,transparent 2%,rgba(0,0,0,.1) 5.6%,rgba(0,0,0,.35) 9.2%,rgba(0,0,0,.65) 12.8%,rgba(0,0,0,.9) 16.4%,#000 20%,#000 82%,rgba(0,0,0,.9) 85.6%,rgba(0,0,0,.65) 89.2%,rgba(0,0,0,.35) 92.8%,rgba(0,0,0,.1) 96.4%,transparent 100%);
  }
}
/* the words stand on the cream beside it. The hero's block is sized from one
   token; here that token is also held so its widest line ("The specials.",
   7.41 of it) ends before the ramp has begun to darken (the frame's left
   edge is 50vw less 88.9vh, so 43.4% of it is 50vw less 11.7vh). Its second
   link drops under the button instead of running on into the picture */
html[data-v="editorial"][data-theme="light"].film{--hero-size:clamp(44px,min(6.4vw,10.4vh,calc((50vw - 12vh - var(--gut)) / 7.45)),116px)}
html[data-v="editorial"][data-theme="light"].film .band--hero .cta{flex-wrap:wrap;width:auto}
/* the indent of the small block beside the headline is held the same way:
   the second link is 354px of fixed-size type, so on screens squarer than
   16:9 the indent gives way (to nothing, at the squarest) before the link
   runs into the picture */
html[data-v="editorial"][data-theme="light"].film .band--hero .badge,
html[data-v="editorial"][data-theme="light"].film .band--hero .sub,
html[data-v="editorial"][data-theme="light"].film .band--hero .cta{
  margin-left:max(0px,min(calc(var(--hero-size) * 2.9),calc(50vw - 11.7vh - 366px - var(--gut))));
}
/* nothing lies over the words, so they need no scrim */
html[data-v="editorial"][data-theme="light"].film .stage::after{display:none}

/* ---- its end ----
   The film ends on the line leaving a black screen, and "The first step
   toward something bigger." comes up across it. So as that band arrives the
   film is turned over (lightness inverted, hue kept) under a layer of the
   page's cream multiplied over it: the black becomes the page and the line
   stays, in the deeper colours it has on cream, until the page's own line
   takes it on. Filter functions interpolate, so the black fades up to cream
   rather than cutting, and scrolling back reverses it. */
html[data-v="editorial"][data-theme="light"].film .hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--bg);mix-blend-mode:multiply;
  opacity:0;transition:opacity .7s var(--ease);
}
html[data-v="editorial"][data-theme="light"].film .stage:has(.band--climb.on) .hero__frame{filter:brightness(.72) invert(1) hue-rotate(180deg) saturate(1.5)}
html[data-v="editorial"][data-theme="light"].film .stage:has(.band--climb.on) .hero::after{opacity:1}
/* the switch between the grounds is a cut, never a film seen half turned
   (dash.js holds this class for the moment of the change) */
html.dx-flip .hero__frame,html.dx-flip .hero::after{transition:none!important}
/* the loading ring was drawn in white */
html[data-v="editorial"][data-theme="light"].film .hero__ring{z-index:2}
html[data-v="editorial"][data-theme="light"].film .hero__ring circle{stroke:rgba(29,26,22,.14)}
html[data-v="editorial"][data-theme="light"].film .hero__ring .hero__ringarc{stroke:rgba(29,26,22,.62)}

/* ---- the line ----
   On black it is a lit tube: a dark casing, a wide glow, the spectrum, a
   white-hot core. On cream the white would vanish and the black would be a
   smear, so the spectrum itself carries it: a faint warm shadow for a casing,
   the glow kept, the core a thin highlight, the heat a deeper orange. */
html[data-v="editorial"][data-theme="light"] .thread--case{
  stroke:#3A2A1C;
  opacity:calc(.12 * var(--pw,0) + .1 * var(--ten,0));
}
html[data-v="editorial"][data-theme="light"] .thread--glow{opacity:calc(.02 + .09 * var(--pw,0) + .05 * var(--ten,0))}
html[data-v="editorial"][data-theme="light"] .thread--body{opacity:calc(.5 + .5 * var(--pw,0))}
html[data-v="editorial"][data-theme="light"] .thread--hot{stroke:#FF6A1F;opacity:calc(.55 * var(--ten,0))}
html[data-v="editorial"][data-theme="light"] .thread--core{stroke:#FFFFFF;opacity:calc(.22 * var(--pw,0) + .3 * var(--ten,0))}
html[data-v="editorial"][data-theme="light"] .tip{fill:#FF6A1F}
html[data-v="editorial"][data-theme="light"].film .bloom{
  background:radial-gradient(circle,rgba(255,112,36,.5) 0%,rgba(255,138,60,.24) 10%,rgba(255,160,90,.1) 32%,rgba(255,160,90,0) 66%);
}

/* ---- the clouds: the same sky, by day ----
   The sky film is white cloud and white words on black: a night sky. On the
   light ground it is that sky by day. A filter (#skyDay, in index.html's
   defs) takes the film's black out and leaves everything else as it was
   filmed: cloud and the white words at their own density, the orange word
   untouched. Behind the film the layer is a morning sky that pales into the
   page's cream at its foot, so the beat rises out of the page and sinks back
   into it; sky.js fades the layer, and the sky comes and goes with it. The
   flash sky.js lays over the film is light on a sky either way, and is left
   alone. */
html[data-v="editorial"][data-theme="light"].film .sky__frame{filter:url(#skyDay)}

/* ---- the sky around the beats ----
   Karan, 2026-10-05: "make it have the clouds in the background as well
   when the snake is moving up and also make the clouds move as we are going
   up and as the snake goes up". So the day sky reaches out past the beats:
   as the line begins to climb toward one, a pale sky comes up behind it with
   three depths of the sky film's own clouds (cut from its frames by
   build/dash-integration/tools/sky-tiles.py), and deepens into the beat's
   blue as the beat's film comes in. dash.js moves the clouds with the film's
   camera. The beat's layer keeps only its film; its blue is this layer's
   (.dx-sky__deep), so the clouds behind show through the film's open sky
   while the words hold. The film's dot field goes under it, as it goes
   under the beats. */
.dx-sky{display:none}
html[data-v="editorial"][data-theme="light"].film .dx-sky{
  display:block;position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;
  opacity:0;visibility:hidden;
  background:linear-gradient(180deg,#BCD4F0 0%,#C8DBF1 36%,#DCE6F1 70%,var(--bg) 100%);
}
html[data-v="editorial"][data-theme="light"].film .dx-sky.on{visibility:visible}
.dx-sky__deep{
  position:absolute;inset:0;opacity:0;
  background:linear-gradient(180deg,#6A9FE2 0%,#73A6E5 34%,#9DC0EC 60%,#D3DEEA 82%,var(--bg) 100%);
}
.dx-sky__l{position:absolute;left:0;top:0;background-repeat:repeat;background-position:0 0;will-change:transform,opacity}
html[data-v="editorial"][data-theme="light"].film .sky{background:none}
html[data-v="editorial"][data-theme="light"].film .dots--film{z-index:1}

/* the strain: on black the frame closes in with darkness. By day it closes
   in with cloud, a white haze from the edges, and the break is a white bloom */
html[data-v="editorial"][data-theme="light"] .strain::before{
  background:
    radial-gradient(ellipse 58% 54% at 50% 52%,rgba(250,249,247,0) 36%,rgba(250,249,247,.88) 100%),
    radial-gradient(ellipse 30% 26% at calc(var(--fx,72) * 1%) calc(var(--fy,56) * 1%),rgba(255,170,90,.18) 0%,rgba(255,170,90,0) 100%);
  background:
    radial-gradient(ellipse calc(58% - 16% * var(--ten,0) * var(--vig,1)) calc(54% - 15% * var(--ten,0) * var(--vig,1)) at 50% 52%,rgba(250,249,247,0) 34%,rgba(250,249,247,.9) 100%),
    radial-gradient(ellipse 30% 26% at calc(var(--fx,72) * 1%) calc(var(--fy,56) * 1%),rgba(255,170,90,.2) 0%,rgba(255,170,90,0) 100%);
}
html[data-v="editorial"][data-theme="light"] .strain::after{
  background:radial-gradient(ellipse 52% 48% at calc(var(--fx,72) * 1%) calc(var(--fy,54) * 1%),rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 62%);
  background:radial-gradient(ellipse calc(52% + 20% * var(--brk,0)) calc(48% + 18% * var(--brk,0)) at calc(var(--fx,72) * 1%) calc(var(--fy,54) * 1%),rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 64%);
}

/* the front plate's tab is orange with the dark page's ink; keep that ink */
html[data-v="editorial"][data-theme="light"].film .act--ba.is-front .ba__tab{color:#1D1A16}

/* ============================================================
   LIGHT: THE STORY LAYOUT (reduced motion, portrait tablets)
   The film's two treatments, on its stills. The opening still
   keeps its own colours and melts into the cream at its top and
   foot as it melts into the dark (its own mask; nothing to add).
   A cloud beat is a still with the words set over it: the still
   loses its black over the same morning sky, and the words are
   white on it, as they are in the film.
   ============================================================ */

@media (min-width:761px){
  html[data-v="editorial"][data-theme="light"].story .skystill{
    border-radius:var(--r-card);overflow:hidden;
    background:linear-gradient(180deg,#6A9FE2 0%,#73A6E5 34%,#9DC0EC 60%,#D3DEEA 84%,#ECEAE7 100%);
  }
  html[data-v="editorial"][data-theme="light"].story .skystill__img{filter:url(#skyDay)}
  html[data-v="editorial"][data-theme="light"].story .skystill__words .hl--sky,
  html[data-v="editorial"][data-theme="light"].story .skystill__words .hl--sky .ln--2{color:#fff}
  html[data-v="editorial"][data-theme="light"].story .skystill__words .hl--sky{text-shadow:0 2px 8px rgba(30,62,118,.46),0 0 36px rgba(30,62,118,.36)}
  html[data-v="editorial"][data-theme="light"].story .skystill__words .hl--sky .acc{color:var(--acc)}
}

/* ============================================================
   LIGHT: THE PHONE'S FILM (phone.js, the line down the page)
   The same rule as the desktop: the page is cream from the first
   screen to the last, and footage made on black is a picture.
   ============================================================ */

@media (max-width:760px){
  /* ---- the opening: the cloche film, in its own colours ----
     As on the desktop: the scene is the film as it was made, edge to edge,
     and it melts into the cream at its top and foot as it melts into the
     dark. On black it comes up under the hero's buttons and takes the next
     words into its dark lower edge; on cream both would be dark ink on dark,
     so here it starts below the buttons and the next words begin under it.
     phone.js measures all of this, so the line follows. */
  html.snake[data-v="editorial"][data-theme="light"].story .act--still{margin-top:clamp(20px,6vw,32px)}
  html.snake[data-v="editorial"][data-theme="light"] .band--studio{margin-top:0;padding-top:clamp(26px,5vh,40px)}

  /* ---- the cloud beats ----
     The clouds here are layers lit by a low sun on a clear sky, so on cream
     they are simply clouds in daylight. What was written for the night goes:
     the evening blue over the horizon, the black the scene sank into at its
     foot. The warm light on the horizon stays. */
  html[data-v="editorial"][data-theme="light"].story .sky3__glow{
    background:
      radial-gradient(70% 3.2% at 50% calc(var(--vp) + 1vh),rgba(255,214,170,.5),rgba(255,200,150,0) 100%),
      radial-gradient(95% 15% at 50% calc(var(--vp) + 1vh),rgba(255,156,96,.2),rgba(255,140,90,.06) 60%,rgba(255,140,90,0) 100%);
  }
  html.snake[data-v="editorial"][data-theme="light"] .sky3::before,
  html.snake[data-v="editorial"][data-theme="light"] .act--sky-b .sky3::before{
    background:linear-gradient(180deg,rgba(var(--dx-ground-rgb),0) 0,var(--bg) 40px,var(--bg) calc(100% - 10vh),rgba(var(--dx-ground-rgb),0) 100%);
  }
  html.snake[data-v="editorial"][data-theme="light"] .sky3::after{
    background:linear-gradient(0deg,var(--bg) 0,rgba(var(--dx-ground-rgb),.92) 18%,rgba(var(--dx-ground-rgb),.7) 42%,rgba(var(--dx-ground-rgb),.38) 68%,rgba(var(--dx-ground-rgb),.12) 88%,rgba(var(--dx-ground-rgb),0) 100%);
  }
  html[data-v="editorial"][data-theme="light"].story .skystill::before{background:linear-gradient(180deg,var(--bg),rgba(var(--dx-ground-rgb),0))}
  html[data-v="editorial"][data-theme="light"].story .skystill::after{background:linear-gradient(0deg,var(--bg),rgba(var(--dx-ground-rgb),0))}
  html[data-v="editorial"][data-theme="light"].story .act--sky .hl--sky .acc{color:var(--acc-display)}

  /* ---- the line ----
     Its white-hot core and tip are light on black; on cream the spectrum
     carries it, with a thin highlight for a core and an ember for a head */
  html.snake[data-v="editorial"][data-theme="light"] .snk__core{stroke:#FFFFFF;stroke-opacity:.5}
  html.snake[data-v="editorial"][data-theme="light"] .snk__g1{opacity:.16}
  html.snake[data-v="editorial"][data-theme="light"] .snk__g2{opacity:.08}
  html.snake[data-v="editorial"][data-theme="light"] .snk__tip{
    background:radial-gradient(circle,rgba(255,106,31,.95) 0,rgba(255,120,44,.7) 3%,rgba(255,140,70,.3) 9%,rgba(255,160,100,.12) 26%,rgba(255,170,120,.04) 46%,rgba(255,170,120,0) 66%);
  }
  /* the empty room behind was dimmed toward black; on cream it is just faded */
  html.snake[data-v="editorial"][data-theme="light"] .act--ba--before .ba__img{filter:brightness(.9) saturate(.7) opacity(.72)}
}

/* ============================================================
   LIGHT: THE SECTIONS BELOW THE FILM
   ============================================================ */

/* the work mark's rule and resting arrows were drawn in cream */
html[data-v="editorial"][data-theme="light"] .wmk path[stroke="#F2EDE3"]{stroke:var(--ink)}
/* the listing mock is a light card; on the light panel it needs its edge */
html[data-v="editorial"][data-theme="light"] .work .mk--seo{box-shadow:0 0 0 1px var(--line-2),var(--dx-shadow)}

/* the picked option's arrow is a thin stroke: orange as ink */
html[data-v="editorial"][data-theme="light"] .opt input:checked + .opt__txt::after{background:var(--acc-ink)}

/* the form: the hover line, the select's arrow and its list. focus and the
   invalid state are restated after the hover so they still win over it */
html[data-v="editorial"][data-theme="light"] input:hover,
html[data-v="editorial"][data-theme="light"] select:hover,
html[data-v="editorial"][data-theme="light"] textarea:hover{border-color:rgba(94,72,50,.55)}
html[data-v="editorial"][data-theme="light"] input:focus,
html[data-v="editorial"][data-theme="light"] select:focus,
html[data-v="editorial"][data-theme="light"] textarea:focus{border-color:var(--ink)}
html[data-v="editorial"][data-theme="light"] input[aria-invalid="true"],
html[data-v="editorial"][data-theme="light"] textarea[aria-invalid="true"]{border-color:var(--bad)}
html[data-v="editorial"][data-theme="light"] select{
  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='%231D1A16' stroke-width='1.3'/%3E%3C/svg%3E");
}
html[data-v="editorial"][data-theme="light"] option{background:#FBFAF8;color:var(--ink)}

/* ============================================================
   LIGHT: THE PHONE'S CONTACT BAR
   On cream it stands on the dashboard's soft shadow and the page
   fades out under it into cream.
   ============================================================ */

html[data-v="editorial"][data-theme="light"] .ctabar{box-shadow:0 1px 2px rgba(40,30,20,.08),0 14px 30px -14px rgba(40,30,20,.4)}
@media (max-width:760px){
  html[data-v="editorial"][data-theme="light"].story body::after{
    background:linear-gradient(180deg,rgba(244,241,236,0) 0%,rgba(244,241,236,.86) 55%,#F4F1EC 100%);
  }
}

/* ============================================================
   THE CROSS-FADE
   dash.js makes the switch inside a view transition where the
   browser has one, so the two grounds dissolve into each other;
   nothing moves, only colour changes. Reduced motion never
   starts one.
   ============================================================ */

::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:ease}