/* Case study pages. Same system as the home page: 12-column grid, hairlines,
   bold grotesque headlines, neutral body, no colour except the work itself. */
:root{
  --bg:#ffffff;
  --fg:#0d0d0d;
  --muted:#6b6b6b;
  --rule:#d9d9d9;
  --paper:#ffffff;   /* colour UI screens sit on pure white in both themes */
  --ink-filter:none; /* black-on-white line drawings melt into the page */
  --ink-blend:multiply;
  --display:"Archivo","Arial Black","Helvetica Neue",Arial,sans-serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,3vw,40px);
  --gap:clamp(16px,2vw,28px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0c0c0c;--fg:#f2f2f2;--muted:#9a9a9a;--rule:#2a2a2a;--ink-filter:invert(1) hue-rotate(180deg);--ink-blend:lighten;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0c0c0c;--fg:#f2f2f2;--muted:#9a9a9a;--rule:#2a2a2a;--ink-filter:invert(1) hue-rotate(180deg);--ink-blend:lighten;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-padding-top:72px}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.55;margin:0;padding-inline:var(--gutter);overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
img,video{max-width:100%;display:block}
.wrap{max-width:1440px;margin-inline:auto}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:400}

/* Nav (identical to home) */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;isolation:isolate;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:18px;font-family:var(--mono);font-size:13px;letter-spacing:.02em}
.nav::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:var(--bg);border-bottom:1px solid var(--rule)}
.nav .mark{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 110;font-size:16px;letter-spacing:0;text-decoration:none;text-transform:uppercase}
.nav ul{display:flex;gap:clamp(14px,2.4vw,32px);list-style:none;margin:0;padding:0}
.nav a{text-decoration:none}
.nav ul a:hover{text-decoration:underline;text-underline-offset:4px}

/* Title block */
.intro{padding-block:clamp(40px,6vw,96px) clamp(28px,4vw,56px);display:grid;gap:clamp(18px,2.2vw,28px)}
.back{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;width:fit-content}
.back:hover{color:var(--fg)}
.intro h1{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 100;font-size:clamp(40px,6.6vw,108px);line-height:.95;letter-spacing:-.025em;margin:0;text-wrap:balance;max-width:14ch}
.lead{margin:0;font-weight:500;font-size:clamp(22px,2.5vw,36px);line-height:1.2;letter-spacing:-.015em;max-width:34ch;text-wrap:pretty}
.facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);margin:clamp(12px,2vw,24px) 0 0;padding-top:16px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:13px;line-height:1.45}
.facts div{display:grid;gap:4px;min-width:0}
.facts dt{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.facts dd{margin:0}

/* Hero media */
.hero-media{margin:0}
.hero-media img{width:100%;aspect-ratio:16/8;object-fit:cover}

/* Overview + steps: label column left, text right */
.block{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding-block:clamp(56px,8vw,120px) 0}
.block > .side{grid-column:1/4;display:grid;gap:10px;align-content:start}
.block > .main{grid-column:4/12;display:grid;gap:clamp(18px,2vw,24px);min-width:0}
.block h2{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 100;font-size:clamp(26px,2.8vw,42px);line-height:1.05;letter-spacing:-.015em;margin:0;text-wrap:balance}
.block p{margin:0;max-width:62ch}
.block .big{font-weight:500;font-size:clamp(20px,1.9vw,26px);line-height:1.35;letter-spacing:-.01em;max-width:44ch}
.step-num{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:.5em;border-top:1px solid var(--fg);width:100%}

/* Media rows */
.media{display:grid;gap:var(--gap);padding-top:clamp(32px,4vw,56px)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
figure{margin:0;display:grid;gap:10px;align-content:start;min-width:0}
figcaption{font-size:15px;line-height:1.45;color:var(--muted);max-width:52ch}
figcaption b{display:block;color:var(--fg);font-weight:600;margin-bottom:2px}
figcaption .n{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);display:block;margin-bottom:4px}
.frame{background:var(--rule);overflow:hidden}
.frame img,.frame video{width:100%;height:100%;object-fit:cover}
.paper{background:var(--paper);padding:clamp(8px,1.2vw,16px)}
.paper img{width:100%;height:auto;object-fit:contain}
.paper.r-4x3 img,.paper.r-1 img{height:100%}
/* Line drawings: no box. White paper disappears into the page (light), lines turn white (dark). */
/* Transparent UI renders: no box, nothing cropped */
.cutout{background:transparent}
.cutout img{width:100%;height:100%;object-fit:contain}
.paper.r-4x3 img{object-fit:contain}
.ink{background:transparent}
.ink img{width:100%;height:auto;object-fit:contain;filter:var(--ink-filter);mix-blend-mode:var(--ink-blend)}
.ink.r-4x3 img{height:100%}
/* single diagrams sit under the text column */
.media.indent{grid-template-columns:repeat(12,minmax(0,1fr))}
.media.indent > figure{grid-column:4/13}
.media.indent > .row-2,.media.indent > .row-3{grid-column:4/13;display:grid;gap:var(--gap)}
.row-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r-16x9{aspect-ratio:16/9}
.r-4x3{aspect-ratio:4/3}
.r-1{aspect-ratio:1/1}

/* Insight: video left, text right */
.insight{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end;padding-top:clamp(32px,4vw,56px)}
.insight figure{grid-column:1/8}
.insight .txt{grid-column:8/13;display:grid;gap:10px;padding-bottom:6px}
.insight h3,.ui-step h3{font-family:var(--body);font-weight:600;font-size:20px;line-height:1.25;margin:0}
.insight p,.ui-step p{margin:0;color:var(--muted);max-width:46ch}

/* UI steps: text left, screens right */
.ui-step{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding-block:clamp(24px,3vw,40px);border-top:1px solid var(--rule)}
.ui-step:first-child{border-top:0}
.ui-step .txt{grid-column:1/5;display:grid;gap:8px;align-content:start}
.ui-step .shots{grid-column:5/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.ui-list{padding-top:clamp(24px,3vw,40px)}
.ui-step .shots.solo figure{grid-column:2}

/* Rules list (Game of Life) */
.rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gap)}
.rules li{padding-block:12px;border-top:1px solid var(--rule);display:grid;grid-template-columns:5.5em 1fr;gap:12px;font-size:15px}
.rules li span{font-family:var(--mono);font-size:12px;color:var(--muted);padding-top:2px}

