/* Shared case-study layout. Brand tokens live in styles.css. */
/* ===== FONTS — self-hosted ITC Avant Garde Gothic ===== */
/* ===== TOKENS =====
   Brand palette only. Two text colours, one accent.
   Type system: one family · 800 display / 700 UI / 400 body · 5 sizes. */
:root{
  /* brand tokens come from styles.css; these are case-study layout only */
  --ink:var(--dark);
  --ink-soft:rgba(44,26,14,.66);
  --rule:rgba(44,26,14,.14);
  --tint:rgba(44,26,14,.07);
  --max:1280px; --prose:100%; --rail:210px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
.cs{font:400 17px/1.75 'ITC Avant Garde',system-ui,sans-serif;color:var(--ink)}
img{max-width:100%;display:block}
::selection{background:var(--tint)}

/* ===== TYPE SCALE ===== */
.display{font-size:clamp(32px,3.8vw,46px);line-height:1.12;letter-spacing:-.02em;font-weight:700;margin:0;max-width:22ch}
h2{font-size:clamp(21px,2vw,24px);line-height:1.3;letter-spacing:-.012em;font-weight:700;margin:0 0 18px;max-width:var(--prose)}
h3{font-size:17px;line-height:1.45;letter-spacing:-.008em;font-weight:700;margin:0 0 10px}
.ui{font-size:12px;line-height:1.5;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
.lead{font-size:clamp(20px,2.2vw,24px);line-height:1.5;font-weight:400;color:var(--ink-soft)}

/* ===== SHELL ===== */
.shell{max-width:var(--max);margin:0 auto;padding:0 48px;display:grid;grid-template-columns:var(--rail) 1fr;gap:80px}
@media (max-width:1040px){.shell{grid-template-columns:1fr;gap:0;padding:0 24px}}

a:focus-visible,button:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:4px}

/* ===== SIDEBAR ===== */
.side{position:sticky;top:76px;align-self:start;height:calc(100vh - 76px);padding:44px 0;display:flex;flex-direction:column;gap:36px}
@media (max-width:1040px){.side{position:static;height:auto;padding:28px 0 0}}
.side .mark{width:116px}
/* Left-rail indicator — the docs-sidebar pattern (Stripe, Tailwind, MDN).
   The rail groups the items so they read as one list of links; the active
   item is marked by a SHAPE (a solid bar segment) plus weight, not colour
   alone — WCAG 1.4.1. Targets are 44px tall. */
.toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  border-left:1px solid var(--rule)}
.toc a{position:relative;display:flex;align-items:center;min-height:44px;
  padding:6px 0 6px 18px;text-decoration:none;
  font-size:14px;font-weight:500;line-height:1.35;color:var(--ink-soft)}
.toc a::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:2px;
  background:transparent;border-radius:2px;transition:opacity .15s ease}
.toc a:hover{color:var(--ink);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px}
.toc a:hover::before{background:var(--ink-soft)}
.toc a.on{color:var(--ink);font-weight:700}
.toc a.on::before{background:var(--ink)}
.toc a:focus-visible{outline-offset:-2px}
.back,.totop{font-size:14px;font-weight:500;color:var(--ink-soft);text-decoration:none}
.back:hover,.totop:hover{color:var(--ink)}
/* Progressive disclosure: no reason to offer "back to top" until there is a
   top to go back to. Hidden (and unfocusable) until the page has scrolled. */
.totop{margin-top:auto;opacity:0;visibility:hidden;
  transition:opacity .2s ease,transform .2s ease;transform:translateY(4px)}
.totop.show{opacity:1;visibility:visible;transform:none}
@media (prefers-reduced-motion:reduce){.totop{transition:none;transform:none}}
@media (max-width:1040px){.totop{display:none}}

/* ===== MAIN ===== */
main{padding:44px 0 140px;min-width:0}
.prose{max-width:var(--prose)}
.prose p{margin:0 0 1.2em}
.prose p:last-child{margin-bottom:0}

/* ===== MASTHEAD ===== */
.eyebrow{margin:0 0 26px}
.claim{max-width:38rem;margin:26px 0 64px}
.claim b{font-weight:700;color:var(--ink)}
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin:0 0 60px}
@media (max-width:720px){.meta{grid-template-columns:repeat(2,1fr);gap:26px}}
.meta dt{margin-bottom:8px}
.meta dd{margin:0;font-size:16px;line-height:1.5;font-weight:500}

/* ===== SECTIONS ===== */
section{padding-top:clamp(64px,6.5vw,104px);scroll-margin-top:28px}
.label{margin:0 0 14px}

