/* The Floodlight — SafeTeam marketing site, Atelier.
   One file. Tokens first, then base, then components in page order. */
@import url("/assets/css/fonts.css");

:root {
  --night: #102126; --night-deep: #0B181C; --night-lift: #1A333A;
  --amber: #E39B2E; --amber-soft: #F0C36A;
  --pine: #1C4A3E; --pine-deep: #12362D;
  --lamp: #FFF3D6;
  --ground: #EDEAE2; --ground-2: #E4E0D6; --ground-3: #D8D3C8;
  --ink: #12181A; --ink-soft: #3D474A; --ink-faint: #6A7376;
  --brick: #9E3B2F; --link: #1F5F86; --link-hover: #164A68;
  --focus: #E39B2E; --white: #FFFCF7;
  --veil: 11, 24, 28;
  --h-weight: 800; --h-case: uppercase; --h-track: .004em; --h-lead: .9;

  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --text: "Epilogue", "Helvetica Neue", Arial, sans-serif;
  --max: 86rem;
  --measure: 40rem;
  --gutter: clamp(1.25rem, 4.5vw, 3.75rem);
  --band: clamp(4.5rem, 10vw, 8.5rem);
  --rule: 1px solid rgba(18, 24, 26, .16);
  --rule-dark: 1px solid rgba(255, 243, 214, .14);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 1.0625rem/1.62 var(--text);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 1px; }
::selection { background: var(--amber-soft); color: var(--ink); }
p { margin: 0 0 1.1em; }
strong { font-weight: 700; }
h1, h2, h3, h4 { margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--amber); color: var(--ink); padding: .75rem 1rem; font-weight: 700; }
.skip:focus { top: 1rem; }

/* ---------- Type ---------- */
.display, h1, h2 { font-family: var(--display); font-weight: var(--h-weight); text-transform: var(--h-case); letter-spacing: var(--h-track); line-height: var(--h-lead); }
h2 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); }
h2.h2--sm { font-size: clamp(2.1rem, 4vw, 3.3rem); }
h3 { font-family: var(--text); font-weight: 700; font-size: 1.15rem; line-height: 1.3; letter-spacing: -.005em; }
h4 { font-family: var(--text); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-faint); }
.lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; max-width: 38rem; }
.measure { max-width: var(--measure); }
.small { font-size: .9rem; }
.fine { font-size: .82rem; color: var(--ink-faint); }

.label { display: inline-flex; align-items: baseline; gap: .7rem; font: 600 .78rem/1.2 var(--text); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin-bottom: 1.4rem; }
.label b { font: 700 1.15rem/1 var(--display); color: var(--amber); letter-spacing: .02em; }
.label::before { content: ""; width: 2.25rem; height: 2px; background: var(--amber); align-self: center; }
.label--plain::before { display: none; }
.on-dark .label, .band--night .label, .band--deep .label, .band--pine .label, .hero .label { color: var(--amber-soft); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 56rem; }
.band { padding-block: var(--band); }
.band--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.band--ground2 { background: var(--ground-2); }
.band--night { background: var(--night); color: var(--lamp); }
.band--deep { background: var(--night-deep); color: var(--lamp); }
.band--pine { background: var(--pine); color: var(--lamp); }
.band--night a:not(.btn), .band--deep a:not(.btn), .band--pine a:not(.btn), .on-dark a:not(.btn) { color: var(--amber-soft); }
.band--night .fine, .band--deep .fine, .band--pine .fine { color: rgba(255, 243, 214, .66); }
.band--night h4, .band--deep h4, .band--pine h4 { color: rgba(255, 243, 214, .62); }
.split { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.split--even { grid-template-columns: 1fr 1fr; }
.split--wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.stack > * + * { margin-top: 1.25rem; }
.intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.intro p { margin: 0; max-width: 34rem; color: var(--ink-soft); }
.band--night .intro p, .band--deep .intro p, .band--pine .intro p { color: rgba(255, 243, 214, .8); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .65rem; padding: .95rem 1.35rem .9rem; font: 600 .95rem/1.1 var(--text); letter-spacing: .01em; text-decoration: none; border: 2px solid transparent; border-radius: 2px; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.btn .arr { font-family: var(--display); font-weight: 700; font-size: 1.2em; line-height: .8; }
.btn--amber { background: var(--amber); color: var(--ink); }
.btn--amber:hover { background: var(--amber-soft); color: var(--ink); text-decoration: none; }
.btn--ink { background: var(--ink); color: var(--lamp); }
.btn--ink:hover { background: var(--night-lift); color: var(--white); text-decoration: none; }
.btn--line { border-color: currentColor; color: inherit; background: transparent; }
.btn--line:hover { background: rgba(255, 243, 214, .08); color: inherit; text-decoration: none; }
.btn--line-ink { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--line-ink:hover { background: var(--ink); color: var(--lamp); text-decoration: none; }
.actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; align-items: center; }
.textlink { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--amber); padding-bottom: .1rem; color: inherit; }
.textlink:hover { border-color: currentColor; color: inherit; }

/* ---------- Masthead ---------- */
.mast { position: sticky; top: 0; z-index: 100; background: var(--night); color: var(--lamp); border-bottom: 1px solid rgba(255, 243, 214, .1); }
.mast__bar { display: flex; align-items: center; gap: 2rem; height: 4.6rem; }
.mast__logo { display: block; flex: none; padding: .35rem 0; }
.mast__logo img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav > a, .nav__btn { font: 500 .95rem/1 var(--text); color: var(--lamp); text-decoration: none; padding: .7rem .8rem; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.nav > a:hover, .nav__btn:hover, .nav > a[aria-current="page"] { color: var(--amber-soft); }
.nav > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--amber); }
.nav__btn svg { width: .7rem; height: .7rem; transition: transform .15s; }
.nav__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__group { position: relative; }
.menu { position: absolute; top: calc(100% + .55rem); left: -.25rem; min-width: 20rem; background: var(--night-lift); border-top: 3px solid var(--amber); padding: .5rem 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.menu[hidden] { display: none; }
.menu a { display: block; padding: .8rem 1.25rem; color: var(--lamp); text-decoration: none; }
.menu a:hover, .menu a:focus-visible { background: rgba(255, 243, 214, .06); color: var(--white); }
.menu a b { display: block; font-weight: 600; font-size: .98rem; }
.menu a span { display: block; font-size: .82rem; color: rgba(255, 243, 214, .62); margin-top: .15rem; }
.nav > a.btn { background: var(--amber); color: var(--ink); }
.nav > a.btn:hover { background: var(--amber-soft); color: var(--ink); }
.nav .btn { margin-left: .75rem; padding: .8rem 1.15rem .75rem; }
.mast__toggle { display: none; margin-left: auto; background: none; border: 1px solid rgba(255, 243, 214, .35); color: var(--lamp); font: 600 .85rem/1 var(--text); letter-spacing: .08em; text-transform: uppercase; padding: .7rem .9rem; border-radius: 2px; cursor: pointer; }
.drawer { display: none; }

@media (max-width: 1060px) {
  .nav { display: none; }
  .mast__toggle { display: inline-flex; }
  .drawer { display: block; position: fixed; inset: 4.6rem 0 0 0; background: var(--night); color: var(--lamp); overflow-y: auto; padding: 1rem var(--gutter) 3rem; border-top: 1px solid rgba(255, 243, 214, .1); }
  .drawer[hidden] { display: none; }
  .drawer h2 { font-size: 1rem; font-family: var(--text); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--amber-soft); margin: 1.75rem 0 .5rem; }
  .drawer a { display: block; color: var(--lamp); text-decoration: none; padding: .7rem 0; border-bottom: var(--rule-dark); font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.9rem; line-height: 1.05; }
  .drawer a span { display: block; font: 400 .85rem/1.4 var(--text); text-transform: none; color: rgba(255, 243, 214, .62); }
  .drawer .btn { font: 600 1rem/1 var(--text); text-transform: none; margin-top: 2rem; border: 0; display: inline-flex; color: var(--ink); }
  body.drawer-open { overflow: hidden; }
}

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; color: var(--lamp); background: var(--night-deep); min-height: clamp(36rem, 88vh, 58rem); display: grid; align-items: end; overflow: hidden; }
.hero--mid { min-height: clamp(30rem, 72vh, 46rem); }
.hero--short { min-height: clamp(22rem, 48vh, 30rem); }
.hero__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(var(--veil), .94) 0%, rgba(var(--veil), .78) 32%, rgba(var(--veil), .3) 62%, rgba(var(--veil), .08) 100%),
    linear-gradient(0deg, rgba(var(--veil), .92) 0%, rgba(var(--veil), 0) 42%); }
