/* ==========================================================================
   Wedding Invite Shortcode — stylesheet
   Black & white, black-tie-formal palette. All rules are scoped under
   .wi-root so they cannot leak into the host WordPress theme.
   ========================================================================== */

.wi-root, .wi-root *, .wi-root *::before, .wi-root *::after {
  box-sizing: border-box;
}

.wi-root {
  --wi-black: #0b0b0b;
  --wi-black-soft: #161616;
  --wi-panel: #1c1c1c;
  --wi-paper: #f7f4ee;
  --wi-paper-dim: #b8b2a6;
  --wi-line: rgba(247, 244, 238, 0.3);
  --wi-line-strong: rgba(247, 244, 238, 0.55);
  --wi-shadow: rgba(0, 0, 0, 0.55);
  --wi-gold: #b8975a;
  --wi-gold-soft: rgba(184, 151, 90, 0.55);

  --wi-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --wi-font-script: 'Cormorant Garamond', Georgia, serif;
  --wi-font-label: 'Tenor Sans', Helvetica, Arial, sans-serif;
  --wi-font-body: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --wi-t-flap: 1.3s;
  --wi-t-card: 1.8s;
  --wi-t-leave: 0.9s;
  --wi-t-reveal: 1.1s;
  --wi-ease: cubic-bezier(0.22, 1, 0.36, 1);

  font-family: var(--wi-font-body);
  color: var(--wi-paper);
  background: var(--wi-black);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
}


.wi-root img { max-width: 100%; display: block; }
.wi-root h1, .wi-root h2, .wi-root p { margin: 0; }
.wi-root a { color: inherit; }
.wi-root button { font: inherit; color: inherit; }

/* Floating music toggle */
.wi-sound-toggle {
  position: fixed;
  top: clamp(0.9rem, 3vw, 1.4rem);
  right: clamp(0.9rem, 3vw, 1.4rem);
  z-index: 500;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--wi-line-strong);
  background: rgba(11, 11, 11, 0.7);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--wi-paper);
  box-shadow: 0 6px 16px var(--wi-shadow);
  transition: opacity 0.6s var(--wi-ease), transform 0.4s var(--wi-ease);
}

.wi-sound-toggle[hidden] {
  display: flex;
  opacity: 0;
  pointer-events: none;
}

.wi-sound-toggle:hover {
  transform: scale(1.06);
}

.wi-sound-icon {
  width: 26px;
  height: 26px;
}

.wi-sound-wave {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.wi-sound-mute-x {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.wi-sound-toggle[aria-pressed="false"] .wi-sound-wave {
  opacity: 0;
}

.wi-sound-toggle[aria-pressed="false"] .wi-sound-mute-x {
  opacity: 1;
}

.wi-root .wi-eyebrow {
  font-family: var(--wi-font-label);
  font-size: clamp(0.68rem, 1.5vw, 0.8rem);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--wi-gold);
}

.wi-root .wi-section-title {
  font-family: var(--wi-font-display);
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  letter-spacing: 0.02em;
  color: var(--wi-gold);
  margin-top: 0.4rem;
}

.wi-root .wi-script {
  font-family: var(--wi-font-script);
  font-style: italic;
  font-weight: 500;
  color: var(--wi-paper);
  line-height: 1.25;
}

.wi-root .wi-note {
  margin-top: 1.4rem;
  font-size: 1.15rem;
  color: var(--wi-paper-dim);
  max-width: 30em;
  margin-left: auto;
  margin-right: auto;
}

.wi-root .wi-rule--center {
  width: 70px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wi-gold-soft), transparent);
  margin: 0.9rem auto 1.6rem;
}

/* ==========================================================================
   1. ENVELOPE SCREEN — animated opening
   ========================================================================== */

