/* ─────────────────────────────────────────────────────────────────────
 * campfire / design system v2 — U-shape / Architecture
 *
 * Editorial brutalism. Inter everywhere, with a massive uppercase
 * display moment against tiny utility text. Hard 0px surfaces, pill
 * 9999px controls. Orange + neon + warm-stone gray palette. Premium
 * gradient-border-shell edges. Restrained motion.
 *
 * Spec: /Users/jaimevelez/Downloads/camp fire -U-Shape-Architecture-DESIGN.md
 *
 * Brand-guide overrides on --cf-accent etc. let tenants color the
 * surface without breaking the structure.
 * ─────────────────────────────────────────────────────────────────────*/

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600;700;900&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ── Color: stone + orange + neon ────────────────────────────────── */
  --cf-paper:        #FAFAF9;   /* stone-50, the page */
  --cf-paper-2:      #F5F5F4;   /* stone-100, card */
  --cf-paper-3:      #E7E5E4;   /* stone-200, hover/inset */
  --cf-ink:          #1C1917;   /* stone-900, body text */
  --cf-ink-2:        #292524;   /* stone-800, secondary text */
  --cf-ink-3:        #78716C;   /* stone-500, tertiary */
  --cf-ink-faint:    #A8A29E;   /* stone-400, placeholder */
  --cf-rule:         #D6D3D1;   /* stone-300, the border token */
  --cf-rule-2:       #A8A29E;   /* stone-400, stronger rule */
  --cf-rule-hair:    rgba(255, 255, 255, 0.6); /* light hairline on dark */

  /* Brand accents — orange primary, neon for moments, stone neutral.
   * Tenants override via brand_guide JSON; the structure never moves. */
  --cf-accent:       #F97316;   /* orange-500 */
  --cf-accent-hover: #EA580C;   /* orange-600 */
  --cf-accent-soft:  rgba(249, 115, 22, 0.08);
  --cf-accent-line:  rgba(249, 115, 22, 0.32);
  --cf-neon:         #E6FF1A;   /* tertiary accent — supporting moments only */
  --cf-neon-soft:    rgba(230, 255, 26, 0.16);

  /* Legacy variable bridge so untouched pages keep working. */
  --bg:           var(--cf-paper);
  --bg-2:         var(--cf-paper-2);
  --bg-3:         var(--cf-paper-3);
  --fg:           var(--cf-ink);
  --fg-dim:       var(--cf-ink-2);
  --fg-faint:     var(--cf-ink-3);
  --accent:       var(--cf-accent);
  --accent-soft:  var(--cf-accent-soft);
  --line:         var(--cf-rule);

  /* ── Type: Inter for display + body, Fraunces italic for the
   *           editorial counter-accent. The URBAN/Verge pairing —
   *           brutalist Inter + italic serif — is the platform's
   *           signature display rhythm. ───────────────────────── */
  --cf-sans:   "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --cf-serif:  "Fraunces", "GT Sectra", "Tiempos Headline", Georgia, serif;
  --cf-mono:   "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* The huge display moment. The spec calls for 257.92px on the
   * landing/marketing scale; content pages dial it down with clamp(). */
  --cf-display-1: clamp(72px, 18vw, 258px);  /* full poster */
  --cf-display-2: clamp(56px, 12vw, 160px);  /* big section moment */
  --cf-display-3: clamp(40px, 7vw, 96px);    /* page hero (constrained columns) */
  --cf-display-4: clamp(32px, 4.5vw, 56px);  /* sub-hero */

  /* Body + labels */
  --cf-body:    16px;   /* readable default for 700px content columns */
  --cf-body-sm: 14px;
  --cf-label:   10px;   /* spec label-md */
  --cf-caption: 12px;   /* spec body-md when used as fine print */

  /* Tracking + line heights — display is squeezed, labels are open. */
  --cf-tr-display: -0.05em;     /* spec */
  --cf-tr-label:   0.16em;      /* spec letterSpacing: 2px on 12px ≈ 0.16em */
  --cf-tr-body:    0;
  --cf-lh-display: 0.86;        /* spec: 193.44 / 257.92 ≈ 0.75; we relax slightly for legibility */
  --cf-lh-tight:   1.05;
  --cf-lh-snug:    1.35;
  --cf-lh-body:    1.55;

  /* ── Space — 4px base grid ──────────────────────────────────────── */
  --cf-1: 4px;
  --cf-2: 8px;
  --cf-3: 16px;
  --cf-4: 24px;
  --cf-5: 32px;
  --cf-6: 48px;
  --cf-7: 64px;
  --cf-8: 80px;
  --cf-9: 96px;
  --cf-10: 128px;
  --cf-11: 160px;

  /* ── Radii — hard edges on surfaces, pills on controls ──────────── */
  --cf-r-sm: 0;
  --cf-r-md: 0;
  --cf-r-lg: 0;
  --cf-r-xl: 0;
  --cf-r-pill: 9999px;

  /* ── Motion — restrained ────────────────────────────────────────── */
  --cf-ease:    cubic-bezier(0.4, 0, 0.2, 1);
  --cf-ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --cf-dur-1: 150ms;
  --cf-dur-2: 240ms;
  --cf-dur-3: 420ms;
  --cf-dur-4: 720ms;

  /* ── Shadows — almost nothing; the gradient-border-shell carries depth ── */
  --cf-shadow-sm: rgba(0, 0, 0, 0.05) -8px -8px 32px 0px;
  --cf-shadow-md: rgba(0, 0, 0, 0.05) -20px -20px 60px 0px;

  /* ── Layout ─────────────────────────────────────────────────────── */
  --cf-page-w:    1280px;
  --cf-prose-w:   640px;
  --cf-content-w: 760px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--cf-paper);
  color: var(--cf-ink);
  font-family: var(--cf-sans);
  font-size: var(--cf-body);
  line-height: var(--cf-lh-body);
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; position: relative; }

