/* ══════════════════════════════════════════════════════════════════════════
   JunBuilds — design tokens, mirroring the Senna specification.

   Source of truth: ~/Nextcloud/Tools/capacity-planner
     · css/theme.css            — the dark token block (Senna's PRIMARY theme)
     · css/styles.css (:root)   — the light values, which dark overrides
     · css/theme-dark-overrides.css — GENERATED; do not hand-edit there

   The DARK block mirrors Senna. The LIGHT block is JunBuilds' own as of
   2026-10-22 (gallery white, navy ink, water-orange highlight) and is no longer
   a mirror; validate.js V9 checks the dark column only.

   Senna's model, reproduced here exactly:
     · :root holds the DARK palette. Dark is the default, not a variant.
     · :root[data-theme='light'] overrides it. Light is the option.
     · The theme is applied on documentElement as [data-theme] and set
       pre-paint by an inline boot script, so there is no flash of the
       wrong theme. Persisted at localStorage['junbuilds-theme'].

   Senna's dark family is "Indigo Night": plate #223055, page #0a0f1e.
   Contrast notes carried over: --primary (water #FF3D2E) is 3.0:1 on plate
   and is for tints, rings and accents ONLY. --primary-strong (#C82317) is
   the solid-button surface and is 4.9:1 under stone.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── surfaces — Senna's constant-luminance-ratio ladder (~×1.45 steps) ── */
  --bg-light:   #0a0f1e;   /* page  */
  --bg-subtle:  #16203a;   /* cards, wells */
  --bg-white:   #223055;   /* plate — the primary surface */
  --bg-raised:  #2f4070;   /* modals, popovers (plate + ~6% white) */
  --bg-inset:   #0d1428;   /* insets, code, table stripes */

  /* ── text — stone family on plate ── */
  --text-dark:         #f4f1ea;
  --text-body:         #ccd6ec;
  --text-muted:        #93a1c4;
  --text-muted-raised: #a3b0d2;
  --text-inverted:     #f4f1ea;

  /* ── borders — plate-lighter steps, tuned for boundary visibility ── */
  --border:        #43517d;
  --border-strong: #4c5d8f;
  --border-raised: #7c8dbd;

  /* ── water — the accent carried across the plate ── */
  --primary:             #ff3d2e;
  --primary-hover:       #e6382a;
  --primary-subtle:      rgba(255, 61, 46, 0.12);
  --primary-strong:      #c82317;
  --primary-strong-hover:#a81e13;

  /* ── signal — a SECOND accent, reserved for measured values only ──────
     Not part of the Senna palette. Used on figures that are evidence:
     the metrics band under a case headline. It must never touch prose or
     chrome, or it stops meaning "this was measured". Enforced by validate.js V13. */
  --signal:              #c6ff00;

  /* Text that sits on an inverted fill (a light block in the dark theme).
     The bright accent fails there, so this is the deeper orange. */
  --accent-invert:       #c22d17;

  /* ── status families, resaturated for a dark ground ── */
  --success:    #4ade80;
  --success-bg: rgba(74, 222, 128, 0.12);
  --warning:    #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --error:      #f87171;
  --danger:     #f87171;
  --error-bg:   rgba(248, 113, 113, 0.12);
  --info:       #60a5fa;
  --info-bg:    rgba(96, 165, 250, 0.12);

  /* ── elevation ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 0 40px rgba(0, 0, 0, 0.4);

  /* ── focus ring — OPAQUE; the inner spacer keeps it readable on flush
        controls (Senna: rgba(255,61,46,.35) composited to 1.46:1, under the
        3:1 that WCAG 1.4.11 requires) ── */
  --focus-ring: 0 0 0 2px var(--bg-white), 0 0 0 4px var(--primary);

  color-scheme: dark;

  /* ── typography ── */
  --display: "Fraunces", "Hoefler Text", Georgia, serif;
  --body:    "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --measure: 34rem;

  /* ── radii and space ── */
  --radius-xs: 3px;  --radius-sm: 4px;  --radius: 8px;
  --radius-md: 6px;  --radius-lg: 12px;
  --space-xs: 4px;   --space-sm: 8px;   --space-md: 12px;
  --space-lg: 16px;  --space-xl: 24px;  --space-2xl: 32px;  --space-3xl: 48px;

  /* ── semantic aliases ──────────────────────────────────────────────────
     The component layer addresses surfaces and ink by ROLE, never by a
     lightness name. Senna's own rule: "a token named for a lightness step
     must not hold the opposite value in the other theme". A role name can
     flip with the theme; a lightness name cannot without lying. */
  --page:      var(--bg-light);
  --surface:   var(--bg-subtle);
  --raised:    var(--bg-white);
  --inset:     var(--bg-inset);

  --ink:       var(--text-dark);
  --ink-soft:  var(--text-body);
  --ink-faint: var(--text-muted);

  --rule:      var(--border);
  --rule-soft: var(--border);
  --moss:      var(--primary);
  --moss-soft: var(--primary-strong);
  --seed-tint: var(--primary-subtle);
  --accent:    var(--primary);

  /* ── the ordered ramp ──────────────────────────────────────────────────
     Semantically an ORDER, not a palette: the seven stops mark a case's
     position in the sequence, so the gradient encodes progression. Built
     inside Senna's chroma rather than the botanical greens it replaces. */
  --ramp-0: #f4f1ea;
  --ramp-1: #cbd6f0;
  --ramp-2: #a7b6e0;
  --ramp-3: #8b95cf;
  --ramp-4: #7c8dbd;
  --ramp-5: #6f7fae;
  --ramp-6: #66739c;
}

/* ── light — the OPTION, not the default. Mirrors Senna exactly: light is
      the fallback values from styles.css :root, which dark overrides. ────── */
:root[data-theme='light'] {
  /* ── JunBuilds' OWN light theme — not a Senna mirror ─────────────────────
     Gallery white, with the dark theme's ink carried over as dark blue and its
     water orange carried over as the highlight. The dark block still mirrors
     Senna and validate.js V9 still enforces that; this block does not, by
     decision (2026-10-22). The two oranges are deliberate: #ff3d2e is 3.52:1 on
     white, so it is reserved for large type and graphics, while small labels
     use #cc3a1c at 5.01:1. Same family, different job — the dark theme already
     splits its accent this way. */
  --bg-light:  #ffffff;
  --signal:    #2f6b1f;
  --accent-invert: #ff3d2e;
  --bg-subtle: #f4f6f9;
  --bg-white:  #ffffff;
  --bg-raised: #ffffff;
  --bg-inset:  #e9edf2;

  --text-dark:         #0a0f1e;
  --text-body:         #26314a;
  --text-muted:        #55617a;
  --text-muted-raised: var(--text-muted);
  --text-inverted:     #ffffff;

  --border:        #d3d9e2;
  --border-strong: #c0c8d4;
  --border-raised: var(--border);

  --primary:              #ff3d2e;
  --primary-hover:        #e6382a;
  --primary-subtle:       rgba(255, 61, 46, 0.08);
  --primary-strong:       #cc3a1c;
  --primary-strong-hover: #a82a12;

  /* small type takes the deeper orange so it clears AA */
  --moss:      var(--primary-strong);
  --moss-soft: #a82a12;

  --success:    #2f7d3a;
  --success-bg: #f0f9f4;
  --warning:    #8a5a00;
  --warning-bg: #fff9e6;
  --error:      #b3261e;
  --danger:     #b3261e;
  --error-bg:   #fdf0f0;
  --info:       #1d4ed8;
  --info-bg:    #dbeafe;

  --shadow-sm: 0 1px 3px rgba(10, 15, 30, 0.06);
  --shadow-md: 0 2px 8px rgba(10, 15, 30, 0.08);
  --shadow-lg: 0 0 40px rgba(10, 15, 30, 0.07);

  --focus-ring: 0 0 0 2px var(--bg-white), 0 0 0 4px var(--primary);

  /* the ramp re-seated on a white ground — navy, not the old red */
  --ramp-0: #0a0f1e;
  --ramp-1: #26314a;
  --ramp-2: #4a5670;
  --ramp-3: #6e7a92;
  --ramp-4: #949eb0;
  --ramp-5: #b7bfcd;
  --ramp-6: #d5dae3;

  color-scheme: light;
}