.wi-envelope-screen {
  /* pinned to the viewport (not just positioned in normal flow) so it
     overlays the main content directly — the blur crossfade dissolves
     smoothly in place instead of the page jumping when this disappears */
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 1.75rem);
  padding: clamp(2rem, 6vw, 4rem) 1.25rem;
  text-align: center;
  overflow: hidden;
  background: var(--wi-black);
  transition: opacity var(--wi-t-leave) var(--wi-ease), filter var(--wi-t-leave) var(--wi-ease), transform var(--wi-t-leave) var(--wi-ease);
}

.wi-envelope-screen.wi-leaving {
  opacity: 0;
  filter: blur(18px);
  transform: scale(0.94);
  pointer-events: none;
}

.wi-envelope-screen.wi-hidden {
  display: none;
}

.wi-intro-eyebrow {
  font-family: var(--wi-font-label);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  font-size: clamp(0.7rem, 2vw, 0.85rem);
  color: var(--wi-gold);
}

.wi-intro-family {
  font-family: var(--wi-font-display);
  font-style: italic;
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  color: var(--wi-paper);
  margin-top: -0.1rem;
  margin-bottom: 0.5rem;
}

/* the clickable envelope */
.wi-envelope-btn {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: block;
  position: relative;
  width: min(86vw, 360px);
}

.wi-envelope-btn:focus-visible {
  outline: 2px solid var(--wi-paper);
  outline-offset: 10px;
  border-radius: 4px;
}

.wi-envelope-3d {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  perspective: 1400px;
  filter: drop-shadow(0 30px 20px rgba(0, 0, 0, 0.35)) drop-shadow(0 14px 40px var(--wi-shadow));
}

@media (prefers-reduced-motion: no-preference) {
  .wi-envelope-3d {
    animation: wi-float 5.5s ease-in-out infinite;
  }
}

.wi-envelope-btn:hover .wi-envelope-3d,
.wi-envelope-btn:focus-visible .wi-envelope-3d {
  animation-play-state: paused;
  transform: translateY(-5px);
  transition: transform 0.5s var(--wi-ease);
}

/* envelope back panel — the full body of the envelope. Layered gradients
   + a soft sheen give it depth instead of reading as a flat rectangle. */
.wi-env-back {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.08), transparent 55%),
    linear-gradient(155deg, #232323 0%, var(--wi-panel) 45%, var(--wi-black-soft) 100%);
  border: 1px solid var(--wi-line-strong);
  box-shadow:
    inset 0 0 0 5px var(--wi-black),
    inset 0 0 0 6px var(--wi-line),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  z-index: 1;
}

/* the invitation card — fully hidden until the open animation reveals it,
   so the envelope always reads as sealed at rest */
