/* ==========================================================================
   LIFT Collaborative — BOLD VARIANT
   World: "The Public Notice" — a civic announcement fly-posted on a wall.
   Saturated planes, condensed caps at poster scale, duotone figures, crop marks.
   Same six colours, same single typeface. Gold is released to act as a plane
   and as type on navy (client override of D41's large-field restriction);
   navy on gold measures 5.19:1 and gold on navy 5.19:1, so both are AA.
   ========================================================================== */

:root {
  --navy: #19486A;
  --navy-deep: #163F5D;
  --teal: #22685A;   /* rest plane: Paper reads 6.10:1 here, 4.47:1 on #2A7F6F */
  --teal-bright: #2A7F6F;  /* the brand teal, kept for rules and markers on light grounds */
  --sienna: #C4472E;
  --gold: #F2B33D;
  --paper: #FAF6EF;
  --slate: #4A5560;
  --mist: #B9C9D6;

  /* Hover shades: tonal steps of the same four planes, no new hues. */
  --teal-deep: #1C5749;
  --sienna-deep: #A63A25;
  --gold-deep: #DFA02F;    /* gold darkened: for Paper-on-gold contexts only */
  --gold-lift: #F5BC55;    /* gold lightened: the hover for planes carrying NAVY type */

  --rule-light: rgba(250, 246, 239, 0.28);
  --rule-dark: rgba(25, 72, 106, 0.24);
  --junction: rgba(25, 72, 106, 0.45);

  --sans: "Noto Sans", "Helvetica Neue", Arial, sans-serif;

  --xs: 8px;
  --sm: 16px;
  --md: 24px;
  --lg: 40px;
  --xl: 72px;
  --plate: clamp(80px, 10vw, 148px);

  --shell: 1240px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
h1, h2, h3, p, dt, dd { margin: 0; }
a { color: inherit; }
strong { font-weight: 700; }

/* The ring has to be visible on whichever plane it lands on: gold-on-gold is
   1:1 and gold-on-Paper is 1.73:1, both below the 3:1 non-text floor. */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.plate--paper :focus-visible,
.panel--gold:focus-visible { outline-color: var(--navy); }
/* Sienna is the third plane the default gold ring lands short on (2.63:1). */
.panel--sienna:focus-visible,
.plate--limits :focus-visible { outline-color: var(--paper); }
/* The notice band shares the navy-deep ground, so it keeps the gold ring
   (5.93:1). Forcing navy here produced navy-on-navy at 1.14:1. */

/* The bar no longer sticks, so anchors need only breathing room, not clearance. */
[id] { scroll-margin-top: var(--md); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute;
  left: -9999px; top: 0; z-index: 60;
  background: var(--gold);
  color: var(--navy);
  padding: 14px 20px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- poster type ----------
   One family. The width axis does the shouting: 62.5 at weight 900. */

.poster {
  font-family: var(--sans);
  /* Google serves the variable face with a font-stretch RANGE, so selection
     happens through font-stretch; font-variation-settings pins it for browsers
     that resolve the axis directly. Both, deliberately. */
  font-stretch: 62.5%;
  font-variation-settings: "wdth" 62.5, "wght" 900;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.005em;
  font-size: clamp(2rem, 4.6vw, 3.75rem);
  text-wrap: balance;
}

/* Lighter than the section posters: at 900 the hero read as shouting. Weight 700
   keeps the condensed poster character without the shove. */
.poster--hero {
  /* Prominent, but not the loudest thing on the page: the refusals plate sits
     above it. 900 weight at 120px read as shouting; 700 at 68px carries the
     opening without the shove. */
  font-size: min(clamp(2.6rem, 5.2vw, 4.25rem), 13vw);
  overflow-wrap: break-word;
  font-variation-settings: "wdth" 62.5, "wght" 700;
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: 0;
  text-wrap: balance;
}

/* The hard breaks are tuned for wide viewports. Below 900px they strand single
   words, so they collapse and the browser rebalances instead. */
.brk { display: none; }
@media (min-width: 900px) { .brk { display: inline; } }
.poster--hero em {
  font-style: normal;
  color: var(--gold);
}

.kicker {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sm);
}
.kicker--dark { color: var(--navy); }

/* ---------- plates + wrap ---------- */

.plate {
  position: relative;
  padding-block: var(--plate);
}

.wrap {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 64px);
}

@media (min-width: 1000px) {
  .wrap--split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    column-gap: clamp(40px, 5vw, 88px);
    align-items: start;
  }
}

/* Same navy as the bar, so the masthead and the hero read as one dark field. */
.plate--hero {
  background-color: var(--navy-deep);
  padding-top: clamp(56px, 7vw, 92px);
  /* Sized to the type that is actually here, now the hero has yielded scale. */
  padding-bottom: clamp(48px, 5vw, 80px);
}

/* The tile lives on a layer so it can fade out on its own without taking the
   type with it; it dies before the notice band begins. */
.plate--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../img/lattice-dense.svg");
  background-size: 170px auto;
  background-attachment: fixed;
  -webkit-mask-image: linear-gradient(to bottom, var(--navy-deep) 0, var(--navy-deep) 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, var(--navy-deep) 0, var(--navy-deep) 58%, transparent 100%);
}
.plate--hero > .wrap { position: relative; z-index: 1; }

.plate--paper { background: var(--paper); color: var(--navy); }
.plate--money { background: var(--navy); }
.plate--belief {
  background: var(--navy);
  padding-bottom: clamp(72px, 8vw, 112px);
}
.plate--limits { background: var(--sienna); }

/* The loudest type on the page belongs to what LIFT declines. */
.plate--limits .poster { font-size: clamp(2.25rem, 5.6vw, 4.75rem); }
.plate--evidence {
  background-color: var(--navy);
  background-image: url("../img/lattice-invert.svg");
  background-size: 460px auto;
}
.plate--hello { background: var(--navy-deep); }

/* ---------- hero ---------- */

.hero__sub {
  margin-top: clamp(36px, 4.4vw, 68px);
  max-width: 40rem;
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
  line-height: 1.55;
  color: var(--mist);
  text-wrap: pretty;
}
.hero__sub--tight { margin-top: var(--md); }

/* ---------- pilot notice band ---------- */

/* The one administrative fact a first-time visitor genuinely needs, in plain
   speech. Same ground as the bar and hero, so the top of the page is one navy
   field; a hairline above is what separates it, since the ground no longer does. */
.notice {
  background: var(--navy-deep);
  color: var(--paper);
  padding-block: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--rule-light);
}
.notice__inner p {
  margin: 0;
  max-width: 58rem;
  font-size: 1.125rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.notice strong { font-weight: 700; }
.notice a {
  color: var(--paper);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.notice a:hover { text-decoration-thickness: 3px; }

/* ---------- belief ---------- */

.belief {
  max-width: 44rem;
  font-size: clamp(1.375rem, 2.6vw, 2.125rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--paper);
  text-wrap: pretty;
}

/* ---------- prose ---------- */

.prose { max-width: 36rem; }
.prose p + p { margin-top: var(--md); }
.prose p { color: var(--slate); text-wrap: pretty; }
.prose--invert p { color: var(--mist); }

@media (max-width: 999px) { .prose { margin-top: var(--lg); } }


/* A gold rule above, not a thick bar down the side: this world marks emphasis
   with a top rule everywhere else, and a heavy coloured left border on a
   callout is the pattern the craft floor rules out. */
.firewall {
  border-top: 6px solid var(--gold);
  padding-top: var(--md);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--paper) !important;
}


/* ---------- the three partner planes ---------- */

.partners { display: grid; grid-template-columns: minmax(0, 1fr); }

/* 19px/600 body needs more than a third of 900px to breathe. */
@media (min-width: 1040px) {
  .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panel__body { max-width: 24rem; }
}

.panel {
  --pad-y: clamp(28px, 3vw, 44px);
  --pad-x: clamp(24px, 2.6vw, 40px);
  position: relative;
  overflow: hidden;
  min-height: clamp(620px, 76vh, 820px);
  padding: var(--pad-y) var(--pad-x) 0;
  text-decoration: none;
  display: block;
  transition: background-color 260ms var(--ease);
}

/* Full-width panels get a wide measure; only the three-across layout needs the
   narrow one. Previously 24rem applied at 900–1039, where each panel is a
   full-width plane, leaving a ribbon of text on a wide field. */
.panel__body { position: relative; z-index: 2; display: block; max-width: min(34rem, 100%); }
.panel__title { text-wrap: balance; }

.panel__title { display: block; font-size: clamp(1.75rem, 2.7vw, 2.5rem); }

.panel__sub {
  display: block;
  margin-top: var(--sm);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
}

.panel__line {
  display: block;
  margin-top: var(--sm);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.45;
}

.panel__more {
  display: inline-block;
  margin-top: var(--md);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 2px solid currentColor;
  padding-bottom: 4px;
}
.panel__more::after { content: " →"; }

/* Photo-led panels: the portrait is the panel, the title always reads, and the
   supporting copy arrives on hover, keyboard focus, or a first tap on touch.
   The copy stays in the DOM at opacity 0 so screen readers still reach it. */
.panel__photo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: clamp(96px, 12vh, 150px);
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  transition: opacity 300ms var(--ease);
}
/* The cutouts are pre-framed so every face is the same size at the same height,
   with the body running off the bottom edge. Anchor to the bottom at natural
   height and let any excess headroom clip — never crop up from the feet, which
   would undo that framing. */