/* ── base ────────────────────────────────────────────────────────────────── */

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: 1rem;
  line-height: var(--leading-normal, 1.55);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .25s ease, color .25s ease;
}
*, *::before, *::after { box-sizing: border-box; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 0 0 .6em;
}
p { margin: 0 0 1em; }
a { color: var(--moss); text-decoration: none; }
a:hover { color: var(--moss-soft); }
strong { color: var(--ink); font-weight: 600; }
em { font-style: italic; }
img, svg { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--rule-soft); margin: 2rem 0; }

code, pre, kbd, samp { font-family: var(--mono); font-size: .86em; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
::selection { background: var(--primary-subtle); color: var(--ink); }

/* the two ambient overlays the shell renders */
.grain, .vignette { pointer-events: none; position: fixed; inset: 0; z-index: 0; }
.grain { opacity: .035; }
.vignette { display: none; }
:root[data-theme='light'] .grain { opacity: .02; }


/* ── layout primitives the page shell and components build on ────────────── */
:root {
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --shell:   64rem;
}

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

.eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .9rem;
}

.lede {
  font-size: 1.12rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 1.25rem 0 0;
  max-width: 60ch;
}

.foot { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-soft)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:3.5rem;padding-block:.5rem}
.nav-mark{font-family:var(--display);font-size:1rem;letter-spacing:-.01em;color:var(--ink);
  text-decoration:none;display:inline-flex;align-items:baseline;gap:.5rem}
.nav-brand{color:var(--ink);transition:color .18s}
.nav-brand-accent{color:var(--primary);transition:color .18s}
/* hover inverts the wordmark: Jun takes the accent, Builds goes back to ink */
.nav-mark:hover .nav-brand{color:var(--primary)}
.nav-mark:hover .nav-brand-accent{color:var(--ink)}
.nav-by{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint)}
.nav-links{display:flex;align-items:center;gap:1.25rem;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.nav-links a{color:var(--ink-soft);text-decoration:none;padding-block:.35rem;border-bottom:1px solid transparent}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink);border-bottom-color:var(--moss)}
.nav-cta{color:var(--ink)!important;border:1px solid var(--rule);border-radius:999px;
  padding:.3rem .75rem!important}
/* who am i carries the accent, and lightens to the theme's ink on hover */
.nav-box{color:var(--moss)!important;border:1px solid var(--moss);border-radius:999px;
  padding:.3rem .75rem!important;transition:background .18s,color .18s,border-color .18s}
/* the inverse of contact: it fills with ink and the accent becomes the text */
.nav-box:hover,.nav-box[aria-current]{background:var(--ink);border-color:var(--ink);
  color:var(--accent-invert)!important}
/* a rule between the offer-of-contact and the person behind it */
.nav-sep{flex:none;width:1px;height:1.15em;background:var(--rule-soft);align-self:center}
.nav-cta:hover{border-color:var(--moss);background:var(--seed-tint)!important}
/* Narrow screens: the nav was 370px wide inside a 390px viewport, overflowing
   every page by 139px and wrapping "who am i" onto three lines. The byline is
   decorative, so it goes; the link row shrinks and scrolls rather than the page. */
@media(max-width:47.99rem){
  /* One row overflowed by 139px and, once made scrollable, hid "method"
     off the left edge. At this width the links get their own full-width row
     and wrap, so every item stays visible. */
  .nav-by{display:none}
  .nav-in{flex-wrap:wrap;row-gap:.4rem;padding-block:.5rem;gap:0}
  .nav-mark{font-size:.95rem}
  .nav-links{width:100%;flex-wrap:wrap;justify-content:flex-start;
    gap:.35rem .7rem;font-size:.63rem;overflow:visible}
  .nav-links a{white-space:nowrap}
  .nav-cta,.nav-box{padding:.22rem .6rem!important}
}
}

.hero{padding-block:4rem 2rem}
.hero h1{font-family:var(--display);font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1.14;
  letter-spacing:-.02em;margin:0 0 1.25rem;max-width:24ch;font-weight:400}
.hero .sub{font-family:var(--body);font-size:clamp(1rem,1.9vw,1.2rem);line-height:1.6;
  color:var(--ink-soft);max-width:56ch;margin:0}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--moss);margin:0 0 1rem}
.lede{margin:1.5rem 0 0;max-width:60ch;color:var(--ink-soft);line-height:1.7}
.hr{height:1px;background:var(--rule-soft);margin:3rem 0;border:0}

.scale-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule-soft);
  border:1px solid var(--rule-soft);border-radius:12px;overflow:hidden}
@media(min-width:44rem){
  .scale-row{grid-template-columns:repeat(5,1fr)}
  .scale-n{font-size:clamp(1.3rem,2.3vw,1.8rem);white-space:nowrap}
}
.scale-cell{background:var(--surface);padding:1.25rem 1.15rem}
@media(max-width:43.99rem){.scale-cell:last-child{grid-column:1/-1}}
.scale-n{font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.1rem);line-height:1;color:var(--ink)}
.scale-k{display:block;margin-top:.5rem;font-size:.82rem;line-height:1.45;color:var(--ink-faint)}

.moves{display:grid;gap:0;border-top:1px solid var(--rule-soft);margin-top:.5rem}
.move{display:grid;grid-template-columns:1fr;gap:.3rem;padding:1.15rem 0;border-bottom:1px solid var(--rule-soft)}
@media(min-width:46rem){.move{grid-template-columns:3.5rem 16rem 1fr;gap:1.5rem;align-items:baseline}}
.move-n{font-family:var(--mono);font-size:.72rem;color:var(--moss)}
.move-k{font-family:var(--display);font-size:1.12rem;margin:0;color:var(--ink)}
.move-v{margin:0;color:var(--ink-soft);line-height:1.62;font-size:.96rem}

.diff{width:100%;border-collapse:collapse;font-size:.94rem}
.table-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.table-scroll>table{min-width:30rem}
.diff th{text-align:left;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:400;padding:0 0 .6rem}
.diff td{padding:.7rem 1.25rem .7rem 0;border-top:1px solid var(--rule-soft);
  color:var(--ink-soft);line-height:1.55;vertical-align:top}
.diff td:last-child{color:var(--ink)}

.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.75rem}
.band-head h2{margin:0;font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:-.01em}

.cards{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:52rem){.cards{grid-template-columns:repeat(2,1fr)}}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--rule-soft);border-radius:12px;padding:1.35rem 1.4rem;
  transition:border-color .25s,transform .25s,box-shadow .25s}
a.card:hover{border-color:var(--moss-soft);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.card-top{display:flex;justify-content:space-between;gap:.75rem;margin-bottom:.7rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.card h3{margin:0 0 .55rem;font-size:1.1rem;line-height:1.3;letter-spacing:-.012em}
.card .headline{font-family:var(--body);font-style:italic;color:var(--moss);font-size:.95rem;
  line-height:1.5;margin:0 0 .6rem}
.card p{margin:0;color:var(--ink-soft);font-size:.92rem;line-height:1.6}
.card-note{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--rule-soft);
  font-family:var(--mono);font-size:.66rem;color:var(--moss)}

.detail-head{padding-block:3rem 1.25rem}
.detail-head h1{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,4vw,2.5rem);
  line-height:1.2;letter-spacing:-.02em;margin:.6rem 0 .85rem;max-width:30ch}
