/* ==========================================================================
   sebbejones.com — shared stylesheet for /, /workshop/, /about/

   Layout system, in the order it appears below:
     .wrap            wide section shell (1200px canvas)
     .measure         controlled reading column (660px)
     .split           even two-column split
     .split-lede      asymmetric editorial split (lead column + aside)
     .split-rail      reading column + supporting detail rail
     .artifact        full-canvas artifact block
     .progression     numbered progression, two columns at desktop
     .rail            supporting detail rail (light and dark variants)

   Brand system: deep green + muted gold on warm cream.
   Georgia display, native sans body, Consolas for evidence.
   ========================================================================== */

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

:root {
  --cream:      #FBF9F3;
  --cream-tone: #F4F0E4;   /* subtle tonal section, not a second brand colour */
  --cream-dim:  #E9E2D2;
  --paper:      #FFFDF8;   /* artifact surface */
  --ink:        #1C2A22;
  --ink-soft:   #3B4740;
  --green:      #16352A;
  --green-mid:  #2C5F3F;
  --green-deep: #102A21;
  --gold:       #C49A48;   /* on green: 5.1:1 */
  --gold-deep:  #B08D2F;   /* rules and marks only, never text on cream */
  --gold-label: #7E611A;   /* small uppercase text: 5.5:1 on cream, 5.1:1 on tone */
  --gold-wash:  #F3DFA8;
  --muted:      #59655C;
  --rule:       #DED7C4;
  --rule-firm:  #C7BEA5;
  --evidence:   #F1EADA;

  --serif: Georgia, 'Times New Roman', serif;
  --sans:  'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono:  Consolas, 'SFMono-Regular', Menlo, 'Courier New', monospace;

  --canvas:  1200px;
  --measure:  660px;
}

html { scroll-padding-top: 92px; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 200;
  background: var(--cream); color: var(--green);
  padding: 12px 18px; border-radius: 3px; font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 12px; }

/* ── LAYOUT SYSTEM ───────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: var(--canvas); margin: 0 auto; padding: 0 32px; }

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

.split, .split-lede, .split-rail { display: grid; gap: 44px; }

@media (min-width: 1024px) {
  .split      { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .split-lede { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 40px 72px; align-items: start; }
  .split-rail { grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 40px 80px; align-items: start; }
}

/* Full-canvas artifact: allowed to use the whole shell, never the whole viewport. */
.artifact { margin: 40px 0 0; }

/* Deliberately positioned reading column: continues under the right half of a
   split so the second half of the section is composed, not left hanging. */
@media (min-width: 1024px) { .offset-right { margin-left: auto; } }

/* ── SECTION RHYTHM ──────────────────────────────────────────────────── */

.dark { background: var(--green); color: var(--cream); }

.section { padding: 104px 0; }
.section.tone { background: var(--cream-tone); }
.section-follow { margin-top: 48px; }

/* Sections are separated by white space and a short gold tick above the
   label, not by a full-width rule between every block. */
.label {
  position: relative; padding-top: 22px;
  font-size: 0.76rem; letter-spacing: 0.2em; color: var(--gold-label);
  text-transform: uppercase; font-weight: 700; margin-bottom: 22px;
}
.label::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 54px; height: 2px; background: var(--gold-deep);
}
.dark .label, .closeband .label { color: var(--gold); }
.dark .label::before, .closeband .label::before { background: var(--gold); }

/* ── TYPOGRAPHY ──────────────────────────────────────────────────────── */

h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.5rem, 4.4vw, 3.9rem);
  line-height: 1.07; letter-spacing: -0.012em;
  text-wrap: balance;
}
h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.85rem, 2.45vw, 2.4rem);
  line-height: 1.18; color: var(--green); margin-bottom: 22px; max-width: 18em;
  text-wrap: balance;
}
h3 {
  font-family: var(--serif); font-weight: 400; font-size: 1.28rem;
  line-height: 1.32; color: var(--green); margin-bottom: 8px;
}
p { margin-bottom: 20px; }
p:last-child { margin-bottom: 0; }

.lede { font-size: 1.16rem; line-height: 1.55; color: var(--ink-soft); }

