/* Layout: one paper sheet. Two small marks in the top corners (language, OSA), the illustration as a living
   medallion filling the first screen, then a printed programme (info) and a response card (OSA) below.
   Single theme by choice (printed-paper world). Type is big on purpose: a few words per screen, set large. */
:root {
  --paper: #f5ebd9;
  --paper-deep: #ecdfc6;
  --ink: #2b2a22;
  --ink-soft: #5d584a;
  --rust: #9a4f2c;
  --sage: #5f7a6c;
  --display: "Gilda Display", "Iowan Old Style", Georgia, serif;   /* one face for everything; no italic, no small caps */
  --body: var(--display);
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: calc(var(--gutter) + 50px);   /* gutter above + the OSA button's height */
  --rule: color-mix(in oklab, var(--ink) 28%, transparent);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  background: var(--paper);
  color: var(--ink);
  font: 20px/1.55 var(--body);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Header: language switch left, menu right, inset by the same gutter from the top as from the sides. The hero carries the names. */
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  height: var(--header-h); padding: var(--gutter) var(--gutter) 0;
  background: var(--paper);
}
.menu { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); }
.lang {
  font: 17px/1 var(--body); color: var(--ink-soft);
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  border-bottom: 1px solid transparent;
}
.lang:hover { color: var(--ink); border-color: currentColor; }
.menu-link {
  font: 18px/1 var(--display); letter-spacing: .04em; color: var(--ink);
  text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent;
}
.menu-link:hover, .menu-link[aria-current="page"] { color: var(--rust); border-color: currentColor; }
.rsvp {
  font: 18px/1 var(--display); letter-spacing: .1em; color: var(--paper); background: var(--rust);
  text-decoration: none; padding: 16px 28px 14px; border: 1px solid var(--rust); border-radius: 2px;
  transition: background-color .15s ease, color .15s ease;
}
.rsvp:hover, .rsvp[aria-current="page"] { background: transparent; color: var(--rust); }
.lang:focus-visible, .menu-link:focus-visible, .rsvp:focus-visible, .submit:focus-visible { outline: 2px solid var(--sage); outline-offset: 4px; }

/* Transformed views and reveal blocks must not extend the page for a frame, or the scrollbar flashes */
main { overflow: clip; }
@supports not (overflow: clip) { main { overflow: hidden; } }

