/* =============================================================================
   LODEMARK  ·  shared stylesheet + design tokens
   Institutional mineral-estate advisory. One practice, four disciplines.
   Signature: the lodemark. A survey benchmark and a stratigraphic datum line,
   the fixed reference an estate is measured from. Precision (the CFO) rendered
   as fine measured marks; grit (the field) rendered as warm stone and rock.
   ============================================================================= */

/* Self-hosted: Newsreader (variable font, wght 200..600 + opsz axis), latin + latin-ext
   subsets from Google Fonts, font-display: swap. font-optical-sizing:auto uses opsz.
   Mono/label typeface is Roboto, ALSO self-hosted (see below). It was previously
   loaded via a Google Fonts <link> that existed on index.html only. */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 500;
  font-display: swap;
  src: url(fonts/newsreader-italic-200-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 500;
  font-display: swap;
  src: url(fonts/newsreader-italic-200-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url(fonts/newsreader-normal-200-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 600;
  font-display: swap;
  src: url(fonts/newsreader-normal-200-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Mono/label typeface: Roboto, self-hosted to match Newsreader. Variable, wght
   axis only; declared 400..600, the range styles.css actually uses. Subsets and
   unicode-ranges are the same latin / latin-ext pair used above. Replaces the
   Google Fonts <link>, which lived on index.html only and so left the label
   typeface falling back to a system monospace on the other seven pages. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/roboto-normal-400-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/roboto-normal-400-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* F7: metric-matched fallback for Newsreader. Renders a locally available serif
   (Times New Roman / Liberation Serif, which are metric-compatible) with
   Newsreader's own line box, so the swap from fallback to web font causes no
   vertical layout shift (CLS). Overrides computed from the real Newsreader
   metrics (unitsPerEm 2000, ascent 1470, descent 530, lineGap 0) against a
   frequency-weighted average advance width: size-adjust is ~1.004, so the
   vertical overrides carry the anti-shift work. Used via the --voice stack. */
@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Times New Roman'), local('Liberation Serif'), local('Times');
  size-adjust: 100.43%;
  ascent-override: 73.18%;
  descent-override: 26.39%;
  line-gap-override: 0%;
}

/* ----------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------------- */
:root {
  /* Palette, locked (Brand KB v21, the 06-18 set) */
  --stone:      #2C2A25;
  --obsidian:   #1C1A17;
  --slate:      #888780;
  --sand:       #F1EFE8;
  --parchment:  #D2D1C7;
  --amber:      #BA7517;
  --gold:       #EF9F27;

  --discovery:      #185FA5;  --discovery-lt:   #85B7EB;  --discovery-bg:   #E6F1FB;
  --realization:    #0F6E56;  --realization-lt: #5DCAA5;  --realization-bg: #E1F5EE;
  --monitoring:     #534AB7;  --monitoring-lt:  #AFA9EC;  --monitoring-bg:  #EEEDFE;
  --forecasting:    #BA7517;  --forecasting-lt: #EF9F27;  --forecasting-bg: #FAEEDA;

  /* Herald coral: the one new color (Session 3, Item 5). Communication maps to no discipline. */
  --herald:         #B24A3A;  --herald-lt:      #E0988B;

  /* Per-page identity color (Item 5/6). Overridden per page on <body data-page>. Default neutral. */
  --identity: var(--ink-deep);

  /* Semantic */
  --bg:        var(--sand);
  --ink:       var(--stone);
  --ink-deep:  var(--obsidian);
  --muted:     #6d6c66;              /* darkened slate for readable meta text  */
  --faint:     var(--slate);
  --rule:      rgba(44, 42, 37, 0.16);
  --rule-soft: rgba(44, 42, 37, 0.09);
  --accent:    var(--amber);
  --accent-hi: var(--gold);

  /* Type */
  --voice: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --mono:  "Roboto", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid scale (1.2 minor third, editorial) */
  --t-mono:    0.72rem;
  --t-small:   0.9rem;
  --t-body:    1.075rem;
  --t-lead:    1.3rem;
  --t-h4:      clamp(1.15rem, 1.0rem + 0.7vw, 1.45rem);
  --t-h3:      clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  --t-h2:      clamp(2.0rem, 1.5rem + 2.3vw, 3.2rem);
  --t-h1:      clamp(2.6rem, 1.7rem + 4.1vw, 5.1rem);
  --t-display: clamp(3.1rem, 1.9rem + 5.4vw, 6.4rem);

  /* Space */
  --gut: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1240px;
  --readw: 40rem;
  --sec-y: clamp(4.5rem, 9vw, 8.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ----------------------------------------------------------------------------
   2. RESET / BASE
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 8rem; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--voice);
  font-size: var(--t-body);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
svg { height: auto; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 600; }
em { font-style: italic; }

::selection { background: var(--amber); color: var(--sand); }

/* ----------------------------------------------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 400; line-height: 1.08; letter-spacing: -0.015em; }
.h-display { font-size: var(--t-display); line-height: 1.0; letter-spacing: -0.025em; }
h1, .h1 { font-size: var(--t-h1); }
h2, .h2 { font-size: var(--t-h2); }
h3, .h3 { font-size: var(--t-h3); }
h4, .h4 { font-size: var(--t-h4); }

p { max-width: var(--readw); }
p + p { margin-top: 1em; }

.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink); font-weight: 300; }
.small { font-size: var(--t-small); }
.muted { color: var(--muted); }
.serif-it { font-style: italic; }

/* The mono "instrument" register: eyebrows, labels, coordinates, data */
.mono {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}

/* ----------------------------------------------------------------------------
   4. SIGNATURE  ·  the lodemark datum + benchmark
   ---------------------------------------------------------------------------- */

/* Coordinate eyebrow: a benchmark cross, then a mono label sitting on the datum */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow--index::before { display: none; }

/* Datum line: a hairline carrying tick registration marks */
.datum {
  height: 10px;
  border: 0;
  border-top: 1px solid var(--rule);
  background:
    repeating-linear-gradient(to right,
      var(--rule) 0, var(--rule) 1px,
      transparent 1px, transparent 40px);
  background-position: top left;
  background-size: 100% 6px;
  background-repeat: repeat-x;
  margin: 0;
  opacity: 0.9;
}

/* A single measured index number (mono) used for disciplines / timeline */
.index {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t-mono);
  letter-spacing: 0.12em;
  color: var(--faint);
}

/* ----------------------------------------------------------------------------
   5. LAYOUT PRIMITIVES
   ---------------------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 920px; }
.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

.stack > * + * { margin-top: 1.2rem; }
.stack-lg > * + * { margin-top: 2rem; }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-4 > .card { min-width: 0; }
.cols-4 .card p { overflow-wrap: anywhere; }

.section-head { max-width: 54rem; }
.section-head .eyebrow { margin-bottom: 1.5rem; }
.section-head h2 { margin-bottom: 0.5rem; }

/* tone variants */
.tone-dark  { background: var(--obsidian); color: var(--sand); }
.tone-stone { background: var(--stone);    color: var(--sand); }
.tone-parch { background: var(--parchment); color: var(--ink); }
.tone-dark .muted, .tone-stone .muted { color: rgba(241,239,232,0.66); }
.tone-dark .mono,  .tone-stone .mono  { color: rgba(241,239,232,0.6); }
.tone-dark .eyebrow, .tone-stone .eyebrow { color: var(--gold); }
.tone-dark .datum, .tone-stone .datum {
  border-top-color: rgba(241,239,232,0.2);
  background-image: repeating-linear-gradient(to right,
    rgba(241,239,232,0.2) 0, rgba(241,239,232,0.2) 1px,
    transparent 1px, transparent 40px);
}
.tone-dark a.link, .tone-stone a.link { color: var(--gold); }

/* ----------------------------------------------------------------------------
   6. LINKS + BUTTONS
   ---------------------------------------------------------------------------- */
a.link {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  transition: gap 0.25s var(--ease), color 0.2s var(--ease);
}
a.link::after { content: "\2192"; transition: transform 0.25s var(--ease); }
a.link:hover { gap: 0.9em; color: var(--ink-deep); }
.tone-dark a.link:hover, .tone-stone a.link:hover { color: var(--sand); }

.btn {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.85em 1.4em;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn::after {
  content: "";
  width: 7px; height: 7px;
  border-top: 1.4px solid currentColor;
  border-right: 1.4px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--sand); }
.btn:hover::after { transform: rotate(45deg) translate(1px, -1px); }
.btn--solid { background: var(--ink-deep); color: var(--sand); border-color: var(--ink-deep); }
.btn--solid:hover { background: var(--amber); border-color: var(--amber); color: var(--obsidian); }
.tone-dark .btn, .tone-stone .btn { border-color: rgba(241,239,232,0.5); color: var(--sand); }
.tone-dark .btn:hover, .tone-stone .btn:hover { background: var(--gold); color: var(--obsidian); border-color: var(--gold); }

/* ----------------------------------------------------------------------------
   7. HEADER / NAV
   ---------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(241,239,232,0.9);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav {
  max-width: var(--maxw); margin-inline: auto; padding: 1.6rem var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.brand {
  font-family: var(--voice);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--ink-deep);
  display: inline-flex; align-items: baseline; gap: 0.6rem;
  flex-shrink: 0;
}
.brand img { flex-shrink: 0; }
.brand .brand-mark { display: inline-flex; align-items: center; }
.brand .brand-mark svg { width: 2.4em; height: auto; display: block; }
.brand small {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }
.nav-links a {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.13em;
  text-transform: uppercase; font-weight: 500; color: var(--muted);
  padding-block: 0.4rem; position: relative; transition: color 0.2s var(--ease);
}
.nav-links a:hover { color: var(--ink-deep); }
.nav-links a[aria-current="page"] { color: var(--ink-deep); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.3rem;
  height: 1.5px; background: var(--amber);
}
.nav-cta { display: inline-flex; }
.nav-toggle { display: none; }
/* Four states above the <721px hamburger, at Amanda's direction: link type
   never scales gradually with viewport, so resizing feels like a small set
   of clean transitions, not a cascade of small adjustments.
   - >=1400px: one row, full size, CTA inline -- today's layout, untouched.
     1400px is measured, not assumed: the six links + CTA need that much
     before they fit one row once the .subrail sidebar's 196px padding is
     actually in effect (measured needing only 1014px if that padding is
     ignored, which would have reopened the overflow the instant the
     breakpoint itself turned the padding on).
   - 858-1399px: CTA drops to its own row below the six links (margin-left:
     auto right-aligns it against the links row). Links stay at their
     unmodified 0.72rem/0.13em throughout. This range spans two different
     .subrail states with no change of its own: 858-1105px has the rail in
     its bottom-bar form (no padding), 1106-1399px has it in sidebar form
     (196px padding active) -- see SUB-BRAND SPINE RAIL below for why 1106
     is exactly where that padding stops being a problem for this row.
     858px is the measured minimum width the six links need to hold one row
     in this exact layout -- measured against the real page with the CTA
     present and wrapping to its own row, not an isolated six-link-only
     test: those two gave different answers (806px isolated vs. 858px real)
     because the flex container's own shrink-to-fit width is computed from
     all seven items' content, CTA included, even though CTA itself ends up
     on the next line.
   - 721-857px: same CTA-below-row layout, but the six links can't fit one
     row at full size even alone below 858px, and Amanda ruled out scaling
     type with viewport -- so they drop to a single flat size, 0.51rem, the
     measured minimum that still fits all six on one row at 721px, the worst
     point in this narrow band. Applied flat across the whole band, not
     scaled, since it's narrow enough that a flat step won't read as
     shrinking early. */
@media (min-width: 721px) and (max-width: 1399px) {
  .nav-links { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.5rem; }
  .nav-cta { margin-left: auto; }
}
@media (min-width: 721px) and (max-width: 857px) {
  .nav-links a:not(.nav-cta) { font-size: 0.51rem; }
}

/* ----------------------------------------------------------------------------
   8. HERO
   ---------------------------------------------------------------------------- */
.hero { position: relative; padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: 0; overflow: hidden; }
.hero-inner { position: relative; z-index: 2; }
.hero .eyebrow { margin-bottom: 2rem; }
.hero h1 { max-width: 25ch; margin-bottom: 1.6rem; font-weight: 300; font-family: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif; }
.hero .lead { max-width: 65ch; }
.hero .mono { max-width: 95ch; }
.hero .c-muted { max-width: 70ch !important; }

/* Big editorial stat row */
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.stat { padding: 1.6rem 1.5rem 1.6rem 0; padding-left: 1.5rem; }
.stat:first-child { padding-left: 0; }
.stat .fig { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; color: var(--ink-deep); white-space: nowrap; }
.stat .fig sup { font-size: 0.5em; vertical-align: super; }
.stat .lab { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--muted); margin-top: 0.9rem; line-height: 1.5; max-width: 26ch; }
.tone-dark .stat .fig, .tone-stone .stat .fig { color: var(--sand); }
.tone-dark .stat, .tone-stone .stat { border-color: rgba(241,239,232,0.2); }

/* ----------------------------------------------------------------------------
   9. TWO DOORS  ·  the structural arrival
   ---------------------------------------------------------------------------- */
/* .doors now holds 4 items in DOM order -- door-owner, its own #scenario-band,
   door-institution, its own #scenario-band-inst -- not just the 2 doors. That
   DOM order is what makes tab/reading order match visual order once .doors
   collapses to a single column on mobile (see the max-width:720px rule
   below): auto-placement stacks items in source order, so each panel lands
   directly under its own door instead of after both doors, which is the bug
   this structure fixes (see PR notes).
   On wide screens the two doors need explicit placement, not auto-placement:
   a first attempt assumed auto-placement would slot door-institution into
   row 1's still-empty second column after #scenario-band (grid-column:1/-1)
   got bumped to row 2. It doesn't -- CSS Grid's default sparse packing never
   backtracks to an earlier row once its cursor has advanced past it, so
   door-institution fell through to row 3, under the panel, at every width
   tested (confirmed via computed grid-column/grid-row, not just visually).
   Explicit placement below removes the ambiguity: both doors pinned to row
   1, both panels spanning full width in row 2 (only one ever visible, via
   the existing collapsed/revealed display:none toggle, so they can safely
   share a cell). row-gap: 0 keeps that row from showing a seam when empty.
   Reset to grid-column/grid-row: auto at the mobile breakpoint below, where
   .doors collapses to one column -- an out-of-range explicit column on a
   1-column grid would otherwise create an unwanted implicit second column.
   The old border lived on .doors itself, wrapping the whole grid; now that
   the grid holds the panels too, that would wrap them as well, so the
   border moved onto the doors themselves (see .door rules below) to stay
   scoped to row 1 exactly like before.
   .doors keeps a transparent 1px LEFT/RIGHT border here rather than
   dropping it on all four sides: a real border used to eat 1px of .doors'
   own box on all four sides, which is what positioned row 1's grid content
   (and thus each door's own border-box, and the :focus-within outline
   anchored to it) 1px in from .doors' outer edge. Removing it outright
   (found post-merge, 2026-09-22 pixel re-check) shifted every door edge
   flush with .doors' edge instead -- a 1px, high-contrast shift invisible
   to the eye but not to a pixel diff.
   Left/right only, deliberately: .doors' width fills its container (a
   normal auto-width block box), so a border there is absorbed the way
   box-sizing:border-box promises -- it eats into the content area, .doors'
   own outer width is unchanged, and no compensation is needed. Height is
   different: .doors has no set height, both rows auto-size to content, and
   auto sizing has nothing for box-sizing to reapportion into -- a border
   there is added on top, not absorbed. A top/bottom version of this same
   border was tried first and inflated .doors by 2px, cascading down the
   page (every section below .doors 2px lower than before, caught in the
   same pixel re-check). It's also redundant vertically: .door's own
   border-top/border-bottom (below) already sit inside row 1's items, so
   row 1's auto height already includes that 2px without any help from
   .doors -- confirmed by .doors' pre-fix height already matching the
   pre-restructuring page's exactly. Only the horizontal inset was missing. */
.doors { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1px; row-gap: 0; background: var(--rule); align-items: stretch; border-left: 1px solid transparent; border-right: 1px solid transparent; }
#door-owner { grid-column: 1; grid-row: 1; }
#door-institution { grid-column: 2; grid-row: 1; }
#scenario-band, #scenario-band-inst { grid-column: 1 / -1; grid-row: 2; }
.door {
  background: var(--sand);
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  display: flex; flex-direction: column; gap: 1rem;
  position: relative; min-height: 100%;
  transition: background 0.3s var(--ease);
}
/* The whole entry card is the toggle for its lane's boxes (JS); real links inside
   keep their own behavior. Only the JS-enhanced page gets the card-wide pointer. */
.js .door { cursor: pointer; }
.js .door a { cursor: pointer; }
.door:hover { background: #F7F5EF; }
.door .door-tag { display: flex; align-items: center; justify-content: space-between; }
.door h3 { font-size: var(--t-h3); max-width: 18ch; }
.door p { color: var(--muted); font-size: 1rem; }
.door .link { margin-top: auto; padding-top: 0.5rem; }

/* Whole-card-clickable: each door has exactly one link, so its stretched
   ::after covers the whole card. No nested links, no screen-reader trap; the
   link keeps its own accessible name. Content is baked; with JS off the link
   still works. Hover lift and focus ring are gated on reduced motion. */
.door { position: relative; }
/* Whole-card stretch RETIRED 2026-07-13 (Chad doors accordion): the header is
   now the toggle target, so the full-card overlay would swallow it. Links act
   as links again. */
.door > .link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.door:focus-within { outline: 2px solid var(--amber); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .door { transition: background 0.3s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
}
@media (hover: hover) {
  .door:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(44, 42, 37, 0.10); }
}
/* Recreates the box .doors used to draw around the whole grid (now that the
   grid also holds the panels -- see the .doors comment above): each door
   contributes the top/bottom edges plus its own outer side, so the two
   together still read as one continuous frame, with the column-gap trick
   above still drawing the divider between them. */
.door { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.door--owner { border-left: 1px solid var(--rule); }
.door--inst { border-right: 1px solid var(--rule); }
.door--owner .door-accent { color: var(--realization); }
.door--inst .door-accent { color: var(--discovery); }
.door .door-accent { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }

/* ----------------------------------------------------------------------------
   10. DISCIPLINE / CONTENT CARDS
   ---------------------------------------------------------------------------- */
.disc { --c: var(--slate); --cbg: var(--sand); }
.disc--discovery   { --c: var(--discovery);   --clt: var(--discovery-lt);   --cbg: var(--discovery-bg); }
.disc--realization { --c: var(--realization); --clt: var(--realization-lt); --cbg: var(--realization-bg); }
.disc--forecasting { --c: var(--forecasting); --clt: var(--forecasting-lt); --cbg: var(--forecasting-bg); }
.disc--monitoring  { --c: var(--monitoring);  --clt: var(--monitoring-lt);  --cbg: var(--monitoring-bg); }

.discipline {
  background: var(--cbg);
  border-top: 2px solid var(--c);
  padding: clamp(1.75rem, 3vw, 2.6rem);
  display: flex; flex-direction: column; gap: 1rem;
  position: relative;
}
.discipline .index { color: var(--c); font-size: 0.8rem; }
.discipline h3 { color: var(--ink-deep); }
.discipline .disc-qual { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); font-weight: 600; }
.discipline p { color: var(--stone); font-size: 1rem; max-width: 42ch; }
.discipline .disc-list { list-style: none; padding: 0; margin-top: 0.6rem; display: grid; gap: 0.6rem; }
.discipline .disc-list li { font-size: 0.94rem; color: var(--stone); padding-left: 1.1rem; position: relative; max-width: 44ch; }
.discipline .disc-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; background: var(--c); }

.card {
  background: var(--sand);
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  display: flex; flex-direction: column; gap: 0.85rem;
}
.card h4 { color: var(--ink-deep); }
.card p { color: var(--muted); font-size: 0.98rem; }

/* Recovery / proof inset */
.proof {
  border-left: 2px solid var(--accent);
  padding: 1.2rem 0 1.2rem 1.5rem;
  background: transparent;
}
.proof .mono { color: var(--accent); }
.proof .fig { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); line-height: 1; color: var(--ink-deep); letter-spacing: -0.03em; margin: 0.5rem 0; }
.proof p { font-size: 0.98rem; color: var(--muted); }

/* pull quote */
.pull {
  font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.15rem);
  line-height: 1.32; font-weight: 300; letter-spacing: -0.015em;
  max-width: 24ch;
}
.pull-wide { max-width: 30ch; }
blockquote { margin: 0; }

