/* ============================================================
   KIMO'S KORNER — theme: THE NEWSLETTER
   Not a pastiche of a newspaper. This is the actual printed page
   Kimo has been mailing out since 1994, rebuilt as a website.

   Everything here is measured off the real scans:
     · paper is pure white  #FFFFFF   (sampled, not cream)
     · the answer box is electric highlighter  #FEFE06, hairline black rule
     · headings are a heavy slanted brush script  (Yellowtail ≈ the masthead)
     · body is Times  (Tinos is metrically Times)
     · everything sits in one narrow column, like a photocopied handout
     · the page carries faint photocopy artefacts — speckle, a soft edge
       shadow, and the grey stock stamp that sits on every real scan

   The restraint IS the design. Sunday Funnies is the loud parody; this is
   the quiet original it is parodying.
   ============================================================ */

html[data-theme="newsletter"] {
  --n-paper:  #FFFFFF;
  --n-ink:    #141414;
  --n-ink-2:  #4A4A4A;
  --n-ink-3:  #8A8A8A;
  --n-rule:   #141414;
  --n-hair:   #C9C9C9;
  --n-mark:   #FEFE06;          /* the highlighter, sampled off the scans */
  --n-mark-2: #FFF9A8;
  --n-desk:   #E9E7E1;          /* the desk the sheet is lying on */

  --n-serif:  "Tinos", Times, "Times New Roman", Georgia, serif;
  --n-script: "Yellowtail", "Brush Script MT", cursive;

  background: var(--n-desk);
  color-scheme: light;
}

html[data-theme="newsletter"] body {
  background: var(--n-desk);
  background-image: none;
  color: var(--n-ink);
  font-family: var(--n-serif);
  font-size: 17px;
  line-height: 1.5;
}

/* the sheet of paper, centred on the desk */
/* ONE continuous sheet. .home-desk is a child of .home-hero (the homepage is
   a single grid), so only the outer element gets paper + shadow — giving both
   of them a background broke the page into stacked cards with the desk
   showing through the seams. */
html[data-theme="newsletter"] .home-hero,
html[data-theme="newsletter"] .reading {
  max-width: 620px;
  margin: 0 auto;
  background: var(--n-paper);
  position: relative;
}
html[data-theme="newsletter"] .home-hero { padding: 30px 34px 26px; }
html[data-theme="newsletter"] .reading   { padding: 18px 26px 30px; }
html[data-theme="newsletter"] .home-desk {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none;
}

/* photocopy speckle — just enough that the white is not screen-flat */
html[data-theme="newsletter"] body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='0.05'/%3E%3C/svg%3E");
}
html[data-theme="newsletter"] .home-hero,
html[data-theme="newsletter"] .home-desk,
html[data-theme="newsletter"] .reading,
html[data-theme="newsletter"] .masthead { z-index: 1; }

/* the sheet's edge shadow */
html[data-theme="newsletter"] .home-hero { box-shadow: 0 0 0 1px rgba(0,0,0,0.07), 0 2px 16px rgba(0,0,0,0.11); }

/* ---- strip the comic furniture ------------------------------------ */
html[data-theme="newsletter"] .home-ribbon,
html[data-theme="newsletter"] .home-zig,
html[data-theme="newsletter"] .home-folio,
html[data-theme="newsletter"] .home-hero__bubble,
html[data-theme="newsletter"] .home-demo,
html[data-theme="newsletter"] .masthead__logo::before,
html[data-theme="newsletter"] .masthead__logo::after,
html[data-theme="newsletter"] .dogear__arrow,
html[data-theme="newsletter"] .home-cta__stamp,
html[data-theme="newsletter"] .home-cta__fine,
html[data-theme="newsletter"] .page__kicker-mark { display: none !important; }