.hero {
  min-height: calc(100svh - var(--header-h));
  display: grid;
  place-items: center;
  padding: clamp(8px, 2vh, 24px) var(--gutter) clamp(16px, 4vh, 40px);
}
.stage {
  width: min(100%, calc(100svh - var(--header-h) - 64px), 900px);
  min-width: min(100%, 300px);
  aspect-ratio: 1;
  max-width: 100%;
  position: relative;
  -webkit-mask-image: radial-gradient(closest-side, #000 86%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 86%, transparent 100%);
}
.stage svg { width: 100%; height: 100%; display: block; overflow: visible; }
.art { transform-box: view-box; transform-origin: 1030px 1010px; }

/* Entry */
.stage.entering .art { animation: settle 2.6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes settle { from { transform: scale(1.07) rotate(-2deg); filter: blur(3px); } 60% { filter: blur(0); } to { transform: none; filter: none; } }

/* Ambient loops: paused until the scene is alive */
.spr { transform-box: view-box; animation-play-state: paused; }
.alive .spr { animation-play-state: running; }
.rock  { animation: rock 5.6s ease-in-out infinite alternate; }
.rock.b { animation-duration: 6.3s; animation-delay: -3s; }
@keyframes rock { from { transform: rotate(-1.8deg) translateY(1px); } to { transform: rotate(1.6deg) translateY(-1.5px); } }
.bob   { animation: sail 16s ease-in-out infinite alternate; }
@keyframes sail {
  0%   { transform: translate(-16px, 1px) rotate(-2deg); }
  20%  { transform: translate(-11px, -2px) rotate(2deg); }
  40%  { transform: translate(-6px, 1.5px) rotate(-2deg); }
  60%  { transform: translate(-1px, -2px) rotate(2deg); }
  80%  { transform: translate(3px, 1.5px) rotate(-1.5deg); }
  100% { transform: translate(6px, -1px) rotate(1.5deg); }
}
.swing { animation: swing 6s ease-in-out infinite alternate; }
@keyframes swing { from { transform: translateY(3px) rotate(-8deg); } to { transform: translateY(-5px) rotate(6deg); } }
.cloud { animation: cloud 11s ease-in-out infinite alternate; }
@keyframes cloud { from { transform: translateX(1px); } to { transform: translateX(-11px); } }
.hand  { animation: hand 3.8s ease-in-out infinite alternate; }
.hand.b { animation-duration: 4.6s; animation-delay: -2.2s; }
@keyframes hand { from { transform: rotate(-2deg); } to { transform: rotate(1.8deg); } }
.hand-small { animation: hand-small 4.6s ease-in-out infinite alternate; animation-delay: -2.2s; }
@keyframes hand-small { from { transform: rotate(-1.2deg); } to { transform: rotate(1.1deg); } }
.sway  { animation: sway 5.2s ease-in-out infinite alternate; }
.sway.b { animation-duration: 6s; animation-delay: -2.6s; }
@keyframes sway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
.beat.d1 { animation-delay: -.9s; } .beat.d2 { animation-delay: -1.6s; } .beat.d3 { animation-delay: -.3s; }
.twinkle { transform-box: fill-box; transform-origin: center; animation: twinkle 3.4s ease-in-out infinite; opacity: 0; }
@keyframes twinkle { 0%, 70%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 82% { opacity: 1; transform: scale(1) rotate(45deg); } }
.float { animation: float 4.2s ease-in-out infinite; }
.float.d1 { animation-delay: -1.1s; animation-duration: 3.7s; }
.float.d2 { animation-delay: -2.3s; animation-duration: 4.6s; }
.float.d3 { animation-delay: -3.2s; animation-duration: 3.9s; }
@keyframes float { 0%,100% { transform: translate(0,0) rotate(0); } 30% { transform: translate(1px,-8px) rotate(5deg); } 65% { transform: translate(-1px,-3px) rotate(-3deg); } }
.drift { animation: drift 7s ease-in-out infinite; }
.drift.d1 { animation-delay: -2.5s; } .drift.d2 { animation-delay: -4.8s; }
@keyframes drift { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-6deg); } }
.beat  { animation: beat 2.6s ease-in-out infinite; }
@keyframes beat { 0%, 60%, 100% { transform: scale(1); } 12% { transform: scale(1.14); } 24% { transform: scale(1.02); } 36% { transform: scale(1.1); } }
.shine { animation: shine 6s ease-in-out infinite; animation-delay: .4s; }
@keyframes shine { 0% { transform: translateX(-320px); } 35%, 100% { transform: translateX(320px); } }

/* Sections: generous air, one idea per screen */
.section { padding-block: clamp(56px, 10vh, 120px) clamp(80px, 14vh, 160px); min-height: calc(100svh - var(--header-h)); }
.section-inner { width: min(100% - 2 * var(--gutter), 1100px); margin-inline: auto; }
.section-inner.narrow { max-width: 760px; }
.section h2 {
  font: 400 clamp(52px, 8vw, 104px)/1 var(--display); letter-spacing: 0; color: var(--ink);
  margin: 0 0 .3em;
}
.lead {
  font-size: clamp(22px, 2.3vw, 28px); line-height: 1.45; max-width: 28em;
  margin: 0 0 clamp(48px, 7vh, 88px);
}

/* Info: a printed programme, six entries in a loose grid. */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(36px, 5vw, 64px) clamp(32px, 6vw, 88px); margin: 0;
}
.fact dt { font: 26px/1.2 var(--display); letter-spacing: .01em; color: var(--ink); margin: 0 0 10px; }
.fact dd { margin: 0; font-size: 21px; max-width: 26em; }

