/* gaz-reader.css -- The Epic Gazette reading layer. 2026-09-16.
 *
 * Three jobs, one file, loaded on every page of the paper:
 *
 *   1. READABILITY -- the old-paper look stays; the spots readers squinted at
 *      get darker ink, ruled columns between text blocks, and calmer small
 *      type. Nothing structural moves.
 *   2. SECTION NAMEPLATES -- each section of the paper gets its own accent
 *      color on rules, kickers and active tabs, the way a real paper gives
 *      Sports its own flag. Set by gaz-reader.js via data-gazsec on <html>.
 *   3. READING TOOLS -- the accessibility panel: type size, high contrast,
 *      easy-read spacing, reading ruler, magnifier, read-aloud, calm motion.
 */

/* ---------- section nameplates ------------------------------------------ */
:root { --gaz-sec: #c79a46; --gaz-sec-ink: #171512; }
html[data-gazsec="business"]       { --gaz-sec: #2e4f6b; }
html[data-gazsec="events"]         { --gaz-sec: #27517a; }
html[data-gazsec="combos"]         { --gaz-sec: #a06a00; }
html[data-gazsec="deals"]          { --gaz-sec: #1c7a3d; }
html[data-gazsec="sports-schools"] { --gaz-sec: #7f1d1d; }
html[data-gazsec="rec"]            { --gaz-sec: #4a6b2a; }
html[data-gazsec="public-record"]  { --gaz-sec: #4a4e57; }
html[data-gazsec="classifieds"]    { --gaz-sec: #6b4a2a; }
html[data-gazsec="articles"]       { --gaz-sec: #7f1d1d; }
html[data-gazsec="town"]           { --gaz-sec: #315a4b; }

/* Section accent touches: the hero rule and the active tab take the
   section's color, like a section flag in a printed paper. */
html[data-gazsec] .cb-hero h1,
html[data-gazsec] .dl-hero h1,
html[data-gazsec] .rc-hero h1,
html[data-gazsec] .bz-hero h1 { border-bottom: 4px solid var(--gaz-sec); display: inline-block; padding-bottom: 6px; }
html[data-gazsec] .cb-hero, html[data-gazsec] .dl-hero, html[data-gazsec] .rc-hero { border-bottom-color: var(--gaz-sec); }
html[data-gazsec] .gzc-tag.active, html[data-gazsec] .dl-tag.active, html[data-gazsec] .rc-tag.active {
  background: var(--gaz-sec); border-color: var(--gaz-sec); color: #f7efdc;
}
html[data-gazsec] .dl-board a.current, html[data-gazsec] .cb-board a.current, html[data-gazsec] .rc-board a.current {
  border-color: var(--gaz-sec); box-shadow: 3px 3px 0 var(--gaz-sec);
}
html[data-gazsec] .desk { color: var(--gaz-sec); }

/* ---------- readability pass -------------------------------------------- */
/* Small gray type was the squint spot -- darken the recurring offenders. */
.dl-src, .cb-note, .dl-note, .cb-event .when + span,
.cb-stop .price, .dl-conds, .views, .bz-card .tag, .article-card .meta {
  color: #5f5748 !important;
}
/* Inactive pills sat at 40% opacity -- readable on paper white but muddy on
   the cream stock. 60% keeps them clearly secondary without vanishing. */
.gzc-tag, .dl-tag { opacity: .62; }
.gzc-tag:hover, .dl-tag:hover { opacity: .85; }
.gzc-tag.active, .dl-tag.active { opacity: 1; }
/* Dark board tiles: the note line under town names was paper-cream on near-
   black at small size -- brighten it a touch. */
.dl-board-note, .cb-board-note { color: #e2d7bd; }

/* Ruled columns -- a real paper separates its columns with a hairline rule.
   Applied to the multi-column grids across the paper's page types. Only the
   2nd+ column is ruled, and only when the grid is actually side-by-side. */
@media (min-width: 821px) {
  .cb-grid > * + *,
  .dl-grid > * + *,
  .bz-grid > * + *,
  .facts > .fact + .fact,
  .front-teasers > * + *,
  .dir-grid > * + * {
    border-left: 1px solid rgba(23, 21, 18, .28);
    padding-left: 18px;
  }
  /* ...but if the child already draws its own card border, skip the rule so
     columns don't double-stripe. */
  .facts > .fact + .fact,
  .front-teasers > .article-card + .article-card,
  .dir-grid > * + * { border-left: none; padding-left: 0; }
  .facts > .fact:nth-child(even) { border-left: 1px solid rgba(23,21,18,.28); }
}

/* ---------- the elegant masthead (Captain 2026-09-23) ---------------------
   Replaces the old .mast strip + eight-tab .paper-tabs ribbon on every
   inner page: a serif nameplate, a thin double rule, and a folio line
   with the date, the current section, and two fold-open menus. */
.gzm {
  margin: 0 auto; padding: 12px 18px 0;
  max-width: 1100px;
}
/* 2026-09-26 (Captain): nameplate is a compact folio now -- flag, tagline
   and date share one line; menus + section ride the rule underneath. The
   page's own hero is the first thing that lands, not a giant flag. */
.gzm-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 4px 16px; flex-wrap: wrap;
}
.gzm-name {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font: 900 clamp(1.4rem, 3.2vw, 1.9rem)/1 Georgia, 'Times New Roman', serif;
  color: var(--ink, #1f1b16); letter-spacing: -.01em;
}
/* 2026-09-29 (Captain): the mark rides the compact nameplate too -- a back
   page should still carry the paper's face, not just words. */
.gzm-mark {
  height: clamp(38px, 4.6vw, 52px); width: auto; display: block;
}
.gzm-name:hover { color: var(--accent, #7f1d1d); }
.gzm-sub {
  font: 700 .6rem 'Courier New', monospace;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted, #5b554d);
}
.gzm-date {
  margin-left: auto;
  font: 700 .68rem 'Courier New', monospace;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink, #1f1b16);
}
.gzm-folio {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px 16px; flex-wrap: wrap;
  margin-top: 8px; padding: 5px 2px;
  border-top: 3px double var(--ink, #1f1b16);
  border-bottom: 1px solid var(--ink, #1f1b16);
  font: 700 .68rem 'Courier New', monospace;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink, #1f1b16);
}
.gzm-folio-l { text-align: left; }
.gzm-folio-r { text-align: right; }
.gzm-folio-c { display: flex; gap: 22px; }
.gzm-sec { color: var(--accent, #7f1d1d); letter-spacing: .12em; }

/* the fold-open menus in the folio */
.gzm-pop { position: relative; display: inline-block; }
.gzm-pop summary {
  list-style: none; cursor: pointer; padding: 2px 4px;
}
.gzm-pop summary::-webkit-details-marker { display: none; }
.gzm-pop summary::after { content: ' \25BE'; font-size: .85em; }
.gzm-pop summary:hover, .gzm-pop[open] summary { color: var(--accent, #7f1d1d); }
.gzm-panel {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%); z-index: 2147483001;
  display: flex; flex-direction: column; min-width: 210px;
  background: #f7f0df; border: 2px solid #171512;
  box-shadow: 5px 6px 0 rgba(23, 19, 15, .3);
  padding: 8px 14px; text-align: left;
  font: 600 .82rem Arial, Helvetica, sans-serif;
  text-transform: none; letter-spacing: 0;
}
.gzm-panel a {
  color: #241f16; text-decoration: none;
  padding: 5px 4px; border-bottom: 1px dotted #b9ab8e; white-space: nowrap;
}
.gzm-panel a:hover { color: var(--accent, #7f1d1d); }
.gzm-panel a.cur { color: var(--accent, #7f1d1d); font-weight: 800; }
.gzm-panel a:last-of-type { border-bottom: 0; }
.gzm-panel-k {
  margin: 8px 0 2px; padding-top: 7px; border-top: 1px solid #b9ab8e;
  font: 700 .62rem 'Courier New', monospace; letter-spacing: .18em;
  text-transform: uppercase; color: #6d6151;
}
.gzm-ziprow { display: flex; gap: 6px; padding-top: 8px; }

/* 2026-09-26 (mobile): the folio menus center on their summary -- "The Zips"
   sits near the right edge, so its panel overflowed the viewport. On phones
   drop the pop positioning and let the panel span the folio as a drawer. */
@media (max-width: 700px) {
  .gzm-folio { position: relative; }
  .gzm-pop { position: static; }
  .gzm-panel { left: 0; right: 0; transform: none; min-width: 0; }
  .gzm-panel a { white-space: normal; }
}
.gzm-ziprow input {
  width: 70px; padding: 4px 6px; font: 700 .8rem 'Courier New', monospace;
  border: 1px solid #171512; background: #fffdf7; color: #241f16;
}
.gzm-ziprow button {
  padding: 4px 10px; font: 700 .72rem Arial, sans-serif;
  background: #171512; color: #f2ead5; border: 1px solid #171512; cursor: pointer;
}
.gzm-ziprow button:hover { background: var(--accent, #7f1d1d); }
@media (max-width: 640px) {
  .gzm { padding-top: 10px; }
  .gzm-top { justify-content: center; text-align: center; }
  .gzm-date { margin-left: 0; width: 100%; }
  .gzm-folio { justify-content: center; }
  .gzm-folio-l { width: 100%; text-align: center; }
  .gzm-folio-r { width: 100%; text-align: center; }
}

/* ---------- reading-progress bar ---------------------------------------- */
#gazProgress {
  position: fixed; top: 0; left: 0; height: 4px; width: 0;
  background: var(--gaz-sec, #c79a46); z-index: 2147483000;
  transition: width .08s linear;
}

/* ---------- footer cleanup (Captain 2026-09-23) ---------------------------
   The injected paper menu is gone from gaz-reader.js entirely, and the dark
   EAS brand bar comes off every gazette page -- the fold-open directory
   carries the navigation now. This sheet only loads on gaz pages, so the
   brand bar stays put everywhere else on eas-site. */
.eas-brand-bar { display: none !important; }

/* ---------- reading tools widget ---------------------------------------- */
/* 2026-09-17: the pill used to park bottom-right on top of Edna's dock
   (.edna-dock, right:16px bottom:16px in news-platform.css) -- she lived
   under it on every page. The badge moved to the bottom-LEFT corner so the
   two widgets each own a side, and it became a round brass access plate
   instead of a text pill: same 3px ink border / offset shadow / hover-lift
   language as .edna-face, so they read as a matched pair across the page.
   The glyph is a toolbox -- utilities for anybody, drawn as strokes so it
   prints like the rest of the paper's ink-and-brass hardware. */
#gazToolsBtn {
  position: fixed; left: 14px; bottom: 14px; z-index: 2147483001;
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
  color: #17130f; cursor: pointer;
  border: 3px solid #17130f; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #f6dc76 0%, #e3b126 55%, #a87f07 100%);
  box-shadow: 4px 5px 0 rgba(23,19,15,.4), inset 0 0 0 2px rgba(255,246,214,.55), inset 0 -7px 11px rgba(87,63,8,.35);
  transition: transform .16s ease, box-shadow .16s ease;
}
#gazToolsBtn svg { display: block; }
#gazToolsBtn:hover { transform: translate(-2px,-2px); box-shadow: 6px 7px 0 rgba(23,19,15,.45), inset 0 0 0 2px rgba(255,246,214,.55), inset 0 -7px 11px rgba(87,63,8,.35); }
#gazToolsBtn:focus-visible { outline: 3px solid #7f1d1d; outline-offset: 3px; }
#gazTools {
  position: fixed; left: 14px; bottom: 80px; z-index: 2147483001; width: min(320px, calc(100vw - 28px));
  background: #fffdf7; color: #241f16; border: 2px solid #171512; border-radius: 10px;
  box-shadow: 6px 6px 0 rgba(0,0,0,.28); padding: 14px; font-family: Arial, Helvetica, sans-serif;
}
/* The badge parks bottom-left; keep the sticky savings bar's first label
   on /deals/ out from under it. */
.dl-stackbar { padding-left: 76px; }
#gazTools[hidden] { display: none; }
#gazTools h2 { font: 800 .95rem/1.2 Georgia, serif; margin: 0 0 4px; }
#gazTools .gt-sub { font-size:.75rem; color: #5f5748; margin: 0 0 10px; }
#gazTools .gt-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
#gazTools .gt-lab { font-size:.75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6b6355; width: 100%; }
#gazTools button {
  font: 700 .76rem/1 Arial, sans-serif; padding: 8px 10px; border: 1.5px solid #171512;
  background: #fff; color: #171512; border-radius: 6px; cursor: pointer;
}
#gazTools button:hover { background: #f0e9d6; }
#gazTools button[aria-pressed="true"] { background: #171512; color: #f2ead5; }
#gazTools .gt-note { font-size:.75rem; color: #6b6355; margin-top: 8px; line-height: 1.4; }

/* reader state classes -- set on <html> by gaz-reader.js, persisted */
html.gaz-contrast body { background: #fff !important; color: #000 !important; }
html.gaz-contrast .dl-card, html.gaz-contrast .cb-panel, html.gaz-contrast .cb-bundle,
html.gaz-contrast .fact, html.gaz-contrast .bz-dir-card, html.gaz-contrast .article-card,
html.gaz-contrast #gazTools { background: #fff !important; }
html.gaz-contrast .dl-src, html.gaz-contrast .cb-note, html.gaz-contrast .dl-note,
html.gaz-contrast .dl-conds, html.gaz-contrast .cb-stop .price, html.gaz-contrast .fact p { color: #333 !important; }
html.gaz-easy body { letter-spacing: .04em; word-spacing: .12em; }
html.gaz-easy p, html.gaz-easy li { font-family: Verdana, Arial, sans-serif; line-height: 1.9; }
html.gaz-calm * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* reading ruler -- a soft band that follows the pointer line */
#gazRuler {
  position: fixed; left: 0; right: 0; height: 2.4em; pointer-events: none;
  border-top: 1px solid rgba(23,21,18,.5); border-bottom: 1px solid rgba(23,21,18,.5);
  background: rgba(199, 154, 70, .10); z-index: 2147482999; display: none;
}
html.gaz-ruler-on #gazRuler { display: block; }

/* magnifier lens -- enlarges the TEXT under the pointer, newspaper-loupe style */
#gazLens {
  position: fixed; width: 240px; min-height: 60px; max-height: 180px; overflow: hidden;
  border: 3px solid #171512; border-radius: 8px; background: #fffbef; color: #171512;
  box-shadow: 0 8px 30px rgba(0,0,0,.35); padding: 10px 12px; z-index: 2147483002;
  font-family: Georgia, serif; font-size: 1.35rem; line-height: 1.5; display: none; pointer-events: none;
}
#gazLens .lz-tag { font: 800 .75rem/1 Arial, sans-serif; letter-spacing: .14em; color: #7f1d1d; text-transform: uppercase; display: block; margin-bottom: 4px; }
html.gaz-lens-on #gazLens { display: block; }

/* body text scale steps driven by A-/A+ */
html.gaz-zoom-1 body { font-size: 106%; }
html.gaz-zoom-2 body { font-size: 114%; }
html.gaz-zoom-3 body { font-size: 124%; }

/* read-aloud: the paragraph being read gets a soft underline band */
.gaz-speaking { background: rgba(199,154,70,.16) !important; border-radius: 3px; }

/* Always-visible type-size dock -- right edge, vertically centered, so it
   clears the reading-tools badge (bottom-left) and Edna's dock
   (bottom-right). No click-to-discover: the control is just on the page. */
#gazTypeDock {
  position: fixed; right: 12px; top: 50%; transform: translateY(-50%);
  z-index: 2147483000;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 7px;
  background: #f4ecd8; border: 3px solid #17130f; border-radius: 14px;
  box-shadow: 4px 5px 0 rgba(23,19,15,.4);
  font-family: Georgia, serif;
}
#gazTypeDock button {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid #17130f;
  background: #fffaf0; color: #17130f; font: 800 .95rem/1 Georgia, serif;
  cursor: pointer; display: grid; place-items: center; padding: 0;
}
#gazTypeDock button:hover { background: #e3b126; }
#gazTypeDock button:focus-visible { outline: 3px solid #7f1d1d; outline-offset: 2px; }
#gazTypeDock span {
  font: 800 .72rem/1 Arial, sans-serif; letter-spacing: .04em; color: #6b6355;
  min-width: 2.4em; text-align: center;
}

/* ---------- share: badge, panel, end-of-story strip -----------------------
   Captain's ask 2026-09-22: pass-it-on hardware. The badge is a brass plate
   like the access badge, parked on the right rail just under the type dock
   (the dock's lower edge sits ~70px below center). The panel is the same
   dialog language as the reading tools; on phones it becomes a bottom
   sheet, where a thumb already is. */
#gazShareBtn {
  position: fixed; right: 12px; top: calc(50% + 96px); z-index: 2147483000;
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  color: #17130f; cursor: pointer;
  border: 3px solid #17130f; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #f6dc76 0%, #e3b126 55%, #a87f07 100%);
  box-shadow: 4px 5px 0 rgba(23,19,15,.4), inset 0 0 0 2px rgba(255,246,214,.55), inset 0 -7px 11px rgba(87,63,8,.35);
  transition: transform .16s ease, box-shadow .16s ease;
}
#gazShareBtn svg { display: block; }
#gazShareBtn:hover { transform: translate(-2px,-2px); box-shadow: 6px 7px 0 rgba(23,19,15,.45), inset 0 0 0 2px rgba(255,246,214,.55), inset 0 -7px 11px rgba(87,63,8,.35); }
#gazShareBtn:focus-visible { outline: 3px solid #7f1d1d; outline-offset: 3px; }

#gazShare {
  position: fixed; right: 70px; top: 50%; transform: translateY(-50%);
  z-index: 2147483002; width: min(340px, calc(100vw - 28px));
  background: #fffdf7; color: #241f16; border: 2px solid #171512; border-radius: 10px;
  box-shadow: 6px 6px 0 rgba(0,0,0,.28); padding: 14px; font-family: Arial, Helvetica, sans-serif;
}
#gazShare[hidden] { display: none; }
#gazShare h2 { font: 800 .95rem/1.2 Georgia, serif; margin: 0 0 4px; }
#gazShare .gt-sub { font-size:.75rem; color: #5f5748; margin: 0 0 10px; }
#gazShare .gt-note { font-size:.75rem; color: #6b6355; margin-top: 8px; line-height: 1.4; }

#gazShare .gs-native {
  width: 100%; margin-bottom: 10px; padding: 10px 12px; text-align: left;
  border: 2px solid #171512; border-radius: 8px; cursor: pointer;
  background: #171512; color: #f2ead5; font: 800 .86rem/1.2 Arial, sans-serif;
}
#gazShare .gs-native span { display: block; font: 600 .7rem/1.3 Arial, sans-serif; color: #cbbd9e; margin-top: 3px; }
#gazShare .gs-native:hover { background: #2a251d; }

#gazShare .gs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
#gazShare .gs-net {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 2px 7px; border: 1.5px solid #171512; border-radius: 7px;
  background: #fff; color: #171512; text-decoration: none;
  font: 700 .66rem/1 Arial, sans-serif; text-align: center;
}
#gazShare .gs-net svg { width: 21px; height: 21px; fill: #171512; }
#gazShare .gs-net:hover { background: #f0e9d6; }

/* The printed strip at the end of a story -- ruled like the paper's other
   hardware, chips on the right of the label. */
.gaz-share-inline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: 24px 0 6px; padding: 12px 2px;
  border-top: 3px double #171512; border-bottom: 1px solid #171512;
  font-family: Arial, Helvetica, sans-serif;
}
.gaz-share-inline .gsi-lab {
  font: 800 .78rem/1 "Courier New", monospace; letter-spacing: .12em;
  text-transform: uppercase; color: #7f1d1d; margin-right: 4px;
}
.gaz-share-inline .gsi-net {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border: 1.5px solid #171512; border-radius: 3px; box-shadow: 2px 2px 0 #171512;
  background: #fffaf0; color: #171512; text-decoration: none; cursor: pointer;
  font: 700 .74rem/1 Arial, sans-serif;
}
.gaz-share-inline .gsi-net svg { width: 15px; height: 15px; fill: #171512; }
.gaz-share-inline .gsi-net:hover { background: #f0e9d6; }

@media (max-width: 640px) {
  #gazToolsBtn { left: 10px; bottom: 10px; width: 50px; height: 50px; }
  #gazTools { left: 10px; bottom: 70px; }
  #gazLens { width: 200px; }
  /* 2026-09-24 mobile rail (Captain): on phones the right-edge dock and
     share badge sat on top of the paper's text. 2026-09-29: as a top-center
     pill it landed on the 209 strip's zip jumper on every page top. The
     dock becomes a slim horizontal pill pinned bottom-center instead --
     between the toolbox (bottom-left) and Edna (bottom-right), clear of
     both rails; share keeps its lower-right spot. */
  #gazTypeDock { top: auto; bottom: 10px; right: auto; left: 50%;
    transform: translateX(-50%);
    flex-direction: row; padding: 5px 8px; gap: 5px; }
  #gazTypeDock button { width: 28px; height: 28px; }
  #gazShareBtn { right: 8px; top: auto; bottom: 128px; width: 42px; height: 42px; }
  /* The panel becomes a bottom sheet -- the thumb is already there. */
  #gazShare { left: 10px; right: 10px; bottom: 10px; top: auto; transform: none; width: auto; }
}
@media (max-height: 480px) {
  /* Short screens: the rail would clip, so the badge drops to the lower
     right, above Edna's dock, and the panel floats centered. */
  #gazShareBtn { top: auto; bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  #gazToolsBtn, #gazShareBtn { transition: none; }
}
@media print {
  #gazToolsBtn, #gazTools, #gazRuler, #gazLens, #gazProgress, .gaz-papermenu, .eas-brand-bar, #gaz209strip, #gazTypeDock, #gazShareBtn, #gazShare, .gaz-share-inline { display: none !important; }
}

/* ---------- the 209 strip -------------------------------------------------
   Thin nameplate rail gaz-reader.js drops at the very top of every page:
   the paper's name left, the zip jumper center, poster/seller links right.
   Ink on cream, same hardware as the rest of the reading layer. */
#gaz209strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  padding: 6px 14px; background: #171512; color: #f2ead5;
  border-bottom: 3px solid #c79a46;
  font-family: Arial, Helvetica, sans-serif; font-size: .78rem;
}
#gaz209strip .g209-name {
  font: 900 .95rem/1 "Courier New", Courier, monospace; letter-spacing: .06em;
  color: #f2ead5; text-decoration: none; white-space: nowrap;
}
#gaz209strip .g209-name:hover { color: #ffd98a; }
#gaz209strip .g209-tag {
  font-size:.75rem; letter-spacing: .14em; text-transform: uppercase;
  color:#cbbd9e;
}
#gaz209strip .g209-jump { display: flex; align-items: center; gap: 6px; margin-left: auto; }
#gaz209strip .g209-jump label { font-size:.75rem; letter-spacing: .08em; text-transform: uppercase; color:#cbbd9e; }
#gaz209strip input[data-gaz-zip] {
  width: 62px; padding: 3px 7px; border: 1px solid #c79a46; border-radius: 3px;
  background: #f7efdc; color: #171512; font: 800 .82rem "Courier New", monospace;
  text-align: center; letter-spacing: .08em;
}
#gaz209strip input[data-gaz-zip]:focus { outline: 2px solid #ffd98a; outline-offset: 1px; }
#gaz209strip .g209-jump button {
  padding: 4px 10px; border: 1px solid #c79a46; border-radius: 3px; cursor: pointer;
  background: #c79a46; color: #171512; font: 800 .75rem Arial, sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
}
#gaz209strip .g209-jump button:hover { background: #ffd98a; }
#gaz209strip .g209-links { display: flex; gap: 4px 14px; }
#gaz209strip .g209-links a { color: #d8cdb3; text-decoration: none; font-size: .76rem; white-space: nowrap; }
#gaz209strip .g209-links a:hover { color: #ffd98a; text-decoration: underline; }
@media (max-width: 720px) {
  #gaz209strip .g209-tag { display: none; }
  #gaz209strip .g209-jump { margin-left: 0; }
}

input.gaz-zip-bad { border-color: #b8341c !important; background: #fbe4de !important; }

/* ---------- page-turner (2026-09-24, Captain) -----------------------------
   Left/right options on the header + edge rails + swipe. Right = forward. */
.gzm-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid #c9c0aa; margin-top: 8px; padding-top: 7px;
  font: 800 .78rem Arial, Helvetica, sans-serif; letter-spacing: .05em;
  text-transform: uppercase;
}
.gzm-pager .pg { color: #4a4234; text-decoration: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 38%; min-width: 0; }
.gzm-pager { overflow: hidden; }
.gzm-pager a.pg:hover { color: var(--accent, #7f1d1d); }
.gzm-pager .pg .pg-arrow { font-size: 1.15em; font-weight: 900; }
.gzm-pager .pg.off { color: #b9b09c; }
.gzm-pager .pg-cur { color: var(--accent, #7f1d1d); letter-spacing: .12em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* edge rails -- visible on touch/small screens, hover-reveal on desktop */
.gzp-arrow {
  position: fixed; top: 50%; z-index: 9990; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 7px; text-decoration: none;
  background: linear-gradient(#d8ae58, #b8894a); color: #171512;
  border: 1px solid #171512; box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
  font: 800 .68rem Arial, Helvetica, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; writing-mode: vertical-rl;
}
.gzp-arrow .gzp-glyph { font-size: 1.5rem; font-weight: 900; line-height: 1;
  writing-mode: horizontal-tb; }
.gzp-prev { left: 0; border-radius: 0 8px 8px 0; border-left: 0; }
.gzp-next { right: 0; border-radius: 8px 0 0 8px; border-right: 0; }
.gzp-next { transform: translateY(-50%) scaleX(1); }
.gzp-next .gzp-glyph { order: 2; }
.gzp-arrow:hover { background: #ffd98a; }
@media (max-width: 900px) {
  .gzp-arrow { padding: 14px 9px; }
}
/* 2026-09-29 (mobile): the labelled rail covered hero headlines on phones
   ("‹ EAT & DRINK" sat on the Eats hero text). Under 700px the rails become
   small glyph chips -- still tappable, off the words. */
@media (max-width: 700px) {
  .gzp-arrow { padding: 10px 6px; }
  .gzp-arrow .gzp-label { display: none; }
}
@media print { .gzp-arrow, .gzm-pager { display: none; } }

/* ---------- 2026-09-29: fluid page-turn (mobile) -------------------------
   Captain on the phone: "tap left and right... not fluid. It changes too
   much. Find a middle ground." Cross-document view transitions turn the
   hard location.assign() reload into a real page slide — the old page
   exits the way the finger pushed it, the new one slides in from the
   other side. Unsupported browsers fall back to the same instant nav.
   Direction is tagged gz-back by JS (sessionStorage flag set by the
   arrows/swipe, or back_forward nav type); default runs forward. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: gzvt-fwd-out .26s ease-in both; }
  ::view-transition-new(root) { animation: gzvt-fwd-in .26s ease-out both; }
  html:active-view-transition-type(gz-back)::view-transition-old(root) { animation-name: gzvt-bak-out; }
  html:active-view-transition-type(gz-back)::view-transition-new(root) { animation-name: gzvt-bak-in; }
}
@keyframes gzvt-fwd-out { to { transform: translateX(18%);  opacity: 0; } }
@keyframes gzvt-fwd-in  { from { transform: translateX(-18%); opacity: 0; } }
@keyframes gzvt-bak-out { to { transform: translateX(-18%); opacity: 0; } }
@keyframes gzvt-bak-in  { from { transform: translateX(18%);  opacity: 0; } }
/* While a turn-drag is live the page itself tracks the finger a little —
   rubber-band, damped, and the ink shows through the gap like the space
   between pages. JS applies .gz-dragging while a swipe is in progress. */
body.gz-dragging { transition: none; will-change: transform; }
body.gz-snapback { transition: transform .18s ease-out, opacity .18s ease-out; }
.gzm{padding-top:8px;padding-bottom:0}
.gzm-top{align-items:center;gap:4px 12px}
.gzm-mark{height:34px}
.gzm-name{font-size:clamp(1.25rem,3vw,1.65rem)}
.gzm-sub{letter-spacing:.08em;line-height:1.5}
.gzm-folio{margin-top:5px;padding-top:4px;padding-bottom:4px}
.gzm-panel{max-height:65vh;overflow:auto;overscroll-behavior:contain}
#gazShare{max-height:85dvh;overflow:auto}
@media(max-width:700px){.gzm{padding:7px 12px 0}.gzm-mark{height:30px}.gzm-sub{font-size:.56rem}.gzm-date{font-size:.6rem}.gzm-panel{max-height:50dvh}}
@media(max-width:640px){.gzm-folio{gap:5px 12px}.gzm-folio-l,.gzm-folio-r{width:auto}.gzm-folio-c{gap:14px}.gzm-date{width:auto}.gzm-top{justify-content:space-between}.gzm-sub{flex-basis:100%;text-align:left}}
#gaz209strip{font-size:14px;line-height:1.4;padding:6px 14px;gap:5px 12px}
#gaz209strip .g209-name{font-size:16px}
#gaz209strip .g209-jump label,#gaz209strip .g209-links a{font-size:13px}
#gaz209strip input[data-gaz-zip]{font-size:15px;width:72px}
#gaz209strip .g209-jump button{font-size:13px}
@media(max-width:720px){#gaz209strip .g209-jump{margin-left:auto}#gaz209strip .g209-jump label{display:none}}