/* WebGL canvas + DOM-fallback container live at the body level, behind
 * everything. Pages opt-in by adding <div class="cf-bg-field"></div>
 * (the JS module mounts the canvas inside it). */
.cf-bg-field {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at top, rgba(249, 115, 22, 0.04), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(0, 0, 0, 0.03), transparent 60%);
}
.cf-bg-field canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
/* Pure CSS dot-matrix fallback if WebGL fails / before Three.js loads. */
.cf-bg-field::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(120, 113, 108, 0.18) 1px, transparent 1.4px);
  background-size: 28px 28px;
  background-position: 0 0;
  opacity: 0.55;
  animation: cf-bg-breathe 8s ease-in-out infinite;
}
@keyframes cf-bg-breathe {
  0%, 100% { opacity: 0.40; }
  50%      { opacity: 0.65; }
}

/* Page content sits above the field. */
.cf-page, .cf-shell {
  position: relative;
  z-index: 1;
}

/* ── Type scale ─────────────────────────────────────────────────────── */
.cf-display-1, .cf-display-2, .cf-display-3, .cf-display-4 {
  font-family: var(--cf-sans);
  font-weight: 500;
  letter-spacing: var(--cf-tr-display);
  line-height: var(--cf-lh-display);
  text-transform: uppercase;
  color: var(--cf-ink);
  margin: 0;
}
.cf-display-1 { font-size: var(--cf-display-1); }
.cf-display-2 { font-size: var(--cf-display-2); }
.cf-display-3 { font-size: var(--cf-display-3); line-height: var(--cf-lh-tight); }
.cf-display-4 { font-size: var(--cf-display-4); line-height: var(--cf-lh-tight); letter-spacing: -0.03em; }

.cf-h2 {
  font-family: var(--cf-sans); font-weight: 500;
  font-size: 22px; line-height: var(--cf-lh-snug);
  letter-spacing: -0.01em; margin: 0;
}
.cf-h3 {
  font-family: var(--cf-sans); font-weight: 500;
  font-size: 17px; line-height: var(--cf-lh-snug); margin: 0;
}
.cf-body    { font-size: var(--cf-body);    line-height: var(--cf-lh-body); }
.cf-body-sm { font-size: var(--cf-body-sm); line-height: var(--cf-lh-body); }
.cf-caption { font-size: var(--cf-caption); color: var(--cf-ink-3); line-height: var(--cf-lh-snug); }
.cf-label {
  font-family: var(--cf-sans); font-weight: 400;
  font-size: var(--cf-label); line-height: 15px;
  letter-spacing: var(--cf-tr-label);
  text-transform: uppercase; color: var(--cf-ink-3);
}
.cf-mono { font-family: var(--cf-mono); font-feature-settings: "ss01", "cv11"; }
.cf-num  { font-feature-settings: "tnum", "lnum"; font-variant-numeric: tabular-nums lining-nums; }

