/* ═══════════════════════════════════════════════════════
   ROUGHLY RIGHT / M. MEYERZ — SHARED DESIGN TOKENS
   Same family as Recognition Flavors. Signed by M. Meyerz.
   v3 foundation — locked April 2026
   Source: Sugary Genesis Design System (Dec 2025 lockdown)
═══════════════════════════════════════════════════════ */

:root {
  /* ─── SURFACES ─── */
  --bg:      #0b0b0b;   /* page */
  --bg2:     #111111;   /* card / elevated */
  --bg3:     #161616;   /* inset / pressed well */
  --border:  #222222;   /* hairline */
  --border2: #2a2a2a;   /* stronger border */

  /* ─── INK ─── */
  --text:    #ede9e3;   /* main copy — warm off-white */
  --text-2:  #c8c4c0;   /* secondary body (AA safe on --bg) */
  --muted:   #7a7268;   /* labels / meta */
  --dim:     #5a5450;   /* receipt-grade quiet */

  /* ─── PRIMARY — MEYERZ ORANGE (matches RF exactly) ─── */
  --orange:       #ff5a1f;
  --orange-hot:   #ff7a3f;
  --orange-soft:  #e65100;  /* the SVG signature accent — stay consistent */
  --orange-dim:   rgba(255, 90, 31, 0.10);
  --orange-glow:  rgba(255, 90, 31, 0.22);

  /* ─── SECONDARY BRAND RED (same as RF wordmark) ─── */
  --red:    #e03020;

  /* ─── CAST CHARACTER COLORS (Roughly Right exclusive) ───
     SINGLE SOURCE OF TRUTH for the 5 cast archetypes.
     Any page styling a Phoenix/River/Sage/Remy/Kirby element MUST
     reference these variables — never hardcode the hex. */
  --phoenix: #cc2a2a;   /* red — fire, the protector */
  --river:   #5ea8d9;   /* blue — contain, the steady one */
  --sage:    #78b450;   /* green — accept, the wise one */
  --remy:    #c7b67a;   /* warm gold — channel, the loyal one */
  --kirby:   #8a8a8a;   /* grey — release, the ghost */

  /* ─── PAGE ACCENTS ─── */
  --cast-red:     var(--phoenix);  /* legacy alias — cast page spotlight is Phoenix red */
  --tools-green:  #78b450;         /* Tools page tactical grid (matches Sage today, but independent concept) */
  --author-gold:  #c9a84c;         /* Author / About gateway */

  /* ─── STATE COLORS ─── */
  --focus-ring:   rgba(255, 90, 31, 0.55);
  --selected-bg:  var(--orange-dim);
  --success:      #78b450;
  --error:        #e83416;
  --warning:      #c9a84c;
  --info:         #4a8ab5;

  /* ─── SEMANTIC ALIASES ─── */
  --action:        var(--orange);
  --action-hover:  var(--orange-hot);
  --action-tint:   var(--orange-dim);
  --surface:       var(--bg2);
  --surface-deep:  var(--bg);
  --surface-inset: var(--bg3);
  --divider:       var(--border);
  --divider-bold:  var(--border2);

  /* ─── TYPE FAMILIES ─── */
  /* 3-family stack — anything else lives INSIDE SVG outlines, not as live text */
  --font-display:   'Bebas Neue', 'Oswald', 'Impact', sans-serif;
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'IBM Plex Mono', 'Space Mono', ui-monospace, monospace;

  /* Signature-only layer — reserved for M. Meyerz pen lockups + pull quotes */
  --font-signature: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;

  /* ─── FONT WEIGHTS ─── */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;

  /* ─── TYPE SCALE (1.250 major third, anchored at 17px body) ───
     Minimums: 16px body / 14px secondary / 12px label. NEVER go smaller. */
  --fs-display-xl: clamp(4rem, 9vw, 8.5rem);     /* hero billboard */
  --fs-display-l:  clamp(3rem, 5.5vw, 5rem);     /* page hero */
  --fs-display-m:  clamp(2rem, 3.5vw, 3rem);     /* section H2 */
  --fs-display-s:  1.625rem;                     /* 26px — card title */
  --fs-h3:         1.3125rem;                    /* 21px — sub-head */
  --fs-body-l:     1.1875rem;                    /* 19px — lede paragraph */
  --fs-body:       1.0625rem;                    /* 17px — default body */
  --fs-body-s:     0.9375rem;                    /* 15px — secondary */
  --fs-caption:    0.8125rem;                    /* 13px — captions */
  --fs-label:      0.75rem;                      /* 12px — MIN for UI labels */
  --fs-micro:      0.6875rem;                    /* 11px — mono eyebrows ONLY */

  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.22em;

  --leading-tight: 1.1;
  --leading-snug:  1.35;
  --leading-body:  1.6;
  --leading-loose: 1.75;

  /* ─── RADII (square-first, matches RF) ─── */
  --r-hairline: 1px;
  --r-s:        2px;
  --r-m:        3px;
  --r-l:        6px;
  --r-xl:       10px;

  /* ─── SPACING (4px base) ─── */
  --s-1:  4px;   --s-2:  8px;   --s-3:  12px;  --s-4:  16px;
  --s-5:  20px;  --s-6:  24px;  --s-7:  28px;  --s-8:  32px;
  --s-9:  40px;  --s-10: 48px;  --s-11: 56px;  --s-12: 72px;

  /* ─── SHADOWS ─── */
  --shadow-chunk:  0 3px 0 0 #555, 0 4px 12px rgba(255,255,255,0.1);
  --shadow-orange: 0 4px 0 0 #7a2800, 0 6px 20px rgba(255, 90, 31, 0.15),
                   0 0 0 1px rgba(255, 90, 31, 0.08);
  --shadow-card:   0 4px 16px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.05) inset;
  --shadow-glow:   0 0 40px rgba(255,90,31,0.3);
  --shadow-focus:  0 0 0 3px var(--focus-ring);

  /* ─── MOTION ─── */
  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 0.8, 0.2);
  --ease-std:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── BREAKPOINTS (reference only — use in @media) ─── */
  --bp-sm: 640px;
  --bp-md: 900px;
  --bp-lg: 1200px;
  --bp-xl: 1400px;

  /* ─── LAYOUT ─── */
  --container-max: 1200px;
  --nav-height:    56px;
}

/* ═══ GRAIN OVERLAY — global film texture ═══ */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.35;
  mix-blend-mode: overlay;
}

/* ═══ RESET ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--leading-body);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--orange); color: #000; }

/* ═══ FOCUS RING ═══ */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-s);
}

/* ═══ BRAND UTILITIES ═══ */
.mm-orange   { color: var(--orange); }
.mm-red      { color: var(--red); }
.mm-signature { font-family: var(--font-signature); font-style: italic; font-weight: 700; }
.tm {
  font-size: 0.45em;
  vertical-align: super;
  color: var(--red);
  opacity: 0.7;
  font-weight: var(--fw-regular);
}

/* ═══ TEXT GLOW ═══ */
.text-glow { text-shadow: 0 0 40px rgba(255,90,31,0.3); }

/* ═══ TYPOGRAPHY UTILITIES ═══ */
.mm-display   { font-family: var(--font-display); letter-spacing: 0.02em; line-height: var(--leading-tight); }
.mm-mono      { font-family: var(--font-mono); }
.mm-light     { font-weight: var(--fw-light); }
.mm-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--action);
  line-height: 1;
}
.mm-eyebrow::before {
  content: ''; display: inline-block; width: 20px; height: 1px;
  background: var(--action); margin-right: 10px; vertical-align: middle;
}
.mm-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}

/* ═══ BUTTONS ═══ */
.mm-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--action); color: #000;
  font-family: var(--font-display); font-size: 1rem;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  border: none; padding: 18px 32px; cursor: pointer;
  border-radius: var(--r-s);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  text-decoration: none; line-height: 1;
  box-shadow: 0 0 20px rgba(255,90,31,0.25);
}
.mm-btn-primary:hover {
  background: var(--action-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255,90,31,0.35);
}

.mm-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--text-2);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  border: 1px solid var(--divider-bold); padding: 14px 24px;
  cursor: pointer; border-radius: var(--r-s);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  text-decoration: none; line-height: 1;
}
.mm-btn-secondary:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-dim);
}

/* ═══ CONTAINER ═══ */
.mm-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--s-6);
}

