/* =============================================================
   RVCFD.ORG — MAIN STYLESHEET
   Concept 5, "The Civic Journal"

   Part 1 of 3 — foundations, chrome, navigation, footer
   All values come from tokens.css. No raw values here.
   ============================================================= */

/* ---------- fonts ----------
   The WOFF2 files are self hosted in assets/fonts/. Until these declarations
   existed nothing connected them to the family names in tokens.css, so every
   page rendered in the fallback stacks — Georgia and the system sans — rather
   than in Newsreader and Inter. The fallbacks are good, which is why it was
   not obvious.

   Both families are VARIABLE fonts: one file covers the whole weight range,
   which is why font-weight is declared as a range rather than a single value.
   A browser that cannot use the variable axes still renders the file at a
   fixed weight, so no static fallback files are needed.

   font-display:swap renders the fallback immediately and swaps when the WOFF2
   arrives. Paired with the preload in inc/enqueue.php — which already looks
   for exactly these filenames — the swap is usually imperceptible, and text is
   never invisible while a font loads.

   Paths are relative to this file: assets/css/ -> ../fonts/. */

@font-face{
  font-family:'Newsreader';
  src:url('../fonts/newsreader-variable.woff2') format('woff2');
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Newsreader';
  src:url('../fonts/newsreader-variable-italic.woff2') format('woff2');
  font-weight:200 800;
  font-style:italic;
  font-display:swap;
}

@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-variable-italic.woff2') format('woff2');
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip, not hidden: overflow-x:hidden makes the body a scroll container in
     BOTH axes, which silently breaks every position:sticky on the site —
     .aside--sticky on Fire Safety and the event page, and .cal-side on the
     homepage. clip stops horizontal scroll without creating that container. */
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%;}
img{height:auto;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:400;}
p{margin:0;}
ul,ol{margin:0;padding:0;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
table{border-collapse:collapse;width:100%;}

/* ---------- WCAG 2.2 · 2.4.11 Focus Not Obscured -------------
   The masthead is sticky. Without this, tabbing to an element
   near the top of a section scrolls it underneath the header
   and the focus ring becomes invisible.
   ------------------------------------------------------------ */
:where(a,button,input,select,textarea,summary,[tabindex]){
  scroll-margin-top:var(--focus-offset);
}
[id]{scroll-margin-top:var(--focus-offset);}

/* ---------- WCAG 2.2 · 2.4.13 Focus Appearance ---------- */
:focus{outline:none;}
:focus-visible{
  outline:var(--focus-ring-w) solid var(--focus-ring-light);
  outline-offset:var(--focus-ring-offset);
  border-radius:var(--radius);
}
.on-navy :focus-visible,
.hero :focus-visible,
.recruit :focus-visible,
.runband :focus-visible,
.support :focus-visible,
.site-footer :focus-visible,
.utility :focus-visible{
  outline-color:var(--focus-ring-dark);
}

/* ---------- utilities ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--sp-4);top:calc(var(--sp-4) * -6);
  z-index:1000;background:var(--navy-900);color:var(--white);
  padding:var(--sp-3) var(--sp-6);border-radius:var(--radius);
  font-size:var(--fs-small);font-weight:600;
  transition:top var(--dur-hover) var(--ease-out);
}
.skip-link:focus{top:var(--sp-4);}

.wrap{max-width:var(--content-max);margin-inline:auto;padding-inline:var(--margin);}
.wrap-wide{max-width:var(--wide-max);margin-inline:auto;padding-inline:var(--margin);}
.section{padding-block:var(--section-y);}

/* ---------- editorial primitives ---------- */
.eyebrow{
  font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--gold-700);display:flex;align-items:center;gap:var(--sp-3);
  margin:0;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--silver-200);}
.eyebrow--plain::after{display:none;}
.eyebrow--dark{color:var(--gold-300);}
.eyebrow--dark::after{background:rgba(255,255,255,0.22);}

.display{
  font-family:var(--font-serif);font-size:var(--fs-display);
  line-height:var(--lh-tight);letter-spacing:var(--ls-display);font-weight:400;
}
.h2{
  font-family:var(--font-serif);font-size:var(--fs-h2);
  line-height:1.08;letter-spacing:var(--ls-heading);font-weight:400;
  color:var(--navy-900);text-wrap:balance;
}
.h3{
  font-family:var(--font-serif);font-size:var(--fs-h3);
  line-height:1.18;letter-spacing:-0.012em;font-weight:400;
  color:var(--navy-900);text-wrap:balance;
}
.lede{font-size:var(--fs-body-lg);line-height:1.65;color:var(--slate-700);max-width:var(--measure);}
.meta{
  font-size:var(--fs-label);font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--slate-400);
}
.rule-gold{height:2px;width:4rem;background:var(--gold-500);border:0;margin:0;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-size:var(--fs-small);font-weight:600;letter-spacing:0.02em;
  padding:var(--sp-4) var(--sp-8);border-radius:var(--radius);
  border:1.5px solid transparent;min-height:3.25rem;text-align:center;
  transition:background var(--dur-hover) var(--ease-out),
             color var(--dur-hover) var(--ease-out),
             border-color var(--dur-hover) var(--ease-out);
}
.btn:active{transform:translateY(1px);transition-duration:var(--dur-press);}
.btn--red{background:var(--red-600);color:var(--white);}
.btn--red:hover{background:var(--red-700);}
.btn--navy{background:var(--navy-900);color:var(--white);}
.btn--navy:hover{background:var(--navy-800);}
.btn--ghost{border-color:var(--navy-900);color:var(--navy-900);}
.btn--ghost:hover{background:var(--navy-900);color:var(--white);}
.btn--ghost-light{border-color:rgba(255,255,255,0.55);color:var(--white);}
.btn--ghost-light:hover{background:var(--white);color:var(--navy-900);border-color:var(--white);}
.btn--sm{padding:var(--sp-3) var(--sp-6);min-height:var(--touch-min);font-size:0.875rem;}

.arrow{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:0.875rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--navy-500);padding-bottom:var(--sp-1);
  border-bottom:1.5px solid transparent;min-height:var(--touch-min);
  transition:border-color var(--dur-hover) var(--ease-out), gap var(--dur-hover) var(--ease-out);
}
.arrow:hover{border-color:var(--navy-500);gap:var(--sp-4);}
.arrow--dark{color:var(--gold-300);}
.arrow--dark:hover{border-color:var(--gold-300);}

/* =============================================================
   UTILITY BAR
   ============================================================= */
.utility{background:var(--navy-900);color:rgba(255,255,255,0.82);font-size:0.8125rem;}
.utility .wrap-wide{
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--sp-6);min-height:var(--utility-h);
}
.utility a{transition:color var(--dur-hover) var(--ease-out);}
.utility a:hover{color:var(--white);}
.utility__group{display:flex;align-items:center;gap:var(--sp-6);}
.utility__sep{width:1px;height:0.875rem;background:rgba(255,255,255,0.2);}

/* 911 — one of exactly three permitted uses of red */
.emergency-line{color:var(--white);font-weight:600;display:inline-flex;align-items:center;gap:var(--sp-2);}
.emergency-line::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--red-600);
  box-shadow:0 0 0 3px rgba(179,39,45,0.28);flex-shrink:0;
}

/* =============================================================
   MASTHEAD + PRIMARY NAVIGATION
   ============================================================= */
.masthead{
  background:var(--paper);border-bottom:var(--hairline);
  position:sticky;top:0;z-index:200;
}
.masthead .wrap-wide{
  display:flex;align-items:center;gap:var(--sp-8);
  min-height:var(--header-h);
  transition:min-height var(--dur-menu) var(--ease-entrance);
}
.masthead.is-compact .wrap-wide{min-height:var(--header-h-compact);}
.masthead.is-compact .brand__patch{height:2.25rem;}

.brand{display:flex;align-items:center;gap:var(--sp-4);flex-shrink:0;}
.brand__patch{height:4rem;width:auto;transition:height var(--dur-menu) var(--ease-entrance);}
.brand__type{line-height:1.1;}
.brand__name{
  display:block;font-family:var(--font-serif);font-size:1.3125rem;font-weight:500;
  letter-spacing:-0.015em;color:var(--navy-900);
}
.brand__sub{
  display:block;font-size:0.65625rem;font-weight:700;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--slate-400);margin-top:3px;
}

.nav{margin-left:auto;}
.nav__list{list-style:none;display:flex;align-items:center;gap:var(--sp-8);}
.nav__item{position:relative;}
/* Marks a top-level item that owns a dropdown. Styling hook + JS selector. */
.nav__item--has-panel > .nav__link{padding-right:var(--sp-1);}
.nav__link{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-small);font-weight:500;color:var(--ink);
  padding-block:var(--sp-2);min-height:var(--touch-min);
  border-bottom:2px solid transparent;
  transition:color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.nav__link:hover,.nav__link[aria-expanded="true"]{color:var(--navy-500);border-color:var(--gold-500);}
.nav__link[aria-current="page"]{border-color:var(--navy-900);}
.nav__caret{width:9px;height:9px;transition:transform var(--dur-hover) var(--ease-out);}
.nav__link[aria-expanded="true"] .nav__caret{transform:rotate(180deg);}

/* Dropdown — same design language: white, hairline, 2px radius,
   gold rule on hover. No new visual vocabulary introduced. */
.nav__panel{
  position:absolute;top:calc(100% + var(--sp-3));left:calc(var(--sp-4) * -1);
  min-width:15rem;background:var(--paper);
  border:var(--hairline);border-top:var(--rule-gold);
  box-shadow:var(--shadow-menu);border-radius:var(--radius);
  padding:var(--sp-2) 0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur-hover) var(--ease-out),
             transform var(--dur-hover) var(--ease-out),
             visibility var(--dur-hover);
  z-index:10;
}
.nav__item.is-open .nav__panel{opacity:1;visibility:visible;transform:none;}
.nav__panel a{
  display:block;padding:var(--sp-3) var(--sp-6);
  font-size:var(--fs-small);color:var(--slate-700);
  border-left:2px solid transparent;min-height:var(--touch-min);
  transition:background var(--dur-hover) var(--ease-out),
             color var(--dur-hover) var(--ease-out),
             border-color var(--dur-hover) var(--ease-out);
}
.nav__panel a:hover,.nav__panel a:focus-visible{
  background:var(--fog);color:var(--navy-900);border-left-color:var(--gold-500);
}

.head-actions{display:flex;align-items:center;gap:var(--sp-4);flex-shrink:0;margin-left:var(--sp-4);}
.icon-btn{
  width:var(--touch-min);height:var(--touch-min);
  display:grid;place-items:center;border-radius:var(--radius);
  border:var(--hairline);color:var(--slate-700);
  transition:border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.icon-btn:hover{border-color:var(--navy-900);color:var(--navy-900);}

/* Search drawer */
.search-drawer{
  display:none;border-top:var(--hairline);background:var(--fog);
  padding-block:var(--sp-6);
}
.search-drawer.is-open{display:block;}
.search-drawer form{display:flex;gap:var(--sp-3);max-width:38rem;}
.search-drawer input{
  flex:1;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-body);
  border:var(--hairline);border-radius:var(--radius);background:var(--paper);
  min-height:var(--touch-min);
}

/* Mobile toggle */
.nav-toggle{display:none;align-items:center;gap:var(--sp-2);
  min-height:var(--touch-min);padding-inline:var(--sp-2);
  font-size:0.8125rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--navy-900);}
.nav-toggle__bars{display:grid;gap:4px;width:20px;}
.nav-toggle__bars span{height:2px;background:var(--navy-900);transition:transform var(--dur-hover) var(--ease-out);}

/* =============================================================
   MOBILE NAVIGATION — full-screen panel, accordion second level
   ============================================================= */
.mobile-nav{
  position:fixed;inset:0;z-index:300;background:var(--paper);
  display:flex;flex-direction:column;
  transform:translateY(-100%);visibility:hidden;
  transition:transform var(--dur-menu) var(--ease-entrance), visibility var(--dur-menu);
}
.mobile-nav.is-open{transform:none;visibility:visible;}
.mobile-nav__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4) var(--margin);border-bottom:var(--hairline);flex-shrink:0;
}
/* The patch is a flex item here. With only a height set, its flex base size
   comes from the intrinsic 1080px width, and the default flex-shrink then
   squeezes that width while the fixed height holds — which flattens the
   artwork horizontally. flex:0 0 auto stops the shrink; width:auto and the
   intrinsic aspect ratio keep the proportions exact. */
.mobile-nav__head img{
  height:2.75rem;
  width:auto;
  flex:0 0 auto;
  aspect-ratio:1080 / 1350;
  object-fit:contain;
}
.mobile-nav__body{flex:1;overflow-y:auto;padding:var(--sp-4) var(--margin) var(--sp-8);}
.mobile-nav__list{list-style:none;}
.mobile-nav__list > li{border-bottom:var(--hairline);}
.mobile-nav__link,.mobile-nav__disclosure{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:var(--sp-4) 0;font-family:var(--font-serif);font-size:1.5rem;
  letter-spacing:-0.015em;color:var(--navy-900);min-height:var(--touch-min);text-align:left;
}
.mobile-nav__disclosure .nav__caret{width:12px;height:12px;color:var(--gold-700);}
.mobile-nav__disclosure[aria-expanded="true"] .nav__caret{transform:rotate(180deg);}
.mobile-nav__sub{list-style:none;padding:0 0 var(--sp-4) var(--sp-4);display:none;}
.mobile-nav__sub.is-open{display:block;}
.mobile-nav__sub a{
  display:block;padding:var(--sp-3) 0;font-size:var(--fs-body);color:var(--slate-700);
  border-left:2px solid var(--silver-200);padding-left:var(--sp-4);min-height:var(--touch-min);
}
.mobile-nav__sub a:hover{color:var(--navy-900);border-left-color:var(--gold-500);}

/* Thumb-reach zone — the three things a phone visitor wants */
.mobile-nav__foot{
  flex-shrink:0;padding:var(--sp-6) var(--margin) var(--sp-8);
  border-top:var(--rule-strong);background:var(--bone);
  display:grid;gap:var(--sp-3);
}
.mobile-nav__foot .btn{width:100%;}
.mobile-nav__foot .emergency-line{
  color:var(--ink);justify-content:center;padding-top:var(--sp-2);font-size:var(--fs-small);
}

/* =============================================================
   ALERT BANNER — conditional; pushes content down, never overlays
   ============================================================= */
