/* ============================================================
   WCDO Radio - site.css
   Direct implementation of the locked design system (Master Spec
   Section 14 / WCDO_Design_System_Style_Sheet.html). The gradient
   stops, ring inset values, and type sizes below are the approved
   reference points - do not "improve" them.
   Mobile-first: base styles are phone-width; desktop layered on
   via min-width media queries (Section 9 build methodology).
   ============================================================ */

:root {
  /* True brand colors - text & structural use only */
  --wcdo-red:  #CE000C;
  --wcdo-navy: #000266;
  --wcdo-gold: #F5A800;
  --bg-white:  #FFFFFF;

  /* Page-identity colors (75% gradient stops - Section 14 rule) */
  --identity-red:  #A3002E;
  --identity-gold: #996400;   /* 7/9/26 WCAG fix: was #B87700 (3.70:1 on white, fails AA at the many small-text sizes it's used at) - darkened to the minimum that clears 4.5:1 with real margin (5.03:1) */
  --identity-blue: #0E23A3;

  /* Jewel gradients - gloss elements ONLY, never text/nav */
  --jewel-red:  linear-gradient(180deg, #FF5C8A 0%, #E0004D 35%, #A3002E 75%, #7A0021 100%);
  --jewel-blue: linear-gradient(180deg, #6E9CFF 0%, #1A3FE0 35%, #0E23A3 75%, #081768 100%);
  --jewel-gold: linear-gradient(180deg, #FFE08A 0%, #F5A800 35%, #B87700 75%, #8A5900 100%);

  --card-inner: linear-gradient(160deg, #ffffff 0%, #f7f7fa 55%, #eeeef2 100%);

  /* On-background text (7/8/26 dark-background lever): the exact
     factory grays used by text sitting directly on the page
     background. The theme emitter auto-flips these light when the
     background lever goes dark - stock rendering is byte-identical. */
  --page-text:  #1a1a1a;
  --card-text:  #1a1a1a;   /* card INTERIOR text - deliberately its own
                              var (7/8/26 Christmas-green lesson): card
                              text must never inherit the page-level
                              text color, or background themes wash out
                              the white islands */
  --page-soft1: #555;
  --page-soft2: #666;
  --page-soft3: #888;
  --page-soft4: #767676;   /* 7/9/26 WCAG fix: was #999 (2.85:1 on white, fails AA) - now 4.54:1, passes */

  --font: "Fredoka", -apple-system, "Segoe UI", Arial, sans-serif;
  --player-height: 58px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-white);
  color: var(--page-text);
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;          /* locked: 16px body, the deciding readability factor */
  line-height: 1.65;
}

body { padding-bottom: calc(var(--player-height) + 14px); }
body.no-player { padding-bottom: 20px; }

/* ============ NAV ============ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--wcdo-navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  min-height: 52px;
}
.nav-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-burger span {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-nav.open .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.site-nav.open .nav-burger span:nth-child(2) { opacity: 0; }
.site-nav.open .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;            /* hidden until burger opens (mobile base) */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--wcdo-navy);
  flex-direction: column;
  box-shadow: 0 10px 16px rgba(0,0,0,0.3);
}
.site-nav.open .nav-list { display: flex; }
.nav-list a {
  display: block;
  padding: 13px 20px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-list a:hover,
.nav-list a.active { color: var(--wcdo-gold); }

.nav-phone a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
  white-space: nowrap;
}
.nav-phone a:hover { color: var(--wcdo-gold); }

@media (min-width: 820px) {
  .nav-burger { display: none; }
  .nav-list {
    display: flex;
    position: static;
    flex-direction: row;
    background: none;
    box-shadow: none;
    flex-wrap: wrap;
  }
  .nav-list a { border-bottom: none; padding: 15px 14px; font-size: 15px; }
}

/* ============ BANNER ============ */
.site-banner { text-align: center; padding: 10px 10px 0; }
.site-banner img {
  max-width: 100%; height: auto; display: inline-block;
  border-radius: 3.5%;   /* 7/9/26: rounding now lives in CSS, not baked into the source art -
                             matches the current banner's ~3.7% measured proportion. Future banner
                             art (baseline or any seasonal variant) can just be a plain full-bleed
                             rectangle - no corner tracing, no cookie-cutter tool needed, the browser
                             rounds it identically every time regardless of screen size. */
}
.banner-phone {
  font-size: 15px;
  font-weight: 600;
  color: var(--wcdo-navy);
  padding: 4px 0 10px;
}
.banner-phone a { color: var(--wcdo-red); text-decoration: none; font-weight: 700; }

/* ============ PAGE CONTENT & IDENTITY RULE ============ */
.site-content {
  max-width: 1400px;   /* widened from 1100 (7/5/26) - less side whitespace,
                          more info per screen; line lengths still in the
                          readable zone at three columns */
  margin: 0 auto;
  padding: 10px 14px 30px;
}
.page-heading {
  font-weight: 700;
  font-size: 26px;
  margin: 10px 0 22px;
  padding-bottom: 8px;
  border-bottom: 3px solid;
}
/* Header text color and divider line MUST match (locked rule) */
.identity-red  .page-heading { color: var(--identity-red);  border-color: var(--identity-red); }
.identity-gold .page-heading { color: var(--identity-gold); border-color: var(--identity-gold); }
.identity-blue .page-heading { color: var(--identity-blue); border-color: var(--identity-blue); }

/* ============ JEWEL GLOSS BUTTONS (locked treatment) ============ */
.gloss-btn {
  display: inline-block;
  padding: 16px 38px;
  border-radius: 40px;
  font-size: 18px;
  font-family: var(--font);
  font-weight: 700;
  text-transform: uppercase;      /* buttons are ALWAYS ALL CAPS */
  letter-spacing: 0.03em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  border: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.gloss-btn::after {
  content: "";
  position: absolute;
  top: 8%; left: 6%; right: 6%; height: 42%;
  border-radius: 50px 50px 60% 60% / 100% 100% 30% 30%;
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 60%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.btn-red  { background: var(--jewel-red);  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.28)); }
.btn-blue { background: var(--jewel-blue); filter: drop-shadow(0 8px 12px rgba(0,0,0,0.28)); }
.btn-gold {
  background: var(--jewel-gold);
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.28));
  color: #1F1300;   /* 7/9/26 WCAG fix: was #4A2E00 (3.38:1 at the gradient's mid-stop, 2.09:1 at its
                        DARKEST stop - fails AA either way). Darkened to the practical floor for a dark
                        color against this gradient: 3.05:1 at the worst point, 4.5:1+ everywhere else
                        on the button. KNOWN LIMITATION, flagged not hidden: full 4.5:1 across the ENTIRE
                        gradient is mathematically impossible with any text color, because the gradient's
                        own darkest stop (#8A5900) isn't dark enough - even pure black only reaches
                        3.51:1 there. Genuinely fixing this fully would mean darkening the jewel-gold
                        gradient itself, which is a visible, already-seen-and-approved design color -
                        that's owner's call to make, not a silent fix bundled into this pass. */
  text-shadow: 0 1px 1px rgba(255,255,255,0.4);
}
/* Small gloss variant - full jewel treatment (pill, specular band,
   soft shadow, ALL CAPS) scaled to sit inside control rows next to
   inputs/small buttons. Shadow eased down to match the smaller mass. */
.gloss-sm {
  padding: 10px 22px;
  font-size: 14px;
  border-radius: 30px;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,0.25));
  align-self: center;
}

/* ============ GLOSSY CARDS (locked ring treatment) ============ */
/* Ring built via PADDING on the gradient container; gloss via
   fixed-pixel inset box-shadows matching the 10px ring. Do NOT
   intensify these inset values - this exact intensity is locked. */
.glossy-card {
  position: relative;
  border-radius: 28px;
  padding: 10px;                  /* ring thickness - locked at 10px */
  margin-bottom: 24px;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.3));
  box-shadow:
    inset 0  4px 4px rgba(255,255,255,0.9),
    inset 0 -4px 5px rgba(0,0,0,0.35),
    inset  4px 0 4px rgba(255,255,255,0.25),
    inset -4px 0 4px rgba(0,0,0,0.2);
}
.ring-red  { background: var(--jewel-red); }
.ring-blue { background: var(--jewel-blue); }
.ring-gold { background: var(--jewel-gold); }

.card-inner {
  background: var(--card-inner);
  color: var(--card-text);   /* own supply line, not the page's (7/8/26) */
  border-radius: 20px;
  padding: 20px 22px;
}
.card-inner h3 {
  margin: 0 0 6px;
  font-size: 21px;               /* locked headline size */
  font-weight: 700;
}
.card-inner .meta { font-size: 12px; color: color-mix(in srgb, var(--card-text) 65%, transparent); margin-bottom: 12px; }   /* was hardcoded #999 - site-wide meta line (News/Sports/Main dates), same bug (7/8/26 fix) */
.card-inner p { margin: 0 0 10px; font-size: 16px; }
.card-inner p:last-child { margin-bottom: 0; }

