/* ══════════════════════════════════════════════════════════════════════════
   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

   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;

  /* ── 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'] {
  --bg-light:  #f6f8f9;
  --bg-subtle: var(--bg-light);
  --bg-white:  #ffffff;
  --bg-raised: #ffffff;
  --bg-inset:  var(--bg-light);

  --text-dark:         #1f2933;
  --text-body:         #3d4852;
  --text-muted:        #5f6b7a;
  --text-muted-raised: var(--text-muted);
  --text-inverted:     #111827;

  --border:        #cbd5dc;
  --border-strong: #d1d9e0;
  --border-raised: var(--border);

  --primary:              #f06a6a;
  --primary-hover:        #e05555;
  --primary-subtle:       rgba(240, 106, 106, 0.08);
  --primary-strong:       #c94141;
  --primary-strong-hover: #b93a3a;

  --success:    #4caf50;
  --success-bg: #f0f9f4;
  --warning:    #f5a623;
  --warning-bg: #fff9e6;
  --error:      #e85555;
  --danger:     #e85555;
  --error-bg:   #fdf0f0;
  --info:       #1d4ed8;
  --info-bg:    #dbeafe;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 0 40px rgba(0, 0, 0, 0.05);

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

  /* the ramp re-seated on light ground — same order, same meaning */
  --ramp-0: #1f2933;
  --ramp-1: #3d4852;
  --ramp-2: #5f6b7a;
  --ramp-3: #7d8b99;
  --ramp-4: #b85c5c;
  --ramp-5: #a34a4a;
  --ramp-6: #8c3d3d;

  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-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}
.nav-cta:hover{border-color:var(--moss);background:var(--seed-tint)!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(4,1fr)}}
.scale-cell{background:var(--surface);padding:1.25rem 1.15rem}
.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}
.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}
.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 ─────────────────────────────────────────────────── */
.benefits{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.25rem}
@media(min-width:54rem){.benefits{grid-template-columns:repeat(3,1fr)}}
.benefit{background:var(--surface);border:1px solid var(--rule-soft);border-radius:12px;
  padding:1.3rem 1.35rem;display:flex;flex-direction:column}
.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)}

/* ── 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:20rem 20rem 1fr;gap:1.5rem;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:1px solid var(--rule);border-radius:999px;padding:.28rem .6rem;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)}
.theme-toggle .tt-light{display:none}
:root[data-theme='light'] .theme-toggle .tt-dark{display:none}
:root[data-theme='light'] .theme-toggle .tt-light{display:inline}