/* ==========================================================================
   Kyriakos & Maria · September 12, 2026
   Printed-invitation editorial: warm ivory paper, warm ink, monochrome photo.
   Mobile-first. No build step.
   ========================================================================== */

/* ---------- Tokens ---------- */

:root {
  --paper: oklch(0.965 0.008 90);
  --paper-deep: oklch(0.93 0.01 88);
  --ink: oklch(0.21 0.01 75);
  --ink-soft: oklch(0.36 0.012 75);
  --muted: oklch(0.52 0.022 80);
  --line: oklch(0.21 0.01 75 / 0.16);
  --line-strong: oklch(0.21 0.01 75 / 0.34);
  --line-inverse: oklch(0.965 0.008 90 / 0.22);
  --bronze: oklch(0.55 0.05 70);

  --serif: "Bodoni Moda", "Bodoni MT", Didot, Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  /* fallback deliberately lands on the italic serif, never generic cursive */
  --script: "Pinyon Script", "Snell Roundhand", "Bodoni Moda", Georgia, serif;

  --gutter: clamp(1.25rem, 6vw, 4rem);
  --measure: 34rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset & base ---------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html,
body {
  overflow-x: clip;
}

body.is-locked {
  overflow: hidden;
}

/* Film grain over the whole page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, p, ol, li, figure {
  margin: 0;
  padding: 0;
}

ol {
  list-style: none;
}

img {
  max-width: 100%;
}

em {
  font-style: italic;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 1px solid var(--bronze);
  outline-offset: 4px;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Shared pieces ---------- */

.kicker {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

.kicker-inverse {
  color: oklch(0.965 0.008 90 / 0.6);
}

.kicker-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

.kicker-rule .rule {
  width: clamp(2rem, 6vw, 3.5rem);
  height: 1px;
  background: var(--line-strong);
}

/* Split-heading wrappers (added by JS only when animating) */
.split-line {
  display: block;
  overflow: hidden;
}

.split-inner {
  display: block;
}

/* ---------- Image frames ---------- */

.frame {
  position: relative;
  overflow: hidden;
  background: var(--paper-deep);
}

.frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(0.99);
}

/* warm paper cast over every photo */
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: oklch(0.9 0.025 85 / 0.16);
  mix-blend-mode: multiply;
}

/* Missing-image fallback: monogram + expected filename */
.frame.is-missing img {
  display: none;
}

.frame.is-missing::before {
  content: "K · M";
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  letter-spacing: 0.2em;
  color: oklch(0.21 0.01 75 / 0.3);
}

.frame.is-missing::after {
  content: attr(data-missing);
  background: none;
  mix-blend-mode: normal;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.9rem;
  font-family: var(--sans);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.21 0.01 75 / 0.35);
}

/* ---------- Text link ---------- */

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.25s var(--ease-out);
}

.text-link-label {
  position: relative;
  padding-bottom: 5px;
}

.text-link-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 0.35s var(--ease-out);
}

.text-link-arrow {
  transition: transform 0.35s var(--ease-out);
}

.text-link:hover,
.text-link:active {
  color: var(--bronze);
}

.text-link:hover .text-link-label::after {
  transform-origin: left;
  animation: link-underline 0.55s var(--ease-out);
}

.text-link:hover .text-link-arrow {
  transform: translateX(5px);
}

@keyframes link-underline {
  0%   { transform: scaleX(1); transform-origin: right; }
  49%  { transform: scaleX(0); transform-origin: right; }
  51%  { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

/* ==========================================================================
   Entrance gate
   ========================================================================== */

.entrance {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--ink);
  clip-path: inset(0 0 0 0);
}

.entrance-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
}

.entrance-backdrop img {
  filter: grayscale(1) contrast(1.02) brightness(0.9);
}

.entrance-backdrop::after {
  background: oklch(0.17 0.01 75 / 0.72);
  mix-blend-mode: normal;
}

.entrance-backdrop.is-missing::before {
  display: none;
}

.entrance-backdrop.is-missing::after {
  align-items: flex-end;
  color: oklch(0.965 0.008 90 / 0.25);
  background: none;
}

