/* ═══════════════════════════════════════════════════════════
   LEA KRIKHELI — CASE STUDY DESIGN SYSTEM
   One stylesheet for every case study. Source of truth: the
   published Aydone case study (aydone-case-study.netlify.app).

   Rule: the portfolio chrome (type, colour, spacing, sections)
   never changes between projects. Each product's own brand
   colours live only inside .canvas / device frames.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════ TOKENS ═══════════ */
:root{
  color-scheme: light;
  --bg:#ffffff; --surface:#f4f4f5; --surface-elevated:#ffffff;
  --text:#0e1011; --text-2:rgba(14,16,17,.6); --text-3:rgba(14,16,17,.6);
  --border:#e5e5e8; --border-strong:#d0d0d6;
  --accent:#4f5bd5; --accent-hover:#3d48b8; --accent-soft:#eef0fd; --accent-ink:#ffffff;
  --success:#1f7a4d; --success-soft:#e5f5ec;
  --warning:#8a5200; --warning-soft:#fff3dd;
  --error:#b42318;   --error-soft:#fdecea;
  --info:#2f55d4;    --info-soft:#e9eeff;
  --shadow:0 1px 2px rgba(20,20,40,.05), 0 8px 24px rgba(20,20,40,.06);
  --canvas:#eceef2;            /* presentation surface behind screens */
  --band:#16161a; --band-text:#f4f4f6; --band-muted:#8d8d97; --band-line:#2e2e35;

  --font:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Type scale mirrors the Framer portfolio text styles:
     DM Sans, weight 400, letter-spacing 0, sentence case.
     H1 40/36/32 · H4 24/22/20 · H5 18 · body 16/1.6 · small 14 · caption 12 */
  --fs-display:40px;   /* portfolio H1 */
  --fs-h2:32px;
  --fs-h3:24px;        /* portfolio H4 */
  --fs-h5:18px;        /* portfolio H5 */
  --fs-lede:18px;
  --fs-body:16px; --fs-small:14px; --fs-caption:12px; --fs-label:14px;
  --w-regular:400; --w-medium:500;
  --s-1:8px; --s-2:12px; --s-3:16px; --s-4:24px; --s-5:32px; --s-6:48px; --s-7:64px; --s-8:96px;
  --gutter:clamp(16px, 4vw, 40px); --wide:1200px; --measure:68ch;
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:20px; --r-full:999px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#141416; --surface:#1d1d20; --surface-elevated:#26262a;
    --text:#ffffff; --text-2:rgba(255,255,255,.6); --text-3:rgba(255,255,255,.6);
    --border:#2e2e33; --border-strong:#3d3d44;
    --accent:#a3aaf5; --accent-hover:#bfc4f8; --accent-soft:#232642; --accent-ink:#141416;
    --success:#5fd08f; --success-soft:#14301f; --warning:#f5b54a; --warning-soft:#33260f;
    --error:#ff8a80; --error-soft:#3a1715; --info:#8fb0ff; --info-soft:#1a2547;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
    --canvas:#1d1d20;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#141416; --surface:#1d1d20; --surface-elevated:#26262a;
  --text:#ffffff; --text-2:rgba(255,255,255,.6); --text-3:rgba(255,255,255,.6);
  --border:#2e2e33; --border-strong:#3d3d44;
  --accent:#a3aaf5; --accent-hover:#bfc4f8; --accent-soft:#232642; --accent-ink:#141416;
  --success:#5fd08f; --success-soft:#14301f; --warning:#f5b54a; --warning-soft:#33260f;
  --error:#ff8a80; --error-soft:#3a1715; --info:#8fb0ff; --info-soft:#1a2547;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --canvas:#1d1d20;
}

@media (max-width:1199px){:root{--fs-display:36px;--fs-h2:30px;--fs-h3:22px}}
@media (max-width:809px){:root{--fs-display:32px;--fs-h2:26px;--fs-h3:20px}}