/* ---- masthead: the script, not the logo art ------------------------ */
html[data-theme="newsletter"] .home-hero__logo,
html[data-theme="newsletter"] .home-hero .masthead__logo {
  background: none !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 0 !important; margin: 0 0 4px !important;
  display: flex; justify-content: center;
}
html[data-theme="newsletter"] .home-hero .masthead__logo img {
  max-height: 96px !important; width: auto; filter: none !important;
  mix-blend-mode: multiply;      /* sits on the paper like print, not a sticker */
}

html[data-theme="newsletter"] .home-hero__tagline {
  font-family: var(--n-script) !important;
  font-size: clamp(40px, 11vw, 62px) !important;
  font-weight: 400 !important; font-style: normal !important;
  line-height: 1.06 !important; letter-spacing: 0 !important;
  color: var(--n-ink) !important;
  text-align: center !important;
  margin: 2px 0 0 !important;
}
/* the script never carries the small print — that stays Times */
html[data-theme="newsletter"] .home-hero__tagline strong {
  font-family: var(--n-script) !important;
  font-size: 1em !important; font-weight: 400 !important;
  color: var(--n-ink) !important; background: none !important;
  -webkit-text-fill-color: currentColor;
}
html[data-theme="newsletter"] .home-hero__tagline::after {
  content: 'The monthly quiz from the GooD NewS · since 1994';
  display: block;
  font-family: var(--n-serif); font-size: 14px; font-style: italic;
  letter-spacing: 0.02em; color: var(--n-ink-2);
  margin-top: 12px; padding-bottom: 14px;
  border-bottom: 2px solid var(--n-rule);
}

/* ---- body copy: a photocopied handout ----------------------------- */
html[data-theme="newsletter"] .home-desk__grid { display: block; }
html[data-theme="newsletter"] .home-desk__lead {
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 18px 0 6px !important; margin: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-theme="newsletter"] .home-desk__lead p {
  font-family: var(--n-serif) !important;
  font-size: 17px !important; line-height: 1.58 !important;
  color: var(--n-ink) !important; margin-bottom: 14px !important;
}
html[data-theme="newsletter"] .home-desk__lead p:first-letter {
  font-size: inherit; float: none; margin: 0; color: inherit; font-family: inherit;
}
/* the highlighter, used exactly as a marker would be */
html[data-theme="newsletter"] .home-desk__lead strong,
html[data-theme="newsletter"] .home-desk__lead b,
html[data-theme="newsletter"] .home-note__txt b,
html[data-theme="newsletter"] .home-note__txt strong {
  color: var(--n-ink) !important; font-weight: 700 !important;
  background: linear-gradient(180deg, transparent 52%, var(--n-mark) 52%, var(--n-mark) 92%, transparent 92%);
  padding: 0 1px;
}
html[data-theme="newsletter"] .home-desk__sign {
  font-family: var(--n-script) !important; font-size: 26px !important;
  font-style: normal !important; color: var(--n-ink) !important;
  text-align: right; margin-top: 4px !important;
}

/* ---- the how-to list, set like the printed answer key -------------- */
html[data-theme="newsletter"] .home-notes {
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 0 !important;
  border-top: 1px solid var(--n-hair) !important;
  margin: 6px 0 18px !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-theme="newsletter"] .home-notes__head {
  position: static !important; transform: none !important;
  writing-mode: horizontal-tb !important; white-space: normal !important;
  width: auto !important; height: auto !important; left: auto !important; top: auto !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  font-family: var(--n-serif) !important;
  font-size: 15px !important; font-weight: 700 !important; font-style: italic !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: var(--n-ink) !important;
  padding: 14px 0 6px !important; margin: 0 !important; text-align: left !important;
}
html[data-theme="newsletter"] .home-note {
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; transform: none !important;
  padding: 3px 0 !important; margin: 0 !important;
  display: flex; gap: 10px; align-items: baseline;
}
html[data-theme="newsletter"] .home-note__n {
  width: auto !important; height: auto !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important;
  font-family: var(--n-serif) !important;
  font-size: 17px !important; font-weight: 400 !important;
  color: var(--n-ink) !important;
  display: inline !important;
}
html[data-theme="newsletter"] .home-note__n::after { content: '.'; }
html[data-theme="newsletter"] .home-note__txt {
  font-family: var(--n-serif) !important; font-size: 17px !important;
  color: var(--n-ink) !important; line-height: 1.5 !important;
}

