@font-face {
  font-family: 'SS GEO CHALK';
  src: url('SS GEO CHALK.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
    font-display: block;
}

@font-face {
  font-family: 'Alk Life';
  src: url('alk_life.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
    font-display: block;
}

:root {
  --bg: #fdf6e8;
  --paper: #fdf8ef;
  --text: #2a1a08;
  --text-soft: #7a5c3a;
  --red: #e03030;
  --gold: #c8a050;
  --border-col: #b8977a;

  --env-red-body: #c94038;
  --env-red-flap: #ba3530;
  --env-red-side: #ae3028;
  --env-red-bottom: #9d2820;
  --env-red-paper: #fdf8ef;
  --env-red-text: #6a1c18;
}

/* ── Envelope overlay ───────────────────────────── */

body.env-locked {
  overflow: hidden;
}

#envelope-scene {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  background-color: var(--bg);
  transition: opacity var(--env-overlay-fade, 650ms) ease;
}

/* ── Hint text below envelope ───────────────────── */

@keyframes hintStopMotion {
  0%   { opacity: 0.80; transform: translateY(0px)  rotate(-0.4deg); animation-timing-function: steps(1); }
  13%  { opacity: 1.00; transform: translateY(-2px) rotate(0.3deg);  animation-timing-function: steps(1); }
  26%  { opacity: 0.65; transform: translateY(1px)  rotate(-0.2deg); animation-timing-function: steps(1); }
  39%  { opacity: 0.90; transform: translateY(0px)  rotate(0.5deg);  animation-timing-function: steps(1); }
  52%  { opacity: 1.00; transform: translateY(-1px) rotate(-0.3deg); animation-timing-function: steps(1); }
  65%  { opacity: 0.72; transform: translateY(1px)  rotate(0.4deg);  animation-timing-function: steps(1); }
  78%  { opacity: 0.88; transform: translateY(0px)  rotate(-0.5deg); animation-timing-function: steps(1); }
  91%  { opacity: 1.00; transform: translateY(-1px) rotate(0.2deg);  animation-timing-function: steps(1); }
  100% { opacity: 0.80; transform: translateY(0px)  rotate(-0.4deg); }
}

#env-hint {
  font-family: 'SS GEO CHALK', sans-serif;
  font-size: 26px;
  color: var(--env-red-body);
  letter-spacing: 0.06em;
  margin: 0;
  padding: 0;
  user-select: none;
  animation: hintStopMotion 3.4s infinite;
}

#envelope-scene.is-gone {
  opacity: 0;
  pointer-events: none;
}

/* entrance: smooth pop-up */
@keyframes envAppear {
  0%   { opacity: 0; transform: translateY(24px) rotate(-4deg); }
  100% { opacity: 1; transform: translateY(0)    rotate(-4deg); }
}

/* entrance: stop-motion wobble after pop-up */
@keyframes envWobble {
  0%   { transform: rotate(-4deg); animation-timing-function: steps(1); }
  14%  { transform: rotate( 4deg); animation-timing-function: steps(1); }
  28%  { transform: rotate(-4deg); animation-timing-function: steps(1); }
  42%  { transform: rotate( 4deg); animation-timing-function: steps(1); }
  57%  { transform: rotate(-4deg); animation-timing-function: steps(1); }
  71%  { transform: rotate( 4deg); animation-timing-function: steps(1); }
  85%  { transform: rotate(-4deg); animation-timing-function: steps(1); }
  100% { transform: rotate(-4deg); }
}

/* click: stop-motion shake before opening */
@keyframes envShake {
  0%   { transform: rotate(-4deg); animation-timing-function: steps(1); }
  25%  { transform: rotate( 4deg); animation-timing-function: steps(1); }
  50%  { transform: rotate(-4deg); animation-timing-function: steps(1); }
  75%  { transform: rotate( 4deg); animation-timing-function: steps(1); }
  100% { transform: rotate(-4deg); }
}

/* flap: snap to open */
@keyframes flapOpen {
  from { transform: rotateX(0deg); }
  to   { transform: rotateX(-180deg); }
}

/* letter: snap to risen */
@keyframes letterRise {
  from { transform: translateX(-50%) translateY(0px); }
  to   { transform: translateX(-50%) translateY(var(--letter-rise, -150px)); }
}

.envelope-red {
  position: relative;
  width: 280px;
  height: 190px;
  background-color: var(--env-red-body);
  transform: rotate(-4deg);
  border-radius: 2px;
  cursor: pointer;
  perspective: 1000px;
  transform-style: preserve-3d;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(80, 15, 10, 0.24);
  transition: box-shadow 0.35s ease;
  animation: envAppear var(--env-appear-dur) cubic-bezier(0.22, 1, 0.36, 1) both, envWobble var(--env-wobble-dur) var(--env-wobble-delay) both;
}

.envelope-red.is-shaking {
  animation: envShake var(--env-shake-dur) forwards;
}

.envelope-red.open-overflow {
  overflow: visible;
}

.envelope-red:focus-visible {
  outline: 2px solid rgba(186, 53, 48, 0.5);
  outline-offset: 5px;
}

.envelope-red:hover {
  box-shadow: 0 16px 42px rgba(80, 15, 10, 0.30);
}

.env-red__flap,
.env-red__left,
.env-red__right,
.env-red__bottom {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.env-red__flap {
  background-color: var(--env-red-flap);
  clip-path: polygon(0 0, 100% 0, 50% 50%);
  transform-origin: top center;
}

.env-red__flap.is-opening {
  animation: flapOpen var(--env-flap-dur) steps(1, start) forwards;
}

.env-red__flap.behind {
  z-index: 2;
}

.env-red__left {
  background-color: var(--env-red-side);
  clip-path: polygon(0 0, 0 100%, 50% 50%);
}

.env-red__right {
  background-color: var(--env-red-side);
  clip-path: polygon(100% 0, 100% 100%, 50% 50%);
}

.env-red__bottom {
  background-color: var(--env-red-bottom);
  clip-path: polygon(0 100%, 100% 100%, 50% 50%);
}

.env-red__grain {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='200'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.14 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
  background-size: 300px 200px;
  mix-blend-mode: multiply;
}

/* The letter is now a 9:16 card that previews the hero, rises out of the
   envelope, and hands off to a viewport-pinned card that grows to fullscreen. */
.env-red__letter {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: var(--letter-w, 116px);
  aspect-ratio: 9 / 16;
  background-color: var(--bg);
  transform: translateX(-50%);
  z-index: 3;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 3px 16px rgba(60, 30, 5, 0.22);
}

.env-red__letter.is-rising {
  animation: letterRise var(--env-letter-dur) var(--env-letter-delay) steps(1, end) forwards;
}

/* Inner "screen": holds a scaled clone of the real hero. Sized + scaled in JS. */
.letter-stage {
  position: absolute;
  top: 0;
  left: 50%;
  transform-origin: top center;
  overflow: hidden;
  background-color: var(--bg);
}

.letter-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse at 18% 22%, rgba(255, 248, 230, 0.14), transparent 55%),
    radial-gradient(ellipse at 82% 30%, rgba(80, 50, 10, 0.07), transparent 55%),
    radial-gradient(ellipse at 50% 85%, rgba(60, 35, 5, 0.09), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/><feGaussianBlur stdDeviation='0.4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.14 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: auto, auto, auto, 600px 600px;
  mix-blend-mode: multiply;
}

.letter-stage .hero {
  pointer-events: none;
}

/* Viewport-pinned card that zooms from the letter up to fullscreen. */
.grow-card {
  position: fixed;
  overflow: hidden;
  background-color: var(--bg);
  border-radius: 4px;
  z-index: 10001;
  transform-origin: center center;
  box-shadow: 0 14px 50px rgba(60, 30, 5, 0.28);
  will-change: transform, opacity;
}

/* ── /Envelope overlay ──────────────────────────── */

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

html {
  scroll-behavior: smooth;
}

/* overflow-x belongs on html alone. On body it also forces overflow-y to
   compute as auto, which turns body into a scroll container that can never
   scroll - the trackpad wheel gesture latches onto that dead scroller instead
   of the page. */
html {
  overflow-x: hidden;
}

body {
  background-color: var(--bg);
  font-family: 'Alk Life', Georgia, serif;
  color: var(--text);
}

/* ── Desktop notice ─────────────────────────────── */
.mobile-prompt {
  display: none;
}

/* ── Page wrapper + scallop border ─────────────── */

#border-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 1;
}

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 40px;
  overflow-x: clip;
}