/* independence list */
.indep { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule-soft); }
.indep li {
  padding: 1rem 0; border-bottom: 1px solid var(--rule-soft);
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  font-size: 1.02rem; color: var(--ink);
}
.indep li .no { font-family: var(--mono); font-size: 0.7rem; color: var(--faint); padding-top: 0.35em; letter-spacing: 0.1em; }
.tone-dark .indep, .tone-stone .indep { border-color: rgba(241,239,232,0.18); }
.tone-dark .indep li, .tone-stone .indep li { border-color: rgba(241,239,232,0.14); color: var(--sand); }

/* canonical lines block */
.canon { display: grid; gap: 0.4rem; }
.canon p { font-family: var(--voice); font-style: italic; font-size: clamp(1.2rem, 0.95rem + 1vw, 1.7rem); color: var(--sand); max-width: none; line-height: 1.4; }
.canon p .q { color: var(--gold); font-style: normal; font-family: var(--mono); font-size: 0.9rem; }

/* who we serve, expand-in-place (native <details>). The whole section stays a
   single scannable column of five rows; a row opens to its detail on demand.
   Content is baked in the HTML and toggled by the browser, so it works with JS
   off and stays legible to a crawler. */
.serve { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.serve-row { border-bottom: 1px solid var(--rule); }
.serve-row > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem); padding: 1.6rem 0;
}
.serve-row > summary::-webkit-details-marker { display: none; }
.serve-row .serve-key { display: flex; align-items: baseline; gap: clamp(1rem, 3vw, 2.25rem); }
.serve-row .index { flex: none; }
.serve-row h3 { color: var(--ink-deep); font-size: var(--t-h4); }
.serve-row summary:hover h3 { color: var(--accent); }
.serve-row > p { color: var(--muted); font-size: 1rem; max-width: 60ch; padding: 0 0 1.6rem 3.25rem; }
/* a plus that becomes a minus on open */
.serve-row .serve-toggle { flex: none; position: relative; width: 14px; height: 14px; align-self: center; }
.serve-row .serve-toggle::before,
.serve-row .serve-toggle::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: var(--accent); transform: translateY(-50%); }
.serve-row .serve-toggle::after { transform: translateY(-50%) rotate(90deg); }
.serve-row[open] .serve-toggle::after { transform: translateY(-50%) rotate(0deg); }
@media (prefers-reduced-motion: no-preference) {
  .serve-row .serve-toggle::after { transition: transform 0.25s var(--ease); }
  .serve-row[open] > p { animation: serve-in 0.35s var(--ease) both; }
  @keyframes serve-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* ----------------------------------------------------------------------------
   11. TIMELINE
   ---------------------------------------------------------------------------- */
.timeline { list-style: none; padding: 0; display: grid; gap: 0; position: relative; }
.timeline li {
  display: grid; grid-template-columns: clamp(5rem, 12vw, 9rem) 1fr;
  gap: clamp(1.25rem, 3vw, 3rem);
  padding: 1.75rem 0; border-top: 1px solid var(--rule); position: relative;
}
.timeline li:last-child { border-bottom: 1px solid var(--rule); }
.timeline .yr { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--accent); font-weight: 600; padding-top: 0.3rem; }
.timeline h3 { color: var(--ink-deep); margin-bottom: 0.5rem; max-width: 60ch; white-space: nowrap; font-size: var(--t-h4); font-weight: 400; }
.timeline p { color: var(--muted); font-size: 1rem; }