/* ---- buttons: highlighter blocks with a hard rule ------------------ */
html[data-theme="newsletter"] .home-cta,
html[data-theme="newsletter"] .dogear {
  position: relative; display: block !important; width: 100%;
  background: var(--n-mark) !important;
  color: var(--n-ink) !important;
  border: 2px solid var(--n-rule) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 0 var(--n-rule) !important;
  padding: 14px 20px !important;
  font-family: var(--n-serif) !important;
  font-size: 19px !important; font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-align: center !important; text-decoration: none !important;
  transform: none !important; clip-path: none !important;
  margin: 6px 0 16px !important;
  transition: transform 0.1s, box-shadow 0.1s;
}
html[data-theme="newsletter"] .home-cta::before,
html[data-theme="newsletter"] .home-cta::after,
html[data-theme="newsletter"] .dogear::before,
html[data-theme="newsletter"] .dogear::after { display: none !important; }
html[data-theme="newsletter"] .home-cta:active,
html[data-theme="newsletter"] .dogear:active {
  transform: translate(3px, 3px) !important; box-shadow: 1px 1px 0 0 var(--n-rule) !important;
}
html[data-theme="newsletter"] .home-cta__big { display: none !important; }
html[data-theme="newsletter"] .home-cta__sub,
html[data-theme="newsletter"] .home-cta__arrow,
html[data-theme="newsletter"] .dogear__label {
  position: static !important; transform: none !important;
  writing-mode: horizontal-tb !important;
  font: inherit !important; color: var(--n-ink) !important; display: inline !important;
}
html[data-theme="newsletter"] .dogear {
  position: static !important; width: auto !important; height: auto !important;
  max-width: 620px; margin: 16px auto 0 !important;
}

