/* Chip Flanders Advisory /v5 — one container, one left edge, one voice.
   Palette is his: warm ivory, navy, rare gold (ink-gold on light grounds). */

:root {
  --paper:      #FBF7F0;
  --stone:      #F3EDE2;
  --raised:     #FFFDF8;
  --navy:       #152943;
  --navy-ink:   #0A1524;
  --charcoal:   #37342F;
  --char-mid:   #6B6459;
  --gold-ink:   #7F5E23;
  --ivory:      #F2ECDF;
  --ivory-mid:  #C6BCA9;
  --rule:       #DDD3C1;
  --rule-navy:  #2C4262;
  --head:       #152943;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --fs-h1:   clamp(2.5rem, 1.7rem + 3.6vw, 4.4rem);
  --fs-h2:   clamp(1.8rem, 1.4rem + 1.8vw, 2.7rem);
  --fs-stmt: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem);
  --fs-lead: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-micro: 0.78rem;
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
    --paper:    #101823;
    --stone:    #0C1420;
    --raised:   #17212E;
    --navy:     #1B2739;
    --navy-ink: #080D15;
    --charcoal: #D9D2C4;
    --char-mid: #9C9482;
    --gold-ink: #C4A05C;
    --rule:     #24303F;
    --rule-navy:#26364C;
    --head:     #E9E2D2;
  }
}
:root[data-theme="dark"] {
    --paper:    #101823;
    --stone:    #0C1420;
    --raised:   #17212E;
    --navy:     #1B2739;
    --navy-ink: #080D15;
    --charcoal: #D9D2C4;
    --char-mid: #9C9482;
    --gold-ink: #C4A05C;
    --rule:     #24303F;
    --rule-navy:#26364C;
    --head:     #E9E2D2;
  }


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--charcoal);
  background: var(--paper);
}
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; }
::selection { background: var(--navy); color: var(--paper); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) ::selection { background: var(--ivory); color: var(--navy-ink); }
}
:root[data-theme="dark"] ::selection { background: var(--ivory); color: var(--navy-ink); }


:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -100vw; top: 0;
  background: #152943; color: #FBF7F0;
  padding: 0.6rem 1rem; font-family: var(--sans); font-size: var(--fs-small);
}
.skip-link:focus { left: 0; z-index: 10; }

/* THE container. The only centered box on the site; everything inside it
   shares one left edge. */
.wrap {
  width: min(100% - clamp(2.5rem, 8vw, 5rem), 68rem);
  margin-inline: auto;
}

/* ---------------------------------------------------------------- bands */
.band { padding-block: clamp(3.25rem, 2.25rem + 4vw, 6rem); }
.band--paper { background: var(--paper); }
.band--stone { background: var(--stone); }
.band--navy, .band--ink {
  --head: var(--ivory);
  --charcoal: var(--ivory);
  --char-mid: var(--ivory-mid);
  --rule: var(--rule-navy);
  --gold-ink: #D3B075;
  color: var(--ivory);
}
.band--navy { background: var(--navy); }
.band--ink  { background: var(--navy-ink); }

/* ---------------------------------------------------------------- type */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1.1rem;
}
h1 {
  font-size: var(--fs-h1);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--head);
  max-width: 14ch;
}
.band--navy h1, .band--ink h1, .band--navy h2, .band--ink h2 { color: var(--ivory); }
h2 {
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.018em;
  font-weight: 500;
  color: var(--head);
  max-width: 22ch;
  margin-bottom: clamp(1.4rem, 2.5vw, 2.2rem);
}
h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 500;
  color: var(--head);
}
.band--navy h3, .band--ink h3 { color: var(--ivory); }
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--char-mid);
  max-width: 46ch;
}
.prose { max-width: 56ch; }
.prose p { max-width: 56ch; font-size: 1.125rem; color: var(--char-mid); }
.prose p + p { margin-top: 0.85em; }
h1 + .lead, h2 + .lead { margin-top: 1.1rem; }
.lead + .prose, .prose + .prose { margin-top: 1.4rem; }

/* his short parallel sentences: ONE treatment, everywhere. Larger serif,
   plain stack, no rules, no plates, no indents. */