/* Paper texture: SVG fractal noise + warm mottling, multiply-blended over the ivory base */
.page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse at 18% 22%, rgba(255, 248, 230, 0.14), transparent 55%),
    radial-gradient(ellipse at 82% 30%, rgba(80, 50, 10, 0.07), transparent 55%),
    radial-gradient(ellipse at 50% 85%, rgba(60, 35, 5, 0.09), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/><feGaussianBlur stdDeviation='0.4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.14 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: auto, auto, auto, 600px 600px;
  mix-blend-mode: multiply;
  opacity: 1;
}


/* ── Hero Section ───────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 70px 20px 0px;
  overflow: visible;
}

/* ── Decorative illustrations ───────────────────── */
@keyframes deco-sway-a {
  0%, 100% { transform: rotate(-4deg); }
  50%       { transform: rotate(4deg); }
}
@keyframes deco-sway-b {
  0%, 100% { transform: rotate(3deg); }
  50%       { transform: rotate(-5deg); }
}
@keyframes deco-sway-c {
  0%, 100% { transform: rotate(-3deg); }
  50%       { transform: rotate(5deg); }
}
@keyframes deco-sway-d {
  0%, 100% { transform: rotate(5deg); }
  50%       { transform: rotate(-3deg); }
}
@keyframes buera-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
@keyframes deco-sway-line {
  0%, 100% { transform: rotate(-2deg); }
  50%       { transform: rotate(2deg); }
}

.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
}



.deco--line-tl {
  width: 6rem;
  left: 0;
  top: 2rem;
  transform-origin: top left;
}

.deco--line-tr {
  width: 6rem;
  right: 0;
  top: 2rem;
  transform-origin: top right;
}

/* ── Eyebrow ────────────────────────────────────── */
.eyebrow {
  font-family: 'Alk Life', Georgia, serif;
  font-size: 15px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
  margin-bottom: -5px;
  text-align: center;
}

/* ── Eyebrow separator ──────────────────────────── */
.separator-eyebrow {
  width: 160px;
  margin-bottom: 18px;
}

/* ── Names block ────────────────────────────────── */
.names {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 22px;
  text-align: center;
}

@keyframes namesStopMotion {
  0%   { opacity: 0.92; transform: translateY(0px)  rotate(-0.15deg); animation-timing-function: steps(1); }
  13%  { opacity: 1.00; transform: translateY(-1px) rotate(0.10deg);  animation-timing-function: steps(1); }
  26%  { opacity: 0.88; transform: translateY(0px)  rotate(-0.10deg); animation-timing-function: steps(1); }
  39%  { opacity: 0.95; transform: translateY(1px)  rotate(0.18deg);  animation-timing-function: steps(1); }
  52%  { opacity: 1.00; transform: translateY(0px)  rotate(-0.12deg); animation-timing-function: steps(1); }
  65%  { opacity: 0.90; transform: translateY(-1px) rotate(0.15deg);  animation-timing-function: steps(1); }
  78%  { opacity: 0.94; transform: translateY(0px)  rotate(-0.18deg); animation-timing-function: steps(1); }
  91%  { opacity: 1.00; transform: translateY(1px)  rotate(0.10deg);  animation-timing-function: steps(1); }
  100% { opacity: 0.92; transform: translateY(0px)  rotate(-0.15deg); }
}

.name {
  font-family: 'SS GEO CHALK', Georgia, serif;
  font-size: 76px;
  line-height: 1.0;
  color: var(--text);
  display: block;
  animation: namesStopMotion 4.2s infinite;
}

.name:nth-child(3) {
  animation-delay: -1.8s;
}

.name-da {
  font-family: 'SS GEO CHALK', Georgia, serif;
  font-size: 34px;
  line-height: 1.4;
  color: var(--red);
  display: block;
  animation: namesStopMotion 4.2s -0.9s infinite;
}

/* ── Separator ──────────────────────────────────── */
.rings {
  width: 140px;
  margin-bottom: 18px;
}

/* ── Buera venue illustration ───────────────────── */
.buera-wrap {
  position: relative;
  width: 120%;
  max-width: 310px;
  margin-bottom: 28px;
}

.buera {
  width: 100%;
  display: block;
  z-index: 5;
}

.lights {
  position: absolute;
  width: 200px;
  bottom: 5rem;
  pointer-events: none;
  user-select: none;
  opacity: 0.8;
  z-index: 4;
}

.lights--left {
  right: calc(100% - 110px);
}

