/* ==========================================================================
   EARLY EDITION · THE RACK · desk.earlyeditionnews.com
   --------------------------------------------------------------------------
   PART 1 (LIVE SYSTEM) is the inline sheet served by
   read.earlyeditionnews.com, with ONE deliberate divergence: the label face.
   The live pages set every kicker, folio, label and fine-print line in
   Courier Prime. This site runs on two faces only, Playfair Display for the
   nameplate and Newsreader for everything else, so --font-mono became
   --font-label and points at Newsreader. Label weights that ran at 400 in
   the monospace run at 600 here, because a serif at 400 is lighter at label
   size than a monospace is. Everything else in Part 1 is untouched.
   SECOND divergence: a 16px floor. The live sheet runs labels, folios,
   captions and fine print at 11 to 15px. Nothing on this site is set below
   16px. Both divergences are deliberate and both are the operator's call.
   NOTE: until the three live pages make the same changes, their labels and
   this site's labels differ in face and in size.
   PART 2 (RACK DEVICES) is new. Every rule in it is built from PART 1 tokens,
   PART 1 rule weights, and the 8/13/21/26/34/55 spacing scale. No new colour,
   no new face, no new type ramp, no border radius.
   See Inbox/the-rack/design_the-rack.md for the extraction notes.
   ========================================================================== */

/* ============================ PART 1 · LIVE SYSTEM ======================== */