/* OSA: boxed fields with a label that rests inside the box and lifts to its top edge on focus or when filled */
.rsvp-form { display: grid; gap: clamp(20px, 3vh, 28px); }
.field { position: relative; min-width: 0; }
.field input {
  display: block; width: 100%; font: 24px/1.3 var(--body); color: var(--ink);
  background: color-mix(in oklab, #fff 22%, transparent); border: 1px solid var(--rule); border-radius: 2px;
  padding: 32px 20px 14px; transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus { outline: none; border-color: var(--rust); box-shadow: inset 0 0 0 1px var(--rust); }
.field input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 1000px var(--paper); -webkit-text-fill-color: var(--ink); }
.field label {
  position: absolute; left: 21px; top: 28px; max-width: calc(100% - 42px); font-size: 22px; line-height: 1; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; transform-origin: left top; transition: transform .2s cubic-bezier(.2, .7, .2, 1), color .2s ease;
}
.field :focus + label, .field :not(:placeholder-shown) + label { transform: translateY(-16px) scale(.68); max-width: calc((100% - 42px) / .68); }
.field :focus + label { color: var(--rust); }
.choice { margin: 0; padding: 8px 0 0; border: 0; min-width: 0; }
.choice legend { display: block; font: 17px/1.3 var(--display); letter-spacing: .03em; color: var(--ink-soft); margin: 0 0 4px; padding: 0; }
.options { display: flex; flex-wrap: wrap; gap: 14px 44px; padding-top: 8px; }
.option { display: flex; align-items: center; gap: 14px; font-size: 26px; line-height: 1.3; cursor: pointer; }
/* Custom radios: an ink ring on the paper, a rust dot when chosen */
.option input {
  appearance: none; width: 28px; height: 28px; margin: 0; flex: none;
  border: 1px solid var(--rule); border-radius: 50%; background: transparent; cursor: pointer;
  display: grid; place-content: center; transition: border-color .2s ease;
}
.option input::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--rust);
  transform: scale(0); transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}
.option:hover input { border-color: var(--ink); }
.option input:checked { border-color: var(--rust); }
.option input:checked::before { transform: scale(1); }
.option input:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-top: 8px; }
.submit {
  font: 20px/1 var(--display); letter-spacing: .1em; color: var(--paper);
  background: var(--rust); border: 1px solid var(--rust); border-radius: 2px; padding: 20px 40px 18px; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.submit:hover { background: color-mix(in oklab, var(--rust) 82%, var(--ink)); border-color: color-mix(in oklab, var(--rust) 82%, var(--ink)); }
.form-status { margin: 0; color: var(--ink-soft); max-width: 24em; }
.submit[disabled] { opacity: .7; cursor: default; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* bots fill it, people never see it */
.thanks h3 { font: 400 clamp(36px, 5vw, 56px)/1.1 var(--display); margin: 0 0 .4em; color: var(--ink); outline: none; }
.thanks p { font-size: clamp(22px, 2.3vw, 28px); line-height: 1.45; max-width: 28em; margin: 0; }


/* Views: the open one fades and lifts away, the next one's blocks rise in (staggered by --i). Only with JS, so content never hides without it. */
.view { transition: opacity .22s ease, transform .22s ease; }
.view.leaving { opacity: 0; transform: translateY(-10px); }
.view.arriving { opacity: 0; transform: translateY(8px); }
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* #debug: slow the movement down so seams and smudges are easy to spot */
.debug .rock, .debug .sway, .debug .hand, .debug .hand-small, .debug .bob, .debug .swing, .debug .cloud { animation-duration: 15s !important; }

@media (prefers-reduced-motion: reduce) {
  .stage.entering .art { animation: none; }
  .spr, .alive .spr { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .view { transition: none; }
  .submit, .field input, .field label, .option input::before { transition: none; }
}