/* ============================================================
   Thread Medicine — editorial stylesheet
   Reconstructed to match the site's type system and palette.
   Fonts: Fraunces (display), Newsreader (body), IBM Plex Mono (labels)
   ============================================================ */

:root{
  --paper:      #FBF9F5;   /* warm paper background */
  --paper-2:    #F4F0E8;   /* card / panel tint */
  --ink:        #22201C;   /* primary text */
  --ink-soft:   #5B564E;   /* secondary text */
  --ink-faint:  #8A847A;   /* captions, hints */
  --teal:       #1F6F6B;   /* primary */
  --teal-2:     #4E9B95;   /* lighter teal */
  --teal-deep:  #17514E;
  --gold:       #B8762A;   /* accent */
  --gold-soft:  #E9D9BE;
  --line:       #E4DED2;   /* hairlines */
  --dark:       #14211F;   /* footer / dark ground */
  --cream:      #FBFAF7;
  --maxw:       1080px;
  --measure:    720px;     /* long-form reading width */
  --radius:     12px;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#12100D; --paper-2:#1B1813; --ink:#EDE7DA; --ink-soft:#B8B0A2;
    --ink-faint:#8C8578; --teal:#5FBDB6; --teal-2:#4E9B95; --teal-deep:#7FCFC9;
    --gold:#D69A4E; --gold-soft:#3A3222; --line:#2C2820; --dark:#0C1513; --cream:#FBFAF7;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none!important; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Newsreader", Georgia, "Times New Roman", serif;
  font-optical-sizing:auto;
  font-size:19px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

a{ color:var(--teal-deep); text-decoration-thickness:.06em; text-underline-offset:2px; }
a:hover{ color:var(--teal); }

.mono{ font-family:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; }

h1,h2,h3,h4{ font-family:"Fraunces", Georgia, serif; font-weight:500; line-height:1.12; letter-spacing:-.01em; color:var(--ink); }

em{ font-style:italic; }

/* ---------- Masthead ---------- */
.masthead{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--line);
}
.masthead .wrap{ display:flex; align-items:center; justify-content:space-between; padding:15px 24px; }
.wordmark{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:20px;
  color:var(--ink); text-decoration:none; letter-spacing:-.01em;
}
.wordmark svg{ flex:none; }
.nav{ display:flex; gap:26px; }
.nav a{
  font-family:"IBM Plex Mono", monospace; font-size:13px; letter-spacing:.02em;
  color:var(--ink-soft); text-decoration:none;
}
.nav a:hover{ color:var(--teal); }
@media (max-width:560px){
  .masthead .wrap{ flex-direction:column; gap:8px; align-items:flex-start; }
  .nav{ gap:18px; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding:84px 0 64px; }
.hero-weave{
  position:absolute; inset:auto 0 0 0; width:100%; height:70%;
  z-index:0; pointer-events:none; opacity:.9;
}
.hero .wrap{ position:relative; z-index:1; max-width:900px; }
.eyebrow{
  display:inline-block; font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); font-weight:500; margin-bottom:22px;
}
.hero h1{
  font-size:clamp(34px, 6vw, 62px); font-weight:400; margin:0 0 22px; max-width:16ch;
}
.hero h1 em{ color:var(--teal); font-style:italic; }
.hero p{
  font-size:clamp(18px,2.3vw,22px); color:var(--ink-soft); max-width:60ch; margin:0;
  line-height:1.55;
}

/* ---------- Sections ---------- */
.section{ padding:56px 0; border-top:1px solid var(--line); }
.section-head{ display:flex; align-items:center; gap:18px; margin-bottom:30px; }
.section-head .mono{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:500; white-space:nowrap; }
.section-head .line{ flex:1; height:1px; background:var(--line); }

.display{ font-size:clamp(26px,3.6vw,38px); font-weight:400; margin:0 0 16px; max-width:20ch; }
.lede{ font-size:clamp(17px,2vw,20px); color:var(--ink-soft); max-width:64ch; line-height:1.55; margin:0; }

/* ---------- Essay filter + list ---------- */
.filterbar{ margin-bottom:26px; }
.hint{ font-family:"IBM Plex Mono", monospace; font-size:12.5px; color:var(--ink-faint); margin:0 0 12px; letter-spacing:.01em; }
.systems{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  font-family:"IBM Plex Mono", monospace; font-size:12.5px; letter-spacing:.01em;
  color:var(--ink-soft); background:transparent; border:1px solid var(--line);
  padding:6px 13px; border-radius:999px; cursor:pointer; transition:all .15s ease;
}
.chip:hover{ border-color:var(--teal-2); color:var(--teal); }
.chip[aria-pressed="true"]{ background:var(--teal); border-color:var(--teal); color:#fff; }
.chip:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.entries{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.entry{
  display:grid; grid-template-columns:120px 1fr; gap:24px; align-items:start;
  padding:26px 20px; border-radius:var(--radius); text-decoration:none; color:inherit;
  border:1px solid transparent; transition:background .15s ease, border-color .15s ease, opacity .2s ease, transform .15s ease;
}
.entry:hover{ background:var(--paper-2); border-color:var(--line); transform:translateY(-1px); }
.entry:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.entry .num{ font-family:"IBM Plex Mono", monospace; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); padding-top:6px; }
.entry h3{ font-size:26px; font-weight:500; margin:0 0 8px; }
.entry:hover h3{ color:var(--teal-deep); }
.entry p{ margin:0 0 14px; color:var(--ink-soft); font-size:17px; line-height:1.5; }
.entry.dim{ opacity:.32; }
@media (max-width:600px){
  .entry{ grid-template-columns:1fr; gap:8px; padding:22px 14px; }
  .entry .num{ padding-top:0; }
}

/* ---------- Tags ---------- */
.tags{ display:flex; flex-wrap:wrap; gap:7px; }
.tag{
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.03em;
  color:var(--teal-deep); background:color-mix(in srgb, var(--teal) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--teal) 22%, transparent);
  padding:3px 9px; border-radius:999px; transition:all .15s ease;
}
.tag.hit{ background:var(--gold); border-color:var(--gold); color:#fff; }

/* ---------- Tools columns ---------- */
.cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:820px){ .cols{ grid-template-columns:1fr; } }
.col{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px;
}
.col .status{
  display:inline-block; font-family:"IBM Plex Mono", monospace; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold); font-weight:500;
  border:1px solid var(--gold-soft); background:color-mix(in srgb, var(--gold) 8%, transparent);
  padding:3px 9px; border-radius:999px; margin-bottom:14px;
}
.col h3{ font-size:21px; font-weight:500; margin:0 0 10px; }
.col p{ margin:0; color:var(--ink-soft); font-size:16px; line-height:1.5; }

