@import url("https://fonts.googleapis.com/css2?family=Alex+Brush&family=Allura&family=Ballet:opsz@16..72&family=Bodoni+Moda:opsz,wght@6..96,400;6..96,600&family=Caveat:wght@400;600&family=Cormorant+Garamond:wght@400;500;600&family=EB+Garamond:wght@400;500;600&family=Great+Vibes&family=Homemade+Apple&family=Italianno&family=Libre+Baskerville:wght@400;700&family=Mrs+Saint+Delafield&family=Noto+Sans+JP:wght@400;500;700;800&family=Noto+Serif+JP:wght@400;500;600&family=Parisienne&family=Petit+Formal+Script&family=Pinyon+Script&family=Sacramento&family=Tangerine:wght@400;700&display=swap");

:root {
  --paper: #f7f1e7;
  --paper-deep: #eee0cd;
  --ink: #1c2624;
  --olive: #40554a;
  --moss: #61715d;
  --gold: #b48a4a;
  --gold-dark: #7f5b2f;
  --rose: #b98b7f;
  --ivory: #fffaf1;
  --line: rgba(63, 52, 37, 0.16);
  --shadow: 0 24px 70px rgba(43, 31, 18, 0.16);
  --font-names: "Allura", cursive;
  --font-headings: "Cormorant Garamond", Georgia, "Times New Roman", Times, serif;
  --font-body: "Bodoni Moda", Georgia, "Times New Roman", Times, serif;
  --font-accent: "Libre Baskerville", Georgia, "Times New Roman", Times, serif;
  --font-script: "Allura", cursive;
  --hero-image: url("assets/hero-reception-table-golden.png");
  --washi-paper-wash:
    linear-gradient(180deg, rgba(255, 248, 224, 0.18) 0%, rgba(247, 226, 184, 0.24) 100%),
    radial-gradient(circle at 12% 0%, rgba(185, 139, 127, 0.08), transparent 24rem),
    radial-gradient(circle at 86% 18%, rgba(225, 187, 116, 0.12), transparent 22rem);
  --washi-texture: url("assets/washi-fiber-cream.jpg");
  --name-scale: 1.12;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background-color: #f8edcf;
  background-image: var(--washi-paper-wash), var(--washi-texture);
  background-attachment: scroll, scroll, scroll, fixed;
  background-position: center top, center top, center top, center top;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, auto, cover;
  background-blend-mode: normal, multiply, multiply, normal;
  font-family: var(--font-body);
  line-height: 1.6;
}

body.invite-active {
  overflow: hidden;
}

html:lang(ja) body {
  font-family: "Noto Serif JP", var(--font-body);
  line-height: 1.75;
}

html:lang(ja) nav,
html:lang(ja) .button,
html:lang(ja) .eyebrow,
html:lang(ja) .kicker,
html:lang(ja) .panel-label,
html:lang(ja) .quick-details span {
  font-family: "Noto Sans JP", var(--font-accent);
  letter-spacing: 0.08em;
  text-transform: none;
}

html:lang(ja) h2,
html:lang(ja) h3,
html:lang(ja) address,
html:lang(ja) .timeline time,
html:lang(ja) .quick-details strong,
html:lang(ja) .countdown-panel strong {
  font-family: "Noto Serif JP", var(--font-headings);
}

a {
  color: inherit;
}

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

.invite-book-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 250, 241, 0.34), rgba(28, 38, 36, 0.18) 52%, rgba(41, 28, 16, 0.52)),
    radial-gradient(ellipse at 50% 84%, rgba(62, 42, 22, 0.58), rgba(28, 38, 36, 0) 42%),
    radial-gradient(circle at 50% 38%, rgba(255, 250, 241, 0.86), rgba(28, 38, 36, 0.72) 74%),
    var(--washi-paper-wash),
    var(--washi-texture);
  perspective: 1800px;
}

.invite-book-overlay.is-opening {
  animation: inviteOverlayFade 2400ms ease forwards;
}

