/* For agents: the field-guide system for a long reference page. Machine-readable
   content lives in index.html and guide.txt; this sheet is presentation only.
   The page CSP allows same-origin fonts and styles only (no images). */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 650;font-display:swap;src:url("../assets/fonts/Fraunces-Soft-300-650.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 650;font-display:swap;src:url("../assets/fonts/Fraunces-Soft-Italic-300-650.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url("../assets/fonts/HankenGrotesk-400-700.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 700;font-display:swap;src:url("../assets/fonts/JetBrainsMono-400-700.woff2") format("woff2")}
:root{color-scheme:dark;--night-1:#0b0f0a;--night-2:#10150e;--night-3:#161d14;--cream:#efe7d2;--cream-2:#cdc6b0;--cream-3:#a39d8a;--rule:rgba(239,231,210,.12);--rule-2:rgba(239,231,210,.22);--glow:#c7e541;--glow-2:#dff27f;--moss:#93ab5c;
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;--sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  background:var(--night-1);color:var(--cream);font:400 16px/1.6 var(--sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(80rem 30rem at 70% -10rem,rgba(199,229,65,.05),transparent 70%) no-repeat,var(--night-1)}
::selection{background:rgba(199,229,65,.32)}
a{overflow-wrap:anywhere;color:var(--glow);text-decoration-color:rgba(199,229,65,.45);text-underline-offset:.22em}
a:hover{color:var(--glow-2);text-decoration-color:currentColor}
main a{overflow-wrap:anywhere}
a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--glow-2);outline-offset:4px;border-radius:1px}
.skip{position:fixed;top:8px;left:8px;padding:12px 16px;background:var(--night-3);border:1px solid var(--glow);z-index:2;transform:translateY(-200%)}
.skip:focus{transform:none}

header{max-width:1360px;margin:auto;padding:14px 40px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:24px}
.brand{display:inline-flex;flex-direction:column;min-height:44px;justify-content:center;text-decoration:none;color:var(--cream);font:400 1.25rem/1.1 var(--serif)}
.brand span{display:block;margin-top:.2rem;font:600 .68rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--moss)}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-size:.9rem}

.layout{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:3.5rem;max-width:1360px;margin:3rem auto 5rem;padding:0 40px}
aside{align-self:start;position:sticky;top:1.5rem}
aside ol{list-style:none;padding:0;margin:1rem 0 1.5rem;border-top:1px solid var(--rule);counter-reset:toc}
aside li{margin:0;border-bottom:1px solid var(--rule);counter-increment:toc}
aside a{display:flex;align-items:center;gap:.6rem;min-height:40px;color:var(--cream-2);text-decoration:none;font-size:.86rem;line-height:1.35}
aside a::before{content:counter(toc,lower-roman) ".";font:italic 400 .85rem/1 var(--serif);color:var(--cream-3);min-width:1.8rem}
aside a:hover{color:var(--glow-2)}
.eyebrow{margin:0 0 .6rem;font:600 .72rem/1.35 var(--sans)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--moss)}
.aside-note{color:var(--cream-3);font-size:.8rem;line-height:1.6}

main{min-width:0;max-width:56rem}
h1{font:380 clamp(2.4rem,1.6rem + 2.6vw,3.7rem)/1.04 var(--serif);letter-spacing:-.014em;margin:0 0 1.2rem;max-width:22ch;text-wrap:balance}
h1+p{font-size:1.1rem;color:var(--cream-2);line-height:1.6;max-width:62ch}
h2{font:400 clamp(1.6rem,1.3rem + 1vw,2.2rem)/1.12 var(--serif);letter-spacing:-.008em;margin:3rem 0 1rem;padding-top:1.4rem;border-top:1px solid var(--rule-2);scroll-margin-top:1rem}
h1,h2,h3{overflow-wrap:anywhere}
h3{font:500 1.2rem/1.3 var(--serif);margin:2rem 0 .7rem}
p,li{font-size:.97rem;line-height:1.75;color:var(--cream-2);text-wrap:pretty}
strong{color:var(--cream);font-weight:600}
li{margin-bottom:.45rem}
ul,ol{padding-left:1.4rem}
code{font-family:var(--mono);font-size:.84em;color:var(--cream);overflow-wrap:anywhere}
p code,li code,td code{padding:.08em .3em;border-radius:2px;background:var(--night-3);border:1px solid var(--rule)}

