/* ══════════════════════════════════════════════════════════════
   HANK WEEKLY — house stylesheet
   Light "newsprint" default + a NIGHT EDITION dark mode, per the
   house UI rule (light + corporate default, top dark switcher).
   ══════════════════════════════════════════════════════════════ */

/* The nameplate face. Self-hosted (SIL OFL — see fonts/OFL.txt) because the
   whole magazine reads as a system sans without it, and we cannot rely on any
   condensed display face being installed on a visitor's machine. */
@font-face{
  font-family:"HW Display";
  src:url("fonts/anton.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --display:"HW Display","Anton","Haettenschweiler","Arial Narrow",Impact,"Franklin Gothic Bold",sans-serif;
  --ui:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ink:#12100e;
  --ink-2:#3a3631;
  --ink-3:#6d675e;
  --paper:#f6f3ec;
  --paper-2:#fffefb;
  --paper-3:#ece7dc;
  --rule:#1a1815;
  --hair:#cfc7b8;
  --red:#c8102e;
  --red-dk:#8f0a20;
  --yellow:#ffd400;
  --blue:#123a6b;
  --shadow:rgba(20,16,10,.16);
  --grain:.05;
}

html[data-theme="dark"]{
  --ink:#f2ede3;
  --ink-2:#c8c1b4;
  --ink-3:#8e8779;
  --paper:#121110;
  --paper-2:#1b1a18;
  --paper-3:#232120;
  --rule:#f2ede3;
  --hair:#3a3733;
  --red:#ff2e46;
  --red-dk:#c8102e;
  --yellow:#ffd400;
  --blue:#7fb2ff;
  --shadow:rgba(0,0,0,.6);
  --grain:.07;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Georgia,"Times New Roman",Times,serif;
  font-size:17px;
  line-height:1.55;
  overflow-x:hidden;
}
/* paper grain */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 26px}

/* condensed display face — the tabloid voice */
.nameplate,.mega,.hl-1,.sec-head h2,.story h3,.ad-copy h3,.foot-plate,
.burst span,.tick-tag,.op h2,.sub h2,.chum-head span:first-child,.cover-name,
.fcard b,.op-sig{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:.002em;
}
.rubric,.kicker,.byline,.ad-flag,.ad-eyebrow,.ad-link,.topnav,.rail,
.cap-n,.tagline,.fc-k,.chum-spon,.teaser,.factbox,.foot-links h5,
.masthead-box h5,.foot-bar h5,.cl-col h5,.sub-form,.more,.stamp{
  font-family:var(--ui);
}