/* ----------------------------------------------------------------------------
   12. CTA BAND + FOOTER
   ---------------------------------------------------------------------------- */
.cta-band { text-align: left; }
.cta-band h2 { max-width: 20ch; margin-bottom: 2rem; }

.site-footer { background: var(--obsidian); color: var(--sand); padding-block: clamp(3rem, 6vw, 5rem); }
.site-footer .foot-top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-start; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(241,239,232,0.16); }
.site-footer .brand { color: var(--sand); }
.site-footer .brand .brand-mark { color: var(--gold); }
.foot-tag { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(241,239,232,0.55); margin-top: 0.6rem; line-height: 1.7; }
.foot-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.foot-nav a { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(241,239,232,0.7); }
.foot-nav a:hover { color: var(--gold); }
.foot-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.75rem; }
.foot-bottom p { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; color: rgba(241,239,232,0.58); text-transform: uppercase; max-width: none; }
.foot-bottom p + p { margin-top: 0; }

/* ----------------------------------------------------------------------------
   13. UTILITIES
   ---------------------------------------------------------------------------- */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--ink-deep); color: var(--sand); padding: 0.6rem 1rem; font-family: var(--mono); font-size: 0.75rem; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.tone-dark :focus-visible, .tone-stone :focus-visible { outline-color: var(--gold); }

.divider-note { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.35em 0.7em; border: 1px solid var(--rule); color: var(--muted); }
.tag--on { border-color: var(--c, var(--accent)); color: var(--c, var(--accent)); }