:root{
  --ink:#1a1712; --paper:#f7f3ea; --paper-soft:#d8d2c4;
  --cream:#f5f1e8; --cream-2:#efe9dc;
  --signal:#a4161a; --signal-deep:#7e1115;
  --hairline:#9a948a; --rule-row:#cdc7bb;
  --muted-ink:#4a443a; --muted-2:#544f3e;
  --body-color:#211d16; --body-soft:#33302a;
  --font-serif:"Newsreader", Georgia, "Times New Roman", Times, serif;
  /* Two faces on this site: Playfair Display for the nameplate, Newsreader
     for everything else. --font-label is the old --font-mono slot, kept as
     its own token so the label role stays visible in the code and so
     pointing it back at Courier Prime is a one-line change. */
  --font-label:"Newsreader", Georgia, "Times New Roman", Times, serif;
  --plate:#f3ecd9;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--cream);color:var(--body-color);font-family:var(--font-serif);font-size:19px;line-height:1.55;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;}
::selection{background:var(--signal);color:var(--paper);}
/* the browser default for <code> is a monospace, and there is no monospace
   on this site. Only the plate placeholders use it, and those go when the
   plates land, but a third face is a third face. */
code{font-family:var(--font-label);font-size:inherit;}

.wrap{max-width:1080px;margin:0 auto;padding:0 30px;}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.section{padding:clamp(40px,5.4vw,78px) 0;position:relative;}
.section + .section{border-top:1px solid var(--rule-row);}
.bg-cream2{background:var(--cream-2);}
.bg-ink{background:var(--ink);color:var(--paper);}
.bg-ink.section + .section,.section + .bg-ink.section{border-top:none;}

.sec-head{display:flex;align-items:baseline;gap:21px;flex-wrap:wrap;margin-bottom:34px;}
.folio{font-family:var(--font-label);font-size:16px;font-weight:600;letter-spacing:1px;color:var(--signal);}
.kicker{font-weight:600;display:inline-flex;align-items:center;gap:11px;font-family:var(--font-label);font-size:16px;letter-spacing:1px;line-height:1.4;color:var(--ink);text-transform:uppercase;}
.kicker::before{content:"";width:24px;height:16px;background:var(--signal);flex:0 0 auto;}
.kicker b{font-weight:700;} .kicker span{color:var(--body-soft);}
.bg-ink .kicker{font-weight:600;color:var(--paper);} .bg-ink .kicker span{color:var(--paper-soft);}
.lead{display:block;font-family:var(--font-serif);font-weight:600;font-size:clamp(26px,3vw,38px);line-height:1.16;letter-spacing:-.3px;color:var(--ink);max-width:36ch;margin:0;}
.bg-ink .lead{color:var(--paper);}
p{margin:0 0 21px;}

/* MASTHEAD */
.masthead{padding-top:34px;}
.rule-stack > div{font-size:0;line-height:0;}
.r4{height:4px;background:var(--ink);} .r3{height:3px;background:var(--ink);} .r1{height:1px;background:var(--ink);}
.rr2{height:2px;background:var(--signal);} .g2{height:2px;} .g7{height:7px;}
.nameplate{text-align:center;padding:34px 0 13px;}
.nameplate .name{display:block;font-family:'Playfair Display', var(--font-serif);font-weight:900;font-size:clamp(42px,8vw,82px);line-height:1;letter-spacing:-1px;color:var(--ink);}
.nameplate .tag{display:block;font-family:'Playfair Display', var(--font-serif);font-style:italic;font-weight:400;font-size:clamp(17px,2vw,22px);color:var(--muted-ink);padding-top:13px;}

/* FORM */
.capture{margin-top:34px;max-width:500px;}
.capture .row{display:flex;gap:8px;flex-wrap:wrap;}
.capture input[type=email]{flex:1 1 220px;min-width:0;font-family:var(--font-serif);font-size:19px;color:var(--body-color);background:#fff;border:2px solid var(--ink);border-radius:0;padding:14px 16px;}
.capture input[type=email]::placeholder{color:var(--muted-ink);font-style:italic;}
.capture input[type=email]:focus{outline:3px solid var(--signal);outline-offset:2px;}
.btn{font-family:var(--font-serif);font-size:19px;font-weight:700;color:var(--paper);background:var(--ink);border:2px solid var(--ink);border-radius:0;padding:14px 24px;min-height:52px;cursor:pointer;white-space:nowrap;transition:background 140ms ease-out,color 140ms ease-out,border-color 140ms ease-out;}
.btn:hover{background:var(--signal);border-color:var(--signal);}
.btn:active{background:var(--signal-deep);}
.btn:focus-visible{outline:3px solid var(--signal);outline-offset:2px;}
.btn[disabled]{opacity:.6;cursor:wait;}
.trust{font-family:var(--font-label);font-size:16px;line-height:1.6;color:var(--muted-ink);margin-top:13px;}
.form-msg{font-family:var(--font-label);font-size:16px;line-height:1.5;margin:13px 0 0;min-height:1.2em;}
.form-msg.ok{color:var(--signal);font-weight:700;} .form-msg.err{color:var(--signal);}
.capture--dark input[type=email]{background:var(--paper);border-color:var(--paper);}
.capture--dark .btn{background:var(--signal);border-color:var(--signal);}
.capture--dark .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.capture--dark .trust{color:var(--paper-soft);}
.capture--dark .form-msg.ok,.capture--dark .form-msg.err{color:#ff9b9b;}

/* STEP · used in rails and ladders */
.step{position:relative;z-index:1;}
.step .node{width:18px;height:18px;background:var(--signal);border-radius:50%;margin-bottom:21px;}
.step .stop{display:block;font-family:var(--font-label);font-size:16px;letter-spacing:1.4px;color:var(--signal);font-weight:600;text-transform:uppercase;margin-bottom:13px;}
.step h3{font-family:var(--font-serif);font-weight:700;font-size:24px;color:var(--ink);margin:0 0 13px;letter-spacing:-.3px;}
.step p{font-size:18px;line-height:1.55;margin:0;color:var(--body-color);}
.bg-ink .step h3{color:var(--paper);}
.bg-ink .step p{color:var(--paper-soft);}
.bg-ink .step .stop{font-weight:600;color:var(--signal);}

/* PROMISES · label track + prose */
.promises{max-width:880px;margin-top:34px;}
.prow{display:grid;grid-template-columns:210px 1fr;gap:55px;padding:34px 0;border-top:1px solid var(--hairline);}
.prow:last-of-type{border-bottom:1px solid var(--hairline);}
.prow .plabel{font-family:var(--font-label);font-size:16px;letter-spacing:1px;font-weight:600;color:var(--signal);text-transform:uppercase;}
.prow p{margin:0;font-size:19px;line-height:1.5;}
.bg-ink .prow{border-color:var(--muted-2);}
.bg-ink .prow p{color:var(--paper-soft);}

/* MID CTA */
.midcta .inner{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:start;}
.midcta .pitch{font-family:var(--font-serif);font-size:clamp(24px,2.8vw,34px);line-height:1.16;color:var(--paper);font-weight:700;margin:0;letter-spacing:-.4px;max-width:18ch;}
.midcta .pitch b{color:var(--signal);}
.midcta .capture{margin-top:0;}
@media (max-width:820px){.midcta .inner{grid-template-columns:1fr;gap:34px;}}

/* HERO · live */
.hero{padding:clamp(36px,5vw,72px) 0 clamp(40px,6vw,86px);max-width:920px;}
.eyebrow{font-family:var(--font-label);font-size:16px;letter-spacing:1.2px;color:var(--signal);text-transform:uppercase;font-weight:600;margin-bottom:21px;}
.hero h1{font-family:var(--font-serif);font-weight:700;font-size:clamp(36px,5.2vw,66px);line-height:1.05;letter-spacing:-.7px;color:var(--ink);margin:0;}
.standfirst{font-size:clamp(19px,2vw,22px);line-height:1.46;color:var(--body-soft);max-width:60ch;margin-top:21px;}
.bg-ink .standfirst{color:var(--paper-soft);}

/* PROOF CLOSE · live */
.proof-close{font-size:clamp(20px,2vw,24px);line-height:1.45;margin-top:34px;max-width:48ch;font-weight:500;color:var(--ink);}
.proof-close b{color:var(--signal);font-weight:700;}
.bg-ink .proof-close{color:var(--paper);}

/* STRAP · live (the .whofor .h chip stretched across a .tear) */
.strap{display:flex;justify-content:space-between;gap:21px;flex-wrap:wrap;background:var(--ink);color:var(--paper);font-family:var(--font-label);font-size:16px;letter-spacing:1.4px;text-transform:uppercase;padding:8px 18px;}
.bg-ink .strap{background:var(--signal);}

/* the live .trust is scoped to a form. These are the same line outside one. */
.bg-ink .trust{color:var(--paper-soft);}

/* BAND */
.band{text-align:center;}
.band .line{font-family:var(--font-serif);font-weight:700;font-size:clamp(27px,3.4vw,42px);line-height:1.14;max-width:24ch;margin:0 auto;color:var(--paper);letter-spacing:-.3px;}
.band .line em{color:var(--signal);font-style:normal;}
.band .sub{font-family:var(--font-label);font-size:16px;letter-spacing:1px;text-transform:uppercase;color:var(--paper-soft);margin-top:21px;}

/* TEAR SHEET */
.tear{border:3px solid var(--ink);border-top:6px solid var(--signal);background:#fff;padding:34px;box-shadow:14px 14px 0 rgba(26,23,18,.10);transition:box-shadow 200ms ease-out;}
.tear:hover{box-shadow:18px 18px 0 rgba(26,23,18,.14);}
.tear .tname{display:block;font-family:'Playfair Display', var(--font-serif);font-weight:900;font-size:29px;color:var(--ink);letter-spacing:-.4px;}
.tear .meta{display:flex;justify-content:space-between;gap:21px;flex-wrap:wrap;margin:13px 0;padding:8px 0;border-top:1px solid var(--rule-row);border-bottom:1px solid var(--rule-row);font-family:var(--font-label);font-size:16px;}
.tear .meta .filed{color:var(--muted-ink);} .tear .meta .leadf{color:var(--signal);font-weight:700;}
.tear .tkick{font-family:var(--font-label);font-size:16px;letter-spacing:1px;color:var(--ink);text-transform:uppercase;margin-bottom:13px;font-weight:700;}
.tear .thead{font-family:var(--font-serif);font-weight:700;font-size:26px;line-height:1.16;color:var(--ink);margin-bottom:13px;letter-spacing:-.3px;}
.tear .tstand{font-size:17px;line-height:1.5;color:var(--body-soft);margin:0;}
.tear-cap{font-size:clamp(21px,2.2vw,25px);line-height:1.45;color:var(--ink);font-weight:500;margin:0;}
.mono-note{font-family:var(--font-label);font-size:16px;letter-spacing:.4px;color:var(--muted-ink);text-transform:uppercase;margin:21px 0 0;}

/* CLOSE */
.close{text-align:center;max-width:640px;margin:0 auto;}
.close .cp{font-family:var(--font-serif);font-size:clamp(22px,2.6vw,30px);line-height:1.3;color:var(--paper);font-weight:600;letter-spacing:-.3px;margin:0;}
.wiremark{font-family:var(--font-label);font-size:16px;font-weight:700;color:var(--signal);letter-spacing:3px;margin:34px 0 13px;}
.brandline{font-style:italic;font-size:clamp(18px,2vw,22px);line-height:1.4;color:var(--paper-soft);margin:0 auto;max-width:34ch;}

.ee-footer{padding:34px 0;background:var(--cream-2);border-top:3px solid var(--ink);text-align:center;}
.ee-footer .fname{font-family:'Playfair Display', var(--font-serif);font-weight:900;font-size:22px;color:var(--ink);}
.ee-footer .ftag{font-style:italic;font-size:16px;color:var(--muted-ink);margin-top:6px;}

/* FOLIO BAR · reusable */
.folio-bar{display:flex;justify-content:space-between;gap:21px;flex-wrap:wrap;font-family:var(--font-label);font-size:16px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted-ink);padding:8px 0;}
.folio-bar b{color:var(--ink);}

/* PLATES · unscoped, values copied from the live .coldopen rules */
.fig{margin:0;min-width:0;}
.imgbox{border:2px solid var(--ink);border-top:6px solid var(--signal);background:var(--plate);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-width:0;}
.imgbox img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.02);max-width:100%;}
.imgbox .tag{position:absolute;top:0;left:0;font-family:var(--font-label);font-size:16px;letter-spacing:1.5px;text-transform:uppercase;color:var(--paper);background:var(--ink);padding:5px 10px;z-index:2;}
.imgbox .ph{font-family:var(--font-label);font-size:16px;letter-spacing:2px;text-transform:uppercase;color:var(--muted-2);text-align:center;padding:34px;}
.imgbox .ph small{display:block;font-family:var(--font-label);font-size:16px;letter-spacing:.4px;line-height:1.6;color:var(--muted-ink);margin-top:8px;text-transform:none;}
.imgbox--wide{aspect-ratio:16/10;}
.imgbox--square{aspect-ratio:1/1;}
.imgcap{font-family:var(--font-label);font-size:16px;letter-spacing:.3px;color:var(--muted-ink);margin:12px 0 0;}
/* 100vw counts the scrollbar, so a plain 100vw bleed pushes the page
   sideways by the scrollbar width. rack.js measures it into --sbw. */
.bleed{--bw:calc(100vw - var(--sbw,0px));width:var(--bw);margin-left:calc(50% - var(--bw) / 2);}
.divider-plate{aspect-ratio:6/1;overflow:hidden;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--plate);position:relative;display:flex;align-items:center;justify-content:center;}
.divider-plate img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.02);}
.divider-plate .ph{font-family:var(--font-label);font-size:16px;letter-spacing:2px;text-transform:uppercase;color:var(--muted-2);text-align:center;padding:21px;}
.divider-plate .ph small{display:block;font-size:16px;letter-spacing:.4px;color:var(--muted-ink);margin-top:8px;text-transform:none;}
.divider-plate .tag{position:absolute;top:0;left:0;font-family:var(--font-label);font-size:16px;letter-spacing:1.5px;text-transform:uppercase;color:var(--paper);background:var(--ink);padding:5px 10px;z-index:2;}
@media (max-width:640px){.divider-plate{aspect-ratio:3/1;}}