/* Tertiary accent — neon yellow — use sparingly, only for moments. */
.cf-neon-text { color: var(--cf-accent); }
.cf-neon-text--neon { color: var(--cf-neon); background: var(--cf-ink); padding: 2px 6px; }

/* ── Layout shells ─────────────────────────────────────────────────── */
.cf-page {
  max-width: var(--cf-page-w);
  margin: 0 auto;
  padding: var(--cf-7) var(--cf-5) var(--cf-10);
}
.cf-shell {
  max-width: var(--cf-content-w);
  margin: 0 auto;
  padding: var(--cf-7) var(--cf-5) var(--cf-10);
}
.cf-prose { max-width: var(--cf-prose-w); }
.cf-stack > * + * { margin-top: var(--cf-4); }
.cf-stack-tight > * + * { margin-top: var(--cf-3); }
.cf-stack-loose > * + * { margin-top: var(--cf-7); }

.cf-rule {
  border: 0; height: 1px; background: var(--cf-rule);
  margin: var(--cf-7) 0; width: 100%;
}

/* ── Brand bar ──────────────────────────────────────────────────────── */
.cf-brand {
  display: flex; align-items: center; gap: var(--cf-3);
  color: var(--cf-ink-3); margin-bottom: var(--cf-7);
  font-size: var(--cf-label);
  letter-spacing: var(--cf-tr-label);
  text-transform: uppercase;
}
.cf-brand .cf-brand-mark {
  width: 6px; height: 6px;
  background: var(--cf-accent);
}
.cf-brand .cf-brand-name {
  color: var(--cf-ink); font-weight: 500;
  font-family: var(--cf-sans);
}
.cf-brand .cf-powered {
  margin-left: auto; color: var(--cf-ink-faint);
  font-size: var(--cf-label);
  letter-spacing: var(--cf-tr-label);
  text-transform: uppercase;
}
.cf-brand .cf-powered a {
  color: var(--cf-accent); text-decoration: none; font-weight: 500;
}
.cf-brand img.cf-logo {
  height: 18px; width: auto; max-width: 140px; display: block;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.cf-btn {
  display: inline-flex; align-items: center; gap: var(--cf-2);
  font-family: var(--cf-sans);
  font-size: var(--cf-label);
  font-weight: 500;
  letter-spacing: var(--cf-tr-label);
  text-transform: uppercase;
  background: var(--cf-ink); color: var(--cf-paper);
  border: 1px solid var(--cf-ink);
  border-radius: var(--cf-r-pill);
  padding: 12px 22px;
  cursor: pointer; line-height: 1;
  transition: background var(--cf-dur-1) var(--cf-ease),
              color var(--cf-dur-1) var(--cf-ease),
              border-color var(--cf-dur-1) var(--cf-ease),
              opacity var(--cf-dur-1) var(--cf-ease);
}
.cf-btn:hover { background: var(--cf-accent); border-color: var(--cf-accent); }
.cf-btn:disabled {
  background: var(--cf-paper-3); color: var(--cf-ink-faint);
  border-color: var(--cf-paper-3); cursor: not-allowed;
}
.cf-btn--accent {
  background: var(--cf-accent); border-color: var(--cf-accent); color: #fff;
}
.cf-btn--accent:hover { background: var(--cf-accent-hover); border-color: var(--cf-accent-hover); }
.cf-btn--ghost {
  background: transparent; color: var(--cf-ink); border-color: var(--cf-rule);
}
.cf-btn--ghost:hover { background: var(--cf-ink); color: var(--cf-paper); border-color: var(--cf-ink); }
.cf-btn--quiet {
  background: transparent; color: var(--cf-ink-3);
  border: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--cf-rule);
  border-radius: 0;
}
.cf-btn--quiet:hover { color: var(--cf-ink); border-bottom-color: var(--cf-ink); }

