/* Brand layer — per-site. The only stylesheet allowed to hold literals.
   Palette source: the site's brand kit palette.json.
   Load order: structure.css first, then this file. */

/* ── Typeface files (local, no remote fetch) ────────── */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/public-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/public-sans-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-serif-4-latin.woff2") format("woff2");
}

/* ── Tokens ─────────────────────────────────────────── */
:root {
  /* colour */
  --brand: #A0312F;
  --brand-2: #832827;
  --brand-soft: #F6E2E0;
  --brand-rgb: 160 49 47;
  --brand-2-rgb: 131 40 39;

  --ink: #231F20;
  --ink-2: #5C5654;
  --ink-3: #8A8482;
  --ink-rgb: 35 31 32;

  --line: #E4DEDB;
  --line-2: #CFC7C3;

  --bg: #FEFAF7;
  --bg-rgb: 254 250 247;
  --surface-1: #FFFFFF;
  --surface-2: #FAF2ED;
  --surface-3: #F2E8E2;

  --on-brand: #FFFFFF;
  --on-ink: #D9D2CF;
  --on-ink-strong: #FFFFFF;
  --on-ink-muted: #A8A09D;
  --footer-rule: rgb(255 255 255 / .14);

  --ok-bg: #EAF4EA;
  --ok-ink: #24572B;
  --ok-line: #BCD9BE;
  --err-bg: var(--brand-soft);
  --err-ink: var(--brand-2);
  --err-line: #E4B7B3;

  /* text sitting on the hero clip */
  --hero-accent-on-video: #F3C9C4;
  --on-video: #FFFFFF;
  --on-video-soft: rgb(255 255 255 / .88);
  --on-video-muted: rgb(255 255 255 / .8);
  --on-video-veil: rgb(255 255 255 / .15);

  /* type */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-text: "Public Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display-weight: 600;
  --display-tracking: -.01em;

  /* shape + depth */
  /* header + logo scale (v1 horizontal lockup, Hieu 2026-09-06: "make the logo bigger") */
  --header-h: 92px;  --logo-h: 66px;  --footer-logo-h: 60px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow: 0 2px 6px -2px rgb(var(--brand-rgb) / .08), 0 12px 32px -14px rgb(var(--brand-2-rgb) / .22);
  --shadow-float: 0 4px 10px -4px rgb(var(--brand-rgb) / .12), 0 22px 48px -18px rgb(var(--brand-2-rgb) / .28);
  --shadow-btn: 0 2px 8px -2px rgb(var(--brand-rgb) / .35), 0 10px 24px -10px rgb(var(--brand-2-rgb) / .45);
  --shadow-btn-hover: 0 3px 10px -2px rgb(var(--brand-rgb) / .4), 0 14px 30px -10px rgb(var(--brand-2-rgb) / .5);
  --header-bg: rgb(var(--bg-rgb) / .92);
}

/* ── Site skin ──────────────────────────────────────── */

/* Hero wash: two off-canvas brand pools over a warm cream ramp. */
.hero {
  background:
    radial-gradient(90rem 60rem at 115% -20%, rgb(var(--brand-rgb) / .14), transparent 60%),
    radial-gradient(60rem 44rem at -15% 115%, rgb(var(--brand-rgb) / .10), transparent 55%),
    linear-gradient(160deg, var(--surface-3), var(--brand-soft) 55%, var(--surface-2));
}

/* Grain — keeps the gradient from banding on wide screens. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero.has-video::before { display: none; }

/* Both parallax planes are the brand mark; structure.css places and sizes them. */
.hero-plane {
  background-image: url("../img/siegen-lane-mark.svg");
  filter: saturate(.9);
}

/* Legibility scrim over the hero clip. */
.hero.has-video .hero-media::after {
  background: linear-gradient(100deg,
    rgb(var(--ink-rgb) / .72) 0%,
    rgb(var(--ink-rgb) / .45) 45%,
    rgb(var(--ink-rgb) / .12) 100%);
}