/* grid children default to min-width:auto; cap so plates cannot force sideways scroll */
.grid > *,.rack > *,.colset > *{min-width:0;}


/* ============================ PART 2 · RACK DEVICES ======================
   Newspaper furniture that appears on none of the three live pages.

   EVERY value below is taken from the live ramp. Nothing is invented.

   Where a rule's type is identical to a live component, it says so. Ten
   rules are in that position: they need their own box (a border, a grid, a
   position) but borrow their type wholesale. That is the same thing the
   live campaign pages do in their own extensions block, where .rec--log is
   described as "live .prow rows tightened to sit inside a live .rec box".

   font-size   16 17 18 19 22 24 26 29px, plus the live clamps.
               The live ramp also carries 11 12 13 14 15px. This site does
               not: 16px is the floor, on the operator's instruction, so
               every label that ran smaller now runs at 16.
               (17,2vw,22) (18,2vw,22) (19,2vw,22) (20,2vw,23) (20,2vw,24)
               (21,2.2vw,25) (22,2.6vw,30) (24,2.8vw,34) (26,3vw,38)
               (27,3.4vw,42) (33,3.6vw,44) (36,5.2vw,66) (42,8vw,82) (44,5.4vw,70)
   letter-sp   -1 -.7 -.6 -.4 -.3 -.2 .3 .4 .6 1 1.2 1.4 1.5 2 3px
   line-height .95 1 1.04 1.05 1.14 1.16 1.3 1.4 1.45 1.46 1.5 1.55 1.6
   space       5 6 8 11 12 13 16 18 21 24 26 30 34 55 78px
   shadow      14px 14px 0 rgba(26,23,18,.10) / 18px 18px 0 rgba(26,23,18,.14)
   measures    24ch 34ch 36ch 48ch 56ch 60ch
   weights     400 500 600 700 / 900 Playfair only
   radius      0
   ======================================================================== */

/* --- FLAG ---------------------------------------------------------------
   A section flag on a newsstand rack. Built on the live .tear: same 3px ink
   border, same 6px signal top rule, same shadow.

   The flag prints the SECTION name, not the house name. The nameplate is on
   the masthead above the rack; reprinting it on five flags put "Early
   Edition" on the screen six times.

   Cards fill the viewport, which is what makes the hub read as a rack of
   papers rather than a row of buttons. Two rules keep that from breaking:
   content is CENTRED in the card, so a tall card has symmetric air rather
   than a void at one end; and every track is minmax(min-content, 1fr), so a
   track can grow to fill but can never be squeezed under its own content.
   That pair is what the first attempt was missing. */
