/* ==========================================================================
   Instant Flame Speed Dating — demo styles
   Warm romantic editorial: charcoal-ember dark ↔ cream, flame-gradient accents.
   ========================================================================== */

/* Tokens and the button system live in base.css, which every page loads first
   — including the standalone pages that never load this file. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; background: var(--ink-deep); }
html, body { overflow-x: hidden; }

body {
  margin: 0 auto;
  max-width: var(--shell);
  font-family: "Lora", Georgia, serif;
  color: var(--ink);
  background: var(--ink-dark);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }

/* The gutter is width, not padding: several rows carry a second class that
   sets `padding` as a shorthand (.hero-inner, .ignite-inner), which would zero
   a horizontal padding here and put the text flush against the column edge. */
.wrap { width: min(calc(var(--shell) - 2 * var(--gutter)), 92vw); margin: 0 auto; }
.wrap-narrow { width: min(820px, 92vw); }

h1, h2, h3, h4 { font-family: "Playfair Display", Georgia, serif; font-weight: 600; margin: 0; line-height: 1.12; }

.center { text-align: center; }

/* ---------- shared decorative bits ---------- */
.script-eyebrow {
  font-family: "Dancing Script", cursive;
  font-size: 1.9rem;
  color: var(--brick);
  margin: 0 0 .3rem;
  line-height: 1;
}
.script-eyebrow.light { color: var(--orange); }

.section-title {
  font-size: clamp(2rem, 4.4vw, 3rem);
  color: var(--brick);
  letter-spacing: .2px;
}
.section-title.light { color: var(--cream-txt); }

.flame-text {
  background: var(--flame);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hairline {
  display: block;
  width: 78px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 1.1rem 0;
}
.center .hairline, .hairline.center { margin-left: auto; margin-right: auto; }

.lead { font-size: 1.12rem; color: var(--ink-mut); }

/* ============================ HEADER ============================ */
.site-header {
  position: fixed;
  /* Fixed positions against the window, not the 1200px column, so pin it to
     both edges and let `margin: auto` centre it over the page. */
  inset: 0 0 auto 0;
  width: min(100%, var(--shell));
  margin: 0 auto;
  z-index: 50;
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding: .55rem 0;
}
.site-header.solid {
  background: rgba(var(--ink-dark-rgb), .95);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.8);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-mark { display: block; height: 48px; width: auto; }
.site-footer .brand-mark { height: 42px; }
.brand-words { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cream-txt);
}
.brand-name b { color: var(--orange); font-weight: 700; }
.brand-tag {
  font-family: "Lora", serif;
  font-size: .58rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--cream-mut);
  margin-top: 4px;
}

.main-nav { display: flex; align-items: center; gap: 1.9rem; }
.nav-link {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-txt);
  text-decoration: none;
  transition: color .2s ease;
}
.nav-link:hover { color: var(--orange); }
.nav-cta { color: #fff; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.hamburger span {
  width: 26px; height: 2px; background: var(--cream-txt);
  transition: transform .25s ease, opacity .25s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================= HERO ============================= */
.hero {
  position: relative;
  /* Height tracks the hero photo's ~2:1 proportion (not the window height),
     so the image stays in proportion instead of over-zooming. The photo is as
     wide as the column, so the ceiling is half the column, not half the
     window — past 1200px the window keeps growing and the photo does not. */
  min-height: clamp(560px, 50vw, calc(var(--shell) / 2));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink-dark);
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--ink-deep-rgb), .9) 0%, rgba(var(--ink-deep-rgb), .55) 42%, rgba(var(--ink-deep-rgb), .15) 72%, rgba(var(--ink-deep-rgb), .35) 100%),
    linear-gradient(0deg, rgba(var(--ink-deep-rgb), .6), rgba(var(--ink-deep-rgb), 0) 40%);
}
.hero-inner { position: relative; z-index: 2; padding: 8rem 0 5rem; }
.hero-copy { max-width: 620px; }
.hero-title {
  font-size: clamp(2.7rem, 6.6vw, 4.9rem);
  color: var(--cream-2);
  letter-spacing: .5px;
}
.hero-title span { display: block; }
.hero-title em {
  display: block;
  font-style: italic;
  background: var(--flame);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  margin: 1.6rem 0 2.2rem;
  font-size: 1.22rem;
  color: var(--cream-txt);
  letter-spacing: .02em;
}