.panel__photo img {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: auto;
  display: block;
}
/* Placeholder state, until the real cutouts land. */
.panel__photo[data-slot]:not(:has(img)) {
  border: 2px dashed currentColor;
  border-bottom: 0;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--md);
  opacity: 0.75;
}
/* Open state: the portrait drops back to a ghost. Dimming alone is not enough —
   navy on gold falls to 3.21:1 where the copy crosses dark hair, and paper on
   sienna starts at only 4.55:1, so any darkening at all breaks it. The scrim
   below does the actual clearing. */
.panel:hover .panel__photo,
.panel:focus-within .panel__photo,
.panel.is-open .panel__photo { opacity: 0.22; }

/* The copy carries its own ground, sized by the copy rather than by a fixed
   share of the panel. A percentage mask held at default sizes but broke at 200%
   text zoom, where the copy grew back over the faces. This bleeds to the panel
   edges and fades out below the last line, so it reads as the colour field
   ending rather than as a box. */
.panel__body::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--pad-y));
  left: calc(-1 * var(--pad-x));
  right: calc(-1 * var(--pad-x));
  bottom: -72px;
  background: linear-gradient(to bottom, var(--plane) calc(100% - 72px), transparent);
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease);
}
.panel:hover .panel__body::before,
.panel:focus-within .panel__body::before,
.panel.is-open .panel__body::before { opacity: 1; }

.panel__reveal {
  display: block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.panel:hover .panel__reveal,
.panel:focus-within .panel__reveal,
.panel.is-open .panel__reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .panel__reveal { transform: none; }
}


/* Registration mark in the outer corner, clear of the picture box. */
.panel__crop {
  position: absolute;
  right: 16px; top: 16px;
  width: 26px; height: 26px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  opacity: 0.85;
  z-index: 3;
}

/* --plane names each panel's current ground so the copy scrim can match it
   exactly, hover state included. */
.panel { background: var(--plane); }
.panel--teal { --plane: var(--teal); color: var(--paper); }
.panel--teal:hover { --plane: var(--teal-deep); }
.panel--sienna { --plane: var(--sienna); color: var(--paper); }
.panel--sienna:hover { --plane: var(--sienna-deep); }
.panel--gold { --plane: var(--gold); color: var(--navy); }
.panel--gold:hover { --plane: var(--gold-lift); }

.panel:focus-visible { outline-offset: -8px; }

/* ---------- how it works: continuity + gates ---------- */

/* One unbroken band of three colours states the continuity; the stage blocks sit
   under their own segment, and a thin connector drops from each junction to the
   gate that lives there. */
.spine {
  display: flex;
  margin-top: clamp(40px, 5vw, 64px);
  height: 10px;
  transform-origin: left center;
}
.spine__seg { flex: 1; }
.spine__seg--connect { background: var(--teal); }
.spine__seg--innovate { background: var(--gold); }
.spine__seg--grow { background: var(--sienna); }

.js .spine { transform: scaleX(0); transition: transform 900ms var(--ease); }
.js .spine.is-in { transform: scaleX(1); }

.stages {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--lg);
}

.stage__name { display: block; font-size: clamp(1.5rem, 3vw, 2.25rem); color: var(--navy); }
.stage__steps {
  display: block;
  margin-top: var(--xs);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}
.stage p:last-child { margin-top: var(--sm); color: var(--slate); font-size: 1rem; }

/* A gate is where the work can stop, so it is built as a stop: a navy block
   interrupting the Paper plate, in the same plane vocabulary the rest of the
   page uses. Previously these were the palest type on the plate, under a heading
   promising that any of them can halt the project. */
