/* ==========================================================================
   FONTS
   The approved faces, served from assets/fonts. Adobe Garamond Pro carries the
   display, Maison Neue the body and the navigation.

   Maison Neue is supplied in two cuts only, Demi and Extended Bold, so the
   body family has a single usable weight. Every font-weight below 600 in this
   stylesheet therefore renders in Demi rather than the lighter weights the
   layout was drawn with. See the note in REFERENCE.md.
   ========================================================================== */

@font-face {
  font-family: "AGaramond Pro";
  src: url("../assets/fonts/AGaramondPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "AGaramond Pro";
  src: url("../assets/fonts/AGaramondPro-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "AGaramond Pro";
  src: url("../assets/fonts/AGaramondPro-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "AGaramond Pro";
  src: url("../assets/fonts/AGaramondPro-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Demi is the only text cut supplied, so it answers for the whole 100-600
   range rather than letting the browser synthesise a lighter face. */
@font-face {
  font-family: "Maison Neue";
  src: url("../assets/fonts/Maison Neue Demi.ttf") format("truetype");
  font-weight: 100 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Maison Neue Extended";
  src: url("../assets/fonts/Maison Neue Extended Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   St. Stephen’s Uraidla - Phase 1 enquiry site (mockup)

   Design read: premium-consumer venue landing for couples and planners,
   heritage-architectural language, native CSS, restrained scroll motion.
   Dials: DESIGN_VARIANCE 7 / MOTION_INTENSITY 6 / VISUAL_DENSITY 3.

   Palette note: oxblood and clay are taken directly from the client's own
   Instagram mark, so the warm-heritage accent family is brand-mandated, not
   a default reach. The neutrals are deliberately cool plaster and charcoal
   rather than the usual cream and espresso, to keep it off the stock
   warm-craft stack.

   Radius system: all-sharp, radius 0, everywhere.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* neutrals - dark theme */
  --plaster: #171614;
  --plaster-lift: #201e1c;
  --charcoal: #12110f;

  /* The supplied brand palette: #4C392F brown, #DCC4B4 clay, #DECFBF sand.
     The oxblood is the original site value rather than the sheet's #623234,
     by request. */
  --oxblood: #63302f;
  --brown: #4C392F;
  --clay: #DCC4B4;
  --sand: #DECFBF;
  /* Dark grounds take the oxblood rather than a deeper invention. */
  --oxblood-deep: var(--oxblood);

  /* roles */
  --ground: var(--plaster);
  --ground-lift: var(--plaster-lift);

  /* Section grounds. Every section picks one, so consecutive sections always
     step in tone rather than running together. */
  --band-0: #ffffff;   /* the one light block, by request */
  --band-1: #171614;   /* base           */
  --band-2: #211d1a;   /* one step up    */
  --band-3: #2e2723;   /* warmest step   */
  --section-bg: var(--band-1);
  --ink: #ecebe7;
  --ink-soft: #c3beb7;
  --ink-quiet: #a49d95;
  --accent: #c9917f;
  --on-accent: #171614;
  --line: rgba(236, 235, 231, 0.18);

  --display: "AGaramond Pro", "Adobe Garamond Pro", "Garamond", Georgia, serif;
  --body: "Maison Neue", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  /* Extended Bold is supplied but the events guide never uses it. Kept
     declared in case a future lockup calls for it. */
  --display-wide: "Maison Neue Extended", var(--body);

  --gutter: clamp(1.5rem, 5vw, 6rem);
  --section: clamp(4.5rem, 11vw, 9rem);
  --shell: 1400px;

  /* Header nav and the header CTA share one type scale. */
  --nav-size: clamp(0.8125rem, 0.9vw, 0.9375rem);
  --nav-tracking: 0.16em;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow: 0.9s;
  --medium: 0.45s;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

/* A section that also carries .shell must stay full bleed, or its background
   stops at 1400px and leaves bare edges on wide screens. The width limit
   moves onto the padding instead, so the content still lines up. */
.section.shell {
  max-width: none;
  padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2));
}
.section { padding-block: var(--section); }

/* ---- atoms -------------------------------------------------------------- */

/* Rationed: the hero carries the only eyebrow above the fold, and the
   enquiry section carries the second. Two total across six sections. */
.eyebrow {
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin: 0 0 1.25rem;
  max-width: none;
}
.eyebrow--onphoto { color: var(--clay); }

.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: var(--nav-size);
  font-weight: 600;
  letter-spacing: var(--nav-tracking);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 1.1rem 2.5rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: background-color var(--medium) var(--ease),
              color var(--medium) var(--ease),
              transform 0.12s var(--ease);
}
.btn:hover { background: transparent; color: var(--accent); }
.btn:active { transform: translateY(1px); }

/* Ghost CTA sits on photography, so it carries its own scrim and stroke. */
.btn--onphoto {
  background: rgba(31, 30, 28, 0.42);
  backdrop-filter: blur(2px);
  border-color: rgba(253, 252, 250, 0.75);
  color: #fdfcfa;
}
.btn--onphoto:hover { background: #fdfcfa; color: var(--oxblood); border-color: #fdfcfa; }

/* The arch, taken from the client's mark, masking real photography. */
.arch { clip-path: url(#archMask); }

/* ---- reveal ------------------------------------------------------------- */
/* Motivated: sequences content as the visitor moves down, so the building
   is read one space at a time rather than arriving all at once. */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .hero__mark { opacity: 1; transform: none; animation: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---- header ------------------------------------------------------------- */

/* Three zones: nav left, wordmark centred, CTA right. The centre column is
   the optical anchor, so it is a true grid rather than space-between. */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  min-height: 76px;
  display: flex;
  align-items: center;
  color: #fdfcfa;
  transition: background-color var(--slow) var(--ease),
              color var(--slow) var(--ease),
              box-shadow var(--slow) var(--ease);
}
.header__inner {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
}
.header__left { justify-self: start; min-width: 0; }
.header__centre { justify-self: center; min-width: 0; }
.header__right { justify-self: end; flex-shrink: 0; }

/* Scrim so nav and wordmark stay legible over photography. Fades out once
   the header takes a solid ground. */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(23, 22, 20, 0.55), rgba(23, 22, 20, 0));
  transition: opacity var(--slow) var(--ease);
}
.header.is-stuck::before { opacity: 0; }

/* Against the solid dark header the button drops its photographic scrim and
   stands as a white outline, which is the strongest pairing on this ground. */
.header.is-stuck .btn--onphoto {
  background: transparent;
  border-color: rgba(253, 252, 250, 0.8);
  color: #fdfcfa;
  backdrop-filter: none;
}
.header.is-stuck .btn--onphoto:hover {
  background: #fdfcfa;
  border-color: #fdfcfa;
  color: #171614;
}

/* Visible focus for keyboard users, on any ground. */
.btn:focus-visible,
.nav a:focus-visible,
.wordmark:focus-visible,
.footer a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.header .btn--onphoto:focus-visible { outline-color: #fdfcfa; }
.header.is-stuck {
  background: var(--ground);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}

/* Wordmark, centred. The arch mark is not repeated here: it carries the
   hero, and doubling it in the header would halve its weight. */
.wordmark { display: flex; align-items: center; justify-content: center; text-decoration: none; color: inherit; line-height: 1; }
/* The lockup as the events guide sets it: AGaramond Pro Bold, uppercase, at
   0.15em tracking. The guide uses no other face for the wordmark. */
.wordmark span {
  font-family: var(--display);
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.wordmark small {
  display: block;
  font-family: var(--body);
  font-size: 0.5625rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  margin-top: 0.4rem;
  opacity: 0.78;
}

.btn--compact {
  font-family: var(--display);
  font-size: var(--nav-size);
  font-weight: 600;
  letter-spacing: var(--nav-tracking);
  line-height: 1;
  padding: 0.85rem 1.6rem;
}

/* Footer keeps the horizontal lockup. */
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; }
.brand svg { width: 1.1rem; height: auto; fill: currentColor; }
.brand span {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  line-height: 1;
}
.brand small {
  display: block;
  font-family: var(--body);
  font-size: 0.5625rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin-top: 0.35rem;
  opacity: 0.75;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.75rem);
  line-height: 1;
  font-family: var(--display);
  font-size: var(--nav-size);
  font-weight: 600;
  letter-spacing: var(--nav-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}
.nav a {
  color: inherit;
  text-decoration: none;
  position: relative;
  line-height: 1;
  padding-bottom: 0;
}
.nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 -0.45em 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--medium) var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }

.nav-toggle { display: none; }

/* ---- hero --------------------------------------------------------------- */

/* Centred by intent, not by default: the client asked for the mark to hold
   the middle of the landing area, and the facade it sits against is
   symmetrical. The composition mirrors the building. */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  justify-items: stretch;
  text-align: center;
  overflow: hidden;
  color: #fdfcfa;
}
.hero__media {
  position: absolute;
  inset: 0;
  background: var(--oxblood-deep) center 62% / cover no-repeat;
  animation: kenburns 28s var(--ease) infinite alternate;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(23, 22, 20, 0.5) 0%,
    rgba(23, 22, 20, 0.1) 34%,
    rgba(23, 22, 20, 0.8) 100%);
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }

/* The mark alone holds the landing area. Nothing competes with it. */
.hero__mark {
  position: relative;
  z-index: 2;
  justify-self: center;
  width: clamp(5rem, 9vw, 8.5rem);
  height: auto;
  fill: #fdfcfa;
  opacity: 0;
  transform: translateY(24px);
  animation: rise 1.5s var(--ease) 0.3s forwards;
}

/* ---- statement (below the fold) ----------------------------------------- */
/* The headline pays off the mark once the visitor commits to scrolling. */

.statement { --section-bg: var(--band-1); background: var(--section-bg); text-align: center; }

/* Heading pins mid viewport. The lead frame passes it first, the trailing
   frame is offset down so it arrives after. Storytelling: two beats, not one. */
/* One frame per row, alternating side. The row gap sets the vertical rhythm,
   so the distance between consecutive frames is identical at every width.
   The heading spans the whole block and the frames pass beneath it. */
.statement__flank {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 5vw, 5rem);
  row-gap: 0;
  padding-block: 14vh;
  align-items: start;
}
.statement__f1 { grid-column: 1; grid-row: 1; justify-self: start; }
.statement__f2 { grid-column: 2; grid-row: 2; justify-self: end; }
.statement__f3 { grid-column: 1; grid-row: 3; justify-self: start; }
/* Sized from the viewport height, so the row rhythm below is exact: each
   frame is 48vh tall and each row advances by the same 48vh. */
.statement__flank .figure {
  aspect-ratio: 3 / 4;
  height: 48vh;
  width: auto;
  max-width: 100%;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .statement { view-timeline-name: --stmt; view-timeline-axis: block; }
    .statement__inner {
      animation: stmtFade linear both;
      animation-timeline: --stmt;
      animation-range: entry 0% exit 100%;
    }
    @keyframes stmtFade {
      0%   { opacity: 0; }
      22%  { opacity: 1; }
      78%  { opacity: 1; }
      100% { opacity: 0; }
    }
  }
}