.invite-book-overlay[hidden] {
  display: none;
}

.invite-book-scene {
  position: relative;
  display: grid;
  width: min(820px, 96vw);
  place-items: center;
  transform-style: preserve-3d;
}

.invite-book-scene::before {
  content: "";
  position: absolute;
  right: 14%;
  bottom: -2.4rem;
  left: 14%;
  height: 3.2rem;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(32, 21, 10, 0.42), rgba(32, 21, 10, 0));
  filter: blur(3px);
  transform: rotateX(58deg);
}

.invite-book {
  --invite-book-closed-width: min(390px, 78vw);
  --invite-book-open-width: min(760px, 96vw);
  position: relative;
  display: grid;
  width: var(--invite-book-closed-width);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: min(520px, 72svh);
  color: var(--ink);
  filter: drop-shadow(0 28px 54px rgba(24, 17, 10, 0.28));
  isolation: isolate;
  transform-style: preserve-3d;
  transform-origin: center 92%;
  transition:
    width 760ms cubic-bezier(0.19, 1, 0.22, 1),
    transform 1200ms cubic-bezier(0.19, 1, 0.22, 1),
    filter 1200ms ease;
}

.invite-book::before {
  content: "";
  position: absolute;
  inset: 3% 49.7% 3% auto;
  width: 0.28rem;
  z-index: 3;
  opacity: 0;
  background: linear-gradient(90deg, rgba(52, 37, 20, 0.34), rgba(255, 250, 241, 0.42), rgba(52, 37, 20, 0.22));
  box-shadow: 0 0 20px rgba(52, 37, 20, 0.18);
  transition: opacity 260ms ease 840ms;
}

.invite-book__page {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.3rem, 4vw, 3rem);
  overflow: hidden;
  border: 1px solid rgba(63, 52, 37, 0.24);
  background:
    linear-gradient(rgba(255, 252, 243, 0.9), rgba(255, 247, 231, 0.9)),
    var(--washi-texture);
  background-size: auto, cover;
  opacity: 0;
  backface-visibility: hidden;
  transform: rotateY(0deg) translateZ(-1px);
  transition: opacity 260ms ease 960ms;
}

.invite-book__page::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(180, 138, 74, 0.36);
  pointer-events: none;
}

.invite-book__page--left {
  align-items: center;
  text-align: center;
  border-radius: 0.35rem 0 0 0.35rem;
  transform-origin: right center;
  background:
    linear-gradient(90deg, rgba(230, 205, 160, 0.2), rgba(255, 252, 243, 0.92) 18%, rgba(255, 247, 231, 0.9)),
    var(--washi-texture);
  transition:
    opacity 260ms ease 960ms,
    transform 920ms cubic-bezier(0.19, 1, 0.22, 1);
}

.invite-book__page--right {
  gap: 1.1rem;
  border-radius: 0 0.35rem 0.35rem 0;
  box-shadow: inset 18px 0 34px rgba(63, 52, 37, 0.08);
}

