/* ============================================================
   Cape Town Mural Arts — Foundations
   Colors + Typography tokens
   ============================================================
   Display headings use GT Walsheim Condensed (licensed web fonts: the studio
   holds a web licence for the Ultra Bold + Black weights only). Body + any
   non-condensed display text use Hanken Grotesk (SIL OFL, self-hosted), a
   close geometric-grotesque pairing. Cormorant Garamond is still pulled from
   Google Fonts in each consuming HTML file (we don't ship a serif locally).
   ============================================================ */

/* ---------- @font-face: GT Walsheim Condensed (display) — licensed web fonts ----------
   Per brand direction the Black (900) cut is retired site-wide: the display
   face is Ultra Bold everywhere. Both weight 800 and weight 900 therefore
   resolve to the Ultra Bold files, so any existing `font-weight: 900` rule
   renders Ultra Bold without needing to be edited individually. The Black
   woff2/woff files remain on disk (licensed) but are no longer referenced. */
@font-face { font-family: "GT Walsheim Condensed"; font-weight: 800; font-style: normal; src: url("fonts/GT-Walsheim-Condensed-Ultra-Bold.woff2") format("woff2"), url("fonts/GT-Walsheim-Condensed-Ultra-Bold.woff") format("woff"); font-display: swap; }
@font-face { font-family: "GT Walsheim Condensed"; font-weight: 800; font-style: italic; src: url("fonts/GT-Walsheim-Condensed-Ultra-Bold-Oblique.woff2") format("woff2"), url("fonts/GT-Walsheim-Condensed-Ultra-Bold-Oblique.woff") format("woff"); font-display: swap; }
@font-face { font-family: "GT Walsheim Condensed"; font-weight: 900; font-style: normal; src: url("fonts/GT-Walsheim-Condensed-Ultra-Bold.woff2") format("woff2"), url("fonts/GT-Walsheim-Condensed-Ultra-Bold.woff") format("woff"); font-display: swap; }
@font-face { font-family: "GT Walsheim Condensed"; font-weight: 900; font-style: italic; src: url("fonts/GT-Walsheim-Condensed-Ultra-Bold-Oblique.woff2") format("woff2"), url("fonts/GT-Walsheim-Condensed-Ultra-Bold-Oblique.woff") format("woff"); font-display: swap; }

/* ---------- @font-face: Hanken Grotesk (body + non-condensed display) — SIL OFL ----------
   Self-hosted body workhorse paired with the licensed Condensed display face.
   Replaces the unlicensed GT Walsheim Trial weights. Latin subset. */
