/* ============================================================
   THE CURIOUS — shared stylesheet
   Identity: Dispatch broadsheet nameplate + Field Notes pull-quote.
   Palette: Bone & ink. Voice: Restrained. Density: Balanced.
   Newsreader display serif + Libre Franklin text. Clay accent, used sparingly.
   ============================================================ */
:root{
  /* Bone & ink palette */
  --bg:#f6f3ea; --paper:#fffdf7; --ink:#100f0c; --mut:#6a6051; --faint:#9a8f7c;
  --line:#e7dfce; --rule:#100f0c; --accent:#9d3f23; --accent-soft:#ecddc9; --accent-blue:#26496f; --card:#efe9dc;
  /* verdict / status hues (muted, tuned to the bone palette) */
  --ok:#3f6b46; --warn:#8a6d2f; --no:#9d3f23;
  /* Balanced density */
  --body-fs:18.5px; --lh:1.68; --pgap:1.05em; --measure:920px;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
/* ============ Type scale ============
   Display  article h1.title  50px              serif  largest content title
   Featured homepage lead h2   38px              serif  featured story
   Subhead  .body h2           30px               serif  article section heads
   Quote    .pull p            27px               serif  pull quotes
   List     card/archive/      23px               serif  all listing-level heads
            spike/queue h3
   Subtitle .dek               21px               serif  article + lead deks
   Body     .body              18.5px             sans   article body copy
   Fact     .fact-body         18.5px             serif  fact-of-the-day body
   Small    card .dek          14px               sans   secondary reading text
   Label    kicker/nav/meta    10–12px            sans ↑ all uppercase
   ===================================== */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--ink);min-height:100vh;display:flex;flex-direction:column;
  font:400 18px/1.62 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1140px;margin:0 auto;padding:0 32px}
body>.wrap{flex:1 0 auto;width:100%}
.measure{max-width:var(--measure,724px);margin:0 auto}

/* ============ Nameplate masthead ============ */
header.site{padding-top:12px;background:transparent}
.nameplate{border-top:3px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0 6px;text-align:center}
.wordmark{font:600 56px/.78 var(--serif);letter-spacing:-1.2px;color:var(--ink);text-decoration:none;display:inline-block;white-space:nowrap}
.wordmark .amp{color:var(--accent);font-style:italic;font-weight:500}
.dateline{display:flex;align-items:stretch;justify-content:center;gap:0;
  border-bottom:none;padding:0;position:relative;
  font:600 11px/1 var(--sans);text-transform:uppercase;letter-spacing:1.4px;color:var(--mut)}
.dateline::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--rule);z-index:0}
.dateline .edge{flex:1 1 0;color:var(--mut);white-space:nowrap}
.dateline .date{text-align:right;color:var(--ink)}
nav{display:flex;justify-content:center;gap:0;flex-wrap:wrap}
nav a{color:var(--mut);text-decoration:none;font:600 12px/1 var(--sans);
  text-transform:uppercase;letter-spacing:1.2px;padding:5px 16px;
  border:3px solid transparent;margin-bottom:0;display:flex;align-items:center;transition:color .15s}
nav a:hover{color:var(--ink)}
nav a.on{color:var(--ink);border:3px solid var(--rule);border-bottom:none;background:var(--bg);position:relative;z-index:1}


/* ============ Article ============ */
article{padding-top:38px}
.head{text-align:center;max-width:860px;margin:0 auto 36px}
h1.title{font:600 50px/1.02 var(--serif);letter-spacing:-1.4px;margin:.1em 0 .1em}
.dek{font:400 21px/1.42 var(--serif);font-style:italic;color:var(--mut);max-width:600px;margin:0 auto}
.byline{margin:0 0 14px;font:600 11px/1 var(--sans);text-transform:uppercase;
  letter-spacing:1.6px;color:var(--mut)}
.byline .sep{color:var(--accent);margin:0 8px}

.body{font:400 var(--body-fs,18.5px)/1.66 var(--sans);display:flow-root;color:#2a2620;line-height:var(--lh,1.66)}
.body p{margin:0 0 var(--pgap,1.05em)}
.body p:first-of-type::first-letter{float:left;font:600 78px/.75 var(--serif);
  color:var(--accent);margin:3px 10px 0 0}
.body em{font-style:italic}
.body h2{font:600 30px/1.12 var(--serif);letter-spacing:-.4px;margin:1.5em 0 .35em}
sup.ref{font-size:.62em;line-height:0;vertical-align:super;font-weight:600}
sup.ref a{color:var(--accent);text-decoration:none}
sup.ref a:hover{text-decoration:underline}

/* hero — small, floated, framed */
figure.hero{float:right;width:188px;margin:6px 0 16px 28px;padding:7px;background:var(--paper);
  border:1px solid var(--line)}
figure.hero img{width:100%;display:block}
figure.hero .ph{aspect-ratio:4/5;background:repeating-linear-gradient(135deg,var(--accent-soft) 0 11px,#e3d2bd 11px 22px);display:flex;align-items:flex-end;padding:10px;color:var(--mut);font:600 9.5px/1.35 var(--sans);text-transform:uppercase;letter-spacing:.8px}
figure.hero figcaption{font:500 10.5px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.6px;
  color:var(--faint);margin-top:7px}
figure.hero figcaption a{color:var(--accent);text-decoration:none}
@media(max-width:560px){figure.hero{float:none;width:200px;margin:0 0 16px}}

/* pull quote with summary label */
.pull{margin:1.4em 0;padding:1em 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);text-align:center}
.pull p{font:500 27px/1.28 var(--serif);letter-spacing:-.4px;margin:0;color:var(--ink)}
.pull p::before{content:"\201C";color:var(--accent)}
.pull p::after{content:"\201D";color:var(--accent)}
.pull .who{display:inline-block;margin-top:14px;font:700 11px/1 var(--sans);
  text-transform:uppercase;letter-spacing:1.6px;color:var(--faint)}
.pull .who::before{content:"";display:inline-block;width:16px;height:2px;background:var(--accent);
  vertical-align:middle;margin-right:9px;margin-bottom:2px}

/* myth-busted badge */
.badge{display:inline-flex;align-items:center;gap:7px;font:700 11px/1 var(--sans);
  text-transform:uppercase;letter-spacing:1.2px;color:#fff;background:var(--accent);padding:5px 10px}

/* sources */
.sources{border-top:3px solid var(--rule);margin-top:34px;padding-top:18px}
.sources h3{font:700 12px/1 var(--sans);text-transform:uppercase;letter-spacing:1.6px;margin:0 0 18px;color:var(--ink)}
.sources ol{padding:0;margin:0;list-style:none;column-count:2;column-gap:40px;font:400 13.5px/1.5 var(--sans)}
.sources li{break-inside:avoid;margin:0 0 .85em;padding-left:34px;position:relative;color:var(--mut)}
.sources li .tag{position:absolute;left:0;top:1px;font:700 11px/1.4 var(--sans);color:var(--accent);letter-spacing:.5px}
.sources li a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.sources li a:hover{border-color:var(--accent);color:var(--accent)}
.sources .fid{font-size:11px;color:var(--faint)}
.sources .arch{color:var(--accent)}
.note{font:400 12px/1.5 var(--sans);color:var(--faint);margin-top:18px;font-style:italic;
  border-top:1px solid var(--line);padding-top:14px}

/* ============ Page heading (listing/static pages) ============ */
.page-head{margin:0 0 8px;text-align:left;border-top:3px solid var(--rule);padding-top:24px}
.page-head h1{font:600 48px/1.03 var(--serif);letter-spacing:-1.2px;margin:0 0 .15em}
.page-head .sub{font:400 21px/1.45 var(--serif);font-style:italic;color:var(--mut);margin:0 0 24px}

/* section label with trailing rule */
.section-label{display:block;margin:20px 0 24px;padding-bottom:0;border-bottom:4px solid var(--accent-blue)}
.section-label span{font:800 22px/1 var(--sans);text-transform:uppercase;letter-spacing:1.5px;color:var(--ink);white-space:nowrap}
.section-label::after{display:none}

/* ============ Featured lead ============ */
.lead{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 36px;align-items:stretch;
  border-top:3px solid var(--rule);padding:14px 0 10px}
.lead-main{display:flex;flex-direction:column;min-width:0;grid-column:1/3}
.lead-lower{display:flex;gap:24px;align-items:flex-start;margin-top:8px}
.lead-text{flex:1 1 auto;min-width:0}
.lead .lead-body{flex:1 1 auto;min-width:0}
.lead h2{font:600 38px/1.09 var(--serif);letter-spacing:-.6px;margin:.02em 0 .14em}
.lead h2 a{text-decoration:none}
.lead h2 a:hover{color:var(--accent)}
.lead .dek{font:400 21px/1.55 var(--serif);font-style:italic;color:var(--mut);max-width:34em;margin:0}
.lead .more{display:inline-block;margin-top:14px;font:700 12px/1 var(--sans);text-transform:uppercase;
  letter-spacing:1.4px;color:var(--accent);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:5px}
.lead .more:hover{color:var(--ink);border-color:var(--ink)}
.lead .thumb{flex:0 0 122px;width:122px;margin:0;padding:7px;background:var(--paper);border:1px solid var(--line)}
.lead .thumb img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;background:repeating-linear-gradient(135deg,var(--accent-soft) 0 11px,#e3d2bd 11px 22px)}
.lead .thumb .cap{font:500 11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.6px;color:var(--faint);margin-top:7px}
.fact{background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:0;display:flex;flex-direction:column;min-width:0}
.fact-kicker{background:var(--accent-blue);color:#f4efe2;font:800 18px/1 var(--sans);text-transform:uppercase;letter-spacing:1.6px;padding:15px 22px;margin:0;border:none}
.fact-body{font:500 18.5px/1.38 var(--serif);margin:0;padding:16px 22px 22px;flex:1 1 auto;color:var(--ink);text-wrap:pretty}
.fact-src{margin-top:auto;padding:18px 22px 20px;font:700 11px/1.3 var(--sans);text-transform:uppercase;letter-spacing:1.4px;color:var(--faint)}
@media(max-width:820px){.lead{grid-template-columns:1fr;gap:24px}.lead-main{grid-column:1}}
@media(max-width:680px){.lead-main{flex-direction:column-reverse;gap:22px}.lead .thumb{width:200px}}

/* ============ Recent grid ============ */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 36px}
.card{display:flex;flex-direction:column;background:var(--card);padding:18px 20px;border:1px solid transparent;transition:border-color .15s}
.card:hover{border-color:var(--accent-blue)}
.card h3{font:600 23px/1.12 var(--serif);letter-spacing:-.4px;margin:0 0 .4em}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--accent)}
.card .dek{font:400 14px/1.5 var(--sans);color:var(--mut);margin:0}
.card-date{font:600 11px/1 var(--sans);text-transform:uppercase;letter-spacing:1px;color:var(--faint);margin-top:auto;padding-top:12px;order:1;text-align:right}
@media(max-width:820px){.grid{grid-template-columns:1fr 1fr;gap:26px 30px}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}

/* ============ Index list (archive) ============ */
.index{border-top:3px solid var(--rule)}
.index .row{display:flex;flex-direction:column;gap:6px;
  padding:14px 8px;border-bottom:1px solid var(--line);border-left:2px solid transparent;transition:border-color .15s}
.index .row:hover{border-left-color:var(--accent-blue);padding-left:14px}
.index .row .d{order:3;font:600 11px/1.5 var(--sans);text-transform:uppercase;letter-spacing:.8px;color:var(--faint);margin-top:6px}
.index .row .t{min-width:0}
.index .row .t a{text-decoration:none;font:600 32px/1.08 var(--serif);letter-spacing:-.5px;color:var(--ink)}
.index .row .t a:hover{color:var(--accent)}
.index .row .t .rd{display:block;font:400 19px/1.55 var(--sans);color:var(--mut);margin-top:10px}
@media(max-width:680px){
  .index .row{padding:16px 0}
}

/* ============ Status / verdict chips ============ */
.chip{display:inline-flex;align-items:center;gap:7px;font:700 11px/1 var(--sans);
  text-transform:uppercase;letter-spacing:1.1px;padding:5px 10px;border:1px solid var(--line);color:var(--mut);background:var(--paper)}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.chip.ok{color:var(--ok);border-color:#cbdcce}
.chip.warn{color:var(--warn);border-color:#e6d9bc}
.chip.no{color:var(--no);border-color:#e6cabd}

/* ============ Spiked (audit list) ============ */
.spiked-list{border-top:3px solid var(--rule)}
.spike{border-bottom:1px solid var(--line);padding:14px 8px;border-left:2px solid transparent;transition:border-color .15s}
.spike:hover{border-left-color:var(--accent-blue);padding-left:14px}
.spike .sh{margin-bottom:0}
.spike h3{font:600 32px/1.08 var(--serif);letter-spacing:-.5px;margin:0;color:var(--ink)}
.spike .badge{order:0}
.spike .reason{font:400 19px/1.55 var(--sans);color:var(--mut);margin:10px 0}
.spike .reason b{color:var(--ink);font-weight:600}
.spike .verdicts{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* ============ Queue ============ */
.queue{border-top:3px solid var(--rule)}
.qrow{display:flex;justify-content:space-between;align-items:center;gap:24px;
  border-bottom:1px solid var(--line);padding:20px 0}
.qrow .qt{min-width:0}
.qrow .qt h3{font:600 23px/1.12 var(--serif);letter-spacing:-.4px;margin:0}
.qrow .qmeta{flex:none;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.qrow .qmeta .since{font:600 11px/1 var(--sans);text-transform:uppercase;letter-spacing:1px;color:var(--faint)}
@media(max-width:560px){.qrow{flex-direction:column;align-items:flex-start;gap:12px}.qrow .qmeta{text-align:left;align-items:flex-start}}

/* ============ Request form ============ */
.order{max-width:660px;margin:0 auto}
.order .field{margin-bottom:18px}
.order label{display:block;font:700 12px/1 var(--sans);text-transform:uppercase;letter-spacing:1.4px;color:var(--ink);margin-bottom:10px}
.order .hint{font:400 13.5px/1.5 var(--sans);color:var(--mut);margin:0 0 12px}
.order textarea,.order input[type=text]{width:100%;font:400 16px/1.55 var(--sans);padding:14px 16px;
  border:1px solid var(--ink);background:var(--paper);color:var(--ink);resize:vertical}
.order textarea{min-height:150px}
.order textarea:focus,.order input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;padding:14px 28px;
  font:700 12px/1 var(--sans);text-transform:uppercase;letter-spacing:1.2px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--ink)}

/* ============ Prose (about) ============ */
.prose{font:400 var(--body-fs,18.5px)/var(--lh,1.68) var(--sans);color:#2a2620}
.prose p{margin:0 0 1.05em}
.prose p:first-of-type{font-size:1.12em;color:var(--ink)}
.prose em{font-style:italic}
.prose strong{font-weight:600;color:var(--ink)}
.prose h2{font:600 26px/1.14 var(--serif);letter-spacing:-.4px;margin:1.6em 0 .4em;color:var(--ink)}

/* ============ Footer ============ */
footer.site{margin-top:48px;padding:0 0 44px;flex-shrink:0}
.foot-meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:14px;font:600 11px/1 var(--sans);text-transform:uppercase;letter-spacing:1.4px;color:var(--faint)}
.foot-meta .date{color:var(--mut)}
footer.site .foot-rule{border-top:3px solid var(--rule)}
footer.site .wm{color:var(--ink);font-weight:700}
footer.site a{color:var(--mut);text-decoration:none;border-bottom:1px solid var(--line)}
footer.site a:hover{color:var(--accent)}

@media(max-width:780px){
  .wordmark{font-size:42px}
  h1.title{font-size:40px}
  .page-head h1{font-size:38px}
  .lead h2{font-size:36px}
  .sources ol{column-count:1}
}

/* article head dek + byline — not displayed */
.head .dek,.byline{display:none}

/* page-head hidden — nav tab shows active page */
.page-head{display:none}

/* smooth page transitions */
@view-transition{navigation:auto}
@keyframes pagein{from{opacity:0}to{opacity:1}}
body{animation:pagein .18s ease-out}

/* ============ Length picker (request form) ============ */
.length-picker{display:flex;flex-direction:column;gap:10px;border:0;padding:0;margin:18px 0 0}
.length-picker legend{font:600 11px/1 var(--sans);text-transform:uppercase;letter-spacing:1.2px;color:var(--faint);padding:0;margin-bottom:8px}
.len-opt{display:flex;align-items:baseline;gap:12px;padding:14px 16px;border:1px solid var(--line);cursor:pointer;transition:border-color .15s,background .15s}
.len-opt:hover{border-color:var(--accent-blue)}
.len-opt input[type=radio]{margin:0;accent-color:var(--accent-blue)}
.len-opt:has(input:checked){border-color:var(--accent-blue);background:var(--paper)}
.len-name{font:600 16px/1.2 var(--serif);color:var(--ink);margin-right:4px}
.len-meta{font:400 13px/1.4 var(--sans);color:var(--mut)}

/* ============ Queue stepper ============ */
.qitem{padding:22px 0;border-bottom:1px solid var(--line)}
.qreq{font:600 23px/1.3 var(--serif);letter-spacing:-.3px;margin:0 0 16px;color:var(--ink)}
.stepper{display:flex;align-items:center;gap:0;margin:0 0 14px;flex-wrap:wrap}
.step{display:flex;flex-direction:column;align-items:center;flex:1 1 auto;min-width:64px;position:relative;text-align:center}
.step:not(:last-child)::after{content:"";position:absolute;top:14px;left:calc(50% + 16px);right:calc(-50% + 16px);height:2px;background:var(--line);z-index:0}
.step.done:not(:last-child)::after{background:var(--accent-blue)}
.step .dot{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:var(--bg);color:var(--faint);font:700 12px/1 var(--sans);position:relative;z-index:1;transition:background .15s,border-color .15s,color .15s}
.step.done .dot{background:var(--accent-blue);border-color:var(--accent-blue);color:#f4efe2}
.step.done .dot::before{content:"✓";font-size:14px}
.step.done .dot{font-size:0}
.step.on .dot{background:var(--accent-blue);border-color:var(--accent-blue);color:#f4efe2;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-blue) 22%,transparent)}
.step .lbl{font:600 11px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.8px;color:var(--faint);margin-top:8px}
.step.done .lbl{color:var(--mut)}
.step.on .lbl{color:var(--ink);font-weight:700}
.qmeta{font:600 11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:1.2px;color:var(--faint)}
.qmeta .now{font:700 13px/1.4 var(--sans);text-transform:none;letter-spacing:.2px;color:var(--ink);margin-right:6px}
@media(max-width:600px){.step .lbl{display:none}}