/* slow drifting light, like candlelight through a veil */
.entrance-veil {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(42% 34% at 28% 22%, oklch(0.5 0.03 85 / 0.14), transparent 70%),
    radial-gradient(50% 40% at 74% 78%, oklch(0.45 0.03 85 / 0.12), transparent 70%);
  animation: veil-drift 26s ease-in-out infinite alternate;
}

@keyframes veil-drift {
  from { transform: translate3d(-2%, -1.5%, 0) scale(1); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}

.entrance-frame {
  position: absolute;
  top: clamp(12px, 2.5vw, 22px);
  left: clamp(12px, 2.5vw, 22px);
  width: calc(100% - 2 * clamp(12px, 2.5vw, 22px));
  height: calc(100% - 2 * clamp(12px, 2.5vw, 22px));
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.entrance-frame-rect {
  fill: none;
  stroke: oklch(0.86 0.05 88 / 0.38);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ornament {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: oklch(0.86 0.05 88 / 0.55);
}

.ornament-rule {
  width: clamp(1.8rem, 6vw, 2.8rem);
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.ornament-gem {
  width: 5px;
  height: 5px;
  background: currentColor;
  transform: rotate(45deg);
}

.entrance-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.4rem, 4vh, 2.2rem);
  padding: var(--gutter);
  text-align: center;
}

.entrance-kicker {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: oklch(0.88 0.045 88 / 0.85);
}

.entrance-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.tap-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: oklch(0.86 0.05 88 / 0.65);
  stroke-width: 1.1;
  stroke-linecap: round;
}

.tap-icon .tap-dot {
  fill: oklch(0.86 0.05 88 / 0.75);
  stroke: none;
}

.entrance-hint {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: oklch(0.87 0.045 88 / 0.6);
  animation: hint-breathe 3.2s ease-in-out infinite;
}

@keyframes hint-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ---------- Envelope ---------- */

.envelope {
  width: min(90vw, 480px);
  aspect-ratio: 1.42;
  cursor: pointer;
  perspective: 1200px;
}

.envelope-tilt {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  transform: rotateX(4deg);
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-out);
  filter:
    drop-shadow(0 30px 50px oklch(0.06 0.006 75 / 0.55))
    drop-shadow(0 6px 14px oklch(0.06 0.006 75 / 0.35));
}

.envelope:hover .envelope-tilt,
.envelope:focus-within .envelope-tilt {
  transform: rotateX(1.5deg) translateY(-7px);
}

/* pocket interior, revealed once the flap lifts */
.env-back {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, oklch(0.895 0.014 88), oklch(0.855 0.015 88));
  border: 1px solid oklch(0.7 0.02 85 / 0.35);
}

/* the card inside the pocket */
.env-card {
  position: absolute;
  inset: 4.5% 6%;
  z-index: 2;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  text-align: center;
}

.env-card-frame {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  width: calc(100% - 22px);
  height: calc(100% - 22px);
  place-content: center;
  border: 1px solid var(--line);
  padding: 0.5rem;
}

.env-card-kicker {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
}

.env-card-names {
  font-family: var(--script);
  font-size: clamp(1.9rem, 8vw, 3rem);
  font-weight: 400;
  line-height: 1.25;
}

.env-card-names em {
  font-style: normal;
  color: var(--ink-soft);
}

.env-card-rule {
  width: 2.2rem;
  height: 1px;
  background: var(--line-strong);
}

.env-card-date {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* front pocket with the classic V cut */
.env-front {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    175deg,
    oklch(0.94 0.012 90),
    oklch(0.955 0.012 90) 42%,
    oklch(0.92 0.014 88) 100%
  );
  border: 1px solid oklch(0.72 0.025 85 / 0.4);
  clip-path: polygon(0 0, 50% 36%, 100% 0, 100% 100%, 0 100%);
}

/* corner creases: soft diagonal shading toward the center fold */
.env-front::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(63deg, oklch(0.6 0.02 85 / 0.1), transparent 30%),
    linear-gradient(-63deg, oklch(0.6 0.02 85 / 0.1), transparent 30%),
    linear-gradient(0deg, oklch(0.6 0.02 85 / 0.07), transparent 24%);
}

/* fine paper grain */
.env-front::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23p)' opacity='0.12'/%3E%3C/svg%3E");
}

