/* Old Midland Resources — public site
 * Implements the Brand Identity Briefing (Inputs/Brand Identity Briefing_ Old
 * Midland Resources.docx): "Old Money" — institutional stability, heritage,
 * calm and premium rather than loud.
 *
 * TYPEFACE AVAILABILITY — the one place this departs from the brief's literal
 * CSS, and deliberately:
 *
 *   The brief specifies `font-family: 'Baskerville', serif`. Baskerville ships
 *   on macOS and iOS and on NEITHER Windows nor Android, so that declaration
 *   silently serves a generic system serif to most visitors — losing the
 *   typeface the brand is built on for the majority of the audience, invisibly,
 *   on the developer's Mac.
 *
 *   Libre Baskerville is used instead: an open-licence Baskerville revival
 *   drawn specifically FOR SCREENS, with heavier strokes and a taller x-height.
 *   That is precisely the brief's own "Optical Sizing Requirement" — it asks for
 *   increased stroke thickness so the face is not spindly on high-resolution
 *   displays — so this serves the stated intent more faithfully than the
 *   literal font name would. Real Baskerville is kept ahead of the generic
 *   fallbacks for anyone who has it.
 *
 *   Bank Gothic is a commercial licence and is on almost no visitor's machine.
 *   It is listed first so it is used wherever OMR licenses it, backed by a
 *   rectilinear geometric fallback that preserves the 1930s corporate-stationery
 *   feel rather than collapsing to Arial.
 */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* Primary brand palette — from the briefing */
  --omr-heritage-green: #4B5320;  /* Banker's Green */
  --omr-leather-clay:   #A55D35;  /* Earth tone */
  --omr-accent-gold:    #D4AF37;  /* Muted gold, sparingly */
  --omr-stately-grey:   #D3D3D3;  /* Quiet-luxury neutral canvas */
  /* Retained for gold text on the GREEN surfaces only, where brand gold still
     measures 3.9:1. On the darkened leather the true #D4AF37 clears AA on its
     own, so the substitute is no longer used there. */
  --gold-on-green:      #E3C664;
  /* Fine print needs MORE contrast than body text, not less: at 0.7rem
     uppercase the brand gold measured 5.30:1 on leather — technically AA, and
     visibly muddy. Small caps at that size is functionally fine print and wants
     7:1+ to read comfortably. */
  --gold-fine:          #EBD489;

  /* --- 60/30/10, second briefing -------------------------------------------
     60% Vintage Leather, 30% Banker's Green, 10% Muted Gold.

     Leather is the DOMINANT SURFACE, not the text substrate. Measured: charcoal
     on Spice Brown is 2.87:1 and gold on it is 2.89:1 — both below the 4.5:1
     floor, so a literal leather background would fail body copy outright and
     make the gold detailing the brief asks for effectively invisible.

     The brief's own metaphor resolves it: a leather-bound book has a leather
     COVER and a light PAGE. Leather therefore carries the masthead, the bands,
     the footer and the card edges — the visual field — while reading surfaces
     stay light. Same dominance, text still legible for an audience that skews
     older and is reading something consequential. */
  --leather:        #4E3629;   /* Dark chocolate — richer than the brief's
                                  Spice Brown, and measurably better: cream on
                                  it is 9.55:1 (AAA, up from 5.20) and the TRUE
                                  brand gold clears AA at 5.30:1 where on Spice
                                  Brown it was 2.89:1 and unusable. Going deeper
                                  removed the need for a lightened substitute
                                  gold, so the palette is now more faithful to
                                  the brief, not less. */
  --leather-domino: #6A4A3C;   /* Lighter grain, for gradients and hovers */
  --leather-deep:   #3B2A22;   /* Espresso — edges, shadows, the monogram field */
  --on-leather:     #F3EFE8;   /* 9.55:1 on leather — AAA */
  --on-leather-dim: #DCD2C6;

  /* Derived tones — kept in the same family, no new hues introduced */
  --green-deep:  #343a16;
  --leather-dk:  #874A2A;
  --ink:         #1A1A1A;         /* Deep charcoal, per the briefing */
  --ink-soft:    #4a4a48;
  /* Canvas: warm stone rather than the first brief's neutral grey, so the page
     sits in the leather family — but desaturated, because brief 1 explicitly
     rejects the "yellowed" cream look. This is the seam between the two. */
  --canvas:      #E9E6E1;
  --surface:     #F4F2EE;
  --surface-hi:  #FAF9F7;
  --rule:        #C4BCB1;

  --omr-trust-serif:    'Libre Baskerville', Baskerville, 'Baskerville Old Face',
                        'Hoefler Text', Garamond, 'Times New Roman', serif;
  --omr-technical-sans: 'Bank Gothic', 'Michroma', 'Eurostile', 'Square721 BT',
                        'Trebuchet MS', system-ui, sans-serif;

  --measure: 66ch;
  --shadow: 0 1px 2px rgba(26,26,26,.07), 0 10px 28px rgba(26,26,26,.07);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--omr-trust-serif);
  /* Optical size correction per the briefing: heavier strokes so the face does
     not read as spindly on high-DPI screens. Libre Baskerville has no 500, so
     400 is its optically-corrected regular. */
  font-weight: 400;
  font-size: 1.0125rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Baskerville sets large: high stroke contrast wants air, and tight tracking at
   display sizes is what makes a transitional serif look architectural. */
