/* ============================================================
   BRIGHT THEME  -  light editorial, one accent, self-hosted type.
   Loads after site.css and overrides it. Toggle with THEME in
   src/build.py; set THEME = "editorial" to restore the dark site.

   Radius rule: buttons = pill, cards/panels = 14px, inputs = 10px.
   One accent, used on every page. Dark-page assumptions inherited
   from site.css are unwound explicitly at the bottom of this file.
   ============================================================ */

:root{
  --void:      #FAF9F7;   /* warm paper */
  --surface:   #FFFFFF;
  --surface-2: #F3F1EC;
  --line:      rgba(20,18,15,.14);
  --line-soft: rgba(20,18,15,.07);
  --text:      #14120F;
  --muted:     #6A645C;

  --acid:      #12574B;   /* the single accent */
  --acid-deep: #0C4038;
  --acid-wash: rgba(18,87,75,.09);
  --violet:    #8A8279;   /* demoted: no second accent */

  --display: 'Bricolage Grotesque', 'Outfit', system-ui, sans-serif;
  --sans:    'Outfit', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-card: 14px;
  --r-input: 10px;
}

body{ background:var(--void); color:var(--text); }
::selection{ background:var(--acid); color:#fff; }

/* the dark grain reads as dirt on paper */
body::after{ display:none; }

/* ---------- type ---------- */
h1{ font-size:clamp(2.6rem,6.2vw,5.4rem); font-weight:800; letter-spacing:-.045em; line-height:.94; }
h2{ font-size:clamp(1.85rem,4.2vw,3.4rem); letter-spacing:-.038em; }
em{ font-style:normal; color:var(--acid); font-weight:600; }
.lede{ color:#3E3A34; font-size:clamp(1.05rem,1.4vw,1.28rem); line-height:1.6; }
.body{ color:var(--muted); }
.mono{ color:var(--muted); }
.mono .num{ color:var(--acid); }
.sec-label{ color:var(--acid-deep); }
.sec-label::before{ background:var(--acid); }

/* ---------- query line: the search idea as type, no widget ---------- */
.query{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin:0 0 1.5rem; font-family:var(--mono);
  font-size:clamp(.75rem,1.3vw,.8125rem); color:var(--muted);
}
.query .ico{ width:14px; height:14px; flex:none; stroke:var(--acid); }
.query .q{ color:var(--text); }
.query .caret{
  display:inline-block; width:.5em; height:1.05em; background:var(--acid);
  translate:0 .12em; animation:blink 1.15s steps(1) infinite;
}
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
@media (prefers-reduced-motion:reduce){ .query .caret{ animation:none; } }

/* ---------- hero ---------- */
.hero--bright{ padding-block:clamp(7rem,12vw,10rem) clamp(3rem,6vw,5rem); }
.hero--bright .hero-glow{ display:none; }
.hero-split{ display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,5vw,4rem); align-items:center; }
@media (min-width:1040px){
  .hero-split{ grid-template-columns:minmax(0,1fr) minmax(0,24rem); gap:clamp(3rem,6vw,5.5rem); }
}
.hero-copy .lede{ max-width:44ch; }
.hero-copy .cta-row{ margin-top:2.1rem; }

.hero-card{
  margin:0; border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--surface); overflow:hidden;
  box-shadow:0 1px 2px rgba(20,18,15,.04), 0 12px 32px rgba(20,18,15,.06);
}
.hero-card img{ width:100%; height:auto; display:block; }
.hero-card figcaption{
  display:flex; flex-direction:column; gap:.3rem;
  padding:1rem 1.15rem; border-top:1px solid var(--line-soft);
}
.hero-card-role{ font-weight:600; font-size:.9375rem; letter-spacing:-.01em; }
.hero-card-loc{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; }

/* ---------- case index ---------- */
.crows{ border-top:1px solid var(--line-soft); }
.crow{
  display:grid; grid-template-columns:1fr; gap:1rem; align-items:start;
  padding-block:clamp(1.6rem,3vw,2.4rem); border-bottom:1px solid var(--line-soft);
  text-decoration:none; color:inherit; transition:background .3s var(--ease);
}
.crow:hover{ background:var(--surface); }
@media (min-width:900px){
  .crow{ grid-template-columns:3rem minmax(0,1fr) 11rem 6rem; gap:2rem; align-items:center; }
}
.crow-n{ color:var(--acid); font-size:.75rem; }
.crow-kicker{ display:block; margin-bottom:.5rem; font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; }
.crow-title{
  font-family:var(--display); font-weight:700; letter-spacing:-.028em;
  font-size:clamp(1.15rem,2vw,1.6rem); line-height:1.15; margin:0 0 .55rem; max-width:26ch;
}
.crow-blurb{ display:block; max-width:58ch; font-size:.9375rem; }
.crow-metric b{
  display:block; font-family:var(--display); font-weight:800; color:var(--acid);
  font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1; letter-spacing:-.03em;
}
.crow-metric .k{
  display:block; margin-top:.35rem; font-family:var(--mono);
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.crow-go{ font-size:.6875rem; color:var(--acid-deep); white-space:nowrap; }
.crow-go .arw{ display:inline-block; transition:transform .3s var(--ease); }
.crow:hover .crow-go .arw{ transform:translateX(4px); }

/* ---------- unwinding the dark-page assumptions in site.css ---------- */
.site-head.is-stuck{
  background:rgba(250,249,247,.82); border-bottom-color:var(--line);
}
.wordmark .dot{ background:var(--acid); box-shadow:0 0 0 0 rgba(18,87,75,.5); }
@keyframes pulse{
  0%,70%,100%{ box-shadow:0 0 0 0 rgba(18,87,75,.45) }
  35%{ box-shadow:0 0 0 9px rgba(18,87,75,0) }
}
nav.mainnav a:hover{ background:rgba(20,18,15,.05); color:var(--text); }
nav.mainnav a[aria-current="page"]{ background:var(--acid); color:#fff; }

.btn{ background:var(--acid); border-color:var(--acid); color:#fff; }
.btn:hover{ background:var(--acid-deep); border-color:var(--acid-deep); }
.btn:active{ transform:translateY(1px); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn--ghost:hover{ background:rgba(20,18,15,.05); border-color:var(--text); color:var(--text); }

.prose p, .prose li, .role li, .comp-item span{ color:#4A453E; }

.field input::placeholder,.field textarea::placeholder{ color:#8C867D; }
.field input,.field textarea{ border-radius:var(--r-input); background:var(--surface); }
.form-status.ok{ background:var(--acid-wash); border-color:var(--acid); color:var(--acid-deep); }
.form-status.err{ background:rgba(176,42,26,.08); border-color:#B02A1A; color:#8E1F12; }

.marquee{ background:var(--surface); }
.marquee-track span::after{ color:var(--acid); }
.stat b, .metric b{ color:var(--acid); }
.cell{ background:var(--surface); border-radius:var(--r-card); }
.cell::before{ background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), var(--acid-wash), transparent 62%); }
.progress{ background:var(--acid); }
.cursor{ border-color:var(--acid); mix-blend-mode:normal; }
:focus-visible{ outline-color:var(--acid); }
.skip:focus{ background:var(--acid); color:#fff; }
.foot-col a:hover{ color:var(--acid); }

/* ---------- print ---------- */
@media print{
  body{ background:#fff; color:#000; }
  .hero-card,.crow{ break-inside:avoid; }
  .query{ display:none; }
}