/* ===== FIGURES ===== */
figure{margin:48px 0 0}
/* Cards and figures share one content width — same left edge, same right edge.
   (An earlier asymmetric breakout on figures broke this; alignment wins.) */
figure + .prose{margin-top:32px}
/* DEFAULT: the image fills the frame. No padding, no visible container.
   Use .pad ONLY when the image has no background of its own — a UI fragment,
   a transparent PNG, an odd aspect that would otherwise float. The container
   exists to supply a backdrop, not to decorate images that already fill. */
.frame{border-radius:16px;overflow:hidden;display:flex;min-height:0}
.frame img{width:100%;height:auto;max-height:min(72vh,680px);object-fit:cover}

.frame.pad{background:var(--off-white);padding:clamp(18px,2.6vw,40px);
  align-items:center;justify-content:center}
.frame.pad img{width:auto;max-width:100%;max-height:min(60vh,560px);object-fit:contain;border-radius:8px}
.frame.pad.deep{background:var(--dark)}

/* Pair ONLY images of similar aspect. Images keep their real proportions —
   never force a shared ratio with cover: it crops content and the corner
   radius clips whatever sits near the edge. Mismatched aspects get stacked
   full width instead (.stacked), which has no ragged edge to fix. */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;align-items:stretch}
.pair .frame{background:var(--off-white);padding:0}
.pair .frame img{width:100%;height:100%;max-height:min(52vh,460px);object-fit:contain}
.stacked{display:flex;flex-direction:column;gap:1px}
.stacked .frame img{width:100%;height:auto;max-height:none;object-fit:contain}
@media (max-width:820px){.pair{grid-template-columns:1fr}}
/* caption is part of the image block, not floating body text below it */
figure{border-radius:16px;overflow:hidden;background:var(--off-white)}
figure .frame{border-radius:0}
figure .pair{gap:1px;background:var(--off-white)}
figure .pair .frame{border-radius:0}
figcaption{margin:0;padding:18px clamp(20px,2.2vw,28px) 22px;background:var(--off-white);
  font-size:15px;line-height:1.6;color:var(--ink-soft)}
figcaption b{color:var(--ink);font-weight:700}

/* ===== CARD — one treatment, one width, used everywhere ===== */
.card{background:var(--off-white);border-radius:16px;padding:clamp(24px,2.4vw,32px);width:100%}
.card.accent{background:var(--off-white)}
.card p{margin:0 0 .7em;font-size:16px;line-height:1.7;color:var(--ink-soft);max-width:38rem}
.card p:last-child{margin-bottom:0}
.card b{color:var(--ink);font-weight:700}
.stack{display:flex;flex-direction:column;gap:16px;margin-top:36px}

/* ===== OPTIONS ===== */
.opt{display:grid;grid-template-columns:40px 1fr;gap:20px;align-items:start}
.opt .n{font-weight:700;font-size:15px;color:var(--periwinkle);padding-top:3px}
.tradeoff b{color:var(--ink);font-weight:700}

/* ===== SPLIT — text left, images stacked right (Karolis) =====
   Also the fix for oversized images: the media column is narrower than the
   page, so stacked shots sit at a readable size instead of filling the width. */
.split{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.5vw,56px);align-items:start}
.split > *:first-child{grid-column:span 2}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:28px}}
.split > figure{margin:0;display:flex;flex-direction:column;gap:1px}
.split .frame img{max-height:none}
.split .prose{max-width:none}

/* ===== FINDINGS ===== */
.finding{margin-top:64px}
.finding .ui{margin:0 0 10px}

/* ===== GRIDS — cards side by side, equal width and height ===== */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
@media (max-width:760px){.grid-2{grid-template-columns:1fr}}
.stats{margin:0 0 44px}
.grid-2 .card h3{font-size:clamp(18px,1.7vw,20px);line-height:1.3;margin-bottom:10px}

/* ===== PULL QUOTE — a card, not a rule ===== */
blockquote{margin:48px 0;padding:clamp(24px,2.4vw,32px);background:var(--off-white);border-radius:16px}
blockquote p{margin:0 0 14px;font-size:clamp(19px,2vw,23px);line-height:1.5;font-weight:500;color:var(--ink)}
blockquote cite{font-style:normal;font-size:14px;font-weight:500;color:var(--ink-soft)}

/* ===== END OF STORY =====
   Page furniture must not share a component with content. The impact cards
   are the argument; everything below is navigation, so it drops the card,
   stays on white, and shrinks. */
.next{margin-top:clamp(88px,9vw,128px);display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.next a{font-size:17px;font-weight:500;letter-spacing:0;color:var(--ink);text-decoration:none;
  transition:transform .18s ease;display:inline-block}
.next a:hover{transform:translateX(3px)}
.next a:active{transform:translateX(1px)}