/* The live sheet has exactly two shadows, 14px and 18px, and it puts them
   on ONE .tear per page. Five cards carrying the 14px at rest turned the
   rack into a field of grey slabs. Rather than invent a third, smaller
   shadow the brand does not own, the flags carry none at rest and take the
   live 14px on hover. The shadow becomes the thing that says a card can be
   picked up, which is what it was always doing on a tear sheet. The
   specimens on the spokes keep theirs, because there is one per page. */
.flag{display:flex;flex-direction:column;justify-content:center;border:3px solid var(--ink);border-top:6px solid var(--signal);background:#fff;padding:26px;color:inherit;text-decoration:none;min-width:0;min-height:0;transition:box-shadow 200ms ease-out;}
.flag:hover,.flag:focus-visible{box-shadow:14px 14px 0 rgba(26,23,18,.10);}
.flag:focus-visible{outline:3px solid var(--signal);outline-offset:3px;}
.flag .fformat{display:block;font-family:var(--font-label);font-size:16px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--signal);}
.flag .ftrigger{display:block;font-family:var(--font-serif);font-weight:700;font-size:clamp(19px,calc(1.2vh + .6vw),29px);line-height:1.16;letter-spacing:-.2px;color:var(--ink);margin-top:13px;}
/* live .folio-bar */
.flag .fmoves{display:block;font-family:var(--font-label);font-size:16px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted-ink);margin-top:21px;padding-top:13px;border-top:1px solid var(--rule-row);}
.flag--spine{padding:34px;}
.flag--spine .ftrigger{font-size:clamp(26px,calc(2.6vh + 1.2vw),70px);line-height:1.14;letter-spacing:-.3px;margin-top:18px;}
.flag--spine .fmoves{font-size:16px;margin-top:26px;}

/* --- THE HUB · one screen ----------------------------------------------
   The morning flag is the spine: taller, wider, set apart. The other four
   are equal to each other and visibly subordinate. That hierarchy is the
   entitlement honesty, done before any copy says it. */
.hub{min-height:100svh;display:grid;grid-template-rows:auto auto minmax(min-content,1fr) auto;}
.hub .masthead{padding-top:21px;}
.hub .nameplate{padding:clamp(11px,2vh,21px) 0 8px;}
.hub .nameplate .name{font-size:clamp(42px,calc(3vh + 3.3vw),82px);}
.hub .nameplate .tag{font-size:clamp(17px,calc(.9vh + .9vw),22px);padding-top:clamp(6px,1.2vh,13px);}
.hub-orient{font-family:var(--font-serif);font-style:italic;font-size:clamp(17px,2vw,22px);line-height:1.4;color:var(--muted-ink);text-align:center;margin:0;padding:clamp(11px,1.9vh,21px) 0;}
.rack{display:grid;grid-template-columns:5fr 7fr;gap:clamp(16px,2vh,26px);padding:0 0 34px;min-height:0;}
.rack > *{min-width:0;min-height:0;}
.rack .rack-side{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(min-content,1fr);gap:clamp(16px,2vh,26px);min-height:0;}
.rack .rack-side > *{min-width:0;min-height:0;}
/* the live .trust line, centred at the foot of the hub */
.hub-foot{font-family:var(--font-label);font-size:16px;line-height:1.6;color:var(--muted-ink);text-align:center;padding:0 0 16px;}

@media (max-width:900px){
  .hub .masthead{padding-top:8px;}
  .hub .nameplate{padding:8px 0 5px;}
  .hub-orient{font-size:17px;padding:8px 0;line-height:1.3;}
  .hub-foot{font-size:16px;padding-bottom:11px;}
  .rack{grid-template-columns:1fr;gap:11px;padding:11px 0 26px;}
  .rack .rack-side{grid-template-columns:1fr 1fr;gap:11px;}
  .flag{padding:13px 16px;}
  .flag .fformat{font-size:16px;}
  .flag .ftrigger{font-size:17px;margin-top:8px;}
  .flag .fmoves{display:none;}
  .flag--spine{padding:16px;}
  .flag--spine .ftrigger{font-size:19px;margin-top:11px;}
}
@media (max-width:360px){
  .rack .rack-side{grid-template-columns:1fr;}
}

/* --- INDEX STRIP · the section index a paper runs under its nameplate.
   Sticky, so any page in the rack is one click from any other. Entries are
   short section names, which is what an index box prints. */