.gate-note {
  position: relative;
  background: var(--navy);
  color: var(--paper);
  padding: var(--md) clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px);
  border-top: 4px solid var(--gold);
}
.gate-note__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--xs);
}
.gate-note p:last-child { color: var(--paper); font-size: 1.0625rem; line-height: 1.5; }

@media (min-width: 1100px) {
  .stages {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 0;
    row-gap: clamp(44px, 5vw, 68px);
  }

  /* Stages hold thirds; gate notes straddle the junctions between them. The
     junction itself is drawn as a line running the full height of the blocks, so
     the eye follows it from the continuous band down into the gate that sits
     there. */
  .stage {
    grid-row: 1;
    padding-top: var(--md);
    padding-right: clamp(24px, 2.6vw, 44px);
  }
  .stage--one { grid-column: 1 / 3; }
  .stage--two { grid-column: 3 / 5; }
  .stage--three { grid-column: 5 / 7; padding-right: 0; }

  .stage--two,
  .stage--three {
    border-left: 1px solid var(--junction);
    padding-left: clamp(20px, 2.2vw, 40px);
  }

  /* A gap between them, or the two blocks merge into one and the page appears
     to have a single gate rather than two. */
  .gate-note { grid-row: 2; }
  .gate-note--one { grid-column: 2 / 4; margin-right: 10px; }
  .gate-note--two { grid-column: 4 / 6; margin-left: 10px; }


  /* The connector: down from the junction into the gate that sits there. */
  .gate-note::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(-1 * clamp(44px, 5vw, 68px));
    width: 2px;
    height: clamp(44px, 5vw, 68px);
    background: var(--gold);
  }
}

.aside { margin-top: clamp(44px, 5vw, 60px); color: var(--slate); max-width: 40rem; }

.strong-link {
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 3px solid var(--gold);
  padding-bottom: 2px;
}
.strong-link:hover { border-bottom-color: var(--navy); }

/* ---------- limits ---------- */

.limits { margin-top: clamp(36px, 4vw, 56px); max-width: 52rem; border-top: 2px solid var(--paper); }
.limits li {
  padding: var(--md) 0;
  border-bottom: 1px solid var(--rule-light);
  font-size: clamp(1.1875rem, 1.7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.35;
}
.limits__note {
  margin-top: var(--md);
  max-width: 34rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--paper);
}

/* ---------- evidence ---------- */

.strata { margin-top: clamp(40px, 5vw, 64px); max-width: 44rem; }

.stratum { padding: var(--lg) 0; border-top: 1px solid var(--rule-light); }
.stratum--filled { border-top: 4px solid var(--paper); }

.stratum__state {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sm);
}

.stratum__title {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--paper);
}

.stratum__note { margin-top: var(--xs); color: var(--mist); font-size: 1rem; }

/* The only four-sided outline in the system is an empty one. */
.void {
  display: flex;
  align-items: center;
  min-height: 168px;
  padding: var(--md) var(--lg);
  border: 2px dashed rgba(250, 246, 239, 0.4);
}
.void .stratum__title { color: var(--mist); }
.void--closed { border-style: solid; border-color: rgba(250, 246, 239, 0.2); }
.void--closed .stratum__title { color: rgba(185, 201, 214, 0.7); }
.void + .stratum__note { margin-top: var(--sm); }


.slot-note {
  margin-top: var(--md);
  border-top: 1px dashed rgba(250, 246, 239, 0.4);
  padding-top: var(--sm);
  font-size: 0.9375rem;
  color: var(--mist);
  max-width: 34rem;
}

/* ---------- close ---------- */


.close__mark { width: clamp(72px, 8vw, 96px); height: auto; margin-bottom: var(--md); }

.cta-row { margin-top: var(--lg); }

.btn {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 20px 40px;
  border: 2px solid transparent;
  background: var(--gold);
  color: var(--navy);
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.btn:not(:disabled):hover { background: var(--paper); }

/* A real disabled button: the platform conveys the state, it stays in the
   accessibility tree, and it cannot hover into looking live. */
.btn--pending {
  /* font-family only: the `font` shorthand also resets size and weight, which
     silently overrode .btn's 13px/700 with the inherited 18px/400. */
  font-family: inherit;
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
  border-style: dashed;
  cursor: default;
}
.btn:disabled { cursor: default; opacity: 0.6; }

/* ---------- hello form ---------- */

.hello-form { max-width: 34rem; text-align: left; }
.hello-form__field { margin-top: var(--md); }
.hello-form__field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 8px;
}
.hello-form__field input,
.hello-form__field textarea {
  width: 100%;
  display: block;
  font: inherit;
  font-size: 1.0625rem;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--rule-light);
  border-radius: 0;
  color: var(--paper);
}
.hello-form__field textarea { resize: vertical; min-height: 8rem; }
.hello-form__field input::placeholder,
.hello-form__field textarea::placeholder { color: var(--mist); opacity: 0.6; }
.hello-form__field input:disabled,
.hello-form__field textarea:disabled { opacity: 0.5; }

