/* crosswordmate — Ink & Newsprint design system (design truth, 06 stage) */
:root{
  --paper:#FCFBF7; --ink:#17140F; --ink-soft:#3E382E; --muted:#6E675C;
  --rule:#E3DDCE; --accent:#B3372B; --accent-ink:#8F2B21; --wash:#F4EFE3; --good:#2E6B4F;
  --f-display:"Libre Caslon Text",Georgia,serif;
  --f-body:"Public Sans",-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --content:680px; --tool:640px;
  --r:2px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--f-body);-webkit-font-smoothing:antialiased}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* masthead */
header{border-bottom:1.5px solid var(--ink);position:sticky;top:0;background:var(--paper);z-index:10}
.mast{max-width:960px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px;border-bottom:3px double var(--ink)}
.mast .minigrid{display:grid;grid-template-columns:repeat(3,12px);grid-auto-rows:12px;gap:2px;flex:none}
.minigrid i{background:transparent;border:1.5px solid var(--ink)}
.minigrid i.f{background:var(--ink)}
.mast .brand{font:700 22px/1 var(--f-display);color:var(--ink);text-decoration:none;letter-spacing:.2px}
.mast .tag{font:400 12px/1.2 var(--f-body);color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-left:2px}
nav.top{max-width:960px;margin:0 auto;padding:8px 20px;display:flex;gap:24px}
nav.top a{font:600 13px/1 var(--f-body);color:var(--ink-soft);text-decoration:none;letter-spacing:.04em;text-transform:uppercase}
nav.top a:hover{color:var(--accent)}

/* layout */
main{max-width:960px;margin:0 auto;padding:32px 20px 64px}
.kicker{font:600 12px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);border-top:1px solid var(--rule);padding-top:12px}
h1{font:700 clamp(30px,5vw,44px)/1.12 var(--f-display);margin:10px 0 12px;letter-spacing:-.2px}
h2{font:700 24px/1.25 var(--f-display);margin:40px 0 12px;border-bottom:1px solid var(--rule);padding-bottom:8px}
h3{font:700 18px/1.3 var(--f-display);margin:20px 0 8px}
p{margin:0 0 14px;max-width:var(--content)}
.lede{font:400 19px/1.5 var(--f-body);color:var(--ink-soft)}
section{margin:28px 0}

/* tool panel */
.tool{max-width:var(--tool);border:1.5px solid var(--ink);border-radius:var(--r);background:var(--paper);padding:20px}
.tool .badge{display:inline-block;font:600 11px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);background:var(--ink);padding:5px 8px;border-radius:var(--r);margin-bottom:14px}
label{display:block;font:600 13px/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px}
input[type=text],input[type=email]{width:100%;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--wash);font:400 18px/1.4 var(--f-mono);padding:12px 14px;color:var(--ink);autocapitalize:off}
textarea{width:100%;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--wash);font:400 17px/1.5 var(--f-body);padding:12px 14px;resize:vertical;min-height:64px}
button.primary{border:1.5px solid var(--ink);border-radius:var(--r);background:var(--ink);color:var(--paper);font:700 16px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;padding:14px 28px;cursor:pointer;transition:background .15s,color .15s}
button.primary:hover{background:var(--paper);color:var(--ink)}
button.ghost{border:none;background:none;color:var(--accent);font:600 14px/1 var(--f-body);cursor:pointer;padding:8px 0;text-decoration:underline;text-underline-offset:3px}
.row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.row>div{flex:1;min-width:180px}

/* letter boxes */
.letters{display:flex;gap:6px;flex-wrap:wrap}
.letters input{width:44px;height:44px;text-align:center;font:600 20px/1 var(--f-mono);padding:0;text-transform:lowercase}

/* quota */
.quota{font:600 12px/1.2 var(--f-body);color:var(--muted);letter-spacing:.06em;margin-top:12px}
.quota.low{color:var(--accent)}
.quota a{margin-left:8px}

