/* ============================================================
   236 SEATS -- ga-legislators bespoke flagship, ROUND TWO
   "Marble and gold leaf", rendered as material this time:
   veined Georgia marble ground, Dahlonega-gold dome line and
   architrave anchoring the stage, engraved-brass nameplates and
   beat plates, a capitol directory board. Authored fully scoped
   under .gls2 (custom props on .gls2, not :root) so the WP
   bundle needs no prefixer.

   Contrast ratios computed 2026-07-07 (rework log):
     ink #2a241c on marble #f7f3ec .......... 13.88  body
     ink #2a241c on marble-2 #efe9df ........ 12.72
     text gold #7a5f24 on marble ............ 5.44   small gold text
     deep gold #6b5320 on marble-2 .......... 6.03   method h3 etc
     gray note #5f5749 on marble / marble-2 . 6.44 / 5.90
     ink-soft #4a4034 on marble ............. 9.15
     gold-on-ink #c9a55a on ink ............. 6.59   directory board head
     engraved #1d1812 on brass mid #b3924a .. 5.98   brass plate text
     engraved #1d1812 on brass lo #a28137 ... 4.81   gradient floor
     white on seg-state #7a5f24 ............. 6.02   statewide bar chip
     oxblood #9e3b34 / navy #33517d on marble 6.07 / 7.26
     white on oxblood / navy ................ 6.71 / 8.03  party tags
     leaf gold #a8863c on marble ............ 3.09   LARGE/UI/rules ONLY
     local gray fill #b9b1a4 ................ FILL ONLY, never text
   Color is never the sole signal: every seat/tag carries an R/D
   letter; the statewide/local chips carry text labels.
   ============================================================ */

.gls2 {
  --marble: #f7f3ec;
  --marble-2: #efe9df;
  --marble-hi: #fbf8f2;
  --panel: #fffdf8;
  --ink: #2a241c;
  --ink-soft: #4a4034;
  --gray-note: #5f5749;
  --leaf-gold: #a8863c;
  --text-gold: #7a5f24;
  --deep-gold: #6b5320;
  --gold-on-ink: #c9a55a;
  --oxblood: #9e3b34;
  --trend-down: #a24b40;   /* muted oxblood-red -- session pass rate fell (r7-n6) */
  --trend-up: #4f7346;     /* muted leaf-green -- session pass rate rose (r7-n6) */
  --navy: #33517d;
  --local-fill: #b9b1a4;
  --hairline: rgba(42, 36, 28, 0.16);
  --brass-hi: #cbaa63;
  --brass-mid: #b3924a;
  --brass-lo: #a28137; /* engrave #1d1812 on this = 4.81 (gradient's darkest text zone) */
  --brass-edge: #7c5f26;
  --brass-lip: #e6cf96;
  --engrave: #1d1812;
  --gls2-hdr: 94px;
  /* veined marble: two soft radial washes + a whisper of fractal noise */
  --vein: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="480" height="480"><filter id="m"><feTurbulence type="fractalNoise" baseFrequency="0.011 0.017" numOctaves="3" seed="7"/><feColorMatrix type="matrix" values="0 0 0 0 0.32  0 0 0 0 0.27  0 0 0 0 0.19  0 0 0 0.05 0"/></filter><rect width="480" height="480" filter="url(%23m)"/></svg>');

  color: var(--ink);
  /* NOTE: no feTurbulence veining on the root -- rasterizing the noise tile
     across the whole page under mobile CPU throttle cost ~3s of LCP render
     delay (measured 2026-07-07). The vein layer lives only on the below-fold
     bands (method-panel, cta), whose content-visibility contains the cost. */
  background:
    radial-gradient(130% 80% at 22% -8%, var(--marble-hi) 0%, rgba(251,248,242,0) 55%),
    radial-gradient(120% 90% at 88% 4%, #f4eee2 0%, rgba(244,238,226,0) 60%),
    var(--marble);
  font-family: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.gls2 *, .gls2 *::before, .gls2 *::after { box-sizing: border-box; }
.gls2 h1, .gls2 h2, .gls2 h3 { font-family: "Marcellus", Georgia, serif; font-weight: 400; letter-spacing: 0.01em; line-height: 1.1; margin: 0; }
.gls2 p { margin: 0 0 1em; }
/* THEME FONT BLEED counter (2026-07-08 fix pass): the wfirm theme ships
   body, p, ul, ol, li { font-family: var(--text-font) } (Manrope). That
   element-level rule beats wrapper inheritance, so the standfirst, body
   grafs, and beat-notes rendered Manrope on staging (invisible locally).
   Force inheritance back explicitly; class-level family rules (Marcellus
   captions etc.) still win on specificity. */
.gls2 p, .gls2 ul, .gls2 ol, .gls2 li { font-family: inherit; }
/* THEME LIST-DOT BLEED (Matt 2026-07-14, n38 root cause): the theme paints a
   brand-blue dot on EVERY list item via li::before (background-color #1d84c7,
   absolute, border-radius 50%). Neutralize page-wide inside .gls2; page
   counters (hero ToC) re-declare their own content and typography on top. */
.gls2 li::before { background: none !important; border: none !important; border-radius: 0 !important; position: static !important; width: auto !important; height: auto !important; }
.gls2 a { color: var(--text-gold); text-decoration: underline; text-decoration-color: rgba(168,134,60,0.7); text-underline-offset: 2px; }
.gls2 a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.gls2 em { font-style: italic; }
.gls2 :focus-visible { outline: 2px solid var(--leaf-gold); outline-offset: 2px; }
.gls2 .visually-hidden, .gls2 .noscript-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gls2 .gls2-css-seed { display: none !important; }

.gls2 .section-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.gls2 .eyebrow { font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-gold); margin: 0 0 0.7em; font-weight: 600; }
.gls2 .num { font-variant-numeric: tabular-nums; text-align: right; }

/* --- site mark (standalone preview only; hidden in WP by extras) --- */
.gls2 .site-mark { display: flex; gap: 12px; align-items: center; padding: 18px 24px; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-note); }
.gls2 .site-mark-divider { width: 1px; height: 14px; background: var(--hairline); }

/* ============================================================
   THE FLOOR: sticky marble stage + scrolling left rail.
   The hero is the first panel of the rail, so the full hemicycle
   sits beside the H1 above the fold.
   ============================================================ */
/* the theme's fixed masthead overlays the first --gls2-hdr px of content;
   the floor claims that space so the stage's sticky engagement is exact */
.gls2 .floor { position: relative; padding-top: var(--gls2-hdr); }
/* in-page jump targets (hero TOC + any anchor link) clear that same fixed
   masthead, else a click lands the section heading behind it (n3: "clipping
   too low on their target"). --gls2-hdr is 0px on mobile, so this is a no-op
   there, where the masthead does not overlay. */
.gls2 [id^="beat-"], .gls2 #findings, .gls2 #lookup { scroll-margin-top: calc(var(--gls2-hdr) + 8px); }
.gls2 .floor-stage {
  position: sticky; top: var(--gls2-hdr);
  height: calc(100vh - var(--gls2-hdr));
  min-height: 480px;
  z-index: 1;
  display: flex; align-items: center; justify-content: flex-end;
  border-bottom: 1px solid var(--hairline);
}
.gls2 .stage-art {
  position: relative;
  width: 62%;
  max-width: 980px;
  padding: 0 24px 0 8px;
}
.gls2 .seatmap { width: 100%; height: auto; display: block; }

/* dome + architrave line drawing (Dahlonega gold, decorative) */
.gls2 .dome path, .gls2 .dome line { fill: none; stroke: var(--leaf-gold); stroke-width: 2; opacity: 0.55; }
.gls2 .dome .arch { stroke-width: 2.5; opacity: 0.5; }
.gls2 .dome .arch-2 { stroke-width: 1; opacity: 0.4; }

.gls2 .sm-chamber { fill: var(--gray-note); font-family: "Marcellus", Georgia, serif; font-size: 17px; letter-spacing: 0.22em; text-anchor: middle; }
.gls2 .sm-house { font-size: 14px; letter-spacing: 0.18em; }
.gls2 .seatmap-labels { transition: opacity 0.4s ease; }
/* r7-n8: a title for the rate-sorted layout on screen 03. The global stage
   caption was removed in rework 4 (n4/n17); Matt asked for one back on this
   one formation, whose arrangement reads least obviously. Shown only while the
   svg carries .caption-on (toggled for formation 1). */
.gls2 .stage-caption { display: none; fill: var(--text-gold); font-family: "Marcellus", Georgia, serif; font-size: 22px; letter-spacing: 0.05em; text-anchor: middle; opacity: 0; transition: opacity 0.4s ease; }
.gls2 .seatmap.caption-on .stage-caption { display: block; opacity: 1; }
.gls2 .seatmap.labels-off .seatmap-labels { opacity: 0; }

/* r18-n3: band labels for the formation-3 house/senate split (nodes built by
   app.js buildSplitLabels; shown only while that scene is active) */
.gls2 .split-label { display: none; fill: var(--gray-note); font-family: "Marcellus", Georgia, serif; font-size: 14px; letter-spacing: 0.18em; text-anchor: middle; opacity: 0; transition: opacity 0.4s ease; }
.gls2 .seatmap.split-on .split-label { display: block; opacity: 1; }
/* r19-n1: demarcation line between the House and Senate bands (split scene only) */
.gls2 .split-divider { display: none; stroke: var(--brass-edge); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0; transition: opacity 0.4s ease; }
.gls2 .seatmap.split-on .split-divider { display: block; opacity: 0.55; }

/* r18-n4 / r19-n2: the All/House/Senate stage toggle. Selecting a chamber
   RE-PACKS the packed scenes to that chamber (app.js) and HIDES the other
   chamber's seats -- a complete chart, not a dimmed one. */