/* ═══════════ BASE ═══════════ */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background-color .25s ease,color .25s ease;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{margin:0;font-weight:var(--w-regular);line-height:1.2;text-wrap:balance}
p{margin:0}
.wrap{width:100%;max-width:calc(var(--wide) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:clamp(64px, 9vw, 120px);border-top:1px solid var(--border)}
section.tint{background:var(--surface)}
.eyebrow{font-size:var(--fs-label);line-height:1.2;color:var(--text-2)}
.sec-head{display:grid;gap:var(--s-3);max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.sec-head h2{font-size:var(--fs-h2)}
.sec-head p:not(.eyebrow){font-size:var(--fs-lede);color:var(--text-2);max-width:var(--measure)}
.body{color:var(--text-2);max-width:var(--measure)}
.body strong{color:var(--text);font-weight:var(--w-medium)}
.body + .body{margin-top:var(--s-3)}
.caption{font-size:var(--fs-caption);color:var(--text-3);line-height:1.5}
.label{font-size:var(--fs-caption);line-height:1.2;color:var(--text-3)}
.sub{font-size:var(--fs-h3);margin-bottom:var(--s-3)}
.num{font-variant-numeric:tabular-nums}

/* tags — .hyp = hypothesis, .src = sourced, .new = proposed/new */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-caption);font-weight:var(--w-medium);padding:4px 10px;border-radius:var(--r-full);background:var(--surface);color:var(--text-2);border:1px solid var(--border);white-space:nowrap}
.tag.hyp{background:var(--warning-soft);color:var(--warning);border-color:transparent}
.tag.src{background:var(--info-soft);color:var(--info);border-color:transparent}
.tag.new{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.tags{display:flex;flex-wrap:wrap;gap:8px}

.card{background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-4)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-sm);font:500 var(--fs-small)/1 var(--font);border:1px solid var(--border-strong);background:var(--surface-elevated);color:var(--text);text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--text-3);color:var(--text)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ═══════════ HEADER ═══════════ */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--bg);border-bottom:1px solid var(--border)}
@supports (backdrop-filter:blur(1px)) and (background:color-mix(in srgb, red 50%, blue)){.site-head{background:color-mix(in srgb, var(--bg) 86%, transparent);backdrop-filter:saturate(1.4) blur(12px)}}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);height:64px}
.head-nav{display:flex;align-items:center;gap:var(--s-1);margin-left:auto}
.site-head a.back{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;margin-left:-10px;font-size:var(--fs-small);color:var(--text-2);text-decoration:none;font-weight:500;border-radius:var(--r-md)}
.site-head a.back:hover{color:var(--text);background:var(--surface)}
.theme-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--surface-elevated);color:var(--text);font:500 var(--fs-caption)/1 var(--font);cursor:pointer}
.theme-btn:hover{border-color:var(--border-strong)}
.theme-btn svg{width:16px;height:16px}
.theme-btn .t-dark{display:none}
:root[data-theme="dark"] .theme-btn .t-dark{display:inline}
:root[data-theme="dark"] .theme-btn .t-light{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .theme-btn .t-dark{display:inline}:root:not([data-theme="light"]) .theme-btn .t-light{display:none}}

/* ═══════════ HERO ═══════════ */
.hero{padding-block:clamp(48px,7vw,96px) clamp(48px,6vw,80px);border-top:0;overflow:hidden}
.hero-copy{display:grid;gap:var(--s-4);max-width:780px}
.hero h1{font-size:var(--fs-display);line-height:1.2}
.hero h1 span{display:block;text-wrap:pretty;color:var(--text-2);font-size:var(--fs-h5);margin-top:12px;line-height:1.2}
.hero .lede{font-size:var(--fs-lede);color:var(--text-2);max-width:60ch}
.hero .lede strong{color:var(--text);font-weight:var(--w-medium)}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--border);margin:var(--s-2) 0 0}
.meta div{display:grid;gap:4px}
.meta dd{margin:0;font-size:var(--fs-small);font-weight:500}
.meta dt{font-size:var(--fs-caption);color:var(--text-3)}
.hero-media{margin-top:clamp(40px,5vw,72px)}

