/* The Quackery Gazette — online edition
   Structure: everything above the waterline is a newspaper.
   Everything below it is under water. */

:root{
  --newsprint:#EDE9E0;
  --deepwater:#DBE0DE;
  --ink:#15171A;
  --ink-soft:#4A4E52;
  --oxblood:#6E1E20;
  --rule:#B9B4A8;
  --rule-deep:#9AA5A2;

  --display:"Bodoni Moda",Didot,"Times New Roman",serif;
  --nameplate:"Bodoni Moda",Didot,"Times New Roman",serif;
  --body:"Newsreader",Charter,Georgia,serif;
  --agate:"Archivo Narrow","Helvetica Neue",Arial,sans-serif;

  --measure:74ch;
  --gutter:clamp(14px,3vw,30px);
}

*{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--newsprint);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.52;
  font-optical-sizing:auto;
}

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

a{color:inherit;}
a:focus-visible{
  outline:2px solid var(--oxblood);
  outline-offset:2px;
}

/* ---------- nameplate ---------- */

.plate{
  padding-top:clamp(18px,4vw,38px);
}

.ears{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  font-family:var(--agate);
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding-bottom:8px;
}
.ears div{flex:1;}
.ears div:last-child{text-align:right;}

.nameplate{
  font-family:var(--nameplate);
  font-weight:900;
  font-size:clamp(38px,9.2vw,104px);
  line-height:.94;
  letter-spacing:-.015em;
  text-align:center;
  margin:0;
}
.nameplate a{text-decoration:none;}

.slogan{
  font-family:var(--body);
  font-style:italic;
  text-align:center;
  font-size:clamp(13px,1.9vw,17px);
  margin:clamp(14px,2vw,22px) 0 0;   /* the y of Quackery descends; give it room */
  color:var(--ink-soft);
}

/* Sept 28: the price at display size, as in print (Rodney's: too small to see) */
.dateline{align-items:center;}
.dateline .dl-price{font-family:var(--display);font-weight:700;font-size:30px;
  line-height:1;letter-spacing:0;}
.dateline .dl-pricebox{white-space:nowrap}
.dateline .dl-site{font:inherit;letter-spacing:inherit;text-transform:uppercase}
.dateline{
  margin-top:14px;
  border-top:3px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding:6px 0;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  font-family:var(--agate);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ---------- skybox ---------- */

.skybox{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--rule);
}
.skybox a{
  display:block;
  padding:11px 16px;
  text-decoration:none;
  border-right:1px solid var(--rule);
}
.skybox a:last-child{border-right:0;}
.skybox a:hover .sky-text{text-decoration:underline;}
.sky-kicker{
  display:block;
  font-family:var(--agate);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--oxblood);
  margin-bottom:3px;
}
.sky-text{
  font-family:var(--display);
  font-size:15px;
  line-height:1.22;
}

/* ---------- page one ---------- */

.pageone{
  display:grid;
  grid-template-columns:1fr 250px;
  gap:0;
  padding-top:26px;
}
.lead{padding-right:28px;}
.rail{
  border-left:1px solid var(--rule);
  padding-left:22px;
}

.eyebrow{
  font-family:var(--agate);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--oxblood);
  margin:0 0 8px;
}

.hed{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(34px,5.6vw,62px);
  line-height:1.02;
  letter-spacing:-.018em;
  margin:0 0 12px;
}

.deck{
  font-family:var(--body);
  font-style:italic;
  font-size:clamp(17px,2.2vw,21px);
  line-height:1.4;
  color:var(--ink-soft);
  margin:0 0 14px;
  max-width:56ch;
}

.byline{
  font-family:var(--agate);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding:5px 0;
  margin:0 0 18px;
}

.cols{
  column-count:2;
  column-gap:26px;
  column-rule:1px solid var(--rule);
}
.cols p{margin:0;text-indent:1.15em;}
.cols p:first-child{text-indent:0;}

.pull{
  break-inside:avoid;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  padding:12px 0;
  margin:16px 0;
  font-family:var(--display);
  font-size:21px;
  line-height:1.2;
  font-style:italic;
}

.rail h2,.rail .rail-title{
  font-family:var(--agate);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  border-bottom:2px solid var(--ink);
  padding-bottom:5px;
  margin:0 0 12px;
}
.brief{
  border-bottom:1px solid var(--rule);
  padding-bottom:11px;
  margin-bottom:11px;
}
.brief:last-child{border-bottom:0;}
.brief h3{
  font-family:var(--display);
  font-size:16px;
  line-height:1.18;
  margin:0 0 4px;
}
.brief p{margin:0;font-size:14.5px;line-height:1.42;color:var(--ink-soft);}

.indexbox{
  margin-top:26px;
  border:1px solid var(--ink);
  padding:12px 14px;
}
.indexbox table{width:100%;border-collapse:collapse;font-family:var(--agate);font-size:13px;}
.indexbox td{padding:3px 0;}
.indexbox td:last-child{text-align:right;color:var(--ink-soft);}

/* ---------- the waterline ---------- */

.waterline{
  margin-top:44px;
  position:relative;
}
.waterline-rule{
  height:0;
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding-bottom:3px;
}
.waterline-label{
  font-family:var(--agate);
  font-size:10.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  text-align:center;
  padding:9px 0 0;
  color:var(--ink-soft);
}

.below{
  background:var(--deepwater);
  margin-top:18px;
  padding:30px 0 46px;
  border-top:1px solid var(--rule-deep);
}
.below .wrap{max-width:1180px;}

