/* ============================================================
   Case study "essay" layout — modelled on grizz.fyi artifacts.
   Same tokens, type and column as the homepage.
   ============================================================ */
:root{
  --bg:#ffffff;
  --soft:#f4f4f5;
  --frame:#fafafa;   /* media containers: lighter, so white UI screens don't sit on a heavy grey */
  --ink:#0a0a0a;
  --ink-2:#0a0a0a;   /* body copy is readable content: black */
  --mute:#6e6e76;    /* supporting details — 5.05:1 on white, 4.6:1 on the grey boxes (WCAG AA) */
  --fs:15px; --lh:1.5;
  --s1:8px; --s2:16px; --s3:24px; --s4:48px;
  --line:#f2f2f2;
  --col:530px;
  --gut:clamp(16px,4vw,30px);
  --sans:"Geist", system-ui, -apple-system, sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs); line-height:var(--lh); letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--ink); color:var(--bg); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; }

.essay{ max-width:var(--col); margin:0 auto; padding:clamp(56px,9vh,88px) var(--gut) 120px; }

/* ---- head ---- */
.back{ display:inline-flex; align-items:center; gap:6px; color:var(--mute); font-size:var(--fs); margin-bottom:var(--s4); transition:color .2s; }
.back:hover{ color:var(--ink); }
.back svg{ width:12px; height:12px; }
.essay h1{ margin:0; font-size:var(--fs); font-weight:500; line-height:var(--lh); }
.meta{ margin:0 !important; color:var(--mute) !important; font-size:13px; }