.hero__inner { padding-top: clamp(7rem, 16vh, 10rem); padding-bottom: clamp(2.5rem, 6vh, 4rem); }
.hero h1 { font-size: clamp(3.1rem, 8vw, 7.6rem); line-height: .88; max-width: 13ch; margin-bottom: 1.75rem; color: var(--white); }
.hero h1 .line { display: block; }
.hero--home h1 { font-size: clamp(2.9rem, 6.2vw, 6.4rem); max-width: none; }
.hero h1 em { font-style: normal; color: var(--amber-soft); }
.hero--mid h1 { font-size: clamp(3rem, 8.4vw, 7.4rem); max-width: 13ch; }
.hero--short h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); max-width: 18ch; }
.hero .lede { color: rgba(255, 243, 214, .88); }
.hero .lede strong { color: var(--white); }
.hero__slate { border-top: 1px solid rgba(255, 243, 214, .22); margin-top: clamp(2.5rem, 6vh, 4.5rem); display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.hero__slate > * { padding: 1.1rem 1.5rem 0 0; font-size: .86rem; color: rgba(255, 243, 214, .74); }
.hero__slate a { color: var(--lamp); text-decoration: none; display: block; padding-top: 1.1rem; }
.hero__slate a:hover b { color: var(--amber-soft); }
.hero__slate b { display: block; font: 700 1.45rem/1 var(--display); text-transform: uppercase; color: var(--white); margin-bottom: .35rem; letter-spacing: .01em; }
.hero__slate i { font-style: normal; color: var(--amber); font: 700 .95rem/1 var(--display); margin-right: .5rem; }
.hero__cap { position: absolute; right: var(--gutter); bottom: 1rem; font-size: .72rem; letter-spacing: .06em; color: rgba(255, 243, 214, .5); text-transform: uppercase; }

/* ---------- Photo spreads & chapters ---------- */
.plate { margin: 0; position: relative; }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate figcaption { font-size: .8rem; color: var(--ink-faint); padding-top: .65rem; font-style: italic; }
.band--night .plate figcaption, .band--deep .plate figcaption, .band--pine .plate figcaption { color: rgba(255, 243, 214, .55); }
.plate--tall img { aspect-ratio: 4 / 5; }
.plate--wide img { aspect-ratio: 16 / 9; }
.plate--still img { aspect-ratio: 4 / 3; }

.spread { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: clamp(30rem, 70vh, 44rem); }
.spread--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.spread--flip .spread__photo { order: 2; }
.spread__photo { position: relative; min-height: 22rem; }
.spread__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.spread__text { padding: clamp(2.5rem, 6vw, 5.5rem) var(--gutter); align-self: center; max-width: 42rem; }
.spread__text h2 { margin-bottom: 1.5rem; }

.chapter { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-top: var(--rule); }
.chapter:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.chapter:nth-child(even) .chapter__photo { order: 2; }
.chapter__photo { position: relative; min-height: clamp(20rem, 52vh, 34rem); overflow: hidden; }
.chapter__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.chapter:hover .chapter__photo img { transform: scale(1.015); }
.chapter__text { padding: clamp(2rem, 5vw, 4.5rem) var(--gutter); align-self: center; }
.chapter__no { font: 800 clamp(4rem, 8vw, 6.5rem)/.8 var(--display); color: var(--amber); display: block; margin-bottom: 1rem; }
.chapter__text h3 { font: 800 clamp(2.2rem, 4vw, 3.3rem)/.92 var(--display); text-transform: uppercase; margin-bottom: 1rem; }
.chapter__text p { color: var(--ink-soft); max-width: 30rem; }
.chapter__tag { font: 600 .74rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .8rem; display: block; }

/* ---------- Callout strip ---------- */
.notice { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem 2.5rem; align-items: center; padding-block: 1.6rem; color: var(--ink); text-decoration: none; }
.notice:hover { color: var(--ink); text-decoration: none; }
.notice:hover .notice__go { border-color: var(--ink); }
.notice__tag { justify-self: start; font: 700 .74rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; background: var(--brick); color: var(--white); padding: .5rem .65rem; }
.notice__body b { display: block; font: 800 clamp(1.4rem, 2.4vw, 1.9rem)/1 var(--display); text-transform: uppercase; margin-bottom: .35rem; }
.notice__body span { color: var(--ink-soft); font-size: .95rem; }
.notice__go { font-weight: 600; border-bottom: 2px solid var(--amber); padding-bottom: .15rem; white-space: nowrap; }

/* ---------- Phones (chat mock) ---------- */
.phones { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); }
.phonecase { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 1.75rem; align-items: center; }
.phone { background: #0E1416; border-radius: 2rem; padding: .6rem; box-shadow: 0 0 0 1px rgba(255, 243, 214, .14), 0 30px 60px rgba(0, 0, 0, .35); }
.phone__screen { background: #F6F3EC; color: var(--ink); border-radius: 1.5rem; overflow: hidden; min-height: 25rem; display: flex; flex-direction: column; }
.phone__top { display: flex; justify-content: space-between; padding: .8rem 1.1rem .55rem; font-size: .72rem; font-weight: 600; border-bottom: 1px solid var(--ground-3); }
.phone__body { padding: 1rem .9rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.bubble { max-width: 85%; font-size: .82rem; line-height: 1.4; padding: .55rem .75rem; border-radius: .9rem; }
.bubble--in { background: #fff; border: 1px solid var(--ground-3); align-self: flex-start; border-bottom-left-radius: .2rem; }
.bubble--out { background: var(--ink); color: var(--lamp); align-self: flex-end; border-bottom-right-radius: .2rem; }
.bubble small { display: block; font-size: .66rem; opacity: .65; margin-bottom: .15rem; }
.phone__status { margin-top: auto; font-size: .7rem; font-weight: 600; padding: .55rem .7rem; border-radius: .4rem; display: flex; gap: .45rem; align-items: center; }
.phone__status--bad { background: #F6E1DD; color: var(--brick); }
.phone__status--good { background: #DCE9E3; color: var(--pine-deep); }
.phonecase h3 { font: 800 2rem/1 var(--display); text-transform: uppercase; margin-bottom: 1rem; color: var(--white); }
.phonecase > div:last-child p { margin: 0 0 .35rem; color: rgba(255, 243, 214, .82); }
.phone p { margin: 0; }
.phonecase > div:last-child p.neg { color: #F2B7AA; }

/* ---------- Rail (numbered steps) ---------- */
.rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); counter-reset: rail; }
.rail li { border-top: 2px solid currentColor; padding-top: 1.25rem; position: relative; }
.rail li::before { counter-increment: rail; content: counter(rail, decimal-leading-zero); display: block; font: 800 clamp(3.5rem, 6vw, 5.5rem)/.85 var(--display); color: var(--amber); margin-bottom: 1rem; }
.rail h3 { margin-bottom: .6rem; font-size: 1.2rem; }
.rail p { margin: 0; opacity: .86; }
.rail--custom li::before { content: attr(data-n); }

/* ---------- Program board ---------- */
.board { background: var(--night-deep); color: var(--lamp); border-top: 4px solid var(--amber); }
.board__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem clamp(1.25rem, 3vw, 2.25rem); border-bottom: 1px solid rgba(255, 243, 214, .18); font: 600 .74rem/1 var(--text); text-transform: uppercase; letter-spacing: .14em; color: rgba(255, 243, 214, .6); }
.board__row { display: grid; grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr) minmax(0, 19rem); gap: 1.25rem 2rem; padding: 1.4rem clamp(1.25rem, 3vw, 2.25rem); border-bottom: 1px dashed rgba(255, 243, 214, .16); align-items: baseline; }
.board__row:last-child { border-bottom: 0; }
.board__no { font: 700 1.2rem/1 var(--display); color: var(--amber); }
.board__title { font: 800 clamp(1.5rem, 2.4vw, 2rem)/.95 var(--display); text-transform: uppercase; color: var(--white); }
.board__title small { display: inline-block; font: 600 .66rem/1 var(--text); letter-spacing: .12em; padding: .3rem .45rem; margin-left: .5rem; vertical-align: middle; background: var(--amber); color: var(--ink); }
.board__desc { color: rgba(255, 243, 214, .82); margin: 0; }
.board__desc em { color: var(--amber-soft); font-style: italic; }
.board__list { list-style: none; margin: 0; padding: 0; font-size: .9rem; color: rgba(255, 243, 214, .72); }
.board__list li { padding: .15rem 0 .15rem 1.1rem; position: relative; }
.board__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: .5rem; height: 2px; background: var(--amber); }

/* ---------- Ledger (titled rows instead of icon cards) ---------- */
.ledger { border-top: 2px solid currentColor; }
.ledger__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: .5rem 3rem; padding: 1.4rem 0; border-bottom: var(--rule); }
.band--night .ledger__row, .band--deep .ledger__row, .band--pine .ledger__row { border-bottom: var(--rule-dark); }
.ledger__row h3 { font: 800 clamp(1.45rem, 2.2vw, 1.85rem)/1 var(--display); text-transform: uppercase; }
.ledger__row p { margin: 0; color: var(--ink-soft); }
.band--night .ledger__row p, .band--deep .ledger__row p, .band--pine .ledger__row p { color: rgba(255, 243, 214, .8); }
.ledger__row .tagline { display: block; font-style: italic; color: var(--ink-faint); margin-top: .3rem; font-size: .9rem; }
.ledger--three .ledger__row { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); }
.ledger--compact .ledger__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: 1.1rem 0; }
.ledger--compact .ledger__row h3 { font: 700 1.05rem/1.3 var(--text); text-transform: none; }

