/* ==========================================================================
   FINE ART PRODUCTION — Editorial layer
   The visual system described by the client's final scripts:
   one idea per screen, generous negative space, champagne-gold accents,
   restrained motion, headlines no longer than four lines.

   The single rule everything below obeys: a photograph is never veiled.
   Type either sits on solid ground beside the picture, or in the bottom
   corner behind a gradient that touches only the lower third. Nothing is
   darkened just to make words legible.
   ========================================================================== */

.ed {
  --ed-gold: #c9a86b;
  --ed-rule: var(--border);
}
:root[data-theme="dark"] .ed { --ed-gold: #d9bd85; }

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */
.ed-section {
  padding-block: clamp(2.5rem, 5.5vh, 4.5rem);
  padding-inline: var(--gutter);
}
.ed-section--tight { padding-block: clamp(1.75rem, 3.5vh, 3rem); }
.ed-section--flush { padding-inline: 0; }
.ed-wrap { width: 100%; max-width: 1440px; margin-inline: auto; }
.ed-wrap--narrow { max-width: 980px; }

/* The one piece of chrome on the page: a small, widely tracked label. */
.ed-tag {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ed-tag--gold { color: var(--ed-gold); }

/* Headline scale. Capped so four lines still fit a phone screen. */
.ed-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 5.6vw, 5.4rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.032em;
  max-width: 17ch;
}
.ed-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 4.2vw, 3.9rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.028em;
  max-width: 19ch;
}
.ed-h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.ed-h1 em, .ed-h2 em, .ed-h3 em { font-style: italic; color: var(--ed-gold); }

.ed-lead {
  max-width: 54ch;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.85;
  color: var(--text-soft);
}
.ed-lead + .ed-lead { margin-top: 1.1em; }

/* The one action per screen. */
.ed-action {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  font-family: var(--font-sans);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--border-strong);
  transition: gap 0.45s var(--ease-out), border-color 0.45s var(--ease-out), color 0.45s var(--ease-out);
}
.ed-action:hover { gap: 1.5em; color: var(--ed-gold); border-bottom-color: var(--ed-gold); }
.ed-action svg { width: 1em; height: 1em; flex: none; }
.ed-action--light { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.45); }
.ed-action--light:hover { color: #fff; border-bottom-color: #fff; }

/* --------------------------------------------------------------------------
   Hero — one full-bleed frame, type held in the lower corner
   -------------------------------------------------------------------------- */
.ed-hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--ink-900);
  padding: var(--gutter);
  padding-bottom: clamp(2.5rem, 8vh, 5rem);
}
.ed-hero--short { min-height: 86svh; }

.ed-hero__media { position: absolute; inset: 0; z-index: -2; }
/* Every photograph is served as WebP with a JPEG fallback, which means each
   one is wrapped in <picture>. A picture is inline by default, so it would
   break any layout that sizes the <img> directly - percentage heights, grid
   and flex items alike. display:contents removes the wrapper's own box
   entirely, so the <img> is laid out exactly as it was before the wrap. */
/* The picture rule lives in style.css, which every page loads. */
.ed-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A single, very slow drift. Motion is used sparingly by instruction. */
  animation: edDrift 26s var(--ease-in-out) infinite alternate;
}
@keyframes edDrift {
  from { transform: scale(1.03); }
  to   { transform: scale(1.11); }
}
@media (prefers-reduced-motion: reduce) { .ed-hero__media img { animation: none; } }

/* Three directional gradients, never a flat veil: one bottom-weighted for
   the headline, one down the left edge so the type column has ground while
   the subject stays clean, and a shallow one at the very top so the
   transparent header stays legible. The centre of the picture is untouched. */
.ed-hero__media::after,
.ed-panel__media::after,
.ed-close__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(12, 10, 8, 0.88) 0%,
      rgba(12, 10, 8, 0.55) 22%,
      rgba(12, 10, 8, 0.14) 42%,
      rgba(12, 10, 8, 0) 62%),
    linear-gradient(to right,
      rgba(12, 10, 8, 0.6) 0%,
      rgba(12, 10, 8, 0.28) 26%,
      rgba(12, 10, 8, 0) 52%),
    linear-gradient(to bottom,
      rgba(12, 10, 8, 0.55) 0%,
      rgba(12, 10, 8, 0.18) 8%,
      rgba(12, 10, 8, 0) 17%);
}
/* On a phone the type spans the full width, so the side gradient is dropped
   and the bottom one carries everything. */
@media (max-width: 700px) {
  .ed-hero__media::after,
  .ed-panel__media::after,
  .ed-close__media::after {
    background:
      linear-gradient(to top,
        rgba(12, 10, 8, 0.92) 0%,
        rgba(12, 10, 8, 0.62) 28%,
        rgba(12, 10, 8, 0.18) 50%,
        rgba(12, 10, 8, 0) 70%),
      linear-gradient(to bottom,
        rgba(12, 10, 8, 0.55) 0%,
        rgba(12, 10, 8, 0.15) 10%,
        rgba(12, 10, 8, 0) 20%);
  }
}

.ed-hero__inner { position: relative; width: 100%; max-width: 1440px; margin-inline: auto; }
.ed-hero__names {
  display: block;
  margin-bottom: clamp(1rem, 2.5vh, 1.6rem);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.ed-hero h1 { color: #fff; text-wrap: balance; }
.ed-hero__sub {
  margin-top: clamp(1.25rem, 3vh, 1.9rem);
  max-width: 50ch;
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.82);
}
.ed-hero__cta { margin-top: clamp(1.75rem, 4vh, 2.75rem); }

.ed-hero__scroll {
  position: absolute;
  right: 0;
  bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.ed-hero__scroll i {
  display: block;
  width: 46px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  transform-origin: left;
  animation: edScrollLine 2.8s var(--ease-in-out) infinite;
}
@keyframes edScrollLine {
  0%, 100% { transform: scaleX(0.3); opacity: 0.4; }
  50%      { transform: scaleX(1);   opacity: 1; }
}
@media (max-width: 860px) { .ed-hero__scroll { display: none; } }
@media (prefers-reduced-motion: reduce) { .ed-hero__scroll i { animation: none; } }

/* --------------------------------------------------------------------------
   Statement — words on solid ground, nothing competing
   -------------------------------------------------------------------------- */
.ed-say { display: grid; gap: clamp(1.5rem, 4vh, 2.5rem); }
.ed-say--center { justify-items: center; text-align: center; }
.ed-say--center .ed-h2, .ed-say--center .ed-lead { margin-inline: auto; }

/* Two columns: the headline holds one side, the paragraph the other. */
.ed-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 900px) { .ed-split { grid-template-columns: 1fr; gap: 1.75rem; } }
.ed-split__aside { display: grid; gap: clamp(1.25rem, 3vh, 2rem); }

/* --------------------------------------------------------------------------
   Plates — one horizontal frame, then two verticals
   -------------------------------------------------------------------------- */
.ed-figure { position: relative; overflow: hidden; background: var(--bg-alt); }
.ed-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-out);
}
.ed-figure:hover img { transform: scale(1.035); }

.ed-figure figcaption {
  margin-top: 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ed-wide { aspect-ratio: 16 / 9; }
.ed-tall { aspect-ratio: 4 / 5; }
.ed-mid  { aspect-ratio: 3 / 2; }
.ed-sq   { aspect-ratio: 1 / 1; }
@media (max-width: 700px) { .ed-wide { aspect-ratio: 4 / 3; } }

.ed-verticals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: clamp(0.75rem, 2vw, 1.5rem);
}

/* --------------------------------------------------------------------------
   Duo — the contrast pair the scripts keep asking for
   (one directed frame beside one unguarded one)
   -------------------------------------------------------------------------- */
.ed-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.75rem, 2.5vw, 2rem);
  align-items: center;
}
@media (max-width: 780px) { .ed-duo { grid-template-columns: 1fr; } }
.ed-duo .ed-figure:nth-child(2) { margin-top: clamp(0rem, 6vw, 4rem); }
@media (max-width: 780px) { .ed-duo .ed-figure:nth-child(2) { margin-top: 0; } }

/* --------------------------------------------------------------------------
   Figures — understated numerals, never a badge wall
   -------------------------------------------------------------------------- */
.ed-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  padding-block: clamp(2.5rem, 6vh, 4rem);
  border-block: 1px solid var(--ed-rule);
}
@media (max-width: 720px) { .ed-figures { grid-template-columns: 1fr; gap: 2rem; text-align: center; } }
.ed-figures b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 300;
  line-height: 1;
  color: var(--text);
}
.ed-figures span {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--font-sans);
  font-size: 0.56rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Verified review excerpts — every quote carries its proof
   -------------------------------------------------------------------------- */
.ed-quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}
@media (max-width: 900px) { .ed-quotes { grid-template-columns: 1fr; } }

.ed-quote {
  display: grid;
  align-content: start;
  gap: 1.1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ed-rule);
}
.ed-quote__stars { font-size: 0.75rem; letter-spacing: 0.28em; color: var(--ed-gold); }
.ed-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: var(--text);
}
.ed-quote__who {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 2;
}
.ed-quote__who b { display: block; font-weight: 500; color: var(--text); }
.ed-quote__src {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--ed-gold);
  transition: color 0.35s var(--ease-out);
}
.ed-quote__src:hover { color: var(--ed-gold); }

/* --------------------------------------------------------------------------
   Film — click to play, so nothing autoplays with sound
   -------------------------------------------------------------------------- */
.ed-film {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink-900);
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
@media (max-width: 640px) { .ed-film { aspect-ratio: 4 / 3; } }
.ed-film img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease-out); }
.ed-film:hover img { transform: scale(1.03); }
.ed-film::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 10, 8, 0.7) 0%, rgba(12, 10, 8, 0.15) 34%, rgba(12, 10, 8, 0) 58%);
}
.ed-film__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.ed-film__play i {
  display: grid;
  place-items: center;
  width: clamp(66px, 7vw, 92px);
  height: clamp(66px, 7vw, 92px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(12, 10, 8, 0.42);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  transition: background 0.5s var(--ease-out), transform 0.5s var(--ease-spring);
}
.ed-film:hover .ed-film__play i { background: rgba(255, 255, 255, 0.92); transform: scale(1.06); }
.ed-film__play svg { width: 26%; height: 26%; margin-left: 9%; color: #fff; transition: color 0.4s; }
.ed-film:hover .ed-film__play svg { color: var(--ink-900); }

.ed-film__meta {
  position: absolute;
  left: clamp(1.1rem, 3vw, 2.25rem);
  right: clamp(1.1rem, 3vw, 2.25rem);
  bottom: clamp(1.1rem, 3vw, 2rem);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  pointer-events: none;
}
.ed-film__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.1vw, 1.8rem);
  font-weight: 300;
  color: #fff;
}
.ed-film__note {
  font-family: var(--font-sans);
  font-size: 0.56rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}
.ed-film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }

/* --------------------------------------------------------------------------
   Panel — a full-bleed campaign frame, type in the lower corner
   -------------------------------------------------------------------------- */
.ed-panel {
  position: relative;
  isolation: isolate;
  min-height: clamp(520px, 84svh, 820px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--ink-900);
  padding: var(--gutter);
  padding-bottom: clamp(2.5rem, 7vh, 4.5rem);
}
.ed-panel__media { position: absolute; inset: 0; z-index: -2; }
.ed-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.ed-panel__inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  display: grid;
  gap: clamp(1.1rem, 3vh, 1.75rem);
}
.ed-panel .ed-tag { color: rgba(255, 255, 255, 0.7); }
.ed-panel .ed-tag--gold { color: var(--ed-gold); }
.ed-panel .ed-h2 { color: #fff; }
.ed-panel .ed-lead { color: rgba(255, 255, 255, 0.82); }

/* The anniversary mark — small, gold, never a coupon */
.ed-mark {
  display: inline-grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 1px solid var(--ed-gold);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.72rem;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--ed-gold);
  text-transform: uppercase;
}
.ed-mark b { display: block; font-size: 1.5rem; font-weight: 300; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   Six-image grid — a curated set, never live-feed chrome
   -------------------------------------------------------------------------- */
.ed-six {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1.2vw, 1rem);
}
@media (max-width: 620px) { .ed-six { grid-template-columns: repeat(2, 1fr); } }
.ed-six a { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; background: var(--bg-alt); }
.ed-six img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), opacity 0.5s; }
.ed-six a:hover img { transform: scale(1.07); opacity: 0.86; }

/* --------------------------------------------------------------------------
   Index rows — galleries, services and locations as a contents list
   -------------------------------------------------------------------------- */
.ed-index { border-top: 1px solid var(--ed-rule); }
.ed-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr minmax(0, 32ch) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: clamp(1.4rem, 3.2vh, 2.3rem);
  border-bottom: 1px solid var(--ed-rule);
  transition: padding-left 0.5s var(--ease-out), background 0.5s var(--ease-out);
}
.ed-row:hover { padding-left: 1rem; }
@media (max-width: 860px) {
  .ed-row { grid-template-columns: 2.5rem 1fr auto; gap: 0.75rem 1rem; }
  .ed-row__text { grid-column: 2 / 4; }
}
.ed-row__no { font-family: var(--font-sans); font-size: 0.58rem; letter-spacing: 0.28em; color: var(--text-muted); }
.ed-row__name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.9vw, 2.3rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--text);
  transition: color 0.4s var(--ease-out);
}
.ed-row:hover .ed-row__name { color: var(--ed-gold); }
.ed-row__text { font-size: 0.92rem; line-height: 1.7; color: var(--text-muted); }
.ed-row__go { color: var(--text-muted); transition: transform 0.45s var(--ease-out), color 0.4s; }
.ed-row:hover .ed-row__go { transform: translateX(9px); color: var(--ed-gold); }
.ed-row__go svg { display: block; width: 1.15rem; height: 1.15rem; }

/* --------------------------------------------------------------------------
   Chapters — the long-form pages (About, Experience) alternate
   a statement against a photograph without ever stacking text on it
   -------------------------------------------------------------------------- */
.ed-chapter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.ed-chapter--flip > .ed-figure { order: -1; }
@media (max-width: 900px) {
  .ed-chapter { grid-template-columns: 1fr; gap: 1.75rem; }
  .ed-chapter--flip > .ed-figure { order: 0; }
}
.ed-chapter__body { display: grid; gap: clamp(1rem, 2.5vh, 1.5rem); }

/* Text-only chapters read as a quiet column, numbered in the margin */
.ed-notes { display: grid; gap: clamp(2.5rem, 6vh, 4.5rem); }
.ed-notes .ed-note {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 720px) { .ed-notes .ed-note { grid-template-columns: 1fr; gap: 0.75rem; } }
.ed-note__no {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  color: var(--ed-gold);
  padding-top: 0.7em;
}
.ed-note__body { display: grid; gap: 0.9rem; }

/* --------------------------------------------------------------------------
   Close — one atmospheric frame, then the invitation
   -------------------------------------------------------------------------- */
.ed-close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-900);
  min-height: clamp(560px, 86svh, 860px);
  display: grid;
  align-items: end;
  padding: var(--gutter);
  padding-bottom: clamp(3rem, 8vh, 5rem);
}
.ed-close__media { position: absolute; inset: 0; z-index: -2; }
.ed-close__media img { width: 100%; height: 100%; object-fit: cover; }
.ed-close__inner { position: relative; width: 100%; max-width: 1440px; margin-inline: auto; }
.ed-close .ed-h2 { color: #fff; }
.ed-close .ed-lead { color: rgba(255, 255, 255, 0.82); }
.ed-close .ed-tag { color: rgba(255, 255, 255, 0.62); }

/* The four immediate contact methods the scripts require */
.ed-reach {
  display: flex;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  padding-top: clamp(1.5rem, 3vh, 2rem);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.ed-reach a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  transition: color 0.35s var(--ease-out);
}
.ed-reach a:hover { color: var(--ed-gold); }
.ed-reach svg { width: 1.05em; height: 1.05em; flex: none; }
.ed-reach--dark { border-top-color: var(--ed-rule); }
.ed-reach--dark a { color: var(--text-muted); }
.ed-reach--dark a:hover { color: var(--ed-gold); }

/* --------------------------------------------------------------------------
   Locked line — the identity that repeats across every page
   -------------------------------------------------------------------------- */
.ed-trust {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
}
.ed-trust h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2.3rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 28ch;
}
.ed-trust p { max-width: 46ch; color: var(--text-muted); line-height: 1.8; }

/* --------------------------------------------------------------------------
   Form variants used by the editorial pages
   -------------------------------------------------------------------------- */
.btn--full { width: 100%; justify-content: center; }

/* The closing inquiry sits on a photograph, so the form has to carry its own
   contrast rather than relying on the page background. */
.form--ondark { align-content: start; }
.form--ondark .field label { color: rgba(255, 255, 255, 0.72); }
.form--ondark .field input,
.form--ondark .field select,
.form--ondark .field textarea {
  background: rgba(12, 10, 8, 0.42);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}
.form--ondark .field input::placeholder,
.form--ondark .field textarea::placeholder { color: rgba(255, 255, 255, 0.42); }
.form--ondark .field input:focus,
.form--ondark .field select:focus,
.form--ondark .field textarea:focus {
  border-color: var(--ed-gold);
  background: rgba(12, 10, 8, 0.62);
  outline: none;
}
.form--ondark .field select option { background: var(--ink-800); color: #fff; }
.form--ondark .btn { border-color: #fff; color: #fff; }
.form--ondark .btn::before { background: #fff; }
.form--ondark .btn:hover { color: var(--ink-900); }
.form--ondark .form__status { color: rgba(255, 255, 255, 0.8); }

/* --------------------------------------------------------------------------
   The floating Check Your Date pill sits bottom-right on every page, so the
   full-bleed sections keep their own action clear of it on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 780px) {
  .ed-hero, .ed-close, .ed-panel { padding-bottom: 6rem; }
}

/* The short inquiry lives on solid ground under the closing photograph. */
.form--inquiry { gap: clamp(1rem, 2.5vh, 1.5rem); }
@media (max-width: 640px) { .form--inquiry .form__row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Split hero — used where the opening photograph is a portrait and cropping
   it to a letterbox would cut the subject in half. The picture keeps its
   own shape; the words get their own ground beside it.
   -------------------------------------------------------------------------- */
.ed-open {
  display: grid;
  grid-template-columns: 1fr 0.86fr;
  align-items: stretch;
  min-height: 92svh;
  background: var(--bg);
}
@media (max-width: 900px) { .ed-open { grid-template-columns: 1fr; min-height: 0; } }

.ed-open__say {
  display: grid;
  align-content: center;
  gap: clamp(1.25rem, 3vh, 2rem);
  padding: clamp(6rem, 14vh, 9rem) var(--gutter) clamp(3rem, 8vh, 5rem);
}
.ed-open__say > * { max-width: 46ch; }
/* A wider measure and a slightly smaller face so even the longest locked
   headline lands in four lines and the action stays above the fold. */
.ed-open__say .ed-h1 {
  max-width: 21ch;
  font-size: clamp(2.05rem, 4.1vw, 3.9rem);
}

.ed-open__media { position: relative; overflow: hidden; background: var(--bg-alt); }
.ed-open__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .ed-open__media { aspect-ratio: 4 / 5; } }

/* A quiet full-width statement between chapters — the page's breath. */
.ed-breath {
  display: grid;
  gap: clamp(1.25rem, 3vh, 2rem);
  justify-items: center;
  text-align: center;
  max-width: 68ch;
  margin-inline: auto;
}
.ed-breath .ed-h2 { max-width: 22ch; }
.ed-breath .ed-lead { text-align: center; }

/* Chapters stack with a rule between them so ten of them still read as a
   sequence rather than a wall. */
.ed-chapters > * + * {
  margin-top: clamp(3.5rem, 9vh, 7rem);
  padding-top: clamp(3.5rem, 9vh, 7rem);
  border-top: 1px solid var(--ed-rule);
}

/* --------------------------------------------------------------------------
   Stages — the client journey as a numbered sequence. Each stage carries a
   human benefit and a link onward, rather than more explanatory text.
   -------------------------------------------------------------------------- */
.ed-stages { border-top: 1px solid var(--ed-rule); }
.ed-stage {
  display: grid;
  grid-template-columns: 4.5rem 1fr 1.05fr;
  gap: clamp(1rem, 3.5vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2rem, 5vh, 3.5rem);
  border-bottom: 1px solid var(--ed-rule);
  transition: padding-left 0.55s var(--ease-out);
}
.ed-stage:hover { padding-left: 0.9rem; }
@media (max-width: 860px) {
  .ed-stage { grid-template-columns: 1fr; gap: 0.85rem; }
}
.ed-stage__no {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  color: var(--ed-gold);
  padding-top: 0.6em;
}
.ed-stage__label {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ed-stage h3 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.6vw, 2.2rem);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 20ch;
  transition: color 0.4s var(--ease-out);
}
.ed-stage:hover h3 { color: var(--ed-gold); }
.ed-stage__body { display: grid; gap: 1.1rem; justify-items: start; }
.ed-stage__body p { max-width: 48ch; line-height: 1.85; color: var(--text-soft); }

/* A full-width photograph used as a pause between groups of stages. */
.ed-break {
  position: relative;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--ink-900);
}
@media (max-width: 780px) { .ed-break { aspect-ratio: 4 / 3; } }
.ed-break img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Reel — the opening sequence. Five frames that escalate from quiet to
   spectacle, read left to right, scrolling on a phone.
   -------------------------------------------------------------------------- */
.ed-reel {
  display: flex;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  overflow-x: auto;
  padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ed-reel::-webkit-scrollbar { display: none; }
.ed-reel figure {
  position: relative;
  flex: 0 0 auto;
  height: clamp(320px, 56vh, 560px);
  overflow: hidden;
  background: var(--bg-alt);
  scroll-snap-align: center;
}
.ed-reel figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s var(--ease-out); }
.ed-reel figure:hover img { transform: scale(1.04); }
/* Widths widen as the sequence escalates. */
.ed-reel figure:nth-child(1) { width: clamp(200px, 17vw, 300px); }
.ed-reel figure:nth-child(2) { width: clamp(230px, 20vw, 350px); }
.ed-reel figure:nth-child(3) { width: clamp(280px, 26vw, 460px); }
.ed-reel figure:nth-child(4) { width: clamp(320px, 30vw, 540px); }
.ed-reel figure:nth-child(5) { width: clamp(360px, 34vw, 620px); }

/* --------------------------------------------------------------------------
   Sequence — a chapter's four frames: a beginning, an escalation, a breath
   and an ending. Never a masonry wall.
   -------------------------------------------------------------------------- */
.ed-seq { display: grid; gap: clamp(0.75rem, 2vw, 1.5rem); }
.ed-seq__lead { aspect-ratio: 16 / 9; }
@media (max-width: 700px) { .ed-seq__lead { aspect-ratio: 4 / 3; } }
/* Every frame lines up: the pair shares one height, and the ending runs
   the full width of the lead, edge to edge. */
.ed-seq__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  align-items: start;
}
@media (max-width: 700px) { .ed-seq__pair { grid-template-columns: 1fr; } }
.ed-seq__pair .ed-figure { aspect-ratio: 4 / 5; }
.ed-seq__end { width: 100%; aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .ed-seq__end { aspect-ratio: 4 / 3; } }

/* A chapter's heading sits beside its number, above the pictures. */
.ed-cap {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  margin-bottom: clamp(1.75rem, 4vh, 2.75rem);
}
@media (max-width: 700px) { .ed-cap { grid-template-columns: 1fr; gap: 0.6rem; } }
.ed-cap__no {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  color: var(--ed-gold);
  padding-top: 0.8em;
}
.ed-cap__body { display: grid; gap: 0.9rem; justify-items: start; }
.ed-cap__body p { max-width: 52ch; line-height: 1.8; color: var(--text-muted); }

/* The index doubles as the gallery entry point, so it says so rather than
   leaving a bare arrow to be interpreted. */
.ed-row__go { display: inline-flex; align-items: center; gap: 0.9em; white-space: nowrap; }
.ed-row__go i {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.56rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
@media (max-width: 640px) { .ed-row__go i { display: none; } }

/* Once a player is inserted the poster, gradient and chrome step aside. */
.ed-film.is-playing::after,
.ed-film.is-playing .ed-film__play,
.ed-film.is-playing .ed-film__meta { opacity: 0; pointer-events: none; }
.ed-film.is-playing img { opacity: 0; }
.ed-film::after, .ed-film img { transition: opacity 0.4s var(--ease-out); }

/* A film's caption sits under its frame: real title, real place, duration. */
.ed-films { display: grid; gap: clamp(2.5rem, 6vh, 4.5rem); }
.ed-filmcard { display: grid; gap: 1.1rem; }
.ed-filmcard__head { display: grid; gap: 0.6rem; }
.ed-filmcard h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ed-filmcard p { max-width: 56ch; line-height: 1.8; color: var(--text-muted); }
.ed-filmcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.56rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ed-filmcard__meta b { font-weight: 500; color: var(--ed-gold); }

/* --------------------------------------------------------------------------
   Services — each one gets a signature image, a promise, a short
   explanation and a single next action. Never a rate card.
   -------------------------------------------------------------------------- */
.ed-service {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.ed-service--flip > .ed-figure { order: -1; }
@media (max-width: 900px) {
  .ed-service { grid-template-columns: 1fr; gap: 1.75rem; }
  .ed-service--flip > .ed-figure { order: 0; }
}
.ed-service__body { display: grid; gap: clamp(0.9rem, 2.2vh, 1.4rem); justify-items: start; }
.ed-service__body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--text);
  max-width: 18ch;
}
.ed-service__body p { max-width: 50ch; line-height: 1.85; color: var(--text-soft); }

/* An action whose destination the studio has not supplied yet. It reads as
   the same action, but it does not pretend to lead anywhere. */
.ed-action--pending {
  color: var(--text-muted);
  border-bottom-style: dashed;
  border-bottom-color: var(--border-strong);
  cursor: default;
}
.ed-pending-note {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Testimony — a large pull quote beside a quiet portrait. The portrait is
   never darkened to carry the words; the words have their own ground.
   -------------------------------------------------------------------------- */
.ed-testimony {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: center;
}
.ed-testimony--flip > .ed-figure { order: -1; }
@media (max-width: 860px) {
  .ed-testimony { grid-template-columns: 1fr; gap: 1.5rem; }
  .ed-testimony--flip > .ed-figure { order: 0; }
}
.ed-testimony .ed-figure { aspect-ratio: 4 / 5; }
.ed-testimony__body { display: grid; gap: 1.4rem; justify-items: start; }
.ed-testimony blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 2.05rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.44;
  letter-spacing: -0.012em;
  color: var(--text);
  max-width: 26ch;
}
.ed-testimony cite {
  display: grid;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ed-testimony cite b { font-weight: 500; color: var(--text); }

/* Platform links, shown as proof rather than as a badge wall. */
.ed-platforms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(2rem, 5vh, 3rem);
  border-block: 1px solid var(--ed-rule);
}
.ed-platform { display: grid; gap: 0.55rem; align-content: start; }
.ed-platform__name {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 400;
  color: var(--text);
}
.ed-platform__meta {
  font-family: var(--font-sans);
  font-size: 0.56rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ed-platform a {
  justify-self: start;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ed-gold);
  padding-bottom: 0.35em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease-out);
}
.ed-platform a:hover { border-bottom-color: var(--ed-gold); }

/* Recent verified entries: name, date, rating and the reviewer's own headline. */
.ed-verified { border-top: 1px solid var(--ed-rule); }
.ed-verified__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 2rem;
  align-items: baseline;
  padding-block: clamp(1rem, 2.4vh, 1.5rem);
  border-bottom: 1px solid var(--ed-rule);
}
@media (max-width: 720px) { .ed-verified__row { grid-template-columns: 1fr; } }
.ed-verified__title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 300;
  font-style: italic;
  color: var(--text);
}
.ed-verified__who {
  font-family: var(--font-sans);
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.ed-verified__who b { color: var(--ed-gold); font-weight: 400; letter-spacing: 0.12em; }


/* The four immediate contact methods, on solid ground. */
.ed-reach--panel {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  text-shadow: none;
  gap: clamp(0.9rem, 2.5vw, 2rem);
}
.ed-reach--panel a {
  color: var(--text);
  padding: 0.85em 1.4em;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  transition: border-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.ed-reach--panel a:hover { color: var(--ed-gold); border-color: var(--ed-gold); }

/* The contact opening puts the photograph first, so the eye lands on a face
   before it lands on a form. It is deliberately shorter than the other
   openings so the inquiry itself reaches the fold on a desktop screen,
   which is what the contact script asks for. */
.ed-open--contact {
  grid-template-columns: 0.8fr 1fr;
  min-height: 72svh;
}
.ed-open--contact > .ed-open__media { order: -1; }
.ed-open--contact .ed-open__say { padding-block: clamp(3rem, 8vh, 5rem); }
.ed-open--contact .ed-h1 { font-size: clamp(1.95rem, 3.6vw, 3.3rem); max-width: 20ch; }
/* The four contact methods need the full column, not the reading measure. */
.ed-open--contact .ed-reach--panel { max-width: none; }
.ed-open--contact + .ed-section { padding-top: clamp(2.5rem, 6vh, 4rem); }
@media (max-width: 900px) {
  .ed-open--contact { grid-template-columns: 1fr; }
  .ed-open--contact > .ed-open__media { order: 0; }
}

/* --------------------------------------------------------------------------
   Campaign — a fragrance campaign, never a coupon. The anniversary mark is
   small and gold; nothing shouts about a prize.
   -------------------------------------------------------------------------- */
.ed-mark--lg { width: 108px; height: 108px; font-size: 0.78rem; }
.ed-mark--lg b { font-size: 2rem; }

/* A quiet, factual note for anything awaiting legal or client sign-off.
   Deliberately understated so it never reads as marketing. */
.ed-note {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  max-width: 62ch;
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.1rem, 3vw, 1.75rem);
  border-left: 2px solid var(--ed-gold);
  background: var(--bg-alt);
}
.ed-note b {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ed-gold);
}
.ed-note p { font-size: 0.92rem; line-height: 1.75; color: var(--text-muted); }
.ed-panel .ed-note { background: rgba(12, 10, 8, 0.55); }
.ed-panel .ed-note p { color: rgba(255, 255, 255, 0.8); }

/* Terms list — plain, numbered, no decoration. */
.ed-terms { display: grid; gap: 1.1rem; counter-reset: term; max-width: 70ch; }
.ed-terms li {
  position: relative;
  list-style: none;
  padding-left: 3rem;
  line-height: 1.8;
  color: var(--text-soft);
}
.ed-terms li::before {
  counter-increment: term;
  content: counter(term, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.25em;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: var(--ed-gold);
}

/* --------------------------------------------------------------------------
   Signature — the master document's non-negotiable is that Chirali and Amish
   are visible on every page, not only on About. This is their mark: a small
   portrait, a line in their own voice, and the way through to their story.
   Deliberately quiet, so it reads as a signature rather than a banner.
   -------------------------------------------------------------------------- */
.ed-signature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: center;
  max-width: 900px;
  padding-block: clamp(2rem, 5vh, 3.25rem);
  border-block: 1px solid var(--ed-rule);
}
@media (max-width: 620px) {
  .ed-signature { grid-template-columns: 1fr; gap: 1.25rem; justify-items: start; }
}

.ed-signature__portrait {
  width: clamp(96px, 12vw, 148px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bg-alt);
}
.ed-signature__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Their faces sit in the upper third of the frame. */
  object-position: center 16%;
}

.ed-signature__body { display: grid; gap: 0.9rem; justify-items: start; }
.ed-signature__body p {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 34ch;
}
.ed-signature__name {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ed-gold);
}

/* ==========================================================================
   PREMIUM LAYER
   The editorial system above is correct but it was reading flat — every
   block on the same cream, every rule a hairline, every image a plain
   rectangle. This layer gives the pages depth and rhythm without adding
   clutter: tonal bands, gold detail, lifted frames and a stronger
   typographic hierarchy.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Warmer ground and a gold hairline vocabulary
   -------------------------------------------------------------------------- */
:root {
  --bg: #fcf9f4;
  --bg-alt: #f5efe4;
  --bg-deep: #ece2d2;
}
:root[data-theme="dark"] {
  --bg-alt: #1a1510;
  --bg-deep: #0a0806;
}

/* Eyebrows carry a short gold stroke, so a section opens rather than starts. */
.ed-tag--gold {
  display: flex;
  align-items: center;
  gap: 0.9em;
}
.ed-tag--gold::before {
  content: "";
  width: clamp(28px, 4vw, 52px);
  height: 1px;
  background: var(--ed-gold);
  flex: none;
}
.ed-say--center .ed-tag--gold,
.ed-breath .ed-tag--gold,
.ed-trust .ed-tag--gold { justify-content: center; }
.ed-say--center .ed-tag--gold::after,
.ed-breath .ed-tag--gold::after,
.ed-trust .ed-tag--gold::after {
  content: "";
  width: clamp(28px, 4vw, 52px);
  height: 1px;
  background: var(--ed-gold);
  flex: none;
}

/* A quiet ornament for the seam between two major sections. */
.ed-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding-block: clamp(2rem, 5vh, 3.5rem);
}
.ed-divider::before,
.ed-divider::after {
  content: "";
  height: 1px;
  width: min(22vw, 220px);
  background: linear-gradient(to right, transparent, var(--ed-gold));
}
.ed-divider::after { background: linear-gradient(to left, transparent, var(--ed-gold)); }
.ed-divider i {
  display: block;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  border: 1px solid var(--ed-gold);
}

/* --------------------------------------------------------------------------
   2. Depth — photographs sit on the page instead of being pasted to it
   -------------------------------------------------------------------------- */
.ed-figure,
.ed-film,
.ed-break,
.ed-open__media {
  box-shadow: 0 22px 60px -28px rgba(24, 18, 12, 0.42);
}
:root[data-theme="dark"] .ed-figure,
:root[data-theme="dark"] .ed-film,
:root[data-theme="dark"] .ed-break { box-shadow: 0 22px 60px -26px rgba(0, 0, 0, 0.75); }

/* A hairline mat, the way a print is framed. */
.ed-figure::after,
.ed-film::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.ed-figure { position: relative; }

/* The sequence lead lifts slightly further than the frames beneath it. */
.ed-seq__lead { box-shadow: 0 34px 80px -30px rgba(24, 18, 12, 0.5); }

/* --------------------------------------------------------------------------
   3. Typographic weight — more contrast between display and label
   -------------------------------------------------------------------------- */
.ed-h1 { font-size: clamp(2.5rem, 6vw, 6rem); letter-spacing: -0.036em; }
.ed-h2 { font-size: clamp(2.1rem, 4.6vw, 4.3rem); letter-spacing: -0.032em; }
.ed-h3 { font-size: clamp(1.6rem, 3vw, 2.6rem); }
.ed-lead { font-size: clamp(1.02rem, 1.2vw, 1.16rem); }

/* First line of a lead paragraph carries a touch more presence.
   Scoped away from the deep bands: --text there is the light theme's ink,
   so on a dark ground the opening line would vanish. */
.ed-section:not(.ed-section--dark) .ed-split__aside > .ed-lead:first-of-type::first-line,
.ed-section:not(.ed-section--dark) .ed-breath > .ed-lead:first-of-type::first-line { color: var(--text); }
.ed-section--dark .ed-split__aside > .ed-lead:first-of-type::first-line,
.ed-section--dark .ed-breath > .ed-lead:first-of-type::first-line { color: #fff; }

/* --------------------------------------------------------------------------
   4. Stages read as a sequence, not a table of rows
   -------------------------------------------------------------------------- */
.ed-stage { position: relative; }
.ed-stage__no,
.ed-note__no,
.ed-cap__no {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding-top: 0;
  border: 1px solid var(--ed-gold);
  border-radius: 50%;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--ed-gold);
  transition: background 0.45s var(--ease-out), color 0.45s var(--ease-out);
}
.ed-stage:hover .ed-stage__no { background: var(--ed-gold); color: var(--bg); }

/* A gold thread appears down the left edge as a row is engaged. */
.ed-stage::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: var(--ed-gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.55s var(--ease-out);
}
.ed-stage:hover::before { transform: scaleY(1); }

/* --------------------------------------------------------------------------
   5. Tonal rhythm — one deep band per page so the eye gets a change of key
   -------------------------------------------------------------------------- */
.ed-section--dark {
  position: relative;
  background: #14110d;
  color: #f4efe6;
  isolation: isolate;
}
.ed-section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(201, 168, 107, 0.13), transparent 62%),
    radial-gradient(70% 60% at 12% 100%, rgba(122, 20, 32, 0.16), transparent 66%);
}
.ed-section--dark .ed-h2,
.ed-section--dark .ed-h3,
.ed-section--dark .ed-trust h2 { color: #fff; }
.ed-section--dark .ed-lead,
.ed-section--dark .ed-trust p { color: rgba(244, 239, 230, 0.78); }
.ed-section--dark .ed-tag { color: rgba(244, 239, 230, 0.55); }
.ed-section--dark .ed-tag--gold { color: var(--gold-300); }
.ed-section--dark .ed-tag--gold::before,
.ed-section--dark .ed-tag--gold::after { background: var(--gold-300); }
.ed-section--dark .ed-action { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.34); }
.ed-section--dark .ed-action:hover { color: var(--gold-300); border-bottom-color: var(--gold-300); }
.ed-section--dark .ed-figures { border-color: rgba(244, 239, 230, 0.16); }
.ed-section--dark .ed-figures b { color: #fff; }
.ed-section--dark .ed-figures span { color: rgba(244, 239, 230, 0.55); }
.ed-section--dark .ed-signature { border-color: rgba(244, 239, 230, 0.16); }
.ed-section--dark .ed-signature__body p { color: #fff; }
.ed-section--dark .ed-divider::before { background: linear-gradient(to right, transparent, var(--gold-300)); }
.ed-section--dark .ed-divider::after { background: linear-gradient(to left, transparent, var(--gold-300)); }
.ed-section--dark .ed-divider i { border-color: var(--gold-300); }

/* --------------------------------------------------------------------------
   6. Index rows earn a little more presence
   -------------------------------------------------------------------------- */
.ed-row { position: relative; }
.ed-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--ed-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.ed-row:hover::after { transform: scaleX(1); }
.ed-row__no {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--ed-rule);
  border-radius: 50%;
  transition: border-color 0.45s var(--ease-out), color 0.45s var(--ease-out);
}
.ed-row:hover .ed-row__no { border-color: var(--ed-gold); color: var(--ed-gold); }

/* The 3D review cards sit on the dark band, so their surfaces and controls
   follow it rather than the light page they were built for. The card must
   be opaque: on a ring, a translucent card lets the ones behind it show
   through and the whole stack reads as a jumble. */
.ed-section--dark .quote {
  background: #201a13;
  border: 1px solid rgba(201, 168, 107, 0.28);
  box-shadow: 0 34px 80px -30px rgba(0, 0, 0, 0.92);
}
.ed-section--dark .carousel3d__card[data-active="true"] .quote {
  border-color: var(--gold-300);
  box-shadow: 0 44px 100px -34px rgba(0, 0, 0, 0.95);
}
.ed-section--dark .quote__text { color: #f4efe6; }
.ed-section--dark .quote__name { color: #fff; }
.ed-section--dark .quote__where { color: rgba(244, 239, 230, 0.58); }
.ed-section--dark .quote__stars { color: var(--gold-300); }
.ed-section--dark .carousel3d__btn {
  color: #f4efe6;
  border-color: rgba(244, 239, 230, 0.3);
}
.ed-section--dark .carousel3d__btn:hover {
  color: #14110d;
  background: var(--gold-300);
  border-color: var(--gold-300);
}
.ed-section--dark .carousel3d__dot { background: rgba(244, 239, 230, 0.28); }
.ed-section--dark .carousel3d__dot[aria-selected="true"] { background: var(--gold-300); }
.ed-section--dark .carousel3d__hint { color: rgba(244, 239, 230, 0.45); }
.ed-section--dark .carousel3d::after { display: none; }
.ed-section--dark .ed-quote__src { color: #fff; border-bottom-color: var(--gold-300); }
.ed-section--dark .ed-quote__src:hover { color: var(--gold-300); }

/* Inside a deep band an unloaded frame must not flash cream. */
.ed-section--dark .ed-figure,
.ed-section--dark .ed-seq__lead,
.ed-section--dark .ed-break { background: #1c1712; }
.ed-section--dark .ed-figure::after { box-shadow: inset 0 0 0 1px rgba(201, 168, 107, 0.22); }
.ed-section--dark .ed-cap__body p,
.ed-section--dark .ed-stage__body p,
.ed-section--dark .ed-row__text { color: rgba(244, 239, 230, 0.7); }
.ed-section--dark .ed-row__name { color: #fff; }
.ed-section--dark .ed-row,
.ed-section--dark .ed-index,
.ed-section--dark .ed-stages,
.ed-section--dark .ed-stage { border-color: rgba(244, 239, 230, 0.16); }
.ed-section--dark .ed-row__no { border-color: rgba(244, 239, 230, 0.24); color: rgba(244, 239, 230, 0.6); }
.ed-section--dark .ed-row:hover .ed-row__no { border-color: var(--gold-300); color: var(--gold-300); }
.ed-section--dark .ed-row__go { color: rgba(244, 239, 230, 0.6); }
.ed-section--dark .ed-row:hover .ed-row__name,
.ed-section--dark .ed-row:hover .ed-row__go { color: var(--gold-300); }
.ed-section--dark .ed-stage:hover h3 { color: var(--gold-300); }
.ed-section--dark .ed-stage__label { color: rgba(244, 239, 230, 0.5); }
.ed-section--dark .ed-signature__name { color: var(--gold-300); }
.ed-section--dark .prose-link { color: var(--gold-300); }

/* --------------------------------------------------------------------------
   7. Light bands are lit, not filled
   A flat single cream across a whole page is what made the site read like a
   document. Each light band now carries a whisper of warm light from the top
   and a gold hairline at its seam, so the page has surface.
   -------------------------------------------------------------------------- */
.ed-section { position: relative; isolation: isolate; }
.ed-section:not(.ed-section--dark)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(130% 62% at 50% 0%, rgba(201, 168, 107, 0.085), transparent 58%),
    radial-gradient(80% 50% at 100% 100%, rgba(122, 20, 32, 0.035), transparent 62%);
}
:root[data-theme="dark"] .ed-section:not(.ed-section--dark)::before {
  background: radial-gradient(130% 62% at 50% 0%, rgba(201, 168, 107, 0.05), transparent 58%);
}

/* The seam between two bands gets a hairline instead of a hard edge. */
.ed-section--dark { border-block: 1px solid rgba(201, 168, 107, 0.3); }

/* --------------------------------------------------------------------------
   8. Stage rows earn a hierarchy
   -------------------------------------------------------------------------- */
.ed-stage__label { color: var(--ed-gold); letter-spacing: 0.36em; }
.ed-stage h3 { font-size: clamp(1.55rem, 3vw, 2.45rem); }
.ed-cap__body p, .ed-stage__body p { font-size: clamp(0.98rem, 1.1vw, 1.06rem); }

/* --------------------------------------------------------------------------
   9. Actions read as buttons of type, not underlined words
   -------------------------------------------------------------------------- */
.ed-action {
  position: relative;
  border-bottom-color: transparent;
}
.ed-action::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.42;
  transform-origin: left;
  transition: opacity 0.4s var(--ease-out), background 0.4s var(--ease-out);
}
.ed-action:hover::after { opacity: 1; background: var(--ed-gold); }
.ed-action--light:hover::after { background: #fff; }

/* Every featured review carries a direct route to its source. */
a.ed-verified__row { text-decoration: none; transition: padding-left 0.5s var(--ease-out); }
a.ed-verified__row:hover { padding-left: 0.75rem; }
a.ed-verified__row:hover .ed-verified__title { color: var(--ed-gold); }
.ed-verified__title { transition: color 0.4s var(--ease-out); }
.ed-verified__read {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-sans);
  font-size: 0.54rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ed-gold);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
a.ed-verified__row:hover .ed-verified__read { opacity: 1; }
.ed-verified__read svg { width: 1em; height: 1em; }
@media (max-width: 720px) { .ed-verified__read { opacity: 1; } }

/* A second, smaller frame set over the corner of the first. Depth without
   another row, and it lets a page show two moments where it had one. */
.ed-stack { position: relative; }
.ed-stack__inset {
  position: absolute;
  right: clamp(-1.5rem, -2vw, -0.75rem);
  bottom: clamp(-1.75rem, -3vw, -1rem);
  width: clamp(150px, 42%, 300px);
  aspect-ratio: 3 / 2;
  border: 6px solid var(--bg);
  box-shadow: 0 28px 60px -22px rgba(24, 18, 12, 0.5);
}
.ed-section--dark .ed-stack__inset { border-color: #14110d; }
@media (max-width: 620px) {
  .ed-stack__inset { position: static; width: 100%; margin-top: 0.75rem; border-width: 0; }
}

/* A caption under a chapter's lead frame. Sits outside the figure because
   .ed-figure clips its overflow to hold the aspect ratio. */
.ed-seq__cap {
  margin-top: -0.4rem;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ed-section--dark .ed-seq__cap { color: rgba(244, 239, 230, 0.55); }

/* ==========================================================================
   LEGIBILITY OVER PHOTOGRAPHS
   Type sitting on a picture was getting lost wherever the frame is bright —
   the eyebrow and the sub-line especially, on phones.

   The fix is a shadow rather than a heavier veil. A shadow darkens only the
   pixels immediately behind each letter, so the words hold at any brightness
   while the photograph itself stays exactly as bright as it was. The scrim
   gets a small lift in its middle range as well, where the text actually
   sits, and nowhere else.
   ========================================================================== */
.ed {
  --on-photo: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 18px rgba(0, 0, 0, .42);
  --on-photo-lite: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 14px rgba(0, 0, 0, .34);
}

.ed-hero__names,
.ed-hero h1,
.ed-hero__sub,
.ed-hero__scroll,
.ed-panel .ed-tag,
.ed-panel .ed-h2,
.ed-panel .ed-lead,
.ed-close .ed-tag,
.ed-close .ed-h2,
.ed-close .ed-lead,
.ed-close__inner .ed-tag { text-shadow: var(--on-photo); }

.ed-hero .ed-action--light,
.ed-panel .ed-action--light,
.ed-close .ed-action--light,
.ed-mark { text-shadow: var(--on-photo-lite); }

/* The gold anniversary mark needs its ring readable too. */
.ed-mark { box-shadow: 0 2px 20px rgba(0, 0, 0, .35); }

/* Lift the scrim through the band where the words actually sit. */
.ed-hero__media::after,
.ed-panel__media::after,
.ed-close__media::after {
  background:
    linear-gradient(to top,
      rgba(12, 10, 8, 0.9) 0%,
      rgba(12, 10, 8, 0.66) 20%,
      rgba(12, 10, 8, 0.34) 38%,
      rgba(12, 10, 8, 0.08) 54%,
      rgba(12, 10, 8, 0) 68%),
    linear-gradient(to right,
      rgba(12, 10, 8, 0.62) 0%,
      rgba(12, 10, 8, 0.3) 28%,
      rgba(12, 10, 8, 0) 56%),
    linear-gradient(to bottom,
      rgba(12, 10, 8, 0.55) 0%,
      rgba(12, 10, 8, 0.18) 8%,
      rgba(12, 10, 8, 0) 17%);
}

@media (max-width: 700px) {
  .ed-hero__media::after,
  .ed-panel__media::after,
  .ed-close__media::after {
    background:
      linear-gradient(to top,
        rgba(12, 10, 8, 0.93) 0%,
        rgba(12, 10, 8, 0.78) 22%,
        rgba(12, 10, 8, 0.52) 42%,
        rgba(12, 10, 8, 0.2) 60%,
        rgba(12, 10, 8, 0) 78%),
      linear-gradient(to bottom,
        rgba(12, 10, 8, 0.55) 0%,
        rgba(12, 10, 8, 0.15) 10%,
        rgba(12, 10, 8, 0) 20%);
  }
}

/* Small, widely tracked labels are the first thing a bright frame swallows —
   thin strokes with air between them. They get a heavier shadow than the
   headline does, and full-strength white. */
.ed-hero__names,
.ed-panel .ed-tag,
.ed-close .ed-tag,
.ed-hero__scroll {
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .78),
    0 2px 10px rgba(0, 0, 0, .6),
    0 4px 26px rgba(0, 0, 0, .45);
}
.ed-panel .ed-tag--gold,
.ed-close .ed-tag--gold { color: var(--gold-300); }

/* ==========================================================================
   MOBILE — the copy block carries its own ground
   A gradient painted on the picture can only guess where the words are. On a
   phone a long headline plus a paragraph plus an action reaches well up the
   frame, past the point where a bottom-weighted scrim has faded out, and the
   eyebrow ends up sitting on the brightest part of the photograph.

   So on small screens the copy block gets its own wash, sized to itself and
   bleeding past its edges with a long fade at the top so there is no visible
   edge. The upper part of the photograph keeps its full brightness.
   ========================================================================== */
@media (max-width: 700px) {
  .ed-hero__inner,
  .ed-panel__inner,
  .ed-close__inner { position: relative; }

  .ed-hero__inner::before,
  .ed-panel__inner::before,
  .ed-close__inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(var(--gutter) * -1);
    right: calc(var(--gutter) * -1);
    top: -3.25rem;
    bottom: -8rem;
    pointer-events: none;
    background: linear-gradient(to top,
      rgba(12, 10, 8, 0.94) 0%,
      rgba(12, 10, 8, 0.9) 58%,
      rgba(12, 10, 8, 0.74) 80%,
      rgba(12, 10, 8, 0.36) 92%,
      rgba(12, 10, 8, 0) 100%);
  }

  /* With the block carrying its own ground, the wash on the picture itself
     can come back down so the photograph is not darkened twice. */
  .ed-hero__media::after,
  .ed-panel__media::after,
  .ed-close__media::after {
    background:
      linear-gradient(to top,
        rgba(12, 10, 8, 0.55) 0%,
        rgba(12, 10, 8, 0.28) 30%,
        rgba(12, 10, 8, 0.06) 52%,
        rgba(12, 10, 8, 0) 68%),
      linear-gradient(to bottom,
        rgba(12, 10, 8, 0.55) 0%,
        rgba(12, 10, 8, 0.15) 10%,
        rgba(12, 10, 8, 0) 20%);
  }
}

/* --------------------------------------------------------------------------
   Recent reviews — the couples' own words, read here rather than on a
   listing page surrounded by other photographers.
   -------------------------------------------------------------------------- */
.ed-revs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
@media (max-width: 820px) { .ed-revs { grid-template-columns: 1fr; } }

.ed-rev {
  display: grid;
  align-content: start;
  gap: 1.1rem;
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
  background: var(--surface);
  border: 1px solid var(--ed-rule);
  box-shadow: 0 18px 44px -30px rgba(24, 18, 12, 0.4);
  transition: border-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.ed-rev:hover {
  border-color: var(--ed-gold);
  box-shadow: 0 26px 60px -30px rgba(24, 18, 12, 0.5);
}
/* Uniform cards. The lead card only earns extra width once the review body
   is in it; a wide card holding a single line reads as a gap. */

.ed-rev__stars { display: flex; gap: 0.28em; color: var(--ed-gold); }
.ed-rev__stars svg { width: 0.92rem; height: 0.92rem; }

.ed-rev blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--text);
}


.ed-rev__who {
  display: grid;
  gap: 0.3rem;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ed-rev__who b { font-weight: 500; letter-spacing: 0.16em; color: var(--text); font-size: 0.68rem; }

/* --------------------------------------------------------------------------
   Onward — the way back into the site, so a visitor never has to leave to
   keep going.
   -------------------------------------------------------------------------- */
.ed-onward {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 2vw, 1rem);
  padding-top: clamp(1.75rem, 4vh, 2.5rem);
  border-top: 1px solid var(--ed-rule);
}
.ed-onward a {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.9em 1.5em;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text);
  transition: border-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.ed-onward a:hover { border-color: var(--ed-gold); color: var(--ed-gold); }
.ed-onward svg { width: 1em; height: 1em; }

/* ==========================================================================
   VENUES
   A selective editorial directory, not a crowded logo wall: one real
   photograph, the venue name, its city and one sentence.
   ========================================================================== */
.ed-venues {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}
@media (max-width: 980px) { .ed-venues { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .ed-venues { grid-template-columns: 1fr; } }

.ed-venue { display: grid; gap: 1rem; align-content: start; }
.ed-venue__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  box-shadow: 0 20px 50px -30px rgba(24, 18, 12, 0.45);
}
.ed-venue__frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.5s var(--ease-out);
}
.ed-venue:hover .ed-venue__frame img { transform: scale(1.04); }
/* The old hub only ever showed the featured card, whose own rule stacks this
   body. The three standard cards had no rule at all, so their city and name
   ran together on one line as inline spans. */
.ed-venue__body {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
.ed-venue__body .ed-action { margin-top: 0.35rem; justify-self: start; }

.ed-venue__name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--text);
  transition: color 0.4s var(--ease-out);
}
.ed-venue:hover .ed-venue__name { color: var(--ed-gold); }
.ed-venue__where {
  font-family: var(--font-sans);
  font-size: 0.56rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ed-gold);
}
.ed-venue__line { font-size: 0.94rem; line-height: 1.72; color: var(--text-muted); max-width: 42ch; }

/* The featured venue takes the full width of the row. */
.ed-venue--featured {
  grid-column: 1 / -1;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
@media (max-width: 900px) { .ed-venue--featured { grid-template-columns: 1fr; } }
.ed-venue--featured .ed-venue__frame { aspect-ratio: 3 / 2; }
.ed-venue--featured .ed-venue__body { display: grid; gap: 1.1rem; justify-items: start; }
.ed-venue--featured .ed-venue__name { font-size: clamp(1.8rem, 3.4vw, 2.9rem); }
.ed-venue--featured .ed-venue__line { font-size: 1rem; max-width: 46ch; }

/* Region collections — a written list, not a grid of empty tiles. */
.ed-region { display: grid; gap: 0.6rem; }
/* Each region is a <details>. Every venue name stays in the rendered HTML
   whether or not the group is open, so the page reads and ranks the same. */
.ed-region__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0 0.9rem;
  border-bottom: 1px solid var(--ed-rule);
  cursor: pointer;
  list-style: none;
  transition: border-color 0.4s var(--ease-out);
}
.ed-region__head::-webkit-details-marker { display: none; }
.ed-region__head:hover { border-bottom-color: var(--ed-gold); }
.ed-region__head:focus-visible { outline: 2px solid var(--ed-gold); outline-offset: 4px; }

.ed-region__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--text);
  transition: color 0.35s var(--ease-out);
}
.ed-region__head:hover .ed-region__title { color: var(--ed-gold); }

.ed-region__chev {
  width: 1.15rem; height: 1.15rem;
  margin-left: auto;
  flex: none;
  align-self: center;
  color: var(--text-muted);
  transition: transform 0.4s var(--ease-out), color 0.35s var(--ease-out);
}
.ed-vgroup[open] .ed-region__chev { transform: rotate(180deg); color: var(--ed-gold); }

.ed-region__body { padding-top: 0.35rem; }
.ed-vgroup[open] .ed-region__body { animation: regionOpen 0.45s var(--ease-out) both; }
@keyframes regionOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-vgroup[open] .ed-region__body { animation: none; }
  .ed-region__chev { transition: none; }
}

.ed-regions__lead { max-width: 62ch; margin: 1.25rem 0 clamp(2rem, 5vh, 3rem); }

.ed-region__head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 300;
  color: var(--text);
}
.ed-region__count {
  font-family: var(--font-sans);
  font-size: 0.55rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--text-muted);
}
.ed-region ul { list-style: none; display: grid; gap: 0; }
.ed-region li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: 0.85rem; border-bottom: 1px solid var(--ed-rule);
  font-family: var(--font-display); font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  font-weight: 300; color: var(--text);
}
.ed-region li a { color: var(--text); transition: color 0.35s var(--ease-out); }
.ed-region li a:hover { color: var(--ed-gold); }
.ed-region li em {
  font-family: var(--font-sans); font-style: normal;
  font-size: 0.53rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap;
}
.ed-region li em.is-live { color: var(--ed-gold); }

/* --------------------------------------------------------------------------
   Venue page — the curated sequence, one dominant image at a time
   -------------------------------------------------------------------------- */
.ed-story { display: grid; gap: clamp(1.5rem, 4vh, 2.75rem); }
.ed-story figure { position: relative; overflow: hidden; background: var(--bg-alt); }
.ed-story img { width: 100%; height: 100%; object-fit: cover; }
.ed-story figcaption {
  margin-top: 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.58rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--text-muted);
}
.ed-story .s-wide { aspect-ratio: 16 / 9; }
.ed-story .s-tall { aspect-ratio: 4 / 5; }
.ed-story .s-mid  { aspect-ratio: 3 / 2; }
@media (max-width: 700px) { .ed-story .s-wide { aspect-ratio: 4 / 3; } }
.ed-story__pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
@media (max-width: 700px) { .ed-story__pair { grid-template-columns: 1fr; } }

/* A discreet resource link to the venue's own site. */
.ed-resource {
  font-family: var(--font-sans);
  font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-muted);
}
.ed-resource a { color: var(--text-muted); border-bottom: 1px solid var(--ed-rule); }
.ed-resource a:hover { color: var(--ed-gold); border-bottom-color: var(--ed-gold); }

/* Visible FAQ — answers must exist as readable text, not inside a widget. */
.ed-faq { display: grid; gap: 0; border-top: 1px solid var(--ed-rule); }
.ed-faq__item {
  display: grid; gap: 0.7rem;
  padding-block: clamp(1.25rem, 3vh, 1.9rem);
  border-bottom: 1px solid var(--ed-rule);
}
.ed-faq__q {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  font-weight: 300; color: var(--text);
}
.ed-faq__a { max-width: 62ch; line-height: 1.8; color: var(--text-soft); }

/* Venue cards on a deep band: the name and line follow the band, the way
   every other component does. Without this the names inherit the light
   theme's ink and disappear. */
.ed-section--dark .ed-venue__name { color: #fff; }
.ed-section--dark .ed-venue:hover .ed-venue__name { color: var(--gold-300); }
.ed-section--dark .ed-venue__line { color: rgba(244, 239, 230, 0.72); }
.ed-section--dark .ed-venue__where { color: var(--gold-300); }
.ed-section--dark .ed-venue__frame { background: #1c1712; }

/* Region lists on a deep band. */
.ed-section--dark .ed-region li,
.ed-section--dark .ed-region li a { color: #fff; }
.ed-section--dark .ed-region li a:hover { color: var(--gold-300); }
.ed-section--dark .ed-region li em { color: rgba(244, 239, 230, 0.55); }
.ed-section--dark .ed-region li em.is-live { color: var(--gold-300); }
.ed-section--dark .ed-region__head h3 { color: #fff; }
.ed-section--dark .ed-region__count { color: rgba(244, 239, 230, 0.55); }
.ed-section--dark .ed-region li,
.ed-section--dark .ed-region__head { border-color: rgba(244, 239, 230, 0.16); }

/* Venue story and FAQ on a deep band. */
.ed-section--dark .ed-story figcaption { color: rgba(244, 239, 230, 0.55); }
.ed-section--dark .ed-faq__q { color: #fff; }
.ed-section--dark .ed-faq__a { color: rgba(244, 239, 230, 0.72); }
.ed-section--dark .ed-faq,
.ed-section--dark .ed-faq__item { border-color: rgba(244, 239, 230, 0.16); }
.ed-section--dark .ed-onward { border-top-color: rgba(244, 239, 230, 0.16); }
.ed-section--dark .ed-onward a { color: #f4efe6; border-color: rgba(244, 239, 230, 0.28); }
.ed-section--dark .ed-onward a:hover { color: var(--gold-300); border-color: var(--gold-300); }
.ed-section--dark .ed-resource,
.ed-section--dark .ed-resource a { color: rgba(244, 239, 230, 0.62); }
.ed-section--dark .ed-note { background: rgba(255, 255, 255, 0.05); }
.ed-section--dark .ed-note p { color: rgba(244, 239, 230, 0.75); }

/* --------------------------------------------------------------------------
   Breadcrumb — the venue guide asks for it visible as well as structured.
   It sits above a transparent header, so it clears the header height.
   -------------------------------------------------------------------------- */
/* Only the venue pages carry a breadcrumb, and on every one of them it sits
   directly above a hero. As a band of its own it pushed the hero down and read
   as a seam between the header and the photograph, so it now floats over the
   top of the hero instead: same crawlable markup, no strip. The negative
   margin is its own height, which pulls the hero back up under it. */
.ed-crumb {
  position: relative;
  z-index: 5;
  padding: calc(var(--header-h) + 0.85rem) var(--gutter) 0;
  margin-bottom: calc(-1 * (var(--header-h) + 1.7rem));
  background: none;
  pointer-events: none;
}
.ed-crumb a, .ed-crumb [aria-current] { pointer-events: auto; }
/* One line, always. The negative margin above assumes a single row, and the
   longest venue names ("Wyndham Orlando Resort & Conference Center Celebration
   Area") would wrap on a phone and push the hero down again. The trail stays
   whole in the markup and in the BreadcrumbList schema either way. */
.ed-crumb ol {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0.55rem;
  overflow: hidden;
  list-style: none; max-width: 1440px; margin-inline: auto;
  font-family: var(--font-sans);
  font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-muted);
}
.ed-crumb ol { color: rgba(253, 251, 248, 0.68); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.ed-crumb li { flex: none; }
.ed-crumb li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-crumb li + li::before { content: "/"; margin-right: 0.55rem; color: rgba(253, 251, 248, 0.34); }
.ed-crumb a { color: rgba(253, 251, 248, 0.68); transition: color 0.35s var(--ease-out); }
.ed-crumb a:hover { color: var(--gold-300); }
.ed-crumb [aria-current] { color: var(--gold-300); }

/* With a breadcrumb above it, the hero no longer sits under the header. */
.ed-crumb + .ed-hero { min-height: calc(86svh - var(--header-h)); }

/* --------------------------------------------------------------------------
   Venue finder — a search field over the complete list, plus region chips
   -------------------------------------------------------------------------- */
.ed-find { display: grid; gap: clamp(1rem, 2.5vh, 1.5rem); }

.ed-find__field { position: relative; max-width: 560px; }
.ed-find__field svg {
  position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%);
  width: 1.05rem; height: 1.05rem; color: var(--text-muted); pointer-events: none;
}
.ed-find input {
  width: 100%;
  padding: 1.05em 1.3em 1.05em 3.1rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text);
  transition: border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.ed-find input::placeholder { color: var(--text-muted); }
.ed-find input:focus {
  outline: none;
  border-color: var(--ed-gold);
  box-shadow: 0 0 0 4px rgba(201, 168, 107, 0.14);
}
.ed-find__count {
  font-family: var(--font-sans);
  font-size: 0.56rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--text-muted);
}

/* The complete list. Every name is real text, so it is readable and
   crawlable whether or not the search script runs. */
/* Closed toggles are a list, not eight separate sections: the summary's own
   padding and rule give all the separation they need. The open one gets room. */
.ed-vlist { display: grid; gap: 0; margin-top: clamp(0.5rem, 2vh, 1rem); }
.ed-vgroup { display: block; }
.ed-vgroup > h3 {
  font-family: var(--font-sans);
  font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ed-gold);
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--ed-rule);
}
.ed-vrow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.4rem 1.5rem;
  align-items: baseline;
  padding-block: clamp(0.9rem, 2.2vh, 1.25rem);
  border-bottom: 1px solid var(--ed-rule);
  transition: padding-left 0.45s var(--ease-out);
}
.ed-vrow:hover { padding-left: 0.75rem; }
/* A grid track defaults to min-width:auto, so a long venue name refused to
   shrink and shoved the city off the right edge. One column on a phone, and
   the name allowed to wrap. */
@media (max-width: 640px) {
  .ed-vrow { grid-template-columns: 1fr; gap: 0.3rem; }
  .ed-vrow__go { grid-column: auto; }
  .ed-vrow__where { white-space: normal; letter-spacing: 0.2em; }
}
.ed-vlist, .ed-vgroup, .ed-vrow > * { min-width: 0; }
.ed-vrow__name { overflow-wrap: anywhere; }
.ed-vrow__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 300; color: var(--text);
  transition: color 0.35s var(--ease-out);
}
a.ed-vrow:hover .ed-vrow__name { color: var(--ed-gold); }
.ed-vrow__where {
  font-family: var(--font-sans);
  font-size: 0.55rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
}
.ed-vrow__go {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--font-sans);
  font-size: 0.53rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--ed-gold); white-space: nowrap;
}
/* Without an explicit size the inline arrow renders at its intrinsic
   viewBox size and blows the row height open. */
.ed-vrow__go svg { width: 1em; height: 1em; flex: none; }
a.ed-vrow:hover .ed-vrow__go svg { transform: translateX(4px); }
.ed-vrow__go svg { transition: transform 0.4s var(--ease-out); }
.ed-vrow__go--soon { color: var(--text-muted); }
[data-venue][hidden], [data-venue-group][hidden] { display: none !important; }

.ed-find__empty {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-left: 2px solid var(--ed-gold);
  background: var(--bg-alt);
}
.ed-find__empty p { max-width: 52ch; line-height: 1.75; color: var(--text-soft); }
.ed-find__empty .ed-action { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Region chips
   -------------------------------------------------------------------------- */
.ed-filter {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
}
.ed-filter button {
  padding: 0.8em 1.5em;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: none;
  font-family: var(--font-sans);
  font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--text); cursor: pointer;
  transition: border-color 0.4s var(--ease-out), color 0.4s var(--ease-out), background 0.4s var(--ease-out);
}
.ed-filter button:hover { border-color: var(--ed-gold); color: var(--ed-gold); }
.ed-filter button[aria-pressed="true"] {
  background: var(--ed-gold); border-color: var(--ed-gold); color: var(--bg);
}
[data-region][hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Search suggestions — a short list under the field, shown as you type
   -------------------------------------------------------------------------- */
.ed-find__field { position: relative; z-index: 5; }
.ed-find__suggest {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 0.5rem);
  z-index: 20;
  list-style: none;
  margin: 0; padding: 0.4rem;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 26px 60px -24px rgba(24, 18, 12, 0.45);
  max-height: 340px; overflow-y: auto;
}
.ed-find__suggest[hidden] { display: none; }
.ed-find__suggest li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 0.95rem;
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 300;
  color: var(--text);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.ed-find__suggest li b { font-weight: 500; color: var(--ed-gold); }
.ed-find__suggest li em {
  font-family: var(--font-sans); font-style: normal;
  font-size: 0.52rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap;
}
.ed-find__suggest li:hover,
.ed-find__suggest li[aria-selected="true"] { background: var(--bg-alt); }
.ed-find__suggest li:hover em,
.ed-find__suggest li[aria-selected="true"] em { color: var(--ed-gold); }

/* Sitting directly under the hero, the finder gets a little more air. */
.ed-hero + .ed-section .ed-find__field { max-width: 620px; }

/* ===========================================================================
   VENUE HERO — typographic
   A venue page opens on a photograph from that exact property. Until those
   sets arrive the hero is set in type instead, so nothing on the page implies
   a frame from another wedding was made here. Dark ground, generous rag, the
   venue name doing the work a photograph would.
   ======================================================================== */
.ed-vhero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(78vh, 780px);
  padding: calc(var(--header-h) + clamp(4rem, 12vh, 9rem)) var(--gutter) clamp(3.5rem, 9vh, 6.5rem);
  background: var(--ink-900);
  color: var(--ivory-50);
  overflow: hidden;
}

/* Two very soft pools of warmth so the ground reads as lit, not flat black. */
.ed-vhero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(188, 155, 93, 0.20), transparent 62%),
    radial-gradient(85% 70% at 92% 96%, rgba(122, 20, 32, 0.24), transparent 66%);
}

/* A hairline rule that starts at the gutter and runs off the right edge. */
.ed-vhero::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: 0;
  top: calc(var(--header-h) + clamp(2.5rem, 8vh, 6rem));
  height: 1px;
  background: linear-gradient(to right, rgba(217, 189, 133, 0.55), rgba(217, 189, 133, 0));
}

.ed-vhero__inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
}

.ed-vhero__where {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.ed-vhero__name {
  display: block;
  margin: 0.9rem 0 clamp(1.5rem, 4vh, 2.75rem);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7.5vw, 6.5rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--ivory-50);
  max-width: 16ch;
}

.ed-vhero .ed-h1 {
  max-width: 22ch;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300;
  line-height: 1.22;
  color: rgba(253, 251, 248, 0.94);
}

.ed-vhero .ed-hero__sub {
  max-width: 62ch;
  margin-top: 1.5rem;
  color: rgba(253, 251, 248, 0.76);
}

.ed-vhero .ed-hero__cta { margin-top: clamp(2rem, 5vh, 3rem); }

@media (max-width: 700px) {
  .ed-vhero { min-height: auto; padding-top: calc(var(--header-h) + 4rem); }
  .ed-vhero__name { max-width: none; }
}

/* ===========================================================================
   VENUES HUB
   ======================================================================== */

/* The search sits directly under the hero, so it gets room to breathe and
   centres on the page rather than hugging the left rail. */
.ed-find--lead {
  max-width: 780px;
  margin-inline: auto;
  margin-top: clamp(2rem, 5vh, 3rem);
}
/* The field is a grid item, so clearing its max-width alone left it sized to
   its own content and pinned to the left of the track -- measured 80px off the
   heading. Give it the track's full width explicitly. */
.ed-find--lead .ed-find__field {
  max-width: none;
  width: 100%;
  margin-inline: auto;
}
.ed-find--lead input { font-size: clamp(1rem, 1.4vw, 1.15rem); }
.ed-find--lead .ed-filter { justify-content: center; }
.ed-find--lead .ed-find__count {
  align-self: center;
  width: 100%;
  text-align: center;
  margin-top: 0.35rem;
}

/* Jump links to each region collection further down the page. */
.ed-find__jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 1.35rem;
  margin: 0.5rem 0 0;
}
.ed-find__jump a {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ed-find__jump a:hover,
.ed-find__jump a:focus-visible { color: var(--gold-600); border-bottom-color: var(--gold-400); }
.ed-find__jump i { font-style: normal; opacity: 0.5; margin-left: 0.35em; }

.ed-region__note {
  max-width: 62ch;
  margin: 0.9rem 0 1.6rem;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-muted);
}

.ed-venues__note {
  max-width: 68ch;
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: rgba(253, 251, 248, 0.62);
}

.ed-vgroup { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.ed-vgroup[open] { padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }

.ed-platform__all {
  max-width: 60ch;
  margin: clamp(1.75rem, 4vh, 2.5rem) 0 0;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-muted);
}

/* ===========================================================================
   VENUE PAGE — facts, chapter numbers and the work strip
   The property photographs have not arrived, so these pages were pure type.
   Rather than borrow frames and imply provenance, they now show three of the
   studio's own with a caption that says exactly what they are.
   ======================================================================== */
.ed-vfacts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 3.25rem;
  margin: clamp(2.25rem, 6vh, 3.5rem) 0 0;
  padding-top: clamp(1.4rem, 4vh, 2.1rem);
  border-top: 1px solid rgba(217, 189, 133, 0.26);
}
.ed-vfacts > div { display: grid; gap: 0.4rem; }
.ed-vfacts dt {
  font-family: var(--font-sans);
  font-size: 0.56rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.ed-vfacts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 1.3vw, 1.15rem);
  font-weight: 300;
  color: rgba(253, 251, 248, 0.9);
}
.ed-vfacts a { color: rgba(253, 251, 248, 0.9); border-bottom: 1px solid rgba(217, 189, 133, 0.5); }
.ed-vfacts a:hover { color: var(--gold-300); }

/* A chapter number in the margin, the same device the rest of the site uses. */
.ed-sec__no {
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--ed-gold);
  opacity: 0.55;
}
.ed-section--dark .ed-sec__no { color: var(--gold-300); opacity: 0.7; }

.ed-vwork { margin: clamp(2.5rem, 6vh, 4rem) 0 0; }
.ed-vwork__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.7rem, 1.8vw, 1.4rem);
  align-items: start;
}
.ed-vwork__cell {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-alt);
  box-shadow: 0 22px 55px -34px rgba(24, 18, 12, 0.5);
}
/* The middle frame drops, so the three read as a composition rather than a row. */
.ed-vwork__cell--drop { margin-top: clamp(1.25rem, 4.5vw, 3rem); }
.ed-vwork__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-out);
}
.ed-vwork:hover .ed-vwork__cell img { transform: scale(1.03); }

.ed-vwork figcaption {
  max-width: 66ch;
  margin: clamp(1.5rem, 4vh, 2.25rem) auto 0;
  text-align: center;
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--text-muted);
}

@media (max-width: 760px) {
  .ed-vwork__grid { grid-template-columns: 1fr 1fr; }
  .ed-vwork__cell--drop { margin-top: clamp(1rem, 5vw, 2rem); }
  .ed-vwork__cell:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; margin-top: 0; }
}
.ed-vwork figcaption a { color: var(--ed-gold); border-bottom: 1px solid transparent; }
.ed-vwork figcaption a:hover { border-bottom-color: var(--ed-gold); }

/* ===========================================================================
   VENUE PAGE — third pass
   ======================================================================== */

/* Five frames: one lead, four supporting, reading as a spread rather than a
   row. On a phone it folds to two columns with the lead across both. */
.ed-vwork__grid { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; }
.ed-vwork__cell { aspect-ratio: 1 / 1; }
.ed-vwork__cell--lead { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
@media (max-width: 760px) {
  .ed-vwork__grid { grid-template-columns: 1fr 1fr; }
  .ed-vwork__cell--lead { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .ed-vwork__cell:last-child { grid-column: auto; aspect-ratio: 1 / 1; }
}

/* The FAQ was showing the browser's own disclosure triangle. A thin "+" that
   turns into a "−" belongs to the page; the triangle did not. */
.ed-faq__q { list-style: none; position: relative; padding-right: 2.5rem; cursor: pointer; }
.ed-faq__q::-webkit-details-marker { display: none; }
.ed-faq__q::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--ed-rule);
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--ed-gold);
  transition: transform 0.35s var(--ease-out), background 0.3s var(--ease-out);
}
.ed-faq__item[open] > .ed-faq__q::after { content: "\2212"; transform: translateY(-50%) rotate(180deg); }
.ed-faq__q:hover::after { background: var(--bg-alt); }

/* Chapter 04 now sits on the dark band; its pending pill has to be legible there. */
.ed-section--dark .ed-action--pending { color: rgba(253, 251, 248, 0.55); border-color: rgba(253, 251, 248, 0.25); }

/* Filter status above the region toggles. */
.ed-vstatus {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  margin: 0 0 clamp(1rem, 2.5vh, 1.5rem);
  padding: 0.85rem 1.1rem;
  border-left: 2px solid var(--ed-gold);
  background: var(--bg);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.ed-vstatus b { font-weight: 500; color: var(--text); }
.ed-vstatus button {
  border: 0;
  background: none;
  padding: 0 0 2px;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ed-gold);
  border-bottom: 1px solid var(--ed-gold);
  cursor: pointer;
}
.ed-vstatus button:hover { color: var(--text); border-bottom-color: var(--text); }
.ed-vstatus[hidden] { display: none; }

/* ===========================================================================
   VENUE PAGE — the film card in the dark band, and the pull-quote
   ======================================================================== */
.ed-vfilm {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  max-width: 980px;
  margin: clamp(2rem, 5vh, 3rem) auto 0;
  text-decoration: none;
  color: inherit;
}
@media (max-width: 760px) { .ed-vfilm { grid-template-columns: 1fr; } }

.ed-vfilm__poster {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: rgba(253, 251, 248, 0.06);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
}
.ed-vfilm__poster img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease-out);
}
.ed-vfilm:hover .ed-vfilm__poster img { transform: scale(1.03); }
.ed-vfilm__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(253, 251, 248, 0.95);
}
.ed-vfilm__play svg {
  width: 4.25rem; height: 4.25rem;
  padding: 1.25rem;
  border: 1px solid rgba(253, 251, 248, 0.55);
  border-radius: 50%;
  background: rgba(12, 10, 8, 0.35);
  backdrop-filter: blur(4px);
  transition: transform 0.5s var(--ease-out), background 0.5s var(--ease-out);
}
.ed-vfilm:hover .ed-vfilm__play svg { transform: scale(1.06); background: rgba(12, 10, 8, 0.55); }

.ed-vfilm__body { display: grid; gap: 0.7rem; justify-items: start; }
.ed-vfilm__tag {
  font-family: var(--font-sans);
  font-size: 0.56rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold-300);
}
.ed-vfilm__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 300; line-height: 1.15;
  color: var(--ivory-50);
}
.ed-vfilm__go {
  display: inline-flex; align-items: center; gap: 0.6em;
  margin-top: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-300);
  border-bottom: 1px solid rgba(217, 189, 133, 0.5);
  padding-bottom: 3px;
}
.ed-vfilm__go svg { width: 1em; height: 1em; transition: transform 0.4s var(--ease-out); }
.ed-vfilm:hover .ed-vfilm__go svg { transform: translateX(4px); }

.ed-vquote { margin: 0; text-align: center; }
.ed-vquote blockquote {
  position: relative;
  margin: 0;
  padding-top: clamp(1.5rem, 4vh, 2.25rem);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.8vw, 2.35rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.35;
  color: var(--text);
}
/* A short gold rule above, the same mark the eyebrows use. */
.ed-vquote blockquote::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  width: 3rem; height: 1px;
  transform: translateX(-50%);
  background: var(--ed-gold);
}
.ed-vquote figcaption {
  margin-top: 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--text-muted);
}

/* ===========================================================================
   VENUE PAGE — photograph behind the hero, and the map card
   The frame is the studio's own, from the wider archive, and the credit on
   the hero says so. Legibility comes from a directional gradient over the
   left third, the same treatment the site uses everywhere type meets a
   photograph: the picture is never veiled as a whole.
   ======================================================================== */
.ed-vhero__media { position: absolute; inset: 0; z-index: 0; }
.ed-vhero__media img {
  width: 100%; height: 100%; object-fit: cover;
  animation: edDrift 26s var(--ease-in-out) infinite alternate;
}
.ed-vhero--photo::before {
  z-index: 1;
  background:
    linear-gradient(to right, rgba(12, 10, 8, 0.88) 0%, rgba(12, 10, 8, 0.72) 34%, rgba(12, 10, 8, 0.28) 62%, rgba(12, 10, 8, 0.12) 100%),
    linear-gradient(to top, rgba(12, 10, 8, 0.92) 0%, rgba(12, 10, 8, 0.35) 38%, rgba(12, 10, 8, 0) 70%);
}
.ed-vhero--photo::after { z-index: 2; }
.ed-vhero--photo .ed-vhero__inner { position: relative; z-index: 3; }
.ed-vhero__credit {
  position: absolute;
  right: var(--gutter);
  bottom: 1.1rem;
  z-index: 3;
  font-family: var(--font-sans);
  font-size: 0.52rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(253, 251, 248, 0.55);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
@media (max-width: 700px) {
  .ed-vhero--photo::before {
    background:
      linear-gradient(to top, rgba(12, 10, 8, 0.96) 0%, rgba(12, 10, 8, 0.9) 55%, rgba(12, 10, 8, 0.55) 80%, rgba(12, 10, 8, 0.2) 100%);
  }
  /* The credit stays absolute here too. Made static it becomes a flex item
     beside the inner column -- the hero is a flex row -- and shoves the whole
     hero text into the right half of a phone screen. */
  .ed-vhero__credit { bottom: 0.8rem; font-size: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) { .ed-vhero__media img { animation: none; } }

.ed-vmap { margin: clamp(2rem, 5vh, 3rem) 0 0; }
.ed-vmap__frame {
  position: relative;
  min-height: 360px;
  background: var(--bg-alt);
  border: 1px solid var(--ed-rule);
  overflow: hidden;
}
.ed-vmap__frame iframe { display: block; width: 100%; height: 360px; border: 0; }
.ed-vmap__frame:not([data-loaded])::after {
  content: "Map";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-sans);
  font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--text-muted);
}
.ed-vmap figcaption {
  margin-top: 0.9rem;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-muted);
}
.ed-vmap figcaption b {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-sans);
  font-size: 0.56rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ed-gold);
}

/* The direct answer under the venue hero: one paragraph, set large. */
.ed-vanswer {
  position: relative;
  margin: 0 auto;
  padding-top: clamp(1.25rem, 3vh, 1.75rem);
  max-width: 62ch;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 300;
  line-height: 1.6;
  text-align: center;
  color: var(--text);
}
.ed-vanswer::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  width: 3rem; height: 1px;
  transform: translateX(-50%);
  background: var(--ed-gold);
}

/* Reviews page: full WeddingWire reviews. The headline leads, the first
   paragraph shows, and the rest of a long review folds under a toggle --
   still in the HTML, so every word stays crawlable. */
.ed-rev__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--text);
}
.ed-rev .ed-rev__body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.97rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-soft);
}
.ed-rev__body p + p, .ed-rev__more p { margin-top: 0.85em; }
.ed-rev__more summary {
  margin-top: 0.9rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ed-gold);
}
.ed-rev__more summary::-webkit-details-marker { display: none; }
.ed-rev__more summary::after { content: " +"; }
.ed-rev__more[open] summary::after { content: " ‘2"; }
.ed-stay__rtitle {
  display: block;
  margin: 0.4rem 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text);
}
.ed-stay__rev blockquote p + p { margin-top: 0.8em; }
.ed-stay__rev blockquote { font-style: normal; font-family: var(--font-sans); font-size: 0.98rem; line-height: 1.75; }


/* ===========================================================================
   PHOTOGRAPH AND TEXT, IN PROPORTION  (client note, 15 September)
   Every side-by-side row used a fixed tall aspect ratio on the photograph, so
   a half-width column always produced a ~756px image beside whatever text it
   had -- 200px of copy on Services, 340-490px elsewhere -- and the text sat in
   a band of empty space. Measured: fourteen rows across Services, About,
   Experience, the venues hub and the venue film card.

   On desktop the photograph now takes its height from the row: never shorter
   than its text, never taller than a sensible cap, filling its frame with
   object-fit. The text column is a touch wider and carries more weight, and
   it centres against the photograph. Phones already stack; nothing below
   901px changes.
   ======================================================================== */
@media (min-width: 901px) {
  .ed-service,
  .ed-chapter {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: stretch;
  }
  .ed-service--flip,
  .ed-chapter--flip {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }

  .ed-service > .ed-figure,
  .ed-chapter > .ed-figure {
    aspect-ratio: auto;
    align-self: stretch;
    min-height: clamp(320px, 25vw, 400px);
  }
  .ed-service > .ed-figure img,
  .ed-chapter > .ed-figure img {
    position: absolute;
    inset: 0;
    /* These frames are shorter than the portrait files they hold, so cover has
       to crop. Anchor the crop to the top of the photograph: faces sit in the
       upper half of a portrait, and centring the crop cut heads off. */
    object-position: 50% 0%;
  }

  /* The photograph and its words now begin and end on the same line. Centring
     the words left the picture hanging above and below them, which read as
     two columns of different heights. */
  .ed-service__body,
  .ed-chapter__body {
    align-self: stretch;
    align-content: space-between;
    padding-block: clamp(0.4rem, 1vw, 0.9rem);
  }
  .ed-service__body h2 { font-size: clamp(2rem, 3.4vw, 3.1rem); }
  .ed-service__body p { font-size: 1.06rem; }

  /* Venues hub, featured card: the 3:2 frame made a 442px photo beside 234px
     of text. */
  .ed-venue--featured .ed-venue__frame {
    aspect-ratio: auto;
    height: clamp(280px, 24vw, 340px);
  }
  .ed-venue--featured .ed-venue__frame img { object-position: 50% 0%; }
  .ed-venue--featured .ed-venue__body { gap: 1.3rem; }
  .ed-venue--featured .ed-venue__line { font-size: 1.08rem; }

  /* Venue film card: the poster stays 16:9, so the title carries more. */
  .ed-vfilm__body { gap: 0.95rem; }
  .ed-vfilm__title { font-size: clamp(1.75rem, 3vw, 2.6rem); }
}

/* Content Creation's photograph is deliberately vertical (a phone frame, set
   inline at 9:16). Stretching it to the row squeezed it to a 224px sliver;
   it keeps its own shape instead, at a width that sits level with the text. */
@media (min-width: 901px) {
  .ed-service > .ed-figure[style*="9/16"] {
    aspect-ratio: 9 / 16 !important;
    min-height: 0;
    max-width: 290px !important;
    width: 100%;
    align-self: center;
  }
}

/* ===========================================================================
   Quality pass -- empty background and dark rows
   Two plain sections in a row doubled their padding into one wide empty band;
   the second one now starts closer. A service row on a dark band inherited
   dark text and all but disappeared.
   ======================================================================== */
.ed-section:not(.ed-section--dark):not([style]) + .ed-section:not(.ed-section--dark):not([style]) {
  padding-top: clamp(1.25rem, 2.5vh, 2.25rem);
}
.ed-section--dark .ed-service__body h2 { color: #fff; }
.ed-section--dark .ed-service__body p { color: rgba(244, 239, 230, 0.78); }

/* A location page lists the venues we know in that region, each one a page of
   its own. */
.ed-vlinks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0;
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
  border-top: 1px solid var(--ed-rule);
}
.ed-vlink {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0.25rem;
  border-bottom: 1px solid var(--ed-rule);
  text-decoration: none;
  transition: padding-left var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ed-vlink:hover { padding-left: 0.6rem; }
.ed-vlink__name {
  font-family: var(--font-display);
  font-size: 1.06rem;
  color: var(--text);
}
.ed-vlink__where {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ed-vlink:hover .ed-vlink__where { color: var(--gold-600); }

/* A film says where it was made, and both doors from there are open. */
.ed-filmrel {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(1.25rem, 2.5vh, 1.75rem);
}

/* The portfolio shows three chapters and offers the next three, so the page
   does not open at seventeen thousand pixels. Without JavaScript, all six show. */
.pf-more { display: none; text-align: center; padding: clamp(2rem, 5vh, 3.5rem) var(--gutter); }
html.js .pf-more { display: block; }
html.js [data-pf-more]:not(.is-open) { display: none; }


/* New-client page: the form beside one smaller portrait. */
.nc {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding: calc(var(--header-h) + clamp(2rem, 5vh, 3.5rem)) clamp(16px, 5vw, 5rem) clamp(4rem, 10vh, 7rem);
  max-width: 1440px;
  margin-inline: auto;
}
.nc__media { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.nc__media img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; max-height: calc(100svh - var(--header-h) - 3rem); object-fit: cover; }
.nc__body { display: grid; gap: 1rem; min-width: 0; }
.nc__title { margin: 0; font-size: clamp(2.3rem, 3.6vw, 3.5rem); }
.nc__lead { margin-bottom: clamp(1rem, 3vh, 2rem); }
@media (max-width: 900px) {
  .nc { grid-template-columns: 1fr; }
  .nc__media { position: static; }
  .nc__media img { aspect-ratio: 16 / 10; max-height: 42svh; object-position: 50% 25%; }
}