/* ==========================================================================
   Typefaces — self-hosted, so the site makes no third-party requests at all
   and renders identically wherever it is served from. Both are variable
   fonts: one file covers the whole weight range.
   ========================================================================== */

@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   B&K Capital — bkcap.in

   Everything is driven by the token block below. To change the look of the
   whole site, edit the tokens — not the rules underneath them.
   Alternate palettes are supplied at the bottom of this file; to switch,
   move the block you want up into :root.

   Newsreader for headings and decks, Archivo for body, labels and figures.
   Both self-hosted from fonts/. No CDN, no external requests of any kind.
   ========================================================================== */

:root {
  /* --- brand ---------------------------------------------------------- */
  --brand:        #0d6aad;   /* sampled from the logo */

  /* --- surfaces ------------------------------------------------------- */
  --paper:        #f8fafb;
  --wash:         #eef2f5;
  --panel:        #eef2f5;
  --panel-cap: #12191f;
  --line:         #dfe5ea;

  /* --- text ----------------------------------------------------------- */
  --ink:          #1a1a1a;
  --heading: #12191f;
  --muted:        #5c6575;

  /* --- accent (eyebrows, hairlines, small marks) ---------------------- */
  --accent: #0d6aad;
  --accent-soft: #4d9bd0;
  --accent-deep: #0a5387;
  --highlight: #eef6fb;

  /* --- hero ----------------------------------------------------------- */
  --hero-bg: linear-gradient(135deg, #10171c 0%, #1d2a33 100%);
  --hero-fg: #c2ccd3;
  --hero-h: #ffffff;
  --hero-rule: #0d6aad;

  /* --- inverted sections ---------------------------------------------- */
  --inv-bg: #12191f;
  --inv-fg: #c2ccd3;
  --inv-h: #ffffff;
  --inv-card-bg: rgba(255, 255, 255, .05);
  --inv-card-cap: #0d6aad;
  --inv-btn-bd: #4d9bd0;
  --inv-btn-fg: #ffffff;
  --inv-btn-hbg: #ffffff;
  --inv-btn-hfg: #12191f;

  /* --- footer --------------------------------------------------------- */
  --footer-bg: #12191f;
  --footer-rule: #0d6aad;
  --footer-fg: #8c979f;
  --footer-link: #dbe2e7;

  /* --- buttons on light grounds --------------------------------------- */
  --btn-bd: #12191f;
  --btn-fg: #12191f;
  --btn-hbg: #12191f;
  --btn-hfg: #ffffff;
  --cta-bg: #0d6aad;
  --cta-fg: #ffffff;
  --cta-hbg: #0a5387;
  --cta-hfg: #ffffff;

  /* --- type & measure --------------------------------------------------
     Newsreader carries every heading, deck and pull quote — an editorial
     serif with real stroke contrast, which is what answers the thin
     geometric strokes of the logo. Archivo handles body text, navigation,
     labels and figures; a grotesque body ties back to the mark and keeps
     the site visibly distinct from the Georgia-set research reports.
     Both fall back to the old stack if the webfonts fail to load.        */
  --serif: "Newsreader", Georgia, "Times New Roman", Times, serif;
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Utility face for the spec strip only. System mono, so nothing extra to
     download: SF Mono on Apple, Cascadia or Consolas on Windows, Roboto Mono
     on Android. Its job is to make those five values read as specification
     rather than as prose. */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --measure: 36rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --shell: 70rem;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration-color: var(--accent-soft); text-underline-offset: 3px; }
a:hover { color: var(--heading); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  color: var(--heading);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h3 { font-weight: 600; letter-spacing: -0.006em; line-height: 1.28; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

strong { color: var(--heading); }

/* --------------------------------------------------------- layout shell -- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: clamp(3.25rem, 7.5vw, 6rem); }
section.tight { padding-block: clamp(2.25rem, 5vw, 3.5rem); }

.measure { max-width: var(--measure); }

/* -------------------------------------------------------------- eyebrow -- */

/* A short brand rule sits above every eyebrow — the one repeating structural
   device on the site, replacing the heavy full-width underscores. */
.eyebrow {
  position: relative;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 1.15rem;
  padding-top: 1.4rem;
}
.eyebrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 2px;
  background: var(--brand);
}

/* ----------------------------------------------------------------- type -- */

.h2 {
  font-size: clamp(1.625rem, 3.2vw, 2.375rem);
  margin-bottom: 0.5rem;
  max-width: 22ch;
}

.deck {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0.8rem 0 2rem;
  max-width: 40ch;
}

/* Section headers. Most stack; the --split variant sets the deck beside the
   heading instead of under it, so the page does not read as five identical
   blocks. Used on alternating sections. */
.sec-head {
  display: grid;
  gap: 0 3.5rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
/* Inside a section header the container owns the space below, so the deck
   does not also contribute one and double it up. */
.sec-head .deck { margin-bottom: 0; }
@media (min-width: 58rem) {
  .sec-head--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    /* Align the heading and the deck on their last BASELINES, not on the
       bottoms of their boxes. Box alignment includes each element's descender
       space, which left the italic sitting a couple of pixels low and reading
       as misaligned. `end` is the fallback for anything without baseline
       support in grid. */
    align-items: baseline;
  }
  .sec-head--split .eyebrow,
  .sec-head--split .h2 { grid-column: 1; }
  /* Nothing sits below the heading in this column, and its bottom margin
     was offsetting the baseline alignment by exactly its own 8px. */
  .sec-head--split .h2 { margin-bottom: 0; }
  .sec-head--split .deck { grid-column: 2; grid-row: 2; margin: 0; }
}

.h3 {
  font-size: 1.1875rem;
  border-left: 3px solid var(--accent);
  padding-left: 0.7rem;
  margin-bottom: 0.65rem;
}

.lead {
  font-family: var(--serif);
  font-size: clamp(1.1875rem, 2vw, 1.4375rem);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- bands -- */

.on-navy { background: var(--inv-bg); color: var(--inv-fg); }
.on-navy h1, .on-navy h2, .on-navy h3 { color: var(--inv-h); }
.on-navy .h2 { border-bottom-color: var(--inv-card-cap); }
.on-navy .eyebrow { color: var(--accent-soft); }
.on-navy .deck { color: var(--inv-fg); opacity: .85; }
.on-navy a { color: var(--inv-h); }

.on-wash { background: var(--wash); }

/* -------------------------------------------------------------- masthead -- */

.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
  position: relative;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}
.wordmark img { height: 25px; width: auto; }
.wordmark span {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 0.7rem;
  border-left: 1px solid var(--line);
  line-height: 1;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.8vw, 2rem); }

.nav a {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--heading); border-bottom-color: var(--brand); }
.nav a[aria-current="page"] { color: var(--heading); border-bottom-color: var(--brand); }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--heading);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
}

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

