/* =========================================================================
   Mitch Wallis — Colors & Type
   The Regulated Rockstar. Edgy meets clinical.
   ========================================================================= */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/FamiljenGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/FamiljenGrotesk-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/FamiljenGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* IMPORTANT — the embedded font family MUST stay "Skribblugh SS1" (with a space, no TC).
   PowerPoint on Mitch's machine only recognises this exact name. Never write
   "Skribblugh-TC-SS1" or bare "Skribblugh" as a font-family — that is the filename, not
   the family. The .otf filename on disk is unrelated and must not be used as a CSS family. */
@font-face {
  font-family: "Skribblugh SS1";
  src: url("../fonts/Skribblugh-TC-SS1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Brand palette (the ONLY approved colours) -------------------------- */
  --mw-cream:  #ECEAE2;  /* warm light backgrounds, soft fills */
  --mw-brown:  #3A322F;  /* cover backgrounds, body text on light */
  --mw-dew:    #D6D8CB;  /* subtle accent, card fills */
  --mw-matcha: #AFB29B;  /* brand signal - accent bars, dividers, emphasis */
  --mw-black:  #151416;  /* text, cover backgrounds, strong contrast */
  --mw-white:  #FFFFFF;  /* content backgrounds, text on dark */

  /* subtle transparencies used in cards / overlays */
  --mw-cream-70: rgba(236, 234, 226, 0.70);
  --mw-cream-12: rgba(236, 234, 226, 0.12);
  --mw-cream-06: rgba(236, 234, 226, 0.06);
  --mw-black-60: rgba(21, 20, 22, 0.60);
  --mw-black-30: rgba(21, 20, 22, 0.30);
  --mw-matcha-20: rgba(175, 178, 155, 0.20);

  /* --- Semantic (surface + foreground pairs) ----------------------------- */
  --bg-primary:   var(--mw-black);   /* dark dominates 60-80% of the time */
  --bg-secondary: var(--mw-brown);
  --bg-soft:      var(--mw-cream);
  --bg-card:      var(--mw-dew);
  --bg-raised:    var(--mw-cream-06);
  --bg-overlay:   var(--mw-cream-12);

  --fg-primary:     var(--mw-cream);   /* body text on dark */
  --fg-primary-inv: var(--mw-brown);   /* body text on light */
  --fg-muted:       rgba(236, 234, 226, 0.55);
  --fg-muted-inv:   rgba(58, 50, 47, 0.55);
  --fg-accent:      var(--mw-matcha);  /* surgical use only */

  --rule-hairline: 0.5px solid var(--mw-cream-12);
  --rule-hairline-inv: 0.5px solid rgba(58, 50, 47, 0.18); /* @kind other */
  --rule-matcha: 1px solid var(--mw-matcha);

  /* --- Type families ----------------------------------------------------- */
  --font-sans: "Familjen Grotesk", Arial, sans-serif;
  --font-hand: "Skribblugh SS1", "Familjen Grotesk", Arial, sans-serif;

  /* --- Type scale (px) — slide-first, 1920x1080 reference ---------------- */
  --fs-cover:     52px;  /* 40-52 cover headline, Bold, uppercase */
  --fs-section:   42px;  /* 32-42 section titles, Bold, uppercase */
  --fs-slide:     32px;  /* 26-32 slide titles, SemiBold */
  --fs-subhead:   22px;  /* 18-22 subheadings, SemiBold */
  --fs-body:      14px;  /* 10-14 body, Regular */
  --fs-caption:    9px;  /* 7.5-9 captions, Regular */

  /* letter-spacing */
  --tracking-tight:   -0.015em;
  --tracking-normal:   0em;
  --tracking-wide:     0.06em;   /* small caps header/footer strip */
  --tracking-wider:    0.12em;   /* uppercase section labels */

  /* line-height */
  --lh-tight: 1.05; /* @kind other */
  --lh-snug:  1.2;  /* @kind other */
  --lh-body:  1.45; /* @kind other */

  /* --- Spacing (4px base) ------------------------------------------------ */
  --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;

  /* --- Radii ------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-card: 10px;   /* content cards, slightly soft */

  /* --- Textures (apply over dark bgs at 70-90% transparency) ------------- */
  --tex-spray: url("../img/texture-spray.jpg"); /* @kind other */
  --tex-dirt:  none; /* @kind other */
}

/* =========================================================================
   Semantic elements — usable as-is in any page
   ========================================================================= */

html, body {
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h-cover {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-cover);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0;
}

h2, .h-section {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-section);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0;
}

