/* ==========================================================================
   LeapCode — brand.css · v2 brand layer
   Source: Brand Manual v2 + Brand Guidelines v2.1 (visuals and fixed lines).
   Loaded LAST on every page, so it wins ties with each page's inline <style>.
   Where a later KZ ruling in WEB_PROJECT/05_DECISION_LOCK.md disagrees with the
   Manual, the ruling wins and the gap is logged in _brand_v2/CHANGELOG.md.
   ========================================================================== */

/* ---- Fonts · self-hosted, latin subset, SIL OFL 1.1 ---------------------- */

/* ---- Brand palette (Manual §02) ------------------------------------------ */
:root{
  --lc-red:#D44040;       /* Leap Red · the mark. Ink text on it 5.29:1; white only for large text (3.29:1) */
  --lc-ignition:#D44040;  /* gradient deep end · hover · focus ring */
  --lc-flame:#FF9B93;     /* gradient light end · kickers on Ink */
  --lc-ember:#D44040;     /* small red text · white-text buttons (5.09:1) */
  --lc-ink:#1A1A1A;       /* dark grounds · primary text */
  --lc-steel:#5E6D74;     /* Steel 700 · secondary text */
  --lc-hairline:#D9DEDE;
  --lc-gold:#C8962C;      /* rules and edges only, never text */
  --lc-blush:#FFF6F7;     /* soft content surface */
  --lc-grad:#D44040;  /* the Ignition gradient */
  --lc-ill-light:#FFFFFF; /* light parts of the space illustrations; set to --lc-flame on paper */
}

/* ---- Focus: 3px Ignition ring, 2px offset (Manual §09) ------------------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--lc-ignition);outline-offset:2px}

/* ---- Logo lock-up: wordmark + HAPPY SCALING (Manual §1.4) ----------------
   Tagline: Figtree Medium, uppercase, tracking .42em, Ink or White, never
   gradient, right-aligned under CODE. No "11x" inside the lock-up. Used from
   200px wide; the nav keeps the wordmark alone. */
.lc-lockup{display:inline-flex;flex-direction:column;align-items:flex-end;gap:.55rem;text-decoration:none;color:inherit}
.lc-lockup img{display:block;width:240px;max-width:100%;height:auto}
.lc-lockup__tag{display:block;font:500 12px/1 "Source Sans 3",system-ui,sans-serif;letter-spacing:.42em;
  text-transform:uppercase;margin-right:-.42em;color:#1A1A1A}
.foot .lc-lockup{margin:0 auto 20px}
.site-footer .wordmark.lc-lockup{display:inline-flex;flex-direction:column;align-items:flex-end;min-height:0;margin-bottom:var(--s-3,12px)}
.site-footer .lc-lockup__tag{color:var(--fg-heading,#1A1A1A)}

/* ---- Leap Arch device (Manual §03) ----------------------------------------
   One per page, on a dark or fire closing band: 12–20% opacity, at least a
   third cropped, 0° rotation, behind the text, never tiled. */
.lc-has-arch{position:relative;overflow:hidden;isolation:isolate}
.lc-arch{position:absolute;z-index:-1;pointer-events:none;user-select:none;
  width:clamp(300px,42vw,620px);height:auto;right:-8%;bottom:-20%;opacity:.12}
.lc-arch--left{right:auto;left:-8%}
.lc-arch--fire{opacity:.18}

/* ---- Icons: angular sprite, 2px stroke, currentColor (Manual §07) -------- */
.lc-icon{width:1.25em;height:1.25em;flex:none;vertical-align:-.22em;overflow:visible}
.lc-icon--lg{width:2rem;height:2rem}
.lc-icon--xl{width:3rem;height:3rem}
.lc-icon-badge{display:inline-grid;place-items:center;width:3rem;height:3rem;background:var(--lc-blush);
  color:var(--lc-ember);border-top:4px solid var(--lc-red)}

/* ---- Space-narrative illustrations (decorative) -------------------------- */
.lc-spot{display:block;width:clamp(120px,18vw,220px);height:auto;pointer-events:none}
.lc-spot--inline{display:inline-block;vertical-align:middle}

/* ---- Gold rule, Ignition rule ------------------------------------------- */
.lc-rule{display:block;width:64px;height:3px;border:0;background:var(--lc-gold);margin:0 0 var(--s-4,16px)}
.lc-rule--ignition{background:var(--lc-grad)}

/* ---- Closing-band composition (light-header pages) ----------------------- */
.cta-band .lc-spot{width:96px;margin:0 auto var(--s-4,16px)}
.band--dark.lc-has-arch .container{position:relative}
.lc-arrow{margin-inline-start:.15em}

/* ---- Width safeguard: Figtree runs narrower than the old Montserrat ------------------ */
@media (max-width: 32.5em){ .pick{grid-template-columns:1fr !important} }
.pick>li{min-width:0}
@media (max-width: 64em){ .pk b{white-space:normal} }

/* ---- Happy Scaling: the rallying-cry sign-off on closing bands (Guidelines: sign-offs, closings) */
.lc-signoff{margin:var(--s-5,24px) 0 0;padding-left:.42em;text-align:center;font:500 .875rem/1.2 "Source Sans 3",system-ui,sans-serif;
  letter-spacing:.42em;text-transform:uppercase;color:#fff}

/* D7 (KZ 21 Oct 2026): §8.5 vocabulary icon before a bare section heading. 1 per heading, never beside an emoji. */
.lc-hicon{display:inline-block;width:.8em;height:.8em;margin-inline-end:.45em;vertical-align:-.04em;color:var(--lc-ember);flex:none;overflow:visible}
:is(.dark,.anchor,.band--dark,.cta-band,.hero--dark,.on-dark) .lc-hicon{color:var(--lc-flame)}