.hero {
  background: var(--hero-bg);
  border-bottom: 4px solid var(--hero-rule);
  color: var(--hero-fg);
  padding-block: clamp(3.5rem, 10vw, 7rem);
  /* Stops the hero collapsing into a thin band on wide screens, which is
     what was clipping the embossed mark in the photograph. */
  min-height: min(34rem, 76vh);
  display: flex;
  align-items: center;
}

/* Photographic hero. The scrim is heaviest behind the type and lifts towards
   the right, so the room reads as depth rather than as a picture competing
   with the headline. Falls back to the flat ink ground if the image fails. */
.hero--photo {
  background-color: #12191f;
  background-image:
    linear-gradient(96deg,
      rgba(18, 25, 31, .95) 0%,
      rgba(18, 25, 31, .90) 30%,
      rgba(18, 25, 31, .74) 62%,
      rgba(18, 25, 31, .62) 100%),
    url("images/office-hero.jpg");
  background-size: cover;
  background-position: center 92%;
  background-repeat: no-repeat;
}
/* Phones get their own portrait crop. Cover-fitting the 2:1 desktop file into a
   tall narrow box scales it up enormously and leaves only a dark sliver of the
   room visible, which is why it read as murky on a handset. This crop is framed
   for the shape and lifted in exposure, so the scrim over it can be lighter. */
@media (max-width: 46rem) {
  /* Phones: the photograph sits above the text rather than behind it, so the
     embossed B&K is shown whole and nothing is printed across it. */
  .hero--photo {
    background: var(--hero-bg);
    flex-direction: column;
    align-items: stretch;
    padding-top: 0;
    min-height: 0;
  }
  .hero--photo::before {
    content: "";
    display: block;
    aspect-ratio: 16 / 10;
    background: url("images/office-hero-mobile.jpg") center / cover no-repeat;
    margin-bottom: clamp(2rem, 8vw, 2.75rem);
  }
}

/* Full-width photographic band. */
.band-photo { margin: 0; }
.band-photo img { width: 100%; object-fit: cover; aspect-ratio: 20 / 9; }

.hero > .shell { width: 100%; }

.hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  max-width: 19ch;
  color: var(--hero-h);
  font-weight: 600;
}

/* The default eyebrow colour is a deep blue meant for light grounds; on a dark
   photographic hero it fell to a 1.4:1 contrast ratio. Use the light tint. */
