/* ============================================================================
   adrian.vansloty.com — VanSloty portfolio
   Design system: dark-first, one signal magenta, Barlow + IBM Plex Mono.
   Values reproduced from the Claude Design prototypes (the pixel spec) and the
   design-system readme/tokens. Self-hosted fonts, no external requests.
   ============================================================================ */

/* ── Fonts (self-hosted woff2, latin) ─────────────────────────────────────── */
@font-face { font-family:'Barlow'; src:url('/assets/fonts/barlow/barlow-300.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('/assets/fonts/barlow/barlow-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('/assets/fonts/barlow/barlow-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('/assets/fonts/barlow/barlow-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('/assets/fonts/barlow/barlow-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('/assets/fonts/barlow/barlow-800.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow'; src:url('/assets/fonts/barlow/barlow-900.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('/assets/fonts/plex/plex-mono-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('/assets/fonts/plex/plex-mono-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('/assets/fonts/plex/plex-mono-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --ink-0:#000000; --ink-1:#050507; --ink-2:#0E0E13; --ink-3:#17171E; --ink-4:#22222B;
  --text-1:#F4F2F5; --text-2:#A5A1AC; --text-3:#8B8792; --text-inverse:#0B0B0F;
  --signal:#D6329F; --signal-bright:#EE49B4; --signal-deep:#8E2168;
  --signal-dim:rgba(214,50,159,0.14); --magenta-brand:#C2469C;
  --accent-teal:#4798A1; --accent-violet:#433880;
  --line-1:rgba(244,242,245,0.14); --line-2:rgba(244,242,245,0.07); --line-signal:rgba(214,50,159,0.5);
  --glow-signal:0 0 24px rgba(214,50,159,0.35);
  --font-sans:'Barlow',-apple-system,'Helvetica Neue',sans-serif;
  --font-mono:'IBM Plex Mono','SF Mono','Menlo',monospace;
  --ease-out:cubic-bezier(0.2,0.8,0.2,1);
  --dur-fast:150ms; --dur-base:240ms; --dur-slow:480ms;
  --blur-nav:saturate(1.2) blur(16px);
  --web-max:1200px;
}

/* ── Reset / base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }
body {
  margin:0; background:var(--ink-1); color:var(--text-1);
  font-family:var(--font-sans); font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img, svg { display:block; max-width:100%; }
a { color:var(--text-1); text-decoration-color:var(--signal); text-underline-offset:3px; transition:color var(--dur-fast) var(--ease-out); }
a:hover { color:var(--signal-bright); }
main em { font-style:normal; color:var(--signal); }
::selection { background:var(--signal); color:var(--text-inverse); }
:focus-visible { outline:2px solid var(--signal-bright); outline-offset:3px; }
.vh { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── Layout containers ────────────────────────────────────────────────────── */
.wrap { width:100%; max-width:var(--web-max); margin:0 auto; padding:0 clamp(24px,5vw,64px); box-sizing:border-box; }
.wrap.cta    { max-width:900px; }
.wrap.stack  { max-width:1080px; }
.wrap.mid    { max-width:960px; }
.wrap.narrow { max-width:840px; }
.wrap.prose  { max-width:760px; }

.sec { padding:clamp(88px,12vh,160px) 0; }
.sec.line-top { border-top:1px solid var(--line-2); }
.sec.band { background:var(--ink-2); }
.sec.center { text-align:center; }
.sec.tall { min-height:88vh; display:flex; flex-direction:column; justify-content:center; }

/* ── Shared type ──────────────────────────────────────────────────────────── */
.kick {
  display:flex; align-items:center; gap:10px; margin-bottom:28px;
  font-family:var(--font-mono); font-weight:500; font-size:13px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--signal);
}
.kick::before { content:""; width:24px; height:1px; background:var(--signal); flex:none; }
.sec.center .kick { justify-content:center; }
.lead  { font-weight:300; line-height:1.55; color:var(--text-2); text-wrap:pretty; }
.body  { font-weight:300; line-height:1.6; color:var(--text-2); text-wrap:pretty; }
h1,h2,h3,h4 { text-wrap:balance; overflow-wrap:break-word; }

/* ── Buttons / pills ──────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:999px;
  font-family:var(--font-sans); font-weight:600; font-size:16px; text-decoration:none; cursor:pointer;
  transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  border:1px solid transparent;
}
.btn .g { font-family:var(--font-mono); }
.btn.primary { background:var(--signal); color:var(--text-inverse); border-color:var(--signal); }
.btn.primary:hover { background:var(--signal-bright); border-color:var(--signal-bright); box-shadow:var(--glow-signal); color:var(--text-inverse); }
.btn.ghost { background:transparent; color:var(--text-1); border-color:var(--line-1); }
.btn.ghost:hover { border-color:var(--line-signal); color:var(--signal-bright); }
.btn:active { transform:scale(0.98); }
.btn[aria-disabled="true"] { opacity:0.5; pointer-events:none; }

.link-mono {
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-2); text-decoration:none; border-bottom:1px solid var(--line-signal); padding-bottom:3px;
  transition:color var(--dur-fast) var(--ease-out);
}
.link-mono:hover { color:var(--signal-bright); }

/* ── Reveal on scroll ─────────────────────────────────────────────────────── */
[data-reveal] { opacity:0; transform:translateY(24px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
[data-reveal].is-visible { opacity:1; transform:none; }
@keyframes heroRise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
[data-hero] { opacity:0; animation:heroRise 700ms var(--ease-out) both; }
[data-hero].d1 { animation-delay:130ms; } [data-hero].d2 { animation-delay:260ms; }
[data-hero].d3 { animation-delay:340ms; } [data-hero].d4 { animation-delay:420ms; } [data-hero].d5 { animation-delay:500ms; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity:1 !important; transform:none !important; transition:none !important; }
  [data-hero] { opacity:1 !important; animation:none !important; }
}

/* ── NAV ──────────────────────────────────────────────────────────────────── */
.nav { position:fixed; top:0; left:0; right:0; z-index:200; background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.nav.is-scrolled { background:rgba(5,5,7,0.78); backdrop-filter:var(--blur-nav); -webkit-backdrop-filter:var(--blur-nav); border-bottom-color:var(--line-2); }
.nav__inner { max-width:var(--web-max); margin:0 auto; box-sizing:border-box; padding:0 clamp(20px,5vw,64px);
  height:80px; display:flex; align-items:center; justify-content:space-between; position:relative;
  transition:height var(--dur-base) var(--ease-out); }
.nav.is-scrolled .nav__inner { height:64px; }
.nav__brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav__brand img { height:24px; }
.nav__brand span { font-family:var(--font-sans); font-weight:500; font-size:14px; color:var(--text-1); letter-spacing:0.01em; }
.nav__row { display:flex; align-items:center; gap:28px; }
.nav__link { font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-2); text-decoration:none; transition:color var(--dur-fast) var(--ease-out); }
.nav__link:hover { color:var(--signal-bright); }
.nav__link.is-active { color:var(--signal-bright); }
.nav__cv { font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-1);
  border:1px solid var(--line-1); border-radius:999px; padding:8px 16px; text-decoration:none; white-space:nowrap; transition:border-color var(--dur-fast) var(--ease-out); }
.nav__cv:hover { border-color:var(--line-signal); color:var(--signal-bright); }
.nav__lang { display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; }
.nav__lang .cur { color:var(--signal-bright); }
.nav__lang .div { color:var(--text-3); }
.nav__lang a { color:var(--text-2); text-decoration:none; }
.nav__lang a:hover { color:var(--signal-bright); }
.nav__progress { position:absolute; left:0; bottom:-1px; height:2px; width:var(--progress,0%); background:var(--signal); transition:width 80ms linear; }
.nav__burger { display:none; flex-direction:column; gap:5px; width:32px; height:32px; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer; padding:0; }
.nav__burger span { width:20px; height:1.5px; background:var(--text-1); display:block; transition:transform var(--dur-base) var(--ease-out); }
.nav__panel { display:none; }

@media (max-width:899px) {
  .nav__brand span { display:none; }
  .nav__row { display:none; }
  .nav__burger { display:flex; }
  .nav__panel { position:fixed; top:80px; left:0; right:0; bottom:0; background:var(--ink-1); z-index:199;
    padding:8px clamp(20px,6vw,48px) 32px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:flex-start;
    opacity:0; transform:translateY(-12px); pointer-events:none; overflow-y:auto;
    transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
  .nav.is-scrolled .nav__panel { top:64px; }
  .nav__panel.is-open { opacity:1; transform:none; pointer-events:auto; }
  .nav__panel a.m { font-family:var(--font-sans); font-weight:600; font-size:28px; color:var(--text-1); text-decoration:none; display:block; padding:14px 0; border-bottom:1px solid var(--line-2); }
  .nav__panel a.m.is-active { color:var(--signal-bright); }
  .nav__panel .m-cv { font-family:var(--font-mono); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--signal-bright); text-decoration:none; padding:18px 0; }
  .nav__panel .m-lang { display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:13px; margin-top:8px; }
  .nav__panel .m-lang .cur { color:var(--signal-bright); } .nav__panel .m-lang .div { color:var(--text-3); } .nav__panel .m-lang a { color:var(--text-2); text-decoration:none; }
  .nav.is-open .nav__burger span:nth-child(1) { transform:translateY(3.25px) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2) { transform:translateY(-3.25px) rotate(-45deg); }
}

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.foot { background:var(--ink-1); border-top:1px solid var(--line-2); padding:64px 0 40px; }
.foot__inner { max-width:var(--web-max); margin:0 auto; box-sizing:border-box; padding:0 clamp(20px,5vw,64px); display:flex; flex-direction:column; gap:32px; }
.foot__top { display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center; }
.foot__brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.foot__brand img { height:22px; }
.foot__brand span { font-family:var(--font-sans); font-weight:500; font-size:13px; color:var(--text-2); }
.foot__cta { display:flex; flex-wrap:wrap; gap:24px; align-items:center; }
.foot__email { font-family:var(--font-mono); font-size:13px; color:var(--text-1); text-decoration:none; border-bottom:1px solid var(--line-signal); padding-bottom:2px; }
.foot__social { font-family:var(--font-mono); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-2); text-decoration:none; }
.foot__rule { height:1px; background:var(--line-2); }
.foot__bottom { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; }
.foot__meta { font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-3); }
.foot__legal { display:flex; flex-wrap:wrap; gap:20px; }
.foot__legal a { font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); text-decoration:none; }
.foot__legal a:hover { color:var(--signal-bright); }

/* ── Headline scale (per-section, from prototype clamps) ──────────────────── */
.h-hero { margin:0; font-weight:900; font-size:clamp(40px,8.5vw,132px); line-height:0.92; letter-spacing:-0.025em; color:var(--text-1); }
.h-hero span { display:block; }
.h-problem { margin:0; max-width:15ch; font-weight:800; font-size:clamp(44px,8vw,104px); line-height:0.98; letter-spacing:-0.025em; }
.h-why { margin:0; max-width:20ch; font-weight:800; font-size:clamp(34px,5.4vw,76px); line-height:1.04; letter-spacing:-0.02em; }
.h-position { margin:0; max-width:20ch; font-weight:800; font-size:clamp(32px,5vw,68px); line-height:1.06; letter-spacing:-0.02em; }
.h-58 { margin:0; max-width:20ch; font-weight:800; font-size:clamp(30px,4.6vw,58px); line-height:1.08; letter-spacing:-0.02em; }
.h-value span { display:block; font-weight:800; font-size:clamp(32px,5.2vw,72px); line-height:1.06; letter-spacing:-0.02em; color:var(--text-1); }
.h-cases span { display:block; font-weight:800; font-size:clamp(30px,4.6vw,58px); line-height:1.08; letter-spacing:-0.02em; color:var(--text-1); }
.h-origin span { display:block; font-weight:700; font-size:clamp(28px,4vw,50px); line-height:1.1; letter-spacing:-0.015em; color:var(--text-1); }
.h-profile span { display:block; font-weight:800; font-size:clamp(28px,4.4vw,60px); line-height:1.1; letter-spacing:-0.02em; color:var(--text-1); }
.h-cta { margin:0; font-weight:900; font-size:clamp(40px,7vw,104px); line-height:0.96; letter-spacing:-0.025em; color:var(--text-1); }
.h-page { margin:0; font-weight:900; font-size:clamp(44px,8vw,108px); line-height:0.96; letter-spacing:-0.025em; color:var(--text-1); }
.h-page span { display:block; }

/* ── HOME: hero ───────────────────────────────────────────────────────────── */
.hero { position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:140px 0 96px; overflow:hidden; }
.hero .wrap { position:relative; z-index:2; }
.hero__tag { margin:44px 0 0; max-width:26ch; font-weight:600; font-size:clamp(17px,2.1vw,24px); line-height:1.4; color:var(--text-1); text-wrap:pretty; }
.hero__body { margin:20px 0 0; max-width:32ch; font-weight:300; font-size:clamp(16px,1.8vw,20px); line-height:1.5; color:var(--text-2); text-wrap:pretty; }
.hero__id { margin-top:48px; }
.hero__id .nm { font-weight:600; font-size:15px; color:var(--text-1); }
.hero__id .rl { font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; color:var(--text-3); margin-top:4px; }
.hero__cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; }
.hero__motif { position:absolute; left:0; right:0; bottom:12%; display:flex; justify-content:center; opacity:0.5; pointer-events:none; z-index:1; }
.hero__motif > div { width:min(620px,58vw); }

