/* ============================================================
   SWOB — Design System
   Source of truth: "Swob Design System" (claude.ai/design,
   projectId 95fb2298-4799-425b-ab4d-56b6ba1bf706).

   This file is assembled from three layers:
     1. FONT LOADING  — local @font-face (self-hosted Supreme, see /fonts).
     2. SYNCED SOURCE — tokens + type, VERBATIM from the project's
        `colors_and_type.css`. Re-sync via /design-sync and replace only
        this region; do not hand-edit it.
     3. LOCAL EXTENSIONS — spacing scale + components, derived from the
        design system's specs (buttons/cards previews) for this site.
   ============================================================ */

/* ---------- 1. FONT LOADING — self-hosted Supreme (from Fontshare upstream) ----------
   Only the weights this site uses. To add a weight, drop the woff2 in
   /fonts and add an @font-face here. */
@font-face {
  font-family: "Supreme";
  src: url("fonts/Supreme-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("fonts/Supreme-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("fonts/Supreme-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("fonts/Supreme-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("fonts/Supreme-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("fonts/Supreme-Extrabold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ============================================================
   2. SYNCED SOURCE — VERBATIM from colors_and_type.css
   (project "Swob Design System"). Do not edit by hand.
   ============================================================ */

:root {
  /* ---------------- CORE / NEUTRAL ----------------
     "A clean balance of black, grey, and white." */
  --ink:        #000000;  /* headlines, logo, primary text */
  --grey:       #656363;  /* body & secondary text          */
  --paper:      #FFFFFF;  /* primary surface                */

  /* extended neutrals (derived, for UI scaffolding) */
  --ink-80:     #2b2b2b;
  --grey-40:    #a8a6a4;
  --line:       #e7e4df;  /* hairline borders on paper      */
  --mist:       #f4f2ee;  /* faint section fill on paper    */

  /* ---------------- BRANDING PALETTE ----------------
     "Warm, muted tones … morning sun to evening shadow." */
  --terracotta: #EB3B2F;  /* warmest accent / energy        */
  --orange:     #EF8537;
  --gold:       #F7C657;
  --ochre:      #E2D368;  /* yellow-green                   */
  --slate:      #5C7C8B;  /* slate blue / dusk              */

  /* ---------------- DUO / SECONDARY ----------------
     Pattern & editorial pairings (Color Duos). */
  --sand:       #E6DED1;  /* sand-beige — pattern ground    */
  --slate-deep: #3C5E81;  /* deep slate blue                */

  /* ---------------- SEMANTIC ROLES ---------------- */
  --bg:            var(--paper);
  --bg-alt:        var(--sand);
  --fg:            var(--ink);
  --fg-muted:      var(--grey);
  --accent:        var(--terracotta);
  --border:        var(--line);
  --radius:        0px;     /* the system is square / unrounded */
  --radius-soft:   2px;     /* the gentlest softening allowed   */

  /* ---------------- TYPE ---------------- */
  --font: "Supreme", "Helvetica Neue", Arial, sans-serif;

  /* weights */
  --w-light:   300; /* @kind font */  /* large numbers, airy display */
  --w-regular: 400; /* @kind font */  /* headlines & body */
  --w-medium:  500; /* @kind font */  /* labels, UI */
  --w-bold:    700; /* @kind font */
  --w-black:   800; /* @kind font */  /* logo-adjacent emphasis */

  /* fluid display scale (calm, generous) */
  --t-display: clamp(48px, 7vw, 104px); /* @kind font */
  --t-h1:      clamp(36px, 4.4vw, 64px); /* @kind font */
  --t-h2:      clamp(28px, 3vw, 40px); /* @kind font */
  --t-h3:      22px; /* @kind font */
  --t-body:    17px; /* @kind font */
  --t-small:   14px; /* @kind font */
  --t-label:   11px; /* @kind font */  /* uppercase tracked nav / kicker */

  --lh-tight:  1.02; /* @kind font */
  --lh-snug:   1.18; /* @kind font */
  --lh-body:   1.55; /* @kind font */
  --track-label: 0.14em; /* @kind font */
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Apply by adding class="swob-type" to a root, or copy rules.
   ============================================================ */
.swob-type {
  font-family: var(--font);
  color: var(--fg);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.swob-type h1, .swob-h1 {
  font-family: var(--font);
  font-weight: var(--w-regular);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.swob-display {
  font-family: var(--font);
  font-weight: var(--w-regular);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

/* Big page numbers / product figures — Supreme Light */
.swob-numeral {
  font-family: var(--font);
  font-weight: var(--w-light);
  font-size: var(--t-display);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}

.swob-type h2, .swob-h2 {
  font-weight: var(--w-regular);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}

.swob-type h3, .swob-h3 {
  font-weight: var(--w-medium);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0;
}

.swob-type p, .swob-body {
  font-weight: var(--w-regular);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--grey);
  margin: 0;
  text-wrap: pretty;
}

/* Kicker / nav label — uppercase, tracked, small */
.swob-label {
  font-weight: var(--w-medium);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--grey);
}

.swob-quote {
  font-weight: var(--w-light);
  font-size: var(--t-h2);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-style: italic;
}

/* ============================================================
   3. LOCAL EXTENSIONS — not in the source CSS.
   Spacing scale + components, in the system's language
   (square, warm, generous), derived from the design system's
   buttons/cards specs. Safe to edit locally.
   ============================================================ */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 104px;
  --container: 1120px;
}

/* Buttons — spec: ink fill, 1px border, terracotta accent, square */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  letter-spacing: 0.02em;
  padding: 13px 26px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.08s ease, color 0.15s ease;
}
.btn:hover { background: var(--ink-80); text-decoration: none; }
.btn:active { transform: scale(0.98); }

.btn--secondary { background: transparent; color: var(--ink); }
.btn--secondary:hover { background: var(--mist); }

.btn--accent { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.btn--accent:hover { background: #d23125; border-color: #d23125; }

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
  padding-left: 0;
}
.btn--ghost::after { content: " →"; }
.btn--ghost:hover { background: transparent; color: var(--terracotta); }

/* Card — spec: paper, hairline border, square */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.card .kick {
  font-size: 10px;
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--grey);
}