/* The Quantum Wire — a broadsheet. Black on white, columnar, serif. */
:root {
  --paper:#F2E9D6;   /* warm bone */
  --ink:#1A1612;     /* near-black ink */
  --ink-2:#46392E;
  --ink-3:#6E5E4D;
  --rule:#D8CCB4;
  --rule-2:#BDAE8E;
  --accent:#7A2230;  /* oxblood — kickers, drop cap, link hover */
  --f-serif:"Newsreader", Georgia, "Times New Roman", serif;
  --f-sans:"IBM Plex Sans", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, monospace;
  --measure:60ch;
  /* dark mode toggle button */
  --toggle-bg:var(--ink);
  --toggle-fg:var(--paper);
}

/* ---------- Dark Mode ---------- */
[data-theme="dark"] {
  --paper:#15110E;       /* deep charcoal-brown */
  --ink:#E8DDC8;         /* warm light ink */
  --ink-2:#BFB19D;
  --ink-3:#8E8270;
  --rule:#3A332A;
  --rule-2:#4A4137;
  --accent:#D67282;      /* lighter oxblood for contrast */
  --toggle-bg:var(--paper);
  --toggle-fg:var(--ink);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-serif);line-height:1.55;font-size:17px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--accent);}
img{display:block;max-width:100%;height:auto;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);
  padding:.55rem .8rem;font-family:var(--f-sans);font-size:.8rem;}
.skip:focus{left:0;}

/* ---------- masthead ---------- */
.masthead{background:var(--paper);}
.topline{
  border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.45rem 1.25rem;
  font-family:var(--f-sans);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);
}
.topline__date{color:var(--ink);}
.topline__edition{color:var(--accent);}

/* dark mode toggle */
.topline__right{display:flex;align-items:center;gap:1rem;}
.theme-toggle{
  background:var(--toggle-bg);color:var(--toggle-fg);border:none;cursor:pointer;
  font-family:var(--f-sans);font-size:.68rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:.28rem .6rem;border-radius:2px;line-height:1;
  display:inline-flex;align-items:center;gap:.35rem;
  transition:opacity .2s;
}
.theme-toggle:hover{opacity:.8;}
.theme-toggle__icon{font-size:.9rem;line-height:1;}

.nameplate{padding:1.4rem 1rem .9rem;text-align:center;}
.nameplate__title{
  font-family:var(--f-serif);font-weight:700;color:var(--ink);
  font-size:clamp(2.1rem, 9vw, 4.6rem);line-height:1;letter-spacing:-.02em;
  display:inline-block;
}
.nameplate__title:hover{color:var(--ink);}
.nameplate__motto{
  margin:.7rem 0 0;font-family:var(--f-sans);font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
}
.nameplate{border-bottom:5px double var(--ink);}

/* ---------- nav dropdown ---------- */
.nav{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--paper);
  position:sticky;top:0;z-index:30;}
.nav__inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;position:relative;}
.nav__dropdown{position:relative;}
.nav__trigger{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.65rem 0;font-family:var(--f-sans);font-size:.74rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);background:none;border:none;cursor:pointer;
}
.nav__trigger:hover{color:var(--accent);}
.nav__trigger.active{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent);}
.nav__trigger-label{display:inline-flex;align-items:center;gap:.15rem;}
.nav__caret{
  display:inline-block;font-size:.6rem;line-height:1;
  transition:transform .25s ease;
}
.nav__dropdown.open .nav__caret{transform:rotate(180deg);}
.nav__panel{
  position:absolute;top:100%;left:0;min-width:200px;
  background:var(--paper);border:1px solid var(--rule-2);border-top:none;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  list-style:none;margin:0;padding:0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  z-index:40;
}
.nav__dropdown.open .nav__panel{opacity:1;visibility:visible;transform:translateY(0);}
.nav__panel li{border-bottom:1px solid var(--rule);}
.nav__panel li:last-child{border-bottom:none;}
.nav__panel a{
  display:flex;align-items:center;justify-content:space-between;
  padding:.6rem .9rem;font-family:var(--f-sans);font-size:.72rem;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);transition:background .15s,color .15s;
}
.nav__panel a:hover{background:var(--rule);color:var(--accent);}
.nav__panel a.active{color:var(--accent);}
.nav__panel a.active::after{content:"●";font-size:.5rem;margin-left:.5rem;}
.nav__count{font-family:var(--f-mono);font-size:.6rem;color:var(--ink-3);font-weight:400;letter-spacing:0;}
.nav__overlay{position:fixed;inset:0;z-index:35;display:none;}
.nav__dropdown.open ~ .nav__overlay{display:block;}