/* ── HOME: problem ────────────────────────────────────────────────────────── */
.sec--problem { min-height:92vh; display:flex; flex-direction:column; justify-content:center; padding:clamp(96px,14vh,180px) 0; }
.sec--problem .intro { margin:40px 0 0; max-width:36ch; font-weight:500; font-size:clamp(19px,2.2vw,26px); line-height:1.45; color:var(--text-1); text-wrap:pretty; }
.sec--problem .lead { margin:28px 0 0; max-width:52ch; font-size:clamp(16px,1.6vw,19px); }
.sec--problem .plist { margin-top:28px; max-width:52ch; }
.sec--problem .plist p { margin:0 0 12px; font-weight:400; font-size:clamp(16px,1.6vw,19px); line-height:1.55; color:var(--text-2); }
.sec--problem .close1 { margin:32px 0 0; font-weight:600; font-size:clamp(20px,2.4vw,28px); color:var(--text-3); }
.sec--problem .close2 { margin:6px 0 0; font-weight:700; font-size:clamp(22px,2.8vw,32px); color:var(--signal); }

/* ── HOME: why ────────────────────────────────────────────────────────────── */
.sec--why { padding:clamp(80px,12vh,160px) 0; }
.sec--why .lead { margin:32px 0 0; max-width:44ch; font-size:clamp(17px,1.9vw,22px); }
.sec--why .chain-lines { margin-top:18px; max-width:44ch; }
.sec--why .chain-lines p { margin:0 0 8px; font-weight:400; font-size:clamp(16px,1.7vw,20px); line-height:1.5; color:var(--text-2); }
.sec--why .stakes-lead { margin:28px 0 0; font-weight:700; font-size:clamp(19px,2.2vw,26px); color:var(--text-1); }
.sec--why .stakes-body { margin:12px 0 0; max-width:48ch; font-weight:300; font-size:clamp(16px,1.7vw,20px); line-height:1.5; color:var(--text-2); }
.sec--why .stakes-close { margin:6px 0 0; font-weight:700; font-size:clamp(19px,2.2vw,26px); color:var(--signal); }
.rows { margin-top:clamp(48px,7vh,72px); }
.rows .row { padding:28px 0; border-top:1px solid var(--line-1); }
.rows .row h3 { margin:0 0 8px; font-weight:700; font-size:clamp(20px,2.4vw,28px); line-height:1.2; color:var(--text-1); max-width:36ch; }
.rows .row p { margin:0; max-width:52ch; font-weight:300; font-size:clamp(15px,1.6vw,18px); line-height:1.55; color:var(--text-2); }

/* ── HOME: position ───────────────────────────────────────────────────────── */
.sec--position { min-height:80vh; display:flex; flex-direction:column; justify-content:center; padding:clamp(88px,12vh,160px) 0; }
.sec--position .body1 { margin:32px 0 0; max-width:56ch; font-weight:300; font-size:clamp(16px,1.8vw,20px); line-height:1.6; color:var(--text-2); }
.sec--position .body2 { margin:16px 0 0; font-weight:400; font-size:clamp(16px,1.8vw,20px); color:var(--text-2); }
.sec--position .clo1 { margin:32px 0 0; font-weight:600; font-size:clamp(17px,1.9vw,21px); color:var(--text-1); }
.sec--position .clo2 { margin:10px 0 0; max-width:56ch; font-weight:300; font-size:clamp(16px,1.8vw,20px); line-height:1.55; color:var(--text-2); }
blockquote.q { margin:32px 0 0; padding-left:22px; border-left:2px solid var(--line-signal); font-weight:500; font-size:clamp(19px,2.2vw,27px); line-height:1.45; color:var(--text-1); font-style:normal; }

/* ── HOME: translation stack ──────────────────────────────────────────────── */
.sec--stack { min-height:92vh; display:flex; flex-direction:column; justify-content:center; padding:clamp(96px,14vh,180px) 0; text-align:center; background:var(--ink-2); }
.sec--stack .lead { margin:0 auto 8px; max-width:44ch; font-size:clamp(15px,1.6vw,18px); line-height:1.5; color:var(--text-3); }
.sec--stack .subline { margin:44px auto 0; max-width:34ch; font-weight:300; font-size:clamp(18px,2.2vw,26px); line-height:1.4; color:var(--text-2); text-wrap:balance; }
.sec--stack .chain-wrap { width:100%; max-width:860px; margin:40px auto 0; display:flex; justify-content:center; }
.stack-grid { margin-top:clamp(56px,8vh,88px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,32px); text-align:left; }
.stack-grid .node { padding:24px 0 0; border-top:2px solid var(--line-signal); }
.stack-grid .node .hd { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.stack-grid .node .hd .n { font-family:var(--font-mono); font-size:12px; color:var(--signal); }
.stack-grid .node .hd h3 { margin:0; font-weight:700; font-size:20px; color:var(--text-1); }
.stack-grid .node .q { margin:0 0 8px; font-weight:300; font-size:14px; line-height:1.5; color:var(--text-2); }
.stack-grid .node .tag { margin:14px 0 0; font-family:var(--font-mono); font-size:11px; letter-spacing:0.05em; color:var(--text-3); line-height:1.5; }

/* ── HOME: method ─────────────────────────────────────────────────────────── */
.sec--method { padding:clamp(88px,12vh,160px) 0; }
.method-rows { margin-top:clamp(40px,6vh,64px); }
.method-rows .row { padding:28px 0; border-top:1px solid var(--line-1); }
.method-rows .row .hd { display:flex; align-items:baseline; gap:16px; margin-bottom:10px; }
.method-rows .row .hd .n { font-family:var(--font-mono); font-size:13px; color:var(--signal); }
.method-rows .row .hd h3 { margin:0; font-weight:700; font-size:clamp(21px,2.6vw,30px); line-height:1.2; color:var(--text-1); }
.method-rows .row p { margin:0; max-width:56ch; font-weight:300; font-size:clamp(15px,1.6vw,18px); line-height:1.6; color:var(--text-2); }

/* ── HOME: how ────────────────────────────────────────────────────────────── */
.how-grid { margin-top:clamp(40px,6vh,64px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(28px,4vw,40px); }
.how-grid .col { padding-top:22px; border-top:1px solid var(--line-1); }
.how-grid .col h3 { margin:0 0 10px; font-weight:700; font-size:clamp(19px,2.2vw,25px); color:var(--signal-bright); }
.how-grid .col p { margin:0; font-weight:300; font-size:clamp(14px,1.5vw,16px); line-height:1.6; color:var(--text-2); }

/* ── HOME: value ──────────────────────────────────────────────────────────── */
.sec--value { padding:clamp(96px,14vh,180px) 0; background:var(--ink-2); }
.sec--value h2 { margin:0 0 clamp(36px,5vh,56px); }
.sec--value .lead { margin:0 0 clamp(40px,6vh,64px); max-width:56ch; font-size:clamp(17px,1.9vw,22px); }
.value-grid { display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(32px,6vw,88px); }
.value-grid .cell { padding:24px 0; border-top:1px solid var(--line-1); }
.value-grid .cell h3 { margin:0 0 8px; font-weight:600; font-size:clamp(19px,2.2vw,25px); color:var(--text-1); }
.value-grid .cell p { margin:0; font-weight:300; font-size:clamp(15px,1.6vw,17px); line-height:1.5; color:var(--text-2); }

/* ── HOME: cases teaser ───────────────────────────────────────────────────── */
.sec--cases { padding:clamp(96px,14vh,180px) 0; }
.sec--cases h2 { margin:0 0 28px; }
.sec--cases .lead { margin:0; font-size:clamp(16px,1.8vw,20px); }
.sec--cases .bridge { margin:6px 0 0; font-weight:400; font-size:clamp(16px,1.8vw,20px); color:var(--text-2); }
.sec--cases .emph { margin:10px 0 clamp(48px,7vh,72px); max-width:52ch; font-weight:600; font-size:clamp(18px,2.1vw,25px); line-height:1.4; color:var(--text-1); }
.case-list { display:flex; flex-direction:column; gap:clamp(32px,5vw,52px); }

/* ── Case card (shared: home + cases index) ───────────────────────────────── */
.ccard { display:flex; flex-direction:row; gap:40px; text-decoration:none; color:inherit; padding:0 0 40px; border-bottom:1px solid var(--line-1); transition:border-color var(--dur-base) var(--ease-out); }
.ccard:hover { border-color:var(--line-signal); }
.ccard__visual { flex:0 0 42%; aspect-ratio:4/3; background:var(--ink-2); border:1px solid var(--line-1); overflow:hidden; }
.ccard__info { flex:1 1 auto; display:flex; flex-direction:column; gap:14px; justify-content:center; min-width:0; }
.ccard__badge { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.ccard__num { font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--signal); }
.ccard__title { margin:0; font-weight:700; font-size:clamp(26px,3vw,38px); line-height:1.1; color:var(--text-1); }
.ccard__meta { margin:0; font-weight:600; font-size:14px; line-height:1.4; color:var(--text-2); max-width:42ch; }
.ccard__thesis { margin:0; font-weight:300; font-size:17px; line-height:1.5; color:var(--text-2); max-width:46ch; }
.ccard__proof { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:2px; }
.ccard__proof span { font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-3); }
.ccard__hint { font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); }

