/* The Daily Hallucination — "broadsheet with a terminal in its pocket" */
:root{
  --paper:#f3eee4; --paper-2:#eae3d5; --ink:#161311; --ink-2:#3d3733; --mute:#7a7169; --rule:#cfc6b5;
  --red:#c8102e; --mustard:#d99a00; --teal:#0f7c78; --violet:#5a3fa6; --cobalt:#1f4ed8;
  --serif:"Fraunces","Iowan Old Style",Georgia,serif; --body:"Source Serif 4",Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --max:1180px; --gutter:clamp(16px,3vw,40px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#131110;--paper-2:#1c1917;--ink:#f0eae0;--ink-2:#cfc6b8;--mute:#8f867c;--rule:#332e29;--red:#ff4d5e;--mustard:#f2b632;--teal:#2fb3ad;--violet:#9d86e6;--cobalt:#6a8cff}}
:root[data-theme="dark"]{--paper:#131110;--paper-2:#1c1917;--ink:#f0eae0;--ink-2:#cfc6b8;--mute:#8f867c;--rule:#332e29;--red:#ff4d5e;--mustard:#f2b632;--teal:#2fb3ad;--violet:#9d86e6;--cobalt:#6a8cff}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;
  background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:6px 6px}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--red);color:#fff;padding:8px;z-index:9}
h1,h2,h3{font-family:var(--serif);font-variation-settings:"opsz" 144;letter-spacing:-.01em;line-height:1.05;margin:0}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--mute);margin:0 0 6px}
.kicker-red{color:var(--red)}
.meta{font-family:var(--mono);font-size:12px;color:var(--mute);margin:8px 0 0}
.dek{color:var(--ink-2);margin:8px 0 0;font-size:16px;line-height:1.45}
.dek-lead{font-size:clamp(17px,1.6vw,21px);line-height:1.4}

/* ribbon */
.ribbon{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12px;padding:8px var(--gutter);text-align:center;line-height:1.4}
.ribbon-tag{background:var(--red);color:#fff;padding:2px 8px;font-weight:600;letter-spacing:.14em;margin-right:8px}

/* masthead */
.masthead{max-width:var(--max);margin:0 auto;padding:18px var(--gutter) 0;text-align:center}
.dateline{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--rule);padding-bottom:8px;margin:0 0 10px}
.brand{white-space:nowrap;font-size:clamp(26px,7.9vw,104px);font-weight:900;font-variation-settings:"opsz" 144,"wght" 900;letter-spacing:-.035em;line-height:.92;margin:6px 0 4px}
.brand a:hover{text-decoration:none}
.brand a::after{content:"_";color:var(--red);animation:blink 1.1s steps(1) infinite;font-weight:500;font-size:.55em;margin-left:.04em}
@keyframes blink{50%{opacity:0}}
.tagline{font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.7vw,20px);color:var(--ink-2);margin:0 0 14px}
.sections{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;border-top:3px double var(--ink);border-bottom:1px solid var(--ink);padding:9px 0;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.sections a:hover{color:var(--red);text-decoration:none}
.sections .rss{color:var(--mustard)}

main{max-width:var(--max);margin:0 auto;padding:28px var(--gutter) 40px}

/* swatches: the "art" */
.swatch{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:16/10;padding:12px 14px;color:var(--paper);position:relative;overflow:hidden;
  background:var(--sw);border-radius:2px}
.swatch::after{content:"";position:absolute;inset:0;background:
  linear-gradient(120deg,rgba(255,255,255,.14),transparent 55%),
  repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.08) 3px 4px)}
.swatch .kicker{color:inherit;opacity:.9;position:relative;z-index:1}
.swatch .glyph{font-family:var(--serif);font-style:italic;font-weight:900;font-variation-settings:"opsz" 144,"wght" 900;font-size:clamp(84px,12vw,150px);line-height:.75;letter-spacing:-.04em;white-space:nowrap;align-self:flex-end;position:relative;z-index:1;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.swatch-red{--sw:var(--red)}.swatch-mustard{--sw:var(--mustard)}.swatch-teal{--sw:var(--teal)}.swatch-violet{--sw:var(--violet)}.swatch-cobalt{--sw:var(--cobalt)}.swatch-ink{--sw:var(--ink);color:var(--paper)}
.swatch:hover{text-decoration:none;filter:saturate(1.15)}

/* front lead */
.front-lead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;padding-bottom:28px;border-bottom:1px solid var(--rule)}
.lead{display:grid;grid-template-rows:auto 1fr;gap:16px}
.swatch-lead{aspect-ratio:16/9}
.swatch-lead .glyph{font-size:clamp(120px,18vw,260px)}
.lead h2{font-size:clamp(30px,4.2vw,54px);font-weight:900}
.lead h2 a:hover{text-decoration-color:var(--red)}
.lead-side{display:grid;gap:22px;align-content:start}
.lead-side .card{display:grid;grid-template-columns:110px 1fr;gap:14px}
.lead-side .card .swatch{aspect-ratio:1/1;padding:8px}
.lead-side .card .swatch .glyph{font-size:52px}
.lead-side .card .swatch .kicker{font-size:9px}
.lead-side h3{font-size:22px;font-weight:700}

/* grid */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px;padding:30px 0}
.card h3{font-size:22px;font-weight:700;margin-top:12px}
.card .dek{font-size:15px}
.card-body{padding:0}