.back{display:inline-flex;font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-faint);text-decoration:none}
.back:hover{color:var(--moss)}
.meta{display:grid;margin:1.75rem 0 0;border-top:1px solid var(--rule-soft)}
.meta-row{display:grid;grid-template-columns:1fr;gap:.15rem;padding:.75rem 0;border-bottom:1px solid var(--rule-soft)}
@media(min-width:40rem){.meta-row{grid-template-columns:10rem 1fr;gap:1.5rem;align-items:baseline}}
.meta-k{font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.meta-v{color:var(--ink-soft);font-size:.94rem;line-height:1.6}

.prose{max-width:66ch}
.prose h2{font-family:var(--mono);font-size:.72rem;font-weight:400;letter-spacing:.09em;
  text-transform:uppercase;color:var(--moss);margin:2.5rem 0 .85rem}
.prose p{margin:0 0 1rem;color:var(--ink-soft);line-height:1.72}
.prose ul{margin:0 0 1rem;padding-left:1.1rem;display:grid;gap:.6rem}
.prose li{color:var(--ink-soft);line-height:1.68}
.prose li::marker{color:var(--moss-soft)}
.callout{background:var(--raised);border-left:2px solid var(--moss-soft);border-radius:0 8px 8px 0;
  padding:1.05rem 1.2rem;margin:0 0 1rem}
.callout p{margin:0;color:var(--ink-soft);line-height:1.65;font-size:.94rem}
.callout p + p{margin-top:.7rem}
.callout-k{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);display:block;margin-bottom:.4rem}

.stages{margin-top:1.5rem;border-top:1px solid var(--rule-soft)}
.stage{display:grid;grid-template-columns:1fr;gap:.4rem;padding:1.15rem 0;border-bottom:1px solid var(--rule-soft)}
@media(min-width:52rem){.stage{grid-template-columns:2rem 9rem 1fr 11rem;gap:1.25rem;align-items:baseline}}
.stage-n{font-family:var(--mono);font-size:.74rem;color:var(--moss)}
.stage-name{font-family:var(--display);font-size:1.06rem;margin:0}
.stage-what{margin:0;color:var(--ink-soft);font-size:.94rem;line-height:1.6}
.stage-when{margin:0;font-family:var(--mono);font-size:.68rem;color:var(--ink-faint);line-height:1.5}
.stage-who{grid-column:1/-1;margin:.35rem 0 0;font-size:.84rem;color:var(--ink-faint)}
@media(min-width:52rem){.stage-who{grid-column:1/-1;margin:0}}

.tiers{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:.5rem}
@media(min-width:54rem){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule-soft);
  border-radius:12px;padding:1.5rem 1.4rem}
.tier.is-lead{border-color:var(--moss-soft);background:var(--seed-tint)}
.tier-code{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--moss)}
.tier-price{font-family:var(--display);font-size:1.55rem;margin:.6rem 0 .15rem;letter-spacing:-.01em}
.tier-unit{font-family:var(--mono);font-size:.66rem;color:var(--ink-faint);margin:0 0 1rem}
.tier-pitch{margin:0 0 1.1rem;color:var(--ink-soft);font-size:.94rem;line-height:1.6}
.tier h3{font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:400;margin:0 0 .5rem}
.tier ul{margin:0 0 1rem;padding-left:1.05rem;display:grid;gap:.45rem}
.tier li{font-size:.9rem;color:var(--ink-soft);line-height:1.55}
.tier li::marker{color:var(--moss-soft)}
.tier-foot{margin-top:auto;padding-top:1rem;border-top:1px solid var(--rule-soft);
  font-size:.82rem;color:var(--ink-faint);line-height:1.55}

.working{display:grid;gap:0;margin-top:.5rem;border-top:1px solid var(--rule-soft)}
.working-row{display:grid;grid-template-columns:1fr;gap:.2rem;padding:.8rem 0;border-bottom:1px solid var(--rule-soft)}
@media(min-width:40rem){.working-row{grid-template-columns:10rem 1fr;gap:1.5rem;align-items:baseline}}
.working-k{font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.working-v{color:var(--ink-soft);font-size:.94rem;line-height:1.6}

.foot{margin-top:5rem;border-top:1px solid var(--rule-soft);padding-block:2.25rem 3rem}

/* ── grain ────────────────────────────────────────────────────────────────
   A fixed noise plate over the page. Overlay blending so it reads on the dark
   ground and the light one without a second texture; kept faint enough that it
   cannot move the text contrast. Disabled for high-contrast requests. */
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.9;mix-blend-mode:overlay;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(prefers-contrast:more){body::after{display:none}}
@media print{body::after{display:none}}
.foot-in{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center}
.foot-brand{max-width:38ch}
.foot-line{margin:0;font-size:.86rem;color:var(--ink-faint);line-height:1.6}
.foot-meta{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft)}
.foot-meta a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule)}
.foot-meta a:hover{color:var(--moss);border-bottom-color:var(--moss)}
.foot-sep{margin:0 .5rem;color:var(--rule)}

/* ── figures ─────────────────────────────────────────────────────────────── */
.fig{margin:1.75rem 0;padding:0}
.fig img{display:block;width:100%;height:auto;border-radius:10px;
  border:1px solid var(--rule-soft);background:var(--inset)}
.fig figcaption{margin-top:.6rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.fig--hero{margin:0}
.fig--hero img{border-radius:12px}
.fig--wide img{aspect-ratio:16/9;object-fit:cover}

/* ── the about page as a grid, not a column ───────────────────────────────
   One .block = a row. Two columns: prose beside imagery. .block--flip swaps
   which side the image sits on, so the eye zig-zags down the page instead of
   running straight. .bleed breaks the wrap entirely to reset the rhythm. */

.hero-block{padding-block:3.5rem 1.25rem}
.block{display:grid;grid-template-columns:1fr;gap:2rem;
  padding-block:2.5rem;align-items:start}
@media(min-width:56rem){
  .block{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3.5rem;padding-block:3rem}
  .block--flip .col-text{order:2}
  .block--flip .col-fig{order:1}
}
.block--lede{padding-block:0 2rem}
.block h2{font-family:var(--display);font-weight:400;font-size:1.4rem;letter-spacing:-.01em;
  margin:0 0 .8rem;color:var(--ink)}
.block p{margin:0 0 .9rem;color:var(--ink-soft);line-height:1.72}
.standfirst{font-size:1.15rem;line-height:1.6;color:var(--ink-soft);max-width:52ch;margin:0 0 1.75rem}
.col-text{min-width:0}
.col-fig{min-width:0}
.col-fig .fig{margin:0 0 1.25rem}
.col-fig--stack{display:grid;gap:1.25rem}
.small-note{font-size:.88rem!important;color:var(--ink-faint)!important;line-height:1.6}
.pullquote{background:var(--raised);border-left:2px solid var(--moss);border-radius:0 10px 10px 0;
  padding:1.5rem 1.6rem;position:sticky;top:5rem}
.pullquote p{margin:0;font-family:var(--display);font-size:1.12rem;line-height:1.62;color:var(--ink)}

/* full-bleed band — edge to edge, breaking the wrap */
.bleed{margin:1rem 0;background:var(--inset)}
.bleed--tint{background:var(--surface)}
.bleed--raised{background:var(--raised)}
.fig--bleed{margin:0}
.fig--bleed img{border-radius:0;border-left:0;border-right:0;aspect-ratio:21/9;object-fit:cover}
.fig--bleed figcaption{padding-inline:var(--gutter);max-width:var(--shell);margin-inline:auto}
.bleed-note{padding-block:2rem 2.5rem;max-width:66ch}
.bleed-note p:last-child{margin-bottom:0}

/* ── outcomes by horizon ─────────────────────────────────────────────────── */
/* Bento rather than three equal cards: the two near horizons sit side by side,
   the payoff horizon gets a full-width recessed band so its figures read as a
   row. Pattern from Claude study 068. */
.benefits{display:grid;gap:.8rem;grid-template-columns:1fr;margin-top:1.25rem}
@media(min-width:54rem){
  .benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .benefit:last-child{grid-column:1 / -1}
  .benefit:last-child .benefit-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
}
.benefit{background:var(--surface);border:1px solid var(--rule-soft);border-radius:12px;
  padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column}
.benefit:last-child{background:var(--inset);border-color:var(--rule)}
.benefit-when{font-family:var(--display);font-size:1.1rem;line-height:1.25;color:var(--ink);
  margin:0 0 .15rem;display:flex;align-items:baseline;gap:.55rem}
.benefit-n{font-family:var(--mono);font-size:.64rem;color:var(--moss);letter-spacing:.08em;flex:none}
.benefit-sub{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 .9rem;line-height:1.4}
.benefit-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.benefit-list li{position:relative;padding-left:1rem;font-size:.92rem;line-height:1.56;color:var(--ink-soft)}
.benefit-list li::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;height:1px;
  background:var(--moss)}