/* ---- body copy ---- */
.essay p{ margin:0 0 var(--s2); color:var(--ink); text-wrap:pretty; }
.essay p.intro{ margin-top:var(--s3); }
.essay h2{ margin:var(--s4) 0 var(--s2); font-size:var(--fs); font-weight:500; color:var(--ink); scroll-margin-top:32px; }
.essay h3{ margin:var(--s3) 0 var(--s1); font-size:var(--fs); font-weight:500; color:var(--ink); }
.essay strong{ color:var(--ink); font-weight:500; }
.essay ul.list{ margin:0 0 14px; padding-left:18px; color:var(--ink-2); }
.essay ul.list li{ margin:0 0 6px; }
/* grey callout box */
.callout{ margin:0 0 var(--s2); padding:var(--s3); border-radius:6px; background:var(--soft); }
.callout p{ margin:0 !important; color:var(--ink) !important; font-size:var(--fs); line-height:var(--lh); }
.callout a{ color:inherit; border-bottom:1px solid #d9d9de; transition:border-color .2s; }
.callout a:hover{ border-color:currentColor; }

/* ---- key/value table (impact, project facts) ---- */
.kv > div{ display:grid; grid-template-columns:140px 1fr; gap:var(--s2); padding:12px 0; border-bottom:1px solid #f2f2f2; }
.kv > div:last-child{ border-bottom:0; }
.kv dt{ font-weight:400; color:var(--mute); }
.kv dd{ margin:0; color:var(--ink); }

/* ---- impact: three stacked stats in a grey box, split by dividers ---- */
.impact{ list-style:none; margin:0 0 var(--s2); padding:var(--s3) 0; border-radius:6px; background:var(--soft); display:grid; grid-template-columns:repeat(3,1fr); }
.impact li{ padding:0 var(--s3); border-left:1px solid #e2e2e6; }
.impact li:first-child{ border-left:0; }
.impact b{ display:block; font-size:var(--fs); font-weight:500; line-height:var(--lh); color:var(--ink); }
.impact span{ display:block; font-size:var(--fs); line-height:var(--lh); color:var(--mute); }
@media (max-width:540px){ .impact{ grid-template-columns:1fr; padding:4px 20px; } .impact li{ padding:14px 0; border-left:0; border-top:1px solid #e2e2e6; } .impact li:first-child{ border-top:0; } }

/* ---- figures: frames place each asset exactly as the live case studies do ----
   Proportions are taken from the live layout (36px padding on a 672px frame = 5.36% of the width;
   14px between stacked frames = 2.1%), so they scale with the narrower column. */
.fig{ margin:var(--s3) 0; }
.fig__frame{
  position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:8px;
  background:var(--frame) center/cover no-repeat; padding:5.36%;
  display:flex; align-items:center; justify-content:center; cursor:zoom-in;
}
.fig__frame img, .fig__frame video{ display:block; }
/* shot: fill the width from the top; anything taller than the frame runs off the bottom edge */
.fig__frame.v-shot{ align-items:flex-start; }
.fig__frame.v-shot img{ width:100%; height:auto; border-radius:8px; }
.fig__frame.v-shot video{ width:100%; height:auto; border-radius:0; object-fit:contain; }
/* a screenshot in a figure reads as a card: hairline border + soft shadow */
.fig:not(.fig--shot) .fig__frame.v-shot img{ border:1px solid #e9eaee; box-shadow:0 1px 3px rgba(16,24,40,.06), 0 14px 30px -18px rgba(16,24,40,.16); }
/* auto: the frame takes its height from the asset — nothing cropped */
.fig__frame.v-auto{ aspect-ratio:auto; }
.fig:not(.fig--shot) .fig__frame.v-shot.v-auto img{ box-shadow:none; }
/* bare: the asset brings its own edges (transparency, chrome) — no card border / shadow / radius */
.fig .fig__frame.v-bare img, .fig:not(.fig--shot) .fig__frame.v-shot.v-bare img{ border:none; box-shadow:none; border-radius:0; }
/* fit: scale the whole asset down to sit inside the 16/9 frame */
.fig__frame.v-fit{ align-items:center; }
.fig .fig__frame.v-fit img, .fig:not(.fig--shot) .fig__frame.v-shot.v-fit img{ width:100%; height:100%; object-fit:contain; border:none; box-shadow:none; }
/* flush-bottom: no bottom padding, the asset rests on the bottom edge */
.fig__frame.v-flush-bottom{ padding-bottom:0; }
.fig__frame.v-flush-bottom img{ object-position:center bottom; }
/* product screens ("What I did" shots): frame grows with the screen, which rests on the bottom edge */
.fig--shot .fig__frame.v-shot{ aspect-ratio:auto; padding-bottom:0; }
.fig--shot .fig__frame + .fig__frame{ margin-top:2.1%; }

.fig figcaption{ margin-top:var(--s2); font-size:var(--fs); line-height:var(--lh); color:var(--mute); text-wrap:pretty; }
.fig figcaption strong{ color:var(--ink); font-weight:500; }

/* hero: same as live — a 5/3 frame, 8.9% side padding, the 1440/860 video centred vertically */
.cover{ margin:var(--s3) 0; }
.cover .fig__frame{ aspect-ratio:5/3; padding:0 8.9%; align-items:center; cursor:default; }
.cover .fig__frame video{ width:100%; aspect-ratio:1440/860; height:auto; object-fit:cover; border-radius:4px; background:#fff; }
/* Kwiksell's hero: the phone sits at the top, scaled to 85%, cropped at the bottom edge */
.cover .cover__frame--phone{ padding:0; align-items:flex-start; }
.cover .cover__frame--phone video{ aspect-ratio:1600/1560; background:transparent; object-position:center 25%; transform:scale(.85); transform-origin:center top; border-radius:4px 4px 0 0; }

/* project facts under the hero (Role / Team / Timeline), as on the live pages */
.kv{ margin:0 0 var(--s4); }

/* ---- table of contents: sits in the left margin on wide screens ---- */
.toc{ position:fixed; top:clamp(56px,9vh,88px); left:max(24px, calc(50% - var(--col)/2 - 220px)); width:180px; display:none; }
.toc a{ display:block; padding:2px 0; color:var(--mute); font-size:var(--fs); line-height:var(--lh); transition:color .2s; }
.toc a:hover, .toc a.is-on{ color:var(--ink); }
@media (min-width:1080px){ .toc{ display:block; } }

/* ---- footer (matches homepage) ---- */
.foot{ display:flex; justify-content:space-between; align-items:center; gap:var(--s2); margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line); }
.socials{ display:flex; gap:14px; }
.social{ display:grid; place-items:center; width:20px; height:20px; color:var(--mute); transition:color .2s; }
.social:hover{ color:var(--ink); }
.social svg{ width:16px; height:16px; }
.copy{ margin:0 !important; font-size:12px; color:var(--mute) !important; }

/* ---- image zoom ---- */
.zoom{ position:fixed; inset:0; z-index:90; background:rgba(255,255,255,.96); display:grid; place-items:center; padding:4vw; opacity:0; pointer-events:none; transition:opacity .25s ease; cursor:zoom-out; }
.zoom.is-on{ opacity:1; pointer-events:auto; }
.zoom img, .zoom video{ max-width:min(1200px,100%); max-height:100%; width:auto; height:auto; border-radius:6px; box-shadow:0 30px 80px -30px rgba(0,0,0,.35); }

/* ---- progressive blur at the bottom (same as homepage) ---- */
.fader{ position:fixed; left:0; right:0; bottom:0; height:96px; z-index:40; pointer-events:none; }
.fader > i{ position:absolute; inset:0; }
.fader > i:nth-child(1){ z-index:1; -webkit-backdrop-filter:blur(.195px); backdrop-filter:blur(.195px); -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); mask-image:linear-gradient(to bottom, transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); }
.fader > i:nth-child(2){ z-index:2; -webkit-backdrop-filter:blur(.39px); backdrop-filter:blur(.39px); -webkit-mask-image:linear-gradient(to bottom, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); mask-image:linear-gradient(to bottom, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); }
.fader > i:nth-child(3){ z-index:3; -webkit-backdrop-filter:blur(.78px); backdrop-filter:blur(.78px); -webkit-mask-image:linear-gradient(to bottom, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); mask-image:linear-gradient(to bottom, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); }
.fader > i:nth-child(4){ z-index:4; -webkit-backdrop-filter:blur(1.5625px); backdrop-filter:blur(1.5625px); -webkit-mask-image:linear-gradient(to bottom, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); mask-image:linear-gradient(to bottom, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); }
.fader > i:nth-child(5){ z-index:5; -webkit-backdrop-filter:blur(3.125px); backdrop-filter:blur(3.125px); -webkit-mask-image:linear-gradient(to bottom, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); mask-image:linear-gradient(to bottom, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); }
.fader > i:nth-child(6){ z-index:6; -webkit-backdrop-filter:blur(6.25px); backdrop-filter:blur(6.25px); -webkit-mask-image:linear-gradient(to bottom, transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); }
.fader > i:nth-child(7){ z-index:7; -webkit-backdrop-filter:blur(12.5px); backdrop-filter:blur(12.5px); -webkit-mask-image:linear-gradient(to bottom, transparent 75%, #000 87.5%, #000 100%, transparent 112.5%); mask-image:linear-gradient(to bottom, transparent 75%, #000 87.5%, #000 100%, transparent 112.5%); }
.fader > i:nth-child(8){ z-index:8; -webkit-backdrop-filter:blur(25px); backdrop-filter:blur(25px); -webkit-mask-image:linear-gradient(to bottom, transparent 87.5%, #000 100%, #000 112.5%, transparent 125%); mask-image:linear-gradient(to bottom, transparent 87.5%, #000 100%, #000 112.5%, transparent 125%); }

@media (max-width:540px){ .kv > div{ grid-template-columns:96px 1fr; } }