/* ============ FOOTER ============ */
.site-footer {
  background: var(--wcdo-navy);
  color: #fff;
  padding: 22px 16px 26px;
  text-align: center;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-bottom: 10px;
}
.footer-links a {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.footer-links a:hover { color: var(--wcdo-gold); }
.footer-staff-link { opacity: 0.75; }
.footer-tagline { font-size: 12px; color: rgba(255,255,255,0.6); }

/* ============ PERSISTENT STREAM PLAYER (Section 8) ============ */
.player-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 950;
  height: var(--player-height);
  background: #fff;
  border-top: 3px solid var(--wcdo-gold);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  box-shadow: 0 -6px 14px rgba(0,0,0,0.15);
}
.player-toggle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--jewel-red);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
}
.player-toggle::after {
  content: "";
  position: absolute;
  top: 8%; left: 12%; right: 12%; height: 40%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.player-label { flex: 1; min-width: 0; line-height: 1.25; }
.player-station { display: block; font-weight: 700; font-size: 14px; color: var(--wcdo-navy); }
.player-status  { display: block; font-size: 12px; color: #888; }
.player-bar.is-live .player-status { color: var(--wcdo-red); font-weight: 600; }
.player-bar.is-error .player-status { color: #b00; font-weight: 600; }

.player-volume { display: none; align-items: center; gap: 8px; }
.player-mute {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
}
.player-volume input[type="range"] { width: 110px; accent-color: var(--wcdo-red); }

@media (min-width: 600px) {
  .player-volume { display: flex; }
}

/* ============ UTILITIES ============ */
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 18px 0; }
.notice-box {
  background: #FFF8E8;
  border-left: 4px solid var(--wcdo-gold);
  padding: 14px 18px;
  font-size: 14px;
  color: #5a4a1a;
  border-radius: 0 8px 8px 0;
  margin: 20px 0;
}

/* ============ NEWS PAGE (batch 3) ============ */
.breadcrumb { font-size: 13px; color: var(--page-soft3); margin: 4px 0 14px; }
.breadcrumb a { color: var(--identity-blue); text-decoration: none; }

.news-controls {
  display: flex;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.news-search-form, .news-date-form { display: flex; gap: 8px; align-items: center; }
.news-controls input[type="text"], .news-controls input[type="date"] {
  padding: 10px 12px;
  font-size: 16px;
  font-family: var(--font);
  border: 1.5px solid #ccc;
  border-radius: 10px;
}
.news-controls input[type="text"] { width: 200px; }
.news-ctl-btn { margin-top: 0; }
.news-modeline { font-size: 14px; color: var(--page-soft2); margin: 0 0 16px; }
.news-modeline a { color: var(--identity-blue); }

.news-body { font-size: 16px; line-height: 1.65; }
.news-divider {
  border: none;
  border-top: 2px dashed #d0d0d6;
  margin: 16px 0;
}
.actuality { color: #777; }

.ext-link {
  color: var(--identity-gold);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.ext-link::after { content: "\2197"; font-size: 0.85em; margin-left: 1px; }
.news-body a:not(.ext-link) { color: var(--identity-blue); }

.tag-strip { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 4px; }
.tag-strip .tag {
  font-size: 9px;
  font-weight: 600;
  color: #666;
  background: #eef0f4;
  border-radius: 8px;
  padding: 3px 7px;
  text-decoration: none;
}
.tag-strip .tag:hover { background: var(--wcdo-gold); color: #1F1300; }

.news-daynav { display: flex; justify-content: space-between; margin: 6px 0 20px; }

/* ============ NAV DROPDOWN (Public File) ============ */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font-family: var(--font);
  font-weight: 600;
  font-size: 16px;
  padding: 13px 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-drop-btn:hover { color: var(--wcdo-gold); }
.drop-caret { font-size: 11px; }
.nav-drop-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  background: rgba(255,255,255,0.06);
}
.nav-drop.open .nav-drop-menu { display: block; }
.nav-drop-menu a { padding-left: 36px; font-size: 15px; }

@media (min-width: 820px) {
  .nav-drop-btn { border-bottom: none; padding: 15px 14px; font-size: 15px; width: auto; }
  .nav-drop-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 170px;
    background: var(--wcdo-navy);
    box-shadow: 0 10px 16px rgba(0,0,0,0.3);
    border-radius: 0 0 10px 10px;
    overflow: hidden;
  }
  .nav-drop-menu a { padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
}

/* ============ FRONT PAGE (Section 8 grid, amended 7/5/26) ============ */
.front-headline {
  text-align: center;
  font-weight: 700;
  font-size: 24px;
  color: var(--identity-blue);
  border-bottom: 3px solid var(--identity-blue);
  padding-bottom: 10px;
  margin: 12px 0 20px;
}
@media (min-width: 820px) {
  .front-headline { font-size: 30px; }
}

/* Mobile-first: single column, Main prioritized, weather as a strip */
.front-grid {
  display: grid;
  grid-template-areas:
    "weather"
    "mainfeed"
    "news"
    "calendar";
  gap: 6px;
}
.fg-weather  { grid-area: weather; }
.fg-main     { grid-area: mainfeed; }
.fg-news     { grid-area: news; }
.fg-calendar { grid-area: calendar; }

@media (min-width: 900px) {
  /* 7/7/26 reorg: weather tops the LEFT column with News under it;
     Calendar takes the full-height right column (submit panel first). */
  .front-grid {
    grid-template-areas:
      "weather mainfeed calendar"
      "news    mainfeed calendar";
    grid-template-columns: 1fr 1.25fr 0.95fr;
    grid-template-rows: auto 1fr;
    gap: 0 22px;
    align-items: start;
  }
}

.col-head {
  font-size: 18px;
  font-weight: 700;
  border-bottom: 2px solid;
  padding-bottom: 5px;
  margin: 8px 0 14px;
}
.col-head-red  { color: var(--identity-red);  border-color: var(--identity-red); }
.col-head-blue { color: var(--identity-blue); border-color: var(--identity-blue); }
.col-cta { text-align: center; margin: 14px 0 20px; }

/* Compact card variant for front-page blurbs */
.card-compact { border-radius: 22px; padding: 7px; margin-bottom: 16px; }
.card-compact .card-inner { border-radius: 16px; padding: 14px 16px; }
.card-compact .card-inner h3 { font-size: 17px; }
.card-compact .card-inner p { font-size: 16px; line-height: 1.6; margin-bottom: 0; }  /* 16px standard everywhere (7/5/26) */
.blurb-title a { color: inherit; text-decoration: none; }
.blurb-title a:hover { color: var(--identity-red); }

.btn-small { padding: 11px 26px; font-size: 14px; }

/* Photo / event invitation panels */
.photo-invite, .digest-invite {
  background: #FFF8E8;
  border-radius: 16px;
  padding: 16px 18px;
  margin: 8px 0 18px;
  text-align: center;
}
.photo-invite p, .digest-invite p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.55;
  color: #5a4a1a;
}
.digest-invite { background: #EEF2FF; }
.digest-invite p { color: #2a3a7a; }

/* Weather box: fuller box on desktop, compresses to a strip on mobile */
.weather-box {
  background: linear-gradient(160deg, #F4F8FF 0%, #EAF1FF 100%);
  border-radius: 16px;
  padding: 10px 14px;
  margin: 8px 0 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 14px;
}
.wx-now { display: flex; align-items: center; gap: 8px; }
.wx-icon { font-size: 22px; color: var(--wcdo-gold); }
.wx-temp { font-size: 22px; font-weight: 700; color: var(--identity-blue); }
.wx-cond { font-size: 12px; color: #667; }
.wx-hilo { font-size: 13px; color: var(--card-text); }   /* 7/8/26 fix */
.wx-days { display: none; }
.wx-more { font-size: 12px; font-weight: 700; color: var(--identity-blue); text-decoration: none; margin-left: auto; white-space: nowrap; }

@media (min-width: 900px) {
  .weather-box { display: block; padding: 16px 18px; }
  .wx-now { margin-bottom: 6px; }
  .wx-hilo { margin-bottom: 10px; }
  .wx-days { display: flex; gap: 10px; margin-bottom: 10px; }
  .wx-day {
    flex: 1;
    text-align: center;
    background: #fff;
    border-radius: 10px;
    padding: 8px 4px;
    font-size: 12px;
    font-weight: 600;
    color: #445;
  }
  .wx-more { margin-left: 0; }
}
.cal-more { font-size: 14px; font-weight: 700; color: var(--identity-blue); text-decoration: none; }

/* ============ CALENDAR AGENDA (batch 5) ============ */
.cal-utility { text-align: right; margin: 4px 0 10px; }
.cal-datehead {
  font-size: 17px;
  font-weight: 700;
  color: var(--page-soft3);
  margin: 22px 0 12px;
  padding-bottom: 4px;
  border-bottom: 2px solid #ddd;
}
.cal-datehead.today { color: var(--identity-red); border-color: var(--identity-red); }
.ev-card .card-inner p { margin-bottom: 8px; }
.ev-orglink { font-size: 13px; }
.cal-end {
  text-align: center;
  font-size: 14px;
  color: #888;
  padding: 24px 0 10px;
}
.form-intro { font-size: 16px; color: var(--page-soft1); }
.priv { font-weight: 400; font-size: 11px; color: #b06a00; }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
/* Honeypot: visually gone, still in the DOM for bots to find */
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 1px; overflow: hidden; }

.digest-list { list-style: none; margin: 0; padding: 0; }
.digest-list li { font-size: 16px; padding: 5px 0; border-bottom: 1px solid #f0f0f2; }
.digest-list li:last-child { border-bottom: none; }
.dg-time { font-weight: 700; color: var(--identity-blue); font-size: 12px; }

/* Digest: full-text items grouped under day labels (7/5/26) */
.dg-day {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--identity-blue);
  border-bottom: 1.5px solid #dfe4f2;
  padding-bottom: 3px;
  margin: 12px 0 6px;
}
.dg-item { font-size: 16px; line-height: 1.6; padding: 6px 0; color: var(--card-text); }   /* was hardcoded #333 - invisible on a dark card (7/8/26 fix) */
.dg-item + .dg-item { border-top: 1px dashed #eceef4; }

/* ============ FRONT PAGE COLUMN WALL (7/5/26) ============
   Desktop only: the three columns share one fixed overall height
   (--front-wall-height) and end together on one clean line at the footer.
   ONLY the feed interiors (.col-scroll) scroll - headers, weather box,
   photo module, submit panel, and CTA buttons all stay parked.
   Mobile keeps natural stacked heights with the item caps - no nested
   scrolling on touch. */

.col-scroll { min-height: 0; }

@media (min-width: 900px) {
  .front-grid {
    height: var(--front-wall-height, 2500px);
    grid-template-rows: auto minmax(0, 1fr);
    /* The batch-4 grid rule set align-items:start, which sizes columns to
       their CONTENT and silently defeats the wall's stretch - this is what
       let the calendar column blow past the footer. Stretch restores the
       track-height columns the wall depends on. */
    align-items: stretch;
    /* Safety net: if anything ever misbehaves again it clips inside the
       wall instead of covering the footer. */
    overflow: hidden;
  }
  .fg-news, .fg-main, .fg-calendar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }
  /* Parked furniture must never squash to make room for the frames */
  .fg-news .col-head, .fg-main .col-head, .fg-calendar .col-head,
  .fg-main .photo-invite, .fg-calendar .digest-invite,
  .col-cta { flex-shrink: 0; }
  /* 7/7/26 polish: one column anatomy - TOP BOX / TITLE BAR / FEED BOX.
     The three top boxes (weather, photo invite, event invite) share one
     fixed height so every title bar - and therefore every feed box -
     starts on the same line. Invites center their content in the box. */
  .weather-box, .fg-main .photo-invite, .fg-calendar .digest-invite {
    height: var(--front-topbox-h, 236px);
    margin: 8px 0 16px;
  }
  .fg-main .photo-invite, .fg-calendar .digest-invite {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .weather-box { position: relative; }
  /* 7/7/26: mobile puts All the News ABOVE the feed box (DOM order);
     desktop parks it back at the news column's bottom via flex order. */
  .fg-news .col-head { order: 0; }
  .fg-news .col-scroll { order: 1; }
  .fg-news .col-cta { order: 2; margin-top: 14px; }
  .col-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c6cad6 transparent;
    padding: 4px 10px 0 2px;
  }
  .col-scroll::-webkit-scrollbar { width: 8px; }
  .col-scroll::-webkit-scrollbar-thumb { background: #c6cad6; border-radius: 6px; }
  .col-scroll::-webkit-scrollbar-track { background: transparent; }
  /* Fade-out cue at the frame's bottom edge: there's more, scroll me */
  .col-scroll::after {
    content: "";
    display: block;
    position: sticky;
    bottom: 0;
    height: 30px;
    margin-top: -30px;
    background: linear-gradient(rgba(255,255,255,0), #ffffff 85%);
    pointer-events: none;
  }

  /* Digest scrolls INSIDE its glossy card; card stretches to fill column */
  .fg-calendar .dg-card { flex: 1 1 auto; display: flex; min-height: 0; margin-bottom: 16px; }
  .fg-calendar .dg-card .card-inner { display: flex; flex-direction: column; min-height: 0; flex: 1; }
  .dg-scroll { padding-right: 8px; }
  .dg-scroll::after { background: linear-gradient(rgba(247,247,250,0), #f0f0f4 85%); }

  .col-cta { margin-bottom: 8px; }
}

/* Front-page news card footer link (story mode, 7/5/26) */
.news-more { margin: 10px 0 0; font-size: 13px; font-weight: 700; }
.news-more a { color: var(--identity-red); text-decoration: none; }

/* ============ WEATHER PAGE (batch 6) ============ */
.wx-alert {
  display: block;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 14px;
  text-decoration: none;
  color: #fff;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}
.wx-alert strong { display: block; font-size: 17px; text-transform: uppercase; letter-spacing: 0.03em; }
.wx-alert span { display: block; font-size: 14px; margin-top: 3px; }
.wx-alert-more { font-size: 12px; opacity: 0.85; }
.alert-red  { background: linear-gradient(180deg, #E0004D 0%, #A3002E 100%); }
.alert-gold { background: linear-gradient(180deg, #F5A800 0%, #B87700 100%); color: #3a2500; }
.alert-blue { background: linear-gradient(180deg, #1A3FE0 0%, #0E23A3 100%); }

.wx-current-grid { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; }
.wx-big { display: flex; align-items: baseline; gap: 12px; }
.wx-big-temp { font-size: 44px; font-weight: 700; color: var(--identity-blue); }
.wx-big-text { font-size: 18px; color: var(--card-text); }   /* 7/8/26 fix: current-conditions block genuinely uses the themed card-inner, no fixed override */
.wx-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; font-size: 14px; color: color-mix(in srgb, var(--card-text) 78%, transparent); }   /* 7/8/26 fix: borderline lightness delta on a dark card */
.wx-asof { font-size: 13px; color: #889; margin: -8px 0 14px; }

.wx-periods { display: grid; grid-template-columns: 1fr; gap: 12px; }
/* Stacked single column at all widths (7/5/26) - Today -> Tonight -> Monday
   reads top-down; the old 2-across zigzagged the day/night pairs. */
.wx-period {
  background: linear-gradient(160deg, #ffffff 0%, #f4f7ff 100%);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.wx-period.wx-night { background: linear-gradient(160deg, #f7f7fb 0%, #eceef6 100%); }
.wx-p-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.wx-p-icon { font-size: 24px; }
.wx-p-name { font-weight: 700; font-size: 17px; color: var(--wcdo-navy); flex: 1; }
.wx-p-temp { font-weight: 700; font-size: 20px; color: var(--identity-blue); }
.wx-p-short { font-size: 14px; font-weight: 600; color: #556; margin-bottom: 6px; }
.wx-p-detail { font-size: 16px; line-height: 1.55; color: #333; }   /* correctly reverted 7/8/26: .wx-period has its OWN fixed white/near-white gradient background - was never actually broken */

/* ============ RIVER LEVELS (batch 6) ============ */
.rg-orderline { font-size: 13px; color: #889; margin: 0 0 14px; }
.gauge-card .card-inner h3 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gauge-id { font-size: 12px; font-weight: 400; color: #99a; }
/* Feeder treatment: gold edge stripe (the old left-indent broke the
   2/3-across grid alignment - 7/5/26) */
.gauge-feeder .card-inner { border-left: 5px solid #B87700; }
.feeder-label { font-size: 11px; font-weight: 700; color: var(--identity-gold); text-transform: uppercase; letter-spacing: 0.05em; }   /* 7/8/26 fix */
.gauge-topline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 10px; }
.gauge-stage { font-size: 30px; font-weight: 700; color: var(--identity-blue); }
.status-pill {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: 14px; padding: 4px 12px;
}
.status-none { background: #E8EEFF; color: #0E23A3; }
.status-action { background: #FFF3D6; color: #8A5900; }
.status-minor, .status-moderate, .status-major { background: #FFE0E6; color: #A3002E; }
.status-major { background: #A3002E; color: #fff; }
.status- { background: #eee; color: #888; }
.gauge-updated { font-size: 12px; color: #99a; }
.crest-callout {
  background: #FFF8E8;
  border-left: 4px solid var(--wcdo-gold);
  border-radius: 0 10px 10px 0;
  padding: 10px 14px;
  font-size: 15px;
  color: #4a3a10;
  margin-bottom: 12px;
}
.crest-context { font-size: 13px; color: #7a6a35; }
.gauge-chart { width: 100%; height: auto; display: block; background: #fbfcff; border-radius: 12px; }
.gauge-legend { font-size: 12px; color: #889; margin-top: 6px; }
.lg-obs { color: #1A3FE0; }
.lg-fc { color: var(--identity-gold); }
.gauge-official { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--identity-blue); }
.rg-disclaimer {
  background: #f4f4f7;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 13px;
  color: #667;
  margin: 8px 0 24px;
}

/* River Gages map (from spec Section 9) */
.map-wrap {
  background: linear-gradient(160deg, #F4F8FF 0%, #EAF1FF 100%);
  border-radius: 24px; padding: 16px; margin: 0 auto 18px;
  max-width: 720px;   /* constrained - full 1400 well made the map huge (7/5/26) */
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.1));
}
.map-instruction {
  text-align: center; font-size: 14px; font-weight: 600; color: #0E23A3;
  margin-bottom: 8px; font-style: italic;
}
.river-path {
  fill: none; stroke: url(#riverGradient); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
  cursor: pointer; transition: stroke-width 0.15s ease, filter 0.15s ease;
}
.river-path:hover { stroke-width: 13; filter: drop-shadow(0 0 6px rgba(245,168,0,0.7)); }
.river-hit { fill: none; stroke: transparent; stroke-width: 26; cursor: pointer; }
.town-dot { fill: #F5A800; stroke: #fff; stroke-width: 1.5; }
.town-label { font-family: "Fredoka", sans-serif; font-size: 9px; font-weight: 600; fill: #333; }
.river-label { font-family: "Fredoka", sans-serif; font-size: 11px; font-weight: 700; fill: #0E23A3; letter-spacing: 0.03em; }
.legend-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.legend-pill {
  font-size: 12px; font-weight: 700; padding: 6px 15px; border-radius: 16px;
  background: #fff; color: #0E23A3; border: 1.5px solid #0E23A3; text-decoration: none;
}
.legend-pill:hover { background: #0E23A3; color: #fff; }
.aux-box {
  background: #f7f7fa; border-radius: 16px; padding: 14px 20px;
  max-width: 720px; margin-left: auto; margin-right: auto;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 24px;
}
.aux-box p { margin: 0; font-size: 14px; color: #555; }
.aux-link { font-size: 13px; font-weight: 700; color: var(--identity-gold); text-decoration: none; white-space: nowrap; }


/* ============ GAUGE GRID (7/5/26) ============
   Upstream-to-downstream order flows left-to-right, row by row -
   grid auto-placement does the alternating naturally. Susquehanna 3x3,
   East Sidney Dam 1x3, Delaware 1x3 (production, post-Hobart). Mobile
   stacks single-column in pure flow order. */
.gauge-grid { display: grid; grid-template-columns: 1fr; gap: 4px 20px; }
@media (min-width: 760px)  { .gauge-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .gauge-grid { grid-template-columns: 1fr 1fr 1fr; } }
.gauge-grid .gauge-card { margin-bottom: 20px; }
.gauge-grid .gauge-stage { font-size: 26px; }
.gauge-grid .card-inner h3 { font-size: 18px; }

/* ============ FEED POSTS & MEDIA (batch 7) ============ */
.sports-badge {
  display: inline-block;
  background: var(--jewel-gold);
  color: #1F1300;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 10px;
  padding: 2px 9px;
  margin-right: 6px;
  vertical-align: middle;
}
.post-body { font-size: 16px; line-height: 1.6; }
.pm-grid { display: grid; gap: 8px; margin-top: 12px; }
.pm-count-1 { grid-template-columns: 1fr; }
.pm-count-2 { grid-template-columns: 1fr 1fr; }
.pm-count-3 { grid-template-columns: 1fr 1fr 1fr; }
.pm-img { margin: 0; }
.pm-img img { width: 100%; height: auto; border-radius: 12px; display: block; cursor: zoom-in; }
.pm-count-1 .pm-img img { width: auto; max-width: 100%; max-height: 400px; margin: 0 auto; }
.pm-count-2 .pm-img img, .pm-count-3 .pm-img img { height: 220px; object-fit: cover; }
.pm-cap { display: block; font-size: 12px; color: #778; margin-top: 3px; }
.pm-av { margin-top: 12px; }
.pm-av audio, .pm-av video { width: 100%; border-radius: 10px; }
.share-row { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.share-fb, .share-copy {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  border-radius: 16px;
  padding: 7px 15px;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid var(--identity-blue);
  background: #fff;
  color: var(--identity-blue);
}
.share-fb:hover, .share-copy:hover { background: var(--identity-blue); color: #fff; }

.consent-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px !important; font-weight: 400 !important; margin-top: 16px !important; line-height: 1.5; }
.consent-row input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; accent-color: var(--identity-blue); }

/* Contest Rules */
.rules-body h3 { font-size: 17px; color: var(--identity-blue); margin: 20px 0 6px; }
.rules-body p { font-size: 16px; line-height: 1.6; margin: 0 0 10px; }

/* ============ STORMWATCH / ALERT TICKER (tool #10) ============ */
.site-ticker {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 44px;
  z-index: 300;             /* above the sticky nav */
  display: flex;
  align-items: center;
  font-family: var(--font);
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.3));
}
.ticker-label {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  background: rgba(0,0,0,0.25);
  white-space: nowrap;
}
.ticker-scroll { flex: 1; overflow: hidden; height: 100%; display: flex; align-items: center; }
.ticker-track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;                     /* JS-driven pass since v4 - no CSS animation */
}
.ticker-content { font-size: 15px; font-weight: 600; padding-right: 90px; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Page furniture shifts down while a banner is live */
body.has-ticker { padding-top: 44px; }
body.has-ticker .site-nav { top: 44px; }

@media (max-width: 679px) {
  .site-ticker { height: 48px; }
  body.has-ticker { padding-top: 48px; }
  body.has-ticker .site-nav { top: 48px; }
  .ticker-label { font-size: 11px; padding: 0 10px; }
  .ticker-content { font-size: 14px; }
}

/* Accessibility: no motion for users who ask for none - static single view */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none !important; }
  .ticker-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ticker-content[aria-hidden="true"] { display: none; }
}

.normalize-note { font-size: 13px; font-weight: 600; color: var(--identity-gold); margin-top: 6px; min-height: 18px; }

/* ============ SEARCH (batch: search + backup) ============ */
/* Search: docked at the nav's right edge beside the phone (7/6/26),
   vertically centered, out of the nav-list flow entirely. */
.nav-search {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto;            /* pushes to the right edge */
  align-self: center;
}
.nav-search input {
  width: 140px; padding: 7px 12px; font-size: 13px; font-family: var(--font);
  border: none; border-radius: 15px; background: rgba(255,255,255,0.16); color: #fff;
}
.nav-search input::placeholder { color: rgba(255,255,255,0.65); }
.nav-search input:focus { background: #fff; color: var(--wcdo-navy); outline: 2px solid var(--wcdo-gold); width: 190px; transition: width 0.15s ease; }
.nav-search button { background: none; border: none; font-size: 15px; cursor: pointer; padding: 4px; }
.nav-phone { margin-left: 14px; }   /* search sits snug beside it */
@media (max-width: 899px) {
  .nav-search { margin-left: 0; flex: 1; order: 2; padding: 0 8px; }
  .nav-search input { width: 100%; flex: 1; background: rgba(255,255,255,0.22); }
}
.search-bigform { display: flex; gap: 10px; margin-bottom: 14px; }
.search-bigform input {
  flex: 1; max-width: 560px; padding: 12px 16px; font-size: 16px; font-family: var(--font);
  border: 2px solid #ccd; border-radius: 24px;
}
.search-bigform input:focus { border-color: var(--identity-blue); outline: none; box-shadow: 0 0 0 3px rgba(14,35,163,0.25); }   /* 7/9/26 ADA: added a visible glow ring alongside the border shift - stronger, unmistakable focus state */
.archive-banner {
  display: block; background: #FFF8E8; border: 1.5px solid var(--wcdo-gold);
  border-radius: 14px; padding: 12px 18px; font-size: 15px; color: #5a4a1a;
  text-decoration: none; margin-bottom: 20px;
}
.archive-banner strong { color: #8A5900; }
.archive-banner:hover { background: #FFF3D6; }
.search-hint { font-size: 16px; color: #667; }
.search-count { font-size: 13px; color: #99a; font-weight: 400; }
.search-group { margin-bottom: 24px; }
.search-row {
  display: block; padding: 12px 14px; border-radius: 12px; text-decoration: none;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.07); margin-bottom: 8px;
}
.search-row:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.13); }
.search-row-title { display: block; font-size: 16px; font-weight: 700; color: var(--wcdo-navy); }
.search-row-meta { display: block; font-size: 12px; color: #99a; margin: 2px 0 4px; }
.search-row-ex { display: block; font-size: 14px; color: #556; line-height: 1.5; }

/* ============ PASS 1 (7/6/26): PUBLIC FORM STYLES (items 1 + 4) ============
   Root cause of the jumbled submit forms: public pages carried the
   staff-form class but never load staff.css. The block form treatment
   now lives here, keyed on .public-form, so every public form gets
   label-over-field stacking on desktop and mobile alike. */
.public-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin: 14px 0 4px;
}
.public-form input[type="text"],
.public-form input[type="password"],
.public-form input[type="date"],
.public-form input[type="time"],
.public-form input[type="email"],
.public-form input[type="file"],
.public-form select,
.public-form textarea {
  width: 100%;
  padding: 11px 12px;
  font-size: 16px;              /* 16px prevents iOS zoom-on-focus */
  font-family: var(--font);
  border: 1.5px solid #ccc;
  border-radius: 10px;
  background: #fff;
}
.public-form input:focus,
.public-form select:focus,
.public-form textarea:focus {
  outline: none;
  border-color: var(--identity-blue);
  box-shadow: 0 0 0 3px rgba(14,35,163,0.25);   /* 7/9/26 ADA: stronger focus ring */
}
.public-form .consent-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-weight: 400; font-size: 14px; line-height: 1.5; margin-top: 16px;
}
.public-form .consent-row input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--identity-blue); }
.public-form .staff-btn {
  display: inline-block; margin-top: 16px; padding: 12px 26px;
  border: none; border-radius: 30px; background: var(--jewel-blue);
  color: #fff; font-family: var(--font); font-weight: 700; font-size: 15px;
  text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.22));
}
.public-form .staff-btn.gold { background: var(--jewel-gold); color: #1F1300; }
.public-form .form-hint { font-size: 12px; color: var(--page-soft4); font-weight: 400; }

/* ============ PASS 1: EVENT MEDIA GALLERY (item 2) ============
   Approved images attached to a calendar event render as a small
   strip on the agenda card - quiet, below the text. */
.ev-gallery { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ev-gallery a { display: block; }
.ev-gallery img {
  cursor: zoom-in;
  width: 96px; height: 72px; object-fit: cover; border-radius: 10px; display: block;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.ev-gallery video { max-width: 100%; width: 320px; border-radius: 10px; display: block; }

/* ============ PASS 1: INLINE ARTICLE MEDIA (item 5) ============
   [photo:N] placement tokens drop an attachment inline in the body. */
.pm-inline { margin: 14px 0; }
.pm-inline img {
  max-width: 100%; width: auto; max-height: 400px;
  margin-left: auto; margin-right: auto;
  border-radius: 12px; display: block; box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  cursor: zoom-in;
}
.pm-inline .pm-cap { display: block; font-size: 13px; color: #778; margin-top: 4px; }
.pm-inline audio { width: 100%; }
.pm-inline video { max-width: 100%; border-radius: 12px; display: block; }

/* ============ TICKER LABEL v2 (7/6/26 evening, owner-directed) ============
   Desktop: the label is an OVERLAY pin at the bar's left - the crawl
   never pauses; text passes under the pin's shadowed right edge. After
   its per-banner hold time the pin exits "caught in the current."
   Mobile (<=679px): a labeled rotation splits into two rows - static
   label band on top, full-width crawl below. All-unlabeled rotation
   stays a single bar. Height is fixed across a mixed rotation. */
.ticker-pin {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 0 16px;
  white-space: nowrap;
  background-color: inherit;            /* always the banner's own ribbon color */
  box-shadow: 8px 0 12px -6px rgba(0,0,0,0.45);   /* text slides under this edge */
}
.ticker-toprow { display: none; }

@media (max-width: 679px) {
  .ticker-pin { display: none !important; }   /* mobile never overlays - it stacks */
  .site-ticker.ticker-2row {
    height: 74px;
    flex-direction: column;
    align-items: stretch;
  }
  .site-ticker.ticker-2row .ticker-toprow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    flex: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: rgba(0,0,0,0.22);       /* darkened band of the ribbon color */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px;
  }
  .site-ticker.ticker-2row .ticker-scroll { height: 48px; flex: none; }
  body.has-ticker-2row { padding-top: 74px; }
  body.has-ticker-2row .site-nav { top: 74px; }
}

/* ============ PLAYER CRAWL (7/6/26 evening, owner-directed) ============
   Sold single-line crawl in the persistent player: the open strip from
   the station label to the volume control, full bar height, the player's
   own quiet voice (no ribbon). Session-shuffled deck rotation. Absent
   entirely when no player-mode banners are live - the bar renders
   byte-identical to before. */
.player-crawl {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.pc-track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;                     /* JS conveyor belt - no CSS animation */
}
.pc-msg { font-size: 15px; font-weight: 600; color: #33415C; }
.pc-sep { display: inline-block; padding: 0 28px; color: #9AA6C4; }
.player-bar.has-crawl .player-label { flex: 0 0 auto; padding-right: 14px; }
@media (max-width: 679px) { .pc-msg { font-size: 14px; padding-right: 60px; } }
@media (prefers-reduced-motion: reduce) {
  .pc-track { animation: none !important; }
  .pc-msg[aria-hidden="true"] { display: none; }
}


/* ============ Persistent shell (7/7/26) ============ */
/* Sports Archive inversion via soft navigation: the server-suppressed
   chrome stays in the DOM but hides; padding offsets collapse so the
   page sits exactly where a hard-loaded archive page would. */
body.shell-suppress .site-ticker,
body.shell-suppress .player-bar { display: none !important; }
body.shell-suppress { padding-top: 0 !important; padding-bottom: 20px !important; }
body.shell-suppress .site-nav { top: 0 !important; }

/* Soft-navigation loading affordance: subtle, no spinners */
body.shell-loading { cursor: progress; }
body.shell-loading #wcdoMain { opacity: 0.55; }
#wcdoMain { transition: opacity 0.15s ease; }

/* Screen-reader-only announcement region */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* ============ 7/7/26 front-page reorg additions ============ */
/* Digest title box: name left, guided full-calendar cue right - the
   "this feed is a small bite of the full page" signal. */
.dg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.dg-head h3 { margin: 0; }
.dg-full {
  font-size: 12px;
  font-weight: 700;
  color: var(--identity-blue);
  text-decoration: none;
  white-space: nowrap;
}
.dg-full:hover { text-decoration: underline; }

/* Digest items: contact + linked-webpage lines (same public fields the
   calendar page's cards carry - the digest just wasn't printing them). */
.dg-contact { font-weight: 600; color: color-mix(in srgb, var(--card-text) 72%, transparent); font-size: 14px; }   /* was hardcoded #555 (7/8/26 fix) */
.dg-link { font-size: 14px; margin-top: 3px; word-break: break-all; }

/* Jewel weather icons: em-sized SVGs so every context keeps controlling
   size through font-size exactly as the old glyphs did. */
.wxi {
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.35em;
  display: inline-block;
}
.wx-icon .wxi { width: 1.6em; height: 1.6em; }


/* ============ 7/7/26 polish: alert pill + day-card icons ============ */
/* NOAA active-alert pill on the front-page weather widget. Mobile: its
   own full-width row (the strip grows a line when something's in effect -
   deliberately; this is in-the-moment information). Desktop: parks in the
   widget's open top-right. Severity colors reuse .alert-red/gold/blue.
   Nothing active = the markup simply isn't rendered. */
.wx-alert-pill {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  padding: 6px 12px;
  margin-top: 8px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
.wx-alert-pill.alert-gold { color: #3a2500; }

/* Day mini-cards: forecast-in-a-picture - name / jewel icon / high temp */
.wx-day-icon { display: block; line-height: 1; margin: 3px 0 2px; }
.wx-day-icon .wxi { width: 1.9em; height: 1.9em; vertical-align: middle; }

@media (min-width: 900px) {
  .wx-alert-pill {
    position: absolute;
    top: 12px;
    right: 14px;
    width: auto;
    max-width: 55%;
    margin: 0;
    font-size: 12px;
    padding: 5px 11px;
    text-align: left;
  }
}

/* ============================================================
   Sports Archive Pass 2 (7/7/26): Sports on Demand public page,
   /sports/ hub additions, /sports/awards/ history.
   ============================================================ */

/* Masthead logo (sports-on-demand.webp, 800x740) - hub + archive */
.sports-masthead { text-align: center; margin: 4px 0 16px; }
.sports-masthead img { width: 230px; max-width: 70%; height: auto; filter: drop-shadow(0 8px 12px rgba(0,0,0,0.18)); }

/* Seasonal sponsor slot - single swap-file, renders nothing when absent */
.sponsor-slot { text-align: center; margin: 0 0 20px; }
.sponsor-slot img { max-width: 100%; height: auto; border-radius: 16px; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.18)); }

/* Filter bar (archive + awards history) */
.ga-filter {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  background: linear-gradient(160deg, #ffffff 0%, #f7f7fa 55%, #eeeef2 100%);
  border: 1.5px solid #e2e2e8; border-radius: 18px;
  padding: 12px 14px; margin-bottom: 18px;
}
.ga-filter select, .ga-filter input[type="search"] {
  font-family: "Fredoka", sans-serif; font-size: 14px;
  padding: 9px 12px; border: 1.5px solid #d5d5dd; border-radius: 12px;
  background: #fff; color: #1a1a1a;
}
.ga-filter input[type="search"] { flex: 1 1 200px; min-width: 150px; }
.ga-filter select:focus, .ga-filter input[type="search"]:focus { outline: 2px solid var(--identity-gold); outline-offset: 1px; }
.ga-clear { font-size: 13px; font-weight: 600; color: var(--identity-gold); text-decoration: underline dotted; }

/* Season groups + dense rows */
.ga-season { margin-bottom: 22px; }
.ga-season-tab {
  display: inline-block; font-family: "Fredoka", sans-serif; font-weight: 700;
  font-size: 14px; color: #fff; letter-spacing: 0.02em;
  background: var(--jewel-gold); border-radius: 14px 14px 0 0;
  padding: 7px 18px 6px; text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}
.ga-season-tab .ga-count { font-weight: 400; font-size: 12px; opacity: 0.9; margin-left: 8px; }
.ga-season > .ga-game { border-left: 1.5px solid #e6e6ec; border-right: 1.5px solid #e6e6ec; }
.ga-season > .ga-game:first-of-type { border-top: 1.5px solid #e6e6ec; border-radius: 0 12px 0 0; }
.ga-season > .ga-game:last-of-type { border-bottom: 1.5px solid #e6e6ec; border-radius: 0 0 12px 12px; }

.ga-game { background: #fff; }
.ga-game + .ga-game { border-top: 1px solid #efeff4; }
.ga-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 40px; padding: 6px 12px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: "Fredoka", sans-serif; font-size: 14px; color: #1a1a1a;
}
.ga-row:hover { background: #fbf6ea; }
.ga-playicon {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--jewel-gold); color: #1F1300;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; box-shadow: inset 0 2px 2px rgba(255,255,255,0.7), inset 0 -2px 3px rgba(0,0,0,0.25);
}
.ga-caret { flex: 0 0 auto; width: 26px; text-align: center; color: var(--identity-gold); font-size: 15px; transition: transform 0.15s ease; }
.ga-open > .ga-expander .ga-caret { transform: rotate(90deg); }
.ga-date { flex: 0 0 64px; font-weight: 600; color: #555; font-size: 13px; }   /* correctly reverted 7/8/26: .ga-game has its OWN fixed white background - was never actually broken */
.ga-chip {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--identity-gold);
  border: 1.5px solid var(--identity-gold); border-radius: 12px; padding: 2px 9px;
  white-space: nowrap;
}
.ga-matchup { flex: 1 1 auto; line-height: 1.3; }
.ga-note { font-size: 12px; color: var(--page-soft4); font-style: italic; }
.ga-parts-badge { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #777; background: #f0f0f5; border-radius: 10px; padding: 3px 9px; white-space: nowrap; }
.ga-parts { background: #fafafc; border-top: 1px dashed #e6e6ec; }
.ga-part { min-height: 36px; padding-left: 34px; font-size: 13px; }
.ga-partlabel { font-weight: 600; color: #444; }   /* correctly reverted 7/8/26: same fixed-white-row container as .ga-date */
.ga-play.ga-active { background: #fdf3dd; }
.ga-play.ga-active .ga-playicon { background: var(--jewel-red); color: #fff; }

/* Download buttons (added 7/10/26 - Craig's call, reverses the original
   no-download decision; owner-confirmed, deliberate reversal not an oversight) */
.ga-row-wrap { display: flex; align-items: center; }
.ga-row-wrap > .ga-row { flex: 1 1 auto; width: auto; min-width: 0; }
.ga-download {
  flex: 0 0 auto; width: 26px; height: 26px; margin-right: 10px;
  border-radius: 50%; background: #f0f0f5; color: #556;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; text-decoration: none; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ga-download:hover { background: var(--jewel-gold); color: #1F1300; }
.ga-download-part { width: 22px; height: 22px; font-size: 12px; }

/* Sticky bottom game player - light theme, gold top border (Section 3).
   Occupies the slot the suppressed stream bar would have used. */
.ga-player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; gap: 12px;
  background: #ffffff; border-top: 3px solid var(--identity-gold);
  box-shadow: 0 -6px 16px rgba(0,0,0,0.14);
  padding: 10px 16px;
}
.ga-player[hidden] { display: none; }
.ga-player-toggle {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--jewel-gold); color: #1F1300; font-size: 16px;
  box-shadow: inset 0 3px 3px rgba(255,255,255,0.8), inset 0 -3px 4px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.2);
}
.ga-player-body { flex: 1 1 auto; min-width: 0; }
.ga-player-label {
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 14px;
  color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 3px;
}
.ga-player-scrub { display: flex; align-items: center; gap: 10px; }
.ga-time { font-size: 12px; font-weight: 600; color: #777; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.ga-player-scrub input[type="range"] { flex: 1 1 auto; accent-color: #B87700; min-width: 0; }
/* room for the sticky bar so the last rows never hide behind it */
body.no-player .site-content { padding-bottom: 90px; }

/* Awards: recent box on /sports/ + full history page */
.awards-box .aw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.aw-full { font-size: 13px; font-weight: 700; color: var(--identity-gold); text-decoration: none; white-space: nowrap; }
.aw-full:hover { text-decoration: underline; }
.aw-intro { font-family: "Fredoka", sans-serif; font-size: 15px; color: var(--page-soft1); max-width: 720px; margin: 0 0 16px; }   /* 7/8/26 fix: page-level intro, not inside a card */
.aw-game { padding: 10px 2px; }
.aw-game + .aw-game { border-top: 1px dashed #e6e6ec; }
.aw-gameline { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.aw-winner { font-family: "Fredoka", sans-serif; font-size: 14px; line-height: 1.55; color: var(--card-text); }   /* 7/8/26 fix: was hardcoded #333, invisible on a dark card */
.aw-award { font-weight: 600; color: var(--identity-gold); }
.aw-team { color: color-mix(in srgb, var(--card-text) 65%, transparent); }   /* 7/8/26 fix */
.aw-history .aw-game { background: #fff; padding: 10px 14px; }
.aw-history .ga-season > .aw-game { border-left: 1.5px solid #e6e6ec; border-right: 1.5px solid #e6e6ec; }
.aw-history .ga-season > .aw-game:first-of-type { border-top: 1.5px solid #e6e6ec; border-radius: 0 12px 0 0; }
.aw-history .ga-season > .aw-game:last-of-type { border-bottom: 1.5px solid #e6e6ec; border-radius: 0 0 12px 12px; }

/* Upcoming Broadcasts box (7/13/26) - same visual family as the
   Awards box just above; own class names since it's an independent
   feature (not a repurposing of games/game_files). */
.schedule-box h3 { margin: 0 0 8px; }
.sched-game { padding: 10px 2px; }
.sched-game + .sched-game { border-top: 1px dashed #e6e6ec; }
.sched-gameline { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.sched-meta { font-family: "Fredoka", sans-serif; font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--card-text) 70%, transparent); }
.sched-sport { font-weight: 600; color: var(--identity-gold); }

@media (max-width: 680px) {
  .ga-date { flex-basis: 56px; }
  .ga-row { flex-wrap: wrap; row-gap: 2px; }   /* long matchups wrap under the chip on phones */
  .ga-chip { font-size: 10px; padding: 2px 7px; }
  .ga-filter select { flex: 1 1 44%; }
  .ga-player-label { font-size: 13px; }
  .sports-masthead img { width: 180px; }
}

/* ---- Sports hub 2-column rework (7/7/26): mobile-first stack; desktop
   25/75 split (1fr/3fr with gap). Awards box shows last 2 games on
   mobile with the prominent bottom link; full 5 + header link on
   desktop. Scoped to .sports-left so the shared box is untouched
   elsewhere (wcdosports.com reuse keeps its own behavior). ---- */
.sports-2col { display: block; }
.sports-left .sports-masthead { margin-top: 0; }
.sports-stack-btns { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 16px; }
.sports-stack-btns .gloss-btn { display: block; text-align: center; }
.sports-left .photo-invite { margin-top: 0; }
.aw-full-bottom { display: block; text-align: center; font-family: "Fredoka", sans-serif;
  font-weight: 700; font-size: 15px; color: var(--identity-gold); text-decoration: none; padding: 12px 0 2px; }
.aw-full-bottom:hover { color: #F5A800; }
.sports-left .aw-games .aw-game:nth-child(n+3) { display: none; }
@media (min-width: 900px) {
  .sports-2col { display: grid; grid-template-columns: 1fr 3fr; gap: 26px; align-items: start; }
  .sports-left .sports-masthead img { width: 100%; max-width: 230px; }
  .sports-left .aw-games .aw-game:nth-child(n+3) { display: block; }
  .sports-left .aw-full-bottom { display: none; }
}

/* ---- Public click-to-zoom lightbox (7/7/26): constrained article/event
   photos open full-size in an overlay instead of a new tab. Markup keeps
   the plain href so no-JS still reaches the image. Mirrors the staff
   lightbox look. ---- */
.wcdo-lightbox {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(6, 8, 24, 0.86);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  padding: 24px; cursor: zoom-out;
}
.wcdo-lightbox img {
  max-width: 96vw; max-height: 88vh; border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6); display: block;
}
.wcdo-lightbox .lb-cap { color: #dfe3f0; font-size: 14px; font-family: var(--font); max-width: 90vw; text-align: center; }
.wcdo-lightbox-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; color: #fff; font-size: 34px;
  font-family: var(--font); cursor: pointer; line-height: 1;
}
@media (max-width: 899px) {
  .pm-inline img, .pm-count-1 .pm-img img { max-height: 320px; }
  .pm-count-2 .pm-img img, .pm-count-3 .pm-img img { height: 150px; }
}

/* ---- Sports Archive desktop 2-col rework (7/7/26): mobile keeps the
   proven stack (logo, sponsor, filter, seasons) - the awards side box
   simply doesn't exist under 900px. Desktop: 25/75 with the searchable
   awards box giving the left rail its body. ---- */
.ga-2col { display: block; }
.ga-left .awards-box.aw-side { display: none !important; }
.aw-side-filter { flex-direction: column; align-items: stretch; padding: 10px; margin: 4px 0 10px; }
.aw-side-filter select, .aw-side-filter input[type="search"], .aw-side-filter .gloss-btn { flex: none; }
.aw-side-filter select, .aw-side-filter input[type="search"] { width: 100%; }
.aw-side-filter .gloss-btn { text-align: center; }
.aw-side-empty { font-size: 14px; color: color-mix(in srgb, var(--card-text) 60%, transparent); margin: 6px 2px; }   /* 7/8/26 fix, corrected: genuinely inside the themed card-inner, not page-scoped */
.aw-side .aw-games { max-height: 900px; overflow-y: auto; }
.aw-side-more { display: block; }
@media (min-width: 900px) {
  .ga-2col { display: grid; grid-template-columns: 1fr 3fr; gap: 26px; align-items: start; }
  .ga-left .awards-box.aw-side { display: block !important; }
  .ga-left .sports-masthead { margin-top: 0; }
  .ga-left .sports-masthead img { width: 100%; max-width: 230px; }
  .ga-left .sponsor-slot { margin-bottom: 16px; }
}

/* ============ ADVERTISE WITH US (7/7/26) ============
   Staff grid: row 1 = three people; row 2 = Bev + form spanning
   the two right columns. Mobile: everything stacks. Headshots are
   drop-in (/assets/img/staff/{key}.jpg); initials circle until then. */
.adv-section-head {
  font-family: var(--font); font-weight: 700; font-size: 21px;
  color: var(--identity-blue); border-bottom: 3px solid var(--identity-blue);
  padding-bottom: 6px; margin: 28px 0 16px;
}
.adv-phone { color: var(--identity-blue); text-decoration: none; white-space: nowrap; }
.adv-staff-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.adv-person {
  background: linear-gradient(160deg, #ffffff 0%, #f7f7fa 55%, #eeeef2 100%);
  border-radius: 20px; padding: 22px 16px; text-align: center;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.15));
}
.adv-headshot, .adv-initials {
  width: 110px; height: 110px; border-radius: 50%;
  margin: 0 auto 12px; display: block; object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px var(--identity-blue), 0 4px 8px rgba(0,0,0,0.2);
}
.adv-initials {
  background: var(--jewel-blue); color: #fff;
  font-family: var(--font); font-weight: 700; font-size: 36px;
  line-height: 102px; text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.adv-name { font-family: var(--font); font-weight: 700; font-size: 17px; color: var(--card-text); }   /* 7/8/26 fix */
.adv-title { font-family: var(--font); font-weight: 400; font-size: 13px; color: #666; margin-top: 2px; }
.adv-form-cell { min-width: 0; }
.adv-docs-hint { font-size: 13px; color: #888; font-style: italic; margin: -6px 0 12px; }
.adv-docs { display: grid; grid-template-columns: 1fr; gap: 18px; }
.adv-docs figure { margin: 0; }
.adv-docs img {
  width: 100%; height: auto; display: block; border-radius: 14px;
  border: 1.5px solid #ddd; cursor: zoom-in;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));
}
.adv-docs figcaption {
  font-family: var(--font); font-weight: 600; font-size: 13px;
  color: #555; text-align: center; margin-top: 6px;
}
.pub-errors {
  background: #FDECEC; border-left: 4px solid #A3002E; color: #7A0021;
  font-size: 14px; padding: 10px 14px; border-radius: 0 8px 8px 0; margin-bottom: 10px;
}
.hp-wrap { position: absolute; left: -9999px; top: -9999px; height: 1px; overflow: hidden; }
@media (min-width: 680px) {
  .adv-staff-grid { grid-template-columns: repeat(3, 1fr); }
  .adv-form-cell { grid-column: 2 / 4; }
  .adv-docs { grid-template-columns: repeat(3, 1fr); }
  .adv-docs figure:first-child { grid-column: 1 / 4; }   /* coverage map full width */
}

/* ============ NEWS SEARCH REBUILD (7/7/26) ============ */
.gold-ctl { background: var(--jewel-gold) !important; color: #1F1300 !important; }
.sr-toolbar { margin: 0 0 16px; }
.sr-views { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sr-view {
  font-family: var(--font); font-size: 13px; font-weight: 700;
  padding: 6px 14px; border-radius: 16px; text-decoration: none;
  background: #fff; color: #A3002E; border: 1.5px solid #A3002E;
}
.sr-view.on { background: #A3002E; color: #fff; }
.sr-years { display: flex; gap: 6px; flex-wrap: wrap; }
.sr-yr {
  font-family: var(--font); font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 12px; text-decoration: none;
  background: #f2f2f5; color: #555;
}
.sr-yr.on { background: #A3002E; color: #fff; }
mark { background: #FFE08A; color: inherit; padding: 0 2px; border-radius: 3px; }

.sr-item {
  background: linear-gradient(160deg, #ffffff 0%, #f7f7fa 55%, #eeeef2 100%);
  border-left: 5px solid #A3002E; border-radius: 12px;
  padding: 14px 18px; margin-bottom: 14px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.1));
}
.sr-item-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.sr-item-head a { font-family: var(--font); font-weight: 700; font-size: 16px; color: var(--identity-red); text-decoration: none; }   /* 7/8/26 fix */
.sr-hitcount, .sr-tagonly { font-size: 12px; color: var(--page-soft4); }
.sr-story { font-size: 15px; line-height: 1.6; margin-bottom: 8px; }
.sr-story + .sr-story { border-top: 1px dashed #ddd; padding-top: 8px; }
.sr-fullday { font-size: 13px; font-weight: 700; color: var(--identity-gold); text-decoration: none; }   /* 7/8/26 fix */

.sr-line { display: flex; gap: 12px; align-items: baseline; padding: 7px 4px; border-bottom: 1px solid #eee; }
.sr-line-date { font-family: var(--font); font-weight: 700; font-size: 14px; color: var(--identity-red); text-decoration: none; flex: none; width: 72px; }   /* 7/8/26 fix */
.sr-line-text { font-size: 14px; color: var(--page-text); }   /* 7/8/26 fix: search result rows are page-scoped dense rows */
.sr-pageline { font-size: 13px; color: #888; align-self: center; }

/* ============ RESEARCH ROOM (7/7/26) ============ */
.rr-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.rr-tab {
  font-family: var(--font); font-size: 14px; font-weight: 700;
  padding: 8px 20px; border-radius: 20px; text-decoration: none;
  background: #fff; color: #A3002E; border: 2px solid #A3002E;
}
.rr-tab.on { background: #A3002E; color: #fff; }
.rr-tab.rr-random { border-color: #B87700; color: var(--identity-gold); margin-left: auto; }   /* border stays bright (3:1 UI-boundary threshold, already clears); text darkened for 4.5:1 */
.rr-intro { font-size: 14px; color: #666; }
.rr-cloud { line-height: 2.2; text-align: center; padding: 10px 0 16px; }
.rr-t { font-family: var(--font); font-weight: 600; text-decoration: none; color: var(--identity-blue); white-space: nowrap; margin: 0 4px; }   /* 7/8/26 fix: was hardcoded factory blue */
.rr-t:hover { color: #A3002E; }
.rr-s1 { font-size: 12px; color: #7a86c9; }
.rr-s2 { font-size: 15px; color: #4a5ab8; }
.rr-s3 { font-size: 19px; }
.rr-s4 { font-size: 25px; font-weight: 700; }
.rr-s5 { font-size: 34px; font-weight: 700; color: var(--identity-red); }   /* 7/8/26 fix */
.rr-find { border-top: 1px solid #eee; padding-top: 14px; }
.rr-find label { display: block; font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--card-text) 80%, transparent); margin-bottom: 6px; }   /* 7/8/26 fix: borderline lightness delta on a dark card */
.rr-find input {
  width: 100%; max-width: 420px; padding: 11px 12px; font-size: 16px;
  font-family: var(--font); border: 1.5px solid #ccc; border-radius: 10px;
}
.rr-tag-results { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; max-width: 420px; }
.rr-suggest {
  display: flex; justify-content: space-between; padding: 7px 12px;
  font-family: var(--font); font-size: 14px; font-weight: 600;
  color: #0E23A3; text-decoration: none; background: #f6f7fa; border-radius: 8px;
}
.rr-suggest:hover { background: #ECEFF9; }
.rr-suggest-n { color: var(--page-soft4); font-weight: 400; }

.rr-otd-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.rr-otd-pick { display: flex; gap: 6px; align-items: center; }
.rr-otd-pick select { padding: 8px 10px; font-size: 15px; font-family: var(--font); border: 1.5px solid #ccc; border-radius: 10px; }
.rr-otd-head {
  font-family: var(--font); font-weight: 700; font-size: 21px;
  color: #A3002E; border-bottom: 3px solid #A3002E;
  padding-bottom: 6px; margin: 4px 0 16px;
}
.rr-otd-count { font-size: 14px; font-weight: 400; color: var(--page-soft4); margin-left: 10px; }
.rr-otd-year { margin-bottom: 8px; }
.rr-otd-yearlabel {
  font-family: var(--font); font-weight: 700; font-size: 17px; color: var(--page-soft1);
  margin: 14px 0 8px; padding-left: 4px;
}
.rr-otd-card .card-inner h3 a { color: inherit; text-decoration: none; }
@media (max-width: 560px) {
  .rr-tab.rr-random { margin-left: 0; }
  .sr-line-date { width: 62px; }
}
.rr-dedication {
  font-family: var(--font); font-size: 15px; line-height: 1.6;
  color: var(--page-soft1); font-style: italic; max-width: 640px;
  border-left: 4px solid #A3002E; padding-left: 14px; margin: 0 0 18px;
}

/* ---- Research Room expansion (7/8/26): Timeline / Trends / Vault ---- */
.rr-sponsor {
  font-family: var(--font); font-size: 14px; color: #6b5a1f;
  background: #FFF8E8; border-left: 4px solid #F5A800;
  padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 0 0 16px;
}
/* Timeline heatmap */
.rr-heat-legend {
  font-family: var(--font); font-size: 12px; color: #888;
  display: flex; align-items: center; gap: 4px; margin-bottom: 14px;
}
.rr-hl { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.rr-heat-year { margin-bottom: 18px; }
.rr-heat-label {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px;
  font-family: var(--font);
}
.rr-heat-y { font-size: 18px; font-weight: 700; color: var(--identity-red); }   /* 7/8/26 fix */
.rr-heat-n { font-size: 12px; color: var(--page-soft4); }
.rr-heat-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rr-heat { display: block; }
.rr-heat-m { font-family: var(--font); font-size: 9px; fill: #999; }
.rr-heat a rect { cursor: pointer; }
.rr-heat a:hover rect { stroke: #F5A800; stroke-width: 1.5; }
/* Trends */
.rr-trend-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rr-trend-form input[type="text"] { flex: 1; min-width: 200px; }
.rr-trend-chart {
  display: flex; align-items: stretch; gap: 3px; margin-top: 16px;
  height: 170px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.rr-trend-col {
  display: flex; flex-direction: column; align-items: center;
  min-width: 30px; flex: 1;
}
.rr-trend-v { font-family: var(--font); font-size: 10px; color: var(--page-soft4); height: 16px; }
.rr-trend-barwrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.rr-trend-bar {
  display: block; width: 70%; max-width: 26px; border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #DC4A6E 0%, #A3002E 100%);
  transition: filter 0.15s ease;
}
.rr-trend-bar:hover { filter: brightness(1.2) drop-shadow(0 0 4px rgba(245,168,0,0.6)); }
.rr-trend-y { font-family: var(--font); font-size: 10px; color: #666; margin-top: 4px; }
.rr-trend-hint { font-family: var(--font); font-size: 12px; color: var(--page-soft4); margin: 8px 0 0; }
/* Runs With / debut pills */
.rr-with { display: flex; flex-wrap: wrap; gap: 8px; }
.rr-with-pill {
  font-family: var(--font); font-size: 13px; font-weight: 600;
  color: #A3002E; background: #fff; border: 1.5px solid #A3002E;
  border-radius: 16px; padding: 5px 14px; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.rr-with-pill span { font-weight: 400; color: #999; margin-left: 4px; font-size: 11px; }
.rr-with-pill:hover { background: #A3002E; color: #fff; }
.rr-with-pill:hover span { color: rgba(255,255,255,0.75); }
/* Vault stat cards */
.rr-stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px; margin-top: 6px;
}
.rr-stat {
  background: linear-gradient(160deg, #ffffff 0%, #f7f7fa 55%, #eeeef2 100%);
  border: 1.5px solid #e4e4ea; border-radius: 14px; padding: 14px 16px;
  font-family: var(--font);
}
.rr-stat-n { font-size: 26px; font-weight: 700; color: var(--identity-red); line-height: 1.1; }   /* 7/8/26 fix */
.rr-stat-n.rr-stat-t { font-size: 19px; word-break: break-word; }
.rr-stat-n a { color: var(--identity-red); text-decoration: none; }   /* 7/8/26 fix */
.rr-stat-n a:hover { text-decoration: underline; }
.rr-stat-l { font-size: 12px; color: #888; margin-top: 4px; line-height: 1.4; }
.rr-records { font-family: var(--font); }
.rr-record { padding: 10px 0; border-bottom: 1px dashed #ddd; }
.rr-record:last-child { border-bottom: none; }
.rr-record-l { font-size: 12px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.04em; }
.rr-record-v { font-size: 16px; color: var(--card-text); margin-top: 2px; }   /* 7/8/26 fix: was hardcoded #333, invisible on a dark card */
.rr-record-v a { color: var(--identity-red); font-weight: 600; }   /* 7/8/26 fix */

/* ---- Print controls + stack pill (7/8/26, staff-only render) ---- */
.print-ctl { display: inline-flex; gap: 6px; align-items: center; margin-left: 10px; vertical-align: middle; }
.print-ctl-btn {
  font-family: var(--font); font-size: 11px; font-weight: 700;
  color: #556; background: #fff; border: 1.5px solid #c5c5d0;
  border-radius: 12px; padding: 3px 12px; cursor: pointer;
  text-decoration: none; line-height: 1.4;
}
.print-ctl-btn:hover { border-color: var(--identity-blue); color: var(--identity-blue); }
.ticker-print-dock {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  z-index: 2;   /* sits above the scrolling track, never gets swept into the crawl */
  background: rgba(255,255,255,0.92); border-radius: 14px; padding: 2px 4px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25));
}
.ticker-print-dock .print-ctl-btn { font-size: 10px; padding: 3px 10px; }
@media (max-width: 679px) {
  /* 7/10/26, tested on real device: the earlier version hid this
     entirely on mobile out of caution (no way to verify the two-row
     Stormwatch layout without a real phone) - confirmed nothing showed,
     and now confirmed safe to enable. Positioned against the bottom
     48px specifically (not vertically centered on the whole bar),
     because Stormwatch almost always carries a label, which pushes the
     ticker into the 74px two-row state (26px label band + 48px content
     row) - centering on the full 74px would land the dock straddling
     both rows. bottom:0 + height:48px lands correctly in the content
     row in EITHER state: the plain unlabeled 48px bar (spans it exactly)
     or the labeled 74px bar (spans just the bottom 48px, clear of the
     26px label band above it). */
  .ticker-print-dock {
    top: auto; bottom: 0; transform: none;
    height: 48px; right: 4px;
    display: flex; align-items: center;
  }
  .ticker-print-dock .print-ctl-btn { font-size: 9px; padding: 2px 8px; }
}
#wcdoStackPill {
  position: fixed; right: 16px; bottom: calc(var(--player-height, 58px) + 16px);
  z-index: 9000; display: none; align-items: center; gap: 10px;
  font-family: var(--font); font-size: 14px; font-weight: 700;
  color: #1F1300; background: var(--jewel-gold);
  border-radius: 24px; padding: 10px 18px; text-decoration: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.3));
}
#wcdoStackPillClear {
  font-family: var(--font); font-size: 16px; font-weight: 700; line-height: 1;
  color: #1F1300; background: rgba(255,255,255,0.5); border: none;
  border-radius: 50%; width: 22px; height: 22px; cursor: pointer; padding: 0;
}
body.no-player #wcdoStackPill { bottom: 16px; }

/* Toolbox pill (7/10/26 delta) - always its own fixed slot, directly
   above where the print-stack pill sits, whether or not that pill is
   currently showing (it only appears when the stack has items - this
   one is always present for staff, so it can't be positioned relative
   to something that toggles on/off). */
.wcdo-toolbox-pill {
  position: fixed; right: 16px; bottom: calc(var(--player-height, 58px) + 16px + 58px);
  z-index: 9000; display: flex; align-items: center;
  font-family: var(--font); font-size: 14px; font-weight: 700;
  color: #fff; background: var(--jewel-blue, #0E23A3);
  border-radius: 24px; padding: 10px 18px; text-decoration: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.3));
}
body.no-player .wcdo-toolbox-pill { bottom: 74px; }

/* ---- Global print baseline (7/8/26): every public page prints clean.
   Chrome and gloss vanish; cards flatten to thin-bordered boxes;
   black on white; nothing splits mid-card. ---- */
@media print {
  .site-nav, .site-banner, .site-footer, .player-bar, #wcdoPlayer,
  [class*="ticker"], .breadcrumb, .gloss-btn, .staff-btn, .print-ctl,
  #wcdoStackPill, .nav-search, form, .rr-tabs, .share-row,
  .news-controls, .sr-toolbar, .col-cta, .sponsor-slot { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  body { padding: 0 !important; }
  .site-content { max-width: 100% !important; padding: 0 !important; }
  .glossy-card {
    background: none !important; padding: 0 !important;
    filter: none !important; box-shadow: none !important;
    border: 1.5px solid #666 !important; border-radius: 8px !important;
    margin-bottom: 14px !important; break-inside: avoid;
  }
  .card-inner { background: #fff !important; border-radius: 6px !important; }
  .page-heading { color: #000 !important; border-color: #000 !important; }
  a { color: #000 !important; text-decoration: none !important; }
  img, video, audio { display: none !important; }
}

/* ---- Homepage freshness pill (7/8/26) ---- */
#wcdoFreshPill {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 9500; display: none;
  font-family: var(--font); font-size: 14px; font-weight: 700;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  background: var(--jewel-red); border-radius: 22px; padding: 10px 22px;
  text-decoration: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}
body.has-ticker #wcdoFreshPill { top: 52px; }
@media print { #wcdoFreshPill { display: none !important; } }

/* ---- Effect layer (7/8/26 Holiday Theme lever: snow/fireworks/bats) ---- */
#wcdoEffect {
  position: fixed; inset: 0; z-index: 8000;
  pointer-events: none;
}
.snow-cap {
  position: absolute; top: -3px; left: 6%; right: 6%; height: var(--h, 0px);
  background: linear-gradient(180deg, #ffffff 0%, #eef3fa 100%);
  border-radius: 50% 50% 8px 8px / 100% 100% 6px 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  pointer-events: none; z-index: 2;
  transition: height 0.6s ease-out;
}
@media print {
  #wcdoEffect, .snow-cap { display: none !important; }
}

/* ---- Leaves effect: card-top cap (7/8/26, autumn cousin of snow-cap) ---- */
.leaf-cap {
  position: absolute; top: -3px; left: 6%; right: 6%; height: var(--h, 0px);
  background: repeating-linear-gradient(96deg,
    #C1440E 0px 7px, #D9822B 7px 14px, #B8860B 14px 21px,
    #8B4513 21px 28px, #CC5500 28px 35px, #A0522D 35px 42px);   /* 7/8/26 fix: was a flat brown gradient reading as a single accumulating line - now distinct color chips, per owner note */
  border-radius: 50% 50% 8px 8px / 100% 100% 6px 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  pointer-events: none; z-index: 2;
  transition: height 0.6s ease-out;
}

/* ---- Spiderwebs (Halloween, bundled with Bats) ---- */
.spiderweb-corner {
  position: fixed; top: 0; z-index: 7999; pointer-events: none; opacity: 0.85;
}
.spiderweb-corner.sw-tl { left: 0; }
.spiderweb-corner.sw-tr { right: 0; }
.spiderweb-card {
  /* Position is now set entirely inline via JS (getBoundingClientRect
     math, document-relative) - two prior CSS-only positioning attempts
     failed on staging, so all placement logic lives in one place now.
     This class only carries the visual look. */
  opacity: 0.8;
}
.spiderweb-card.sw-mirror { transform: scaleX(-1); }

@media print {
  .leaf-cap, .spiderweb-corner, .spiderweb-card { display: none !important; }
}

/* ---- Motion effect toggle (7/8/26, owner idea) ---- */
#wcdoMotionToggle {
  position: fixed; left: 14px; bottom: calc(var(--player-height, 58px) + 14px);
  z-index: 8001;
  font-family: var(--font); font-size: 12.5px; font-weight: 700;
  color: #445; background: rgba(255,255,255,0.92);
  border: 1.5px solid #d5d5dd; border-radius: 20px;
  padding: 7px 14px; cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  opacity: 0.55; transition: opacity 0.15s ease;
}
#wcdoMotionToggle:hover, #wcdoMotionToggle:focus-visible { opacity: 1; }
body.no-player #wcdoMotionToggle { bottom: 14px; }
@media print { #wcdoMotionToggle { display: none !important; } }

/* ---- Twinkle lights (7/9/26, Christmas). SAFETY REQUIREMENT (owner,
   photosensitivity-motivated, not just taste): this must never read as
   a strobe. The keyframe fades over a period measured in SECONDS (each
   bulb's animation-duration is 2.8-4.2s, set inline per bulb in JS),
   between a dim floor (0.35) and full brightness - never a hard on/off
   snap - and every bulb carries its own randomized negative delay so
   the string is desynchronized from the first frame it appears, never
   converging into a shared flash. ---- */
@keyframes wcdo-twinkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
.xmas-bulb {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  z-index: 50; pointer-events: none;
  animation-name: wcdo-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
  .xmas-bulb { animation: none; opacity: 0.85; }   /* still visible as static lights, just no fade */
}
@media print {
  .xmas-bulb, .garland-corner, .garland-card { display: none !important; }
}

/* ---- Corner garland (7/9/26, Christmas) - same visual treatment
   pattern as the Halloween spiderwebs: static, placed once, no ongoing
   animation cost. ---- */
.garland-corner {
  position: fixed; top: 0; z-index: 7999; pointer-events: none; opacity: 0.92;
}
.garland-corner.gc-tl { left: 0; }
.garland-corner.gc-tr { right: 0; }
.garland-card { opacity: 0.9; }
/* gc-mirror class removed 7/9/26 - two explicit shapes (gsvgL/gsvgR)
   replace the transform-based mirror entirely, see runCornerGarland() */

/* ---- Skip-to-content link (7/9/26, ADA pass). Off-screen until a
   keyboard user Tabs to it, then slides into view - standard
   accessible pattern (WCAG 2.4.1 Bypass Blocks). Lets a keyboard or
   screen-reader visitor jump past the nav/ticker on every single page
   instead of tabbing through it every time. ---- */
.skip-link {
  position: absolute; top: -100px; left: 8px; z-index: 10000;
  background: var(--identity-red, #A3002E); color: #fff;
  padding: 10px 18px; border-radius: 0 0 8px 8px;
  font-family: var(--font); font-weight: 700; text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }