/* Heirs of Sin — the invitation. Cormorant Garamond (display) + Inter (small caps UI). */
:root {
  --ink: #050304;
  --ink-2: #0c0708;
  --bone: #efe6d8;
  --muted: rgba(239, 230, 216, .62);
  --faint: rgba(239, 230, 216, .34);
  --gold: #cdb487;
  --gold-hi: #f1e4c4;
  --hair: rgba(205, 180, 135, .24);
  --wax: #6d0a18;
  --foil: linear-gradient(115deg, #8a6d45 0%, #d9c39a 22%, #f4e8cb 38%, #b8975f 55%, #ead7ae 72%, #8a6d45 100%);
  --serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --pad: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--bone);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
::selection { background: var(--wax); color: var(--bone); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* the one small-caps voice */
.caps, .card__top, .panel__n, .foot, .success__sub {
  font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase;
}
.caps { color: var(--gold); }

/* ═══════ I · HERO / INVITATION ═══════ */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: clamp(20px, 5vh, 56px) 16px; overflow: hidden; isolation: isolate; }

/* Kade at the council table, behind the card, only once the envelope has opened */
.hero__bg { position: absolute; inset: 0; z-index: -1; opacity: 0; }
.env-go .hero__bg { opacity: 1; animation: bg-in 2.4s var(--ease) 2.1s both; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: saturate(.85) contrast(1.05) brightness(.55); }
.hero__bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(48% 60% at 50% 50%, rgba(5, 3, 4, .55), rgba(5, 3, 4, .2) 70%), linear-gradient(180deg, rgba(5, 3, 4, .5), transparent 30%, transparent 65%, var(--ink)); }
@keyframes bg-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }

/* the card: a real invitation — portrait proportions, one centred column, even rhythm */
.card {
  position: relative; width: min(100%, 500px, calc((100svh - 80px) * .72));
  aspect-ratio: 5 / 7;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 11% 10%; text-align: center;
  background: radial-gradient(120% 70% at 50% 0%, rgba(239, 230, 216, .045), transparent 60%), linear-gradient(180deg, #100a0b, #090506);
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(205, 180, 135, .1);
}
.env-go .card { animation: card-in 1.4s var(--ease) 1.7s both; }
.card__frame { position: absolute; inset: 12px; pointer-events: none; border: 1px solid var(--hair); }
.card__frame::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(205, 180, 135, .1); }
.card__top { color: var(--gold); white-space: nowrap; }
.card__title { margin: 9% 0 7%; }
.card__title img { width: 100%; max-width: 260px; margin: 0 auto; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .6)); }
.card__soon { display: flex; justify-content: center; }
.card__soon em { display: inline-block; white-space: nowrap; letter-spacing: .08em; padding-left: .08em; font-family: "Cormorant SC", var(--serif); font-style: normal; font-weight: 500; font-size: 26px; font-weight: 400; line-height: 1;
  background: var(--foil); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; padding: .1em .05em; }
