/* ============================================================
   WAYPATH DESIGN TOKENS
   Cyberpunk-industrial — black ground, single signal-orange,
   four type voices, hard corners, notched buttons.
   ============================================================ */

/* Webfont loads — Sudo is local; rest are Google Fonts.
   Include either this file's @font-face block, or load the
   Google CSS yourself. */
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;700;800;900&family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

@font-face{
  font-family: "Sudo";
  src: url("fonts/Sudo.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Sudo Outlined";
  src: url("fonts/Sudo-Outlined.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root{
  /* ───────────── COLOR ───────────── */
  /* Surface */
  --ink:        #0b0b0b;   /* page ground */
  --ink-2:      #141414;   /* card */
  --ink-3:      #1c1c1c;   /* elevated card / button shadow */
  --line:       #2a2a2a;   /* hairline borders */

  /* Foreground */
  --paper:      #d3d1c8;   /* default body */
  --paper-2:    #bfbcb0;   /* secondary body */
  --white:      #f2efe6;   /* headline / primary */
  --dim:        rgba(242,239,230,.55);

  /* Signal */
  --orange:     #ff5a1f;   /* primary accent — use sparingly */
  --orange-2:   #e64a12;   /* hover */
  --orange-3:   #ff7a3f;   /* highlight */
  --signal:     var(--orange);

  /* Grid */
  --grid:        rgba(242,239,230,.07);
  --grid-strong: rgba(242,239,230,.13);

  /* ───────────── TYPE ───────────── */
  --f-display: "Big Shoulders Display", "Arial Black", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;
  --f-sans:    "Space Grotesk", system-ui, sans-serif;
  --f-num:     "Sudo", "Big Shoulders Display", "Arial Black", sans-serif;
  --f-num-out: "Sudo Outlined", "Sudo", "Big Shoulders Display", sans-serif;

  /* ───────────── SPACING ───────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Notched chamfer used by primary buttons */
  --notch: 8px;
  --notch-lg: 12px;

  /* Container */
  --container-max: 1480px;
  --section-pad-y: 32px;
  --section-pad-x: 40px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Use these classes (or extend them) so type stays locked.
   ============================================================ */

.h-poster{
  /* hero / closing wordmark scale */
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(74px, 12vw, 232px);
  line-height: .78;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--white);
}

.h1{
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(56px, 7vw, 128px);
  line-height: .86;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--white);
}

.h2{
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(40px, 4.6vw, 88px);
  line-height: .9;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.h3{
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(28px, 2.6vw, 48px);
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.lede{
  font-family: var(--f-sans);
  font-size: 18px;
  line-height: 1.55;
  color: var(--white);
  max-width: 62ch;
}

.p, p{
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper);
}

.mono, .label{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}

.mono-lg{
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper);
}

.num,
.num-display{
  /* Emphasis numerals — KPI strip, prices, scores */
  font-family: var(--f-num);
  font-weight: 700;
  letter-spacing: -.02em;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

.num-xl{
  font-family: var(--f-num);
  font-weight: 700;
  font-size: clamp(72px, 9vw, 128px);
  line-height: .9;
  letter-spacing: -.02em;
}

.num-out{
  font-family: var(--f-num-out);
  font-weight: 700;
  letter-spacing: -.02em;
}

/* Section number tag — e.g. "03 · PRG · HOW IT WORKS" */
.section-tag{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.section-tag .dash{
  flex: 0 0 60px;
  height: 1px;
  background: var(--orange);
}
.section-tag .num{
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 38px;
  line-height: 1;
  color: var(--orange);
  letter-spacing: -.01em;
}
.section-tag .name{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
}
.section-tag .name b{ color: var(--white); }

/* Bracketed positioning line */
.bracket-label{
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 5px 10px;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bracket-label.live{
  color: var(--orange);
  border-color: var(--orange);
}

/* ============================================================
   GLOBAL ELEMENTS
   ============================================================ */

html, body{
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
}

/* Page-wide 80×80 grid + ambient orange glows */
body{
  background:
    linear-gradient(rgba(242,239,230,.07) 1px, transparent 1px) 0 0/80px 80px fixed,
    linear-gradient(90deg, rgba(242,239,230,.07) 1px, transparent 1px) 0 0/80px 80px fixed,
    radial-gradient(1200px 600px at 80% -10%, rgba(255,90,31,.10), transparent 60%) fixed,
    radial-gradient(900px 500px at -10% 30%, rgba(255,90,31,.05), transparent 60%) fixed,
    var(--ink);
}

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