/* Testimonial */
.quote{margin:clamp(72px,10vw,150px) 0 0;padding-block:clamp(48px,7vw,100px);border-top:1px solid var(--fg);border-bottom:1px solid var(--fg);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.quote blockquote{grid-column:1/12;margin:0;font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 96;font-size:clamp(28px,4vw,62px);line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
.quote blockquote::before{content:"\201C"}
.quote blockquote::after{content:"\201D"}
.quote .more{grid-column:1/8;margin:clamp(12px,2vw,24px) 0 0;color:var(--muted);max-width:62ch}
.quote figcaption{grid-column:1/13;display:flex;align-items:center;gap:16px;margin-top:clamp(16px,2.4vw,32px);color:var(--fg);max-width:none}
.quote figcaption img{width:64px;height:64px;object-fit:cover;flex:none;filter:grayscale(1)}
.quote figcaption div{display:grid;gap:2px;font-family:var(--mono);font-size:13px}
.quote figcaption span{color:var(--muted)}
.ext{display:inline-flex;gap:8px;align-items:center;font-family:var(--mono);font-size:13px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;margin-top:8px}

/* Next project */
.next{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end;padding-block:clamp(56px,8vw,110px);text-decoration:none;border-bottom:1px solid var(--rule)}
.next .txt{grid-column:1/7;display:grid;gap:10px}
.next strong{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 100;font-size:clamp(34px,5vw,80px);line-height:.98;letter-spacing:-.025em;text-wrap:balance}
.next strong::after{content:" \2192";font-weight:400}
.next .frame{grid-column:8/13;aspect-ratio:16/10}
.next .frame img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.next:hover .frame img{transform:scale(1.035)}

.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:28px 40px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.foot a{color:var(--fg)}

/* Click-to-play YouTube */
.video{position:relative}
.yt{all:unset;display:block;cursor:pointer}
.yt:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.yt .frame{display:block;position:relative;background:var(--rule)}
.yt .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.yt:hover .frame img{transform:scale(1.035)}
.play{position:absolute;inset:0;display:grid;place-items:center}
.play i{width:64px;height:64px;border-radius:50%;border:1.5px solid #fff;background:rgba(0,0,0,.55);display:grid;place-items:center;transition:background-color .2s}
.play i::after{content:"";margin-left:5px;border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.yt:hover .play i{background:rgba(0,0,0,.8)}
.video .player{position:relative;aspect-ratio:16/9;background:#000}
.video .player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .blocked{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;background:var(--rule);font-family:var(--mono);font-size:12px;color:var(--muted)}

@media (max-width:900px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .block > .side,.block > .main{grid-column:1/-1}
  .insight figure,.insight .txt{grid-column:1/-1}
  .ui-step .txt,.ui-step .shots{grid-column:1/-1}
  .ui-step .shots.solo figure{grid-column:auto}
  .cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quote blockquote,.quote .more{grid-column:1/-1}
  .next .txt,.next .frame{grid-column:1/-1}
  .rules{grid-template-columns:1fr}
  .media.indent > figure,.media.indent > .row-2,.media.indent > .row-3{grid-column:1/-1}
}
@media (max-width:560px){
  .nav ul li:nth-child(n+2):not(:nth-child(3)){display:none}
  .cols-2,.cols-3,.row-2,.row-3{grid-template-columns:1fr}
  .hero-media img{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){.next .frame img,.yt .frame img{transition:none}}