/* page.css : shared styles for supporting pages (legal, 404).
   The homepage (index.html) keeps its own inline CSS; this is the
   lean, readable long-form companion. Same tokens, same brand. */
:root{
  --bg:        oklch(0.165 0.012 55);
  --bg-2:      oklch(0.205 0.014 55);
  --ink:       oklch(0.945 0.018 90);
  --ink-dim:   oklch(0.795 0.020 88);
  --ink-faint: oklch(0.62 0.018 86);
  --accent:    oklch(0.685 0.205 38);
  --accent-hi: oklch(0.78 0.17 58);
  --line:      oklch(0.34 0.02 60);
  --line-soft: oklch(0.27 0.015 58);
  --maxw: 760px;
  --pad: clamp(1.15rem, 5vw, 2.5rem);
  --r: 4px;
  --ease: cubic-bezier(.16,1,.3,1);
  --font-display:"Anton", system-ui, sans-serif;
  --font-body:"Hanken Grotesk", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:1.05rem; line-height:1.65;
  letter-spacing:-0.006em; -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-hi); text-decoration:underline; text-underline-offset:3px}
svg{display:block}
::selection{background:var(--accent); color:oklch(0.16 0.01 55)}
:focus-visible{outline:2.5px dashed var(--accent); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:1}

.nav{border-bottom:1px solid var(--line-soft); background:color-mix(in oklch,var(--bg) 88%,transparent);
  position:sticky; top:0; z-index:10; backdrop-filter:blur(8px)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:flex; align-items:center; gap:.55rem; font-family:var(--font-display);
  font-size:1.4rem; letter-spacing:-0.01em; text-transform:uppercase; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .dot{color:var(--accent)}
.brand svg{width:32px; height:32px}
.nav .back{font-weight:600; font-size:.95rem; color:var(--ink-dim)}
.nav .back:hover{color:var(--ink); text-decoration:none}

main{padding:clamp(2.5rem,6vw,4.5rem) 0 1rem}
.legal h1{font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  line-height:.95; letter-spacing:-0.02em; font-size:clamp(2.2rem,1.6rem+3vw,3.6rem); margin:0 0 .4rem}
.legal .updated{font-family:var(--font-mono); font-size:.8rem; color:var(--ink-faint);
  letter-spacing:.04em; margin:0 0 2.4rem; display:block}
.legal h2{font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  letter-spacing:-0.01em; font-size:clamp(1.4rem,1.2rem+1vw,1.8rem); line-height:1.05;
  margin:2.6rem 0 .8rem; padding-top:1.4rem; border-top:1px solid var(--line-soft)}
.legal h3{font-size:1.1rem; margin:1.6rem 0 .4rem; color:var(--ink)}
.legal p,.legal li{color:var(--ink-dim)}
.legal p{margin:0 0 1rem}
.legal ul,.legal ol{margin:0 0 1.2rem; padding-left:1.3rem}
.legal li{margin:0 0 .5rem}
.legal strong{color:var(--ink); font-weight:700}
.legal .lead{font-size:1.15rem; color:var(--ink); margin-bottom:1.6rem}
.legal .note{border-left:3px solid var(--accent); background:var(--bg-2);
  padding:1rem 1.2rem; border-radius:0 var(--r) var(--r) 0; margin:1.4rem 0; font-size:.98rem}

footer{border-top:1px solid var(--line-soft); padding:2.4rem 0; margin-top:3rem}
footer .wrap{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center;
  color:var(--ink-faint); font-size:.86rem}
footer a{color:var(--ink-faint)}
footer a:hover{color:var(--ink-dim)}
footer .sep{opacity:.4}
footer .disclaimer{flex-basis:100%; margin:.7rem 0 0; color:var(--ink-faint); opacity:.85; font-size:.78rem; line-height:1.55; max-width:78ch}
footer .disclaimer a{text-decoration:underline; text-underline-offset:2px}

/* 404 */
.oops{text-align:center; padding:clamp(3rem,10vw,7rem) 0; position:relative; z-index:1}
.oops svg.sheep{width:120px; height:120px; margin:0 auto 1.5rem; filter:drop-shadow(0 14px 30px rgba(0,0,0,.5))}
.oops h1{font-family:var(--font-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(3rem,2rem+6vw,6rem); line-height:.9; letter-spacing:-0.02em; margin:0}
.oops h1 .hit{color:var(--accent)}
.oops p{color:var(--ink-dim); max-width:42ch; margin:1.2rem auto 2rem; font-size:1.1rem}
.btn{display:inline-flex; align-items:center; gap:.5rem; background:var(--accent);
  color:oklch(0.16 0.012 55); font-weight:800; padding:1rem 1.8rem; border-radius:var(--r);
  font-size:1.05rem; transition:transform .2s var(--ease), background .2s var(--ease)}
.btn:hover{background:var(--accent-hi); transform:translateY(-2px); text-decoration:none; color:oklch(0.16 0.012 55)}