/* ═══ PULL QUOTE (signature-font layer) ═══ */
.mm-quote {
  font-family: var(--font-signature);
  font-style: italic;
  font-weight: 700;
  color: var(--orange);
  border-left: 2px solid var(--orange);
  padding: var(--s-2) 0 var(--s-2) var(--s-6);
  font-size: var(--fs-body-l);
  line-height: var(--leading-snug);
}

/* ═══ GATEWAY CARD (shared — used on Index + Tools + anywhere cards appear) ═══ */
.mm-card-grid {
  display: grid;
  gap: var(--s-4);
}
.mm-card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.mm-card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.mm-card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .mm-card-grid.cols-3,
  .mm-card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .mm-card-grid.cols-2,
  .mm-card-grid.cols-3,
  .mm-card-grid.cols-4 { grid-template-columns: 1fr; }
}

/* Cards bottom-align by rule — final block has fixed height + inner-box styling */
.mm-card {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r-m);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.mm-card:hover {
  border-color: var(--card-color, var(--orange));
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px var(--card-color, var(--orange));
}
.mm-card-visual {
  position: relative;
  width: 100%;
  height: 120px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mm-card-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-card-body {
  padding: var(--s-5) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mm-card-num {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-widest);
  color: var(--muted);
  margin-bottom: var(--s-2);
  flex-shrink: 0;
}
.mm-card-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  color: var(--text);
  margin-bottom: var(--s-3);
  transition: color var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.mm-card:hover .mm-card-title { color: var(--card-color, var(--orange)); }
/* Middle text grows to fill — per card-alignment rule */
.mm-card-desc {
  flex: 1;
  font-size: var(--fs-body-s);
  color: var(--text-2);
  line-height: var(--leading-body);
  margin-bottom: var(--s-4);
}
/* Final block — fixed-height inner box so all cards bottom-align */
.mm-card-foot {
  margin-top: auto;
  padding: var(--s-3) var(--s-4);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-s);
  height: 3.5em; min-height: 3.5em; max-height: 3.5em;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.mm-card-foot-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--muted);
}
.mm-card-foot-arrow {
  font-family: var(--font-display);
  color: var(--card-color, var(--orange));
  font-size: 1.25rem;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out);
}
.mm-card:hover .mm-card-foot-arrow { transform: translateX(4px); }

/* ═══ GATEWAY SECTION (shared — "Rest of the Story" / cross-nav footer)
   One source of truth. Do NOT duplicate per page.
   Used by: index.html, book.html, cast.html, tools.html, about.html
═══ */
.gateway-section {
  padding: var(--s-12) var(--s-6);
  border-top: 1px solid var(--border);
  background: var(--bg2);
}
.gateway-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--s-10);
}
.gateway-head .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--s-3);
}
.gateway-head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  letter-spacing: var(--tracking-wide);
  color: var(--text);
  line-height: var(--leading-tight);
}
.gateway-grid {
  max-width: var(--container-max);
  margin: 0 auto;
}
/* 2-card layout — cap the grid so each card lands at the same ~384px
   as the 3-card layout on the home page. Preserves card size parity. */
.gateway-grid.cols-2 {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .gateway-grid.cols-2 { max-width: 100%; }
}
/* Stagger wave — first + last high, middle two dropped (used on home) */
.gateway-grid.wave > :nth-child(1) { margin-top: 0; }
.gateway-grid.wave > :nth-child(2) { margin-top: 2rem; }
.gateway-grid.wave > :nth-child(3) { margin-top: 2rem; }
.gateway-grid.wave > :nth-child(4) { margin-top: 0; }
@media (max-width: 900px) {
  .gateway-grid.wave > * { margin-top: 0 !important; }
}
/* Mobile — tighten section padding */
@media (max-width: 640px) {
  .gateway-section { padding: var(--s-10) var(--s-4); }
}

/* ═══ AOS FALLBACK ═══ */
.aos-fallback [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ═══ PRINT ═══ */
@media print {
  body::before { display: none !important; }
  .top-banner, .nav-wrapper, .site-footer, .help-overlay { display: none !important; }
}

/* ═══ REDUCED MOTION (global accessibility safety net) ═══
   Honors the user's OS-level motion preference. Kills decorative
   animation, transition, and AOS scroll-fade for anyone who has
   "Reduce motion" turned on. Page-specific rules can still add tighter
   overrides on top of this if a particular animation needs softening
   rather than stopping. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Neutralize AOS so content is visible without entrance animation */
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}