/* ══════ RAIL ══════ */
.rail{background:var(--rule);color:var(--paper);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
html[data-theme="dark"] .rail{background:#000;color:#f2ede3}
.rail-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:36px}
.rail-c{opacity:.92;text-align:center;flex:1}
.rail-c em{font-style:normal;opacity:.6}
.rail-r{display:flex;align-items:center;gap:16px}
.rail a{text-decoration:none;opacity:.9}
.rail a:hover{color:var(--yellow)}
.thm{
  background:none;border:1px solid rgba(255,255,255,.4);color:inherit;
  font:inherit;letter-spacing:.12em;padding:4px 10px;cursor:pointer;text-transform:uppercase;
}
.thm:hover{background:var(--yellow);color:#12100e;border-color:var(--yellow)}
.rail-l{opacity:.65}
@media(max-width:900px){.rail-l,.rail-c{display:none}.rail-in{justify-content:flex-end}}

/* ══════ NAMEPLATE ══════ */
.plate{background:var(--paper);padding:22px 0 0;text-align:center}
.plate-orn{font-size:10px;letter-spacing:.42em;color:var(--ink-3);text-transform:uppercase;font-family:var(--ui)}
.nameplate{
  /* scaleY grows the block upward from its baseline, so it needs clearance
     above or it eats the ornament line. */
  margin:18px 0 0;
  font-size:clamp(52px,13.2vw,178px);
  line-height:.86;
  letter-spacing:-.012em;
  text-transform:uppercase;
  color:var(--ink);
  transform:scaleY(1.06);
  transform-origin:bottom;
}
.plate-rule{
  position:relative;margin:20px 0 0;border-top:3px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:7px 0;
}
.plate-rule span{
  font-family:var(--ui);font-size:10.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-2);
}
.topnav{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;padding:12px 0 14px;border-bottom:1px solid var(--hair)}
.topnav a{
  font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;text-decoration:none;
  color:var(--ink-2);padding-bottom:3px;border-bottom:2px solid transparent;
}
.topnav a:hover{color:var(--red);border-color:var(--red)}

/* ══════ TICKER ══════ */
.ticker{display:flex;align-items:stretch;background:var(--red);color:#fff;overflow:hidden}
.tick-tag{
  background:#12100e;color:var(--yellow);padding:8px 16px;font-size:14px;letter-spacing:.14em;
  display:flex;align-items:center;flex:none;text-transform:uppercase;
}
.tick-win{overflow:hidden;flex:1;position:relative;display:flex;align-items:center}
.tick-run{
  display:inline-block;white-space:nowrap;padding-left:100%;
  animation:tick 48s linear infinite;
  font-size:13px;letter-spacing:.06em;font-family:var(--ui);
}
.tick-run b{color:var(--yellow);font-weight:700}
.tick-run i{font-style:normal;opacity:.5;padding:0 18px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.tick-run{animation:none;padding-left:16px}}

/* ══════ COVER ══════ */
.cover{
  /* Fixed brand red, deliberately NOT themed: a magazine cover is the same
     colour on the newsstand whatever the light in the room. */
  background:
    radial-gradient(120% 90% at 74% 12%, #e8253f 0%, #c8102e 42%, #8f0a20 100%);
  color:#fff;position:relative;overflow:hidden;
  border-bottom:5px solid var(--rule);
}
.cover::after{ /* sunburst rays */
  content:"";position:absolute;inset:-30% -10%;pointer-events:none;opacity:.11;
  background:repeating-conic-gradient(from 0deg at 72% 34%, #fff 0deg 5deg, transparent 5deg 12deg);
}
.cover-grid{
  display:grid;grid-template-columns:1.08fr .92fr;gap:26px;align-items:end;
  padding:44px 26px 0;position:relative;z-index:2;
}
.kicker{
  display:inline-block;background:var(--yellow);color:#12100e;font-size:11px;letter-spacing:.19em;
  padding:6px 12px;text-transform:uppercase;font-weight:700;
}
.mega{margin:16px 0 0;display:flex;flex-direction:column;text-transform:uppercase;line-height:.93}
.mega span{font-size:clamp(34px,6.05vw,78px);text-shadow:3px 4px 0 rgba(0,0,0,.28)}
.mega em{font-style:normal;color:var(--yellow)}
.mega-br{display:block}
.mega-attrib{
  font-size:14px;line-height:1.4;max-width:46ch;margin:18px 0 0;color:rgba(255,255,255,.9);
  border-left:3px solid var(--yellow);padding-left:12px;font-style:italic;
}
.cover-bullets{list-style:none;margin:20px 0 0;padding:0;font-family:var(--ui);font-size:13px}
.cover-bullets li{padding:6px 0 6px 22px;position:relative;border-top:1px dotted rgba(255,255,255,.38)}
.cover-bullets li::before{content:"▸";position:absolute;left:2px;color:var(--yellow)}
.cover-bullets b{letter-spacing:.08em}
.cover-cta{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 40px}
.btn-red,.btn-ghost{
  font-family:var(--ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;padding:13px 22px;font-weight:700;display:inline-block;transition:transform .12s;
}
.btn-red{background:var(--yellow);color:#12100e;box-shadow:4px 4px 0 rgba(0,0,0,.35)}
.btn-ghost{border:2px solid rgba(255,255,255,.65);color:#fff}
.btn-red:hover,.btn-ghost:hover{transform:translate(-2px,-2px)}
.btn-ghost:hover{background:#fff;color:var(--red-dk)}

.cover-art{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:430px}
.hank-cut{
  width:100%;max-width:470px;margin:0 auto;display:block;position:relative;z-index:2;
  filter:drop-shadow(0 -6px 30px rgba(0,0,0,.45)) contrast(1.06) saturate(1.04);
}
.cover-name{
  position:absolute;left:50%;transform:translateX(-50%);bottom:44px;z-index:3;
  font-size:clamp(26px,3.4vw,44px);letter-spacing:.06em;color:#fff;text-transform:uppercase;
  text-shadow:0 3px 14px rgba(0,0,0,.7);white-space:nowrap;
}
.cover-sub{
  position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:3;
  font-family:var(--ui);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--yellow);white-space:nowrap;
}
.burst{
  position:absolute;z-index:4;width:126px;height:126px;display:grid;place-items:center;text-align:center;
  background:var(--yellow);color:#12100e;
  clip-path:polygon(50% 0,61% 17%,79% 9%,80% 29%,98% 32%,88% 48%,100% 62%,82% 68%,85% 88%,66% 83%,57% 100%,44% 85%,26% 94%,24% 74%,5% 70%,15% 54%,2% 41%,20% 33%,18% 13%,37% 18%);
  transform:rotate(-11deg);
}
.burst span{font-size:16px;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.burst-a{top:6px;left:-6px}
.burst-b{bottom:96px;right:-4px;width:104px;height:104px;background:#fff;transform:rotate(9deg)}
.burst-b span{font-size:15px}

@media(max-width:940px){
  .cover-grid{grid-template-columns:1fr;padding-top:34px}
  .cover-art{min-height:0;margin-top:8px}
  .hank-cut{max-width:330px}
  .burst-a{top:-8px;left:0;width:96px;height:96px}
  .burst-a span{font-size:12px}
  .burst-b{display:none}
  .cover-name{font-size:26px;bottom:36px}
}

/* ══════ TEASERS ══════ */
.teasers{background:var(--paper-3);border-bottom:1px solid var(--hair)}
.teaser-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.teaser{
  display:flex;gap:11px;align-items:flex-start;padding:15px 20px 15px 0;text-decoration:none;
  border-right:1px solid var(--hair);
}
.teaser:last-child{border-right:0}
.teaser:hover .t-t{color:var(--red)}
.t-n{font-size:22px;font-weight:700;color:var(--red);line-height:1;flex:none;letter-spacing:-.03em}
.t-t{font-size:13px;line-height:1.32;color:var(--ink-2);font-family:var(--ui)}
@media(max-width:860px){.teaser-grid{grid-template-columns:1fr 1fr}.teaser:nth-child(2){border-right:0}}
@media(max-width:520px){.teaser-grid{grid-template-columns:1fr}.teaser{border-right:0;border-bottom:1px solid var(--hair)}}

/* ══════ SHARED BITS ══════ */
.main{padding:44px 26px 0}
.rubric{
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--red);font-weight:700;
  margin-bottom:8px;
}
.rubric.light{color:var(--yellow)}
.sec-head{border-top:4px solid var(--rule);padding-top:14px;margin:58px 0 26px}
.sec-head h2{
  font-size:clamp(30px,5vw,56px);line-height:.94;text-transform:uppercase;margin:0 0 8px;letter-spacing:-.005em;
}
.sec-head p{margin:0;max-width:74ch;color:var(--ink-2);font-size:15.5px}
.sec-head.alt{border-top-color:var(--red)}
.sec-head.alt h2{color:var(--red)}

/* ══════ LEAD ══════ */
.lead{display:grid;grid-template-columns:1.62fr .95fr;gap:38px;padding-bottom:20px}
.hl-1{
  font-size:clamp(32px,5.4vw,62px);line-height:.93;text-transform:uppercase;margin:0 0 14px;
  letter-spacing:-.008em;
}
.standfirst{
  font-size:20px;line-height:1.42;color:var(--ink-2);font-style:italic;margin:0 0 14px;
  border-bottom:1px solid var(--hair);padding-bottom:14px;
}
.byline{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  padding-bottom:16px;border-bottom:3px double var(--hair);margin-bottom:18px;
}
.byline b{color:var(--ink)}
.cols{column-count:2;column-gap:30px;column-rule:1px solid var(--hair);font-size:16px;text-align:justify;hyphens:auto}
.cols p{margin:0 0 12px}
.dropcap{
  float:left;font-family:Georgia,serif;font-size:64px;line-height:.78;padding:5px 9px 0 0;color:var(--red);
  font-weight:700;
}
.pullnote{
  break-inside:avoid;background:var(--paper-3);border-left:4px solid var(--red);padding:12px 14px;
  font-style:italic;font-size:14.5px;color:var(--ink-2);text-align:left;
}
@media(max-width:900px){.lead{grid-template-columns:1fr}.cols{column-count:1}}

.lead-side{display:flex;flex-direction:column;gap:22px}
.fig{margin:0}
.photo-frame{position:relative;border:1px solid var(--rule);padding:7px;background:var(--paper-2)}
.photo-frame img{filter:grayscale(.62) contrast(1.14)}
.ring{
  position:absolute;top:16%;left:26%;width:48%;height:34%;border:4px solid var(--red);border-radius:50%;
  transform:rotate(-7deg);pointer-events:none;
}
.stamp{
  position:absolute;bottom:14px;right:14px;background:rgba(200,16,46,.92);color:#fff;font-size:10px;
  letter-spacing:.2em;padding:4px 8px;text-transform:uppercase;
}
.fig figcaption{font-size:13px;line-height:1.4;color:var(--ink-2);padding-top:8px;border-bottom:1px solid var(--hair);padding-bottom:10px}
.factbox{border:3px double var(--rule);padding:16px}
.factbox h4{
  margin:0 0 10px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  border-bottom:1px solid var(--hair);padding-bottom:8px;
}
.factbox dl{margin:0;font-size:12.5px}
.factbox dt{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-size:10px;margin-top:9px}
.factbox dd{margin:1px 0 0;font-weight:700}
.factbox .hot{color:var(--red)}

/* ══════ ADS ══════ */
.ad{border:2px solid var(--rule);background:var(--paper-2);margin:44px 0;position:relative}
.ad-flag{
  position:absolute;top:-1px;left:-1px;background:var(--rule);color:var(--paper);font-size:9px;
  letter-spacing:.24em;padding:4px 10px;text-transform:uppercase;z-index:2;
}
html[data-theme="dark"] .ad-flag{background:#000;color:#f2ede3}
.ad-in{display:grid;grid-template-columns:0.86fr 1.14fr;gap:0;text-decoration:none;align-items:stretch}
.ad-wide.flip .ad-in{grid-template-columns:1.14fr 0.86fr}
.ad-wide.flip .ad-img{order:2}
.ad-img{overflow:hidden;background:#0c0b0a}
.ad-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ad:hover .ad-img img{transform:scale(1.035)}
.ad-copy{padding:30px 32px;display:flex;flex-direction:column;justify-content:center}
.ad-eyebrow{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:9px;
}
.ad-copy h3{
  font-size:clamp(23px,3.2vw,40px);line-height:.96;text-transform:uppercase;margin:0 0 12px;letter-spacing:-.005em;
}
.ad-copy p{margin:0 0 16px;font-size:15px;color:var(--ink-2);line-height:1.48;max-width:52ch}
.ad-link{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink);
  border-bottom:2px solid var(--red);padding-bottom:3px;align-self:flex-start;
}
.ad:hover .ad-link{color:var(--red)}
.ad-row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.ad-tall .ad-in.col{grid-template-columns:1fr;grid-template-rows:auto auto}
.ad-tall .ad-img{max-height:300px}
.ad-tall .ad-copy{padding:24px 26px 28px}
.ad-tall .ad-copy h3{font-size:clamp(24px,3vw,36px)}
@media(max-width:900px){
  .ad-in,.ad-wide.flip .ad-in{grid-template-columns:1fr}
  .ad-wide.flip .ad-img{order:0}
  .ad-row{grid-template-columns:1fr}
}

/* ══════ EXPOSED GALLERY ══════ */
/* Six columns tiled as 3+3 then 2+2+2, so no row is left with a hole in it. */
.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;align-items:start}
.shot{margin:0;grid-column:span 2}
.shot.big{grid-column:span 3}
.shot.wide{grid-column:span 2}
.shot:nth-child(2){grid-column:span 3}
.shot-img{
  position:relative;overflow:hidden;border:1px solid var(--rule);background:#0b0a09;cursor:pointer;
}
.shot-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;transition:filter .4s,transform .6s}
.shot.big .shot-img img,.shot:nth-child(2) .shot-img img{aspect-ratio:4/3}
.shot .bar{
  position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);
  background:#12100e;color:var(--yellow);text-align:center;padding:12px 0;
  font-family:var(--ui);font-size:15px;font-weight:700;letter-spacing:.32em;
  transition:opacity .3s,transform .3s;
}
.shot:not(.revealed) .shot-img img{filter:blur(13px) brightness(.82) saturate(.7);transform:scale(1.08)}
.shot.revealed .bar{opacity:0;transform:translateY(-50%) scaleY(.2)}
.shot:hover .shot-img{border-color:var(--red)}
.shot:focus-visible .shot-img{outline:3px solid var(--red);outline-offset:2px}
.shot figcaption{font-size:13px;line-height:1.42;color:var(--ink-2);padding-top:9px}
.cap-n{font-size:10px;letter-spacing:.2em;color:var(--red);font-weight:700}
@media(max-width:900px){
  .gal{grid-template-columns:1fr 1fr}
  .shot,.shot.big,.shot.wide{grid-column:span 1}
}
@media(max-width:560px){.gal{grid-template-columns:1fr}}

/* ══════ RUMOR MILL ══════ */
.blinds{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--hair);border-left:1px solid var(--hair);
}
.blind{
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:20px 22px;
  display:flex;gap:13px;align-items:flex-start;background:var(--paper-2);
}
.blind:hover{background:var(--paper-3)}
.b-n{font-size:26px;color:var(--red);line-height:1;flex:none}
.blind p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.blind b{color:var(--ink)}
@media(max-width:900px){.blinds{grid-template-columns:1fr}}

/* ══════ STORY GRID ══════ */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:52px 0 0;
  border-top:4px solid var(--rule);padding-top:26px}
.story .ph{position:relative;overflow:hidden;border:1px solid var(--rule);margin-bottom:13px}
.story .ph img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:contrast(1.05)}
.story:hover .ph img{filter:contrast(1.12) saturate(1.1)}
.tagline{
  position:absolute;top:0;left:0;background:var(--red);color:#fff;font-size:9.5px;letter-spacing:.2em;
  padding:5px 10px;text-transform:uppercase;font-family:var(--ui);font-weight:700;
}
.story h3{font-size:26px;line-height:.98;text-transform:uppercase;margin:0 0 9px}
.story p{margin:0 0 10px;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.more{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:700}
@media(max-width:900px){.grid3{grid-template-columns:1fr}}

/* ══════ HANK FILES ══════ */
.file-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fcard{
  border:2px solid var(--rule);padding:18px 20px 20px;text-decoration:none;background:var(--paper-2);
  display:flex;flex-direction:column;gap:4px;transition:transform .14s,box-shadow .14s;
}
.fcard:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--red)}
.fc-k{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--red);font-weight:700}
.fcard b{
  font-weight:400;
  font-size:32px;line-height:1;text-transform:uppercase;
}
.fcard i{font-style:italic;font-size:13.5px;color:var(--ink-2);line-height:1.4}
@media(max-width:900px){.file-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.file-grid{grid-template-columns:1fr}}

/* ══════ CHUMBOX ══════ */
.chum{margin:58px 0 0;border:1px solid var(--hair);background:var(--paper-2)}
.chum-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:12px 18px;border-bottom:1px solid var(--hair);background:var(--paper-3);
}
.chum-head span:first-child{font-size:22px;text-transform:uppercase;letter-spacing:.02em}
.chum-spon{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.chum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.chip{
  text-decoration:none;padding:16px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  display:flex;flex-direction:column;gap:9px;
}
.chip:nth-child(4n){border-right:0}
.chip:nth-child(n+5){border-bottom:0}
.chip:hover{background:var(--paper-3)}
.chip-img{
  aspect-ratio:16/10;overflow:hidden;border:1px solid var(--hair);background:var(--paper-3);
}
.chip-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.chip:hover .chip-img img{transform:scale(1.06)}
.chip p{margin:0;font-size:13.5px;line-height:1.34;font-family:var(--ui);color:var(--ink)}
.chip:hover p{color:var(--red)}
.chip span{font-size:10px;letter-spacing:.1em;color:var(--ink-3);font-family:var(--ui);margin-top:auto}
@media(max-width:900px){
  .chum-grid{grid-template-columns:1fr 1fr}
  .chip{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
  .chip:nth-child(2n){border-right:0}
  .chip:nth-child(n+5){border-bottom:1px solid var(--hair)}
  .chip:nth-last-child(-n+2){border-bottom:0}
}

/* ══════ OPINION ══════ */
.op{background:var(--rule);color:var(--paper);margin:58px 0 0;padding:44px 0}
html[data-theme="dark"] .op{background:#000}
.op-in{max-width:760px;margin:0 auto;padding:0 26px;text-align:center}
.op h2{font-size:clamp(28px,4.4vw,48px);text-transform:uppercase;margin:0 0 16px;line-height:.98}
.op p{font-size:16px;line-height:1.6;color:rgba(246,243,236,.86);margin:0 0 12px;text-align:left}
html[data-theme="dark"] .op p{color:#c8c1b4}
.op-sig{
  margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.22);
  font-size:26px;text-transform:uppercase;
}
.op-sig span{
  display:block;font-family:var(--ui);font-size:10px;letter-spacing:.2em;
  color:var(--yellow);margin-top:5px;
}

/* ══════ CLASSIFIEDS ══════ */
.classi-cols{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--rule);background:var(--paper-2);
}
.cl-col{padding:20px 22px;border-right:1px solid var(--hair)}
.cl-col:last-child{border-right:0}
.cl-col h5{
  margin:0 0 12px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--red);
  border-bottom:1px solid var(--hair);padding-bottom:8px;
}
.cl-col p{margin:0 0 11px;font-size:13px;line-height:1.44;color:var(--ink-2)}
.cl-col b{color:var(--ink);letter-spacing:.02em}
.cl-col a{color:var(--red);text-decoration:none;border-bottom:1px dotted var(--red)}
@media(max-width:900px){.classi-cols{grid-template-columns:1fr}.cl-col{border-right:0;border-bottom:1px solid var(--hair)}}

/* ══════ SUBSCRIBE ══════ */
.sub{background:var(--red);color:#fff;margin:58px 0 0;padding:42px 0}
.sub-in{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;max-width:1000px;margin:0 auto;padding:0 26px}
.sub h2{font-size:clamp(28px,4.2vw,46px);line-height:.96;text-transform:uppercase;margin:0 0 12px}
.sub p{margin:0;font-size:15px;color:rgba(255,255,255,.9);line-height:1.5}
.sub-form label{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:8px;color:var(--yellow)}
.sub-row{display:flex;gap:0}
.sub-row input{
  flex:1;min-width:0;border:3px solid #12100e;border-right:0;padding:14px 15px;font-size:15px;
  font-family:Georgia,serif;background:#fff;color:#12100e;
}
.sub-row input:focus{outline:3px solid var(--yellow);outline-offset:-3px}
.sub-row button{
  border:3px solid #12100e;background:var(--yellow);color:#12100e;padding:14px 22px;cursor:pointer;
  font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;
}
.sub-row button:hover{background:#12100e;color:var(--yellow)}
.sub-note{margin-top:11px !important;font-size:12px !important;color:rgba(255,255,255,.78) !important;font-style:italic}
.sub-note.ok{color:var(--yellow) !important;font-style:normal;font-weight:700}
@media(max-width:860px){.sub-in{grid-template-columns:1fr}}

/* ══════ FOOTER ══════ */
.foot{background:var(--paper-3);border-top:5px solid var(--rule);margin-top:58px;padding:34px 0 26px}
.foot-plate{
  font-size:clamp(40px,10vw,120px);line-height:.85;text-transform:uppercase;text-align:center;
  color:var(--ink);opacity:.13;letter-spacing:-.01em;margin-bottom:14px;
}
.foot-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:28px;border-top:1px solid var(--hair);padding-top:24px}
.foot h5{margin:0 0 12px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--red)}
.masthead-box dl{margin:0;font-size:12.5px}
.masthead-box dt{color:var(--ink-3);font-family:var(--ui);font-size:10.5px;letter-spacing:.08em;margin-top:7px}
.masthead-box dd{margin:0;font-weight:700}
.foot-links ul{list-style:none;margin:0;padding:0;font-size:13px}
.foot-links li{padding:4px 0;border-bottom:1px dotted var(--hair)}
.foot-links a{text-decoration:none;color:var(--ink-2)}
.foot-links a:hover{color:var(--red)}
.barcode{
  height:52px;width:100%;max-width:170px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px,var(--ink) 9px 12px,transparent 12px 14px);
  margin-bottom:6px;
}
.bc-num{margin:0 0 10px;font-size:11px;letter-spacing:.1em;font-family:var(--ui);color:var(--ink-2)}
.price{margin:0;font-size:12px;line-height:1.5;color:var(--ink-2)}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

.disclaimer{border-top:1px solid var(--hair);margin-top:26px;padding-top:18px}
.disclaimer p{
  margin:0 0 10px;font-size:11.5px;line-height:1.55;color:var(--ink-3);
  font-family:var(--ui);max-width:96ch;
}
.disclaimer b{color:var(--ink-2)}
.colo{letter-spacing:.14em;text-transform:uppercase;font-size:10px !important}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--red);outline-offset:2px}