a.go {
  color: var(--green-mid); font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--gold); text-underline-offset: 5px;
  text-decoration-thickness: 2px; transition: color 160ms ease;
}
a.go:hover { color: var(--green); }

.pull {
  font-family: var(--serif); font-size: 1.42rem; line-height: 1.42;
  color: var(--green);
}

.marker {
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
}

/* ── NAV ─────────────────────────────────────────────────────────────── */

.site-nav { background: var(--green); border-bottom: 1px solid rgba(196, 154, 72, 0.3); }
@media (min-width: 901px) { .site-nav { position: sticky; top: 0; z-index: 100; } }
/* On phones the collapsed panel only exists when JS can toggle it, so the
   header is only sticky in that case. Without JS the links stay visible and
   the header scrolls away instead of eating the screen. */
@media (max-width: 900px) {
  html[data-js] .site-nav { position: sticky; top: 0; z-index: 100; }
}

.nav-shell {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 24px; padding-top: 16px; padding-bottom: 16px;
}
.wordmark {
  font-family: var(--serif); font-size: 1.2rem; color: var(--cream);
  text-decoration: none; padding: 6px 0; letter-spacing: 0.01em;
}
.nav-links { display: flex; align-items: center; gap: 6px 26px; }
.nav-links a {
  color: var(--cream-dim); text-decoration: none; font-size: 0.92rem;
  padding: 12px 0; transition: color 160ms ease;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a[aria-current="page"] {
  color: var(--cream);
  box-shadow: inset 0 -2px 0 var(--gold);
}
.nav-links a.nav-cta {
  background: var(--gold); color: var(--green); font-weight: 600;
  padding: 9px 18px; border-radius: 2px; font-size: 0.9rem;
  transition: background 160ms ease;
}
.nav-links a.nav-cta:hover { background: #D3AC5E; color: var(--green); }

.menu-toggle {
  display: none;
  min-height: 44px; min-width: 44px; padding: 10px 16px;
  background: transparent; color: var(--cream-dim);
  border: 1px solid #3A5A4A; border-radius: 3px;
  font-family: var(--sans); font-size: 0.92rem; cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.menu-toggle:hover { color: var(--gold); border-color: var(--gold); }

@media (max-width: 900px) {
  .menu-toggle { display: inline-block; }
  .nav-links {
    flex-basis: 100%; flex-direction: column; align-items: flex-start;
    gap: 0; padding-bottom: 8px;
  }
  .nav-links a { font-size: 1.02rem; padding: 13px 0; }
  .nav-links a[aria-current="page"] { box-shadow: none; text-decoration: underline;
    text-decoration-color: var(--gold); text-underline-offset: 5px; }
  .nav-links a.nav-cta { margin-top: 10px; padding: 13px 22px; font-size: 1rem; }
  html[data-js] .nav-links { display: none; }
  html[data-js] .nav-links[data-open="true"] { display: flex; }
}

/* ── HERO ────────────────────────────────────────────────────────────── */

.hero { padding: 92px 0 104px; }
.hero-grid { display: grid; gap: 52px; align-items: center; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: 76px; }
  .hero-grid > .sheet, .hero-grid > .rail { justify-self: end; width: 100%; }
}
.hero-copy { max-width: 620px; }
/* A hero with no artifact beside it gets a wider single column. */
.hero-solo .hero-copy { max-width: 820px; }
.eyebrow {
  font-size: 0.76rem; letter-spacing: 0.2em; color: var(--gold);
  text-transform: uppercase; font-weight: 700; margin-bottom: 26px;
}
.hero .sub { font-size: 1.14rem; color: var(--cream-dim); margin: 28px 0 38px; max-width: 34em; }
/* Closes the gap when the sub is followed by the hero bullets rather than the button. */
.hero .sub--tight { margin-bottom: 26px; }

/* Hero bullets: the .keeps dash, recoloured for the dark band. */
.hero-points { list-style: none; margin: 0 0 36px; max-width: 34em; }
.hero-points li {
  position: relative; padding-left: 24px; margin-bottom: 11px;
  color: var(--cream-dim); font-size: 1.04rem; line-height: 1.5;
}
.hero-points li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 11px; height: 2px; background: var(--gold);
}
.hero-points li:last-child { margin-bottom: 0; }

/* Who is speaking. A supporting fact placed under the call to action, never
   the headline: the origin story earns its place on /about/, not up here. */
.hero-cred {
  margin: 40px 0 0; padding-top: 20px; max-width: 36em;
  border-top: 1px solid rgba(233, 226, 210, 0.24);
  color: var(--cream-dim); font-size: 0.94rem; line-height: 1.55;
}

.btn {
  display: inline-block; background: var(--gold); color: var(--green);
  font-weight: 700; padding: 15px 30px; border-radius: 2px;
  text-decoration: none; font-size: 1rem; transition: background 160ms ease;
}
.btn:hover { background: #D3AC5E; }
.hero .alt { margin-left: 20px; color: var(--cream-dim); font-size: 0.98rem; }
.hero .alt a { color: var(--gold); }

/* Hero artifact: a sheet off the workshop table, not a product interface. */
.sheet {
  background: var(--paper); color: var(--ink);
  border-top: 3px solid var(--gold);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.24);
  padding: 24px 26px 22px; max-width: 460px;
}
.sheet-cap {
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-label); margin-bottom: 16px;
}
.sheet-row { padding: 13px 0; border-top: 1px solid var(--rule); }
.sheet-row:first-of-type { border-top: 0; padding-top: 0; }
.sheet-key {
  display: block; font-size: 0.72rem; letter-spacing: 0.13em;
  text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: 5px;
}
.sheet-row p { font-size: 0.95rem; line-height: 1.5; margin: 0; }
.sheet-row .mono { font-family: var(--mono); font-size: 0.88rem; color: #3A3427; }
.sheet-sign {
  display: flex; align-items: center; gap: 11px;
  margin: 16px 0 0; padding-top: 15px; border-top: 2px solid var(--green);
  font-family: var(--serif); font-size: 1.05rem; color: var(--green);
}
.sheet-box {
  flex: none; width: 15px; height: 15px;
  border: 2px solid var(--gold-deep); border-radius: 1px;
}

/* Compact fact rail used inside the dark hero on /workshop/. */
.rail { border-top: 2px solid var(--green); padding-top: 4px; }
.rail-title {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-label); margin: 14px 0 4px;
}
.rail dl { margin: 0; }
.rail dl > div {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 16px;
  padding: 13px 0; border-top: 1px solid var(--rule);
}
.rail dt {
  font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); padding-top: 2px;
}
.rail dd { font-size: 0.96rem; line-height: 1.5; }