.desks{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}
.desk{
  padding:0 22px;
  border-right:1px solid var(--rule-deep);
}
.desk:first-child{padding-left:0;}
.desk:last-child{border-right:0;padding-right:0;}
.desk-name{
  font-family:var(--agate);
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--oxblood);
  margin:0 0 6px;
}
.desk h3{
  font-family:var(--display);
  font-size:22px;
  line-height:1.12;
  margin:0 0 7px;
}
.desk .dek{
  font-size:15px;
  line-height:1.44;
  color:var(--ink-soft);
  margin:0 0 8px;
}
.desk .who{
  font-family:var(--agate);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ---------- ad ---------- */

.adbox{
  border:2px solid var(--ink);
  padding:16px 18px;
  text-align:center;
  margin:34px auto 0;
  max-width:560px;
}
.ad-head{
  font-family:var(--display);
  font-weight:700;
  font-size:26px;
  letter-spacing:.03em;
  margin:0 0 6px;
}
.ad-body{font-size:15px;line-height:1.4;margin:0 0 8px;}
.ad-tag{
  font-family:var(--agate);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
}

/* ---------- article page ---------- */

.folio{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-family:var(--agate);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-bottom:2px solid var(--ink);
  padding:14px 0 6px;
  margin-bottom:26px;
}
.folio a{text-decoration:none;}
.folio a:hover{text-decoration:underline;}

.article{
  max-width:var(--measure);
  margin:0 auto;
  padding-bottom:54px;
}
.article .slugline{
  font-family:var(--agate);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  text-align:center;
  margin:0 0 10px;
  color:var(--oxblood);
}
.article h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(32px,5.4vw,54px);
  line-height:1.03;
  letter-spacing:-.018em;
  text-align:center;
  margin:0 0 14px;
}
.article .deck{text-align:center;margin:0 auto 16px;max-width:52ch;}
.article .byline{text-align:center;}

.article .prose p{
  margin:0 0 0;
  text-indent:1.15em;
}
.article .prose p:first-of-type{text-indent:0;}
.article .prose p.brk{
  text-align:center;
  text-indent:0;
  letter-spacing:.5em;
  margin:14px 0;
  color:var(--ink-soft);
}
.article .prose:first-of-type > p:first-of-type::first-letter{
  float:left;
  font-family:var(--display);
  font-weight:700;
  font-size:62px;
  line-height:.76;
  padding:4px 7px 0 0;
}

.endnote{
  margin-top:24px;
  padding-top:10px;
  border-top:1px solid var(--ink);
  font-size:14px;
  font-style:italic;
  line-height:1.44;
  color:var(--ink-soft);
}

/* ---------- masthead page ---------- */

.mast-list{
  columns:3;
  column-gap:30px;
  font-family:var(--agate);
  font-size:15px;
  letter-spacing:.02em;
  list-style:none;
  padding:0;
  margin:22px 0 0;
}
.mast-list li{
  padding:5px 0;
  border-bottom:1px solid var(--rule);
  break-inside:avoid;
}

/* ---------- colophon ---------- */

.colophon{
  border-top:3px solid var(--ink);
  margin-top:0;
  padding:16px 0 40px;
  font-family:var(--agate);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
  color:var(--ink-soft);
}

/* ---------- responsive ---------- */

@media (max-width:900px){
  .pageone{grid-template-columns:1fr;}
  .lead{padding-right:0;}
  .rail{
    border-left:0;
    border-top:1px solid var(--rule);
    padding-left:0;
    padding-top:22px;
    margin-top:26px;
  }
  .desks{grid-template-columns:1fr;}
  .desk{
    padding:0 0 18px;
    border-right:0;
    border-bottom:1px solid var(--rule-deep);
    margin-bottom:18px;
  }
  .desk:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0;}
  .mast-list{columns:2;}
}

@media (max-width:620px){
  body{font-size:16px;}
  .cols{column-count:1;}
  .skybox{grid-template-columns:1fr;}
  .skybox a{border-right:0;border-bottom:1px solid var(--rule);}
  .skybox a:last-child{border-bottom:0;}
  .mast-list{columns:1;}
  .article .prose:first-of-type > p:first-of-type::first-letter{font-size:50px;}
}

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


/* ---------- front page grid ---------- */

.main-col{padding-right:30px;}

.cols-3{column-count:3;}
.cols-2{column-count:2;}

.story-rule{
  border:0;
  border-top:1px solid var(--rule);
  margin:26px 0 22px;
}
.fold-rule{
  border:0;
  border-top:3px solid var(--ink);
  border-bottom:1px solid var(--ink);
  height:3px;
  margin:30px 0 24px;
}

.hed-2{font-size:clamp(26px,3.6vw,38px);}
.hed-3{font-size:clamp(24px,3.2vw,34px);}
.deck-2{font-size:clamp(15px,1.7vw,18px);}

.belowfold{padding-bottom:6px;}

.adbox-rail{
  margin:26px 0 0;
  max-width:none;
  padding:13px 14px;
}
.adbox-rail .ad-head{font-size:20px;}
.adbox-rail .ad-body{font-size:13.5px;}
.adbox-rail .ad-tag{font-size:10px;}

@media (max-width:900px){
  .main-col{padding-right:0;}
  .cols-3{column-count:2;}
}
@media (max-width:620px){
  .cols-3,.cols-2{column-count:1;}
}

/* ---------- nav line + service pages ---------- */

.mast-slot{
  border:1px dashed var(--rule);
  font-family:var(--agate);
  font-size:10px;
  letter-spacing:.28em;
  text-transform:uppercase;
  text-align:center;
  color:var(--ink-soft);
  padding:22px 10px;
  margin-bottom:14px;
}

.navline{
  display:flex;
  justify-content:center;
  gap:clamp(14px,3vw,34px);
  padding:9px 0 0;
  font-family:var(--agate);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-bottom:1px solid var(--ink);
  padding-bottom:9px;
  flex-wrap:wrap;
}
.navline a{text-decoration:none;padding-bottom:2px;}
.navline a.on{
  color:var(--oxblood);
  border-bottom:2px solid var(--oxblood);
}
.navline a:hover{text-decoration:underline;}

.svc h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(30px,5vw,50px);
  line-height:1.04;
  letter-spacing:-.018em;
  margin:26px 0 10px;
  text-align:left;
}
.svc .deck{text-align:left;margin:0 0 18px;}
.standing-copy p{margin:0 0 12px;max-width:62ch;}
.svc-title{
  font-family:var(--agate);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  border-bottom:2px solid var(--ink);
  padding-bottom:5px;
  margin:26px 0 10px;
}
.slot{
  border:1px dashed var(--rule);
  padding:14px;
  font-family:var(--agate);
  font-size:13px;
  color:var(--ink-soft);
  margin:0 0 8px;
}

/* ---------- Aug 4 front page ---------- */

.ear{
  font-family:var(--body);
  font-style:italic;
  font-size:13px;
  text-transform:none;
  letter-spacing:0;
}
.ear-label{
  display:block;
  font-family:var(--agate);
  font-style:normal;
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin-bottom:2px;
}
.ear-r{text-align:right;}