.orn { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.orn:last-child { transform: scaleX(-1); }
.card .rsvp { width: 100%; max-width: 300px; margin-top: 10%; }
/* on the card the RSVP is set like a printed reply line: field, then the button centred beneath */
.card .notify-form { flex-direction: column; align-items: center; gap: 18px; }
.card .field { width: 100%; }
.card .field input { text-align: center; }

.env-go .in { animation: rise 1s var(--ease) both; }
.env-go .card__top { animation-delay: 1.95s; }
.env-go .card__title { animation-delay: 2.05s; }
.env-go .card__soon { animation-delay: 2.2s; }
.env-go .card .rsvp { animation-delay: 2.35s; }
/* the Patreon door: a second, quieter button under the RSVP, same width, outline only */
.peek { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 300px; height: 44px; margin-top: 14px;
  border: 1px solid rgba(239, 230, 216, .2); border-radius: 1px; text-decoration: none; transition: border-color .5s var(--ease), background .5s var(--ease); }
.peek span { font: 500 10.5px/1 var(--sans); letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: var(--bone); white-space: nowrap; }
.peek:hover, .peek:focus-visible { border-color: var(--gold); background: rgba(205, 180, 135, .06); }
.env-go .card .peek { animation-delay: 2.5s; }
/* consent line under the RSVP: the small print at the moment of sign-up */
.consent { max-width: 300px; margin: 0; font: 400 10px/1.6 var(--sans); letter-spacing: .02em; color: var(--faint); text-align: center; }
.consent a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(205, 180, 135, .4); }
.consent a:hover { color: var(--gold-hi); }
/* the error line takes no space until there is an error, so the consent sits evenly between the two buttons */
.card .form__msg:empty { display: none; }
.peek { margin-top: 18px; }
/* with two buttons the card holds more: tighten the vertical rhythm so it still fits one screen */
@media (min-width: 761px) {
  /* fixed padding: percentages here were measured against the whole window, which squeezed the card on wide screens */
  .card { padding: 52px 48px; }
  .card__title { margin: 6% 0 5%; }
  .card__title img { max-width: 230px; }
  .card .rsvp { margin-top: 7%; }
  .card .notify-form { gap: 14px; }
  /* both buttons match the email line above them, and the label always fits inside */
  .card .btn, .peek { width: 100%; padding: 0 10px; justify-content: center; }
  .peek span { font-size: 10px; letter-spacing: .16em; padding-left: .16em; }
  /* a fixed-width card whose height follows its content, so short windows never squeeze the buttons */
  .card { width: min(100%, 440px); aspect-ratio: auto; min-height: min(616px, calc(100svh - 120px)); }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes card-in { from { transform: scale(.96); } to { transform: none; } }

/* ── the envelope: always plays in full (~3s); nothing skips it ── */
html.env-lock, html.env-lock body { overflow: hidden; overscroll-behavior: none; }
html.env-lock body { touch-action: none; }
/* closed until .env-go; a failsafe opens the page after 6s if the intro script never runs */
.envelope { position: fixed; inset: 0; z-index: 80; perspective: 1600px; animation: env-done 0s linear 6s forwards; }
.env-go .envelope { animation: env-done 0s linear 2.65s forwards; }
@keyframes env-fade { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes env-done { to { visibility: hidden; pointer-events: none; } }
html:not(.env-go) .hero__bg { animation: fade-in 1s ease 6s forwards; }
@keyframes fade-in { to { opacity: 1; } }
.envelope__half { position: absolute; left: 0; right: 0; height: 50.5%; overflow: hidden; will-change: transform;
  background: radial-gradient(70% 90% at 50% 100%, rgba(90, 16, 22, .18), transparent 70%), linear-gradient(180deg, #120b0c, #0b0708); }
.envelope__half--top { top: 0; }
.env-go .envelope__half--top { animation: env-up 1s cubic-bezier(.7, 0, .2, 1) 1.6s forwards; }
.env-go .envelope__half--bottom { animation: env-down 1s cubic-bezier(.7, 0, .2, 1) 1.6s forwards; }
.envelope__half--bottom { bottom: 0;
  background: radial-gradient(70% 90% at 50% 0%, rgba(90, 16, 22, .2), transparent 70%), linear-gradient(0deg, #130b0c, #0b0708);
  box-shadow: inset 0 1px 0 rgba(205, 180, 135, .12); }
.envelope__half--bottom::before, .envelope__half--bottom::after { content: ""; position: absolute; inset: 0; opacity: .9; }
.envelope__half--bottom::before { background: linear-gradient(180deg, #0e0809, #0a0607); clip-path: polygon(0 0, 50% 0, 0 100%); }
.envelope__half--bottom::after { background: linear-gradient(180deg, #100909, #0a0607); clip-path: polygon(100% 0, 50% 0, 100% 100%); }
.envelope__flap { position: absolute; left: 0; right: 0; top: 0; height: 54%; transform-origin: 50% 0;
  background: linear-gradient(180deg, #170e0f 0%, #100a0b 70%, #0d0809 100%); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.env-go .envelope__flap { animation: flap .7s cubic-bezier(.6, 0, .3, 1) 1s forwards; }
.envelope__seal { position: absolute; left: 50%; top: 54%; width: clamp(120px, 15vw, 220px);
  transform: translate(-50%, -50%); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .7)); opacity: 0; }
.env-go .envelope__seal { opacity: 1; animation: stamp .3s cubic-bezier(.6, 0, .9, .5) .2s both, seal-out .55s cubic-bezier(.6, 0, .3, 1) 1s forwards; }
@keyframes stamp { from { transform: translate(-50%, -50%) scale(1.7) rotate(-6deg); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes seal-out { to { transform: translate(-50%, -140%) scale(.86); opacity: 0; } }
@keyframes flap { to { transform: rotateX(178deg); opacity: 0; } }
@keyframes env-up { to { transform: translateY(-101%); } }
@keyframes env-down { to { transform: translateY(101%); } }

/* ── RSVP form ── */
.notify-form { position: relative; display: flex; align-items: flex-end; gap: 14px; }
.field { position: relative; flex: 1; min-width: 0; }
.field input {
  width: 100%; border: 0; border-radius: 0; background: transparent; outline: none; color: var(--bone);
  font-family: var(--serif); font-size: 19px; text-align: left; padding: .55rem 0 .45rem;
  box-shadow: inset 0 -1px 0 rgba(205, 180, 135, .22);
}
.field input::placeholder { color: var(--faint); font-style: italic; }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--bone); transition: background-color 9999s; }
.field__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #6d0a18 15%, #e8324a 45%, #ffb27a 50%, #e8324a 55%, #6d0a18 85%, transparent);
  background-size: 200% 100%; transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease);
  box-shadow: 0 0 12px rgba(232, 50, 74, .6); }
.field:focus-within .field__line, .is-loading .field__line { transform: scaleX(1); animation: ember 3.2s linear infinite; }
@keyframes ember { from { background-position: 200% 0; } to { background-position: 0 0; } }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__msg { position: absolute; left: 0; right: 0; top: calc(100% + 10px); font-size: 12px; letter-spacing: .04em; color: #e3a0a8; text-align: center; }
.is-error .field input { animation: nudge .32s cubic-bezier(.3, 0, .2, 1); }
@keyframes nudge { 30% { transform: translateX(-4px); } 70% { transform: translateX(3px); } }

/* the button: black lacquer, foil edge and lettering; fills with wax on hover */
.btn {
  position: relative; flex: none; overflow: hidden; isolation: isolate; cursor: pointer;
  height: 44px; padding: 0 1.6rem; border: 1px solid transparent; border-radius: 1px;
  background: linear-gradient(180deg, #160d0e, #0a0607) padding-box, var(--foil) border-box;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .9);
  transition: box-shadow .6s var(--ease), transform .4s var(--ease);
}
.btn span { position: relative; z-index: 2; display: block;
  font: 500 10.5px/1 var(--sans); letter-spacing: .4em; padding-left: .4em; text-transform: uppercase;
  background: var(--foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position 1.2s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0;
  background: radial-gradient(120% 140% at 50% 0%, #7d1020 0%, #4a0710 55%, #22030a 100%); transition: opacity .6s var(--ease); }
.btn::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 210, .22), transparent); transform: translateX(-160%) skewX(-18deg); }
.btn:hover::before, .btn:focus-visible::before, .is-loading .btn::before { opacity: 1; }
.btn:hover::after, .btn:focus-visible::after { transform: translateX(330%) skewX(-18deg); transition: transform 1.1s var(--ease); }
.btn:hover span, .btn:focus-visible span { background-position: 100% 0; }
.btn:active { transform: translateY(1px); }
.is-loading .btn { pointer-events: none; }
.is-loading .btn::after { animation: sheen 1.2s linear infinite; }
@keyframes sheen { from { transform: translateX(-160%) skewX(-18deg); } to { transform: translateX(330%) skewX(-18deg); } }

/* success: a seal is pressed onto the card */
.success { display: grid; justify-items: center; gap: 6px; text-align: center; }
.success[hidden], .notify-form[hidden] { display: none; }
.success__seal { width: 64px; margin-bottom: 8px; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .6)); }
.success em { font-family: var(--serif); font-size: 22px; color: var(--gold-hi); }
.success__sub { color: var(--muted); }

/* ═══════ II · WHISPERS ═══════ */
.intro { padding: clamp(110px, 20vh, 220px) var(--pad) clamp(90px, 16vh, 180px); text-align: center;
  background: radial-gradient(50% 45% at 50% 50%, rgba(109, 10, 24, .14), transparent 70%); }
.whisper em { font-family: var(--serif); font-size: clamp(19px, 2vw, 24px); color: var(--gold); }
.intro__title { margin: 22px 0 26px; font-family: var(--serif); font-weight: 300; font-size: clamp(42px, 7vw, 104px); line-height: 1.02; letter-spacing: -.01em; }
.intro__title em { color: var(--gold-hi); }

/* section heads */
.sec-head { text-align: center; margin-bottom: clamp(48px, 9vh, 96px); }
.stamp-title { margin: 0; white-space: nowrap; font-family: var(--serif); font-weight: 500; text-transform: uppercase;
  font-size: clamp(30px, 5.2vw, 70px); line-height: 1; letter-spacing: .08em; padding-left: .08em; color: #f4eee6;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .6); will-change: transform; }

/* ═══════ III · WORLD ═══════ */
.world { padding: clamp(40px, 8vh, 80px) var(--pad) clamp(60px, 10vh, 120px); max-width: 1440px; margin: 0 auto; }
.panel { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; margin-bottom: clamp(90px, 14vh, 160px); }
.panel__media { grid-column: 1 / 11; grid-row: 1; aspect-ratio: 21 / 9; overflow: hidden; position: relative; background: var(--ink-2); }
.panel__media img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; filter: saturate(.8) contrast(1.05) brightness(.78); }
.panel__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 3, 4, .5), transparent 50%); }
.panel__text { grid-column: 8 / 13; grid-row: 1; position: relative; z-index: 2; padding: 36px 0 0 36px; margin-bottom: -60px; background: var(--ink); }
.panel--r .panel__media { grid-column: 3 / 13; }
.panel--r .panel__text { grid-column: 1 / 6; padding: 36px 36px 0 0; text-align: right; } /* box on the left, text set against the photo */
.panel__n { color: var(--gold); letter-spacing: .2em; margin-bottom: 14px; }
.panel__title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.6vw, 56px); line-height: 1; }
.panel__title em { font-weight: 300; color: var(--gold-hi); }
.panel__line { margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.55; color: var(--muted); }
.panel__line span { display: block; }
.slides .slide { opacity: 0; transition: opacity 1.1s var(--ease); }
.slides .slide.is-on { opacity: 1; }

/* ═══════ IV · THE HEIRS: a swipeable row ═══════ */
.heirs { padding: clamp(60px, 10vh, 120px) 0 clamp(60px, 10vh, 110px); background: linear-gradient(180deg, var(--ink), #0a0506 50%, var(--ink)); }
.heirs__head { position: relative; max-width: 1440px; margin: 0 auto clamp(36px, 6vh, 60px); padding: 0 var(--pad); }
.heirs__nav { position: absolute; right: var(--pad); bottom: 4px; display: flex; gap: 8px; }
.arrow { width: 60px; height: 44px; display: grid; place-items: center; cursor: pointer; background: transparent; border: 0; color: var(--gold);
  box-shadow: inset 0 -1px 0 var(--hair); transition: color .4s, box-shadow .4s, opacity .4s; }
.arrow svg { width: 32px; fill: none; stroke: currentColor; stroke-width: 1; transition: transform .5s var(--ease); }
.arrow:hover { color: var(--gold-hi); box-shadow: inset 0 -1px 0 var(--gold); }
.arrow[data-dir="1"]:hover svg { transform: translateX(4px); }
.arrow[data-dir="-1"]:hover svg { transform: translateX(-4px); }
.arrow:disabled { opacity: .25; cursor: default; }

.gallery { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--pad) - 2px)); mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--pad) - 2px));
  position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; outline-offset: -4px; cursor: grab; }
.gallery::-webkit-scrollbar { display: none; }
.gallery.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.gallery.is-dragging * { pointer-events: none; }
.track { display: flex; gap: clamp(28px, 3.4vw, 56px); width: max-content; padding: 0 var(--pad); }
.heir { width: clamp(280px, 24vw, 340px); flex: none; scroll-snap-align: start; scroll-margin-left: var(--pad); user-select: none; -webkit-user-select: none; text-align: center; }
.heir__img { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: var(--ink-2); }
.heir__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05) brightness(.9); transition: transform 1.2s var(--ease), filter 1.2s var(--ease); -webkit-user-drag: none; }
.heir__img::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(241, 228, 196, 0); transition: border-color .8s var(--ease), inset .8s var(--ease); }
@media (hover: hover) {
  .heir:hover .heir__img img { transform: scale(1.05); filter: saturate(1) contrast(1.05) brightness(1); }
  .heir:hover .heir__img::after { border-color: rgba(241, 228, 196, .32); inset: 14px; }
}
.heir__tag { margin-top: 1.4rem; white-space: nowrap; font-family: var(--sans); font-size: 9.5px; font-weight: 500; letter-spacing: .22em; padding-left: .22em; text-transform: uppercase; color: #c9465a; }
.heir__name { margin-top: .6rem; white-space: nowrap; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.2vw, 33px); line-height: 1.1; }
.heir__line { margin-top: .75rem; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--muted); }
.heir__line span { display: block; white-space: nowrap; }