/* ═══════════ MEDIA / PRESENTATION ═══════════ */
/* .canvas holds product screens; the product's own colours live in here */
.canvas{background:var(--canvas);border-radius:var(--r-xl);padding:clamp(28px,4vw,56px) clamp(16px,3vw,40px);display:flex;align-items:flex-start;justify-content:center;gap:var(--s-5);flex-wrap:wrap}
.canvas img{border-radius:var(--r-lg);box-shadow:var(--shadow)}
.canvas.bleed{padding:0;overflow:hidden}
.canvas.bleed img{border-radius:0;box-shadow:none;width:100%}
.scr{display:flex;flex-direction:column;align-items:center;gap:18px;flex:0 1 auto;min-width:0}
.scr-label{font-size:var(--fs-small);font-weight:var(--w-medium);color:var(--accent);text-align:center}
figure{margin:0}
.fig{display:grid;gap:10px}
.fig figcaption{font-size:var(--fs-caption);color:var(--text-3);line-height:1.5}
.fig figcaption b{color:var(--text-2);font-weight:var(--w-medium)}

/* ═══════════ NUMBERS / RESEARCH ═══════════ */
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
.stat-tile{background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-4);display:grid;gap:8px;align-content:start}
.stat-tile b{font-size:var(--fs-display);line-height:1.2;font-weight:var(--w-regular);font-variant-numeric:tabular-nums}
.stat-tile p{font-size:var(--fs-small);color:var(--text-2);line-height:1.5}
.src-line{margin-top:var(--s-3);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
/* horizontal chain: cause → effect → outcome; last step highlighted */
.chain{margin-top:var(--s-5);display:flex;align-items:stretch;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-elevated)}
.chain div{flex:1;padding:var(--s-4);display:grid;gap:6px}
.chain div + div{border-left:1px solid var(--border)}
.chain div:last-child{background:var(--accent-soft)}
.chain div:last-child b{color:var(--accent)}
.chain b{font-size:var(--fs-h5);font-weight:var(--w-regular);line-height:1.2}
.chain small{color:var(--text-2);font-size:var(--fs-caption);line-height:1.5}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);align-items:start}
.punch{font-size:var(--fs-h3);line-height:1.3;font-weight:var(--w-regular)}
.punch em{font-style:normal;color:var(--accent)}

/* ═══════════ INSIGHT BAND (dark in both themes) ═══════════ */
.band{background:var(--band);color:var(--band-text);border-top:0}
.band .eyebrow{color:var(--band-muted)}
.band .band-quote{color:var(--band-text);font-size:var(--fs-display);line-height:1.2;font-weight:var(--w-regular);margin-top:var(--s-4)}
.band-quote span{display:block;color:var(--band-muted)}
.band p{color:#b8b8c0}

/* ═══════════ FEATURE ROWS (copy + visual) ═══════════ */
.show{display:grid;gap:clamp(72px,9vw,120px)}
.show-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,88px);align-items:center}
.show-row.flip .show-copy{order:2}
.show-copy{display:grid;gap:var(--s-3);max-width:500px}
.show-copy .label{color:var(--accent)}
.show-copy h3{font-size:var(--fs-h3)}
.show-copy > p{color:var(--text-2)}
.show-vis{display:flex;justify-content:center;min-width:0}
.show-vis .canvas{width:100%}
/* numbered points */
.pts{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:p}
.pts li{counter-increment:p;display:grid;grid-template-columns:24px 1fr;gap:10px;font-size:var(--fs-small);color:var(--text-2);line-height:1.5}
.pts li::before{content:counter(p);width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:11px;font-weight:var(--w-medium)}
.pts li b{color:var(--text);font-weight:var(--w-medium)}

/* ═══════════ PEOPLE / QUOTES ═══════════ */
.person{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4) var(--s-5);align-items:center;background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--r-xl);padding:clamp(20px,3vw,32px)}
.person-id{display:flex;align-items:center;gap:14px}
.person-av{width:56px;height:56px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:var(--w-medium);font-size:1.125rem;overflow:hidden}
.person-av img{width:100%;height:100%;object-fit:cover}
.person-id b{display:block;font-size:var(--fs-h5);font-weight:var(--w-regular)}
.person-id span{font-size:var(--fs-caption);color:var(--text-3)}
.quote{font-size:var(--fs-lede);font-weight:var(--w-regular);line-height:1.5;padding-left:16px;border-left:3px solid var(--accent);margin:0}
.quote-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}