/* ---------- Pull quote ---------- */
.pull { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.pull blockquote { margin: 0; font: 400 clamp(1.35rem, 2.4vw, 2rem)/1.35 var(--text); font-style: italic; letter-spacing: -.01em; }
.pull blockquote::before { content: "“"; display: block; font: 800 6rem/.6 var(--display); color: var(--amber); margin-bottom: .5rem; font-style: normal; }
.pull cite { display: block; margin-top: 1.5rem; font-style: normal; font-size: .9rem; }
.pull cite b { display: block; font: 700 1.3rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.pull--solo { grid-template-columns: 1fr; max-width: 56rem; }

/* ---------- Tally (static figures) ---------- */
.tally { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); border-top: var(--rule-dark); border-bottom: var(--rule-dark); }
.tally > div { padding: 1.75rem 1.25rem 1.5rem 0; border-right: var(--rule-dark); }
.tally > div + div { padding-left: 1.5rem; }
.tally > div:last-child { border-right: 0; }
.tally b { display: block; font: 800 clamp(3rem, 6vw, 5rem)/.85 var(--display); color: var(--amber-soft); }
.tally span { display: block; margin-top: .6rem; font-size: .88rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: rgba(255, 243, 214, .72); }
.tally--light { border-color: var(--ground-3); }
.tally--light > div { border-color: var(--ground-3); }
.tally--light b { color: var(--ink); }
.tally--light span { color: var(--ink-soft); }

/* ---------- Tabs + dashboard mock ---------- */
.tabs__list { display: flex; gap: 0; border-bottom: 2px solid var(--ink); margin-bottom: 2.5rem; flex-wrap: wrap; }
.tabs__list button { font: 700 1.6rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; padding: .9rem 1.4rem .75rem; background: none; border: 0; color: var(--ink-faint); cursor: pointer; margin-bottom: -2px; border-bottom: 4px solid transparent; }
.tabs__list button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--amber); }
.tabs__list button:hover { color: var(--ink); }
.panel { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.panel[hidden] { display: none; }
.panel h3 { font: 800 clamp(2rem, 3.5vw, 2.8rem)/.95 var(--display); text-transform: uppercase; margin-bottom: 1rem; }
.ticks { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.ticks li { position: relative; padding: .55rem 0 .55rem 2rem; border-bottom: var(--rule); }
.ticks li::before { content: ""; position: absolute; left: .15rem; top: 1.05rem; width: .85rem; height: .45rem; border-left: 2px solid var(--pine); border-bottom: 2px solid var(--pine); transform: rotate(-45deg); }
.band--night .ticks li, .band--deep .ticks li, .band--pine .ticks li { border-bottom: var(--rule-dark); }
.band--night .ticks li::before, .band--deep .ticks li::before, .band--pine .ticks li::before { border-color: var(--amber); }
.ticks--plain li { border-bottom: 0; padding: .3rem 0 .3rem 2rem; }
.ticks--plain li::before { top: .8rem; }
.device { background: var(--white); border: 1px solid var(--ground-3); box-shadow: 0 24px 50px rgba(16, 33, 38, .14); padding: 1.25rem; border-radius: 4px; }
.device__head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--ink); padding-bottom: .75rem; margin-bottom: 1rem; }
.device__head b { font: 800 1.5rem/1 var(--display); text-transform: uppercase; }
.device__head span { font-size: .8rem; color: var(--ink-faint); }
.device__row { padding: .8rem .9rem; background: var(--ground); border-left: 3px solid var(--pine); margin-bottom: .55rem; font-size: .9rem; }
.device__row small { display: block; font: 600 .68rem/1 var(--text); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: .35rem; }
.device__row--amber { border-left-color: var(--amber); }
.device__row--status { background: transparent; border-left: 0; padding-left: 0; color: var(--pine); font-weight: 600; font-size: .85rem; }