.invite-book__small {
  margin: 0;
  color: var(--moss);
  font-family: var(--font-accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.invite-book__page--right strong,
.invite-book__cover strong {
  display: block;
  max-width: 24rem;
  font-family: var(--font-headings);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.05;
}

.invite-book__cover {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: clamp(1.6rem, 5vw, 4rem);
  overflow: hidden;
  border: 1px solid rgba(225, 187, 116, 0.42);
  border-radius: 0.42rem;
  color: var(--ivory);
  text-align: center;
  background:
    linear-gradient(135deg, rgba(28, 38, 36, 0.95), rgba(64, 85, 74, 0.94)),
    var(--washi-texture);
  background-size: auto, cover;
  box-shadow:
    inset 0 0 0 1rem rgba(255, 250, 241, 0.04),
    inset 0 0 0 1.1rem rgba(225, 187, 116, 0.2),
    inset 22px 0 38px rgba(7, 10, 9, 0.22);
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition:
    width 760ms cubic-bezier(0.19, 1, 0.22, 1),
    transform 1120ms cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 900ms ease;
}

.invite-book__cover::before {
  content: "";
  position: absolute;
  inset: 1.6rem;
  border: 1px solid rgba(225, 187, 116, 0.44);
  pointer-events: none;
}

.invite-book__cover .invite-book__small {
  color: #e1bb74;
}

.invite-book__cover .button {
  width: fit-content;
  margin-top: 0.5rem;
}

.invite-book__cover .invite-book__error {
  color: #f0c7ba;
}

.invite-book__error {
  min-height: 1.4rem;
  margin: 0;
  color: #8f2f24;
  font-family: var(--font-accent);
  font-size: 0.86rem;
  font-weight: 700;
}

.invite-book__sparkles {
  position: absolute;
  inset: -8% 6% -4%;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  transform: translateZ(28px);
}

.invite-book__sparkles::before {
  content: "";
  position: absolute;
  inset: 28% 15% 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 248, 218, 0.88), rgba(225, 187, 116, 0.32) 35%, rgba(255, 250, 241, 0) 68%);
  filter: blur(9px);
  transform: scale(0.2);
}

.invite-book__sparkles::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 86%;
  height: 78%;
  border-radius: 50% 50% 18% 18%;
  background:
    conic-gradient(
      from 222deg at 50% 100%,
      transparent 0deg,
      rgba(255, 248, 218, 0.28) 5deg,
      transparent 9deg,
      transparent 17deg,
      rgba(255, 250, 241, 0.34) 22deg,
      transparent 27deg,
      transparent 38deg,
      rgba(225, 187, 116, 0.32) 43deg,
      transparent 49deg,
      transparent 58deg,
      rgba(255, 250, 241, 0.26) 64deg,
      transparent 70deg,
      transparent 82deg,
      rgba(255, 248, 218, 0.38) 88deg,
      transparent 94deg,
      transparent 107deg,
      rgba(225, 187, 116, 0.28) 112deg,
      transparent 118deg,
      transparent 132deg,
      rgba(255, 250, 241, 0.3) 138deg,
      transparent 146deg
    );
  filter: blur(0.5px);
  opacity: 0;
  transform: translate(-50%, 18%) scaleY(0.18);
  transform-origin: 50% 100%;
}

.invite-book__sparkles span {
  position: absolute;
  width: 1rem;
  height: 1rem;
  transform: scale(0);
}

.invite-book__sparkles span::before,
.invite-book__sparkles span::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: #fff8da;
  box-shadow: 0 0 1rem rgba(255, 248, 218, 0.92);
  transform: translate(-50%, -50%);
}

.invite-book__sparkles span::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.invite-book__sparkles span:nth-child(1) {
  top: 16%;
  left: 46%;
}

.invite-book__sparkles span:nth-child(2) {
  top: 36%;
  right: 20%;
}

.invite-book__sparkles span:nth-child(3) {
  right: 42%;
  bottom: 18%;
}

.invite-book__sparkles span:nth-child(4) {
  bottom: 36%;
  left: 22%;
}

.invite-book-scene.is-open {
  pointer-events: none;
  animation: inviteFade 2400ms ease forwards;
}

.invite-book-scene.is-open .invite-book {
  width: var(--invite-book-open-width);
  filter:
    drop-shadow(0 28px 54px rgba(24, 17, 10, 0.2))
    drop-shadow(0 0 36px rgba(225, 187, 116, 0.24));
  animation: inviteBookFoldOpen 2100ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.invite-book-scene.is-open .invite-book::before,
.invite-book-scene.is-open .invite-book__page {
  opacity: 1;
}

.invite-book-scene.is-open .invite-book__cover {
  width: 50%;
  animation: inviteCoverOpen 1180ms cubic-bezier(0.19, 1, 0.22, 1) 560ms both;
  box-shadow:
    inset 0 0 0 1rem rgba(255, 250, 241, 0.04),
    inset 0 0 0 1.1rem rgba(225, 187, 116, 0.2),
    inset -24px 0 42px rgba(7, 10, 9, 0.26);
}

.invite-book-scene.is-open .invite-book__sparkles {
  opacity: 1;
}

.invite-book-scene.is-open .invite-book__sparkles::before {
  animation: inviteGlow 1120ms ease 720ms both;
}

.invite-book-scene.is-open .invite-book__sparkles::after {
  animation: inviteRays 1120ms ease 720ms both;
}

.invite-book-scene.is-open .invite-book__sparkles span {
  animation: inviteSparkle 960ms ease both;
}

.invite-book-scene.is-open .invite-book__sparkles span:nth-child(1) {
  animation-delay: 720ms;
}

.invite-book-scene.is-open .invite-book__sparkles span:nth-child(2) {
  animation-delay: 860ms;
}

.invite-book-scene.is-open .invite-book__sparkles span:nth-child(3) {
  animation-delay: 990ms;
}

.invite-book-scene.is-open .invite-book__sparkles span:nth-child(4) {
  animation-delay: 1080ms;
}

@keyframes inviteOverlayFade {
  0%,
  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes inviteBookFoldOpen {
  0% {
    width: var(--invite-book-closed-width);
    filter: drop-shadow(0 28px 54px rgba(24, 17, 10, 0.28));
    transform: translateY(0) rotateX(0deg) scale(1);
  }

  34% {
    width: var(--invite-book-closed-width);
    filter: drop-shadow(0 30px 46px rgba(24, 17, 10, 0.22));
    transform: translateY(2.6rem) rotateX(62deg) scale(0.92);
  }

  64% {
    width: var(--invite-book-open-width);
    filter:
      drop-shadow(0 22px 40px rgba(24, 17, 10, 0.18))
      drop-shadow(0 0 42px rgba(225, 187, 116, 0.3));
    transform: translateY(2rem) rotateX(58deg) scale(0.98);
  }

  100% {
    width: var(--invite-book-open-width);
    filter:
      drop-shadow(0 22px 40px rgba(24, 17, 10, 0.16))
      drop-shadow(0 0 44px rgba(225, 187, 116, 0.22));
    transform: translateY(1.55rem) rotateX(56deg) scale(1);
  }
}

@keyframes inviteCoverOpen {
  0% {
    width: 100%;
    transform: rotateY(0deg) translateZ(2px);
  }

  42% {
    width: 50%;
    transform: rotateY(-108deg) translateZ(10px);
  }

  100% {
    width: 50%;
    transform: rotateY(-176deg) translateZ(5px);
  }
}

@keyframes inviteFade {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  82% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-1.4rem) scale(1.04);
  }
}

@keyframes inviteGlow {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }

  45% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes inviteRays {
  0% {
    opacity: 0;
    transform: translate(-50%, 18%) scaleY(0.18);
  }

  42% {
    opacity: 1;
    transform: translate(-50%, -3%) scaleY(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -8%) scaleY(1.12);
  }
}

@keyframes inviteSparkle {
  0% {
    opacity: 0;
    transform: translateY(0.8rem) scale(0) rotate(0deg);
  }

  36% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(45deg);
  }

  100% {
    opacity: 0;
    transform: translateY(-1.6rem) scale(0.15) rotate(90deg);
  }
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem clamp(1rem, 3vw, 3rem);
  color: var(--ivory);
  background: linear-gradient(180deg, rgba(28, 38, 36, 0.78), rgba(28, 38, 36, 0.16));
  backdrop-filter: blur(10px);
}

.brand {
  font-family: var(--font-headings);
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-decoration: none;
}

nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 1.8rem);
  font-family: var(--font-accent);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

nav a {
  text-decoration: none;
}

.language-picker {
  display: inline-flex;
  align-items: center;
}