/* ═══════════ PROCESS / EVOLUTION ═══════════ */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-elevated)}
.steps li{padding:var(--s-4) var(--s-3);display:grid;gap:6px;align-content:start}
.steps li + li{border-left:1px solid var(--border)}
.steps li b{font-size:var(--fs-body);font-weight:var(--w-medium)}
.steps li p{font-size:var(--fs-caption);color:var(--text-2);line-height:1.5}
.steps li.now{background:var(--accent-soft)}
.steps li.now .label,.steps li.now b{color:var(--accent)}
/* sketch → wireframe → final */
.evo{display:grid;gap:clamp(48px,6vw,80px)}
.evo-row{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.evo-row > *{min-width:0}
.evo-row header{display:grid;gap:var(--s-2)}
.evo-row header h3{font-size:var(--fs-h3)}
.evo-row header p{font-size:var(--fs-small);color:var(--text-2)}
.evo-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);align-items:start}
.evo-strip figure{display:grid;gap:8px}
.evo-strip .shot{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);background:#fff}
.evo-strip .shot.sk{background:#efeee8}
.evo-strip .shot.rf{background:var(--canvas)}
.evo-strip .shot img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top}
.evo-strip figcaption{display:grid;gap:2px}
.evo-strip figcaption b{font-size:var(--fs-caption);font-weight:var(--w-medium);color:var(--text-2)}
.evo-strip figcaption span{font-size:var(--fs-small);color:var(--text-2);line-height:1.45}
.changed{margin:4px 0 0;display:grid;gap:6px;padding:0;list-style:none}
.changed li{font-size:var(--fs-small);color:var(--text-2);padding-left:18px;position:relative;line-height:1.5}
.changed li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;background:var(--accent)}

/* ═══════════ DECISIONS ═══════════ */
.decisions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.dec{display:grid;gap:var(--s-3);align-content:start;border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface-elevated);padding:clamp(24px,3vw,36px)}
.dec .n{font-size:var(--fs-caption);color:var(--text-3)}
.dec h3{font-size:var(--fs-h3)}
.dec p{color:var(--text-2);font-size:var(--fs-small)}
.dec-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:var(--fs-small);padding-top:var(--s-3);border-top:1px solid var(--border);margin:0}
.dec-meta dt{font-weight:var(--w-medium)}
.dec-meta dd{margin:0;color:var(--text-2)}
.dec-vis{background:var(--surface);border-radius:var(--r-lg);padding:var(--s-3);display:grid;gap:10px;min-width:0}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cmp > div{background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--r-md);padding:12px;display:grid;gap:6px;align-content:start}
.cmp h4{font-size:var(--fs-small)}
.cmp ul{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:var(--fs-caption);color:var(--text-2)}
.cmp .win{border-color:var(--accent)}
.cmp .win h4{color:var(--accent)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-caption);font-weight:var(--w-medium);padding:5px 11px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--surface-elevated)}
.pill.p-acc{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.pill.p-ok{background:var(--success-soft);color:var(--success);border-color:transparent}
.pill.p-wait{background:var(--warning-soft);color:var(--warning);border-color:transparent}
.pill.p-info{background:var(--info-soft);color:var(--info);border-color:transparent}

/* ═══════════ OUTCOME / REFLECTION ═══════════ */
.plan{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s-3)}
.plan .card,.refl .card{display:grid;gap:var(--s-3);align-content:start}
.plan h3,.refl h3{font-size:var(--fs-h3)}
.plan ol,.plan ul,.refl ul{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--text-2);font-size:var(--fs-small)}
.refl{margin-top:var(--s-3);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.closing{margin-top:clamp(48px,6vw,80px);font-size:var(--fs-h2);font-weight:var(--w-regular);line-height:1.2;max-width:30ch;text-wrap:balance}
.closing em{font-style:normal;color:var(--accent)}
.sources{margin-top:var(--s-5);display:grid;gap:4px}
.sources p{font-size:var(--fs-caption);color:var(--text-3)}

/* ═══════════ FOOTER ═══════════ */
footer{border-top:1px solid var(--border);padding-block:var(--s-6)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);flex-wrap:wrap}
footer p{font-size:var(--fs-small);color:var(--text-3)}
.foot-acts{display:flex;gap:var(--s-2);flex-wrap:wrap}
.swipe-hint{display:none;align-items:center;gap:6px;font-size:var(--fs-caption);color:var(--text-3);margin-bottom:var(--s-2)}