/* ---------- shared ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 1.5rem;}
.kicker{font-family:var(--f-sans);font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 .45rem;}
.byline{font-family:var(--f-sans);font-size:.74rem;letter-spacing:.04em;color:var(--ink-3);margin:.6rem 0 0;}
.byline--sm{font-size:.7rem;}

.rule{border:0;border-top:1px solid var(--rule-2);margin:0;}
.sec-label{font-family:var(--f-sans);font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2);text-align:center;margin:0;padding:1.1rem 0 1.2rem;
  position:relative;}
.sec-label::before,.sec-label::after{content:"";position:absolute;top:50%;width:calc(50% - 9rem);height:1px;background:var(--rule-2);}
.sec-label::before{left:0;}.sec-label::after{right:0;}
@media(max-width:760px){.sec-label::before,.sec-label::after{width:calc(50% - 5rem);}}
@media(max-width:460px){.sec-label::before,.sec-label::after{display:none;}}

/* ---------- image with graceful fallback ---------- */
.thumb{position:relative;background:#E2D6BC;overflow:hidden;}
.thumb::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,#E2D6BC,#E2D6BC 10px,#D8C9A8 10px,#D8C9A8 20px);z-index:0;}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.thumb.broken img{display:none;}
.thumb.broken::after{content:attr(data-cat);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);z-index:1;}

/* ---------- lead story ---------- */
.lead{padding-block:2.2rem 1.8rem;border-bottom:1px solid var(--rule-2);}
.lead__head{font-family:var(--f-serif);font-weight:700;color:var(--ink);
  font-size:clamp(1.9rem,5.4vw,3.3rem);line-height:1.06;letter-spacing:-.015em;margin:0;}
.lead__head a{color:var(--ink);}.lead__head a:hover{color:var(--accent);}
.lead__dek{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--ink-2);
  font-size:clamp(1.1rem,2.4vw,1.4rem);line-height:1.35;margin:.85rem 0 0;max-width:62ch;}
.lead__fig{aspect-ratio:16/9;margin:1.2rem 0;}
.lead__cols{column-count:2;column-gap:2.5rem;column-rule:1px solid var(--rule);max-width:1000px;}
.lead__cols p{font-size:1.04rem;line-height:1.6;margin:0 0 .9rem;break-inside:avoid-column;}
.lead__more{display:inline-block;margin-top:.4rem;font-family:var(--f-sans);font-size:.78rem;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--accent);padding-bottom:.1rem;}
@media(max-width:720px){.lead__cols{column-count:1;}}

/* ---------- story columns ---------- */
.stories{padding-block:0 2rem;}
.columns{column-count:3;column-gap:2.5rem;column-rule:1px solid var(--rule);}
@media(max-width:920px){.columns{column-count:2;}}
@media(max-width:620px){.columns{column-count:1;column-rule:none;}}
.story{break-inside:avoid;padding:0 0 1.6rem;margin-bottom:1.6rem;border-bottom:1px solid var(--rule);}
.story__head{font-family:var(--f-serif);font-weight:600;color:var(--ink);
  font-size:1.28rem;line-height:1.2;letter-spacing:-.005em;margin:0;}
