/* =========================================================================
   BB G-Wagons — Design Tokens  ·  SSENSE-discipline editorial system
   Specialty G-Class · Graz, AT
   One grotesque (Switzer). White. Near-black. Olive as the only accent.
   Flat, squared, tiny tracked type, massive whitespace.
   ========================================================================= */

/* No web fonts — SSENSE ships system Helvetica + Times. Matching exactly. */

:root {
  /* ---------- Color — monochrome + one accent ---------- */
  --paper:     #FFFFFF;   /* pure white — SSENSE */
  --white:     #FFFFFF;
  --ink:       #1A1A1A;   /* near-black text */
  --ink-soft:  #444444;
  --stone:     #8A8A8A;   /* muted meta / captions */
  --line:      rgba(26,26,26,0.13);
  --line-soft: rgba(26,26,26,0.07);

  /* monochrome — no standing color accent. olive/green map to ink so the
     whole site is black & white; the heritage card keeps its own green. */
  --olive:     #1A1A1A;
  --olive-d:   #000000;
  --green:     #1A1A1A;

  --ink-rgb:   26 26 26;
  --paper-rgb: 255 255 255;
  --olive-rgb: 26 26 26;

  /* ---------- Semantic ---------- */
  --bg:        var(--paper);
  --fg:        var(--ink);
  --fg-muted:  var(--stone);
  --fg-accent: var(--olive);

  /* ---------- Type — one family, many sizes ---------- */
  /* SSENSE's actual type: Helvetica Neue (sans) + Times (serif). System, no download. */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: var(--font);
  --font-display: var(--font);
  --font-serif: "Times New Roman", Times, serif;
  --font-mono: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* scale — SSENSE runs small */
  --fs-hero:    clamp(40px, 5.2vw, 72px);
  --fs-h1:      48px;
  --fs-h2:      28px;
  --fs-h3:      18px;
  --fs-body:    14px;
  --fs-sm:      13px;
  --fs-xs:      12px;
  --fs-label:   11px;   /* tracked uppercase labels */

  --ls-display: -0.025em;
  --ls-label:    0.14em;
  --ls-nav:      0.12em;

  /* ---------- Spacing (4px base) ---------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:160px;

  /* ---------- Layout ---------- */
  --max:    1360px;
  --gutter: 28px;

  /* ---------- Radius / motion ---------- */
  --radius: 0;
  --ease:   cubic-bezier(0.2,0.6,0.2,1);
  --dur:    200ms;

  /* ---------- Puch green accent ---------- */
  --puch: #3FA63A;
}

/* =========================================================================
   Base
   ========================================================================= */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4 { margin: 0; font-family: var(--font); font-weight: 500; }
h1, .h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: var(--ls-display); }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.02em; font-weight: 500; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; font-weight: 600; }
p { margin: 0; }

/* the only "accent" type — a light italic, used sparingly for emphasis */
.serif-accent {
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--olive);
}

/* tracked uppercase label — SSENSE's workhorse small text */
.eyebrow {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink);
}
.meta { font-size: var(--fs-sm); color: var(--fg-muted); }
.mono { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* ---------- Puch green accents (reusable) ---------- */
.gwedge { display: inline-block; width: 0; height: 0; border-left: 9px solid transparent; border-bottom: 15px solid var(--puch); transform: skewX(-12deg); }
.gwedge-sm { display: inline-block; width: 0; height: 0; border-left: 6px solid transparent; border-bottom: 10px solid var(--puch); transform: skewX(-12deg); }
/* the green triangle used as an apostrophe inside a word, e.g. Shop G's */
.apos-wedge { display: inline-block; width: 0; height: 0; border-left: 0.13em solid transparent; border-bottom: 0.34em solid var(--puch); transform: skewX(-12deg); margin: 0 0.06em 0 0.04em; vertical-align: 0.42em; }
.eyebrow-wedge { display: inline-block; width: 6px; height: 10px; border-left: 6px solid transparent; border-bottom: 10px solid var(--puch); transform: skewX(-12deg); margin-right: 9px; }
/* wedge that replaces the hyphen in the BB G-Wagons wordmark — sized near cap height */
.wordmark-wedge { width: 0; height: 0; border-left: 0.32em solid transparent; border-bottom: 0.8em solid var(--puch); transform: skewX(-12deg); vertical-align: -0.02em; margin: 0 0.12em; }
hr.rule-green, .rule-green { height: 0; border: 0; border-top: 2px solid var(--puch); margin: 0; }
/* green wedge bullet for lists */
.puch-list { list-style: none; padding: 0; margin: 0; }
.puch-list li { display: flex; align-items: baseline; gap: 10px; }
.puch-list li::before { content: ""; flex: none; width: 0; height: 0; border-left: 7px solid transparent; border-bottom: 11px solid var(--puch); transform: skewX(-12deg); position: relative; top: 2px; }

a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); }
a:hover { border-bottom-color: currentColor; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* =========================================================================
   Primitives — squared, flat
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 13px 24px;
  font-family: var(--font); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--paper);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn .arrow { font-weight: 400; }
.btn:hover { background: transparent; color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-ghost-inverse { background: transparent; color: var(--paper); border-color: rgba(var(--paper-rgb)/0.6); }
.btn-ghost-inverse:hover { background: var(--paper); color: var(--ink); }
.btn-block { width: 100%; justify-content: center; padding: 16px; }

/* text link — tiny tracked, underline */
.tlink {
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label);
  text-transform: uppercase; cursor: pointer; color: var(--puch);
  border-bottom: 1px solid var(--puch); padding-bottom: 3px;
}
.tlink:hover { color: var(--ink); border-color: var(--ink); }

/* squared tag */
.tag {
  display: inline-flex; align-items: center;
  padding: 6px 11px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--stone);
}
.tag.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* inputs — hairline squared */
input.field, textarea.field {
  width: 100%; padding: 13px 14px;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font); font-size: var(--fs-body); color: var(--fg); outline: none;
  transition: border-color var(--dur) var(--ease);
}
input.field:focus, textarea.field:focus { border-color: var(--ink); }
input.field::placeholder, textarea.field::placeholder { color: var(--stone); }

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }