/* Layout: one reading column on a whiteboard-white page; marker-blue ink for headings and links, a yellow highlighter used once per section at most. */
:root{
  --paper:#FAFBFC;
  --ink:#1B2230;
  --muted:#5A6475;
  --line:#DCE1E8;
  --marker:#1F4FD1;
  --highlight:#FFE45C;
  --panel:#F0F3F7;
  --on-marker:#FFFFFF;
  --f-display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body:"Literata", Georgia, "Times New Roman", serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#12161D; --ink:#E7EAF0; --muted:#9BA5B5; --line:#2A313D;
    --marker:#7FA2FF; --highlight:#6B5A00; --panel:#1A202A; --on-marker:#0E1320;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#12161D; --ink:#E7EAF0; --muted:#9BA5B5; --line:#2A313D;
  --marker:#7FA2FF; --highlight:#6B5A00; --panel:#1A202A; --on-marker:#0E1320;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:1.075rem; line-height:1.7;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:0 48px;
}
.wrap{max-width:42rem; margin:0 auto; display:flex; flex-direction:column; gap:2.5rem}
.disclosure{
  font-family:var(--f-mono); font-size:.78rem; line-height:1.5; color:var(--muted);
  border-bottom:1px solid var(--line); padding-block:12px;
}
.site{font-family:var(--f-display); font-weight:700; font-size:1.05rem; letter-spacing:.01em; padding-top:8px}
header.hero{display:flex; flex-direction:column; gap:1rem}
h1,h2,h3{font-family:var(--f-display); text-wrap:balance; line-height:1.15; margin:0}
h1{font-size:clamp(2rem, 6vw, 3rem); font-weight:700; letter-spacing:-.015em}
h2{font-size:1.6rem; font-weight:700; color:var(--marker)}
h3{font-size:1.15rem; font-weight:700}
.byline{font-family:var(--f-mono); font-size:.82rem; color:var(--muted)}
.lede{font-size:1.2rem; margin:0}
mark{background:linear-gradient(transparent 55%, var(--highlight) 55%); color:inherit; padding:0 .1em}
section{display:flex; flex-direction:column; gap:1rem}
p{margin:0}
a{color:var(--marker); text-underline-offset:3px}
a:focus-visible,.cta:focus-visible{outline:3px solid var(--marker); outline-offset:3px}
.ways{display:grid; grid-template-columns:repeat(auto-fit, minmax(12rem,1fr)); gap:1rem}
.way{border-top:3px solid var(--ink); padding-top:.75rem; display:flex; flex-direction:column; gap:.4rem; min-width:0}
.way .tag{font-family:var(--f-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.way p{font-size:.95rem; line-height:1.55}
ol.steps{margin:0; padding-left:1.4rem; display:flex; flex-direction:column; gap:.75rem}
ol.steps li::marker{font-family:var(--f-display); font-weight:700; color:var(--marker)}
.checklist{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.6rem}
.checklist li{padding-left:1.6rem; position:relative}
.checklist li::before{content:"✓"; position:absolute; left:0; font-family:var(--f-display); font-weight:700; color:var(--marker)}
.pick{background:var(--panel); border-radius:6px; padding:1.5rem; display:flex; flex-direction:column; gap:1rem}
.pick .label{font-family:var(--f-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(14rem,1fr)); gap:1.25rem}
.cols > div{min-width:0}
.cols ul{margin:.4rem 0 0; padding-left:1.1rem; font-size:.95rem; line-height:1.55; display:flex; flex-direction:column; gap:.35rem}
.cta{
  display:inline-block; align-self:flex-start;
  background:var(--marker); color:var(--on-marker); text-decoration:none;
  font-family:var(--f-display); font-weight:700; font-size:1.05rem;
  padding:.8rem 1.3rem; border-radius:4px;
}
.cta:hover{filter:brightness(1.08)}
.small{font-size:.88rem; color:var(--muted); line-height:1.55}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:.93rem; min-width:30rem}
th,td{text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--line); vertical-align:top}
th{font-family:var(--f-display); font-weight:700}
details{border-bottom:1px solid var(--line); padding-block:.75rem}
summary{font-family:var(--f-display); font-weight:700; cursor:pointer}
details p{margin-top:.5rem}
footer{border-top:1px solid var(--line); padding-top:1.25rem; display:flex; flex-direction:column; gap:.75rem; font-size:.85rem; color:var(--muted); line-height:1.55}
footer nav{display:flex; flex-wrap:wrap; gap:1rem; font-family:var(--f-mono); font-size:.8rem}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important}}

.prose{display:flex; flex-direction:column; gap:1rem}
.prose ul{margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.4rem}
.email{font-family:var(--f-mono); font-size:1rem; background:var(--panel); padding:.6rem .8rem; border-radius:4px; user-select:all; align-self:flex-start; overflow-wrap:anywhere}
.site a{color:var(--ink); text-decoration:none}