/* ============================================================
   PROPOSAL A — "The institutional record"
   Session 3a · FEAT-013 · a-institutional-record

   Argument: this reads as a consultancy that publishes evidence —
   quiet, precise, confident without volume. Hairline rules, a strict
   numbered register, generous whitespace, colour spent only where it
   marks something real. Motion is slow and simple: opacity + a short
   rise, never a bounce, never a lift.

   Loaded LAST on every page (after subpages.css, or after
   overrides.css on index.html, which never loads subpages.css).
   Nothing here edits components.css/base.css/tokens.css/nav.js/
   main.js — every rule is a same-specificity re-declaration that
   wins on source order, so the DOM-CONTRACT stays intact.

   No word of copy is added, removed or reworded anywhere below.
   Generated content (`content: …`) is restricted to bare digits,
   hairline glyphs and punctuation — never a new word or phrase.

   Contents
     1. Global register — hairline seam, restrained CTA
     2. Dropdown navigation — the indexed panel
     3. RESPECT — home teaser (#approaches)
     4. RESPECT — inside page (respect-approach.html)
     5. Widening Our Scope — home teaser (#scope)
     6. Widening Our Scope — catalogue (widening-our-scope.html)
     7. Reduced motion — full static fallback
   ============================================================ */

/* ---------- 1 · Global register ----------
   base.css's .seam::before is a glowing jade gradient tick — a nice
   idea, wrong register. The institutional read wants a plain hairline: the
   kind of rule a printed annual report draws between sections, not a
   glow. Same element, same position, no new markup. */
.seam::before {
  width: 1px;
  height: var(--space-xl);
  background: var(--border);
  opacity: 1;
}

/* The home teaser's CTA is the one button this proposal restyles —
   scoped to its own wrapper, not a global .btn change, so every other
   button on the bundle (including the hero's, the one loud moment)
   is untouched. Outline over fill: jade is spent on the label only.

   Superseded 2026-08-20: the teaser's CTA is now the shared .read-more
   affordance (overrides.css § 3), so that button restyle is gone — there
   is no .btn left inside .respect-teaser__cta to style. */

/* ============================================================
   2 · Dropdown navigation — the indexed panel

   The competing idea: a submenu is a table of contents, not a
   marketing flyout. The panel is a flat sheet with a single top rule
   standing in for a letterhead, and open/close is a slow, plain fade —
   no lift, no glow, no colour fill on hover.

   ⚠️ The running `01 / 02 / 03` counter was REMOVED 2026-08-19 (owner).
   A number is only honest on a list the reader moves through in order,
   and a nav panel is a set of doors, not a sequence — so the digits
   were labelling nothing. Do not reinstate them.
   ============================================================ */

.nav__disclosure { border-radius: 2px; }
.nav__disclosure:hover,
.nav__disclosure:focus-visible { background: transparent; color: var(--jade-300); }
.nav__item.is-open > .nav__disclosure { color: var(--jade-300); }
.nav__disclosure svg { transition: transform var(--dur-mid) var(--ease-out); }

@media (min-width: 961px) {
  .nav__submenu {
    border-radius: 2px;
    border-color: var(--border);
    border-top: 2px solid var(--jade-400);
    box-shadow: var(--shadow-sm);
    padding: 0.2rem;
    transition: opacity var(--dur-mid) var(--ease-out),
                transform var(--dur-mid) var(--ease-out);
  }
  .nav__submenu li { border-bottom: 1px solid var(--border-soft); }
  .nav__submenu li:last-child { border-bottom: 0; }
  .nav__submenu a {
    display: flex;
    align-items: baseline;
    border-radius: 0;
    font-size: var(--step--1);
    letter-spacing: 0.01em;
  }
  .nav__submenu a:hover,
  .nav__submenu a:focus-visible {
    background: transparent;
    color: var(--text-100);
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 0.2em;
  }
}

@media (max-width: 960px) {
  .nav__submenu a {
    display: flex;
    align-items: baseline;
  }
}

/* ============================================================
   3 · RESPECT — home teaser (#approaches)

   No rows here (the teaser is a teaser, plan-frozen). The device is
   typographic: the client's own line — "Read. Engage. Strengthen.
   Place. Extend. Center. Track." — reset from an italic sentence into
   a tracked, mono index line between two hairlines, so it reads as a
   stamped register of the seven stages rather than a sentence to skim
   past. Not one character of it is touched.
   ============================================================ */

.respect-teaser__verbs {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jade-300);
  padding-block: var(--space-md);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

/* ============================================================
   4 · RESPECT — inside page (respect-approach.html)
   ============================================================ */

/* ---------- 4a · Stage track: ring nodes -> a ruled index ----------
   Treatment C's glowing circle-on-a-spine is the "marketing grid"
   reading this proposal argues against. Kept: the sequence, the real
   in-page links, the letters. Replaced: the halo. A plain ruled line
   with square ticks reads as a measured scale, not a chain of beads. */