.language-picker select {
  min-height: 2.1rem;
  max-width: 8.5rem;
  padding: 0.35rem 1.9rem 0.35rem 0.7rem;
  border: 1px solid rgba(255, 250, 241, 0.38);
  border-radius: 999px;
  color: var(--ivory);
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) right 0.85rem center / 0.34rem 0.34rem no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) right 0.63rem center / 0.34rem 0.34rem no-repeat,
    rgba(255, 250, 241, 0.12);
  font: inherit;
  font-size: 0.68rem;
  cursor: pointer;
  appearance: none;
}

.language-picker select:focus-visible {
  outline: 2px solid #f3d99f;
  outline-offset: 3px;
}

.language-picker option {
  color: var(--ink);
}

.hero {
  position: relative;
  min-height: 86svh;
  display: grid;
  place-items: center;
  padding: 7rem 1.25rem 5rem;
  overflow: hidden;
  color: #fff8ea;
  isolation: isolate;
}

.hero__image,
.hero::after {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__image {
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

.hero::after {
  content: "";
  z-index: -1;
  background:
    radial-gradient(circle at 50% 46%, rgba(28, 38, 36, 0.2), rgba(28, 38, 36, 0.58) 62%),
    linear-gradient(180deg, rgba(28, 38, 36, 0.22), rgba(28, 38, 36, 0.74));
}

.hero__content {
  width: min(940px, 100%);
  text-align: center;
  text-shadow: 0 2px 22px rgba(17, 24, 23, 0.36);
}

.eyebrow,
.kicker,
.panel-label {
  margin: 0 0 0.9rem;
  color: var(--gold);
  font-family: var(--font-accent);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.hero .eyebrow {
  color: #f3d99f;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-weight: 400;
  line-height: 1.04;
}

h1 {
  font-family: var(--font-names);
  margin-bottom: 1.2rem;
  font-size: calc(clamp(3.4rem, 8.4vw, 7.8rem) * var(--name-scale));
  letter-spacing: 0;
}

h1 span {
  display: block;
  margin: 0.1em 0;
  color: #edd69b;
  font-family: var(--font-script);
  font-size: 0.32em;
  font-style: italic;
}

h2 {
  font-family: var(--font-headings);
  margin-bottom: 1.1rem;
  font-size: clamp(2.1rem, 6vw, 4.8rem);
}

h3 {
  margin-bottom: 0.35rem;
  font-family: var(--font-headings);
  font-size: 1.45rem;
  font-weight: 400;
}

.hero__date,
.hero__venue {
  margin-bottom: 0.3rem;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  letter-spacing: 0.05em;
}

.hero__venue {
  color: #f3d99f;
}

.hero__actions,
.inline-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  min-height: 2.9rem;
  align-items: center;
  justify-content: center;
  padding: 0.74rem 1.15rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button--dark {
  color: var(--ivory);
  background: var(--ink);
  border-color: var(--ink);
}

.button--light {
  color: var(--ink);
  background: rgba(255, 250, 241, 0.78);
  border-color: rgba(255, 250, 241, 0.72);
}

.button--gold {
  color: #241c11;
  background: #e1bb74;
  border-color: #e1bb74;
}

.intro {
  padding: clamp(3rem, 8vw, 7rem) clamp(1.2rem, 4vw, 4rem);
  border-bottom: 1px solid var(--line);
}

.intro__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.intro__lede {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.42fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}

.intro h2 {
  max-width: 740px;
  margin-bottom: 0;
}

html:lang(ja) .intro__lede {
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: clamp(1.25rem, 4vw, 3rem);
}

html:lang(ja) .intro h2 {
  max-width: 680px;
  font-size: clamp(1.75rem, 4vw, 3.15rem);
  line-height: 1.32;
}

.quick-details {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 2.4rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line);
  box-shadow: 0 16px 42px rgba(43, 31, 18, 0.1);
}

.quick-details div {
  min-height: 8rem;
  padding: 1.4rem;
  background: rgba(255, 250, 241, 0.82);
}

.quick-details span {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--moss);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.quick-details strong {
  display: block;
  font-family: var(--font-headings);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
}

html:lang(ja) .quick-details strong {
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  line-height: 1.25;
  white-space: nowrap;
}

.section {
  padding: clamp(4rem, 8vw, 7rem) clamp(1.2rem, 4vw, 4rem);
  border-bottom: 1px solid var(--line);
}

.section__heading,
.timeline,
.venue,
.dress-layout,
.faq__inner,
.rsvp__inner {
  width: min(1120px, 100%);
  margin-inline: auto;
}

.section--warm {
  background: transparent;
}

.couple-photo {
  position: relative;
  min-height: 14rem;
  margin: 0;
  overflow: hidden;
  background: rgba(255, 250, 241, 0.62);
  box-shadow: 0 16px 42px rgba(43, 31, 18, 0.08);
  aspect-ratio: 4 / 5;
}

.couple-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.couple-photo--venue {
  min-height: 23rem;
  align-self: stretch;
  border-radius: 8px;
}

.couple-photo--faq {
  max-width: 20rem;
  min-height: 19rem;
  margin-top: 2rem;
  aspect-ratio: 3 / 4;
  border-radius: 50%;
}

.couple-photo--rsvp {
  max-width: 18rem;
  min-height: 18rem;
  margin-top: 2rem;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
}

.timeline {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--line);
}

.timeline li {
  display: grid;
  grid-template-columns: minmax(7rem, 0.28fr) 1fr;
  gap: clamp(1rem, 4vw, 4rem);
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}

.timeline time {
  color: var(--gold-dark);
  font-family: var(--font-headings);
  font-size: clamp(1.6rem, 4vw, 3.1rem);
  line-height: 1;
}

.timeline p {
  max-width: 620px;
  margin-bottom: 0;
}

.venue {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(16rem, 0.5fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.venue__copy p {
  max-width: 640px;
}

address {
  margin: 1.6rem 0 0;
  font-family: var(--font-headings);
  font-size: 1.35rem;
  font-style: normal;
  line-height: 1.5;
}

.inline-actions {
  justify-content: flex-start;
}

.venue__travel {
  display: grid;
  grid-column: 1 / -1;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.venue__travel article {
  display: grid;
  gap: 0.45rem;
}

.venue__travel h3 {
  margin: 0;
  font-family: var(--font-headings);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--olive);
}

.venue__travel p {
  margin: 0;
}

.venue__travel a {
  width: fit-content;
  color: var(--olive);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.venue__walking-map {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.venue__walking-map[hidden] {
  display: none;
}

.venue__walking-map h4 {
  margin: 0;
  font-family: var(--font-headings);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--olive);
}

.venue__walking-map iframe {
  width: 100%;
  min-height: 24rem;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
}

.countdown-panel {
  --countdown-frame-width: clamp(0.85rem, 1.75vw, 1.28rem);
  position: relative;
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  color: var(--ink);
  isolation: isolate;
  background:
    linear-gradient(rgba(255, 252, 243, 0.86), rgba(255, 250, 239, 0.88)) padding-box,
    url("assets/countdown-paper-texture.jpg") padding-box,
    linear-gradient(135deg, rgba(255, 230, 170, 0.2), rgba(94, 48, 22, 0.12) 46%, rgba(45, 22, 9, 0.32)) border-box,
    url("assets/countdown-wood-texture-light.jpg") border-box;
  border: var(--countdown-frame-width) solid transparent;
  background-size: auto, 100% 100%, auto, 30rem 30rem;
  background-blend-mode: normal, multiply, multiply, normal;
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 244, 0.82),
    inset 0 0 0 4px rgba(84, 47, 20, 0.1),
    inset 0 16px 24px rgba(255, 255, 255, 0.18),
    inset 0 -20px 26px rgba(67, 35, 14, 0.12),
    0 2px 0 rgba(255, 249, 235, 0.72),
    0 22px 48px rgba(43, 31, 18, 0.22);
}

.countdown-panel::before,
.countdown-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.countdown-panel::before {
  inset: calc(var(--countdown-frame-width) * -1);
  padding: var(--countdown-frame-width);
  background:
    linear-gradient(145deg, rgba(255, 238, 186, 0.58), transparent 30%) border-box,
    linear-gradient(325deg, rgba(42, 21, 8, 0.54), transparent 34%) border-box,
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 18%, transparent 78%, rgba(36, 17, 6, 0.22)) border-box;
  border: 1px solid rgba(60, 31, 12, 0.44);
  box-shadow:
    inset 0 2px 2px rgba(255, 246, 214, 0.45),
    inset 2px 0 2px rgba(255, 238, 190, 0.28),
    inset -3px -4px 6px rgba(45, 22, 8, 0.42);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  z-index: 0;
}

.countdown-panel::after {
  inset: 0.38rem;
  border: 1px solid rgba(91, 57, 31, 0.26);
  box-shadow:
    inset 0 2px 8px rgba(72, 40, 18, 0.15),
    inset 0 -1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 1px rgba(255, 252, 244, 0.44);
  z-index: 0;
}

.countdown-panel .panel-label,
.countdown-panel strong {
  position: relative;
  z-index: 1;
}

.countdown-panel strong {
  display: block;
  margin-bottom: 0;
  font-family: var(--font-headings);
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 0.95;
}

html:lang(ja) .countdown-panel {
  width: fit-content;
  min-width: 15.5rem;
  min-height: 11.25rem;
  justify-self: end;
  padding: clamp(1rem, 2vw, 1.45rem);
}

html:lang(ja) .countdown-panel strong {
  display: inline-flex;
  align-items: baseline;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
  white-space: nowrap;
}

.section--ink {
  color: var(--ink);
  background: transparent;
}

.section--ink .kicker {
  color: var(--gold);
}

.dress-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.dress-layout p {
  max-width: 720px;
  color: var(--ink);
}

.dress-notes {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line);
}

.dress-notes article {
  min-height: 9rem;
  padding: clamp(1.2rem, 3vw, 1.7rem);
  background: rgba(255, 250, 241, 0.62);
}

.dress-notes p {
  margin-bottom: 0;
}

.faq {
  background: transparent;
}

.faq__inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.faq__copy {
  position: sticky;
  top: 6rem;
}

.faq__copy p {
  max-width: 620px;
}

.faq-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line);
  box-shadow: 0 16px 42px rgba(43, 31, 18, 0.1);
}