/* ═══════════ SKETCHES · hand-drawn work on paper ═══════════
   <a class="sketch" href="full-page.jpg" data-zoom="Caption"><img …></a>
   Paper stays white in both themes. Add <span class="pin" style="--x:40%;--y:20%">1</span>
   inside for numbered notes, explained by an <ol class="pin-list"> below. */
.sketch{position:relative;display:block;margin:0;background:#fff;border-radius:var(--r-sm);overflow:hidden;box-shadow:0 1px 2px rgba(20,24,33,.06),0 10px 28px rgba(20,24,33,.12);color:inherit;text-decoration:none}
.sketch img{width:100%;height:auto}
a.sketch{cursor:zoom-in}
a.sketch::after{content:"View full page";position:absolute;right:10px;bottom:10px;font-size:var(--fs-caption);line-height:1;padding:7px 10px;border-radius:var(--r-full);background:rgba(14,16,17,.78);color:#fff;opacity:0;transition:opacity .2s}
a.sketch:hover::after,a.sketch:focus-visible::after{opacity:1}
@media (hover:none){a.sketch::after{opacity:1}}
.pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:#4f5bd5;color:#fff;display:grid;place-items:center;font-size:var(--fs-caption);font-weight:var(--w-medium);box-shadow:0 0 0 3px #fff,0 2px 8px rgba(20,24,33,.25);pointer-events:none}
.pin-list{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s-3) var(--s-4);counter-reset:pin}
.pin-list li{counter-increment:pin;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;font-size:var(--fs-small);color:var(--text-2);line-height:1.5}
.pin-list li::before{content:counter(pin);width:28px;height:28px;border-radius:50%;background:#4f5bd5;color:#fff;display:grid;place-items:center;font-size:var(--fs-caption)}
.pin-list b{display:block;color:var(--text);font-weight:var(--w-medium)}
/* full-size viewer, created by case-study.js for a[data-zoom] */
.lightbox{padding:0;border:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:transparent;color:#fff}
.lightbox::backdrop{background:rgba(14,16,17,.9)}
.lb-scroll{width:100%;height:100%;overflow:auto;display:grid;place-items:center;padding:64px 16px 24px}
.lb-scroll figure{margin:0;display:grid;gap:12px;justify-items:center}
.lb-scroll img{max-width:min(1400px,100%);height:auto;border-radius:var(--r-sm);cursor:zoom-out}
.lb-cap{font-size:var(--fs-small);color:rgba(255,255,255,.7);text-align:center}
.lb-close{position:fixed;top:12px;right:12px;min-height:44px;padding:0 16px;border-radius:var(--r-full);border:1px solid rgba(255,255,255,.3);background:rgba(14,16,17,.6);color:#fff;font:500 var(--fs-small)/1 var(--font);cursor:pointer}

/* ═══════════ BREAKPOINTS · 1440 · 1024 / 768 · 390 / 375 ═══════════ */
@media (max-width:1100px){
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .evo-row{grid-template-columns:1fr}
  .evo-row header{position:static;max-width:640px}
}
@media (max-width:900px){
  .meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two-col{grid-template-columns:1fr;gap:var(--s-3)}
  .chain{flex-direction:column}
  .chain div + div{border-left:0;border-top:1px solid var(--border)}
  .show-row,.show-row.flip{grid-template-columns:1fr}
  .show-row.flip .show-copy{order:0}
  .show-copy{max-width:640px}
  .decisions,.plan,.refl{grid-template-columns:1fr}
  .person{grid-template-columns:1fr}
  .quote-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .steps li + li{border-left:0;border-top:1px solid var(--border)}
  /* image rails become swipeable */
  .evo-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s-3);padding-bottom:var(--s-2);margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .evo-strip > *{flex:0 0 auto;scroll-snap-align:start;width:min(290px,72vw)}
  .swipe-hint{display:flex}
}
@media (max-width:600px){
  :root{--fs-body:1rem}
  .meta{gap:var(--s-3)}
  .stat-row{grid-template-columns:1fr 1fr;gap:10px}
  .stat-tile{padding:var(--s-3)}
  .cmp{grid-template-columns:1fr}
  .site-head a.back .long{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}