.gls2 .chamber-toggle { display: flex; justify-content: center; gap: 6px; margin: 0 0 8px; }
.gls2 .cht-btn { font-family: "Libre Franklin", sans-serif; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-gold); background: none; border: 1px solid rgba(168,134,60,0.5); border-radius: 2px; padding: 4px 12px; cursor: pointer; }
.gls2 .cht-btn:hover { background: rgba(168,134,60,0.12); }
.gls2 .cht-btn.cht-on { background: var(--deep-gold); border-color: var(--deep-gold); color: #fff; }
.gls2 .seat.seat-off { display: none; }
/* the hemicycle's static chamber labels + the split bands/divider only make
   sense in the All view: the senate-only hemicycle relocates to center stage
   (its label's baked-in y would float in empty space), and the toggle itself
   already names the chamber. Hide them all under a filter. */
.gls2 .seatmap.ch-house .sm-chamber, .gls2 .seatmap.ch-senate .sm-chamber { display: none; }
.gls2 .seatmap.ch-house .split-label, .gls2 .seatmap.ch-senate .split-label,
.gls2 .seatmap.ch-house .split-divider, .gls2 .seatmap.ch-senate .split-divider { display: none; }

/* r24 (Matt, mobile popout): "make the icons larger... clicking is very
   difficult." app.js sets --sheet-dot-r/--sheet-letter-fs on the SVG root
   ONLY while the sheet is open (applySheetScale), sized per formation so nothing
   ever overlaps its neighbors; the var() fallback is the ORIGINAL fixed value,
   so desktop and the closed-sheet state are byte-for-byte unchanged. */
.gls2 .seat-dot { stroke: rgba(42,36,28,0.25); stroke-width: 0.75; r: var(--sheet-dot-r, 10.5px); }
.gls2 .seat-r .seat-dot { fill: var(--oxblood); }
.gls2 .seat-d .seat-dot { fill: var(--navy); }
.gls2 .seat-i .seat-dot { fill: var(--gray-note); }
.gls2 .seat-letter { fill: #fff; font-size: var(--sheet-letter-fs, 10.5px); font-weight: 700; text-anchor: middle; pointer-events: none; font-family: "Libre Franklin", sans-serif; }
.gls2 .seat { cursor: pointer; }
/* opacity rides along so the r18-n4 chamber dim still fades on enhanced seats
   (this rule outranks the .seatmap .seat opacity transition by order) */
.gls2 .seat.enhanced { transition: transform 0.9s cubic-bezier(0.33, 0.0, 0.15, 1), opacity 0.35s ease; }
.gls2 .seat:hover .seat-dot { stroke: var(--ink); stroke-width: 2.5px; }
.gls2 .seat.seat-dim .seat-dot, .gls2 .seat.seat-dim .seat-letter { opacity: 0.25; }
.gls2 .seat.seat-hi .seat-dot { stroke: var(--leaf-gold); stroke-width: var(--sheet-ring-sw, 3.5px); }
.gls2 .seat.seat-vacant .seat-dot { fill: none; stroke: var(--gray-note); stroke-dasharray: 2 2; }

/* --- formation-2 scatter axes (rework 4, n25; JS-built, gated by .axes-on) --- */
.gls2 .scatter-axes { opacity: 0; transition: opacity 0.45s ease 0.35s; pointer-events: none; }
.gls2 .seatmap.axes-on .scatter-axes { opacity: 1; }
.gls2 .sax-line { stroke: var(--gray-note); stroke-width: 1.5; }
.gls2 .sax-tick { stroke: var(--gray-note); stroke-width: 1.25; }
.gls2 .sax-num { fill: var(--gray-note); font-family: "Libre Franklin", sans-serif; font-size: 13px; font-variant-numeric: tabular-nums; }
.gls2 .sax-label { fill: var(--text-gold); font-family: "Marcellus", Georgia, serif; font-size: 16px; letter-spacing: 0.08em; }

.gls2 .seat-tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--marble); padding: 9px 13px; border-radius: 2px; border-top: 2px solid var(--leaf-gold); font-size: 0.82rem; line-height: 1.35; max-width: 250px; opacity: 0; transform: translateY(4px); transition: opacity 0.14s; z-index: 6; box-shadow: 0 4px 18px rgba(0,0,0,0.28); }
.gls2 .seat-tip.show { opacity: 1; transform: translateY(0); }
.gls2 .seat-tip b { color: var(--gold-on-ink); font-weight: 600; }
/* stage caption deleted (rework 4, n4/n17) */
.gls2 .stage-legend { display: flex; gap: 22px; justify-content: center; font-size: 0.8rem; color: var(--gray-note); letter-spacing: 0.04em; margin-top: 10px; }
.gls2 .stage-legend .lg { display: inline-flex; align-items: center; gap: 7px; }
.gls2 .stage-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid rgba(42,36,28,0.3); }
.gls2 .lg-r i { background: var(--oxblood); } .gls2 .lg-d i { background: var(--navy); }

/* the scrolling rail of panels, pulled over the sticky stage */
.gls2 .panels { position: relative; z-index: 2; margin-top: calc(-1 * (100vh - var(--gls2-hdr))); pointer-events: none; }
.gls2 .panel { min-height: 82vh; display: flex; align-items: center; padding: 22px 0; }
.gls2 .panel > * { pointer-events: auto; }

/* ---------------- HERO PANEL ---------------- */
.gls2 .hero-panel { min-height: calc(100vh - var(--gls2-hdr)); align-items: center; }
.gls2 .hero-card { margin: 0 0 0 max(24px, calc((100vw - 1440px) / 2 + 40px)); max-width: 584px; width: calc(43% - 24px); min-width: 320px; }
.gls2 .arch-line { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: center; border-top: 2px solid var(--leaf-gold); border-bottom: 1px solid var(--hairline); padding: 10px 0; }
.gls2 .arch-line .sep { color: var(--leaf-gold); }
.gls2 .hero-card h1 { font-size: clamp(2.2rem, 1.25rem + 2.7vw, 3.55rem); margin: 0.4em 0 0.3em; line-height: 1.08; }
.gls2 .h1-top { font-size: 0.58em; letter-spacing: 0.06em; color: var(--ink); }
.gls2 .h1-accent { color: var(--text-gold); }
.gls2 .standfirst { font-size: clamp(1.02rem, 0.92rem + 0.55vw, 1.28rem); color: var(--ink-soft); margin-bottom: 0.9em; }
/* Hero subheadline. Rework 5 (Matt 2026-07-14, n1): "it's a note, not a
   headline" -- demoted from Marcellus headline register to a small Franklin
   note; the gold rule stays as the only flourish. */
.gls2 .hero-subhead { font-family: "Libre Franklin", sans-serif; font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); border-left: 3px solid var(--leaf-gold); padding-left: 15px; margin: 0 0 1.1em; }
/* Byline (2026-07-08): quiet kicker-register credit line under the
   standfirst. Link keeps the .gls2 a underline (non-color distinguisher);
   --text-gold #7a5f24 on the marble washes = 5.21-5.44 contrast (AA). */
.gls2 .byline { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; margin: 0 0 1.5em; }
.gls2 .byline a { color: var(--text-gold) !important; } /* !important: the theme's link color rule beats .gls2 a on WP (trucking gotcha); byline must hold the page's gold token */

/* hero ZIP module: a small brass-labeled instrument */
/* Rework 6 (Matt 2026-07-14, r6-n2): more air under the ZIP module's
   privacy line before the ToC's gold rule. */
.gls2 .zip-form-hero { margin: 0 0 26px; padding-bottom: 16px; }
.gls2 .zip-plate-label {
  display: inline-block; margin: 0 0 10px;
  font-family: "Marcellus", Georgia, serif; font-size: 0.86rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--engrave);
  background: linear-gradient(175deg, var(--brass-hi) 0%, var(--brass-mid) 48%, var(--brass-lo) 100%);
  border: 1px solid var(--brass-edge);
  box-shadow: inset 0 1px 0 var(--brass-lip), inset 0 -1px 0 rgba(0,0,0,0.28), 0 1px 3px rgba(42,36,28,0.25);
  text-shadow: 0 1px 0 rgba(255,255,255,0.32);
  padding: 6px 14px;
}

/* table of contents (rework 4, n10: replaces the entablature stat band) --
   same incised double-rule frame, entries as engraved numbered lines */
.gls2 .hero-toc {
  margin: 0 0 18px;
  border-top: 2px solid var(--leaf-gold);
  border-bottom: 2px solid var(--leaf-gold);
  box-shadow: 0 3px 0 -2px rgba(168,134,60,0.55), 0 -3px 0 -2px rgba(168,134,60,0.55);
  padding: 14px 0 16px;
}
.gls2 .hero-toc-h { margin: 0 0 8px; font-family: "Marcellus", Georgia, serif; font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-gold); }
/* Rework 5 (n4): five entries, no numbers -- plain gold dot bullets.
   Link color needs !important -- the theme's link rule beats .gls2
   scoping (trucking gotcha). */
.gls2 .hero-toc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 22px; }
.gls2 .hero-toc-list li { font-size: 0.88rem; line-height: 1.35; display: flex; gap: 8px; align-items: baseline; }
.gls2 .hero-toc-list li::before { content: "\00b7"; font-family: "Libre Franklin", sans-serif; font-weight: 700; color: var(--leaf-gold); min-width: 13px; }
.gls2 .hero-toc-list a { color: var(--ink) !important; }
/* Rework 5 (n2): the scroll cue is a bare down arrow (chevron SVG). */
.gls2 .hero-cue { color: var(--text-gold); margin: 0; text-align: left; line-height: 1; }
.gls2 .hero-cue-arrow { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .gls2 .hero-cue-arrow { animation: gls2-cue-bob 1.8s ease-in-out infinite; }
  @keyframes gls2-cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
}

/* hero ZIP inline status (rework 4, n1: the no-scroll resolve confirmation) */
.gls2 .zip-hero-msg { margin: 8px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--text-gold); }
.gls2 .zip-hero-msg.error { color: var(--oxblood); }
.gls2 .zip-hero-msg[hidden] { display: none; }
/* n1: inline hero district picker (photo chips in the hero form) */
.gls2 .zip-hero-pick { margin: 12px 0 0; }
.gls2 .zip-hero-pick[hidden] { display: none; }
.gls2 .zhp-lede { margin: 0 0 10px; font-size: 0.85rem; font-weight: 600; color: var(--text-gold); }
.gls2 .zhp-group { margin: 0 0 12px; }
.gls2 .zhp-glabel { margin: 0 0 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--deep-gold); }
.gls2 .zhp-hint { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--gray-note); }
.gls2 .zhp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gls2 .zhp-chip { display: flex; align-items: center; gap: 9px; text-align: left; font: inherit; padding: 6px 12px 6px 6px; border: 1.5px solid var(--hairline); background: #fff; border-radius: 3px; cursor: pointer; color: var(--ink-soft); }
.gls2 .zhp-chip:hover { border-color: var(--brass-edge); }
.gls2 .zhp-chip.selected { border-color: var(--brass-edge); background: linear-gradient(175deg, #f2e3bd, #e6cf96); color: var(--engrave); }
.gls2 .zhp-photo { width: 44px; height: 44px; flex: none; border-radius: 2px; object-fit: cover; object-position: top center; border: 1px solid var(--hairline); background: var(--panel); }
.gls2 .zhp-photo-none { display: inline-block; }
.gls2 .zhp-txt { display: flex; flex-direction: column; line-height: 1.25; }
.gls2 .zhp-name { font-size: 0.9rem; font-weight: 600; }
.gls2 .zhp-sub { font-size: 0.75rem; color: var(--gray-note); margin-top: 2px; }
.gls2 .zhp-chip.selected .zhp-sub { color: var(--deep-gold); }
.gls2 .zhp-confirm { margin: 4px 0 0; font-size: 0.82rem; font-weight: 600; color: var(--text-gold); }
.gls2 .zhp-confirm:empty { display: none; }

/* ---------------- BEAT PANELS ---------------- */
/* Rework 2: steps read "on the field" -- a translucent marble scrim (so the
   reseating chart stays legible behind), a gold left rule + brass beat plate,
   no floating boxed card. Tighter padding kills the empty-marble drift. */
.gls2 .beat-card {
  position: relative;
  margin: 0 0 0 max(24px, calc((100vw - 1440px) / 2 + 40px));
  max-width: 540px; width: calc(42% - 24px); min-width: 320px;
  background: rgba(247, 243, 236, 0.90);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--leaf-gold);
  box-shadow: 0 12px 40px rgba(42, 36, 28, 0.12);
  padding: 24px 28px 22px;
}
.gls2 .beat-card::before { content: none; }
.gls2 .beat-card > * { position: relative; }

/* engraved brass beat plate, riding the card's top edge */
.gls2 .beat-plate {
  position: absolute; top: -14px; left: 22px; margin: 0;
  display: inline-block;
  font-family: "Marcellus", Georgia, serif; font-size: 0.78rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--engrave);
  background: linear-gradient(175deg, var(--brass-hi) 0%, var(--brass-mid) 48%, var(--brass-lo) 100%);
  border: 1px solid var(--brass-edge);
  box-shadow: inset 0 1px 0 var(--brass-lip), inset 0 -1px 0 rgba(0,0,0,0.28), 0 2px 5px rgba(42,36,28,0.3);
  text-shadow: 0 1px 0 rgba(255,255,255,0.32);
  padding: 5px 14px;
}
.gls2 .beat-no { font-feature-settings: "tnum" 1; margin-right: 6px; }
.gls2 .beat-card h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.3rem); margin: 10px 0 0.55em; }
.gls2 .beat-card p { font-size: 1rem; color: var(--ink-soft); }
.gls2 .beat-note { font-size: 0.85rem !important; color: var(--gray-note) !important; border-top: 1px solid var(--hairline); padding-top: 12px; margin-bottom: 0 !important; }

/* --- beat static tables --- */
.gls2 .table-scroll { overflow-x: auto; margin-top: 14px; }
.gls2 .table-scroll:focus-visible { outline: 2px solid var(--leaf-gold); outline-offset: 2px; }
.gls2 .beat-table { border-collapse: collapse; width: 100%; font-size: 0.86rem; }
/* r12-n1: the table caption reads as a title now -- Marcellus, ink, larger
   (was small italic gray). */
.gls2 .beat-table caption { text-align: left; font-family: "Marcellus", Georgia, serif; font-size: 1.15rem; color: var(--ink); margin-bottom: 12px; line-height: 1.25; }
.gls2 .beat-table th, .gls2 .beat-table td { padding: 7px 8px; border-bottom: 1px solid var(--hairline); text-align: left; }
.gls2 .beat-table thead th { font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--leaf-gold); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; }
.gls2 .beat-table td.num, .gls2 .beat-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.gls2 .beat-table tbody th[scope="row"] { font-weight: 600; }
/* Rework 5 (Matt 2026-07-14, n9): subtle session-over-session trend arrows
   on the Democrat column -- CSS border triangles (no Unicode glyphs). */
/* r7-n6: green triangle when the session pass rate rose, red when it fell.
   Kept subtle (opacity 0.6, muted tones) per Matt -- these are a quiet cue,
   not a scoreboard. */
/* r8-n2: the slot reserves the arrow's width on every row so the numbers form
   a clean column; the triangle only appears when the rate changed. */
.gls2 .trend-slot { display: inline-block; width: 8px; margin-left: 7px; vertical-align: middle; text-align: center; line-height: 0; }
.gls2 .trend { display: inline-block; width: 0; height: 0; opacity: 0.6; }
.gls2 .trend-up { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid var(--trend-up); }
.gls2 .trend-down { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--trend-down); }

/* Rework 5 (Matt 2026-07-14, n18): the statewide-ledger callout. Text rules
   carry the extra .sw-callout ancestor so they outrank .gls2 .beat-card p
   (the callout lives inside a beat card; found 2026-07-15) -- a small
   brass-edged plaque with Williamson's portrait and the 42-statewide stat. */
.gls2 .sw-callout { display: flex; gap: 16px; align-items: center; margin: 20px 0 0; padding: 14px 16px; background: var(--panel); border: 1px solid var(--brass-edge); border-left: 4px solid var(--leaf-gold); box-shadow: 0 6px 20px rgba(42,36,28,0.14); }
/* r8-n9: larger callout portraits (Williamson + Kendrick), was 74x88. */
.gls2 .sw-callout-photo { flex: none; width: 92px; height: 112px; overflow: hidden; line-height: 0; border: 1px solid var(--brass-edge); }
.gls2 .sw-callout-photo .pcard-img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.gls2 .sw-callout-text { min-width: 0; }
.gls2 .sw-callout .sw-callout-kicker { margin: 0 0 2px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-gold); }
.gls2 .sw-callout .sw-callout-stat { margin: 0; font-family: "Marcellus", Georgia, serif; font-size: 1.18rem; color: var(--ink); }
/* r12-n3/n4: the big stat number is set in Libre Franklin with a SLASHED zero
   so the standalone "0" no longer reads as a capital O (Marcellus's oval zero
   was the culprit). Sans lining figures keep "42" clean too. */
.gls2 .sw-callout-stat b { font-family: "Libre Franklin", sans-serif; font-size: 1.5rem; color: var(--text-gold); font-weight: 500; font-variant-numeric: slashed-zero; font-feature-settings: "zero" 1; }
.gls2 .sw-callout .sw-callout-name { margin: 3px 0 0; font-size: 0.88rem; color: var(--ink); }
.gls2 .sw-callout .sw-callout-note { margin: 5px 0 0; font-size: 0.78rem; color: var(--gray-note); }
/* Rework 6 (Matt 2026-07-14, r6-n4): the statewide leader's inverse, stacked
   directly under it -- graphite left rule keeps it distinct from the gold
   leader plaque. Rework 8 (Matt r8-n1): the "0" stat now matches the leader's
   gold "42" (the ink override is removed) -- Matt wants the two numbers the
   same colour. */
.gls2 .sw-callout-inverse { border-left-color: var(--gray-note); margin-top: 12px; }
.gls2 .sw-callout-inverse .sw-callout-kicker { color: var(--gray-note); }
/* r13-n5 (Matt): a small rule that separates the two statewide leaders (gold
   plaques) from the zero-statewide members (graphite inverses) below it. */
.gls2 .sw-divider { height: 1px; border: 0; background: var(--hairline); margin: 26px 0 4px; }
@media (max-width: 560px) {
  .gls2 .sw-callout { align-items: flex-start; }
}

/* --- party tag: color + letter, never color alone --- */
.gls2 .ptag { display: inline-block; min-width: 1.6em; text-align: center; font-size: 0.72rem; font-weight: 700; color: #fff; border-radius: 2px; padding: 1px 5px; line-height: 1.5; }
.gls2 .ptag-r { background: var(--oxblood); }
.gls2 .ptag-d { background: var(--navy); }
.gls2 .ptag-i { background: var(--gray-note); }

/* ---------------- BEAT 6 PAIRS ---------------- */
.gls2 .pairs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; margin-top: 16px; }
.gls2 .pair-card { border: 1px solid var(--hairline); padding: 14px 16px; background: #fff; }
.gls2 .pair-died { border-top: 3px solid var(--gray-note); }
.gls2 .pair-passed { border-top: 3px solid var(--leaf-gold); }
.gls2 .pair-outcome { font-size: 0.68rem; letter-spacing: 0.12em; font-weight: 700; color: var(--gray-note); margin: 0 0 6px; }
.gls2 .pair-passed .pair-outcome { color: var(--deep-gold); }
.gls2 .pair-name { font-family: "Marcellus", serif; font-size: 1.05rem; margin: 0 0 3px; }
.gls2 .pair-meta { font-size: 0.8rem; margin: 0 0 8px; color: var(--gray-note); }
.gls2 .pair-title { font-size: 0.82rem; margin: 0 0 8px; }
.gls2 .pair-link { font-size: 0.8rem; font-weight: 600; }
.gls2 .pair-versus { display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: "Marcellus", serif; font-size: 1.15rem; color: var(--text-gold); }
.gls2 .pair-versus span { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-note); font-family: "Libre Franklin", sans-serif; }