.rail > .rail-note { font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft); margin-top: 12px; }
.rail > .pull { margin-top: 12px; }

.rail--dark { border-top-color: var(--gold); }
.rail--dark .rail-title { color: var(--gold); }
.rail--dark dl > div { border-top-color: rgba(233, 226, 210, 0.22); }
.rail--dark dt { color: var(--gold); }
.rail--dark dd { color: var(--cream-dim); }

/* ── EVIDENCE AND EXHIBITS ───────────────────────────────────────────── */

.evidence {
  background: var(--evidence); border-left: 4px solid var(--gold-deep);
  padding: 24px 26px; color: #3A3427;
}
.evidence-cap {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: #6B5313; margin-bottom: 14px; font-family: var(--sans);
}
.evidence-body {
  font-family: var(--mono); font-size: 0.94rem; line-height: 1.68; margin: 0;
}
.evidence-body + .evidence-body { margin-top: 14px; }
.evidence mark { background: var(--gold-wash); color: #3A3427; padding: 0 3px; }
.evidence-note {
  margin: 16px 0 0; padding-left: 18px; position: relative;
  font-size: 0.94rem; line-height: 1.55; color: #59503C;
}
.evidence-note::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 10px; height: 2px; background: var(--gold-deep);
}

/* ── THE JUDGMENT GRID ───────────────────────────────────────────────── */