.env-address {
  position: absolute;
  left: 0;
  right: 0;
  top: 77%;
  z-index: 1;
  font-family: var(--script);
  font-size: clamp(1.2rem, 4.6vw, 1.55rem);
  color: oklch(0.52 0.055 78);
  text-align: center;
}

.env-address em {
  font-style: normal;
}

.env-stamp {
  position: absolute;
  right: 5%;
  bottom: 7%;
  z-index: 1;
  display: grid;
  place-content: center;
  gap: 0.1rem;
  width: clamp(38px, 10vw, 48px);
  aspect-ratio: 0.85;
  border: 1px solid oklch(0.52 0.055 78 / 0.5);
  font-family: var(--serif);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: oklch(0.52 0.055 78);
  text-align: center;
}

.env-stamp span {
  display: block;
  font-family: var(--sans);
  font-size: 0.4375rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: oklch(0.52 0.055 78 / 0.75);
}

/* folding flap */
.env-flap {
  position: absolute;
  inset: 0 0 auto 0;
  height: 56%;
  z-index: 4;
  background: linear-gradient(
    180deg,
    oklch(0.965 0.01 90),
    oklch(0.94 0.013 88) 68%,
    oklch(0.905 0.015 87)
  );
  border: 1px solid oklch(0.72 0.025 85 / 0.4);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0%;
  filter: drop-shadow(0 5px 6px oklch(0.2 0.01 75 / 0.18));
}

/* wax-seal button at the flap tip */
.env-seal {
  position: absolute;
  left: 50%;
  top: 56%;
  z-index: 5;
  width: clamp(102px, 27vw, 130px);
  aspect-ratio: 1;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 47% 53% 50% 50% / 52% 48% 53% 47%;
  background: radial-gradient(
    circle at 36% 30%,
    oklch(0.99 0.012 92),
    oklch(0.955 0.018 90) 48%,
    oklch(0.905 0.025 87) 82%,
    oklch(0.865 0.03 85)
  );
  box-shadow:
    0 14px 28px oklch(0.08 0.008 75 / 0.45),
    0 3px 8px oklch(0.08 0.008 75 / 0.3),
    inset 0 2px 4px oklch(1 0 0 / 0.85),
    inset 0 -5px 10px oklch(0.62 0.035 82 / 0.4);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

/* embossed inner disc */
.env-seal::before {
  content: "";
  position: absolute;
  inset: 8.5%;
  border-radius: 50%;
  box-shadow:
    inset 0 2px 3px oklch(0.62 0.035 82 / 0.45),
    inset 0 -2px 3px oklch(1 0 0 / 0.7),
    0 1px 1px oklch(1 0 0 / 0.8);
}

.env-seal:hover {
  transform: translate(-50%, -50%) scale(1.045);
}

.env-seal:active {
  transform: translate(-50%, -50%) scale(0.94);
}

.env-seal:focus-visible {
  outline: 1px solid oklch(0.86 0.05 88 / 0.9);
  outline-offset: 6px;
}

.seal-ripple {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  border: 1px solid oklch(0.88 0.05 88 / 0.9);
  opacity: 0;
  pointer-events: none;
}

.seal-ring {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-box: fill-box;
  transform-origin: center;
  animation: seal-breathe 4.4s ease-in-out infinite;
}

@keyframes seal-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

.seal-spin {
  transform-origin: 100px 100px;
  animation: seal-rotate 48s linear infinite;
}

@keyframes seal-rotate {
  to { transform: rotate(360deg); }
}

.seal-text {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  fill: oklch(0.5 0.05 78 / 0.9);
}

.seal-monogram {
  font-family: var(--script);
  font-size: 58px;
  fill: oklch(0.42 0.05 76);
  text-anchor: middle;
  dominant-baseline: central;
}

.seal-amp {
  fill: oklch(0.5 0.05 78 / 0.8);
}

/* Non-GSAP fallback: the envelope still opens, with CSS transitions alone */
.entrance.is-open {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out) 1.9s;
}

.entrance.is-open .env-seal {
  opacity: 0;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  transform: translate(-50%, -50%) scale(0.8);
}

.entrance.is-open .env-flap {
  transform: rotateX(-168deg);
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.3s;
  z-index: 1;
}