.table-scroll{overflow-x:auto;margin:1.2rem 0}
table{width:100%;border-collapse:collapse;font-size:.86rem;line-height:1.6}
th{padding:.6rem .8rem .5rem;text-align:left;vertical-align:bottom;color:var(--cream-3);font:600 .68rem/1.35 var(--sans);letter-spacing:.12em;text-transform:uppercase;border-top:1.5px solid var(--cream-2);border-bottom:1px solid var(--rule-2)}
td{padding:.65rem .8rem;color:var(--cream-2);vertical-align:top;border-bottom:1px solid var(--rule);min-width:9rem}
tr:last-child td{border-bottom:1.5px solid var(--cream-2)}
td:first-child{color:var(--cream);font-weight:500}
td a{overflow-wrap:anywhere}
pre{margin:1.2rem 0;font-size:.82rem;line-height:1.7;border:1px solid var(--rule);border-radius:2px;background:var(--night-2);padding:1.2rem 1.4rem;overflow:auto;tab-size:4}
pre code{font-size:inherit;overflow-wrap:normal;white-space:pre;color:var(--cream-2);background:none;border:0;padding:0}

footer{max-width:1360px;margin:auto;padding:1.6rem 40px 2.4rem;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.8rem;color:var(--cream-3);font-size:.82rem}
footer span{margin-left:auto}
header .text-link,footer a{display:inline-flex;align-items:center;min-height:44px}

.mobile-toc{display:none}
@media (max-width:950px){.layout{grid-template-columns:12.5rem minmax(0,1fr);gap:2rem;padding-inline:26px}header,footer{padding-inline:26px}}
@media (max-width:700px){
  header{padding:.6rem 20px;align-items:center}
  .layout{display:block;margin:1.4rem auto 2.6rem;padding:0 20px}
  aside{display:none}
  .mobile-toc{display:block;margin-bottom:1.4rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .mobile-toc summary{display:list-item;min-height:44px;padding-block:.65rem;color:var(--glow);cursor:pointer;font-size:.9rem}
  .mobile-toc ol{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1rem;padding-left:1.2rem;margin:.3rem 0 .8rem}
  .mobile-toc li{font-size:.84rem;line-height:1.4;margin:0}
  .mobile-toc a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
  h1{font-size:2.35rem}h1+p{font-size:1.02rem}h2{font-size:1.6rem;margin-top:2.2rem}
  p,li{font-size:.94rem}pre{padding:.9rem}
  footer{padding-inline:20px}footer span{margin-left:0}
  td{min-width:10rem}
}
@media print{
  :root{color-scheme:light;--night-1:#fff;--night-2:#fff;--night-3:#f3f3ef;--cream:#111;--cream-2:#333;--cream-3:#555;--rule:#ccc;--rule-2:#999;--glow:#3f5a28}
  body{background:#fff}aside,.skip,.text-link,.mobile-toc{display:none}.layout{display:block;margin:20px 0;padding:0}
  h2{break-after:avoid}pre,pre code{white-space:pre-wrap}.table-scroll{overflow:visible}tr{break-inside:avoid}
}
/* Large text: the sidebar and title scale down with the window instead of widening the page. */
.layout{grid-template-columns:min(15rem,28%) minmax(0,1fr)}
@media (max-width:950px){.layout{grid-template-columns:min(12.5rem,30%) minmax(0,1fr)}}
h1{font-size:min(clamp(2.4rem,1.6rem + 2.6vw,3.7rem),11vw)}
.mobile-toc ol{grid-template-columns:repeat(2,minmax(0,1fr))}
main{min-width:0}
.mobile-toc ol{grid-template-columns:repeat(auto-fill,minmax(min(9rem,100%),1fr))}