/* ---------- Badges (compliance marks) ---------- */
.marks { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.marks span { font: 600 .78rem/1 var(--text); text-transform: uppercase; letter-spacing: .1em; padding: .6rem .8rem; border: 1px solid currentColor; }

/* ---------- Annotated still life ---------- */
.annotated { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.annotated__plate { position: relative; }
.annotated__plate img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pin { position: absolute; left: var(--x); top: var(--y); width: 2.2rem; height: 2.2rem; margin: -1.1rem 0 0 -1.1rem; border-radius: 50%; background: var(--amber); color: var(--ink); font: 800 1.15rem/2.2rem var(--display); text-align: center; box-shadow: 0 0 0 4px rgba(var(--veil), .55); }
.legend { list-style: none; margin: 0; padding: 0; counter-reset: legend; }
.legend li { display: grid; grid-template-columns: 2.2rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: var(--rule-dark); }
.legend li::before { counter-increment: legend; content: counter(legend); width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid var(--amber); color: var(--amber-soft); font: 800 1.1rem/1.95rem var(--display); text-align: center; }
.legend b { display: block; font: 800 1.45rem/1 var(--display); text-transform: uppercase; margin-bottom: .3rem; color: var(--white); }
.legend span { color: rgba(255, 243, 214, .78); font-size: .95rem; }

/* ---------- Console mock (features dashboard) ---------- */
.console { background: var(--white); color: var(--ink); border-radius: 4px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, .3); }
.console__bar { background: var(--ground-2); padding: .7rem 1rem; display: flex; gap: .4rem; border-bottom: 1px solid var(--ground-3); }
.console__bar i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--ground-3); }
.console__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ground-3); }
.console__cell { background: var(--white); padding: 1.1rem 1.2rem; }
.console__cell small { display: block; font: 600 .7rem/1 var(--text); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: .5rem; }
.console__cell b { font: 800 2.6rem/1 var(--display); }
.console__meter { height: .5rem; background: var(--ground-2); margin-top: .6rem; }
.console__meter span { display: block; height: 100%; background: var(--pine); }
.console__list { padding: 1rem 1.2rem; }
.console__list div { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--ground-2); font-size: .88rem; }
.console__list em { font-style: normal; font-weight: 600; color: var(--pine); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Statutes (compliance) ---------- */
.jumpnav { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 243, 214, .22); }
.jumpnav a { color: var(--lamp); font-weight: 600; font-size: .92rem; text-decoration: none; border-bottom: 2px solid var(--amber); padding-bottom: .1rem; }
.statute { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.5rem 4rem; padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 2px solid var(--ink); }
.statute__id { position: sticky; top: 6.5rem; align-self: start; }
.statute__id h3 { font: 800 clamp(2.6rem, 5vw, 4.2rem)/.85 var(--display); text-transform: uppercase; margin-bottom: 1rem; }
.statute__cite { font-size: .9rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .75rem; }
.statute__eff { font-size: .82rem; color: var(--pine); background: rgba(28, 74, 62, .08); border-left: 3px solid var(--pine); padding: .55rem .75rem; }
.statute__summary { font-size: 1.08rem; margin-bottom: 2rem; }
.statute__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.statute__cols h4 { margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: var(--rule); }
.dash { list-style: none; padding: 0; margin: 0; }
.dash li { position: relative; padding: .4rem 0 .4rem 1.3rem; font-size: .95rem; }
.dash li::before { content: ""; position: absolute; left: 0; top: 1.02em; width: .7rem; height: 2px; background: var(--ink-faint); }
.ticks--sm li { font-size: .95rem; padding: .4rem 0 .4rem 1.8rem; border-bottom: 0; }
.ticks--sm li::before { top: .85rem; }
.states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; }
.states > div { border-top: 2px solid var(--ink); padding: 1.25rem 0 2rem; }
.states h3 { font: 800 1.8rem/1 var(--display); text-transform: uppercase; margin-bottom: .75rem; }
.states p { font-size: .93rem; color: var(--ink-soft); margin: 0; }
.baseline { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.baseline article { background: var(--white); padding: clamp(1.5rem, 3vw, 2.5rem); border-top: 4px solid var(--pine); }
.baseline h3 { font: 800 1.9rem/.95 var(--display); text-transform: uppercase; margin-bottom: .75rem; }
.baseline .sub { font-size: .88rem; color: var(--ink-faint); }

/* ---------- Checklist ---------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
.checklist li { border-top: var(--rule-dark); padding: 1.5rem 0 1.75rem; display: grid; grid-template-columns: 4.25rem 1fr; gap: 1rem; }
.checklist li b { font: 800 3.6rem/.8 var(--display); color: var(--amber); }
.checklist h3 { font: 800 1.6rem/1 var(--display); text-transform: uppercase; margin-bottom: .5rem; color: var(--white); }
.checklist p { margin: 0; color: rgba(255, 243, 214, .8); font-size: .95rem; }

/* ---------- Crosswalk table & lineup ---------- */
.xwalk { width: 100%; border-collapse: collapse; font-size: .95rem; }
.xwalk th { text-align: left; font: 600 .74rem/1.2 var(--text); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); padding: 0 1rem .9rem 0; border-bottom: 2px solid var(--ink); }
.xwalk td { padding: 1.2rem 1.25rem 1.2rem 0; border-bottom: var(--rule); vertical-align: top; }
.xwalk td:first-child { font-weight: 600; width: 34%; }
.xwalk .code { display: block; font: 700 1.05rem/1 var(--display); text-transform: uppercase; color: var(--pine); margin-top: .5rem; letter-spacing: .03em; }
.xwalk td.when { font: 800 1.35rem/1 var(--display); text-transform: uppercase; white-space: nowrap; width: 9rem; }
.xwalk td:last-child { color: var(--ink-soft); }