@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-style: normal; src: url("fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-style: italic; src: url("fonts/hanken-grotesk-latin-400-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; font-weight: 500; font-style: normal; src: url("fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; font-weight: 600; font-style: normal; src: url("fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; font-weight: 700; font-style: normal; src: url("fonts/hanken-grotesk-latin-700-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; font-weight: 800; font-style: normal; src: url("fonts/hanken-grotesk-latin-800-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; font-weight: 900; font-style: normal; src: url("fonts/hanken-grotesk-latin-900-normal.woff2") format("woff2"); font-display: swap; }


:root {
  /* ---------- COLOR ----------
     The palette is built around three buildable surfaces (charcoal,
     plaster, and ochre) and two accent painted-pigment notes
     (terracotta + brick). Cape Town wall colours: dawn plaster, late
     afternoon ochre, deep doorway shadow. */

  /* Primary surfaces */
  --c-ink:          #1a1714;   /* near-black, warm. Default dark surface */
  --c-ink-soft:     #2a241f;   /* one step up — cards on dark, dividers */
  --c-plaster:      #f3ead8;   /* cream / wall plaster — light surface  */
  --c-plaster-warm: #fbe8c8;   /* warmer cream for sub-blocks           */
  --c-paper:        #fbf6ec;   /* lightest cream, near-white            */

  /* Brand pigment */
  --c-ochre:        #e8a14a;   /* primary CTA + arrow disc — sunbaked   */
  --c-ochre-deep:   #c47a26;   /* hover / pressed                       */
  --c-terracotta:   #c0553a;   /* signage red, brushstroke accent        */
  --c-brick:        #7e2a1a;   /* deep painted brick, used sparingly    */
  --c-moss:         #4d5a3a;   /* foliage / cool accent — used rarely   */

  /* Foreground tokens */
  --fg-on-ink:        var(--c-plaster);
  --fg-on-ink-muted:  rgba(243, 234, 216, 0.62);
  --fg-on-ink-faint:  rgba(243, 234, 216, 0.32);
  --fg-on-plaster:        #2a1f15;
  --fg-on-plaster-muted:  rgba(42, 31, 21, 0.62);
  --fg-on-plaster-faint:  rgba(42, 31, 21, 0.28);
  --fg-on-terracotta:     #2a1108;

  /* Semantic */
  --c-bg:           var(--c-ink);
  --c-fg:           var(--fg-on-ink);
  --c-accent:       var(--c-ochre);
  --c-border-ink:   rgba(243, 234, 216, 0.14);
  --c-border-plaster: rgba(42, 31, 21, 0.14);

  /* ---------- TYPE ----------
     A display sans for architectural lettering, a clean geometric
     body sans for long reads, and an italic editorial serif for
     quotes / founder voice only. */
  --ff-display:   "GT Walsheim Condensed", "Anton", "Archivo Black", "Impact", system-ui, sans-serif;
  --ff-display-alt: "GT Walsheim Condensed", "Anton", "Archivo Black", "Impact", system-ui, sans-serif;
  --ff-body:      "Hanken Grotesk", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ff-serif:     "Cormorant Garamond", "Iowan Old Style", Georgia, serif;

  /* Display scale — uppercase, tight, condensed feel.
     Letterspacing tightens as size grows. */
  --fs-display-xl: clamp(56px, 11vw, 168px);  /* hero */
  --fs-display-l:  clamp(44px, 7vw,  104px);  /* section openers */
  --fs-display-m:  clamp(34px, 4.4vw, 64px);  /* card titles */
  --fs-display-s:  clamp(24px, 2.4vw, 36px);  /* small caps display */

  --fs-h1: 56px;
  --fs-h2: 40px;
  --fs-h3: 28px;
  --fs-h4: 20px;

  --fs-body-l: 20px;
  --fs-body:   17px;
  --fs-body-s: 15px;
  --fs-meta:   13px;  /* uppercase labels, eyebrows */

  --lh-display: 0.95;
  --lh-tight:   1.12;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  --ls-display:  -0.01em;
  --ls-meta:     0.14em;

  /* ---------- SHAPE & SPACE ---------- */
  --r-pill:   999px;
  --r-card:   18px;
  --r-card-lg: 28px;
  --r-input:  10px;

  --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;
  --space-10: 144px;

  --shadow-card:    0 1px 2px rgba(0,0,0,0.04), 0 20px 40px -20px rgba(0,0,0,0.18);
  --shadow-header:  0 10px 30px -12px rgba(0,0,0,0.5);

  --dur-quick: 160ms;
  --dur-base:  280ms;
  --dur-slow:  520ms;
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   Base / reset-ish
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
/* Remove the grey tap-flash on iOS/Android for all interactive elements. */
a, button, input, select, textarea, label, summary, [role="button"], [tabindex] {
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-on-ink);
  background: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Semantic typography
   ============================================================ */
.display-xl, .display-l, .display-m, .display-s {
  font-family: var(--ff-display);
  font-weight: 900;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.display-xl { font-size: var(--fs-display-xl); }
.display-l  { font-size: var(--fs-display-l); }
.display-m  { font-size: var(--fs-display-m); }
.display-s  { font-size: var(--fs-display-s); }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 900;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--c-ochre);
}

.serif-quote {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-on-ink);
}

.lede {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--fg-on-ink-muted);
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-ochre);
}
a:hover { text-decoration-color: currentColor; }

/* ============================================================
   Theme inversions
   ============================================================ */
.surface-ink     { background: var(--c-ink);     color: var(--fg-on-ink); }
.surface-plaster { background: var(--c-plaster); color: var(--fg-on-plaster); }
.surface-paper   { background: var(--c-paper);   color: var(--fg-on-plaster); }
.surface-warm    { background: var(--c-plaster-warm); color: var(--fg-on-plaster); }
.surface-terracotta { background: var(--c-terracotta); color: var(--fg-on-terracotta); }
.surface-brick   { background: var(--c-brick); color: var(--c-paper); }
.surface-ochre   { background: var(--c-ochre); color: var(--fg-on-plaster); }

.surface-plaster .eyebrow,
.surface-paper   .eyebrow,
.surface-warm    .eyebrow { color: var(--c-brick); }
.surface-terracotta .eyebrow,
.surface-brick      .eyebrow { color: #f3ead8; }