/* ==========================================================================
   THE INFLUENCE TABLE — gold
   --------------------------------------------------------------------------
   One section. Nothing on the page that is not on the emailer artwork.
   The photograph is not used — its palette is, as ambient light.
   The request form lives in a modal behind the button.

   Contents
     01. Design tokens
     02. Base
     03. Ambience (warm pools, vignette, grain)
     04. Gold foil (shared text treatment)
     05. The card — frame + corner ticks
     06. Seal
     07. Wordmark block
     08. Details, ask, closing
     09. Button
     10. Modal
     11. Form + fields
     12. Motion utilities
     13. Responsive
     14. Reduced motion
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   Every value below was sampled off the emailer JPEG with a canvas readback,
   so the page and the artwork are literally the same palette.
   ========================================================================== */
:root {

  /* --- Ground ----------------------------------------------------------
     The emailer is pure black edge to edge. --ink-950 is the barely-lifted
     tone used for input wells so a field reads as a recess, not a hole.
     -------------------------------------------------------------------- */
  --ink-1000: #000000;
  --ink-975: #050403;
  --ink-950: #0B0906;
  --ink-925: #0F0C08;

  /* --- Gold ------------------------------------------------------------
     sealOuter #D8AA52 · titleRight #E7C063 · titleLeft #CFAA64
     titleMid  #E2C198 · sealText   #B3904E · presents   #9C8565
     -------------------------------------------------------------------- */
  --gold-hi: #F6E3B0;
  /* foil highlight — the catch of light  */
  --gold: #E7C063;
  /* the accent proper                    */
  --gold-mid: #CFAA64;
  --gold-deep: #B3904E;
  --gold-dim: #9C8565;
  /* PRESENTS, labels, quiet gold         */
  --gold-shadow: #6E5526;
  --gold-rgb: 231, 192, 99;

  /* --- Room tones ------------------------------------------------------
     Averaged out of the photograph, then used only as light. This is how
     the room stays in the page without the picture being in it.
       leather  #48301C / #5D3C19   tan chairs down both sides
       amber    #784409 / #F1A31B   the juice, the warmest thing in frame
       wood     #110E0C             the table itself
     -------------------------------------------------------------------- */
  --leather-rgb: 93, 60, 25;
  --amber-rgb: 241, 163, 27;
  --wood-rgb: 17, 14, 12;

  /* --- Text ------------------------------------------------------------
     Contrast against --ink-1000:
       --text-hi  #FFFEFB  ≈ 20.5:1  (AAA)
       --text-mid #C9C2B4  ≈ 12.0:1  (AAA)
       --text-low #8A8377  ≈  5.6:1  (AA)
       --gold     #E7C063  ≈ 11.4:1  (AAA)
       --gold-dim #9C8565  ≈  5.6:1  (AA)
     -------------------------------------------------------------------- */
  --text-hi: #FFFEFB;
  --text-mid: #C9C2B4;
  --text-low: #8A8377;

  /* --- Lines ------------------------------------------------------------ */
  --line: rgba(var(--gold-rgb), .16);
  --line-strong: rgba(var(--gold-rgb), .38);
  --line-cool: rgba(255, 255, 255, .12);

  /* --- Type ------------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-presents: clamp(.62rem, .56rem + .2vw, .74rem);
  --fs-the: clamp(1.3rem, .9rem + 1.9vw, 2.3rem);
  --fs-wordmark: clamp(1.7rem, .2rem + 7.9vw, 4rem);
  --fs-seats: clamp(.84rem, .74rem + .4vw, 1.1rem);
  --fs-detail: clamp(.76rem, .69rem + .34vw, .95rem);
  --fs-ask: clamp(.9rem, .8rem + .5vw, 1.18rem);
  --fs-input: clamp(.92rem, .88rem + .2vw, 1rem);
  --fs-label: .68rem;
  --fs-closing: clamp(.86rem, .76rem + .44vw, 1.14rem);

  --ls-wide: .34em;
  --ls-wordmark: .1em;

  /* --- Spacing ---------------------------------------------------------- */
  --space-2xs: .5rem;
  --space-xs: .9rem;
  --space-sm: 1.35rem;
  --space-md: 2.25rem;

  /* --- Motion: one curve, everywhere ------------------------------------ */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-base: 320ms;
  --dur-reveal: 1100ms;

  /* --- Layout ----------------------------------------------------------- */
  --stage: 720px;
  /* the emailer's own column, in CSS px   */
  --gutter: clamp(1.25rem, .5rem + 3vw, 2.5rem);
}


