/* ── case-study.css ───────────────────────────────────────────────────────
   Layout and motion for /work/<client>. Loads on top of yuno-base.css, which
   supplies the tokens, chrome and reveal primitives.

   Per-study colour comes from the .cs- scope below: a study sets --acc and
   --ground on <body> and the whole page follows. Nothing here is Souito
   specific except the variables in the page's own <style> block.
   ───────────────────────────────────────────────────────────────────── */

/* Souito's faces. Gang of Three carries the headings, Satoshi carries
   everything else — the two the brand actually uses. Both are scoped to
   body.cs below, so the homepage keeps Batica Sans untouched. */
@font-face{
  font-family:"Gang of Three";
  src:url("/fonts/GangOfThree-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
/* Gang of Three ships emdash, endash and periodcentered as EMPTY glyphs:
   present in the cmap, carrying a full advance width, drawing nothing. The
   browser uses them quite happily and you get an em of blank space where the
   dash should be — which is what broke "SOUITO — the system at a glance."

   This second @font-face under the SAME family name hands just those three
   codepoints to Satoshi, Souito's own supporting face. It must be declared
   after the Gang of Three face: where unicode-ranges overlap, the last
   matching face wins. Bold, so the bar carries next to the display caps. */
@font-face{
  font-family:"Gang of Three";
  src:url("/fonts/Satoshi-Bold.woff2") format("woff2");
  unicode-range:U+2013, U+2014, U+00B7;
  font-weight:400;font-style:normal;font-display:swap;
}

@font-face{font-family:"Satoshi";src:url("/fonts/Satoshi-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("/fonts/Satoshi-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("/fonts/Satoshi-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("/fonts/Satoshi-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  --acc:#FF002A;            /* the study's signal colour */
  --acc-master:#FE0000;     /* source-artwork value, shown but never used as UI */
  --ground:#050505;
  --cs-maxw:1180px;
}

/* ---- page ground -------------------------------------------------------- */
/* The homepage substrate is a grey radial wash. A case study sits on the
   client's own ground instead, so the two never quite look like one page. */
/* The ground goes on <body>, not only on .bg-texture: .bg-texture is fixed, so
   it covers one viewport at a time and anything that captures or prints the
   full page gets white underneath it. body paints the canvas for the whole
   document height. */
body.cs{
  background:var(--ground);
  /* Gang of Three is a single weight and the base sets font-synthesis:none, so
     nothing here asks it for a bold it does not have — the accent word is told
     apart by colour, not weight. */
  --font-h:"Gang of Three","Batica Sans",-apple-system,sans-serif;
  --font-d:"Satoshi","Batica Sans",-apple-system,sans-serif;
  --font-b:"Satoshi","Batica Sans",-apple-system,sans-serif;
}
body.cs .bg-texture{
  background-color:var(--ground);
  background-image:radial-gradient(70% 55% at 50% 0%,rgba(255,0,42,.07),transparent 62%);
}

/* ---- section rhythm ----------------------------------------------------- */
/* Every numbered section is: a mono rule carrying its number, a heading, an
   optional standfirst, then its content. Matching the homepage's .seclabel
   cadence but with the number in the client's signal colour. */
.cs-sec{padding:clamp(86px,12vw,170px) 0;position:relative}
.cs-sec > .wrap{max-width:var(--cs-maxw)}

.cs-label{display:flex;align-items:baseline;gap:16px;margin-bottom:30px}
.cs-label .n{font-family:var(--font-m);font-size:.7rem;font-weight:500;letter-spacing:.2em;color:var(--acc)}
.cs-label .t{font-family:var(--font-m);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-faint)}
.cs-label .bar{flex:1;height:1px;background:var(--rule);transform:translateY(-3px)}
/* Whose work this section documents. Sits on the label line, quiet but present. */
.cs-label .by{font-family:var(--font-m);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#6E6E6E}
.cs-label .by b{font-weight:500;color:var(--bone-faint)}

.cs-h{font-family:var(--font-h);font-weight:330;line-height:1.12;letter-spacing:-.022em;
  font-size:clamp(2rem,4.6vw,3.6rem);max-width:17ch}
.cs-h .em{font-weight:600;color:var(--acc)}
.cs-sub{margin-top:20px;max-width:56ch;color:var(--bone-dim);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.62}

/* A block of the brand's own words, set as evidence rather than decoration. */
.cs-quote{margin-top:44px;padding-left:26px;border-left:2px solid var(--acc);max-width:58ch}
.cs-quote p{font-family:var(--font-h);font-weight:330;font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.46;color:var(--bone)}
.cs-quote b{font-weight:600;color:var(--acc)}
.cs-quote cite{display:block;margin-top:16px;font-family:var(--font-m);font-size:.64rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint);font-style:normal}

/* ---- hero --------------------------------------------------------------- */
.cs-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(88px,11vh,132px) 0 clamp(34px,5vh,54px);position:relative}
.cs-hero > .wrap{max-width:var(--cs-maxw);width:100%}
.cs-hero-mark{width:clamp(150px,21vw,260px);color:var(--acc);margin:0 auto clamp(30px,4vw,44px);display:block}
.cs-hero-word{width:clamp(250px,42vw,520px);color:var(--bone);margin:0 auto;display:block}
.cs-hero-tag{margin:34px auto 0;text-align:center;font-family:var(--font-h);font-weight:330;
  font-size:clamp(1.05rem,2.1vw,1.6rem);color:var(--bone);letter-spacing:-.01em}
.cs-meta{margin:46px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;
  font-family:var(--font-m);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint)}
.cs-meta span{display:inline-flex;align-items:center;gap:22px}
.cs-meta span::after{content:"";width:3px;height:3px;border-radius:50%;background:var(--rule-gold)}
.cs-meta span:last-child::after{display:none}
.cs-meta a{color:var(--bone-dim);border-bottom:1px solid var(--rule-gold)}
.cs-meta a:hover{color:var(--acc);border-color:var(--acc)}

/* ---- the mark, and its five threads ------------------------------------- */
/* Five paths, one per founder. The draw-on clips each filled thread with a
   stroked centre-line whose dashoffset animates — the loader's technique. */
.mark-svg .th{transition:fill .28s var(--ease)}
.mark-svg.is-lit .th{fill:var(--bone-faint)}
.mark-svg.is-lit .th.on{fill:var(--acc)}

/* ---- 02 / the idea: SOU + ITO ------------------------------------------- */
.idea{display:flex;align-items:center;justify-content:center;gap:0;margin:clamp(50px,8vw,90px) 0 0;
  font-family:var(--font-h);font-weight:330;font-size:clamp(2.6rem,9vw,7rem);letter-spacing:-.03em;line-height:1}
.idea .half{display:block;position:relative;color:var(--bone)}
.idea .half .gloss{position:absolute;left:50%;top:calc(100% + 18px);transform:translateX(-50%);
  white-space:nowrap;font-family:var(--font-m);font-size:.62rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--acc);opacity:0}