h1, h2, h3 {
  font-family: var(--omr-trust-serif);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 4.6vw, 2.9rem); margin: 0 0 .55em; }
h2 { font-size: clamp(1.4rem, 2.7vw, 1.9rem); margin: 2.5rem 0 .8rem; }
h3 { font-size: 1.12rem; margin: 1.8rem 0 .5rem; }

p, li { max-width: var(--measure); }
p { margin: 0 0 1.15rem; }
ul, ol { padding-left: 1.15rem; }
li { margin-bottom: .55rem; }

a { color: var(--green-deep); text-underline-offset: .18em; text-decoration-thickness: .05em; }
a:hover { color: var(--omr-leather-clay); }

.wrap   { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }

/* ---------- technical labels: Bank Gothic, uppercase ----------
   The briefing forbids lowercase Bank Gothic (it was a capitals-only face) and
   forbids swash characters in all-caps strings. Both are honoured by using it
   ONLY here, uppercase, with tracking. Note: the briefing's CSS carries
   `font-variant: border-box`, which is not a valid value for that property —
   the intent was small-caps, which is moot on an already-uppercased string, so
   text-transform + letter-spacing delivers it correctly. */
.label-technical, .eyebrow, .brand-txt span, .site-foot h4, .nav, .btn, .crumbs {
  font-family: var(--omr-technical-sans);
}
.label-technical, .eyebrow, .brand-txt span, .site-foot h4 {
  text-transform: uppercase;
  letter-spacing: .09em;
}

/* ---------- header ---------- */
.site-head {
  background: var(--surface-hi);
  border-bottom: 2px solid var(--omr-heritage-green);
  position: sticky; top: 0; z-index: 20;
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: .9rem 0;
}
.brand {
  font-family: var(--omr-trust-serif);
  font-weight: 700; font-size: 1.06rem; letter-spacing: .005em;
  color: var(--ink); text-decoration: none; line-height: 1.25;
}
.brand-txt {
  display: block; font-family: var(--omr-trust-serif); font-weight: 700;
  font-size: 1.06rem; letter-spacing: .005em; color: var(--on-leather);
  text-transform: none;
}
.brand-txt span {
  display: block; font-weight: 400; font-size: .62rem;
  font-family: var(--omr-technical-sans);
  color: var(--omr-accent-gold); letter-spacing: .16em; margin-top: .15rem;
  text-transform: uppercase;
}
.nav { display: flex; gap: 1.3rem; align-items: center; flex-wrap: wrap; }
.nav a { font-size: .82rem; color: var(--ink-soft); text-decoration: none;
         letter-spacing: .03em; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--omr-heritage-green); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font-size: .82rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .85rem 1.5rem; border-radius: 1px;
  background: var(--omr-heritage-green); color: var(--surface-hi) !important;
  text-decoration: none; border: 1px solid var(--omr-heritage-green);
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--green-deep); border-color: var(--green-deep); }
.btn-ghost {
  background: transparent; color: var(--green-deep) !important;
  border-color: var(--rule);
}
.btn-ghost:hover {
  background: transparent; color: var(--leather-dk) !important;
  border-color: var(--omr-leather-clay);
}