.lineup { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lineup caption { text-align: left; }
.lineup thead th { font: 800 clamp(1.5rem, 2.6vw, 2.2rem)/1 var(--display); text-transform: uppercase; text-align: left; padding: 1.1rem 1.25rem; vertical-align: bottom; }
.lineup thead th:first-child { width: 22%; font: 600 .74rem/1 var(--text); letter-spacing: .12em; color: var(--ink-faint); padding-left: 0; }
.lineup thead th.st { background: var(--pine); color: var(--white); }
.lineup thead th.them { border-bottom: 2px solid var(--ink); }
.lineup tbody th { text-align: left; font: 600 .78rem/1.3 var(--text); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); padding: 1.3rem 1.25rem 1.3rem 0; vertical-align: top; border-bottom: var(--rule); }
.lineup td { padding: 1.3rem 1.25rem; vertical-align: top; border-bottom: var(--rule); font-size: .97rem; }
.lineup td.st { background: var(--pine); color: var(--lamp); border-bottom: 1px solid rgba(255, 243, 214, .14); }

/* ---------- Comparisons index ---------- */
.shelf { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem 4rem; padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 2px solid var(--ink); }
.shelf h2 { font-size: clamp(2.2rem, 3.6vw, 3.2rem); margin-bottom: 1rem; }
.shelf > div:first-child p { color: var(--ink-soft); }
.shelf__list { list-style: none; margin: 0; padding: 0; }
.shelf__list li { border-bottom: var(--rule); }
.shelf__list li:first-child { border-top: var(--rule); }
.shelf__list a { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 2rem; gap: .5rem 2rem; padding: 1.4rem 0; color: var(--ink); text-decoration: none; align-items: baseline; }
.shelf__list a:hover { background: linear-gradient(90deg, transparent, rgba(227, 155, 46, .08)); }
.shelf__list a:hover .vs { color: var(--brick); }
.shelf__list .vs { font: 800 1.9rem/.95 var(--display); text-transform: uppercase; }
.shelf__list .vs i { font-style: normal; color: var(--ink-faint); font-weight: 700; font-size: .7em; margin: 0 .2rem; }
.shelf__list p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.shelf__list .go { font: 800 1.5rem/1 var(--display); color: var(--amber); }

.panes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.panes article { padding: 1.75rem 2rem 2rem 0; }
.panes article + article { padding-left: 2rem; border-left: var(--rule); }
.panes h2 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); margin-bottom: 1rem; }
.panes .warn h2 { color: var(--brick); }
.panes .dash li::before { background: var(--brick); }
.questions { list-style: none; padding: 0; margin: 0; counter-reset: q; }
.questions li { counter-increment: q; display: grid; grid-template-columns: 3.5rem 1fr; padding: 1.2rem 0; border-bottom: var(--rule-dark); font-size: 1.15rem; }
.questions li::before { content: "Q" counter(q); font: 800 1.4rem/1.1 var(--display); color: var(--amber); }
.subnav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; font-size: .9rem; }
.subnav span { color: rgba(255, 243, 214, .6); }
.subnav a { color: var(--lamp); font-weight: 600; }
.backlink { display: inline-block; margin-bottom: 1.5rem; color: var(--amber-soft); font-weight: 600; font-size: .9rem; text-decoration: none; }
.backlink:hover { color: var(--white); }

/* ---------- FAQ ---------- */
.qa { border-top: var(--rule); }
.qa:last-of-type { border-bottom: var(--rule); }
.qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 2rem; gap: 1rem; padding: 1.3rem 0; font: 700 1.1rem/1.35 var(--text); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font: 800 1.9rem/1 var(--display); color: var(--amber); text-align: right; }
.qa[open] summary::after { content: "–"; }
.qa > div { padding: 0 3rem 1.5rem 0; color: var(--ink-soft); max-width: 46rem; }
.band--night .qa, .band--deep .qa { border-color: rgba(255, 243, 214, .16); }
.band--night .qa > div, .band--deep .qa > div { color: rgba(255, 243, 214, .8); }

/* ---------- Forms ---------- */
.formframe { background: var(--white); border-top: 4px solid var(--amber); padding: clamp(.5rem, 2vw, 1.25rem); box-shadow: 0 24px 50px rgba(16, 33, 38, .12); }
.formframe iframe { display: block; width: 100%; border: 0; min-height: 700px; }
.formframe__head { display: flex; justify-content: space-between; align-items: baseline; padding: .75rem .75rem 1rem; border-bottom: var(--rule); margin-bottom: .5rem; }
.formframe__head b { font: 800 1.6rem/1 var(--display); text-transform: uppercase; }
.formframe__head span { font: 600 .74rem/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--pine); }
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .3rem; }
.field .hint { font-size: .82rem; color: var(--ink-faint); margin: 0 0 .45rem; }
.field input, .field select { width: 100%; font: 400 1rem/1.4 var(--text); padding: .8rem .9rem; border: 1.5px solid var(--ink-soft); background: var(--white); color: var(--ink); border-radius: 2px; }
.field input:focus, .field select:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 1rem; font-weight: 600; }
.form-status .err { color: var(--brick); }
.form-status .ok { color: var(--pine); }
.contactcard { list-style: none; margin: 0; padding: 0; }
.contactcard li { padding: 1.1rem 0; border-bottom: var(--rule-dark); }
.contactcard small { display: block; font: 600 .72rem/1 var(--text); text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 243, 214, .58); margin-bottom: .45rem; }
.contactcard a, .contactcard b { font: 800 1.65rem/1.05 var(--display); text-transform: uppercase; color: var(--white) !important; text-decoration: none; }
.contactcard a:hover { color: var(--amber-soft) !important; }
.contactcard span { display: block; font-size: .88rem; color: rgba(255, 243, 214, .7); margin-top: .25rem; }

