/* Leesburg Ledger, round 7 color study.
   Swap variant with one class on <body>:
     theme-masthead | theme-hero | theme-accents
   Palette lives in these variables. Marks, tags, pins, and map
   markers stay on ink/paper and are never set to navy or red. */

:root {
  --navy: #1B2F4E;
  --red: #9B2C2C;
  --paper: #F7F6F3;
  --ink: #171717;
  --hero-muted: #D0CDC7; /* 8.47:1 on navy */

  --link: var(--ink);
  --wordmark-color: var(--ink);
  --nav-current: var(--ink);
  --section-label: var(--muted);
  --masthead-rule: transparent;
  --hero-bg: transparent;
  --hero-fg: var(--ink);
  --hero-rule: transparent;
  --heading-link: var(--ink);
}

/* A — Masthead: navy identity, thin red rule, ink headings, navy links */
.theme-masthead {
  --link: var(--navy);
  --wordmark-color: var(--navy);
  --nav-current: var(--navy);
  --heading-link: var(--navy);
  --masthead-rule: var(--red);
}

/* B — Hero band: navy field behind the 7 Royal lead only */
.theme-hero {
  --hero-bg: var(--navy);
  --hero-fg: var(--paper);
  --hero-rule: var(--red);
}

/* C — Accents: red small-cap section labels, navy heading links and nav */
.theme-accents {
  --section-label: var(--red);
  --heading-link: var(--navy);
  --nav-current: var(--navy);
}

/* Shared hooks */
.wordmark { color: var(--wordmark-color); }
.nav-list a[aria-current="page"] {
  color: var(--nav-current);
  font-weight: 650;
}

/* A: links navy; headings stay ink. Do not recolor marks, tags, or pins. */
.theme-masthead a { color: var(--link); }
.theme-masthead h1,
.theme-masthead h2,
.theme-masthead h3 { color: var(--ink); }
.theme-masthead .wordmark { color: var(--wordmark-color); }

/* Thin red rule under the header row (wordmark + search), full width. */
.theme-masthead .shell::after {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: end;
  height: 2.5px;
  background: var(--masthead-rule);
  pointer-events: none;
  z-index: 5;
}

/* C: section labels in red small caps. Recently decided is a label, not a display heading. */
.theme-accents.page-home .recent > h1,
.theme-accents .rail-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--section-label);
  font-variation-settings: normal;
  margin: 0 0 14px;
}
.theme-accents .headline { color: var(--heading-link); }
.theme-accents .nav-list a[aria-current="page"] { color: var(--nav-current); }

/* B: navy band behind the lead. Red rule is a 2.5px line at the top of the band,
   not a block of red beside the navy. Headline and summary in off-white.
   Vote marks invert to paper-on-navy so they still read, but keep the same
   shapes and words — never red for No or navy for Yes. */
.theme-hero .lead-card {
  background: var(--hero-bg);
  color: var(--hero-fg);
  border-bottom: 0;
  border-top: 2.5px solid var(--hero-rule);
  padding: 22px 24px 26px;
  margin-top: 6px;
  margin-bottom: 16px;
}
.theme-hero .lead-card .headline {
  color: var(--hero-fg);
}
.theme-hero .lead-card a.headline:hover {
  color: var(--hero-fg);
}
.theme-hero .lead-card .outcome {
  color: var(--hero-fg);
}
.theme-hero .lead-card .card-note,
.theme-hero .lead-card .card-meta,
.theme-hero .lead-card .tally-announced,
.theme-hero .lead-card .lead-credit,
.theme-hero .lead-card .votes-link a {
  color: var(--hero-muted);
}
.theme-hero .lead-card .votes-link a { text-decoration: underline; }

/* Paper frame around the locator */
.theme-hero .lead-card .lead-visual {
  background: var(--paper);
  padding: 4px;
  display: block;
}
.theme-hero .lead-card .lead-visual img {
  display: block;
  background: var(--paper);
}

/* Monochrome marks, inverted for contrast on the navy band only. */
.theme-hero .lead-card .mark { color: var(--paper); }
.theme-hero .lead-card .mark-shape {
  border-color: var(--paper);
}
.theme-hero .lead-card .mark-yes .mark-shape {
  background: var(--paper);
  color: var(--navy);
}
.theme-hero .lead-card .mark-no .mark-shape,
.theme-hero .lead-card .mark-abstain .mark-shape {
  background: transparent;
  color: var(--paper);
}
.theme-hero .lead-card .mark-blank .mark-shape {
  border-style: dotted;
  background: transparent;
  color: transparent;
  border-color: var(--paper);
}

/* Hard rule: never paint tags, pins, or marks in --red or as yes=navy / no=red. */
.tag,
.pin,
.pin-label,
.map-legend .sq,
.map-legend .circ {
  /* keep ink/paper from the base stylesheet */
}


/* A + frame (default on round 7 Home): compact navy band at the top of
   Coming up, and a navy footer band for the quiet meta line.
   No red inside either band. No color behind decided issues or the lead. */
.theme-masthead .up-band {
  background: var(--navy);
  color: var(--paper);
  border-radius: 0;
  box-sizing: border-box;
  height: 38px;
  min-height: 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Bleed to the rail column edges and up to the header rule. */
  margin: -12px calc(-1 * var(--gutter)) 14px -8px;
  padding: 0 16px;
}
.theme-masthead .up-band .rail-title {
  color: var(--paper);
  margin: 0;
  letter-spacing: 0.12em;
  line-height: 1;
}

/* Matching navy cue on the left column head. No band behind the heading. */
.theme-masthead.page-home .recent > h1 {
  color: var(--navy);
}
.theme-masthead.page-home .recent > h1::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--navy);
  margin-top: 8px;
}

/* Word cue only; no color change. The line is already small caps. */
.theme-masthead .up-tonight {
  font-weight: 700;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.theme-masthead .site-nav {
  grid-row: 1 / 3;
}
.theme-masthead .site-footer {
  grid-column: 1 / -1;
  background: var(--navy);
  color: var(--paper);
  border-radius: 0;
  padding: 16px 36px 18px 28px;
}
.theme-masthead .site-footer strong {
  color: var(--paper);
  font-weight: 650;
}

@media (max-width: 1099px) {
  .theme-masthead .up-band {
    margin: 0 0 12px;
    padding: 10px 16px;
  }
}


/* Round 8 inner pages: the page title is navy, and the 2px × 48px
   rule under it is the one in-content navy element, on every page.
   A real .title-rule element is used (not only ::after) so the rule
   cannot fail if the heading’s overflow or line-box clips a pseudo.
   No navy rail bands. The navy footer remains page chrome. */
.theme-masthead .page-head > h1 {
  color: var(--navy);
}
.theme-masthead .title-rule {
  background: var(--navy);
  width: 48px;
  height: 2px;
  display: block;
  margin: 8px 0 16px;
}