/* ── full-height hero ────────────────────────────────────────────────────── */
.hero-block--full{min-height:calc(100svh - 4.25rem);display:flex;flex-direction:column;
  justify-content:space-between;gap:2rem;
  padding-block:clamp(1.75rem,6vh,3.75rem) clamp(2rem,7vh,4.25rem)}
.hero-block--full .eyebrow{margin:0}
.hero-anchor{display:flex;flex-direction:column;gap:1.15rem}
.hero-anchor .tagline{margin:0}
.hero-block--full .tagline{font-size:clamp(2.35rem,7.1vw,5.5rem);line-height:.97;
  letter-spacing:-.045em;max-width:19ch}
.hero-anchor .lede{margin:0}
@media(max-width:47.99rem){
  .hero-block--full{min-height:calc(88svh - 4.25rem);padding-block:1.75rem 2.5rem}
}

/* ── case-study rail ─────────────────────────────────────────────────────── */
.rail-block{display:grid;grid-template-columns:1fr;gap:.5rem;
  padding-block:1.75rem;border-top:1px solid var(--rule-soft)}
.rail-k{font-family:var(--mono);font-size:.72rem;font-weight:400;letter-spacing:.09em;
  text-transform:uppercase;color:var(--moss);margin:0;line-height:1.5}
.rail-body{max-width:64ch;min-width:0}
.rail-body p{margin:0 0 1rem;color:var(--ink-soft);line-height:1.72}
.rail-body p:last-child{margin-bottom:0}
.rail-body ul{margin:0;padding-left:1.1rem;display:grid;gap:.6rem}
.rail-body li{color:var(--ink-soft);line-height:1.68}
.rail-body li::marker{color:var(--moss-soft)}
@media(min-width:56rem){
  .rail-block{grid-template-columns:180px minmax(0,1fr);gap:3rem;padding-block:2.25rem}
  .rail-k{position:sticky;top:5.5rem;align-self:start}
}

/* ── metrics band ────────────────────────────────────────────────────────── */
.metrics{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule-soft);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media(min-width:40rem){.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
.metric{background:var(--page);padding:1.15rem 1rem 1.2rem;min-width:0}
.metric-v{display:block;font-family:var(--display);font-size:clamp(1.15rem,2.1vw,1.45rem);
  line-height:1.15;color:var(--signal);overflow-wrap:break-word}
.metric-k{display:block;margin-top:.35rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);line-height:1.45}

/* ── work index ──────────────────────────────────────────────────────────── */
.work-index{border-top:1px solid var(--rule)}
.idx-row{display:grid;grid-template-columns:2.2rem minmax(0,1fr) 1.4rem;gap:.9rem;
  align-items:start;padding:1.3rem .5rem 1.35rem 0;border-bottom:1px solid var(--rule-soft);
  text-decoration:none;color:inherit;
  transition:background .22s cubic-bezier(.2,.7,.3,1),padding-left .22s cubic-bezier(.2,.7,.3,1)}
.idx-row:hover,.idx-row:focus-visible{background:var(--seed-tint);padding-left:.7rem}
.idx-row:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.idx-n{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--moss);
  padding-top:.4rem}
.idx-main{min-width:0;padding-left:1.05rem;border-left:1px solid var(--rule-soft)}
.idx-title{display:block;font-family:var(--display);font-size:clamp(1.02rem,1.9vw,1.32rem);
  line-height:1.26;letter-spacing:-.01em;color:var(--ink)}
.idx-head{display:block;margin-top:.35rem;font-family:var(--body);font-style:italic;
  font-size:clamp(.88rem,1.4vw,.97rem);line-height:1.5;color:var(--ink-soft);max-width:62ch}
.idx-meta{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.59rem;
  letter-spacing:.075em;text-transform:uppercase;color:var(--ink-faint);line-height:1.5}
.idx-arrow{font-family:var(--mono);font-size:.88rem;color:var(--ink-faint);padding-top:.28rem;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),color .22s cubic-bezier(.2,.7,.3,1)}
.idx-row:hover .idx-arrow,.idx-row:focus-visible .idx-arrow{transform:translateX(.35rem);color:var(--moss)}
@media(max-width:30rem){
  .idx-row{grid-template-columns:1.6rem minmax(0,1fr);gap:.6rem}
  .idx-arrow{display:none}
}

/* ── method stages ───────────────────────────────────────────────────────── */
.stages{list-style:none;margin:0;padding:0;counter-reset:none}
.stage{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.75rem;position:relative;
  padding-block:1.9rem}
.stage + .stage{border-top:1px solid var(--rule-soft)}
.stage-rail{position:relative;display:flex;justify-content:flex-start}
.stage-n{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--moss);
  line-height:1.6}
.stage-body{min-width:0}
.stage-name{font-family:var(--display);font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:400;
  line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin:0 0 .3rem}
.stage-when{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 .8rem;line-height:1.5}
.stage-what{margin:0 0 .7rem;color:var(--ink-soft);line-height:1.68;max-width:58ch}
.stage-who{font-family:var(--mono);font-size:.63rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);margin:0;line-height:1.5}
@media(min-width:56rem){
  .stage{grid-template-columns:4rem minmax(0,1fr);gap:2.5rem;padding-block:2.3rem}
  .stage-rail{position:sticky;top:5.5rem;align-self:start;height:max-content}
  .stage-n{font-size:.72rem}
}

/* ── build dossiers ──────────────────────────────────────────────────────── */
.dossiers{border-top:1px solid var(--rule)}
.dossier{padding-block:2.6rem;border-top:1px solid var(--rule)}
.dossier:first-child{border-top:0}
.dos-head{display:flex;gap:1.1rem;align-items:baseline;margin-bottom:1.6rem}
.dos-n{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--moss);flex:none}
.dos-kind{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 .4rem}
.dos-name{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3.2vw,2.3rem);
  line-height:1.05;letter-spacing:-.025em;color:var(--ink);margin:0}
.dos-grid{display:grid;grid-template-columns:1fr;gap:1.75rem}
@media(min-width:56rem){.dos-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:3rem}}
.dos-text p{margin:0 0 1rem;color:var(--ink-soft);line-height:1.72;max-width:64ch}
.dos-text p:last-child{margin-bottom:0}
.dos-metrics{display:grid;gap:1px;background:var(--rule-soft);
  border:1px solid var(--rule-soft);align-self:start}
.dos-m{background:var(--page);padding:.95rem 1.05rem}
.dos-m b{display:block;font-family:var(--display);font-weight:400;font-size:1.4rem;
  line-height:1.1;color:var(--signal)}
.dos-m span{display:block;margin-top:.3rem;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);line-height:1.45}
.dos-points{list-style:none;margin:1.9rem 0 0;padding:0;display:grid;gap:.75rem;max-width:76ch}
.dos-points li{position:relative;padding-left:1.15rem;color:var(--ink-soft);line-height:1.62}
.dos-points li::before{content:"";position:absolute;left:0;top:.66em;width:.5rem;height:1px;
  background:var(--moss)}

