:root{
  --paper:#f4f1ea;--paper-2:#ebe7dd;--ink:#1c1a16;--ink-soft:#4a463d;--ink-faint:#8a8579;
  --line:#d6d0c4;--line-strong:#bdb6a6;--accent:#7a2e22;--accent-soft:#9c5347;
  --david:#e8e3d7;--henrik:#2f3a3f;--henrik-text:#f4f1ea;--ok:#3f5e3a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'IBM Plex Sans',sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.mono{font-family:'IBM Plex Mono',monospace}.serif{font-family:'Newsreader',serif}
.wrap{width:min(940px,92vw);margin:0 auto}
a{color:var(--accent)}

/* GATE */
#gate{position:fixed;inset:0;z-index:1000;background:linear-gradient(180deg,var(--paper),var(--paper-2));display:flex;align-items:center;justify-content:center}
.gate-card{width:min(440px,90vw);text-align:center;padding:0 24px}
.gate-seal{width:54px;height:54px;border:1.5px solid var(--line-strong);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 26px;font-family:'Newsreader',serif;font-size:24px;color:var(--accent);background:var(--paper)}
.gate-card h1{font-family:'Newsreader',serif;font-weight:500;font-size:25px;margin-bottom:8px}
.gate-card .case{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase;margin-bottom:34px}
.pin-row{display:flex;gap:9px;justify-content:center;margin-bottom:18px}
.pin-row input{width:46px;height:58px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:22px;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);border-radius:3px}
.pin-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(122,46,34,.1)}
.gate-hint{font-size:12.5px;color:var(--ink-faint)}
.gate-err{color:var(--accent);font-size:13px;min-height:18px;margin-top:12px;font-family:'IBM Plex Mono',monospace}
.shake{animation:shake .35s}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.gated{display:none}.gated.show{display:block}

/* top bar */
.topbar{border-bottom:1px solid var(--line-strong);background:rgba(244,241,234,.95);backdrop-filter:blur(8px);position:sticky;top:0;z-index:40}
.topbar .wrap{display:flex;align-items:center;gap:8px;padding:13px 0}
.topbar .home{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);text-decoration:none;letter-spacing:.04em}
.topbar .home:hover{color:var(--accent)}
.topbar .crumb{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-faint);margin-left:auto;letter-spacing:.05em}

/* page head */
.phead{padding:46px 0 30px;border-bottom:1px solid var(--line)}
.kicker{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.phead h1{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(28px,4.5vw,38px);line-height:1.12;margin-bottom:14px;max-width:24ch}
.phead .lede{font-size:15.5px;color:var(--ink-soft);max-width:66ch}

/* highlight box per referens */
.ref{padding:34px 0;border-bottom:1px solid var(--line)}
.ref-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:6px}
.ref-top .rt{font-family:'Newsreader',serif;font-size:22px;font-weight:500}
.ref-top .rd{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink-faint);margin-left:auto}
.ref-src{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-faint);margin-bottom:18px;letter-spacing:.02em}
.hl{border-left:3px solid var(--accent);background:rgba(122,46,34,.04);padding:14px 18px;margin:14px 0}
.hl .hlt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.hl blockquote{font-family:'Newsreader',serif;font-size:18px;font-style:italic;line-height:1.45;color:var(--ink);margin:6px 0}
.hl .who{font-family:'IBM Plex Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin-top:8px}
.hl .why{font-size:13.5px;color:var(--ink-soft);margin-top:10px}
.dl{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line-strong);background:var(--paper);padding:11px 16px;text-decoration:none;color:var(--ink);font-size:13.5px;margin-top:14px;transition:.15s}
.dl:hover{border-color:var(--accent);background:#faf8f3}
.dl .ic{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--accent);border:1px solid var(--line-strong);border-radius:3px;padding:4px 6px}

footer.foot{padding:34px 0;text-align:center}
footer.foot p{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-faint);line-height:1.7}

/* OBS: puff-färgkodning, topbar-knapp och aktiv-flik-styling ligger i varje sidas
   inline <style> (EFTER basreglerna), så att kaskaden garanterat vinner.
   Lägg INTE tillbaka .puff-d/.puff-h här — ordningen mot inline-basreglerna blir fel. */
.legend{display:flex;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.legend .lg{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.02em;display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft)}
.legend .lg::before{content:"";width:11px;height:11px;border-radius:2px;display:inline-block}
.legend .lg-d::before{background:#b9492f}
.legend .lg-h::before{background:#3f6b46}