.kicker-the{
  font-family:var(--agate);
  font-size:clamp(11px,1.6vw,15px);
  letter-spacing:.6em;
  text-transform:uppercase;
  text-align:center;
  margin:2px 0 0;
  text-indent:.6em;
}

.hed,.hed-2{text-transform:uppercase;}
.hed{font-size:clamp(28px,4.6vw,50px);line-height:1.06;}
.hed-2{font-size:clamp(22px,3vw,32px);}

.lede-place{
  font-family:var(--agate);
  font-size:.85em;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.dropcap p:first-child::first-letter{
  float:left;
  font-family:var(--display);
  font-weight:700;
  font-size:58px;
  line-height:.78;
  padding:3px 6px 0 0;
}

.rail-sec{
  border-bottom:1px solid var(--rule);
  padding-bottom:12px;
  margin-bottom:12px;
}
.rail-sec:last-child{border-bottom:0;margin-bottom:0;}
.rail-item{
  margin:0 0 8px;
  font-size:14.5px;
  line-height:1.45;
}
.rail-item:last-child{margin-bottom:0;}
.rail-item a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;}

.foldmark{
  margin-top:40px;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding:5px 0;
  text-align:center;
  font-family:var(--agate);
  font-size:10px;
  letter-spacing:.7em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.foldmark span{text-indent:.7em;display:inline-block;}

.colophon{
  border-top:0;
  margin-top:26px;
  font-size:10.5px;
  letter-spacing:.22em;
}

.duck{
  display:block;
  margin:0 auto 2px;
  width:clamp(46px,7vw,72px);
  height:auto;
  color:var(--ink);
}

/* ---------- masthead with the original duck ---------- */

/* Three rows, so the duck and the ears sit on the NAMEPLATE line and not on
   the whole column — the duck used to bottom-align with the slogan and hang
   below the name. */
.masthead-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:". kicker ." "duck name ears" ". slogan .";
  align-items:center;
  column-gap:10px;
}
.masthead-grid .kicker-the{grid-area:kicker;}
.masthead-grid .nameplate{grid-area:name;}
.masthead-grid .slogan{grid-area:slogan;}
.mast-left{grid-area:duck;align-self:center;justify-self:start;}
.duck{
  display:block;
  width:clamp(76px,11.5vw,128px);  /* Sept 26: the drawn frame (duck-framed.svg) takes ~12% of the width; the duck inside stays the Sept 25 size */
  height:auto;
  margin:0;
}
.mast-right{
  grid-area:ears;
  text-align:right;
  font-family:var(--body);
  font-style:italic;
  font-size:13px;
  color:var(--ink);
  align-self:center;
}
.ear-blk{margin:0;}
.ear-dash{font-style:normal;color:var(--ink-soft);line-height:1.1;}
.ear-label{
  display:block;
  font-family:var(--agate);
  font-style:normal;
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
}

@media (max-width:620px){
  .masthead-grid{grid-template-columns:auto 1fr;grid-template-areas:"kicker kicker" "duck name" "slogan slogan" "ears ears";align-items:center;}
  .mast-right{text-align:center;display:flex;gap:14px;justify-content:center;align-items:baseline;margin-top:8px;}
  .ear-dash{display:none;}
}

/* ---------- the Fiscal Clock ---------- */

.clockcut{
  display:block;
  width:min(520px,92vw);
  height:auto;
  margin:2px auto 16px;
}
.dissent{
  border-top:1px solid var(--rule);
  padding:12px 0 2px;
}
.dissent:first-of-type{border-top:0;padding-top:2px;}
.dissent-name{
  font-family:var(--agate);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:0 0 4px;
  color:var(--oxblood);
}
.dissent-text{
  margin:0 0 10px;
  font-style:italic;
}

/* ---------- Issue I plan ---------- */

.piece{
  border-top:1px solid var(--rule);
  padding:9px 0 7px;
}
.piece-title{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-size:17.5px;
  line-height:1.22;
}
.piece-title a{text-decoration:none;}
.piece-title a:hover{text-decoration:underline;}
/* Copy that runs in the paper but has no page of its own: the insert, the
   weather art, standing furniture. Listed, not linked. */