/* ── HOME: origin ─────────────────────────────────────────────────────────── */
.sec--origin { padding:clamp(72px,10vh,128px) 0; }
.sec--origin h2 { margin:0 0 clamp(36px,5vh,56px); }
.origin-grid { display:flex; flex-wrap:wrap; gap:clamp(28px,5vw,56px); align-items:flex-start; }
.origin-grid .portrait { flex:0 0 auto; width:min(220px,54%); aspect-ratio:4/5; overflow:hidden; border:1px solid var(--line-1); }
.origin-grid .portrait img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(0.92); }
.origin-grid .txt { flex:1 1 320px; min-width:280px; }
.origin-grid .txt p { margin:0 0 12px; font-weight:400; font-size:clamp(16px,1.7vw,20px); line-height:1.5; color:var(--text-2); }
.origin-grid .txt .punch { margin:6px 0 0; font-weight:700; font-size:clamp(18px,2vw,24px); color:var(--signal); }
.origin-grid .txt .bridge { margin:28px 0 0; font-weight:400; font-size:15px; color:var(--text-3); }
.origin-grid .txt .emph { margin:8px 0 0; font-weight:600; font-size:clamp(18px,2vw,23px); line-height:1.4; color:var(--text-1); }
.origin-grid .txt .clo { margin:6px 0 0; font-weight:300; font-size:15px; color:var(--text-2); }

