:root {
  --ink:#171313;
  --cream:#F7EFE5;
  --pink:#EAB8C4;
  --accent:#6E1E32;
  --world:#4B1022;
  --world-accent:#EAB8C4;
  --burgundy:#6E1E32;
  --deep-wine:#4B1022;
  --wine:#8A2944;
  --rose:#C98296;
  --silver:#C8C5C2;
  --champagne:#D6B88A;
  --ivory:#FFF8F1;
  --space:clamp(3.5rem,9vw,8rem);
  --gutter:clamp(1.2rem,5vw,5rem);
}

* {
  box-sizing:border-box;
}

html {
  scroll-padding-top:1rem;
}

body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

body,button,input,textarea {
  color:var(--ink);
}

button,input,textarea {
  font:inherit;
}

button {
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  -webkit-text-fill-color:currentColor;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  border:0;
}

a,button,input,textarea {
  touch-action:manipulation;
}

img {
  max-width:100%;
  display:block;
  height:auto;
}

svg {
  display:block;
}

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

h2 {
  font-size:clamp(2.6rem,6vw,6rem);
  font-weight:800;
  line-height:1.03;
  letter-spacing:-.065em;
}

em,.italic {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:-.065em;
}

p {
  overflow-wrap:anywhere;
}

[hidden] {
  display:none!important;
}

:focus-visible {
  outline:3px solid currentColor;
  outline-offset:6px;
}

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