.entrance.is-open .env-card {
  transform: translateY(-118%);
  transition: transform 1.1s var(--ease-out) 0.9s;
}

.entrance.is-done {
  display: none;
}

/* ==========================================================================
   Masthead
   ========================================================================== */

.masthead {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem var(--gutter);
  border-bottom: 1px solid oklch(0.965 0.008 90 / 0.16);
}

.masthead-left,
.masthead-right {
  display: none;
}

.masthead-cell {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: oklch(0.965 0.008 90 / 0.65);
  white-space: nowrap;
}

.masthead-center {
  font-size: 0.6875rem;
  color: oklch(0.965 0.008 90 / 0.9);
}

.masthead-right {
  text-align: right;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(5.5rem, 14vh, 8rem) var(--gutter) clamp(6.5rem, 16vh, 9rem);
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  overflow: hidden;
}

/* full-bleed photo with cinematic grade */
.hero-bg {
  position: absolute;
  inset: 0;
  background: var(--ink);
}

.hero-bg img {
  filter: grayscale(1) contrast(1.04) brightness(0.94);
}

/* vignette + top/bottom scrim so type stays readable on any photo */
.hero-bg::after {
  background:
    radial-gradient(ellipse at 50% 42%, transparent 32%, oklch(0.13 0.008 75 / 0.5) 100%),
    linear-gradient(
      180deg,
      oklch(0.13 0.008 75 / 0.45),
      oklch(0.13 0.008 75 / 0.14) 38%,
      oklch(0.13 0.008 75 / 0.62) 94%
    );
  mix-blend-mode: normal;
}

.hero-bg.is-missing::before {
  color: oklch(0.965 0.008 90 / 0.2);
}

.hero-bg.is-missing::after {
  color: oklch(0.965 0.008 90 / 0.3);
  background: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-eyebrow {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: oklch(0.965 0.008 90 / 0.7);
}

.hero-line {
  margin-top: clamp(1.3rem, 3.5vh, 2rem);
  font-family: var(--script);
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  line-height: 1.3;
  color: oklch(0.9 0.045 88);
}

.hero-names {
  margin-top: clamp(1rem, 3vh, 1.8rem);
  font-family: var(--serif);
  font-size: clamp(2.9rem, 13vw, 7.25rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hero-name {
  display: block;
  overflow: hidden;
}

.hero-amp {
  display: block;
  margin: 0.12em 0;
  font-family: var(--script);
  font-size: clamp(1.7rem, 7vw, 3.1rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: oklch(0.88 0.05 88);
}

.hero-divider {
  width: clamp(2.6rem, 8vw, 4rem);
  height: 1px;
  margin-top: clamp(1.7rem, 4.5vh, 2.6rem);
  background: oklch(0.88 0.05 88 / 0.75);
}

.hero-meta {
  margin-top: clamp(1.1rem, 3vh, 1.6rem);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: oklch(0.965 0.008 90 / 0.85);
}

.hero-scroll {
  position: absolute;
  bottom: clamp(1.4rem, 4vh, 2.4rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.hero-scroll-label {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: oklch(0.965 0.008 90 / 0.6);
}

.hero-scroll-rule {
  position: relative;
  width: 1px;
  height: clamp(2.2rem, 6vh, 3.2rem);
  background: oklch(0.965 0.008 90 / 0.25);
  overflow: hidden;
}

.hero-scroll-rule::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 38%;
  background: oklch(0.965 0.008 90 / 0.85);
  animation: scroll-hint 2.6s var(--ease-out) infinite;
}

@keyframes scroll-hint {
  0%   { transform: translateY(-110%); }
  60%  { transform: translateY(280%); }
  100% { transform: translateY(280%); }
}

/* ==========================================================================
   Invitation
   ========================================================================== */

.invitation {
  padding: clamp(5.5rem, 16vh, 10rem) var(--gutter);
  text-align: center;
}

.invitation-title {
  margin-top: clamp(1.8rem, 5vh, 2.8rem);
  font-family: var(--script);
  font-size: clamp(2.5rem, 9.5vw, 5rem);
  font-weight: 400;
  line-height: 1.25;
}

.invitation-body {
  max-width: var(--measure);
  margin: clamp(1.8rem, 5vh, 2.6rem) auto 0;
  font-size: clamp(0.9375rem, 2.5vw, 1.0625rem);
  line-height: 1.85;
  color: var(--ink-soft);
}

.invitation-names {
  margin-top: clamp(2.4rem, 6vh, 3.4rem);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 3.8vw, 1.5rem);
  letter-spacing: 0.04em;
}

.invitation-names em {
  color: var(--muted);
}

/* ==========================================================================
   Our Story
   ========================================================================== */

.story {
  display: grid;
  gap: clamp(2.4rem, 7vw, 5rem);
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(4rem, 11vh, 8rem) var(--gutter);
  border-top: 1px solid var(--line);
}

.story-frame {
  aspect-ratio: 3 / 4;
}

.story-caption {
  margin-top: 0.9rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--muted);
}

.story-kicker {
  margin-bottom: clamp(1.4rem, 4vh, 2.2rem);
}

.story-title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 9vw, 4.75rem);
  font-weight: 500;
  line-height: 1.04;
}

.story-title em {
  color: var(--ink-soft);
}

.story-body {
  max-width: var(--measure);
  margin-top: 1.4rem;
  font-size: clamp(0.9375rem, 2.5vw, 1.0625rem);
  line-height: 1.85;
  color: var(--ink-soft);
}

.story-title + .story-body {
  margin-top: clamp(1.8rem, 5vh, 2.6rem);
}

/* ==========================================================================
   Schedule (ink panel)
   ========================================================================== */

.schedule {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(5rem, 14vh, 9rem) var(--gutter);
  overflow: hidden;
}

.schedule-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
}

