/* ---------------------------------------------------------------------------
   ISSENTIA EVENTS
   Drawn from the logo, and nothing else:
     paper   #FBFAF7   the textured ivory the mark is printed on
     ink     near-black, the calligraphic wordmark
     sage    #8C9880 / #607460, the olive sprig
   Type mirrors the three parts of the mark: Great Vibes for the script
   logotype, Cormorant Garamond for display, Jost for the wide-tracked caps
   that "EVENTS" is set in.
   Shape system: RADIUS 0 everywhere. The softness comes from the type and the
   sprig, never from rounded corners.
   Theme: ivory on :root, warm olive-black under prefers-color-scheme: dark.
--------------------------------------------------------------------------- */

:root {
  --paper:       #FBFAF7;
  --paper-2:     #F2F0E9;
  --ink:         #16160F;
  --ink-soft:    #6B6C60;
  --rule:        rgba(22, 22, 15, 0.13);
  --rule-strong: rgba(22, 22, 15, 0.28);

  --sage:        #5E6C51;   /* accent for text, buttons, rules — carries contrast */
  --sage-soft:   #8C9880;   /* the leaf mid-tone, decorative only */
  --sage-ink:    #FBFAF7;   /* what sits on top of --sage */
  --sage-wash:   #E9EDE3;

  --img-tint:    rgba(62, 50, 28, 0.14);
  --img-veil:    rgba(251, 250, 247, 0.10);
  --img-filter:  grayscale(1) sepia(0.55) saturate(1.1) contrast(1.04) brightness(1.02);

  --grain:       0.045;

  /* The footage is a bright, near-white studio render, so the hero reads as
     paper rather than as a dark photograph: overlay type is ink, and the film
     is lifted and veiled until ink sits comfortably on it. Dark theme dims the
     same footage instead, so the identical markup works in both. */
  --paper-fade:  rgba(251, 250, 247, 0);
  --paper-soft:  rgba(251, 250, 247, 0.88);
  --video-filter: saturate(0.80) contrast(0.90) brightness(1.10);
  --video-veil:  rgba(251, 250, 247, 0.56);
  /* The second film carries no type on top of it, so it does not need beating
     down into a watermark the way the hero does. Its own foliage (#465032)
     already sits in the sage family and its gold reads warm against ivory, so
     it keeps a light veil and its colour. */
  /* The second film is shown CLEAN — no veil, no bloom, no feather. It is a
     flagship decor piece and the point is to see it, so nothing is laid over
     it. Legibility for the copy comes from a text shadow instead, which darkens
     only behind the glyphs rather than across the whole picture.
     The filter is a mild lift, not a wash: the source is soft, so it gets a
     little contrast and saturation to bring the candlelight forward. */
  --film-on:      #FBFAF7;
  --film-accent:  rgba(206, 219, 192, 0.95);
  --film-filter:  saturate(1.12) contrast(1.10) brightness(1.04);
  --on-video:      var(--ink);
  --on-video-soft: var(--ink-soft);

  /* The three story films are PLAYED, not scrubbed, and they sit in the same
     frame as the photographs beside them. The stills are pulled hard toward the
     paper (--img-filter is grayscale + sepia); a film given that treatment dies,
     so these keep their colour and are only pulled back far enough to belong on
     the page. Same reasoning as the entrance film, gentler dose.
     The chip behind the controls and the pointer does NOT follow the theme: it
     sits on arbitrary footage, so it is dark with ivory type in both. */
  --clip-filter:    saturate(0.86) sepia(0.10) contrast(1.02);
  --clip-chip:      rgba(14, 12, 8, 0.52);
  --clip-chip-over: rgba(14, 12, 8, 0.78);
  --clip-chip-ink:  #FBFAF7;
  --clip-chip-rule: rgba(251, 250, 247, 0.32);

  --header-h: 78px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 1400px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* System preference wins unless the document pins a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #14160F;
    --paper-2:     #1B1E16;
    --ink:         #F1EFE8;
    --ink-soft:    #9EA396;
    --rule:        rgba(241, 239, 232, 0.15);
    --rule-strong: rgba(241, 239, 232, 0.32);
    --sage:        #A3B392;
    --sage-soft:   #8C9880;
    --sage-ink:    #14160F;
    --sage-wash:   #232719;
    --img-tint:    rgba(14, 16, 9, 0.34);
    --img-veil:    rgba(140, 152, 128, 0.07);
    --img-filter:  grayscale(1) sepia(0.40) saturate(0.95) contrast(1.06) brightness(0.88);
    --grain:       0.06;
    --paper-fade:  rgba(20, 22, 15, 0);
    --paper-soft:  rgba(20, 22, 15, 0.88);
    --video-filter: saturate(0.68) contrast(1.02) brightness(0.46);
    --video-veil:  rgba(20, 22, 15, 0.60);
    --film-filter:  saturate(1.10) contrast(1.08) brightness(0.98);
    --clip-filter:  saturate(0.82) sepia(0.08) contrast(1.02) brightness(0.90);
  }
}

/* Explicit pin, either direction. */
:root[data-theme="dark"] {
    --paper:       #14160F;
    --paper-2:     #1B1E16;
    --ink:         #F1EFE8;
    --ink-soft:    #9EA396;
    --rule:        rgba(241, 239, 232, 0.15);
    --rule-strong: rgba(241, 239, 232, 0.32);
    --sage:        #A3B392;
    --sage-soft:   #8C9880;
    --sage-ink:    #14160F;
    --sage-wash:   #232719;
    --img-tint:    rgba(14, 16, 9, 0.34);
    --img-veil:    rgba(140, 152, 128, 0.07);
    --img-filter:  grayscale(1) sepia(0.40) saturate(0.95) contrast(1.06) brightness(0.88);
    --grain:       0.06;
    --paper-fade:  rgba(20, 22, 15, 0);
    --paper-soft:  rgba(20, 22, 15, 0.88);
    --video-filter: saturate(0.68) contrast(1.02) brightness(0.46);
    --video-veil:  rgba(20, 22, 15, 0.60);
    --film-filter:  saturate(1.10) contrast(1.08) brightness(0.98);
    --clip-filter:  saturate(0.82) sepia(0.08) contrast(1.02) brightness(0.90);
}