/* ==========================================================================
   02. BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink-1000);
  color: var(--text-mid);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Set by js/main.js while the modal is open, so the page behind cannot
   scroll away under it. */
body.is-locked {
  overflow: hidden;
}

::selection {
  background: rgba(var(--gold-rgb), .28);
  color: var(--text-hi);
}

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

/* One section, held in the middle of the viewport. svh, not vh, so mobile
   browser chrome cannot push the closing line out of reach. */
.stage {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, .75rem + 3vw, 2rem) var(--gutter);
}


/* ==========================================================================
   03. AMBIENCE
   Three warm pools and a vignette carry the room. The tones are the
   photograph's own, at the intensity of light rather than of paint — so
   the page reads as the same evening without showing it.
   ========================================================================== */
.ambience {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambience__pool {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
}

/* The table: a low amber wash across the bottom, brightest at centre. */
.ambience__pool--table {
  left: 50%;
  bottom: -34vh;
  width: min(150vw, 1500px);
  height: 62vh;
  transform: translateX(-50%);
  background: radial-gradient(closest-side,
      rgba(var(--amber-rgb), .13) 0%,
      rgba(var(--leather-rgb), .10) 45%,
      transparent 100%);
}

/* The two rows of chairs, as leather-brown haze down either edge. */
.ambience__pool--left,
.ambience__pool--right {
  top: 42%;
  width: 55vw;
  height: 70vh;
  background: radial-gradient(closest-side,
      rgba(var(--leather-rgb), .16) 0%,
      transparent 100%);
}

.ambience__pool--left {
  left: -26vw;
}

.ambience__pool--right {
  right: -26vw;
}

/* Pulls the corners back to true black so the type always sits on ground. */
.ambience__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 45%,
      transparent 0%,
      rgba(var(--wood-rgb), .55) 62%,
      var(--ink-1000) 100%);
}

/* A 2% noise tile. Without it the large near-black fields band on 8-bit
   displays, exactly where the pools and gradients sit. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 0;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ==========================================================================
   04. GOLD FOIL
   background-clip:text on one shared ramp. The sweep is a slow background
   pan, not a pseudo-element, so it never disturbs layout or selection.
   ========================================================================== */
:root {
  --foil: linear-gradient(100deg,
      var(--gold-shadow) 0%,
      var(--gold-deep) 14%,
      var(--gold) 30%,
      var(--gold-hi) 44%,
      var(--gold) 58%,
      var(--gold-deep) 74%,
      var(--gold-mid) 88%,
      var(--gold-hi) 100%);
}

.foil {
  background-image: var(--foil);
  background-size: 260% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: foil-sweep 9s var(--ease) infinite;
}

@keyframes foil-sweep {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}


/* ==========================================================================
   05. THE CARD
   A hairline frame with engraved corner ticks — the invitation as a
   printed card lying on the black table.
   ========================================================================== */
.card {
  position: relative;
  width: 100%;
  max-width: var(--stage);
  padding: clamp(2rem, 1.1rem + 3vw, 2.9rem) clamp(1.1rem, .4rem + 3vw, 3rem);
  text-align: center;
  container-type: inline-size;
  /* so the wordmark can size to the card */
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 120% 90% at 50% 0%,
      rgba(var(--gold-rgb), .035) 0%, transparent 60%),
    rgba(0, 0, 0, .35);
}

/* Ticks sit on the corners of the frame, overlapping it, so the border
   reads as scored rather than drawn. */
.card__tick {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 0 solid var(--gold-mid);
  opacity: .55;
}

.card__tick--tl {
  top: -1px;
  left: -1px;
  border-top-width: 1px;
  border-left-width: 1px;
}

.card__tick--tr {
  top: -1px;
  right: -1px;
  border-top-width: 1px;
  border-right-width: 1px;
}

.card__tick--bl {
  bottom: -1px;
  left: -1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
}

.card__tick--br {
  bottom: -1px;
  right: -1px;
  border-bottom-width: 1px;
  border-right-width: 1px;
}


/* ==========================================================================
   06. SEAL
   img/IIGC-logo.png is black artwork on transparency, so its alpha is the
   shape. Masking a gold-gradient box with it gives a crisp, resolution-
   independent gold seal — no second raster, no filter guesswork.
   ========================================================================== */
.seal {
  width: clamp(84px, 15vw, 118px);
  aspect-ratio: 1;
  margin: 0 auto clamp(1.1rem, .75rem + 1.6vw, 1.8rem);
  position: relative;
}

.seal::before {
  content: "";
  position: absolute;
  inset: -36%;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(var(--gold-rgb), .14) 0%,
      rgba(var(--gold-rgb), .04) 45%,
      transparent 70%);
  pointer-events: none;
}

.seal__mark {
  position: absolute;
  inset: 0;
  background-image: var(--foil);
  background-size: 260% 100%;
  background-position: 0% 50%;
  -webkit-mask: url("../img/IIGC-logo.png") center / contain no-repeat;
  mask: url("../img/IIGC-logo.png") center / contain no-repeat;
  animation: foil-sweep 9s var(--ease) infinite;
}

/* If masking is unavailable the mark would vanish; fall back to the raw
   artwork tinted to a flat gold rather than showing nothing. */
@supports not ((-webkit-mask: url("")) or (mask: url(""))) {
  .seal__mark {
    background: none;
    animation: none;
    filter: invert(1) sepia(1) saturate(2.4) hue-rotate(-15deg) brightness(.95);
  }
}


/* ==========================================================================
   07. WORDMARK BLOCK
   ========================================================================== */
.presents {
  margin: 0 0 clamp(.85rem, .6rem + 1.2vw, 1.5rem);
  font-size: var(--fs-presents);
  font-weight: 400;
  letter-spacing: var(--ls-wide);
  text-indent: var(--ls-wide);
  /* recentre optically — trailing tracking */
  text-transform: uppercase;
  color: var(--gold-dim);
}

.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.06;
  text-transform: uppercase;
}

/* "THE" sits between two hairlines that grow out of it on load. */
.wordmark__the {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.9rem, .5rem + 1.8vw, 2rem);
  font-size: var(--fs-the);
  letter-spacing: var(--ls-wide);
  text-indent: var(--ls-wide);
}

.wordmark__the .rule {
  display: block;
  height: 1px;
  flex: 0 1 clamp(44px, 13vw, 140px);
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1400ms var(--ease) 250ms;
}

.wordmark__the.is-in .rule {
  transform: scaleX(1);
}

/* "INFLUENCE TABLE" spans the card edge to edge at every width, as on the
   artwork. Measured: at 100px with 0.1em tracking the string sets 987px, so
   font-size = 0.94 x card / 9.872 = 9.5cqw leaves a hair of room for the
   trailing tracking. The clamp is the pre-container-query fallback and is
   deliberately a touch conservative. */
.wordmark__main {
  display: block;
  margin-top: clamp(.15rem, .1rem + .3vw, .4rem);
  font-size: var(--fs-wordmark);
  font-weight: 300;
  letter-spacing: var(--ls-wordmark);
  text-indent: var(--ls-wordmark);
  white-space: nowrap;
  /* A soft bloom under the foil — the artwork's own glow off black. */
  filter: drop-shadow(0 0 34px rgba(var(--gold-rgb), .22));
}

@supports (font-size: 1cqw) {
  .wordmark__main {
    font-size: 9.5cqw;
  }
}

.seats {
  margin: clamp(.75rem, .55rem + 1vw, 1.25rem) 0 0;
  font-size: var(--fs-seats);
  font-weight: 300;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: var(--text-hi);
}


/* ==========================================================================
   08. DETAILS, ASK, CLOSING
   ========================================================================== */
.hairline {
  display: block;
  width: clamp(84px, 20vw, 140px);
  height: 1px;
  margin: clamp(1.35rem, .95rem + 1.8vw, 2rem) auto;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.details__date,
.details__venue {
  margin: 0;
  font-size: var(--fs-detail);
  font-weight: 300;
  letter-spacing: .16em;
  text-indent: .16em;
  text-transform: uppercase;
  color: var(--text-hi);
}

.details__date sup {
  font-size: .6em;
  letter-spacing: 0;
}

.details__venue {
  margin-top: .5rem;
  color: var(--text-mid);
}

.ask {
  margin: clamp(1.6rem, 1.15rem + 2vw, 2.25rem) 0 clamp(1.1rem, .9rem + 1.2vw, 1.6rem);
  font-size: var(--fs-ask);
  font-weight: 300;
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
  color: var(--text-hi);
}

.actions__write {
  margin: var(--space-sm) 0 0;
  font-size: var(--fs-detail);
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mid);
}

.link {
  color: var(--text-hi);
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: color var(--dur-base) var(--ease);
}

.link:hover,
.link:focus-visible {
  color: var(--gold);
}

.closing {
  margin: clamp(1.75rem, 1.3rem + 2vw, 2.4rem) 0 0;
  font-size: var(--fs-closing);
  font-weight: 400;
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
}


/* ==========================================================================
   09. BUTTON
   Outline by default; gold wipes in from the left on hover with the label
   riding above it. .btn--solid starts filled, for the modal's primary.
   ========================================================================== */
.btn {
  position: relative;
  display: inline-block;
  min-width: min(100%, 280px);
  padding: .95rem 2rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--gold);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition:
    color var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--gold-deep), var(--gold), var(--gold-hi));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--ease);
}

.btn__label {
  position: relative;
  z-index: 1;
}

.btn:hover,
.btn:focus-visible {
  color: var(--ink-1000);
  border-color: var(--gold);
  box-shadow: 0 12px 44px -18px rgba(var(--gold-rgb), .55);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: scaleX(1);
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled] {
  cursor: default;
  opacity: .55;
}

.btn[disabled]::before {
  transform: scaleX(0);
}

/* The modal's primary: already filled, deepens on hover. */
.btn--solid {
  display: block;
  width: 100%;
  color: var(--ink-1000);
  border-color: var(--gold);
}

.btn--solid::before {
  transform: scaleX(1);
}

.btn--solid:hover,
.btn--solid:focus-visible {
  color: var(--ink-1000);
}

.btn--solid:hover::before,
.btn--solid:focus-visible::before {
  filter: brightness(1.12);
}

.btn--solid[disabled]::before {
  transform: scaleX(1);
}


/* ==========================================================================
   10. MODAL
   Hand-rolled — Bootstrap's JS bundle is not loaded. Open/close state is
   driven by [hidden] plus .is-open, so nothing animates from display:none.
   ========================================================================== */
.modal-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  overflow-y: auto;
}

.modal-root[hidden] {
  display: none;
}

.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}

.modal-root.is-open .modal__scrim {
  opacity: 1;
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: auto;
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%,
      rgba(var(--gold-rgb), .06) 0%, transparent 62%),
    var(--ink-975);
  border: 1px solid var(--line-strong);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .9);
  opacity: 0;
  transform: translateY(16px) scale(.985);
  transition:
    opacity var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}

.modal-root.is-open .modal__panel {
  opacity: 1;
  transform: none;
}