.piece-title.unlinked{color:var(--ink-soft, #4A4E52);}
.piece-meta{
  margin:2px 0 0;
  font-family:var(--agate);
  font-size:12.5px;
  letter-spacing:.03em;
  color:var(--ink-soft);
}
.st{
  display:inline-block;
  margin-left:8px;
  padding:1px 7px 2px;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  border:1px solid currentColor;
}
.st-live{color:var(--oxblood);}
.st-set{color:var(--ink-soft);}
.st-owed{color:var(--ink);}
.held{
  margin:0 0 10px;
  font-size:15px;
  line-height:1.5;
}
.st-part{color:#8A6A1F;}
.verse{text-indent:0 !important;margin:0 0 14px;line-height:1.42;}
.speaker{text-indent:0 !important;margin:0 0 10px;}
.em{text-indent:0 !important;font-style:italic;margin:0 0 10px;color:var(--ink-soft);}

/* ---------- masthead staff entries ---------- */

.mast-list:has(.mast-bio){
  columns:2;
  column-gap:38px;
  font-family:var(--body);
  font-size:16px;
  letter-spacing:0;
}
.mast-list:has(.mast-bio) li{
  padding:0 0 14px;
  margin:0 0 14px;
  border-bottom:1px solid var(--rule);
}
.mast-name{
  display:block;
  font-family:var(--agate);
  font-size:12.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-bottom:3px;
}
.mast-bio{
  display:block;
  line-height:1.45;
  text-wrap:pretty;
}
@media (max-width:760px){
  .mast-list:has(.mast-bio){ columns:1; }
}

/* ---------- advertisements ---------- */

.adhead{
  max-width:none;
  margin:0;
  padding:0 0 10px;
  border-bottom:1px solid var(--rule);
}
.adhead h1{ margin:22px 0 6px; }
.adhead .deck{ margin:0; max-width:none; }
.adgrid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
  margin:26px 0 10px;
}
.ad{ grid-column:span 2; }
.ad.wide{ grid-column:span 3; }
.ad.narrow{ grid-column:span 1; }
.ad-inner{
  border:1px solid var(--ink);
  padding:14px 13px 12px;
  height:100%;
  display:flex;
  flex-direction:column;
  text-align:center;
}
.ad-name{
  font-family:var(--display);
  font-weight:700;
  font-size:19px;
  line-height:1.1;
  letter-spacing:.01em;
  margin:0;
}
.ad.wide .ad-name{ font-size:25px; }
.ad.narrow .ad-name{ font-size:15px; }
.ad-kicker{
  font-family:var(--agate);
  font-size:10.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin:5px 0 0;
  padding-bottom:7px;
  border-bottom:1px solid var(--rule);
}
.ad-copy{
  font-family:var(--body);
  font-size:13.5px;
  line-height:1.42;
  text-align:left;
  margin:9px 0 0;
  text-wrap:pretty;
}
.ad-tag{
  font-family:var(--agate);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:auto 0 0;
  padding-top:11px;
}
/* No Agency sells nothing. The box stays empty, but the firm still has to
   sign it — the name shows, and that is the whole joke. */
.ad.noagency .ad-inner{ min-height:150px; justify-content:center; }
.ad.noagency .ad-name{ font-size:21px; }
.ad.noagency .ad-tag{ font-size:11px; letter-spacing:.2em; margin-top:auto; }
@media (max-width:760px){
  .adgrid{ grid-template-columns:repeat(2,1fr); }
  .ad,.ad.wide,.ad.narrow{ grid-column:span 2; }
}

/* ---------- in-flow advertisement ---------- */

.ad.inflow{
  display:block;
  float:right;
  width:270px;
  margin:6px 0 18px 26px;
  clear:right;
}
.ad.inflow .ad-inner{
  border:1px solid var(--ink);
  padding:12px 13px 11px;
  text-align:center;
}
.ad-slug{
  font-family:var(--agate);
  font-size:8.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin:0 0 8px;
  padding-bottom:6px;
  border-bottom:1px solid var(--rule);
  opacity:.7;
}
.ad.inflow .ad-name{ font-size:17px; }
.ad.inflow .ad-copy{ font-size:12.5px; line-height:1.4; }
.ad-more{
  font-family:var(--agate);
  font-size:8.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:10px 0 0;
  padding-top:9px;
  border-top:1px solid var(--rule);
}
.ad-more a{ color:inherit; }
@media (max-width:760px){
  .ad.inflow{ float:none; width:auto; margin:22px 0; }
}

/* ---------- advertiser house marks ---------- */

/* Marks are wordmarks now, with wildly different aspect ratios — Endogenous
   is 7:1, Dugong is nearly square. A fixed square box with overflow:visible
   let the wide ones render at intrinsic size and land on the copy. Cap BOTH
   axes and let the browser fit inside them. */
.ad-mark{
  display:block;
  height:34px;width:auto;max-width:100%;
  margin:0 auto 11px;
  color:var(--ink);
}
.ad.wide .ad-mark{ height:42px; }
.ad.narrow .ad-mark{ height:26px;margin-bottom:8px; }
.ad.inflow .ad-mark{ height:30px;margin-bottom:9px; }

/* ---------- rate card ---------- */

.card-sub{
  font-family:var(--agate);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:30px 0 10px;
  padding-bottom:6px;
  border-bottom:1px solid var(--rule);
}
.card-policy{
  border:1px solid var(--ink);
  padding:16px 18px;
  margin:6px 0 0;
}
.card-policy .card-sub{
  margin:0 0 8px;
  border:0;
  padding:0;
}
.card-policy p{ margin:0 0 9px; }
.card-policy p:last-child{ margin-bottom:0; }

table.rate{
  width:100%;
  border-collapse:collapse;
  margin:0 0 4px;
}
table.rate th{
  text-align:left;
  font-weight:600;
  padding:9px 14px 9px 0;
  border-bottom:1px solid var(--rule);
  white-space:nowrap;
  vertical-align:top;
}
table.rate td{
  padding:9px 0;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
table.rate td.dim{
  font-family:var(--agate);
  font-size:13px;
  letter-spacing:.04em;
  white-space:nowrap;
  padding-right:18px;
}
table.rate td.rnote{ font-size:15px; }
table.rate td.price{
  font-family:var(--display);
  font-size:19px;
  font-weight:600;
  white-space:nowrap;
  padding-right:20px;
  text-align:right;
}
table.rate.clock th{ width:38%; }

@media (max-width:640px){
  table.rate td.price{ text-align:left; padding-right:0; margin-top:3px; }
}

ul.mech{ margin:0; padding-left:1.15em; }
ul.mech li{ margin:0 0 9px; }
.card-next{ margin:0; }
.card-contact{ font-family:var(--agate); letter-spacing:.06em; margin:0 0 10px; }

@media (max-width:640px){
  table.rate th,table.rate td{ display:block; border:0; padding:2px 0; }
  table.rate tr{ display:block; padding:11px 0; border-bottom:1px solid var(--rule); }
}

/* ---------- subscribe ---------- */

.subscribe{
  border:1px solid var(--ink);
  padding:20px 22px 18px;
  margin:6px 0 0;
}
.sub-lead{ font-size:19px; margin:0 0 12px; }
.subscribe p{ margin:0 0 11px; }
.sub-cta{
  margin:18px 0 4px;
  font-family:var(--display);
  font-size:22px;
}
.sub-cta a{ color:inherit; text-decoration:none; border-bottom:2px solid var(--ink); }
.sub-cta a:hover{ border-bottom-width:4px; }
.sub-addr{
  font-family:var(--agate);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:none;
  margin:0 0 14px;
  opacity:.75;
}
.sub-note{
  font-size:13.5px;
  line-height:1.45;
  padding-top:12px;
  border-top:1px solid var(--rule);
  margin:0;
  opacity:.85;
}

/* ---------- subscribe form ---------- */

.sub-form{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:stretch;
  margin:18px 0 0;
}
.sub-form input[type=email]{
  flex:1 1 240px;
  min-width:0;
  font-family:var(--body);
  font-size:17px;
  padding:11px 13px;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  border-radius:0;
}
.sub-form input[type=email]::placeholder{ color:var(--ink); opacity:.4; }
.sub-form input[type=email]:focus{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--ink);
}
.sub-form button{
  font-family:var(--agate);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:11px 18px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--newsprint);
  cursor:pointer;
  border-radius:0;
}
.sub-form button:hover{ opacity:.85; }
.sub-form button:disabled{ opacity:.5; cursor:default; }

/* honeypot: off-screen, never focusable, invisible to a reader */
.sub-hp{
  position:absolute!important;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}
.sub-sr{
  position:absolute!important;
  width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);
}