/* band: voices + house ad */
.band{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;padding:26px 0;border-top:3px double var(--ink);border-bottom:1px solid var(--rule)}
.band-narrow{grid-template-columns:1fr;max-width:720px;margin:0 auto;border-top:1px solid var(--rule)}
.voices h2{font-size:clamp(20px,2.2vw,26px);font-weight:700;margin:0 0 14px}
.voices ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.voices li{border-left:3px solid var(--red);padding-left:14px}
.v-quote{margin:0;font-family:var(--serif);font-style:italic;font-size:18px}
.v-who{margin:4px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.house-ad{background:var(--paper-2);border:1px solid var(--rule);padding:22px 24px;position:relative}
.house-ad::before{content:"ADVERTISEMENT (OURS)";position:absolute;top:-9px;left:16px;background:var(--paper);padding:0 6px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--mute)}
.house-ad-h{font-family:var(--serif);font-weight:900;font-size:clamp(20px,2.2vw,26px);line-height:1.1;margin:6px 0 10px}
.house-ad p{margin:0 0 12px}
.btn{display:inline-block;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:11px 16px;border:1px solid var(--ink);cursor:pointer}
.btn:hover{background:var(--red);border-color:var(--red);color:#fff;text-decoration:none}
.btn-ghost{background:transparent;color:var(--ink)}

/* wire */
.wire{padding:26px 0 0}
.wire-h{font-size:26px;font-weight:900;margin-bottom:14px}
.wire-h span{font-family:var(--serif);font-style:italic;font-weight:500;font-size:17px;color:var(--mute);margin-left:10px}
.wire-list{list-style:none;padding:0;margin:0;columns:2;column-gap:40px}
.wire-list li{break-inside:avoid;padding:10px 0;border-bottom:1px solid var(--rule);font-family:var(--serif);font-weight:700;font-size:18px;line-height:1.25;display:flex;gap:12px;align-items:baseline}
.wire-sec{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);flex:0 0 74px;font-weight:600}

/* section head */
.section-head{border-bottom:3px double var(--ink);padding-bottom:12px}
.section-head h2{font-size:clamp(36px,6vw,72px);font-weight:900}

/* story */
.story{max-width:720px;margin:0 auto}
.story-head h2{font-size:clamp(32px,5vw,58px);font-weight:900;letter-spacing:-.02em}
.byline{margin-top:14px;padding-top:10px;border-top:1px solid var(--rule)}
.meta-satire{color:var(--red);font-weight:600}
.swatch-story{aspect-ratio:21/9;margin:22px 0 26px}
.swatch-story .glyph{font-size:clamp(100px,16vw,220px)}
.story-body{font-size:19px;line-height:1.65}
.story-body p{margin:0 0 1.2em}
.story-body > p:first-child::first-letter{font-family:var(--serif);font-weight:900;font-size:4.6em;float:left;line-height:.78;padding:6px 10px 0 0;color:var(--red)}
.story-body blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:4px solid var(--red);font-family:var(--serif);font-style:italic;font-size:1.08em}
.story-body blockquote p{margin:0}
.story-body h2{font-size:26px;margin:1.4em 0 .5em}
.story-body a{text-decoration:underline;text-decoration-color:var(--red)}
.share{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 8px;padding-top:18px;border-top:1px solid var(--rule)}
.related{padding-top:14px}

/* footer */
.foot{border-top:3px double var(--ink);margin-top:20px;padding:30px var(--gutter) 40px;background:var(--paper-2)}
.foot-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:40px;font-size:15px}
.foot-brand{font-family:var(--serif);font-weight:900;font-size:24px;margin:0 0 8px}
.foot-h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 8px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 16px}
.foot-links a{text-decoration:underline;text-decoration-color:var(--rule)}
.fine{font-size:12px;color:var(--mute);max-width:var(--max);margin:18px auto 0}

/* responsive */
@media (max-width:900px){
  .front-lead,.band,.foot-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wire-list{columns:1}
}
@media (max-width:560px){
  body{font-size:16px}
  .grid{grid-template-columns:1fr;gap:26px}
  .dateline{flex-direction:column;gap:2px;align-items:center}
  .lead-side .card{grid-template-columns:84px 1fr}
  .story-body{font-size:18px}
  .ribbon{font-size:11px}
}
@media print{.ribbon,.house-ad,.share,.foot,.related{display:none}}

/* glyph sizes by string length (numbers get smaller) */
.swatch .glyph.g2{font-size:clamp(64px,9vw,120px)}
.swatch .glyph.g3{font-size:clamp(48px,6.5vw,88px)}
.swatch .glyph.g4{font-size:clamp(38px,5vw,66px)}
.swatch-lead .glyph.g1{font-size:clamp(120px,18vw,260px)}
.swatch-lead .glyph.g2{font-size:clamp(96px,13vw,190px)}
.swatch-lead .glyph.g3{font-size:clamp(72px,10vw,140px)}
.swatch-lead .glyph.g4{font-size:clamp(56px,8vw,110px)}
.lead-side .card .swatch .glyph.g2{font-size:40px}.lead-side .card .swatch .glyph.g3{font-size:28px}.lead-side .card .swatch .glyph.g4{font-size:22px}
.swatch-story .glyph.g2{font-size:clamp(84px,13vw,170px)}.swatch-story .glyph.g3{font-size:clamp(64px,10vw,130px)}.swatch-story .glyph.g4{font-size:clamp(48px,8vw,100px)}