.idea-note{margin:clamp(76px,10vw,120px) auto 0;max-width:54ch;text-align:center;color:var(--bone-dim);line-height:1.62}

/* ---- 03 / construction blueprint ---------------------------------------- */
/* The rule is a banner ABOVE the diagram, and the callouts radiate from the
   mark on their own leader lines. Nothing floats over anything else. */
.bp-rule{display:flex;gap:18px;align-items:flex-start;padding:22px 26px;margin-bottom:clamp(46px,6vw,74px);
  border:1px solid var(--rule);border-left:2px solid var(--acc);background:rgba(255,255,255,.015)}
.bp-rule .k{font-family:var(--font-m);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc);flex:none;padding-top:3px}
.bp-rule p{color:var(--bone-dim);max-width:62ch;line-height:1.6}

.bp{display:grid;grid-template-columns:1fr minmax(240px,300px);gap:clamp(34px,5vw,68px);align-items:center}
.bp-stage{position:relative;aspect-ratio:1;display:grid;place-items:center}
/* drafting grid + clear-space ring, drawn not imaged */
.bp-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:calc(100%/12) calc(100%/12);
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.bp-clear{position:absolute;width:86%;aspect-ratio:1;border-radius:50%;border:1px dashed var(--rule-gold);opacity:.75}
.bp-mark{position:relative;width:66%;color:var(--bone)}