/* secondary: plain ruled box */
html[data-theme="newsletter"] .home-hero__browse,
html[data-theme="newsletter"] .actions a,
html[data-theme="newsletter"] .actions button {
  display: block !important; width: 100%;
  background: var(--n-paper) !important; color: var(--n-ink) !important;
  border: 1px solid var(--n-rule) !important; border-radius: 0 !important;
  box-shadow: none !important; transform: none !important;
  font-family: var(--n-serif) !important; font-size: 16px !important;
  padding: 12px 18px !important; text-align: center !important;
  margin: 10px auto 0 !important; max-width: 620px;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* ---- the vault, set as a clipping ---------------------------------- */
html[data-theme="newsletter"] .home-hero__side--right {
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-top: 2px solid var(--n-rule) !important;
  border-bottom: 2px solid var(--n-rule) !important;
  border-radius: 0 !important; padding: 14px 0 !important; margin: 4px 0 16px !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  text-align: center;
}
html[data-theme="newsletter"] .home-hero__sidehead {
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 0 !important;
  font-family: var(--n-serif) !important; font-size: 13px !important;
  font-weight: 700 !important; font-style: italic !important;
  text-transform: none !important; letter-spacing: 0 !important;
  color: var(--n-ink-2) !important;
}
html[data-theme="newsletter"] .home-hero__sidehead::before,
html[data-theme="newsletter"] .home-hero__sidehead::after { display: none !important; }
html[data-theme="newsletter"] .home-hero__stat {
  font-family: var(--n-script) !important;
  font-size: 62px !important; line-height: 1 !important;
  color: var(--n-ink) !important; background: none !important;
  -webkit-text-fill-color: currentColor !important;
  margin: 4px 0 0 !important;
}
html[data-theme="newsletter"] .home-hero__statsub,
html[data-theme="newsletter"] .home-hero__statnote {
  font-family: var(--n-serif) !important; font-size: 14px !important;
  font-style: normal !important; color: var(--n-ink-2) !important;
}

/* ============================================================
   QUIZ PAGE
   ============================================================ */
html[data-theme="newsletter"] .masthead {
  background: var(--n-paper) !important;
  border: 0 !important; border-bottom: 2px solid var(--n-rule) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  position: sticky; top: 0; z-index: 40;
  padding: 8px 26px !important;
}
html[data-theme="newsletter"] .masthead__inner {
  max-width: 620px; margin-inline: auto;
  display: flex; align-items: center; gap: 12px;
}
html[data-theme="newsletter"] .masthead .masthead__logo {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
}
html[data-theme="newsletter"] .masthead .masthead__logo img {
  max-height: 34px !important; mix-blend-mode: multiply;
}
html[data-theme="newsletter"] .masthead__tagline { display: none !important; }

html[data-theme="newsletter"] .dateline {
  max-width: 620px; margin: 0 auto; padding: 16px 26px 8px;
  background: var(--n-paper);
  font-family: var(--n-script) !important;
  font-size: 38px !important; font-weight: 400 !important;
  letter-spacing: 0 !important; color: var(--n-ink) !important;
  text-align: center !important; border: 0 !important;
}
html[data-theme="newsletter"] .dateline__item {
  border: 0 !important; background: none !important;
  font: inherit !important; color: inherit !important; letter-spacing: inherit !important;
}

html[data-theme="newsletter"] .archive {
  max-width: 620px; margin-inline: auto; padding: 0 26px 10px;
  background: var(--n-paper) !important; border: 0 !important;
}
html[data-theme="newsletter"] .archive__label {
  font-family: var(--n-serif) !important; font-size: 13px !important;
  font-style: italic !important; text-transform: none !important;
  letter-spacing: 0 !important; color: var(--n-ink-2) !important;
}
html[data-theme="newsletter"] .archive__picker,
html[data-theme="newsletter"] .archive select {
  font-family: var(--n-serif) !important; font-size: 16px !important;
  background: var(--n-paper) !important; color: var(--n-ink) !important;
  border: 1px solid var(--n-rule) !important; border-radius: 0 !important;
  padding: 10px 12px !important; box-shadow: none !important;
}

/* the scan sits on the sheet with a hairline rule, like a pasted-in clipping */
html[data-theme="newsletter"] .stage,
html[data-theme="newsletter"] .leaf,
html[data-theme="newsletter"] .face,
html[data-theme="newsletter"] .page {
  background: var(--n-paper) !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-theme="newsletter"] .page { padding: 0 !important; }
html[data-theme="newsletter"] .page__scan {
  border: 1px solid var(--n-hair) !important; border-radius: 0 !important;
}
html[data-theme="newsletter"] .page__kicker {
  font-family: var(--n-serif) !important; font-size: 13px !important;
  font-weight: 700 !important; font-style: italic !important;
  text-transform: none !important; letter-spacing: 0 !important;
  color: var(--n-ink-2) !important; text-align: center !important;
  padding: 0 0 10px !important; border: 0 !important; background: none !important;
}
html[data-theme="newsletter"] .page__scan-wrap > button,
html[data-theme="newsletter"] .page__fs-hint {
  background: var(--n-mark) !important; color: var(--n-ink) !important;
  border: 1px solid var(--n-rule) !important; border-radius: 0 !important;
  font-family: var(--n-serif) !important; font-size: 12px !important;
  box-shadow: none !important;
}

/* notepad: a ruled worksheet */
html[data-theme="newsletter"] .notepad,
html[data-theme="newsletter"] .scoreboard {
  background: var(--n-paper) !important;
  border: 0 !important; border-top: 2px solid var(--n-rule) !important;
  border-radius: 0 !important; box-shadow: none !important;
  padding: 0 0 8px !important; margin-top: 20px !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-theme="newsletter"] .notepad__head,
html[data-theme="newsletter"] .notepad__title,
html[data-theme="newsletter"] .scoreboard :is(h1,h2,h3,h4) {
  background: none !important; border: 0 !important; box-shadow: none !important;
  font-family: var(--n-serif) !important; font-size: 15px !important;
  font-weight: 700 !important; font-style: italic !important;
  text-transform: none !important; letter-spacing: 0 !important;
  color: var(--n-ink) !important;
  padding: 12px 0 6px !important; margin: 0 !important; text-align: left !important;
}
html[data-theme="newsletter"] .notepad__hint {
  font-family: var(--n-serif) !important; font-size: 14px !important;
  font-style: italic !important; color: var(--n-ink-2) !important;
  padding: 4px 0 10px !important; margin: 0 !important;
}
html[data-theme="newsletter"] .notepad__clear {
  background: none !important; color: var(--n-ink) !important;
  border: 1px solid var(--n-rule) !important; border-radius: 0 !important;
  font-family: var(--n-serif) !important; font-size: 12px !important;
  text-transform: none !important; padding: 5px 11px !important; box-shadow: none !important;
}
html[data-theme="newsletter"] .notepad textarea,
html[data-theme="newsletter"] .notepad input {
  background: none !important; color: var(--n-ink) !important;
  border: 0 !important; border-bottom: 1px solid var(--n-hair) !important;
  border-radius: 0 !important;
  font-family: var(--n-serif) !important; font-size: 16px !important;
  padding: 10px 2px !important;
}
html[data-theme="newsletter"] .notepad textarea::placeholder,
html[data-theme="newsletter"] .notepad input::placeholder {
  color: var(--n-ink-3) !important; font-style: italic;
}
html[data-theme="newsletter"] .scoreboard,
html[data-theme="newsletter"] .scoreboard * {
  font-family: var(--n-serif) !important; color: var(--n-ink-2) !important;
}
html[data-theme="newsletter"] .scoreboard b,
html[data-theme="newsletter"] .scoreboard strong { color: var(--n-ink) !important; }

/* stack the two-column reading layout AND release the notepad's fixed
   300px flex track — otherwise it survives as an orphaned narrow strip */
html[data-theme="newsletter"] .reading__layout { display: block; }
html[data-theme="newsletter"] .reading__main { max-width: none; }
html[data-theme="newsletter"] .notepad,
html[data-theme="newsletter"] .scoreboard {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  position: static !important;
}
/* the archive nav reads as one row, not a wide button beside a tiny one */
html[data-theme="newsletter"] .archive {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
html[data-theme="newsletter"] .archive__center { flex: 1 1 auto; text-align: center; }
html[data-theme="newsletter"] .archive__btn { flex: 0 0 auto; width: auto !important; }
/* the scan can never spill its card */
html[data-theme="newsletter"] .page__scan { max-width: 100% !important; }
/* no overflow:hidden here — max-width already stops the spill, and clipping
   cut the photo off the right edge of the wider answer sheets */

/* ---- colophon: the stock stamp every real scan carries ------------- */
html[data-theme="newsletter"] .colophon,
html[data-theme="newsletter"] .home-foot {
  max-width: 620px; margin: 0 auto !important;
  background: var(--n-paper) !important;
  border-top: 2px solid var(--n-rule) !important;
  padding: 16px 34px 26px !important;
  box-sizing: border-box;
  text-align: center !important;
  font-family: var(--n-serif) !important; font-size: 13.5px !important;
  color: var(--n-ink-2) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.10);
}
html[data-theme="newsletter"] .colophon *,
html[data-theme="newsletter"] .home-foot * {
  font-family: var(--n-serif) !important; font-style: normal !important;
  color: var(--n-ink-2) !important; letter-spacing: 0 !important;
}
html[data-theme="newsletter"] .colophon strong,
html[data-theme="newsletter"] .home-foot strong { color: var(--n-ink) !important; font-weight: 700 !important; }
html[data-theme="newsletter"] .colophon__rule { border: 0 !important; background: none !important; height: 0 !important; }

html[data-theme="newsletter"] .kk-setbar { background: var(--n-desk); }
html[data-theme="newsletter"] .kk-setbtn {
  background: var(--n-paper) !important;
  border: 1px solid var(--n-rule) !important;
  border-radius: 0 !important;
  font-family: var(--n-serif) !important;
  color: var(--n-ink) !important; box-shadow: none !important;
}

/* ---- one sweep so no comic type survives -------------------------- */
html[data-theme="newsletter"] .home-hero *,
html[data-theme="newsletter"] .home-desk *,
html[data-theme="newsletter"] .masthead *,
html[data-theme="newsletter"] .archive *,
html[data-theme="newsletter"] .notepad *,
html[data-theme="newsletter"] .scoreboard *,
html[data-theme="newsletter"] .actions * {
  text-shadow: none !important;
}

/* ---- pieces the first pass missed --------------------------------- */

/* the submit block is part of the worksheet, not a comic panel */
html[data-theme="newsletter"] .submit,
html[data-theme="newsletter"] .submit * {
  font-family: var(--n-serif) !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}
html[data-theme="newsletter"] .submit {
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important;
}
html[data-theme="newsletter"] .submit__name {
  background: none !important; color: var(--n-ink) !important;
  border: 0 !important; border-bottom: 1px solid var(--n-hair) !important;
  border-radius: 0 !important; font-size: 16px !important; padding: 10px 2px !important;
}
html[data-theme="newsletter"] .submit__name::placeholder { color: var(--n-ink-3) !important; font-style: italic; }
/* the one filled action on the sheet — highlighter, like the answer box */
html[data-theme="newsletter"] .submit__btn {
  background: var(--n-mark) !important;
  color: var(--n-ink) !important;
  border: 2px solid var(--n-rule) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 0 var(--n-rule) !important;
  font-family: var(--n-serif) !important;
  font-size: 17px !important; font-weight: 700 !important;
  text-transform: none !important;
  padding: 12px 20px !important;
  transition: transform 0.1s, box-shadow 0.1s;
}
html[data-theme="newsletter"] .submit__btn:active {
  transform: translate(3px, 3px) !important; box-shadow: 1px 1px 0 0 var(--n-rule) !important;
}
html[data-theme="newsletter"] .submit__status { color: var(--n-ink-2) !important; font-style: italic !important; }

/* the zoom pill reads as a rubber stamp, not a comic badge */
html[data-theme="newsletter"] .btn--source,
html[data-theme="newsletter"] .page__scan-wrap .btn,
html[data-theme="newsletter"] .page__scan-wrap button {
  background: var(--n-mark) !important;
  color: var(--n-ink) !important;
  border: 1px solid var(--n-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--n-serif) !important;
  font-size: 12px !important; font-weight: 700 !important;
  text-transform: none !important; letter-spacing: 0 !important;
}

/* older / newer are plain ruled boxes */
html[data-theme="newsletter"] .archive__btn {
  background: var(--n-paper) !important; color: var(--n-ink) !important;
  border: 1px solid var(--n-rule) !important; border-radius: 0 !important;
  box-shadow: none !important; transform: none !important;
  font-family: var(--n-serif) !important; font-size: 15px !important;
  font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important;
  padding: 9px 16px !important;
}
html[data-theme="newsletter"] .archive__btn[disabled] { color: var(--n-ink-3) !important; border-color: var(--n-hair) !important; }

/* the whole reading column is one sheet — no desk showing between bands */
html[data-theme="newsletter"] .archive,
html[data-theme="newsletter"] .dateline,
html[data-theme="newsletter"] .reading,
html[data-theme="newsletter"] .colophon {
  background: var(--n-paper) !important;
}
html[data-theme="newsletter"] .reading__layout,
html[data-theme="newsletter"] .reading__main,
html[data-theme="newsletter"] .stage { background: var(--n-paper) !important; }

/* full-screen reader inherits the paper */
html[data-theme="newsletter"] .fs { background: var(--n-desk) !important; }
html[data-theme="newsletter"] .fs__bar { background: var(--n-paper) !important; border-top: 2px solid var(--n-rule) !important; }
html[data-theme="newsletter"] .fs__input {
  font-family: var(--n-serif) !important; font-size: 16px !important;
  border: 1px solid var(--n-rule) !important; border-radius: 0 !important;
  background: var(--n-paper) !important; color: var(--n-ink) !important;
}
html[data-theme="newsletter"] .fs__close,
html[data-theme="newsletter"] .fs__next,
html[data-theme="newsletter"] .fs__nav button {
  font-family: var(--n-serif) !important;
  background: var(--n-mark) !important; color: var(--n-ink) !important;
  border: 1px solid var(--n-rule) !important; border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-theme="newsletter"] .fs__count,
html[data-theme="newsletter"] .fs__num { font-family: var(--n-serif) !important; color: var(--n-ink-2) !important; }

/* The "tap for full screen" hint is a ::after on the wrap, not a button —
   which is why the button selectors above never reached it. */
html[data-theme="newsletter"] .page__scan-wrap::after {
  background: var(--n-mark) !important;
  color: var(--n-ink) !important;
  border: 1px solid var(--n-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--n-serif) !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0 !important; text-transform: none !important;
}

/* On a phone the sheet is the full width, so any gap between sections shows
   a stripe of desk and breaks the illusion of one page. Paper goes edge to
   edge there; the desk only appears once the viewport is wider than the
   sheet, which is the only place it reads as a sheet lying on something. */
html[data-theme="newsletter"] body { background: var(--n-paper); }
@media (min-width: 680px) {
  html[data-theme="newsletter"] body { background: var(--n-desk); }
}

/* ============================================================
   COLOUR PASS
   The first cut was black type on white and one yellow — accurate to a
   blank photocopy, and far too quiet to look at. A real Kimo's Korner
   does not stay blank: it gets marked up. Red pen, blue biro, a second
   and third highlighter, a stamp, a staple. That is where the colour
   comes from — annotation, not decoration.
   ============================================================ */

html[data-theme="newsletter"] {
  --n-red:    #C8362B;   /* the masthead red — used as the editor's pen */
  --n-blue:   #1F4E8C;   /* the masthead blue — used as biro */
  --n-pink:   #FF9BD2;   /* second highlighter */
  --n-green:  #9BE86B;   /* third highlighter */
  --n-stamp:  #B3403A;
}

/* ---- the nameplate gets its double rule and issue line ------------- */
html[data-theme="newsletter"] .home-hero {
  border-top: 9px solid var(--n-red) !important;
}
html[data-theme="newsletter"] .home-hero__tagline::after {
  border-bottom: 3px double var(--n-rule);
  padding-bottom: 10px;
}
/* VOL / NO / PRICE strip, the way a real masthead carries it */
/* ONLY the inner .masthead__logo — it is nested inside .home-hero__logo, so
   targeting both printed the strip twice, on top of itself. */
html[data-theme="newsletter"] .home-hero .masthead__logo::after {
  content: 'VOL. XXXII · TRIVIA, TUNES & TOTAL NONSENSE · PRICE: ONE SMILE';
  display: block !important;
  position: static !important;
  width: 100%; text-align: center;
  font-family: var(--n-serif); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--n-ink-2);
  border-top: 1px solid var(--n-rule);
  border-bottom: 1px solid var(--n-rule);
  padding: 5px 0; margin-top: 12px;
  background: none !important; box-shadow: none !important;
}

