/* Article page: left-aligned like the case studies. Head, then the cover grows from card size to full width, then the sticky rail (220) + column (960).
   Type scale, nothing else: 88 title · 40 section heads · 28 dek + pull quotes · 18 body · 14 mono labels; Medium + Regular only. One accent (eyebrows + active rail link). */
@font-face{font-family:"General Sans";src:url("GeneralSans-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"General Sans";src:url("GeneralSans-Medium.otf") format("opentype");font-weight:500;font-display:swap}
:root{--bg:#fff;--fg:#111;--muted:#6b6b6b;--line:#e4e3df;--soft:#f5f5f2;--ink:#05040e;--accent:#2f7bf5;
  --sans:"General Sans","Helvetica Neue",Arial,sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace;--glide:cubic-bezier(.65,0,.35,1);
  --gut:max(16px,min(64px,4.44vw));color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.mono,.tag,.eb,.toc b,.canvas b{font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--gut)}

nav.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px)}
nav.top .in{max-width:1440px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:24px var(--gut);font-size:14px;font-weight:500}
nav.top ul{display:flex;gap:32px;list-style:none;margin:0;padding:0;color:var(--muted)}
nav.top ul a:hover{color:var(--fg)}

/* head */
.hd{display:grid;gap:28px;justify-items:start;padding-block:64px 48px}
.tag{border:1px solid #d6d6d6;border-radius:999px;padding:7px 12px;line-height:1}
h1{font-weight:500;font-size:clamp(44px,6.1vw,88px);letter-spacing:-.045em;line-height:.96;margin:0;max-width:1100px;text-wrap:balance}
.dek{font-size:clamp(22px,1.95vw,28px);font-weight:500;line-height:1.25;letter-spacing:-.02em;margin:0;max-width:760px;color:var(--muted)}

/* cover: grows from the card you clicked (left edge) to full width */
.grow{border-radius:16px;overflow:hidden;width:min(416px,100%);transition:width 1s var(--glide),border-radius 1s var(--glide)}
.grow .cvr{background:var(--c);aspect-ratio:416/248;transition:aspect-ratio 1s var(--glide)}
.open .grow{width:100%;border-radius:24px}
.open .grow .cvr{aspect-ratio:21/8}

/* body: sticky rail + column */
.bd{display:grid;grid-template-columns:220px minmax(0,960px);justify-content:space-between;gap:48px;padding-block:80px 0}
.toc{position:sticky;top:96px;align-self:start;display:grid;gap:12px;font-size:14px;font-weight:500;line-height:1.35}
.toc b{margin-bottom:6px;color:var(--fg)}
.toc a{color:#8c8c8c;transition:color .2s}
.toc a:hover,.toc a.on{color:var(--accent)}
.toc a.on::before{content:"→ "}
section{scroll-margin-top:96px}
section+section{margin-top:120px}
.eb{color:var(--accent);margin:0}
h2{font-weight:500;font-size:clamp(30px,2.8vw,40px);letter-spacing:-.03em;line-height:1.1;margin:20px 0 0;max-width:828px;text-wrap:balance}
article p,article ul{margin:20px 0 0;max-width:720px}
article ul{padding-left:1.1em}
article li+li{margin-top:4px}
/* pull quotes: same weight and colour as the text, just bigger, with a short rule */
.pq{margin:48px 0!important;font-weight:500;font-size:clamp(22px,1.95vw,28px);letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
.pq::before{content:"";display:block;width:40px;height:2px;background:var(--ink);margin-bottom:20px}

/* the framework canvas: label + one fill-in sentence + one hint, all body size */
.canvas{margin:32px 0 0;max-width:828px;background:var(--soft);border-radius:16px;padding:28px 32px 32px}
.canvas .ch{display:flex;justify-content:space-between;align-items:center;gap:16px}
.canvas ol{list-style:none;margin:0;padding:0}
.canvas li{padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}
.canvas b{display:block;margin-bottom:8px}
.canvas li p{margin:0;max-width:none}
.canvas li small{display:block;font-size:inherit;color:var(--muted)}
var{font-style:normal;background:#e6e5e0;border-radius:4px;padding:0 4px}
.copy{display:inline-flex;align-items:center;gap:8px;font:500 14px/1 var(--sans);color:#fff;background:var(--ink);border:0;border-radius:999px;padding:11px 16px;cursor:pointer;transition:background .25s ease}
.copy:hover{background:var(--accent)}
.copy svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}

/* end: next read + legal line */
.end{margin-top:clamp(80px,8.3vw,120px);background:#fafafa;padding-block:clamp(56px,6vw,96px) 0}
.end .row{display:grid;grid-template-columns:1fr minmax(0,416px);gap:32px;align-items:end}
.end h2{font-size:clamp(44px,6.1vw,88px);letter-spacing:-.045em;line-height:.96;margin:0}
.card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column;transition:translate .35s var(--glide)}
.card:hover{translate:0 -6px}
.card .cover{aspect-ratio:416/248;background:var(--c)}
.card .body{padding:40px 24px 32px;display:grid;gap:12px;justify-items:start}
.card h4{font-weight:500;font-size:28px;line-height:1.2;margin:0}
.card p{margin:0;font-size:18px;line-height:1.35;color:#333}
.legal{display:flex;justify-content:space-between;padding-block:56px 40px}

@media (max-width:860px){.bd,.end .row{grid-template-columns:1fr}.toc{display:none}nav.top ul{gap:16px}}
@media (prefers-reduced-motion:reduce){.grow,.grow .cvr{transition:none}}

/* --- Figma 792:1628 (Sharpi's edit, 4 Nov): cover on top, title block inside the reading column, no section numbers,
   40px pull quotes, pink active rail link, "Next read" row instead of the end card --- */
.v2 .grow{margin-top:8px}
.v2 .bd{padding-top:80px}
.v2 .toc{top:96px}
.v2 .toc a.on{color:#ff85c8}
.v2 .col{display:grid;gap:48px;align-content:start}
.v2 .ahd{display:grid;gap:28px;justify-items:start}
.v2 .ahd .tags{display:flex;gap:12px}
.v2 .ahd h1{max-width:896px}
.v2 .ahd .dek{font-size:18px;line-height:1.25;letter-spacing:-.02em;max-width:760px}
.v2 section+section{margin-top:0}
.v2 h2{margin-top:0}
.v2 .pq{font-size:clamp(30px,2.8vw,40px)}
.v2 .intro p{max-width:828px}
.next{display:grid;gap:16px;border-top:1px solid #ececec;padding-top:16px;max-width:880px}
.next .row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.next .row span{font-size:14px;color:#6b7280}
.next .row a{font-size:32px;font-weight:500;line-height:1.18;letter-spacing:-.04em;color:#2b2f36;transition:color .2s}
.next .row a:hover{color:#ff85c8}
/* lead-in words on the "what I took from it" points */
article p b{font-weight:500}

/* one-pager as a checklist: step label on the left, the fill-in + tick boxes on the right */
.canvas ol>li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px 24px}
.canvas ol>li>.mono{padding-top:3px}
.canvas .chk{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;max-width:none}
.canvas .chk li{position:relative;padding:0 0 0 28px;margin:0;border:0;color:var(--muted)}
.canvas .chk li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border:1.5px solid #c9c8c2;border-radius:4px;background:#fff}
.canvas small{margin-top:10px}
.canvas .sum{margin:24px 0 0;padding:20px 24px;background:#fff;border-radius:12px;max-width:none}
.canvas .sum .mono{display:block;margin-bottom:8px}
@media (max-width:860px){.canvas ol>li{grid-template-columns:1fr}}

/* Notion-style toggles: each step folds; click a step to open its fill-in and tick boxes */
.canvas ol>li{display:block}
.canvas details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:2px 0}
.canvas details>summary::-webkit-details-marker{display:none}
.canvas details>summary::before{content:"";width:0;height:0;border-left:7px solid var(--muted);border-top:5px solid transparent;border-bottom:5px solid transparent;transition:rotate .25s var(--glide)}
.canvas details[open]>summary::before{rotate:90deg}
.canvas details>summary .mono{color:var(--fg)}
.canvas details>summary:hover .mono{color:var(--accent)}
.canvas details>div{padding:14px 0 4px 19px}

/* toggles v2: the label + fill-in sentence always show; only the tick boxes and hint fold away */
.canvas details>summary{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center}
.canvas details>summary>p{grid-column:2;margin:8px 0 0}
.canvas details>div{padding:4px 0 4px 19px}

/* the cover grows out from the centre, not the left edge */
.v2 .grow{margin-inline:auto}

/* inline file names in body copy */
article code{font-family:var(--mono);font-size:.85em;background:#efeee9;border-radius:4px;padding:1px 5px}

/* rail: same as the case studies (cs.css) — all Geist Mono caps, 14px; active + hover in each article's cover colour (--rail on body) */
.toc,.v2 .toc{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;display:grid;gap:12px;line-height:normal}
.toc b{font-size:14px;margin-bottom:6px;color:var(--fg)}
.toc a{color:var(--muted);transition:color .2s}
.toc a:hover,.toc a.on,.v2 .toc a.on{color:var(--rail,#ff5229)}

/* phones and small tablets: no "On this page" rail; the article runs full width */
@media (max-width:860px){.toc,.v2 .toc{display:none}}
/* phones: the nav stays on one line */
@media (max-width:480px){nav.top .in{padding-block:18px;font-size:13px;gap:12px}nav.top .in>a,nav.top ul a{white-space:nowrap}nav.top ul{gap:12px}}