.alert{background:var(--red-600);color:var(--white);}
.alert .wrap-wide{
  display:flex;align-items:center;gap:var(--sp-4);
  min-height:3.25rem;padding-block:var(--sp-2);
}
.alert__tag{
  font-size:0.6875rem;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.6);padding:var(--sp-1) var(--sp-3);
  border-radius:var(--radius);flex-shrink:0;
}
.alert p{font-size:var(--fs-small);}
.alert a{text-decoration:underline;text-underline-offset:3px;font-weight:600;}
.alert__dismiss{
  margin-left:auto;flex-shrink:0;color:var(--white);opacity:0.85;
  width:var(--touch-min);height:var(--touch-min);display:grid;place-items:center;font-size:1.375rem;
}
.alert__dismiss:hover{opacity:1;}

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer{background:var(--navy-900);color:rgba(255,255,255,0.72);padding-top:var(--sp-24);}
.footer__top{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:var(--sp-12);
  padding-bottom:var(--sp-16);
}
.footer__brand{display:flex;gap:var(--sp-4);align-items:flex-start;}
.footer__brand img{height:5.5rem;width:auto;flex-shrink:0;}
.footer__name{
  font-family:var(--font-serif);font-size:1.375rem;color:var(--white);
  line-height:1.2;letter-spacing:-0.015em;display:block;
}
.footer__address{font-style:normal;font-size:var(--fs-small);margin-top:var(--sp-3);line-height:1.7;}
.footer__address a{color:var(--white);}
.footer__address .emergency-line{color:var(--white);margin-top:var(--sp-2);}
.site-footer h2{
  font-size:0.71875rem;font-weight:700;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--gold-300);margin-bottom:var(--sp-4);
  font-family:var(--font-sans);
}
.site-footer li{list-style:none;margin-bottom:var(--sp-3);}
.site-footer li a{font-size:var(--fs-small);transition:color var(--dur-hover) var(--ease-out);}
.site-footer li a:hover{color:var(--white);}
.social-links{display:flex;gap:var(--sp-2);margin-top:var(--sp-6);}
.social-links a{
  width:var(--touch-min);height:var(--touch-min);display:grid;place-items:center;
  border:1px solid rgba(255,255,255,0.28);border-radius:var(--radius);color:var(--white);
  transition:background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out),
             color var(--dur-hover) var(--ease-out);
}
.social-links a:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--navy-900);}
.social-links svg{width:18px;height:18px;}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,0.16);padding-block:var(--sp-6) var(--sp-8);
  display:flex;justify-content:space-between;gap:var(--sp-6);
  font-size:0.84375rem;flex-wrap:wrap;
}
.footer__bottom nav{display:flex;gap:var(--sp-6);}

/* =============================================================
   Part 2 of 3 — HOMEPAGE SECTIONS
   ============================================================= */

/* ---------- 1 · HERO ---------- */
.hero{position:relative;min-height:86vh;display:flex;align-items:center;overflow:hidden;}
.hero__media{position:absolute;inset:0;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;}
.hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(10,29,58,0.94) 0%,
      rgba(10,29,58,0.86) 30%,
      rgba(10,29,58,0.55) 55%,
      rgba(10,29,58,0.18) 78%,
      rgba(10,29,58,0.35) 100%),
    linear-gradient(to top, rgba(10,29,58,0.70) 0%, rgba(10,29,58,0) 45%);
}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:var(--sp-32) 11.875rem;}
.hero__eyebrow{
  font-size:var(--fs-label);font-weight:700;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--gold-300);display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-6);
}
.hero__eyebrow::before{content:"";width:2.75rem;height:1.5px;background:var(--gold-500);flex-shrink:0;}
.hero h1{
  font-family:var(--font-serif);color:var(--white);font-size:var(--fs-display);
  line-height:var(--lh-tight);letter-spacing:var(--ls-display);
  max-width:15ch;text-shadow:0 2px 30px rgba(0,0,0,0.28);text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--gold-300);}
.hero__sub{
  color:rgba(255,255,255,0.90);font-size:var(--fs-body-lg);line-height:1.6;
  max-width:48ch;margin-block:var(--sp-8) var(--sp-12);
}
.hero__cta{display:flex;gap:var(--sp-4);flex-wrap:wrap;}

/* ---------- 2 · ACTION RAIL (overlaps the hero) ---------- */
.rail-holder{position:relative;z-index:5;margin-top:-5.75rem;}
.rail{display:grid;grid-template-columns:repeat(4,1fr);background:var(--paper);box-shadow:var(--shadow-rail);}
.rail__item{
  padding:var(--sp-8);border-right:var(--hairline);
  display:flex;flex-direction:column;gap:var(--sp-2);position:relative;
  transition:background 140ms var(--ease-out);
}
.rail__item:last-child{border-right:0;}
.rail__item::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--gold-500);
  transition:width 220ms var(--ease-entrance);
}
.rail__item:hover,.rail__item:focus-visible{background:var(--fog);}
.rail__item:hover::before,.rail__item:focus-visible::before{width:100%;}
.rail__n{font-family:var(--font-serif);font-size:0.8125rem;color:var(--gold-700);letter-spacing:0.06em;}
.rail__t{font-family:var(--font-serif);font-size:1.5625rem;letter-spacing:-0.015em;color:var(--navy-900);line-height:1.15;}
.rail__d{font-size:0.90625rem;color:var(--slate-700);line-height:1.45;}

/* ---------- 3 · DISPATCH STRIP ---------- */
.dispatch{background:var(--navy-900);color:var(--white);}
.dispatch .wrap{display:grid;grid-template-columns:repeat(3,1fr);}
.dispatch__item{
  padding:var(--sp-8) var(--sp-8) var(--sp-8) 0;
  border-right:var(--hairline-dark);
  display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
}
.dispatch__item:last-child{border-right:0;}
.dispatch__k{
  font-size:0.71875rem;font-weight:700;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--gold-300);
}
.dispatch__v{font-family:var(--font-serif);font-size:1.5rem;letter-spacing:-0.01em;color:var(--white);}
.dispatch__note{font-size:0.8125rem;color:rgba(255,255,255,0.62);width:100%;}

/* ---------- 4 · THE FRONT PAGE (news) ---------- */
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-12);margin-bottom:var(--sp-12);
}
.section-head__left{max-width:56ch;}
.section-head .eyebrow{margin-bottom:var(--sp-4);}
.section-head p{margin-top:var(--sp-4);color:var(--slate-700);font-size:1.1875rem;max-width:52ch;}

.frontpage{display:grid;grid-template-columns:1.55fr 1fr;gap:var(--sp-12);align-items:start;}

.lead__figure{position:relative;overflow:hidden;background:var(--silver-200);}
.lead__figure img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 600ms var(--ease-entrance);}
.lead:hover .lead__figure img{transform:scale(1.03);}
.lead__cat{
  position:absolute;left:0;bottom:0;z-index:2;background:var(--navy-900);color:var(--white);
  font-size:0.6875rem;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;
  padding:var(--sp-3) var(--sp-4);
}
.lead__body{padding-top:var(--sp-8);}
.lead time{font-size:0.8125rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--slate-400);}
.lead h3{
  font-family:var(--font-serif);font-size:clamp(2rem,3vw,2.75rem);line-height:1.1;
  letter-spacing:-0.022em;margin-block:var(--sp-3) var(--sp-4);color:var(--navy-900);
  max-width:20ch;text-wrap:balance;
}
.lead:hover h3{color:var(--navy-500);}
.lead p{margin-bottom:var(--sp-6);color:var(--slate-700);font-size:1.15625rem;max-width:52ch;}
.byline{font-size:0.875rem;color:var(--slate-400);}

.stack{display:flex;flex-direction:column;}
.stack__item{
  display:grid;grid-template-columns:7rem 1fr;gap:var(--sp-6);
  padding-block:var(--sp-6);border-top:var(--hairline);align-items:start;
}
.stack__item:first-child{border-top:0;padding-top:0;}
.stack__item img{width:7rem;height:5.5rem;object-fit:cover;background:var(--silver-200);}
.stack__item time{font-size:0.71875rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-700);}
.stack__item h3{
  font-family:var(--font-serif);font-size:var(--fs-h4);line-height:1.25;
  letter-spacing:-0.012em;margin-top:var(--sp-2);color:var(--navy-900);text-wrap:balance;
}
.stack__item:hover h3{color:var(--navy-500);}
.stack__more{margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:var(--rule-strong);}

.news-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8);
  margin-top:var(--sp-16);padding-top:var(--sp-12);border-top:var(--hairline);
}
.ncard__fig{overflow:hidden;}
.ncard img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--silver-200);transition:transform 600ms var(--ease-entrance);}
.ncard:hover img{transform:scale(1.04);}
.ncard time{display:block;font-size:0.71875rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-700);margin-block:var(--sp-4) var(--sp-2);}
.ncard h3{font-family:var(--font-serif);font-size:1.5rem;line-height:1.2;letter-spacing:-0.014em;color:var(--navy-900);text-wrap:balance;}
.ncard:hover h3{color:var(--navy-500);}
.ncard p{font-size:1rem;color:var(--slate-700);margin-top:var(--sp-2);}

/* ---------- 5 · CALENDAR ---------- */
.calendar{background:var(--paper);}
.cal-grid{display:grid;grid-template-columns:23.75rem 1fr;gap:var(--sp-16);align-items:start;}
.cal-side{position:sticky;top:calc(var(--header-h-compact) + var(--sp-12));}
.cal-side .h2{margin-block:var(--sp-4) var(--sp-6);}
.cal-side p{color:var(--slate-700);font-size:1.0625rem;margin-bottom:var(--sp-8);}
.cal-list{border-top:var(--rule-strong);}
.cal-row{
  display:grid;grid-template-columns:6rem 1fr 11.875rem 9.375rem;gap:var(--sp-8);
  align-items:center;padding-block:var(--sp-8);border-bottom:var(--hairline);
  transition:background 140ms var(--ease-out), padding-left 220ms var(--ease-entrance);
}
.cal-row:hover{background:var(--fog);padding-left:var(--sp-4);}
.cal-date{text-align:center;border-right:var(--hairline);padding-right:var(--sp-6);}
.cal-date__m{display:block;font-size:0.71875rem;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red-600);}
.cal-date__d{display:block;font-family:var(--font-serif);font-size:2.75rem;line-height:1;letter-spacing:-0.03em;color:var(--navy-900);margin-top:var(--sp-1);}
.cal-row h3{font-family:var(--font-serif);font-size:1.625rem;line-height:1.22;letter-spacing:-0.014em;color:var(--navy-900);text-wrap:balance;}
.cal-row p{margin-top:var(--sp-1);font-size:0.96875rem;color:var(--slate-700);}
.cal-where{font-size:var(--fs-small);color:var(--slate-700);}
.cal-where span{display:block;font-size:0.71875rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--slate-400);margin-bottom:var(--sp-1);}
.cal-row .arrow{justify-self:end;}

/* ---------- EVENTS · status, past rows, archive chrome ----------
   The status label is a caption above the title rather than a badge on the
   row, so a cancelled event still reads as an event first and the four-column
   grid is untouched. A finished event is quieter but never hidden. */
.ev-status{
  font-size:0.71875rem;font-weight:700;letter-spacing:var(--ls-label);
  text-transform:uppercase;margin-bottom:var(--sp-2);
}
.ev-status--cancelled{color:var(--red-600);}
.ev-status--postponed{color:var(--slate-400);}
.ev-status--lead{margin-bottom:var(--sp-4);}

.cal-row--past .cal-date__m{color:var(--slate-400);}
.cal-row--past .cal-date__d,
.cal-row--past h3{color:var(--slate-700);}

/* The time sits under the venue in the same column, so it needs the gap the
   first label does not. */
.cal-where .cal-when{margin-top:var(--sp-3);}

.events-switch{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-6);flex-wrap:wrap;margin-bottom:var(--sp-8);
}

/* ---------- EVENT PAGE · the details panel ----------
   One navy field divided by hairlines, not four floating cards. Labels take
   --gold-300, which the tokens designate as text on navy. Nothing here
   introduces a colour, radius, shadow or type size that is not already in
   tokens.css. */
.ev-panel{background:var(--navy-900);color:var(--white);padding:var(--sp-8);}
.ev-panel__row{padding-block:var(--sp-6);border-top:var(--hairline-dark);}
.ev-panel__row:first-child{border-top:0;padding-top:0;}
.ev-panel__row:last-child{padding-bottom:0;}
.ev-panel h2{
  font-family:var(--font-sans);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--gold-300);margin-bottom:var(--sp-4);
}
.ev-when{
  font-family:var(--font-serif);font-size:var(--fs-h4);
  line-height:1.25;letter-spacing:-0.01em;color:var(--white);
}
.ev-place{font-size:var(--fs-body);line-height:1.5;color:var(--white);overflow-wrap:break-word;}
.ev-when span,.ev-place span{
  display:block;font-family:var(--font-sans);font-size:var(--fs-small);
  color:rgba(255,255,255,0.72);margin-top:var(--sp-2);
}
.ev-panel .btn{margin-top:var(--sp-5);}

/* Gold is already the accent on navy, so the primary action on this panel
   spends no red — and red is dark enough against --navy-900 to be a poor
   button there in any case. */
.btn--gold{background:var(--gold-500);border-color:var(--gold-500);color:var(--navy-900);}
.btn--gold:hover{background:var(--gold-300);border-color:var(--gold-300);color:var(--navy-900);}

/* The hero's optional marked line. Generic by name because the shared hero
   knows nothing about events — it is simply handed a label and a note. A gold
   rule and a label, never a filled chip: --red-600 against --navy-900 is too
   dark to read, and red belongs to 911, the alert banner and the primary
   action. The word carries the meaning; red returns on the light column. */
.page-hero__flag{
  margin-top:var(--sp-6);padding-left:var(--sp-5);
  border-left:var(--rule-gold);max-width:58ch;
}
.page-hero__flag-label{
  display:block;font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold-300);
}
.page-hero__flag-note{
  display:block;margin-top:var(--sp-2);font-size:var(--fs-small);
  color:rgba(255,255,255,0.86);line-height:1.55;
}

/* One coherent row even though Instagram is a button and the rest are links —
   the two selectors carry identical treatment so the difference in mechanism
   is invisible. */
.ev-share{display:flex;gap:var(--sp-3);flex-wrap:wrap;}
.ev-share a,
.ev-share__copy{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--touch-min);height:var(--touch-min);
  padding:0;margin:0;font:inherit;background:none;cursor:pointer;
  border:1px solid rgba(255,255,255,0.28);border-radius:var(--radius);
  color:var(--white);
  transition:background var(--dur-hover) var(--ease-out),
             border-color var(--dur-hover) var(--ease-out),
             color var(--dur-hover) var(--ease-out);
}
.ev-share a:hover,
.ev-share__copy:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--navy-900);}
.ev-share a:focus-visible,
.ev-share__copy:focus-visible{outline:var(--focus-ring-w) solid var(--focus-ring-dark);outline-offset:var(--focus-ring-offset);}

/* The copy confirmation. Empty until something is announced, so it occupies no
   space on arrival and does not push the panel around. */
.ev-share__status{
  font-size:var(--fs-small);line-height:1.5;color:var(--gold-300);
  overflow-wrap:break-word;
}
.ev-share__status:not(:empty){margin-top:var(--sp-4);}

/* The content image opens the column, so it loses the figure's usual top
   margin. Everything else about it is the News figure, unchanged. */
.ev-figure{margin-top:0;}
.ev-back{margin-top:var(--sp-12);padding-top:var(--sp-6);border-top:var(--hairline);}

/* ---------- EVENT PAGE · content column sizing ----------
   A grid track's automatic minimum size is min-content, NOT zero. The left
   column is 1fr, so a single unbreakable string — a pasted URL, a long token,
   anything with no spaces — has a min-content width wider than the track's
   fair share. The track grows to accommodate it, the 20rem panel keeps its
   fixed width, and the paragraph runs on underneath the panel.

   min-width:0 releases that floor so the track shrinks to the width it was
   actually assigned. overflow-wrap then breaks the offending string inside
   the column instead of letting it spill out of one. Nothing is hidden, no
   overflow is clipped, and ordinary words still wrap on word boundaries —
   break-word only intervenes when a word cannot fit a line by itself.

   Scoped to the event page on purpose. The same latent condition exists on
   every .with-aside template, but those sections are closed; the global fix
   would be minmax(0,1fr) on the track itself. */
.single-rvcfd_event .with-aside > *{min-width:0;}
.single-rvcfd_event .prose{overflow-wrap:break-word;}

/* The global reset covers img, svg and video but not framed embeds, which an
   editor can paste and which would otherwise overflow the same way. */
.single-rvcfd_event .prose :is(iframe,embed,object){max-width:100%;}
.single-rvcfd_event .prose iframe{width:100%;}

/* ---------- 6 · THE RUN REPORT ----------
   Three levels of data. The layout composes itself from whatever
   is present; there is no "level" setting to choose wrongly.
   -------------------------------------------------------------- */
.runband{background:var(--navy-900);color:var(--white);padding-block:var(--sp-32);position:relative;overflow:hidden;}
.runband::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--gold-500) 0 22%,rgba(201,162,39,0.18) 22% 100%);
}
.run-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--sp-16);align-items:end;}

/* LEVEL 1 — headline figure only: centred, shorter band, gold rule */
.runband--solo{padding-block:5.5rem;}
.runband--solo .run-grid{grid-template-columns:1fr;justify-items:center;text-align:center;}
.runband--solo .eyebrow{justify-content:center;}
.runband--solo .eyebrow::after{display:none;}
.runband--solo .run-cap{max-width:32ch;}
.runband--solo .run-rule{display:block;margin:var(--sp-6) auto 0;}
.run-rule{display:none;height:2px;width:4rem;background:var(--gold-500);border:0;}

.run-cap{
  font-family:var(--font-serif);font-size:clamp(1.5rem,2.4vw,2.125rem);line-height:1.25;
  letter-spacing:-0.015em;color:var(--white);margin-top:var(--sp-6);max-width:22ch;font-weight:400;
}
.run-num{
  font-weight:700;font-variant-numeric:tabular-nums;font-size:var(--fs-stat-hero);
  line-height:0.86;letter-spacing:-0.05em;color:var(--white);display:block;margin-top:var(--sp-6);
}
.run-num__sep{color:var(--gold-300);}
.run-stamp{
  display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-6);
  font-size:0.78125rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.62);
}
.run-stamp::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-500);
  box-shadow:0 0 0 3px rgba(201,162,39,0.22);flex-shrink:0;
}
/* LEVEL 2 — supporting statistics. Centres when fewer than three. */
.run-side{display:flex;flex-direction:column;justify-content:center;}
.run-side__item{padding-block:var(--sp-6);border-top:var(--hairline-dark);}
.run-side__item:first-child{border-top:var(--rule-gold);}
.run-side__n{font-size:2.625rem;font-weight:700;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;color:var(--white);line-height:1;display:block;}
.run-side__l{display:block;font-size:0.78125rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-300);margin-top:var(--sp-3);}

/* LEVEL 3 — breakdown table */
.runtable{background:var(--paper);padding-block:var(--sp-32);}
.runs th,.runs td{text-align:right;padding-block:var(--sp-4);}
.runs th:first-child,.runs td:first-child{text-align:left;}
.runs{font-variant-numeric:tabular-nums;}
.runs thead th{
  font-size:0.71875rem;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--slate-400);border-bottom:var(--rule-strong);padding-bottom:var(--sp-3);
}
.runs tbody td{border-bottom:var(--hairline);font-size:1.0625rem;color:var(--slate-700);}
.runs tbody tr:hover td{background:var(--fog);}
.runs tbody td:first-child{font-family:var(--font-serif);font-size:1.3125rem;letter-spacing:-0.01em;color:var(--navy-900);width:34%;}
.runs td.is-primary{font-weight:600;color:var(--ink);font-size:1.1875rem;}
.runs .col-share{width:26%;padding-left:var(--sp-12);}
.sharebar{display:flex;align-items:center;gap:var(--sp-3);justify-content:flex-end;}
.sharebar__track{flex:1;height:6px;background:var(--fog);position:relative;max-width:10.625rem;}
.sharebar__fill{position:absolute;inset:0 auto 0 0;background:var(--navy-500);}
.sharebar__pct{font-size:0.84375rem;color:var(--slate-400);min-width:2.75rem;text-align:right;}
.runs tfoot td{border-top:var(--rule-strong);padding-top:var(--sp-6);font-size:1.1875rem;font-weight:700;color:var(--navy-900);}
.runs tfoot td:first-child{font-family:var(--font-sans);font-size:0.75rem;letter-spacing:var(--ls-label);text-transform:uppercase;}
.runtable__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-8);margin-top:var(--sp-8);flex-wrap:wrap;}
.runtable__note{font-size:0.90625rem;color:var(--slate-400);max-width:60ch;}

/* ---------- 7 · RECRUITMENT ---------- */
.recruit{position:relative;background:var(--navy-900);overflow:hidden;}
.recruit__media{position:absolute;inset:0;}
.recruit__media img{width:100%;height:100%;object-fit:cover;object-position:center 35%;}
.recruit__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(10,29,58,0.97) 0%, rgba(10,29,58,0.90) 34%,
    rgba(10,29,58,0.45) 62%, rgba(10,29,58,0.20) 100%);
}
.recruit__inner{position:relative;z-index:2;padding-block:9.375rem;}
.recruit__panel{max-width:38.75rem;}
.recruit h2{
  font-family:var(--font-serif);color:var(--white);font-size:clamp(2.75rem,4.8vw,4.375rem);
  line-height:1.03;letter-spacing:-0.028em;margin-top:var(--sp-6);text-wrap:balance;
}
.recruit h2 .line2{display:block;color:var(--gold-300);}
.recruit__sub{color:rgba(255,255,255,0.86);font-size:var(--fs-body-lg);line-height:1.65;margin-top:var(--sp-6);max-width:50ch;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);margin-block:var(--sp-12);border-top:var(--hairline-dark);}
.steps__item{padding:var(--sp-6) var(--sp-6) var(--sp-6) 0;border-right:var(--hairline-dark);}
.steps__item:last-child{border-right:0;}
.steps__n{font-family:var(--font-serif);font-size:0.875rem;color:var(--gold-300);letter-spacing:0.08em;}
.steps__l{display:block;font-family:var(--font-serif);font-size:1.4375rem;color:var(--white);margin-block:var(--sp-2) var(--sp-1);letter-spacing:-0.01em;}
.steps__t{font-size:0.90625rem;color:rgba(255,255,255,0.72);line-height:1.5;}
.recruit__cta{display:flex;gap:var(--sp-4);align-items:center;flex-wrap:wrap;}
.recruit__note{font-size:0.90625rem;color:rgba(255,255,255,0.60);margin-top:var(--sp-6);}

/* ---------- 8 · THE NINE HOUSES ----------
   Signature section. Built to hold long formal company names.
   WCAG 2.2 · 2.5.7 — never drag-only: keyboard + explicit controls.
   -------------------------------------------------------------- */
.houses{background:var(--bone);padding-top:var(--section-y);}
.houses__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-12);margin-bottom:var(--sp-12);}
.houses__head p{max-width:42ch;color:var(--slate-700);font-size:var(--fs-body);}

.filmstrip{position:relative;}
.filmstrip__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:var(--tile-w);gap:2px;
  overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--silver-200) transparent;
  padding-bottom:var(--sp-4);
}
.filmstrip__track::-webkit-scrollbar{height:6px;}
.filmstrip__track::-webkit-scrollbar-thumb{background:var(--silver-200);}

.house{
  position:relative;height:var(--tile-h);overflow:hidden;background:var(--navy-900);
  display:block;scroll-snap-align:start;
}
.house img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(100%) contrast(1.06) brightness(0.72);
  transition:filter 420ms var(--ease-out), transform 700ms var(--ease-entrance);
}
.house::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(10,29,58,0.94) 0%, rgba(10,29,58,0.62) 46%, rgba(10,29,58,0.15) 100%);
}
.house:hover img,.house:focus-visible img{filter:grayscale(0%) contrast(1) brightness(0.92);transform:scale(1.05);}

.house__body{position:absolute;inset:auto 0 0 0;z-index:2;padding:var(--sp-6);}
.house__yr{font-family:var(--font-serif);font-size:0.8125rem;color:var(--gold-300);letter-spacing:0.1em;display:block;margin-bottom:var(--sp-2);}
/* Long formal names are the design target, not the exception.
   Wraps to three lines before shrinking. Never truncates a name. */
.house__nm{
  font-family:var(--font-serif);color:var(--white);display:block;
  font-size:clamp(1.25rem,1.55vw,1.5rem);line-height:1.18;letter-spacing:-0.012em;
  text-wrap:balance;hyphens:auto;
}
.house__qt{font-size:0.84375rem;color:rgba(255,255,255,0.68);margin-top:var(--sp-2);display:block;}
.house__bar{display:block;height:2px;width:0;background:var(--gold-500);margin-top:var(--sp-4);transition:width 300ms var(--ease-entrance);}
.house:hover .house__bar,.house:focus-visible .house__bar{width:3.25rem;}

.filmstrip__controls{
  display:flex;align-items:center;gap:var(--sp-3);
  margin-top:var(--sp-6);padding-bottom:var(--section-y);
}
.filmstrip__btn{
  width:var(--touch-min);height:var(--touch-min);display:grid;place-items:center;
  border:var(--hairline);border-radius:var(--radius);color:var(--navy-900);background:var(--paper);
  transition:border-color var(--dur-hover) var(--ease-out), background var(--dur-hover) var(--ease-out);
}
.filmstrip__btn:hover:not(:disabled){border-color:var(--navy-900);background:var(--fog);}
.filmstrip__btn:disabled{opacity:0.35;cursor:default;}
.filmstrip__hint{font-size:var(--fs-label);font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--slate-400);margin-left:var(--sp-2);}

/* ---------- 9 · SINCE 1875 ---------- */
.heritage{background:var(--paper);padding-block:var(--section-y);}
.heritage__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:5.625rem;align-items:center;}
.heritage__figs{position:relative;padding:0 0 5.625rem 5.625rem;}
.heritage__fig-a{width:76%;position:relative;z-index:1;margin:0;}
.heritage__fig-a img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(100%) sepia(14%) contrast(1.05);}
.heritage__fig-b{
  position:absolute;
  right:0;
  bottom:0;
  width:58%;
  z-index:2;
  margin:0;
  border:1px solid rgba(10,29,58,0.18);
  box-shadow:0 18px 38px -14px rgba(10,29,58,0.32);
}
.heritage__fig-b img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.heritage__cap{
  position:absolute;left:0;bottom:var(--sp-6);z-index:3;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:0.71875rem;font-weight:600;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--slate-400);
}
.heritage__copy .h2{margin-block:var(--sp-4) var(--sp-6);}
.heritage__copy p{color:var(--slate-700);font-size:1.1875rem;max-width:50ch;margin-bottom:var(--sp-5);}
.stats{display:grid;grid-template-columns:repeat(2,1fr);margin-block:var(--sp-12) var(--sp-8);}
.stats__item{padding:var(--sp-6) var(--sp-6) var(--sp-6) 0;border-top:var(--hairline);}
.stats__item:nth-child(-n+2){border-top:var(--rule-gold);}
.stats__n{font-size:var(--fs-stat);font-weight:700;letter-spacing:-0.035em;color:var(--navy-900);line-height:1;font-variant-numeric:tabular-nums;display:block;}
.stats__l{display:block;font-size:0.8125rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--slate-400);margin-top:var(--sp-3);}

/* ---------- 10 · SAFETY (homepage block) ---------- */
.safety{background:var(--bone);padding-block:var(--section-y);}
/* minmax(0,…) not 1fr: a grid track's automatic minimum is min-content, so one
   unbreakable token in a card widens every column, the tracks overflow the
   grid box, and the top rule stops short of the cards that spilled past it.
   This only changes anything in the case that was already broken. */
.safe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--silver-200);border-top:var(--rule-strong);}
/* min-width:0 lets the card shrink to its track; overflow-wrap then breaks a
   long token inside the card rather than letting it push the column. Both are
   needed — fixing the track alone just moves the overflow one level in. */
.safe-card{background:var(--bone);padding:var(--sp-12) var(--sp-8) var(--sp-8);transition:background 160ms var(--ease-out);min-width:0;overflow-wrap:break-word;}
.safe-card:hover{background:var(--paper);}
.safe-card__idx{font-family:var(--font-serif);font-size:var(--fs-small);color:var(--gold-700);letter-spacing:0.08em;}
.safe-card h3{font-family:var(--font-serif);font-size:1.75rem;line-height:1.18;letter-spacing:-0.015em;color:var(--navy-900);margin-block:var(--sp-4) var(--sp-3);}
.safe-card p{font-size:1.03125rem;color:var(--slate-700);margin-bottom:var(--sp-6);}

.docs{margin-top:var(--sp-16);display:grid;grid-template-columns:18.75rem 1fr;gap:var(--sp-16);align-items:start;}
.doc-list{border-top:var(--hairline);}
.doc-row{
  display:flex;align-items:center;gap:var(--sp-5);padding-block:var(--sp-5);
  border-bottom:var(--hairline);min-height:var(--touch-min);
  transition:padding-left 200ms var(--ease-entrance);
}
.doc-row:hover{padding-left:var(--sp-3);}
.doc-row__ext{
  font-size:0.65625rem;font-weight:700;letter-spacing:0.1em;color:var(--navy-900);
  border:var(--hairline);padding:var(--sp-1) var(--sp-2);flex-shrink:0;background:var(--paper);
}
.doc-row__nm{font-size:1.0625rem;color:var(--ink);font-weight:500;}
.doc-row__meta{margin-left:auto;font-size:0.84375rem;color:var(--slate-400);flex-shrink:0;}

/* ---------- DOCUMENTS · the optional second line ----------
   An extension of the approved row, not a replacement for it. The body column
   holds the title and, where the editor wrote an excerpt, a description
   beneath it. With no excerpt the span is absent and the row is exactly the
   single-line component it has always been.

   min-width:0 because a long title in a flex child will otherwise refuse to
   wrap and push the metadata out of the row. */
.doc-row__body{flex:1;min-width:0;}
.doc-row__nm{display:block;}
.doc-row__desc{
  display:block;margin-top:var(--sp-1);
  font-size:var(--fs-small);line-height:1.5;color:var(--slate-700);
  max-width:60ch;
}

/* Shown only to a signed-in user who can edit the record in question. */
.doc-admin-note{
  border-left:var(--rule-gold);background:var(--bone);
  padding:var(--sp-5) var(--sp-6);margin-bottom:var(--sp-8);
  font-size:var(--fs-small);line-height:1.55;color:var(--slate-700);
}
.doc-admin-note strong{display:block;color:var(--ink);margin-bottom:var(--sp-1);}
.doc-admin-note a{color:var(--navy-500);text-decoration:underline;margin-left:var(--sp-2);}

@media (max-width:767px){
  /* The metadata drops under the title rather than fighting it for width. */
  .doc-row{flex-wrap:wrap;}
  .doc-row__meta{margin-left:0;flex-basis:100%;margin-top:var(--sp-2);}
}

/* ---------- 11 · SUPPORT ---------- */
.support{background:var(--navy-900);color:var(--white);padding-block:var(--section-y);position:relative;overflow:hidden;}
.support__ghost{position:absolute;right:-5.625rem;top:50%;transform:translateY(-50%);width:32.5rem;opacity:0.05;pointer-events:none;}
.support .wrap{position:relative;z-index:2;}
.support h2{font-family:var(--font-serif);color:var(--white);font-size:var(--fs-h2);line-height:1.08;letter-spacing:var(--ls-heading);margin-top:var(--sp-4);}
.support .lede{color:rgba(255,255,255,0.80);margin-top:var(--sp-6);}
.support__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-12);margin-block:var(--sp-16) var(--sp-12);}
.support__col{border-top:var(--hairline-dark);padding-top:var(--sp-6);}
.support__k{font-size:0.71875rem;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold-300);}
.support__col h3{font-family:var(--font-serif);font-size:1.5rem;color:var(--white);margin-block:var(--sp-3) var(--sp-2);letter-spacing:-0.012em;}
.support__col p{font-size:1.03125rem;color:rgba(255,255,255,0.74);}
.support__cta{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center;}

/* ---------- 12 · SOCIAL (manually curated) ---------- */
.social{background:var(--paper);padding-block:var(--section-y);}
.social__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);}
.soc-card{border:var(--hairline);background:var(--paper);transition:box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out);}
.soc-card:hover{box-shadow:var(--shadow-card);transform:translateY(-3px);}
.soc-card__fig{overflow:hidden;}
.soc-card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--silver-200);}
.soc-card__body{padding:var(--sp-5);}
.soc-card__plat{display:flex;align-items:center;gap:var(--sp-2);font-size:0.6875rem;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--slate-400);}
.soc-card__plat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--navy-500);}
.soc-card__body p{font-size:0.96875rem;color:var(--slate-700);margin-top:var(--sp-3);line-height:1.5;}

/* =============================================================
   Part 3 of 3 — INTERIOR TEMPLATES, MOTION, RESPONSIVE
   ============================================================= */

/* ---------- PAGE HEADER (interior pages) ----------
   A compact relative of the homepage hero. Same scrim logic,
   same type, one third the height. Not a new pattern.
   ------------------------------------------------------------ */
.page-hero{position:relative;background:var(--navy-900);overflow:hidden;min-height:26rem;display:flex;align-items:flex-end;}
.page-hero--tall{min-height:34rem;}
.page-hero__media{position:absolute;inset:0;}
.page-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 40%;}
.page-hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(10,29,58,0.94) 0%, rgba(10,29,58,0.80) 42%, rgba(10,29,58,0.35) 75%, rgba(10,29,58,0.30) 100%),
    linear-gradient(to top, rgba(10,29,58,0.85) 0%, rgba(10,29,58,0) 55%);
}
.page-hero__inner{position:relative;z-index:2;width:100%;padding-block:var(--sp-16) var(--sp-12);}
.page-hero h1{
  font-family:var(--font-serif);color:var(--white);font-size:var(--fs-h1);
  line-height:1.06;letter-spacing:-0.025em;max-width:20ch;margin-top:var(--sp-4);text-wrap:balance;
}
.page-hero__sub{color:rgba(255,255,255,0.86);font-size:var(--fs-body-lg);max-width:52ch;margin-top:var(--sp-4);}

/* Breadcrumbs */
.crumbs{font-size:0.84375rem;color:rgba(255,255,255,0.66);}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;}
.crumbs li::after{content:"/";margin-left:var(--sp-2);color:rgba(255,255,255,0.34);}
.crumbs li:last-child::after{display:none;}
.crumbs a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px;}
.crumbs--light{color:var(--slate-400);}
.crumbs--light li::after{color:var(--silver-200);}
.crumbs--light a:hover{color:var(--navy-900);}

/* ---------- PROSE — long-form body copy ---------- */
.prose{max-width:var(--measure);}
.prose > * + *{margin-top:var(--sp-6);}
.prose p{font-size:1.1875rem;line-height:1.7;color:var(--slate-700);}
.prose h2{font-family:var(--font-serif);font-size:var(--fs-h3);color:var(--navy-900);letter-spacing:-0.015em;line-height:1.2;margin-top:var(--sp-12);}
.prose h3{font-family:var(--font-sans);font-size:var(--fs-h4);font-weight:600;color:var(--navy-900);margin-top:var(--sp-8);}
.prose ul,.prose ol{padding-left:var(--sp-6);color:var(--slate-700);font-size:1.1875rem;line-height:1.7;}
.prose li + li{margin-top:var(--sp-2);}
.prose li::marker{color:var(--gold-700);}
.prose a:not(.btn):not(.arrow){color:var(--navy-500);text-decoration:underline;text-underline-offset:3px;}
.prose a:not(.btn):not(.arrow):hover{color:var(--navy-900);}
.prose strong{color:var(--ink);font-weight:600;}
.prose blockquote{
  margin:var(--sp-12) 0;padding-left:var(--sp-8);border-left:var(--rule-gold);
  font-family:var(--font-serif);font-size:1.625rem;line-height:1.35;color:var(--navy-900);letter-spacing:-0.012em;
}
.prose figure{margin:var(--sp-12) 0;}
.prose figcaption{margin-top:var(--sp-3);font-size:0.875rem;color:var(--slate-400);}

/* ---------- CONTENT + SIDEBAR ---------- */
.with-aside{display:grid;grid-template-columns:1fr 20rem;gap:var(--sp-16);align-items:start;}

/* A page becomes two-column only when it actually has an aside.
   template-parts/page-aside.php is still an empty Phase 2 scaffold, so the
   templates that call it emit a single grid child. That child spans both
   tracks rather than leaving 20rem reserved and blank to its right.
   Self-cancelling: on the day the part renders markup the wrapper gains a
   second child, :only-child stops matching, and the two-column layout
   returns with no edit here. Pages that render a real aside (Fire
   Prevention & Safety, the company single, the event single) always have two
   children and are never affected by this rule. */
.with-aside > :only-child{grid-column:1 / -1;}
.aside__block{border-top:var(--rule-strong);padding-top:var(--sp-6);margin-bottom:var(--sp-12);}
.aside__block h2{font-size:0.71875rem;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--slate-400);margin-bottom:var(--sp-4);font-family:var(--font-sans);}
.aside__block li{list-style:none;border-bottom:var(--hairline);}
.aside__block li a{display:block;padding-block:var(--sp-3);font-size:1rem;color:var(--navy-900);min-height:var(--touch-min);}
.aside__block li a:hover{color:var(--navy-500);}
.aside--sticky{position:sticky;top:calc(var(--header-h-compact) + var(--sp-8));}

/* Inline call-to-action */
.inline-cta{
  background:var(--navy-900);color:var(--white);padding:var(--sp-12);margin-block:var(--sp-16);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);flex-wrap:wrap;
}
.inline-cta h2{font-family:var(--font-serif);font-size:1.75rem;color:var(--white);letter-spacing:-0.015em;line-height:1.2;max-width:26ch;}
.inline-cta p{color:rgba(255,255,255,0.74);font-size:1.03125rem;margin-top:var(--sp-2);max-width:46ch;}

/* Emergency notice — used above every contact form */
.emergency-notice{
  border:2px solid var(--red-600);background:var(--paper);
  padding:var(--sp-6);margin-block:var(--sp-8);display:flex;gap:var(--sp-4);align-items:flex-start;
}
.emergency-notice strong{color:var(--red-600);display:block;font-size:1.0625rem;}
.emergency-notice p{color:var(--slate-700);font-size:1rem;margin-top:var(--sp-1);}
/* The notice icon takes its colour from the token rather than a hard-coded
   hex in the template, and never shrinks when the text beside it wraps. */
.emergency-notice svg{color:var(--red-600);flex-shrink:0;}

/* ---------- ARTICLE ---------- */
.article__head{max-width:52rem;}
.article__meta{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;font-size:0.84375rem;color:var(--slate-400);margin-top:var(--sp-6);}
.article__cat{
  background:var(--navy-900);color:var(--white);font-size:0.6875rem;font-weight:700;
  letter-spacing:var(--ls-label);text-transform:uppercase;padding:var(--sp-1) var(--sp-3);
}
.article__figure{margin-block:var(--sp-12);}
.article__figure img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--silver-200);}
.article__figure figcaption{margin-top:var(--sp-3);font-size:0.875rem;color:var(--slate-400);}

.related{background:var(--bone);padding-block:var(--section-y);}
.related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8);}

/* ---------- COMPANY PAGE ----------
   Every block self-hides when its field is empty. Long formal
   company names are the design target.
   ------------------------------------------------------------ */
.company-hero__id{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-4);}
.company-hero__logo{
  width:4.5rem;height:4.5rem;object-fit:contain;background:rgba(255,255,255,0.08);
  padding:var(--sp-2);border-radius:var(--radius);flex-shrink:0;
}
.company-hero__num{
  font-family:var(--font-serif);font-size:0.8125rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gold-300);
}
.page-hero h1.company-name{
  font-size:clamp(2rem, 3.6vw, 3.25rem);max-width:22ch;line-height:1.08;letter-spacing:-0.022em;
  text-wrap:balance;hyphens:auto;
}
.company-facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:var(--rule-gold);margin-top:var(--sp-12);
}
.company-facts__item{padding:var(--sp-6) var(--sp-6) var(--sp-6) 0;border-right:var(--hairline);}
.company-facts__item:last-child{border-right:0;}
.company-facts__k{display:block;font-size:0.71875rem;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--slate-400);}
.company-facts__v{display:block;font-family:var(--font-serif);font-size:1.375rem;color:var(--navy-900);margin-top:var(--sp-2);line-height:1.25;}

.apparatus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8);}
.apparatus-card__fig{overflow:hidden;background:var(--silver-200);}
.apparatus-card img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 600ms var(--ease-entrance);}
.apparatus-card:hover img{transform:scale(1.04);}
.apparatus-card__d{font-family:var(--font-serif);font-size:1.5rem;color:var(--navy-900);margin-top:var(--sp-4);letter-spacing:-0.014em;display:block;}
.apparatus-card__t{font-size:0.90625rem;color:var(--slate-700);margin-top:var(--sp-1);display:block;}

.officers{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-8);}
.officer{padding-top:var(--sp-4);border-top:var(--hairline);}
.officer__role{font-size:0.71875rem;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold-700);display:block;}
.officer__name{font-family:var(--font-serif);font-size:1.375rem;color:var(--navy-900);margin-top:var(--sp-2);display:block;line-height:1.25;}
.officer__since{font-size:0.875rem;color:var(--slate-400);margin-top:var(--sp-1);display:block;}

/* ---------- MOTION ---------- */
.rv{opacity:0;transform:translateY(16px);
    transition:opacity var(--dur-reveal) var(--ease-entrance), transform var(--dur-reveal) var(--ease-entrance);}
.rv.is-in{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.001ms!important;animation-iteration-count:1!important;transition-duration:0.001ms!important;}
  .rv{opacity:1;transform:none;}
  html{scroll-behavior:auto;}
  .filmstrip__track{scroll-behavior:auto;}
}

/* =============================================================
   RESPONSIVE
   Rule: every section keeps at least one asymmetry at every
   breakpoint. No section becomes a stack of full-width boxes.
   ============================================================= */

/* ---------- SMALL LAPTOPS · 1024–1439 ---------- */
@media (max-width:1439px){
  /* On a 1366x768 laptop the usable viewport is ~640px. With the desktop
     display size and padding, the hero measured 668px and the action rail
     started 70px BELOW the fold — the overlap, which is the whole point of
     the section, was invisible on the most common real device.
     Capping the display size and tightening the padding puts 73px of the
     rail on screen at first paint. No Concept 5 decision changes; this is
     the responsive step the type scale always implied. */
  :root{--fs-display:clamp(3.5rem, 5.3vw, 4.5rem);}   /* 56 -> 72 */
  .hero{min-height:72vh;}
  .hero__inner{padding-block:3.5rem 7rem;}
  .hero__sub{margin-block:var(--sp-6) var(--sp-8);}
  .lead h3{font-size:2.375rem;}
  .nav__list{gap:var(--sp-6);}
  .heritage__grid{gap:var(--sp-16);}
  .cal-grid{grid-template-columns:20rem 1fr;gap:var(--sp-12);}
}