.arrow {
  width:21px;
  height:21px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.svg-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.skip-link {
  position:absolute;
  left:1rem;
  top:1rem;
  z-index:50;
  padding:1rem;
  background:var(--cream);
  transform:translateY(-180%);
}

.skip-link:focus {
  transform:none;
}

.load-status {
  padding:2rem;
}

.scene {
  padding:var(--space) var(--gutter);
}

.eyebrow {
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.17em;
  line-height:1.6;
  margin-bottom:1.1rem;
}

.line-link {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:48px;
  padding:.65rem 0;
  background:none;
  border-bottom:1px solid currentColor;
  font-size:.8rem;
}

.line-link:hover .arrow {
  transform:translate(2px,-2px);
}

.line-link .arrow {
  transition:transform .2s ease;
}

/* The club entrance: a kinetic circular poster, not a photo hero. */
.opening {
  position:relative;
  background:var(--world);
  min-height:100svh;
  padding:0 var(--gutter) 1.6rem;
  isolation:isolate;
  overflow:clip;
}

.opening-grid {
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:linear-gradient(#17131312 1px,transparent 1px),linear-gradient(90deg,#17131312 1px,transparent 1px);
  background-size:80px 80px;
  pointer-events:none;
}

.topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 0;
  border-bottom:1px solid #17131355;
}

.wordmark {
  font-size:1rem;
  font-weight:900;
  letter-spacing:-.06em;
  text-transform:uppercase;
}

.top-edition {
  display:none;
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.top-rsvp {
  display:flex;
  gap:.5rem;
  align-items:center;
  font-size:.7rem;
  min-height:44px;
}

.poster-stage {
  position:relative;
  width:100%;
  max-width:1240px;
  margin:auto;
  height:clamp(380px,125vw,560px);
}

.poster-label {
  position:absolute;
  top:1.1rem;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  gap:.5rem;
  font-size:.56rem;
  text-transform:uppercase;
  letter-spacing:.13em;
}

.party-name {
  position:absolute;
  top:2.7rem;
  left:0;
  right:0;
  text-align:center;
  font-size:clamp(4.2rem,21.5vw,8rem);
  line-height:1.03;
  font-weight:900;
  letter-spacing:-.085em;
  text-transform:uppercase;
  z-index:3;
  overflow-wrap:anywhere;
}

.sun-orbit {
  position:absolute;
  width:98%;
  max-width:520px;
  aspect-ratio:1;
  left:50%;
  top:50%;
  transform:translate(-50%,-45%);
  pointer-events:none;
}

.sun-orbit svg {
  width:100%;
  height:100%;
  fill:none;
  stroke:var(--ink);
  stroke-width:1;
  opacity:.28;
}

.main-disc {
  position:absolute;
  width:77%;
  max-width:395px;
  aspect-ratio:1;
  top:50%;
  left:50%;
  transform:translate(-50%,-41%);
}

.disc-camera,.disc-face {
  width:100%;
  height:100%;
}

.disc-face {
  border-radius:50%;
  background:var(--ink);
  color:var(--pink);
  border:7px solid #EAB8C4;
  outline:1px solid var(--ink);
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:10px 14px 0 #17131315;
}

.disc-face::before {
  content:'';
  position:absolute;
  inset:7%;
  border:1px solid #EAB8C440;
  border-radius:50%;
}

.disc-label,.disc-footer {
  font-size:clamp(.48rem,1.6vw,.65rem);
  letter-spacing:.17em;
  position:relative;
  z-index:1;
}

.hero-age {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:clamp(6.2rem,29vw,10.5rem);
  letter-spacing:-.12em;
  line-height:.94;
  margin-left:-.1em;
  padding:.08em 0 .14em;
  position:relative;
}

.disc-footer {
  font-size:.46rem;
}

.hero-portrait {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%;
}

.disc-face.has-portrait {
  background:var(--ink);
}

.disc-face.has-portrait::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(transparent,#171313a0);
}

.disc-face.has-portrait .hero-age {
  color:var(--cream);
  font-size:clamp(4rem,20vw,7rem);
  align-self:flex-start;
  margin-top:auto;
  margin-left:.2em;
  z-index:1;
}

.disc-face.has-portrait .disc-footer {
  margin-bottom:1.4rem;
}

.disc-face.has-portrait .disc-label {
  margin-top:1.1rem;
}

.citrus-layer {
  position:absolute;
  width:36%;
  max-width:210px;
  bottom:4%;
  left:-4%;
  z-index:4;
  transform:rotate(-16deg);
  pointer-events:auto;
}

.citrus-layer img {
  width:100%;
  height:auto;
}

.citrus-tag {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:clamp(1rem,4vw,1.5rem);
  line-height:1;
  position:absolute;
  left:32%;
  top:28%;
  transform:rotate(12deg);
}

.disco-layer {
  position:absolute;
  width:30%;
  max-width:180px;
  top:26%;
  right:-3%;
  z-index:4;
  transform:rotate(10deg);
}

.disco-button {
  background:none;
  padding:0;
  width:100%;
  border-radius:50%;
  min-height:44px;
}


.poster-sticker {
  position:absolute;
  bottom:7%;
  right:1%;
  padding:1rem .85rem;
  background:var(--cream);
  font-size:.65rem;
  line-height:1.2;
  font-weight:900;
  border:1px solid var(--ink);
  transform:rotate(9deg);
  z-index:5;
}

.poster-note {
  position:absolute;
  bottom:1%;
  left:42%;
  font-size:.51rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  max-width:50%;
  text-align:right;
}

.entrance-seal {
  position:absolute;
  inset:10%;
  border-radius:50%;
  background:var(--cream);
  color:var(--ink);
  z-index:6;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  border:1px solid var(--wine);
  gap:.5rem;
  pointer-events:none;
}

.entrance-seal span {
  font-size:.55rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
}

.entrance-seal strong {
  font-size:clamp(2rem,10vw,3.8rem);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.075em;
  line-height:1.15;
}

.seal-star {
  width:25px;
  height:25px;
  fill:var(--accent);
  margin-top:.7rem;
}

.opening.is-entered .entrance-seal {
  visibility:hidden;
}

.opening-bottom {
  position:relative;
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  text-align:center;
}

.opening-bottom>p {
  font-size:.88rem;
  max-width:26ch;
}

.enter-button {
  background:var(--ink);
  color:var(--cream);
  border-radius:100px;
  padding:.9rem 1.4rem;
  display:flex;
  gap:2rem;
  align-items:center;
  font-size:.8rem;
  min-height:50px;
  transition:background .2s;
}

.enter-button:hover {
  background:#6E1E32;
}

.discover {
  font-size:.59rem;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:.8rem;
}

.cue-line {
  height:26px;
  width:1px;
  background:currentColor;
  transform-origin:top;
}

.celebration {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:10;
  overflow:hidden;
}

/* A signed letter and oversize typographic collage. */
.club {
  position:relative;
  background:var(--cream);
  padding-bottom:calc(var(--space) + 2rem);
  overflow:clip;
}

.club-heading h2 {
  font-size:clamp(3.2rem,10.8vw,10.5rem);
  line-height:1.03;
}

.line-mask {
  display:block;
  overflow:clip;
  padding:.08em 0;
  margin:-.08em 0;
}

.line-mask>span {
  display:block;
}

.club-letter {
  margin:2rem 0 0 auto;
  max-width:350px;
  position:relative;
  padding-left:2rem;
}

.club-letter>p:not(.letter-signature) {
  font-size:.95rem;
  line-height:1.9;
}

.letter-star {
  position:absolute;
  left:-.15rem;
  top:-.4rem;
  font-size:2rem;
  color:var(--accent);
  width:25px;
  height:25px;
}

.letter-signature {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:1.65rem;
  margin-top:1rem;
  transform:rotate(-7deg);
}

.club-strip {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding:.7rem 0;
  transform:rotate(-2deg);
  background:var(--pink);
  overflow:clip;
}

.club-strip span {
  display:block;
  white-space:nowrap;
  font-size:.67rem;
  letter-spacing:.12em;
  width:max-content;
}

/* The environment selector changes the world and the editorial look slip. */
.vibe {
  background:var(--world-accent);
  display:grid;
  gap:2rem;
}

.vibe-intro>p:last-child {
  font-size:.83rem;
  max-width:29ch;
  margin-top:1.5rem;
}

.vibe-controls {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--ink);
  border-radius:100px;
  padding:4px;
  gap:3px;
}

.vibe-controls button {
  background:none;
  border-radius:100px;
  min-height:44px;
  font-size:.75rem;
  padding:.5rem;
}

.vibe-controls button[aria-pressed=true] {
  background:var(--ink);
  color:var(--cream);
}

.vibe-display {
  position:relative;
  min-height:380px;
  display:flex;
  align-items:center;
  padding:2rem 1.5rem 6rem;
  margin-top:1.5rem;
  isolation:isolate;
  overflow:clip;
}

.vibe-orbit {
  position:absolute;
  width:300px;
  height:300px;
  border:1px solid #17131340;
  border-radius:50%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:-1;
}

.vibe-orbit::after {
  content:'';
  position:absolute;
  inset:20%;
  border:1px solid #17131335;
  border-radius:50%;
}

.vibe-spark {
  position:absolute;
  top:0;
  right:0;
  width:50px;
  color:var(--ink);
  transform:rotate(15deg);
}

.vibe-spark svg {
  fill:currentColor;
  width:100%;
}

.vibe-copy h3 {
  font-size:clamp(2.3rem,7.8vw,4.5rem);
  font-weight:900;
  line-height:1.07;
  letter-spacing:-.065em;
  max-width:12ch;
}

.vibe-copy p {
  max-width:34ch;
  font-size:.83rem;
  line-height:1.7;
  margin-top:1rem;
}

.look-slip {
  position:absolute;
  bottom:1.5rem;
  right:.4rem;
  background:var(--cream);
  border:1px solid var(--ink);
  padding:.8rem 1rem;
  transform:rotate(-5deg);
  max-width:85%;
  width:260px;
}

.look-slip>span {
  font-size:.5rem;
  letter-spacing:.14em;
}

.look-slip strong {
  display:block;
  font-family:Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:1.4rem;
  line-height:1.3;
}

.look-slip p {
  font-size:.65rem;
  margin-top:.3rem;
}

.dress-description {
  font-size:.68rem;
  margin-top:1rem;
  max-width:55ch;
  line-height:1.8;
}

/* Date set as a spread, followed by an orbital countdown. */
.date-scene {
  background:var(--cream);
  position:relative;
}

.date-head {
  max-width:720px;
}

.date-head h2 {
  font-size:clamp(2.6rem,7vw,6rem);
}

.date-art {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  align-items:center;
  gap:.8rem;
  margin-top:2rem;
  padding-bottom:1.2rem;
  max-width:850px;
}

.date-day {
  font-size:clamp(6.8rem,31vw,19rem);
  line-height:1;
  letter-spacing:-.1em;
  font-weight:900;
  color:var(--accent);
  padding-right:.1em;
}

.date-side {
  display:flex;
  flex-direction:column;
  font-size:.65rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  gap:.4rem;
  min-width:0;
}

.date-side>span:first-child {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:clamp(1.5rem,5.8vw,4rem);
  letter-spacing:-.06em;
  text-transform:none;
  line-height:1.1;
}

.date-side strong {
  font-weight:400;
  font-size:clamp(.78rem,2.4vw,1.2rem);
  letter-spacing:0;
  text-transform:none;
}

.date-underline {
  position:absolute;
  bottom:0;
  width:100%;
  height:30px;
  fill:none;
  stroke:var(--ink);
  stroke-width:1.1;
}

.date-scene>.line-link {
  margin-top:1.5rem;
}

.countdown {
  background:var(--ink);
  color:var(--cream);
  display:grid;
  gap:2rem;
  align-items:center;
}

.countdown-copy>p:last-child {
  font-size:.78rem;
  margin-top:1rem;
}

.countdown-orbit {
  position:relative;
  width:min(100%,410px);
  aspect-ratio:1;
  margin:auto;
}

.count-ring {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:none;
  stroke:var(--world-accent);
  stroke-width:1;
}

.countdown-digits {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2rem;
}

.countdown-digits>div:first-child {
  text-align:center;
}

.countdown-digits strong {
  font-weight:400;
  line-height:1.05;
  font-variant-numeric:tabular-nums;
  display:block;
}

.countdown-digits>div:first-child strong {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:clamp(4.5rem,20vw,8rem);
  letter-spacing:-.07em;
}

.countdown-digits span {
  font-size:.55rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.count-small {
  display:flex;
  align-items:center;
  gap:1.4rem;
  text-align:center;
  margin-top:.7rem;
}

.count-small strong {
  font-size:1.6rem;
}

.count-small>.count-dot {
  font-size:1rem;
}

.orbit-caption {
  position:absolute;
  bottom:12%;
  left:0;
  right:0;
  text-align:center;
  font-size:.4rem;
  letter-spacing:.11em;
  color:var(--world-accent);
}

/* Native horizontal postcard rail; its overflow is intentionally local. */
.gallery {
  background:var(--cream);
  padding-left:0;
  padding-right:0;
  overflow:clip;
}

.gallery-heading {
  padding:0 var(--gutter);
  display:grid;
  gap:1.5rem;
}

.gallery-heading h2 {
  font-size:clamp(2.5rem,6.5vw,5.2rem);
  max-width:17ch;
}

.gallery-heading>p {
  font-size:.75rem;
  line-height:1.8;
}

.gallery-track {
  display:flex;
  gap:clamp(1rem,3vw,2rem);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:2.5rem var(--gutter);
  overscroll-behavior-x:contain;
  align-items:flex-start;
}

.gallery-track::-webkit-scrollbar {
  display:none;
}

.postcard {
  flex:0 0 80%;
  max-width:390px;
  background:var(--world-accent);
  padding:.65rem .65rem 1rem;
  scroll-snap-align:center;
  border:1px solid #17131335;
  min-width:0;
  transform:rotate(-2deg);
}

.postcard:nth-child(even) {
  transform:rotate(2deg);
  margin-top:1.2rem;
  background:#D6B88A;
}

.photo-open {
  display:block;
  width:100%;
  background:none;
  padding:0;
  position:relative;
}

.photo-open img {
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  transition:transform .3s ease;
  height:auto;
}

.photo-open:hover img {
  transform:scale(.975);
}

.photo-open>.photo-caption {
  position:absolute;
  bottom:.7rem;
  left:.7rem;
  background:var(--cream);
  padding:.3rem .5rem;
  font-size:.5rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.postcard-caption {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:1rem;
  line-height:1.4;
  margin-top:.75rem;
  overflow-wrap:anywhere;
}

.postcard-index {
  display:block;
  font-size:.5rem;
  letter-spacing:.1em;
  margin-top:.6rem;
}

.gallery-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  font-size:.63rem;
  margin:0 var(--gutter);
  border-bottom:1px solid #17131340;
  padding-bottom:1rem;
}

.gallery-controls button {
  width:46px;
  height:46px;
  border:1px solid var(--ink);
  border-radius:50%;
  background:none;
  display:grid;
  place-items:center;
}

.gallery-controls button:disabled {
  opacity:.3;
  cursor:default;
}

.photo-dialog {
  width:min(92vw,680px);
  max-height:92svh;
  padding:1rem;
  border:0;
  background:var(--cream);
  color:var(--ink);
}

.photo-dialog::backdrop {
  background:#171313d9;
}

.photo-dialog img {
  width:100%;
  max-height:74svh;
  object-fit:contain;
  background:var(--ink);
}

.photo-dialog p {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:1rem;
  padding:.7rem .2rem;
}

.dialog-close {
  position:absolute;
  right:1.5rem;
  top:1.5rem;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--cream);
  display:grid;
  place-items:center;
  z-index:1;
}

.dialog-close svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:var(--ink);
  stroke-width:1.5;
}

