/* =========================================================================
   Events — per-collection branding on the guest side.
   Added 2026-08-26 (Candid). Cover hero, welcome message, and the host's one
   accent colour flowing through the whole gallery.
   ========================================================================= */

/* ---- the cover: a wide hero across the top of the gallery and lock screen --
   object-fit: cover so any photo fills the frame without distortion; a fixed
   aspect ratio so the page does not jump as the image loads. */
.evcover {
  margin: 0 0 6px;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 6;
  background: var(--sunken, #ececea);
  line-height: 0;
}
.evcover img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
  .evcover { aspect-ratio: 16 / 9; border-radius: 10px; }
}

/* When there is a cover, let the logo lift up and sit half over its lower edge,
   the way a crest sits on a header photo. Falls back gracefully with no cover. */
.evhead.oncover { margin-top: 0; }
.evhead.oncover .evlogo {
  margin-top: -46px;
  position: relative;
  background: var(--surface, #fff);
  padding: 6px;
  border-radius: 12px;
  box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.12));
}
@media (max-width: 640px) { .evhead.oncover .evlogo { margin-top: -34px; } }

/* ---- the welcome, a warm paragraph under the title ---- */
.evwelcome {
  margin: 12px auto 0;
  max-width: 54ch;
  color: var(--ink-2, #4a4a45);
  font-size: 15px;
  line-height: 1.6;
}

/* ---- the accent ----------------------------------------------------------
   The host's colour arrives as --evaccent on the .evwrap inline style. Rather
   than restyle every element by hand, re-point the brand tokens to it: every
   button, link and active day tab already reads var(--brand*), so they all pick
   the accent up at once. The hover and wash shades are mixed from the accent so
   they stay in the same family instead of going flat. */
.evwrap[style*="--evaccent"] {
  --brand:       var(--evaccent);
  --brand-hi:    color-mix(in srgb, var(--evaccent) 84%, #fff);
  --brand-lo:    color-mix(in srgb, var(--evaccent) 82%, #000);
  --brand-ring:  color-mix(in srgb, var(--evaccent) 42%, transparent);
  --brand-wash:  color-mix(in srgb, var(--evaccent) 12%, #fff);
}

/* Belt and braces for the few guest bits that name a colour directly rather
   than through --brand, so the accent reaches them too. */
.evwrap[style*="--evaccent"] .evday.on {
  background: var(--evaccent);
  border-color: var(--evaccent);
  color: #fff;
}
.evwrap[style*="--evaccent"] .evwho { background: color-mix(in srgb, var(--evaccent) 88%, #000); }

/* =========================================================================
   Disposable camera — the film counter and the developing screen (Candid).
   ========================================================================= */

/* The film counter, above the add button. Picks up the collection accent
   through --brand, which the accent block above re-points. */
.evshots {
  margin: 0 0 10px;
  text-align: center;
  font-weight: 650;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--brand);
}
.evshots.out { color: var(--ink-3, #6b6b64); font-weight: 600; }

/* The picker, spent. The button is a <label>, which has no disabled state of
   its own, so the look is done here and the real block is the file input being
   disabled underneath it. */
.evpick.off { opacity: .5; pointer-events: none; }

/* The developing screen that stands in for the grid until the roll is ready. */
.evdevelop {
  text-align: center;
  padding: 30px 18px 22px;
  max-width: 32ch;
  margin: 6px auto 0;
}
.evdevelop h2 { margin: 18px 0 6px; font-size: 20px; letter-spacing: -0.01em; }
.evdevelop .evsub { margin: 0 0 8px; }

/* The developing mark: a brand-coloured tile with a sheen sweeping across it,
   pulsing, so it reads as a photo coming up in the tray with no image to load
   and nothing to fetch. */
.evfilm {
  width: 84px; height: 84px;
  margin: 0 auto;
  border-radius: 16px;
  background:
    linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, .55) 50%, transparent 54%),
    var(--brand);
  background-size: 240% 240%, auto;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .3);
  animation: evdevelop 2.2s ease-in-out infinite;
}
@keyframes evdevelop {
  0%   { background-position: 150% 150%, 0 0; opacity: .55; }
  50%  { opacity: 1; }
  100% { background-position: -50% -50%, 0 0; opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .evfilm { animation: none; } }

/* =========================================================================
   Film look — a grade over the whole gallery, applied on DISPLAY only so the
   originals and every download stay untouched. The key sits on a [data-film]
   element (the wrap, the lightbox, the big screen) as a filter variable, and
   every photo inside inherits it. Empty/absent = no filter, unchanged.
   ========================================================================= */
[data-film="classic"]    { --evfilm: contrast(1.08) saturate(1.14) brightness(1.02); }
[data-film="golden"]     { --evfilm: sepia(.3) saturate(1.3) contrast(1.05) brightness(1.04); }
[data-film="faded"]      { --evfilm: contrast(.88) saturate(.82) brightness(1.07) sepia(.14); }
[data-film="mono"]       { --evfilm: grayscale(1) contrast(1.14) brightness(1.03); }
[data-film="disposable"] { --evfilm: contrast(1.18) saturate(1.32) brightness(1.04) sepia(.12); }

.evcell img,
.evbox img,
.evframe { filter: var(--evfilm, none); }

/* Disposable gets a soft vignette on the grid, the way a cheap plastic lens
   dropped off at the corners. Kept to the grid so it does not fight the
   lightbox, and the cell is already positioned (it carries the name overlay). */
.evwrap[data-film="disposable"] .evcell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 34px 6px rgba(0, 0, 0, .28);
  border-radius: inherit;
}

/* The date stamp: the orange corner date a point-and-shoot burned into the
   negative. Monospace, a warm glow, sitting where the camera used to put it. */
.evstamp {
  position: absolute;
  right: 7px;
  bottom: 6px;
  z-index: 2;
  font-family: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #ff9a1e;
  text-shadow: 0 0 4px rgba(255, 120, 0, .85), 0 1px 1px rgba(0, 0, 0, .55);
  pointer-events: none;
}