/* ---------- TABLET · 768–1023 ---------- */
@media (max-width:1023px){
  .nav,.head-actions .btn{display:none;}
  .nav-toggle{display:flex;}
  .head-actions{margin-left:auto;}

  .frontpage{grid-template-columns:1fr;gap:var(--sp-16);}
  .lead__figure{margin-inline:calc(var(--margin) * -1);}   /* full-bleed buys back the drama */
  .news-row{grid-template-columns:repeat(2,1fr);}
  .news-row > :last-child{display:none;}

  .cal-grid{grid-template-columns:1fr;gap:var(--sp-8);}
  .ev-panel{padding:var(--sp-6);}
  .page-hero__flag{max-width:none;}
  .cal-side{position:static;}
  .cal-row{grid-template-columns:5.5rem 1fr;gap:var(--sp-6);}
  .cal-where,.cal-row .arrow{display:none;}

  .run-grid{grid-template-columns:1fr;gap:var(--sp-12);align-items:start;}
  .run-side{flex-direction:row;gap:var(--sp-8);}
  .run-side__item{flex:1;border-top:var(--rule-gold);}

  .heritage__grid{grid-template-columns:1fr;gap:var(--sp-16);}
  .heritage__figs{padding:0 0 4.5rem 3.5rem;max-width:34rem;}  /* overlap preserved at 80% */

  .safe-grid,.support__cols,.related__grid,.apparatus-grid{grid-template-columns:1fr 1fr;}
  .safe-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .steps{grid-template-columns:1fr;border-top:0;}
  .steps__item{border-right:0;border-top:var(--hairline-dark);padding-right:0;}
  .social__grid{grid-template-columns:repeat(2,1fr);}
  .docs{grid-template-columns:1fr;gap:var(--sp-8);}
  .officers,.company-facts{grid-template-columns:repeat(2,1fr);}
  .company-facts__item:nth-child(2n){border-right:0;}
  .with-aside{grid-template-columns:1fr;gap:var(--sp-12);}
  .aside--sticky{position:static;}
  .footer__top{grid-template-columns:1fr 1fr;gap:var(--sp-8);}
  .section-head,.houses__head{flex-direction:column;align-items:flex-start;gap:var(--sp-6);}
  .recruit__inner{padding-block:var(--sp-24);}
  .utility__hide{display:none;}
}

/* =============================================================
   MOBILE · <768
   Not the desktop stacked. Concept 5 re-composed for a phone:
   the same editorial character, asymmetry, photography and
   typographic authority, expressed at 375–430px.

   Governing rules for this block
   1. Section rhythm is NOT uniform. Three "emphasis" sections
      breathe at 96px while the rest sit at 64px. Even spacing is
      what makes a stacked page feel undesigned.
   2. The three news ranks must remain visually distinct — a lead,
      a thumbnail rank, and a text rank. Repeating the same card
      three times flattens the hierarchy the desktop earned.
   3. Nothing relies on hover. Touch gets explicit affordances.
   4. Full-bleed is used deliberately, not accidentally.
   ============================================================= */
@media (max-width:767px){

  /* ---------- section rhythm ---------- */
  .section,.calendar,.safety,.social,.support,.runtable{padding-block:var(--sp-16);}
  .runband,.heritage{padding-block:var(--sp-24);}
  .recruit__inner{padding-block:var(--sp-24);}
  .houses{padding-top:var(--sp-24);}
  .filmstrip__controls{padding-bottom:var(--sp-24);}

  /* ---------- re-sequencing ----------
     On a phone "what is happening" beats "what happened", so the
     calendar moves above the news. The dispatch strip is already
     third in source order, directly under the hero. */
  main.home{display:flex;flex-direction:column;}
  main.home > *{order:5;}
  main.home > .hero{order:1;}
  main.home > .rail-holder{order:2;}
  main.home > .dispatch{order:3;}
  main.home > .calendar{order:4;}
  main.home > #news{order:5;}
  main.home > .runband{order:6;}
  main.home > .runtable{order:7;}
  main.home > .recruit{order:8;}
  main.home > .houses{order:9;}
  main.home > .heritage{order:10;}
  main.home > .safety{order:11;}
  main.home > .support{order:12;}
  main.home > .social{order:13;}

  /* ---------- utility bar + masthead ----------
     Denser, so the hero starts higher up the screen. */
  .utility{font-size:0.75rem;}
  .utility .wrap-wide{min-height:2.25rem;}
  .masthead .wrap-wide{min-height:4.25rem;gap:var(--sp-3);}
  .masthead.is-compact .wrap-wide{min-height:3.5rem;}
  .brand{gap:var(--sp-3);}
  .brand__patch{height:2.75rem;}
  .masthead.is-compact .brand__patch{height:2.25rem;}
  .brand__name{font-size:1.0625rem;}
  .brand__sub{font-size:0.5625rem;letter-spacing:0.16em;}
  .head-actions{gap:var(--sp-2);}
  .nav-toggle{font-size:0.6875rem;gap:var(--sp-2);}
  .alert .wrap-wide{align-items:flex-start;gap:var(--sp-3);}
  .alert p{font-size:0.875rem;}

  /* ---------- mobile navigation ---------- */
  .mobile-nav__head{padding-block:var(--sp-3);}
  .mobile-nav__body{padding-top:var(--sp-2);}
  .mobile-nav__link,.mobile-nav__disclosure{font-size:1.375rem;padding-block:var(--sp-4);}
  .mobile-nav__sub a{font-size:1rem;padding-block:var(--sp-3);}
  .mobile-nav__foot{padding:var(--sp-5) var(--margin) var(--sp-6);}

  /* ---------- 1 · HERO ----------
     Taller and bottom-weighted. The crop shifts right so the row of
     apparatus still reads as a row on a narrow frame instead of
     centring on empty pavement. */
  .hero{min-height:76vh;}
  .hero__inner{padding-block:var(--sp-16) var(--sp-24);}
  .hero__media img{object-position:62% 45%;}
  .hero__scrim{
    background:
      linear-gradient(to top,
        rgba(10,29,58,0.95) 0%, rgba(10,29,58,0.84) 34%,
        rgba(10,29,58,0.44) 66%, rgba(10,29,58,0.20) 100%),
      linear-gradient(to bottom, rgba(10,29,58,0.55) 0%, rgba(10,29,58,0) 22%);
  }
  .hero__eyebrow{font-size:0.6875rem;letter-spacing:0.16em;gap:var(--sp-2);margin-bottom:var(--sp-5);}
  .hero__eyebrow::before{width:1.75rem;}
  .hero h1{
    font-size:clamp(2.375rem, 10.5vw, 3.25rem);
    line-height:1.04;letter-spacing:-0.028em;max-width:none;
  }
  .hero__sub{font-size:1.0625rem;max-width:34ch;margin-block:var(--sp-5) var(--sp-8);}
  .hero__cta{gap:var(--sp-3);}
  .hero__cta .btn{flex:1 1 100%;}

  /* ---------- 2 · ACTION RAIL ----------
     Keeps the overlap — the signature move — and gains a gold rule
     so the slab reads as intentional rather than as a leftover grid.
     The hover bar is removed; it means nothing on touch. */
  .rail-holder{margin-top:calc(var(--sp-12) * -1);}
  .rail{grid-template-columns:repeat(2,1fr);border-top:var(--rule-gold);}
  .rail__item{padding:var(--sp-5) var(--sp-4);gap:var(--sp-1);}
  .rail__item::before{display:none;}
  .rail__n{font-size:0.6875rem;}
  .rail__t{font-size:1.125rem;line-height:1.2;}
  .rail__d{font-size:0.8125rem;line-height:1.35;}
  .rail__item:nth-child(2n){border-right:0;}
  .rail__item:nth-child(-n+2){border-bottom:var(--hairline);}

  /* ---------- 3 · DISPATCH ---------- */
  .dispatch .wrap{grid-template-columns:1fr;}
  .dispatch__item{border-right:0;border-bottom:var(--hairline-dark);padding:var(--sp-5) 0;gap:var(--sp-2);}
  .dispatch__item:last-child{border-bottom:0;}
  .dispatch__v{font-size:1.375rem;}
  .dispatch__note{font-size:0.75rem;}

  /* ---------- 4 · THE FRONT PAGE ----------
     Three ranks, three treatments. Lead keeps a full-bleed image and
     display type. Rank two gets square thumbnails. Rank three drops
     to dated headlines — the hierarchy survives the narrow column. */
  .section-head{margin-bottom:var(--sp-8);gap:var(--sp-4);}
  .section-head p{font-size:1rem;}
  .frontpage{gap:var(--sp-12);}
  .lead__figure{margin-inline:calc(var(--margin) * -1);}
  .lead__body{padding-top:var(--sp-6);}
  .lead h3{font-size:1.875rem;line-height:1.12;max-width:none;margin-block:var(--sp-3);}
  .lead p{font-size:1.0625rem;margin-bottom:var(--sp-4);}

  .stack__item{grid-template-columns:4.5rem 1fr;gap:var(--sp-4);padding-block:var(--sp-5);}
  .stack__item img{width:4.5rem;height:4.5rem;}
  .stack__item h3{font-size:1.125rem;line-height:1.28;}
  .stack__more{margin-top:var(--sp-6);padding-top:var(--sp-5);}

  .news-row{grid-template-columns:1fr;gap:0;margin-top:var(--sp-12);padding-top:var(--sp-8);}
  .news-row .ncard{border-bottom:var(--hairline);padding-block:var(--sp-5);}
  .news-row .ncard__fig{display:none;}
  .news-row .ncard time{margin-block:0 var(--sp-2);}
  .news-row .ncard h3{font-size:1.1875rem;line-height:1.28;}
  .news-row .ncard p{display:none;}

  /* ---------- 5 · CALENDAR ----------
     The date leaves the left column and becomes an inline marker
     above the title, so the headline gets the full measure. */
  .cal-side .h2{margin-block:var(--sp-3) var(--sp-4);}
  .cal-side p{font-size:1rem;margin-bottom:var(--sp-6);}
  .cal-row{grid-template-columns:1fr;gap:var(--sp-2);padding-block:var(--sp-5);align-items:start;}
  .cal-row:hover{background:none;padding-left:0;}
  .cal-date{display:flex;align-items:baseline;gap:var(--sp-2);text-align:left;border-right:0;padding-right:0;}
  .cal-date__d{font-size:1.75rem;margin-top:0;}
  .cal-row h3{font-size:1.375rem;line-height:1.24;}

  /* The panel becomes a full-width block under the description. Buttons go
     full width, matching the .inline-cta convention already used at this
     breakpoint. */
  .ev-panel{padding:var(--sp-6) var(--sp-5);}
  .ev-panel__row{padding-block:var(--sp-5);}
  .ev-when{font-size:var(--fs-body-lg);}
  .ev-panel .btn{width:100%;}
  .ev-back{margin-top:var(--sp-8);}

  /* The hero flag sits under a wrapped H1 at this width, so it needs its own
     breathing room rather than the desktop margin. */
  .page-hero__flag{margin-top:var(--sp-5);padding-left:var(--sp-4);}
  .ev-share__status{font-size:var(--fs-small);}
  .cal-row p{font-size:0.9375rem;}

  /* ---------- 6 · RUN REPORT ----------
     The number gets larger, not smaller — it is the section. The three
     statistics become a row rather than a stack, which halves the
     vertical cost and adds rhythm against the headline figure. */
  .run-grid{gap:var(--sp-12);}
  .run-cap{font-size:1.375rem;max-width:26ch;margin-top:var(--sp-4);}
  .run-num{font-size:clamp(4.5rem, 22vw, 6.5rem);margin-top:var(--sp-4);}
  .run-stamp{font-size:0.6875rem;margin-top:var(--sp-5);}
  .run-side{flex-direction:row;gap:var(--sp-4);}
  .run-side__item{flex:1;border-top:var(--rule-gold);padding-block:var(--sp-4);}
  .run-side__n{font-size:1.5rem;}
  .run-side__l{font-size:0.625rem;letter-spacing:0.1em;margin-top:var(--sp-2);}
  .runs .col-share{display:none;}
  .runs tbody td:first-child{width:auto;font-size:1rem;}
  .runs td.is-primary{font-size:1.0625rem;}
  .runs th,.runs td{padding-block:var(--sp-3);}
  .runtable__foot{gap:var(--sp-5);}
  .runtable__note{font-size:0.8125rem;}

  /* ---------- 7 · RECRUITMENT ----------
     The three steps become numbered editorial rows rather than three
     stacked boxes — the same content, a tenth of the visual noise. */
  .recruit h2{font-size:clamp(2.25rem, 9vw, 3rem);}
  .recruit__sub{font-size:1.0625rem;margin-top:var(--sp-5);}
  .steps{grid-template-columns:1fr;border-top:0;margin-block:var(--sp-8);}
  .steps__item{
    display:grid;grid-template-columns:2.25rem 1fr;column-gap:var(--sp-3);
    border-right:0;border-top:var(--hairline-dark);padding:var(--sp-4) 0;
  }
  .steps__n{font-family:var(--font-serif);font-size:1.375rem;grid-row:1;}
  .steps__l{grid-column:2;grid-row:1;margin:0;font-size:1.25rem;}
  .steps__t{grid-column:2;grid-row:2;font-size:0.9375rem;margin-top:var(--sp-1);}
  .recruit__cta .btn{width:100%;}
  .recruit__note{font-size:0.8125rem;}

  /* ---------- 8 · THE NINE HOUSES ----------
     Full-bleed to the screen edge with mandatory snap and a peek of
     the next tile. The gold bar is permanently visible because there
     is no hover on a phone to reveal it. */
  .houses__head{margin-bottom:var(--sp-8);}
  .filmstrip__track{
    scroll-snap-type:x mandatory;
    padding-inline:var(--margin);
    margin-inline:calc(var(--margin) * -1);
    scroll-padding-left:var(--margin);
  }
  .house__body{padding:var(--sp-5);}
  .house__nm{font-size:1.25rem;}
  .house__qt{font-size:0.8125rem;}
  .house__bar{width:2.5rem;}
  .filmstrip__controls{margin-top:var(--sp-5);gap:var(--sp-2);}
  .filmstrip__btn{width:3rem;height:3rem;}
  .filmstrip__hint{font-size:0.6875rem;margin-left:var(--sp-1);}

  /* ---------- 9 · SINCE 1875 ----------
     The overlapping pair is preserved at reduced scale — this is the
     section most easily ruined by stacking. The vertical caption goes
     horizontal, because rotated type at 375px is unreadable. */
  .heritage__grid{gap:var(--sp-12);}
  .heritage__figs{padding:0 0 3rem 2rem;}
  .heritage__fig-b{box-shadow:-0.75rem -0.75rem 0 0 var(--paper), 0 18px 36px -18px rgba(10,29,58,0.4);}
  .heritage__cap{
    position:static;writing-mode:horizontal-tb;transform:none;
    display:block;margin-bottom:var(--sp-3);
  }
  .heritage__copy .h2{margin-block:var(--sp-3) var(--sp-4);}
  .heritage__copy p{font-size:1.0625rem;}
  .stats{grid-template-columns:1fr 1fr;margin-block:var(--sp-8) var(--sp-6);}
  .stats__item{padding:var(--sp-5) var(--sp-4) var(--sp-5) 0;}
  .stats__n{font-size:2.25rem;}
  .stats__l{font-size:0.6875rem;margin-top:var(--sp-2);}

  /* ---------- 10 · SAFETY + DOCUMENTS ---------- */
  .safe-grid{grid-template-columns:minmax(0,1fr);gap:1px;}
  .safe-card{padding:var(--sp-8) var(--sp-5) var(--sp-6);}
  .safe-card h3{font-size:1.5rem;}
  .safe-card p{font-size:1rem;margin-bottom:var(--sp-5);}
  .docs{grid-template-columns:1fr;gap:var(--sp-8);}
  .doc-row{gap:var(--sp-3);flex-wrap:wrap;padding-block:var(--sp-4);}
  .doc-row__nm{font-size:1rem;flex:1 1 auto;}
  .doc-row__meta{margin-left:0;width:100%;padding-left:3.25rem;font-size:0.75rem;}

  /* ---------- 11 · SUPPORT ---------- */
  .support__ghost{width:20rem;right:-6rem;opacity:0.06;}
  .support__cols{grid-template-columns:1fr;gap:var(--sp-8);margin-block:var(--sp-12) var(--sp-8);}
  .support__col h3{font-size:1.375rem;}
  .support__col p{font-size:1rem;}
  .support__cta{gap:var(--sp-5);}
  .support__cta .btn{width:100%;}

  /* ---------- 12 · SOCIAL ----------
     A two-up grid, deliberately. After a run of full-width blocks the
     page needs a change of grain before the footer. */
  .social__grid{grid-template-columns:1fr 1fr;gap:var(--sp-3);}
  .soc-card__body{padding:var(--sp-3);}
  .soc-card__plat{font-size:0.625rem;}
  .soc-card__body p{font-size:0.8125rem;line-height:1.4;margin-top:var(--sp-2);}

  /* ---------- 13 · FOOTER ----------
     Two columns of links instead of four stacked lists — roughly half
     the scroll depth for the same content. */
  .site-footer{padding-top:var(--sp-16);}
  .footer__top{grid-template-columns:1fr 1fr;gap:var(--sp-8) var(--sp-6);padding-bottom:var(--sp-12);}
  .footer__brand{grid-column:1 / -1;}
  .footer__brand img{height:4rem;}
  .footer__name{font-size:1.1875rem;}
  .site-footer li{margin-bottom:var(--sp-2);}
  .site-footer li a{font-size:0.9375rem;}
  .footer__bottom{flex-direction:column;gap:var(--sp-4);font-size:0.78125rem;padding-bottom:var(--sp-8);}
  .footer__bottom nav{gap:var(--sp-5);}

  /* ---------- INTERIOR TEMPLATES ---------- */
  .page-hero{min-height:17rem;}
  .page-hero--tall{min-height:20rem;}
  .page-hero__inner{padding-block:var(--sp-12) var(--sp-8);}
  .page-hero h1{font-size:clamp(2rem, 8.5vw, 2.75rem);line-height:1.08;max-width:none;}
  .page-hero__sub{font-size:1rem;margin-top:var(--sp-3);}
  .crumbs{font-size:0.75rem;}

  .with-aside{grid-template-columns:1fr;gap:var(--sp-12);}
  .prose p,.prose ul,.prose ol{font-size:1.0625rem;line-height:1.65;}
  .prose h2{font-size:1.5rem;margin-top:var(--sp-8);}
  .prose h3{font-size:1.1875rem;margin-top:var(--sp-6);}
  .prose blockquote{font-size:1.25rem;padding-left:var(--sp-5);margin-block:var(--sp-8);}
  .prose figure{margin-block:var(--sp-8);}
  .aside__block{margin-bottom:var(--sp-8);}

  .inline-cta{flex-direction:column;align-items:flex-start;padding:var(--sp-6);gap:var(--sp-5);}
  .inline-cta h2{font-size:1.375rem;}
  .inline-cta .btn{width:100%;}
  .emergency-notice{padding:var(--sp-5);gap:var(--sp-3);}
  .emergency-notice p{font-size:0.9375rem;}

  /* ---------- ARTICLE ---------- */
  .article__figure{margin-block:var(--sp-8);}
  .article__figure img{aspect-ratio:4/3;}
  .article__meta{gap:var(--sp-2);font-size:0.78125rem;margin-top:var(--sp-5);}
 
  /* Related posts become a thumbnail list — they are a footnote to the
     article, not three more headline cards. */
  .related__grid{grid-template-columns:1fr;gap:0;}
  .related .ncard{border-bottom:var(--hairline);padding-block:var(--sp-5);}
  .related .ncard > a{display:grid;grid-template-columns:5rem 1fr;column-gap:var(--sp-4);align-items:start;}
  .related .ncard__fig{grid-column:1;grid-row:1 / 4;}
  .related .ncard img{aspect-ratio:1/1;}
  .related .ncard time{grid-column:2;margin-block:0 var(--sp-1);}
  .related .ncard h3{grid-column:2;font-size:1.0625rem;line-height:1.3;}
  .related .ncard p{display:none;}

  /* ---------- COMPANY ---------- */
  .company-hero__id{gap:var(--sp-3);margin-bottom:var(--sp-3);}
  .company-hero__logo{width:3rem;height:3rem;}
  .company-hero__num{font-size:0.6875rem;letter-spacing:0.1em;}
  .page-hero h1.company-name{font-size:clamp(1.75rem, 7.5vw, 2.5rem);line-height:1.1;max-width:none;}
  .company-facts{grid-template-columns:1fr 1fr;}
  .company-facts__item{padding:var(--sp-5) var(--sp-4) var(--sp-5) 0;border-bottom:var(--hairline);}
  .company-facts__item:nth-child(2n){border-right:0;padding-right:0;}
  .company-facts__item:nth-last-child(-n+2){border-bottom:0;}
  .company-facts__v{font-size:1.125rem;}
  .apparatus-grid{grid-template-columns:1fr 1fr;gap:var(--sp-4);}
  .apparatus-card__d{font-size:1.125rem;margin-top:var(--sp-3);}
  .apparatus-card__t{font-size:0.8125rem;}
  .officers{grid-template-columns:1fr 1fr;gap:var(--sp-6);}
  .officer__name{font-size:1.125rem;}
  .officer__since{font-size:0.78125rem;}
}