.faq-list details {
  background: rgba(255, 250, 241, 0.72);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem clamp(1.1rem, 3vw, 1.6rem);
  color: var(--ink);
  font-family: var(--font-headings);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--gold-dark);
  font-family: var(--font-accent);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}

.faq-list details[open] summary::after {
  content: "-";
}

.faq-list p {
  max-width: 720px;
  margin: 0;
  padding: 0 clamp(1.1rem, 3vw, 1.6rem) 1.25rem;
}

.rsvp {
  background: transparent;
}

.rsvp__inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.rsvp__copy {
  position: sticky;
  top: 6rem;
}

.rsvp-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid var(--line);
  background: rgba(255, 250, 241, 0.72);
  box-shadow: 0 16px 42px rgba(43, 31, 18, 0.1);
}

.form-field {
  display: grid;
  gap: 0.45rem;
}

.form-field--full {
  grid-column: 1 / -1;
}

.rsvp-form__attendance-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.form-field label,
.attendance-options legend {
  color: var(--moss);
  font-family: var(--font-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.form-field input,
.form-field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(63, 52, 37, 0.24);
  border-radius: 0;
  color: var(--ink);
  background: rgba(255, 250, 241, 0.86);
  font: inherit;
}

.form-field textarea {
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid rgba(180, 138, 74, 0.45);
  outline-offset: 2px;
}

.attendance-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.attendance-options legend {
  flex-basis: 100%;
  margin-bottom: 0.1rem;
}

.attendance-options label {
  display: inline-flex;
  min-height: 3rem;
  flex: 1 1 5.5rem;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(63, 52, 37, 0.18);
  background: rgba(255, 250, 241, 0.56);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}

.attendance-options input {
  width: auto;
  min-height: auto;
  accent-color: var(--gold-dark);
}

.rsvp-form .button {
  cursor: pointer;
}

.rsvp-form .button:disabled {
  cursor: wait;
  opacity: 0.68;
  transform: none;
}

.form-status {
  min-height: 1.6rem;
  margin: 0;
  font-family: var(--font-accent);
  font-size: 0.9rem;
  font-weight: 700;
}

.form-status[data-state="success"] {
  color: var(--olive);
}

.form-status[data-state="error"] {
  color: #8f2f24;
}

.form-status[data-state="pending"] {
  color: var(--gold-dark);
}

.rsvp p {
  max-width: 620px;
}

html:lang(ja) .rsvp h2 {
  white-space: pre-line;
}

html:lang(ja) .rsvp p strong {
  font-weight: 800;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem clamp(1.2rem, 4vw, 4rem);
  color: var(--ivory);
  background: var(--ink);
}

footer p {
  margin: 0;
}

footer a {
  color: #e1bb74;
  text-decoration: none;
}

@media (max-width: 820px) {
  .site-header {
    position: absolute;
    align-items: flex-start;
  }

  nav {
    max-width: 18rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.55rem 0.85rem;
    font-size: 0.68rem;
  }

  .hero {
    min-height: 84svh;
    padding-top: 7.5rem;
  }

  .invite-book {
    --invite-book-closed-width: min(340px, 76vw);
    --invite-book-open-width: min(720px, 94vw);
    width: var(--invite-book-closed-width);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: min(460px, 66svh);
  }

  .invite-book::before {
    display: block;
  }

  .invite-book__page {
    min-height: auto;
    padding: clamp(1rem, 3vw, 1.8rem);
  }

  .invite-book__page--left {
    border-radius: 0.35rem 0 0 0.35rem;
    transform-origin: right center;
  }

  .invite-book__page--right {
    border-radius: 0 0.35rem 0.35rem 0;
    box-shadow: inset 18px 0 34px rgba(63, 52, 37, 0.08);
  }

  .invite-book__cover {
    transform-origin: left center;
  }

  .invite-book-scene.is-open .invite-book {
    width: var(--invite-book-open-width);
  }

  .invite-book-scene.is-open .invite-book__cover {
    transform: rotateY(-176deg);
  }

  .quick-details,
  .intro__lede,
  .venue,
  .dress-layout,
  .faq__inner,
  .rsvp__inner,
  .rsvp-form,
  .rsvp-form__attendance-row {
    grid-template-columns: 1fr;
  }

  .faq__copy,
  .rsvp__copy {
    position: static;
  }

  .quick-details {
    box-shadow: none;
  }

  .couple-photo,
  .couple-photo--venue,
  .couple-photo--faq,
  .couple-photo--rsvp {
    max-width: none;
    min-height: 16rem;
    margin-top: 0;
    aspect-ratio: 3 / 4;
  }

  .timeline li {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .countdown-panel {
    min-height: 12rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .invite-book,
  .invite-book__page--left,
  .invite-book__page,
  .invite-book__cover,
  .invite-book__sparkles::before,
  .invite-book__sparkles::after,
  .invite-book__sparkles span,
  .invite-book-overlay.is-opening,
  .invite-book-scene.is-open {
    transition: none;
    animation-duration: 260ms;
  }

  .invite-book-scene.is-open .invite-book__cover {
    transform: rotateY(-176deg);
  }
}

@media (max-width: 560px) {
  .site-header {
    padding: 0.85rem 1rem;
  }

  .brand {
    font-size: 0.9rem;
  }

  nav {
    max-width: 14.5rem;
  }

  h1 {
    font-size: calc(clamp(3rem, 16vw, 5.1rem) * var(--name-scale));
  }

  .hero__actions,
  .inline-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .quick-details div {
    min-height: 6.8rem;
  }

  footer {
    flex-direction: column;
  }
}