.lines { margin-block: clamp(1.6rem, 3vw, 2.4rem); }
.lines p {
  font-size: clamp(1.35rem, 1.12rem + 1vw, 1.9rem);
  line-height: 1.42;
  color: var(--charcoal);
  max-width: 36ch;
}
.lines p + p { margin-top: 0.42em; }

/* one compact serif line for joined short sentences */
.linerow {
  font-size: var(--fs-stmt);
  line-height: 1.5;
  color: var(--head);
  max-width: 44ch;
  margin-block: clamp(1.4rem, 2.5vw, 2rem);
}
.band--navy .linerow, .band--ink .linerow { color: var(--ivory); }

/* ---------------------------------------------------------------- actions */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--navy);
  color: #FBF7F0;
  padding: 1rem 1.9rem;
  border: 1px solid var(--navy);
  transition: background-color 200ms ease, border-color 200ms ease;
}
.btn:hover { background: var(--navy-ink); border-color: var(--navy-ink); }
.band--navy .btn, .band--ink .btn {
  background: var(--ivory); color: #0A1524; border-color: var(--ivory);
}
.band--navy .btn:hover, .band--ink .btn:hover { background: #FFFDF8; border-color: #FFFDF8; }
.btn-row { margin-top: clamp(1.9rem, 3vw, 2.75rem); }

.onward {
  margin-top: clamp(1.9rem, 3vw, 2.75rem);
  font-family: var(--sans);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.onward a { text-decoration: none; border-bottom: 1px solid var(--gold-ink); padding-bottom: 0.2rem; }
.onward a:hover { border-bottom-width: 2px; }
.link { color: inherit; text-decoration-color: var(--gold-ink); }

/* ---------------------------------------------------------------- layouts */
/* the one two-column device: content left, media/aside right. Same left edge
   as everything else; collapses to a single column below 60rem. */
.duo { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 60rem) {
  .duo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
  .duo--tight { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
.duo > figure { margin: 0; }
.duo img { border: 1px solid var(--rule); width: 100%; }
/* landscape sources cropped taller so hero media holds its column */
.photo--tall img { aspect-ratio: 4 / 3.1; object-fit: cover; }
.wrap > .grid, .wrap > .duo { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.duo--top { align-items: start; }
@media (min-width: 60rem) { .duo--top { align-items: start; } }
.onward--plain a { text-transform: none; letter-spacing: 0.02em; }
.onward--plain { text-transform: none; letter-spacing: 0.02em; }

/* an even grid for short repeated items (services, tiers, stages, questions) */
.grid { display: grid; gap: clamp(1.6rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 46rem) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 46rem) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cell h3 { margin-bottom: 0.45rem; }
.cell p { font-size: var(--fs-body); color: var(--char-mid); max-width: 44ch; }
.cell p + p { margin-top: 0.6em; }
.cell--label {
  font-family: var(--sans); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink);
  margin-bottom: 0.5rem;
}

/* questions: same grid, serif at statement size */
.grid .q {
  font-size: var(--fs-stmt);
  line-height: 1.38;
  color: var(--charcoal);
  max-width: 30ch;
}

/* ---------------------------------------------------------------- figures */
figure.photo { margin: 0; }
figure.photo img { border: 1px solid var(--rule); }
.photo--band { margin-top: clamp(2.25rem, 4vw, 3.5rem); }

/* the quote: left-aligned like everything else, gold rule above */
.quote { max-width: none; }
.quote::before {
  content: ""; display: block; width: 3.5rem; height: 1px;
  background: var(--gold-ink); margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.quote blockquote {
  max-width: 26ch;
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ivory);
}
.quote figcaption {
  margin-top: 1.4rem;
  font-family: var(--sans); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory-mid);
}

/* the 50-markets stat */
.stat { display: grid; gap: 0.4rem; max-width: 26rem; margin-block: clamp(1.6rem, 3vw, 2.4rem); }
.stat__value {
  font-size: clamp(3.2rem, 2.4rem + 3vw, 5rem);
  line-height: 1; color: var(--head); border-top: 2px solid var(--gold-ink);
  padding-top: 0.9rem; font-weight: 500;
}
.stat__body { font-family: var(--sans); font-size: var(--fs-small); line-height: 1.55; color: var(--char-mid); }

/* the control-state schematic, compact */
.schematic { border: 1px solid var(--rule); background: var(--raised); padding: clamp(1.25rem, 3vw, 2.25rem); }
.schematic__note { font-family: var(--sans); font-size: var(--fs-small); color: var(--char-mid); max-width: 52ch; }
.schematic__legend { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; margin-block: 1.1rem; }
.legend-key { font-family: var(--sans); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--char-mid); display: flex; align-items: center; gap: 0.5rem; }
.legend-key__swatch { width: 0.8rem; height: 0.8rem; border: 1px solid var(--rule); background: var(--raised); }
.legend-key--mark .legend-key__swatch { background: var(--navy); border-color: var(--navy); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .legend-key--mark .legend-key__swatch { background: var(--ivory); border-color: var(--ivory); }
}
:root[data-theme="dark"] .legend-key--mark .legend-key__swatch { background: var(--ivory); border-color: var(--ivory); }

.stategrid-scroll { overflow-x: auto; }
.stategrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
  min-width: 34rem;
}
.statecell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); background: var(--raised);
  font-family: var(--sans); font-size: var(--fs-micro); font-weight: 600;
  color: var(--char-mid); position: relative;
}
.statecell--control { background: var(--navy); border-color: var(--navy); color: #F2ECDF; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .statecell--control { background: var(--ivory); border-color: var(--ivory); color: #0A1524; }
}
:root[data-theme="dark"] .statecell--control { background: var(--ivory); border-color: var(--ivory); color: #0A1524; }

.schematic__source { margin-top: 1.1rem; font-family: var(--sans); font-size: var(--fs-micro); line-height: 1.6; color: var(--char-mid); max-width: 72ch; }

/* ---------------------------------------------------------------- header */
.site-header { background: var(--raised); border-bottom: 1px solid var(--rule); }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.8rem 2rem; padding-block: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; }
.brand__mark { width: 30px; height: 31px; background: url("/assets/img/cf-mark.png") center / contain no-repeat; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .brand__mark { filter: invert(1) brightness(1.6) saturate(0.35); }
}
:root[data-theme="dark"] .brand__mark { filter: invert(1) brightness(1.6) saturate(0.35); }