/* ---------- LARGER PHONES · 430–767 ----------
   A Pro Max has room the SE does not. Use it rather than shipping the
   smallest phone's compromises to every device. */
@media (min-width:430px) and (max-width:767px){
  .hero__cta .btn{flex:1 1 auto;}
  .rail__t{font-size:1.25rem;}
  .stack__item{grid-template-columns:5.5rem 1fr;}
  .stack__item img{width:5.5rem;height:5.5rem;}
  .stats__n{font-size:2.5rem;}
  .social__grid{gap:var(--sp-4);}
}

/* ---------- SMALL PHONES · <=389 ----------
   375px is the floor. Shed the least load-bearing text rather than
   letting the layout crowd. */
@media (max-width:389px){
  /* A 667px screen leaves ~447px of content area once the utility bar and
     masthead are accounted for. At the default mobile padding the hero
     overran the viewport, so it is tightened here rather than everywhere. */
  .hero{min-height:70vh;}
  .hero__inner{padding-block:var(--sp-12) var(--sp-16);}
  .hero__sub{margin-block:var(--sp-4) var(--sp-6);}
  .hero__cta{gap:var(--sp-2);}
  .rail__d{display:none;}
  .rail__item{padding:var(--sp-5) var(--sp-3);}
  .run-side__l{font-size:0.5625rem;letter-spacing:0.08em;}
  .company-facts__v{font-size:1.0625rem;}
  .filmstrip__hint{display:none;}
}