/* the swipe cue: a fingertip glides across, until they've swiped once */
.hint { position: absolute; top: var(--hint-y, 38%); right: calc(var(--pad) + 8px); z-index: 4; pointer-events: none;
  display: grid; justify-items: center; gap: 12px; transition: opacity .6s var(--ease); }
.hint__dot { width: 44px; height: 44px; border-radius: 50%; background: rgba(241, 228, 196, .2); border: 1px solid rgba(241, 228, 196, .7);
  box-shadow: 0 0 30px rgba(241, 228, 196, .25); backdrop-filter: blur(3px); animation: glide 2.2s var(--ease) infinite; }
.hint__trail { position: absolute; top: 21px; right: 22px; width: 90px; height: 1px; transform-origin: right;
  background: linear-gradient(270deg, rgba(241, 228, 196, .7), transparent); animation: trail 2.2s var(--ease) infinite; }
.hint__label { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; color: var(--gold-hi);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
@keyframes glide { 0% { transform: translateX(0) scale(.85); opacity: 0; } 15% { opacity: 1; transform: translateX(0) scale(1); } 70% { transform: translateX(-110px) scale(1); opacity: 1; } 100% { transform: translateX(-120px) scale(.9); opacity: 0; } }
@keyframes trail { 0%, 15% { transform: scaleX(0); opacity: 0; } 70% { transform: scaleX(1) translateX(-20px); opacity: 1; } 100% { transform: scaleX(1) translateX(-30px); opacity: 0; } }
.gallery.is-used .hint { opacity: 0; }
.hint-desk { display: none; }
@media (hover: hover) and (pointer: fine) { .hint-desk { display: inline; } .hint-touch { display: none; } }

.gallery__foot { max-width: 1440px; margin: 28px auto 0; padding: 0 var(--pad); display: flex; align-items: center; gap: 18px; }
.progress { position: relative; flex: 1; max-width: 240px; height: 1px; background: rgba(205, 180, 135, .18); overflow: hidden; }
.progress i { position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(var(--p, .083)); transition: transform .3s linear; }
.gallery__count { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .26em; color: var(--muted); }
.gallery__count b { color: var(--gold-hi); font-weight: 500; }

/* ═══════ V · RSVP ═══════ */
.close { position: relative; isolation: isolate; overflow: hidden; padding: clamp(110px, 18vh, 200px) var(--pad) clamp(90px, 14vh, 160px); text-align: center; display: grid; justify-items: center; }
/* the cast flips past behind the RSVP, dark enough that the text always reads first */
.close__bg { position: absolute; inset: 0; z-index: -1; }
.close__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.5); }
.close__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(5, 3, 4, .45) 22%, rgba(5, 3, 4, .5) 78%, var(--ink) 100%),
              radial-gradient(45% 55% at 50% 48%, rgba(5, 3, 4, .78), rgba(5, 3, 4, .2) 100%); }