.schedule-backdrop img {
  filter: grayscale(1) contrast(1.02) brightness(0.9);
}

.schedule-backdrop::after {
  background: oklch(0.17 0.01 75 / 0.82);
  mix-blend-mode: normal;
}

.schedule-backdrop.is-missing::before {
  display: none;
}

.schedule-backdrop.is-missing::after {
  align-items: flex-end;
  color: oklch(0.965 0.008 90 / 0.25);
  background: none;
}

.schedule-inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
}

.schedule-title {
  margin-top: clamp(1.4rem, 4vh, 2.2rem);
  font-family: var(--serif);
  font-size: clamp(2.5rem, 9.5vw, 5rem);
  font-weight: 500;
  line-height: 1.05;
}

.schedule-list {
  margin-top: clamp(2.8rem, 8vh, 4.5rem);
}

.schedule-row {
  display: grid;
  gap: 0.5rem 2rem;
  padding: clamp(1.7rem, 5vh, 2.6rem) 0;
  border-top: 1px solid var(--line-inverse);
}

.schedule-row:last-child {
  border-bottom: 1px solid var(--line-inverse);
}

.schedule-time {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 9vw, 4.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}

.schedule-ampm {
  margin-left: 0.35em;
  font-family: var(--sans);
  font-size: 0.24em;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  vertical-align: 0.9em;
  color: oklch(0.965 0.008 90 / 0.6);
}

.schedule-event {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  font-weight: 500;
  line-height: 1.2;
}

.schedule-venue {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(0.965 0.008 90 / 0.78);
}

.schedule-address {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: oklch(0.965 0.008 90 / 0.55);
}

.dresscode {
  margin-top: clamp(3.2rem, 9vh, 5rem);
  padding: clamp(1.8rem, 5vh, 2.6rem) 0;
  border-top: 1px solid var(--line-inverse);
  border-bottom: 1px solid var(--line-inverse);
  text-align: center;
}

.dresscode-label {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: oklch(0.965 0.008 90 / 0.55);
}

.dresscode-name {
  margin-top: 1rem;
  font-family: var(--script);
  font-size: clamp(2.1rem, 7.5vw, 3.2rem);
  line-height: 1.3;
}

.dresscode-name em {
  font-style: normal;
}

.dresscode-note {
  margin-top: 0.8rem;
  font-size: 0.875rem;
  color: oklch(0.965 0.008 90 / 0.65);
}

/* ==========================================================================
   Countdown (photo panel)
   ========================================================================== */

.countdown {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(6rem, 18vh, 11rem) var(--gutter);
  text-align: center;
  overflow: hidden;
}

.countdown-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
}