.hero .eyebrow { color: var(--accent-soft); }

.hero .lead { margin-top: 1.5rem; max-width: 40rem; color: var(--hero-fg); font-style: italic; }
.hero__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* ------------------------------------------------------------ spec strip -- */

/* Five plain facts along the foot of the hero, set as a specification rather
   than a sentence. Answers "are these people relevant to me" before the
   reader has scrolled a pixel. */
.spec {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5rem 1.75rem;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 1.6rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.spec__k {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--hero-fg);
  opacity: .72;
  margin-bottom: 0.55rem;
}
.spec__v {
  display: block;
  font-family: var(--mono);
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--hero-h);
  white-space: nowrap;
}

@media (max-width: 62rem) { .spec { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }

/* Quiet standing facts along the foot of the hero — gives the composition a
   base line and answers "what is this firm" before the reader scrolls. */
.hero__facts {
  list-style: none;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.5rem;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--hero-fg);
}
.hero__facts li { display: flex; align-items: center; gap: 0.7rem; }
.hero__facts li::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--brand);
  flex: none;
}

/* ----------------------------------------------------------------- cards -- */

.grid { display: grid; gap: clamp(1.5rem, 3.2vw, 2.5rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

/* Hairline columns rather than filled panels — three grey boxes is the most
   templated shape on the web, and the content here is prose, not data. */
.card {
  position: relative;
  border-top: 1px solid var(--line);
  padding-top: 1.35rem;
}
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.25rem;
  height: 2px;
  background: var(--brand);
}
.card h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.card p { font-size: 0.9375rem; color: var(--muted); }

.on-navy .card { border-top-color: rgba(255, 255, 255, .18); }
.on-navy .card p { color: var(--inv-fg); }

/* ------------------------------------------------------------ statement -- */

/* A single line set large enough to be read as a claim rather than as body
   copy. Used sparingly — one per page at most. */
.statement {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--heading);
  max-width: 24ch;
  border-left: 3px solid var(--brand);
  padding-left: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
  text-wrap: balance;
}

/* --------------------------------------------------------- paired lists -- */

.pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}
.pair h3 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 1rem;
}
.tick { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tick li { padding: 0.85rem 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.tick li b { display: block; font-family: var(--serif); font-size: 1.0625rem; font-weight: 500; color: var(--heading); }
.tick li span { color: var(--muted); }

.callout {
  background: var(--highlight);
  border-left: 4px solid var(--accent);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.callout .label {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--heading);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------- track record -- */

.record { border-top: 1px solid var(--heading); }

.record__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 4vw, 3rem);
  padding-block: 1.9rem;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.record__label {
  font-family: var(--serif);
  font-size: 1.3125rem;
  color: var(--heading);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.record__meta {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.4rem;
}

.figures { display: flex; flex-wrap: wrap; gap: 1.25rem 2.25rem; }

.figure__value {
  font-family: var(--sans);
  font-size: 1.4375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--heading);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.figure__value em { font-style: normal; color: var(--accent-deep); }

/* The multiple is the point of the whole section — let it carry the brand colour. */
.figure--ratio .figure__value { color: var(--brand); font-size: 1.875rem; }
.figure--ratio .figure__key { color: var(--accent-deep); }
.figure__key {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.3rem;
}

/* ------------------------------------------------------------------ team -- */

.roster { display: grid; gap: clamp(2rem, 4vw, 2.75rem); grid-template-columns: 1fr; }
@media (min-width: 34rem) { .roster { grid-template-columns: repeat(2, 1fr); } }
/* Phones: a full-width 4:5 portrait is taller than the screen. Show it small,
   beside the name and title, with the bio running full width underneath. */
@media (max-width: 33.99rem) {
  .person {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    column-gap: 1.1rem;
  }
  .person .person__portrait { grid-row: 1 / 3; margin: 0; }
  .person h3 { grid-column: 2; align-self: end; margin: 0 0 0.3rem; }
  .person .role { grid-column: 2; align-self: start; margin: 0; }
  .person p:not(.role) { grid-column: 1 / -1; margin-top: 1.1rem; }
}
@media (min-width: 62rem) { .roster { grid-template-columns: repeat(4, 1fr); } }

.person__portrait {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  background: var(--panel);
  border-bottom: 3px solid var(--brand);
  margin-bottom: 1.15rem;
}

.person h3 { font-size: 1.1875rem; }
.person .role {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0.35rem 0 0.85rem;
}
.person p { font-size: 0.9375rem; }

/* ------------------------------------------------------ image placeholder -- */

.photo-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  aspect-ratio: 16 / 9;
  background: repeating-linear-gradient(-45deg, var(--panel) 0 10px, #eaeef7 10px 20px);
  border: 1px dashed var(--brand);
  padding: 1.5rem;
  margin: 0;
}
.photo-slot strong {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--heading);
}
.photo-slot span { font-family: var(--sans); font-size: 12.5px; color: var(--muted); max-width: 28rem; }
.person__portrait.photo-slot { aspect-ratio: 4 / 5; border-bottom: 3px solid var(--brand); }

figcaption {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.75rem;
}

/* --------------------------------------------------------------- contact -- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.75rem, 4vw, 2.75rem);
}

.detail { border-top: 3px solid var(--brand); padding-top: 0.9rem; }
.detail dt {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.45rem;
}
.detail dd { margin: 0; font-size: 1rem; line-height: 1.5; }

/* ---------------------------------------------------------------- button -- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.85rem 1.5rem;
  text-decoration: none;
  border: 1px solid var(--btn-bd);
  color: var(--btn-fg);
  background: transparent;
  border-radius: 2px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--btn-hbg); color: var(--btn-hfg); border-color: var(--btn-hbg); }

.btn--gold { background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-fg); }
.btn--gold:hover { background: var(--cta-hbg); border-color: var(--cta-hbg); color: var(--cta-hfg); }

.on-navy .btn, .hero .btn { border-color: var(--inv-btn-bd); color: var(--inv-btn-fg); }
.on-navy .btn:hover, .hero .btn:hover { background: var(--inv-btn-hbg); color: var(--inv-btn-hfg); border-color: var(--inv-btn-hbg); }
.on-navy .btn--gold, .hero .btn--gold { background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-fg); }
.on-navy .btn--gold:hover, .hero .btn--gold:hover { background: var(--cta-hbg); border-color: var(--cta-hbg); color: var(--cta-hfg); }

/* --------------------------------------------------------------- writing -- */

.post-list { border-top: 1px solid var(--heading); }
.post-item { padding-block: 1.9rem; border-bottom: 1px solid var(--line); }
.post-item h3 { font-size: 1.3125rem; margin-bottom: 0.4rem; }
.post-item h3 a { text-decoration: none; color: var(--heading); }
.post-item h3 a:hover { text-decoration: underline; }
.post-meta {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.prose { max-width: var(--measure); }
.prose h2 {
  font-size: 1.375rem;
  border-left: 3px solid var(--accent);
  padding-left: 0.7rem;
  margin: 2.4rem 0 0.8rem;
}
.prose h2:first-child { margin-top: 0; }

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

.footer {
  background: var(--footer-bg);
  border-top: 4px solid var(--footer-rule);
  color: var(--footer-fg);
  padding-block: 3rem 2.25rem;
  font-size: 0.9375rem;
}
.footer a { color: var(--footer-link); }
.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  justify-content: space-between;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.footer__brand img { height: 24px; width: auto; margin-bottom: 0.75rem; }
.footer__brand p { margin: 0 0 0.35rem; }
.footer__brand p:last-child { margin-bottom: 0; }
.footer__brand { max-width: 26rem; line-height: 1.6; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.footer__nav a {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
}
.footer__nav a:hover { text-decoration: underline; }
.footer__legal {
  padding-top: 1.5rem;
  font-family: var(--sans);
  font-size: 11px;
  display: grid;
  gap: 0.5rem;
  line-height: 1.6;
  max-width: 60rem;
}

/* ------------------------------------------------------------- utilities -- */

/* One restrained scroll reveal — only ever applied when JS is running, so the
   page is fully readable if the script fails or is blocked. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

.stack > * + * { margin-top: 1.15rem; }
.mt-l { margin-top: clamp(2rem, 4vw, 3rem); }
.mt-m { margin-top: 1.75rem; }

.skip {
  position: absolute; left: -9999px;
  background: var(--brand); color: #fff;
  padding: 0.75rem 1rem; z-index: 100; font-family: var(--sans); font-size: 13px;
}
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- mobile -- */

@media (max-width: 46rem) {
  body { font-size: 16.5px; }
  .nav__toggle { display: block; }
  .masthead { position: relative; }
  .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.25rem var(--gutter) 1rem;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
  }
  .nav.is-open { display: flex; }
  .nav a { width: 100%; padding-block: 0.8rem; border-bottom: 1px solid var(--line); }
  .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--line); }
  .record__row { grid-template-columns: 1fr; gap: 1rem; }
  /* keep "Capital" beside the mark on phones, just a touch tighter */
  .wordmark span { letter-spacing: 3px; }
}

@media print {
  .masthead, .footer__nav, .btn, .photo-slot { display: none; }
  body { font-size: 11pt; color: #000; }
}