.index{position:sticky;top:0;z-index:60;background:var(--cream);border-bottom:1px solid var(--ink);}
.index .inner{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.index .inner::-webkit-scrollbar{display:none;}
/* live .trust line, laid out as a row of links */
.index a{flex:0 0 auto;display:flex;align-items:center;gap:11px;font-family:var(--font-label);font-size:16px;color:var(--muted-ink);text-decoration:none;padding:12px 13px;white-space:nowrap;border-right:1px solid var(--rule-row);transition:background 140ms ease-out,color 140ms ease-out;}
.index a:first-child{padding-left:0;}
.index a:last-child{border-right:none;}
.index a:hover,.index a:focus-visible{background:var(--cream-2);color:var(--ink);}
.index a:focus-visible{outline:3px solid var(--signal);outline-offset:-3px;}
.index a[aria-current="page"]{color:var(--signal);font-weight:700;}
.index a[aria-current="page"]::before{content:"";width:24px;height:16px;background:var(--signal);flex:0 0 auto;}
/* On narrow screens the index stops being a scrolling strip and prints as a
   fixed two-row index box: every section visible, nothing hidden off-edge. */
@media (max-width:640px){
  .index .inner{display:grid;grid-template-columns:repeat(3,1fr);overflow-x:visible;}
  .index a{justify-content:center;gap:7px;font-size:15px;padding:10px 6px;border-right:1px solid var(--rule-row);border-bottom:1px solid var(--rule-row);}
  .index a:first-child{padding-left:6px;}
  .index a:nth-child(3n){border-right:none;}
  .index a:nth-last-child(-n+3){border-bottom:none;}
  .index a[aria-current="page"]::before{width:14px;height:10px;}
}
@media (max-width:359px){
  .index .inner{grid-template-columns:repeat(2,1fr);}
  .index a:nth-child(3n){border-right:1px solid var(--rule-row);}
  .index a:nth-child(2n){border-right:none;}
  .index a:nth-last-child(-n+3){border-bottom:1px solid var(--rule-row);}
  .index a:nth-last-child(-n+2){border-bottom:none;}
}

/* --- SPOKE HERO · the live .hero, unmodified -------------------------
   The trigger is the headline of the page, so it uses the live .eyebrow and
   h1 pair straight out of Part 1. The section wrapper below carries no type
   of its own at all. */
.hero-sec{position:relative;}

/* --- CHIP · the live .whofor .h, unscoped ------------------------------ */
.chip{display:inline-block;font-family:var(--font-label);font-size:16px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:5px 11px;margin-bottom:21px;}
.chip--signal{background:var(--signal);}

/* --- DECK HEAD ----------------------------------------------------------
   Main head then subordinate decks in decreasing size, each parted by a jim
   dash. Standard American front page 1880 to 1940. Set on the page's left
   axis rather than centred, because every headline on this brand is left. */
/* A ch measure belongs on the type, never on a wrapper. `ch` resolves
   against the element's OWN font-size, so 36ch here computed against the
   wrapper's inherited 19px and came out at 377px. The h2 inside runs at
   42px, where one ch is 26.8px, so the headline was being given 14ch of its
   own size and wrapping to three lines with 600px sitting empty beside it.
   24ch and 36ch are the live measures on .band .line and .lead. */
.deckhead h2{font-family:var(--font-serif);font-weight:700;font-size:clamp(27px,3.4vw,42px);line-height:1.14;letter-spacing:-.3px;color:var(--ink);margin:0;max-width:24ch;}
.deckhead .d1{font-family:var(--font-serif);font-weight:500;font-size:clamp(20px,2vw,24px);line-height:1.45;color:var(--body-soft);margin:0;max-width:36ch;}
.deckhead .d2{font-family:var(--font-label);font-size:16px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted-ink);margin:0;}
.bg-ink .deckhead h2{color:var(--paper);}
.bg-ink .deckhead .d1,.bg-ink .deckhead .d2{color:var(--paper-soft);}
.jimdash{width:55px;height:1px;background:var(--ink);border:0;margin:21px 0;}
.bg-ink .jimdash{background:var(--paper-soft);}

/* --- COLSET · column rules ---------------------------------------------
   Vertical rules between text columns were universal before about 1930 and
   appear nowhere on the three live pages. Type is the live .coldopen .cols
   pair, 18px on 1.6.
   There was a sunken red initial here. It appeared exactly once on the whole
   site and nothing else in the brand looks remotely like it, so it was an
   accent with no system behind it. Removed. */
.colset{column-count:3;column-gap:34px;column-rule:1px solid var(--rule-row);margin-top:34px;}
.colset--2{column-count:2;column-gap:55px;}
.colset > *{min-width:0;}
.colset p{font-size:18px;line-height:1.6;margin:0 0 18px;break-inside:avoid;}
.colset p:last-child{margin-bottom:0;}
.bg-ink .colset{column-rule-color:var(--muted-2);}
.bg-ink .colset p{color:var(--paper-soft);}
@media (max-width:900px){.colset{column-count:2;column-gap:26px;}}
@media (max-width:640px){.colset,.colset--2{column-count:1;column-rule:none;}}

/* --- CUT-OFF RULE · closes a story at the foot of its column ----------- */
.cutoff{border:0;height:2px;background:var(--ink);margin:34px 0 0;}

/* --- BOXED ITEM · an editor's note, set in a rule box ------------------
   Width matches the live .promises block so it sits on the same axis. */
.boxed{border:2px solid var(--ink);background:var(--cream);padding:34px;max-width:880px;}
.boxed .bopen{font-family:var(--font-serif);font-weight:700;font-size:clamp(24px,2.8vw,34px);line-height:1.16;letter-spacing:-.4px;color:var(--signal);margin:21px 0;max-width:24ch;}
.boxed p{font-size:18px;line-height:1.55;margin:0 0 18px;max-width:60ch;}
.boxed p:last-child{margin-bottom:0;}
.bg-ink .boxed{background:transparent;border-color:var(--paper-soft);}
.bg-ink .boxed p{color:var(--paper-soft);}
.bg-ink .boxed .bopen{color:var(--paper);}

/* --- STOP PRESS · the late bulletin, set in the second colour ----------
   The fudge box: column space left blank on the stone and filled at press
   time with late news, printed in red. Evening spoke only. */
.stoppress{border:3px solid var(--signal);background:var(--paper);padding:26px;box-shadow:14px 14px 0 rgba(26,23,18,.10);}
.stoppress .sphead{font-family:var(--font-label);font-size:16px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--signal);padding-bottom:13px;margin-bottom:18px;border-bottom:1px solid var(--signal);}
.stoppress .spbig{font-family:var(--font-serif);font-weight:700;font-size:clamp(24px,2.8vw,34px);line-height:1.16;letter-spacing:-.4px;color:var(--ink);margin:0;}

/* --- SPIKED · a killed story, struck through --------------------------- */
.spiked{display:inline-block;font-family:var(--font-label);font-size:16px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted-ink);text-decoration:line-through;text-decoration-color:var(--signal);text-decoration-thickness:2px;}

/* --- COMPARE · two ruled columns divided by a vertical rule ------------ */
.compare{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);margin-top:34px;}
.compare .cside{padding:26px 34px;}
.compare .cside + .cside{border-left:2px solid var(--ink);}
.compare .chead{font-family:var(--font-label);font-size:16px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted-ink);padding-bottom:13px;border-bottom:1px solid var(--rule-row);margin-bottom:18px;}
.compare .cbig{font-family:var(--font-label);font-size:16px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--signal);line-height:1.4;}
.compare p{margin:13px 0 0;}
@media (max-width:640px){.compare{grid-template-columns:1fr;}.compare .cside + .cside{border-left:none;border-top:2px solid var(--ink);}}

