/* ==========================================================================
   CSC Innovations — ABOUT layer ("The Editorial Portrait")
   Loads AFTER site.css on about.html. Vibe: a magazine feature — generous air,
   a big Fraunces-italic pull-quote, and a mono "process" timeline. Retinted to
   a warm terracotta/clay; the Dara emblem stays emerald as the brand moment.
   ========================================================================== */

/* ==========================================================================
   PER-PAGE THEME — "Terracotta Editorial"
   ========================================================================== */
body.page-about{
  /* COLOR v3 — "Sunbeam Apricot": brighter, warmer, HAPPIER than the old muddy
     terracotta (Colton: too hard to read, wants happy). Base lifted + warmed so the
     page reads sunny, not muddy; readability floor pushed hard (muted .84 / faint .66). (H+I) */
  --bg:#1B130C; --bg-2:#140D07; --surface:#2A1E13; --surface-2:#392817; --panel:#3C2611;
  --accent:#FF9F45; --accent-deep:#E07A22; --accent-glow:#FFC98A; --on-accent:#241200;
  --accent-12:rgba(255,159,69,.14); --accent-18:rgba(255,159,69,.20);
  --line:rgba(255,239,224,.12); --line-strong:rgba(255,239,224,.22);
  --text:#FCF1E6; --text-muted:rgba(252,241,230,.84); --text-faint:rgba(252,241,230,.66);
  --sh-forest:0 14px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,159,69,.18);
  --abt-mint:#FFCE8F;
  background:var(--bg);
}
/* Knot = PAGE COLOR (client's ask): mark falls back to site.css var(--accent*).
   The big story emblem now wears TERRACOTTA too — the client wants the page color,
   not emerald. Token-driven so it ignites in the page accent. */
.page-about .hero-emblem .knot{
  background:radial-gradient(circle at 38% 30%,var(--accent-glow),var(--accent) 58%,var(--accent-deep));
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.55));}
.page-about .hero-emblem .ring.r2{border-color:var(--accent-18);}
.page-about .hero-emblem .ring.r3{border-color:var(--accent-12);}
.page-about .hero-emblem .glow{background:radial-gradient(circle,var(--accent-18),transparent 68%);}

/* editorial scale on the about hero headline (atmosphere = .page-hero + .ph-wash) */
.page-about .page-hero h1{font-size:clamp(40px,5.6vw,76px);letter-spacing:-.04em;line-height:1.04;}

/* the Dara story breathes — larger lede, italic emphasis */
.page-about .split{gap:clamp(40px,6vw,88px);}
.page-about .split h2{font-size:clamp(30px,4vw,52px);letter-spacing:-.035em;}
.page-about .split h2 em{color:var(--abt-mint);}
.page-about .split .lead{font-size:clamp(19px,2vw,24px);line-height:1.5;}

/* The Dara meaning, as structure (no second knot — the hero owns the mark) */
.page-about .mark-meaning{display:grid;gap:0;align-content:center;}
.page-about .mark-meaning li{display:grid;gap:5px;padding:var(--s4) 0;border-top:1px solid var(--line);}
.page-about .mark-meaning li:first-child{border-top:0;padding-top:0;}
.page-about .mark-meaning li:last-child{padding-bottom:0;}
.page-about .mark-meaning .ix{font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);}
.page-about .mark-meaning .v{font-family:var(--serif);font-size:clamp(26px,3vw,38px);color:var(--text);
  letter-spacing:-.025em;line-height:1.05;}
.page-about .mark-meaning .d{font-size:var(--fs-sm);color:var(--text-muted);max-width:42ch;}

/* ---- Pull-quote — the editorial centerpiece ---------------------------- */
.pullquote{position:relative;max-width:24ch;margin:0 auto;text-align:center;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(28px,4.4vw,52px);line-height:1.18;letter-spacing:-.02em;color:var(--text);}
.pullquote em{font-style:normal;color:var(--accent-glow);}
.pullquote::before{content:"\201C";position:absolute;top:-.5em;left:50%;transform:translateX(-50%);
  font-size:1.7em;color:var(--accent);opacity:.32;line-height:1;}
.pullquote + .pq-by{display:block;text-align:center;margin-top:var(--s4);
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-faint);}
.quote-band{position:relative;overflow:hidden;
  background:radial-gradient(80% 130% at 50% -10%, rgba(255,159,69,.15), transparent 60%), var(--bg-2);}

/* ---- Process as a mono timeline ---------------------------------------- */
.page-about .steps{position:relative;gap:var(--s4);}
/* the connecting rail behind the four steps (desktop) */
.page-about .steps::before{content:"";position:absolute;top:18px;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 12%,var(--line-strong) 88%,transparent);}
.page-about .step{padding-top:46px;}
/* node dot on the rail */
.page-about .step::after{content:"";position:absolute;top:13px;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px var(--bg-2), 0 0 16px rgba(255,159,69,.6);}
/* mono phase label replaces the big serif number's role as the index */
.page-about .step::before{content:"Phase 0" counter(step);counter-increment:step;
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--abt-mint);opacity:1;position:absolute;top:8px;left:22px;}
.page-about .step h3{font-size:var(--fs-h3);margin-bottom:.35em;}
@media (max-width:900px){
  .page-about .steps::before{top:0;bottom:0;left:5px;right:auto;width:1px;height:auto;
    background:linear-gradient(180deg,transparent,var(--line-strong) 6%,var(--line-strong) 94%,transparent);}
  .page-about .step{padding-left:28px;padding-top:var(--s2);}
  .page-about .step::after{top:6px;left:0;}
  .page-about .step::before{top:4px;left:22px;}
}

/* stats band — deep but warmer + brighter so it reads sunny, not muddy */
.page-about .bg-forest{background:
  radial-gradient(80% 120% at 86% 6%, rgba(255,159,69,.24), transparent 58%),
  linear-gradient(160deg, #3A2412 0%, #1A1007 100%);}

/* closing callout — warm sunbeam apricot */
.page-about .callout{background:linear-gradient(135deg,#5C2F12,#23140A);
  border-color:rgba(255,159,69,.28);
  box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,159,69,.18);}