/* ---------- PRINT ---------- */
@media print{
  .utility,.masthead,.mobile-nav,.filmstrip__controls,.site-footer,.alert,.rail-holder{display:none!important;}
  body{background:#fff;color:#000;font-size:11pt;}
  .hero,.page-hero{min-height:auto;}
  .hero__scrim,.page-hero__scrim{display:none;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;}
}

/* ---------- HERO PHOTO CREDIT — Phase 3 addition ----------
   Attribution has to survive responsive cropping, so it is rendered
   rather than relying on a credit burned into the photograph.
   Positioned to clear the action rail, which overlaps the hero
   by 5.75rem on desktop and 3rem below 768px. */
.hero__credit{
  position:absolute;z-index:3;
  right:var(--margin);bottom:7rem;
  margin:0;
  font-size:var(--fs-label);letter-spacing:0.08em;
  color:rgba(255,255,255,0.72);
  text-shadow:0 1px 12px rgba(0,0,0,0.45);
  pointer-events:none;
}
@media (max-width:767px){
  .hero__credit{right:var(--gutter);bottom:4.25rem;font-size:0.6875rem;}
}
@media print{.hero__credit{display:none;}}
/* ---------- ACTION RAIL · non-standard counts — Phase 3 addition ----------
   Four is the approved layout and is untouched. These only apply when an
   editor drops to two or three, which the repeater permits. */
.rail--3{grid-template-columns:repeat(3,1fr);}
.rail--2{grid-template-columns:repeat(2,1fr);}
@media (max-width:1023px){
  .rail--3,.rail--2{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:767px){
  .rail--3,.rail--2{grid-template-columns:1fr;}
}
/* ---------- THE FRONT PAGE · posts without a featured image — Phase 3 addition
   The Concept 5 layout assumes a featured image and should. These two rules
   only fire when one is genuinely absent, so a text-only story reads as
   deliberate rather than broken. Appended after the media queries so they
   override the narrow-viewport column rules too. */
.stack__item--nofig{grid-template-columns:1fr;}
.lead--nofig .lead__body{padding-top:var(--sp-6);border-top:var(--rule-strong);}

/* ---------- 7 · RECRUITMENT — Phase 3 additions ---------- */

/* C1 · Column breathing room.
   The approved rule gives each column 24px on the right and 0 on the left, so
   columns 2 and 3 start hard against the divider they follow. This adds the
   matching left padding to every column except the first, which stays flush so
   the arc still aligns with the panel's left edge. Scoped above 767px because
   the mobile layout has no dividers and must stay flush. */
@media (min-width:768px){
  .steps__item + .steps__item{padding-left:var(--sp-6);}
}

/* ---------- RECRUITMENT PHOTO CREDIT — Phase 3 addition ---------- */
.recruit__credit{
  position:absolute;
  z-index:3;
  right:var(--margin);
  bottom:var(--sp-6);
  margin:0;
  font-size:var(--fs-label);
  letter-spacing:0.08em;
  color:rgba(255,255,255,0.72);
  text-shadow:0 1px 12px rgba(0,0,0,0.45);
  pointer-events:none;
}

@media (max-width:767px){
  .recruit__credit{
    right:var(--gutter);
    bottom:var(--sp-4);
    font-size:0.6875rem;
  }
}

@media print{
  .recruit__credit{
    display:none;
  }
}
/* ---------- 8 · COMPANIES · section heading — Phase 3 addition ---------- */
.houses__head h2{
  max-width:18ch;
  margin-top:var(--sp-4);
}

/* ---------- 9 · SINCE 1875 · eyebrow — Phase 3 addition ----------
   .heritage__copy p (line 704) outranks .eyebrow (line 78), so without this
   the eyebrow renders as 19px slate body text with a bottom margin. Restores
   only the four properties the descendant rule steals. */
.heritage__copy .eyebrow{
  font-size:var(--fs-label);
  color:var(--gold-700);
  max-width:none;
  margin-bottom:0;
}


/* ---------- 12 · SOCIAL · card counts — Phase 3 addition ----------
   Four is the approved grid and is untouched. One, two and three get a
   modifier so a short directory never leaves dead columns. Two and one are
   capped near the natural four-up card width rather than stretched — a
   1:1 photograph at half the content width would dominate the page.
   The mobile rules restore the deliberate two-up. */
.social__grid--3{grid-template-columns:repeat(3,1fr);}
.social__grid--2{grid-template-columns:repeat(2,minmax(0,20rem));justify-content:start;}
.social__grid--1{grid-template-columns:minmax(0,20rem);}
@media (max-width:767px){
  .social__grid--3,
  .social__grid--2{grid-template-columns:1fr 1fr;justify-content:stretch;}
  .social__grid--1{grid-template-columns:1fr;}
}

/* ---------- UTILITY BAR · social icons — Phase 3 addition ----------
   Deliberately small and monochrome. They inherit the utility bar's colour
   and its hover, so they read as quiet navigation rather than as social
   buttons — the 911 line in the same strip must stay the loudest thing there.
   Padding gives a 32px touch target without changing the visual spacing.
   Hiding below 1024px comes from .utility__hide, same as the phone number. */
.utility__social{display:flex;align-items:center;gap:var(--sp-1);}
.utility__social a{display:inline-flex;padding:var(--sp-2);line-height:0;}
.utility__social svg{width:1rem;height:1rem;display:block;}

/* ---------- COMPANIES · other units — Phase 3 addition ----------
   The Fire Police Squad and Junior Fire Department band, inside the Companies
   section beneath the filmstrip. Reuses the Fire Prevention cards with a
   two-column variant; the 128px gap above it comes from the filmstrip
   controls' existing bottom padding and reads as deliberate separation. */
.houses__units{padding-bottom:var(--section-y);}
.houses__units .eyebrow{margin-bottom:var(--sp-6);}
.houses__units h4{
  font-family:var(--font-serif);font-size:1.75rem;line-height:1.18;
  letter-spacing:-0.015em;color:var(--navy-900);margin-block:var(--sp-4) var(--sp-3);
}
@media (min-width:768px){
  .safe-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* Only applies if a patch is ever enabled. */
.safe-card__patch{height:6rem;width:auto;display:block;margin-bottom:var(--sp-5);}

/* ---------- SAFE CARD · kicker — Phase 3 addition ----------
   .safe-card p (line 718) outranks .safe-card__idx (line 716), so the index
   renders as slate body text instead of gold. Restores only the three
   properties the paragraph rule steals. */
.safe-card .safe-card__idx{
  font-size:var(--fs-small);
  color:var(--gold-700);
  margin-bottom:0;
}

/* ---------- EYEBROW · specificity repair — Phase 3 addition ----------
   .section-head p (line 459) and .houses__head p (line 632) are bare element
   selectors, so they outrank .eyebrow (line 78) and every eyebrow inside those
   two components renders as slate body text. This restores the three
   properties they steal. Margins are left alone — the existing rules handle
   them. The earlier .heritage__copy .eyebrow patch is the same repair. */
.section-head .eyebrow,
.houses__head .eyebrow{
  font-size:var(--fs-label);
  color:var(--gold-700);
  max-width:none;
}

/* ---------- EYEBROW · size — Phase 3 adjustment ----------
   0.75rem to 0.8800rem. The value repeats because the two component
   overrides above have to match it; .section-head p and .houses__head p
   would otherwise win again. */
.eyebrow,
.section-head .eyebrow,
.houses__head .eyebrow{
  font-size:0.8800rem;
}


/* ---------- COMPANY PAGE · refinement pass — Phase 3 ----------
   Facts, links, apparatus and officers now share one section. 64px between
   blocks; --section-y stays reserved for separating sections. */
.co-block + .co-block{margin-top:var(--sp-16);}

/* ---------- CHIEF'S OFFICE · leadership row — Phase 3 addition ----------
   Modifier-scoped throughout. The base .officers grid and every .officer rule
   belong to the company pages and are not touched: a four-column grid is right
   for a company with four officers and wrong for a department with three, and
   the company hairline is grey where this one is gold.

   Declared after the responsive blocks above on purpose. .officers is reset to
   two columns at 1023px and 767px by rules earlier in this file, and a
   modifier of equal specificity only wins from further down the cascade. */
.officers-label{margin-bottom:var(--sp-6);}
.officers--3{grid-template-columns:repeat(3,1fr);}
.officers--2{grid-template-columns:repeat(2,1fr);}

/* The rule falls between the portrait and the rank, so it is carried by the
   text block rather than by the cell — a border on the cell can only sit above
   everything in it, including the photograph. With no photograph the rule
   lands exactly where the company version puts it, in gold rather than grey. */
.officers--chiefs .officer{border-top:0;padding-top:0;}
.officers--chiefs .officer__text{border-top:var(--rule-gold);padding-top:var(--sp-4);}

/* Narrower than its column and centred over it, so the row reads as a
   leadership masthead rather than a photo gallery. The gold rule beneath stays
   full column width, which is what gives the row its horizontal rhythm. */
.officer__photo{
  display:block;width:100%;max-width:15.5rem;
  margin:0 auto var(--sp-5);
  aspect-ratio:4/5;object-fit:cover;background:var(--silver-200);
}

/* ---------- INTERIOR PAGES · stacked section rhythm — Phase 3 addition ----------
   page-sections.php wraps every run of editorial blocks in its own
   <section class="section">, and the Cards block brings one of its own. Two of
   them meeting therefore pay --section-y twice: 128px of padding below the
   first and 128px above the second, a quarter of a screen between a heading
   and the cards it introduces.

   Collapsing the second section's top padding leaves one section's rhythm —
   the same 128px the homepage puts between its bands — instead of two.

   Scoped to the template's own body class, which WordPress emits only when
   the template is actually selected. page.php, the homepage and every closed
   section are out of reach of this rule by construction. */
.page-template-page-sections .section + .section{padding-top:0;}

/* The CTA band is not a .section — it carries its own margin — so it needs
   telling separately, or it would sit 192px below the section above it while
   everything else sat at 128px. */
.page-template-page-sections .section + .wrap .inline-cta{margin-top:0;}

@media (max-width:1023px){
  /* Three still fit. The portrait gives up its cap and simply fills the
     narrower column rather than floating in the middle of it. */
  .officers--3{grid-template-columns:repeat(3,1fr);gap:var(--sp-6);}
  .officers--2{grid-template-columns:repeat(2,1fr);gap:var(--sp-6);}
  .officer__photo{max-width:100%;}
}

@media (max-width:767px){
  /* One per row, and the portrait aligns left with the text beneath it —
     centring a capped image over left-aligned type reads as an accident at
     this width. */
  .officers--3,
  .officers--2{grid-template-columns:1fr;gap:var(--sp-12);}
  .officer__photo{max-width:15.5rem;margin:0 0 var(--sp-4);}
}

/* The approved margin assumes the facts follow something inside a section.
   Leading the section, they don't. */
.wrap > .company-facts{margin-top:0;}

/* Count-aware, so the gold rule never runs past the last column.
   Same approach as .rail--2, .social__grid--2 and .safe-grid--2. */
.company-facts--3{grid-template-columns:repeat(3,fit-content(17rem));}
.company-facts--2{grid-template-columns:repeat(2,fit-content(17rem));}
.company-facts--1{grid-template-columns:fit-content(17rem);}
.company-facts--3,
.company-facts--2,
.company-facts--1{width:fit-content;max-width:100%;}
@media (max-width:1023px){
  .company-facts--3,
  .company-facts--2{grid-template-columns:repeat(2,fit-content(17rem));}
  .company-facts--1{grid-template-columns:fit-content(17rem);}
}
/* Links as the site's established arrow treatment rather than a bulleted list. */
.company-links{max-width:20rem;}
.company-links .eyebrow{margin-bottom:var(--sp-4);}
.company-links__list{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);}

@media (min-width:768px){
  .company-facts__item + .company-facts__item{padding-left:var(--sp-6);}
}

/* ---------- COMPANIES ARCHIVE · grid — Phase 3 addition ----------
   The same .house tiles as the homepage strip, laid out as a grid so the whole
   directory is visible without scrolling sideways. Column width and tile height
   both come from the approved tokens, so the tiles are identical to the strip's
   at every breakpoint. 2px gap matches .filmstrip__track. */
.houses-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(var(--tile-w),1fr));
  gap:2px;
  margin-top:var(--sp-12);
}

/* ---------- COMPANIES ARCHIVE · tile proportions — Phase 3 addition ----------
   The grid stretches columns to fill the page, so the fixed 34rem height would
   re-crop every photograph. Following the approved 280 x 544 ratio instead
   keeps the tiles identical in shape to the homepage strip, just larger. */
.houses-grid .house{height:auto;aspect-ratio:35 / 68;}

/* ---------- COMPANY HERO · crossfade — Phase 3 addition ----------
   Only applies when a company has additional hero photographs. The first
   image stays visible until the script is ready, so a failed or disabled
   script leaves the featured image showing rather than a blank hero.
   Nothing but the photograph moves — the logo, name, breadcrumbs and scrim
   sit above this in their own stacking context. */
.page-hero__media--rotate img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 40%;
}
.page-hero__media--rotate img:not(:first-child){opacity:0;}
.page-hero__media--rotate.is-ready img{
  opacity:0;
  transition:opacity 1.2s ease-in-out;
}
.page-hero__media--rotate.is-ready img.is-on{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .page-hero__media--rotate img{transition:none;}
}
/* ---------- SHARED HERO · compact state and credit — Phase 3 addition ----------
   Two states, both driven by whether the content has a Featured Image.

   With one, the hero keeps the established .page-hero proportions — the same
   26rem the company hero uses, so a photographic page hero and a company hero
   read as the same component.

   Without one, --compact removes the min-height floor and lets the inner
   padding size the navy field, so a text-only page no longer holds an empty
   26rem. The height comes from the existing spacing scale, not a new value.

   The scrim is suppressed on the compact state: over a photograph it earns its
   place keeping the breadcrumb and H1 legible, but over flat navy it is either
   a visible gradient across a solid field or an invisible compositing layer.
   Neither is worth painting.

   Emitted only by template-parts/page-hero.php. The company hero renders its
   own markup and never receives --compact, so nothing here can reach it. */

.page-hero--compact{min-height:0;}
.page-hero--compact .page-hero__scrim{display:none;}
.page-hero--compact .page-hero__inner{padding-block:var(--sp-12) var(--sp-8);}

/* The credit sits in the hero's own bottom padding, below the text block, so
   it cannot collide with the H1 or the supporting line at any width. Rendered
   only where there is a photograph to credit. */
.page-hero__credit{
  position:absolute;right:var(--sp-6);bottom:var(--sp-4);z-index:3;
  margin:0;
  font-size:0.6875rem;letter-spacing:0.06em;text-transform:uppercase;
  color:rgba(255,255,255,0.62);
}

@media (max-width:767px){
  .page-hero--compact .page-hero__inner{padding-block:var(--sp-8) var(--sp-6);}
  .page-hero__credit{right:var(--sp-4);bottom:var(--sp-3);font-size:0.625rem;}
}
/* ---------- JOIN · section rhythm and grounds — Stage 1 ----------
   The shared .section rhythm is 128px top and bottom, which puts 256px
   between any two sections. That is correct on the homepage, where the
   ground changes between sections and the space reads as a transition.
   This page has eight sections and one purpose — reaching the form — so
   it takes a tighter rhythm and lets the alternating grounds do the
   separating. Scoped to the Join sections; --section-y is untouched. */

.join-open,
.join-paths,
.join-who,
.join-process,
.join-commit,
.join-junior,
.join-inquiry,
.join-extra{padding-block:var(--sp-16);}

/* The opening follows the hero, which already carries its own bottom padding. */
.join-open{padding-top:var(--sp-12);}

/* Alternating grounds, following the homepage sequence. */
.join-paths,
.join-process,
.join-inquiry{background:var(--paper);}
.join-commit{background:var(--navy-900);}

/* Navy section — legibility only. The eyebrow needs nothing: .eyebrow--dark
   is already the established treatment on a dark ground. */
.join-commit__h{
  font-family:var(--font-serif);
  font-size:var(--fs-h2);
  line-height:1.08;
  letter-spacing:var(--ls-heading);
  color:var(--white);
  margin-top:var(--sp-4);
  text-wrap:balance;
}
.join-commit__p{color:rgba(255,255,255,0.86);}
.join-commit__p + .join-commit__p{margin-top:var(--sp-5);}
/* ---------- JOIN · process list markers — Stage 1 ----------
   The decorative 01–05 numerals are rendered in the markup, so the native
   ordered-list markers would double them. The <ol> stays — the sequence is
   the meaning and assistive technology should still hear it — but its
   markers are suppressed. Scoped to .join-steps; no other list is affected. */
.join-steps{list-style:none;}
/* ---------- MEMBERSHIP INQUIRY FORM — Stage 2 ----------
   Scoped entirely to .rvcfd-form, the wrapper page-join.php places around the
   shortcode. A form receives this treatment only by being wrapped on purpose,
   so no other Fluent Forms form on this site can ever be reached by it.

   Fluent Forms' own stylesheet loads ahead of this. Every rule here is more
   specific and later in the cascade. No !important anywhere — if something
   fails to apply, the answer is specificity, not force.

   Nothing here sets `display` on a field group. Conditional fields are hidden
   by the plugin's .ff_excluded class, and a display rule of ours would fight
   it and break the Junior branch.
   ------------------------------------------------------------------------ */

.rvcfd-form{max-width:44rem;}
.rvcfd-form .ff-el-group{margin-bottom:var(--sp-6);}

/* ---- Section headings ---- */
.rvcfd-form .ff-el-section-break{
  margin-top:var(--sp-12);
  padding-top:var(--sp-5);
  border-top:var(--rule-gold);
}
.rvcfd-form .ff-el-section-break:first-of-type{margin-top:0;}
.rvcfd-form .ff-el-section-title{
  font-family:var(--font-serif);
  font-size:var(--fs-h4);
  line-height:1.2;
  letter-spacing:-0.012em;
  color:var(--navy-900);
}
.rvcfd-form .ff-section_break_desk p{
  margin-top:var(--sp-2);
  font-size:var(--fs-small);
  line-height:1.5;
  color:var(--slate-700);
}
/* The plugin draws its own divider beneath each section title. The gold rule
   above already does that work. */
.rvcfd-form .ff-el-section-break hr{display:none;}

/* ---- Labels ---- */
.rvcfd-form .ff-el-input--label{display:block;margin-bottom:var(--sp-2);}
.rvcfd-form .ff-el-input--label label{
  font-size:var(--fs-small);
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
}
.rvcfd-form .ff-el-is-required label::after{color:var(--gold-700);}

/* ---- Help text ----
   The plugin hides a field's help message behind a hover icon. This prints the
   same string as a visible line under the label. Hover is not an interaction a
   phone has, and the Interest field's guidance is the most important sentence
   on this form. */
.rvcfd-form .ff-el-tooltip{display:block;margin-top:var(--sp-2);}
.rvcfd-form .ff-el-tooltip svg{display:none;}
.rvcfd-form .ff-el-tooltip::after{
  content:attr(data-content);
  display:block;
  font-size:var(--fs-small);
  font-weight:400;
  line-height:1.55;
  color:var(--slate-700);
  max-width:60ch;
}

/* ---- Text inputs and textareas ----
   The focus ring is the global :focus-visible treatment; only the border
   changes here, so the token contract keeps its single definition of focus. */
.rvcfd-form .ff-el-form-control{
  width:100%;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--ink);
  background:var(--paper);
  border:var(--hairline);
  border-radius:var(--radius);
  padding:var(--sp-3) var(--sp-4);
  min-height:3.25rem;
  transition:border-color var(--dur-hover) var(--ease-out);
}
.rvcfd-form textarea.ff-el-form-control{min-height:8rem;}
.rvcfd-form .ff-el-form-control::placeholder{color:var(--slate-400);}
.rvcfd-form .ff-el-form-control:hover{border-color:var(--slate-400);}
.rvcfd-form .ff-el-form-control:focus{border-color:var(--navy-500);}