/* ── schematics ──────────────────────────────────────────────────────────── */
.dos-fig{margin:2.2rem 0 0;border:1px solid var(--rule-soft);background:var(--page);
  padding:1.1rem 1.1rem .6rem}
.dos-fig figcaption{margin-top:.8rem;padding-top:.6rem;border-top:1px solid var(--rule-soft);
  font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint)}
.sc{display:block;width:100%;height:auto;overflow:visible}
.sc-box rect{fill:none;stroke:var(--ink-faint);stroke-width:1.25}
.sc-head{fill:var(--ink-faint)}
.sc-arrow line,.sc-arrow path{stroke:var(--ink-faint);stroke-width:1.25;fill:none}
.sc-t{font-family:var(--mono);font-size:11px;letter-spacing:.12em;fill:var(--ink)}
.sc-s{font-family:var(--body);font-size:10.5px;fill:var(--ink-faint)}
.sc-note{font-family:var(--mono);font-size:9px;letter-spacing:.12em;fill:var(--moss)}
.sc-cap{font-family:var(--mono);font-size:9px;letter-spacing:.04em;fill:var(--ink-faint)}
.sc-rec rect{fill:var(--rule-soft)}

/* ── expandable architecture layer ───────────────────────────────────────── */
.sc--detail{margin-block:.15rem}
.sc-band{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;fill:var(--ink-faint)}
.dos-more{margin-top:1rem;border:1px solid var(--rule-soft);background:var(--page)}
.dos-more summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.72rem 1rem;cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);transition:background .15s,color .15s}
.dos-more summary::-webkit-details-marker{display:none}
.dos-more summary::marker{content:""}
.dos-more summary:hover{background:var(--surface);color:var(--ink)}
.dos-more summary:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.dm-icon{font-family:var(--mono);font-size:.85rem;color:var(--moss);line-height:1}
.dm-icon::before{content:"+"}
.dos-more[open] .dm-icon::before{content:"–"}
.dm-body{padding:1rem;border-top:1px solid var(--rule-soft)}
.dm-fig{margin:0 0 1.5rem}
.dm-fig figcaption{margin-top:.8rem;padding-top:.6rem;border-top:1px solid var(--rule-soft);
  font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint)}
.dm-k{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--moss);margin:0 0 .9rem}
.dm-solves ul{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;max-width:80ch}
.dm-solves li{position:relative;padding-left:1.15rem;color:var(--ink-soft);line-height:1.65}
.dm-solves li::before{content:"";position:absolute;left:0;top:.66em;width:.5rem;height:1px;
  background:var(--moss)}

/* ── photographic header ─────────────────────────────────────────────────── */
.ph{margin:0}
.ph-band{position:relative;margin:0;height:clamp(300px,58svh,660px);overflow:hidden;
  background:var(--inset);will-change:opacity}
.ph-band img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.ph-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  /* tight: the image keeps its contrast until the last fifth */
  background:linear-gradient(to bottom,
    transparent 0%, transparent 74%,
    color-mix(in srgb, var(--page) 55%, transparent) 88%,
    var(--page) 100%)}
.ph-copy{position:relative;z-index:1;padding-block:.5rem clamp(2rem,6vh,4rem);
  margin-top:clamp(-5.5rem,-9vh,-2.5rem)}
.ph-copy .eyebrow{background:var(--page)}
.ph-copy .tagline{margin:0 0 1rem}
.ph-copy .lede{margin:0}

/* ── evolution components ────────────────────────────────────────────────── */
.systems{display:grid;gap:0;border-top:1px solid var(--rule)}
.sys{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto 1.4rem;gap:1rem;
  align-items:baseline;padding:1.1rem .4rem 1.15rem 0;border-bottom:1px solid var(--rule-soft);
  text-decoration:none;color:inherit;transition:background .18s,padding-left .18s}
.sys:hover{background:var(--seed-tint);padding-left:.6rem}
.sys-n{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--moss);padding-top:.2rem}
.sys-main{min-width:0}
.sys-name{display:block;font-family:var(--display);font-size:1.05rem;color:var(--ink);line-height:1.2}
.sys-line{display:block;margin-top:.25rem;color:var(--ink-soft);font-size:.92rem;line-height:1.5}
.sys-metric{font-family:var(--mono);font-size:.56rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap}
.sys-arrow{font-family:var(--mono);font-size:.85rem;color:var(--ink-faint);transition:transform .18s}
.sys:hover .sys-arrow{transform:translateX(.3rem);color:var(--moss)}

.doors{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule-soft);
  border:1px solid var(--rule-soft)}
@media(min-width:52rem){.doors{grid-template-columns:repeat(2,minmax(0,1fr))}}
.door{background:var(--surface);padding:1.6rem 1.5rem 1.7rem;display:flex;flex-direction:column;gap:.55rem}
.door-n{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--moss);margin:0}
.door-k{font-family:var(--display);font-weight:400;font-size:1.35rem;letter-spacing:-.02em;
  color:var(--ink);margin:0;line-height:1.15}
.door-b{margin:0;color:var(--ink-soft);line-height:1.6;font-size:.95rem;max-width:52ch}
.door .back{margin-top:.5rem;align-self:flex-start}

.roles-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--moss);margin:0 0 .9rem}
.roles-b{margin:0 0 1rem;color:var(--ink-soft);line-height:1.7;max-width:66ch}
.roles-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;max-width:70ch}
.roles-list li{position:relative;padding-left:1.15rem;color:var(--ink-soft);line-height:1.6}
.roles-list li::before{content:"";position:absolute;left:0;top:.66em;width:.5rem;height:1px;
  background:var(--moss)}

.shapes{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.5rem}
@media(min-width:54rem){.shapes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.shape{background:var(--surface);border:1px solid var(--rule-soft);padding:1.4rem 1.3rem 1.5rem;
  display:flex;flex-direction:column;gap:.5rem}
.shape-when{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin:0}
.shape-code{font-family:var(--display);font-weight:400;font-size:1.15rem;letter-spacing:-.015em;
  color:var(--ink);margin:0;line-height:1.2}
.shape-purpose{font-family:var(--display);font-size:.95rem;color:var(--moss);margin:0;line-height:1.4}
.shape-get{margin:0;color:var(--ink-soft);font-size:.92rem;line-height:1.6}
.shape-note{margin:auto 0 0;padding-top:.8rem;border-top:1px solid var(--rule-soft);
  color:var(--ink-faint);font-size:.85rem;line-height:1.5}

.contrast{margin-top:2.2rem;border-top:1px solid var(--rule);padding-top:1.5rem}
.contrast-k{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--moss);margin:0 0 1rem}
.contrast-pair{display:grid;grid-template-columns:1fr;gap:.6rem;align-items:center}
@media(min-width:44rem){.contrast-pair{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1.2rem}}
.contrast-a{margin:0;color:var(--ink-faint);font-size:1rem;line-height:1.4;
  text-decoration:line-through;text-decoration-thickness:1px}
.contrast-arrow{font-family:var(--mono);color:var(--moss);font-size:1rem;text-align:center}
.contrast-b{margin:0;color:var(--ink);font-family:var(--display);font-size:1.1rem;line-height:1.35}
.contrast-note{margin:1.1rem 0 0;color:var(--ink-soft);line-height:1.7;max-width:68ch}

/* ── CV ──────────────────────────────────────────────────────────────────── */
.cv{padding-block:2.5rem 5rem;max-width:78ch}
.cv-head{border-bottom:1px solid var(--rule);padding-bottom:1.6rem;margin-bottom:2rem}
.cv-name{font-family:var(--display);font-weight:400;font-size:clamp(2rem,4.6vw,3.1rem);
  letter-spacing:-.03em;line-height:1;color:var(--ink);margin:0 0 .4rem}