/* The trailing column carries two frames, so they arrive one after the other
   while the heading holds. */

/* Lifted out of flow, so the frames alone size the grid rows and the spacing
   between them stays even. The heading still pins as the block scrolls. */
.statement__inner {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.statement__inner h1 {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  margin-inline: auto;
}
.statement h1 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.75rem, 3.05vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 auto 1.25rem;
  max-width: min(34ch, 40vw);
  text-wrap: balance;
  /* Sits over photography, so it carries its own soft lift. */
  text-shadow: 0 1px 28px rgba(23, 22, 20, 0.55);
}
.statement__lede {
  font-size: clamp(1rem, 1.1vw, 1.1875rem);
  color: var(--ink-soft);
  max-width: 38rem;
  margin-inline: auto;
}

@keyframes rise { to { opacity: 1; transform: none; } }

/* ---- the space ---------------------------------------------------------- */

.space__intro { max-width: 46rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.space__intro h2 { font-size: clamp(2rem, 4.6vw, 3.75rem); margin-bottom: 1.5rem; }
.space__intro p { color: var(--ink-soft); font-size: 1.1875rem; }

.space__layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.space__figure { aspect-ratio: 3 / 4; background: var(--clay) center/cover no-repeat; }

/* Four facts as tiles, not a hairline spec sheet. */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); margin: 0; padding: 0; list-style: none; }
.facts li { background: var(--section-bg); padding: clamp(1.5rem, 3vw, 2.25rem); }
.facts b {
  display: block;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.facts span { color: var(--ink-soft); font-size: 1rem; }

/* ---- events ------------------------------------------------------------- */
/* Asymmetric on purpose: one lead use, two supporting. Not three equal cards. */

.events { --section-bg: var(--band-3); background: var(--section-bg); }
.events h2 { font-size: clamp(2rem, 4.6vw, 3.75rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 18ch; }

.events__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.events__lead h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 1rem; }
.events__lead p { color: #4a4744; font-size: 1.125rem; }
.events__lead .space__figure { margin-top: 2rem; aspect-ratio: 16 / 10; }

.events__rest { display: grid; gap: 2.5rem; }
.events__item h3 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.events__item p { color: #4a4744; font-size: 1rem; }
.events__item { padding-top: 1.5rem; border-top: 1px solid rgba(31, 30, 28, 0.25); }

/* ---- history ------------------------------------------------------------ */

.history { position: relative; color: #fdfcfa; background: var(--oxblood-deep); overflow: hidden; }
.history__media { position: absolute; inset: -10% 0; background: center/cover no-repeat; opacity: 0.28; }

/* Drift, via scroll-driven animation. No scroll listener. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .history__media {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes drift { from { transform: translateY(-4%); } to { transform: translateY(4%); } }
  }
}

.history__inner { position: relative; z-index: 2; max-width: 44rem; }
.history h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); margin-bottom: 1.75rem; }
.history p { color: rgba(253, 252, 250, 0.88); }

/* ---- gallery ------------------------------------------------------------ */

.gallery { --section-bg: var(--band-1); background: var(--section-bg); }
.gallery h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }


/* ---- enquire ------------------------------------------------------------ */

.enquire { background: var(--ground-lift); }
.enquire__layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2.5rem, 6vw, 5.5rem); }
.enquire h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); margin-bottom: 1.5rem; }
.enquire__aside p { color: var(--ink-soft); }
.enquire__contact { margin-top: 2.25rem; font-size: 1rem; line-height: 2; }
.enquire__contact a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.25em; }