.brand__name { font-size: 1.12rem; color: var(--navy); letter-spacing: 0.01em; white-space: nowrap; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .brand__name { color: var(--ivory); }
}
:root[data-theme="dark"] .brand__name { color: var(--ivory); }

.site-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.5rem; }
.site-nav a {
  font-family: var(--sans); font-size: var(--fs-small); text-decoration: none;
  color: var(--char-mid); padding-block: 0.35rem; position: relative;
}
.site-nav a:hover { color: var(--navy); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .site-nav a:hover { color: var(--ivory); }
}
:root[data-theme="dark"] .site-nav a:hover { color: var(--ivory); }

.site-nav a[aria-current="page"] { color: var(--navy); border-bottom: 2px solid var(--gold-ink); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .site-nav a[aria-current="page"] { color: var(--ivory); }
}
:root[data-theme="dark"] .site-nav a[aria-current="page"] { color: var(--ivory); }

.site-nav .nav-cta a {
  background: var(--navy); color: #FBF7F0; border: 1px solid var(--navy);
  padding: 0.5rem 1.05rem;
}
.site-nav .nav-cta a:hover { background: var(--navy-ink); border-color: var(--navy-ink); color: #FBF7F0; }
.site-nav .nav-cta a[aria-current="page"] { background: transparent; color: var(--navy); border-bottom: 1px solid var(--navy); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .site-nav .nav-cta a { background: var(--ivory); border-color: var(--ivory); color: #0A1524; }
:root:not([data-theme="light"]) .site-nav .nav-cta a:hover { background: #FFFDF8; border-color: #FFFDF8; color: #0A1524; }
:root:not([data-theme="light"]) .site-nav .nav-cta a[aria-current="page"] { background: transparent; color: var(--ivory); border-color: var(--ivory); }
}
:root[data-theme="dark"] .site-nav .nav-cta a { background: var(--ivory); border-color: var(--ivory); color: #0A1524; }
:root[data-theme="dark"] .site-nav .nav-cta a:hover { background: #FFFDF8; border-color: #FFFDF8; color: #0A1524; }
:root[data-theme="dark"] .site-nav .nav-cta a[aria-current="page"] { background: transparent; color: var(--ivory); border-color: var(--ivory); }


/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--navy-ink); color: var(--ivory-mid); padding-block: clamp(2.5rem, 5vw, 4rem) 1.75rem; }
.site-footer .wrap { display: grid; gap: 2.25rem; }
@media (min-width: 60rem) { .footer-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 2rem; } }
.footer-name { font-size: 1.3rem; color: var(--ivory); }
.footer-slogan {
  margin-top: 0.55rem; font-family: var(--sans); font-size: var(--fs-micro);
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #D3B075;
}
.footer-promise { margin-top: 0.5rem; font-size: var(--fs-small); }
.footer-contact { margin-top: 1.1rem; font-family: var(--sans); font-size: var(--fs-small); }
.footer-contact a { display: block; width: fit-content; color: var(--ivory); text-decoration: none; border-bottom: 1px solid var(--rule-navy); padding-bottom: 0.15rem; margin-top: 0.5rem; }
.footer-contact a:hover { border-bottom-color: #D3B075; }
.footer-nav ul { display: grid; gap: 0.55rem; font-family: var(--sans); font-size: var(--fs-small); }
@media (min-width: 40rem) { .footer-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer-nav a { text-decoration: none; color: var(--ivory-mid); }
.footer-nav a:hover { color: var(--ivory); }
.footer-base {
  border-top: 1px solid var(--rule-navy); padding-top: 1.25rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between;
  font-family: var(--sans); font-size: var(--fs-micro);
}

/* ---------------------------------------------------------------- form */
.form { display: grid; gap: 1.4rem 1.5rem; max-width: 46rem; }
@media (min-width: 46rem) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full, .form-note, .form-actions { grid-column: 1 / -1; }
}
.field label {
  display: block; font-family: var(--sans); font-size: var(--fs-micro);
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--char-mid); margin-bottom: 0.5rem;
}
.field input, .field textarea {
  width: 100%; font-family: var(--serif); font-size: var(--fs-body);
  color: var(--charcoal); background: var(--raised);
  border: 1px solid var(--rule); padding: 0.9rem 1rem;
}
.field textarea { min-height: 10.5rem; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--gold-ink); outline-offset: 1px; }
.field-hint, .form-note { font-family: var(--sans); font-size: var(--fs-small); color: var(--char-mid); }
.field-hint { margin-top: 0.4rem; }
.form-note { max-width: 44ch; }
.field--trap { pointer-events: none; }
.form-actions .btn { border: 0; cursor: pointer; }
.confirm { margin-top: clamp(1.5rem, 3vw, 2.25rem); background: var(--raised); border: 1px solid var(--rule); padding: clamp(1.4rem, 3vw, 2.25rem); max-width: 46rem; }
.confirm p { font-size: var(--fs-lead); line-height: 1.45; color: var(--navy); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .confirm p { color: var(--ivory); }
}
:root[data-theme="dark"] .confirm p { color: var(--ivory); }

.confirm .confirm-alt { margin-top: 0.9rem; font-family: var(--sans); font-size: var(--fs-small); color: var(--char-mid); }
[hidden] { display: none; }

/* signoff under the closing CTA */
.signoff { margin-top: clamp(2rem, 4vw, 3rem); font-family: var(--sans); font-size: var(--fs-small); line-height: 1.55; }
.signoff .signoff-name { letter-spacing: 0.1em; text-transform: uppercase; color: var(--ivory); }
.signoff a { color: var(--ivory); }

/* quiet theme switch at the right end of the header: moon in light mode
   (the theme you would switch to), sun in dark. Icon swap is pure CSS off
   the data-theme attribute the boot script always sets. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0;
  color: var(--char-mid); background: none; border: 1px solid var(--rule);
  cursor: pointer;
}
.theme-toggle svg { display: block; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.theme-toggle:hover { color: var(--navy); border-color: var(--navy); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-toggle:hover { color: var(--ivory); border-color: var(--ivory); }
}
:root[data-theme="dark"] .theme-toggle:hover { color: var(--ivory); border-color: var(--ivory); }


/* tile-map placement, generated */
.st-AK { grid-row: 1; grid-column: 1; }
.st-ME { grid-row: 1; grid-column: 12; }
.st-VT { grid-row: 2; grid-column: 10; }
.st-NH { grid-row: 2; grid-column: 11; }
.st-WA { grid-row: 3; grid-column: 1; }
.st-ID { grid-row: 3; grid-column: 2; }
.st-MT { grid-row: 3; grid-column: 3; }
.st-ND { grid-row: 3; grid-column: 4; }
.st-MN { grid-row: 3; grid-column: 5; }
.st-WI { grid-row: 3; grid-column: 6; }
.st-MI { grid-row: 3; grid-column: 8; }
.st-NY { grid-row: 3; grid-column: 9; }
.st-MA { grid-row: 3; grid-column: 10; }
.st-RI { grid-row: 3; grid-column: 11; }
.st-OR { grid-row: 4; grid-column: 1; }
.st-NV { grid-row: 4; grid-column: 2; }
.st-WY { grid-row: 4; grid-column: 3; }
.st-SD { grid-row: 4; grid-column: 4; }
.st-IA { grid-row: 4; grid-column: 5; }
.st-IL { grid-row: 4; grid-column: 6; }
.st-IN { grid-row: 4; grid-column: 7; }
.st-OH { grid-row: 4; grid-column: 8; }
.st-PA { grid-row: 4; grid-column: 9; }
.st-NJ { grid-row: 4; grid-column: 10; }
.st-CT { grid-row: 4; grid-column: 11; }
.st-CA { grid-row: 5; grid-column: 1; }
.st-UT { grid-row: 5; grid-column: 2; }
.st-CO { grid-row: 5; grid-column: 3; }
.st-NE { grid-row: 5; grid-column: 4; }
.st-MO { grid-row: 5; grid-column: 5; }
.st-KY { grid-row: 5; grid-column: 6; }
.st-WV { grid-row: 5; grid-column: 7; }
.st-VA { grid-row: 5; grid-column: 8; }
.st-MD { grid-row: 5; grid-column: 9; }
.st-DE { grid-row: 5; grid-column: 10; }
.st-AZ { grid-row: 6; grid-column: 2; }
.st-NM { grid-row: 6; grid-column: 3; }
.st-KS { grid-row: 6; grid-column: 4; }
.st-AR { grid-row: 6; grid-column: 5; }
.st-TN { grid-row: 6; grid-column: 6; }
.st-NC { grid-row: 6; grid-column: 7; }
.st-SC { grid-row: 6; grid-column: 8; }
.st-OK { grid-row: 7; grid-column: 4; }
.st-LA { grid-row: 7; grid-column: 5; }
.st-MS { grid-row: 7; grid-column: 6; }
.st-AL { grid-row: 7; grid-column: 7; }
.st-GA { grid-row: 7; grid-column: 8; }
.st-HI { grid-row: 8; grid-column: 1; }
.st-TX { grid-row: 8; grid-column: 4; }
.st-FL { grid-row: 8; grid-column: 9; }

/* ---- brand wall ---------------------------------------------------------- */
.brands {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: clamp(1.9rem, 3.5vw, 3rem) clamp(1.4rem, 3vw, 2.4rem);
  align-items: center;
  margin-top: clamp(2.25rem, 3.5vw, 3.25rem);
  max-width: 62rem;
}
.brandlogo {
  height: 2.5rem;
  background-color: var(--head);
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-position: left center; -webkit-mask-position: left center;
  mask-size: contain; -webkit-mask-size: contain;
}
.brandlogo--tall { height: 3.4rem; }
.brandlogo--wide { height: 1.9rem; }
.brands__note {
  margin-top: clamp(2.25rem, 3.5vw, 3.25rem);
  font-family: var(--sans); font-size: var(--fs-micro);
  letter-spacing: 0.04em; color: var(--char-mid);
}
@media (max-width: 40rem) {
  .brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bl-jim-beam { mask-image: url(/assets/img/logos/jim-beam.png); -webkit-mask-image: url(/assets/img/logos/jim-beam.png); }
.bl-jim-beam { height: 3.4rem; }
.bl-johnnie-walker { mask-image: url(/assets/img/logos/johnnie-walker.png); -webkit-mask-image: url(/assets/img/logos/johnnie-walker.png); }
.bl-hennessy { mask-image: url(/assets/img/logos/hennessy.png); -webkit-mask-image: url(/assets/img/logos/hennessy.png); }
.bl-hennessy { height: 3.4rem; }
.bl-patron { mask-image: url(/assets/img/logos/patron.png); -webkit-mask-image: url(/assets/img/logos/patron.png); }
.bl-patron { height: 3.4rem; }
.bl-crown-royal { mask-image: url(/assets/img/logos/crown-royal.png); -webkit-mask-image: url(/assets/img/logos/crown-royal.png); }
.bl-crown-royal { height: 3.4rem; }
.bl-absolut { mask-image: url(/assets/img/logos/absolut.png); -webkit-mask-image: url(/assets/img/logos/absolut.png); }
.bl-jameson { mask-image: url(/assets/img/logos/jameson.png); -webkit-mask-image: url(/assets/img/logos/jameson.png); }
.bl-jameson { height: 3.4rem; }
.bl-makers-mark { mask-image: url(/assets/img/logos/makers-mark.png); -webkit-mask-image: url(/assets/img/logos/makers-mark.png); }
.bl-glenfiddich { mask-image: url(/assets/img/logos/glenfiddich.png); -webkit-mask-image: url(/assets/img/logos/glenfiddich.png); }
.bl-glenfiddich { height: 1.9rem; }
.bl-tanqueray { mask-image: url(/assets/img/logos/tanqueray.png); -webkit-mask-image: url(/assets/img/logos/tanqueray.png); }
.bl-ketel-one { mask-image: url(/assets/img/logos/ketel-one.png); -webkit-mask-image: url(/assets/img/logos/ketel-one.png); }
.bl-ketel-one { height: 3.4rem; }
.bl-jagermeister { mask-image: url(/assets/img/logos/jagermeister.png); -webkit-mask-image: url(/assets/img/logos/jagermeister.png); }
.bl-jagermeister { height: 3.4rem; }
.bl-dewars { mask-image: url(/assets/img/logos/dewars.png); -webkit-mask-image: url(/assets/img/logos/dewars.png); }
.bl-ciroc { mask-image: url(/assets/img/logos/ciroc.png); -webkit-mask-image: url(/assets/img/logos/ciroc.png); }
.bl-ciroc { height: 1.9rem; }
.bl-blantons { mask-image: url(/assets/img/logos/blantons.png); -webkit-mask-image: url(/assets/img/logos/blantons.png); }
.bl-blantons { height: 1.9rem; }
.bl-evan-williams { mask-image: url(/assets/img/logos/evan-williams.png); -webkit-mask-image: url(/assets/img/logos/evan-williams.png); }
.bl-grand-marnier { mask-image: url(/assets/img/logos/grand-marnier.png); -webkit-mask-image: url(/assets/img/logos/grand-marnier.png); }
.bl-grand-marnier { height: 1.9rem; }
.bl-hendricks { mask-image: url(/assets/img/logos/hendricks.png); -webkit-mask-image: url(/assets/img/logos/hendricks.png); }
.bl-hendricks { height: 1.9rem; }
.bl-svedka { mask-image: url(/assets/img/logos/svedka.png); -webkit-mask-image: url(/assets/img/logos/svedka.png); }
.bl-svedka { height: 1.9rem; }
.bl-canadian-club { mask-image: url(/assets/img/logos/canadian-club.png); -webkit-mask-image: url(/assets/img/logos/canadian-club.png); }
.bl-lunazul { mask-image: url(/assets/img/logos/lunazul.png); -webkit-mask-image: url(/assets/img/logos/lunazul.png); }
.bl-lunazul { height: 1.9rem; }
.bl-seagrams { mask-image: url(/assets/img/logos/seagrams.png); -webkit-mask-image: url(/assets/img/logos/seagrams.png); }
.bl-seagrams { height: 1.9rem; }
.bl-elijah-craig { mask-image: url(/assets/img/logos/elijah-craig.png); -webkit-mask-image: url(/assets/img/logos/elijah-craig.png); }
.bl-elijah-craig { height: 1.9rem; }

/* ---- mobile: the whole country on one screen, no sideways scrolling ------ */
@media (max-width: 40rem) {
  .schematic { padding: 1rem 0.7rem; }
  .schematic__note, .schematic__source { padding-inline: 0.2rem; }
  .stategrid { min-width: 0; gap: 2px; }
  .statecell { font-size: 0.52rem; letter-spacing: 0.01em; }
}