/* ======================== THE NEXT SPARK ======================= */
.spark {
  background: var(--ink-dark);
  /* Even top and bottom. The card used to sit flush to the panel's top edge and
     pull up into the hero photo on a negative margin, which left it with 4.5rem
     of air beneath and none above. */
  padding: 4.5rem 0;
  position: relative;
}
.spark-card {
  background: var(--cream);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line-strong);
}
.spark-card::before {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.spark-media img { height: 100%; width: 100%; object-fit: cover; }
.spark-body { padding: 2.8rem clamp(1.6rem, 4vw, 3rem); align-self: center; }
.spark-date {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  color: var(--ink);
  margin: .2rem 0 .8rem;
}
.spark-where { font-size: 1.14rem; color: var(--ink-mut); margin: 0; }
.spark-note {
  color: var(--brick);
  font-style: italic;
  font-size: 1.1rem;
  margin: 0 0 1.6rem;
}

/* ========================= EXPERIENCE ========================== */
.experience {
  background: var(--cream);
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}
.experience .section-title { margin-bottom: 3rem; }
.exp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.exp-cell {
  text-align: center;
  padding: 0 1.6rem;
  position: relative;
}
.exp-cell + .exp-cell::before {
  content: "";
  position: absolute; left: 0; top: 8%; bottom: 8%;
  width: 1px; background: var(--line-strong);
}
.exp-num {
  font-family: "Playfair Display", serif;
  font-size: 2.1rem;
  color: var(--brick);
  display: block;
}
.exp-icon { display: inline-flex; margin: .7rem 0 1rem; }
.exp-icon img { width: 60px; height: 60px; object-fit: contain; }
.exp-label {
  font-family: "Lora", serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .92rem;
  color: var(--ink);
  margin-bottom: .7rem;
  min-height: 2.3em;
}
.exp-text { font-size: .96rem; color: var(--ink-mut); margin: 0; }

/* ====================== HOW THE EVENING WORKS ================== */
.evening {
  background: var(--ink-dark);
  color: var(--cream-txt);
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  position: relative;
}
.evening .section-title { margin-bottom: 3rem; }
.steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  counter-reset: none;
}
.step {
  background: var(--ink-dark-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  position: relative;
}
.step-num {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  background: var(--flame);
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  margin-bottom: 1.1rem;
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(var(--red-rgb), .7);
}
.step-title { font-size: 1.28rem; color: var(--cream-2); margin-bottom: .55rem; }
.step-text { font-size: .96rem; color: var(--cream-mut); margin: 0; }

/* =========================== PRIVACY =========================== */
.privacy {
  background: var(--cream);
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
}
.privacy-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.privacy-copy .section-title { margin-bottom: 1.2rem; }
.privacy-copy .lead { margin-bottom: 1.6rem; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: .95rem;
  color: var(--brick);
  font-size: 1.04rem;
}
.check-list li::before {
  content: "";
  position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--brick);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238f2f2a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/13px no-repeat;
}
.privacy-media img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--line-strong);
}

.welcome-band {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--line-bold);
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
  position: relative;
}
.welcome-band::before {
  content: "";
  position: absolute; inset: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.welcome-title { font-size: clamp(1.5rem, 3.4vw, 2.15rem); color: var(--brick); margin-bottom: .7rem; }
.welcome-text { font-size: 1.1rem; color: var(--ink-mut); max-width: 640px; margin: 0 auto; }

/* ============================ EVENTS =========================== */
.events {
  background: var(--ink-dark);
  color: var(--cream-txt);
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}
.events .section-title { margin-bottom: 3rem; }
.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.event-card {
  background: var(--ink-dark-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.1rem 1.8rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.event-card.featured {
  border-color: rgba(var(--orange-rgb), .55);
  box-shadow: 0 24px 60px -30px rgba(var(--red-rgb), .6);
  background: linear-gradient(180deg, rgba(var(--orange-rgb), .09), var(--ink-dark-2));
}
.event-flag {
  position: absolute; top: -12px; left: 1.8rem;
  background: var(--flame);
  color: #fff;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: .35em .9em;
  border-radius: var(--radius-pill);
}
.event-date {
  font-family: "Dancing Script", cursive;
  font-size: 1.5rem;
  color: var(--orange);
  margin: 0 0 .2rem;
}
.event-date.event-soldout {
  font-family: "Lora", serif;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--warn);
  font-weight: 600;
}
.event-name { font-size: 1.5rem; color: var(--cream-2); margin-bottom: .4rem; }
.event-meta { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--cream-mut); margin: 0 0 1rem; }
.event-text { font-size: .97rem; color: var(--cream-mut); margin: 0 0 1.6rem; flex: 1; }
.event-card .btn { align-self: flex-start; }

/* ============================= FAQ ============================= */
.faq-section {
  background: var(--cream);
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}
.faq-section .section-title { margin-bottom: 2.4rem; }
.faq {
  border-bottom: 1px solid var(--line-bold);
}
.faq:first-of-type { border-top: 1px solid var(--line-bold); }
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 1.35rem 2.5rem 1.35rem 0;
  font-family: "Playfair Display", serif;
  font-size: 1.22rem;
  color: var(--ink);
  position: relative;
}
.faq-q::after {
  content: "+";
  position: absolute; right: .2rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  color: var(--brick);
  transition: transform .25s ease;
  font-family: "Lora", serif;
}
.faq.open .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { margin: 0 0 1.35rem; color: var(--ink-mut); font-size: 1.02rem; }

/* =========================== RESERVE =========================== */
.reserve {
  background: var(--ink-dark);
  color: var(--cream-txt);
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}
.reserve .section-title { margin-bottom: 1rem; }
.reserve-lead { text-align: center; color: var(--cream-mut); max-width: 620px; margin: 0 auto 2.6rem; }
.reserve-form {
  background: var(--ink-dark-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.8rem);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field { display: block; margin-bottom: 1.2rem; }
.field > span {
  display: block;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-mut);
  margin-bottom: .45rem;
}
.field > span em { text-transform: none; letter-spacing: 0; color: var(--cream-mut); font-style: italic; }
.field input, .field select, .field textarea {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-mid);
  border-radius: var(--radius-sm);
  padding: .8rem .9rem;
  color: var(--cream-txt);
  font-family: "Lora", serif;
  font-size: 1rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(255,255,255,.06);
}
.field select { appearance: none; padding-right: 2.4rem; }
/* The closed box is ours to style; the OPEN dropdown list is drawn by the
   operating system. Left alone it comes up white while the options keep
   inheriting this page's pale cream text, which is unreadable. color-scheme
   tells the browser to draw its native list dark, and the explicit option
   colours cover the browsers that ignore it. */
.field select { color-scheme: dark; }
.field select option { background: var(--ink-dark-2); color: var(--cream-txt); }
/* `appearance: none` takes the native arrow with it, so a select reads as a
   text box — and beside a real one (State next to ZIP) nobody knows to tap it.
   This is the arrow, drawn as a rotated corner so it stays CSS and inherits
   the field's own gold. */
.field:has(select) { position: relative; }
.field:has(select)::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  bottom: 1.4rem;
  width: .45rem;
  height: .45rem;
  border-right: 2px solid var(--line-bold);
  border-bottom: 2px solid var(--line-bold);
  transform: rotate(45deg);
  pointer-events: none;
}
/* One height for every single-line control, so a field's type and whether it
   has been filled in stop deciding how tall it is. Only a date input needs
   this, but pinning the shared rule is what guarantees it matches the text
   field beside it in a .field-row rather than landing near it. */
.field input:not([type="checkbox"]):not([type="radio"]), .field select { height: 3rem; }
/* Mobile WebKit/Blink render a date input from its own inner editor: taller
   than a text field once it holds a value, and — with nothing typed yet and no
   "mm/dd/yyyy" of their own to fill it — collapsed to bare padding, which is
   why the empty Birthdate box read shorter than every field around it. The
   height above settles both; these only fix alignment inside it. The zeroed
   margin is what stops iOS centring the value against a fixed height. */
.field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.reserve-form .btn { margin-top: .6rem; }
.form-success {
  display: none;
  margin: 1.2rem 0 0;
  color: var(--orange);
  font-size: 1rem;
}

/* ===================== IGNITE / EMAIL CTA ===================== */
.ignite {
  background: var(--flame);
  color: #fff;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  position: relative;
  overflow: hidden;
}
/* Two shading stops over the flame gradient — a highlight top-right, a scorch
   bottom-left. White and a deep scorch red, both compositing values rather
   than palette colours, which is why neither is a token. */
.ignite::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 30%, rgba(255, 255, 255, .22), transparent 45%),
              radial-gradient(circle at 20% 80%, rgba(120, 20, 10, .35), transparent 50%);
  pointer-events: none;
}
.ignite-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
.ignite-title { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.ignite-title em { font-family: "Dancing Script", cursive; font-style: normal; }
.ignite-text { margin: .6rem 0 0; font-size: 1.1rem; opacity: .95; }
.ignite-form { display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: start; }
.ignite-form input {
  grid-column: 1;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  color: #fff;
  font-family: "Lora", serif;
  font-size: 1rem;
}
.ignite-form input::placeholder { color: rgba(255,255,255,.8); }
.ignite-form input:focus { outline: none; border-color: #fff; background: rgba(255,255,255,.24); }
.ignite-form .btn { grid-column: 2; grid-row: 1; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; }
.ignite-fine { grid-column: 1 / -1; margin: 0; font-size: .8rem; opacity: .82; }
.ignite-form .form-success { grid-column: 1 / -1; color: #fff; }
/* Scoped rather than global: .form-error already exists in flow.css, which the
   homepage doesn't load. Both states sit in the form's own grid row so neither
   one shifts the layout when it appears. */
.ignite-form .form-error {
  grid-column: 1 / -1;
  display: none;
  margin: .2rem 0 0;
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
}

/* ============================ FOOTER =========================== */
.site-footer { background: var(--ink-black); color: var(--cream-mut); padding: 3.5rem 0 2rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-faint);
}
.footer-brand .brand { margin-bottom: 1rem; }
.footer-tag { font-size: .95rem; max-width: 260px; margin: 0; }
.footer-col h4 {
  font-family: "Lora", serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  color: var(--orange);
  margin-bottom: 1rem;
}
.footer-col a { display: block; color: var(--cream-mut); text-decoration: none; font-size: .95rem; margin-bottom: .6rem; transition: color .2s ease; }
.footer-col a:hover { color: var(--cream-txt); }
.footer-note { font-size: .9rem; margin: 0 0 1.1rem; }
.socials { display: flex; gap: .75rem; }
/* scoped under .socials so these outrank the `.footer-col a` rule
   (higher specificity) — otherwise `display:block` from that rule wins and
   the glyph is pinned top-left instead of centered. */
.socials .social {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--cream-txt);
  background: var(--ink-dark-2);
  transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.socials .social svg { display: block; width: 20px; height: 20px; }
.socials .social:hover {
  transform: translateY(-3px);
  color: #fff;
  border-color: transparent;
  background: var(--flame);
  box-shadow: 0 14px 26px -12px rgba(var(--red-rgb), .85);
}
.socials .social:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.footer-bottom {
  padding-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .82rem;
}
.footer-bottom p { margin: 0; }
/* The flow pages (signup, waitlist, confirmed) end on a single centred credit
   line rather than the full footer grid, so there is no grid above it for the
   rule to divide. Three pages were each carrying this as an inline style. */
.footer-bottom.bare { border-top: 0; justify-content: center; text-align: center; }

/* =================== EVENTS "VIEW ALL" LINK ==================== */
.events-more { text-align: center; margin-top: 2.6rem; }

/* ================ EVENTS PAGE (standalone schedule) =========== */
.events-hero {
  background: var(--ink-dark);
  color: var(--cream-txt);
  padding: 9rem 0 2.5rem;
  text-align: center;
}
.events-hero .section-title { margin-bottom: 1rem; }
.events-hero-sub {
  max-width: 660px;
  margin: 0 auto;
  color: var(--cream-mut);
  font-size: 1.08rem;
}
.events-hero-sub em { color: var(--orange); font-style: italic; }

.schedule {
  background: var(--ink-dark);
  color: var(--cream-txt);
  padding: 1rem 0 clamp(3.5rem, 8vw, 6rem);
}
.schedule-list { display: grid; gap: 1.3rem; }
.schedule-empty { text-align: center; color: var(--cream-mut); font-style: italic; padding: 2.5rem 0; }
.schedule-empty-cta { text-align: center; margin: 0 0 2.5rem; }
/* The homepage grid is a grid; an empty-state line has to span it rather than
   sit in the first column. */
.events-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--cream-mut);
  font-style: italic;
  padding: 2.5rem 0 0;
  margin: 0;
}
.events-empty-cta { grid-column: 1 / -1; justify-self: center; margin-top: 1.6rem; }

.sched-item {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: clamp(1.1rem, 3vw, 2rem);
  align-items: center;
  background: var(--ink-dark-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem clamp(1.3rem, 3vw, 2rem);
  position: relative;
}
.sched-item.is-next {
  border-color: rgba(var(--orange-rgb), .55);
  box-shadow: 0 24px 60px -30px rgba(var(--red-rgb), .6);
  background: linear-gradient(180deg, rgba(var(--orange-rgb), .09), var(--ink-dark-2));
}

.sched-date {
  text-align: center;
  border-right: 1px solid var(--line-mid);
  padding-right: clamp(1.1rem, 3vw, 2rem);
}
.sched-dow {
  display: block;
  font-family: "Dancing Script", cursive;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--orange);
}
.sched-day {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 2.9rem;
  line-height: 1;
  margin: .1rem 0 .15rem;
  color: var(--cream-2);
}
.sched-mon {
  display: block;
  font-size: .76rem;
  line-height: 1.35;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-mut);
}
.sched-time { display: block; margin-top: .5rem; font-size: .82rem; color: var(--cream-mut); }

.sched-flag {
  display: inline-block;
  background: var(--flame);
  color: #fff;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: .3em .85em;
  border-radius: var(--radius-pill);
  margin-bottom: .6rem;
}
.sched-place { font-size: 1.55rem; color: var(--cream-2); margin: 0 0 .3rem; }
.sched-meta {
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 .7rem;
}
.sched-soldout { color: var(--warn); font-weight: 600; }
/* Venue + street address, under the town line. Quieter than the meta row
   above it: it's the detail you read once you've decided you're interested. */
.sched-where { font-size: .92rem; color: var(--cream-2); margin: -.35rem 0 .6rem; }
.sched-blurb { font-size: .98rem; color: var(--cream-mut); margin: 0; }
.sched-action .btn { white-space: nowrap; }

.schedule-cta {
  margin-top: 2.8rem;
  text-align: center;
  padding-top: 2.4rem;
  border-top: 1px solid var(--line);
}
.schedule-cta p { color: var(--cream-mut); margin: 0 0 1.2rem; }
/* The mailing-list form on /events. The homepage's .ignite-form sits on the
   flame gradient and is styled white-on-warm; this one is on the dark page, so
   it borrows the .field input treatment instead of that. */
.cta-form { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; align-items: start; }
.cta-form input {
  flex: 1 1 260px;
  max-width: 340px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-mid);
  border-radius: var(--radius-sm);
  padding: .8rem .9rem;
  color: var(--cream-txt);
  font-family: "Lora", serif;
  font-size: 1rem;
}
.cta-form input::placeholder { color: var(--cream-mut); opacity: .75; }
.cta-form input:focus { outline: none; border-color: var(--orange); background: rgba(255,255,255,.06); }
/* Both states take a full row so neither one reflows the input and button. */
.cta-form .form-success { flex-basis: 100%; margin: .4rem 0 0; }
.cta-form .form-error { flex-basis: 100%; display: none; margin: .4rem 0 0; color: var(--warn); font-size: .95rem; }

/* ========================= REVEAL ANIM ========================= */
.js-reveal .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js-reveal .reveal.in { opacity: 1; transform: none; }

/* =========================== RESPONSIVE =======================
   Four widths, widest first, each one declared once. They are listed in
   base.css with what each is for. Ordering matters: a narrower block has to
   come after a wider one, because at 500px both apply and the later rule wins.
   ============================================================== */
@media (max-width: 900px) {
  .sched-item { grid-template-columns: 112px 1fr; }
  .sched-action { grid-column: 2; justify-self: start; }

  .exp-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1rem; }
  .exp-cell + .exp-cell::before { display: none; }
  .steps { grid-template-columns: 1fr 1fr; }
  .event-grid { grid-template-columns: 1fr; }
  .spark-card { grid-template-columns: 1fr; }
  .spark-media { height: 240px; }
  .privacy-inner { grid-template-columns: 1fr; }
  .privacy-media { order: -1; }
  .ignite-inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    /* An ancestor backdrop-filter (.site-header.solid) makes the header the
       containing block for this fixed drawer, so `inset` alone clips it to the
       header's height. Pin an explicit full-viewport height so it always fills
       the screen. */
    height: 100vh;
    height: 100dvh;
    width: min(320px, 82vw);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.6rem;
    /* Fully opaque, not .98 — at that alpha the hero photo still ghosts through
       behind the links. The blur went with it: it only ever existed to soften
       what showed through, and nothing does now. */
    background: var(--ink-black);
    padding: 2rem 2.2rem;
    transform: translateX(100%);
    transition: transform .3s ease;
    box-shadow: -20px 0 50px -20px rgba(0,0,0,.8);
  }
  .main-nav.open { transform: none; }
  .nav-link { font-size: 1rem; }
  .nav-cta { margin-top: .5rem; }
  .hamburger { display: flex; z-index: 60; }
  /* Mobile hero uses a dedicated portrait photo (swapped via <picture>).
     The couple fills the upper half and the frame fades to black at the
     bottom, so we drop the copy into that dark band and bias the crop
     upward to keep both faces in view. */
  .hero { min-height: 70vh; align-items: flex-end; }
  .hero-bg img { object-position: center 28%; }
  .hero-scrim {
    background: linear-gradient(0deg,
      rgba(var(--ink-deep-rgb), .92) 0%, rgba(var(--ink-deep-rgb), .6) 30%,
      rgba(var(--ink-deep-rgb), .05) 56%, rgba(var(--ink-deep-rgb), .45) 100%);
  }
  .hero-inner { padding: 4rem 0 3rem; }
  .hero-title { font-size: clamp(2.1rem, 8.6vw, 4.9rem); }
  .section-title { font-size: clamp(1.7rem, 7vw, 3rem); }
  .field-row { grid-template-columns: 1fr; }
  /* Condense the Experience steps into a compact horizontal list on mobile
     (icon left; number, label, text stacked right) instead of tall centered
     blocks, so the section doesn't eat the whole screen. */
  .experience { padding: clamp(2.5rem, 8vw, 4rem) 0; }
  .experience .section-title { margin-bottom: 1.8rem; }
  .exp-grid { grid-template-columns: 1fr; gap: 0; }
  .exp-cell {
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: 1.1rem;
    row-gap: .15rem;
    align-items: center;
    text-align: left;
    padding: 1.15rem 0;
  }
  .exp-cell + .exp-cell { border-top: 1px solid var(--line-mid); }
  .exp-icon { grid-column: 1; grid-row: 1 / span 3; align-self: center; margin: 0; }
  .exp-icon img { width: 46px; height: 46px; }
  .exp-num { grid-column: 2; grid-row: 1; font-size: 1rem; line-height: 1; margin: 0; }
  .exp-label { grid-column: 2; grid-row: 2; min-height: 0; margin: .1rem 0 .15rem; }
  .exp-text { grid-column: 2; grid-row: 3; font-size: .92rem; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .ignite-form { grid-template-columns: 1fr; }
  .ignite-form .btn { grid-column: 1; grid-row: auto; }
}

@media (max-width: 620px) {
  .sched-item { grid-template-columns: 1fr; text-align: center; }
  .sched-date {
    border-right: 0;
    border-bottom: 1px solid var(--line-mid);
    padding: 0 0 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: .5rem;
  }
  .sched-time { flex-basis: 100%; margin-top: .1rem; }
  .sched-action { grid-column: 1; justify-self: stretch; }
  .sched-action .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}