/* ---------- Article / long-form ---------- */
.article{ padding:64px 0 40px; }
.article .wrap{ max-width:var(--measure); }
.article-head{ margin-bottom:44px; }
.kicker{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.article-head h1{ font-size:clamp(32px,5.2vw,52px); font-weight:400; margin:0 0 18px; letter-spacing:-.015em; }
.standfirst{ font-size:clamp(19px,2.4vw,23px); line-height:1.45; color:var(--ink-soft); font-style:italic; margin:0 0 18px; max-width:44ch; }
.byline{ font-family:"IBM Plex Mono", monospace; font-size:13px; color:var(--ink-faint); letter-spacing:.02em; }

.prose{ font-size:19px; line-height:1.72; color:var(--ink); }
.prose > p:first-of-type::first-letter{
  font-family:"Fraunces", Georgia, serif; float:left; font-size:3.4em; line-height:.82;
  padding:6px 10px 0 0; color:var(--teal); font-weight:500;
}
.prose p{ margin:0 0 1.25em; }
.prose h2{
  font-size:clamp(24px,3vw,31px); font-weight:500; margin:2.4em 0 .7em; letter-spacing:-.01em;
  padding-top:.3em;
}
.prose h2::before{
  content:""; display:block; width:44px; height:2px; background:var(--gold);
  margin-bottom:.7em; border-radius:2px;
}
.prose h3{ font-size:22px; font-weight:600; margin:1.8em 0 .5em; }
.prose strong{ font-weight:600; color:var(--ink); }
.prose a{ color:var(--teal-deep); }

.prose ul,.prose ol{ margin:0 0 1.3em; padding-left:1.4em; }
.prose li{ margin:.4em 0; padding-left:.2em; }
.prose li::marker{ color:var(--teal); }

.prose blockquote{
  margin:1.8em 0; padding:.4em 0 .4em 1.4em; border-left:3px solid var(--gold);
  font-style:italic; color:var(--ink-soft); font-size:1.03em;
}
.prose blockquote p{ margin:0; }
.prose blockquote strong{ color:var(--ink); font-style:normal; }

.prose hr{
  border:0; height:1px; background:none; margin:2.6em auto;
  text-align:center; max-width:120px;
  background-image:radial-gradient(circle, var(--ink-faint) 1px, transparent 1px);
  background-size:10px 100%; background-repeat:repeat-x; background-position:center;
}

.prose table{
  width:100%; border-collapse:collapse; margin:1.8em 0; font-size:16.5px;
  font-family:"Newsreader", Georgia, serif;
}
.prose thead th{
  text-align:left; font-family:"IBM Plex Mono", monospace; font-size:12.5px;
  letter-spacing:.03em; text-transform:uppercase; color:var(--teal-deep); font-weight:500;
  padding:0 14px 10px; border-bottom:2px solid var(--teal);
}
.prose tbody td{ padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.45; }
.prose tbody tr:last-child td{ border-bottom:none; }
@media (max-width:600px){
  .prose{ font-size:18px; }
  .prose table{ font-size:15px; }
  .prose thead th, .prose tbody td{ padding-left:8px; padding-right:8px; }
}

/* References list a touch tighter */
.prose h2 + ol{ font-size:16.5px; line-height:1.55; color:var(--ink-soft); }

/* ---------- Footer ---------- */
.foot{ background:var(--dark); color:var(--cream); margin-top:40px; }
.foot .wrap{ display:flex; justify-content:space-between; gap:30px; padding:44px 24px; flex-wrap:wrap; }
.foot a{ color:var(--teal-2); }
.foot > .wrap > div:first-child{ font-size:15px; line-height:1.7; color:color-mix(in srgb, var(--cream) 82%, transparent); }
.foot .disc{ max-width:46ch; font-size:13px; line-height:1.6; color:color-mix(in srgb, var(--cream) 58%, transparent); }
@media (max-width:640px){ .foot .wrap{ flex-direction:column; gap:22px; } }

/* ---------- Focus + selection ---------- */
:focus-visible{ outline-color:var(--teal); }
::selection{ background:color-mix(in srgb, var(--gold) 30%, transparent); }