.cv-role{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--moss);margin:0 0 1.2rem}
.cv-contact{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem}
.cv-contact li{display:flex;gap:.5rem;align-items:baseline;font-size:.9rem}
.cv-ck{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint)}
.cv-contact a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.cv-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.cv-btn{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  background:transparent;color:var(--ink);border:1px solid var(--rule);padding:.5rem .8rem;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.cv-btn:hover,.cv-btn:focus-visible{background:var(--primary);border-color:var(--primary);
  color:var(--page);outline:none}

.cv-sec{margin-bottom:2.4rem}
.cv-h{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--moss);margin:0 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--rule)}

.cv-entry{border-bottom:1px solid var(--rule-soft);padding:.9rem 0}
.cv-entry summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem 1rem;
  cursor:pointer;list-style:none;align-items:baseline}
.cv-entry summary::-webkit-details-marker{display:none}
.cv-entry summary::marker{content:""}
.cv-entry summary:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.cv-role-t{font-family:var(--display);font-size:1.1rem;letter-spacing:-.015em;color:var(--ink);
  line-height:1.25}
.cv-role-o{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);grid-column:1;margin-top:.15rem}
.cv-role-d{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:var(--ink-faint);
  grid-column:2;grid-row:1;white-space:nowrap}
.cv-bullets{list-style:none;margin:1rem 0 .2rem;padding:0;display:grid;gap:.6rem}
.cv-bullets li{position:relative;padding-left:1.1rem;color:var(--ink-soft);line-height:1.62;
  font-size:.94rem}
.cv-bullets li::before{content:"";position:absolute;left:0;top:.66em;width:.45rem;height:1px;
  background:var(--moss)}
.cv-entry:not([open]) .cv-bullets{display:none}

.cv-edu{margin-bottom:1rem}
.cv-edu-t{font-family:var(--display);font-size:1.05rem;color:var(--ink);margin:0 0 .15rem}
.cv-edu-d{font-family:var(--body);font-size:.95rem;color:var(--ink-soft)}
.cv-edu-o{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin:0;display:flex;gap:.8rem;flex-wrap:wrap}
.cv-langs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 2rem}
.cv-langs li{display:flex;gap:.5rem;align-items:baseline}
.cv-lang{font-family:var(--display);font-size:1rem;color:var(--ink)}
.cv-level{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint)}