.form { display: grid; gap: 1.4rem; }

/* Three shared rows: label, control, hint. Each field opts into them with
   subgrid, so labels, underlines and hints line up across the pair even when
   only one of them carries a hint. */
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 0.45rem 1.4rem;
  align-items: start;
}
.form__row > .field {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  gap: 0;
}

.field { display: grid; gap: 0.45rem; }
.field label { font-size: 0.9375rem; letter-spacing: 0.01em; color: var(--ink-quiet); }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0.6rem 0;
  min-height: 2.75rem;
  width: 100%;
  transition: border-color var(--medium) var(--ease);
}

/* Native select boxes are a different height and metric to inputs, so they
   are reset and given the same chevron in every browser. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238a8078' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.1rem center;
  background-size: 0.7rem;
}

/* Labels and hints sit on their own rows, so they never shift the controls. */
.field label { align-self: end; }
.field__hint, .field__error { align-self: start; margin-top: 0.45rem; }
.field input::placeholder { color: var(--ink-quiet); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid transparent;
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}
.field textarea { resize: vertical; min-height: 4.5rem; }
.field__hint { font-size: 0.8125rem; color: var(--ink-quiet); margin: 0.45rem 0 0; }
.field__error { font-size: 0.8125rem; color: var(--accent); display: none; margin: 0.45rem 0 0; }
.field.has-error .field__error { display: block; }
.field.has-error input, .field.has-error select { border-bottom-color: var(--oxblood); }