.close__seal { width: 84px; margin-bottom: 34px; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .7)); }
.close__title { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 5.6vw, 84px); line-height: 1.02; }
.close__title em { color: var(--gold-hi); }
.close__sub { margin-top: clamp(40px, 6vh, 56px); font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; color: var(--gold); }
.rsvp--close { width: 100%; max-width: 420px; margin-top: clamp(40px, 6vh, 56px); }
.signoff { margin-top: clamp(72px, 12vh, 120px); }
.signoff em { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); font-weight: 300; color: var(--gold-hi); }

/* ═══════ FOOTER ═══════ */
.foot { padding: 32px var(--pad) calc(36px + env(safe-area-inset-bottom)); text-align: center; color: var(--faint); letter-spacing: .24em; line-height: 2.3; font-size: 9.5px; border-top: 1px solid rgba(205, 180, 135, .08); }
.foot__mark { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--muted); flex-wrap: wrap; justify-content: center; }
.foot__mark img { width: 16px; height: 16px; opacity: .85; }
.foot a { text-decoration: none; color: var(--gold); }

/* ═══════ MOBILE ═══════ */
@media (max-width: 900px) {
  .panel__media, .panel--r .panel__media { grid-column: 1 / 13; aspect-ratio: 4 / 3; }
  .panel__text, .panel--r .panel__text { grid-column: 1 / 13; grid-row: 2; padding: 24px 0 0; margin: 0; background: none; }
  .panel--r .panel__text { text-align: right; }
  .panel { margin-bottom: 72px; }
}
@media (max-width: 560px) {
  .card { width: 100%; aspect-ratio: auto; min-height: min(78svh, 600px); padding: 56px 28px 48px; }
  .card__title img { max-width: 200px; }
  .card__soon em { font-size: 24px; letter-spacing: .126em; padding-left: .126em; }
  .notify-form { flex-direction: column; align-items: stretch; gap: 16px; }
  .field input { text-align: center; }
  .btn { width: 100%; height: 48px; }
  .form__msg { position: static; margin-top: -4px; }
  .heir { width: 78vw; max-width: 340px; }
  .heirs__nav { display: none; }
  .heirs__head { text-align: center; }
  .foot__mark { flex-direction: column; gap: 0; }
}