@media print{
  .nav,.foot,.cv-actions,.cv-btn,body::after{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  .cv{padding:0;max-width:none}
  .cv-name,.cv-role-t,.cv-edu-t,.cv-lang{color:#000!important}
  .cv-entry,.cv-sec{break-inside:avoid}
  .cv-entry summary{cursor:default}
  .cv-bullets li,.cv-edu-o,.cv-role-o,.cv-role-d,.cv-level,.cv-ck{color:#333!important}
  .cv-bullets li::before{background:#000!important}
  a{color:#000!important;border:0!important;text-decoration:none}
}

/* ── carousel ─────────────────────────────────────────────────────────────
   Scroll-snap does the work, so it swipes natively on touch and needs no JS to
   move. JS only drives the counter and the two buttons. */
.car-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-bottom:.9rem}
.car-count{font-family:var(--mono);font-size:.7rem;color:var(--ink-faint);margin:0}
.carousel{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
.carousel::-webkit-scrollbar{display:none}
.carousel:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.car-track{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.car-slide{scroll-snap-align:start;flex:0 0 auto;width:min(84vw, 34rem)}
.car-slide .fig{margin:0}
.car-slide img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px;
  border:1px solid var(--rule-soft);background:var(--inset)}
.car-slide figcaption{margin-top:.55rem;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.car-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1rem;flex-wrap:wrap}
.car-note{margin:0;font-size:.85rem;color:var(--ink-faint)}
.car-btns{display:flex;gap:.5rem}
.car-btns button{width:2.5rem;height:2.5rem;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--rule);color:var(--ink-soft);
  font-size:1rem;line-height:1;transition:border-color .2s,color .2s}
.car-btns button:hover{border-color:var(--moss);color:var(--ink)}
.car-btns button:disabled{opacity:.35;cursor:default}

/* ── who am i ────────────────────────────────────────────────────────────── */
.tagline{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,5.4vw,3.2rem);
  line-height:1.1;letter-spacing:-.025em;margin:0 0 1.1rem;max-width:22ch;color:var(--ink)}
.about-block{margin-bottom:2.4rem}
.about-block h2,.throughline h2{font-family:var(--display);font-weight:400;font-size:1.35rem;
  letter-spacing:-.01em;margin:0 0 .7rem}
.about-block p{margin:0 0 .9rem;color:var(--ink-soft);line-height:1.72;max-width:66ch}
.throughline{background:var(--raised);border-left:2px solid var(--moss);border-radius:0 10px 10px 0;
  padding:1.35rem 1.5rem;margin:0 0 1.5rem}
.throughline p{margin:0 0 .7rem;color:var(--ink-soft);line-height:1.7;max-width:68ch}
.throughline p:last-child{margin-bottom:0}
.builds{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.5rem}
@media(min-width:56rem){.builds{grid-template-columns:repeat(3,1fr)}}
.build{background:var(--surface);border:1px solid var(--rule-soft);border-radius:12px;
  padding:1.25rem 1.3rem;display:flex;flex-direction:column}
.build-head{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.7rem}
.build h3{margin:0;font-family:var(--display);font-weight:400;font-size:1.1rem;line-height:1.25;
  letter-spacing:-.01em;color:var(--ink)}
.build-metric{font-family:var(--mono);font-size:.65rem;line-height:1.5;color:var(--moss)}
.build p{margin:0 0 .7rem;color:var(--ink-soft);font-size:.93rem;line-height:1.62}
.build-note{margin-top:auto!important;padding-top:.8rem;border-top:1px solid var(--rule-soft);
  font-size:.88rem!important;color:var(--ink-faint)!important}
.metric-line{font-family:var(--mono);font-size:.68rem;line-height:1.6;color:var(--moss);margin:0}
.terrain{margin-top:1.25rem;border-top:1px solid var(--rule-soft)}
.terrain-row{display:grid;grid-template-columns:1fr;gap:.15rem;padding:.8rem 0;
  border-bottom:1px solid var(--rule-soft)}
@media(min-width:46rem){.terrain-row{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) minmax(0,1fr);gap:1rem;align-items:baseline}}
.terrain-what{font-family:var(--display);font-size:1.02rem;color:var(--ink)}
.terrain-when{font-family:var(--mono);font-size:.68rem;color:var(--ink-faint);line-height:1.5}
.terrain-note{font-size:.9rem;color:var(--ink-soft);line-height:1.55}

.rv{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .card,.tier{transition:none}
}

/* ── theme toggle — dark is the default, light is the option ─────────────── */
.theme-toggle{display:inline-flex;align-items:center;gap:.35rem;background:transparent;
  border:0;padding:.28rem .2rem;cursor:pointer;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);transition:border-color .2s,color .2s}
.theme-toggle:hover{border-color:var(--moss);color:var(--ink-soft)}
/* the label names where you are going, not where you are */
.theme-toggle .tt-dark{display:none}
:root[data-theme='light'] .theme-toggle .tt-dark{display:inline}
:root[data-theme='light'] .theme-toggle .tt-light{display:none}

/* ══════════════════════════════════════════════════════════════════════════
   skin-brutal.css — the B1 "Xerox" skin for the whole site.

   Loaded only when SKIN=brutal. It REPLACES the editorial layer's visual
   language while keeping every block, page and token contract intact.

   THE COLOUR IDEA — one theme, two keys.
     navy   · the Senna ground, constant across both themes
     paper  · the ink in the dark theme and the ground in the light one
     orange · the accent, in the same role in both themes

   So nothing is "inverted". The same three colours simply change instrument:
   navy is a stage in the dark theme and a voice in the light one; paper is the
   reverse. Orange is the one constant, which is why it never moves role —
   only its small-text variant deepens on paper, because #ff3d2e reaches
   ~3.6:1 there and small labels need 4.5:1.

   BRUTALIST RULES applied here:
     · no border-radius anywhere
     · no blurred shadow — hard offsets only
     · rules, not cards, carry structure
     · display type is heavy, uppercase, tightly tracked
     · colour is flat, in blocks, never in gradients
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the palette, per theme ─────────────────────────────────────────────── */
:root {
  /* dark — the default */
  --page:        #0a0f1e;
  --surface:     #16203a;
  --inset:       #0d1428;
  --raised:      #223055;
  --ink:         #f7f5f0;
  --ink-soft:    #cfcdc6;
  --ink-faint:   #93a1c4;
  --rule:        #43517d;
  --rule-soft:   #223055;

  --primary:        #ff3d2e;
  --primary-strong: #ff6a5f;
  --moss:           #ff3d2e;
  --moss-soft:      #ff6a5f;
  --signal:         #ff3d2e;
  --focus-ring:     0 0 0 3px #ff3d2e;

  --shadow-hard:  5px 5px 0 #0a0f1e;
  --shadow-hard-accent: 5px 5px 0 #ff3d2e;
}

:root[data-theme='light'] {
  --page:        #f7f5f0;
  --surface:     #efece4;
  --inset:       #e6e2d8;
  --raised:      #ffffff;
  --ink:         #0a0f1e;
  --ink-soft:    #26314a;
  --ink-faint:   #4d5668;
  --rule:        #0a0f1e;
  --rule-soft:   #cdc8bb;

  --primary:        #ff3d2e;
  --primary-strong: #c22d17;
  --moss:           #c22d17;
  --moss-soft:      #9e2412;
  --signal:         #c22d17;

  --shadow-hard:  5px 5px 0 #0a0f1e;
  --shadow-hard-accent: 5px 5px 0 #ff3d2e;
}

/* ── type ───────────────────────────────────────────────────────────────── */
:root {
  --display: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body { background: var(--page); color: var(--ink-soft); }

h1, h2, h3, .tagline, .idx-title, .stage-name, .benefit-when,
.metric-v, .scale-n, .tier-price, .move-k, .card h3, .spec-h {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.035em;
  line-height: .95;
  color: var(--ink);
}

.eyebrow, .rail-k, .stage-when, .stage-who, .metric-k,
.idx-meta, .idx-n, .benefit-n, .move-n, .tier-code, .terrain-when,
.terrain-when, .card-top, .card-note, .foot-meta, .nav-links, .nav-by {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 400;
}

/* ── the blanket brutalist corrections ──────────────────────────────────── */
*, *::before, *::after { border-radius: 0 !important; }
.nav, .card, .tier, .benefit, .metric, .callout, .table-scroll,
.hero-block--full, .theme-toggle, .nav-cta, .nav-box, .fig img, .pullquote {
  box-shadow: none;
}

/* ── nav ────────────────────────────────────────────────────────────────── */
.nav {
  background: var(--page);
  border-bottom: 3px solid var(--rule);
  backdrop-filter: none;
}
.nav-mark { font-family: var(--display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.03em; font-size: 1.05rem; }
.nav-by { color: var(--ink-faint); font-size: .58rem; }
.nav-links a { color: var(--ink-soft); border-bottom: 2px solid transparent; padding-block: .3rem; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); border-bottom-color: var(--primary); }
.nav-cta { border: 2px solid var(--rule) !important; background: transparent; }
.nav-box { border: 2px solid var(--moss) !important; color: var(--moss) !important; }
.nav-box:hover, .nav-box[aria-current] { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--accent-invert) !important; }
.nav-sep { width: 2px; height: 1.35em; background: var(--rule); }
.nav-cta:hover { background: var(--primary) !important; color: var(--page) !important;
  border-color: var(--primary) !important; }
.theme-toggle { border: 0; background: transparent; }
.theme-toggle:hover { color: var(--primary); }

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero-block { border-bottom: 3px solid var(--rule); padding-block: 2.6rem 2rem; }
.hero-block--full { border-bottom: 3px solid var(--rule); }
.eyebrow {
  display: inline-block; align-self: flex-start; color: var(--primary);
  border: 2px solid var(--primary); padding: .35rem .6rem; margin-bottom: 1.1rem;
  font-size: .62rem; width: max-content; max-width: 100%;
}
.hero-block--full .tagline {
  font-size: clamp(1.9rem, 4.5vw, 3.5rem);
  line-height: .92; letter-spacing: -.042em; max-width: 15ch;
}
.tagline { font-size: clamp(1.7rem, 4.2vw, 3rem); letter-spacing: -.04em; max-width: 17ch; }
.lede, .hero .sub { color: var(--ink-soft); }
.hero-anchor { gap: 1rem; }

/* ── section rhythm: rules instead of air ───────────────────────────────── */
.block, .rail-block, .stage, .idx-row, .benefit, .metric {
  border: 2px solid var(--rule);
}
.block { padding: 2rem 1.5rem; margin-block: 1.6rem; }
.block--lede { border: 0; padding: 0; margin-block: 0 1.8rem; }
.block h2, .rail-k { color: var(--primary); }
.rail-block { padding: 1.6rem 1.5rem; margin-block: .5rem; }
.rail-k { font-size: .62rem; }

/* full-bleed bands keep the frame */
.bleed { border-block: 3px solid var(--rule); background: var(--inset); }
.bleed--tint { background: var(--surface); }

/* ── stats ──────────────────────────────────────────────────────────────── */
.scale-row { border: 3px solid var(--rule); background: var(--page); gap: 0; }
.scale-cell { border-left: 2px solid var(--rule); padding: 1.1rem 1rem; }
.scale-cell:first-child { border-left: 0; }
.scale-n { color: var(--ink); font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.scale-k { color: var(--ink-faint); font-family: var(--mono); font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase; }

/* ── benefits / outcomes ────────────────────────────────────────────────── */
.benefits { gap: 1rem; }
.benefit { background: var(--surface); padding: 1.5rem 1.4rem; box-shadow: var(--shadow-hard); }
.benefit:last-child { background: var(--inset); box-shadow: var(--shadow-hard-accent); }
.benefit-when { font-size: 1.15rem; }
.benefit-n { color: var(--primary); font-size: .7rem; }
.benefit-list li { color: var(--ink-soft); }
.benefit-list li::before { background: var(--primary); width: .6rem; height: 2px; }

/* ── moves ──────────────────────────────────────────────────────────────── */
.move { border-top: 2px solid var(--rule); padding-block: 1.1rem; }
.move-n { color: var(--primary); font-size: .7rem; }
.move-k { font-size: 1.1rem; }
.move-v { color: var(--ink-soft); }

/* ── tables ─────────────────────────────────────────────────────────────── */
.table-scroll { border: 2px solid var(--rule); }
table.diff, .table-scroll table { border-collapse: collapse; }
th { background: var(--inset); color: var(--ink); font-family: var(--mono);
  text-transform: uppercase; letter-spacing: .12em; font-size: .58rem;
  border-bottom: 2px solid var(--rule); padding: .8rem .9rem; text-align: left; }
td { border-bottom: 1px solid var(--rule-soft); color: var(--ink-soft); padding: .8rem .9rem; }
tr:last-child td { border-bottom: 0; }

/* ── cards ──────────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 2px solid var(--rule); padding: 1.3rem 1.2rem;
  box-shadow: var(--shadow-hard); }
.card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard-accent); }
.card-top { color: var(--primary); font-size: .56rem; }
.card .headline { color: var(--primary-strong); font-style: normal; }
.card h3 { font-size: 1.05rem; line-height: 1.05; }
.card-note { color: var(--ink-faint); border-top: 1px solid var(--rule-soft); padding-top: .6rem; }

/* ── work index ─────────────────────────────────────────────────────────── */
.idx-row { border: 0; border-bottom: 2px solid var(--rule); background: transparent;
  padding: 1.2rem .6rem; }
.idx-row:hover, .idx-row:focus-visible { background: var(--inset); padding-left: 1rem; }
.idx-n { color: var(--primary); font-size: .68rem; }
.idx-main { border-left: 2px solid var(--rule-soft); }
.idx-title { font-size: clamp(1.1rem, 2vw, 1.45rem); }
.idx-head { font-style: normal; color: var(--ink-soft); }
.idx-arrow { color: var(--primary); }

/* ── metrics ────────────────────────────────────────────────────────────── */
.metrics { border: 3px solid var(--rule); background: var(--rule); gap: 0; }
.metric { background: var(--page); border: 0; border-left: 1px solid var(--rule); }
.metric:first-child { border-left: 0; }
.metric-v { color: var(--signal); font-size: clamp(1.5rem, 2.8vw, 2rem); }
.metric-k { color: var(--ink-faint); font-size: .56rem; }

/* ── stages ─────────────────────────────────────────────────────────────── */
.stage { border: 0; border-top: 2px solid var(--rule); padding-block: 1.9rem; }
.stage-n { color: var(--primary); font-size: .72rem; }
.stage-name { font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
.stage-what { color: var(--ink-soft); }
.stage-who { color: var(--ink-faint); }

/* ── prose + callout ────────────────────────────────────────────────────── */
.prose h2 { color: var(--primary); font-family: var(--mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; }
.prose p, .rail-body p, .rail-body li { color: var(--ink-soft); }
.callout { border: 2px solid var(--rule); border-left: 6px solid var(--primary);
  background: var(--surface); padding: 1.4rem 1.5rem; }
.callout-k { color: var(--primary); font-family: var(--mono); font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase; display: block; margin-bottom: .5rem; }

/* ── tiers ──────────────────────────────────────────────────────────────── */
.tier { border: 2px solid var(--rule); background: var(--surface); padding: 1.5rem 1.4rem;
  box-shadow: var(--shadow-hard); }
.tier.is-lead { border-width: 3px; border-color: var(--primary);
  box-shadow: var(--shadow-hard-accent); }
.tier-code { color: var(--primary); font-size: .58rem; }
.tier-price { font-size: 2rem; }
.tier-unit, .tier-pitch { color: var(--ink-soft); }
.tier h3 { font-family: var(--mono); font-size: .56rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); }
.tier-foot { border-top: 1px solid var(--rule-soft); color: var(--ink-faint); }

/* ── working rows ───────────────────────────────────────────────────────── */
.working-row { border-top: 1px solid var(--rule-soft); padding-block: .7rem; }
.working-k { color: var(--primary); font-family: var(--mono); font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase; }
.working-v { color: var(--ink-soft); }

/* ── figures + carousel ─────────────────────────────────────────────────── */
.fig { border: 2px solid var(--rule); background: var(--inset); padding: 0; }
.fig img { display: block; filter: saturate(1.05) contrast(1.04); }
.fig figcaption { background: var(--rule); color: var(--page); font-family: var(--mono);
  font-size: .55rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .4rem .6rem; }
.fig--bleed { border-inline: 0; }
.carousel { border-block: 3px solid var(--rule); }
.car-slide .fig { box-shadow: var(--shadow-hard); }
.car-btns button { border: 2px solid var(--rule); background: var(--page); color: var(--ink);
  box-shadow: 3px 3px 0 var(--rule); }
.car-btns button:hover { background: var(--primary); color: var(--page);
  border-color: var(--primary); box-shadow: 3px 3px 0 var(--ink); }
.car-count, .car-note { color: var(--ink-faint); font-family: var(--mono);
  letter-spacing: .1em; text-transform: uppercase; font-size: .58rem; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot { border-top: 3px solid var(--rule); background: var(--inset); }
.foot-line { color: var(--ink-soft); }
.foot-meta a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.foot-sep { color: var(--rule); }

/* ── links ──────────────────────────────────────────────────────────────── */
a { color: var(--primary-strong); }
a.back { color: var(--ink); border-bottom: 2px solid var(--primary); text-decoration: none; }
a.back:hover { background: var(--primary); color: var(--page); }

/* ── the theme toggle is a physical switch here ─────────────────────────── */
.theme-toggle { font-size: .58rem; letter-spacing: .14em; }

/* ── grain: keep it, but quieter under a hard-edged skin ────────────────── */
body::after { opacity: .5; }

/* ── narrow screens ─────────────────────────────────────────────────────── */
@media (max-width: 47.99rem) {
  .block { padding: 1.4rem 1.1rem; margin-block: 1.1rem; }
  .benefit, .tier, .card { box-shadow: 4px 4px 0 var(--rule); }
  .hero-block--full .tagline { font-size: clamp(1.85rem, 8.4vw, 2.6rem); }
}

/* ── build dossiers ─────────────────────────────────────────────────────── */
.dossiers { border-top: 3px solid var(--rule); }
.dossier { border-top: 2px solid var(--rule); }
.dos-name { font-weight: 900; text-transform: uppercase; font-size: clamp(1.7rem,3.4vw,2.5rem); }
.dos-kind { color: var(--primary); }
.dos-n { color: var(--primary); font-size: .72rem; }
.dos-metrics { border: 2px solid var(--rule); background: var(--rule); }
.dos-m { background: var(--page); }
.dos-m b { font-weight: 900; color: var(--signal); }
.dos-points li::before { background: var(--primary); height: 2px; width: .6rem; }
.nav-brand-accent { color: var(--primary); }

/* ── schematics under the B1 skin ───────────────────────────────────────── */
.dos-fig { border: 2px solid var(--rule); background: var(--inset); padding: 1.2rem 1.2rem .7rem; }
.dos-fig figcaption { border-top: 2px solid var(--rule); color: var(--ink-faint); }
.sc-box rect { stroke: var(--rule); stroke-width: 2; }
.sc-head { fill: var(--rule); }
.sc-arrow line, .sc-arrow path { stroke: var(--rule); }
.sc-t { font-weight: 700; }
.sc-note { fill: var(--primary); font-weight: 700; }
.sc-arrow line, .sc-arrow path { stroke-width: 2; }

/* ── expandable layer, B1 ───────────────────────────────────────────────── */
.dos-more { border: 2px solid var(--rule); background: var(--page); }
.dos-more summary { text-transform: uppercase; font-weight: 700; }
.dos-more summary:hover { background: var(--primary); color: var(--page); }
.dos-more summary:hover .dm-icon { color: var(--page); }
.dm-body { border-top: 2px solid var(--rule); }
.dm-fig figcaption { border-top: 2px solid var(--rule); }
.dm-k { color: var(--primary); font-weight: 700; }
.dm-solves li::before { background: var(--primary); height: 2px; width: .6rem; }
.sc-band { fill: var(--primary); font-weight: 700; }

/* ── photographic header, B1 ────────────────────────────────────────────── */

/* ── evolution components under B1 ──────────────────────────────────────── */
.systems { border-top: 3px solid var(--rule); }
.sys { border-bottom: 2px solid var(--rule); }
.sys-name { font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; font-size: 1.1rem; }
.sys-n { color: var(--moss); }
.doors { border: 2px solid var(--rule); background: var(--rule); }
.door { background: var(--surface); }
.door-k { font-weight: 900; text-transform: uppercase; }
.door-n { color: var(--moss); }
.shapes { gap: 1rem; }
.shape { border: 2px solid var(--rule); box-shadow: var(--shadow-hard); }
.shape-code { font-weight: 900; text-transform: uppercase; }
.shape-purpose { color: var(--moss); }
.contrast { border-top: 2px solid var(--rule); }
.contrast-a { text-decoration-thickness: 2px; }
.contrast-b { font-weight: 900; }
.roles-list li::before { background: var(--primary); height: 2px; width: .6rem; }