.sub-msg{ margin:12px 0 0; font-size:15px; min-height:1.2em; }
.sub-msg.ok{ font-size:18px; }
.sub-msg.bad{ font-style:italic; }
.sub-form + .sub-msg:empty{ margin:0; min-height:0; }

/* ---------- days to midnight ---------- */

.midnight{
  font-family:var(--display);
  font-size:clamp(22px,3.6vw,30px);
  text-align:center;
  margin:16px 0 4px;
  letter-spacing:.01em;
}
.midnight-note{
  font-family:var(--agate);
  font-size:10.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-align:center;
  margin:0 0 26px;
  opacity:.7;
  line-height:1.7;
}

/* ---------- The Book — financial page ---------- */

.bookpage .deck{ margin-bottom:6px; }
.book-lead{ font-family:var(--agate); font-size:12px; letter-spacing:.04em;
  margin:0 0 22px; opacity:.8; }
.book-sub{
  font-family:var(--agate); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:600;
  margin:30px 0 0; padding-bottom:5px;
  border-bottom:2px solid var(--ink);
}
table.book{
  width:100%; border-collapse:collapse;
  font-family:var(--agate); font-size:13px; letter-spacing:.01em;
  margin:0 0 4px; font-variant-numeric:tabular-nums;
}
table.book th{
  text-align:right; font-weight:600; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; padding:7px 0 6px 12px;
  border-bottom:1px solid var(--rule); white-space:nowrap;
}
table.book th:first-child{ text-align:left; padding-left:0; }
table.book td{
  padding:5px 0 5px 12px; border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
table.book td:first-child{ padding-left:0; white-space:normal; }
table.book td.num{ text-align:right; }
table.book tr.hot td{ font-weight:700; }
.book-note{
  font-family:var(--agate); font-size:10.5px; letter-spacing:.03em;
  margin:7px 0 0; opacity:.72; line-height:1.5;
}
@media (max-width:620px){
  table.book{ font-size:11.5px; }
  table.book td,table.book th{ padding-left:7px; }
}

.book-cap{
  font-family:var(--agate); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; margin:12px 0 2px;
}
svg.spark{ display:block; width:100%; height:auto; margin:14px 0 4px;
  color:var(--ink); }
svg.spark .spark-lab{
  font-family:var(--agate); font-size:10px; letter-spacing:.1em;
  fill:currentColor; opacity:.65;
}

/* ---------- standalone display ad ---------- */

.display-ad{
  border:2px solid var(--ink);
  padding:26px 28px 22px;
  margin:26px 0 0;
  text-align:center;
}
.display-ad .ad-mark{ max-height:64px;margin:0 auto 14px; }
.dsp-name{
  font-family:var(--display);
  font-size:clamp(26px,4vw,38px);
  margin:0 0 4px;
  line-height:1.1;
}
.dsp-deck{ font-style:italic; margin:0 0 16px; opacity:.8; }
.dsp-body p{ margin:0 0 9px; }
.dsp-head{
  font-family:var(--agate); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; margin:14px 0 4px !important;
}
.dsp-kick{
  font-family:var(--agate); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; opacity:.75;
}

/* ---- print edition button, issue page ------------------------------------
   The only route from a set PDF to somebody's hands. Sized for a thumb. */
.edition{
  margin:1.6rem 0 2rem;
  padding:1.1rem 1.2rem 1rem;
  border:1px solid var(--rule);
  border-top:3px solid var(--ink);
  background:var(--deepwater);
}
.edition-btn{
  display:block;
  text-align:center;
  font-family:var(--agate);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.85rem 1rem;
  min-height:44px;
  color:var(--newsprint);
  background:var(--ink);
  border:1px solid var(--ink);
  text-decoration:none;
}
.edition-btn:hover,.edition-btn:focus{
  background:var(--oxblood);
  border-color:var(--oxblood);
  color:var(--newsprint);
}
.edition-meta,.edition-prior{
  font-family:var(--agate);
  font-size:.78rem;
  letter-spacing:.03em;
  color:var(--ink-soft);
  text-align:center;
  margin:.6rem 0 0;
}
.edition-prior a{color:var(--ink-soft);}
.edition-prior span{opacity:.7;}

/* ---- document forms -------------------------------------------------------
   The paper has no illustrator. This is the visual language it does have:
   rules, agate and a stamp. A form is legible at arm's length and funny
   before it is read, which is the pickup problem. See forms.py. */
.formdoc{
  border:2.5px solid var(--ink);
  padding:0;
  margin:1.8rem 0;
  background:var(--newsprint);
  font-family:var(--agate);
  position:relative;
}
.formdoc-head{
  border-bottom:2.5px solid var(--ink);
  padding:.7rem .9rem .55rem;
  text-align:center;
}
.formdoc-title{
  margin:0; font-weight:700; font-size:.92rem;
  letter-spacing:.13em; text-transform:uppercase; line-height:1.3;
}
.formdoc-sub{
  margin:.28rem 0 0; font-size:.7rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-soft);
}
.formdoc-meta{
  display:grid; grid-template-columns:auto 1fr;
  gap:0; margin:0; border-bottom:1px solid var(--rule);
}
.formdoc-meta dt{
  padding:.34rem .9rem; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft);
  border-bottom:1px solid var(--rule); border-right:1px solid var(--rule);
  white-space:nowrap;
}
.formdoc-meta dd{
  margin:0; padding:.34rem .9rem; font-size:.82rem;
  border-bottom:1px solid var(--rule);
}
.formdoc-meta dt:last-of-type,.formdoc-meta dd:last-of-type{border-bottom:0;}
.formdoc-table{
  width:100%; border-collapse:collapse; font-size:.76rem;
}
.formdoc-table th{
  text-align:left; font-weight:700; font-size:.64rem;
  letter-spacing:.11em; text-transform:uppercase;
  padding:.4rem .9rem; border-bottom:1.5px solid var(--ink);
  white-space:nowrap;
}
.formdoc-table td{
  padding:.3rem .9rem; border-bottom:1px solid var(--rule);
}
.formdoc-table td.num{font-variant-numeric:tabular-nums;}
.formdoc-table tr:last-child td{border-bottom:0;}
.formdoc-stamp{
  margin:.9rem .9rem .2rem; text-align:right;
}
.formdoc-stamp span{
  display:inline-block; border:2.5px solid var(--oxblood);
  color:var(--oxblood); padding:.2rem .7rem;
  font-weight:700; font-size:.78rem; letter-spacing:.22em;
  transform:rotate(-4deg);
}
.formdoc-sigs{
  display:flex; gap:1.4rem; flex-wrap:wrap;
  padding:1.1rem .9rem .5rem;
}
.formdoc-sig{flex:1 1 9rem;}
.formdoc-sig .rule{
  display:block; border-bottom:1px solid var(--ink); height:1.1rem;
}
.formdoc-sig .cap{
  display:block; font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); padding-top:.22rem;
}
.formdoc-note{
  margin:0; padding:.5rem .9rem .7rem; font-size:.7rem;
  font-style:italic; color:var(--ink-soft);
  border-top:1px solid var(--rule);
}