/* ---------- hero ---------- */
.hero { background: var(--surface-hi); border-bottom: 1px solid var(--rule); }
.hero .wrap { padding: clamp(3rem, 7vw, 5.25rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero p.lede { font-size: 1.14rem; color: var(--ink-soft); max-width: 52ch; }
.eyebrow {
  font-size: .7rem; color: var(--omr-heritage-green); margin: 0 0 1.1rem;
  padding-bottom: .55rem; display: inline-block;
  /* Gold used exactly as the briefing asks: sparingly, as a mark of intrinsic
     merit rather than a field of colour. */
  border-bottom: 2px solid var(--omr-accent-gold);
}
.cta-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.9rem; }

/* ---------- sections ---------- */
section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
section.alt { background: var(--surface); border-block: 1px solid var(--rule); }

.grid { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 700px) {
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
}

.card {
  background: var(--surface-hi); border: 1px solid var(--rule);
  border-top: 3px solid var(--omr-heritage-green);
  border-radius: 1px; padding: 1.5rem; box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card p, .card li { max-width: none; }

/* numbered process steps */
.steps { counter-reset: step; list-style: none; padding: 0; margin-top: 1.6rem; }
.steps > li {
  counter-increment: step; position: relative;
  padding-left: 3.5rem; margin-bottom: 2rem; max-width: var(--measure);
}
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: -.15rem;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  background: var(--omr-heritage-green); color: var(--surface-hi);
  font-family: var(--omr-technical-sans); font-size: .95rem; font-weight: 700;
  border-radius: 1px;
}
.steps h3 { margin: 0 0 .35rem; }
.steps h3 em { font-style: italic; font-weight: 400; color: var(--ink-soft);
               font-size: .92rem; }

/* FAQ */
details.faq { border-bottom: 1px solid var(--rule); padding: 1.15rem 0; }
details.faq summary {
  cursor: pointer; font-weight: 700; font-size: 1.04rem; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; color: var(--omr-leather-clay); font-weight: 400;
  font-size: 1.35rem; line-height: 1;
}
details.faq[open] summary::after { content: "\2212"; }
details.faq > div { padding-top: .75rem; }
details.faq p:last-child { margin-bottom: 0; }

/* callout */
.note {
  border-left: 3px solid var(--omr-accent-gold);
  background: var(--surface-hi); padding: 1.2rem 1.4rem;
  margin: 1.9rem 0; border-radius: 0 1px 1px 0;
}
.note p:last-child { margin-bottom: 0; }

/* ---------- footer ---------- */
.site-foot {
  background: var(--omr-heritage-green); color: #dcdcd2;
  margin-top: 3rem; font-size: .93rem; padding: 2.6rem 0 2rem;
}
.site-foot a { color: var(--gold-on-green); }
.site-foot h4 {
  color: var(--gold-fine); font-size: .76rem; margin: 0 0 .9rem;
  font-weight: 400;
}
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 700px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr; } }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: .45rem; }
.foot-grid p, .foot-grid li { max-width: none; }
.legal {
  border-top: 1px solid rgba(255,255,255,.18); margin-top: 2rem;
  padding-top: 1.35rem; font-size: .85rem; color: var(--on-leather-dim);
}
.legal p { max-width: none; }

/* ---------- utility ---------- */
.skip { position: absolute; left: -9999px; background: var(--surface-hi);
        padding: .7rem 1.1rem; z-index: 50; }
.skip:focus { left: 1rem; top: .6rem; }
:focus-visible { outline: 2px solid var(--omr-leather-clay); outline-offset: 2px; }
.crumbs { font-size: .72rem; color: var(--ink-soft); padding-top: 1.5rem;
          letter-spacing: .05em; text-transform: uppercase; }
.crumbs a { color: var(--ink-soft); }

/* form fields inherit the serif so inputs do not fall back to Arial */
input, textarea, button, select { font-family: inherit; font-size: 1rem; }

/* ===========================================================================
   HERITAGE LAYER — second briefing
   Leather as the dominant surface, Neo-Gothic structure from the T.S. Hogan
   Petroleum Building, gold strictly as a hairline.
   =========================================================================== */

/* Masthead sits on leather: the cover of the book. */
.site-head {
  background: linear-gradient(180deg, var(--leather-domino), var(--leather));
  border-bottom: none;
  box-shadow: inset 0 -1px 0 var(--omr-accent-gold), 0 1px 0 var(--leather-deep);
}
.brand { color: var(--on-leather); }
.brand-txt span { color: var(--omr-accent-gold); }
.nav a { color: var(--on-leather-dim); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--omr-accent-gold); }

/* Primary action reads as green against leather — the 30% grounding the 60%. */
.site-head .btn {
  background: var(--omr-heritage-green);
  border-color: var(--omr-accent-gold);
  color: var(--on-leather) !important;
}
.site-head .btn:hover { background: var(--green-deep); }

/* Hero: light page, leather edges. The gold hairline is the 10% — a rule, not
   a field, exactly as the brief asks. */