/* Methodology section absorbed into the colophon (rework 4, n41) */
.gls2 .colophon-method { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.55; border-top: 1px solid var(--hairline); padding-top: 14px; margin-top: 14px; max-width: none; }

/* ============================ LOOKUP ============================ */
/* Rework 2: full-width designed band -- input column left, result
   nameplates right at >=1024px (auto-placement puts .zip-form in col 1
   and .zip-result beside it; the header lines span both columns). */
.gls2 .lookup { padding: 56px 0 64px; content-visibility: auto; contain-intrinsic-size: auto 480px; }
/* n5: extra breathing room below the ZIP lookup block */
.gls2 .lookup .section-inner { padding-bottom: 48px; }
.gls2 .lookup h2 { font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.6rem); margin-bottom: 0.4em; }
.gls2 .lookup-lede { max-width: 54ch; color: var(--ink-soft); }
@media (min-width: 1024px) {
  .gls2 .lookup .section-inner { display: grid; grid-template-columns: 400px 1fr; column-gap: 56px; align-items: start; }
  .gls2 .lookup .eyebrow, .gls2 .lookup h2, .gls2 .lookup .lookup-lede { grid-column: 1 / -1; }
  .gls2 .lookup .zip-form, .gls2 .lookup .member-search { grid-column: 1; }
  .gls2 .lookup .zip-result { grid-column: 2; }
  .gls2 .lookup .zip-result .cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
.gls2 .zip-form { margin: 26px 0 0; max-width: 500px; }
.gls2 .zip-form label { display: block; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--deep-gold); margin-bottom: 8px; }
.gls2 .zip-row { display: flex; gap: 0; }
.gls2 .zip-row input {
  flex: 1; font: inherit; font-size: 1.05rem; padding: 12px 14px;
  border: 1.5px solid var(--ink-soft); border-right: none; border-radius: 0;
  background: #fff; color: var(--ink); min-width: 0;
  box-shadow: inset 0 2px 4px rgba(42,36,28,0.08);
}
.gls2 .zip-row input:focus { outline: 2px solid var(--leaf-gold); outline-offset: -1px; }
.gls2 .zip-row input::placeholder { color: var(--gray-note); opacity: 1; }
.gls2 .zip-go {
  font: inherit; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 12px 20px; cursor: pointer; white-space: nowrap;
  color: var(--engrave);
  background: linear-gradient(175deg, var(--brass-hi) 0%, var(--brass-mid) 48%, var(--brass-lo) 100%);
  border: 1px solid var(--brass-edge);
  box-shadow: inset 0 1px 0 var(--brass-lip), inset 0 -1px 0 rgba(0,0,0,0.28);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.gls2 .zip-go:hover { filter: brightness(1.06); }
.gls2 .zip-go:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); }
.gls2 .zip-help { font-size: 0.8rem; color: var(--gray-note); margin-top: 10px; }
.gls2 .zip-result { margin-top: 26px; }
.gls2 .zip-result:empty { margin: 0; }
.gls2 .zip-result .zip-msg { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 14px; }
.gls2 .zip-result.error .zip-msg { color: var(--oxblood); }
.gls2 .zip-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.gls2 .zip-chips button { font: inherit; font-size: 0.85rem; padding: 6px 12px; border: 1.5px solid var(--hairline); background: #fff; border-radius: 2px; cursor: pointer; color: var(--ink-soft); }
.gls2 .zip-chips button.selected { border-color: var(--brass-edge); background: linear-gradient(175deg, #f2e3bd, #e6cf96); color: var(--engrave); font-weight: 600; }
.gls2 .zip-group { margin: 0 0 14px; }
.gls2 .zip-glabel { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--deep-gold); margin: 0 0 6px; }
.gls2 .zip-cards { margin-top: 8px; }

/* ---- unified member search (name / district / ZIP) ---- */
.gls2 .member-search { margin: 26px 0 0; max-width: 500px; }
.gls2 .member-search > label { display: block; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--deep-gold); margin-bottom: 8px; }
.gls2 .ms-combo { position: relative; }
.gls2 .ms-results {
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%; margin: 4px 0 0;
  list-style: none; padding: 0; background: #fff; border: 1.5px solid var(--ink-soft);
  box-shadow: 0 12px 30px rgba(42,36,28,0.24); max-height: 340px; overflow-y: auto;
}
.gls2 .ms-results[hidden] { display: none; }
.gls2 .ms-opt {
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
  min-height: 46px; padding: 8px 14px; cursor: pointer; color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.gls2 .ms-opt:last-child { border-bottom: 0; }
.gls2 .ms-opt:hover, .gls2 .ms-opt.active { background: var(--panel); }
.gls2 .ms-opt-name { font-weight: 600; font-size: 0.98rem; }
.gls2 .ms-opt-sub { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--ink-soft); }
.gls2 .ms-empty { font-size: 0.85rem; color: var(--oxblood); margin-top: 10px; }
.gls2 .ms-empty[hidden] { display: none; }
/* On touch/mobile the absolute dropdown can hide behind the on-screen keyboard
   or the fixed masthead -- render it IN FLOW so it always sits under the input
   (the ga-votes tie-rep n47 fix). */
@media (max-width: 720px) {
  .gls2 .ms-results { position: static; box-shadow: none; margin-top: 8px; max-height: 52vh; }
  .gls2 .ms-opt { min-height: 48px; }
}

/* ============================ SCORECARD NAMEPLATES ============================ */
.gls2 .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 22px; }
.gls2 .np-card { background: var(--panel); border: 1px solid var(--brass-edge); box-shadow: 0 14px 40px rgba(42,36,28,0.18); padding: 0; position: relative; }

/* the engraved brass head plate, with corner screws */
.gls2 .np-head {
  position: relative;
  padding: 18px 34px 14px;
  background: linear-gradient(172deg, var(--brass-hi) 0%, var(--brass-mid) 46%, var(--brass-lo) 100%);
  border-bottom: 1px solid var(--brass-edge);
  box-shadow: inset 0 1px 0 var(--brass-lip), inset 0 -1px 0 rgba(0,0,0,0.3), inset 2px 0 0 rgba(255,255,255,0.12), inset -2px 0 0 rgba(0,0,0,0.12);
}
.gls2 .np-head::before, .gls2 .np-head::after {
  content: ""; position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -5.5px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(0,0,0,0) 44%, rgba(58,44,16,0.85) 45%, rgba(58,44,16,0.85) 55%, rgba(0,0,0,0) 56%),
    radial-gradient(circle at 34% 30%, #ead9a8 0%, #b3924a 45%, #6d541f 100%);
  box-shadow: 0 1px 1px rgba(255,255,255,0.35), inset 0 0 2px rgba(0,0,0,0.5);
}
.gls2 .np-head::before { left: 10px; }
.gls2 .np-head::after { right: 10px; transform: rotate(72deg); }
.gls2 .np-name { font-family: "Marcellus", serif; font-size: 1.45rem; letter-spacing: 0.09em; text-transform: uppercase; margin: 0; color: var(--engrave); text-shadow: 0 1px 0 rgba(255,255,255,0.32); }
.gls2 .np-sub { font-size: 0.78rem; color: var(--engrave); margin: 4px 0 0; letter-spacing: 0.12em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,0.25); }
.gls2 .np-sub .ptag { text-shadow: none; }