/* Desk jump-nav on the issue page. Grouping does not cure burial on its own;
   this is the one tap that does. */
.desknav{
  margin:1.4rem 0 1.8rem;
  padding:.55rem 0;
  border-top:1px solid var(--rule,#000);
  border-bottom:1px solid var(--rule,#000);
  font-family:inherit;
  font-size:.72rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:2.1;
}
.desknav a{
  text-decoration:none;
  border-bottom:1px solid transparent;
  white-space:nowrap;
  margin-right:.85rem;
}
.desknav a:hover{border-bottom-color:currentColor;}
.svc-title{scroll-margin-top:1.2rem;}

/* ---------- market tables ---------- */
.mkt{
  width:100%;
  border-collapse:collapse;
  font-family:var(--agate);
  font-size:12.5px;
  line-height:1.35;
  margin:10px 0 18px;
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.mkt th{
  text-align:left;
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:5px 8px 4px 0;
  border-bottom:1px solid var(--ink);
}
.mkt td{
  padding:3px 8px 3px 0;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.mkt tr:last-child td{border-bottom:none;}
.mkt th.num,.mkt td.num{text-align:right;font-variant-numeric:tabular-nums;}
.mkt-rule td{border-bottom:1px solid var(--ink);padding:0;height:2px;}


/* ---------- dressed advertisements ----------
   Every advertiser is a stranger: border, faces and picture come from
   dress.py, inline, per ad. These rules only hold the frame. */
.ad.dressed{ display:block; align-self:start; }
.ad.dressed .ad-dress{ box-sizing:border-box; }
.adgrid{ grid-auto-flow:dense; }
.ad-dress{ color:var(--ink); display:flex; flex-direction:column; }
.ad-dress .dr{ margin:0 0 6px; }
.ad-dress .dr-name{ font-weight:700; letter-spacing:.02em; text-transform:uppercase; }
.ad-dress .dr-label{ letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px; }
.ad-dress .dr-label.rev{ background:var(--ink); color:var(--newsprint); padding:3px 8px; }
.ad-dress .dr-kicker{ letter-spacing:.1em; text-transform:uppercase; }
.ad-dress .dr-tag{ text-transform:uppercase; letter-spacing:.06em; padding-top:4px; }
.ad-dress .dr-line{ margin:0 0 4px; }
.ad-dress .dr-cut{ display:block; width:100%; height:auto; margin:0 0 10px; }
.ad-dress .dr-mark{ display:block; }
.ad-dress .dr-mark .ad-mark{ height:100%; width:auto; max-width:100%; margin:0; }
.ad-dress .dr-rule{ border:0; border-top:1px solid var(--ink); width:62%; margin:2px auto 8px; }
.ad-dress.dr-air{ height:100%; justify-content:center; }
.ad.inflow.dressed{ display:block; }
.ad.inflow.dressed .ad-dress{ margin:0; }

/* ---------- circulation: the stack list, generated from the board ---------- */
.stack-route{
  font-family:var(--agate);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:16px 0 4px;
}
.stacklist{
  list-style:none;
  margin:0 0 10px;
  padding:0;
  border-top:1px solid var(--rule);
}
.stacklist li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding:6px 0;
  border-bottom:1px solid var(--rule);
  font-family:var(--body);
  font-size:15px;
}
.stack-addr{
  font-family:var(--agate);
  font-size:12px;
  color:var(--ink-soft);
  text-align:right;
  white-space:nowrap;
}
.routelist{margin-top:0;}
.svc-lead{
  font-family:var(--body);
  font-size:14.5px;
  font-style:italic;
  color:var(--ink-soft);
  margin:0 0 10px;
}


/* "Where did you find us" - optional, its own line under the address field.
   .sub-form is already flex-wrap:wrap, so a 100% basis is all it takes. */
.sub-found{
  flex:1 1 100%;
  min-width:0;
  font-family:var(--body);
  font-size:15px;
  padding:9px 13px;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  border-radius:0;
  opacity:.8;
}
.sub-found::placeholder{ color:var(--ink); opacity:.4; }
.sub-found:focus{ outline:none; box-shadow:inset 0 0 0 2px var(--ink); opacity:1; }

/* ---------- the drawn frame (Sept 26) ----------
   Every cut sits in its byline's hand-drawn frame with the byline in the
   band — the carousel frame, carried through the site and the paper.
   frames.figure_svg() draws it; the page just gives it the column. */
.framed-cut{display:block;width:100%;height:auto;margin:6px 0 16px;overflow:visible;}
.article .framed-cut{margin:2px 0 18px;}

/* Sept 27: a story head inside the Book (the floor report), set like the
   print page's: display serif, two lines at most, tight under the rule. */
.book-head{ font-family:var(--display); font-weight:700;
  font-size:30px; line-height:1.12; letter-spacing:-.005em;
  margin:.55em 0 .35em; }

/* ---------- home river (Sept 2026 redesign) ----------
   Open the paper and the pieces are there. Ads live inside pieces only. */

.home{padding-top:clamp(14px,2.5vw,26px);padding-bottom:40px;}
.h-card{position:relative;}
.h-card a{text-decoration:none;}
.h-card .h-hed a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.h-pic{display:block;}
.h-pic img{display:block;width:100%;height:auto;border:1px solid var(--rule);}
.h-desk{font-family:var(--agate);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;color:var(--oxblood);margin:0 0 4px;}
.h-hed{font-family:var(--display);font-weight:700;line-height:1.08;margin:0 0 6px;font-size:21px;letter-spacing:-.005em;}
.h-deck{font-style:italic;color:var(--ink-soft);margin:0 0 6px;font-size:15.5px;line-height:1.38;}
.h-by{font-family:var(--agate);text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--ink-soft);margin:0;}

.h-top{display:grid;grid-template-columns:2fr 1fr;gap:clamp(18px,3vw,36px);padding-bottom:24px;border-bottom:3px double var(--ink);}
/* Sept 28: lead banner. The lead's cut ran full height and filled the
   screen; the paper runs it as a banner crop taken low in the frame
   (issue.py _crop_front_cut, top at 62%). Same crop here. */
.h-l .h-pic img{aspect-ratio:3.2/1;object-fit:cover;object-position:center 62%;}
.h-l .h-hed{font-size:clamp(28px,4.2vw,48px);line-height:1.02;text-transform:uppercase;margin-top:12px;}
.h-l .h-deck{font-size:clamp(16px,1.6vw,19px);}
.h-sidecol{border-left:1px solid var(--rule);padding-left:clamp(18px,3vw,36px);}
.h-m .h-hed{font-size:clamp(22px,2.3vw,28px);margin-top:10px;}

.h-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;padding:18px 0;border-bottom:1px solid var(--rule);}
.h-rail ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.4;}
.h-rail li+li{margin-top:6px;}

.h-sec{padding-top:22px;}
.h-sectitle{font-family:var(--agate);text-transform:uppercase;letter-spacing:.16em;font-size:13px;font-weight:700;margin:0 0 14px;padding-bottom:6px;border-bottom:1px solid var(--ink);}
.h-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px clamp(18px,2.5vw,30px);}
.h-s .h-hed{margin-top:8px;}

@media (max-width:900px){
  .h-top{grid-template-columns:1fr;}
  .h-sidecol{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:18px;}
  .h-grid{grid-template-columns:repeat(2,1fr);}
}

/* Phones: the nameplate shrinks to one line, slogan/ears/dateline go,
   the nav becomes one swipeable row. Applies on every page. */
@media (max-width:620px){
  .plate{padding-top:10px;}
  .masthead-grid{display:flex !important;align-items:center;justify-content:center;gap:10px;}
  .masthead-grid .kicker-the,.masthead-grid .slogan,.mast-right,.dateline{display:none !important;}
  .duck{width:38px !important;height:auto !important;}
  .nameplate{font-size:31px !important;line-height:1 !important;margin:0 !important;white-space:nowrap;}
  .navline{display:flex !important;flex-wrap:nowrap !important;justify-content:flex-start !important;overflow-x:auto;white-space:nowrap;gap:18px !important;padding:9px 0 7px !important;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .navline::-webkit-scrollbar{display:none;}
  .navline a{flex:0 0 auto;}

  .h-top{padding-bottom:16px;}
  .h-l .h-hed{font-size:27px;}
  .h-grid{grid-template-columns:1fr;gap:0;}
  .h-grid .h-card{display:grid;grid-template-columns:1fr 104px;gap:12px;align-items:start;padding:14px 0;border-top:1px solid var(--rule);}
  .h-grid .h-card:first-child{border-top:0;padding-top:0;}
  .h-grid .h-card.h-noart{grid-template-columns:1fr;}
  .h-grid .h-pic{order:2;}
  .h-grid .h-pic img{aspect-ratio:1/1;object-fit:cover;}
  .h-grid .h-txt{order:1;}
  .h-s .h-hed{margin-top:0;font-size:19px;}
  .h-s .h-deck{font-size:14.5px;}
  .h-rail{grid-template-columns:1fr;}
}
.h-xs{border-top:1px solid var(--rule);padding-top:12px;margin-top:14px;}
.h-xs .h-hed{font-size:18px;margin:0 0 4px;}
.h-m + .h-xs{margin-top:18px;}

/* ---------- Sept 28 audit of the section pages ---------- */
/* one-line nameplate on every inner page, at every width */
.plate-compact{padding-top:12px;}
.plate-compact .masthead-grid{display:flex !important;align-items:center;justify-content:center;gap:12px;}
.plate-compact .kicker-the,.plate-compact .slogan,.plate-compact .mast-right{display:none !important;}
.plate-compact .duck{width:44px !important;height:auto !important;}
.plate-compact .nameplate{font-size:clamp(30px,3.4vw,40px) !important;line-height:1 !important;margin:0 !important;white-space:nowrap;}
.plate-compact .dateline{display:none !important;}
/* book tables: prose columns wrap, figure columns hold */
table.book td{white-space:normal;}
table.book td.num{white-space:nowrap;}
table.book th.txt{text-align:left;}
@media (max-width:620px){
  .folio{display:none;}
  .bookpage .book-lead,.book-lead{font-size:14.5px;line-height:1.5;}
  .book-note{font-size:12px;}
  table.book{font-size:13px;}
}
@media (max-width:620px){
  .midnight-note{font-size:12px;letter-spacing:.08em;opacity:.8;}
}
@media (max-width:620px){
  main{padding-top:14px;}
  .piece-meta{font-size:13.5px !important;line-height:1.45;}
  .piece-title{font-size:18px !important;}
}

/* In Brief: the standing items as one boxed sidebar, not a wall of text */
.h-rail{display:block;margin:26px 0 4px;padding:14px 16px 6px;background:var(--deepwater);border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);}
.h-railhead{font-family:var(--agate);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:12.5px;margin:0 0 6px;}
.h-railgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 22px;}
.h-railsec{padding:10px 0 12px;border-top:1px solid var(--rule-deep);}
.h-railsec .h-desk{font-size:11px;margin-bottom:3px;}
.h-rail ul{font-size:14.5px;line-height:1.38;}
.h-rail a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;}
@media (max-width:620px){
  .h-rail{margin:22px -4px 0;padding:12px 14px 4px;}
  .h-railgrid{grid-template-columns:1fr 1fr;gap:0 14px;}
  .h-railsec{padding:8px 0 10px;}
  .h-rail ul{font-size:13.5px;line-height:1.36;}
}
/* pack the briefs like a newspaper column rather than a grid with holes */
.h-railgrid{display:block;column-count:3;column-gap:26px;}
.h-railsec{break-inside:avoid;-webkit-column-break-inside:avoid;}
@media (max-width:900px){.h-railgrid{column-count:2;}}
@media (max-width:620px){.h-railgrid{column-count:2;column-gap:16px;}}