/* Coordinates of a party; map replaces the graphic when configured. */
.location {
  display:grid;
  gap:2rem;
  background:#EEE4DC;
  align-items:center;
}

.location-info h2 {
  max-width:14ch;
}

.venue {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:clamp(1.8rem,4vw,3rem);
  line-height:1.25;
  margin-top:1.8rem;
}

.location-info #address {
  font-size:.85rem;
  margin-top:.7rem;
  max-width:40ch;
}

.location-note {
  font-size:.68rem;
  margin-top:.8rem;
  max-width:40ch;
  color:#635058;
}

.map-links {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:1rem;
  max-width:320px;
  margin-top:1.5rem;
}

.map-links a {
  font-size:.75rem;
}

.map-frame {
  width:100%;
  aspect-ratio:4/3;
  border:1px solid #17131340;
  overflow:hidden;
}

.map-frame iframe {
  border:0;
  width:100%;
  height:100%;
  display:block;
}

.location-art {
  width:min(100%,360px);
  aspect-ratio:1;
  margin:auto;
  position:relative;
  container-type:inline-size;
}

.location-art>svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  stroke:#17131345;
  fill:none;
  stroke-width:1;
}

.location-coordinate {
  position:absolute;
  left:12%;
  top:27%;
  font-size:clamp(1.5rem,10cqw,2.8rem);
  font-weight:900;
  letter-spacing:-.06em;
  line-height:1.05;
  transform:rotate(-7deg);
  z-index:1;
  background:#EEE4DC;
  padding:.5rem;
  max-width:78%;
}

.gifts {
  display:flex;
  align-items:center;
  gap:1.3rem;
  padding-top:2.5rem;
  padding-bottom:2.5rem;
  max-width:900px;
  margin:auto;
}

.gifts>svg {
  flex:none;
  width:52px;
  fill:none;
  stroke:var(--ink);
  stroke-width:1.2;
}

.gifts p {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:clamp(1.1rem,3vw,1.5rem);
  line-height:1.5;
}

.gifts .line-link {
  font-size:.7rem;
  margin-top:.7rem;
}

/* Personalised RSVP pass, with real labels and native validation. */
.rsvp {
  background:var(--world-accent);
}

.rsvp-heading h2 {
  max-width:14ch;
}

.rsvp-heading>p:last-child {
  font-size:.85rem;
  max-width:45ch;
  margin-top:1.4rem;
}

.rsvp-layout {
  display:grid;
  gap:2.5rem;
  margin-top:2rem;
}

.rsvp form {
  min-width:0;
  max-width:600px;
}

.rsvp label,.rsvp legend {
  display:block;
  font-size:.75rem;
  margin-bottom:.6rem;
  line-height:1.6;
}

.rsvp label span {
  font-size:.6rem;
}

.rsvp input:not([type=radio]),.rsvp textarea {
  border:0;
  border-bottom:1px solid #17131380;
  background:transparent;
  min-height:48px;
  width:100%;
  border-radius:0;
  padding:.6rem 0;
  font-size:16px;
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
}