h3, .h-slide {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-slide);
  line-height: var(--lh-snug);
  margin: 0;
}

h4, .h-subhead {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-subhead);
  line-height: var(--lh-snug);
  margin: 0;
}

p, .p-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
  text-wrap: pretty;
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-hand {
  font-family: var(--font-hand);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Signature technique: mixed headline */
.h-mixed .hand { font-family: var(--font-hand); text-transform: uppercase; font-weight: 400; letter-spacing: 0.01em; }

/* --- Editorial / talk-deck headline ---------------------------------------
   Used on full-bleed photo covers & chapter openers. Heavier on presence,
   lighter on weight than the pitch-deck .h-cover. Not tight-tracked.       */
.h-editorial {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(56px, 6.5vw, 120px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}
.h-editorial--light { font-weight: 500; }
.h-statement {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(48px, 5.2vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

/* Chapter opener — "01 · / BIG IDEA." */
.chapter-num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(28px, 2.2vw, 42px);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.chapter-num::after { content: "·"; opacity: 0.5; font-weight: 400; }

/* Slash-separator stack: "THE SAINT, / THE STRANGER & / THE SURVIVOR" */
.h-slash { white-space: pre-line; }
.h-slash .sep { display: inline-block; opacity: 0.45; margin: 0 0.2em; font-weight: 400; }

/* Surgical matcha accent bar */
.matcha-bar { display:block; width: 48px; height: 1px; background: var(--mw-matcha); border: 0; }
.matcha-bar--lg { width: 96px; }
.matcha-bar--vert { width: 1px; height: 100%; }

/* Hairline rule */
.hr-hairline { border: 0; border-top: 0.5px solid var(--mw-cream-12); margin: 0; }
.hr-hairline-inv { border: 0; border-top: 0.5px solid rgba(58,50,47,0.18); margin: 0; }

/* Texture overlay — apply to any dark surface */
.tex-spray {
  position: relative;
  isolation: isolate;
}
.tex-spray::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--tex-spray);
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.tex-spray > * { position: relative; z-index: 1; }

.tex-dirt::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--tex-dirt);
  background-size: cover;
  opacity: 0.12;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Content card (Dew fill) */
.card-dew {
  background: var(--mw-dew);
  color: var(--mw-brown);
  border-radius: var(--radius-card);
  padding: var(--sp-5);
}

.card-cream {
  background: var(--mw-cream);
  color: var(--mw-brown);
  border-radius: var(--radius-card);
  padding: var(--sp-5);
}

/* Header/footer strip used on every non-cover page */
.doc-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.doc-strip > :nth-child(1) { text-align: left; }
.doc-strip > :nth-child(2) { text-align: center; }
.doc-strip > :nth-child(3) { text-align: right; }

/* --- Talk-deck layout primitives ----------------------------------------- */
/* Full-bleed photo slide — type sits directly on image, no card */
.slide-fullbleed {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--mw-black);
}
.slide-fullbleed > img,
.slide-fullbleed > video,
.slide-fullbleed > .bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.slide-fullbleed > .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,20,22,0) 40%, rgba(21,20,22,0.55) 100%);
}
.slide-fullbleed > .content {
  position: absolute; inset: 0;
  padding: clamp(32px, 5vw, 96px);
  display: flex;
  color: var(--mw-cream);
}

/* Pure-white chapter/statement slide — Vic Gov DNA */
.slide-white {
  background: var(--mw-white);
  color: var(--mw-brown);
  width: 100%; height: 100%;
  display: grid;
  padding: clamp(48px, 6vw, 120px);
}
.slide-white--centered { place-items: center; text-align: center; }
.slide-white--tl       { place-items: start; }

/* UGC / collage grid — title blocks replace random tiles */
.ugc-grid {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 1fr;
  gap: 2px;
  background: var(--mw-black);
  overflow: hidden;
}
.ugc-grid > .tile {
  background-size: cover;
  background-position: center;
  min-height: 0;
}
.ugc-grid > .text-tile {
  background: var(--mw-cream);
  color: var(--mw-brown);
  display: grid;
  place-items: center;
  padding: 0.4em 0.6em;
  font-weight: 600;
  font-size: clamp(32px, 3.4vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
}

/* No transitions by default — the brand is quiet */
* { transition: opacity 160ms ease, background-color 160ms ease, border-color 160ms ease; }