.grid-figure { margin: 0; }
.table-scroll { overflow-x: auto; }
.grid-table {
  border-collapse: collapse; width: 100%; min-width: 640px;
  font-size: 0.98rem; line-height: 1.5; text-align: left;
}
.grid-table caption {
  text-align: left; font-family: var(--serif); font-size: 1.24rem;
  color: var(--green); padding-bottom: 16px;
}
.grid-table th, .grid-table td {
  border: 1px solid var(--rule); padding: 22px 24px; vertical-align: top;
}
.grid-table thead th {
  background: transparent; color: var(--green); font-family: var(--sans);
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; border-bottom-width: 2px; border-bottom-color: var(--green);
  padding-top: 10px; padding-bottom: 12px;
}
.grid-table tbody th {
  background: transparent; color: var(--green); font-family: var(--serif);
  font-weight: 400; font-size: 1.12rem; width: 21%;
}
.grid-corner { border: 0 !important; background: transparent !important; padding: 0 0 12px !important; }
.axis-label {
  display: block; font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700; color: var(--muted); line-height: 1.7;
}
.grid-table td { background: var(--paper); }
.grid-table .verdict {
  display: block; font-family: var(--serif); font-size: 1.1rem;
  color: var(--green); margin-bottom: 7px;
}
.grid-table .cell-note { display: block; font-size: 0.92rem; color: var(--muted); }
.grid-table td.focus-cell {
  background: var(--green); border-color: var(--green); position: relative;
  box-shadow: inset 0 4px 0 var(--gold);
}
.grid-table td.focus-cell .verdict { color: var(--cream); }
.grid-table td.focus-cell .cell-note { color: var(--cream-dim); }
figcaption { font-size: 0.94rem; color: var(--muted); margin-top: 16px; max-width: 44em; }

/* Compressed quadrant diagram, used on /workshop/ to locate the capstone. */
.quad { margin: 0; }
.quad-plot { display: grid; grid-template-columns: 104px minmax(0, 1fr) minmax(0, 1fr); }
.quad-plot > * { padding: 14px 16px; }
.quad-head {
  font-size: 0.72rem; letter-spacing: 0.11em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); border-bottom: 2px solid var(--green);
}
.quad-side {
  font-family: var(--serif); font-size: 1.05rem; color: var(--green);
  border-bottom: 1px solid var(--rule);
}
.quad-cell {
  font-size: 0.94rem; line-height: 1.5; color: var(--muted);
  background: var(--paper); border: 1px solid var(--rule); border-top: 0;
}
.quad-cell.is-focus {
  background: var(--green); color: var(--cream-dim);
  border-color: var(--green); box-shadow: inset 0 3px 0 var(--gold);
}
.quad-cell strong { display: block; font-family: var(--serif); font-weight: 400;
  font-size: 1.05rem; color: var(--green); margin-bottom: 4px; }
.quad-cell.is-focus strong { color: var(--cream); }
/* The column axis is carried by .quad-head at desktop and by this span once
   the plot stacks, so the diagram never loses one of its two axes. */
.quad-axis { display: none; }

/* ── PROGRESSIONS AND LISTS ──────────────────────────────────────────── */

.progression { list-style: none; counter-reset: step; display: grid; gap: 44px 72px; }
@media (min-width: 1024px) {
  .progression { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px 80px; }
  .progression > li.is-wide { grid-column: 1 / -1; }
}
.progression > li {
  counter-increment: step;
  display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px;
  border-top: 2px solid var(--green); padding-top: 18px;
}
.progression > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--serif); font-size: 1.5rem; line-height: 1.1;
  color: var(--gold-label); grid-column: 1; grid-row: 1 / span 99;
}
.progression > li > * { grid-column: 2; }
.progression p { max-width: 38em; }
.progression .evidence, .progression .draft-key { margin-top: 20px; }

/* Wide progression rows put the prose beside the artifact. */
@media (min-width: 1024px) {
  .step-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .step-split > :first-child { margin: 0; }
  .step-split .evidence, .step-split .draft-key { margin-top: 0; }
}

.capstone {
  margin-top: 18px; padding: 18px 20px;
  background: var(--evidence); border-left: 4px solid var(--gold-deep);
}
.capstone .capstone-tag {
  display: block; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; color: #6B5313; margin-bottom: 8px;
}
.capstone p { font-size: 0.98rem; color: #443E30; margin: 0; }

/* The five letters of DRAFT, spelled out once on /workshop/. */
.draft-key { background: var(--paper); border-top: 2px solid var(--green); padding: 4px 20px 6px; }
.draft-key > div {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline;
  gap: 14px; padding: 11px 0; border-top: 1px solid var(--rule);
}
.draft-key > div:first-child { border-top: 0; }
.draft-key dt {
  font-family: var(--serif); font-size: 1.35rem; line-height: 1;
  color: var(--gold-label);
}
.draft-key dd { color: var(--ink); font-size: 1rem; }

.keeps { list-style: none; }
.keeps li { position: relative; padding-left: 24px; margin-bottom: 15px; max-width: 40em; }
.keeps li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 11px; height: 2px; background: var(--gold-deep);
}
.keeps li:last-child { margin-bottom: 0; }