/* Progressive enhancement: only hide-then-reveal when JS is present. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ----------------------------------------------------------------------------
   14. RESPONSIVE
   ---------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: 1fr; }
  .hero-split { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
  /* Collapse every inline-defined multi-column grid to one column on phones.
     Many content sections set grid-template-columns inline (text + figure,
     two-column proofs), which overrides the class-based rules, so target the
     inline style directly. */
  .grid.gc-2, .grid.gc-9505, .grid.gc-8515, .grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .nav-links { display: none; }
  .nav-links.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: var(--sand); flex-direction: column; align-items: flex-start; gap: 0; padding: 0.5rem var(--gut) 1.5rem; border-bottom: 1px solid var(--rule); }
  .nav-links.open a { padding: 0.8rem 0; width: 100%; border-bottom: 1px solid var(--rule-soft); }
  .nav-links.open .nav-cta { margin-top: 0.75rem; }
  .nav-toggle { display: inline-flex; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 0.5rem; }
  .nav-toggle span { width: 22px; height: 1.5px; background: var(--ink); display: block; }
  /* .doors' desktop border lives on the individual doors now (see the TWO
     DOORS section), scoped to the row-1-only box that layout needs. Stacked
     single-column here, that split (owner=left edge, inst=right edge) would
     leave each door with an open side -- restore one box wrapping both
     doors, as the collapsed state had before, with the divider between them
     coming back as a border on the first door instead of the row-gap trick
     (row-gap is 0 now, for the desktop fix -- see the .doors comment). */
  .doors { grid-template-columns: 1fr; border: 1px solid var(--rule); }
  /* Reset the desktop explicit placement (see .doors comment in the TWO
     DOORS section): with only one column defined here, an explicit
     grid-column:2 on #door-institution would create an unwanted implicit
     second column instead of just stacking with everything else. auto
     lets normal source-order placement take over, which is what gives the
     mobile single-column stack its correct door/own-panel/door/own-panel
     order in the first place. */
  #door-owner, #door-institution, #scenario-band, #scenario-band-inst {
    grid-column: auto; grid-row: auto;
  }
  .door { border: 0; }
  #door-owner { border-bottom: 1px solid var(--rule); }
  .cols-2 { grid-template-columns: 1fr; }
  .statrow { grid-template-columns: 1fr; }
  .stat { padding-left: 0; }
  .serve-row > p { padding-left: 0; }
  .timeline li { grid-template-columns: 1fr; gap: 0.5rem; }
  .timeline h3 { white-space: normal; }
  .foot-top { flex-direction: column; }
}
@media (max-width: 400px) {
  /* Fix: .brand img is flex-shrink:0 (so the logo never distorts) and .nav
     has no wrap, so below ~355px the logo's rendered width plus the
     nav-toggle button no longer fit on one row -- the toggle gets pushed
     past the viewport edge, producing real horizontal page scroll (confirmed
     via documentElement.scrollWidth vs clientWidth, independent of the
     .subrail bar's own internal overflow-x). The logo's height is set
     inline on the <img> (style="height:4.5rem"), which beats an unqualified
     class rule, hence !important here rather than touching the nine
     duplicated header markups. Verified clear of overflow down to 280px
     with the logo at 2.6rem; still fully legible at that size. */
  .brand img { height: 2.6rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  a.link, .btn, .door { transition: none !important; }
}

/* ----------------------------------------------------------------------------
   15. PRINT  ·  a prospect may print Results or About
   ---------------------------------------------------------------------------- */
@media print {
  /* Keep the designed colors so dark sections stay readable on paper. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  /* Content must print even if the scroll reveal never fired. */
  .reveal { opacity: 1 !important; transform: none !important; }
  /* Drop interactive chrome that does not belong on a printout. */
  .site-header, .skip-link, .nav-toggle { display: none !important; }
  a { text-decoration: none; }
  .section, .section--tight, .hero { padding-block: 1.5rem !important; }
  .cta-band { page-break-inside: avoid; }
  figure, .card, .door, .proof, article, .timeline li { page-break-inside: avoid; }
}

/* ----------------------------------------------------------------------------
   16. MOTION + INTERACTION  ·  forward-looking, progressive, performant
   The whole layer is opt-in: it only animates when the browser supports it and
   the reader has not asked for reduced motion. Without it, every diagram is the
   same static, correct picture it is today. Only compositor-cheap properties
   move (opacity, transform, stroke-dashoffset on short paths). No layout shift.
   ---------------------------------------------------------------------------- */

/* Cross-document view transitions: a quiet cross-fade between pages (Chrome/Edge
   today; a normal instant navigation everywhere else). The sticky header keeps
   its identity across the change. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 0.22s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in 0.30s var(--ease) both; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
  @keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }

  /* Diagram draw-on-reveal. Paths carry pathLength="1" so a single
     dash rule draws any curve regardless of its real length. The figure gets
     .in from the same IntersectionObserver that runs the section reveals. */
  /* Initial (pre-reveal) states apply ONLY when JS is present to trigger them,
     so a no-JS browser sees every diagram fully drawn, never blank. */
  .js .fig-anim svg .draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.1s var(--ease);
    transition-delay: calc(var(--i, 0) * 0.11s);
  }
  .js .fig-anim svg .pop {
    opacity: 0;
    transform: scale(0.55);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.45s var(--ease), transform 0.5s var(--ease);
    transition-delay: calc(0.25s + var(--i, 0) * 0.09s);
  }
  .js .fig-anim svg .rise {
    opacity: 0;
    transition: opacity 0.7s var(--ease);
    transition-delay: calc(0.15s + var(--i, 0) * 0.06s);
  }
  .js .fig-anim.in svg .draw { stroke-dashoffset: 0; }
  .js .fig-anim.in svg .pop  { opacity: 1; transform: scale(1); }
  .js .fig-anim.in svg .rise { opacity: 1; }

  /* A whisper of scroll parallax on hero figures, only where the native
     scroll timeline exists. Off the main thread, no JS. */
  @supports (animation-timeline: scroll()) {
    .parallax { animation: par linear both; animation-timeline: scroll(root); animation-range: 0 55vh; }
    @keyframes par { to { transform: translateY(-14px); } }
  }
}

/* Interactive four-disciplines wheel: hover or tap a discipline to bring it
   forward and light its line to the estate; the others recede. Keyboard and
   touch reach it through real focus on each node. */
.dwheel .disc-node { cursor: pointer; }
.dwheel .disc-node * { transition: opacity 0.28s var(--ease); }
.dwheel .conn { transition: stroke-width 0.28s var(--ease), opacity 0.28s var(--ease); }
@media (hover: hover) {
  .dwheel:hover .disc-node > * { opacity: 0.32; }
  .dwheel .disc-node:hover > * { opacity: 1; }
  .dwheel .disc-node:hover .conn { stroke-width: 3.2; }
}
.dwheel:focus-within .disc-node > * { opacity: 0.32; }
.dwheel .disc-node:focus-visible > *,
.dwheel .disc-node.active > * { opacity: 1; }
.dwheel .disc-node.active .conn { stroke-width: 3.2; }
.dwheel .disc-node:focus { outline: none; } /* suppress default UA focus rect on the SVG <g> for BOTH mouse and keyboard focus; Chromium applies it even when :focus-visible is false for arbitrary tabindex elements. The node-ring below remains the visible indicator, scoped to keyboard use only. */
.dwheel .disc-node:focus-visible .node-ring { opacity: 1; }
.node-ring { opacity: 0; }

/* Copy panel below the wheel: shows the active discipline's own description
   (previously every node showed the same generic text). Sized to read easily
   without spanning the page, and slides to sit under whichever node is active. */
.disc-copy {
  margin-top: 1.25rem;
  margin-left: 0;
  max-width: 42ch;
  padding: 0.9rem 1.25rem;
  background: #F8F7F2;
  border-left: 3px solid var(--rule);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-deep);
  min-height: 3.4em;
  transition: margin-left 0.22s var(--ease), border-color 0.18s var(--ease);
}

/* Clickable architecture diagram (Home naming moment). Tarrick apex down to the
   MineralForce base. Every node is a real SVG link, so navigation needs no
   JavaScript and works with JS off. Hover or focus dims the other three
   disciplines and lights the relationship rails; touch simply navigates. The
   effect is decorative and never the only signal (the link set below is baked). */
.arch { width: 100%; height: auto; }
.arch .arch-node { cursor: pointer; }
.arch .arch-rel { opacity: 0.6; }
/* Focus and hover are always meaningful; only the easing is motion, so the
   transition is gated on reduced-motion while the state change itself is not. */
@media (prefers-reduced-motion: no-preference) {
  .arch .arch-disc,
  .arch .arch-rel { transition: opacity 0.28s var(--ease); }
}
.arch:focus-within .arch-disc { opacity: 0.4; }
.arch .arch-disc:focus-within { opacity: 1; }
.arch:focus-within .arch-rel { opacity: 1; }
@media (hover: hover) {
  .arch:hover .arch-disc { opacity: 0.4; }
  .arch .arch-disc:hover { opacity: 1; }
  .arch:hover .arch-rel { opacity: 1; }
}

/* The baked link set: the diagram's no-JavaScript finished state and a clean set
   of tap targets on a narrow screen. Reads as a labeled legend of the same links. */
.arch-linkset { margin-top: 1.5rem; }
.arch-linkset ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3rem);
}
.arch-linkset li { border-top: 1px solid var(--rule-soft); }
.arch-linkset a {
  display: flex; align-items: baseline; gap: 0.6em;
  padding: 0.65rem 0;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink); font-weight: 500;
  transition: color 0.2s var(--ease);
}
.arch-linkset a:hover { color: var(--accent); }
.arch-linkset .k { color: var(--muted); font-size: 0.62rem; flex: none; min-width: 6.5em; }
@media (max-width: 720px) {
  .arch-linkset ul { grid-template-columns: 1fr; }
}

/* Shadow Portfolio below-the-line rows (Home Fig. 2) and Methodology engagement-flow
   chips: real SVG links into their fuller treatment. Navigation needs no JavaScript.
   The below-the-line rows read as hidden value: dimmed by default, brought to full
   strength on hover or focus, using the same dim/light-on-interact opacity mechanism
   the .dwheel and .arch diagrams use elsewhere on this page. Decorative, never the
   only signal. */