/* --- JUMP LINE · "Continued on Page 6, Column 3" ----------------------- */
/* the live .step .stop line, set as a rule instead of a label */
.jumpline{font-family:var(--font-label);font-size:16px;color:var(--signal);border-bottom:1px solid var(--rule-row);padding:0 0 13px;margin:0 0 26px;}

/* --- SLIP · a correction slip pasted over a clipping -------------------
   The erratum notice, laid across the story it amends. Update spoke.

   It was built as two boxes of different widths under a full-width strap,
   so the right half of the strap headed an empty quadrant and the slip hung
   off the clipping into that space. The physical thing being drawn is one
   clipping with a slip laid on it, so the clipping is now the full width of
   the specimen and the slip overlaps its lower right corner. The clipping
   carries deep bottom padding, and the slip is pulled up by exactly that
   amount, so the overlap never lands on type. */
.slipwrap{position:relative;}
.clipping{border:1px solid var(--hairline);background:var(--cream-2);padding:26px 34px 78px;color:var(--muted-ink);}
/* live .rec--log .loghead slug */
.clipping .cslug{font-family:var(--font-label);font-size:16px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted-2);margin-bottom:13px;}
.clipping .chead2{font-family:var(--font-serif);font-weight:700;font-size:22px;line-height:1.16;letter-spacing:-.2px;color:var(--muted-ink);margin:0 0 13px;max-width:36ch;}
.clipping p{margin:0;max-width:60ch;}
/* clearance = clipping bottom padding minus the pull. 78 - 55 leaves 23px
   between the clipping's last line and the slip, so the overlap lands on
   padding even if the clipping copy grows a line. And the slip is inset
   from the right edge rather than flush to it, because a slip laid on a
   clipping sits on it, not against its border. */
.slip{position:relative;width:min(56ch,100%);margin:-55px 34px 0 auto;background:#fff;border:2px solid var(--ink);border-left:6px solid var(--signal);padding:26px;box-shadow:14px 14px 0 rgba(26,23,18,.10);}
.slip .shead2{font-family:var(--font-label);font-size:16px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--signal);margin-bottom:13px;}
.slip .sbig{font-family:var(--font-serif);font-weight:700;font-size:24px;line-height:1.16;letter-spacing:-.3px;color:var(--ink);margin:0 0 13px;}
.slip p{margin:0;}
@media (max-width:900px){
  .clipping{padding:21px 21px 55px;}
  .slip{width:100%;margin:-34px 0 0;}
}

/* --- BRIEFS · the News in Brief digest column -------------------------- */
.briefs{border-top:2px solid var(--ink);}
.brief{display:grid;grid-template-columns:34px 1fr;gap:21px;padding:21px 0;border-bottom:1px solid var(--rule-row);}
.brief > *{min-width:0;}
/* live .rec--log .loghead slug */
.brief .bnum{font-family:var(--font-label);font-size:16px;font-weight:700;color:var(--muted-2);padding-top:5px;}
.brief .btitle{font-family:var(--font-serif);font-weight:700;font-size:22px;line-height:1.16;letter-spacing:-.2px;color:var(--ink);margin:0 0 8px;}
.brief p{margin:0;}
.brief .moved{display:block;font-family:var(--font-label);font-size:16px;line-height:1.6;color:var(--signal);border-left:2px solid var(--signal);padding-left:13px;margin-top:13px;}
@media (max-width:640px){.brief{grid-template-columns:1fr;gap:6px;}}

/* --- AHEAD STRIP · the calendar band, date fields left ruled blank ------
   Blank rules stand in for dates for the same reason the engravings carry
   blank mastheads: nothing on this site is allowed to perish. */
.ahead{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--ink);margin-top:26px;}
.ahead .acell{padding:21px;border-right:1px solid var(--rule-row);}
.ahead .acell:last-child{border-right:none;}
.ahead .aslot{display:block;height:2px;background:var(--ink);width:55px;margin-bottom:13px;}
.ahead .acat{display:block;font-family:var(--font-serif);font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-.2px;color:var(--ink);margin-bottom:6px;}
.ahead .alabel{font-family:var(--font-serif);font-size:17px;line-height:1.5;color:var(--body-soft);}
@media (max-width:820px){.ahead{grid-template-columns:1fr 1fr;}.ahead .acell:nth-child(2){border-right:none;}.ahead .acell:nth-child(-n+2){border-bottom:1px solid var(--rule-row);}}
@media (max-width:480px){.ahead{grid-template-columns:1fr;}.ahead .acell{border-right:none;border-bottom:1px solid var(--rule-row);}.ahead .acell:last-child{border-bottom:none;}}

/* --- MORGUE CARD · the clipping-file envelope --------------------------
   Every paper cut its own stories, dated them, and filed them in manila
   envelopes downstairs. Archive spoke. */
.morgue{border:2px solid var(--ink);background:var(--plate);box-shadow:14px 14px 0 rgba(26,23,18,.10);}
/* live .trust line, laid out as a card header */
.morgue .mtop{display:flex;justify-content:space-between;align-items:center;gap:21px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding:13px 26px;font-family:var(--font-label);font-size:16px;color:var(--muted-ink);}
.morgue .mtop b{text-transform:uppercase;letter-spacing:1.4px;font-weight:700;color:var(--ink);}
.morgue .mbody{padding:34px 26px;}
.morgue .mbody > p{font-size:18px;line-height:1.55;margin:0;max-width:60ch;}
.morgue .mrules{border-top:1px solid var(--rule-row);margin-top:26px;padding-top:21px;}
.erastamp{display:inline-block;font-family:var(--font-serif);font-weight:700;font-size:clamp(27px,3.4vw,42px);line-height:1.04;letter-spacing:-.3px;color:var(--signal);border:3px solid var(--signal);padding:8px 18px;}
.erastamp--sm{font-family:var(--font-label);font-size:16px;font-weight:700;letter-spacing:3px;line-height:1.4;text-transform:uppercase;border-width:2px;padding:5px 11px;}
.morgue-open{font-family:var(--font-serif);font-weight:700;font-size:clamp(24px,2.8vw,34px);line-height:1.16;letter-spacing:-.4px;color:var(--ink);margin:21px 0;}