/* ── HOME: profile ────────────────────────────────────────────────────────── */
.sec--profile { padding:clamp(88px,12vh,160px) 0; }
.sec--profile h2 { margin:0 0 clamp(36px,5vh,56px); }
.sec--profile .lead { margin:0 0 clamp(32px,5vh,48px); font-weight:500; font-size:16px; color:var(--text-3); }
.profile-rows .row { display:flex; flex-wrap:wrap; gap:8px 32px; padding:22px 0; border-top:1px solid var(--line-1); }
.profile-rows .row h3 { margin:0; flex:0 0 auto; width:100%; max-width:280px; font-weight:700; font-size:clamp(17px,1.9vw,20px); color:var(--text-1); }
.profile-rows .row p { margin:0; flex:1 1 280px; font-weight:300; font-size:clamp(15px,1.6vw,17px); line-height:1.5; color:var(--text-2); }

/* ── HOME: final CTA ──────────────────────────────────────────────────────── */
.sec--cta { min-height:88vh; display:flex; flex-direction:column; justify-content:center; padding:clamp(96px,14vh,180px) 0; text-align:center; background:var(--ink-2); }
.sec--cta .cta-motif { display:flex; justify-content:center; margin-bottom:clamp(40px,6vh,64px); }
.sec--cta .cta-motif > div { width:min(480px,80%); }
.sec--cta .note { margin:24px 0 0; font-weight:400; font-size:clamp(16px,1.8vw,20px); color:var(--text-2); }
.sec--cta .cta-actions { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:clamp(40px,6vh,56px); }

