/* Pickworth Lab site styles. Tokens and rules: DESIGN.md at the repo root. */
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(/fonts/atkinson-next.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/fonts/source-serif-4-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --paper:#faf6ec;--surface:#fffdf8;--ink:#0f2440;--muted:#4b5b70;--line:#e6ddcb;
  --accent:#8a5412;--accent-soft:#b9741a;--danger:#a3261b;--ok:#1f5d3a;
  --sans:"Atkinson Hyperlegible Next",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --measure:40rem;--wide:64rem;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --section:var(--s8);
}
@media (min-width:768px){:root{--section:var(--s9)}html{font-size:18px}}
html{font-size:17px;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .12s}
a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;margin:var(--s2);padding:var(--s2) var(--s3);background:var(--ink);color:var(--paper)}

.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--s4)}
@media (min-width:768px){.wrap{padding:0 var(--s6)}}
.prose{max-width:var(--measure)}

/* Header and footer */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s5) 0}
.wordmark{font:600 1.25rem/1 var(--serif);text-decoration:none;letter-spacing:-.01em}
.site-nav{display:flex;align-items:center;gap:var(--s5);font-size:.95rem}
.site-nav a{text-decoration:none}
.site-nav a:hover{text-decoration:underline}
.site-foot{margin-top:var(--section);padding:var(--s6) 0 var(--s7);border-top:1px solid var(--line);color:var(--muted);font-size:.875rem}
.site-foot p{margin:0 0 var(--s2);max-width:var(--measure)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:var(--s5);margin-bottom:var(--s4)}
.site-foot nav a{color:var(--ink)}

/* Type */
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.01em;text-wrap:balance;margin:0}
h1{font-size:2.441rem}
h2{font-size:1.953rem}
h3{font-size:1.25rem;line-height:1.3}
@media (max-width:480px){h1{font-size:1.953rem}h2{font-size:1.563rem}}
p{margin:0 0 var(--s4);text-wrap:pretty}
.lede{font-size:1.25rem;line-height:1.5;color:var(--muted);max-width:34rem}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.eyebrow{font-size:.875rem;color:var(--muted);margin:0 0 var(--s3)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:var(--s3) var(--s5);border:1px solid var(--ink);border-radius:6px;background:var(--ink);color:var(--paper);font:700 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:background-color .12s,color .12s}
.btn:hover{background:#1c3a60;color:var(--paper)}
.btn.secondary{background:transparent;color:var(--ink)}
.btn.secondary:hover{background:var(--surface)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}

/* Sections */
section{margin-top:var(--section)}
.hero{margin-top:var(--s7)}
.hero h1{max-width:18ch;margin-bottom:var(--s5)}
.hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s6)}
.hero .actions .note{font-size:.95rem;color:var(--muted)}
.section-head{max-width:var(--measure);margin-bottom:var(--s6)}
.section-head h2{margin-bottom:var(--s3)}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* Try-a-question demo */
.demo{display:grid;gap:var(--s6);align-items:start}
@media (min-width:880px){.demo{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.demo-item{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:var(--s5)}
.demo-item .stem{font-size:1.05rem;margin-bottom:var(--s5)}
.choices{display:grid;gap:var(--s2);margin:0;padding:0;list-style:none}
.choice{width:100%;display:flex;align-items:center;gap:var(--s3);min-height:52px;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);font:400 1rem/1.3 var(--sans);text-align:left;cursor:pointer;transition:border-color .12s,background-color .12s}
.choice:hover{border-color:var(--ink)}
.choice .letter{flex:none;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--ink);border-radius:50%;font-weight:700;font-size:.875rem}
.choice[aria-pressed=true]{border-color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink)}
.choice[aria-pressed=true] .letter{background:var(--ink);color:var(--paper)}
.verdict{min-height:12rem}
.verdict .placeholder{color:var(--muted);border:1px dashed var(--line);border-radius:10px;padding:var(--s5)}
.verdict .result{border:1px solid var(--line);border-radius:10px;padding:var(--s5);background:var(--surface)}
.verdict .label{display:inline-block;font-size:.875rem;font-weight:700;margin-bottom:var(--s2)}
.verdict .label.trap{color:var(--danger)}
.verdict .label.right{color:var(--ok)}
.verdict h3{margin-bottom:var(--s3)}
.verdict .fix{margin:var(--s4) 0 0;padding-top:var(--s4);border-top:1px solid var(--line)}

/* What you get */
.facts{display:grid;gap:var(--s6) var(--s7);margin:0;padding:0;list-style:none}
@media (min-width:768px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.facts h3{margin-bottom:var(--s2)}
.facts p{color:var(--muted);margin:0}

/* Report excerpt */
.excerpt{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:var(--s5);max-width:var(--measure)}
.excerpt .trap-name{font:600 1.25rem/1.3 var(--serif);margin:0 0 var(--s2)}
.excerpt dl{display:grid;grid-template-columns:max-content 1fr;gap:var(--s2) var(--s4);margin:var(--s4) 0 0}
.excerpt dt{color:var(--muted);font-size:.875rem;padding-top:2px}
.excerpt dd{margin:0}

/* FAQ */
.faq{max-width:var(--measure);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s4) 0;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:1.25rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details>div{padding:0 0 var(--s4);color:var(--muted)}
.faq details>div p:last-child{margin-bottom:0}

/* Long-form pages (privacy, blog posts) */
.page{margin-top:var(--s7)}
.page h1{margin-bottom:var(--s5)}
.page h2{font-size:1.563rem;margin:var(--s7) 0 var(--s3)}
.page h3{margin:var(--s6) 0 var(--s2)}
.page ul,.page ol{padding-left:1.25rem;margin:0 0 var(--s4)}
.page li{margin-bottom:var(--s2)}
.page table{width:100%;border-collapse:collapse;margin:0 0 var(--s5);font-size:.95rem}
.page th,.page td{border-bottom:1px solid var(--line);padding:var(--s2) var(--s3) var(--s2) 0;text-align:left;vertical-align:top}
.page th{font-weight:700}
.page blockquote{margin:0 0 var(--s4);padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.page code{font-size:.9em;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:0 4px}
.byline{color:var(--muted);font-size:.95rem;margin-bottom:var(--s6)}
.answer{font-size:1.1rem;line-height:1.6;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:var(--s4) var(--s5);margin-bottom:var(--s6)}
.answer .answer-label{display:block;font-size:.875rem;font-weight:700;color:var(--muted);margin-bottom:var(--s1)}
.cta-box{border:1px solid var(--ink);border-radius:10px;padding:var(--s5);margin:var(--s7) 0 0;max-width:var(--measure)}
.cta-box p{margin-bottom:var(--s4)}

/* Blog index */
.post-list{list-style:none;margin:0;padding:0;max-width:var(--measure);border-top:1px solid var(--line)}
.post-list li{border-bottom:1px solid var(--line);padding:var(--s5) 0}
.post-list a{text-decoration:none}
.post-list a:hover h2{text-decoration:underline}
.post-list h2{font-size:1.25rem;line-height:1.3;margin-bottom:var(--s2)}
.post-list p{margin:0;color:var(--muted)}
.post-list .meta{font-size:.875rem;color:var(--muted);margin-bottom:var(--s2)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.table-wrap{overflow-x:auto;margin:0 0 var(--s5)}
.table-wrap table{margin:0;min-width:28rem}