/* ---- Name and address groups ----
   Flex with a sensible basis holds two-up on desktop and stacks on a phone
   with no breakpoint of its own. The last address row holds only the ZIP, so
   it is kept from stretching the full width. */
.rvcfd-form .ff-t-container{display:flex;flex-wrap:wrap;gap:0 var(--sp-4);}
.rvcfd-form .ff-t-cell{flex:1 1 14rem;min-width:0;}
.rvcfd-form .fluent-address .ff-t-container:last-child .ff-t-cell{flex:0 1 12rem;}

/* ---- Radios and checkboxes ----
   Native controls, tinted. Rebuilding them out of pseudo-elements is how form
   plugins lose keyboard and screen reader behaviour; the native control
   already has all of it. The rules turn a stack of options into a ruled list
   rather than a loose column. */
.rvcfd-form .ff-el-form-check{margin:0;}
.rvcfd-form .ff-el-form-check + .ff-el-form-check{border-top:var(--hairline);}
.rvcfd-form .ff-el-input--content > .ff-el-form-check:first-child{border-top:var(--hairline);}
.rvcfd-form .ff-el-input--content > .ff-el-form-check:last-child{border-bottom:var(--hairline);}
.rvcfd-form .ff-el-form-check-label{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-2);
  min-height:var(--touch-min);
  font-size:var(--fs-body);
  line-height:1.45;
  color:var(--ink);
  cursor:pointer;
  transition:background var(--dur-hover) var(--ease-out);
}
.rvcfd-form .ff-el-form-check-label:hover{background:var(--fog);}
.rvcfd-form .ff-el-form-check-input{
  accent-color:var(--navy-900);
  width:1.125rem;
  height:1.125rem;
  margin:0.25rem 0 0;
  flex-shrink:0;
}

/* ---- The privacy note ---- */
.rvcfd-form .ff-custom_html{margin-top:var(--sp-8);}
.rvcfd-form .rvcfd-form__note{
  font-size:var(--fs-small);
  line-height:1.6;
  color:var(--slate-400);
  max-width:60ch;
  padding-top:var(--sp-5);
  border-top:var(--hairline);
}

/* ---- Submit ----
   Navy, not red. The masthead is sticky and carries the red Support Us button,
   and the tokens permit one red element in a viewport. Matches .btn geometry
   so it reads as the same control family as every other button on the site. */
.rvcfd-form .ff_submit_btn_wrapper{margin-top:var(--sp-8);}
.rvcfd-form .ff-btn-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-sans);
  font-size:var(--fs-small);
  font-weight:600;
  letter-spacing:0.02em;
  background:var(--navy-900);
  color:var(--white);
  padding:var(--sp-4) var(--sp-8);
  min-height:3.25rem;
  border:1.5px solid transparent;
  border-radius:var(--radius);
  transition:background var(--dur-hover) var(--ease-out);
}
.rvcfd-form .ff-btn-submit:hover{background:var(--navy-800);}
.rvcfd-form .ff-btn-submit:active{transform:translateY(1px);}

@media (max-width:767px){
  .rvcfd-form{max-width:none;}
  .rvcfd-form .ff-el-group{margin-bottom:var(--sp-5);}
  .rvcfd-form .ff-el-section-break{margin-top:var(--sp-8);}
  .rvcfd-form .ff-t-cell,
  .rvcfd-form .fluent-address .ff-t-container:last-child .ff-t-cell{flex:1 1 100%;}
  .rvcfd-form .ff-btn-submit{width:100%;}
}
/* ---------- MEMBERSHIP INQUIRY FORM · error states — Stage 2b ----------
   The plugin marks a failed field with .ff-el-is-error on the group,
   aria-invalid on the control, and a role="alert" message in the content
   wrapper. All three are left in place; only their appearance changes.

   Colour never carries the meaning on its own — the message text states the
   problem, so the treatment stays legible to anyone who cannot distinguish
   the border colour.

   RED BUDGET: this is a deliberate fourth use of red beyond the three the
   tokens name. A validation failure is an alert, which is one of the three
   sanctioned categories; the departure is that several can appear at once.
   ---------------------------------------------------------------------- */

.rvcfd-form .ff-el-is-error .ff-el-form-control{border-color:var(--red-600);}
.rvcfd-form .ff-el-is-error .ff-el-form-control:focus{border-color:var(--red-700);}

/* Choice groups have no .ff-el-form-control to mark, so the ruled list
   carries the state instead. */
.rvcfd-form .ff-el-is-error .ff-el-form-check{border-color:rgba(179,39,45,0.35);}

.rvcfd-form .error.text-danger{
  margin-top:var(--sp-2);
  font-size:var(--fs-small);
  font-weight:600;
  line-height:1.45;
  color:var(--red-700);
}
/* ---------- CONTACT FORM · conditional aside ----------
   The recruitment notice that appears when a visitor selects Membership &
   Recruitment. It has to read as a pointer elsewhere rather than as part of
   the form, so it takes the gold rule and tinted ground already used for
   asides on this site. Scoped inside .rvcfd-form; no shared form rule changes. */
.rvcfd-form .rvcfd-form__aside{
  background:var(--fog);
  border-left:var(--rule-gold);
  padding:var(--sp-5) var(--sp-6);
}
.rvcfd-form .rvcfd-form__aside p{
  font-size:var(--fs-small);
  line-height:1.6;
  color:var(--slate-700);
  max-width:60ch;
}
.rvcfd-form .rvcfd-form__aside .arrow{margin-top:var(--sp-3);}
/* ---------- NEWS ARCHIVE GRID — News completion pass ----------
   .news-row is the homepage's third rank, tuned for exactly three cards: it
   hides its last child below 1024px and strips figures and excerpts below
   768px. Correct there, wrong on an archive, where the cards are the entire
   content and there can be any number of them.

   This is the archive's own grid, following the same approach .houses-grid
   took for the companies archive. Three across on desktop, two on tablet, one
   on mobile, with images and excerpts kept at every width. .news-row is not
   touched, so the closed homepage section cannot be affected. */
.news-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-8);
}
@media (max-width:1023px){
  .news-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:767px){
  .news-grid{grid-template-columns:1fr;}
}
/* ---------- ARTICLE · section rhythm and photo credit — News completion pass ----------
   The two inline styles this replaces were the only ones in the theme. The
   values are unchanged: the head section keeps its top padding and drops its
   bottom, and the body carries only a bottom.

   The credit follows the same per-image source as the heroes, but sits in the
   caption line rather than floating over the photograph — this figure is inline
   on a light ground with a caption already beneath it. It is set smaller than
   the caption so the two are distinguishable when both are present. */
.article__top{padding-bottom:0;}
.article__body{padding-bottom:var(--section-y);}

.article__caption{display:block;}
.article__credit{
  display:block;
  margin-top:var(--sp-2);
  font-size:var(--fs-label);
  letter-spacing:0.08em;
  color:var(--slate-400);
}
.article__credit:first-child{margin-top:0;}
/* ---------- ASIDE · supporting note — Fire Prevention & Safety pass ----------
   The approved reference sets this inline. The aside's links are already 1rem,
   so a body-scale paragraph beside them reads as a mistake. Given its own class
   rather than styling .aside__block p, because .aside__block also appears in
   the approved company and article asides and this must not reach them. */
.aside__note{
  font-size:1rem;
  color:var(--slate-700);
  margin-bottom:var(--sp-4);
}


/* ---------- SUPPORT US · navy cards — Phase 3 addition ----------
   Scoped to the Support page by ID. .safe-card is shared with Fire Prevention
   & Safety and with the homepage Fire Police / Junior band, both of which are
   closed, so a page-level handle is the only safe way to change it here.
   WordPress emits .page-id-82 on the body; nothing else can match it.

   The pairing is the one the tokens already define for navy surfaces — the
   same one the event details panel and the homepage Support band use. Nothing
   below introduces a colour, radius or shadow that is not already in
   tokens.css, and in particular no border-radius and no box-shadow: the token
   file is explicit that large radii make an institutional site look like a
   consumer app, and that depth comes from overlap rather than drop shadows.

   If the page ever changes ID — recreated rather than edited — these rules go
   quiet rather than misfire, and the cards return to the shared treatment. */

/* The 2px grid gaps become dividers on dark instead of silver seams, and the
   rule above the row turns gold so it reads against the cards below it. */
.page-id-82 .safe-grid{background:var(--navy-700);border-top:var(--rule-gold);}

.page-id-82 .safe-card{background:var(--navy-900);}
.page-id-82 .safe-card:hover{background:var(--navy-800);}

.page-id-82 .safe-card h3{color:var(--white);}
.page-id-82 .safe-card p{color:rgba(255,255,255,0.74);}

/* Carried for completeness — Support leaves the index empty, but gold-700 is
   a white-background colour and would be close to invisible here. */
.page-id-82 .safe-card .safe-card__idx{color:var(--gold-300);}

/* --navy-500 is the link colour for light surfaces. On navy it disappears, so
   the card links take the gold the tokens reserve for exactly this case. */
.page-id-82 .safe-card .arrow{color:var(--gold-300);}
.page-id-82 .safe-card .arrow:hover{border-color:var(--gold-300);}
.page-id-82 .safe-card .arrow:focus-visible{outline-color:var(--focus-ring-dark);}

/* =============================================================
   MEMBER LOGIN — /login/ and the footer link
   ============================================================= */

/* ---------- footer link ----------
   The quietest item in .footer__bottom. It inherits the footer's own link
   colour and hover, so it cannot drift from the legal links beside it.
   .footer__bottom is flex with space-between and flex-wrap already; this adds
   one more child to that row and changes none of its rules. */
.footer__member{
  font-size:inherit;
  transition:color var(--dur-hover) var(--ease-out);
}
.footer__member:hover{color:var(--white);}

/* ---------- the login card ----------
   Every value below is a token. There is no login aesthetic here: the inputs
   take the geometry already established by the membership inquiry form, the
   buttons are the site's .btn family, the rule is .rule-gold's 2px of
   gold-500, and the focus ring is the global :focus-visible treatment from
   the WCAG 2.2 block near the top of this file.

   wp_login_form() emits WordPress's markup and offers no class hooks, so the
   selectors below target core's own .login-username / .login-password /
   .login-remember / .login-submit wrappers. Everything is scoped inside
   .rvcfd-login, so no other form on this site can be reached by these rules. */
.rvcfd-login{max-width:34rem;margin-inline:auto;}

.rvcfd-login__card{
  background:var(--paper);
  border:var(--hairline);
  border-top:2px solid var(--gold-500);
  border-radius:var(--radius);
  padding:var(--sp-12);
}

.rvcfd-login__title{
  font-family:var(--font-serif);
  font-size:var(--fs-h3);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
  color:var(--navy-900);
  margin-top:var(--sp-4);
  text-wrap:balance;
}

.rvcfd-login__intro{
  margin-top:var(--sp-4);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--slate-700);
}
.rvcfd-login__intro strong{color:var(--ink);font-weight:600;}

/* ---- The error line.
   Colour never carries the meaning on its own: the sentence states the
   problem, and role="alert" announces it. This is the same position the
   membership form's error states take. */
.rvcfd-login__error{
  margin-top:var(--sp-6);
  padding:var(--sp-4) var(--sp-5);
  border-left:3px solid var(--red-600);
  background:var(--fog);
  border-radius:var(--radius);
  font-size:var(--fs-small);
  font-weight:600;
  line-height:1.5;
  color:var(--red-700);
}

/* ---- Fields. Geometry copied from .rvcfd-form .ff-el-form-control so the
   two forms on this site are visibly the same control family. */
.rvcfd-login form{margin-top:var(--sp-8);}

.rvcfd-login .login-username,
.rvcfd-login .login-password{margin-bottom:var(--sp-6);}

.rvcfd-login label{
  display:block;
  margin-bottom:var(--sp-2);
  font-size:var(--fs-small);
  font-weight:600;
  letter-spacing:0.01em;
  color:var(--ink);
}

.rvcfd-login input[type="text"],
.rvcfd-login input[type="password"]{
  width:100%;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--ink);
  background:var(--paper);
  border:var(--hairline);
  border-radius:var(--radius);
  padding:var(--sp-3) var(--sp-4);
  min-height:3.25rem;
  transition:border-color var(--dur-hover) var(--ease-out);
}
.rvcfd-login input[type="text"]:hover,
.rvcfd-login input[type="password"]:hover{border-color:var(--slate-400);}
.rvcfd-login input[type="text"]:focus,
.rvcfd-login input[type="password"]:focus{border-color:var(--navy-500);}

/* ---- Remember Me. Native checkbox, tinted — the same decision the
   membership form makes, and for the same reason: a rebuilt checkbox loses
   keyboard and screen reader behaviour the native one already has. */
.rvcfd-login .login-remember label{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  min-height:var(--touch-min);
  margin-bottom:0;
  font-weight:500;
  color:var(--slate-700);
  cursor:pointer;
}
.rvcfd-login .login-remember input[type="checkbox"]{
  accent-color:var(--navy-900);
  width:1.125rem;
  height:1.125rem;
  margin:0;
  flex-shrink:0;
}

/* ---- Submit. Matches .btn geometry exactly. */
.rvcfd-login .login-submit{margin-top:var(--sp-8);}
.rvcfd-login .login-submit input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  font-family:var(--font-sans);
  font-size:var(--fs-small);
  font-weight:600;
  letter-spacing:0.02em;
  background:var(--navy-900);
  color:var(--white);
  padding:var(--sp-4) var(--sp-8);
  min-height:3.25rem;
  border:1.5px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background var(--dur-hover) var(--ease-out);
}
.rvcfd-login .login-submit input[type="submit"]:hover{background:var(--navy-800);}
.rvcfd-login .login-submit input[type="submit"]:active{transform:translateY(1px);}

/* ---- Secondary links and the standing note. */
.rvcfd-login__lost{margin-top:var(--sp-6);font-size:var(--fs-small);}
.rvcfd-login__lost a{color:var(--navy-500);}
.rvcfd-login__lost a:hover{color:var(--navy-900);}

.rvcfd-login__note{
  margin-top:var(--sp-8);
  padding-top:var(--sp-6);
  border-top:var(--hairline);
  font-size:var(--fs-small);
  line-height:1.6;
  color:var(--slate-400);
}

/* ---- The logged-in state. */
.rvcfd-login__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-4);
  margin-top:var(--sp-8);
}

@media (max-width:767px){
  .rvcfd-login{max-width:none;}
  .rvcfd-login__card{padding:var(--sp-6);}
  .rvcfd-login__actions .btn{width:100%;}
}