/* A honeypot, not display:none — some bots specifically skip hidden fields,
   so it stays in the render tree but off-screen, and out of the tab order and
   accessibility tree for real visitors. */
.hello-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hello-form__status {
  margin-top: var(--sm);
  font-size: 0.9375rem;
  font-weight: 600;
}
.hello-form__status[data-state="error"] { color: var(--gold); }
.hello-form__status[data-state="success"] { color: var(--paper); }

/* ---------- bar ---------- */

/* The bar shares the hero's ground and its tile. Both sample the pattern from the
   viewport (background-attachment: fixed) so it reads as one continuous field
   across the seam, and stays aligned once the bar is stuck. iOS ignores fixed and
   falls back to a phase break, which is a tolerable degradation. */
/* Not sticky: the bar belongs to the hero plane and scrolls away with it. It
   shares the hero's ground and tile, so the two read as one field. */
.bar {
  position: relative;
  z-index: 40;
  background-color: var(--navy-deep);
  background-image: url("../img/lattice-dense.svg");
  background-size: 170px auto;
  background-attachment: fixed;
  border-bottom: 0;
}

/* Wrapping is unconditional. The collapse breakpoint below is a nicety; this is
   the guarantee. Without it, six nowrap links at 200% text zoom pushed the whole
   document 473px wide at a 900px viewport. */
.bar__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 12px clamp(20px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md);
}

.bar__brand { display: block; flex: none; }
.bar__brand img { width: 158px; height: auto; }

.bar__nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px) clamp(14px, 1.6vw, 26px);
}

.bar__nav a {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 160ms var(--ease), color 160ms var(--ease);
}
.bar__nav a:hover { border-bottom-color: var(--gold); }
.bar__nav a[aria-current="page"] { border-bottom-color: var(--gold); }

.bar__cta {
  background: var(--gold);
  color: var(--navy) !important;
  padding: 12px 20px !important;
  border-bottom: 0 !important;
}
.bar__cta:hover { background: var(--paper); }

.bar__toggle {
  display: none;
  margin-left: auto;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--gold);
  border: 0;
  border-radius: 0;
  padding: 12px 18px;
  cursor: pointer;
}

/* ---------- footer ---------- */

.foot { background: var(--navy-deep); border-top: 1px solid var(--rule-light); padding-block: var(--xl); }
.foot__inner { display: flex; flex-wrap: wrap; gap: var(--lg); align-items: flex-start; }
.foot__mark { width: 44px; height: auto; flex: none; }
.foot__meta { font-size: 0.9375rem; line-height: 1.6; color: var(--mist); }
.foot__meta strong { color: var(--paper); }
.foot__meta p + p { margin-top: 6px; }
.foot__nav { margin-left: auto; display: grid; }
/* Every other interactive element on this page clears a 44px touch target —
   the header nav's rows, the pending button, the panels. This one didn't:
   text-height plus its hover rule was ~23px. Padding-block does the sizing;
   most of it sits above the text so the hover rule stays close beneath it. */
.foot__nav a {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mist);
  justify-self: start;
  border-bottom: 2px solid transparent;
  padding: 17px 0 4px;
}
.foot__nav a:hover { color: var(--paper); border-bottom-color: var(--gold); }

/* ---------- narrow ---------- */

/* em, not px: media-query ems track the browser's default font size, so raising
   it collapses the nav instead of leaving a desktop nav that no longer fits. */
@media (max-width: 63.99em) {
  .js .bar__toggle { display: block; }
  .bar__inner { flex-wrap: wrap; }

  .bar__nav { flex-wrap: wrap; width: 100%; margin-left: 0; row-gap: 0; }

  .js .bar__nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: var(--sm);
    border-top: 1px solid var(--rule-light);
  }
  .js .bar__nav[data-open] { display: flex; }
  .js .bar__nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--rule-light); }
  .js .bar__cta { width: auto !important; margin-top: var(--sm); }

  .panel { min-height: clamp(480px, 78vh, 620px); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
  .js .spine { transform: none; }
}