/* =========================================================
   Russell Township This Week / Cette semaine dans le canton de Russell
   The Noticeboard design system ("Le babillard").

   Tactile things (pins, tape, stamps, kraft) live at the edges.
   Facts always sit flat, level and high-contrast on paper.
   Remembrance is never decorated: no pins, tape, tilt, stamps,
   characters or motion, wherever it appears.

   One stylesheet for every page. Sections:
    1. Fonts (self-hosted, OFL)          9. Pinned for later
    2. Tokens                           10. Archive folders and file cards
    3. Base                             11. Postcard sign-up
    4. Header: strip, nameplate, nav    12. About: lined card, stickers
    5. The board, pins and tape         13. Episode page and transcript
    6. Hero: issue sheet, video         14. Episode library
    7. Notes on the board               15. Home teasers, 404
    8. Remembrance, clipboard           16. Footer, layout, phones, print
   ========================================================= */

/* ---------- 1. Fonts ---------- */
/* Fraunces (variable: opsz, wght, SOFT, WONK). SIL Open Font License 1.1, see ../fonts/OFL-Fraunces.txt */
@font-face{font-family:"Fraunces"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/fraunces-latin-ext-full-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/fraunces-latin-full-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Italic Fraunces is only used for titles of works (<cite>) inside headings. */
@font-face{font-family:"Fraunces"; font-style:italic; font-weight:100 900; font-display:swap;
  src:url("../fonts/fraunces-latin-ext-full-italic.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces"; font-style:italic; font-weight:100 900; font-display:swap;
  src:url("../fonts/fraunces-latin-full-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Atkinson Hyperlegible 400/700, normal and italic. SIL Open Font License 1.1, see ../fonts/OFL-AtkinsonHyperlegible.txt */
@font-face{font-family:"Atkinson Hyperlegible"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible"; font-style:italic; font-weight:400; font-display:swap;
  src:url("../fonts/atkinson-hyperlegible-latin-ext-400-italic.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible"; font-style:italic; font-weight:400; font-display:swap;
  src:url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible"; font-style:italic; font-weight:700; font-display:swap;
  src:url("../fonts/atkinson-hyperlegible-latin-ext-700-italic.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible"; font-style:italic; font-weight:700; font-display:swap;
  src:url("../fonts/atkinson-hyperlegible-latin-700-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 2. Tokens ---------- */
:root{
  --wall:#F3EADB;
  --paper:#FFFDF8;
  --ink:#2B2118;
  --muted:#5C5249;
  --red:#A3301C;
  --red-dark:#7F2414;
  --pine:#3D5A36;
  --pine-dark:#22341F;
  --kraft:#E9D6B4;
  --kraft-line:#D2BB93;
  --rule:#E6D7BD;
  --cork:#C9A47A;
  --plow-tint:#FCE7D2;
  --plow:#B4531A;
  --stone:#EEEBE6;
  --slate:#2E3336;
  --serif:"Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:"Atkinson Hyperlegible", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --gutter:clamp(16px, 3vw, 40px);
  --max:1280px;
  --shadow-paper:0 1px 1px rgba(43,33,24,.16), 0 2px 4px rgba(43,33,24,.07), 0 16px 24px -16px rgba(43,33,24,.6);
  --shadow-lift:0 1px 1px rgba(43,33,24,.14), 0 6px 10px rgba(43,33,24,.08), 0 30px 36px -20px rgba(43,33,24,.62);
  --zigzag:polygon(3% 0, 97% 0, 100% 14%, 97% 28%, 100% 42%, 97% 57%, 100% 71%, 97% 85%, 100% 100%, 3% 100%, 0 85%, 3% 71%, 0 57%, 3% 42%, 0 28%, 3% 14%, 0 0);
}

/* ---------- 3. Base ---------- */
*, *::before, *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--wall); color:var(--ink); font-family:var(--sans); font-size:20px; line-height:1.6}
.page{overflow-x:clip; min-height:100vh}
img, video{max-width:100%}
h1, h2, h3, h4{font-family:var(--serif); font-weight:600; font-variation-settings:"SOFT" 100, "WONK" 0; font-optical-sizing:auto; line-height:1.12; letter-spacing:-.01em; margin:0; color:var(--ink); text-wrap:balance}
p{margin:0}
ul, ol{margin:0; padding:0}
a{color:var(--red); text-decoration-line:underline; text-decoration-thickness:1.5px; text-underline-offset:.2em}
a:hover{text-decoration-thickness:3px}
:focus-visible{outline:3px solid var(--red); outline-offset:3px}
[id]{scroll-margin-top:24px}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:16px; top:-200px; z-index:60; padding:12px 20px; border-radius:6px; background:var(--ink); color:var(--paper); font-weight:700}
.skip:focus{top:12px}
.kicker{display:block; font-family:var(--sans); font-size:15px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; line-height:1.3; color:var(--red)}
.textlink{display:inline-flex; align-items:center; gap:10px; min-height:44px; font-weight:700}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:8px 24px; border-radius:6px; background:var(--red); color:var(--paper); font-size:19px; font-weight:700; line-height:1.25; text-decoration:none; box-shadow:0 3px 0 var(--red-dark)}
.btn:hover{background:var(--red-dark); text-decoration:underline}
.btn--pine{background:var(--pine); box-shadow:0 3px 0 var(--pine-dark)}
.btn--pine:hover{background:var(--pine-dark)}
.btn__arrow{display:inline-block; flex:none; width:10px; height:10px; border-right:3px solid currentColor; border-bottom:3px solid currentColor; transform:translateY(-3px) rotate(45deg)}
.btn__arrow--right{transform:rotate(-45deg)}
.btn__arrow--left{transform:rotate(135deg)}
.btn__arrow--up{transform:translateY(3px) rotate(-135deg)}
/* Text links: the arrow rides on the last word, so a wrapped link doesn't push it to the far edge */
.nobr{white-space:nowrap}
.arrowed .btn__arrow{margin-left:.45em; vertical-align:middle}
.btn .arrowed{text-align:left}

/* ---------- 4. Header: kraft strip, nameplate, nav ---------- */
.strip{background:var(--kraft); border-bottom:1px solid var(--kraft-line); font-size:18px; line-height:1.45}
.strip__in{max-width:var(--max); margin:0 auto; padding:0 var(--gutter); min-height:52px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; column-gap:24px}
.strip__note{display:flex; align-items:center; gap:12px; padding:12px 0}
.strip__note::before{content:""; flex:none; width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #D9644C, var(--red) 55%, #6E1E10); box-shadow:1px 2px 2px rgba(43,33,24,.35)}
.lang{display:inline-flex; align-items:center; gap:10px; min-height:48px; color:var(--ink); font-weight:700; text-decoration:none}
.lang__tag{display:inline-grid; place-items:center; min-width:36px; height:26px; padding:0 6px; border:2px solid var(--ink); border-radius:4px; font-size:14px; letter-spacing:.06em}
.lang__label{text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:.2em}
.lang:hover .lang__label{text-decoration-thickness:3px}

.masthead{max-width:var(--max); margin:0 auto; padding:clamp(22px, 3vw, 40px) var(--gutter) clamp(22px, 2.6vw, 32px); text-align:center}
.wordmark{margin:0; font-family:var(--serif); font-weight:600; font-variation-settings:"SOFT" 100, "WONK" 1; font-size:clamp(40px, 6.3vw, 92px); line-height:1; letter-spacing:-.025em}
.wordmark a{display:inline-block; color:var(--ink); text-decoration:none}
/* "The Castor" with its pushpin, Castor in red; the rest of the name sits below in small type. */
.wordmark__name{display:inline-flex; align-items:flex-start; gap:.1em}
.wordmark__pin{flex:none; width:.9em; height:.9em; margin:-.2em -.04em 0 0}
.wordmark__castor{color:var(--red)}
.wordmark__sub{display:block; margin-top:.3em; font-size:max(19px, .3em); font-weight:600; letter-spacing:.01em; line-height:1.2; text-wrap:balance}
.tagline{max-width:46ch; margin:12px auto 0; text-wrap:balance; color:var(--muted); font-size:clamp(18px, 1.5vw, 21px); line-height:1.5}
.weekline{max-width:1000px; margin:18px auto 0; padding:9px 8px; border-top:5px double var(--ink); border-bottom:5px double var(--ink); display:flex; flex-wrap:wrap; justify-content:center; row-gap:2px; font-size:18px; font-weight:700; letter-spacing:.03em; line-height:1.5}
.weekline span{position:relative; padding:0 16px}
.weekline span + span::before{content:""; position:absolute; left:-3px; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--red)}
.mainnav ul{list-style:none; margin-top:8px; display:flex; flex-wrap:wrap; justify-content:center; gap:2px 4px}
.mainnav a{position:relative; display:inline-flex; align-items:center; min-height:48px; padding:0 16px; border-radius:999px; color:var(--ink); font-size:19px; font-weight:700; text-decoration:none}
.mainnav a:hover{background:var(--kraft); text-decoration:underline}
/* The page you're on (or the section it belongs to) is a paper tag pinned to the wall. */
.mainnav a[aria-current]{background:var(--paper); box-shadow:var(--shadow-paper); text-decoration:underline; text-decoration-thickness:3px; text-decoration-color:var(--red)}

/* Inner pages: the same nameplate, smaller, with the nav below it. */
.masthead--compact{padding-top:clamp(18px, 2.4vw, 30px); padding-bottom:clamp(18px, 2.2vw, 28px)}
.masthead--compact .wordmark{font-size:clamp(34px, 4.4vw, 60px)}
.masthead--compact .mainnav ul{margin-top:12px}

/* ---------- 5. The board (wood frame + cork), pins and tape ---------- */
.board{width:min(1400px, 100% - 2 * clamp(6px, 2.4vw, 40px)); margin:0 auto; padding:clamp(8px, 1vw, 14px); border-radius:12px;
  background:#77583A linear-gradient(180deg, #8F6C48 0%, #7A5A3B 50%, #664A30 100%);
  box-shadow:inset 0 1px 0 rgba(255,253,248,.3), inset 0 -2px 0 rgba(43,33,24,.35), 0 2px 0 rgba(43,33,24,.1), 0 28px 46px -28px rgba(43,33,24,.8)}
.cork{border-radius:5px; background:var(--cork) url("../img/cork.svg");
  box-shadow:inset 0 0 0 1px rgba(43,33,24,.42), inset 0 5px 16px rgba(43,33,24,.36);
  padding:clamp(40px, 5vw, 72px) clamp(12px, 3.6vw, 56px) clamp(44px, 5.5vw, 80px)}
.cork > * + *{margin-top:clamp(64px, 8vw, 112px)}
.board + .board{margin-top:clamp(64px, 8vw, 120px)}

/* Pushpins and tape: decoration only, always pseudo-elements */
.pinned::after, .pinned-2::before{content:""; position:absolute; z-index:5; top:-11px; left:calc(50% - 12px); width:24px; height:24px; border-radius:50%;
  background:radial-gradient(circle at 36% 32%, rgba(255,253,248,.9) 0 2px, rgba(255,253,248,0) 5px), radial-gradient(circle at 44% 40%, var(--pin-hi) 0 22%, var(--pin) 62%, var(--pin-lo) 100%);
  box-shadow:inset 0 -2px 2px rgba(0,0,0,.2), 3px 6px 4px -1px rgba(43,33,24,.42)}
.pin-red{--pin-hi:#DE6A50; --pin:#A3301C; --pin-lo:#68190C}
.pin-pine{--pin-hi:#86A877; --pin:#3D5A36; --pin-lo:#1F301B}
.pin-brass{--pin-hi:#F4D894; --pin:#C29640; --pin-lo:#76561C}
.pin-walnut{--pin-hi:#9B7E63; --pin:#5C4632; --pin-lo:#2B2118}
.pin-at-left::after{left:28px}
.pinned-2::before{left:28px}
.pinned-2::after{left:auto; right:28px}
.taped::after, .taped-2::before, .taped-2::after{content:""; position:absolute; z-index:5; top:-15px; left:calc(50% - 58px); width:116px; height:32px; transform:rotate(-3deg); clip-path:var(--zigzag); background:var(--tape, rgba(233,214,180,.88))}
.taped-2::before{left:-24px; top:-8px; transform:rotate(-36deg)}
.taped-2::after{left:auto; right:-24px; top:-8px; transform:rotate(36deg)}
.tape-red{--tape:repeating-linear-gradient(135deg, rgba(163,48,28,.66) 0 7px, rgba(255,253,248,.72) 7px 14px)}
.tape-pine{--tape:radial-gradient(circle, rgba(61,90,54,.75) 0 2.4px, transparent 3px) 0 0 / 11px 11px, rgba(226,233,214,.85)}
.tape-kraft{--tape:rgba(233,214,180,.9)}

/* Paper slips that label each part of the board */
.slip{position:relative; display:inline-block; max-width:100%; padding:18px 32px 18px 30px; background:var(--paper); border-radius:1px; box-shadow:var(--shadow-paper)}
.slip::before{content:""; position:absolute; z-index:2; top:-12px; left:-20px; width:88px; height:28px; transform:rotate(-26deg); clip-path:var(--zigzag); background:rgba(233,214,180,.9)}
.slip.pinned::before{content:none}
.slip.pinned::after{left:30px}
.slip .kicker{margin-bottom:6px}
.slip h2{font-size:clamp(30px, 3.4vw, 44px)}
.slip h1{font-size:clamp(38px, 4vw, 56px); line-height:1.02; letter-spacing:-.02em}
.slip__sub{margin-top:10px; max-width:60ch; color:var(--muted); font-size:18px; line-height:1.5}
.slip__sub + .slip__sub{margin-top:6px}
.section-head{margin-bottom:clamp(30px, 3.6vw, 48px)}
.page-head{max-width:1000px}
.page-head h1{text-wrap:pretty}
.page-head .slip{padding:24px clamp(22px, 3vw, 40px) 24px}

/* ---------- 6. Hero: the issue sheet + the pinned episode ---------- */
.hero{display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(40px, 4vw, 56px) clamp(28px, 3.4vw, 52px)}
.sheet{position:relative; background:var(--paper); border-radius:2px; box-shadow:var(--shadow-paper)}
.issue{padding:clamp(36px, 3.8vw, 56px) clamp(22px, 3vw, 44px) clamp(30px, 3vw, 42px)}
.issue .kicker{padding-right:100px}
.issue h1{margin:8px 0 26px; font-size:clamp(46px, 5.4vw, 78px); line-height:.98; letter-spacing:-.025em}
.issue__when{margin:-10px 0 22px; font-size:18px; font-weight:700; line-height:1.5}
.issue__when span{display:block; text-wrap:balance}
.issue .lede{max-width:60ch; font-size:clamp(19px, 1.5vw, 21px)}
.issue__foot{margin-top:30px; padding-top:22px; border-top:1px dashed rgba(43,33,24,.3); display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px}
.issue__links{flex-basis:100%; display:flex; flex-wrap:wrap; gap:0 24px}
.dot{position:absolute; top:-20px; right:clamp(18px, 3vw, 40px); display:grid; place-items:center; width:86px; height:86px; border-radius:50%; background:radial-gradient(circle at 38% 30%, #B8402A, var(--red) 60%); color:var(--paper); font-size:17px; font-weight:700; line-height:1.1; text-align:center; box-shadow:inset 0 0 0 4px var(--red), inset 0 0 0 5.5px rgba(255,253,248,.55), 0 1px 1px rgba(43,33,24,.25), 0 8px 12px -8px rgba(43,33,24,.6)}
.count{display:inline-block; padding:8px 14px; border-radius:3px; background:var(--kraft); font-size:18px; font-weight:700}

.watch{position:relative; min-width:0}
.polaroid{position:relative; margin:clamp(26px, 2.6vw, 34px) 0 0; padding:clamp(10px, 1.3vw, 18px) clamp(10px, 1.3vw, 18px) 0; background:var(--paper); border-radius:2px; box-shadow:var(--shadow-paper)}
.screen{border:3px solid var(--ink); border-radius:6px; overflow:hidden; background:#151210; aspect-ratio:16 / 9}
.screen video{display:block; width:100%; height:100%; object-fit:cover; background:#151210}
.polaroid figcaption{display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:end; gap:0 18px; padding:14px 4px 18px}
.pip{display:block; width:clamp(62px, 6.6vw, 88px); height:auto; margin-bottom:-4px}
.bubble{position:relative; align-self:center; padding:12px 20px 13px; border:2.5px solid var(--ink); border-radius:22px; background:var(--paper); font-size:clamp(18px, 1.45vw, 21px); font-weight:700; line-height:1.5}
.bubble::before{content:""; position:absolute; left:-11px; bottom:18px; width:18px; height:18px; background:var(--paper); border-left:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink); transform:rotate(45deg) skew(8deg, 8deg)}
.watch__meta{grid-column:1 / -1; margin-top:14px; padding-top:12px; border-top:1px dashed rgba(43,33,24,.3); display:flex; flex-wrap:wrap; gap:2px 22px; color:var(--muted); font-size:18px; line-height:1.5}
.watch__meta span{display:inline-flex; align-items:center; gap:8px}
.watch__meta strong{color:var(--ink)}
.watch__more{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:0 24px; margin-top:4px}
.watch__more a{display:inline-flex; align-items:center; gap:10px; min-height:44px; font-weight:700}
/* Home: the week's video leads, with one caption line under it (the chapters live on the episode page) */
.watch--home .polaroid{margin-top:0}
.watch--home .polaroid figcaption{display:block; padding:12px 4px 10px}
.watch--home h2{font-size:clamp(24px, 2.2vw, 30px)}
.watch__facts{display:flex; flex-wrap:wrap; gap:0 18px; margin-top:2px; color:var(--muted); font-size:18px; line-height:1.5}
.watch__facts strong{color:var(--ink)}

.chapters{position:relative; display:grid; gap:14px 48px; padding:clamp(28px, 3vw, 38px) clamp(20px, 3vw, 40px) clamp(20px, 2.4vw, 30px)}
.chapters h2{font-size:clamp(26px, 2.4vw, 32px)}
.chapters__note{margin-top:10px; color:var(--muted); font-size:18px; line-height:1.5}
.chapters ol{list-style:none; display:grid; column-gap:40px; border-top:2px solid var(--red)}
.chapters li{border-bottom:1px solid var(--rule)}
.ch{display:flex; align-items:baseline; gap:16px; min-height:50px; padding:11px 2px; color:var(--ink); font-size:19px; line-height:1.4; text-decoration:none}
a.ch:hover .ch__title{text-decoration:underline}
.ch__time{flex:none; width:2.8em; color:var(--red); font-weight:700; font-variant-numeric:tabular-nums}
.ch__quiet{color:var(--muted)}

/* ---------- 7. On the board: pinned notes ---------- */
.notes{list-style:none; display:grid; grid-template-columns:minmax(0, 1fr); align-items:start; gap:clamp(40px, 3.6vw, 52px) clamp(24px, 2.6vw, 36px)}
.note{position:relative; display:flex; --tilt:-.6deg}
.note:nth-child(3n+2){--tilt:.6deg}
.note:nth-child(3n){--tilt:-.45deg}
.note.backed::before{content:""; position:absolute; z-index:0; inset:9px -8px -10px 8px; background:var(--kraft); border-radius:2px; box-shadow:0 1px 2px rgba(43,33,24,.3); transition:transform .25s ease}
.card{position:relative; z-index:1; flex:1; display:flex; flex-direction:column; min-width:0; padding:32px clamp(20px, 2vw, 28px) 22px; background:var(--paper); border-radius:2px; box-shadow:var(--shadow-paper); transition:transform .2s ease, box-shadow .2s ease}
.note:hover .card, .note:focus-within .card{transform:translateY(-3px); box-shadow:var(--shadow-lift)}
.note--flyer .card{margin-bottom:54px}
.note--flyer .card::after{content:""; position:absolute; left:calc(50% - 132px); width:264px; top:100%; height:54px; border-top:2px dashed rgba(43,33,24,.3);
  background:repeating-linear-gradient(90deg, var(--paper) 0 26px, transparent 26px 34px);
  -webkit-mask:linear-gradient(90deg, #000 0 101px, transparent 101px 129px, #000 129px 203px, transparent 203px 231px, #000 231px);
  mask:linear-gradient(90deg, #000 0 101px, transparent 101px 129px, #000 129px 203px, transparent 203px 231px, #000 231px);
  filter:drop-shadow(0 2px 1.5px rgba(43,33,24,.32))}
.card__head{display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:start; gap:18px}
.chip{position:relative; width:72px; padding:20px 4px 9px; background:var(--kraft); text-align:center; line-height:1; clip-path:polygon(18% 0, 82% 0, 100% 14%, 100% 100%, 0 100%, 0 14%)}
.chip::before{content:""; position:absolute; top:7px; left:calc(50% - 4px); width:8px; height:8px; border-radius:50%; background:var(--paper); box-shadow:inset 0 1px 1px rgba(43,33,24,.45)}
.chip__day, .chip__mon, .chip__due{display:block; font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.chip__due{margin-bottom:5px; color:var(--red); letter-spacing:.03em}
.chip__num{display:block; margin:5px 0 3px; color:var(--red); font-family:var(--serif); font-size:38px; font-weight:600; font-variation-settings:"SOFT" 100, "WONK" 0}
.type{margin:2px 0 6px; color:var(--muted); font-size:15px; font-weight:700; letter-spacing:.12em; line-height:1.35; text-transform:uppercase}
.card h3, .card h4{font-size:clamp(24px, 2vw, 28px); line-height:1.14}
.alt-name{margin-top:6px; color:var(--muted); font-size:18px; font-style:italic; line-height:1.4}
.gloss{display:block; margin-top:6px; font-family:var(--sans); font-size:18px; font-weight:400; font-style:italic; font-variation-settings:normal; letter-spacing:0; line-height:1.45}
.tags{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.tags li{white-space:nowrap; padding:1px 12px; border:1.5px solid var(--ink); border-radius:999px; font-size:16px; font-weight:700; line-height:1.6}
.tags .is-free{background:var(--pine); border-color:var(--pine); color:var(--paper)}
.facts{display:grid; gap:12px; margin:18px 0 0}
.facts dt{color:var(--muted); font-size:14px; font-weight:700; letter-spacing:.12em; line-height:1.4; text-transform:uppercase}
.facts dd{margin:2px 0 0; font-size:19px; line-height:1.5}
.card__more{margin-top:18px; padding-top:14px; border-top:1px dashed rgba(43,33,24,.3); font-size:18px; line-height:1.55}
.card__more p + p{margin-top:8px}
.card__foot{margin-top:auto; padding-top:20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px}
.sources{display:flex; flex-direction:column}
.source{display:inline-block; padding:10px 0; font-size:18px; font-weight:700; line-height:1.35}
.source__arrow{display:inline-block; margin-left:6px; text-decoration:none}
.stamp{display:inline-flex; flex-direction:column; align-items:center; padding:6px 12px 5px; border:2px solid var(--pine); border-radius:8px; box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 3.5px var(--pine); color:var(--pine); font-size:13px; font-weight:700; letter-spacing:.13em; line-height:1.25; text-align:center; text-transform:uppercase; transform:rotate(-4deg)}
.stamp__big{display:inline-flex; align-items:center; gap:7px; font-size:16px; letter-spacing:.14em}
.stamp__big::before{content:""; width:12px; height:6px; margin-top:-4px; border-left:3px solid currentColor; border-bottom:3px solid currentColor; transform:rotate(-45deg)}

/* Group labels on the board (the newsletter's own section headings): kraft strips pinned to the cork */
.board-group + .board-group{margin-top:clamp(64px, 7vw, 100px)}
.group-head{margin-bottom:clamp(30px, 3.4vw, 46px)}
.group-strip{position:relative; display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; max-width:100%; padding:16px 30px 13px 30px; background:var(--kraft); border-radius:1px; box-shadow:0 1px 1px rgba(43,33,24,.2), 0 10px 14px -10px rgba(43,33,24,.6); transform:rotate(-.7deg)}
.group-strip::before{content:""; position:absolute; inset:5px; border:1.5px dashed var(--kraft-line); pointer-events:none}
.group-strip h3{position:relative; font-size:clamp(26px, 2.6vw, 34px); line-height:1.12}
.group-strip__when{position:relative; color:var(--red-dark); font-size:15px; font-weight:700; letter-spacing:.14em; line-height:1.4; text-transform:uppercase}
.board-group:nth-of-type(even) .group-strip{transform:rotate(.6deg)}

@media (min-width:640px){
  .notes{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .note--full{grid-column:1 / -1}
  .note--full .facts{grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:36px}
}
@media (min-width:1024px){
  .notes{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .note--wide{grid-column:span 2}
  .note--wide .facts{grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:36px}
  .note--full .facts{grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:40px}
  .note.backed::before{transform:rotate(var(--tilt))}
  .note.backed:hover::before, .note.backed:focus-within::before{transform:rotate(0)}
}

/* "Before you go": the one dated note about when details were checked */
.checked{position:relative; display:grid; grid-template-columns:minmax(0, 1fr); gap:16px 28px; align-items:center; max-width:980px; margin-inline:auto; padding:30px clamp(22px, 3vw, 40px) 28px; background:var(--paper); border-radius:2px; box-shadow:var(--shadow-paper)}
.checked .kicker{margin-bottom:6px}
.checked .checked__text{display:block; font-size:clamp(19px, 1.5vw, 21px); line-height:1.55; max-width:62ch}
.checked .stamp{justify-self:start}
@media (min-width:760px){ .checked{grid-template-columns:minmax(0, 1fr) auto} .checked .stamp{justify-self:end} }

/* ---------- 8. Remembrance: the board stops here ---------- */
.remembrance{margin:clamp(64px, 8vw, 120px) 0; padding:clamp(64px, 8vw, 112px) var(--gutter); background:var(--stone); color:var(--slate); border-top:1px solid var(--slate); border-bottom:1px solid var(--slate)}
.remembrance__in{max-width:920px; margin:0 auto}
.remembrance h2, .remembrance h3{color:var(--slate); font-weight:500; font-variation-settings:"SOFT" 0, "WONK" 0}
.remembrance h2{font-size:clamp(36px, 4.2vw, 54px); letter-spacing:-.01em}
.r-kicker{margin-bottom:14px; font-size:18px; font-weight:700; letter-spacing:.1em; line-height:1.5; text-transform:uppercase}
.r-lede{max-width:56ch; margin-top:16px; font-size:clamp(19px, 1.5vw, 21px)}
.r-list{list-style:none; margin-top:clamp(36px, 4vw, 52px); border-top:1px solid var(--slate)}
.r-item{display:grid; gap:6px 44px; padding:30px 0 32px; border-bottom:1px solid rgba(46,51,54,.38)}
.r-when{font-weight:700; line-height:1.5}
.r-when span{display:block}
.r-item h3{font-size:clamp(24px, 2.2vw, 29px); line-height:1.2}
.r-item p{margin-top:10px}
.remembrance a{color:var(--slate); text-decoration-thickness:1.5px}
.remembrance a:hover{text-decoration-thickness:1.5px}
.remembrance a:focus-visible{outline-color:var(--slate)}
.r-source{display:inline-flex; align-items:center; min-height:44px; margin-top:6px; font-weight:700}
@media (min-width:760px){ .r-item{grid-template-columns:12.5em minmax(0, 1fr)} }
/* Between two boards, the band keeps its own margins and the boards keep theirs. */
.board + .remembrance{margin-top:clamp(64px, 8vw, 120px)}
.remembrance + .board{margin-top:0}

/* ---------- Plowie's clipboard ---------- */
.clipboard{position:relative; max-width:1140px; margin-inline:auto; padding:clamp(60px, 6vw, 76px) clamp(20px, 3.4vw, 48px) clamp(28px, 3vw, 40px); background:var(--plow-tint); border:3px solid var(--plow); border-left-width:10px; border-radius:16px; box-shadow:var(--shadow-paper)}
.clipboard__clip{position:absolute; top:-30px; left:calc(50% - 80px); width:160px; height:64px}
.clipboard__head{display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px}
.clipboard__plowie{width:clamp(96px, 10vw, 136px); height:auto}
.clipboard h2{font-size:clamp(30px, 3.2vw, 42px)}
.clipboard .kicker{margin-bottom:4px}
.clipboard__sub{margin-top:6px; color:var(--muted); font-size:18px}
.clip-notes{list-style:none; display:grid; gap:32px; margin-top:30px}
.clip-note__label{display:inline-block; margin-bottom:8px; padding:2px 10px; border:1.5px solid var(--plow); border-radius:3px; background:var(--paper); color:var(--ink); font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.clip-note h3{font-family:var(--sans); font-size:clamp(22px, 1.9vw, 25px); font-weight:700; font-variation-settings:normal; letter-spacing:0; line-height:1.3}
.clip-note .facts dd{font-size:19px}
.clip-note .source{margin-top:10px}
@media (min-width:900px){
  .clip-notes{grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); gap:0}
  .clip-notes > li:first-child{padding-right:40px}
  .clip-notes > li + li{padding-left:40px; border-left:2px dashed rgba(180,83,26,.6)}
  .clip-notes--n3{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .clip-notes--n3 > li + li{padding-right:32px; padding-left:32px}
  .clip-notes--n3 > li:first-child{padding-right:32px}
  .clip-notes--n3 > li:last-child{padding-right:0}
}

/* ---------- 9. Pinned for later ---------- */
.later-list{list-style:none; display:grid; grid-template-columns:minmax(0, 1fr); gap:44px 36px}
.later-list > li{position:relative; display:flex}
.ticket-wrap{filter:drop-shadow(0 1px 1px rgba(43,33,24,.2)) drop-shadow(0 12px 12px rgba(43,33,24,.28))}
.ticket{flex:1; display:grid; grid-template-columns:auto minmax(0, 1fr); background:var(--paper);
  -webkit-mask:radial-gradient(circle 15px at 0 var(--notch-y, 50%), transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 15px at 100% var(--notch-y, 50%), transparent 97%, #000) right / 51% 100% no-repeat;
  mask:radial-gradient(circle 15px at 0 var(--notch-y, 50%), transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 15px at 100% var(--notch-y, 50%), transparent 97%, #000) right / 51% 100% no-repeat}
.ticket__stub{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:28px 16px 28px 26px; background:var(--kraft); border-right:3px dotted var(--wall)}
.ticket__stub .chip{background:var(--paper)}
.ticket__stub .chip::before{background:var(--kraft)}
.ticket__body{display:flex; flex-direction:column; padding:28px 30px 22px 24px; min-width:0}
.ticket__body h3, .parade h3{font-size:clamp(24px, 2.1vw, 28px); line-height:1.15}
.parade h3 + .card__head{margin-top:20px}
.parade .card__head + .card__head{margin-top:18px; padding-top:18px; border-top:1px dashed rgba(43,33,24,.3)}
.parade__where{font-size:19px; line-height:1.5}
.parade__town{display:block; margin-bottom:2px; font-family:var(--serif); font-size:24px; font-weight:600; font-variation-settings:"SOFT" 100, "WONK" 0; line-height:1.2}
.caution{margin-top:18px; padding:12px 16px; border-left:5px solid var(--red); background:#F8EDE3; font-size:18px; line-height:1.5}
@media (min-width:900px){ .later-list{grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); align-items:start} }

/* ---------- 10. Archive: manila folders and file cards ---------- */
.archive-grid{display:grid; gap:40px 36px}
.file{position:relative; margin-top:48px; padding:26px clamp(14px, 2.2vw, 26px) 24px; background:var(--kraft); border-radius:0 10px 8px 8px; box-shadow:var(--shadow-paper)}
.file__tab{position:absolute; left:0; bottom:calc(100% - 1px); max-width:100%; padding:12px 30px 4px; background:var(--kraft); border-radius:10px 10px 0 0; font-family:var(--serif); font-size:clamp(22px, 2vw, 26px); font-weight:600; font-variation-settings:"SOFT" 100, "WONK" 0; line-height:1.25}
.file ol, .file ul{list-style:none; display:grid; gap:10px}
.file li{display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; min-height:60px; padding:8px 16px; background:var(--paper); border-radius:2px; box-shadow:0 1px 1px rgba(43,33,24,.2), 0 3px 6px -4px rgba(43,33,24,.35)}
.file li.file__row{position:relative}
.file.pinned::after{left:auto; right:30px}
.file__row a{font-weight:700}
.file__row a::after{content:""; position:absolute; inset:0}
.file__row:hover{box-shadow:0 1px 1px rgba(43,33,24,.2), 0 8px 12px -6px rgba(43,33,24,.45)}
.file__row:focus-within{outline:3px solid var(--red); outline-offset:3px}
.file__row a:focus-visible{outline:none}
.slot{flex:none; padding:2px 10px; border:1.5px dashed var(--kraft-line); border-radius:3px; background:var(--wall); font-size:16px; font-weight:700}
.slot--real{border-style:solid; border-color:var(--ink); background:var(--paper)}
.ph{color:var(--muted)}
.archive-note{margin-top:20px; color:var(--muted); font-size:18px}
.file__note{margin-top:16px; padding:0 4px; font-size:18px; line-height:1.5}
.file__more{display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-top:8px; padding:0 4px; color:var(--ink); font-weight:700}

/* The archive page: a drawer of month folders holding one file card per issue */
.drawer{display:grid; gap:clamp(64px, 7vw, 96px)}
.month{position:relative; margin-top:52px; padding:clamp(22px, 2.6vw, 34px) clamp(14px, 2.6vw, 34px) clamp(26px, 3vw, 38px); background:var(--kraft); border-radius:0 12px 10px 10px; box-shadow:var(--shadow-paper)}
.month::after{content:""; position:absolute; inset:auto 0 0 0; height:14px; border-radius:0 0 10px 10px; background:linear-gradient(rgba(43,33,24,0), rgba(43,33,24,.08))}
.month__tab{position:absolute; left:0; bottom:calc(100% - 1px); padding:12px 34px 6px; background:var(--kraft); border-radius:12px 12px 0 0; font-size:clamp(24px, 2.4vw, 30px)}
.filecards{list-style:none; display:grid; gap:28px}
.filecard{position:relative; display:grid; grid-template-columns:minmax(0, 1fr); gap:18px 36px; padding:clamp(24px, 2.6vw, 34px) clamp(20px, 2.6vw, 34px); background:var(--paper); border-radius:2px; box-shadow:0 1px 1px rgba(43,33,24,.2), 0 10px 16px -10px rgba(43,33,24,.5)}
.filecard__tags{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-bottom:10px}
.filecard__num{display:inline-block; padding:2px 10px; border:1.5px dashed var(--muted); border-radius:3px; color:var(--ink); font-size:16px; font-weight:700}
.filecard__now{display:inline-block; padding:3px 11px; border-radius:999px; background:var(--red); color:var(--paper); font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.filecard h3{font-size:clamp(28px, 3vw, 40px); line-height:1.08}
.filecard h3 a{color:var(--ink); text-decoration-color:var(--red); text-decoration-thickness:2px}
.filecard h3 a:hover{text-decoration-thickness:4px}
.filecard .issue__when{margin:12px 0 0; font-size:17px; line-height:1.45}
.filecard__lede{margin-top:14px; max-width:62ch; font-size:19px; line-height:1.55}
.filecard__side{display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.filecard__links{display:flex; flex-direction:column}
.filecard__links a{display:inline-flex; align-items:center; gap:10px; min-height:44px; font-weight:700}
.filecard__poster{display:block; width:100%; max-width:420px}
.filecard__poster img{display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; border:3px solid var(--ink); border-radius:6px; background:#151210; transition:transform .2s ease}
.filecard__poster:hover img{transform:rotate(-.6deg) scale(1.01)}
@media (min-width:900px){ .filecard{grid-template-columns:minmax(0, 1fr) minmax(220px, 18em); align-items:start} .filecard__side{padding-left:30px; border-left:1px dashed rgba(43,33,24,.3)} }

/* Previous / next issue: two kraft file tabs */
.issue-nav{max-width:1140px; margin-inline:auto}
.issue-nav__grid{list-style:none; display:grid; grid-template-columns:minmax(0, 1fr); gap:20px 28px}
.issue-nav__slot{position:relative; display:flex; flex-direction:column; gap:4px; min-height:100%; padding:20px 24px 18px; background:var(--kraft); border-radius:2px 10px 4px 4px; box-shadow:var(--shadow-paper)}
.issue-nav__label{display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.issue-nav__value{font-size:19px; line-height:1.45}
.issue-nav__slot--empty{background:var(--wall); box-shadow:none; border:2px dashed var(--kraft-line)}
.issue-nav__slot--empty .issue-nav__value{color:var(--muted)}
.issue-nav__all{display:flex; align-items:center; justify-content:center}
@media (min-width:860px){ .issue-nav__grid{grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr)} .issue-nav__slot--next{text-align:right; align-items:flex-end} }

/* ---------- 11. Postcard sign-up ---------- */
.postcard{position:relative; display:grid; grid-template-columns:minmax(0, 1fr); max-width:1100px; margin:0 auto; background:var(--paper); border-radius:4px; box-shadow:var(--shadow-paper)}
.postcard::after{content:""; position:absolute; inset:10px; border:1px solid var(--rule); border-radius:2px; pointer-events:none}
.postcard__message, .postcard__address{position:relative; z-index:1; padding:clamp(30px, 3.8vw, 54px)}
.postcard__message h2, .postcard__message h1{margin-top:8px; font-size:clamp(32px, 3.4vw, 44px)}
.postcard--full .postcard__message h1{font-size:clamp(38px, 4.4vw, 60px); line-height:1.04}
.salutation{margin-top:22px; line-height:1.25; font-family:var(--serif); font-size:24px; font-weight:600; font-variation-settings:"SOFT" 100, "WONK" 0}
.postcard__message p.body{margin-top:8px; max-width:34ch; font-size:clamp(19px, 1.5vw, 21px)}
.signoff{margin-top:22px; font-family:var(--serif); font-size:22px; font-weight:500; font-variation-settings:"SOFT" 100, "WONK" 0; line-height:1.35}
.signoff span{font-size:30px; font-weight:600; font-variation-settings:"SOFT" 100, "WONK" 0; color:var(--red)}
.placeholder{display:block; margin-top:26px; padding:14px 16px; border:2px dashed var(--muted); border-radius:6px; background:var(--wall); font-size:18px; line-height:1.5}
.soon{display:block; margin-top:26px; padding:14px 16px; border-left:5px solid var(--pine); border-radius:4px; background:var(--wall); font-size:18px; line-height:1.5}
.postcard__address{border-top:2px solid var(--kraft-line)}
.postcard__printed{display:block; margin-bottom:18px; color:var(--muted); font-size:14px; font-weight:700; letter-spacing:.3em; text-transform:uppercase}
.stamp-art{position:absolute; top:clamp(26px, 3.4vw, 46px); right:clamp(26px, 3.4vw, 46px); width:104px; height:126px; padding:13px;
  background:radial-gradient(circle 5px, transparent 96%, var(--paper)) round -7px -7px / 14px 14px, linear-gradient(var(--paper) 0 0) no-repeat 50% / calc(100% - 14px) calc(100% - 14px);
  filter:drop-shadow(0 0 1px rgba(43,33,24,.55)) drop-shadow(0 4px 4px rgba(43,33,24,.22)); transform:rotate(3deg)}
.stamp-art__inner{display:flex; align-items:flex-end; justify-content:center; height:100%; border:2px solid var(--red); background:radial-gradient(circle at 50% 110%, #FCE7D2 0 30%, #A9DEF9 31%)}
.stamp-art img{width:66px; height:auto; margin-bottom:2px}
.postmark{position:absolute; top:clamp(46px, 5vw, 66px); right:clamp(96px, 10vw, 120px); width:180px; height:auto; opacity:.75}
.address{margin-top:118px}
.field label{display:block; margin-bottom:6px; font-size:19px; font-weight:700}
.field input{display:block; width:100%; min-height:56px; padding:10px 14px; border:2px solid var(--ink); border-radius:6px; background:var(--paper); color:var(--ink); font:inherit; font-size:20px}
.field input:focus-visible{outline:3px solid var(--red); outline-offset:2px}
.ruled{height:72px; margin-top:6px; background:repeating-linear-gradient(to bottom, transparent 0 35px, var(--kraft-line) 35px 36px)}
.langs{margin:20px 0 0; padding:0; border:0}
.langs legend{padding:0; margin-bottom:8px; font-size:19px; font-weight:700}
.choices{display:flex; flex-wrap:wrap; gap:10px}
.choice{display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 18px 0 14px; border:2px solid var(--ink); border-radius:999px; background:var(--paper); font-weight:700; cursor:pointer}
.choice input{width:24px; height:24px; margin:0; accent-color:var(--pine)}
.choice:has(input:checked){background:var(--kraft)}
.signup-btn{display:inline-flex; align-items:center; gap:12px; min-height:56px; margin-top:26px; padding:0 28px; border:0; border-radius:6px; background:var(--pine); color:var(--paper); font:inherit; font-size:20px; font-weight:700; cursor:pointer; box-shadow:0 3px 0 var(--pine-dark)}
.signup-btn:hover{background:var(--pine-dark)}
/* Sign-up not open yet: the card stays as a picture of what's coming, visibly switched off. */
.address:has(:disabled) .field input, .address:has(:disabled) .choice{border-style:dashed; border-color:var(--muted); background:var(--wall); cursor:not-allowed}
.address:has(:disabled) .choice:has(input:checked){background:var(--wall)}
.signup-btn:disabled, .signup-btn:disabled:hover{background:var(--muted); cursor:not-allowed}
.signup-note{margin-top:14px; color:var(--muted); font-size:18px; line-height:1.5}
.signup-note strong{color:var(--ink)}
@media (min-width:880px){
  .postcard{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .postcard__address{border-top:0; border-left:2px solid var(--kraft-line)}
}
/* Sign-up page: what you get, on a luggage tag of paper */
.signup-page{display:grid; gap:clamp(56px, 6vw, 80px)}
.getlist{position:relative; max-width:1100px; margin-inline:auto; width:100%; padding:clamp(32px, 3.4vw, 46px) clamp(22px, 3.4vw, 48px) clamp(26px, 3vw, 38px)}
.getlist h2{font-size:clamp(28px, 3vw, 38px)}
.getlist .facts{margin-top:22px; gap:18px}
.getlist .facts > div{display:grid; gap:2px 28px; padding-bottom:16px; border-bottom:1px solid var(--rule)}
.getlist .facts dd{font-size:20px}
.getlist__foot{margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px}
@media (min-width:760px){ .getlist .facts > div{grid-template-columns:11em minmax(0, 1fr); align-items:baseline} }
.ph-text{display:inline-block; padding:1px 8px; border:1.5px dashed var(--muted); border-radius:3px; background:var(--wall); font-weight:700}

/* ---------- 12. About: lined paper, the sticker sheet, corrections ---------- */
.about{display:grid; grid-template-columns:minmax(0, 1fr); gap:44px 40px}
.lined{--lh:32px; --margin:clamp(40px, 5vw, 76px); position:relative; padding:calc(var(--lh) * 2) clamp(22px, 3.4vw, 48px) calc(var(--lh) * 1.5) calc(var(--margin) + clamp(16px, 2vw, 26px)); background-color:var(--paper);
  background-image:linear-gradient(90deg, transparent calc(var(--margin) - 1px), rgba(163,48,28,.5) calc(var(--margin) - 1px) calc(var(--margin) + 1px), transparent calc(var(--margin) + 1px)), repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 1px), #DCCDB4 calc(var(--lh) - 1px) var(--lh));
  background-position:0 0, 0 calc(var(--lh) * 2 - 6px); box-shadow:var(--shadow-paper); border-radius:2px; line-height:var(--lh)}
.lined h1, .lined h2{font-size:clamp(30px, 3vw, 38px); line-height:calc(var(--lh) * 2); margin-top:calc(var(--lh) * -1)}
.lined h1{font-size:clamp(34px, 3.6vw, 46px)}
.lined h2 + p, .lined h1 + p{margin-top:0}
.lined h3, .lined .lined__h{font-size:24px; line-height:var(--lh); margin-top:var(--lh)}
.lined p{margin-top:var(--lh)}
.lined h3 + p, .lined .lined__h + p{margin-top:0}
.lined .independent{font-weight:700}
.lined .lined__title{font-size:clamp(28px, 2.8vw, 34px); line-height:calc(var(--lh) * 2); margin-top:calc(var(--lh) * -1)}
.lined .lined__title + p{margin-top:0}
.lined__more{display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-top:calc(var(--lh) / 2); font-weight:700}
.about__side{display:grid; gap:44px}
.mistakes{padding:32px clamp(20px, 2.6vw, 30px) 24px}
.mistakes h2, .mistakes h3{font-size:clamp(23px, 2vw, 26px)}
.mistakes p{margin-top:8px; font-size:18px; line-height:1.55}
.mistakes .corrections{display:inline-flex; align-items:center; min-height:44px; margin-top:6px; font-weight:700}
.draft-tag{display:inline-block; margin-top:10px; padding:2px 10px; border:2px dashed var(--red); border-radius:3px; color:var(--red-dark); font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.draft-text{margin-top:12px; padding:12px 16px; border-left:4px dashed var(--kraft-line); background:#FBF6EC}
.draft-text p{font-size:18px}
.draft-text p:first-child{margin-top:0}
.policy-text{margin-top:12px}
.policy-text p{font-size:18px}
.policy-text p:first-child{margin-top:0}
.contact__email{font-weight:700; overflow-wrap:anywhere}
.stickers{position:relative; padding:30px clamp(20px, 2.6vw, 30px) 26px; border-radius:12px; background:#F6EEE1; box-shadow:var(--shadow-paper)}
.stickers h2, .stickers h3{font-size:clamp(24px, 2.2vw, 28px)}
.stickers__note{margin-top:6px; color:var(--muted); font-size:18px; line-height:1.5}
.sheet-list{list-style:none; display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; margin-top:20px}
.sticker{display:grid; grid-template-columns:84px minmax(0, 1fr); align-items:center; gap:16px; padding:12px 14px; border:2px dashed #D6C3A2; border-radius:18px}
.sticker img{display:block; width:84px; height:84px; object-fit:contain; filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 3px rgba(43,33,24,.32))}
.sticker:nth-child(1) img{transform:rotate(-4deg)}
.sticker:nth-child(2) img{transform:rotate(3deg)}
.sticker:nth-child(3) img{transform:rotate(-2deg)}
.sticker__name{display:block; font-family:var(--serif); font-size:23px; font-weight:600; font-variation-settings:"SOFT" 100, "WONK" 0; line-height:1.2}
.sticker__role{display:block; font-size:18px; line-height:1.45; color:var(--muted)}
.sticker__fr{display:block; margin-top:2px; font-size:16px; line-height:1.4; color:var(--muted)}
/* The about page's big sticker sheet */
.stickers--big .sheet-list{gap:18px}
.stickers--big .sticker{grid-template-columns:112px minmax(0, 1fr); padding:16px 18px}
.stickers--big .sticker img{width:112px; height:112px}
/* A row of three small stickers (home teaser, episode library) */
.sticker-row{list-style:none; display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:16px}
.sticker-row li{display:flex; flex-direction:column; align-items:center; gap:2px; font-weight:700; font-size:16px}
.sticker-row img{display:block; width:64px; height:64px; object-fit:contain; filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 3px rgba(43,33,24,.32))}
.sticker-row li:nth-child(1) img{transform:rotate(-4deg)}
.sticker-row li:nth-child(2) img{transform:rotate(3deg)}
.sticker-row li:nth-child(3) img{transform:rotate(-2deg)}
.contact{padding:30px clamp(20px, 2.6vw, 30px) 26px}
.contact h2{font-size:clamp(23px, 2vw, 26px)}
.contact p{margin-top:8px; font-size:18px; line-height:1.55}
@media (min-width:960px){ .about{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); align-items:start} }

/* ---------- 13. Episode page: the video pinned large, the transcript on paper ---------- */
.ep{display:grid; gap:clamp(56px, 6vw, 80px)}
.ep-stage{max-width:1120px; width:100%; margin-inline:auto}
.ep-stage .polaroid{margin-top:0; padding:clamp(10px, 1.6vw, 22px) clamp(10px, 1.6vw, 22px) 0}
.ep-stage .screen{border-width:4px}
.ep-stage .pip{width:clamp(66px, 7vw, 96px)}
.ep-grid{display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(44px, 4vw, 56px) clamp(28px, 3vw, 44px)}
.ep-grid .chapters{display:block}
.ep-grid .chapters ol{margin-top:18px}
.ep-side{display:grid; gap:44px; align-content:start}
.ep-issue{padding:32px clamp(20px, 2.6vw, 30px) 26px}
.ep-issue h2{font-size:clamp(24px, 2.2vw, 30px)}
.ep-issue p{margin-top:8px; font-size:18px; line-height:1.55}
.ep-issue .btn{margin-top:18px}
.ep-cast .sheet-list{margin-top:16px}
@media (min-width:1024px){ .ep-grid{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); align-items:start} }

.transcript{max-width:920px; margin-inline:auto}
.t-sheet{position:relative; padding:clamp(34px, 3.6vw, 52px) clamp(20px, 3.6vw, 52px) clamp(26px, 3vw, 40px)}
.t-sheet + .t-sheet{margin-top:44px}
.t-sec + .t-sec{margin-top:34px; padding-top:30px; border-top:1px dashed rgba(43,33,24,.3)}
.t-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px}
.t-time{display:inline-block; flex:none; padding:3px 10px 2px; border-radius:3px; background:var(--kraft); color:var(--red-dark); font-family:var(--sans); font-size:17px; font-weight:700; letter-spacing:.04em; font-variant-numeric:tabular-nums; font-variation-settings:normal}
.t-sec h3{font-size:clamp(25px, 2.2vw, 30px); line-height:1.2}
.t-lines{display:grid; gap:14px; margin-top:18px}
.t-line{display:grid; grid-template-columns:minmax(0, 1fr); gap:2px 22px}
.t-who{font-size:15px; font-weight:700; letter-spacing:.12em; line-height:1.6; text-transform:uppercase; color:var(--muted)}
.t-who--pip{color:var(--red)}
.t-who--castor{color:#5A3412}
.t-who--song + .t-say{font-style:italic}
.t-who--plowie{color:var(--plow)}
.t-say{font-size:20px; line-height:1.6}
.t-notes{display:grid; gap:6px; margin-top:12px; color:var(--muted); font-size:18px; line-height:1.5}
.t-notes strong{color:var(--ink)}
.t-end{display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; margin-top:34px; padding-top:24px; border-top:2px solid var(--red)}
@media (min-width:700px){ .t-line{grid-template-columns:8.5em minmax(0, 1fr); align-items:baseline} .t-who{text-align:right} }
/* The Remembrance chapter of a transcript is set like the board's Remembrance band: plain stone, no decoration. */
.remembrance--transcript .remembrance__in{max-width:920px}
.remembrance--transcript h3{font-size:clamp(30px, 3.2vw, 40px); letter-spacing:-.01em}
.remembrance--transcript .t-who{color:var(--slate)}
.remembrance--transcript .t-lines{margin-top:28px; padding-top:24px; border-top:1px solid var(--slate)}
.remembrance--transcript .t-time{background:transparent; color:var(--slate); padding:0; font-size:inherit; letter-spacing:inherit}

/* ---------- 14. Episode library: poster frames ---------- */
.reel{display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(44px, 4vw, 56px) clamp(28px, 3vw, 44px); align-items:start}
.poster-card{position:relative; margin:0; padding:clamp(10px, 1.2vw, 16px) clamp(10px, 1.2vw, 16px) 0; background:var(--paper); border-radius:2px; box-shadow:var(--shadow-paper); transition:transform .2s ease, box-shadow .2s ease}
.poster-card:hover, .poster-card:focus-within{transform:translateY(-3px); box-shadow:var(--shadow-lift)}
.poster-card__img{display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; border:3px solid var(--ink); border-radius:6px; background:#151210}
.poster-card__cap{padding:16px 6px 20px}
.poster-card h2, .poster-card h3{font-size:clamp(24px, 2.2vw, 30px); line-height:1.15}
.poster-card h2 a, .poster-card h3 a{color:var(--ink); text-decoration-color:var(--red); text-decoration-thickness:2px}
.poster-card h2 a:hover, .poster-card h3 a:hover{text-decoration-thickness:4px}
.poster-card .stretch::after{content:""; position:absolute; inset:0; z-index:1}
.poster-card .stretch:focus-visible{outline:none}
.poster-card:has(.stretch:focus-visible){outline:3px solid var(--red); outline-offset:4px}
.poster-card__meta{display:flex; flex-wrap:wrap; gap:2px 20px; margin-top:8px; color:var(--muted); font-size:18px; line-height:1.5}
.poster-card__meta strong{color:var(--ink)}
.poster-card__links{position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:0 24px; margin-top:8px}
.poster-card__links a{display:inline-flex; align-items:center; min-height:44px; font-weight:700}
.poster-card__play{position:absolute; z-index:6; top:calc(clamp(10px, 1.2vw, 16px) + 12px); left:calc(clamp(10px, 1.2vw, 16px) + 12px); padding:4px 12px; border-radius:999px; background:var(--ink); color:var(--paper); font-size:15px; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
/* The badge keeps its size while the poster shrinks, so on a narrow card it would cover the title sign
   in the middle of the frame. It is aria-hidden decoration and the card's title already names the episode, so a narrow card leaves it out. */
.reel > .poster-card{container-type:inline-size}
@container (max-width:549px){ .poster-card__play{display:none} }
.reel-note{padding:32px clamp(22px, 2.8vw, 36px) 28px}
.reel-note h2{font-size:clamp(24px, 2.2vw, 30px)}
.reel-note p{margin-top:12px; font-size:19px; line-height:1.55}
@media (min-width:900px){ .reel{grid-template-columns:repeat(2, minmax(0, 1fr))} }

/* ---------- 15. Home teasers ---------- */
.teasers{display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(56px, 5vw, 72px) clamp(28px, 3.2vw, 48px); align-items:start}
.teasers__col{display:grid; gap:clamp(56px, 5vw, 72px); align-content:start; min-width:0}
.teaser{position:relative; min-width:0}
.teaser .poster-card{margin-top:0}
.teaser .file{margin-top:52px}
.teaser .lined{--lh:30px}
.mini-postcard{padding:clamp(28px, 3vw, 40px) clamp(22px, 3vw, 40px) clamp(26px, 3vw, 34px)}
.mini-postcard::after{content:""; position:absolute; inset:10px; border:1px solid var(--rule); border-radius:2px; pointer-events:none}
.mini-postcard > :not(.stamp-art){position:relative; z-index:1}
.mini-postcard .stamp-art{position:absolute; z-index:2}
.mini-postcard h3{margin-top:8px; font-size:clamp(28px, 2.8vw, 36px)}
.mini-postcard .body{margin-top:12px; max-width:36ch; font-size:19px}
.mini-postcard .stamp-art{top:26px; right:26px; width:84px; height:102px; padding:11px}
.mini-postcard .stamp-art img{width:50px}
.mini-postcard .kicker, .mini-postcard h3, .mini-postcard .body{margin-right:96px}
.mini-postcard .btn{margin-top:20px}
.teaser-head{margin-bottom:22px}
@media (min-width:900px){
  .teasers{grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:stretch}
  /* Both columns end level: the last card in each fills what is left (the folder or the lined card grows) */
  .teasers__col{grid-template-rows:auto minmax(0, 1fr)}
  .teasers__col > .teaser:last-child{display:flex; flex-direction:column}
  .teasers__col > .teaser:last-child > *{flex:1 1 auto}
  .teaser .file{display:flex; flex-direction:column}
  .teaser .file .file__more{align-self:flex-start; margin-top:auto; padding-top:8px}
}

/* ---------- 404: a note that fell off the board ---------- */
.notfound-main{padding:clamp(28px, 5vw, 72px) 0 0}
.fallen{position:relative; max-width:900px; margin:0 auto; padding-top:40px}
.fallen__pin{position:relative; height:40px}
.fallen__pin::after{left:calc(50% - 160px)}
.fallen__note{position:relative; padding:clamp(34px, 4vw, 52px) clamp(22px, 4vw, 52px) clamp(30px, 3.4vw, 44px); background:var(--paper); box-shadow:var(--shadow-lift); border-radius:2px; transform:rotate(-2.5deg); transform-origin:70% 0}
.fallen__note::before{content:""; position:absolute; top:-6px; left:calc(50% - 168px); width:14px; height:14px; border-radius:50%; background:var(--wall); box-shadow:inset 0 1px 2px rgba(43,33,24,.5)}
.fallen__note h1{font-size:clamp(34px, 4vw, 54px); line-height:1.08}
.fallen__note h1 span{display:block; color:var(--muted); font-size:.72em}
.fallen__cols{display:grid; grid-template-columns:minmax(0, 1fr); gap:28px 44px; margin-top:28px}
.fallen__cols p{font-size:19px; line-height:1.55}
.fallen__cols ul{list-style:none; margin-top:10px}
.fallen__cols a{display:inline-flex; align-items:center; gap:10px; min-height:44px; font-weight:700}
@media (min-width:760px){ .fallen__cols{grid-template-columns:repeat(2, minmax(0, 1fr))} .fallen__cols > div + div{padding-left:44px; border-left:1px dashed rgba(43,33,24,.3)} }

/* ---------- 16. Kraft footer ---------- */
.foot{position:relative; margin-top:clamp(56px, 7vw, 96px); padding:clamp(40px, 4.4vw, 60px) var(--gutter) 44px; background:var(--kraft); font-size:18px; line-height:1.55}
.foot::before{content:""; position:absolute; left:0; right:0; top:-11px; height:12px; background:linear-gradient(135deg, var(--kraft) 6px, transparent 6px) 0 0 / 12px 12px repeat-x, linear-gradient(-135deg, var(--kraft) 6px, transparent 6px) 0 0 / 12px 12px repeat-x}
.foot__in{max-width:var(--max); margin:0 auto; display:grid; gap:24px 48px}
.foot__name{margin-bottom:8px; font-family:var(--serif); font-size:clamp(26px, 2.6vw, 32px); font-weight:600; font-variation-settings:"SOFT" 100, "WONK" 1; line-height:1.15}
.foot__name + .foot__name{margin-top:-2px}
.foot__pin{display:inline-block; width:1.15em; height:1.15em; margin:0 .02em 0 -.2em; vertical-align:-.12em}
.working{display:inline-block; margin:2px 0 2px 8px; padding:1px 9px; border:1.5px dashed var(--ink); border-radius:3px; font-family:var(--sans); font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; vertical-align:middle; font-variation-settings:normal}
.foot p + p{margin-top:8px}
.foot .draft{font-weight:700}
.foot nav ul{list-style:none; display:flex; flex-wrap:wrap; gap:0 2px; margin-left:-10px}
.foot nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 10px; color:var(--ink); font-weight:700}
.foot nav a[aria-current]{text-decoration-thickness:3px; text-decoration-color:var(--red)}
.foot__base{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 32px; padding-top:16px; border-top:5px double var(--ink)}
.foot__base p + p{margin-top:0}
.foot__drafts{display:grid; gap:4px}
.foot__top{display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--ink); font-weight:700}
.foot__top .btn__arrow{transform:translateY(3px) rotate(-135deg)}
@media (min-width:900px){
  .foot__in{grid-template-columns:minmax(0, 1fr) auto; align-items:start}
  .foot nav ul{display:grid; grid-template-columns:repeat(3, max-content); column-gap:14px}
}

/* ---------- Wider layouts ---------- */
@media (min-width:980px){
  .hero{grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); align-items:start}
  .hero > .chapters{grid-column:1 / -1}
  .hero--home{grid-template-columns:minmax(0, 7fr) minmax(0, 5fr)}
  .hero--home .issue h1{font-size:clamp(40px, 3.8vw, 58px)}
}
@media (min-width:1200px){
  .hero > .chapters{grid-template-columns:minmax(220px, 16em) minmax(0, 1fr)}
}
@media (min-width:1024px) and (max-width:1279px){
  .cork{padding-left:24px; padding-right:24px}
  .notes{column-gap:22px}
  .card{padding-left:20px; padding-right:20px}
  .card__head{gap:14px}
  .chip{width:66px}
}
@media (min-width:640px){
  .chapters ol{grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-flow:column; grid-template-rows:repeat(var(--rows, 5), auto)}
  .ep-grid .chapters ol{grid-template-columns:minmax(0, 1fr); grid-auto-flow:row; grid-template-rows:none}
  .sheet-list{grid-template-columns:minmax(0, 1fr)}
}
@media (min-width:600px) and (max-width:860px){
  .mainnav ul{gap:2px}
  .mainnav a{padding:0 11px}
}
@media (min-width:640px) and (max-width:1023px){
  .ep-grid .chapters ol{grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-flow:column; grid-template-rows:repeat(var(--rows, 5), auto)}
}

/* ---------- Phones ---------- */
@media (max-width:599px){
  body{font-size:19px}
  .strip{font-size:17px}
  .weekline{flex-direction:column; align-items:center; font-size:17px}
  .weekline span + span::before{content:none}
  .ticket{grid-template-columns:minmax(0, 1fr); --notch-y:120px}
  .ticket__stub{flex-direction:row; justify-content:flex-start; height:120px; padding:0 24px; border-right:0; border-bottom:3px dotted var(--wall)}
  .ruled{height:36px}
  .taped-2::before{left:-10px}
  .taped-2::after{right:-10px}
  .ticket-wrap.pin-at-left::after{left:auto; right:34px}
  .mainnav a{padding:0 12px; font-size:18px}
  .card{padding-top:30px}
  .facts dd{font-size:19px}
  .lined{--lh:30px}
  .stickers--big .sticker{grid-template-columns:72px minmax(0, 1fr); gap:14px; padding:12px 14px}
  .stickers--big .sticker img{width:72px; height:72px}
  /* Long titles wrap on a phone: one ruled line per line of text instead of two */
  .lined h1, .lined h2:not(.lined__h), .lined .lined__title{font-size:28px; line-height:var(--lh); margin-top:0; margin-bottom:var(--lh)}
  .postcard__printed{margin-right:120px}
  .address{margin-top:96px}
  .postmark{display:none}
  .t-say{font-size:19px}
  .getlist .facts dd{font-size:19px}
  .mini-postcard .kicker, .mini-postcard h3{margin-right:84px}
  .mini-postcard .body{margin-right:0}
  .mini-postcard .stamp-art{top:22px; right:20px; width:72px; height:88px; padding:10px}
  .mini-postcard .stamp-art img{width:42px}
  .fallen{padding:40px 8px 0}
  .fallen__note{transform:rotate(-1.5deg)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{transition:none !important; animation:none !important}
  .note:hover .card, .note:focus-within .card, .poster-card:hover, .poster-card:focus-within, .filecard__poster:hover img{transform:none}
}

/* ---------- Print (issue pages): plain paper, every fact and source address ---------- */
@media print{
  @page{margin:16mm 14mm}
  html{scroll-behavior:auto}
  body{background:#fff; color:#000; font-size:11pt; line-height:1.45}
  .page{overflow:visible; min-height:0}
  a{color:#000}
  .skip, .strip, .mainnav, .lang, .tagline, .watch, .chapters, .teasers-section, .issue-nav, .btn, .issue__links, .foot nav, .foot__top, .foot::before, .stamp, .chip, .clipboard__clip, .clipboard__plowie, .pip, .dot{display:none !important}
  .masthead{padding:0 0 10pt; text-align:left}
  .wordmark{font-size:20pt}
  .wordmark__pin{display:none}
  .weekline{margin:6pt 0 0; padding:4pt 0; justify-content:flex-start; font-size:11pt}
  .board, .cork{width:auto; margin:0; padding:0; background:none; box-shadow:none; border-radius:0}
  .board + .board{margin-top:14pt}
  .cork > * + *{margin-top:16pt}
  .pinned::after, .pinned-2::before, .pinned-2::after, .taped::after, .taped-2::before, .taped-2::after, .note.backed::before, .slip::before, .note--flyer .card::after, .month::after{content:none !important; display:none !important}
  .sheet, .slip, .card, .clipboard, .ticket, .checked, .postcard, .lined, .stickers, .file, .month, .filecard{background:none !important; box-shadow:none !important; border-radius:0; filter:none}
  .slip{display:block; padding:0}
  .slip h2, .clipboard h2{font-size:16pt}
  .issue{padding:0}
  .issue h1{margin:2pt 0 8pt; font-size:24pt}
  .issue .kicker{padding-right:0}
  .issue .lede{font-size:11pt}
  .issue__foot{margin-top:8pt; padding-top:6pt}
  .count{background:none; padding:0}
  .filecard__poster{display:none}
  .filecard__now{padding:0; background:none; color:inherit}
  .hero{display:block}
  .notes{display:block}
  .note{display:block; margin:0 0 10pt; break-inside:avoid}
  .note--flyer .card{margin-bottom:0}
  .card{display:block; padding:8pt 10pt; border:1pt solid #888; transform:none !important}
  .card h3, .card h4, .ticket__body h3, .parade h3{font-size:14pt}
  .group-strip{display:block; padding:0; background:none; box-shadow:none; transform:none !important}
  .group-strip::before{content:none}
  .group-strip h3{font-size:15pt}
  .group-head{margin-bottom:8pt; break-inside:avoid; break-after:avoid}
  .board-after .section-head{break-inside:avoid; break-after:avoid}
  .board-group + .board-group{margin-top:14pt}
  .parade__town{font-size:12pt}
  .parade h3 + .card__head{margin-top:6pt}
  .parade .card__head + .card__head{margin-top:6pt; padding-top:6pt}
  .card__head{display:block}
  .tags{margin-top:6pt}
  .tags li{padding:0 6pt; border:1pt solid #000; font-size:9pt}
  .tags .is-free{background:none; color:#000; border-color:#000}
  .facts{gap:3pt; margin-top:6pt}
  .facts > div{display:grid; grid-template-columns:8.5em minmax(0, 1fr); column-gap:8pt; align-items:baseline}
  .facts dd{margin:0}
  .note--wide .facts, .note--full .facts{display:grid; grid-template-columns:minmax(0, 1fr); column-gap:14pt}
  .facts dt{font-size:8pt}
  /* Keep headings with what follows. Chromium gives up on avoid rules when too many apply,
     so these are few and targeted: the Remembrance intro, the clipboard and 'Pinned for later' stay whole. */
  .r-kicker, .remembrance h2, .r-lede{break-after:avoid}
  .r-lede{break-inside:avoid}
  #later{break-inside:avoid}
  .facts dd, .clip-note .facts dd, .card__more, .parade__where, .caution{font-size:10.5pt}
  .clip-note h3{font-size:13pt}
  .clip-note__label{font-size:8.5pt}
  .card__more{margin-top:6pt; padding-top:6pt}
  .card__foot{padding-top:6pt}
  .type, .alt-name{font-size:9pt}
  a.source, a.r-source{display:block; padding:2pt 0; min-height:0; font-size:9.5pt}
  a.source::after, a.r-source::after{content:" " attr(href); font-weight:400; font-size:8.5pt; word-break:break-all}
  .source__arrow{display:none}
  .remembrance{margin:14pt 0; padding:10pt 0; background:none; border-color:#000; break-inside:auto}
  .remembrance h2{font-size:18pt}
  .r-item{padding:8pt 0; break-inside:avoid; grid-template-columns:10em minmax(0, 1fr)}
  .r-item h3{font-size:13pt}
  .r-lede, .r-item p{font-size:10.5pt}
  .clipboard{padding:10pt; border:1pt solid #888; break-inside:avoid}
  .clip-notes{display:block; margin-top:8pt}
  .clip-notes > li{padding:0 !important; border:0 !important; margin-bottom:10pt; break-inside:avoid}
  .later-list{display:block}
  .later-list > li{display:block; margin-bottom:10pt; break-inside:avoid; filter:none}
  .ticket{display:block; -webkit-mask:none; mask:none; border:1pt solid #888}
  .ticket__stub{display:none}
  .ticket__body{padding:8pt 10pt}
  .caution{background:none; border-left:3pt solid #000; padding:4pt 8pt}
  .checked{display:block; padding:8pt 10pt; border:1pt solid #000; break-inside:avoid}
  .checked .checked__text{font-size:11pt}
  .foot{margin-top:16pt; padding:8pt 0 0; background:none; border-top:1pt solid #000; font-size:9.5pt}
  .foot__name{font-size:13pt}
  .foot__base{border-top:0; padding-top:4pt}
}