/* ---------- the nameplate stays with you (Sept 28) ----------
   Inner pages: the one-line plate is sticky. Home on desktop: the full
   broadsheet nameplate scrolls away and a slim bar (duck, name, sections)
   slides in. Phones: the one-line plate is sticky on every page. */
.plate-compact{position:sticky;top:0;z-index:50;background:var(--newsprint);}
.plate-compact .navline{margin-bottom:0;}
.minibar{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--newsprint);border-bottom:1px solid var(--ink);
  transform:translateY(-110%);transition:transform .18s ease;box-shadow:0 1px 0 var(--rule);}
.minibar.show{transform:none;}
.minibar .wrap{display:flex;align-items:center;gap:22px;height:48px;}
.mini-name{display:flex;align-items:center;gap:8px;font-family:var(--nameplate);font-weight:800;font-size:22px;text-decoration:none;white-space:nowrap;}
.mini-duck{width:26px;height:auto;}
.mini-nav{display:flex;gap:18px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;font-family:var(--agate);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;}
.mini-nav::-webkit-scrollbar{display:none;}
.mini-nav a{text-decoration:none;}
.mini-nav a.on{color:var(--oxblood);}
@media (max-width:620px){
  .plate{position:sticky;top:0;z-index:50;background:var(--newsprint);}
  .minibar{display:none;}
}
@media (prefers-reduced-motion:reduce){.minibar{transition:none;}}
.footnav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:0 0 12px;font-family:var(--agate);text-transform:uppercase;letter-spacing:.12em;font-size:12px;}
.footnav a{text-decoration:none;}
.footnav a:hover{text-decoration:underline;}

/* ---------- phone nav (Sept 28) ----------
   The paper's own nav, smaller: the section you're on in oxblood with its
   rule, the row fading at the right edge so it reads as more-this-way, and
   a hard rule under the header so the page visibly scrolls beneath it. */
@media (max-width:620px){
  .plate{border-bottom:1px solid var(--ink);padding-bottom:0;}
  .navline{border:0 !important;gap:16px !important;padding:8px 0 7px !important;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);}
  .navline a{font-size:11px !important;letter-spacing:.12em !important;}
  .navline a:last-child{margin-right:40px;}
}

/* ---------- Editions (Sept 28) ---------- */
.eds .ed{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--ink);}
.ed-cover img{display:block;width:100%;height:auto;border:1px solid var(--rule);box-shadow:0 1px 3px rgba(0,0,0,.12);}
.ed-title{font-family:var(--display);font-size:32px;line-height:1.05;margin:2px 0 8px;}
.ed-lead{font-size:15.5px;margin:8px 0 12px;}
.ed-lead .k{font-family:var(--agate);text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--ink-soft);}
.ed-links{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:baseline;margin:0;}
.ed-go{font-family:var(--agate);text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:700;color:var(--oxblood);text-decoration:none;}
.ed-pdf{font-family:var(--agate);font-size:13px;letter-spacing:.04em;color:var(--ink-soft);}
.ed-next{font-family:var(--agate);font-size:13.5px;letter-spacing:.03em;color:var(--ink-soft);margin:0 0 18px;}
.desknav-fold{margin:14px 0 6px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:8px 0;}
.desknav-fold summary{font-family:var(--agate);text-transform:uppercase;letter-spacing:.14em;font-size:12px;cursor:pointer;}
.desknav-fold .desknav{margin:10px 0 4px;}
.issueplan .slugline a{text-decoration:none;}
@media (max-width:620px){
  .eds .ed{grid-template-columns:118px 1fr;gap:14px;}
  .ed-title{font-size:25px;}
  .issueplan .edition-btn{font-size:13px;padding:10px 14px;}
}

/* ---------- by mail (Sept 28) ---------- */
.mailbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:6px 0 8px;}
.mail-offer{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"price label" "price note";gap:2px 14px;align-items:baseline;
  border:1px solid var(--ink);padding:12px 14px;text-decoration:none;background:var(--newsprint);}
.mail-offer:hover{background:var(--deepwater);}
.mo-price{grid-area:price;font-family:var(--display);font-weight:700;font-size:30px;line-height:1;}
.mo-label{grid-area:label;font-family:var(--agate);text-transform:uppercase;letter-spacing:.1em;font-size:12.5px;font-weight:700;}
.mo-note{grid-area:note;font-size:14.5px;color:var(--ink-soft);line-height:1.35;}
.mo-fine{font-family:var(--agate);font-size:12px;color:var(--ink-soft);margin:4px 0 18px;}

/* Sept 28: too much italic. Decks and section leads set roman in the soft
   ink; italic stays for what it is for: the slogan, pull quotes, endnotes,
   the ears, a dissent. */
.deck,.h-deck,.svc-lead,.dsp-deck{font-style:normal !important;}
.h-more{font-family:var(--agate);text-transform:uppercase;letter-spacing:.12em;font-size:12.5px;font-weight:700;margin:14px 0 0;}
.h-more a{color:var(--oxblood);text-decoration:none;}

/* Sept 28: the desktop nameplate on one line, with the duck and the ears
   brought up to meet it (two lines left them looking like marginalia). */
@media (min-width:621px){
  .plate:not(.plate-compact) .nameplate{white-space:nowrap;font-size:clamp(40px,6.4vw,84px);line-height:1;}
  .plate:not(.plate-compact) .duck{width:clamp(76px,10vw,118px);}
  .plate:not(.plate-compact) .mast-right{font-size:16px;line-height:1.35;}
  .plate:not(.plate-compact) .ear-blk{white-space:nowrap;}
  .plate:not(.plate-compact) .ear-label{font-size:11px;letter-spacing:.2em;}
}

/* Sept 28: every card picture the same shape, so a tall drawing cannot
   take over a row and the grid keeps an even rhythm. The lead keeps its own. */
.h-grid .h-pic img,.h-sidecol .h-m .h-pic img{aspect-ratio:4/3;object-fit:cover;object-position:center 35%;}
.h-grid .h-pic + .h-txt{margin-top:10px;}
@media (max-width:620px){.h-grid .h-pic + .h-txt{margin-top:0;}}