/* site/doc.css — the document pages. Same tokens as index.html, less furniture.
   Three theme states: bare :root is light, the media query covers the default
   "system" setting, the [data-theme] block lets an explicit choice win. */
:root{
  --paper:#FAF7F1; --raised:#FFFFFF; --ink:#2B3F6C; --ink-soft:#5C6684;
  --deep:#117E76; --brass:#7F6B3A; --hair:rgba(43,63,108,.10);
  --wash-a:rgba(77,208,199,.16); --wash-b:rgba(232,212,176,.34);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#171C2B; --raised:#1F2537; --ink:#E9E5DC; --ink-soft:#A3AAC0;
    --deep:#5FD3C8; --brass:#CBAE6E; --hair:rgba(233,229,220,.13);
    --wash-a:rgba(77,208,199,.10); --wash-b:rgba(181,154,93,.12);
  }
}
:root[data-theme="dark"]{
  --paper:#171C2B; --raised:#1F2537; --ink:#E9E5DC; --ink-soft:#A3AAC0;
  --deep:#5FD3C8; --brass:#CBAE6E; --hair:rgba(233,229,220,.13);
  --wash-a:rgba(77,208,199,.10); --wash-b:rgba(181,154,93,.12);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.68 Karla,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46rem 30rem at 88% -8%, var(--wash-a), transparent 62%),
    radial-gradient(38rem 26rem at 2% 26%, var(--wash-b), transparent 60%);
}

/* Paper tooth. Matches index.html. */
body::after{
  content:"";position:fixed;inset:0;z-index:120;pointer-events:none;
  opacity:.30;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body::after{mix-blend-mode:screen;opacity:.18}
}
::selection{background:#E8D4B0;color:#2B3F6C}

.wrap{position:relative;z-index:1;max-width:44rem;margin:0 auto;padding:0 clamp(1.25rem,5vw,2rem)}

header{display:flex;align-items:center;gap:1rem;padding:2rem 0 0}
.mark{
  display:inline-flex;align-items:center;gap:.55rem;color:var(--ink);text-decoration:none;
}
.mark svg{width:1.4rem;height:1.4rem;flex:none;color:var(--brass)}
.mark span{
  font-family:Fraunces,ui-serif,Georgia,serif;font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:1.35rem;font-weight:700;letter-spacing:-.02em;
}
header nav{margin-left:auto;display:flex;gap:1.5rem;font-size:.95rem}
header nav a{color:var(--ink-soft);text-decoration:none}
header nav a:hover,header nav a:focus-visible{color:var(--deep)}
header nav a[aria-current]{color:var(--ink);font-weight:700}

.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);margin:3.5rem 0 .9rem;
}
h1{
  font-family:Fraunces,ui-serif,Georgia,serif;font-variation-settings:"SOFT" 30,"WONK" 1;
  font-size:clamp(2rem,5vw,2.9rem);line-height:1.08;letter-spacing:-.026em;font-weight:600;
  margin:0 0 .8rem;text-wrap:balance;
}
.stamp{color:var(--ink-soft);font-size:.93rem;margin:0 0 2.5rem}

h2{
  font-family:Fraunces,ui-serif,Georgia,serif;font-variation-settings:"SOFT" 30;
  font-size:1.35rem;line-height:1.2;letter-spacing:-.018em;font-weight:600;
  margin:2.8rem 0 .7rem;text-wrap:balance;
}
h3{
  font-family:Karla,sans-serif;font-size:1rem;font-weight:700;letter-spacing:-.005em;
  margin:1.6rem 0 .4rem;
}
p,li{color:var(--ink-soft);max-width:66ch}
p{margin:0 0 1rem}
ul{padding-left:1.15rem;margin:0 0 1rem}
li{margin:0 0 .5rem}
li strong,p strong{color:var(--ink);font-weight:500}
a{color:var(--deep)}
a:focus-visible,.mark:focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:3px}

.callout{
  background:var(--raised);border:1px solid var(--hair);border-radius:18px;
  padding:1.3rem 1.4rem;margin:1.6rem 0;
}
.callout p{margin:0}
.callout p + p{margin-top:.7rem}
.callout p:first-child strong{color:var(--ink)}

table{border-collapse:collapse;width:100%;margin:1.2rem 0;font-size:.96rem;display:block;overflow-x:auto}
th,td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--hair);vertical-align:top}
th{color:var(--ink);font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase}
td{color:var(--ink-soft)}

footer{
  border-top:1px solid var(--hair);margin-top:3.5rem;padding:2rem 0 3.5rem;
  display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:baseline;
  font-size:.93rem;color:var(--ink-soft);
}
footer a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--hair)}
footer a:hover,footer a:focus-visible{color:var(--deep);border-color:currentColor}
footer .spacer{margin-left:auto}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}