.hero {
  background: var(--surface-hi);
  border-bottom: 1px solid var(--rule);
  border-top: 3px solid var(--leather);
  position: relative;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px;
  background: var(--omr-accent-gold); opacity: .55;
}

/* Neo-Gothic arch, abstracted from the Petroleum Building's facade: a pointed
   crown on structural blocks. Drawn in CSS rather than shipped as an image —
   no request, no licence, scales cleanly. */
.card {
  background: var(--surface-hi);
  border: 1px solid var(--rule);
  border-top: none;
  border-radius: 0;
  position: relative;
  padding-top: 1.7rem;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg,
    var(--leather) 0 12%, var(--omr-heritage-green) 12% 88%, var(--leather) 88% 100%);
}
/* No spire on cards: repeated thirteen times down a page it stopped reading as
   a heritage mark and started reading as clip-art. It survives as a section
   divider (.rule-spire), where it is rare enough to mean something. */
.card::before {
  background: linear-gradient(90deg,
    var(--leather) 0 22%, var(--omr-heritage-green) 22% 78%, var(--leather) 78% 100%);
  height: 3px;
}

.steps > li::before {
  /* Pointed arch head on the step markers rather than a circle. */
  border-radius: 40% 40% 2px 2px;
  background: var(--leather);
  box-shadow: inset 0 0 0 1px var(--omr-accent-gold);
}

section.alt {
  background: var(--surface);
  border-block: 1px solid var(--rule);
}

.note {
  border-left: 3px solid var(--leather);
  box-shadow: inset 4px 0 0 -1px var(--omr-accent-gold);
}

/* Footer: full leather, with the skyline watermark sitting in it. */
.site-foot {
  background: linear-gradient(180deg, var(--leather), var(--leather-deep));
  color: #EDE7DD;
  border-top: 3px solid var(--omr-heritage-green);
  position: relative; overflow: hidden;
}
.site-foot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0) 40%);
}
.site-foot h4 { color: var(--gold-fine); }
.site-foot a { color: var(--on-leather); text-decoration-color: rgba(241,237,230,.5); }
.site-foot a:hover { color: var(--gold-fine); }
.legal { border-top-color: rgba(243,239,232,.22); color: #EDE7DD; }

/* Midland skyline watermark — ORIGINAL artwork (see build.py). Kept low
   contrast so it reads as a watermark, never as competing content. */
.skyline {
  position: absolute; right: 0; bottom: 0; width: min(46rem, 78%);
  opacity: .11; pointer-events: none; z-index: 0;
}
.site-foot .wrap { position: relative; z-index: 1; }

/* Tonal layering, per the "Logo Erasure Principle": adjacent surfaces stay
   within a step or two of each other so authority comes from the layout and
   the typography rather than from contrast shouting. */

/* ===========================================================================
   EDITORIAL LAYER
   The site read as flat because it used Baskerville as a webfont rather than as
   a BOOK face. Everything below is standard fine-press typography — drop caps,
   pull quotes, small-caps lead-ins, rules — which is what "old money" print
   actually looks like, and costs nothing but CSS.
   =========================================================================== */

/* Paper grain: an inline SVG turbulence at very low opacity. Gives the canvas
   the tooth of laid paper without shipping a raster texture or hurting text
   contrast — brief 1 forbids weathered filters, and this is grain, not wear. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

/* --- monogram -------------------------------------------------------------
   The masthead was set text with no mark. A gold-edged block carrying the
   spire silhouette gives the brand something to be recognised BY, which is the
   whole point of the Logo Erasure Principle — you can only erase a logo once
   the layout carries the identity. */
.brand { display: flex; align-items: center; gap: .8rem; }
.mark {
  width: 2.5rem; height: 2.5rem; flex: none;
  background: var(--leather-deep);
  border: 1px solid var(--omr-accent-gold);
  display: grid; place-items: center;
}
.mark svg { width: 1.5rem; height: 1.5rem; display: block; }
.brand-txt { display: block; }

/* --- drop cap -------------------------------------------------------------- */
.lead-cap::first-letter {
  float: left; font-size: 3.9em; line-height: .82; font-weight: 700;
  padding: .06em .12em 0 0; color: var(--leather);
}

/* small-caps lead-in for the first words of a section */
.lead-in {
  font-family: var(--omr-technical-sans);
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .78em; color: var(--omr-heritage-green);
}

/* --- pull quote ------------------------------------------------------------ */
.pull {
  margin: 2.6rem 0; padding: 0 0 0 1.6rem;
  border-left: 2px solid var(--omr-accent-gold);
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  line-height: 1.34; font-style: italic; color: var(--ink);
  max-width: 30ch;
}
.pull cite {
  display: block; margin-top: .8rem; font-style: normal;
  font-family: var(--omr-technical-sans); text-transform: uppercase;
  letter-spacing: .1em; font-size: .62rem; color: var(--ink-soft);
}

/* --- hero: give it a subject ----------------------------------------------
   A two-column hero with the skyline occupying the right rather than a column
   of empty page. On narrow screens the art drops away entirely — it is
   decoration, and decoration should not push the offer below the fold. */
.hero .wrap { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: 1.15fr .85fr; }
}
.hero-art { display: none; }
@media (min-width: 900px) {
  .hero-art { display: block; align-self: end; }
  .hero-art svg { width: 100%; height: auto; display: block; }
}