/* results */
.results{margin-top:18px;border-top:1px solid var(--rule);padding-top:16px}
.cand-note{font:600 12px/1.4 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.chip{font:400 15px/1 var(--f-mono);border:1px solid var(--rule);border-radius:var(--r);padding:8px 10px;background:var(--wash)}
.answer-card{border:1.5px solid var(--ink);border-radius:var(--r);padding:16px 18px;margin:14px 0;background:var(--paper)}
.answer-word{font:700 30px/1.1 var(--f-mono);letter-spacing:.06em}
.answer-meta{display:flex;gap:10px;align-items:center;margin-top:6px;flex-wrap:wrap}
.tagline{font:600 12px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.verified{color:var(--good);border:1px solid var(--good);border-radius:var(--r);padding:4px 8px;font:600 11px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;cursor:help}
.unverified{color:var(--accent);border:1px dashed var(--accent);border-radius:var(--r);padding:4px 8px;font:600 11px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;cursor:help}
details.why{margin-top:10px}
details.why summary{cursor:pointer;font:600 13px/1 var(--f-body);color:var(--accent);list-style:none}
details.why summary::after{content:" ↓"}
details[open].why summary::after{content:" ↑"}
details.why p{margin:8px 0 0;color:var(--ink-soft)}
.feedback{display:flex;gap:14px;margin-top:12px;font:600 12px/1 var(--f-body);color:var(--muted)}
.feedback button{background:none;border:1px solid var(--rule);border-radius:var(--r);cursor:pointer;padding:6px 10px;font:400 15px/1 var(--f-body)}
.feedback button:hover{border-color:var(--ink)}

/* reveal ladder */
.ladder{margin-top:16px;border-left:2px solid var(--rule);padding-left:18px}
.step{margin:0 0 14px}
.step .lv{font:700 11px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:4px}
.step .body{font:400 16px/1.5 var(--f-body);color:var(--ink-soft)}
.step .body code{font:600 15px/1 var(--f-mono);background:var(--wash);padding:2px 6px;border-radius:var(--r)}
.masked{font:700 26px/1.2 var(--f-mono);letter-spacing:.12em}
.reveal-link{font:700 13px/1 var(--f-body);color:var(--accent);cursor:pointer;display:inline-block;margin-top:2px}

/* notices */
.notice{border:1.5px solid var(--ink);border-left:6px solid var(--accent);border-radius:var(--r);padding:14px 16px;margin:14px 0;background:var(--wash)}
.notice.warm{border-left-color:#B8860B}
.notice h4{font:700 16px/1.3 var(--f-display);margin-bottom:6px}
.notice p{margin-bottom:8px}
.notice .cta-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:4px}
.pulse{height:2px;background:linear-gradient(90deg,var(--rule),var(--ink),var(--rule));background-size:200% 100%;animation:pl 1.2s linear infinite;margin:10px 0}
@keyframes pl{to{background-position:-200% 0}}

/* faq */
.faq details{border-bottom:1px solid var(--rule);padding:14px 0}
.faq summary{font:700 17px/1.4 var(--f-display);cursor:pointer;list-style:none}
.faq summary::after{content:" +";color:var(--accent)}
.faq details[open] summary::after{content:" −"}
.faq details p{margin:10px 0 0}

/* indicators list */
.ind-list{columns:2;column-gap:32px;margin:8px 0 4px}
.ind-list li{font:400 15px/1.7 var(--f-body);color:var(--ink-soft);break-inside:avoid}
@media(max-width:640px){.ind-list{columns:1}}

/* seo body */
.article{max-width:var(--content)}
.article p{font:400 16.5px/1.7 var(--f-body)}
.pull{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0;margin:20px 0;font:700 20px/1.4 var(--f-display);color:var(--ink-soft)}

/* footer */
footer{border-top:3px double var(--ink);margin-top:48px}
.foot{max-width:960px;margin:0 auto;padding:24px 20px;display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:space-between}
.foot a{font:400 13px/1.8 var(--f-body);color:var(--ink-soft);text-decoration:none}
.foot a:hover{color:var(--accent);text-decoration:underline}
.foot .col{display:flex;flex-direction:column}
.colophon{max-width:960px;margin:0 auto;padding:0 20px 28px;font:400 12px/1.6 var(--f-body);color:var(--muted)}

/* consent banner */
.consent{position:fixed;bottom:0;left:0;right:0;background:var(--paper);border-top:1.5px solid var(--ink);padding:14px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;z-index:50}
.consent p{margin:0;font:400 14px/1.4 var(--f-body);flex:1;min-width:240px}
.consent button{border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:var(--r);font:600 13px/1 var(--f-body);padding:10px 14px;cursor:pointer}
.consent button.ghost{background:none;color:var(--ink);text-decoration:none}

/* mobile */
@media(max-width:640px){
  body{font-size:16px}
  nav.top{gap:16px;overflow-x:auto}
  .tool{padding:16px}
  .letters input{width:40px;height:40px}
  .answer-word{font-size:24px}
  h2{font-size:21px;margin-top:32px}
}