/* ============================================================================
   TVYAL.COM — /event  (invitation)
   event-styles.css

   A storyboard, not a data-tool page. It takes the design system's tokens,
   fonts and colour language and departs from its layout grammar, because the
   page is reached by a link in a letter rather than through the nav.

   THE STAGE
   `.ev-stage` is one fixed photograph behind everything. `.scene--open`
   sections are transparent and let it through; `.scene--panel` sections are
   opaque and slide over it. Three scenes open onto the poster: the hero,
   the agenda (under a darker veil, 2026-09-29), and the venue, where the
   photograph is the content.

   A fixed layer rather than `background-attachment: fixed`, because iOS Safari
   ignores that property and renders the poster scrolling.

   THE HERO IS ALWAYS DARK, in both themes. It is an evening event, the poster
   is a night photograph, and the form card has to be the brightest thing on
   screen for the eye to find it first. Below the hero the page follows the
   site theme as normal.
   ============================================================================ */

/* Poster path in one place. Swap the file, not this rule, when the real
   photograph of the room arrives (files/event/CREDITS.md). */
.ev-body {
  --ev-poster:    url('../files/event/poster.jpg');
  --ev-poster-sm: url('../files/event/poster-sm.jpg');

  /* Fixed hero palette, independent of light/dark mode. */
  --ev-ink:       #fffcf5;
  --ev-ink-soft:  rgba(255, 252, 245, 0.74);
  --ev-ink-faint: rgba(255, 252, 245, 0.50);
  --ev-hair:      rgba(255, 252, 245, 0.16);
  --ev-glow:      #ff9152;

  background: #071320;
}

@media (max-width: 700px) {
  .ev-body { --ev-poster: var(--ev-poster-sm); }
}

/* ============================================================================
   1. THE STAGE
   ============================================================================ */

.ev-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ev-stage-img {
  position: absolute;
  inset: 0;
  background-image: var(--ev-poster);
  background-size: cover;
  background-position: center 62%;
}

/* Two scrims doing separate jobs: a vertical one so the headline sits on near
   black, and a horizontal one so the form card has a settled ground. */
.ev-stage-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(4, 11, 20, 0.94) 0%,
      rgba(4, 11, 20, 0.66) 34%,
      rgba(4, 11, 20, 0.54) 70%,
      rgba(4, 11, 20, 0.90) 100%),
    linear-gradient(90deg,
      rgba(4, 11, 20, 0.78) 0%,
      rgba(4, 11, 20, 0.18) 52%,
      rgba(4, 11, 20, 0.48) 100%);
}

/* design-system sets scroll-padding-top to exactly the 56px nav height, so an
   anchor lands flush underneath it with the target's first line clipped. This
   page needs breathing room above whatever you jump to. */
html { scroll-padding-top: 88px; }

.ev-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Several elements here are toggled with the `hidden` attribute and also carry
   a display rule from their own class. A class beats the user-agent
   `[hidden] { display: none }`, so without this the sticky bar and the faces
   row stay on screen after JS hides them. */
.ev-body [hidden] { display: none !important; }

/* ============================================================================
   2. SCENES
   ============================================================================ */

.scene {
  position: relative;
  z-index: 1;
  padding: var(--space-9) 0;
}

/* Opaque. Slides over the poster and hides it. */
.scene--panel { background: var(--bg); }

/* Transparent. The poster shows through. A photograph is uneven ground for
   type, so text in these scenes carries a shadow the scrims cannot provide. */
.scene--open { background: transparent; }
.scene--open h1,
.scene--open h2,
.scene--open p,
.scene--open li { text-shadow: 0 1px 14px rgba(4, 11, 20, 0.75); }
.scene--open .ev-card * { text-shadow: none; }

.ev-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.ev-h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}

.ev-h2--light { color: var(--ev-ink); }

/* Emphasised span in an h2 (used by the pipeline heading), same treatment as .ev-h1 em. */
.ev-h2 em { font-style: normal; color: var(--ev-glow); }

.ev-sub {
  font-size: var(--text-base);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-6);
  max-width: 60ch;
}

/* Icons. 1.5px stroke, inherit colour, never filled. */
.ev-ico {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================================
   3. SCENE 1 — HERO
   ============================================================================ */

#ev-hero {
  /* minus the fixed 56px nav, which body already pads for. Without it the hero
     was a full viewport tall *below* the nav, so the whole composition sat a
     nav's height too low and centring worked against a box taller than the
     screen. */
  min-height: calc(100svh - 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
  color: var(--ev-ink);
}

.ev-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(var(--space-6), 5vw, var(--space-8));
  align-items: center;
  width: 100%;
}

.ev-hero-left { max-width: 36rem; min-width: 0; }

/* ── Logo. hero-logo.js swaps this img's src to an animation on a cycle.
   The stage is always dark, so the navy source stroke is always inverted. ── */
/* The wrapper keeps its old 88px footprint so the kicker and headline below it
   do not move. The mark itself is twice that, pinned by its bottom-right corner
   and overflowing up and to the left into the hero's padding. */
.ev-logo-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  margin-bottom: var(--space-4);
}

/* logo/static.svg insets its artwork by 10.2% of the 500x500 viewBox on the
   left, right and bottom, so pinning the element's corner still floats the
   visible mark inward as it grows. Scaling about the artwork's own corner
   (100% - 10.2% = 89.8%) pins the ink exactly, with no offset to guess at.
   The element keeps its 88px layout box; only the paint is doubled. */
.ev-logo {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 88px;
  height: 88px;
  transform: scale(2);
  /* Scaling about the artwork's own bottom-left corner, not the element's.
     static.svg insets its artwork by 10.2% of the viewBox, so 10.2% / 89.8%
     is where the ink's corner actually sits. The mark grows up and to the
     right and its base stays on the text column, level with the kicker. */
  transform-origin: 10.2% 89.8%;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 0 34px rgba(255, 124, 67, 0.22));
}

.ev-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--ev-glow);
  margin: 0 0 var(--space-3);
}

/* font-size here is only the no-JS fallback; fitHeadline() sets it inline. */
.ev-h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.3vw, 2.7rem);
  line-height: 1.05;
  color: var(--ev-ink);
  margin: 0 0 var(--space-5);
}

.ev-h1 em {
  font-style: normal;
  color: var(--ev-glow);
}

/* Second beat. Serif and full-strength ink, so it carries nearly the weight of
   the headline it resolves. The lede under it drops to a muted sans qualifier. */
.ev-answer {
  font-family: var(--font-serif);
  /* font-size here is only the no-JS fallback; fitHeadline() sets it inline,
     column-fitted like the headline and capped at 0.6x of it. */
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  line-height: 1.1;
  color: var(--ev-ink);
  margin: 0 0 var(--space-4);
  /* No ch cap: it is fitted to one line, so the column (36rem) is the bound. */
}

.ev-lede {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--ev-ink-soft);
  margin: 0 0 var(--space-2);
  max-width: 46ch;
}

/* ── Logistics ── */

.ev-facts {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
}

.ev-facts li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  line-height: 1.3;
  color: var(--ev-ink);
}

.ev-facts .ev-ico { color: var(--ev-glow); }

/* ── Faces ── */

.ev-faces {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  max-width: 100%;
  text-decoration: none;
}

/* A hairline filmstrip, borrowing .stat-mosaic from design-system.css:
   gap:1px over a border-coloured ground draws the dividers, so the faces read
   as one object without a single rounded corner. */
.ev-faces-row {
  display: inline-flex;
  gap: 1px;
  background: var(--ev-hair);
  border: 1px solid var(--ev-hair);
  transition: border-color 200ms ease;
}

.ev-faces:hover .ev-faces-row { border-color: var(--ev-glow); }

.ev-face {
  width: 42px;
  height: 42px;
  object-fit: cover;
  background: #12283f;
}

.ev-face--mono {
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: var(--ev-ink);
  background: #12283f;
}
/* Crest, not a face: contain it so the thumbnail doesn't crop the shield. */
.ev-face--emblem {
  object-fit: contain;
  padding: 3px;
}

.ev-faces-label {
  font-size: var(--text-sm);
  color: var(--ev-ink-soft);
}

.ev-faces-more { color: var(--ev-ink-faint); }

/* ── Countdown ─────────────────────────────────────────────────────────────
   No panel, no border, no background. Four numbers on a hairline. Only the
   cell whose value just changed carries `.is-tick`, so the seconds move and
   everything else holds still.
   ────────────────────────────────────────────────────────────────────────── */

.ev-countdown {
  display: flex;
  gap: var(--space-6);
  padding-top: var(--space-2);
  border-top: 1px solid var(--ev-hair);
}

.ev-cd { display: flex; flex-direction: column; gap: 2px; }

.ev-cd-n {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--ev-ink);
  font-variant-numeric: tabular-nums;
  transition: color 420ms ease, transform 420ms ease;
}

.ev-cd-n.is-tick {
  color: var(--ev-glow);
  transform: translateY(-1px);
  transition: none;
}

/* line-height:1 rather than the 1.6 inherited from body. A 12px label was
   sitting in a 19px box, which floated it away from its number and pushed the
   Armenian countdown 3px past the fold. */
.ev-cd-l {
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--ev-ink-faint);
}

.ev-cd-past {
  font-size: var(--text-base);
  color: var(--ev-ink-soft);
  padding-top: var(--space-5);
  border-top: 1px solid var(--ev-hair);
}

/* ============================================================================
   4. THE CARD — the only light surface above the fold
   ============================================================================ */

.ev-card {
  background: var(--brand-cream);
  color: #14202c;
  padding: var(--space-6);
  /* Square, like #demo-modal-window. The deep shadow stays, because that is
     how the design system separates an overlay from what is behind it. */
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
}

.ev-card-h {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: #0c1a2c;
  margin: 0 0 var(--space-4);
}

.ev-card-note {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: #5a5a5a;
  margin: 0 0 var(--space-5);
}

/* ── Seats ── */

.ev-seats { margin-bottom: var(--space-5); }

.ev-seats-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: 6px;
  font-size: var(--text-sm);
  color: #5a5a5a;
}

.ev-seats-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: #14202c;
  white-space: nowrap;
}

.ev-seats-bar {
  height: 4px;
  background: rgba(12, 26, 44, 0.10);
  overflow: hidden;
}

.ev-seats-fill {
  height: 100%;
  width: 0;
  background: var(--brand-orange);
  transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ev-seats.is-full .ev-seats-fill { background: var(--brand-coral); }

/* ── Fields ── */

.ev-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.ev-field { display: flex; flex-direction: column; gap: 5px; }

.ev-field label {
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: #5a5a5a;
}

.ev-field label i,
.ev-check i { color: var(--brand-orange); font-style: normal; margin-left: 2px; }

.ev-field input,
.ev-field select,
.ev-more textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: #14202c;
  background: #fff;
  border: 1px solid rgba(12, 26, 44, 0.18);
  transition: border-color 160ms ease;
}

.ev-field input::placeholder,
.ev-more textarea::placeholder { color: #9a9a9a; }

.ev-field input:focus,
.ev-field select:focus,
.ev-more textarea:focus {
  outline: none;
  border-color: var(--brand-orange);
}

.ev-field input.is-invalid { border-color: var(--brand-coral); }

.ev-more { margin-bottom: var(--space-4); }

.ev-more summary {
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--accent-text);
  padding: 4px 0;
  list-style: none;
}

.ev-more summary::-webkit-details-marker { display: none; }
.ev-more summary::before { content: '+ '; font-family: var(--font-mono); }
.ev-more[open] summary::before { content: '– '; }
.ev-more textarea { margin-top: var(--space-2); resize: vertical; }

/* ── Consent ── */

.ev-checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Block, not flex. As a flex row the trailing <i>*</i> became a third item and
   drifted to the far right once the label wrapped to four lines on a phone.
   Absolute-positioning the box lets the text and its asterisk flow together. */
.ev-check {
  display: block;
  position: relative;
  padding-left: 30px;
  min-height: 22px;
  font-size: 13px;
  line-height: 1.5;
  color: #5a5a5a;
  cursor: pointer;
}

.ev-check input {
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  accent-color: var(--brand-orange);
  cursor: pointer;
}

.ev-req {
  font-size: 11px;
  color: #8a8a8a;
  margin: 0 0 var(--space-3);
}

.ev-error {
  font-size: var(--text-sm);
  color: #b0263f;
  margin: 0 0 var(--space-3);
}

/* ── The button ── */

.ev-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 15px 24px;
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: #000;
  background: var(--accent);
  border: none;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

.ev-submit:hover { background: var(--accent-press); transform: translateY(-2px); }
.ev-submit.is-loading { opacity: 0.55; pointer-events: none; }
.ev-ico--btn { width: 18px; height: 18px; stroke-width: 2; }

.cf-turnstile { margin-bottom: var(--space-3); }

/* ── Card result states ── */

.ev-success { text-align: center; padding: var(--space-5) 0; }

.ev-success-mark {
  margin-bottom: var(--space-3);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--brand-orange);
}

.ev-success h3,
.ev-waitlist h3 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: #0c1a2c;
  margin: 0 0 var(--space-3);
}

.ev-success p,
.ev-waitlist p {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: #5a5a5a;
  margin: 0 0 var(--space-2);
}

.ev-success-note { font-size: 12px !important; }
.ev-success-note a { color: var(--accent-text); }
.ev-success-note a:hover { color: #7a2a0e; text-decoration: underline; }

.ev-waitlist {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: rgba(249, 93, 106, 0.09);
  border-left: 3px solid var(--brand-coral);
}

/* ============================================================================
   5. SCENE 2 — THE QUESTION
   ============================================================================ */

.ev-why { max-width: 62ch; }

.ev-why-lead {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  line-height: 1.45;
  color: var(--text-primary);
  margin: 0 0 var(--space-5);
}

.ev-why-p {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0 0 var(--space-6);
}

.ev-why-aside {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  margin: 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--accent);
}

/* ============================================================================
   6. SCENE 3 — THE PANEL
   ============================================================================ */

.ev-panel-grid {
  display: grid;
  /* Four fixed columns on desktop and tablet (auto-fill used to give three on
     a laptop and four on a tablet); the phone breakpoint below sets two. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
}

.ev-p-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Square plate in an orange bezel, lifting on hover. Same grammar as
   `.nrc-card` in homepage-styles.css, which is where this page's kinship with
   the rest of the site should show. The photographs are the reason anyone
   comes, so they get the full width of the card rather than a token avatar. */
.ev-p-photo,
.ev-p-mono {
  width: 100%;
  max-width: 230px;
  /* height:auto matters. The img carries width/height attributes for layout
     stability, and with both dimensions definite the browser ignores
     aspect-ratio and renders a letterbox. */
  height: auto;
  aspect-ratio: 1;
  border: 2px solid rgba(255, 124, 67, 0.45);
  border-radius: var(--radius-sm);
  transition: border-color 220ms ease, transform 220ms ease;
}

.ev-p-photo {
  object-fit: cover;
  background: var(--bg-secondary);
}

/* Colour, not greyscale. Faces are what convert here, and draining them of
   colour until hover hides the thing doing the work. */
.ev-p-card:hover .ev-p-photo,
.ev-p-card:hover .ev-p-mono {
  border-color: var(--brand-orange);
  transform: translateY(-2px);
}

.ev-p-mono {
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 2.6rem;
  color: var(--accent);
  background: var(--bg-secondary);
}

.ev-p-name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0;
}

.ev-p-title {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--accent);
  margin: 0;
}

body:not(.dark-mode) .ev-p-title { color: var(--accent-text); }

.ev-p-topic {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: 0;
}

/* Draft-only. Visible with ?preview=1 so an unconfirmed card can never be
   mistaken for a live one. */
.ev-p-card.is-unconfirmed { opacity: 0.6; }

.ev-p-card.is-unconfirmed::before {
  content: 'UNCONFIRMED';
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--brand-coral);
}

/* A crest riding on the corner of a photo plate (the ministry card): the
   plate takes the photo's width so the badge can anchor to its corner. */
.ev-p-plate {
  position: relative;
  display: block;
  width: 100%;
  max-width: 230px;
}
.ev-p-plate .ev-p-photo { display: block; max-width: none; }
.ev-p-badge {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 28%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 5px;
  border-radius: 50%;
  background: #fffcf5;
  border: 2px solid rgba(255, 124, 67, 0.45);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* A non-square crest (the coat of arms) letterboxed inside the square plate,
   not cropped like a face. */
.ev-p-card--emblem .ev-p-photo {
  object-fit: contain;
  padding: var(--space-4);
  background: var(--bg-secondary);
}

/* Pending: a live card, at full strength, carrying a soft caveat line rather
   than the draft-only red UNCONFIRMED badge. */
.ev-p-pending {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--brand-coral);
  margin: 0;
}

.ev-empty {
  font-size: var(--text-base);
  color: var(--text-tertiary);
  padding: var(--space-6);
  border: 1px dashed var(--border);
  text-align: center;
}

/* ============================================================================
   7. SCENE 4 — THE EVENING
   ============================================================================ */

.ev-timeline {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0 0 0 var(--space-6);
  position: relative;
  max-width: 660px;
}

.ev-timeline::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 12px;
  width: 1px;
  background: var(--border);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 900ms ease-out;
}

.ev-timeline.is-drawn::before { transform: scaleY(1); }

.ev-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
}

.ev-timeline li:last-child { padding-bottom: 0; }

.ev-timeline li::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-6) + 1px);
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.ev-t {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.ev-timeline h3 {
  font-size: var(--text-lg);
  color: var(--text-primary);
  margin: 0 0 3px;
  line-height: 1.3;
}

.ev-timeline p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  margin: 0;
}

/* The agenda on the night photograph (2026-09-29). A veil darker than the
   stage scrim keeps six rows of small type readable wherever the photo is
   bright; colours come from the fixed hero palette, so it stays dark in both
   site themes like the hero. */
.scene--agenda {
  background: rgba(4, 11, 20, 0.62);
  color: var(--ev-ink);
}
.scene--agenda .ev-h2,
.scene--agenda .ev-timeline h3 { color: var(--ev-ink); }
.scene--agenda .ev-timeline p   { color: var(--ev-ink-soft); }
.scene--agenda .ev-t            { color: var(--ev-glow); }
.scene--agenda .ev-timeline::before { background: var(--ev-hair); }

/* ============================================================================
   8. SCENE 5 — THE PLACE
   ============================================================================ */

/* Tall enough that the photograph reads as a scene rather than a seam. */
.scene--venue {
  min-height: 82svh;
  display: flex;
  align-items: center;
  padding: var(--space-10) 0;
  color: var(--ev-ink);
}

/* As a flex item the wrap shrinks to its content, and its `margin: 0 auto`
   then centres the whole block. It has to keep the full row. */
.scene--venue .ev-wrap { width: 100%; }

.ev-venue { max-width: 46ch; }

.ev-venue-name {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--ev-ink);
  margin: var(--space-3) 0 var(--space-1);
}

.ev-venue-addr {
  font-size: var(--text-base);
  color: var(--ev-ink-soft);
  margin: 0 0 var(--space-2);
}