.sp-row, .flow-chip { cursor: pointer; }
.sp-row > * { opacity: 0.45; }
@media (prefers-reduced-motion: no-preference) {
  .sp-row > *, .flow-chip rect, .flow-chip text { transition: opacity 0.24s var(--ease); }
}
@media (hover: hover) {
  .sp-row:hover > * { opacity: 1; }
  .flow-chip:hover { opacity: 0.82; }
}
.sp-row:focus-visible > * { opacity: 1; }

/* AI coda: a quiet end-of-page colophon into the AI story. Not navigation. */
.coda { border-top: 1px solid var(--rule); margin-top: 0.5rem; }
.coda-link {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(1rem, 3vw, 2.25rem); padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  transition: gap 0.3s var(--ease);
}
.coda-link:hover { gap: clamp(1.4rem, 3.6vw, 2.75rem); }
.coda-mark { width: 30px; height: 30px; flex: none; display: block; object-fit: contain; }
.coda-text .mono { color: var(--amber); margin-bottom: 0.35rem; }
.coda-text h3 { font-size: var(--t-h4); color: var(--ink-deep); max-width: 30ch; }
.coda-arrow { font-family: var(--mono); color: var(--amber); font-size: 1.4rem; }
@media (max-width: 720px) {
  .coda-link { grid-template-columns: auto 1fr; }
  .coda-arrow { display: none; }
}

/* ----------------------------------------------------------------------------
   17. SESSION 3 REFRAME  ·  per-page color identity, wayfinding, uniform cards
   ---------------------------------------------------------------------------- */

/* Per-page identity color (Item 5). Firm/Tarrick/MineralForce are neutral ground;
   Custos borrows Monitoring indigo (correct by identity); Herald is the one new coral. */
body[data-page="home"]        { --identity: var(--ink-deep); }
body[data-page="methodology"] { --identity: var(--ink-deep); }
body[data-page="results"]     { --identity: var(--herald); }
body[data-page="about"]       { --identity: var(--monitoring); }

/* Active-state nav in the page's identity color (Item 6). */
.nav-links a[aria-current="page"]::after { background: var(--identity, var(--amber)); }
/* Consistent header pattern: the hero eyebrow carries the page identity color (Item 6/7). */
.hero .eyebrow { color: var(--identity, var(--accent)); }
.hero .eyebrow::before { opacity: 0.8; }

/* Brand-colored name identifiers (Item 5/7): color pops as TEXT, never backgrounds. */
.id-herald { color: var(--herald); }
.tone-dark .id-herald, .tone-stone .id-herald { color: var(--herald-lt); }
.id-custos { color: var(--monitoring); }
.tone-dark .id-custos, .tone-stone .id-custos { color: var(--monitoring-lt); }

/* Way-back breadcrumb at the top of a diagram-deep-linked section (Item 6). */
.wayback {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500; color: var(--muted);
  margin-bottom: 1.25rem; transition: color 0.2s var(--ease);
}
.wayback::before { content: "\2039"; font-size: 1.1em; line-height: 1; }
.wayback:hover { color: var(--identity, var(--ink-deep)); }
.tone-dark .wayback, .tone-stone .wayback { color: rgba(241,239,232,0.6); }
.tone-dark .wayback:hover, .tone-stone .wayback:hover { color: var(--gold); }

/* Uniform stat-card spec (Item 7): one number/label treatment across the stat row
   and the Results proof callouts, so every figure reads from the same card. */
.proof .fig { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; margin: 0.4rem 0 0.6rem; }
.proof .fig sup { font-size: 0.5em; vertical-align: super; }
.proof .mono { margin-bottom: 0.2rem; }
.proof p { font-size: 0.9rem; line-height: 1.5; }
/* Engagement 05's provisional state uses the same card, dimmed, so it reads uniform-but-provisional. */
.proof.is-provisional .fig { color: var(--faint); }

/* ----------------------------------------------------------------------------
   18. UTILITIES (F3 lift)  ·  inline declarations appearing 3+ times sitewide.
   !important preserves exact cascade equivalence with the inline styles they
   replace (inline won over component rules); grid-column utilities omit it so
   the mobile-collapse media rule still wins. --i stagger indices stay inline. */
.c-stone { color:var(--stone) !important; }
.c-realization { color:var(--realization) !important; }
.c-forecasting { color:var(--forecasting) !important; }
.c-discovery { color:var(--discovery) !important; }
.c-monitoring { color:var(--monitoring) !important; }
.c-muted { color:var(--muted) !important; }
.c-inkdeep { color:var(--ink-deep) !important; }
.bc-realization { border-color:var(--realization) !important; }
.bc-forecasting { border-color:var(--forecasting) !important; }
.bc-discovery { border-color:var(--discovery) !important; }
.blc-discovery { border-left-color:var(--discovery) !important; }
.blc-realization { border-left-color:var(--realization) !important; }
.blc-forecasting { border-left-color:var(--forecasting) !important; }
.blc-monitoring { border-left-color:var(--monitoring) !important; }
.mb-12 { margin-bottom:1.2rem !important; }
.mb-25 { margin-bottom:2.5rem !important; }
.mb-20 { margin-bottom:2rem !important; }
.mb-175 { margin-bottom:1.75rem !important; }
.mt-15 { margin-top:1.5rem !important; }
.mt-10 { margin-top:1rem !important; }
.mt-175 { margin-top:1.75rem !important; }
.mt-05 { margin-top:0.5rem !important; }
.mt-20 { margin-top:2rem !important; }
.mt-09 { margin-top:0.9rem !important; }
.mt-04 { margin-top:0.4rem !important; }
.m-disch2 { margin:0.8rem 0 0.6rem !important; } /* F4: isolate the methodology discipline anchor h2 */
.m-heroh1 { margin:1.5rem 0 1.6rem !important; }
.mw-16ch { max-width:16ch !important; }
.mw-26ch { max-width:26ch !important; }
.mw-44rem { max-width:44rem !important; }
.mw-18ch { max-width:18ch !important; }
.mw-max { max-width:var(--maxw) !important; }
.mw-44ch { max-width:44ch !important; }
.mw-20ch { max-width:20ch !important; }
.pad-card { padding:clamp(2.5rem,5vw,4rem) !important; } /* F4: more room in the results engagement cards */
.pt-0 { padding-top:0 !important; }
.p-0 { padding:0 !important; }
.bd-0 { border:0 !important; }
.bd-rule { border:1px solid var(--rule); } /* no !important: residual inline border-top accent must win */
.bg-sand { background:var(--sand) !important; }
.gc-2 { grid-template-columns:1fr 1fr; }
.gc-9505 { grid-template-columns:0.95fr 1.05fr; }
.gc-8515 { grid-template-columns:0.85fr 1.15fr; }
.gap-lg { gap:clamp(2.5rem,5vw,5rem) !important; } /* F4: more column air in the dense bands */
.gap-xl { gap:clamp(2rem,5vw,4.5rem) !important; }
.ai-center { align-items:center !important; }
.ai-start { align-items:start !important; }
.tt-none { text-transform:none !important; }
.ls-04 { letter-spacing:0.04em !important; }
.fs-085 { font-size:0.85rem !important; }
.fs-064 { font-size:0.64rem !important; }
.fs-098 { font-size:0.98rem !important; }

/* ----------------------------------------------------------------------------
   19. F4/F5 RHYTHM VARIATION (v22)  ·  band-tone alternation, anchor scale
   contrast, and a short discipline-colored lead-rule at each dense-band anchor.
   All utility swaps / new utilities on the locked palette; no component-rule
   fights, no copy edits, no added padding beyond the F4 air already in place.
   ---------------------------------------------------------------------------- */

/* Lever 1 · band-tone alternation. The Results engagement cards were five sand
   panels in a row; each now sits on its own faint discipline tint, alternated
   tint / sand / tint / sand / tint so no two consecutive cards share a ground
   (the tint always matches the card's own border-top discipline). Methodology's
   discipline bands already carry these tints inline, so this only serves Results. */
.bg-discovery   { background:var(--discovery-bg)   !important; }
.bg-realization { background:var(--realization-bg) !important; }
.bg-forecasting { background:var(--forecasting-bg) !important; }

/* Lever 2 · scale contrast on the first-glance anchor. Discipline / engagement
   h2 anchors step up from --t-h2 (3.2rem cap) toward, but short of, the hero
   --t-h1, so one element clearly wins each band; the proof/stat figures on the
   Results page step up in turn so the number wins there. Supporting text is
   untouched. .st-2 gives a two-figure stat row room to grow to the larger size. */
