/* ==========================================================
   EPIC — design tokens
   Brand sans: Acid Grotesk (local @font-face in epic-custom.css)
   Mono: system monospace stack
   No serif display — em is colored grey per "sans only" variant.
   ========================================================== */

:root{
  /* ---- Brand ---- */
  --jet:          #03282b;
  --jet-ink:      #052f32;
  --jet-2:        #064e54;
  --sand:         #edccb0;
  --sand-2:       #f5e0cb;
  --blue:         #4094d3;
  --seashell:     #fbf3ed;
  --paper:        #f7f1ea;
  --grey:         #646c7c;
  --grey-2:       #8a8f98;
  --white:        #ffffff;

  /* ---- Semantic ---- */
  --ink:          var(--jet);
  --ink-dim:      var(--grey);
  --surface:      var(--white);
  --surface-2:    var(--seashell);
  --surface-3:    var(--paper);
  --line:         rgba(3,40,43,.10);
  --line-2:       rgba(3,40,43,.06);
  --line-on-dark: rgba(255,255,255,.10);

  /* ---- Status ---- */
  --ok:           #0b6e32;
  --ok-bg:        rgba(11,110,50,.10);
  --warn:         #b45309;
  --warn-bg:      rgba(180,83,9,.10);
  --sold:         #6b7280;
  --sold-bg:      rgba(107,114,128,.12);

  /* ---- Type ---- */
  --ff-display:   'Acid Grotesk', 'Trebuchet MS', sans-serif;
  --ff-sans:      'Acid Grotesk', 'Trebuchet MS', sans-serif;
  --ff-mono:      ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* ---- Scale ---- */
  --fs-display-1: clamp(48px, 6.2vw, 88px);
  --fs-display-2: clamp(36px, 4.6vw, 60px);
  --fs-display-3: clamp(30px, 3.4vw, 42px);
  --fs-h2:        clamp(26px, 2.4vw, 34px);
  --fs-h3:        20px;
  --fs-body:      15.5px;
  --fs-small:     13px;
  --fs-meta:      11px;
  --fs-micro:     10px;

  --lh-display:   1.02;
  --lh-body:      1.6;

  /* ---- Spacing ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10:128px;

  /* ---- Shadow ---- */
  --sh-1: 0 1px 2px rgba(3,40,43,.06);
  --sh-2: 0 4px 24px rgba(3,40,43,.12);
  --sh-3: 0 12px 48px rgba(3,40,43,.18);
}

*, *::before, *::after{ box-sizing:border-box }

/* ---- Body base override ---- */
body{
  margin:0;
  background:var(--surface-3);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- Utility ---- */
.ep-display{ font-family:var(--ff-display); font-weight:400; line-height:var(--lh-display); letter-spacing:-.02em }
.ep-display em{ font-style:normal; color:var(--grey); font-weight:400 }
.ep-mono{ font-family:var(--ff-mono); letter-spacing:.06em }
.ep-upper-meta{ font-family:var(--ff-mono); font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.14em; color:var(--grey) }
.ep-kicker{ font-family:var(--ff-mono); font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.16em; color:var(--blue); font-weight:600 }

/* ---- Layout container ---- */
.container,
.ep-shell .container,
.ep-nav .container,
.ep-foot .container,
section[class*="ep-"] .container{
  width:100%; max-width:1280px; margin:0 auto; padding:0 32px;
}
@media (max-width:720px){
  .container,
  .ep-shell .container,
  .ep-nav .container,
  .ep-foot .container,
  section[class*="ep-"] .container{ padding:0 20px }
}

/* ---- Desk/mobile helpers ---- */
.desk-only{ display:initial }
.mobile-only{ display:none }
@media (max-width:820px){
  .mobile-only{ display:initial }
  .desk-only{ display:none }
}

/* ---- Emphasis (sans-only — no italic serif) ---- */
.ep-nav em,
.ep-foot em,
section[class*="ep-"] em{
  font-style:normal; color:var(--grey); font-weight:400;
}