/* ── kaprera · case-study pages · shared styles ──────────────────────────
   Vanilla CSS, no build. Brand tokens mirror the main site. Light + dark. */

:root{
  --blue:#008cc1; --blue-ink:#0a6f97;
  --ink:#0a0a0a; --bg:#ffffff; --panel:#fafafa;
  --muted:#5a5f66; --hair:#e6e6e6;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace;
  --wrap:1060px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#f2f3f4; --bg:#0a0b0c; --panel:#141618;
    --muted:#9aa1a8; --hair:#23262a; --blue-ink:#4bb6df;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}

/* ── nav ── */
.nav{
  position:sticky; top:0; z-index:10;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--hair);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{font-family:var(--mono); font-weight:700; text-decoration:none; letter-spacing:.02em}
.brand .mk{color:var(--blue); margin-right:.4em}
.crumb{font-family:var(--mono); font-size:13px; color:var(--muted); text-decoration:none}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--blue-ink)}
.crumb .sep{opacity:.5; margin:0 .45em}

/* ── hero ── */
.hero{padding:64px 0 8px}
.eyebrow{font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--blue-ink); text-transform:lowercase; display:inline-flex; gap:.5em; align-items:center}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--blue)}
h1{font-size:clamp(34px,5.4vw,58px); line-height:1.05; letter-spacing:-.02em; font-weight:800; margin:.35em 0 .2em}
.lede{font-size:clamp(18px,2.3vw,22px); color:var(--muted); max-width:60ch; margin:0 0 22px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px}
.chip{font-family:var(--mono); font-size:12px; padding:5px 11px; border:1px solid var(--hair); border-radius:999px; color:var(--muted)}
.actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; text-decoration:none; padding:12px 20px; border-radius:12px; border:1px solid transparent; transition:transform .15s ease, background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:#0079a8; color:#fff} /* brand blue-dark: passes WCAG AA (4.88:1) on white */
.btn-ghost{border-color:var(--hair); color:var(--ink)}
.btn svg{width:16px; height:16px}

/* ── figure ── */
.shot{margin:34px 0 8px; border:1px solid var(--hair); border-radius:18px; overflow:hidden; background:var(--panel)}
.shot img{width:100%}
figcaption{font-family:var(--mono); font-size:12px; color:var(--muted); padding:10px 4px 0}

/* ── sections ── */
section.blk{padding:44px 0; border-top:1px solid var(--hair)}
.label{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--muted); text-transform:lowercase}
h2{font-size:clamp(24px,3.4vw,34px); letter-spacing:-.01em; font-weight:750; margin:.35em 0 .6em}
.two{display:grid; grid-template-columns:1fr 1fr; gap:34px}
.two .two-h{font-size:15px; font-family:var(--mono); font-weight:600; color:var(--blue-ink); text-transform:lowercase; margin:0 0 8px}
.two p{margin:0; color:var(--ink)}

ul.hl{list-style:none; padding:0; margin:0; display:grid; gap:12px}
ul.hl li{position:relative; padding-left:30px; color:var(--ink)}
ul.hl li::before{content:""; position:absolute; left:6px; top:.72em; width:9px; height:9px; border-radius:2px; background:var(--blue); transform:rotate(45deg)}

dl.specs{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:14px; overflow:hidden; margin:0}
dl.specs>div{background:var(--bg); padding:16px 18px}
dl.specs dt{font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--muted); text-transform:uppercase; margin:0 0 4px}
dl.specs dd{margin:0; font-weight:600}

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.stat{border:1px solid var(--hair); border-radius:14px; padding:22px 18px; background:var(--panel)}
.stat .big{font-size:clamp(26px,3.6vw,38px); font-weight:800; letter-spacing:-.02em; color:var(--blue-ink); line-height:1}
.stat .small{display:block; margin-top:8px; font-size:14px; color:var(--muted)}
.note{font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:14px}

/* ── more work ── */
.more{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.more-card{display:flex; flex-direction:column; gap:6px; text-decoration:none; border:1px solid var(--hair); border-radius:14px; padding:20px 18px; background:var(--panel); transition:transform .15s ease, border-color .15s ease}
.more-card:hover{transform:translateY(-2px); border-color:var(--blue)}
.more-name{font-weight:700; letter-spacing:-.01em}
.more-type{font-family:var(--mono); font-size:12px; color:var(--muted)}

/* ── cta ── */
.cta{text-align:center; padding:56px 0}
.cta h2{margin-bottom:18px}
.cta .actions{justify-content:center}

/* ── footer ── */
footer{border-top:1px solid var(--hair); padding:30px 0; margin-top:20px}
footer .wrap{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between}
footer .fbrand{font-family:var(--mono); font-weight:700}
footer .fbrand .mk{color:var(--blue)}
footer nav{display:flex; gap:18px}
footer nav a{font-size:14px; color:var(--muted); text-decoration:none}
footer nav a:hover{color:var(--blue-ink)}
footer .cc{font-size:13px; color:var(--muted); width:100%}

@media (max-width:720px){
  .two{grid-template-columns:1fr; gap:22px}
  .stats{grid-template-columns:1fr}
  dl.specs{grid-template-columns:1fr}
  .more{grid-template-columns:1fr}
}