.ev-venue-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ── Buttons ───────────────────────────────────────────────────────────────
   These are anchors, and design-system.css carries `a:hover { color:
   var(--accent-hover) }` at specificity (0,1,1). A plain `.ev-btn--solid
   { color }` is (0,1,0) and loses, so on hover the label turned coral on
   orange and vanished. Every colour below is therefore restated for :hover
   and :focus-visible, with `a.` in front to clear the element selector.

   Hover values follow `.btn-cta` in design-system.css: fill goes to --accent-press,
   text stays black. This page is allowed its own layout, not its own idea of
   what an orange button does when you point at it.
   ───────────────────────────────────────────────────────────────────────── */

.ev-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 26px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease,
              border-color 180ms ease, color 180ms ease;
}

a.ev-btn--solid,
a.ev-btn--solid:hover,
a.ev-btn--solid:focus-visible { color: #000; }

.ev-btn--solid { background: var(--accent); }
.ev-btn--solid:hover { background: var(--accent-press); transform: translateY(-2px); }

a.ev-btn--ghost,
a.ev-btn--ghost:hover,
a.ev-btn--ghost:focus-visible { color: var(--ev-ink); }

.ev-btn--ghost {
  background: transparent;
  border: 1px solid var(--ev-hair);
}

.ev-btn--ghost:hover {
  border-color: var(--ev-ink-soft);
  background: rgba(255, 252, 245, 0.06);
}

/* ============================================================================
   9. SCENE 6 — MATERIALS AND QUESTIONS
   ============================================================================ */

.ev-mat-grid {
  display: grid;
  /* min(300px, 100%) so the track can fall below its floor on a 320px phone,
     where 300 + 48 of padding would otherwise overflow. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-5);
}

/* A download is a real destination on this page, not a footnote. The card is
   stacked rather than icon-beside-text so the title gets the full width. */
.ev-mat {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  min-height: 230px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease;
}

.ev-mat:hover { border-color: var(--accent); transform: translateY(-2px); }

/* Latent version of the button bug: design-system's `a:hover` recolours these
   anchors too. Every child sets its own colour today so nothing shifts, but a
   child added later would inherit coral. Pin it at the anchor. */
.ev-mat,
.ev-mat:hover,
.ev-faces,
.ev-faces:hover { color: inherit; }

.ev-ico--doc { width: 40px; height: 40px; color: var(--accent); stroke-width: 1.25; }
body:not(.dark-mode) .ev-ico--doc { color: var(--accent-text); }

.ev-mat-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
}

.ev-mat-t {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--text-primary);
  line-height: 1.25;
}

.ev-mat-d {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

/* The booklet preview (.ev-booklet, .ev-bk-*) moved to design-system.css
   section 17c on 2026-10-05: /services shows it too. */

.ev-faq { margin-top: var(--space-9); max-width: 760px; }

.ev-faq-i { border-bottom: 1px solid var(--border-subtle); padding: var(--space-4) 0; }

.ev-faq-i summary {
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.ev-faq-i summary::-webkit-details-marker { display: none; }

.ev-faq-i summary::after {
  content: '+';
  font-family: var(--font-mono);
  color: var(--accent);
  flex-shrink: 0;
}

.ev-faq-i[open] summary::after { content: '–'; }

.ev-faq-i p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  margin: var(--space-3) 0 0;
}

/* ============================================================================
   10. FOOTER AND STICKY BAR
   ============================================================================ */

.ev-footer-shell { position: relative; z-index: 1; background: var(--bg); }

/* One bar carrying the date and the button, so a visitor who has scrolled past
   the form still has both facts they need in front of them. */
.ev-sticky {
  position: fixed;
  z-index: 900;
  right: var(--space-5);
  bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 10px 10px 10px var(--space-5);
  /* Flat, square and hairline-bordered, the way #top-nav is. The pill with a
     blur behind it was the most iOS thing on the page. Fully opaque, because
     at 96% the white form card tinted it from behind once the card scrolled
     up under it. */
  background: #091624;
  border: 1px solid var(--ev-hair);
  animation: evRise 320ms ease both;
}

.ev-sticky-when {
  font-size: var(--text-sm);
  color: var(--ev-ink-soft);
  white-space: nowrap;
}

/* A lift inside a container this tight reads as jitter, so the sticky button
   changes fill only. */
.ev-sticky .ev-btn { padding: 11px 22px; }

.ev-sticky .ev-btn--solid:hover { transform: none; }

@keyframes evRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================================
   11. REVEAL
   ============================================================================ */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible { opacity: 1; transform: none; }

/* All of the above is decoration. Without JS, or with reduced motion asked for,
   the page has to read exactly the same. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ev-timeline::before { transform: scaleY(1); transition: none; }
  .ev-seats-fill { transition: none; }
  .ev-cd-n.is-tick { transform: none; }
  .ev-sticky { animation: none; }
  .ev-mat:hover, .ev-submit:hover, .ev-btn--solid:hover { transform: none; }
}

/* ============================================================================
   12. RESPONSIVE
   ============================================================================ */

@media (max-width: 1040px) {
  /* minmax(0,...) not 1fr: a bare 1fr track keeps min-width:auto, so one wide
     child (the faces strip) dragged the entire column past the viewport and
     html{overflow-x:hidden} silently clipped the right side of the page. */
  .ev-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .ev-hero-left { max-width: none; }
  .ev-card { max-width: 560px; }
  #ev-hero { min-height: 0; padding-top: var(--space-8); }
  .ev-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .scene { padding: var(--space-8) 0; }

  /* About 30px off the old 104px, no more. Enough to bring the countdown
     labels above the sticky bar, not so much that the form card climbs into
     the viewport and shows white around it. */
  #ev-hero { padding-top: calc(var(--space-8) + 10px); }
  .ev-facts { grid-template-columns: 1fr; }
  .ev-row { grid-template-columns: 1fr; }
  .ev-card { padding: var(--space-5); }
  .ev-countdown { gap: var(--space-5); flex-wrap: wrap; }

  /* 7 x 38 + gaps + border = 274, inside 342 of usable width at 390px. */
  .ev-face { width: 38px; height: 38px; }
  .ev-faces-row { flex-wrap: wrap; }

  /* Two speakers per row. One per row meant seven full screens of scrolling
     to read a list whose whole job is to be taken in at a glance. */
  .ev-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
  }
  .ev-p-photo,
  .ev-p-mono,
  .ev-p-plate { max-width: none; }
  .ev-p-mono { font-size: 1.8rem; }
  .ev-p-name { font-size: var(--text-base); }
  .ev-p-title { font-size: 13px; }

  /* The desktop card holds a fixed height so the three sit level. Stacked,
     that is just empty space above each title. */
  .ev-mat {
    min-height: 0;
    gap: var(--space-3);
  }
  .ev-mat-body { margin-top: 0; }
  .ev-timeline li { grid-template-columns: 58px 1fr; gap: var(--space-3); }
  /* No left gutter on a phone, so the mark grows right instead of left. */
  /* Both, always: the wrapper sets the layout footprint, .ev-logo sets what is
     painted. Dropping the second one left the 88px desktop mark scaling to
     176px inside a 64px box, which pushed the artwork up under the nav. */
  .ev-logo-wrap { width: 64px; height: 64px; }
  .ev-logo { width: 64px; height: 64px; }

  /* Full-bleed on a phone, flush to the bottom edge with a top hairline, the
     way #top-nav is built. Inset by 12px it left a strip of the white form
     card showing down each side once the card climbed into view. */
  .ev-sticky {
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    padding: 12px var(--container-pad);
    border-width: 1px 0 0;
  }
  .ev-sticky-when { display: none; }
  .ev-sticky .ev-btn { flex: 1; justify-content: center; }
}