/* ── Chain motif (signal bars) ────────────────────────────────────────────── */
.chain { display:flex; flex-direction:row; align-items:flex-start; gap:6px; width:100%; }
.chain.latent { opacity:0.7; }
.chain__node { display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 auto; }
.chain__dot { width:22px; height:22px; border-radius:999px; flex:none; background:var(--ink-2); border:1px solid var(--line-1);
  transition:background 420ms var(--ease-out), box-shadow 420ms var(--ease-out), border-color 420ms var(--ease-out); }
.chain__label { font-family:var(--font-mono); font-weight:500; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); white-space:nowrap; transition:color 420ms var(--ease-out); }
.chain__bar { flex:1 1 auto; min-width:16px; height:2px; background:var(--line-1); border-radius:999px; position:relative; overflow:hidden; align-self:flex-start; margin-top:10px; }
.chain.latent .chain__bar { background:var(--line-2); opacity:0.6; }
.chain__bar i { position:absolute; inset:0; background:var(--signal); transform-origin:left; transform:scaleX(0); transition:transform 420ms var(--ease-out); }
/* active states */
.chain__node.on .chain__dot { background:var(--signal); border-color:transparent; }
.chain__node.on .chain__label { color:var(--text-1); }
.chain__bar.on i { transform:scaleX(1); }
/* glow only when resolved/drawing (not in badge) */
.chain.glow .chain__node.on .chain__dot { box-shadow:var(--glow-signal); }
/* drawing mode: reveal via .is-drawn added by JS on scroll */
.chain.draw .chain__node .chain__dot { background:var(--ink-2); border-color:var(--line-1); box-shadow:none; }
.chain.draw .chain__bar i { transform:scaleX(0); }
.chain.draw.is-drawn .chain__node .chain__dot { background:var(--signal); border-color:transparent; box-shadow:var(--glow-signal); }
.chain.draw.is-drawn .chain__bar i { transform:scaleX(1); }
.chain.draw.is-drawn .chain__node .chain__label { color:var(--text-1); }
.chain.draw .chain__node:nth-child(1) .chain__dot { transition-delay:0ms; }
.chain.draw .chain__node:nth-child(3) .chain__dot { transition-delay:200ms; }
.chain.draw .chain__node:nth-child(5) .chain__dot { transition-delay:400ms; }
.chain.draw .chain__bar:nth-child(2) i { transition-delay:90ms; }
.chain.draw .chain__bar:nth-child(4) i { transition-delay:290ms; }
.chain.draw .chain__bar:nth-child(6) i { transition-delay:490ms; }
/* badge (small, inside case cards) */
.chain.badge { gap:3px; width:auto; }
.chain.badge .chain__dot { width:11px; height:11px; }
.chain.badge .chain__bar { min-width:8px; height:1px; margin-top:5px; }
@media (prefers-reduced-motion: reduce) {
  .chain.draw .chain__node .chain__dot { background:var(--signal); border-color:transparent; }
  .chain.draw .chain__bar i { transform:scaleX(1); }
  .chain.draw .chain__node .chain__label { color:var(--text-1); }
}

/* ── Media placeholder (missing imagery) ──────────────────────────────────── */
.slot { display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height:120px;
  background:repeating-linear-gradient(135deg, var(--ink-2), var(--ink-2) 12px, var(--ink-3) 12px, var(--ink-3) 24px);
  border:1px dashed var(--line-1); color:var(--text-3); }
.slot span { font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; text-align:center; padding:12px; }
.ccard__visual .slot { border:none; }

/* ── Generic page header (interior pages) ─────────────────────────────────── */
.page-head { padding:clamp(140px,20vh,220px) 0 clamp(24px,5vh,48px); }
.page-head .intro { margin:36px 0 0; max-width:52ch; font-weight:300; font-size:clamp(17px,2vw,22px); line-height:1.55; color:var(--text-2); text-wrap:pretty; }
.page-head .intro2 { margin:14px 0 0; max-width:52ch; font-weight:400; font-size:clamp(16px,1.8vw,20px); line-height:1.5; color:var(--text-2); }

/* ── Cases index ──────────────────────────────────────────────────────────── */
.cases-steps { margin:20px 0 0; display:flex; flex-direction:column; gap:6px; }
.cases-steps p { margin:0; font-weight:600; font-size:clamp(17px,1.9vw,22px); color:var(--text-1); }
.cases-list { padding:clamp(48px,7vh,80px) 0 clamp(96px,14vh,180px); display:flex; flex-direction:column; gap:clamp(36px,5vw,60px); }

/* ── Case detail ──────────────────────────────────────────────────────────── */
.case-hero { padding:clamp(128px,18vh,200px) 0 clamp(48px,7vh,88px); }
.case-hero .back { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); text-decoration:none; margin-bottom:40px; }
.case-hero .back:hover { color:var(--signal-bright); }
.case-hero .kicker { font-family:var(--font-mono); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--signal); margin-bottom:24px; }
.case-hero h1 { margin:0; max-width:18ch; font-weight:900; font-size:clamp(40px,7.5vw,104px); line-height:0.96; letter-spacing:-0.025em; color:var(--text-1); }
.case-hero .sub { margin:32px 0 0; max-width:48ch; font-weight:600; font-size:clamp(16px,1.9vw,21px); line-height:1.4; color:var(--text-2); text-wrap:pretty; }
.case-hero .chainbox { margin-top:clamp(40px,6vh,64px); max-width:520px; }
.case-hero .chainbox .proves { display:block; margin-top:16px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-3); }

