/* Hand-written CSS, no framework. Fonts are bundled in fonts/ (Literata for reading, Figtree for the interface). */
@font-face { font-family:"Literata"; src:url("fonts/literata-latin-wght-normal.woff2") format("woff2"); font-weight:200 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Figtree"; src:url("fonts/figtree-latin-wght-normal.woff2") format("woff2"); font-weight:300 900; font-style:normal; font-display:swap; }

:root {
  --paper:#fbf8f2; --sand:#f3ece0; --line:#e7dece; --ink:#2b2622; --muted:#6b6258; --accent:#a94a22; --accent-soft:#f6e4d9;
  --serif:"Literata", Georgia, "Times New Roman", serif; --ui:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing:border-box; }
/* An author rule like ".card { display:grid }" would beat the browser's [hidden] rule, so make hidden win. */
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
:focus-visible { outline:3px solid #2f6f8f; outline-offset:3px; border-radius:4px; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font:18px/1.7 var(--serif); font-optical-sizing:auto; }
a { color:var(--accent); text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover { text-decoration-thickness:2px; }
.skip { position:absolute; left:-999px; top:.5rem; background:var(--ink); color:#fff; padding:.5rem .9rem; border-radius:6px; z-index:10; font-family:var(--ui); }
.skip:focus { left:.5rem; }
.sep::before { content:"\00b7"; margin:0 .6em; color:var(--muted); }

/* ---- header: one wordmark, one quiet link ---- */
header.top { display:flex; justify-content:space-between; align-items:center; gap:1rem; max-width:72rem; margin:0 auto; padding:1.4rem 1.5rem; font-family:var(--ui); }
.brand { display:inline-flex; align-items:center; gap:.65rem; color:var(--ink); font-weight:650; font-size:1rem; text-decoration:none; letter-spacing:.005em; }
.mark { width:1.15rem; height:1.15rem; border-radius:50%; background:var(--accent); position:relative; flex:none; }
.mark::before, .mark::after { content:""; position:absolute; top:.32rem; width:.26rem; height:.52rem; background:var(--paper); }
.mark::before { left:.24rem; border-radius:1px 0 0 1px; } .mark::after { right:.24rem; border-radius:0 1px 1px 0; }
.help-link, .linklike { font:inherit; font-family:var(--ui); font-size:.95rem; background:none; border:0; padding:.35rem .1rem; color:var(--muted); text-decoration:underline; text-underline-offset:.2em; text-decoration-color:var(--line); cursor:pointer; }
.help-link:hover, .linklike:hover { color:var(--accent); text-decoration-color:currentColor; }

/* ---- home: the search box is the page ---- */
main.home { max-width:46rem; margin:0 auto; padding:0 1.5rem 4rem; }
.hero { padding:clamp(2.5rem, 9vh, 6rem) 0 1.5rem; }
.hero h1 { margin:0; font-size:clamp(1.9rem, 5vw, 2.6rem); line-height:1.15; font-weight:560; letter-spacing:-.015em; }
.hero .sub { margin:.8rem 0 2rem; color:var(--muted); font-size:1.1rem; }
#search { width:100%; padding:1.05rem 1.2rem 1.05rem 3.2rem; font:400 1.15rem var(--ui); color:var(--ink); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%236b6258' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M13 13l4 4'/%3E%3C/svg%3E") no-repeat 1.1rem 50%; border:1.5px solid var(--line); border-radius:14px; box-shadow:0 1px 2px rgba(60,40,20,.05), 0 8px 24px -12px rgba(60,40,20,.18); }
#search::placeholder { color:#8d8377; }
#search:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.chips { display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .35rem; margin-top:1rem; font-family:var(--ui); }
.chips-label { font-size:.8rem; color:var(--muted); margin-right:.4rem; text-transform:uppercase; letter-spacing:.08em; }
.chip { font:inherit; font-size:.92rem; color:var(--muted); background:none; border:0; border-radius:999px; padding:.3rem .62rem; min-height:2.25rem; cursor:pointer; }
.chip:hover { color:var(--ink); background:var(--sand); }
.chip.active { color:var(--accent); background:var(--accent-soft); font-weight:600; }
.count { margin:2rem 0 .4rem; font:.85rem var(--ui); color:var(--muted); }

.cards { border-top:1px solid var(--line); }
.card { display:grid; grid-template-columns:1fr auto; gap:0 1.5rem; align-items:baseline; padding:1.15rem .2rem; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); }
.card h3 { grid-column:1; margin:0; font-size:1.25rem; font-weight:560; line-height:1.35; }
.card p { grid-column:1; margin:.15rem 0 0; color:var(--muted); font-size:1rem; line-height:1.55; }
.card .cat { grid-column:2; grid-row:1; font:.8rem var(--ui); color:var(--muted); letter-spacing:.04em; }
.card:hover h3 { color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; }
.card:hover { background:linear-gradient(90deg, var(--sand), transparent); }
.empty { color:var(--muted); padding:2rem 0; font-family:var(--ui); }

/* ---- reading page ---- */
.read { display:grid; grid-template-columns:minmax(0,40rem) 13rem; justify-content:center; gap:0 4rem; padding:0 1.5rem 3rem; }
.read main { grid-column:1; min-width:0; }
.crumb { margin:1rem 0 2.5rem; font:.95rem var(--ui); color:var(--muted); }
.crumb a { color:var(--muted); } .crumb a:hover { color:var(--accent); }
.tag-link { text-decoration:none; font-weight:550; }
.art-head h1 { margin:0; font-size:clamp(2rem, 5vw, 2.75rem); line-height:1.15; font-weight:580; letter-spacing:-.015em; }
.lead { margin:.9rem 0 .5rem; font-size:1.25rem; line-height:1.55; color:#4a423a; }
.applies { margin:0 0 2.5rem; font:.9rem var(--ui); color:var(--muted); }
article .sec { margin-top:2.8rem; }
article h2 { margin:0 0 .8rem; font:650 .85rem var(--ui); text-transform:uppercase; letter-spacing:.12em; color:var(--accent); }
article h3 { margin:2rem 0 .5rem; font-size:1.2rem; font-weight:600; }
article p, article li { max-width:none; }
article ul { padding-left:1.2rem; } article li { margin:.35rem 0; } article li::marker { color:var(--muted); }
/* steps: big quiet numerals instead of a bullet list */
.sec-steps ol { list-style:none; counter-reset:step; padding:0; margin:0; }
.sec-steps ol > li { counter-increment:step; position:relative; padding:0 0 1.4rem 3.1rem; margin:0; }
.sec-steps ol > li::before { content:counter(step); position:absolute; left:0; top:.05rem; width:2.1rem; height:2.1rem; border-radius:50%; background:var(--sand); color:var(--accent); font:600 .95rem/2.1rem var(--ui); text-align:center; }
.sec-steps li ol, .sec-steps li ul { margin:.5rem 0 0; padding-left:1.2rem; list-style:disc; } .sec-steps li ol > li { padding:0; counter-increment:none; } .sec-steps li ol > li::before { display:none; }
.sec-escalate-when, .sec-before-you-start { background:var(--sand); border-radius:14px; padding:1.4rem 1.6rem 1.2rem; }
.sec-escalate-when { background:var(--accent-soft); }
.sec-escalate-when ul, .sec-before-you-start ul { margin:0; }
table { border-collapse:collapse; width:100%; margin:1rem 0; font:.92rem/1.5 var(--ui); display:block; overflow-x:auto; }
th, td { border-bottom:1px solid var(--line); padding:.55rem .8rem .55rem 0; text-align:left; vertical-align:top; } th { font-weight:650; color:var(--muted); font-size:.82rem; letter-spacing:.04em; }
code { font:.86em ui-monospace, "SF Mono", Menlo, Consolas, monospace; background:rgba(60,40,20,.07); padding:.1em .35em; border-radius:4px; overflow-wrap:anywhere; }
.code { position:relative; margin:1rem 0; }
pre { margin:0; padding:2.9rem 1.2rem 1.1rem; background:#fff; border:1px solid var(--line); border-radius:12px; overflow-x:auto; font-size:.85rem; line-height:1.65; }
pre code { background:none; padding:0; font-size:inherit; overflow-wrap:normal; }
.copy { position:absolute; top:.55rem; right:.55rem; font:600 .8rem var(--ui); padding:.3rem .8rem; min-height:2rem; border-radius:8px; border:1px solid var(--line); background:var(--paper); color:var(--ink); cursor:pointer; }
.copy:hover { border-color:var(--accent); color:var(--accent); }
.sec-related ul { padding-left:1.2rem; }
.src { margin:3rem 0 0; font:.9rem var(--ui); }
.pager { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:1.05rem; }
.pager a { text-decoration:none; color:var(--ink); line-height:1.4; } .pager a:hover { color:var(--accent); }
.pager small { display:block; font:.8rem var(--ui); color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-bottom:.15rem; }
.pager .next { text-align:right; grid-column:2; }
.toc-wrap { grid-column:2; grid-row:1; }
.toc { position:sticky; top:2rem; margin-top:6.2rem; font:.9rem/1.4 var(--ui); display:flex; flex-direction:column; }
.toc p { margin:0 0 .6rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.toc a { color:var(--muted); text-decoration:none; padding:.4rem 0 .4rem .9rem; border-left:2px solid var(--line); } .toc a:hover { color:var(--accent); border-left-color:var(--accent); }

footer { max-width:46rem; margin:0 auto; padding:2rem 1.5rem 3rem; border-top:1px solid var(--line); font:.88rem/1.6 var(--ui); color:var(--muted); }
footer p { margin:.3rem 0; } footer a { color:var(--muted); }
footer .linklike { font-size:inherit; padding:0; }

/* ---- help panel (a native <dialog>, so Esc and focus handling come for free) ---- */
dialog.help { margin:0 0 0 auto; height:100dvh; max-height:none; width:min(26rem, 100vw); border:0; padding:0; background:var(--paper); color:var(--ink); box-shadow:-20px 0 50px -20px rgba(40,25,10,.35); }
dialog.help::backdrop { background:rgba(43,38,34,.28); }
dialog.help[open] { animation:slide .22s ease-out; }
@keyframes slide { from { transform:translateX(2rem); opacity:0; } }
.help-inner { padding:1.5rem 1.6rem 3rem; font-size:1rem; line-height:1.65; }
.help-inner h2 { margin:0 0 1rem; font:600 1.5rem/1.2 var(--serif); letter-spacing:-.01em; text-transform:none; color:var(--ink); }
.help-inner .why-title { margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.help-close { float:right; font:600 .9rem var(--ui); background:none; border:1px solid var(--line); border-radius:8px; padding:.35rem .8rem; min-height:2.25rem; color:var(--ink); cursor:pointer; margin:0 0 .5rem 1rem; }
.help-close:hover { border-color:var(--accent); color:var(--accent); }
.help-steps { padding-left:1.3rem; margin:0 0 1.4rem; } .help-steps li { margin:.7rem 0; padding-left:.2rem; } .help-steps li::marker { font-family:var(--ui); font-weight:600; color:var(--accent); }
.gloss { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:.7rem 0; font-family:var(--ui); }
.gloss summary { cursor:pointer; font-weight:600; font-size:.95rem; padding:.2rem 0; }
.gloss dt { font-weight:650; margin-top:.8rem; font-size:.95rem; } .gloss dd { margin:.1rem 0 0; color:var(--muted); font-size:.95rem; line-height:1.55; }
body:has(dialog.help[open]) { overflow:hidden; }

@media (max-width:1020px) { .read { grid-template-columns:minmax(0,40rem); } .toc-wrap { display:none; } }
@media (max-width:600px) {
  body { font-size:17px; }
  header.top { padding:1rem 1.1rem; } .read, main.home { padding-left:1.1rem; padding-right:1.1rem; }
  .card { grid-template-columns:1fr; } .card .cat { grid-column:1; grid-row:auto; margin-top:.4rem; }
  .sec-escalate-when, .sec-before-you-start { padding:1.1rem 1.1rem .9rem; }
  .sec-steps ol > li { padding-left:2.7rem; } .help-inner { padding:1.2rem 1.2rem 3rem; }
  .brand { font-size:.95rem; }
}
@media (prefers-reduced-motion:reduce) { dialog.help[open] { animation:none; } }
@media print { header.top, .toc-wrap, .pager, .copy, footer, dialog, .skip, .crumb { display:none !important; } body { background:#fff; font-size:12pt; } .sec-escalate-when, .sec-before-you-start { background:none; border:1px solid #999; } }
.help-steps em { font-style:normal; font-weight:600; }