.wi-env-card {
  position: absolute;
  left: 78%;
  bottom: 9%;
  width: 42%;
  padding: clamp(0.85rem, 3.5vw, 1.35rem) 0.7rem;
  transform: translateX(-50%) translateY(14%) rotate(4deg) scale(0.92);
  opacity: 0;
  background: linear-gradient(165deg, #141414 0%, var(--wi-black) 100%);
  border: 1px solid var(--wi-line-strong);
  box-shadow:
    inset 0 0 0 3px var(--wi-black),
    inset 0 0 0 4px var(--wi-line),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 30px var(--wi-shadow);
  border-radius: 2px;
  z-index: 3;
  transition: transform var(--wi-t-card) cubic-bezier(0.65, 0, 0.35, 1), opacity calc(var(--wi-t-card) * 0.6) var(--wi-ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.wi-env-card-sprig {
  display: block;
  width: clamp(26px, 7%, 34px);
  height: auto;
  margin-bottom: 0.1rem;
  color: var(--wi-paper-dim);
}

.wi-env-card-monogram {
  font-family: var(--wi-font-display);
  font-size: clamp(0.85rem, 2.4vw, 1.05rem);
  letter-spacing: 0.08em;
  background: linear-gradient(120deg, #cfcfcf 0%, #ffffff 30%, #9a9a9a 55%, #ffffff 80%, #cfcfcf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wi-env-card-title {
  font-family: var(--wi-font-script);
  font-style: italic;
  font-size: clamp(1.05rem, 4vw, 1.35rem);
  line-height: 1.15;
  color: var(--wi-paper);
}

.wi-env-card-date {
  font-family: var(--wi-font-label);
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  letter-spacing: 0.25em;
  color: var(--wi-gold);
  margin-top: 0.2rem;
}

/* a small photo that emerges alongside the card, like a polaroid tucked
   in the envelope — desaturated to match the black & white treatment */
.wi-env-polaroid {
  position: absolute;
  left: 28%;
  bottom: 11%;
  width: 48%;
  padding: 5% 5% 14%;
  background: var(--wi-black);
  border: 1px solid var(--wi-line-strong);
  box-shadow: 0 14px 26px var(--wi-shadow);
  opacity: 0;
  transform: translateX(-50%) translateY(20%) rotate(-9deg) scale(0.9);
  transition: transform var(--wi-t-card) cubic-bezier(0.65, 0, 0.35, 1), opacity calc(var(--wi-t-card) * 0.6) var(--wi-ease);
  z-index: 2;
}

.wi-env-polaroid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 62%;
  display: block;
  filter: grayscale(1) contrast(1.05);
}

/* bottom pocket — a solid panel that always hides the card's lower half */
.wi-env-pocket {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 18%),
    linear-gradient(180deg, var(--wi-black-soft) 0%, var(--wi-black) 100%);
  border-top: 1px solid var(--wi-line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  z-index: 4;
}

.wi-env-corner {
  position: absolute;
  display: block;
  bottom: 4%;
  width: 26%;
  height: auto;
  color: var(--wi-line-strong);
  opacity: 0.85;
  transform-origin: bottom center;
}

.wi-env-corner--left {
  left: 4%;
  transform: rotate(-38deg);
}

.wi-env-corner--right {
  right: 4%;
  transform: scaleX(-1) rotate(-38deg);
}

/* top flap — folds open like a real envelope */
.wi-env-flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 60%;
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(255, 255, 255, 0.09), transparent 60%),
    linear-gradient(165deg, #202020 0%, var(--wi-black-soft) 55%, var(--wi-panel) 100%);
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  transform-origin: top center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10%;
  transition: transform var(--wi-t-flap) cubic-bezier(0.45, 0, 0.55, 1), opacity var(--wi-t-flap) var(--wi-ease);
}

.wi-env-flap::before {
  /* fold crease down the center, like a real pressed paper seam */
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
}

.wi-env-flap::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  border: 1px solid var(--wi-line-strong);
  border-bottom: none;
  pointer-events: none;
}

.wi-env-seal {
  width: clamp(38px, 9.5%, 50px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a3a3a, var(--wi-black) 70%);
  border: 1px solid var(--wi-gold);
  box-shadow: 0 4px 12px var(--wi-shadow), inset 0 0 0 1px rgba(184, 151, 90, 0.35), inset 0 0 0 3px rgba(11, 11, 11, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wi-font-display);
  font-size: clamp(0.6rem, 1.7vw, 0.75rem);
  letter-spacing: 0.03em;
  color: var(--wi-gold);
}

/* opening sequence, driven by data-opening="flap" then data-opening="card" */
.wi-envelope-btn[data-opening] .wi-envelope-3d {
  animation: none;
}

.wi-envelope-btn[data-opening] .wi-env-flap {
  transform: rotateX(-170deg);
  opacity: 0.85;
}

.wi-envelope-btn[data-opening="card"] .wi-env-card {
  opacity: 1;
  transform: translateX(-50%) translateY(-64%) rotate(4deg) scale(1.05);
}

.wi-envelope-btn[data-opening="card"] .wi-env-polaroid {
  opacity: 1;
  transform: translateX(-50%) translateY(-92%) rotate(-9deg) scale(1);
}

.wi-tap-hint {
  font-family: var(--wi-font-label);
  font-size: clamp(0.68rem, 2vw, 0.8rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--wi-paper-dim);
  opacity: 0.85;
}

@keyframes wi-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ==========================================================================
   2. MAIN INVITATION CONTENT
   ========================================================================== */

.wi-main {
  display: none;
  opacity: 0;
  filter: blur(16px);
  transform: scale(0.97);
}

.wi-main.wi-revealed {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  transition: opacity var(--wi-t-reveal) var(--wi-ease), filter var(--wi-t-reveal) var(--wi-ease), transform var(--wi-t-reveal) var(--wi-ease);
}

.wi-section {
  padding: clamp(3rem, 8vw, 5rem) 1.25rem;
  text-align: center;
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}

/* ==========================================================================
   Hero — the black & white slideshow centerpiece, full-screen, mobile
   first. Each photo carries its own object-position (set inline from
   PHP, per photo) pointing at its actual subject — a face, a ring — so
   the crop this full-screen size requires still keeps that subject in
   frame instead of cutting it off. Solid black text bars top and bottom
   mean text never sits on top of photo pixels, so it's always legible
   and never at risk of covering a face, no matter which of the five
   photos is currently showing.
   ========================================================================== */

.wi-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  background: var(--wi-black);
}

.wi-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.wi-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* all 5 slideshow photos share a matching landscape crop, so `cover`
     now fills the frame consistently for every slide without the
     mixed-orientation crop problem the mixed-aspect set used to cause */
  object-fit: cover;
  object-position: 50% 38%;
  filter: grayscale(1) contrast(1.08);
  opacity: 0;
  transition: opacity 2.4s var(--wi-ease);
}

.wi-slide.is-active {
  opacity: 1;
}

.wi-hero::before {
  /* soft vignette so the black bars blend into the photo, not a hard cut */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0.55) 0%, transparent 16%, transparent 84%, rgba(11, 11, 11, 0.6) 100%);
  pointer-events: none;
}

.wi-hero-top,
.wi-hero-bottom {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 1.25rem;
  color: var(--wi-paper);
  text-align: center;
  background: var(--wi-black);
}

.wi-hero-top {
  padding-top: clamp(2rem, 6vw, 3rem);
  padding-bottom: clamp(1.5rem, 4vw, 2rem);
}

.wi-hero-bottom {
  padding-top: clamp(1.5rem, 4vw, 2rem);
  padding-bottom: clamp(2rem, 6vw, 3rem);
}

.wi-hero-top .wi-eyebrow {
  color: var(--wi-paper-dim);
}

.wi-hero-names-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.3rem, 2vw, 1rem);
  margin-top: 0.5rem;
  max-width: 100%;
}

.wi-hero-sprig {
  display: none;
  flex-shrink: 0;
  width: clamp(24px, 5vw, 38px);
  height: auto;
  color: var(--wi-paper-dim);
  opacity: 0.85;
}

@media (min-width: 560px) {
  .wi-hero-sprig {
    display: block;
  }
}

.wi-hero-sprig--left { transform: rotate(-90deg); }
.wi-hero-sprig--right { transform: rotate(90deg); }

.wi-hero-top .wi-names {
  font-family: var(--wi-font-display);
  font-style: italic;
  font-size: clamp(2.1rem, 8vw, 3.8rem);
  margin: 0;
  color: var(--wi-paper);
  line-height: 1.1;
}

.wi-hero-top .wi-monogram {
  font-family: var(--wi-font-display);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  letter-spacing: 0.14em;
  color: var(--wi-gold);
  margin-top: 0.9rem;
}

.wi-hero-bottom .wi-rule--center {
  margin: 0 auto 1rem;
}

.wi-hero-bottom .wi-date {
  font-family: var(--wi-font-label);
  font-size: clamp(1.15rem, 3.5vw, 1.6rem);
  letter-spacing: 0.2em;
}

.wi-hero-bottom .wi-place {
  font-family: var(--wi-font-label);
  letter-spacing: 0.32em;
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  color: var(--wi-paper-dim);
  margin-top: 0.6rem;
}

.wi-slide-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.wi-slide-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wi-line);
  transition: background 0.5s var(--wi-ease), transform 0.5s var(--wi-ease);
}

