/* ═══════════════════════════════════════════════════════════════════
   STUDIO SORRAE — BRAND TOKENS
   The single source of truth for the landing pages. Change a value here
   and it changes on v1, v2 and v3 at once.

   Palette (Studio Sorrae Brand Guidelines):
     brown  #47342B   blue #909DAD   ochre #B19831   off-white #F6F2F2
   The guidelines are light-forward. These pages are deliberately dark —
   photoreal renders read as premium on a dark field — so every neutral below
   is a darkened pull from brand brown rather than a cool grey.

   Served by nginx from the web root, so the <link> in each lander is
   RELATIVE ("brand.css") — that resolves to /brand.css on /, /v1, /v2 and
   /v3 alike, and still works when a lander is opened straight off disk.

   reveal-page/reveal.html deliberately does NOT link this file. It ships as
   one dependency-free document that gets duplicated per client and hosted
   anywhere, so it carries its own copy of these tokens under the same names.
   Change one, change the other.

   Contrast is measured, not assumed. Ratios in comments are WCAG 2.1 against
   --bg. Do not put --ink on an --gold fill: that is 2.6:1 and fails.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Webfonts, self-hosted ────────────────────────────────────────────
   Latin subsets of the two brand families, variable across their weight
   ranges. Self-hosted rather than pulled from the Google CDN: no third
   party on the critical path, no cross-origin request from a page that
   collects names and phone numbers. Paths are relative to the web root,
   same as this file's own <link>. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("brand/fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zalando Sans";
  src: url("brand/fonts/zalando-sans.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zalando Sans SemiExpanded";
  src: url("brand/fonts/zalando-sans-semiexpanded.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces — darkened from brand brown #47342B */
  --bg: #1c1512;
  --panel: #241b16;
  --panel-2: #2e231c;
  --media-bg: #17110d;      /* video shell + before/after frame */
  --input-bg: #17110d;      /* recessed form fields */
  --hero-inner: #2b1e14;    /* inner stop of the hero radial gradient */

  /* Ink */
  --ink: #f6f2f2;           /* brand off-white          16.2:1 */
  --ink-2: #c9bdb4;         /* body copy                 9.8:1 */
  --muted: #9a8e82;         /* small print               5.6:1 */
  --ink-bright: #f6f2f2;    /* slider knob glyph */
  --tag-ink: #e2dbd4;       /* before/after edge tags */

  /* Accent — brand ochre */
  --gold: #b19831;          /* eyebrows, kickers         6.4:1 */
  --gold-bright: #c9b04a;   /* hover                     8.4:1 */
  --btn-text: #1c1512;      /* label on a filled accent  6.4:1 — NEVER use --ink here */
  --blue: #909dad;          /* secondary accent          6.5:1 */
  --ring: rgba(177, 152, 49, 0.35);

  /* Lines, scrims, shadow */
  --hair: rgba(246, 242, 242, 0.09);
  --header-bg: rgba(28, 21, 18, 0.88);
  --scrim: rgba(23, 17, 13, 0.55);         /* video lock */
  --overlay: rgba(18, 13, 11, 0.82);       /* capture modal backdrop */
  --tag-bg: rgba(18, 13, 11, 0.62);
  --knob-bg: rgba(23, 17, 13, 0.72);
  --slider-line: rgba(246, 242, 242, 0.95);
  --shadow: rgba(0, 0, 0, 0.55);

  /* Validation — no red exists in the brand; warm terracotta, semantic use only */
  --err-border: #c15a4b;
  --err-text: #e59386;

  /* Type — Zalando Sans SemiExpanded (primary), Cormorant Garamond (secondary).
     Cormorant is a high-contrast display serif: hero headline and pull-quotes
     only. Below ~24px it goes spindly. Everything structural is the grotesque. */
  --font-display: "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
  --font-sans: "Zalando Sans SemiExpanded", "Zalando Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body: "Zalando Sans", "Zalando Sans SemiExpanded", "Helvetica Neue", Arial, system-ui, sans-serif;
}

/* ── Wordmark ────────────────────────────────────────────────────────
   The supplied asset, trimmed to its ink bounds. The old letter-spaced
   text treatment is gone. The mark is 12:1, so it eats a header fast —
   it steps down under 460px, where it otherwise touches the tagline. */
.wordmark { display: inline-block; line-height: 0; font-size: 0; }
.wordmark img { display: block; height: 15px; width: auto; }
footer .wordmark img { height: 18px; margin: 0 auto 10px; }

@media (max-width: 460px) {
  .wordmark img { height: 12px; }
  footer .wordmark img { height: 15px; }
}