/* Brutalist · Design System Tokens
 * ----------------------------------------------
 * Color, type, spacing, rules. Consumed by inline styles in
 * brutalist/components.jsx via var(--...) and by raw CSS classes.
 * One source of truth: change a value here and every scene updates.
 */

:root {
  /* ─── color ──────────────────────────────────────────── */
  --b-bg:        #0a0a0a;   /* page bg, all pages start here  */
  --b-fg:        #f4f1ec;   /* primary text, on bg            */
  --b-dim:       #6f6a63;   /* metadata, mono labels          */
  --b-accent:    #ff3b1f;   /* safety red — use sparingly     */
  --b-rule:      rgba(244,241,236,0.14);  /* hairlines        */
  --b-rule-2:    rgba(244,241,236,0.28);  /* heavier hair     */
  --b-panel:     #14130f;   /* slightly raised surface        */
  --b-panel-2:   #1a1814;   /* striped image plates           */
  --b-inverse-bg:#f4f1ec;   /* inverted: cream bg             */
  --b-inverse-fg:#0a0a0a;   /* inverted: ink fg               */

  /* ─── type families ──────────────────────────────────── */
  --b-f-display: "Archivo Black", "Anton", system-ui, sans-serif;
  --b-f-body:    "Space Grotesk", system-ui, sans-serif;
  --b-f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --b-f-italic:  "DM Serif Display", "Cormorant Garamond", Georgia, serif;

  /* ─── type scale (1440 hero scale; halve for compact pages) ─ */
  --b-t-display-xxl: 240px;
  --b-t-display-xl:  196px;
  --b-t-display-l:   140px;
  --b-t-display-m:   96px;
  --b-t-display-s:   56px;
  --b-t-heading-l:   36px;
  --b-t-heading-m:   28px;
  --b-t-heading-s:   20px;
  --b-t-body-l:      17px;
  --b-t-body:        15px;
  --b-t-body-s:      13px;
  --b-t-caption:     11px;
  --b-t-tag:         10px;

  /* ─── spacing (4px base) ────────────────────────────── */
  --b-s-1:  4px;
  --b-s-2:  8px;
  --b-s-3:  12px;
  --b-s-4:  16px;
  --b-s-5:  20px;
  --b-s-6:  24px;
  --b-s-7:  32px;
  --b-s-8:  40px;
  --b-s-9:  48px;
  --b-s-10: 56px;
  --b-s-11: 64px;
  --b-s-12: 80px;
  --b-s-13: 96px;

  /* ─── borders & rules ───────────────────────────────── */
  --b-hair:        1px solid var(--b-rule);
  --b-hair-thick:  2px solid var(--b-fg);
  --b-hair-accent: 2px solid var(--b-accent);
  --b-dash:        1px dashed var(--b-rule);

  /* ─── hazard pattern (reused across placards & bands) ─ */
  --b-hazard: repeating-linear-gradient(135deg,
              var(--b-accent) 0 22px,
              var(--b-bg)     22px 44px);
  --b-stripe-panel: repeating-linear-gradient(135deg,
              #14130f 0 12px,
              #1a1814 12px 24px);
}

/* ─── reset (scoped to brutalist pages) ─────────────────── */
.b-root {
  margin: 0;
  background: var(--b-bg);
  color: var(--b-fg);
  font-family: var(--b-f-body);
  font-size: var(--b-t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.b-root *,
.b-root *::before,
.b-root *::after { box-sizing: border-box; }

.b-root a { color: inherit; text-decoration: none; cursor: pointer; }
.b-root button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
.b-root h1, .b-root h2, .b-root h3, .b-root h4, .b-root h5, .b-root h6, .b-root p { margin: 0; }
.b-root ::selection { background: var(--b-accent); color: var(--b-bg); }

/* ─── helper classes (for prose, non-component bits) ──── */
.b-mono     { font-family: var(--b-f-mono); letter-spacing: 0.18em; text-transform: uppercase; font-size: var(--b-t-caption); color: var(--b-dim); }
.b-mono-xs  { font-family: var(--b-f-mono); letter-spacing: 0.22em; text-transform: uppercase; font-size: var(--b-t-tag); color: var(--b-dim); }
.b-italic   { font-family: var(--b-f-italic); font-style: italic; }
.b-display  { font-family: var(--b-f-display); text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.86; }
.b-accent   { color: var(--b-accent); }
.b-dim      { color: var(--b-dim); }

/* swap a section to inverted (cream bg) */
.b-invert { background: var(--b-inverse-bg); color: var(--b-inverse-fg); }
.b-invert ::selection { background: var(--b-inverse-fg); color: var(--b-accent); }

/* ────────────────────────────────────────────────────────────
 * Responsive · below desktop full-screen
 * Desktop (≥1024px) keeps the original two-column compositions.
 * Tablet & phone shrink type to clamps and stack grids to one col.
 * Inline styles in JSX win unless we use !important here.
 * ──────────────────────────────────────────────────────────── */

/* Tablet & small laptop — stack two-up grids, tighten padding */
@media (max-width: 1024px) {
  .page section[id] { scroll-margin-top: 24px; }

  /* HERO ─────────────────────────────────────── */
  .r-hero-grid {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .r-hero-left {
    padding: 64px 36px 56px !important;
    border-right: none !important;
    border-bottom: var(--b-hair) !important;
    gap: 48px !important;
  }
  .r-hero-kicker { font-size: 22px !important; }
  .r-hero-title > div { font-size: clamp(48px, 11vw, 88px) !important; }
  .r-hero-intro-1 { font-size: clamp(22px, 4vw, 28px) !important; }
  .r-hero-intro-2 { font-size: clamp(18px, 3.4vw, 24px) !important; }
  .r-hero-portrait {
    aspect-ratio: 4 / 5;
    min-height: 0;
  }
  .r-hero-cta { flex-wrap: wrap; gap: 18px !important; }

  /* DISCIPLINE ───────────────────────────────── */
  .r-disc-grid { grid-template-columns: 1fr !important; }
  .r-disc-left {
    padding: 56px 36px 32px !important;
    border-right: none !important;
    border-bottom: var(--b-hair) !important;
  }
  .r-disc-points { padding: 24px 36px 56px !important; }

  /* QUALIFICATIONS ───────────────────────────── */
  .r-quals-head { padding: 56px 36px !important; }
  .r-quals-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 32px 36px !important;
  }
  .r-quals-row > :last-child {
    text-align: left !important;
  }

  /* TESTIMONIALS ─────────────────────────────── */
  .r-test-head { padding: 56px 36px 40px !important; }
  .r-test-body { padding: 48px 36px 64px !important; gap: 40px !important; }
  .r-test-strip {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .r-test-strip::-webkit-scrollbar { display: none; }
  .r-test-strip > button {
    flex: 0 0 78%;
    scroll-snap-align: start;
    min-width: 0;
  }
  .r-test-strip > button:last-child { border-right: none !important; }

  /* CONTACT ──────────────────────────────────── */
  .r-contact-body { padding: 64px 36px 56px !important; gap: 44px !important; }
  .r-contact-headline { font-size: clamp(56px, 10vw, 80px) !important; }
  .r-contact-lede { font-size: 19px !important; }
  .r-contact-form-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .r-contact-alt {
    grid-template-columns: 1fr !important;
  }
  .r-contact-alt > div {
    border-right: none !important;
    border-bottom: var(--b-hair) !important;
    text-align: left !important;
    padding: 18px 4px !important;
  }
  .r-contact-alt > div:last-child { border-bottom: none !important; }
}

/* Phone — further compression */
@media (max-width: 640px) {
  /* HERO */
  .r-hero-left { padding: 44px 20px 40px !important; gap: 36px !important; }
  .r-hero-kicker { font-size: 18px !important; letter-spacing: 0.1em !important; }
  .r-hero-title > div { font-size: clamp(44px, 12vw, 64px) !important; }
  .r-hero-intro-1 { font-size: 22px !important; }
  .r-hero-intro-2 { font-size: 18px !important; }

  /* DISCIPLINE */
  .r-disc-left { padding: 36px 20px 24px !important; gap: 14px !important; }
  .r-disc-points { padding: 14px 20px 40px !important; }
  .r-disc-point-row { padding: 18px 0 !important; gap: 12px !important; grid-template-columns: 28px 1fr !important; }
  .r-disc-name { font-size: clamp(34px, 9vw, 48px) !important; }
  .r-disc-point-text { font-size: 18px !important; }

  /* QUALIFICATIONS */
  .r-quals-head { padding: 40px 20px !important; }
  .r-quals-title { font-size: clamp(44px, 11vw, 64px) !important; }
  .r-quals-row { padding: 26px 20px !important; }
  .r-quals-cert { font-size: clamp(30px, 8.5vw, 44px) !important; }
  .r-quals-body { font-size: 14px !important; }

  /* TESTIMONIALS */
  .r-test-head { padding: 40px 20px 28px !important; }
  .r-test-title { font-size: clamp(48px, 13vw, 80px) !important; }
  .r-test-body { padding: 36px 20px 56px !important; gap: 32px !important; }
  .r-test-quote { font-size: 22px !important; }
  .r-test-attr-row { flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
  .r-test-strip > button { flex: 0 0 84%; padding: 16px 18px !important; }

  /* CONTACT */
  .r-contact-body { padding: 48px 20px 48px !important; gap: 36px !important; }
  .r-contact-headline { font-size: clamp(48px, 13vw, 64px) !important; }
  .r-contact-lede { font-size: 17px !important; }
  .r-contact-success { padding: 32px 0 !important; }
  .r-contact-success-headline { font-size: 36px !important; }
}