.form__actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.form__note { font-size: 0.875rem; color: var(--ink-quiet); margin: 0; }

.form__status { display: none; padding: 1.25rem 1.5rem; background: var(--clay); color: var(--charcoal); font-size: 1rem; }
.form__status.is-shown { display: block; }

.btn[aria-busy="true"] { opacity: 0.65; pointer-events: none; }

/* ---- footer ------------------------------------------------------------- */

/* Footer takes the header's ground so the page opens and closes the same. */
.footer {
  background: var(--ground);
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.25rem;
  font-size: 0.9375rem;
}
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--accent); }
.footer .brand { color: var(--ink); }

/* Footer nav matches the header nav exactly. */
.footer__links {
  font-family: var(--display);
  font-size: var(--nav-size);
  font-weight: 600;
  letter-spacing: var(--nav-tracking);
  text-transform: uppercase;
}
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; padding-bottom: 2.25rem; border-bottom: 1px solid var(--line); }
.footer__links { display: flex; gap: 1.75rem; align-items: center; flex-wrap: wrap; }
/* Studio credit. The mark keeps its own brand colours, so the dark concept
   uses the reversed file and the light concept the primary one. */
.credit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}
.credit img {
  display: block;
  width: 4.25rem;
  height: auto;
  opacity: 0.85;
  transition: opacity var(--medium) var(--ease);
}
.credit:hover img { opacity: 1; }

.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.75rem; font-size: 0.8125rem; color: var(--ink-quiet); }

/* ---- responsive --------------------------------------------------------- */

@media (max-width: 1200px) {
  :root { --nav-size: 0.8125rem; --nav-tracking: 0.12em; }
  .nav { gap: 0.8rem; }
  .btn--compact { padding: 0.7rem 1.35rem; }
  .header__inner { padding-inline: 1.75rem; gap: 1.25rem; }
}

@media (max-width: 1000px) {
  .events__grid { grid-template-columns: 1fr; }
  }

@media (max-width: 1024px) {
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    background: var(--oxblood);
    color: #fdfcfa;
    font-size: 1.125rem;
    gap: 1.75rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--medium) var(--ease);
  }
  .nav.is-open { opacity: 1; pointer-events: auto; }

  .nav-toggle {
    display: block;
    position: relative;
    z-index: 2;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0.5rem 0;
  }

  /* Zones hold on mobile: toggle left, wordmark centred, CTA right. */
  .header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding-inline: 1rem;
  }
  :root { --nav-size: 0.75rem; --nav-tracking: 0.1em; }
  .btn--compact { padding: 0.6rem 1.1rem; }
  .wordmark span { font-size: 0.9375rem; letter-spacing: 0.12em; }
  .wordmark small { font-size: 0.5rem; letter-spacing: 0.3em; }

  .space__layout, .enquire__layout, .form__row, .facts { grid-template-columns: 1fr; }
  .space__figure { aspect-ratio: 4 / 3; }
    .g-wide, }

/* ==========================================================================
   BOLD PASS
   Imagery leads. Sections hand off through full-bleed bands rather than
   stacking on a flat ground, and every image resolves as it enters.
   Motion raised to MOTION_INTENSITY 7, each move justified below.
   ========================================================================== */

/* ---- scroll-driven image resolve ---------------------------------------
   Storytelling: the frame settles as you arrive at it, so scrolling feels
   like walking up to each space rather than paging through a brochure. */

.figure { position: relative; margin: 0; overflow: hidden; background: var(--clay); }
.figure > img,
.figure > .figure__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.14);
  transition: transform 1.6s var(--ease);
}
.figure.is-visible > .figure__img { transform: scale(1); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .figure > .figure__img {
      transform: none;
      transition: none;
      animation: resolve linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 42%;
    }
    @keyframes resolve { from { transform: scale(1.14); } to { transform: scale(1); } }
  }
}

/* ---- full-bleed band ----------------------------------------------------
   Hierarchy: a single image at full width resets the eye between chapters
   and carries one line of copy, nothing more. */

.band {
  position: relative;
  min-height: 92dvh;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: #fdfcfa;
  isolation: isolate;
}
.band--tall { min-height: 108dvh; }

.band__media { position: absolute; inset: -8% 0; z-index: -2; }
.band__media .figure__img { width: 100%; height: 100%; object-fit: cover; }
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(23,22,20,0.34) 0%, rgba(23,22,20,0.05) 40%, rgba(23,22,20,0.78) 100%);
}

/* Parallax on the band image. Depth cue, keeps the page from feeling flat. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band__media {
      animation: bandDrift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes bandDrift { from { transform: translateY(-5%); } to { transform: translateY(5%); } }
  }
}

.band__copy {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3.5rem, 9vh, 6.5rem);
}
.band__copy h2 {
  font-size: clamp(2.5rem, 6.5vw, 6rem);
  line-height: 0.98;
  max-width: 16ch;
  margin: 0;
}
.band__copy p {
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
  max-width: 34rem;
  opacity: 0.92;
}

/* ---- editorial pair -----------------------------------------------------
   Two frames at different heights, offset vertically. Breaks the flat grid
   without becoming another left-image right-text row. */

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
}
.pair .figure:first-child { aspect-ratio: 4 / 5; }
.pair .figure:last-child { aspect-ratio: 3 / 4; margin-top: clamp(3rem, 10vw, 9rem); }

/* ---- use cases, image-led ----------------------------------------------- */

.uses { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2.25rem); }
.use .figure { aspect-ratio: 4 / 5; margin-bottom: 1.5rem; }
.use:nth-child(2) { margin-top: clamp(2rem, 6vw, 5rem); }
.use h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); margin-bottom: 0.6rem; }
.use p { font-size: 1rem; color: var(--ink-soft); max-width: 32ch; }

/* ---- gallery, editorial mosaic ------------------------------------------ */

/* Uniform row track, and cells span whole rows. Nothing half fills a row. */
.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(7rem, 11vw, 12rem);
  gap: clamp(0.5rem, 1.2vw, 1rem);
}
.mosaic .figure { height: 100%; }
.m-a { grid-column: span 3; grid-row: span 3; }
.m-b { grid-column: span 3; grid-row: span 3; }
.m-c { grid-column: span 2; grid-row: span 2; }
.m-d { grid-column: span 4; grid-row: span 2; }
.m-e { grid-column: span 4; grid-row: span 2; }
.m-f { grid-column: span 2; grid-row: span 2; }

/* ---- rail: breadth without a wall of tiles ------------------------------ */

.rail {
  display: grid;
  grid-auto-flow: column;
  --rail-gap: clamp(0.75rem, 1.5vw, 1.25rem);
  --rail-per-view: 3;
  grid-auto-columns: calc(
    (100% - (var(--rail-per-view) - 1) * var(--rail-gap)) / var(--rail-per-view)
  );
  gap: var(--rail-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail .figure { aspect-ratio: 4 / 5; scroll-snap-align: start; }

/* Bolder section headings across the page. */
.space__intro h2,
.events h2,
.gallery h2,
.history h2 { font-size: clamp(2.25rem, 5.4vw, 4.5rem); }

@media (max-width: 900px) {
  .pair, .uses { grid-template-columns: 1fr; }
  .pair .figure:last-child, .use:nth-child(2) { margin-top: 0; }
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(6rem, 18vw, 10rem); }
  .m-a, .m-b { grid-column: span 2; grid-row: span 3; }
  .m-c, .m-f { grid-column: span 1; grid-row: span 2; }
  .m-d, .m-e { grid-column: span 2; grid-row: span 2; }
  .rail { --rail-per-view: 1; }

  .band { min-height: 78dvh; }
}

/* ==========================================================================
   FULL-SCALE PASS
   Sections are either full-screen or a two-column split where the image
   column runs the full height of the viewport. No small pictures.
   ========================================================================== */

/* ---- split: text one side, viewport-height image the other --------------- */

.split-full {
  --section-bg: var(--band-2);
  background: var(--section-bg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 100dvh;
}
.split-full--flip .split-full__media { order: -1; }

.split-full__media { position: relative; overflow: hidden; min-height: 60dvh; }
.split-full__media .figure__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.split-full__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 8vw, 7rem) clamp(1.5rem, 6vw, 6rem);
}
.split-full__body h2 {
  font-size: clamp(2.25rem, 4.4vw, 4.25rem);
  line-height: 1.02;
  margin-bottom: 1.5rem;
  max-width: 16ch;
}
.split-full__body p { font-size: clamp(1.0625rem, 1.25vw, 1.25rem); color: var(--ink-soft); }
.split-full__body .btn { align-self: flex-start; margin-top: 2.25rem; }

/* Tone variants keep the theme family: plaster, clay, or oxblood ground. */
.split-full--clay { --section-bg: var(--band-3); background: var(--section-bg); }
.split-full--clay .split-full__body p { color: #4a4744; }
.split-full--dark {
  --section-bg: var(--oxblood-deep);
  --line: rgba(253, 252, 250, 0.22);
  background: var(--section-bg);
  color: #fdfcfa;
}
.split-full--dark .facts b { color: var(--clay); }
.split-full--dark .facts span { color: rgba(253, 252, 250, 0.82); }
.split-full--dark .split-full__body p { color: rgba(253, 252, 250, 0.86); }

/* ---- full-screen call to action ----------------------------------------- */

.cta {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  justify-items: center;
  text-align: center;
  overflow: hidden;
  color: #fdfcfa;
  isolation: isolate;
}
.cta__media { position: absolute; inset: -8% 0; z-index: -2; }
.cta__media .figure__img { width: 100%; height: 100%; object-fit: cover; }
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(23, 22, 20, 0.52);
}
.cta--tall { min-height: 108dvh; }

/* No photography behind this one. Clay ground keeps it distinct from the
   plaster gallery above and the oxblood section below. */
.cta--plain {
  --section-bg: var(--band-0);
  background: var(--section-bg);
  color: #26231f;
  min-height: 72dvh;
}
.cta--plain p { color: #4b4741; }
.cta--plain .btn { border-color: var(--oxblood); background: var(--oxblood); color: #fdfcfa; }
.cta--plain .btn:hover { background: transparent; color: var(--oxblood); }
.cta--plain::after { content: none; }
.cta__inner { position: relative; z-index: 1; padding-inline: var(--gutter); max-width: 52rem; }
.cta h2 {
  font-size: clamp(2.125rem, 4.4vw, 3.875rem);
  line-height: 1.04;
  margin: 0 auto 1.5rem;
  max-width: 22ch;
  text-wrap: balance;
}
.cta p { margin: 0 auto 2.5rem; font-size: clamp(1.125rem, 1.4vw, 1.3125rem); opacity: 0.92; max-width: 32rem; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cta__media {
      animation: bandDrift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

/* ---- packages ------------------------------------------------------------ */
/* Two options at full width, stacked, each with a viewport-scale image. */

#hire, #stories { --section-bg: var(--band-2); background: var(--section-bg); }
.hire { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.hire__item { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hire__item:nth-child(even) { grid-template-columns: 1fr 1.35fr; }
.hire__item:nth-child(even) .figure { order: 2; }
.hire__item .figure { aspect-ratio: 16 / 11; }
.hire__item h3 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); margin-bottom: 1rem; }
.hire__item p { color: var(--ink-soft); }

.hire__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.hire__list li { display: flex; gap: 0.9rem; font-size: 1rem; color: var(--ink-soft); }
.hire__list li::before { content: ""; flex: 0 0 1px; width: 1px; height: 1.2em; background: var(--accent); opacity: 0.6; }

.hire__note { margin-top: clamp(2rem, 4vw, 3rem); font-size: 1rem; color: var(--ink-quiet); }

/* ---- wedding stories ----------------------------------------------------- */

.stories__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
.story .figure { aspect-ratio: 3 / 4; margin-bottom: 1.5rem; }
.story:nth-child(2) { margin-top: clamp(2rem, 5vw, 4rem); }
.story blockquote {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.7vw, 1.625rem);
  line-height: 1.35;
}
.story cite {
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

@media (max-width: 900px) {
  .split-full, .hire__item, .hire__item:nth-child(even), .stories__grid { grid-template-columns: 1fr; }
  .statement__flank { grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center; }
  .statement__f1, .statement__f2, .statement__f3 { grid-column: auto; grid-row: auto; margin: 0; }
  .statement__flank .statement__inner {
    grid-column: 1 / -1;
    order: -1;
    position: static;
    opacity: 1;
    animation: none;
    pointer-events: auto;
    margin-bottom: 2.5rem;
  }
  .statement__inner h1 { position: static; height: auto; display: block; }
  .statement h1 { text-shadow: none; }
  .statement__flank { row-gap: 1rem; padding-block: 0; }
  .split-full { min-height: 0; }
  .split-full--flip .split-full__media, .hire__item:nth-child(even) .figure { order: 0; }
  .split-full__media { min-height: 62dvh; }
  .story:nth-child(2) { margin-top: 0; }
  .cta { min-height: 84dvh; }
}


/* ==========================================================================
   FULL SCREEN IMAGE EXPANSION
   The frame begins small and centred, then grows to fill the viewport as the
   section passes through. Storytelling: the room opens up as you approach it.
   ========================================================================== */

.expand {
  position: relative;
  height: 260vh;
  background: var(--band-1);
}

.expand__sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.expand__frame {
  position: relative;
  margin: 0;
  width: min(34vw, 22rem);
  height: min(62vh, 34rem);
  overflow: hidden;
  background: var(--clay);
}

.expand__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.expand__scrim {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: rgba(23, 22, 20, 0.42);
}

.expand__copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  padding-inline: var(--gutter);
  text-align: center;
  color: #fdfcfa;
  opacity: 0;
}
.expand__copy h2 {
  font-size: clamp(2.125rem, 4.4vw, 3.875rem);
  line-height: 1.04;
  max-width: 22ch;
  margin: 0 auto 1.25rem;
  text-wrap: balance;
}
.expand__copy p { margin: 0 auto 2rem; max-width: 32rem; opacity: 0.92; }

/* Scroll driven. The tall section is the timeline, the sticky frame reads it. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .expand { view-timeline-name: --expand; view-timeline-axis: block; }

    .expand__frame {
      animation: frameGrow linear both;
      animation-timeline: --expand;
      animation-range: entry 95% cover 48%;
    }
    .expand__scrim,
    .expand__copy {
      animation: fadeUp linear both;
      animation-timeline: --expand;
      animation-range: cover 34% cover 52%;
    }

    @keyframes frameGrow {
      from { width: min(34vw, 22rem); height: min(62vh, 34rem); }
      to   { width: 100%; height: 100%; }
    }
    @keyframes fadeUp { from { opacity: 0; } to { opacity: 1; } }
  }
}

/* No scroll timeline support, or reduced motion: show it full size, static. */
@supports not (animation-timeline: view()) {
  .expand { height: auto; }
  .expand__sticky { position: static; }
  .expand__frame { width: 100%; height: 100dvh; }
  .expand__scrim, .expand__copy { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .expand { height: auto; }
  .expand__sticky { position: static; }
  .expand__frame { width: 100%; height: 100dvh; }
  .expand__scrim, .expand__copy { opacity: 1; }
}

@media (max-width: 1024px) {
  .expand { height: 200vh; }
  .expand__frame { width: min(62vw, 20rem); height: min(52vh, 26rem); }
}


/* ==========================================================================
   STICKY CONTENT SWITCH
   Heading pinned on the left, frames pass on the right. The heading swaps to
   whichever frame is crossing the middle of the viewport.
   Feedback: the words always describe the picture you are looking at.
   ========================================================================== */

.switch {
  --section-bg: var(--band-2);
  background: var(--section-bg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  padding-inline: clamp(2rem, 8vw, 9rem);
}

.switch__left { position: relative; }

.switch__sticky {
  position: sticky;
  top: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3rem, 8vh, 6rem);
}

.switch__title {
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  line-height: 1.04;
  margin-bottom: clamp(3.5rem, 8vw, 6rem);
}

/* Panels stack in one place and cross fade. */
.switch__panels { position: relative; }
.switch__panel {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--medium) var(--ease), transform var(--medium) var(--ease);
}
.switch__panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.switch__panel h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); margin-bottom: 1.25rem; }
.switch__panel p { color: var(--ink-soft); max-width: 40ch; }

/* First panel holds the height so the block does not collapse. */
.switch__panel:first-child { position: relative; }

.switch__right { display: grid; gap: clamp(2rem, 6vh, 5rem); padding-block: clamp(2rem, 8vh, 6rem); }
.switch__figure {
  margin: 0;
  overflow: hidden;
  background: var(--clay);
  aspect-ratio: 4 / 5;
}
.switch__figure .figure__img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .switch { grid-template-columns: 1fr; gap: 0; }
  .switch__sticky { position: static; min-height: 0; padding-block: clamp(3rem, 8vw, 5rem) 1.5rem; }
  .switch__panel { position: relative; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 2rem; }
  .switch__panels { display: grid; gap: 0; }
  .switch__right { gap: 1.25rem; padding-block: 0 clamp(3rem, 8vw, 5rem); }
}

/* ==========================================================================
   LANDING BACKGROUND VIDEO
   Vimeo in background mode: no controls, muted, looping. The still sits
   underneath as the poster, and shows through while the player loads, on
   reduced motion, and anywhere the embed is blocked.
   ========================================================================== */

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* A real video element covers by object-fit, no ratio arithmetic needed. */
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Scrim over the footage, so the mark holds. Sits above the video, below
   the mark, as its own layer since a video cannot carry a pseudo element. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(23, 22, 20, 0.5) 0%,
    rgba(23, 22, 20, 0.12) 34%,
    rgba(23, 22, 20, 0.8) 100%);
}

.hero__mark { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* ==========================================================================
   PROGRESSIVE IMAGE REVEAL
   Each frame opens upward behind a mask while the picture inside settles from
   an overscale. The two move against each other, so the subject stays
   composed while the frame grows into place. Scroll driven, so the visitor
   controls the pace, and it plays once on the way down.
   ========================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Frames that sit in the page. Full bleed backgrounds are excluded, since
       they are ground rather than content. */
    .mosaic .figure,
    .rail .figure,
    .statement__flank .figure,
    .hire__item .figure,
    .story .figure,
    .switch__figure,
    .split-full__media {
      animation: frameOpen linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
      will-change: clip-path;
    }

    .mosaic .figure .figure__img,
    .rail .figure .figure__img,
    .statement__flank .figure .figure__img,
    .hire__item .figure .figure__img,
    .story .figure .figure__img,
    .switch__figure .figure__img,
    .split-full__media .figure__img {
      animation: frameSettle linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 55%;
      will-change: transform;
    }

    @keyframes frameOpen {
      from { clip-path: inset(0 0 100% 0); }
      to   { clip-path: inset(0 0 0 0); }
    }

    /* Counter movement: the picture drifts up as the frame opens down. */
    @keyframes frameSettle {
      from { transform: scale(1.28) translateY(2.5%); }
      to   { transform: scale(1) translateY(0); }
    }

    /* Cascade across a row so a grid resolves left to right rather than
       snapping in as one block. */
    .mosaic .figure:nth-child(2) { animation-range: entry 14% cover 44%; }
    .mosaic .figure:nth-child(3) { animation-range: entry 18% cover 48%; }
    .mosaic .figure:nth-child(4) { animation-range: entry 12% cover 42%; }
    .mosaic .figure:nth-child(5) { animation-range: entry 16% cover 46%; }
    .mosaic .figure:nth-child(6) { animation-range: entry 20% cover 50%; }

    .rail .figure:nth-child(2) { animation-range: entry 15% cover 45%; }
    .rail .figure:nth-child(3) { animation-range: entry 20% cover 50%; }

    .story:nth-child(2) .figure { animation-range: entry 16% cover 46%; }
    .story:nth-child(3) .figure { animation-range: entry 22% cover 52%; }

    /* The older blanket scale is replaced by the pairing above. */
    .figure > .figure__img { animation-name: none; }
    .mosaic .figure .figure__img,
    .rail .figure .figure__img,
    .statement__flank .figure .figure__img,
    .hire__item .figure .figure__img,
    .story .figure .figure__img,
    .switch__figure .figure__img,
    .split-full__media .figure__img { animation-name: frameSettle; }
  }
}