.modal__close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--text-low);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.modal__close:hover,
.modal__close:focus-visible {
  color: var(--gold);
  background: rgba(var(--gold-rgb), .08);
}

.modal__title {
  margin: 0 0 .5rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 400;
  letter-spacing: .12em;
  text-indent: .12em;
  text-transform: uppercase;
  text-align: center;
}

.modal__sub {
  margin: 0 0 clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  font-size: .8rem;
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-low);
}

/* --- Success state ------------------------------------------------------ */
.modal__done[hidden] {
  display: none;
}

.modal__done {
  text-align: center;
}

.modal__done-mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto clamp(1rem, .8rem + 1vw, 1.5rem);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--gold);
}

.modal__done .btn {
  margin-top: var(--space-md);
}


/* ==========================================================================
   11. FORM
   ========================================================================== */
.form {
  text-align: left;
}

.field+.field {
  margin-top: var(--space-sm);
}

.field__label {
  display: block;
  margin-bottom: .45rem;
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-dim);
  transition: color var(--dur-base) var(--ease);
}

.field:focus-within .field__label {
  color: var(--gold);
}

.field__input {
  width: 100%;
  padding: .82rem 1rem;
  background: var(--ink-950);
  border: 1px solid var(--line-cool);
  border-radius: 2px;
  color: var(--text-hi);
  font-family: inherit;
  font-size: var(--fs-input);
  font-weight: 300;
  letter-spacing: .02em;
  transition:
    border-color var(--dur-base) var(--ease),
    background-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.field__input::placeholder {
  color: var(--text-low);
  opacity: 1;
}

.field__input:hover {
  border-color: var(--line);
}

.field__input:focus {
  outline: none;
  background: var(--ink-925);
  border-color: var(--line-strong);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .07);
}

/* Only ever set by JS after a submit attempt — never on :invalid, which
   would flag every field the moment the modal opens. */
.field.is-invalid .field__input {
  border-color: rgba(216, 92, 72, .65);
}

.field.is-invalid .field__label {
  color: #D07E6C;
}

.field__error {
  margin: .35rem 0 0;
  min-height: 1.05em;
  font-size: .74rem;
  line-height: 1.4;
  letter-spacing: .04em;
  color: #D07E6C;
}

.form .btn {
  margin-top: var(--space-md);
}

.form__note {
  margin: var(--space-sm) 0 0;
  min-height: 1.4em;
  font-size: .78rem;
  letter-spacing: .08em;
  text-align: center;
  color: var(--text-low);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.form__note.is-shown {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   12. MOTION UTILITIES
   Everything animates transform + opacity only. .is-in is added by the
   staggered reveal in js/main.js.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-reveal) var(--ease),
    transform var(--dur-reveal) var(--ease);
}

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


/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */
@media (max-width: 575.98px) {
  :root {
    --ls-wide: .28em;
    --ls-wordmark: .06em;
  }

  .wordmark__the {
    gap: .8rem;
  }

  .btn {
    width: 100%;
    min-width: 0;
    padding-inline: 1rem;
    letter-spacing: .18em;
    text-indent: .18em;
  }

  .closing {
    letter-spacing: .16em;
    text-indent: .16em;
  }
}

/* Very short viewports (landscape phones): let the card scroll rather than
   crushing the rhythm to fit. */
@media (max-height: 620px) {
  .stage {
    min-height: 0;
    align-items: flex-start;
  }
}


/* ==========================================================================
   14. REDUCED MOTION
   Nothing may be left hidden — every animated state resolves to its end.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .wordmark__the .rule {
    transform: scaleX(1);
  }

  .modal__scrim {
    opacity: 1;
  }

  .modal__panel {
    opacity: 1;
    transform: none;
  }

  /* Park the foil mid-ramp so it still reads as gold, not as one flat end
     stop of the gradient. */
  .foil,
  .seal__mark {
    background-position: 50% 50%;
  }
}