.anchor-lg { font-size:clamp(2.3rem, 1.6rem + 2.9vw, 3.9rem) !important; }
.fig-xl    { font-size:clamp(2.5rem, 1.7rem + 3.0vw, 4.1rem) !important; }
.st-2      { grid-template-columns:1fr 1fr !important; }
/* .st-2 forces two-up at every width, including phones, defeating .statrow's
   own mobile collapse (see the max-width:720px block above -- placed AFTER
   this rule in source order deliberately: both are !important same-specificity
   .st-2 selectors, so with importance and specificity tied it's source order
   that decides, and a media override earlier in the file would lose to this
   unconditional one). Two nowrap .fig-xl figures ($3.5M+, 11x) don't fit
   side by side under ~330px -- forcing it either pushed the row past its box
   (pre-fix) or, once merely contained without addressing this, overlapped
   the two figures on top of each other. */
@media (max-width: 720px) { .st-2 { grid-template-columns: 1fr !important; } }

/* Lever 3 · discipline color as band identity. A short colored lead-rule opens
   each dense-band anchor in that discipline's color, so every band opens with a
   cue the next band changes. Square to match the hard-edged system, never rounded. */
.lead-rule::before {
  content:""; display:block;
  width:2.75rem; height:3px;
  background:var(--accent);
  margin-bottom:1.1rem;
}
.lr-discovery::before   { background:var(--discovery); }
.lr-realization::before { background:var(--realization); }
.lr-forecasting::before { background:var(--forecasting); }
.lr-monitoring::before  { background:var(--monitoring); }

/* ----------------------------------------------------------------------------
   20. HERO COLLAPSE (NavAB build)  ·  index-only layout tighten so the entry-path
   section ("Two ways in") crests the 1440x900 fold. Hero Option A CONTENT is
   unchanged; this is layout only (type scale + internal spacing + figure scale),
   scoped to the home page so no other hero moves. Not a lock reopen.
   ---------------------------------------------------------------------------- */
/* Clamp lows are held near the v23 values so mobile only tightens modestly;
   the reductions land at desktop widths, where the fold matters. */
body[data-page="home"] .hero { padding-top: clamp(3rem, 7vw, 6rem); } /* matches methodology.html's hero top padding exactly (shared .hero rule, no page override there) */
body[data-page="home"] .hero .eyebrow { margin-bottom: 1.1rem; }
body[data-page="home"] .hero .h-display { font-size: 3.8rem; line-height: 1.06; }
body[data-page="home"] .hero h1,
body[data-page="home"] .hero .lead,
body[data-page="home"] .hero .mono,
body[data-page="home"] .hero .c-muted { color: #1C1A17; }
@media (max-width: 900px) {
  body[data-page="home"] .hero .h-display { font-size: 3.1rem; }
}
@media (max-width: 720px) {
  body[data-page="home"] .hero .h-display { font-size: 2.5rem; }
}

/* ----------------------------------------------------------------------------
   21. SUB-BRAND SPINE RAIL (standing nav; Arm B won the A/B). The approved rail
   mock lifted into tokenized component classes per the F3 discipline (no raw
   mock hex; locked tokens only). Sitewide on desktop (>=1106px, reopened
   2026-09-16 -- see below); hidden below, where the top strip carries
   navigation on its own. On methodology the
   items are in-page anchors with a scroll-spy (site.js); on other pages they are
   cross-page links with no active state. Standing discipline: the rail carries
   the SYSTEM (two ways in, the disciplines, the layers); the top strip carries
   the SITE PAGES. They never share a destination.
   ---------------------------------------------------------------------------- */
.subrail { display: none; }
/* Breakpoint REOPENED 2026-09-16 at Amanda's direction, final value 1106 --
   this was "LOCKED at 960" as of the previous pass (see PR #37), which
   fixed the top nav's own overflow independently of this breakpoint rather
   than moving it. Amanda reviewed that result and asked for a different
   trade: nav-link type never shrinks gradually, and this breakpoint moves
   to whatever width the top nav actually needs clear of its own 196px
   padding, rather than holding 960 fixed. Went through two corrections
   before landing here, both from measuring the real page instead of
   trusting an easier-to-compute proxy: 1400 first (six links + CTA needing
   to fit as ONE row, the >=1400px case in HEADER / NAV above -- correct for
   that case, but not this breakpoint), then a check at plain 960 showed
   six full-size links with CTA-below-row still broke onto a third line
   once this rule's 196px padding actually applied there, which the
   858px-with-no-padding number from HEADER / NAV had not accounted for.
   1106 is the real number: it's exactly where six full-size links (CTA
   already on its own row below them) fit one row WITH this rule's 196px
   padding subtracted -- confirmed directly, not assumed, the same way the
   1400/1014 gap was confirmed. Below 1106px the top nav runs a four-state
   scheme in HEADER / NAV above (CTA on its own row from 721-1399px, split
   internally at 858px between the rail's bottom-bar and sidebar forms with
   no layout change of its own; links flat-shrunk to 0.51rem only in the
   narrow 721-857px band where even six full-size links alone don't fit one
   row). */
@media (min-width: 1106px) {
  body { padding-left: 196px; }
  .subrail {
    display: block;
    position: fixed; left: 0; top: 0; bottom: 0; width: 196px; z-index: 40;
    background: var(--sand);
    border-right: 1px solid var(--rule);
    padding: 92px 0 24px;
    overflow-y: auto;
  }
}
.subrail__group {
  padding: 1.15rem 1.15rem 0.4rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600; color: var(--ink);
}
.subrail__item + .subrail__group { margin-top: 0.6rem; }
.subrail__item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 1.15rem;
  text-decoration: none;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 500; color: var(--ink);
  border-left: 3px solid transparent;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.subrail__item svg { flex: none; width: 26px; height: 26px; }
.subrail__item:hover { background: rgba(44, 42, 37, 0.05); }
.subrail__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.subrail__item.is-active {
  background: rgba(44, 42, 37, 0.05);
  border-left-color: var(--edge, var(--accent));
  color: var(--ink-deep);
}
/* Mobile bottom rail (Chad 2026-07-13): below the sidebar breakpoint the
   rail is not gone, it moves to a fixed bottom bar. Same markup, same ten
   destinations, icon over label, horizontal scroll with snap. Group labels
   hide (the icons and labels carry). Body gets bottom padding so content
   and footer clear the bar; iOS safe-area respected. Breakpoint moved from
   960 to 1400 and then to its final value, 1106, 2026-09-16 alongside the
   sidebar rule above -- this styles the below-breakpoint side only, and
   has to move with it or the two forms would overlap or gap. */
@media (max-width: 1105.98px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .subrail {
    display: flex; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto;
    height: calc(76px + env(safe-area-inset-bottom, 0px));
    padding: 0 0 env(safe-area-inset-bottom, 0px) 0;
    z-index: 40;
    background: var(--sand);
    border-top: 1px solid var(--rule); border-right: 0;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .subrail::-webkit-scrollbar { display: none; }
  .subrail__group { display: none; }
  .subrail__item + .subrail__group { margin-top: 0; }
  .subrail__item {
    flex: none; scroll-snap-align: start;
    flex-direction: column; justify-content: center; gap: 0.3rem;
    min-width: 84px; padding: 0.5rem 0.6rem;
    text-align: center; font-size: 0.56rem; letter-spacing: 0.05em;
    border-left: 0; border-top: 3px solid transparent;
  }
  .subrail__item svg { width: 22px; height: 22px; margin: 0 auto; }
  .subrail__item span { display: block; }
  .subrail__item.is-active { border-top-color: var(--edge, var(--accent)); border-left-color: transparent; }
}

/* Reduced motion: native anchor jumps instead of smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Chart SVG text is a fixed small font-size in SVG units, so it shrinks
   with the container on narrow screens. 13px landed as the fix after a
   phone-viewport screenshot check -- see mobile-fixes-batch-1 PR notes. */
@media (max-width: 720px) {
  section[aria-labelledby="cc-h"] svg text { font-size: 13px !important; }
  section[aria-labelledby="eng-h"] svg text { font-size: 13px !important; }
}

/* Rail-aware column collapse for .cols-4 removed 2026-09-16: it existed only
   because the spine rail used to engage at 960px, forcing 4-up card grids to
   reflow to 2-up one step earlier (960-1180px) than their natural 900px
   collapse, or they'd overrun the rail-narrowed content column. The rail's
   breakpoint moved twice more the same day (1400, then its final value,
   1106 -- see SUB-BRAND SPINE RAIL below); re-measured fresh against 1106
   rather than assuming either prior answer still held, directly on
   about.html and results.html (the only .cols-4 users): 4-up still fits
   unaided across the whole 901-1650px range checked, rail included, so no
   compensation is needed at 1106 either. .cols-4's own separate
   breakpoint-gap issue (901-959px falling through to the base rule, same
   shape PR #36 fixed for .scenarios) is unrelated and still open. */

/* ----------------------------------------------------------------------------
   22. SCENARIO BAND (individual translation layer, index only). Four situation
   cards under the two doors, each routing to the discipline section where that
   work lives + its FAQ group. Tokenized, locked palette. Route TEXT is ink-deep
   (the forecasting/amber discipline color fails AA as small text on sand); the
   discipline identity is carried by the card's top edge and the route marks,
   which clear the 3:1 graphics bar. Reflows 4->2 up at 1180px (see .scenarios
   below; not tied to the rail breakpoint, PR #36 removed that coupling).
   The --collapsed / --revealed states drive Variant B (expand-under-door);
   Variant A never sets them, so the band stays static.
   ---------------------------------------------------------------------------- */
.scen-eyebrow { margin-bottom: 1.75rem; }
.scenarios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.5rem); align-items: stretch; }
@media (max-width: 1180px) { .scenarios { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .scenarios { grid-template-columns: 1fr; } }

.scenario-card {
  display: flex; flex-direction: column;
  height: 100%;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--sand);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--c, var(--accent));
}
.scenario-q {
  font-family: var(--voice); font-style: italic;
  font-size: 1.12rem; line-height: 1.32; color: var(--ink-deep);
  margin-bottom: 0.7rem;
  min-height: 2.64em;
}
.scenario-body { font-size: 0.96rem; line-height: 1.55; color: var(--ink); margin-bottom: 1.1rem; }
.scenario-route {
  margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--rule);
  font-weight: 700; color: var(--ink-deep); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.55rem;
}
.scenario-route::before { content: ""; width: 0.85rem; height: 3px; flex: none; background: var(--c, var(--accent)); }
.scenario-route::after { content: "\2192"; color: var(--c, var(--accent)); }
.scenario-route:hover { text-decoration: underline; }
.scenario-route:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.scenario-faq {
  margin-top: 0.55rem;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.scenario-faq::after { content: " \2192"; }
.scenario-faq:hover { color: var(--ink-deep); }
.scenario-faq:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.scen-close { margin-top: 1.5rem; letter-spacing: 0.05em; color: var(--muted); }

/* Variant B (expand-under-door): band collapsed by JS on load (no-JS keeps it
   visible), expands in place on the door trigger, stays open, no scroll-jump. */
.scenario-band--collapsed { display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* backwards (not both): holds the pre-start state during the stagger delay so
     there is no flash, but does NOT retain the end transform, which would
     otherwise override the :hover lift once the reveal finishes. */
  .scenario-band--revealed .scenario-card { animation: scenIn 0.42s var(--ease) backwards; }
  .scenario-band--revealed .scenario-card:nth-child(2) { animation-delay: 0.05s; }
  .scenario-band--revealed .scenario-card:nth-child(3) { animation-delay: 0.1s; }
  .scenario-band--revealed .scenario-card:nth-child(4) { animation-delay: 0.15s; }
}
@keyframes scenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------------------
   23. FAQ PAGE (faq.html). Native <details>/<summary> accordion: keyboard and
   no-JS support for free, no open/close motion. Tokenized, locked palette.
   ---------------------------------------------------------------------------- */
.faq-grp-h { font-size: var(--t-h3); max-width: 30ch; margin-bottom: 1.4rem; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-group .faq-item:first-of-type { border-top: 1px solid var(--rule); }
.faq-q {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.1rem 0;
  font-family: var(--voice); font-size: 1.16rem; line-height: 1.35; color: var(--ink-deep);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: "+"; flex: none;
  font-family: var(--mono); font-size: 1.5rem; line-height: 1; color: var(--accent);
  transition: transform 0.2s var(--ease);
}
details[open] > .faq-q::after { transform: rotate(45deg); }
.faq-q:hover { color: var(--stone); }
.faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.faq-a { padding: 0 0 1.4rem; max-width: 68ch; }
.faq-a p { color: var(--ink); line-height: 1.66; }
.faq-close {
  color: var(--ink-deep);
  text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px;
}
.faq-close:hover { text-decoration-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .faq-q::after { transition: none; } }

/* ----------------------------------------------------------------------------
   24. UNIFIED CARD HOVER (Chad): every card lifts the same way the doors do.
   Pure CSS, no JS. Gated on hover-capable pointers and reduced motion, so touch
   devices and reduced-motion users get no transform. The doors already carry
   this (section 9); here it extends to the content, scenario, and layer cards
   so card hover is one behavior sitewide. Shadow tuned for the light grounds. */
@media (prefers-reduced-motion: no-preference) {
  /* .js-prefixed so the transform speed (0.25s, matching the doors) overrides the
     reveal's 0.7s transform transition on cards that carry .reveal; opacity stays
     at 0.7s so the scroll-reveal fade is unchanged. */
  .js .card, .js .scenario-card, .js .discipline,
  .card, .scenario-card, .discipline {
    transition: opacity 0.7s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.3s var(--ease);
  }
}
@media (hover: hover) {
  /* .js-prefixed so this outranks `.js .reveal.in { transform: none }` (equal
     specificity, later source) on cards that also carry .reveal; the bare
     selector is the no-JS fallback. Matches the doors' lift exactly. */
  .js .card:hover, .js .scenario-card:hover, .js .discipline:hover,
  .card:hover, .scenario-card:hover, .discipline:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(44, 42, 37, 0.10);
  }
}

/* FAQ group-header discipline links (copy v4, option A): each group header links
   to its methodology discipline. Quiet per the band pattern: the heading keeps
   its ink color and a small discipline-colored arrow (var(--c) from the .disc
   class on the h2) signals where it goes; underline on hover. */
.faq-grp-link { color: inherit; text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.4rem; }
.faq-grp-link::after { content: "\2192"; font-size: 0.6em; color: var(--c, var(--accent)); }
.faq-grp-link:hover { text-decoration: underline; text-decoration-color: var(--c, var(--accent)); text-underline-offset: 4px; }
.faq-grp-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }


/* ----------------------------------------------------------------------------
   25. DOORS HEADER (Chad 2026-07-14): Individual and Institution both stay fully
   open at all times; their info never collapses. The h3 > button header is the
   keyboard/AT control that reveals that lane's scenario band (aria-controls names
   the band; site.js also makes the whole card the click target). The caret points
   down when the lane is quiet and up once its boxes show (aria-expanded). No new
   colors, existing tokens only.
   ---------------------------------------------------------------------------- */
.door-h { font-size: var(--t-h3); max-width: 18ch; }
.door-head { display: inline-flex; align-items: baseline; gap: 0.6rem;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left; }
.door-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.door-head .door-caret { width: 0.42em; height: 0.42em; flex: none;
  border-right: 2px solid var(--stone); border-bottom: 2px solid var(--stone);
  transform: rotate(45deg); transition: transform 0.2s var(--ease); }
.door-head[aria-expanded="true"] .door-caret { transform: rotate(225deg); }
.door-body { display: flex; flex-direction: column; gap: 1rem; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .door-head .door-caret { transition: none; } }

/* ----------------------------------------------------------------------------
   26. RESULTS STORY (results.html, Engagement 01): a stepped iceberg story. The
   iceberg is the progress spine (locked palette hex, matching the SVG-inline
   convention used by the compounding chart). Five beats sit on a persistent
   progress rail; JS shows one beat at a time and lights the iceberg cumulatively.
   No-JS: the .is-stepped class is never added, so all beats stay visible stacked,
   the iceberg shows every component, Prev/Next hide, and the rail anchors act as
   plain in-page jump links. Reduced-motion: transitions off, changes are instant.
   Discipline identity is carried by edges, dots, and iceberg marks (all graphics,
   >= 3:1); all beat/rail TEXT is ink-deep or muted so it clears AA on sand.
   ---------------------------------------------------------------------------- */
.story-intro { max-width: 60ch; }
.story { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; margin-top: 1.9rem; }
/* minmax(0, 1fr), not a bare 1fr: the Result beat's two-up stat row
   (.st-2, forced 2 columns even here) holds nowrap figures ($3.5M+, 11x)
   wide enough to become the column's min-content floor. A bare 1fr track
   can't shrink below that, so it stretched to ~284px against the
   container's ~222px, taking the iceberg SVG and the story-rail legend
   (siblings in the same single-column track) with it -- both overflowed
   the box at the Result step specifically. minmax(0, ...) lets the track
   shrink to the container's actual width regardless of that child. */
@media (max-width: 720px) { .story { grid-template-columns: minmax(0, 1fr); } }

.iceberg { margin: 0; }
.iceberg svg { display: block; width: 100%; height: auto; max-width: 320px; margin: 0 auto; }
@media (max-width: 720px) {
  /* The 320px cap is why the graphic doesn't use the full phone width;
     removing it also makes the SVG's own text bigger, since it scales
     with the container. */
  .iceberg svg { max-width: none; }
}
.iceberg text { font-family: var(--mono); }