.stage-track__list::before {
  background: var(--border);
  opacity: 1;
}
.stage-track__node {
  border-radius: 2px;
  border-color: var(--border);
  box-shadow: none;
  background: var(--ink-850);
}
.stage-track__node:hover,
.stage-track__node:focus-visible {
  border-color: var(--jade-400);
  box-shadow: none;
  transform: none;
  background: var(--ink-800);
}
.stage-track__node.is-active {
  border-color: var(--amber-400);
  background: var(--ink-800);
}

/* ---------- 4b · The seven rows: a numbered ledger ----------
   A running index (counter — digits only) sits above each letter,
   restating the row's place in the sequence the way a numbered clause
   would in a printed standard. Rows lose their card chrome (fill,
   radius, hover-lift) for a hairline rule between entries — a register,
   not a stack of tiles. */
.mindset--respect { counter-reset: respect-idx; gap: 0; }

.mindset__row--respect {
  counter-increment: respect-idx;
  border: 0;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  background: none;
  padding-inline: 0;
  transition: background var(--dur-mid) var(--ease-out);
}
.mindset--respect .mindset__row--respect:last-child {
  border-bottom: 1px solid var(--border-soft);
}
.mindset__row--respect:hover {
  border-color: var(--border-soft);
  background: rgba(95, 201, 172, 0.035);
}
.mindset__row--respect .mindset__letter::before {
  content: counter(respect-idx, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: var(--text-500);
  margin-bottom: 0.35em;
}
.mindset__row--respect .mindset__letter { transform: none !important; }
.mindset__row--respect .mindset__letter::after { display: none; }

/* ============================================================
   5 · Widening Our Scope — home teaser (#scope)

   Same argument as the RESPECT rows, applied to the seven cards: a
   flat, numbered register in two columns rather than a three-up tile
   grid with a glow-fill background. Wider columns give the standfirst
   and blurb a proper measure, and the lead card keeps its full-width
   place at the head of the list — it is entry one, not a banner.
   ============================================================ */

.preview-journey__grid {
  counter-reset: scope-idx;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  margin-top: var(--space-xl);
}
.preview-journey__card {
  counter-increment: scope-idx;
  position: relative;
  border: 0;
  border-radius: 0;
  background: var(--ink-900);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
}
.preview-journey__card--lead {
  background: var(--ink-900);
  min-height: 0;
}
.preview-journey__card::before {
  content: counter(scope-idx, decimal-leading-zero);
  order: -1;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.05em;
  color: var(--jade-400);
  margin-bottom: var(--space-sm);
}
.preview-journey__card .read-more,
.preview-journey__card .card-read-more {
  margin-top: auto;
  padding-top: var(--space-md);
}

@media (max-width: 720px) {
  .preview-journey__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   6 · Widening Our Scope — catalogue (widening-our-scope.html)
   ============================================================ */

/* ---------- 6a · Jump list: pills -> a table of contents ----------
   The eight anchors keep their targets and their labels; the pill
   chrome is replaced with a plain indexed list, numbered to match each
   category's own visible number below (Workplace is 01 in both
   places), which is what makes it read as a contents page rather than
   a set of filter chips. */
.scope-index {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.scope-index__title {
  margin: var(--space-md) 0 var(--space-sm);
}
.scope-index__list {
  counter-reset: idx-list;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding-bottom: var(--space-md);
}
.scope-index__list a {
  counter-increment: idx-list;
  display: flex;
  align-items: baseline;
  gap: 0.65em;
  padding: 0.5rem 0.25rem;
  border: 0;
  border-radius: 0;
  color: var(--text-300);
}
.scope-index__list a::before {
  content: counter(idx-list, decimal-leading-zero);
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-500);
}
.scope-index__list a:hover,
.scope-index__list a:focus-visible {
  color: var(--text-100);
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--jade-400);
  text-underline-offset: 0.2em;
}
.scope-index__list a:hover::before,
.scope-index__list a:focus-visible::before { color: var(--jade-400); }

@media (max-width: 640px) {
  .scope-index__list { grid-template-columns: 1fr; }
}

/* ---------- 6b · Category entries: numeral as chapter mark ---------- */
.scope-cat__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-3);
  font-weight: 500;
  color: var(--jade-400);
  line-height: 1;
}
.scope-cat__head h2 {
  font-size: var(--step-1);
  letter-spacing: 0.04em;
}

/* Provenance chip: the client's own bracketed note, already carrying
   its own brackets in the text. Presented as a filed annotation, not a
   pill button — no border, no radius, just a quieter type treatment. */
.provenance-chip {
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-500);
}

/* Field rows inside each dl read as a ledger: a hairline above every
   row after the first, the label and value sharing one baseline. */
.scope-cat__list dt:not(:first-of-type),
.scope-cat__list dd:not(:first-of-type) {
  border-top: 1px solid var(--border-soft);
  padding-top: 0.6rem;
}

.pending-note {
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--border-soft);
}

/* ============================================================
   7 · Reduced motion — full static fallback for this file's own
   additions. base.css already forces every [data-reveal] and
   .mindset__letter to a static state; this only covers the
   transitions this file adds on top of that.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .nav__disclosure svg,
  .nav__submenu,
  .stage-track__node,
  .mindset__row--respect {
    transition: none !important;
  }
}