.groups { display: grid; gap: 44px; }
@media (min-width: 1024px) {
  .groups { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 72px; align-items: start; }
}
.group-title {
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; color: var(--gold-label);
  border-top: 2px solid var(--green); padding-top: 14px; margin-bottom: 20px;
}

/* What the team walks out with, shown as an inventory rather than a list.
   Each group gets a column count its item count divides into, so no row is
   ever left with an orphan: six across three, four across two. */
.tiles { list-style: none; display: grid; gap: 20px; }
@media (min-width: 768px)  { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1024px) { .tiles--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile {
  background: var(--paper); border: 1px solid var(--rule);
  border-top: 2px solid var(--green); padding: 18px 20px 20px;
}
.tile p { font-size: 0.96rem; line-height: 1.5; margin: 0; }
/* No top rule here: the tiles below carry one, and two would double up. */
.tiles-head {
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; color: var(--gold-label);
  margin-bottom: 18px;
}
.tiles + .tiles-head { margin-top: 44px; }

/* The shape of the engagement on /workshop/. The room is the middle third,
   which is the whole argument of the section. */
.timeline { margin: 0; }
/* Three across only when the columns are wide enough to hold a sentence.
   Below that it stacks: three full-width blocks read better than a ladder. */
.timeline-cols { display: grid; gap: 30px; }
@media (min-width: 1024px) { .timeline-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; align-items: start; } }
.timeline-col { border-top: 2px solid var(--green); padding-top: 16px; }
.timeline-col.is-focus { border-top-color: var(--gold-deep); }
.timeline-when {
  display: block; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-label); margin-bottom: 8px;
}
.timeline-head { font-size: 1.2rem; margin-bottom: 16px; }
.timeline-col .keeps li { font-size: 0.96rem; line-height: 1.5; margin-bottom: 13px; }

.two-col { column-count: 1; }
@media (min-width: 1024px) { .two-col { column-count: 2; column-gap: 72px; } }
.two-col li { break-inside: avoid; }

/* The 2002 operating loop on /about/. */
.loop { margin: 0; }
.loop-steps { list-style: none; counter-reset: loop; display: grid; gap: 20px; }
@media (min-width: 768px) { .loop-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; } }
@media (min-width: 1024px) { .loop-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.loop-steps li {
  counter-increment: loop; border-top: 2px solid var(--green); padding-top: 14px;
  font-family: var(--serif); font-size: 1.12rem; line-height: 1.35; color: var(--green);
}
/* Beside a reading column the loop stacks instead of running across. */
.loop--rail .loop-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.loop-steps li::before {
  content: counter(loop, decimal-leading-zero);
  display: block; font-family: var(--sans); font-size: 0.74rem;
  letter-spacing: 0.14em; font-weight: 700; color: var(--gold-label); margin-bottom: 8px;
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */

.faq { max-width: 800px; border-top: 2px solid var(--green); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative;
  font-family: var(--serif); font-size: 1.18rem; color: var(--green);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 8px; top: 19px;
  font-family: var(--sans); font-size: 1.45rem; line-height: 1; color: var(--gold-label);
}
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--green-mid); }
.faq .answer { padding: 0 48px 24px 0; max-width: 42em; }
.faq .answer p { margin-bottom: 14px; }

/* ── CLOSE BAND AND FORM ─────────────────────────────────────────────── */

.closeband { background: var(--green); color: var(--cream); padding: 96px 0; }
.closeband h2 { color: var(--cream); }
.closeband p { color: var(--cream-dim); }
.closeband .alt { display: block; margin-top: 22px; color: var(--cream-dim); font-size: 0.98rem; }
.closeband .alt a { color: var(--gold); }
.closeband-actions { padding-top: 8px; }
@media (min-width: 1024px) {
  .closeband-actions { border-left: 1px solid rgba(233, 226, 210, 0.24); padding-left: 64px; }
}