/* Progress rail: anchors that step in place (JS) or jump (no-JS). */
.story-rail { list-style: none; padding: 0; margin: 0 0 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
@media (max-width: 720px) {
  /* Spreads the five step labels edge-to-edge instead of clustering left. */
  .story-rail { justify-content: space-between; gap: 0.5rem 0.25rem; }
}
.story-stop { display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  padding: 0.3rem 0; border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.story-stop-dot { width: 0.6rem; height: 0.6rem; flex: none; border-radius: 50%;
  background: var(--c, var(--slate)); opacity: 0.4; transition: opacity 0.2s var(--ease); }
.story-stop:hover { color: var(--ink-deep); }
.story-stop.is-current { color: var(--ink-deep); border-bottom-color: var(--c, var(--accent)); }
.story-stop.is-current .story-stop-dot, .story-stop.is-done .story-stop-dot { opacity: 1; }
.story-stop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Beats. No-JS default: all visible, stacked, each with its numbered heading. */
.beat { border-left: 3px solid var(--c, var(--rule)); padding-left: 1.15rem; }
.beat--result { border-left-color: var(--accent); }
.beat + .beat { margin-top: 1.9rem; }
.beat-step { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.beat-disc { display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-deep); font-weight: 600; margin-top: 0.3rem; }
.beat-disc::before { content: ""; width: 0.7rem; height: 0.7rem; flex: none; background: var(--c, var(--accent)); }
.beat-h { font-size: var(--t-h4); margin: 0.5rem 0 0.65rem; color: var(--ink-deep); }
.beat-body { color: var(--ink); line-height: 1.66; max-width: 52ch; }
.story-detail-link { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; }

/* Prev/Next + step counter. Hidden until JS enables the stepper. */
.story-nav { display: none; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.9rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.story-btn { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.6rem 1.15rem; background: none;
  border: 1px solid var(--rule); color: var(--ink-deep); cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.story-btn:hover { border-color: var(--accent); }
.story-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.story-btn[disabled] { opacity: 0.4; cursor: default; }
.story-btn[disabled]:hover { border-color: var(--rule); }
@media (max-width: 720px) {
  /* Prev/Next give way to swipe on mobile; the step counter stays visible. */
  .story-nav .story-btn { display: none; }
}
.story-progress { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.1em; }
.story-swipe-hint { display: none; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.1em; }
@media (max-width: 720px) {
  .story-swipe-hint { display: block; text-align: center; margin-top: 0.5rem; }
}

/* Stepped mode (JS on): one beat shown, Prev/Next visible, iceberg lights up
   cumulatively as the reader advances; the waterline erases at the Result beat. */
.story.is-stepped .story-nav { display: flex; }
.story.is-stepped .beat { display: none; }
.story.is-stepped .beat.is-active { display: block; }
.story.is-stepped .beat + .beat { margin-top: 0; }
.story.is-stepped .berg-item { opacity: 0.12; transition: opacity 0.5s var(--ease); }
.story.is-stepped .berg-item.lit { opacity: 1; }
.story.is-stepped .berg-water { transition: opacity 0.5s var(--ease); }
.story.is-stepped.is-result .berg-water { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .story.is-stepped .berg-item, .story.is-stepped .berg-water,
  .story-stop, .story-stop-dot, .story-btn { transition: none; }
}

/* ----------------------------------------------------------------------------
   TWO DOORS + its expanding scenario bands: dark tone override (main content
   only, not the subrail sidebar which has its own "Two ways in" label).
   Eyebrow, link, and tag/accent colors are left as-is per spec; everything
   else reads as sand-on-obsidian.
   ---------------------------------------------------------------------------- */
.tone-doors-dark { background: #2C2A25; }
.tone-doors-dark h2,
.tone-doors-dark h3,
.tone-doors-dark .door-h,
.tone-doors-dark p,
.tone-doors-dark .index { color: #F1EFE8; }
section[aria-labelledby="doors-h"] { margin-top: 3rem; padding-bottom: 0; }
#scenario-band, #scenario-band-inst { padding-top: 1.25rem; }
.tone-doors-dark .eyebrow { color: #BA7517; }
.tone-doors-dark .scenario-card { background: #2C2A25; }
.door--owner .door-accent { color: #5DCAA5 !important; }
.door--inst .door-accent { color: #85B7EB !important; }
.tone-doors-dark .disc--realization { --c: #5DCAA5; }
.tone-doors-dark .disc--discovery { --c: #85B7EB; }
.tone-doors-dark .scenario-route { color: #F1EFE8; white-space: normal; }
.tone-doors-dark .door,
.tone-doors-dark .door:hover { background: rgba(241, 239, 232, 0.06); }
.tone-doors-dark .door-head .door-caret { border-right-color: #F1EFE8; border-bottom-color: #F1EFE8; }

/* ABOUT PAGE: "How the firm arrived here" timeline section override */
#arrived-section { background: #F8F7F2; }
#arrived-section .eyebrow,
#arrived-section h2,
#arrived-section h3,
#arrived-section p { color: #2C2A25; }

/* ABOUT PAGE: hero bottom padding (scoped so it doesn't affect the home hero) */
body[data-page="about"] .hero { padding-bottom: 4rem; }

/* ABOUT PAGE: "What the firm owns" cards — give the label a fixed min-height so
   paragraph text starts at the same line whether the label wraps to one or two lines. */
section[aria-labelledby="built-h"] .card > p:first-child { min-height: 3.2rem; }
section[aria-labelledby="built-h"] .card p:not(:first-child) { color: #2C2A25; }

/* METHODOLOGY PAGE: discipline sections — exact row-based alignment so the left
   column's paragraph text and the right column's list start on the same line,
   regardless of how tall the header block (wayback link + index + qualifier + h2)
   happens to be. Robust to content changes, unlike a guessed margin-top offset. */
.disc-head { grid-column: 1; grid-row: 1; }
.disc-body { grid-column: 1; grid-row: 2; }
.disc-side { grid-column: 2; grid-row: 2; }
@media (max-width: 900px) {
  .disc-head, .disc-body, .disc-side { grid-column: 1; grid-row: auto; }
}

/* METHODOLOGY PAGE: hero bottom padding (scoped so it doesn't affect other pages' heroes) */
body[data-page="methodology"] .hero { padding-bottom: 4rem; }

/* METHODOLOGY PAGE: reduce the row-gap between the discipline header (row 1) and
   the paragraph/list row (row 2), while keeping the wider column-gap between
   the left and right columns from .gap-lg. */
.disc .grid.gc-8515.gap-lg { row-gap: 0.75rem !important; column-gap: clamp(2.5rem, 5vw, 5rem) !important; }

/* METHODOLOGY PAGE: center the engagement-flow diagram within its sand container */
section[aria-labelledby="flow-h"] figure svg { display: block; margin-inline: auto; max-width: 100%; }

/* RESULTS PAGE: hero bottom padding (scoped so it doesn't affect other pages' heroes) */
body[data-page="results"] .hero { padding-bottom: 4rem; }

/* RESULTS PAGE: engagement sections — proof/stat caption text was still using the
   sitewide muted gray; convert to stone within the engagement content specifically. */
.eng-section .proof p, .eng-section .stat .lab { color: #2C2A25; }

/* RESULTS PAGE: "What we've found" cards — the site-wide cols-4 breakpoint (900px)
   left a wide 900-1240px range where 4 columns were forced into a cramped width,
   causing "Indefinitely" and "Every cycle" to overflow. Scoped earlier breakpoint
   (1200px) for just this grid, plus a lower font-size floor for extra margin. */
section[aria-labelledby="po-h"] .fig { font-size: clamp(1rem, 0.8rem + 0.6vw, 1.3rem) !important; }
@media (max-width: 1200px) {
  section[aria-labelledby="po-h"] .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Phones: .cols-4 has a 900px breakpoint (4->2) but nothing narrower, so
   phones were stuck at 2-up. Covers both the generic .cols-4 (about.html
   "What the firm owns") and the po-h-scoped override above (results.html
   "What we see across estates"), which needs its own entry here since it
   otherwise ties the base .cols-4 rule on specificity. */
@media (max-width: 720px) {
  .cols-4, section[aria-labelledby="po-h"] .grid.cols-4 { grid-template-columns: 1fr; }
}

/* RESULTS PAGE: "What we've found" cards — header figure gold + bold, paragraph stone */
section[aria-labelledby="po-h"] .card .fig { color: #BA7517 !important; font-weight: 700; }
section[aria-labelledby="po-h"] .card p { color: #2C2A25; }

/* RESOURCES PAGE: glossary definition list, nested inside the group-level
   accordions (.glossary-group reuses .faq-item/.faq-q for the fold behavior). */
.glossary-group .faq-q { font-size: 1.02rem; }
.glossary-list { display: grid; gap: 1.1rem; padding-top: 0.5rem; }
.glossary-list dt { font-family: var(--voice); font-weight: 500; color: var(--ink-deep); font-size: 1.02rem; margin-bottom: 0.25rem; }
.glossary-list dd { margin: 0; color: var(--ink); line-height: 1.6; max-width: 62ch; }

/* RESOURCES PAGE: preserve the gap the removed hero divider was providing */
body[data-page="faq"] .hero { padding-bottom: 1.5rem; }
/* RESOURCES PAGE: tighten the padding between consecutive FAQ groups */
.faq-group { padding-block: clamp(1.5rem, 3vw, 2.5rem) !important; }