/* ============================================================
   Version 3: the daylight page (Karan, 2026-10-05: "use the photos
   in this folder to get an idea and build me a version three of
   the page"; his folder "grokbot generated domin8temedia images").

   What the pictures share, and what this sheet does with it: the
   light ground only (no switch); a cool navy ink on the warm cream;
   a white bar for a header; pill buttons with white type; the
   hero's "SPECIALS." set huge, the rest of the line quiet; "MEET."
   in the thinnest weight; graph paper behind the first step; the
   two cloud beats as heavy, extruded words over a sunny sky and a
   sea of cloud; a white "Scroll" pill; a spectrum rule under the
   closing wordmark. The cloche film is the day film (day3d/), which
   ends on the page's cream by itself.

   Loaded after the shared sheets, only by v3/site/index.html.
   ============================================================ */

/* ---- tokens: three values, not one ----
   Karan, 2026-10-05: "the rest of the website kinda looks washed out
   because of the white background ... don't just go ahead and bold
   everything". It looked washed out because ground, cards and type
   all sat at the top of the scale: cream under white cards under thin
   grey words. Now each has its own step: the ground drops to a warm
   sand with a faint paper grain, the cards stay white and so stand off
   it, and the ink goes to near black. The second line of a headline
   is set apart by hue (a dusk blue) instead of by fading it to grey,
   so it keeps its contrast. The weights are unchanged. Both films end
   on this sand (day3d/end.py, daysky/compose.py) */
html[data-v="editorial"][data-theme="light"]{
  --bg:#ECE6DD;
  --dx-ground-rgb:236,230,221;
  --raise-2:#F7F4EF;
  --ink:#0E1420;
  --ink-2:#394357;
  --ink-3:#566074;
  --v3-dusk:#3A4E7A;         /* 6.6:1 on the sand, 8.2:1 on a card */
  --v3-cta:#CA4A14;          /* white type on it holds 4.6:1 */
  --v3-cta-hover:#B5410F;
  --card-shadow:0 1px 2px rgba(60,42,24,.07),0 14px 34px -18px rgba(60,42,24,.32);
  --v3-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .22  0 0 0 0 .14  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.22'/></svg>");
}
/* the grain is on the page's root, not the body: the mouse's dot field (site.js) is a canvas
   behind the body, and a body background would hide it */
html[data-v="editorial"][data-theme="light"]{background:var(--v3-grain),var(--bg)}
html[data-v="editorial"][data-theme="light"] body{background:transparent}
html[data-v="editorial"][data-theme="light"].film .stage{background:var(--v3-grain),var(--bg)}

/* ---- the cursor: Karan's own design (2026-10-06, "use this design for the cursor ... make sure only
   this cursor shows even if I'm clicking a button and interacting with something else"): the glossy
   spectrum growth arrow on its white sticker (v3/cursor2: cut.py lifts it off its cream; 32px, and
   64px for sharp screens). Its point is the arrow's tip. It is the only cursor on the page: links,
   buttons, fields and all */
@media (hover:hover) and (pointer:fine){
  html[data-v="editorial"][data-theme="light"],
  html[data-v="editorial"][data-theme="light"] *{
    cursor:url(v3-cursor-32.png?v=f911eff871) 2 1,auto!important;
    cursor:-webkit-image-set(url(v3-cursor-32.png?v=f911eff871) 1x,url(v3-cursor-64.png?v=2f417793af) 2x) 2 1,auto!important;
  }
}
}
html[data-v="editorial"][data-theme="light"] .hl .ln--2,
html[data-v="editorial"][data-theme="light"] .band--studio .ln--2{color:var(--v3-dusk)}
/* the options: see-through, each in its own fine rounded border, spaced so the borders never
   touch (Karan, 2026-10-06: "make these cards background transparent and just give them a
   little border"); the words sit in from the edge */
html[data-v="editorial"][data-theme="light"] .pick__opts{border-top:0;gap:10px}
html[data-v="editorial"][data-theme="light"] .opt__txt{background:transparent;border:1px solid rgba(14,20,32,.16);border-radius:14px;box-shadow:none;padding:14px 22px}
html[data-v="editorial"][data-theme="light"] .opt:hover .opt__txt{background:transparent;border-color:rgba(14,20,32,.34)}
html[data-v="editorial"][data-theme="light"] .opt input:checked + .opt__txt{background:transparent;border-color:var(--ink)}

/* the click, the growth pulse (v3-cursor.js): while it plays, a drawn copy of the cursor stands in
   for it, with room round its 32px box (32px a side) for the stretch and the sparkles */
.v3cur{position:fixed;left:0;top:0;z-index:2147483647;width:96px;height:96px;pointer-events:none;visibility:hidden;will-change:transform}
.v3cur__mark{position:absolute;left:32px;top:32px;width:32px;height:32px}
.v3cur svg{display:block;position:absolute;left:0;top:0;overflow:visible}
.v3cur__spark{position:absolute;left:0;top:0;opacity:0}
.v3cur__spark svg{width:100%;height:100%}
.v3cur__spark--white{filter:drop-shadow(0 0 1px rgba(106,75,255,.6)) drop-shadow(0 0 3px rgba(47,140,255,.4))}
/* the real cursor is hidden while the copy plays by v3-cursor.js itself, on the element under the pointer
   (an inline style); a class on the root restyled every element of the page on each click (INP) */

/* the form's "What needs fixing first?" list (v3-select.js): the field keeps the form's own underline
   look; its list is a soft card in the page's colours instead of the browser's blue-and-white menu.
   The real <select> stays in the form, hidden */
html[data-v="editorial"] .v3sel{position:relative}
html[data-v="editorial"] .v3sel__native{position:absolute;left:0;bottom:0;width:1px;height:1px;min-height:0;padding:0;border:0;opacity:0;pointer-events:none;clip-path:inset(50%)}
html[data-v="editorial"] .v3sel__btn{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:56px;padding:8px 0 12px;margin:0;
  background: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);text-align:left;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
html[data-v="editorial"] .v3sel__btn.is-empty .v3sel__val{color:var(--ink-3)}
html[data-v="editorial"] .v3sel__btn:hover{border-color:rgba(94,72,50,.55)}
html[data-v="editorial"] .v3sel__btn:focus{outline:none}
html[data-v="editorial"] .v3sel__btn:focus-visible,
html[data-v="editorial"] .v3sel.is-open .v3sel__btn{border-color:var(--ink);box-shadow:0 1px 0 0 var(--ink)}
html[data-v="editorial"] .v3sel__chev{flex:none;margin-right:4px;color:var(--ink);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
html[data-v="editorial"] .v3sel.is-open .v3sel__chev{transform:rotate(180deg)}
html[data-v="editorial"] .v3sel__list{
  position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:30;margin:0;padding:6px;list-style:none;
  max-height:min(380px,60vh);overflow:auto;overscroll-behavior:contain;
  background:#FBF9F5;border:1px solid rgba(14,20,32,.09);border-radius:16px;
  box-shadow:0 1px 2px rgba(60,42,24,.07),0 18px 44px -18px rgba(60,42,24,.38);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.985);transform-origin:50% 0;
  transition:opacity .16s ease,transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s linear .22s;
}
html[data-v="editorial"] .v3sel.is-up .v3sel__list{top:auto;bottom:calc(100% + 10px);transform:translateY(6px) scale(.985);transform-origin:50% 100%}
html[data-v="editorial"] .v3sel.is-open .v3sel__list{opacity:1;visibility:visible;transform:none;transition-delay:0s}
html[data-v="editorial"] .v3sel__list:focus{outline:none}
html[data-v="editorial"] .v3sel__opt{
  display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:10px 14px;border-radius:10px;
  font:400 clamp(17px,1.25vw,19px)/1.3 var(--f-text);color:var(--ink-2);
  transition:background-color .12s ease,color .12s ease;
}
html[data-v="editorial"] .v3sel__opt.is-active{background:rgba(14,20,32,.055);color:var(--ink)}
html[data-v="editorial"] .v3sel__opt[aria-selected="true"]{color:var(--ink);font-weight:600}
html[data-v="editorial"] .v3sel__tick{flex:none;color:var(--v3-cta,#CA4A14);opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .2s cubic-bezier(.2,.8,.2,1)}
html[data-v="editorial"] .v3sel__opt[aria-selected="true"] .v3sel__tick{opacity:1;transform:none}
html[data-v="editorial"] .v3sel__list:focus-visible .v3sel__opt.is-active{box-shadow:inset 0 0 0 1.5px rgba(14,20,32,.28)}
@media (prefers-reduced-motion:reduce){
  html[data-v="editorial"] .v3sel__list,html[data-v="editorial"] .v3sel__chev,html[data-v="editorial"] .v3sel__tick{transition:none}
}

/* ---- the line: a lit glass tube lying just above the page ----
   Karan: "make the snake kind of pop, not out of the screen". On the
   light ground a glow cannot show (light on light), so the tube is
   given what a real one has in daylight: edges in its own colour,
   darkened (the case, the spectrum itself, under a dark film: the rim),
   a white highlight along its top, and a soft shadow on the page a
   little below it. The shadows and the rim are new <use>s in
   index.html's #boltg; they share the bolt's dash, so they draw with it */
html[data-v="editorial"][data-theme="light"]{--lnw:calc(4px + 10px * var(--pw,0) + 7px * var(--ten,0))}
html[data-v="editorial"][data-theme="light"] .thread--shade{stroke:#1A2232;fill:none}
html[data-v="editorial"][data-theme="light"] .thread--shade2{stroke-width:calc(var(--lnw) + 24px);opacity:calc(.035 + .02 * var(--pw,0));transform:translate(0,20px)}
html[data-v="editorial"][data-theme="light"] .thread--shade1{stroke-width:calc(var(--lnw) + 7px);opacity:calc(.08 + .05 * var(--pw,0));transform:translate(0,9px)}
html[data-v="editorial"][data-theme="light"] .thread--case{stroke:url(#specg);stroke-width:calc(var(--lnw) + 3.6px);opacity:1}
html[data-v="editorial"][data-theme="light"] .thread--rim{stroke:#160D08;fill:none;stroke-width:calc(var(--lnw) + 3.6px);opacity:.36}
html[data-v="editorial"][data-theme="light"] .thread--glow{opacity:calc(.03 + .04 * var(--pw,0))}
html[data-v="editorial"][data-theme="light"] .thread--body{stroke-width:var(--lnw);opacity:1}
html[data-v="editorial"][data-theme="light"] .thread--hot{stroke-width:var(--lnw)}
html[data-v="editorial"][data-theme="light"] .thread--core{stroke:#fff;stroke-width:calc(var(--lnw) * .3);opacity:calc(.55 + .2 * var(--pw,0));transform:translate(0,calc(var(--lnw) * -.2))}
.dx-toggle,html.js[data-v="editorial"] .dx-toggle,html.js[data-v="editorial"] .dx-toggle--foot{display:none!important}

/* ---- the header: a white bar, always ---- */
html[data-v="editorial"][data-theme="light"] .hdr::before,
html[data-v="editorial"][data-theme="light"] .hdr.is-scrolled::before{
  inset:0;opacity:1;background:#fff;
  box-shadow:0 1px 0 rgba(24,32,47,.07),0 14px 34px -24px rgba(24,32,47,.35);
}
html[data-v="editorial"][data-theme="light"] .nav__link--dash{background:#fff;border-color:rgba(24,32,47,.16)}

/* ---- buttons: pills, white type ---- */
html[data-v="editorial"][data-theme="light"] .btn--primary,
html[data-v="editorial"][data-theme="light"] .nav__cta{
  background:var(--v3-cta);color:#fff;border-radius:999px;
}
html[data-v="editorial"][data-theme="light"] .btn--primary:hover,
html[data-v="editorial"][data-theme="light"] .nav__cta:hover{background:var(--v3-cta-hover);color:#fff}
html[data-v="editorial"][data-theme="light"] .band--hero .btn--primary{min-height:56px;padding:0 30px;box-shadow:0 12px 26px -14px rgba(202,74,20,.7)}

/* ---- the hero: "We'll post the" quiet, "SPECIALS." huge, the second line spaced small caps ----
   The widest line is now "SPECIALS." at 1.9 of the token (about 9.4 of it), so the
   token is held so that line still ends short of the film's soft edge */
html[data-v="editorial"][data-theme="light"].film{--hero-size:clamp(34px,min(4.9vw,8vh,calc((50vw - 12vh - var(--gut)) / 9.4)),92px)}
html[data-v="editorial"][data-theme="light"] .hl--hero{color:var(--ink);font-weight:200}
html[data-v="editorial"][data-theme="light"] .hl--hero .ln{display:block}
html[data-v="editorial"][data-theme="light"] .hl--hero .acc{
  display:block;font-size:1.9em;line-height:.9;margin:.06em 0 .1em -.03em;
  font-weight:800;font-style:italic;letter-spacing:-.025em;color:var(--acc-display);
}
html[data-v="editorial"][data-theme="light"] .hl--hero .ln--2,
html[data-v="editorial"][data-theme="light"] .hl--hero:has(.acc) .ln--2{
  font-size:.4em;font-weight:400;letter-spacing:.16em;color:var(--v3-dusk);margin-top:.35em;
}
/* the block is as wide as its widest line ("SPECIALS." at 1.9 of the token), so the line's reveal
   (a clip a little wider than the block) never cuts its last letters */
html[data-v="editorial"][data-theme="light"].film .band--hero .band__in{width:calc(var(--hero-size) * 9.6)}
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:0}
html[data-v="editorial"][data-theme="light"].film .band--hero .sub{font-size:clamp(16px,1.25vw,20px);max-width:30ch;color:var(--ink-2)}
html[data-v="editorial"][data-theme="light"].film .band--hero .cta{flex-wrap:wrap;width:auto;gap:18px 34px}

/* ---- meet: the thinnest MEET., the partner line in spaced caps ---- */
html[data-v="editorial"][data-theme="light"] .band--studio .ln--strong{font-weight:200;font-size:2.05em;line-height:.92;letter-spacing:-.01em;color:var(--ink)}
html[data-v="editorial"][data-theme="light"] .band--studio .ln--2{font-size:.44em;letter-spacing:.14em;color:var(--v3-dusk);margin-top:.5em}

/* ---- the first step: graph paper under the climb, at the right ---- */
html[data-v="editorial"][data-theme="light"].film .band--climb::after{
  content:"";position:absolute;right:5vw;bottom:9vh;width:36vw;height:46vh;pointer-events:none;
  background:
    linear-gradient(rgba(24,32,47,.09) 1px,transparent 1px) 0 0 / 52px 52px,
    linear-gradient(90deg,rgba(24,32,47,.09) 1px,transparent 1px) 0 0 / 52px 52px;
  -webkit-mask-image:radial-gradient(70% 70% at 70% 62%,#000 30%,transparent 100%);
  mask-image:radial-gradient(70% 70% at 70% 62%,#000 30%,transparent 100%);
}

/* ---- the cloud beats: the sky film, by day ----
   Rendered again in daylight (build/daysky: the night film's clouds and
   camera, a noon sun, a blue sky lighting the shadow sides, the words in
   heavy charcoal and orange), transparent, then laid over this page's own
   sky (daysky/compose.py: these stops, top to bottom of the frame, which
   is the screen's height). So the film's sky and .dx-sky__deep are one
   colour and the frame's edges never show; the night film's key
   (#skyDay) is not wanted. Until the film's pictures are in, the beat
   shows its finished picture (the poster), never an empty sky */
html[data-v="editorial"][data-theme="light"].film .sky__frame{filter:none;background:center / cover no-repeat}
html[data-v="editorial"][data-theme="light"].film .sky[data-beat="a"] .sky__frame{background-image:url(v3-sky-a.jpg?v=b674898a86)}
html[data-v="editorial"][data-theme="light"].film .sky[data-beat="b"] .sky__frame{background-image:url(v3-sky-b.jpg?v=d6e0fd7c43)}
html[data-v="editorial"][data-theme="light"] .dx-sky__deep{
  background:linear-gradient(180deg,#3F86DA 0%,#5C9BE3 30%,#92BDEC 56%,#D6E4F2 80%,var(--bg) 100%);
}
/* the strain (the frame closing in while the scroll charges the beat) closed in
   with a white haze by day; over a bright blue sky that only fogged the words, so
   here it is a breath of it */
html[data-v="editorial"][data-theme="light"].film .strain::before{opacity:calc(var(--ten,0) * .28)}
/* if the film cannot play at all, the poster is the beat: no second set of words over it */
html[data-v="editorial"][data-theme="light"].film .sky.sky-failed .sky__fb{display:none!important}

/* ---- the scroll pill: white ---- */
html[data-v="editorial"][data-theme="light"].film .charge{
  background:rgba(255,255,255,.94);border-color:rgba(24,32,47,.08);
  box-shadow:0 14px 34px -16px rgba(24,32,47,.42);
}
html[data-v="editorial"][data-theme="light"].film .charge.is-launched{background:rgba(255,255,255,0);border-color:rgba(24,32,47,0);box-shadow:none}
html[data-v="editorial"][data-theme="light"] .charge__label{color:var(--ink)}

/* ---- the cloche film ends on the cream by itself: no turning over ---- */
html[data-v="editorial"][data-theme="light"].film .stage:has(.band--climb.on) .hero__frame{filter:none}
html[data-v="editorial"][data-theme="light"].film .stage:has(.band--climb.on) .hero::after{opacity:0}

/* ---- before and after: pill tags ---- */
html[data-v="editorial"][data-theme="light"] .ba__tab{border-radius:999px;padding-left:14px;padding-right:14px}

/* ---- the close: the wordmark heavier, and the drawn spectrum rule under it ----
   Karan, 2026-10-05: the original logo stays (the glass mark that stood over it is gone,
   assets/mark-720.webp as on the live site) and the static spectrum line under the name
   goes; the rule that draws itself across as the page ends (site.css .rule) takes its
   place, closer under the name */
html[data-v="editorial"][data-theme="light"] .wordmark{font-weight:600;color:var(--ink)}
html[data-v="editorial"][data-theme="light"] .wordmark__sub{font-weight:400;color:#9AA0AA}
html[data-v="editorial"][data-theme="light"].film .act--word .rule{height:3px;margin-top:1vh}
html[data-v="editorial"][data-theme="light"] .act--word .rule{height:3px;margin-top:10px}

/* ============================================================
   THE PHONE
   ============================================================ */
@media (max-width:760px){
  /* the grain darkens what is under it by about 4 levels on average, so the ground the scenes and
     films fade into (the flat sand, --bg) met the grained page in a visible seam (under the second
     cloud beat). On the phone the grain sits on a sand that much lighter, so on average they agree */
  html[data-v="editorial"][data-theme="light"]{background:var(--v3-grain),#F0EAE1}

  /* the hero's SPECIALS. keeps to the phone's column */
  html[data-v="editorial"][data-theme="light"] .hl--hero .acc{font-size:min(1.9em,calc((100vw - 96px) / 5.4))}
  /* the opening: the whole cloche on the first screen (Karan sent the first
     screen with the dome cut off at the foot). The scene is pulled up under
     the words so its plate ends just above the screen's foot: the words end
     about 536px down on most phones, and the plate sits at 70% of the 2:3
     scene (105vw down it). The scene's top fades out over its first 16%, so
     the words and the link sit on the faded wall, never on the dome; on the
     shortest phones the pull stops at 120px, the knob still clear of the link */
  html.snake[data-v="editorial"][data-theme="light"].story .act--still{margin-top:max(-120px,min(22px,calc(100svh - 105vw - 536px)))}
  /* the contact bar: the same pill as the header's */
  html[data-v="editorial"][data-theme="light"] .ctabar{background:var(--v3-cta);color:#fff;border-radius:999px;box-shadow:0 14px 30px -14px rgba(202,74,20,.75)}
  html[data-v="editorial"][data-theme="light"] .ctabar:hover{background:var(--v3-cta-hover);color:#fff}

  /* the cloud beats: the desktop's day sky, and the phone's own cloud layers
     rendered again by day (daysky/render-cy.sh: the night layers' shapes, a
     noon sun, a blue sky in their shadows), so nothing is filtered here; the
     same heavy words, extruded more shallowly: they rise out of masks that
     leave only a little room below the letters */
  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,rgba(146,189,236,.55) 70px,#6FA7E6 170px,#4F92DF 26%,#92BDEC 54%,#D6E4F2 78%,rgba(var(--dx-ground-rgb),0) 100%);
  }
  html[data-v="editorial"][data-theme="light"].story .act--sky .hl--sky{
    font-weight:600;text-transform:none;letter-spacing:-.03em;word-spacing:0;
    color:#363B44;-webkit-text-stroke:.02em #363B44;
    text-shadow:0 .012em 0 #2D3139,0 .024em 0 #272B32,0 .036em 0 #22252B,0 .048em 0 #1E2126,0 .07em .04em rgba(18,22,30,.22);
  }
  html[data-v="editorial"][data-theme="light"].story .act--sky .hl--sky .acc{
    font-weight:600;font-style:normal;letter-spacing:-.03em;color:#FF6A1F;-webkit-text-stroke-color:#FF6A1F;
    text-shadow:0 .012em 0 #F25F18,0 .024em 0 #DD5212,0 .036em 0 #CA4810,0 .048em 0 #B8400D,0 .07em .04em rgba(120,40,8,.2);
  }
  /* the second beat's answer line: larger, and lifted off the blue by a soft light behind it, so
     its orange words read (it was a small line of orange on mid blue) */
  html[data-v="editorial"][data-theme="light"].story .act--sky-b .hl--sky .ln--2{color:#363B44;font-size:.7em}
  html[data-v="editorial"][data-theme="light"].story .act--sky-b .hl--sky .ln--2 .acc{color:#FF5A14;-webkit-text-stroke-color:#FF5A14}
  html[data-v="editorial"][data-theme="light"].story .act--sky .skystill__words::before{
    content:"";position:absolute;left:50%;top:50%;width:120%;height:150%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
    background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,255,255,0));
  }
  /* the phone's line: the desktop's tube (phone.js draws its own layers: four
     glows, the body, a lighter band, a core). The two widest glows become its
     shadow on the page, a little below it; the narrowest, a dark rim; the
     core, a highlight along its top */
  html.snake[data-v="editorial"][data-theme="light"] .snk__g4{stroke:#1A2232;opacity:.045;transform:translate(0,9px)}
  html.snake[data-v="editorial"][data-theme="light"] .snk__g3{stroke:#1A2232;opacity:.075;transform:translate(0,5px)}
  html.snake[data-v="editorial"][data-theme="light"] .snk__g2{opacity:0}
  html.snake[data-v="editorial"][data-theme="light"] .snk__g1{stroke:#1A120C;opacity:.4}
  html.snake[data-v="editorial"][data-theme="light"] .snk__band{opacity:.35}
  html.snake[data-v="editorial"][data-theme="light"] .snk__core{stroke:#fff;stroke-opacity:.75;transform:translate(0,-1.4px)}

  /* the dashboard film's play button: on the phone it sat in the window's corner, over the title
     card's mark. Now a round play button low in the middle, under the card's words, the page's
     own orange; its words stay in its label, and the note under the film says it has music */
  .dx-frame__play{left:50%;right:auto;top:87%;padding:4px;transform:translate(-50%,-50%)}
  .dx-frame__btn{width:40px;min-height:40px;height:40px;padding:0;justify-content:center;border-radius:50%;background:var(--v3-cta);color:#fff;box-shadow:0 10px 22px -10px rgba(202,74,20,.8)}
  .dx-frame__btn svg{width:13px;height:13px;margin-left:2px}
  .dx-frame__lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* ---- 2026-10-06 phone pass 2 (Karan's seven screenshots) ---- */

  /* the first step: it sat on the sand with a blank blue block under it, crossed by the night
     version's horizon glow (white bands, no reason to be there by day). Now the sky starts behind the
     words themselves, a slow daylight gradient that the first cloud beat carries straight on from,
     and the glow is gone */
  html.snake[data-v="editorial"][data-theme="light"] .band--climb{position:relative;isolation:isolate}
  html.snake[data-v="editorial"][data-theme="light"] .band--climb::before{
    content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,rgba(var(--dx-ground-rgb),0) 0,rgba(214,228,242,.55) 45%,#C7DCF2 100%);
  }
  html.snake[data-v="editorial"][data-theme="light"] .sky3__glow{display:none}
  html.snake[data-v="editorial"][data-theme="light"] .act--sky-a .sky3::before{
    background:linear-gradient(180deg,#C7DCF2 0,#8DB8EA 90px,#5C9BE3 24%,#4F92DF 34%,#92BDEC 56%,#D6E4F2 78%,rgba(var(--dx-ground-rgb),0) 100%);
  }
  html.snake[data-v="editorial"][data-theme="light"] .act--sky-a .skystill::before{display:none}

  /* the four jobs, the site's main point: each its own white card, the job in larger type, and a rule
     along its foot that fills, in the line's spectrum, as the line runs past (phone.js sets --pp from
     the line's head: 0 when it reaches the card's top, 1 when it has passed its foot) */
  html.snake[data-v="editorial"][data-theme="light"] .film #jobs .pan.act{margin-bottom:12px}
  html.snake[data-v="editorial"][data-theme="light"] .film #jobs .pan .pan__frame{
    background:#fff;border:0;border-radius:18px;box-shadow:var(--card-shadow);overflow:hidden;
  }
  html.snake[data-v="editorial"][data-theme="light"] .film #jobs .pan:last-of-type .pan__frame{border-bottom:0}
  html.snake[data-v="editorial"][data-theme="light"] .film #jobs .pan .pan__head{left:20px;top:27px;font-size:13px}
  html.snake[data-v="editorial"][data-theme="light"] .film #jobs .pan .pan__body{padding:22px 20px 34px 56px}
  html.snake[data-v="editorial"][data-theme="light"] .film #jobs .pan .pan__ttl{font-size:clamp(30px,10vw,40px);line-height:1;margin:0 0 10px;color:var(--ink)}
  html.snake[data-v="editorial"][data-theme="light"] .film #jobs .pan .pan__line{font-size:16px;color:var(--ink-2)}
  html.snake[data-v="editorial"][data-theme="light"] .film #jobs .pan .pan__frame::before,
  html.snake[data-v="editorial"][data-theme="light"] .film #jobs .pan .pan__frame::after{
    display:block;content:"";position:absolute;left:56px;right:20px;bottom:16px;height:3px;border-radius:3px;pointer-events:none;
  }
  html.snake[data-v="editorial"][data-theme="light"] .film #jobs .pan .pan__frame::before{background:rgba(14,20,32,.08)}
  html.snake[data-v="editorial"][data-theme="light"] .film #jobs .pan .pan__frame::after{
    background:linear-gradient(90deg,#E5322B,#F2912F,#F3CB3C,#5CB246,#0FA3C2,#2E5FA8,#7A3E97);
    transform:scaleX(var(--pp,0));transform-origin:left center;
  }
  html.snake[data-v="editorial"][data-theme="light"] .film #jobs .pan.is-run .pan__head{color:var(--acc-display)}

  /* the ad pictures in the work section: on a narrow phone their headline ran out of its card
     ("Musse", "course") and over the day tag; the pair now scales with the screen */
  html[data-v="editorial"][data-theme="light"] .work .pan--ad .mk-pair{font-size:min(8.5px,1.95vw)}

  /* before and after: closer to their words and to each other */
  html.snake[data-v="editorial"][data-theme="light"] .act--ba--before{padding-top:clamp(84px,12vh,112px)}
  html.snake[data-v="editorial"][data-theme="light"] .act--ba--after{margin-top:-72px}

  /* the plan, once a problem is picked: it sat on the bare ground with its words against the orange
     rule and no edge; now a white card, the rule inside it, the words clear of it */
  html.snake[data-v="editorial"][data-theme="light"] .pick__plan.has-pick{
    box-sizing:border-box;width:100%;background:#fff;border-radius:18px;box-shadow:var(--card-shadow);padding:6px 20px 24px 34px;margin-top:20px;
  }
  html.snake[data-v="editorial"][data-theme="light"] .pick__plan.has-pick .pick__rise{left:16px;top:24px;bottom:24px;width:3px;border-radius:3px}
  html.snake[data-v="editorial"][data-theme="light"] .pick__plan.has-pick .step:first-child{border-top:0}
  html.snake[data-v="editorial"][data-theme="light"] .pick__plan.has-pick .step__what{font-size:19px;line-height:1.35}
  /* picking a problem used to widen the whole picker past the screen: the plan's button ("Start with
     the website") would not wrap, and the grid's one column grew to fit it */
  html.snake[data-v="editorial"] .pick__body{grid-template-columns:minmax(0,1fr)}
  html.snake[data-v="editorial"] .pick__plan .plan__cta{max-width:100%;white-space:normal;text-align:center;line-height:1.25;padding-top:14px;padding-bottom:14px}

  /* the cloud beats held half as long (Karan: "make the feel the growth and taking your
     time section last for 50% less time"): the pinned run 120vh -> 60vh; the desktop's
     beats are halved in site.js (FEEL.L1, L2) */
  html.snake .act--sky{--sky-run:60vh}

  /* the second beat's night layers stay away: version 3 is all day */
  html.snake[data-v="editorial"][data-theme="light"] .sky3__dk{display:none}
  html.snake[data-v="editorial"][data-theme="light"] .act--sky-b .sky3__l:not(.sky3__dk){opacity:1}
}

/* ---- clients: the work we have done (Karan's design, 2026-10-06), between the dashboard film and the
   picker. The headline's second line takes the hero's orange italic; two client cards and a third
   that hands over to the picker right below ---- */
html[data-v="editorial"] .clients{padding:var(--sec-pad) 0}
html[data-v="editorial"] .clients__eyebrow{
  grid-column:1 / -1;display:flex;align-items:center;gap:14px;margin:0 0 clamp(14px,2vh,22px);
  font:600 12px/1 var(--f-text);letter-spacing:.2em;text-transform:uppercase;color:var(--acc-ink);
}
html[data-v="editorial"] .clients__eyebrow::before{content:"";width:34px;height:2px;border-radius:2px;background:var(--acc-display)}
html[data-v="editorial"] .clients .hl--sec .ln{display:block}
html[data-v="editorial"] .clients .hl--sec .ln--2{
  font-size:1.22em;line-height:.95;margin:.04em 0 0 -.03em;
  font-weight:800;font-style:italic;letter-spacing:-.025em;color:var(--acc-display);
}
html[data-v="editorial"] .clients__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,38px);align-items:stretch;
}
html[data-v="editorial"] .cl{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#FBF9F5;border-radius:var(--r-card,20px);
  box-shadow:0 0 0 1px rgba(14,20,32,.06),var(--card-shadow);
}
html[data-v="editorial"] .cl__pic{position:relative;aspect-ratio:16 / 11;overflow:hidden;background:#E4DDD2}
html[data-v="editorial"] .cl__pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
html[data-v="editorial"] .cl:hover .cl__pic img{transform:scale(1.035)}
/* the site's card tab, under the picture */
html[data-v="editorial"] .cl__pic::after{content:"";position:absolute;left:clamp(24px,2.4vw,34px);bottom:-1px;width:46px;height:4px;border-radius:3px 3px 0 0;background:var(--acc-display)}
html[data-v="editorial"] .cl__body{display:flex;flex-direction:column;flex:1;padding:clamp(24px,2.4vw,34px)}
html[data-v="editorial"] .cl__kind{margin:0 0 12px;font:600 12px/1.4 var(--f-text);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
html[data-v="editorial"] .cl__name{margin:0 0 14px;font:800 italic clamp(32px,3vw,46px)/1 var(--f-display);letter-spacing:-.03em;color:var(--ink)}
html[data-v="editorial"] .cl__name--freddys span{font-weight:300;font-style:normal;letter-spacing:-.02em;color:var(--acc-display)}
html[data-v="editorial"] .cl__name--lecookie{font-weight:300;font-style:normal;letter-spacing:-.02em}
html[data-v="editorial"] .cl__name--lecookie em{font-weight:800;font-style:italic;letter-spacing:-.03em;color:var(--acc-display)}
html[data-v="editorial"] .cl__line{margin:0;font:400 clamp(16px,1.2vw,18px)/1.55 var(--f-text);color:var(--ink-2);max-width:34ch}
html[data-v="editorial"] .cl__tags{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0;padding:22px 0 0;list-style:none}
html[data-v="editorial"] .cl__tags li{padding:7px 13px;border-radius:999px;background:rgba(202,74,20,.09);font:600 13px/1 var(--f-text);color:var(--acc-ink)}
/* the third: your place, an open card on the page */
html[data-v="editorial"] .cl--next{
  justify-content:center;padding:clamp(28px,3vw,44px);
  background:transparent;box-shadow:none;border:1.5px dashed rgba(94,72,50,.34);
}
html[data-v="editorial"] .cl__mark{width:72px;height:auto;margin:0 0 clamp(18px,2.4vh,28px)}
html[data-v="editorial"] .cl__next{margin:0 0 18px;font:300 clamp(30px,2.7vw,42px)/1.02 var(--f-display);letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
html[data-v="editorial"] .cl__next span{display:block}
html[data-v="editorial"] .cl__next em{display:block;font-weight:800;font-style:italic;letter-spacing:-.03em;color:var(--acc-display)}
html[data-v="editorial"] .cl--next .cl__line{margin-bottom:clamp(24px,3vh,32px)}
html[data-v="editorial"] .cl__cta{align-self:flex-start}
/* in turn as they come up */
html.js[data-v="editorial"] .clients__grid .cl.rv:nth-child(2){transition-delay:.12s}
html.js[data-v="editorial"] .clients__grid .cl.rv:nth-child(3){transition-delay:.24s}
@media (max-width:1100px){
  html[data-v="editorial"] .clients__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-v="editorial"] .cl--next{grid-column:1 / -1}
  html.js[data-v="editorial"] .clients__grid .cl.rv:nth-child(3){transition-delay:0s}
}
@media (max-width:760px){
  html[data-v="editorial"] .clients{padding:clamp(72px,10vh,96px) 0}
  html[data-v="editorial"] .clients__grid{grid-template-columns:minmax(0,1fr)}
  html.js[data-v="editorial"] .clients__grid .cl.rv:nth-child(2){transition-delay:0s}
}
@media (prefers-reduced-motion:reduce){html[data-v="editorial"] .cl__pic img{transition:none}}
@media (min-width:1101px){
  html[data-v="editorial"] .clients .sec-head .hl,
  html[data-v="editorial"] .clients .sec-head .lede{grid-row:2}
}

/* ---- the picker's plan: one card, picked or not (2026-10-06, Karan: "redesign this nothing picked
   thing, this does not look good"). It was a bare line of text in a box drawn only by its shadow;
   now the card shows the plan's shape before a pick: the three steps as soft placeholders on a
   dotted rail, which the real steps replace ---- */
html[data-v="editorial"][data-theme="light"] .pick__plan{
  box-sizing:border-box;background:#FBF9F5;border-radius:var(--r-card,20px);
  box-shadow:0 0 0 1px rgba(14,20,32,.06),var(--card-shadow);
  padding:clamp(22px,2.6vw,36px) clamp(24px,2.6vw,38px) clamp(22px,2.6vw,36px) clamp(52px,4.6vw,70px);
}
html[data-v="editorial"][data-theme="light"] .pick__rise{left:clamp(26px,2.3vw,34px);top:clamp(30px,3.4vw,44px);bottom:clamp(30px,3.4vw,44px);width:3px;border-radius:3px}
html[data-v="editorial"][data-theme="light"] .pick__plan:not(.has-pick){display:flex;flex-direction:column;justify-content:center;padding-left:clamp(24px,2.6vw,38px)}
html[data-v="editorial"][data-theme="light"] .pick__plan .step:first-child{border-top:0}
html[data-v="editorial"] .plan--empty{max-width:none;align-self:stretch;font:inherit;color:inherit}
html[data-v="editorial"] .plan__lead{
  display:flex;align-items:center;gap:12px;margin:0 0 clamp(18px,2.6vh,28px);
  font:600 12px/1 var(--f-text);letter-spacing:.2em;text-transform:uppercase;color:var(--acc-ink);
}
html[data-v="editorial"] .plan__lead::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--acc-display)}
html[data-v="editorial"] .plan__ghost{position:relative;margin:0;padding:0;list-style:none}
/* the rail the real line will climb: dotted, from each step's node down to the next */
html[data-v="editorial"] .plan__ghost li:not(:last-child)::after{
  content:"";position:absolute;left:6px;top:calc(var(--gpad,0px) + 12px);height:100%;width:0;
  border-left:2px dotted rgba(202,74,20,.35);
}
html[data-v="editorial"] .plan__ghost li + li{--gpad:clamp(14px,2vh,20px)}
html[data-v="editorial"] .plan__ghost li{
  position:relative;display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:18px;row-gap:9px;
  padding:clamp(14px,2vh,20px) 0;border-top:1px solid var(--line);
}
html[data-v="editorial"] .plan__ghost li:first-child{border-top:0;padding-top:0}
html[data-v="editorial"] .plan__ghost li::before{
  content:"";grid-column:1;grid-row:1;align-self:center;width:14px;height:14px;box-sizing:border-box;border-radius:50%;
  background:#FBF9F5;border:2px solid rgba(202,74,20,.45);position:relative;z-index:1;
}
html[data-v="editorial"] .plan__gwhen{grid-column:2;grid-row:1;font:600 12px/1.2 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
html[data-v="editorial"] .plan__ghost i{
  grid-column:2;display:block;height:11px;border-radius:6px;
  background:linear-gradient(90deg,rgba(14,20,32,.06) 0%,rgba(14,20,32,.06) 40%,rgba(14,20,32,.11) 50%,rgba(14,20,32,.06) 60%,rgba(14,20,32,.06) 100%) 0 0 / 300% 100%;
  animation:planGhost 2.8s ease-in-out infinite;
}
html[data-v="editorial"] .plan__ghost li i:last-child{width:58%}
html[data-v="editorial"] .plan__ghost li:nth-child(1) i:nth-of-type(1){width:92%}
html[data-v="editorial"] .plan__ghost li:nth-child(2) i:nth-of-type(1){width:80%}
html[data-v="editorial"] .plan__ghost li:nth-child(3) i:nth-of-type(1){width:88%}
html[data-v="editorial"] .plan__ghost li:nth-child(2) i{animation-delay:.25s}
html[data-v="editorial"] .plan__ghost li:nth-child(3) i{animation-delay:.5s}
@keyframes planGhost{0%{background-position:100% 0}100%{background-position:0 0}}
html[data-v="editorial"] .plan__hint{margin:clamp(18px,2.6vh,26px) 0 0;padding-top:clamp(16px,2.2vh,22px);border-top:1px solid var(--line);font:400 16px/1.5 var(--f-text);color:var(--ink-2);max-width:36ch}
@media (prefers-reduced-motion:reduce){html[data-v="editorial"] .plan__ghost i{animation:none}}
/* on a phone: the same card the picked plan already uses */
@media (max-width:760px){
  html.snake[data-v="editorial"][data-theme="light"] .pick__plan:not(.has-pick){
    width:100%;margin-top:20px;padding:22px 20px 22px 20px;border-radius:18px;background:#FBF9F5;box-shadow:0 0 0 1px rgba(14,20,32,.06),var(--card-shadow);
  }
  html.snake[data-v="editorial"][data-theme="light"] .pick__plan.has-pick{background:#FBF9F5;box-shadow:0 0 0 1px rgba(14,20,32,.06),var(--card-shadow)}
}

/* ---- the dashboard section opens on the question (2026-10-06, Karan: "on top of the current content
   write in big words NO TIME TO BOOK MEETINGS?"), in the hero's orange italic ---- */
html[data-v="editorial"] .dx-dash .hl--sec .ln--ask{
  display:block;margin:0 0 .16em -.03em;font-size:1.18em;line-height:.95;
  font-weight:800;font-style:italic;letter-spacing:-.03em;color:var(--acc-display);text-wrap:balance;
}

/* the plan card wears the options' own edge (2026-10-06, Karan: "add the same border to this section
   as well"): no fill, no shadow, the same hairline and corner as the cards beside it */
html[data-v="editorial"][data-theme="light"] .pick__plan,
html.snake[data-v="editorial"][data-theme="light"] .pick__plan.has-pick,
html.snake[data-v="editorial"][data-theme="light"] .pick__plan:not(.has-pick){
  background:transparent;box-shadow:none;border:1px solid rgba(14,20,32,.16);border-radius:14px;
}
html[data-v="editorial"] .plan__ghost li::before{background:var(--bg)}

/* ---- the client cards open the work (2026-10-07, Karan: "every time a person clicks the cards ... it goes
   to this portfolio page"): the name is the link, stretched over the whole card ---- */
html[data-v="editorial"] .cl__link{color:inherit;text-decoration:none}
html[data-v="editorial"] .cl__link::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit}
html[data-v="editorial"] .cl__link:focus-visible{outline:none}
html[data-v="editorial"] .cl:has(.cl__link:focus-visible){outline:2px solid var(--acc-display);outline-offset:4px}
html[data-v="editorial"] .cl:has(.cl__link){transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
html[data-v="editorial"] .cl:has(.cl__link):hover{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){html[data-v="editorial"] .cl:has(.cl__link):hover{transform:none}}

/* ---- telling people the cards open (2026-10-07, Karan: "add something in this section so that people know to
   click this"): the /work/ page's own "See the work" button at the foot of each card, which wakes on hover, and
   a plain link to all the work under the lede ---- */
html[data-v="editorial"] .cl__foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 16px;margin-top:auto;padding-top:22px}
html[data-v="editorial"] .cl__foot .cl__tags{margin:0;padding:0}
html[data-v="editorial"] .cl__go{display:inline-flex;align-items:center;gap:10px;flex:none;margin-left:auto;font:600 14px/1 var(--f-text);color:var(--ink);white-space:nowrap}
html[data-v="editorial"] .cl__go i{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;
  transition:transform .5s var(--ease-out),background-color .3s var(--ease-out);
}
html[data-v="editorial"] .cl:hover .cl__go i,
html[data-v="editorial"] .cl:has(.cl__link:focus-visible) .cl__go i{transform:translateX(4px);background:var(--v3-cta,#CA4A14)}
html[data-v="editorial"] .clients__all{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font:600 15px/1.3 var(--f-text);color:var(--acc-ink);text-decoration:none;
  border-bottom:1.5px solid currentColor;padding-bottom:3px;
}
html[data-v="editorial"] .clients__all svg{transition:transform .4s var(--ease-out)}
html[data-v="editorial"] .clients__all:hover svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
  html[data-v="editorial"] .cl__go i,html[data-v="editorial"] .clients__all svg{transition:none}
}

/* ---- louder (2026-10-07, Karan: "make it more visible ... every person who comes to my website [should] know
   that this is clickable"): on the homepage's client cards the "See the work" line becomes a full-width dark
   pill (orange on hover, the site's action colour), every photo wears a "View project" tag that shows without a
   hover (phones have none), the arrows nudge twice as the cards come up, and "See all our work" is a real pill.
   Scoped to .clients so the /work/ cards keep their own ---- */
html[data-v="editorial"] .clients .cl__foot{flex-direction:column;align-items:stretch;gap:18px}
html[data-v="editorial"] .clients .cl__go{
  justify-content:space-between;width:100%;min-height:56px;margin:0;padding:0 8px 0 24px;border-radius:999px;
  background:var(--ink);color:#fff;font:600 15px/1 var(--f-text);letter-spacing:.01em;
  box-shadow:0 10px 24px -14px rgba(14,20,32,.7);transition:background-color .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
html[data-v="editorial"] .clients .cl__go i{background:#fff;color:var(--ink)}
html[data-v="editorial"] .clients .cl:hover .cl__go,
html[data-v="editorial"] .clients .cl:has(.cl__link:focus-visible) .cl__go{background:var(--v3-cta,#CA4A14);box-shadow:0 12px 26px -12px rgba(160,52,10,.75)}
html[data-v="editorial"] .clients .cl:hover .cl__go i,
html[data-v="editorial"] .clients .cl:has(.cl__link:focus-visible) .cl__go i{background:#fff;color:var(--v3-cta,#CA4A14);transform:translateX(3px)}

html[data-v="editorial"] .cl__badge{
  position:absolute;top:16px;right:16px;z-index:1;display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px 9px 15px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);
  font:600 13px/1 var(--f-text);box-shadow:0 6px 18px -8px rgba(14,20,32,.45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background-color .3s var(--ease-out),color .3s var(--ease-out),transform .5s var(--ease-out);
}
html[data-v="editorial"] .clients .cl:hover .cl__badge{background:var(--v3-cta,#CA4A14);color:#fff;transform:translateY(-2px)}

/* the nudge: twice, once the card has come up */
@keyframes clnudge{0%,100%{transform:none}25%{transform:translateX(5px)}50%{transform:none}75%{transform:translateX(5px)}}
@media (prefers-reduced-motion:no-preference){
  html.js[data-v="editorial"] .clients .cl.rv.in .cl__go i{animation:clnudge 1.1s var(--ease-out) .9s 1 both}
  html.js[data-v="editorial"] .clients .cl.rv.in:nth-child(2) .cl__go i{animation-delay:1.1s}
  html[data-v="editorial"] .clients .cl:hover .cl__go i{animation:none}
}

html[data-v="editorial"] .clients__all{
  display:inline-flex;align-items:center;gap:10px;margin-top:20px;min-height:48px;padding:0 20px 0 22px;
  border:1.5px solid var(--ink);border-radius:999px;color:var(--ink);font:600 15px/1 var(--f-text);
  transition:background-color .3s var(--ease-out),color .3s var(--ease-out);
}
html[data-v="editorial"] .clients__all:hover{background:var(--ink);color:#fff}
@media (prefers-reduced-motion:reduce){
  html[data-v="editorial"] .cl__badge,html[data-v="editorial"] .clients .cl__go{transition:none}
}