:root{
  --paper:#FAF7F0;
  --ink:#111114;
  --accent:#E3FF4B;
  --link:#2B3BE6;
  --muted:color-mix(in oklab, var(--ink) 55%, var(--paper));
  --faint:color-mix(in oklab, var(--ink) 12%, var(--paper));
  --card:color-mix(in oklab, #fff 55%, var(--paper));
  --granted:#1E7A46;
  --lapsed:#B23A2A;
  --display:'Instrument Serif', serif;
  --body:'Instrument Sans', system-ui, sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--accent);color:var(--ink)}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--faint)}
a:hover{color:var(--link);border-bottom-color:var(--link)}
mark{position:relative;background:linear-gradient(104deg,transparent 0.5%,var(--accent) 1.5%,var(--accent) 98%,transparent 99%);
  padding:0 4px;color:var(--ink)}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-0.01em;line-height:1.1}
h1{font-size:clamp(34px,6vw,58px);margin:0 0 18px}
h2{font-size:clamp(24px,3.4vw,33px);margin:44px 0 12px}
h3{font-size:21px;font-family:var(--body);font-weight:600;letter-spacing:-0.015em;margin:32px 0 8px}
p{margin:0 0 14px;max-width:62ch}
p.lede{font-size:19px;line-height:1.6;color:color-mix(in oklab,var(--ink) 78%,var(--paper))}
ul,ol{margin:0 0 16px;padding-left:22px;max-width:60ch}
li{margin:6px 0}
blockquote{margin:26px 0;padding:14px 20px;border-left:2.5px solid var(--ink);
  font-family:var(--display);font-style:italic;font-size:21px;max-width:52ch}
hr{border:0;border-top:1px solid var(--faint);margin:36px 0}
pre{background:var(--ink);color:var(--paper);border-radius:8px;padding:16px 18px;overflow-x:auto;font-family:var(--mono);font-size:13.5px}
code{font-family:var(--mono);font-size:0.92em}
p code,li code{background:var(--faint);border-radius:4px;padding:1px 5px}
figure{margin:26px 0}
img{max-width:100%;border-radius:8px;display:block}
figcaption{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:var(--muted);margin-top:8px;text-transform:uppercase}
.video{aspect-ratio:16/9;margin:26px 0}
.video iframe{width:100%;height:100%;border:0;border-radius:12px}
aside.callout{border:1px solid var(--faint);border-left:3px solid var(--link);border-radius:6px;
  background:var(--card);padding:14px 18px;margin:22px 0;max-width:62ch}

/* ---- shell ---- */
.wrap{max-width:880px;margin:0 auto;padding:0 24px}
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--faint)}
header.site .wrap{display:flex;align-items:center;gap:14px;height:58px}
.brand{display:flex;align-items:center;gap:11px;border-bottom:0;font-family:var(--display);font-size:20px}
.brand:hover{color:var(--ink)}
.seal{flex-shrink:0}
nav.main{margin-left:auto;display:flex;gap:20px;font-size:13.5px;font-weight:600}
nav.main a{border-bottom:0;color:var(--muted)}
nav.main a:hover,nav.main a[aria-current]{color:var(--ink)}
main{padding:56px 0 72px}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.rule{border-top:1.5px solid var(--ink);margin:10px 0 34px}

/* ---- blog ---- */
.post-card{display:block;border:1px solid var(--faint);border-radius:12px;background:var(--card);
  padding:22px 26px;margin:0 0 14px;border-bottom-width:1px;transition:transform .18s ease,box-shadow .18s ease}
.post-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px color-mix(in srgb,var(--ink) 40%,transparent);color:var(--ink)}
.post-card h3{margin:6px 0 8px;font-family:var(--display);font-weight:400;font-size:24px}
.post-card p{color:var(--muted);font-size:14.5px;margin:0}
.record{font-family:var(--mono);font-size:11.5px;letter-spacing:0.06em;color:var(--muted);text-transform:uppercase}

/* ---- deed form ---- */
.deed{border:1.5px solid var(--ink);border-radius:4px;background:var(--card);padding:30px 32px;
  position:relative;margin:52px 0 0}
.deed::after{content:"";position:absolute;inset:5px;border:1px solid var(--ink);border-radius:2px;pointer-events:none}
.deed h2{margin:6px 0 8px}
.deed p{font-size:14.5px;color:var(--muted)}
.deed form{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;position:relative;z-index:1}
.deed input,.deed textarea{font:inherit;font-size:14.5px;color:var(--ink);background:var(--paper);
  border:1px solid color-mix(in oklab,var(--ink) 30%,var(--paper));border-radius:8px;padding:11px 14px;flex:1;min-width:200px}
.deed textarea{width:100%;min-height:110px;resize:vertical}
.deed input:focus,.deed textarea:focus{outline:2px solid var(--link);outline-offset:1px;border-color:var(--link)}
button{font:inherit;font-size:14.5px;font-weight:600;background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);border-radius:8px;padding:11px 22px;cursor:pointer}
button:hover{box-shadow:inset 0 0 0 200px color-mix(in srgb,var(--accent) 18%,transparent)}
.form-ok{border-left:3px solid var(--granted);background:color-mix(in srgb,var(--granted) 8%,var(--paper));
  border-radius:6px;padding:16px 20px;margin-top:16px}
.form-err{border-left:3px solid var(--lapsed);background:color-mix(in srgb,var(--lapsed) 8%,var(--paper));
  border-radius:6px;padding:16px 20px;margin-top:16px}
.htmx-request button{opacity:0.6;pointer-events:none}

/* ---- footer ---- */
footer.site{background:var(--ink);color:color-mix(in oklab,var(--paper) 72%,var(--ink))}
footer.site .wrap{padding:44px 24px 52px}
footer.site .cols{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer.site a{color:inherit;border-bottom-color:color-mix(in srgb,var(--paper) 25%,transparent)}
footer.site a:hover{color:var(--accent);border-bottom-color:var(--accent)}
footer.site .fine{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;margin-top:26px;
  padding-top:18px;border-top:1px solid color-mix(in srgb,var(--paper) 15%,transparent)}

/* ---- cookie notice ---- */
#cookie-note{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:100;
  background:var(--ink);color:var(--paper);border-radius:10px;padding:12px 18px;
  font-size:13px;display:flex;align-items:center;gap:16px;max-width:min(92vw,560px);
  box-shadow:0 12px 32px -12px rgba(0,0,0,.45)}
#cookie-note a{color:var(--accent);border-bottom:0}
#cookie-note button{background:var(--accent);color:var(--ink);border-color:var(--accent);padding:6px 14px;font-size:12.5px}

@media (max-width:640px){
  header.site .wrap{height:auto;padding:10px 24px;flex-wrap:wrap}
  nav.main{width:100%;margin-left:0;gap:14px;flex-wrap:wrap}
  .deed{padding:22px 20px}
}