.lights--right {
  left: calc(100% - 130px);
  transform: scaleX(-1);
}

/* ── Event info ─────────────────────────────────── */
.event-info {
  text-align: center;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.event-date {
  font-family: 'Alk Life', Georgia, serif;
  font-size: 19px;
  color: var(--text);
  letter-spacing: 0.01em;
}

.event-venue {
  font-family: 'Alk Life', Georgia, serif;
  font-size: 15px;
  color: var(--red);
  letter-spacing: 0.08em;
}

/* ── CTA button ─────────────────────────────────── */
.cta {
  background: #d9b86a;
  border: none;
  color: var(--paper);
  font-family: 'Alk Life', Georgia, serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.07em;
  padding: 14px 38px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 36px;
  border-radius: 4px;
  box-shadow: 0 4px 18px rgba(184, 144, 62, 0.38);
  z-index: 1000;
}

.cta:active {
  filter: brightness(0.91);
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(184, 144, 62, 0.25);
}

/* ── Scroll hint ────────────────────────────────── */
.scroll-hint {
  font-family: 'Alk Life', Georgia, serif;
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

/* ── Footer ─────────────────────────────────────── */
.footer {
  padding: 24px 0 32px;
  display: flex;
  justify-content: center;
}

.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  opacity: 0.3;
  color: var(--text);
  font-family: 'Alk Life', Georgia, serif;
  font-size: 13px;
  transition: opacity 0.3s ease;
}

.footer-credit:hover {
  opacity: 0.7;
}

.footer-credit img {
  height: 22px;
  width: auto;
}

/* ── Scattered dots & rings ─────────────────────── */
.scatter-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.scatter-dots span {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}

/* Filled dots - one span per color, positions via box-shadow           */
/* spread: -1px = ~2px dot, 0 = 4px dot, 1px = 6px, 2px = 8px         */
.sd-r {
  width: 4px;
  height: 4px;
  background: #e03030;
  box-shadow:
    18px  38px 0  0   #e03030,
    26px  52px 0 -1px #e03030,
    362px 32px 0  0   #e03030,
    370px 48px 0 -1px #e03030,
    374px 292px 0  1px #e03030,
    368px 308px 0  0   #e03030,
    22px  268px 0  0   #e03030,
    28px  283px 0 -1px #e03030,
    128px 155px 0 -1px #e03030,
    262px 162px 0 -1px #e03030,
    16px  495px 0  1px #e03030,
    24px  510px 0  0   #e03030,
    370px 485px 0  0   #e03030,
    375px 502px 0 -1px #e03030,
    88px  678px 0 -1px #e03030,
    302px 682px 0 -1px #e03030,
    38px  828px 0  0   #e03030,
    352px 822px 0 -1px #e03030,
    172px 748px 0 -1px #e03030,
    218px 755px 0  0   #e03030;
}

.sd-y {
  width: 4px;
  height: 4px;
  background: #c8a050;
  box-shadow:
    38px  22px 0  1px #c8a050,
    30px  38px 0 -1px #c8a050,
    352px 18px 0 -1px #c8a050,
    360px 34px 0  1px #c8a050,
    28px  192px 0  0   #c8a050,
    35px  208px 0 -1px #c8a050,
    358px 358px 0  1px #c8a050,
    365px 372px 0  0   #c8a050,
    152px 422px 0 -1px #c8a050,
    238px 418px 0  0   #c8a050,
    372px 572px 0  0   #c8a050,
    378px 586px 0 -1px #c8a050,
    20px  622px 0 -1px #c8a050,
    28px  636px 0  1px #c8a050,
    148px 842px 0  0   #c8a050,
    242px 848px 0 -1px #c8a050,
    192px 578px 0 -1px #c8a050,
    208px 590px 0  0   #c8a050;
}

.sd-g {
  width: 4px;
  height: 4px;
  background: #6a8c50;
  box-shadow:
    58px  28px 0  0   #6a8c50,
    65px  44px 0 -1px #6a8c50,
    338px 24px 0 -1px #6a8c50,
    345px 40px 0  1px #6a8c50,
    372px 155px 0  0   #6a8c50,
    368px 170px 0 -1px #6a8c50,
    12px  388px 0  1px #6a8c50,
    18px  403px 0  0   #6a8c50,
    108px 398px 0 -1px #6a8c50,
    282px 405px 0 -1px #6a8c50,
    365px 652px 0  0   #6a8c50,
    370px 666px 0 -1px #6a8c50,
    18px  730px 0 -1px #6a8c50,
    25px  745px 0  1px #6a8c50,
    85px  862px 0  0   #6a8c50,
    305px 858px 0 -1px #6a8c50,
    255px 725px 0 -1px #6a8c50,
    268px 740px 0  0   #6a8c50;
}

/* Hollow rings - individually positioned */
.sd-ring {
  width: 10px;
  height: 10px;
  background: transparent;
}
.sd-ring--r { border: 1.5px solid #e03030; }
.sd-ring--y { border: 1.5px solid #c8a050; }
.sd-ring--g { border: 1.5px solid #6a8c50; }

.sd-rng-1  { top:  65px; left: 145px; }
.sd-rng-2  { top:  65px; left: 238px; }
.sd-rng-3  { top: 548px; left:  20px; }
.sd-rng-4  { top: 535px; left: 360px; }
.sd-rng-5  { top:  70px; left:  70px; }
.sd-rng-6  { top:  70px; left: 312px; }
.sd-rng-7  { top: 758px; left: 175px; }
.sd-rng-8  { top: 138px; left:  38px; }
.sd-rng-9  { top: 134px; left: 344px; }
.sd-rng-10 { top: 538px; left: 255px; }

/* ── Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border-col);
  border-radius: 3px;
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-col) var(--bg);
}

/* ── Sections shared ────────────────────────────── */
.section {
  padding: 44px 0 36px;
  position: relative;
}

.section-heading {
  font-family: 'SS GEO CHALK', Georgia, serif;
  font-size: 44px;
  line-height: 1;
  color: var(--text);
  text-align: center;
  margin-bottom: 4px;
}

.section-sep {
  display: block;
  width: 160px;
  margin: 0 auto 26px;
}

/* ── Program / Days ─────────────────────────────── */
.day-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.day-card {
  background-color: var(--paper);
  border: 1px solid rgba(184, 151, 122, 0.40);
  box-shadow: 0 3px 16px rgba(120, 80, 30, 0.10);
  border-radius: 10px;
  padding: 16px 18px 16px 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.day-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background-color: var(--red);
  border-radius: 10px 0 0 10px;
}

.day-card--featured {
  border-color: rgba(200, 160, 80, 0.45);
  box-shadow: 0 3px 16px rgba(200, 160, 80, 0.16);
}

.day-card--featured::before {
  background-color: var(--gold);
}

.day-card__num {
  font-family: 'SS GEO CHALK', Georgia, serif;
  font-size: 30px;
  line-height: 1;
  color: var(--red);
  min-width: 24px;
  padding-top: 3px;
}

.day-card--featured .day-card__num {
  color: var(--gold);
}

.day-card__body {
  flex: 1;
}

.day-card__date {
  font-family: 'Alk Life', Georgia, serif;
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.day-card__name {
  font-family: 'SS GEO CHALK', Georgia, serif;
  font-size: 26px;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 6px;
}

.day-card__desc {
  font-family: 'Alk Life', Georgia, serif;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-soft);
}

/* ── Hotel ──────────────────────────────────────── */
.hotel-card {
  background-color: var(--paper);
  border: 1px solid rgba(184, 151, 122, 0.35);
  box-shadow: 0 4px 22px rgba(120, 80, 30, 0.12);
  border-radius: 14px;
  padding: 28px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hotel-name {
  font-family: 'SS GEO CHALK', Georgia, serif;
  font-size: 30px;
  color: var(--text);
  line-height: 1;
}

.hotel-dates {
  font-family: 'Alk Life', Georgia, serif;
  font-size: 13px;
  color: var(--red);
  letter-spacing: 0.06em;
}

.hotel-desc {
  font-family: 'Alk Life', Georgia, serif;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-soft);
}

.hotel-btn {
  display: inline-block;
  background: #d9b86a;
  border: none;
  color: var(--paper);
  font-family: 'Alk Life', Georgia, serif;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.07em;
  padding: 12px 32px;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 4px 18px rgba(184, 144, 62, 0.38);
  margin-top: 6px;
}

.hotel-btn:active {
  filter: brightness(0.91);
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(184, 144, 62, 0.25);
}

/* ── RSVP ───────────────────────────────────────── */
.rsvp-deadline {
  font-family: 'Alk Life', Georgia, serif;
  font-size: 14px;
  color: var(--text-soft);
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.6;
}

.rsvp-deadline strong {
  color: var(--red);
}

.rsvp-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rsvp-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rsvp-label {
  font-family: 'Alk Life', Georgia, serif;
  font-size: 13px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}

.rsvp-input {
  background-color: var(--paper);
  border: 1.5px solid var(--border-col);
  color: var(--text);
  font-family: 'Alk Life', Georgia, serif;
  font-size: 15px;
  padding: 12px 16px;
  width: 100%;
  outline: none;
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
}

.rsvp-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 160, 80, 0.18);
}

.rsvp-days {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rsvp-day-card {
  display: block;
  cursor: pointer;
}

.rsvp-day-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.rsvp-day-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--paper);
  border: 1.5px solid var(--border-col);
  color: var(--text);
  font-family: 'Alk Life', Georgia, serif;
  font-size: 15px;
  padding: 14px 18px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(120, 80, 30, 0.07);
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.rsvp-day-card input[type="radio"]:checked + .rsvp-day-inner {
  background: #d9b86a;
  color: var(--paper);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(184, 144, 62, 0.35);
}

.rsvp-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 140px;
}

.rsvp-step-btn {
  width: 38px;
  height: 38px;
  background-color: transparent;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-family: 'Alk Life', Georgia, serif;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.15s ease;
}

.rsvp-step-btn:active {
  background-color: rgba(200, 160, 80, 0.15);
}

.rsvp-step-val {
  flex: 1;
  text-align: center;
  font-family: 'SS GEO CHALK', Georgia, serif;
  font-size: 24px;
  color: var(--text);
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rsvp-submit {
  background: #d9b86a;
  border: none;
  color: var(--paper);
  font-family: 'Alk Life', Georgia, serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.07em;
  padding: 15px 32px;
  cursor: pointer;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 4px 18px rgba(184, 144, 62, 0.38);
  width: 100%;
}

.rsvp-submit:active {
  filter: brightness(0.91);
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(184, 144, 62, 0.25);
}

.rsvp-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rsvp-status {
  font-family: 'Alk Life', Georgia, serif;
  font-size: 14px;
  color: var(--text-soft);
  text-align: center;
  min-height: 1.4em;
  line-height: 1.6;
}

.rsvp-status.error   { color: var(--red); }
.rsvp-status.success { color: #5a8a3c; }

/* ── DoodleCSS hand-drawn borders ───────────────── */
/* Hand-drawn frame/button SVGs adapted from DoodleCSS (chr15m/DoodleCSS),    */
/* inlined as border-image data-URIs and recolored to this site's palette.    */
/* Fonts + colors are intentionally left as-is - borders only.                */

/* Warm-brown hand-drawn frame - cards & inputs */
.day-card,
.hotel-card,
.rsvp-input,
.rsvp-day-inner {
  border: 7px solid transparent;
  border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='263.1' height='140.1' viewBox='0 0 246.7 131.3'><g fill='none' stroke='%23e03030' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'><path d='M2.1 21.6c-.2 12.5 2 25 .9 37.4q-.5 12.3.1 24.4c0 12.7-.7 24.4.1 37.1 3.3 5.8 10.1 7.6 16 8.2 4.6 0 9.1-.7 13.7 0 6.8.8 14 1.4 20.8.7 8.3-.5 13.7-.1 22 0l7.2-.5'/><path d='M82.1 129c14.3-.7 28.6-.3 43-.4 14-.8 28.2 1 42.2-.6 13.3-1 26.7.2 40.1-.5 7.2-.7 14.4.2 21.6-.4 6.8-.5 11.8-.2 13.2-6q.3-7.3 1.2-14.5m0-.2q.5-10.5 1.4-21c.7-10.6-.4-21.2-.7-31.8q-1.1-20.2-1-40.6c1.7-7.4-4.3-12.8-11.5-11l-24.5 1.5c-6 .9-12-.1-18 .3-6.5-.4-13.1-1.6-19.6 0-10.7.5-21.3-1-32-.5-8.6.1-17.1 1-25.7 0h-5m-.2.1c-8.3-.1-16.6 0-24.9-1.3-11.5-.8-23 1.4-34.6 1.4q-12.2.3-24.4-.5c-6-.3-12-1.2-18-1.1-3.8 1.8-3 6.9-3 10.4q0 4.5.4 8.8'/></g></svg>") 10 stretch;
}

/* Featured day card - gold hand-drawn frame */
.day-card--featured {
  border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='263.1' height='140.1' viewBox='0 0 246.7 131.3'><g fill='none' stroke='%23c8a050' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'><path d='M2.1 21.6c-.2 12.5 2 25 .9 37.4q-.5 12.3.1 24.4c0 12.7-.7 24.4.1 37.1 3.3 5.8 10.1 7.6 16 8.2 4.6 0 9.1-.7 13.7 0 6.8.8 14 1.4 20.8.7 8.3-.5 13.7-.1 22 0l7.2-.5'/><path d='M82.1 129c14.3-.7 28.6-.3 43-.4 14-.8 28.2 1 42.2-.6 13.3-1 26.7.2 40.1-.5 7.2-.7 14.4.2 21.6-.4 6.8-.5 11.8-.2 13.2-6q.3-7.3 1.2-14.5m0-.2q.5-10.5 1.4-21c.7-10.6-.4-21.2-.7-31.8q-1.1-20.2-1-40.6c1.7-7.4-4.3-12.8-11.5-11l-24.5 1.5c-6 .9-12-.1-18 .3-6.5-.4-13.1-1.6-19.6 0-10.7.5-21.3-1-32-.5-8.6.1-17.1 1-25.7 0h-5m-.2.1c-8.3-.1-16.6 0-24.9-1.3-11.5-.8-23 1.4-34.6 1.4q-12.2.3-24.4-.5c-6-.3-12-1.2-18-1.1-3.8 1.8-3 6.9-3 10.4q0 4.5.4 8.8'/></g></svg>") 10 stretch;
}

/* rsvp-input: animate opacity for stop-motion border flicker */
@keyframes borderImageFlicker {
  0%   { opacity: 0.65; animation-timing-function: steps(1); }
  13%  { opacity: 1.00; animation-timing-function: steps(1); }
  26%  { opacity: 0.75; animation-timing-function: steps(1); }
  39%  { opacity: 0.95; animation-timing-function: steps(1); }
  52%  { opacity: 1.00; animation-timing-function: steps(1); }
  65%  { opacity: 0.70; animation-timing-function: steps(1); }
  78%  { opacity: 0.88; animation-timing-function: steps(1); }
  91%  { opacity: 1.00; animation-timing-function: steps(1); }
  100% { opacity: 0.65; }
}

.rsvp-input {
  animation: borderImageFlicker 6.2s -2.5s infinite;
}

.rsvp-input:focus {
  animation-play-state: paused;
}

/* Hand-drawn button outline - over the existing gold gradient fill */
.cta,
.hotel-btn,
.rsvp-submit,
.rsvp-day-card input[type="radio"]:checked + .rsvp-day-inner {
  border: 6px solid transparent;
  border-radius: 10px;
  border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120.1' height='61.3' viewBox='0 0 112.6 57.5'><path fill='none' stroke='%237a5c3a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M15.5 2h16.7c5 .2 12.7 1 19.1.7 4.3.5 8.6-.3 13 .3 6.1 0 12.3-1 18.4-.7 5.9.4 10.1.5 17.6.4 7.4-.5 10.7 0 10.2 7.3q-.3 9-.1 16c0 8.7 1.3 25-.6 27.6-3 3.8-10 1-14.3 1.2-4-.2-9.6 1-13.5 0-5-.7-8.3.7-13.2.3-5 0-9.7-.8-14.5.3a64 64 0 0 1-19.2-.5c-5.9-.9-10 0-15.9-.1-4.7 0-15 1.8-16.6 0S2.2 43 2.2 39.1c-.4-9.2-.5-15.6.1-24.8.1-1.6-1.1-8.4 0-10.2C4.7.5 11.6 2.5 15.5 2'/></svg>") 10 stretch;
}

/* Round hand-drawn outline - RSVP +/− stepper buttons */
.rsvp-step-btn {
  border: 9px solid transparent;
  border-radius: 50%;
  border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='39.9' height='39.9' viewBox='0 0 39.9 39.9'><path fill='none' stroke='%23c8a050' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M12.2 1.8c-2 .7-6.4 2.9-7.4 4.9-2.4 4-2.4 7.4-2.8 12.8 0 4.7 0 8.2 2.7 12.1 3.1 4.6 8.8 6.6 14.1 6.8a19 19 0 0 0 12.3-2.6c2.1-1.3 4.2-3.1 5-5.7 1.2-3.7 1.4-5.7 1.8-9.6a23 23 0 0 0-3.1-12 20 20 0 0 0-6.5-5.3c-3.1-1.6-7-1.2-10.4-1.4-2.9-.3-7.4-.2-9.8 1.9'/></svg>") 16 stretch;
}

/* Hand-drawn focus ring on inputs (DoodleCSS-style dashed outline) */
.rsvp-input:focus {
  border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='263.1' height='140.1' viewBox='0 0 246.7 131.3'><g fill='none' stroke='%23c8a050' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'><path d='M2.1 21.6c-.2 12.5 2 25 .9 37.4q-.5 12.3.1 24.4c0 12.7-.7 24.4.1 37.1 3.3 5.8 10.1 7.6 16 8.2 4.6 0 9.1-.7 13.7 0 6.8.8 14 1.4 20.8.7 8.3-.5 13.7-.1 22 0l7.2-.5'/><path d='M82.1 129c14.3-.7 28.6-.3 43-.4 14-.8 28.2 1 42.2-.6 13.3-1 26.7.2 40.1-.5 7.2-.7 14.4.2 21.6-.4 6.8-.5 11.8-.2 13.2-6q.3-7.3 1.2-14.5m0-.2q.5-10.5 1.4-21c.7-10.6-.4-21.2-.7-31.8q-1.1-20.2-1-40.6c1.7-7.4-4.3-12.8-11.5-11l-24.5 1.5c-6 .9-12-.1-18 .3-6.5-.4-13.1-1.6-19.6 0-10.7.5-21.3-1-32-.5-8.6.1-17.1 1-25.7 0h-5m-.2.1c-8.3-.1-16.6 0-24.9-1.3-11.5-.8-23 1.4-34.6 1.4q-12.2.3-24.4-.5c-6-.3-12-1.2-18-1.1-3.8 1.8-3 6.9-3 10.4q0 4.5.4 8.8'/></g></svg>") 10 stretch;
  box-shadow: none;
}

/* ── Desktop notice (min-width 769px) ───────────── */
@media (min-width: 769px) {
  .mobile-prompt {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: var(--bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
    padding: 40px;
  }

  .mobile-prompt__icon {
    width: 52px;
    opacity: 0.8;
  }

  .mobile-prompt p {
    font-family: 'Alk Life', Georgia, serif;
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-soft);
  }

  .page {
    display: none;
  }
}


/* ===========================================================================
   Viewport pin + loading screen
   ---------------------------------------------------------------------------
   Shared across every Weddsite template; only the palette below is per design.

   --vh is written by the inline script in <head> and re-measured on width
   changes only, so Instagram's and Messenger's sliding nav bar cannot resize
   the layout. `vh`, `svh`, `lvh` and `dvh` all move with it, which is why the
   pin has to come from JS. The 100vh/100svh floors stay as the no-JS fallback
   and MUST be declared before the .vh-lock rule that overrides them.

   The loader exists so `font-display: block` is safe: the block period is spent
   behind the spinner instead of on an invisible page. It also holds the entry
   animation (via .is-loading) so the intro is not played out behind it.
   =========================================================================== */

:root {
    --vh: 1vh;
}

html {
    overscroll-behavior-y: none;
}

.vh-lock .page,
.vh-lock .hero {
    min-height: calc(var(--vh) * 100);
}

/* Entry animations must not play out behind the spinner - a guest who uncovers a
   finished, static scene has been shown nothing. `is-loading` is set by the
   inline script in <head> before first paint and removed on reveal, so a paused
   animation resumes from frame zero exactly when the guest can first see it.
   The spinner itself is excluded, and with JS off the class never lands. */
.is-loading body *:not(.loader):not(.loader__spinner) {
    animation-play-state: paused !important;
}

.loader {
    position: fixed;
    inset: 0;
    /* Out-ranks every entry overlay (envelopes / curtains / clouds live at 9999+). */
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fdf6e8;
    opacity: 1;
    transition: opacity 0.55s ease;
}

.loader.is-hidden {
    opacity: 0;
}

.loader.is-gone {
    display: none;
}

.loader__spinner {
    display: block;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(184, 151, 122, 0.35);
    border-top-color: #c94038;
    border-radius: 50%;
    animation: loader-spin 0.9s linear infinite;
}

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