/* --- RACK STRIP · the other four flags, small, in a row ---------------- */
.rackstrip{border-top:2px solid var(--ink);border-bottom:1px solid var(--rule-row);display:grid;grid-template-columns:repeat(4,1fr);}
.rackstrip a{display:block;padding:21px 18px;text-decoration:none;color:inherit;border-right:1px solid var(--rule-row);transition:background 140ms ease-out;}
.rackstrip a:last-child{border-right:none;}
.rackstrip a:hover,.rackstrip a:focus-visible{background:var(--cream-2);}
.rackstrip a:focus-visible{outline:3px solid var(--signal);outline-offset:-3px;}
.rackstrip .sformat{display:block;font-family:var(--font-label);font-size:16px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--signal);}
/* live .fp-rail .railfoot */
.rackstrip .strig{display:block;font-family:var(--font-serif);font-size:17px;line-height:1.4;color:var(--ink);margin-top:11px;}
@media (max-width:820px){.rackstrip{grid-template-columns:1fr 1fr;}.rackstrip a:nth-child(2){border-right:none;}.rackstrip a:nth-child(-n+2){border-bottom:1px solid var(--rule-row);}}
@media (max-width:460px){.rackstrip{grid-template-columns:1fr;}.rackstrip a{border-right:none;border-bottom:1px solid var(--rule-row);}.rackstrip a:last-child{border-bottom:none;}}

/* --- SPECIMEN FRAME · the live .strap over the live .tear -------------- */
.specimen{margin-top:34px;}
.specimen .standfirst{margin-top:26px;}



/* --- CONTRAST · red type on the ink ground -----------------------------
   #a4161a on #1a1712 measures 2.3:1, which fails. The live sheet never
   pairs them: it puts a .sec-head only on cream grounds, and where it does
   need red on dark it uses #ff9b9b (.close .form-msg). Same value here. */
.bg-ink .folio{font-weight:600;color:#ff9b9b;}
.bg-ink .stoppress .sphead,.bg-ink .compare .cbig{color:var(--signal);}

/* --- SPECIMEN MEASURES -------------------------------------------------
   On the live pages .tear sits in a half-width .tearwrap column, so its
   text never exceeds about 48 characters. Here the specimen runs the full
   1080 container, which pushed the standfirst to 100 characters a line.
   Live measures, applied to the tear's own type. */
.specimen .tear .thead{max-width:24ch;}
.specimen .tear .tstand{max-width:60ch;}
.specimen .tear .meta{max-width:60ch;}

/* --- LADDER · the confidence rungs, ruled ------------------------------ */
.ladder{border-top:2px solid var(--ink);margin-top:26px;max-width:60ch;}
.ladder .rung{display:grid;grid-template-columns:190px 1fr;gap:26px;padding:18px 0;border-bottom:1px solid var(--rule-row);align-items:baseline;}
/* the live .prow .plabel */
.ladder .rname{font-family:var(--font-label);font-size:16px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--signal);}
/* the live .tear .tstand line, shared by every short-entry component here */
.ladder p,.brief p,.slip p,.compare p{font-size:17px;line-height:1.5;color:var(--body-soft);}
.ladder p{margin:0;}
@media (max-width:640px){.ladder .rung{grid-template-columns:1fr;gap:8px;}}

/* --- NOTE · prose that was being set in tracked mono capitals ----------
   The live .mono-note is a one-line stamp of four or five words. Two full
   sentences in 13px tracked capitals is not readable at any age, and least
   of all at this brand's. Sentences are serif, sentence case, 17px. */
.note{font-size:17px;line-height:1.5;color:var(--muted-ink);margin:21px 0 0;max-width:60ch;}

/* --- TYPOGRAPHY RULES THIS SHEET NOW HOLDS TO -------------------------
   1. Tracking is for capitals only. Lowercase running text gets none:
      the face is already spaced by its designer. Mono lowercase least of
      all, since a monospaced face is wide to begin with.
   2. Capitals are for labels of about four words. Never for a sentence.
   3. A sentence is serif, sentence case, 17px or larger.
   4. 13px is for captions and folio lines only. Nothing a reader is meant
      to read is under 14px.
   5. Display sizes take negative tracking, label sizes positive. That is
      why the nameplate is -1px and the kicker is +1px.
   -------------------------------------------------------------------- */

/* --- CLOSE on a light ground ------------------------------------------ */
.close--light .cp{color:var(--ink);}
.close--light .brandline{color:var(--muted-ink);}

/* --- LAYOUT HELPERS ---------------------------------------------------- */
.grid{display:grid;gap:55px;align-items:start;}
.grid > *{min-width:0;}
.grid--halves{grid-template-columns:1fr 1fr;}
.grid--wide-left{grid-template-columns:1.25fr .75fr;}
.grid--wide-right{grid-template-columns:.75fr 1.25fr;}
.grid--rail{grid-template-columns:1fr 300px;}
@media (max-width:900px){.grid--halves,.grid--wide-left,.grid--wide-right,.grid--rail{grid-template-columns:1fr;gap:34px;}}
.measure{max-width:60ch;}
.stack-26 > * + *{margin-top:26px;}

/* --- MOTION -------------------------------------------------------------
   GSAP drives everything. These rules only hold the pre-animation state so
   nothing flashes before the script runs. If GSAP fails to load, rack.js
   adds .motion-off and every element is shown. */
.js .reveal{opacity:0;}
.rule-stack--l{transform-origin:left;}
.rule-stack--r{transform-origin:right;}
.js .masthead .rule-stack{transform:scaleX(0);}
.js .nameplate .name,.js .nameplate .tag{opacity:0;}
.motion-off .reveal,.motion-off .masthead .rule-stack,.motion-off .nameplate .name,.motion-off .nameplate .tag{opacity:1!important;transform:none!important;letter-spacing:-1px;}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .masthead .rule-stack,.js .nameplate .name,.js .nameplate .tag{opacity:1;transform:none;}
  .btn,.tear,.flag,.index a,.rackstrip a{transition:none;}
}

