/* =========================================================
   Maroon Harpoon — Design Tokens
   Colors, type, spacing, radii, shadows + semantic styles

   Type system: TWO families only.
   - MC Sequoia Bold        → display headlines
   - Raleway (variable)     → body, UI, accent (italic 300), labels
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'MC Sequoia';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/mc-sequoia-thin.woff2') format('woff2'),
       url('./fonts/mc-sequoia-thin.woff') format('woff');
}
@font-face {
  font-family: 'MC Sequoia';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/mc-sequoia-regular.woff2') format('woff2'),
       url('./fonts/mc-sequoia-regular.woff') format('woff');
}
@font-face {
  font-family: 'MC Sequoia';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/mc-sequoia-bold.woff2') format('woff2'),
       url('./fonts/mc-sequoia-bold.woff') format('woff');
}

@font-face {
  font-family: 'Raleway';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations'),
       url('./fonts/Raleway-VariableFont_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Raleway';
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url('./fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('./fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype');
}

:root {
  /* ---------- Color: brand ---------- */
  --cream: #F4EDDF;
  --warm:  #EDE3D0;
  --sand:  #D6C8AE;
  --ink:   #1C1409;
  --dark:  #130F07;
  --plum:  #521936;
  --pink:  #F12673;

  /* tints — for dark sections */
  --cream-90: rgba(244,237,223,0.90);
  --cream-68: rgba(244,237,223,0.68);
  --cream-50: rgba(244,237,223,0.50);
  --cream-45: rgba(244,237,223,0.45);
  --cream-30: rgba(244,237,223,0.30);
  --cream-12: rgba(244,237,223,0.12);

  /* tints — for cream sections */
  --ink-90: rgba(28,20,9,0.90);
  --ink-68: rgba(28,20,9,0.68);
  --ink-50: rgba(28,20,9,0.50);
  --ink-30: rgba(28,20,9,0.30);

  /* ---------- Color: semantic ---------- */
  --bg:        var(--cream);
  --bg-alt:    var(--warm);
  --bg-dark:   var(--dark);
  --bg-plum:   var(--plum);
  --fg:        var(--ink);
  --fg-muted:  var(--ink-68);
  --fg-subtle: var(--ink-50);
  --rule:      var(--sand);
  --accent:    var(--plum);
  --cta:       var(--pink);

  /* ---------- Typography: families ----------
     MC Sequoia is reserved for PRIMARY HEADERS only (h1/.h-hero,
     h2/.h-section, hero lockup, featured quote). Card titles (h3),
     UI, labels, numbers and everything else use Raleway. */
  --font-display:  'MC Sequoia', 'Oswald', 'Bebas Neue', Impact, sans-serif;
  --font-body:     'Raleway', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  /* Accent role kept for semantic compatibility; same family, used italic 300 */
  --font-accent:   'Raleway', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* ---------- Typography: scale (caps) ---------- */
  --fs-hero:    64px;
  --fs-h2:      40px;
  --fs-h3:      24px;
  --fs-lead:    20px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-label:   11px;
  --lh-body:    1.65;
  --lh-tight:   1.05;
  --ls-label:   0.14em;

  /* ---------- Spacing ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --section-y: clamp(80px, 9vw, 128px);
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 48px);

  /* ---------- Radius ---------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-card: 0 1px 0 rgba(28,20,9,0.04), 0 18px 40px -24px rgba(28,20,9,0.30);
  --shadow-soft: 0 8px 24px -16px rgba(28,20,9,0.35);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 140ms;
  --dur-med: 240ms;
  --dur-slow: 400ms;
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* =========================================================
   Semantic element styles
   ========================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h-hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  color: var(--fg);
  text-wrap: balance;
  margin: 0;
}

h2, .h-section {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--fg);
  text-wrap: balance;
  margin: 0;
}

h3, .h-card {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}

/* Accent role — Raleway italic 300. Used for subheads, kickers,
   author names, footer tagline. Was Heart of the Land in v1. */
.accent,
.h-accent {
  font-family: var(--font-accent);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.3;
  color: var(--fg-muted);
  letter-spacing: 0;
}

p, .body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.label, .eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Pink period — the signature flourish */
.period { color: var(--cta); }

/* Hyperlinks (inline, not buttons) */
a {
  color: var(--cta);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.75; }

/* =========================================================
   Grain overlay
   ========================================================= */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.14;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.95 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.70 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px, 180px 180px;
}
.grain--subtle { opacity: 0.07; }
.grain--strong { opacity: 0.22; }
.grain--on-dark { mix-blend-mode: screen; }

/* =========================================================
   Buttons — flat surf-retro: skewed pill, solid color, no shadow.
   ========================================================= */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  isolation: isolate;
  transition: color var(--dur-fast) var(--ease-out),
              transform 120ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  transform: skewX(-7deg);
  z-index: -1;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn--cta { color: var(--cream); }
.btn--cta::before { background: var(--cta); }
.btn--cta:hover::before { background: #d81a64; }

.btn--ghost { color: var(--ink); }
.btn--ghost::before {
  background: transparent;
  border: 1.5px solid var(--ink);
}
.btn--ghost:hover { color: var(--cream); }
.btn--ghost:hover::before { background: var(--ink); }

.btn--ghost-dark { color: var(--cream); }
.btn--ghost-dark::before {
  background: transparent;
  border: 1.5px solid var(--cream);
}
.btn--ghost-dark:hover { color: var(--ink); }
.btn--ghost-dark:hover::before { background: var(--cream); }

.btn--rev::before { transform: skewX(7deg); }