/* ── case-study pages ──────────────────────────────────── */ /* each case study carries its own accent, set on */ body.case-los{--accent:#5aa9ff;--accent-rgb:90,169,255} body.case-rec{--accent:#a78bff;--accent-rgb:167,139,255} .case-hero{ position:relative;overflow:hidden; max-width:var(--maxw);margin-inline:auto; padding:clamp(130px,18vh,190px) var(--shell) clamp(40px,6vw,72px); } .case-hero .case-hero-bg{ position:absolute;inset:0;z-index:0;pointer-events:none; } .case-hero-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .case-hero-bg::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,var(--ink) 3%,rgba(6,10,15,.42) 48%,transparent 92%); } .case-hero>*:not(.case-hero-bg){position:relative;z-index:1} .case-hero::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(56% 90% at 12% 0%,rgba(var(--accent-rgb),.10),transparent 72%); } .callout{border-color:rgba(var(--accent-rgb),.22)} .back{ display:inline-flex;align-items:center;gap:9px; font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--dim); transition:color .3s,gap .35s var(--ease-out); } .back:hover{color:var(--accent);gap:14px} .case-kicker{ display:flex;flex-wrap:wrap;align-items:center;gap:12px; margin-top:clamp(28px,5vw,52px); font-family:var(--ff-mono);font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--accent); } .case-kicker b{width:22px;height:1px;background:var(--line);display:block} .case-kicker span:last-child{color:var(--faint)} .case-title{ font-family:var(--ff-display);font-weight:800; font-size:clamp(34px,7.2vw,104px);line-height:.94; letter-spacing:-.042em;margin:22px 0 0;max-width:16ch; } .case-lede{ margin-top:26px;max-width:60ch; font-size:clamp(15px,1.5vw,19px);color:var(--dim); } .case-facts{ display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px;background:var(--line-soft); border:1px solid var(--line-soft);border-radius:14px;overflow:hidden; max-width:var(--maxw);margin:0 auto; } .case-facts>div{background:var(--ink);padding:24px 26px} .case-facts dt{ font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--faint); } .case-facts dd{margin:10px 0 0;font-size:15px;font-weight:500} .case-wrap{ max-width:var(--maxw);margin-inline:auto; padding:clamp(56px,8vw,104px) var(--shell); } .case-visual{ position:relative;border:1px solid var(--line-soft);border-radius:20px; overflow:hidden;aspect-ratio:21/9;min-height:260px; background:linear-gradient(160deg,var(--panel),var(--ink-2)); margin-bottom:clamp(48px,7vw,88px); } .case-visual canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .case-visual-label{ position:absolute;z-index:2;top:22px;left:24px; font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--dim); } .case-body{ display:grid;grid-template-columns:minmax(160px,.28fr) minmax(0,1fr); gap:clamp(24px,5vw,80px);align-items:start; } .case-toc{ position:sticky;top:110px; font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase; } .case-toc li{padding:9px 0;border-bottom:1px solid var(--line-soft)} .case-toc a{color:var(--faint);transition:color .3s} .case-toc a:hover{color:var(--accent)} .case-prose h2{ font-family:var(--ff-display);font-weight:700; font-size:clamp(22px,2.7vw,38px);letter-spacing:-.03em;line-height:1.1; margin:clamp(42px,5vw,68px) 0 18px; } .case-prose h2:first-child{margin-top:0} .case-prose p{color:var(--dim);font-size:clamp(15px,1.35vw,17.5px);max-width:66ch;margin-bottom:18px} .case-prose ul{margin:18px 0 22px;max-width:60ch} .case-prose ul li{ position:relative;padding-left:26px;margin-bottom:12px; color:var(--dim);font-size:15.5px; } .case-prose ul li::before{ content:"";position:absolute;left:2px;top:.62em; width:9px;height:1px;background:var(--accent); } .callout{ border:1px solid var(--line-soft);border-radius:16px; background:linear-gradient(160deg,var(--panel),var(--ink-2)); padding:clamp(24px,3vw,38px);margin:34px 0; max-width:60ch; } .callout span{ font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--accent); } .callout strong{ display:block;font-family:var(--ff-display);font-weight:800; font-size:clamp(34px,5vw,62px);line-height:1;letter-spacing:-.04em; margin:14px 0 12px;color:var(--fg); } .callout p{margin:0;color:var(--dim);font-size:14.5px} .note{ border-left:2px solid var(--line);padding-left:20px; font-size:13.5px;color:var(--faint);max-width:62ch;margin:32px 0; } .case-next{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:22px;max-width:var(--maxw);margin-inline:auto; padding:clamp(40px,6vw,72px) var(--shell) clamp(56px,8vw,96px); border-top:1px solid var(--line-soft); } .case-next-label{ font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--faint);display:block;margin-bottom:10px; } .case-next a.next-title{ font-family:var(--ff-display);font-weight:700; font-size:clamp(22px,3.4vw,44px);letter-spacing:-.03em;line-height:1.08; display:inline-flex;align-items:center;gap:16px; transition:color .3s,gap .4s var(--ease-out); } .case-next a.next-title:hover{color:var(--accent);gap:24px} @media (max-width:900px){ .case-body{grid-template-columns:1fr} .case-toc{position:static;display:flex;flex-wrap:wrap;gap:8px} .case-toc li{border:1px solid var(--line-soft);border-radius:99px;padding:8px 14px} .case-visual{aspect-ratio:4/3} }