.story__head a{color:var(--ink);}.story__head a:hover{color:var(--accent);}
.story__dek{color:var(--ink-2);font-size:.96rem;line-height:1.5;margin:.45rem 0 0;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.story__img{aspect-ratio:16/10;margin:0 0 .6rem;}

/* ---------- category / tag page head ---------- */
.page-head{padding-block:2.2rem 1rem;border-bottom:1px solid var(--rule-2);}
.page-head__eyebrow{font-family:var(--f-sans);font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 .4rem;}
.page-head__title{font-family:var(--f-serif);font-weight:700;font-size:clamp(1.9rem,5vw,2.9rem);
  margin:0;letter-spacing:-.02em;}
.page-head__count{font-family:var(--f-sans);font-size:.76rem;color:var(--ink-3);margin-top:.7rem;}

/* ---------- article reader ---------- */
.article{max-width:820px;margin:0 auto;padding:2.6rem 1.25rem 4rem;}
.article__back{font-family:var(--f-sans);font-size:.74rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);display:inline-block;margin-bottom:1.4rem;}
.article__back:hover{color:var(--accent);}
.article__head{font-family:var(--f-serif);font-weight:700;font-size:clamp(2rem,5.6vw,3.1rem);
  line-height:1.08;letter-spacing:-.02em;margin:0;}
.article__dek{font-family:var(--f-serif);font-style:italic;font-size:1.3rem;color:var(--ink-2);
  margin:1rem 0 0;line-height:1.4;}
.article__fig{aspect-ratio:16/9;margin:1.5rem 0;}
.article__cols{column-count:2;column-gap:2.5rem;column-rule:1px solid var(--rule);margin-top:1.6rem;}
.article__cols p{font-size:1.1rem;line-height:1.62;margin:0 0 1.1rem;break-inside:avoid-column;}
.article__cols p:first-child::first-letter{
  float:left;font-family:var(--f-serif);font-weight:700;font-size:3.6rem;line-height:.82;
  padding:.18rem .45rem 0 0;color:var(--accent);
}
@media(max-width:720px){.article__cols{column-count:1;column-rule:none;}}
.article__source{margin:2rem 0 0;padding:.9rem 1.1rem;border:1px solid var(--rule);
  font-family:var(--f-sans);font-size:.78rem;color:var(--ink-3);}
.article__source a{color:var(--accent);border-bottom:1px dotted var(--accent);}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.6rem;}
.tags a{font-family:var(--f-sans);font-size:.7rem;color:var(--ink-3);padding:.25rem .6rem;border:1px solid var(--rule);}
.tags a:hover{color:var(--accent);border-color:var(--accent);}
.related{margin-top:2.6rem;border-top:1px solid var(--rule-2);padding-top:1.4rem;}
.related h2{font-family:var(--f-sans);font-size:.7rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 1.2rem;}
.related__cols{column-count:2;column-gap:2rem;column-rule:1px solid var(--rule);}
@media(max-width:560px){.related__cols{column-count:1;column-rule:none;}}
.related .story{border-bottom:none;margin-bottom:0;padding-bottom:1.2rem;}

/* ---------- states ---------- */
.state{max-width:680px;margin:0 auto;padding:5rem 1.25rem;text-align:center;}
.state__code{font-family:var(--f-mono);color:var(--accent);font-size:.76rem;letter-spacing:.2em;margin-bottom:1rem;}
.state__title{font-family:var(--f-serif);font-weight:700;font-size:1.9rem;margin:0 0 .5rem;}
.state__text{color:var(--ink-2);margin:0;font-size:1.05rem;}
.state__action{margin-top:1.5rem;font-family:var(--f-sans);font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;}
.state__action a{color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:.1rem;}

/* ---------- colophon ---------- */
.colophon{border-top:3px solid var(--ink);margin-top:2rem;}
.colophon__inner{max-width:1200px;margin:0 auto;padding:1.8rem 1.25rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1.2rem;align-items:flex-end;}
.colophon__name{font-family:var(--f-serif);font-weight:700;font-size:1.2rem;margin:0;}
.colophon__txt{color:var(--ink-2);font-size:.9rem;margin:.5rem 0 0;max-width:52ch;font-family:var(--f-sans);}
.colophon__copy{font-family:var(--f-sans);font-size:.72rem;color:var(--ink-3);}
@media(max-width:620px){.colophon__inner{flex-direction:column;align-items:flex-start;}}

@media(prefers-reduced-motion:reduce){*{transition:none!important;}}

/* ---------- PWA / safe area ---------- */
.masthead{padding-top:env(safe-area-inset-top);}
.colophon{padding-bottom:env(safe-area-inset-bottom);}
.wrap{padding-left:max(1.5rem, env(safe-area-inset-left));
  padding-right:max(1.5rem, env(safe-area-inset-right));}