.gls2 .np-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); }
.gls2 .np-stat { background: var(--panel); padding: 14px 16px; text-align: center; }
.gls2 .np-stat-num { font-family: "Marcellus", serif; font-size: 1.55rem; font-variant-numeric: tabular-nums; display: block; }
.gls2 .np-stat-lab { font-size: 0.68rem; color: var(--gray-note); text-transform: uppercase; letter-spacing: 0.08em; }
.gls2 .np-bar { display: flex; height: 28px; margin: 0; font-size: 0.72rem; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.gls2 .np-bar .seg-state { background: var(--text-gold); color: #fff; justify-content: flex-start; } /* white on #7a5f24 = 6.02 */
.gls2 .np-bar .seg-local { background: var(--local-fill); color: var(--ink); justify-content: flex-end; }
/* Labels hug their OUTER edge (statewide left, local right) so a segment too
   narrow for its label clips toward the center divider, never off the card's
   left/right margin -- the count stays readable (Matt n1, 2026-07-21). */
.gls2 .np-bar span { display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; font-weight: 600; padding: 0 6px; box-sizing: border-box; }
.gls2 .np-body { padding: 14px 20px 18px; }
.gls2 .np-pct { font-size: 0.86rem; color: var(--ink-soft); margin: 0 0 10px; }
.gls2 .np-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.gls2 .np-cat { font-size: 0.72rem; padding: 3px 9px; background: var(--marble-2); border: 1px solid var(--hairline); border-radius: 2px; color: var(--gray-note); }
.gls2 .np-expand { font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--deep-gold); background: none; border: none; cursor: pointer; padding: 6px 0; display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-decoration-color: rgba(168,134,60,0.7); text-underline-offset: 2px; }
.gls2 .np-expand::after { content: "\25be"; transition: transform 0.2s; }
.gls2 .np-card.expanded .np-expand::after { transform: rotate(180deg); }
.gls2 .bill-list { display: none; margin-top: 12px; max-height: 340px; overflow-y: auto; border-top: 1px solid var(--hairline); }
.gls2 .np-card.expanded .bill-list, .gls2 .bill-list.open { display: block; }
.gls2 .bill-list ul { list-style: none; margin: 0; padding: 0; }
/* flex-wrap + right padding so the trailing "Read on GA.gov" link never
   clips against the card edge or the scrollbar when the row is tight (n2). */
.gls2 .bill-item { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 7px 12px 7px 4px; border-bottom: 1px solid var(--hairline); font-size: 0.82rem; }
.gls2 .bill-num { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 62px; }
.gls2 .bill-badge { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; padding: 1px 5px; border-radius: 2px; letter-spacing: 0.04em; white-space: nowrap; }
.gls2 .bill-badge.passed { background: #e9f0e4; color: #3d5a2b; }
.gls2 .bill-badge.local { background: var(--marble-2); color: var(--gray-note); }
.gls2 .bill-badge.died { background: #f3e6e5; color: var(--oxblood); }
.gls2 .bill-title { flex: 1; color: var(--ink-soft); }
.gls2 .bill-item a { font-size: 0.76rem; white-space: nowrap; flex-shrink: 0; }
.gls2 .np-empty { font-size: 0.85rem; color: var(--gray-note); padding: 10px 2px; font-style: italic; }
.gls2 .np-compare { font: inherit; font-size: 0.82rem; margin-top: 12px; background: none; border: 1px solid var(--brass-edge); border-radius: 2px; padding: 7px 12px; cursor: pointer; color: var(--ink); }
.gls2 .np-compare:hover { background: var(--marble-2); }
.gls2 .compare-picker { margin-top: 12px; position: relative; }
.gls2 .compare-picker input { font: inherit; font-size: 0.9rem; width: 100%; padding: 9px 12px; border: 1.5px solid var(--hairline); border-radius: 2px; }
.gls2 .compare-suggest { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--hairline); border-radius: 2px; background: #fff; max-height: 220px; overflow-y: auto; }
.gls2 .compare-suggest:empty { display: none; }
.gls2 .compare-suggest button { font: inherit; font-size: 0.85rem; width: 100%; text-align: left; padding: 8px 12px; background: none; border: none; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.gls2 .compare-suggest button:hover { background: var(--marble-2); color: var(--deep-gold); }
.gls2 .compare-drawer { display: none; }
.gls2 .compare-drawer.active { display: block; }

/* ============================ DIRECTORY (the board) ============================ */
.gls2 .directory { padding: 24px 0 64px; content-visibility: auto; contain-intrinsic-size: auto 1050px; }
.gls2 .directory h2 { font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.6rem); margin-bottom: 0.4em; }
.gls2 .dir-lede { max-width: 62ch; color: var(--ink-soft); }
.gls2 .dir-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 24px 0 14px; }
.gls2 #dir-filter { font: inherit; font-size: 0.95rem; padding: 9px 12px; border: 1.5px solid var(--ink-soft); border-radius: 0; background: #fff; min-width: 220px; flex: 1; box-shadow: inset 0 2px 4px rgba(42,36,28,0.08); }
.gls2 #dir-filter::placeholder { color: var(--gray-note); opacity: 1; }
.gls2 .dir-toggles { display: flex; gap: 6px; flex-wrap: wrap; }
.gls2 .chip { font: inherit; font-size: 0.82rem; padding: 7px 14px; border: 1.5px solid var(--hairline); background: #fff; border-radius: 2px; cursor: pointer; color: var(--ink-soft); letter-spacing: 0.03em; }
.gls2 .chip[aria-pressed="true"], .gls2 .chip.selected { border-color: var(--brass-edge); background: linear-gradient(175deg, #f2e3bd, #e6cf96); color: var(--engrave); font-weight: 600; }
.gls2 .dir-wrap { overflow: auto; max-height: 72vh; border: 1px solid var(--brass-edge); box-shadow: 0 14px 40px rgba(42,36,28,0.12); background: var(--panel); }
.gls2 .directory-table { border-collapse: collapse; width: 100%; font-size: 0.84rem; min-width: 760px; }
.gls2 .directory-table th, .gls2 .directory-table td { padding: 6px 10px; border-bottom: 1px solid var(--hairline); text-align: left; }
.gls2 .directory-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: linear-gradient(180deg, #352d22, var(--ink));
  color: var(--gold-on-ink);
  font-family: "Marcellus", Georgia, serif; font-weight: 400;
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 2px solid var(--leaf-gold);
}
.gls2 .directory-table th.num, .gls2 .directory-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.gls2 .directory-table th.sortable { cursor: pointer; user-select: none; }
.gls2 .directory-table th.sortable::after { content: "\2195"; opacity: 0.4; margin-left: 4px; font-size: 0.9em; }
.gls2 .directory-table th.sort-asc::after { content: "\2191"; opacity: 1; }
.gls2 .directory-table th.sort-desc::after { content: "\2193"; opacity: 1; }
.gls2 .directory-table tbody tr:nth-child(even) { background: rgba(239,233,223,0.5); }
/* r12-n6: extra breathing room on the right so the last column (Statewide, plus
   its sort arrow) is not jammed against the table edge. */
.gls2 .directory-table th:last-child, .gls2 .directory-table td:last-child { padding-right: 22px; }
.gls2 .dir-open { font: inherit; font-weight: 600; color: var(--ink); background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.gls2 .dir-open:hover { color: var(--deep-gold); text-decoration: underline; }
.gls2 .dir-row.dir-hidden { display: none; }
.gls2 .dir-detail-row td { padding: 0; background: var(--marble-2); }
.gls2 .dir-detail-row.dir-hidden { display: none; }
.gls2 .dir-row.expanded + .dir-detail-row td { padding: 14px 16px; }
.gls2 .dir-empty { text-align: center; color: var(--gray-note); padding: 30px; font-style: italic; }
.gls2 .dir-download { margin-top: 14px; font-size: 0.86rem; }

/* ============================ CTA ============================ */
.gls2 .cta {
  background: var(--vein), linear-gradient(180deg, #ece5d8, var(--marble-2) 140px);
  border-top: 2px solid var(--leaf-gold);
  box-shadow: inset 0 4px 0 -3px rgba(168,134,60,0.5);
  padding: 56px 0;
  content-visibility: auto; contain-intrinsic-size: auto 410px;
}
.gls2 .cta-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: start; }
.gls2 .cta-line { font-family: "Marcellus", serif; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.7rem); line-height: 1.32; }
.gls2 .cta-sub { font-size: 0.95rem; color: var(--ink-soft); }
.gls2 .cta-source { font-size: 0.82rem; }
.gls2 .cta-button {
  display: inline-block; padding: 14px 26px; font-weight: 600; text-decoration: none;
  color: var(--engrave);
  background: linear-gradient(175deg, var(--brass-hi) 0%, var(--brass-mid) 48%, var(--brass-lo) 100%);
  border: 1px solid var(--brass-edge);
  box-shadow: inset 0 1px 0 var(--brass-lip), inset 0 -1px 0 rgba(0,0,0,0.28), 0 2px 6px rgba(42,36,28,0.25);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.gls2 .cta-button:hover { filter: brightness(1.06); color: var(--engrave); }

/* ============================ FOOTER ============================ */
.gls2 .colophon { padding: 46px 0 64px; border-top: 1px solid var(--hairline); content-visibility: auto; contain-intrinsic-size: auto 340px; }
.gls2 .colophon h3 { font-size: 1.1rem; margin-bottom: 10px; }
/* r13-n6 (Matt): "make this much wider -- we are trying to hide it, not make it
   tall." The sources block was capped at 70ch, so it stacked into a tall narrow
   column that drew the eye. Let it fill the section width (max-width 1120px) so it
   reads as a short, wide footnote. */
.gls2 .colophon p { font-size: 0.86rem; color: var(--gray-note); max-width: none; }
.gls2 .colophon-mark { margin-top: 14px; letter-spacing: 0.04em; }

/* ============================ KEY FINDINGS ============================ */
/* Server-rendered SEO summary as an engraved entablature: leaf-gold rules
   top and bottom (echoing the hero stat band), each finding numbered on a
   small brass plate. Marble ground; ink body copy at 12.72:1 on marble-2. */
.gls2 .findings {
  background: var(--vein), linear-gradient(180deg, #ece5d8, var(--marble-2) 120px);
  border-top: 2px solid var(--leaf-gold);
  border-bottom: 2px solid var(--leaf-gold);
  box-shadow: inset 0 4px 0 -3px rgba(168,134,60,0.5), inset 0 -4px 0 -3px rgba(168,134,60,0.5);
  padding: 56px 0;
  /* Perf (2026-07-15): join lookup/directory/colophon in the skip-layout
     set; the auto keyword self-corrects the placeholder after first render */
  content-visibility: auto; contain-intrinsic-size: auto 900px;
}
.gls2 .findings .section-inner { max-width: 920px; }
.gls2 .findings h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin-bottom: 24px; }
.gls2 .findings-list { list-style: none; margin: 0 0 28px; padding: 0; }
/* rework 4 (n38): the theme's list markers ("blue dots") were leaking into
   the findings <ol> because the page never reset it; kill marker + ::before
   at the source so only the brass number plaques remain */
.gls2 .findings-list { list-style: none; margin: 0; padding: 0; }
.gls2 .findings-list > li { padding-left: 0; }
.gls2 .findings-list > li::before { content: none; }
.gls2 .findings-list > li::marker { content: none; }
.gls2 .finding {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  border-top: 1px solid var(--hairline); padding: 16px 0;
}
.gls2 .finding:first-child { border-top: 2px solid var(--leaf-gold); }
.gls2 .finding:last-child { border-bottom: 1px solid var(--hairline); }
.gls2 .finding-no {
  flex: none; width: 30px; height: 30px; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Marcellus", Georgia, serif; font-size: 0.9rem;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  color: var(--engrave);
  background: linear-gradient(175deg, var(--brass-hi) 0%, var(--brass-mid) 48%, var(--brass-lo) 100%);
  border: 1px solid var(--brass-edge);
  box-shadow: inset 0 1px 0 var(--brass-lip), inset 0 -1px 0 rgba(0,0,0,0.28), 0 1px 3px rgba(42,36,28,0.25);
  text-shadow: 0 1px 0 rgba(255,255,255,0.32);
}
.gls2 .finding p { margin: 0; font-size: 1.02rem; color: var(--ink); line-height: 1.5; }
.gls2 .findings-cite { font-size: 0.84rem; color: var(--gray-note); font-style: italic; border-top: 1px solid var(--hairline); padding-top: 16px; max-width: 92ch; margin: 0; }
.gls2 .findings-cite .cite-label { font-style: normal; font-weight: 600; color: var(--deep-gold); letter-spacing: 0.03em; }

/* ==================== MORE GEORGIA LEGISLATURE DATA ==================== */
/* rework 4 (n51): plain link list -> engraved card tiles */
.gls2 .more-data { padding: 40px 0 46px; border-top: 1px solid var(--hairline); content-visibility: auto; contain-intrinsic-size: auto 420px; }
.gls2 .more-data-h { font-size: 1.1rem; letter-spacing: 0.03em; margin-bottom: 16px; color: var(--deep-gold); }
.gls2 .more-data-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gls2 .more-data-grid li::before, .gls2 .more-data-grid li::marker { content: none; }
.gls2 .more-card {
  display: flex; flex-direction: column; gap: 5px; height: 100%;
  box-sizing: border-box; padding: 14px 16px 15px;
  background: var(--panel); border: 1px solid var(--brass-edge);
  border-top: 2px solid var(--leaf-gold);
  box-shadow: 0 4px 14px rgba(42,36,28,0.10);
  text-decoration: none;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.gls2 .more-card:hover { box-shadow: 0 8px 22px rgba(42,36,28,0.18); transform: translateY(-2px); }
.gls2 .more-card-t { font-family: "Marcellus", Georgia, serif; font-size: 1.02rem; color: var(--ink); line-height: 1.2; }
.gls2 .more-card-d { font-size: 0.8rem; color: var(--gray-note); line-height: 1.35; }

/* ============================ TOAST ============================ */
.gls2 .toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 130%); display: flex; gap: 12px; align-items: center; background: var(--ink); color: var(--marble); border-top: 2px solid var(--leaf-gold); padding: 12px 16px; border-radius: 2px; box-shadow: 0 8px 30px rgba(0,0,0,0.3); z-index: 40; opacity: 0; transition: transform 0.28s cubic-bezier(0.2,0.7,0.3,1), opacity 0.28s; max-width: calc(100vw - 32px); visibility: hidden; }
.gls2 .toast.visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.gls2 .toast-text b { color: var(--gold-on-ink); }
.gls2 .toast-go { font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--engrave); background: linear-gradient(175deg, var(--brass-hi), var(--brass-lo)); border: 1px solid var(--brass-edge); border-radius: 2px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.gls2 .toast-x { background: none; border: none; color: var(--marble); cursor: pointer; line-height: 1; padding: 4px; display: inline-flex; }

/* n6: dismissible scorecard popover. Floats bottom-right (clear of the
   bottom-center toast and the host's bottom-left translation widget) and
   STAYS until the reader closes it. On phones it becomes a bottom sheet. */
.gls2 .scorecard-pop { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: min(380px, calc(100vw - 32px)); max-height: min(78vh, 720px); display: flex; flex-direction: column; background: var(--marble); border-top: 3px solid var(--leaf-gold); border-radius: 3px; box-shadow: 0 18px 50px rgba(0,0,0,0.4); opacity: 0; transform: translateY(14px); transition: opacity 0.24s, transform 0.24s cubic-bezier(0.2,0.7,0.3,1); visibility: hidden; pointer-events: none; }
.gls2 .scorecard-pop.visible { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; }
.gls2 .sc-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--ink); border-radius: 3px 3px 0 0; flex: 0 0 auto; }
.gls2 .sc-pop-title { font-family: "Marcellus", Georgia, serif; font-size: 0.98rem; letter-spacing: 0.03em; color: var(--gold-on-ink); }
.gls2 .sc-pop-x { background: none; border: none; color: var(--marble); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 6px; border-radius: 2px; }
.gls2 .sc-pop-x:hover { color: var(--gold-on-ink); }
.gls2 .sc-pop-body { overflow-y: auto; padding: 12px; -webkit-overflow-scrolling: touch; }
.gls2 .sc-pop-body .cards { display: grid; gap: 12px; }
.gls2 .np-former { color: var(--oxblood); font-weight: 600; }
/* n1: comparison mode -- with 2+ cards the popover widens and the cards flow
   into columns (auto-fit, so it drops back to one column when the viewport
   can't hold two) instead of stacking in a tall narrow strip. */
.gls2 .scorecard-pop.sc-pop-wide { width: min(740px, calc(100vw - 32px)); }
.gls2 .scorecard-pop.sc-pop-wide .sc-pop-body .cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
@media (max-width: 640px) {
  .gls2 .scorecard-pop, .gls2 .scorecard-pop.sc-pop-wide { right: 0; left: 0; bottom: 0; width: 100%; max-height: 82vh; border-radius: 3px 3px 0 0; }
}

/* ============================================================
   PHOTOS (rework 2 / I2): sprite tiles (T2/T3), spotlight cards (T1),
   directory thumbs, ZIP nameplate photos, my-reps highlight state.
   ============================================================ */

/* --- seat sprite tiles: hidden until the seat joins a formation's tile set --- */
.gls2 .seat-tile, .gls2 .seat-tile-ring, .gls2 .seat-star { display: none; }
.gls2 .seat.seat-tiled .seat-tile,
.gls2 .seat.seat-tiled .seat-tile-ring { display: block; }
.gls2 .seat.seat-tiled .seat-dot, .gls2 .seat.seat-tiled .seat-letter { opacity: 0; }
/* rework 4 (n16): the party-color wash over seat faces is gone; party
   reads from the ring alone, so the ring carries a touch more weight */
.gls2 .seat-tile-ring, .gls2 .seat-star { pointer-events: none; }
.gls2 .seat-tile-ring { stroke-width: 2.5; }
.gls2 .seat-r .seat-tile-ring { stroke: var(--oxblood); }
.gls2 .seat-d .seat-tile-ring { stroke: var(--navy); }
.gls2 .seat-i .seat-tile-ring { stroke: var(--gray-note); }
.gls2 .seat.seat-dim .seat-tile { opacity: 0.4; }
.gls2 .seat.seat-dim .seat-tile-ring { opacity: 0.4; }
/* Rework 5 (Matt 2026-07-14, n11): highlighted faces KEEP their red/blue
   party ring (emphasis comes from the heavier stroke), never gold -- the
   party must stay readable on the highlight formations. Gold remains the
   marker for the reader's own reps (.seat-mine) only. */
.gls2 .seat.seat-hi .seat-tile-ring { stroke-width: 3.5; }
/* r7-n7/n12: the highlight-formation faces are enlarged in JS (applyFormation
   resizes the tile+ring geometry directly) rather than via a CSS transform --
   `transform-box: fill-box` on the nested <svg> tile measured the full atlas
   image, not the 26px crop box, and threw the portrait far outside its ring
   (r8-n6). Resizing x/y/width/height keeps the crop clipped and centred. */
/* my-reps: gold ring + star, always on top */
.gls2 .seat.seat-mine .seat-tile-ring { stroke: var(--leaf-gold); stroke-width: 3.5; }
.gls2 .seat.seat-mine .seat-star { display: block; }
.gls2 .seat-star { fill: var(--leaf-gold); stroke: #fff; stroke-width: 0.6; }

/* --- T1 spotlight portrait cards (beat 05) --- */
.gls2 .gls2-spotlight-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 6px; }
/* min-width:0 lets the 1fr grid tracks shrink below the cards' min-content
   (default min-width:auto let the portrait + text force the row wider than a
   narrow phone, causing horizontal page overflow at 3 columns). */
/* block (not flex-column): the flex item .pcard-photo would not stretch to the
   card width once the img had a fixed height, leaving a narrow photo sliver.
   Block flow fills the width predictably; the grid row still equalizes card
   heights. min-width:0 lets the 1fr tracks shrink below min-content (default
   min-width:auto let the portrait force the row wider than a narrow phone). */
/* margin:0 kills the UA default `figure { margin: 0 40px }` -- .pcard is a
   <figure>, and that 40px inline margin was eating the grid track (tiny cards)
   and, with width:100%, shoving each card 40px past its track (right-edge
   overflow + a clipped third card on staging). box-sizing:border-box keeps the
   1px border inside the track width. */
.gls2 .pcard { position: relative; box-sizing: border-box; margin: 0; min-width: 0; width: 100%; background: var(--panel); border: 1px solid var(--brass-edge); box-shadow: 0 10px 30px rgba(42,36,28,0.16); display: block; }
.gls2 .pcard-frame { position: absolute; inset: 5px; border: 1px solid rgba(168,134,60,0.5); pointer-events: none; z-index: 2; }
/* Every spotlight photo crops to the same fixed height so the three cards are
   equal (rework 2 fix, 2026-07-11: Parent's 320x228 environmental shot was
   shorter than the 320x397 headshots, making the row ragged/disjointed). The
   img stays in normal flow with width:100% + a clamped height + object-fit
   cover -- reliable inside the flex-column card, where aspect-ratio and
   padding-ratio boxes both collapsed. */
.gls2 .pcard-photo { position: relative; overflow: hidden; line-height: 0; }
/* Rework 5 (Matt 2026-07-14, n10/n12): top-anchored crops were cutting chins
   off at the bottom -- "center the images as best you can". center 28% keeps
   a slight head bias (a pure 50% center can crop foreheads on tall
   portraits) while giving the chin room the top crop was eating. */
.gls2 .pcard-img { display: block; width: 100%; height: clamp(122px, 40vw, 162px); object-fit: cover; object-position: center 28%; }
.gls2 .pcard-wash { position: absolute; inset: 0; pointer-events: none; }
.gls2 .pcard-d .pcard-wash, .gls2 .pair-photo-d .pcard-wash { background: var(--navy); opacity: 0.16; }
.gls2 .pcard-r .pcard-wash, .gls2 .pair-photo-r .pcard-wash { background: var(--oxblood); opacity: 0.16; }
.gls2 .pcard-plate { padding: 11px 13px 12px; display: flex; flex-direction: column; gap: 1px; border-top: 2px solid var(--leaf-gold); background: linear-gradient(180deg, var(--marble-hi), var(--panel)); }
.gls2 .pcard-name { font-family: "Marcellus", serif; font-size: 1.02rem; color: var(--ink); letter-spacing: 0.01em; line-height: 1.12; }
.gls2 .pcard-sub { font-size: 0.74rem; color: var(--gray-note); margin-top: 3px; }
.gls2 .pcard-sub .ptag { font-size: 0.62rem; }
.gls2 .pcard-stat { font-size: 0.78rem; color: var(--ink-soft); margin-top: 6px; }
.gls2 .pcard-stat b { font-family: "Marcellus", serif; font-size: 1.4rem; color: var(--deep-gold); display: block; line-height: 1; }
/* rework 4 (n33): mini-stat row -- the deleted beat tables' columns, engraved
   on the nameplate under the big stat */
.gls2 .pcard-statrow { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hairline); font-size: 0.72rem; color: var(--gray-note); }
.gls2 .pcard-ministat b { color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.gls2 .pcard-note { font-size: 0.66rem; color: var(--gray-note); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
/* rework 4 (n28): two-up card row (biggest filer / biggest passer) */
.gls2 .spotlight-row-2 { grid-template-columns: repeat(2, 1fr); max-width: 440px; }
/* r8-n3: the two ranking labels in the co-sponsorship section */
.gls2 .cospon-grouplabel { margin: 22px 0 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-gold); }
/* r19 (Matt n4-n9): the co-signer section is grouped Senate then House; this
   heads each group above its two ranking labels. */
.gls2 .cospon-grouphead { margin: 30px 0 2px; padding-bottom: 6px; border-bottom: 1px solid var(--brass-edge); font-family: "Marcellus", Georgia, serif; font-size: 1.15rem; color: var(--ink); letter-spacing: 0.02em; }
.gls2 .pcard-mine { border-color: var(--leaf-gold); box-shadow: 0 0 0 2px var(--leaf-gold), 0 10px 30px rgba(42,36,28,0.2); }

/* --- beat 07 pair topic kicker (rework 4, n37: multiple featured pairs) --- */
.gls2 .pair-topic { margin: 22px 0 8px; font-family: "Marcellus", Georgia, serif; font-size: 0.84rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-gold); border-top: 1px solid var(--hairline); padding-top: 12px; }

/* --- beat 07 pair portraits --- */
.gls2 .pair-photo { position: relative; margin: -14px -16px 12px; height: 148px; overflow: hidden; }
.gls2 .pair-photo .pcard-img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.gls2 .pair-card.pcard-mine { border-color: var(--leaf-gold); box-shadow: 0 0 0 2px var(--leaf-gold); }

/* --- ZIP nameplate photo --- */
.gls2 .np-head-photo { display: flex; align-items: center; gap: 14px; }
.gls2 .np-head-text { min-width: 0; }
.gls2 .np-photo { width: 72px; height: 72px; flex: none; object-fit: cover; object-position: center top; border-radius: 3px; border: 2px solid rgba(255,255,255,0.45); box-shadow: 0 1px 4px rgba(0,0,0,0.3); background: var(--marble-2); }
.gls2 .np-mine { box-shadow: 0 0 0 2px var(--leaf-gold), 0 14px 40px rgba(42,36,28,0.18); }

/* --- directory: leading star + thumb columns, my-reps row wash --- */
.gls2 .directory-table td.dir-star, .gls2 .directory-table th.dir-star-h { width: 24px; text-align: center; padding-left: 8px; padding-right: 2px; }
.gls2 .directory-table td.dir-thumb, .gls2 .directory-table th.dir-thumb-h { width: 34px; padding: 3px 6px 3px 4px; }
/* The atlas background is gated behind .faces-on (added by initDirectory when
   the section approaches) so the 122KB atlas is never fetched at boot -- a bare
   background-image here loads with the initial CSS even under
   content-visibility:auto (measured in the local harness, 2026-07-09). Pre-JS
   rows show a quiet marble plaque instead. */
.gls2 .dir-face { width: 24px; height: 24px; display: block; border-radius: 3px; background-color: var(--marble-2); background-size: 384px 360px; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(42,36,28,0.18); }
.gls2 .dir-wrap.faces-on .dir-face { background-image: url(data/photos/atlas.webp); }
.gls2 .dir-face-none { background-image: none; }
.gls2 .dir-star-svg { fill: var(--leaf-gold); display: inline-block; vertical-align: middle; }
.gls2 .directory-table tbody tr.dir-row.dir-mine { background: rgba(168,134,60,0.20); }
.gls2 .directory-table tbody tr.dir-row.dir-mine th[scope="row"] { box-shadow: inset 3px 0 0 var(--leaf-gold); }

/* --- beat-table row highlight for a my-rep --- */
.gls2 .beat-table tr.row-mine th, .gls2 .beat-table tr.row-mine td { background: rgba(168,134,60,0.16); }
.gls2 .beat-table tr.row-mine th[scope="row"] { box-shadow: inset 3px 0 0 var(--leaf-gold); }

/* --- my-reps sticky chip on the stage --- */
/* r17 (Matt): persistent floating chip, FIXED to the viewport bottom-left and
   kept out of .floor-stage's stacking context so it always sits on top of the
   panels the whole time (was absolute inside the sticky stage, where scrolling
   panels painted over it and it collided with the hero eyebrow line). */
/* n5: chip anchored to the TOP (below the theme masthead) -- the host site's
   translation widget floats bottom-left and used to cover it there. */
.gls2 .myreps-chip { position: fixed; left: 16px; top: calc(var(--gls2-hdr) + 12px); z-index: 39; display: inline-flex; align-items: center; gap: 9px; background: var(--ink); color: var(--marble); border-top: 2px solid var(--leaf-gold); padding: 7px 10px 7px 11px; border-radius: 2px; box-shadow: 0 8px 26px rgba(0,0,0,0.34); font-size: 0.78rem; line-height: 1.2; max-width: calc(100vw - 32px); }
.gls2 .myreps-view { font: inherit; font-size: 0.74rem; font-weight: 600; color: var(--engrave); background: linear-gradient(175deg, var(--brass-hi), var(--brass-lo)); border: 1px solid var(--brass-edge); border-radius: 2px; padding: 4px 9px; cursor: pointer; white-space: nowrap; }
.gls2 .myreps-chip[hidden] { display: none; }
.gls2 .myreps-star svg { fill: var(--gold-on-ink); display: block; }
.gls2 .myreps-names { font-weight: 600; }
.gls2 .myreps-clear { font: inherit; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-on-ink); background: none; border: 1px solid rgba(201,165,90,0.5); border-radius: 2px; padding: 3px 8px; cursor: pointer; }
.gls2 .myreps-clear:hover { background: rgba(201,165,90,0.15); }

/* --- ZIP privacy line --- */
.gls2 .zip-privacy { font-size: 0.74rem; color: var(--gray-note); margin: 8px 0 0; letter-spacing: 0.01em; }

/* ============================ RESPONSIVE ============================ */
/* the theme masthead is position:fixed only at >=1001px (measured
   2026-07-07); below that it sits in flow, so there is nothing to
   offset -- pre-JS fallback must match or mobile gets a dead band */
@media (max-width: 1000px) {
  .gls2 { --gls2-hdr: 0px; }
}
@media (max-width: 1100px) {
  .gls2 .stage-art { width: 54%; padding-right: 20px; }
  .gls2 .hero-card, .gls2 .beat-card { width: calc(46% - 24px); }
}
@media (max-width: 860px) {
  .gls2 .cta-inner { grid-template-columns: 1fr; gap: 26px; }
}

/* mobile floor: the seatmap is a normal hero graphic that SCROLLS AWAY.
   (Matt 2026-07-11, 5a: it must not stay pinned while the reader scrolls. The
   desktop scrollytelling keeps its sticky stage; mobile does not.) */
@media (max-width: 760px) {
  .gls2 { font-size: 17px; }
  .gls2 .floor-stage {
    position: static;
    height: auto; min-height: 0;
    justify-content: center;
    background: linear-gradient(180deg, var(--marble-hi), var(--marble) 88%, var(--marble));
    /* r21-n2: the theme's mobile masthead hangs its blue phone bar ~19px below
       the masthead box (mob-consult-link, bottom ~103px) and paints OVER page
       content (masthead z100). 28px of top padding floats the chamber toggle
       clear of it; before, the bar bisected the toggle. */
    padding: 28px 0 4px;
    border-bottom: 1px solid var(--hairline);
  }
  /* beat plate rides the card's top edge on desktop (absolute, -14px); on a
     phone the longer plates ("05 THE MINORITY WORKHORSES") wrapped and collided
     with the H2. In flow above the heading it can never overlap. */
  .gls2 .beat-plate { position: static; top: auto; left: auto; margin: 0 0 12px; }
  .gls2 .beat-card h2 { margin-top: 0; }
  .gls2 .stage-art { width: 100%; max-width: 400px; padding: 0 14px; }
  .gls2 .seatmap { max-height: 30vh; }
  .gls2 .stage-legend { font-size: 0.7rem; gap: 14px; }

  /* r22 (Matt): "See the floor" popout -- replaces the backed-out per-beat
     minis. One trigger per beat; tapping it moves the REAL .stage-art (svg +
     chamber toggle + tooltip + legend) into this sheet, so it gets the full
     desktop map experience at full width/height instead of a 30vh sliver. */
  .gls2 .beat-map-open {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 2px 0 20px; padding: 9px 16px;
    font-family: "Libre Franklin", sans-serif; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-gold);
    background: linear-gradient(180deg, var(--marble-hi), var(--panel));
    border: 1px solid var(--brass-edge); border-radius: 3px; cursor: pointer;
  }
  .gls2 .beat-map-open:active { background: rgba(168,134,60,0.16); }
  .gls2 .beat-map-open .bmo-arrow { font-size: 0.95em; }

  .gls2 .floor-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    max-height: 94vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--panel); border-top: 1px solid var(--brass-edge);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -14px 34px rgba(42,36,28,0.3);
    transform: translateY(102%);
    transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .gls2 .floor-sheet.open { transform: translateY(0); }
  .gls2 .floor-sheet-bar {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px; background: linear-gradient(180deg, var(--marble-hi), var(--panel));
    border-bottom: 1px solid var(--hairline);
  }
  .gls2 .floor-sheet-cap {
    margin: 0; font-family: "Marcellus", Georgia, serif; font-size: 0.9rem;
    color: var(--text-gold); letter-spacing: 0.02em;
  }
  /* r24 (Matt): "clicking is very difficult" -- the close button and the
     chamber-toggle pills were well under any real touch-target size (toggle
     row measured 24px tall). Both now clear the 44px minimum. */
  .gls2 .floor-sheet-close {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--brass-edge); background: none; color: var(--ink-soft);
    font-size: 1.35rem; line-height: 1; cursor: pointer;
  }
  .gls2 .floor-sheet-close:active { background: rgba(168,134,60,0.16); }
  .gls2 .floor-sheet-body { padding: 6px 0 24px; }
  /* higher specificity (two classes) wins over the base .stage-art/.seatmap
     rules above, which still apply while stage-art sits in its floor-stage
     home */
  .gls2 .floor-sheet-body .stage-art { width: 100%; max-width: none; padding: 10px 6px 0; }
  .gls2 .floor-sheet-body .seatmap { max-height: 66vh; }
  .gls2 .floor-sheet-body .chamber-toggle { margin-bottom: 14px; gap: 8px; }
  .gls2 .floor-sheet-body .cht-btn {
    padding: 12px 18px; font-size: 0.8rem; min-height: 44px;
    min-width: 44px; border-radius: 4px;
  }
  .gls2 .floor-sheet-body .stage-legend { font-size: 0.82rem; gap: 20px; margin-top: 12px; }
  .gls2 .floor-sheet-body .stage-legend { justify-content: center; margin-top: 8px; }
  .gls2 .panels { margin-top: 0; }
  .gls2 .panel { min-height: 0; padding: 26px 0 30px; display: block; }
  .gls2 .hero-panel { min-height: 0; }
  .gls2 .hero-card, .gls2 .beat-card {
    margin: 0 16px; max-width: none; width: auto; min-width: 0;
  }
  .gls2 .beat-card { padding: 24px 18px 20px; margin-top: 16px; }
  .gls2 .gls2-spotlight-row { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  /* r18-n2: two-card rows keep TWO columns on phones. Without this, the 3-col
     reset above outranks the base .spotlight-row-2 rule by order and the third
     column renders empty ("33% of the image div is whitespace"). max-width
     lifts so the two cards use the full card width. */
  .gls2 .spotlight-row-2 { grid-template-columns: repeat(2, 1fr); max-width: none; }
  .gls2 .pcard-name { font-size: 0.92rem; }
  .gls2 .pcard-stat b { font-size: 1.2rem; }
  /* r17: chip stays fixed on mobile too, just tucked tighter into the corner. */
  .gls2 .myreps-chip { left: 12px; top: calc(var(--gls2-hdr) + 12px); font-size: 0.72rem; padding: 6px 8px; gap: 7px; max-width: calc(100vw - 24px); }
  .gls2 .myreps-clear { font-size: 0.62rem; padding: 2px 6px; }
  .gls2 .hstat-lab { white-space: normal; }
  .gls2 .pairs { grid-template-columns: 1fr; }
  .gls2 .pair-versus { flex-direction: row; gap: 8px; padding: 6px 0; }
  /* r23 (Matt, section 09 "text match" pairs): .pair-photo's height was FIXED
     at 148px, tuned for desktop's ~188px-wide card (a comfortable ~1.27:1
     headshot band). On mobile .pairs collapses to one full-width column
     (~316px), so that same 148px became a ~2.14:1 landscape banner -- only
     the top third of each portrait, face edge-to-edge, read as "stretched."
     Scale height with viewport width (same clamp(vw) idiom as .pcard-img)
     to hold roughly the desktop crop ratio at any mobile width instead of a
     fixed pixel height. */
  .gls2 .pair-photo { height: clamp(190px, 64vw, 260px); }
  .gls2 .dir-wrap { max-height: 64vh; }
  .gls2 .lookup { contain-intrinsic-size: auto 630px; }
  .gls2 .directory { contain-intrinsic-size: auto 1090px; }
  .gls2 .cta { contain-intrinsic-size: auto 550px; }
  .gls2 .colophon { contain-intrinsic-size: auto 510px; }
}
@media (max-width: 420px) {
  .gls2 .hero-stats { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  /* Keep the three spotlight cards as one even row (3-col) down to the
     narrowest phones -- a 2-col grid left a lopsided orphan third card. Equal
     heights come from the fixed .pcard-photo aspect box. */
  .gls2 .gls2-spotlight-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .gls2 .spotlight-row-2 { grid-template-columns: repeat(2, 1fr); max-width: none; } /* r18-n2 */
  .gls2 .pcard-plate { padding: 9px 9px 10px; }
  .gls2 .pcard-note { letter-spacing: 0.05em; }
  .gls2 .zip-plate-label { font-size: 0.7rem; letter-spacing: 0.12em; }
  .gls2 .zip-row { flex-direction: column; }
  .gls2 .zip-row input { border-right: 1.5px solid var(--ink-soft); border-bottom: none; }
  .gls2 .zip-go { padding: 12px 16px; }
}

@media (max-width: 900px) {
  .gls2 .more-data-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .gls2 .more-data-grid { grid-template-columns: 1fr; }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  .gls2 .seat.enhanced, .gls2 .seat-dot, .gls2 .toast, .gls2 .seat-tip { transition: none !important; }
}
.gls2.motion-off .seat.enhanced { transition: none !important; }

/* ===== WP-embed adjustments (gls2) -- hand-editable tail ===== */
/* The .gls2 scope is a <div> inside the theme body (not <body>). Escape the theme's
   content-width wrappers so the full-bleed marble bands (hero border, method panel,
   CTA) reach edge to edge; .section-inner re-centres the content at 1080px. */
body.gls2-page .content-area { padding-top: 0 !important; padding-bottom: 0 !important; }
body.gls2-page .entry-content,
body.gls2-page .entry-content.content-width {
    max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
}
body.gls2-page .entry-content > * { max-width: none !important; }
body.gls2-page .entry-header { display: none !important; }
.gls2 .site-mark { display: none; }

/* Theme leak: .masthead .mob-consult-link is white phone text hanging ~500px below the
   fixed 94px header. Invisible on this marble page, but hide it >=1001px as a safety
   (the value is a bet on a hex; belt and suspenders). */
@media (min-width: 1001px) {
    body.gls2-page .masthead .mob-consult-link { display: none !important; }
}

/* Gravity Form 1 on the light CTA band, scoped under .gls2 .gls2-form
   (round two: squared fields with an inset paper shadow, the submit as an
   engraved brass plate) */
.gls2 .gls2-form .gform_wrapper { margin: 0; }
.gls2 .gls2-form .gform_wrapper .gfield_label { font-family: "Libre Franklin", sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.gls2 .gls2-form .gform_wrapper input[type=text],
.gls2 .gls2-form .gform_wrapper input[type=email],
.gls2 .gls2-form .gform_wrapper input[type=tel],
.gls2 .gls2-form .gform_wrapper textarea,
.gls2 .gls2-form .gform_wrapper select {
    font-family: "Libre Franklin", sans-serif; font-size: 1rem; padding: 11px 13px;
    border: 1.5px solid var(--ink-soft); border-radius: 0; background: #fff; color: var(--ink); width: 100%;
    box-shadow: inset 0 2px 4px rgba(42,36,28,0.08);
}
.gls2 .gls2-form .gform_wrapper input:focus,
.gls2 .gls2-form .gform_wrapper textarea:focus { outline: 2px solid var(--leaf-gold); outline-offset: 1px; border-color: var(--leaf-gold); }
.gls2 .gls2-form .gform_wrapper .gform_button,
.gls2 .gls2-form .gform_wrapper .gform_footer input[type=submit] {
    font-family: "Libre Franklin", sans-serif; font-weight: 600; font-size: 1rem;
    color: var(--engrave);
    background: linear-gradient(175deg, var(--brass-hi) 0%, var(--brass-mid) 48%, var(--brass-lo) 100%);
    border: 1px solid var(--brass-edge); border-radius: 0;
    box-shadow: inset 0 1px 0 var(--brass-lip), inset 0 -1px 0 rgba(0,0,0,0.28), 0 2px 6px rgba(42,36,28,0.25);
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
    padding: 13px 26px; cursor: pointer;
}
.gls2 .gls2-form .gform_wrapper .gform_button:hover { filter: brightness(1.06); }
.gls2 .gls2-form .gform_wrapper .validation_error { color: var(--oxblood); font-weight: 600; }
.gls2 .gls2-form .gform_wrapper .gfield_error input { border-color: var(--oxblood) !important; }
.gls2 .gls2-form .gform_confirmation_message { font-size: 1.05rem; color: var(--ink); padding: 16px 0; }