.wi-slide-dot.is-active {
  background: var(--wi-gold);
  transform: scale(1.3);
}

/* Countdown */
.wi-countdown-section {
  background: var(--wi-black-soft);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: clamp(3rem, 7vw, 4.5rem);
  padding-bottom: clamp(3rem, 7vw, 4.5rem);
  border-top: 1px solid var(--wi-line);
  border-bottom: 1px solid var(--wi-line);
}

.wi-countdown-big {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(0.5rem, 2.5vw, 1.1rem);
  margin-top: 1.75rem;
  flex-wrap: wrap;
}

.wi-cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.2em;
}

.wi-cd-unit span {
  font-family: var(--wi-font-display);
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-variant-numeric: tabular-nums;
  color: var(--wi-paper);
  line-height: 1;
}

.wi-cd-unit small {
  margin-top: 0.4rem;
  font-family: var(--wi-font-label);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wi-paper-dim);
}

.wi-cd-sep {
  font-family: var(--wi-font-display);
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  color: var(--wi-gold-soft);
  transform: translateY(-0.5em);
}

.wi-countdown-caption {
  margin-top: 1.75rem;
  font-family: var(--wi-font-label);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--wi-paper-dim);
}

.wi-countdown-caption em {
  font-style: italic;
  font-family: var(--wi-font-script);
  font-size: 1.5em;
  text-transform: none;
  letter-spacing: 0;
  color: var(--wi-paper);
}

/* Details section */
.wi-details-section {
  padding-top: clamp(3.5rem, 9vw, 5.5rem);
}

.wi-follow-note {
  margin-top: 2rem;
  font-size: clamp(1.3rem, 4vw, 1.7rem);
}

/* Save the date form */
.wi-save-section {
  background: var(--wi-black-soft);
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: clamp(3.5rem, 9vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 9vw, 5.5rem);
  border-top: 1px solid var(--wi-line);
}

.wi-save-form {
  margin: 2.5rem auto 0;
  max-width: 460px;
  text-align: left;
  display: grid;
  gap: 1.1rem;
}

.wi-field label {
  display: block;
  font-family: var(--wi-font-label);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wi-paper-dim);
  margin-bottom: 0.45rem;
}

.wi-field input,
.wi-field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: var(--wi-font-body);
  font-size: 1.1rem;
  color: var(--wi-paper);
  background: var(--wi-black);
  border: 1px solid var(--wi-line-strong);
  border-radius: 0;
  transition: border-color 0.4s var(--wi-ease);
}

.wi-field input:focus,
.wi-field textarea:focus {
  outline: none;
  border-color: var(--wi-gold);
}

.wi-field textarea { resize: vertical; min-height: 70px; }

.wi-save-submit {
  justify-self: start;
  margin-top: 0.25rem;
  padding: 0.85rem 2.4rem;
  background: var(--wi-black);
  color: var(--wi-paper);
  border: 1px solid var(--wi-line-strong);
  cursor: pointer;
  font-family: var(--wi-font-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.78rem;
  transition: background 0.4s var(--wi-ease), color 0.4s var(--wi-ease), border-color 0.4s var(--wi-ease);
}

.wi-save-submit:hover, .wi-save-submit:focus-visible {
  background: var(--wi-gold);
  color: var(--wi-black);
  border-color: var(--wi-gold);
}

.wi-save-status {
  font-size: 0.9rem;
  color: var(--wi-paper-dim);
  min-height: 1.2em;
}

/* Closing */
.wi-closing {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(4rem, 12vw, 7rem) 1.5rem;
  text-align: center;
  background: var(--wi-black);
}

.wi-closing-script {
  font-size: clamp(1.8rem, 5.5vw, 2.4rem);
}

.wi-closing-date {
  margin-top: 1.1rem;
  font-family: var(--wi-font-label);
  font-size: 0.85rem;
  letter-spacing: 0.32em;
  color: var(--wi-gold);
}

/* Screen-reader only utility */
.wi-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}