/* --- SUBSCRIPTION CARD -------------------------------------------------
   The blow-in card: the loose reply card that falls out of a paper when you
   open it. That is the only honest newspaper form of an interruption, and
   it is why this is a card with a masthead on it rather than a lightbox.

   It is built entirely from live parts: the .tear frame, the masthead rule
   stacks, the nameplate, the .midcta pitch size, the live capture form and
   the live trust line. Nothing new but the box it sits in.

   Behaviour rules are in rack.js: once per visitor, never after a signup,
   never while a form is being typed in, and exit intent only on a device
   that has a real pointer. */
.subcard{border:0;padding:0;background:transparent;max-width:min(560px,calc(100vw - 44px));overflow:visible;}
.subcard::backdrop{background:rgba(26,23,18,.72);}
.subcard-in{position:relative;border:3px solid var(--ink);border-top:6px solid var(--signal);background:var(--cream);padding:34px;box-shadow:14px 14px 0 rgba(26,23,18,.10);}
.subcard-close{position:absolute;top:0;right:0;font-family:var(--font-label);font-size:16px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--paper);background:var(--ink);border:0;border-radius:0;padding:5px 11px;cursor:pointer;transition:background 140ms ease-out;}
.subcard-close:hover{background:var(--signal);}
.subcard-close:focus-visible{outline:3px solid var(--signal);outline-offset:2px;}
.subcard-plate{text-align:center;padding:21px 0 13px;}
.subcard-plate .subcard-name{display:block;font-family:'Playfair Display', var(--font-serif);font-weight:900;font-size:29px;line-height:1;letter-spacing:-.4px;color:var(--ink);}
.subcard-plate .subcard-tag{display:block;font-family:'Playfair Display', var(--font-serif);font-style:italic;font-weight:400;font-size:17px;color:var(--muted-ink);padding-top:8px;}
.subcard .eyebrow{margin:21px 0 13px;}
.subcard-lead{font-family:var(--font-serif);font-weight:700;font-size:clamp(24px,2.8vw,34px);line-height:1.16;letter-spacing:-.4px;color:var(--ink);margin:0;}
.subcard .capture{margin-top:21px;max-width:none;}
.subcard-foot{font-family:var(--font-serif);font-style:italic;font-size:17px;line-height:1.4;color:var(--muted-ink);margin:26px 0 0;padding-top:21px;border-top:1px solid var(--rule-row);}
@media (max-width:640px){
  .subcard-in{padding:26px 21px;}
  .subcard-plate{padding:16px 0 11px;}
}
.js .subcard[open]{opacity:0;}
.motion-off .subcard[open]{opacity:1;}

/* MOBILE SECTION HEADS · the kicker's inline-flex row forced the label and
   its trailing clause into two cramped columns on a phone. Below 640 the
   head becomes one flowing line: folio on top, red marker in line with the
   text, clause running on beneath it instead of beside it. */
@media (max-width:640px){
  .sec-head{gap:8px;margin-bottom:26px;align-items:flex-start;flex-direction:column;}
  .sec-head .folio{font-size:14px;}
  .kicker{display:block;font-size:14px;letter-spacing:.8px;line-height:1.5;}
  .kicker::before{display:inline-block;vertical-align:middle;width:20px;height:13px;margin-right:9px;position:relative;top:-1px;}
  .kicker span{display:inline;}
}

/* MOBILE STRAP · the two-up strap wraps on a phone, and a 21px flex gap
   became a hole between the lines. Stack it with row spacing that matches
   the bar's own padding. */
@media (max-width:640px){
  .strap{flex-direction:column;gap:4px;padding:9px 14px;font-size:13px;letter-spacing:1px;line-height:1.4;}
}

/* MOBILE LAYOUT PASS · one compact system for every spoke. The desktop
   furniture stays intact; below 640px every multi-column reading device
   becomes a full-width vertical rhythm instead of squeezing prose. */
@media (max-width:640px){
  .wrap{padding-right:20px;padding-left:20px;}
  .section{padding:40px 0;}
  .hero{padding:34px 0 40px;}
  .masthead{padding-top:24px;}
  .nameplate{padding:26px 0 12px;}
  .nameplate .name{font-size:42px;}
  .folio-bar{gap:8px;padding:7px 0;line-height:1.45;}

  /* Keep the complete index visible in two compact rows at every phone
     width. All six labels fit three-up, including the active marker. */
  .index .inner{grid-template-columns:repeat(3,minmax(0,1fr));}
  .index a{min-width:0;font-size:14px;}
  .index a:nth-child(3n){border-right:none;}
  .index a:nth-last-child(-n+3){border-bottom:none;}

  /* Section furniture reads as a single block, with no phantom column or
     inherited desktop gutter. */
  .sec-head{gap:7px;margin-bottom:24px;}
  .promises{margin-top:26px;}
  .prow{grid-template-columns:minmax(0,1fr);gap:10px;padding:26px 0;}
  .prow .plabel{display:block;}
  .prow p{width:auto;max-width:100%;}

  .grid{gap:26px;}
  .colset{margin-top:26px;}
  .specimen{margin-top:26px;}
  .specimen .standfirst{margin-top:21px;}
  .tear{padding:21px;box-shadow:8px 8px 0 rgba(26,23,18,.10);}
  .boxed{padding:26px 21px;}
  .compare .cside{padding:21px;}
  .stoppress{padding:21px;box-shadow:8px 8px 0 rgba(26,23,18,.10);}
  .morgue{box-shadow:8px 8px 0 rgba(26,23,18,.10);}
  .morgue .mtop{align-items:flex-start;padding:13px 21px;}
  .morgue .mbody{padding:26px 21px;}
  .slip{padding:21px;box-shadow:8px 8px 0 rgba(26,23,18,.10);}

  .capture .row{display:grid;grid-template-columns:minmax(0,1fr);}
  .capture input[type=email],.capture .btn{width:100%;}
  .rackstrip a{padding:18px 0;}
}

@media (max-width:359px){
  .index .inner{grid-template-columns:repeat(3,minmax(0,1fr));}
  .index a{font-size:13px;padding:9px 3px;}
  .index a:nth-child(2n){border-right:1px solid var(--rule-row);}
  .index a:nth-child(3n){border-right:none;}
  .index a:nth-last-child(-n+3){border-bottom:none;}
  .index a[aria-current="page"]{gap:4px;}
  .index a[aria-current="page"]::before{width:10px;height:8px;}
}