.qualify-form { max-width: 560px; }
.form-group { margin-bottom: 24px; }
.qualify-form label {
  display: block; font-size: 0.96rem; line-height: 1.45;
  color: var(--cream); margin-bottom: 9px;
}
.qualify-form input, .qualify-form textarea {
  width: 100%; font-family: var(--sans); font-size: 1rem; line-height: 1.5; color: var(--ink);
  background: var(--cream); border: 1px solid var(--cream-dim); border-radius: 2px;
  padding: 12px 14px; min-height: 46px;
}
.qualify-form textarea { resize: vertical; min-height: 84px; }
.qualify-form input:focus, .qualify-form textarea:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-submit {
  background: var(--gold); color: var(--green); font-family: var(--sans);
  font-weight: 700; font-size: 1rem; padding: 15px 32px;
  border: 0; border-radius: 2px; cursor: pointer; min-height: 46px;
  transition: background 160ms ease;
}
.form-submit:hover { background: #D3AC5E; }
.form-submit:disabled { opacity: 0.6; cursor: default; }
.form-note { max-width: 42em; font-size: 0.89rem; color: var(--cream-dim); margin: 16px 0 0; }
.form-note a { color: var(--gold); }
.form-done { max-width: 560px; border-left: 3px solid var(--gold); padding-left: 22px; }
.form-done p { margin: 0 0 14px; }
.form-done p:last-child { margin-bottom: 0; }
.form-done a { color: var(--gold); }

/* ── PORTRAIT ────────────────────────────────────────────────────────── */

.portrait { max-width: 280px; margin: 0; }
.portrait img { display: block; width: 100%; height: auto; border-radius: 2px; }

/* ── FOOTER ──────────────────────────────────────────────────────────── */

footer {
  padding: 36px 0 60px; margin-top: 0; color: var(--muted); font-size: 0.9rem;
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  border-top: 1px solid var(--rule);
}
footer a { color: var(--green-mid); }
footer .footer-links { display: flex; flex-wrap: wrap; gap: 12px 20px; }

/* ── TABLET ──────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .section { padding: 80px 0; }
  .hero { padding: 72px 0 84px; }
  .closeband { padding: 76px 0; }
  .sheet { max-width: 520px; }
  .rail dl > div { grid-template-columns: 128px minmax(0, 1fr); }
}

/* ── PHONE ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  body { font-size: 17px; }
  .wrap { padding: 0 22px; }
  .section { padding: 60px 0; }
  .hero { padding: 52px 0 64px; }
  .closeband { padding: 60px 0; }
  h3 { font-size: 1.22rem; }
  .hero .sub { font-size: 1.06rem; margin: 24px 0 32px; }
  .hero .sub--tight { margin-bottom: 22px; }
  .hero-points { margin-bottom: 30px; }
  .hero-points li { font-size: 1rem; }
  .hero-cred { margin-top: 32px; font-size: 0.92rem; }
  .hero .alt { display: block; margin: 18px 0 0; }
  .btn { display: block; text-align: center; }
  .form-row { grid-template-columns: 1fr; gap: 24px; }
  .progression > li { grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; }
  .progression > li::before { font-size: 1.3rem; }
  .evidence { padding: 20px 18px; }
  .evidence-body { font-size: 0.88rem; }
  .sheet { padding: 20px 20px 18px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); }
  .rail dl > div { grid-template-columns: 1fr; gap: 3px; }
  .quad-plot { grid-template-columns: 1fr; }
  .quad-head { display: none; }
  .quad-side { border-bottom: 0; padding: 18px 0 6px; }
  .quad-cell { border-top: 1px solid var(--rule); }
  .quad-axis {
    display: block; font-size: 0.7rem; letter-spacing: 0.1em;
    text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: 6px;
  }
  .quad-cell.is-focus .quad-axis { color: var(--gold); }
  .faq summary { font-size: 1.1rem; padding-right: 40px; }
  .faq .answer { padding-right: 0; }
  .pull { font-size: 1.26rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}