/* ═══════ PREVIEW LOCK ═══════
   While <html> has .site-locked only the invitation exists: everything below is hidden and nothing scrolls. */
html.site-locked, html.site-locked body { overflow: hidden; overscroll-behavior: none; height: 100%; }
.site-locked main { display: none; }
/* the small print stays, as one quiet strip along the bottom of the screen */
.site-locked .foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; border: 0; background: none;
  padding: 0 var(--pad) calc(14px + env(safe-area-inset-bottom)); font-size: 8.5px; letter-spacing: .22em; line-height: 1.9;
  opacity: 0; transition: opacity 1.2s var(--ease) .4s; }
.site-locked.env-done .foot { opacity: 1; }
.site-locked .foot p { display: inline; margin: 0; }
.site-locked .foot p + p::before { content: "·"; margin: 0 .9em; color: var(--wax); }
.site-locked .foot__mark { margin-top: 0; gap: 8px; }
.site-locked .foot .foot__mark img { display: inline-block; vertical-align: -2px; width: 12px; height: 12px; margin-right: 8px; }
@media (max-width: 760px) {
  html.site-locked, html.site-locked body { overflow: auto; height: auto; }
  .site-locked .hero { min-height: 0; padding: 20px 16px 0; }
  .site-locked .foot { position: static; padding-top: 22px; }
  .peek { height: 48px; }
  .peek span { font-size: 11px; letter-spacing: .26em; padding-left: .26em; }
  .site-locked .foot { font-size: 8.5px; letter-spacing: .14em; line-height: 1.9; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .site-locked .foot p { display: block; }
  .site-locked .foot p + p::before { content: none; }
  .site-locked .foot .foot__mark { margin-top: 2px; }
}

/* ═══════ REDUCED MOTION ═══════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* short desktop windows: the page may scroll a little, and the card always clears the footer strip (after the lock rules so it wins) */
@media (min-width: 761px) {
  html.site-locked, html.site-locked body { overflow-y: auto; height: auto; }
  .site-locked .hero { padding-bottom: 64px; }
  .peek { margin-top: 14px; }
}

/* Join for free / Sign in with Patreon: the same two doors as the app */
.join { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.join__btn { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 320px; text-decoration: none; }
.join__btn span { font: 500 10.5px/1 var(--sans); letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; }
.join__btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(239, 230, 216, .25); }
.join__note { max-width: 320px; margin: 4px 0 0; font: 400 11px/1.6 var(--sans); letter-spacing: .02em; color: var(--faint); text-align: center; }

/* the home-screen app's own Sign in (only shown inside the app) */
.join__btn[hidden] { display: none; }
@media (display-mode: standalone) { .join__btn--ghost:not(.join__btn--app) { display: none; } }
.join__btn--app { background: transparent; box-shadow: inset 0 0 0 1px rgba(239, 230, 216, .25); }
.join__btn--app span { background: none; color: var(--bone, #efe6d8); -webkit-text-fill-color: currentColor; }

/* phones: the invitation fills the screen from just under the clock to the bottom, with the small print at the foot */
@media (max-width: 760px) {
  html.site-locked body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
  .site-locked .hero { flex: 1 0 auto; padding: calc(env(safe-area-inset-top) + 20px) 16px 8px; }
  .site-locked .foot { margin-top: auto; }
}

/* ═════ countdown on the invitation ═════ */
.count { display: grid; justify-items: center; gap: 10px; margin-top: 7%; text-align: center; }
.count__label { margin: 0; font: 500 10px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.count__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.count__grid[hidden] { display: none; }
.count__grid span { display: grid; justify-items: center; gap: 6px; min-width: 52px; }
.count__grid b { font: 400 clamp(28px, 7vw, 40px)/1 var(--serif); color: var(--bone); font-variant-numeric: tabular-nums; }
.count__grid small { font: 500 8.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--faint); }
.count__when { margin: 2px 0 0; font: 400 11px/1.5 var(--sans); letter-spacing: .06em; color: var(--muted); }
.card .rsvp.join { display: grid; gap: 10px; margin-top: 7%; }
.join__btn--remind { width: 100%; background: transparent; box-shadow: inset 0 0 0 1px rgba(205, 180, 135, .35); color: var(--bone); cursor: pointer; }
.join__btn[hidden], .notify-form[hidden] { display: none !important; }
.card .notify-form { display: grid; gap: 10px; width: 100%; }
.card .notify-form .form__msg { margin: 0; font: 400 12px/1.5 var(--sans); color: var(--gold-hi); text-align: center; }

/* ═════ once the app is open: the envelope, the lettering, Enter the realm and Join for free. Nothing else. ═════ */
.enter { display: none; }
html.is-open .card__top, html.is-open .count, html.is-open .rsvp, html.is-open main, html.is-open .foot > p:not(.foot__mark) { display: none !important; }
html.is-open .enter { display: grid; gap: 12px; justify-items: center; margin-top: clamp(22px, 4vh, 40px); }
html.is-open .enter .btn { min-width: min(300px, 80vw); justify-content: center; }
html.is-open .join__btn--ghost-open { background: transparent; }
html.is-open body { min-height: 100svh; }
html.is-open .foot { padding-top: 18px; padding-bottom: 18px; }

/* ═════ the countdown as a red segment display; the colons sit exactly halfway up the numbers ═════ */
.count__grid { display: flex; align-items: flex-start; justify-content: center; gap: clamp(6px, 2.2vw, 16px); }
.count__grid span { gap: 12px; min-width: 0; }
.count__grid b { display: flex; gap: clamp(3px, .8vw, 5px); font: inherit; }
.count .seg { width: clamp(22px, 6.4vw, 40px); height: auto; overflow: visible; }
.count .seg path { fill: rgba(163, 36, 58, .1); transition: fill .15s; }
.count .seg path.on { fill: #c73a51; filter: drop-shadow(0 0 4px rgba(199, 58, 81, .75)); }
.count__colon { display: grid; align-content: center; gap: clamp(9px, 2.6vw, 16px); height: calc(clamp(22px, 6.4vw, 40px) * 52 / 32); }
.count__colon::before, .count__colon::after { content: ""; width: 5px; height: 5px; border-radius: 1px; background: #c73a51; box-shadow: 0 0 6px rgba(199, 58, 81, .8); }
.count__grid small { letter-spacing: .24em; }
@media (prefers-reduced-motion: reduce) { .count .seg path { transition: none; } }