/* ── Inputs — minimal, hairline underline ──────────────────────────── */
.cf-field { display: flex; flex-direction: column; gap: var(--cf-2); }
.cf-label-input {
  font-family: var(--cf-sans);
  font-size: var(--cf-label);
  font-weight: 400;
  letter-spacing: var(--cf-tr-label);
  text-transform: uppercase;
  color: var(--cf-ink-3);
}
.cf-input, .cf-textarea, .cf-select {
  background: transparent; color: var(--cf-ink);
  border: 0; border-bottom: 1px solid var(--cf-rule-2);
  border-radius: 0;
  padding: 12px 0;
  font-family: var(--cf-sans);
  font-size: var(--cf-body); line-height: var(--cf-lh-snug);
  transition: border-color var(--cf-dur-1) var(--cf-ease);
  width: 100%;
}
.cf-input:focus, .cf-textarea:focus, .cf-select:focus {
  outline: none; border-bottom-color: var(--cf-accent);
}
.cf-input::placeholder, .cf-textarea::placeholder { color: var(--cf-ink-faint); }
.cf-textarea { resize: vertical; min-height: 96px; }

/* ── Choice chips — pill controls, hard surface ───────────────────── */
.cf-chips { display: flex; gap: var(--cf-2); flex-wrap: wrap; }
.cf-chip {
  font-family: var(--cf-sans);
  font-size: var(--cf-label); font-weight: 500;
  letter-spacing: var(--cf-tr-label);
  text-transform: uppercase;
  background: transparent; color: var(--cf-ink-3);
  border: 1px solid var(--cf-rule-2);
  border-radius: var(--cf-r-pill);
  padding: 10px 18px; cursor: pointer; line-height: 1;
  transition: border-color var(--cf-dur-1) var(--cf-ease),
              color var(--cf-dur-1) var(--cf-ease),
              background var(--cf-dur-1) var(--cf-ease);
}
.cf-chip:hover { border-color: var(--cf-ink); color: var(--cf-ink); }
.cf-chip[aria-pressed="true"], .cf-chip.is-selected {
  background: var(--cf-ink); color: var(--cf-paper); border-color: var(--cf-ink);
}

/* Pip — 1..5 numeric pill */
.cf-pips { display: inline-flex; gap: var(--cf-2); }
.cf-pip {
  width: 44px; height: 44px;
  border-radius: var(--cf-r-pill);
  background: transparent; color: var(--cf-ink-2);
  border: 1px solid var(--cf-rule-2);
  cursor: pointer;
  font-family: var(--cf-sans);
  font-size: var(--cf-body-sm); font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--cf-dur-1) var(--cf-ease),
              color var(--cf-dur-1) var(--cf-ease),
              background var(--cf-dur-1) var(--cf-ease);
}
.cf-pip:hover { border-color: var(--cf-ink); color: var(--cf-ink); }
.cf-pip.is-selected {
  background: var(--cf-ink); color: var(--cf-paper); border-color: var(--cf-ink);
}

/* ── Card / surface — hard-edged, gradient-border-shell available ── */
.cf-card {
  background: var(--cf-paper);
  border: 1px solid var(--cf-rule);
  border-radius: 0;
  padding: var(--cf-5);
}
.cf-card--inset { background: var(--cf-paper-2); border-color: transparent; }
.cf-card--quiet { border: 0; padding: var(--cf-4) 0; }

/* The gradient-border-shell premium edge treatment.
 *   <div class="cf-shell-grad"><div class="cf-shell-grad__inner">...</div></div>
 * The outer wrapper carries a thin orange→transparent gradient stroke;
 * the inner surface is inset by 1px so the gradient reads as a hairline
 * frame. */
.cf-shell-grad {
  padding: 1px;
  background: linear-gradient(to right top,
    rgba(249, 115, 22, 0.45),
    rgba(0, 0, 0, 0) 60%);
  border-radius: 0;
}
.cf-shell-grad__inner {
  background: var(--cf-paper);
  border-radius: 0;
  padding: var(--cf-5);
}

/* ── Callout — for consent rows, notes ────────────────────────────── */
.cf-callout {
  background: var(--cf-paper-2);
  border: 1px solid var(--cf-rule);
  border-left: 2px solid var(--cf-accent);
  color: var(--cf-ink);
  border-radius: 0;
  padding: var(--cf-4) var(--cf-5);
}
.cf-callout strong { color: var(--cf-accent); font-weight: 500; }

/* ── Sonic glyph — soft circular orb (cohort-reveal signature) ─────
 * The one curved exception in the system. The cohort reveal sets the
 * precedent: creators are represented by an organic, breathing orb
 * inside an otherwise hard-edged interface. Set --glyph-hue, --glyph-bpm. */
.cf-glyph {
  --glyph-hue: 24;
  --glyph-bpm: 92;
  width: 88px; height: 88px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%,
      hsla(var(--glyph-hue), 70%, 65%, 0.95) 0%,
      hsla(calc(var(--glyph-hue) + 40), 55%, 50%, 0.55) 38%,
      hsla(calc(var(--glyph-hue) + 70), 30%, 35%, 0.10) 70%,
      transparent 100%),
    radial-gradient(circle at 70% 75%,
      hsla(calc(var(--glyph-hue) + 180), 55%, 60%, 0.55) 0%,
      transparent 60%);
  position: relative;
  flex-shrink: 0;
}
.cf-glyph::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  animation: cf-glyph-breathe calc(60s / var(--glyph-bpm)) ease-in-out infinite;
}
@keyframes cf-glyph-breathe {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50%      { transform: scale(1.04); opacity: 1; }
}
.cf-glyph--lg { width: 140px; height: 140px; }
.cf-glyph--sm { width: 52px; height: 52px; }
.cf-glyph--xs { width: 32px; height: 32px; }

/* ── Section header — label + display split, hairline below ──────── */
.cf-section-head {
  display: flex; align-items: baseline; gap: var(--cf-4);
  padding-bottom: var(--cf-3);
  border-bottom: 1px solid var(--cf-rule);
  margin-bottom: var(--cf-5);
}

/* ── Progress markers — hairline ticks ───────────────────────────── */
.cf-progress {
  display: flex; gap: 6px; align-items: center;
}
.cf-progress-tick {
  width: 18px; height: 1px;
  background: var(--cf-rule-2);
  transition: background var(--cf-dur-2) var(--cf-ease),
              height var(--cf-dur-2) var(--cf-ease);
}
.cf-progress-tick.is-active { background: var(--cf-accent); height: 2px; }
.cf-progress-tick.is-done   { background: var(--cf-ink); }

/* ── Motion — declarative entrances, all 150–720ms ─────────────────── */
.cf-fade-in { animation: cf-fade-in var(--cf-dur-3) var(--cf-ease) both; }
.cf-rise-in { animation: cf-rise-in var(--cf-dur-4) var(--cf-ease-out) both; }
.cf-stagger > * { animation: cf-rise-in var(--cf-dur-4) var(--cf-ease-out) both; }
.cf-stagger > *:nth-child(2) { animation-delay: 80ms; }
.cf-stagger > *:nth-child(3) { animation-delay: 160ms; }
.cf-stagger > *:nth-child(4) { animation-delay: 240ms; }
.cf-stagger > *:nth-child(5) { animation-delay: 320ms; }
.cf-stagger > *:nth-child(6) { animation-delay: 400ms; }
.cf-stagger > *:nth-child(n+7) { animation-delay: 480ms; }
@keyframes cf-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cf-rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────
 * U-Shape signature moves — the URBAN / Verge composition.
 *
 *   ┌────────────────┐ ┌──╭───────────────────╮
 *   │ CAMPFIRE/...   │ │ ╱
 *   │ DISPLAY ──→    │ │/      arc-tl mask
 *   │ accent italic  │ │       on photo / glyph
 *   │ [eyebrow]      │ │
 *   │ tight body...  │ │
 *   └────────────────┘ ╰───────────────────────╯
 *
 * Used by the hero on /profile, /camp, /join, /apply. The cohort reveal
 * is its own cinematic format and bypasses this.
 * ─────────────────────────────────────────────────────────────────*/

/* Gradient-text display fill — the type fades from graphite into the
 * cream as it crosses the page. Set --grad-from / --grad-to inline if
 * you want to tune. */