/* ---------- Pricing tickets (Scouts) ---------- */
.tickets { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.ticket { background: var(--white); position: relative; display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--ground-3); }
.ticket__head { padding: 1.5rem 1.75rem 1.25rem; border-bottom: 2px dashed var(--ground-3); position: relative; }
.ticket__head::before, .ticket__head::after { content: ""; position: absolute; bottom: -.8rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ground); border: 1px solid var(--ground-3); }
.ticket__head::before { left: -.8rem; } .ticket__head::after { right: -.8rem; }
.ticket__head small { font: 600 .74rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.ticket__head h3 { font: 800 clamp(2rem, 3.4vw, 2.8rem)/.95 var(--display); text-transform: uppercase; margin-top: .5rem; }
.ticket__body { padding: 1.5rem 1.75rem; }
.ticket__foot { padding: 0 1.75rem 1.75rem; }
.ticket--feature { background: var(--night); color: var(--lamp); border-color: var(--night); }
.ticket--feature .ticket__head { border-bottom-color: rgba(255, 243, 214, .25); }
.ticket--feature .ticket__head small { color: var(--amber-soft); }
.ticket--feature .ticket__head::before, .ticket--feature .ticket__head::after { border-color: var(--night); }

.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
.roles p { border-top: var(--rule); padding: 1.1rem 0; margin: 0; color: var(--ink-soft); }
.roles strong { display: block; color: var(--ink); font: 800 1.45rem/1 var(--display); text-transform: uppercase; margin-bottom: .4rem; }
.kit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; }
.kit > div { border-top: 2px solid var(--ink); padding: 1.25rem 0 2rem; }
.kit h3 { font: 800 1.7rem/1 var(--display); text-transform: uppercase; margin-bottom: .75rem; }
.kit .ticks li { font-size: .93rem; border-bottom: 0; padding: .3rem 0 .3rem 1.8rem; }
.kit .ticks li::before { top: .75rem; }
.appstrip { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ---------- Timeline (SB 848) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.timeline li { padding: 1.5rem 1.5rem 1.5rem 0; border-top: 4px solid rgba(255, 243, 214, .25); }
.timeline li + li { padding-left: 1.5rem; }
.timeline .tl-active { border-top-color: var(--amber); }
.timeline .tl-deadline { border-top-color: var(--brick); }
.timeline small { display: inline-block; font: 600 .7rem/1 var(--text); text-transform: uppercase; letter-spacing: .12em; padding: .35rem .5rem; background: rgba(255, 243, 214, .1); color: var(--lamp); }
.timeline .tl-active small { background: var(--amber); color: var(--ink); }
.timeline .tl-deadline small { background: var(--brick); color: var(--white); }
.timeline b { display: block; font: 800 2rem/1 var(--display); text-transform: uppercase; margin: .9rem 0 .6rem; color: var(--white); }
.timeline p { margin: 0; font-size: .92rem; color: rgba(255, 243, 214, .78); }
.snapshot { background: var(--white); color: var(--ink); border-top: 4px solid var(--amber); box-shadow: 0 30px 60px rgba(0, 0, 0, .3); }
.snapshot__head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--ground-3); display: flex; justify-content: space-between; align-items: baseline; }
.snapshot__head small { font: 600 .7rem/1 var(--text); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); display: block; margin-bottom: .3rem; }
.snapshot__head b { font: 800 1.35rem/1 var(--display); text-transform: uppercase; }
.snapshot__head em { font-style: normal; font: 600 .7rem/1 var(--text); letter-spacing: .12em; color: var(--pine); }
.snapshot__row { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--ground-2); font-size: .88rem; }
.snapshot__row b { font-weight: 700; color: var(--pine); }
.snapshot__row.soon b { color: #8A5A10; }
.snapshot__row .soontag { font: 600 .62rem/1 var(--text); letter-spacing: .1em; text-transform: uppercase; background: var(--amber-soft); padding: .2rem .35rem; margin-left: .4rem; }
.snapshot__foot { padding: .8rem 1.25rem; font-size: .75rem; color: var(--ink-faint); display: flex; justify-content: space-between; }
.deadline { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline; background: var(--brick); color: var(--white); padding: 1rem var(--gutter); }
.deadline b { font: 800 1.5rem/1 var(--display); text-transform: uppercase; }
.deadline a { color: var(--white); font-weight: 600; margin-left: auto; }
.gaps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; }
.gaps > div { border-top: 4px solid var(--brick); padding-top: 1.25rem; }
.gaps h3 { font: 800 1.6rem/1 var(--display); text-transform: uppercase; margin-bottom: .6rem; }
.gaps p { color: var(--ink-soft); font-size: .95rem; }
.roadmap { background: var(--white); border-left: 4px solid var(--amber); padding: clamp(1.5rem, 3vw, 2.5rem); margin-top: 3rem; }
.roadmap h3 { font: 800 2rem/1 var(--display); text-transform: uppercase; margin: .5rem 0 .75rem; }
.roadmap li b { display: block; }
.dims { list-style: none; margin: 0; padding: 0; }
.dims li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 1rem 0; border-top: var(--rule); }
.dims li > b { font: 800 1.7rem/1 var(--display); color: var(--amber); }
.dims h3 { margin-bottom: .2rem; }
.dims p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* ---------- Legal ---------- */
.legal { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 46rem); gap: 4rem; justify-content: center; }
.legal__aside { position: sticky; top: 6.5rem; align-self: start; font-size: .88rem; }
.legal__aside h2 { font: 600 .74rem/1 var(--text); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin-bottom: 1rem; }
.legal__aside ol { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 10rem); overflow: auto; }
.legal__aside li a { display: block; padding: .3rem 0; color: var(--ink-soft); text-decoration: none; }
.legal__aside li a:hover { color: var(--link); text-decoration: underline; }
.prose { font-size: 1.02rem; }
.prose h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin: 3rem 0 1rem; scroll-margin-top: 6rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.75rem 0 .5rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45rem; }
.prose code { font-size: .88em; background: var(--ground-2); padding: .1rem .3rem; }
.prose table { border-collapse: collapse; width: 100%; margin: 1rem 0 1.5rem; font-size: .92rem; }
.prose th, .prose td { border-bottom: var(--rule); padding: .6rem .5rem; text-align: left; vertical-align: top; }

/* ---------- Footer ---------- */
.foot { background: var(--night-deep); color: rgba(255, 243, 214, .78); padding: clamp(3.5rem, 7vw, 6rem) 0 2rem; font-size: .93rem; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 2.5rem; }
.foot__logo { height: 36px; width: auto; margin-bottom: 1.25rem; }
.foot__tag { font: 800 clamp(1.8rem, 3vw, 2.5rem)/.95 var(--display); text-transform: uppercase; color: var(--white); max-width: 18ch; margin-bottom: 1.75rem; }
.foot h2 { font: 600 .74rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--amber-soft); margin-bottom: 1rem; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .55rem; }
.foot a { color: var(--lamp); text-decoration: none; }
.foot a:hover { color: var(--amber-soft); text-decoration: underline; }
.badges { display: flex; gap: .65rem; flex-wrap: wrap; align-items: center; }
.badges img { height: 42px; width: auto; }
.badges a.gp img { height: 62px; margin: -10px -8px; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-top: var(--rule-dark); margin-top: 3.5rem; padding-top: 1.5rem; font-size: .85rem; color: rgba(255, 243, 214, .58); }

/* ---------- Cookie banner, a11y panel, modal ---------- */
.cookie { position: fixed; left: 1rem; bottom: 1rem; z-index: 150; max-width: 34rem; background: var(--night-lift); color: var(--lamp); border-left: 4px solid var(--amber); padding: 1.25rem 1.4rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); font-size: .9rem; }
.cookie[hidden] { display: none; }
.cookie p { margin: 0 0 1rem; }
.cookie a { color: var(--amber-soft); }
.cookie .actions { margin-top: 0; }
.cookie .btn { padding: .65rem 1rem; font-size: .88rem; }
.a11y-btn { position: fixed; right: 1rem; bottom: 1rem; z-index: 140; width: 3.1rem; height: 3.1rem; border-radius: 50%; background: var(--night); color: var(--amber-soft); border: 2px solid var(--amber); cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0, 0, 0, .28); }
.a11y-btn svg { width: 1.5rem; height: 1.5rem; }
.a11y { position: fixed; right: 1rem; bottom: 4.75rem; z-index: 141; width: min(20rem, calc(100vw - 2rem)); background: var(--white); color: var(--ink); border-top: 4px solid var(--amber); padding: 1.25rem; box-shadow: 0 24px 50px rgba(0, 0, 0, .3); font-size: .9rem; }
.a11y[hidden] { display: none; }
.a11y h2 { font: 800 1.5rem/1 var(--display); text-transform: uppercase; margin-bottom: 1rem; display: flex; justify-content: space-between; }
.a11y h2 button { background: none; border: 0; font: 700 1.2rem/1 var(--text); cursor: pointer; color: var(--ink); }
.a11y__row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid var(--ground-2); }
.a11y button.opt { font: 600 .85rem/1 var(--text); padding: .5rem .7rem; border: 1.5px solid var(--ink); background: var(--white); color: var(--ink); cursor: pointer; border-radius: 2px; }
.a11y button.opt[aria-pressed="true"] { background: var(--ink); color: var(--lamp); }
.a11y button.opt:disabled { opacity: .4; cursor: default; }
.a11y p { margin: .9rem 0 0; font-size: .82rem; color: var(--ink-soft); }
dialog.modal { border: 0; padding: 0; width: min(46rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); background: var(--white); border-top: 4px solid var(--amber); }
dialog.modal::backdrop { background: rgba(var(--veil), .78); }
.modal__bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: var(--rule); position: sticky; top: 0; background: var(--white); z-index: 1; }
.modal__bar b { font: 800 1.5rem/1 var(--display); text-transform: uppercase; }
.modal__bar button { background: none; border: 1.5px solid var(--ink); font: 600 .85rem/1 var(--text); padding: .5rem .75rem; cursor: pointer; border-radius: 2px; }
.modal iframe { display: block; width: 100%; border: 0; height: 1020px; }