.rsvp input::placeholder,.rsvp textarea::placeholder {
  color:#5F3542;
  opacity:1;
}

.rsvp textarea {
  resize:vertical;
  min-height:80px;
}

.rsvp fieldset {
  border:0;
  padding:0;
  margin:1.5rem 0;
}

.attendance-options {
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}

.attendance-options label {
  position:relative;
  margin:0;
  cursor:pointer;
}

.attendance-options input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}

.attendance-options span {
  display:flex;
  align-items:center;
  min-height:46px;
  border:1px solid #17131380;
  border-radius:40px;
  padding:.7rem 1rem;
  font-size:.7rem;
}

.attendance-options input:checked+span {
  background:var(--ink);
  color:var(--cream);
}

.attendance-options input:focus-visible+span {
  outline:3px solid var(--ink);
  outline-offset:3px;
}

.guest-selector {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:center;
  margin-bottom:1.5rem;
}

.guest-selector>label {
  font-size:.7rem;
  margin:0;
}

.stepper {
  display:flex;
  align-items:center;
  gap:.6rem;
}

.stepper button {
  width:44px;
  height:44px;
  border:1px solid #17131380;
  border-radius:50%;
  background:none;
  font-size:1.3rem;
}

.stepper button:disabled {
  opacity:.35;
  cursor:default;
}

.stepper output {
  font-size:1rem;
  min-width:1.2rem;
  text-align:center;
}

.rsvp-submit {
  margin-top:1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  background:var(--ink);
  color:var(--cream);
  width:100%;
  padding:1rem 1.1rem;
  min-height:56px;
  text-align:left;
  font-size:.82rem;
  border-radius:3px;
}

.rsvp-submit:hover {
  background:#6E1E32;
}

.form-note {
  font-size:.6rem;
  line-height:1.7;
  margin-top:.7rem;
  max-width:44ch;
}

.guest-pass {
  background:var(--cream);
  border:1px solid var(--ink);
  padding:1.2rem;
  position:relative;
  max-width:400px;
  width:100%;
  margin:auto;
  transform:rotate(3deg);
}

.pass-top {
  display:flex;
  justify-content:space-between;
  gap:.8rem;
  font-size:.6rem;
  letter-spacing:.07em;
  border-bottom:1px solid var(--ink);
  padding-bottom:.8rem;
}

.pass-top>span:first-child {
  text-transform:uppercase;
  font-weight:900;
}

.pass-star {
  display:block;
  width:50px;
  margin:1.5rem auto 1.1rem;
  color:var(--accent);
}