/* --- full-bleed leather band ----------------------------------------------
   Breaks the h2 / paragraph / three-cards rhythm that repeated down the whole
   page. Reversed type on leather gives the eye a change of register. */
section.band {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.16)),
    var(--leather);
  color: var(--on-leather);
  border-block: 1px solid var(--leather-deep);
  box-shadow: inset 0 1px 0 rgba(212,175,55,.45), inset 0 -1px 0 rgba(212,175,55,.45);
}
section.band h2, section.band h3 { color: var(--on-leather); }
section.band p { color: var(--on-leather-dim); }
section.band .pull { color: var(--on-leather); border-left-color: var(--omr-accent-gold); }
section.band a { color: var(--omr-accent-gold); }

/* --- credential band ------------------------------------------------------
   Four plain facts, gold-divided, set in the technical face. Substance stated
   flatly reads as more confident than adjectives. */
.creds {
  display: grid; gap: 0; margin: 0; padding: 0; list-style: none;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .creds { grid-template-columns: repeat(4, 1fr); } }
.creds li {
  margin: 0; padding: 1.15rem 1.2rem; text-align: center; max-width: none;
  font-family: var(--omr-technical-sans); text-transform: uppercase;
  letter-spacing: .09em; font-size: .72rem; color: var(--on-leather);
  border-top: 1px solid rgba(212,175,55,.35);
}
@media (min-width: 760px) {
  .creds li { border-top: none; border-left: 1px solid rgba(212,175,55,.35); }
  .creds li:first-child { border-left: none; }
}

/* --- section rule with a spire --------------------------------------------- */
.rule-spire {
  display: flex; align-items: center; gap: 1rem; margin: 0 0 1.6rem;
  color: var(--rule);
}
.rule-spire::before, .rule-spire::after {
  content: ""; height: 1px; background: currentColor; flex: 1;
}
.rule-spire i {
  width: 9px; height: 9px; transform: rotate(45deg); flex: none;
  background: var(--omr-accent-gold); border: 1px solid var(--leather-deep);
}

/* ===========================================================================
   DARK-SURFACE OVERRIDES — read this before adding a colour anywhere
   ===========================================================================
   Three separate legibility bugs in this stylesheet had one cause: a rule set
   an explicit dark ink colour without knowing it might land on a dark surface.
   `.pull cite` was the worst of them — --ink-soft #4a4a48 on leather #4E3629
   measures 1.26:1, which is not "low contrast", it is invisible.

   Inheritance does not save you here, because an explicit `color` on a child
   beats a `color` on the band. So every element that sets its own ink colour
   must be listed below. If you add a component that sets `color:` and it can
   appear inside .band or .site-foot, add it here too.

   :where() keeps specificity at zero so these stay easy to override
   intentionally, rather than becoming a wall of !important later. */
section.band :where(p, li, cite, blockquote, em, strong, dd, dt),
.site-foot :where(p, li, cite, blockquote, em, strong, dd, dt) {
  color: var(--on-leather);
}
section.band :where(h1, h2, h3, h4, summary),
.site-foot :where(h1, h2, h3, summary) {
  color: var(--on-leather);
}
/* The small-caps lead-in is Banker's Green on light ground — near-black on
   leather. Gold is the band equivalent. */
section.band .lead-in, .site-foot .lead-in { color: var(--gold-fine); }

/* Attribution under a pull quote: the specific element Luke caught. Gold at a
   readable size rather than grey at 0.62rem, since it is fine print and fine
   print needs MORE contrast, not less — the same lesson as the footer. */
.pull cite { font-size: .68rem; color: var(--ink-soft); }
section.band .pull cite, .site-foot .pull cite { color: var(--gold-fine); }

/* Body copy on a band is deliberately one step down from headings so the
   hierarchy survives the reversal — but still comfortably above AA. */
section.band p { color: #EDE7DD; }