/* ---- the letter reads like a marked-up page ----------------------- */
/* rotating highlighter colours so the page is not one flat yellow */
html[data-theme="newsletter"] .home-note:nth-child(3n) .home-note__txt b,
html[data-theme="newsletter"] .home-note:nth-child(3n) .home-note__txt strong {
  background: linear-gradient(180deg, transparent 52%, var(--n-pink) 52%, var(--n-pink) 92%, transparent 92%) !important;
}
html[data-theme="newsletter"] .home-note:nth-child(4n) .home-note__txt b,
html[data-theme="newsletter"] .home-note:nth-child(4n) .home-note__txt strong {
  background: linear-gradient(180deg, transparent 52%, var(--n-green) 52%, var(--n-green) 92%, transparent 92%) !important;
}

/* the numbers become red-pen ticks in the margin */
html[data-theme="newsletter"] .home-note__n {
  color: var(--n-red) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

/* Kimo signs off in blue biro */
html[data-theme="newsletter"] .home-desk__sign {
  color: var(--n-blue) !important;
  transform: rotate(-2.2deg);
  display: inline-block;
  float: right;
}

/* a red-pen circle around the headline of the how-to list */
html[data-theme="newsletter"] .home-notes__head {
  position: relative !important;
  color: var(--n-red) !important;
  display: inline-block !important;
}
html[data-theme="newsletter"] .home-notes__head::after {
  content: '';
  position: absolute; inset: -7px -14px -5px -12px;
  border: 2.5px solid var(--n-red);
  border-radius: 62% 38% 55% 45% / 58% 46% 54% 42%;
  opacity: 0.75;
  pointer-events: none;
}

/* ---- the stock stamp, angled, like every real scan carries --------- */
html[data-theme="newsletter"] .home-hero::after {
  content: 'REPRINTED BY PERMISSION';
  position: absolute; top: auto; bottom: 232px; right: 2px;
  font-family: var(--n-serif); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--n-stamp);
  border: 2px solid var(--n-stamp);
  padding: 5px 9px;
  transform: rotate(-9deg);
  opacity: 0.34;
  pointer-events: none;
}