.case-body-sec { padding:clamp(24px,4vh,48px) 0 clamp(64px,9vh,120px); border-top:1px solid var(--line-2); }
.case-body { display:grid; grid-template-columns:210px 1fr; gap:clamp(32px,5vw,72px); align-items:start; }
.case-rail { position:sticky; top:120px; display:flex; flex-direction:column; gap:2px; }
.case-rail a { display:flex; gap:10px; align-items:baseline; padding:9px 0 9px 14px; text-decoration:none; font-family:var(--font-sans); font-weight:500; font-size:14px; color:var(--text-3); border-left:2px solid var(--line-2); transition:color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.case-rail a .n { font-family:var(--font-mono); font-size:12px; color:var(--text-3); }
.case-rail a:hover { color:var(--text-1); }
.case-rail a.is-active { color:var(--text-1); border-left-color:var(--signal); }
.case-rail a.is-active .n { color:var(--signal); }
.case-content { min-width:0; }
.case-sec { padding:clamp(40px,6vh,64px) 0; border-top:1px solid var(--line-2); }
.case-sec.first { padding:0 0 clamp(40px,6vh,64px); border-top:none; }
.case-sec .hd { display:flex; align-items:baseline; gap:16px; margin-bottom:18px; }
.case-sec .hd .n { font-family:var(--font-mono); font-size:13px; color:var(--signal); }
.case-sec .hd h2 { margin:0; font-weight:700; font-size:clamp(24px,3.2vw,40px); line-height:1.05; letter-spacing:-0.015em; color:var(--text-1); }
.case-sec p { margin:0 0 18px; max-width:58ch; font-weight:300; font-size:clamp(16px,1.8vw,21px); line-height:1.65; color:var(--text-2); text-wrap:pretty; }
.case-sec h3 { margin:6px 0 22px; max-width:22ch; font-weight:700; font-size:clamp(22px,2.8vw,34px); line-height:1.18; letter-spacing:-0.01em; color:var(--text-1); }
.case-sec blockquote.q { margin:8px 0 18px; max-width:52ch; font-size:clamp(18px,2vw,23px); padding-left:20px; }
.case-sec ul { margin:4px 0 18px; padding:0; list-style:none; }
.case-sec ul li { margin:0; font-weight:400; font-size:clamp(16px,1.7vw,19px); line-height:1.7; color:var(--text-2); }
.case-sec .labeled { margin:4px 0 18px; display:flex; flex-direction:column; gap:14px; }
.case-sec .labeled .item { padding-left:16px; border-left:2px solid var(--line-1); }
.case-sec .labeled .item .k { font-weight:600; font-size:15px; color:var(--text-1); margin-bottom:3px; }
.case-sec .labeled .item .v { font-weight:300; font-size:15px; line-height:1.5; color:var(--text-2); max-width:52ch; }
.case-ev { margin:0 0 clamp(32px,5vh,56px); }
.case-ev .frame { width:100%; aspect-ratio:16/9; border:1px solid var(--line-1); background:var(--ink-2); overflow:hidden; }
.case-ev .lbl { display:block; margin-top:10px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); }
.case-ev.two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.case-ev.two .frame { aspect-ratio:4/3; }
.case-proof { padding:clamp(40px,6vh,64px) 0 0; border-top:1px solid var(--line-2); }
.case-proof .lbl { font-family:var(--font-mono); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-3); }
.case-proof .items { display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:20px; }
.case-proof .items span { font-weight:500; font-size:clamp(18px,2.2vw,28px); color:var(--text-1); }
.case-next { display:block; padding:clamp(48px,8vh,96px) 0; border-top:1px solid var(--line-1); text-decoration:none; color:inherit; transition:background var(--dur-base) var(--ease-out); }
.case-next:hover { background:var(--ink-2); }
.case-next .lbl { font-family:var(--font-mono); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-3); }
.case-next .row { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:18px; }
.case-next .row .n { font-family:var(--font-mono); font-size:13px; letter-spacing:0.1em; color:var(--signal); }
.case-next .row h2 { margin:8px 0 0; font-weight:800; font-size:clamp(30px,5vw,68px); line-height:1.0; letter-spacing:-0.02em; color:var(--text-1); }
.case-next .arr { display:flex; align-items:center; gap:28px; }
.case-next .arr .chainmini { width:180px; }
.case-next .arr .big { font-size:clamp(28px,4vw,48px); color:var(--signal); font-family:var(--font-mono); }