.pass-star svg {
  fill:currentColor;
  width:100%;
}

.guest-pass>p {
  font-family:Georgia,serif;
  font-style:italic;
  text-align:center;
  font-size:clamp(1.8rem,5vw,2.8rem);
  line-height:1.25;
  overflow-wrap:anywhere;
}

.guest-pass #pass-status {
  display:block;
  font-size:.65rem;
  text-align:center;
  margin-top:.5rem;
}

.pass-bottom {
  border-top:1px dashed var(--ink);
  padding-top:1rem;
  margin-top:2rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-size:.55rem;
}

.pass-barcode {
  height:32px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px,var(--ink) 9px 13px,transparent 13px 16px);
  max-width:200px;
  margin:1rem auto .5rem;
}

.pass-footer {
  display:block;
  font-size:.4rem;
  letter-spacing:.12em;
  text-align:center;
}

.outro {
  background:var(--world);
  position:relative;
  overflow:clip;
}

.outro-top {
  font-size:.6rem;
  letter-spacing:.13em;
}

.outro h2 {
  font-size:clamp(3.5rem,12vw,12rem);
  letter-spacing:-.08em;
  line-height:.98;
  text-transform:uppercase;
  max-width:12ch;
  margin:2rem 0;
}

.outro>p {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:clamp(1.3rem,3vw,2rem);
  max-width:30ch;
}

.outro-link {
  min-height:48px;
  display:inline-flex;
  align-items:center;
  gap:1.2rem;
  font-size:.75rem;
  margin-top:1.5rem;
}

.outro footer {
  border-top:1px solid #17131365;
  padding-top:1.5rem;
  margin-top:3rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:center;
  flex-wrap:wrap;
}

.outro footer img {
  width:85px;
  height:auto;
  max-height:34px;
  object-fit:contain;
}

.outro footer span {
  font-size:.6rem;
}

.outro footer span:last-child {
  max-width:22ch;
  text-align:right;
}

@media(min-width:700px) {
  .top-edition {
    display:block;
  }
  .opening {
    padding-bottom:2rem;
  }
  .poster-stage {
    height:650px;
  }
  .party-name {
    font-size:clamp(8rem,18vw,14rem);
    top:1.8rem;
  }
  .main-disc {
    width:400px;
    max-width:400px;
    top:55%;
  }
  .sun-orbit {
    width:540px;
    max-width:540px;
    top:55%;
  }
  .hero-age {
    font-size:11rem;
  }
  .citrus-layer {
    left:10%;
    bottom:6%;
    width:210px;
  }
  .disco-layer {
    right:10%;
    top:29%;
    width:180px;
  }
  .poster-sticker {
    bottom:8%;
    right:16%;
    padding:1.3rem;
    font-size:.8rem;
  }
  .poster-note {
    bottom:1%;
    left:55%;
    font-size:.6rem;
  }
  .entrance-seal strong {
    font-size:3.8rem;
  }
  .opening-bottom {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:2rem;
    text-align:left;
    max-width:1240px;
    margin:auto;
  }
  .opening-bottom>p {
    font-size:.95rem;
  }
  .discover {
    justify-self:end;
  }
  .club {
    display:grid;
    grid-template-columns:1.4fr 1fr;
    align-items:center;
    gap:3rem;
  }
  .club-letter {
    margin-top:3rem;
    padding-left:1rem;
  }
  .letter-star {
    left:-2rem;
  }
  .vibe {
    grid-template-columns:.8fr 1.2fr;
    gap:3rem;
    align-items:center;
  }
  .vibe-display {
    min-height:440px;
  }
  .vibe-copy h3 {
    font-size:clamp(3rem,5vw,4.8rem);
  }
  .date-art {
    margin-left:auto;
    width:80%;
  }
  .date-side {
    gap:.8rem;
  }
  .countdown {
    grid-template-columns:1fr 1fr;
  }
  .countdown-orbit {
    width:min(100%,440px);
  }
  .gallery-heading {
    grid-template-columns:1fr auto;
    align-items:end;
  }
  .postcard {
    flex-basis:40%;
  }
  .location {
    grid-template-columns:1fr 1fr;
    gap:3rem;
  }
  .rsvp-layout {
    grid-template-columns:1.2fr 1fr;
    gap:clamp(2.5rem,7vw,6rem);
    align-items:center;
  }
  .rsvp .guest-pass {
    padding:1.5rem;
  }
  .rsvp-heading h2 {
    max-width:17ch;
  }
}

@media(min-width:1000px) {
  .poster-stage {
    height:clamp(620px,65vh,760px);
  }
  .party-name {
    font-size:clamp(11rem,19vw,18rem);
    top:2rem;
  }
  .main-disc {
    width:430px;
    max-width:430px;
    top:54%;
  }
  .sun-orbit {
    width:580px;
    max-width:580px;
  }
  .citrus-layer {
    left:12%;
    bottom:4%;
    width:245px;
    max-width:245px;
  }
  .disco-layer {
    right:13%;
    top:30%;
    width:205px;
    max-width:205px;
  }
  .poster-sticker {
    right:20%;
    bottom:7%;
  }
  .poster-label {
    font-size:.64rem;
  }
  .club-heading h2 {
    font-size:clamp(5rem,9vw,10rem);
  }
  .club-letter {
    font-size:1.1rem;
  }
  .vibe {
    gap:8vw;
  }
  .vibe-display {
    min-height:490px;
  }
  .vibe-orbit {
    width:390px;
    height:390px;
  }
  .vibe-copy h3 {
    font-size:4.6rem;
  }
  .look-slip {
    right:0;
    padding:1rem 1.5rem;
  }
  .date-scene {
    display:grid;
    grid-template-columns:1fr 1.35fr;
    gap:2rem;
    align-items:center;
  }
  .date-head h2 {
    font-size:clamp(3rem,5vw,5rem);
  }
  .date-art {
    width:100%;
    margin:0;
  }
  .date-day {
    font-size:clamp(12rem,22vw,21rem);
  }
  .date-scene>.line-link {
    justify-self:start;
    margin-top:0;
  }
  .countdown {
    gap:7vw;
  }
  .postcard {
    flex-basis:29%;
    max-width:420px;
  }
  .gallery-track {
    padding-top:3.5rem;
    padding-bottom:3.5rem;
  }
  .location-art {
    width:380px;
  }
  .outro footer img {
    width:95px;
  }
  .rsvp-heading {
    display:flex;
    flex-wrap:wrap;
    align-items:end;
    gap:1.5rem 3rem;
  }
  .rsvp-heading .eyebrow {
    width:100%;
    margin:0;
  }
  .rsvp-heading>p:last-child {
    max-width:30ch;
    margin:0;
  }
}

.letter-star svg {
  width:100%;
  height:100%;
  fill:var(--accent);
}

.party-name.long-name {
  font-size:clamp(2.5rem,12vw,9rem);
}

.countdown-digits .long-count {
  font-size:clamp(3rem,15vw,6rem);
}

/* Burgundy Night: hero layers each have a distinct motion owner. */
.opening {
  color:var(--cream);
  background:radial-gradient(ellipse at 55% 35%,#8A294444,transparent 65%),linear-gradient(120deg,#250F19,var(--world) 45%,#350B19);
}
.opening-light {position:absolute;inset:0;background:radial-gradient(ellipse at 65% 40%,#D6B88A38,transparent 58%);opacity:0;pointer-events:none;z-index:0}
.opening-grid {z-index:0;opacity:.6;background-image:linear-gradient(#F7EFE514 1px,transparent 1px),linear-gradient(90deg,#F7EFE514 1px,transparent 1px)}
.topline,.poster-stage,.opening-bottom {position:relative;z-index:1}
.topline {border-color:#F7EFE530}
.party-name {color:var(--ivory);pointer-events:none}
.name-letter {display:inline-block}
.poster-label {font-size:.63rem;color:var(--cream)}
.list-stamp {border-bottom:1px solid var(--champagne);padding-bottom:.35rem}
#hero-short-date {display:flex;gap:.35rem;align-items:center;color:var(--champagne)}
.date-separator {opacity:.65}
.sun-orbit svg {stroke:var(--cream);opacity:.22}
.disc-pointer,.disc-reaction {width:100%;height:100%;position:relative}
.disc-face {background:var(--deep-wine);color:var(--cream);border:7px solid var(--rose);outline:5px solid var(--wine);box-shadow:none}
.disc-face::before {border-color:#D6B88A70}
.disc-label,.disc-footer {color:var(--champagne)}
.ring-track {position:absolute;inset:-6%;pointer-events:none}
.ring-track svg {width:100%;height:100%;fill:none;stroke:var(--champagne);stroke-width:1;opacity:.75}
.ring-track .ring-pin {fill:var(--champagne)}
.circle-glow {position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,transparent 56%,#D6B88A65 70%,transparent 73%);opacity:0;pointer-events:none}
.circle-trigger {position:absolute;inset:0;z-index:7;border-radius:50%;background:transparent;color:var(--champagne);width:100%;height:100%}
.circle-trigger:focus-visible {outline:2px solid var(--ivory);outline-offset:15px}
.circle-trigger.is-tapped {outline:2px solid var(--champagne);outline-offset:9px}
.entrance-seal {color:var(--ink);background:radial-gradient(circle at 35% 25%,var(--ivory),var(--cream) 70%);border-color:var(--champagne)}
.entrance-seal strong {font-size:clamp(1.8rem,8.5vw,3.8rem)}
.entrance-seal span {font-size:clamp(.5rem,1.7vw,.65rem);max-width:85%}
.seal-star {fill:var(--wine)}
.citrus-layer {pointer-events:auto;left:0;width:32%;bottom:5%}
.citrus-button {position:relative;width:100%;display:block;background:none;padding:0;border-radius:50%;color:var(--deep-wine)}
.citrus-button.is-tapped {outline:2px solid var(--champagne);outline-offset:5px}
.citrus-tag {pointer-events:none;color:var(--ivory);background:var(--deep-wine);border:1px solid var(--rose);padding:.3rem .4rem;left:26%;top:28%;line-height:1.1}
.disco-layer {right:0;width:min(52%,190px);top:auto;bottom:3%;transform:none;display:grid;justify-items:end;gap:14px}
.disco-arrival {width:clamp(74px,24vw,108px)}
.disco-float {display:block;width:100%}
.disco-button {display:block;color:var(--cream)}
.disco-button.is-tapped {outline:2px solid var(--champagne);outline-offset:5px}
.poster-sticker {background:transparent;padding:0;border:0;color:var(--burgundy);left:0;right:auto;top:30%;bottom:auto}
.sticker-face {display:block;background:var(--cream);border:1px solid var(--ink);padding:1rem .85rem;transition:transform .3s ease}
@media(hover:hover) {.poster-sticker:hover .sticker-face {transform:rotate(-5deg)}}
.disco-hint {display:flex;align-items:center;gap:.5rem;min-height:44px;max-width:100%;padding:.5rem .6rem;background:var(--cream);color:var(--deep-wine);border:1px solid var(--champagne);font-size:.7rem;line-height:1.5;position:relative}
.disco-hint::before {content:'';position:absolute;right:clamp(36px,12vw,54px);bottom:100%;height:14px;width:1px;background:var(--champagne);pointer-events:none}
.disco-hint>svg {width:15px;height:15px;fill:var(--wine);flex:none}
.disco-hint>span:not(.hint-rule) {overflow-wrap:anywhere}
.enter-button {background:var(--ink);color:var(--cream);border:1px solid #D6B88A70;position:relative;overflow:hidden;isolation:isolate}
.enter-button::before {content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent,#D6B88A33,transparent);transform:translateX(-110%);transition:transform .6s;z-index:-1}
.enter-button:hover::before {transform:translateX(110%)}
.enter-button .arrow {color:var(--champagne);transition:transform .25s}
.enter-button:hover .arrow {transform:translate(3px,-3px)}
.enter-button:active {background:var(--burgundy)}
.opening .poster-note {color:var(--champagne)}
.opening-bottom .poster-note {position:static;max-width:none;text-align:center;align-self:center;grid-column:1/-1;justify-self:center}
.light-glint {position:absolute;width:20px;height:20px;background:var(--ivory);clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);transform:translate(-50%,-50%)}
.light-beam {position:absolute;width:90px;height:1px;background:linear-gradient(90deg,transparent,var(--champagne),transparent);transform-origin:left}
.outro {color:var(--cream)}
.outro footer {border-color:#F7EFE540}
.outro footer img {background:var(--cream)}
.postcard:nth-child(even) {background:var(--silver)}
@media(min-width:700px) {
  .citrus-layer {left:8%;width:210px}
  .disco-layer {right:8%;top:29%;width:180px}
  .disco-layer {bottom:auto}
  .disco-arrival {width:180px}
  .disco-hint::before {right:90px}
  .poster-sticker {left:auto;top:auto;right:16%;bottom:8%}
  .sticker-face {padding:1.3rem}
}
@media(min-width:1000px) {
  .poster-stage {height:clamp(660px,70vh,800px)}
  .party-name {text-align:left;font-size:clamp(8.5rem,17vw,15rem);top:3rem;left:0;right:auto;width:90%}
  .main-disc {left:56%;top:63%;width:410px}
  .sun-orbit {left:56%;top:63%;width:550px}
  .citrus-layer {left:7%;width:230px;max-width:230px;bottom:8%}
  .disco-layer {right:4%;top:24%;width:190px;max-width:190px}
  .disco-arrival {width:190px}
  .disco-hint::before {right:95px}
  .poster-sticker {right:8%;bottom:13%}
  .poster-note {left:7%;bottom:2%;text-align:left}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    transition:none!important;
  }
  .cue-line {
    transform:none;
  }
}