/* ---- a staple, top-left of the sheet ------------------------------- */
html[data-theme="newsletter"] .home-hero::before {
  content: '';
  position: absolute; top: 16px; left: 18px;
  width: 22px; height: 5px;
  background: linear-gradient(180deg, #B9B9B9, #7C7C7C 55%, #9C9C9C);
  border-radius: 1px;
  transform: rotate(-38deg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
  pointer-events: none;
}

/* ---- buttons: keep the yellow, add a red-pen alternative ---------- */
html[data-theme="newsletter"] .home-cta {
  background: var(--n-mark) !important;
  border-color: var(--n-rule) !important;
}
html[data-theme="newsletter"] .submit__btn { background: var(--n-green) !important; }
html[data-theme="newsletter"] .dogear { background: var(--n-pink) !important; }

/* ---- the vault reads as a boxed advertisement --------------------- */
html[data-theme="newsletter"] .home-hero__side--right {
  border: 3px double var(--n-rule) !important;
  padding: 16px 18px !important;
  background:
    repeating-linear-gradient(-45deg, rgba(200,54,43,0.05) 0 8px, transparent 8px 16px) !important;
}
html[data-theme="newsletter"] .home-hero__stat { color: var(--n-red) !important; }
html[data-theme="newsletter"] .home-hero__sidehead { color: var(--n-blue) !important; }

/* ---- quiz page accents -------------------------------------------- */
html[data-theme="newsletter"] .masthead { border-bottom: 4px double var(--n-rule) !important; }
html[data-theme="newsletter"] .dateline { color: var(--n-red) !important; }
html[data-theme="newsletter"] .page__kicker { color: var(--n-blue) !important; }
html[data-theme="newsletter"] .notepad__head,
html[data-theme="newsletter"] .notepad__title { color: var(--n-red) !important; }
html[data-theme="newsletter"] .scoreboard :is(h1,h2,h3,h4) { color: var(--n-blue) !important; }
html[data-theme="newsletter"] .notepad { border-top: 3px double var(--n-rule) !important; }

/* answers side gets a coloured rule so the two sides are distinguishable */
html[data-theme="newsletter"] body.is-answers .masthead { border-bottom-color: var(--n-red) !important; }

/* GooD NewS keeps its red wherever it appears in running text */
html[data-theme="newsletter"] .home-foot strong,
html[data-theme="newsletter"] .colophon strong { color: var(--n-red) !important; }