.countdown-backdrop img {
  filter: grayscale(1) contrast(1.02) brightness(0.9);
}

.countdown-backdrop::after {
  background: oklch(0.17 0.01 75 / 0.76);
  mix-blend-mode: normal;
}

.countdown-backdrop.is-missing::before {
  display: none;
}

.countdown-backdrop.is-missing::after {
  align-items: flex-end;
  color: oklch(0.965 0.008 90 / 0.25);
}

.countdown-content {
  position: relative;
  z-index: 1;
}

.countdown-title {
  margin-top: clamp(1.4rem, 4vh, 2.2rem);
  font-family: var(--serif);
  font-size: clamp(2.1rem, 8vw, 4.25rem);
  font-weight: 500;
  line-height: 1.1;
}

.countdown-title em {
  font-weight: 400;
}

.countdown-grid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(0.9rem, 4vw, 2.6rem);
  margin-top: clamp(2.8rem, 8vh, 4.5rem);
}

.countdown-value {
  min-width: 2ch;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 10vw, 5rem);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.countdown-label {
  margin-top: 0.8rem;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: oklch(0.965 0.008 90 / 0.6);
}

.countdown-sep {
  width: 1px;
  background: var(--line-inverse);
}

.countdown-meta {
  margin-top: clamp(2.4rem, 7vh, 3.6rem);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: oklch(0.965 0.008 90 / 0.6);
}

/* ==========================================================================
   Locations
   ========================================================================== */

.locations {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(5rem, 14vh, 9rem) var(--gutter);
  text-align: center;
}

.locations-title {
  margin-top: clamp(1.8rem, 5vh, 2.8rem);
  font-family: var(--serif);
  font-size: clamp(2.3rem, 8.5vw, 4.25rem);
  font-weight: 500;
  line-height: 1.08;
}

.locations-grid {
  display: grid;
  gap: clamp(3.5rem, 9vh, 5rem);
  margin-top: clamp(3rem, 9vh, 5rem);
  text-align: left;
}

.location-frame {
  aspect-ratio: 4 / 5;
}

.location-kicker {
  margin-top: 1.6rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

.location-name {
  margin-top: 0.7rem;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 5.5vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
}

.location-address {
  margin-top: 0.7rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.location .text-link {
  margin-top: 1.1rem;
}

/* ==========================================================================
   Closing & footer
   ========================================================================== */

.closing {
  padding: clamp(6.5rem, 20vh, 12rem) var(--gutter);
  border-top: 1px solid var(--line);
  text-align: center;
}

.closing-title {
  font-family: var(--script);
  font-size: clamp(2.2rem, 8.5vw, 4.5rem);
  font-weight: 400;
  line-height: 1.35;
}

.closing-monogram {
  margin-top: clamp(2.6rem, 8vh, 4rem);
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: 0.25em;
}

.closing-monogram span {
  color: var(--muted);
}

.closing-names {
  margin-top: 1.4rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.closing-date {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  color: var(--muted);
}

.footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem var(--gutter);
  border-top: 1px solid var(--line);
}

.footer-cell {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer-cell:last-child {
  text-align: right;
}

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 680px) {
  .masthead {
    grid-template-columns: 1fr auto 1fr;
    justify-items: stretch;
  }

  .masthead-left,
  .masthead-right {
    display: block;
  }
}

@media (min-width: 760px) {
  .schedule-row {
    grid-template-columns: minmax(200px, 1fr) 2fr;
    align-items: center;
  }

  .schedule-detail {
    padding-left: clamp(1rem, 4vw, 3rem);
    border-left: 1px solid var(--line-inverse);
  }

  .locations-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(3rem, 6vw, 5rem);
  }

  .location:nth-child(2) {
    border-left: 1px solid var(--line);
    padding-left: clamp(3rem, 6vw, 5rem);
  }
}

@media (min-width: 900px) {
  .story {
    grid-template-columns: 5fr 6fr;
    align-items: center;
  }

  .story-text {
    max-width: 36rem;
  }
}

/* ==========================================================================
   Reduced motion
   Scroll-linked effects (smooth scroll, parallax) are disabled in JS when
   the OS requests reduced motion; click-triggered and decorative animation
   stays on by the couple's choice.
   ========================================================================== */