/* ── Gallery (text-cell grid) ─────────────────────────────────────────────── */
.gallery-epigraph { margin:36px 0 0; max-width:52ch; padding-left:20px; border-left:2px solid var(--line-signal); font-weight:300; font-size:clamp(17px,2vw,24px); line-height:1.55; color:var(--text-2); text-wrap:pretty; }
.gallery-wrap { padding:0 0 clamp(96px,14vh,180px); display:flex; flex-direction:column; gap:clamp(56px,9vh,112px); }
.gallery-group__head { display:flex; align-items:baseline; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--line-1); }
.gallery-group__head .roman { font-family:var(--font-mono); font-size:13px; letter-spacing:0.12em; color:var(--signal); }
.gallery-group__head h2 { margin:0; font-weight:700; font-size:clamp(26px,3.6vw,46px); line-height:1.05; letter-spacing:-0.02em; color:var(--text-1); }
.gallery-group .desc { margin:20px 0 28px; max-width:56ch; font-weight:300; font-size:clamp(15px,1.7vw,19px); line-height:1.55; color:var(--text-2); text-wrap:pretty; }
.gallery-cells { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
.gallery-cell { background:var(--ink-2); padding:22px 20px; min-height:100px; display:flex; flex-direction:column; justify-content:center; gap:6px; }
.gallery-cell .nm { font-weight:600; font-size:16px; color:var(--text-1); }
.gallery-cell .sub { font-weight:300; font-size:13px; line-height:1.4; color:var(--text-3); }

/* ── Downloads ────────────────────────────────────────────────────────────── */
.dl-wrap { padding:0 0 clamp(96px,14vh,180px); }
.dl-list { border-top:1px solid var(--line-1); }
.dl-row { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:clamp(24px,3.5vw,32px) 0; border-bottom:1px solid var(--line-1); }
.dl-row .info { display:flex; flex-direction:column; gap:6px; min-width:0; flex:1 1 auto; }
.dl-row .info .h { font-weight:700; font-size:clamp(19px,2.3vw,27px); color:var(--text-1); }
.dl-row .info .sub { font-weight:600; font-size:14px; color:var(--text-2); }
.dl-row .info .desc { font-weight:300; font-size:15px; line-height:1.4; color:var(--text-2); max-width:52ch; }
.dl-row .info .meta { font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); margin-top:2px; }
.dl-row .act { flex:none; font-family:var(--font-mono); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); padding-top:4px; white-space:nowrap; }

/* ── Contact (left-aligned, vertically centered) ──────────────────────────── */
.contact { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:clamp(128px,18vh,200px) 0 clamp(80px,12vh,140px); }
.contact h1 { margin:0; max-width:16ch; font-weight:900; font-size:clamp(44px,8vw,108px); line-height:0.96; letter-spacing:-0.025em; color:var(--text-1); }
.contact .who { margin-top:40px; }
.contact .who .nm { font-weight:600; font-size:16px; color:var(--text-1); }
.contact .who .rl { font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em; color:var(--text-3); margin-top:4px; }
.contact .tagline { margin-top:24px; }
.contact .tagline p { margin:0 0 4px; font-weight:400; font-size:clamp(17px,1.9vw,21px); color:var(--text-2); }
.contact .actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:44px; }
.contact .metarow { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:48px; padding-top:28px; border-top:1px solid var(--line-1); }
.contact .metarow span { font-family:var(--font-mono); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); }
.contact .note { margin:14px 0 0; font-weight:400; font-size:14px; color:var(--text-2); }

/* ── Legal ────────────────────────────────────────────────────────────────── */
.legal { padding:clamp(140px,20vh,220px) 0 clamp(96px,14vh,180px); }
.legal h1 { margin:0; font-weight:800; font-size:clamp(32px,6vw,72px); line-height:1.0; letter-spacing:-0.02em; color:var(--text-1); hyphens:auto; }
.legal .note { margin:24px 0 0; padding:14px 18px; border:1px solid var(--line-1); border-left:2px solid var(--line-signal); font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; line-height:1.5; color:var(--text-3); }
.legal .body { margin-top:clamp(40px,6vh,64px); display:flex; flex-direction:column; gap:clamp(28px,4vh,40px); }
.legal .body h2 { margin:0 0 10px; font-weight:600; font-size:clamp(17px,1.8vw,21px); letter-spacing:0.01em; color:var(--text-1); }
.legal .body p { margin:0; font-weight:300; font-size:clamp(15px,1.6vw,18px); line-height:1.65; color:var(--text-2); white-space:pre-line; text-wrap:pretty; }

/* ── Responsive collapses (<900px) ────────────────────────────────────────── */
@media (max-width:899px) {
  .stack-grid, .how-grid, .value-grid, .gallery-cells { grid-template-columns:1fr; }
  .ccard { flex-direction:column; gap:20px; padding-bottom:24px; }
  .ccard__visual { flex:0 0 auto; }
  .ccard__title { font-size:24px; }
  .chain:not(.badge) { flex-direction:column; align-items:flex-start; gap:10px; }
  .chain:not(.badge) .chain__node { flex-direction:row; }
  .chain:not(.badge) .chain__bar { min-width:0; min-height:16px; width:2px; height:auto; margin-top:0; margin-left:10px; align-self:flex-start; }
  .chain:not(.badge) .chain__bar i { transform-origin:top; transform:scaleX(1) scaleY(0); }
  .chain:not(.badge) .chain__bar.on i { transform:scaleY(1); }
  .chain.draw:not(.badge) .chain__bar i { transform:scaleY(0); }
  .chain.draw.is-drawn:not(.badge) .chain__bar i { transform:scaleY(1); }
  .sec--stack .chain-wrap { justify-content:flex-start; }
  .case-body { grid-template-columns:1fr; }
  .case-rail { display:none; }
  .case-ev.two { grid-template-columns:1fr; }
  .case-next .arr .chainmini { display:none; }
  .case-next .row h2 { font-size:clamp(28px,7vw,44px); }
}