/* ============================================================================
   Design tokens — Benaka By The Hills
   ----------------------------------------------------------------------------
   TWO type registers, and nothing between them. That gap is the system: a large
   editorial serif for anything that carries meaning, and a small tracked sans
   for anything that labels. A third size in the middle is what makes a page
   read as generated, so there isn't one.

   The engine (scrub-engine.js) reads --sw-* directly, so setting them here
   themes the canvas copy, its scrim and its title shadow without touching the
   engine. Everything else is --s-*.
   ========================================================================== */

/* Both selectors, deliberately: the engine declares its own cream defaults on
   .sw-root (scrub-engine.js:359). That is a closer ancestor to the canvas copy
   than :root, and custom properties inherit by proximity — @layer does not enter
   into it — so :root alone loses inside the canvas. */
:root, .sw-root {
  /* --- ground: dark slate, so the overcast photos read as lit windows ----- */
  --s-bg:          #14171a;
  --s-bg-raised:   #1b1f24;
  --s-bg-sunk:     #0f1113;
  --s-line:        #2a3037;

  --s-ink:         #ecebe7;   /* warm off-white, never pure #fff */
  --s-ink-soft:    #99a0a8;
  --s-ink-faint:   #626a73;

  /* terracotta, lifted from the pool deck tiles in the photographs */
  --s-accent:      #c9683d;
  --s-accent-soft: #e08b60;

  /* --- type: the two registers ------------------------------------------- */
  --s-font-macro: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --s-font-micro: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --s-macro:      clamp(2.2rem, 5.2vw, 4.2rem);   /* headlines */
  --s-macro-lg:   clamp(3rem, 11vw, 8.5rem);      /* the name, once */
  --s-micro:      0.75rem;                        /* labels, numbers, eyebrows */
  --s-micro-track: 0.16em;
  --s-body:       clamp(1rem, 1.1vw, 1.08rem);    /* prose only */

  /* --- rhythm ------------------------------------------------------------- */
  --s-gut:        clamp(20px, 5vw, 72px);
  --s-section:    clamp(72px, 12vh, 144px);
  --s-radius:     2px;     /* almost none — softness reads as template */

  --s-ease:       cubic-bezier(.22, .61, .36, 1);
  --s-slow:       .8s var(--s-ease);
  --s-quick:      .28s var(--s-ease);

  /* --- engine theme: the canvas copy inherits all of this ----------------- */
  --sw-bg:           var(--s-bg);
  --sw-ink:          var(--s-ink);
  --sw-ink-soft:     var(--s-ink-soft);
  --sw-accent:       var(--s-accent);
  --sw-font-display: var(--s-font-macro);
  --sw-font-body:    var(--s-font-micro);
}

/* ---------------------------------------------------------------------------
   THE EDITORIAL LAYER — a second, LIGHT palette for the page around the canvas.

   The canvas is video and wants a dark ground; the page around it is a property
   brochure and wants paper. Rather than fork every rule, the light values are
   declared on the page bands themselves and inherit down: `.before` and `.after`
   redeclare the same --s-* names, so the gallery, footer and venue convert with
   no rule changes at all, while the engine's fixed layers — which live OUTSIDE
   those elements — keep the dark values from :root above.

   This is the same proximity-inheritance behaviour documented at the top of this
   file, used deliberately instead of being worked around.
   ------------------------------------------------------------------------ */
.before, .after {
  --s-bg:          #f4f1ea;   /* ivory, warm; never #fff */
  --s-bg-raised:   #eae4d8;
  --s-bg-sunk:     #efe9dd;
  --s-line:        #ddd5c5;

  --s-ink:         #23292b;   /* muted charcoal, never #000 */
  --s-ink-soft:    #5d6663;
  --s-ink-faint:   #8b918c;

  --s-accent:      #a8542c;   /* terracotta, darkened to hold on paper */
  --s-accent-soft: #8f4522;
}

/* Deep forest green, the reference's second ground. Used for the handover band
   and the closing bar, where the page needs to go quiet before and after the
   canvas. Ink flips back to cream inside it. */
.band--forest {
  --s-bg:          #1c2f26;
  --s-bg-raised:   #24392e;
  --s-bg-sunk:     #16261e;
  --s-line:        #33493d;
  --s-ink:         #f1ece1;
  --s-ink-soft:    #a9b6ac;
  --s-ink-faint:   #7d8c82;
  --s-accent:      #d9895e;
  --s-accent-soft: #e8a988;
  background: var(--s-bg);
  color: var(--s-ink);
}

/* Motion is a garnish. If it isn't wanted, none of it is load-bearing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}