.bp-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.bp-list li{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--rule);cursor:default}
.bp-list li:first-child{border-top:1px solid var(--rule)}
.bp-list .i{font-family:var(--font-m);font-size:.66rem;letter-spacing:.12em;color:var(--acc);width:2.2em;flex:none}
.bp-list .l{font-size:.92rem;color:var(--bone-dim);transition:color .22s var(--ease)}
.bp-list .lead-line{flex:1;height:1px;background:var(--rule);transition:background .22s var(--ease)}
.bp-list li:hover .l,.bp-list li:focus-within .l{color:var(--bone)}
.bp-list li:hover .lead-line,.bp-list li:focus-within .lead-line{background:var(--acc)}
.bp-list li:focus-visible{outline:1px solid var(--acc);outline-offset:4px}
/* Production steps: a title line with its description underneath, so the row
   tops out on the number instead of centring on a single label. */
.bp-list li.step{align-items:flex-start}
.bp-list li.step .i{padding-top:.3em}
.bp-list li.step .l{color:var(--bone)}
.bp-list .d{display:block;margin-top:6px;font-size:.84rem;line-height:1.55;color:var(--bone-faint)}
.bp-note{margin-top:26px;font-size:.88rem;color:var(--bone-faint);line-height:1.6}

/* ---- 04 / wordmark ------------------------------------------------------ */
.wm-stage{padding:clamp(44px,7vw,84px) 0;display:grid;place-items:center;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.wm-stage svg{width:min(88%,760px);color:var(--bone)}
.wm-tri{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:clamp(34px,4vw,54px);background:var(--rule)}
.wm-tri figure{padding:clamp(28px,4vw,50px) 20px;display:grid;place-items:center;gap:22px}
.wm-tri figure svg{width:100%;max-width:230px}
.wm-tri figcaption{font-family:var(--font-m);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase}
.wm-on-light{background:#F7F7F5;color:#050505}
.wm-on-light figcaption{color:#5A5A5A}
.wm-on-dark{background:#050505;color:#F7F7F5}
.wm-on-dark figcaption{color:var(--bone-faint)}
.wm-on-red{background:var(--acc);color:#050505}
.wm-on-red figcaption{color:#3A0008}

/* ---- 05 / colour -------------------------------------------------------- */
.sw{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.sw button{appearance:none;border:0;text-align:left;padding:0;background:var(--ground);cursor:pointer;
  font:inherit;color:inherit;display:block}
.sw .chip{height:clamp(110px,15vw,180px);display:block;position:relative}
.sw .meta{display:block;padding:20px clamp(18px,1.8vw,26px) 24px}   /* a span: block, or its padding never applies */
.sw .meta>span{display:block}
.sw .nm{font-size:.95rem;color:var(--bone)}
.sw .hex{margin-top:6px;font-family:var(--font-m);font-size:.68rem;letter-spacing:.1em;color:var(--bone-faint)}
.sw .role{margin-top:12px;font-family:var(--font-m);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:#6E6E6E}
.sw button:hover .hex,.sw button:focus-visible .hex{color:var(--acc)}
.sw button:focus-visible{outline:1px solid var(--acc);outline-offset:-1px}
.sw .chip::after{content:"Copied";position:absolute;inset:auto 12px 12px auto;font-family:var(--font-m);
  font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:#050505;background:#F7F7F5;
  padding:4px 8px;opacity:0;transition:opacity .2s}
.sw button.copied .chip::after{opacity:1}

.apply{margin-top:clamp(40px,5vw,64px);display:flex;flex-direction:column;gap:1px;background:var(--rule)}
.apply figure{padding:clamp(46px,7vw,90px) 30px;display:grid;place-items:center;gap:26px}
.apply figure svg{width:clamp(74px,9vw,116px)}
.apply figcaption{font-family:var(--font-m);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase}

/* ---- 06 / typography ---------------------------------------------------- */
.ty-wrap{font-family:"Satoshi",var(--font-b)}
.ty-ladder{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.ty-ladder div{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:clamp(16px,2.4vw,28px) 0;border-bottom:1px solid var(--rule)}
.ty-ladder .w{font-family:"Satoshi",var(--font-b);font-size:clamp(1.8rem,5vw,3.4rem);line-height:1;color:var(--bone);letter-spacing:-.02em}
.ty-ladder .n{font-family:var(--font-m);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint);flex:none}
.ty-scale{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);margin-top:clamp(34px,4vw,54px);border:1px solid var(--rule)}
.ty-scale div{background:var(--ground);padding:26px 20px 24px;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(150px,14vw,190px)}
.ty-scale .aa{font-family:"Satoshi",var(--font-b);color:var(--bone);line-height:1}
.ty-scale .k{display:block;margin-top:14px;font-family:var(--font-m);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:#6E6E6E}
.ty-missing{margin-top:26px;font-family:var(--font-m);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc);border:1px dashed var(--acc);padding:12px 16px;display:none}
body.no-satoshi .ty-missing{display:block}

/* ---- 07 / graphic language ---------------------------------------------- */
.gl-field{position:relative;min-height:clamp(320px,46vw,560px);display:grid;place-items:center;
  background:#0A0203 center/cover no-repeat;border:1px solid var(--rule)}
.gl-field img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.gl-field .over{position:relative;text-align:center;padding:30px}
.gl-field .over svg{width:clamp(80px,11vw,140px);color:var(--acc);filter:drop-shadow(0 0 40px rgba(255,0,42,.4))}
.gl-pats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);margin-top:1px}
.gl-pats figure{position:relative;aspect-ratio:3/4;overflow:hidden}
.gl-pats img{width:100%;height:100%;object-fit:cover;display:block}
.gl-pats figure img{height:100%}
.gl-pats figcaption{position:absolute;left:0;bottom:0;padding:9px 12px;background:#050505;
  font-family:var(--font-m);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint)}

/* ---- 08 / product ------------------------------------------------------- */
.pg{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.pg figure{position:relative;background:var(--ground)}
.pg img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/4}
.pg figcaption{position:absolute;left:0;bottom:0;padding:9px 12px;background:#050505;
  font-family:var(--font-m);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint)}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--rule);
  margin-top:1px;border:1px solid var(--rule);border-top:0}
.specs div{background:var(--ground);padding:24px 20px}
.specs dt{font-family:var(--font-m);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:#6E6E6E}
.specs dd{margin-top:9px;font-size:1rem;color:var(--bone)}

/* ---- 09 / touchpoints: the one red flood -------------------------------- */
/* White on #FF002A is 3.70:1 — large text only. Nothing small is white here;
   captions and body are #050505, which is 5.13:1. See the spec, §8. */
.flood{background:var(--acc);color:#050505;padding:clamp(86px,12vw,170px) 0}
.flood .cs-label .n{color:#050505}
.flood .cs-label .t{color:#4A000C}
.flood .cs-label .by{color:#5E0010}
.flood .cs-label .by b{color:#2E0007}
.flood .cs-label .bar{background:rgba(5,5,5,.28)}
.flood .cs-h{color:#050505}
/* .em is the accent colour, which on the accent ground is invisible. White is
   3.70:1 on #FF002A — under AA for body, fine for display sizes, which is the
   only place .em appears. */
.flood .cs-h .em{color:#F7F7F5}
.flood .cs-sub{color:#2E0007}
.flood .cs-quote{border-left-color:#050505}
.flood .cs-quote p{color:#050505}
.flood .cs-quote b{color:#F7F7F5}          /* large enough to clear AA on red */
.flood .cs-quote cite{color:#5E0010}
.tp{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,22px);margin-bottom:clamp(40px,5vw,64px)}
.tp figure{position:relative;background:#050505}
/* height:auto is load-bearing. These <img> carry width/height attributes to
   reserve layout space, and without height:auto the attribute becomes the used
   height — aspect-ratio only sizes a box when one axis is auto, so it was being
   ignored and the photos rendered metres tall. Each keeps its own shape: the
   two tags are 3:2, the two cards 9:16, so each grid row matches anyway and
   nothing has to be cropped. */
.tp img{width:100%;height:auto;display:block}
.tp figcaption{position:absolute;left:0;bottom:0;padding:9px 12px;background:var(--acc);
  font-family:var(--font-m);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:#050505}

/* ---- 10 / launch -------------------------------------------------------- */
.posters{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.posters figure{position:relative;background:var(--ground)}
.posters img{width:100%;height:auto;display:block;aspect-ratio:5/6;object-fit:cover}
.posters figcaption{position:absolute;left:0;bottom:0;padding:9px 12px;background:#050505;
  font-family:var(--font-m);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint)}
.channels{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(34px,4vw,50px)}
.channels a{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border:1px solid var(--rule);
  font-family:var(--font-m);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}
.channels a:hover{border-color:var(--acc);color:var(--acc)}

/* ---- 11 / what we did --------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.split section{background:var(--ground);padding:clamp(28px,3.6vw,44px)}
.split h3{font-family:var(--font-m);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc);font-weight:500;margin-bottom:24px}
.split.credit h3{color:var(--bone-faint)}
.split ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.split li{padding:14px 0;border-bottom:1px solid var(--rule);color:var(--bone-dim);font-size:.98rem}
.split li:last-child{border-bottom:0}
.split li b{display:block;color:var(--bone);font-weight:500;margin-bottom:4px}
.split p{color:var(--bone-dim);line-height:1.64}
.split p a{color:var(--bone);border-bottom:1px solid var(--acc)}
.split p a:hover{color:var(--acc)}

.thread-close{margin-top:clamp(60px,8vw,100px);padding-top:clamp(44px,5vw,64px);border-top:1px solid var(--rule)}
.thread-close p{font-family:var(--font-h);font-weight:330;font-size:clamp(1.3rem,2.7vw,2.1rem);
  line-height:1.38;letter-spacing:-.015em;max-width:24ch;color:var(--bone)}
.thread-close .em{color:var(--acc);font-weight:600}

/* ---- back to work ------------------------------------------------------- */
.cs-back{display:inline-flex;align-items:center;gap:11px;margin-top:clamp(40px,5vw,60px);
  font-family:var(--font-m);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}
.cs-back svg{width:13px;height:13px}
.cs-back:hover{color:var(--acc)}

/* ---- responsive --------------------------------------------------------- */
@media(max-width:900px){
  /* Blueprint: mark above, labels below, leader lines dropped — a leader line
     that doesn't reach anything is just a dash. */
  .bp{grid-template-columns:1fr;gap:34px}
  .bp-stage{max-width:420px;margin:0 auto;width:100%}
  .bp-list .lead-line{display:none}
  .wm-tri,.ty-scale,.gl-pats,.pg,.posters{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .sw{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .wm-tri,.ty-scale,.gl-pats,.pg,.posters,.tp{grid-template-columns:1fr}
  .cs-meta{gap:8px 16px}
  .cs-meta span::after{display:none}
  .ty-ladder div{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ---- reduced motion ----------------------------------------------------- */
/* Everything the script animates has to have a sane resting state here, or a
   reduced-motion reader gets a page of invisible sections. */
@media(prefers-reduced-motion:reduce){
  .idea .half .gloss{opacity:1}
  .mark-svg .th{clip-path:none !important}
}

/* ---- 02 / logo system: primary symbol beside wordmark ------------------- */
.sys{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.sys figure{background:var(--ground);padding:clamp(40px,6vw,80px) 26px;display:grid;place-items:center;gap:30px;min-height:clamp(220px,26vw,340px)}
.sys figure > svg{width:100%;max-width:200px;color:var(--bone)}
.sys figure.wide > svg{max-width:330px}
.sys figcaption{text-align:center}
.sys .k{display:block;font-family:var(--font-m);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.sys .v{display:block;margin-top:9px;font-family:var(--font-m);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:#6E6E6E}

/* a note that closes a section, in the deck's own voice */
.cs-rule{margin-top:clamp(34px,4vw,54px);padding:22px 26px;border:1px solid var(--rule);border-left:2px solid var(--acc);
  display:flex;gap:18px;align-items:flex-start;background:rgba(255,255,255,.015)}
.cs-rule .k{font-family:var(--font-m);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);flex:none;padding-top:3px}
.cs-rule p{color:var(--bone-dim);max-width:62ch;line-height:1.6}

/* ---- 07 / usage: do and don't ------------------------------------------ */
.usage{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.usage section{background:var(--ground);padding:clamp(28px,3.6vw,46px);display:flex;flex-direction:column;gap:26px}
.usage h3{font-family:var(--font-m);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.usage .do h3{color:var(--acc)}
.usage .dont h3{color:var(--bone-faint)}
.usage .demo{display:grid;place-items:center;min-height:clamp(150px,18vw,230px);position:relative}
.usage .demo svg{width:clamp(80px,10vw,124px);color:var(--bone)}
/* the wrong one shows itself being wrong, then gets struck through */
.usage .dont .demo svg{animation:abuse 5s var(--ease) infinite}
.usage .dont .demo::after{content:"";position:absolute;left:12%;right:12%;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;animation:strike 5s var(--ease) infinite}
@keyframes abuse{
  0%,12%{transform:none;filter:none}
  28%{transform:scaleX(1.5) scaleY(.75)}
  46%{transform:scaleY(1.45) scaleX(.8)}
  64%{transform:skewX(18deg)}
  82%,100%{transform:none;filter:drop-shadow(6px 7px 0 rgba(255,0,42,.55))}
}
@keyframes strike{0%,72%{transform:scaleX(0)}88%,100%{transform:scaleX(1)}}
.usage .cap{font-family:var(--font-m);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:#6E6E6E}
.usage p{color:var(--bone-dim);line-height:1.6}

/* ---- 08 / website direction: a live mock, not a screenshot -------------- */
.wd{border:1px solid var(--rule);background:#0A0A0A;overflow:hidden}
.wd-bar{display:flex;align-items:center;justify-content:space-between;padding:20px clamp(20px,3vw,34px);border-bottom:1px solid var(--rule)}
.wd-bar svg{width:30px;color:var(--acc)}
.wd-nav{display:flex;gap:clamp(18px,3vw,38px);font-family:"Satoshi",var(--font-b);font-weight:500;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}
.wd-hero{padding:clamp(56px,10vw,130px) clamp(20px,3vw,34px);display:grid;place-items:center;text-align:center;gap:26px;position:relative}
.wd-hero .big{font-family:var(--font-h);font-size:clamp(1.5rem,4.4vw,3.2rem);line-height:1.08;letter-spacing:-.02em;color:var(--bone)}
.wd-hero .o{position:absolute;width:clamp(150px,24vw,300px);color:var(--acc);opacity:.13}

/* ---- 10 / identity snapshot -------------------------------------------- */
.snap{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.snap li{display:grid;grid-template-columns:3.2em 1fr;gap:clamp(14px,2.4vw,32px);align-items:baseline;
  padding:clamp(18px,2.4vw,26px) 0;border-bottom:1px solid var(--rule)}
.snap .i{font-family:var(--font-m);font-size:.66rem;letter-spacing:.14em;color:var(--acc)}
.snap .t{font-family:var(--font-m);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone)}
.snap .d{display:block;margin-top:8px;font-family:"Satoshi",var(--font-b);letter-spacing:0;text-transform:none;color:var(--bone-dim);font-size:.98rem}
.strap{margin-top:clamp(44px,5vw,70px);text-align:center;font-family:var(--font-m);font-size:clamp(.6rem,1.3vw,.78rem);
  letter-spacing:.3em;text-transform:uppercase;color:var(--bone-faint)}

/* ---- touchpoint groups -------------------------------------------------- */
.tp-group{font-family:var(--font-m);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:#2E0007;margin:clamp(34px,4vw,54px) 0 18px;display:flex;align-items:center;gap:16px}
.tp-group::after{content:"";flex:1;height:1px;background:rgba(5,5,5,.28)}
.tp-group:first-of-type{margin-top:0}

@media(max-width:900px){ .sys,.usage{grid-template-columns:1fr} }

/* ---- 05 / display specimen -------------------------------------------- */
/* Gang of Three ships as a single weight, so it gets a display specimen
   rather than a weight ladder — the ladder below stays Satoshi, whose
   weights are the ones the deck documents. */
.ty-split{display:flex;align-items:baseline;gap:16px;margin:0 0 22px}
.ty-split .k{font-family:var(--font-m);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);flex:none}
.ty-split .v{font-family:var(--font-m);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#6E6E6E;flex:none}
.ty-split .bar{flex:1;height:1px;background:var(--rule);transform:translateY(-3px)}
.got-spec{font-family:"Gang of Three",var(--font-h);font-size:clamp(3rem,13vw,9rem);line-height:.96;
  letter-spacing:.01em;color:var(--bone);word-break:break-word}
.got-chars{font-family:"Gang of Three",var(--font-h);font-size:clamp(.9rem,2.4vw,1.7rem);line-height:1.5;
  color:var(--bone-dim);margin-top:26px;word-break:break-word}
.ty-display{padding-bottom:clamp(34px,4vw,54px)}

/* ══ THE PROJECTION BOOTH ═══════════════════════════════════════════════
   Motion styles. Every resting state here is the finished state, so a
   reader with reduced motion — or with JS off — gets the whole page. */

/* ---- light leak: red sweeps across before the copy is readable ---------
   --leak is scrubbed 0→1 as the section arrives. It defaults to 1 so the
   section is simply red with no JS. The copy inside is #050505, so the
   sweep must finish before you are reading: black type must never be
   caught on the black half. */
.flood{background:#050505;position:relative;overflow:hidden}
.flood::before{content:"";position:absolute;inset:0;z-index:0;
  /* A straight (90deg) gradient, so the black fade on the left edge is the same
     width from the top of the section to the bottom. At the old 96deg the fade
     leaned with the section's height and only showed on its upper part. */
  background:linear-gradient(90deg,
    rgba(255,0,42,0) 0%, rgba(255,0,42,.5) 8%, var(--acc) 21%, var(--acc) 100%);
  transform:translateX(calc((1 - var(--leak,1)) * 112%));
  will-change:transform}
.flood > .wrap{position:relative;z-index:1}

/* ---- the spine becomes a film strip ------------------------------------
   Scoped to body.cs — the homepage's spine is a drafting rule and stays one. */
body.cs .spine{width:11px;
  background:linear-gradient(var(--rule),var(--rule)) center/1px 100% no-repeat}
body.cs .spine-fill{left:5px;right:5px;inset-inline:5px}
body.cs .spine::before{content:"";position:absolute;inset:0;border-radius:2px;
  background-image:repeating-linear-gradient(180deg,
    var(--rule-gold) 0 7px, transparent 7px 27px);
  background-size:11px 27px;
  background-position:0 calc(var(--perf,0) * -2700px);
  opacity:.5;
  -webkit-mask-image:linear-gradient(transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(transparent,#000 4%,#000 96%,transparent)}

/* ---- gate weave and grain ----------------------------------------------
   Projection never sits perfectly still, and that tiny instability is most
   of why film feels alive. Applied ONLY to the fixed .bg-texture layer: a
   transform or filter on <main> would make it a containing block and break
   every position:fixed child inside it. */
@keyframes gate-weave{
  0%,100%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(0,-.6px,0)}
  50%{transform:translate3d(0,.45px,0)}
  75%{transform:translate3d(0,-.25px,0)}
}
@keyframes grain-shift{
  0%{background-position:0 0}      20%{background-position:-13px 8px}
  40%{background-position:9px -14px} 60%{background-position:-7px -10px}
  80%{background-position:14px 6px} 100%{background-position:0 0}
}
body.cs .bg-texture::after{opacity:.07;
  animation:grain-shift 1.05s steps(1) infinite, gate-weave 5.5s ease-in-out infinite}

/* ---- resting states ----------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  body.cs .bg-texture::after{animation:none}
  .flood::before{transform:none}
  .usage .dont .demo svg{animation:none}
  .usage .dont .demo::after{animation:none;transform:scaleX(1)}
  .cs-hero-mark{opacity:1 !important;visibility:visible !important}
}

/* ══ THE LEADER ═════════════════════════════════════════════════════════
   Full-screen takeover: two black gate halves, a projector beam on them,
   and the leader itself. Removes itself when the gate opens. */
html.sldr-on, html.sldr-on body{overflow:hidden}
.sldr{position:fixed;inset:0;z-index:300;pointer-events:none;overflow:hidden}
.sldr-half{position:absolute;top:-2px;bottom:-2px;width:50.6%;background:#050505;
  will-change:transform}
.sldr-half.l{left:0}
.sldr-half.r{right:0}
/* the lamp, sitting on the gate */
.sldr-beam{position:absolute;inset:0;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(46% 40% at 50% 44%,
    rgba(255,92,104,.36), rgba(255,0,42,.13) 44%, transparent 74%)}
.sldr-stage{position:absolute;left:50%;top:50%;width:min(66vw,520px);aspect-ratio:1;
  transform:translate(-50%,-50%);color:var(--acc);will-change:transform,opacity}
.sldr-leader{width:100%;height:100%;display:block;overflow:visible}
.sldr-guides circle,.sldr-guides line{stroke:rgba(247,247,245,.24);stroke-width:1.8;
  fill:none;vector-effect:non-scaling-stroke}
.sldr-sweep line{stroke:var(--acc);stroke-width:3;vector-effect:non-scaling-stroke}
.sldr-threads .tl{opacity:0}
/* the count, in the brand's own display face */
.sldr-num{position:absolute;inset:0;display:grid;place-items:center;
  font-family:"Gang of Three",var(--font-h);font-size:min(26vw,12rem);line-height:1;
  color:#F7F7F5;opacity:0;pointer-events:none}
.sldr-word{position:absolute;left:50%;top:calc(50% + min(23vw,182px));
  transform:translate(-50%,14px);width:min(44vw,340px);opacity:0;color:#F7F7F5;
  will-change:transform,opacity}
.sldr-word svg{width:100%;display:block}

@media(prefers-reduced-motion:reduce){ .sldr{display:none} }

/* ---- back to Yuno -------------------------------------------------------
   A case study is a dead end without one. The lockup links home too, but an
   explicit labelled route out is what people actually look for. */
.nav-back{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  color:var(--bone-dim)}
.nav-back svg{width:15px;height:15px;flex:none;transition:transform .3s var(--ease)}
.nav-back:hover{color:var(--gold)}
.nav-back:hover svg{transform:translateX(-3px)}

/* The site chrome is shared with the homepage and must match it exactly, so
   the header and footer keep the homepage's type rather than the case study's. */
#hdr,footer#contact{
  --font-h:"Batica Sans","SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-d:"Batica Sans","SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-b:"Batica Sans","Plus Jakarta Sans",-apple-system,system-ui,sans-serif;
  font-family:var(--font-b);
}

/* The one credit on the page (Case study block). */
.cs-credit{color:var(--bone);border-bottom:1px solid var(--rule-gold);transition:border-color .3s var(--ease)}
.cs-credit:hover{border-bottom-color:var(--acc)}