/* Preferences from the accessibility panel */
html.high-contrast { --ground: #FFFFFF; --ground-2: #F2F2F2; --ink: #000; --ink-soft: #111; --ink-faint: #333; --lamp: #FFFFFF; --link: #003E73; }
html.high-contrast .hero::before { background: rgba(0, 0, 0, .82); }
html.large-text body { font-size: 1.2rem; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .split, .split--even, .split--wide-left, .intro, .pull, .panel, .annotated, .statute, .shelf, .legal { grid-template-columns: 1fr; }
  .spread, .spread--flip, .chapter, .chapter:nth-child(even) { grid-template-columns: 1fr; }
  .spread--flip .spread__photo, .chapter:nth-child(even) .chapter__photo { order: 0; }
  .spread__photo, .chapter__photo { min-height: 18rem; aspect-ratio: 16 / 10; }
  .phones { grid-template-columns: 1fr; }
  .board__row { grid-template-columns: 2.5rem 1fr; }
  .board__desc, .board__list { grid-column: 2; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__grid > :first-child { grid-column: 1 / -1; }
  .statute__id, .legal__aside { position: static; }
  .legal__aside ol { max-height: none; columns: 2; }
  .timeline, .tally { grid-template-columns: 1fr 1fr; }
  .tally > div:nth-child(2) { border-right: 0; }
  .tally > div:nth-child(3) { padding-left: 0; }
  .states, .kit, .gaps, .panes { grid-template-columns: 1fr; }
  .panes article + article { padding-left: 0; border-left: 0; border-top: var(--rule); }
  .shelf__list a { grid-template-columns: 1fr 2rem; }
  .shelf__list p { grid-column: 1; }
  .shelf__list .go { grid-row: 1; grid-column: 2; }
  .notice { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .rail, .hero__slate { grid-template-columns: 1fr; }
  .rail li { margin-bottom: 2rem; }
  .hero__slate > * { border-bottom: 1px solid rgba(255, 243, 214, .14); padding-bottom: .9rem; }
  .phonecase { grid-template-columns: 1fr; }
  .phone { max-width: 18rem; }
  .baseline, .statute__cols, .checklist, .roles, .tickets, .timeline { grid-template-columns: 1fr; }
  .timeline li + li { padding-left: 0; }
  .ledger__row, .ledger--compact .ledger__row, .ledger--three .ledger__row { grid-template-columns: 1fr; }
  .xwalk thead { display: none; }
  .xwalk tr { display: block; border-bottom: var(--rule); padding: 1rem 0; }
  .xwalk td { display: block; border: 0; padding: .2rem 0; width: auto !important; }
  .lineup, .lineup tbody, .lineup tr, .lineup td, .lineup th { display: block; width: auto !important; }
  .lineup thead { display: none; }
  .lineup tbody tr { padding: 1rem 0; border-bottom: 2px solid var(--ink); }
  .lineup tbody th { border: 0; padding: 0 0 .6rem; }
  .lineup td { border: 0; padding: .9rem 1rem; }
  .lineup td::before { content: attr(data-col); display: block; font: 700 1.1rem/1 var(--display); text-transform: uppercase; margin-bottom: .4rem; }
  .lineup td.them { background: var(--ground-2); }
  .tabs__list button { font-size: 1.25rem; padding: .75rem .9rem .6rem; }
  .cookie { right: 1rem; bottom: 4.75rem; }
  .deadline a { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .mast, .foot, .cookie, .a11y-btn, .a11y { display: none !important; } }
.board__row--wide { grid-template-columns: 3.5rem minmax(0, 22rem) minmax(0, 1fr); }
@media (max-width: 960px) { .board__row--wide { grid-template-columns: 2.5rem 1fr; } .rail[style*="--n:4"] { grid-template-columns: 1fr 1fr; } }


/* =====================================================================
   Vertical themes. One studio system, four rooms.
   body.theme-home      general: small-town street after the workday (slate dusk, streetlamp brass)
   body.theme-sports    the original Floodlight: stadium night, amber, loud condensed caps
   body.theme-churches  quieter: walnut and lamplight, sentence-case headlines
   body.theme-scouts    dusk woods: forest, canvas, leather tan, trail-blaze labels
   body.theme-schools   institutional: navy and old gold, ruled labels
   ===================================================================== */

/* ---------- Home / shared pages ---------- */
body.theme-home {
  --night: #131D26; --night-deep: #0D141B; --night-lift: #1E2B37;
  --amber: #D7A55A; --amber-soft: #EBCF98; --focus: #D7A55A;
  --pine: #26403F; --pine-deep: #1A2F2E;
  --lamp: #F7F0E1;
  --ground: #ECEAE5; --ground-2: #E2E0D9; --ground-3: #D5D2CA;
  --veil: 13, 20, 27;
  --h-weight: 700; --h-track: .012em; --h-lead: .92;
}
.theme-home .hero h1 em { color: var(--amber-soft); }
.theme-home .hero--home h1 { font-size: clamp(2.7rem, 5.6vw, 5.8rem); }
.theme-home .hero::before {
  background:
    linear-gradient(90deg, rgba(var(--veil), .92) 0%, rgba(var(--veil), .72) 34%, rgba(var(--veil), .22) 64%, rgba(var(--veil), .05) 100%),
    linear-gradient(0deg, rgba(var(--veil), .9) 0%, rgba(var(--veil), 0) 45%); }
.theme-home .chapter__no, .theme-home .rail li::before { font-weight: 700; }

/* ---------- Sports: the floodlight lives here ---------- */
body.theme-sports {
  --night: #102126; --night-deep: #0B181C; --night-lift: #1A333A;
  --amber: #E8992A; --amber-soft: #F3C462; --focus: #E8992A;
  --veil: 10, 22, 26;
  --h-weight: 800; --h-track: -.004em; --h-lead: .86;
}
.theme-sports .hero:not(.hero--mid):not(.hero--short) h1 { font-size: clamp(3.4rem, 9.4vw, 9rem); max-width: 11ch; }
.theme-sports .hero { box-shadow: inset 0 6px 0 var(--amber); }
.theme-sports .hero__cap { color: var(--amber-soft); letter-spacing: .14em; }
.theme-sports .label { letter-spacing: .16em; }
.theme-sports .label::before { width: 3rem; height: 4px; }
.theme-sports .ledger__row h3 { letter-spacing: .01em; }
.theme-sports .btn { text-transform: uppercase; letter-spacing: .08em; font-size: .88rem; }

/* ---------- Churches: lamplight, not stadium light ---------- */
body.theme-churches {
  --night: #211915; --night-deep: #18120F; --night-lift: #2E241E;
  --amber: #DDAA6B; --amber-soft: #F0D2A4; --focus: #C98C46;
  --pine: #3A3A2A; --pine-deep: #2B2B1F;
  --lamp: #FBF1E2;
  --ground: #F3EDE3; --ground-2: #EAE1D3; --ground-3: #DDD2C1;
  --ink: #1D1714; --ink-soft: #4A3F38; --ink-faint: #7A6C62;
  --link: #7A4B22; --link-hover: #5C3815;
  --veil: 26, 18, 14;
  --h-weight: 700; --h-case: none; --h-track: 0; --h-lead: .98;
}
.theme-churches main h2 { font-size: clamp(2.3rem, 4.6vw, 4rem); }
.theme-churches .hero h1, .theme-churches .hero--mid h1 { font-size: clamp(2.9rem, 6.6vw, 6.2rem); max-width: 15ch; }
.theme-churches .hero h1 em { font-weight: 400; color: var(--amber-soft); }
.theme-churches .hero::before {
  background:
    linear-gradient(90deg, rgba(var(--veil), .9) 0%, rgba(var(--veil), .66) 34%, rgba(var(--veil), .18) 66%, rgba(var(--veil), 0) 100%),
    linear-gradient(0deg, rgba(var(--veil), .88) 0%, rgba(var(--veil), 0) 46%),
    radial-gradient(60% 70% at 72% 62%, rgba(255, 196, 120, .14), rgba(255, 196, 120, 0) 70%); }
.theme-churches .label { letter-spacing: .06em; text-transform: none; font-size: .9rem; font-weight: 500; font-style: italic; }
.theme-churches .label::before { width: 1.25rem; height: 1px; }
.theme-churches .label b { font-style: normal; }
.theme-churches .ledger__row h3, .theme-churches .chapter__text h3, .theme-churches .panel h3,
.theme-churches .pull cite b, .theme-churches .device__head b, .theme-churches .foot__tag { text-transform: none; font-weight: 700; letter-spacing: 0; }
.theme-churches .rail li::before { font-weight: 400; }
.theme-churches .pull blockquote { font-style: italic; }
.theme-churches .btn { border-radius: 999px; padding-inline: 1.5rem; }
.theme-churches .band--night { background: linear-gradient(180deg, var(--night) 0%, var(--night-lift) 100%); }

/* ---------- Scouts: dusk woods, canvas and leather ---------- */
body.theme-scouts {
  --night: #16231B; --night-deep: #0F1913; --night-lift: #223326;
  --amber: #C88A4A; --amber-soft: #E4BE8A; --focus: #C88A4A;
  --pine: #2C4632; --pine-deep: #1F3424;
  --lamp: #F4EDDD;
  --ground: #EEE7D8; --ground-2: #E3D9C4; --ground-3: #D3C7AE;
  --ink: #18201A; --ink-soft: #414A40; --ink-faint: #6E7466;
  --brick: #8A3E22; --link: #3E5A2E; --link-hover: #2C4220;
  --veil: 14, 24, 17;
  --h-weight: 800; --h-track: .028em; --h-lead: .92;
}
.theme-scouts .hero h1 { font-size: clamp(2.9rem, 7vw, 6.6rem); max-width: 15ch; }
.theme-scouts .label::before { width: .55rem; height: 1.05rem; background: var(--amber); border-radius: 1px; align-self: center; }
.theme-scouts .band--ground2 {
  background-color: var(--ground-2);
  background-image: repeating-radial-gradient(ellipse 120% 80% at 18% 40%, rgba(60, 74, 50, 0) 0 46px, rgba(60, 74, 50, .07) 46px 47px);
}
.theme-scouts .band--night { background: var(--night); }
.theme-scouts .ticket, .theme-scouts .kit > div { border-radius: 3px; }
.theme-scouts .btn { border-radius: 3px; }
.theme-scouts .hero::before {
  background:
    linear-gradient(90deg, rgba(var(--veil), .93) 0%, rgba(var(--veil), .74) 34%, rgba(var(--veil), .25) 64%, rgba(var(--veil), .06) 100%),
    linear-gradient(0deg, rgba(var(--veil), .92) 0%, rgba(var(--veil), 0) 44%); }

/* ---------- Schools: navy and old gold, more institutional ---------- */
body.theme-schools {
  --night: #121C2E; --night-deep: #0C1422; --night-lift: #1D2A40;
  --amber: #CFAE57; --amber-soft: #E7D18F; --focus: #CFAE57;
  --pine: #1E3350; --pine-deep: #15253C;
  --lamp: #F3F1EA;
  --ground: #EEEEEA; --ground-2: #E3E4DF; --ground-3: #D4D6D0;
  --ink: #111725; --ink-soft: #3A4253; --ink-faint: #666E7D;
  --brick: #8F2F2A; --link: #1D4E89; --link-hover: #143A68;
  --veil: 12, 20, 34;
  --h-weight: 700; --h-track: .03em; --h-lead: .94;
}
.theme-schools .hero h1, .theme-schools .hero--mid h1 { font-size: clamp(2.8rem, 6.4vw, 6rem); max-width: 16ch; }
.theme-schools .label { letter-spacing: .14em; }
.theme-schools .label::before { width: 2rem; height: 5px; background: none; border-top: 1px solid var(--amber); border-bottom: 1px solid var(--amber); }
.theme-schools .ledger__row h3, .theme-schools .chapter__text h3, .theme-schools .device__head b { font-weight: 700; letter-spacing: .03em; }
.theme-schools .rail li::before, .theme-schools .tally b { font-weight: 700; }
.theme-schools .btn { border-radius: 0; }
.theme-schools .hero { border-bottom: 4px solid var(--amber); }

html.high-contrast body[class*="theme-"] .hero::before { background: rgba(0, 0, 0, .82); }
.theme-schools .hero::before {
  background:
    linear-gradient(90deg, rgba(var(--veil), .92) 0%, rgba(var(--veil), .7) 34%, rgba(var(--veil), .16) 64%, rgba(var(--veil), 0) 100%),
    linear-gradient(0deg, rgba(var(--veil), .9) 0%, rgba(var(--veil), 0) 42%); }