.cf-display-grad {
  --grad-from: var(--cf-ink);
  --grad-to:   rgba(28, 25, 23, 0.18);
  background-image: linear-gradient(
    to right,
    var(--grad-from) 0%,
    var(--grad-from) 18%,
    var(--cf-ink-2) 48%,
    var(--cf-ink-3) 78%,
    var(--grad-to) 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Italic serif accent word — the editorial counter to the brutalist
 * display. Use sparingly: one phrase per hero. */
.cf-italic-accent {
  font-family: var(--cf-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--cf-accent);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}

/* Bracket-decorated eyebrow — `[ since 2026 ]`-style metadata caption. */
.cf-eyebrow-brackets {
  font-family: var(--cf-sans);
  font-size: var(--cf-label);
  font-weight: 400;
  letter-spacing: var(--cf-tr-label);
  text-transform: uppercase;
  color: var(--cf-ink-3);
}
.cf-eyebrow-brackets::before { content: "[ "; }
.cf-eyebrow-brackets::after  { content: " ]"; }

/* Tight uppercase body — narrow-column architectural-doc voice.
 * 12px / 16px line-height / open tracking. Used for cropped paragraphs
 * in hero columns; regular body type still wins for content reading. */
.cf-tight-caps {
  font-family: var(--cf-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cf-ink-2);
  max-width: 32em;
}

/* ── Split-screen hero — asymmetric two-column ───────────────────── */
.cf-hero-split {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 0;
  min-height: clamp(420px, 70vh, 720px);
  margin-bottom: var(--cf-9);
  position: relative;
}
.cf-hero-split__text {
  padding: var(--cf-5) var(--cf-6) var(--cf-7) 0;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: var(--cf-4);
  position: relative;
  z-index: 2;
}
.cf-hero-split__text > * + * { margin-top: 0; }
.cf-hero-split__art {
  position: relative;
  overflow: hidden;
  /* The U — quarter-ellipse cut into the top-left corner. The radius
   * is sized so the curve sweeps from roughly 30% across the top
   * to 40% down the left edge, matching the spec image. */
  border-top-left-radius: 48% 60%;
  background: var(--cf-paper-3);
  isolation: isolate;
}
/* Counter-arc on the cream side — a thin hairline ellipse, faint,
 * mirroring the photo's curve from the bottom-left of the text column. */
.cf-hero-split::before {
  content: "";
  position: absolute;
  left: -22%; bottom: -30%;
  width: 60%; aspect-ratio: 1 / 1;
  border: 1px solid var(--cf-rule);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* When the right column carries a photo, fill it. */
.cf-hero-split__art img,
.cf-hero-split__art video,
.cf-hero-split__art canvas {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}

/* When the right column carries a sonic-glyph hero (no photo), the
 * surface is a tinted gradient with a centered, hero-scale glyph. */
.cf-hero-split__art--glyph {
  background:
    radial-gradient(circle at 30% 30%,
      hsla(var(--glyph-hue, 24), 60%, 60%, 0.18),
      transparent 65%),
    radial-gradient(circle at 80% 80%,
      hsla(calc(var(--glyph-hue, 24) + 180), 50%, 40%, 0.12),
      transparent 60%),
    linear-gradient(135deg, var(--cf-paper-3), var(--cf-paper-2));
  display: flex; align-items: center; justify-content: center;
}
.cf-hero-split__art--glyph .cf-glyph {
  width: clamp(180px, 35vw, 380px);
  height: clamp(180px, 35vw, 380px);
}

/* On narrow screens, the split collapses to stacked. */
@media (max-width: 880px) {
  .cf-hero-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .cf-hero-split__text { padding: var(--cf-4) 0 var(--cf-5); }
  .cf-hero-split__art {
    border-top-left-radius: 30% 40%;
    aspect-ratio: 4 / 3;
  }
  .cf-hero-split::before { display: none; }
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.cf-footer {
  margin-top: var(--cf-9); padding-top: var(--cf-5);
  border-top: 1px solid var(--cf-rule);
  color: var(--cf-ink-faint);
  font-size: var(--cf-label); letter-spacing: var(--cf-tr-label);
  text-transform: uppercase;
  display: flex; align-items: center; gap: var(--cf-3); flex-wrap: wrap;
}
.cf-footer a { color: var(--cf-accent); text-decoration: none; font-weight: 500; }

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Small screens ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cf-shell, .cf-page { padding: var(--cf-5) var(--cf-3) var(--cf-7); }
  .cf-card { padding: var(--cf-4); }
}