/* ============================================
   Stephanie & Adam — Sydney 2027
   Palette pulled from the save-the-date:
     - Cream paper:     #F5EFE6
     - Warm copper:     #8B6B47
     - Deep copper:     #6B4F32
     - Harbour blue:    #7B9DB8
     - Waratah red:     #B8312A
     - Banksia gold:    #D4A537
     - Foliage green:   #6B8C4E
   ============================================ */

:root {
  /* Text-size control: every font-size in this file is multiplied by it. */
  --ts: 1;

  --cream:         #F5EFE6;
  --cream-2:       #EDE4D3;
  --cream-3:       #E4D8C2;
  --paper:         #FBF7F0;
  --ink:           #2F2A24;
  --ink-soft:      #5B5248;
  --ink-mute:      #8A8074;
  --copper:        #8B6B47;
  --copper-deep:   #6B4F32;
  --copper-light:  #B89374;
  --harbour:       #7B9DB8;
  --waratah:       #B8312A;
  --banksia:       #D4A537;
  --foliage:       #6B8C4E;
  --line:          rgba(107, 79, 50, 0.18);
  --line-soft:     rgba(107, 79, 50, 0.10);

  --f-script:  'Allura', 'Pinyon Script', cursive;
  --f-serif:   'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --f-serif-sc:'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
  --f-sans:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  --ease:      cubic-bezier(.2, .7, .2, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);

  --max:       1200px;
  --pad-x:     clamp(20px, 5vw, 64px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  font-family: var(--f-serif);
  font-size: calc(18px * var(--ts));
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* height:auto is the required partner to max-width:100% once an <img> carries
   width/height attributes. Without it the attribute height wins and the image
   renders at its literal pixel height inside a width-constrained box — which
   is exactly how the save-the-date card stretched into a tall ribbon. The
   attributes still do their real job: reserving the right aspect ratio before
   the file arrives, so nothing jumps as the page loads. */
img, svg { max-width: 100%; height: auto; display: block; }

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

button, input {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

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

/* ---------- Type primitives ---------- */
.eyebrow {
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--copper);
}
.eyebrow.center { text-align: center; display: block; }

.display {
  font-family: var(--f-serif);
  font-weight: 400;
  font-style: italic;
  font-size: calc(clamp(32px, 5vw, 56px) * var(--ts));
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--copper-deep);
}
.display.center { text-align: center; }

.lead {
  font-size: calc(clamp(17px, 1.4vw, 20px) * var(--ts));
  color: var(--ink-soft);
  max-width: 58ch;
}
.lead.center { margin-left: auto; margin-right: auto; text-align: center; }

.subhead {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: calc(20px * var(--ts));
  color: var(--ink-soft);
  max-width: 54ch;
}

.amp {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--copper);
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.scrolled {
  background: rgba(245, 239, 230, 0.9);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  padding: 12px 0;
  box-shadow: 0 1px 0 var(--line-soft);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-mark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: calc(22px * var(--ts));
  color: var(--copper-deep);
  letter-spacing: 0.02em;
}
.nav-amp {
  font-family: var(--f-script);
  font-size: calc(28px * var(--ts));
  margin: 0 4px;
  color: var(--copper);
  transform: translateY(2px);
  display: inline-block;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}
.nav-links a {
  font-family: var(--f-sans);
  font-size: calc(12px * var(--ts));
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
  transition: color .3s var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--copper);
  transition: width .35s var(--ease-out);
}
.nav-links a:hover { color: var(--copper); }
.nav-links a:hover::after { width: 100%; }
.nav-links .nav-cta {
  background: var(--copper);
  color: var(--paper);
  padding: 10px 20px;
  border-radius: 999px;
  letter-spacing: 0.24em;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.nav-links .nav-cta:hover { background: var(--copper-deep); transform: translateY(-1px); }
.nav-links .nav-cta::after { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 26px; height: 1.5px;
  background: var(--copper-deep);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px var(--pad-x) 48px;
  overflow: hidden;
  background: var(--cream);
}
.hero-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(123, 157, 184, 0.14) 0%, transparent 60%),
    radial-gradient(40% 30% at 15% 90%, rgba(212, 165, 55, 0.12) 0%, transparent 70%),
    radial-gradient(40% 30% at 85% 85%, rgba(184, 49, 42, 0.08) 0%, transparent 70%);
}
.hero-bg::before, .hero-bg::after {
  content: '';
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  opacity: 0.9;
}
.hero-bg::before { top: 12%; left: -120px; }
.hero-bg::after { bottom: 10%; right: -140px; width: 340px; height: 340px; }

.hero-flora-defs {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-flora {
  position: absolute;
  top: clamp(160px, 22vh, 260px);
  bottom: 20px;
  width: min(300px, 24vw);
  color: var(--copper-deep);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
.hero-flora-left  { left: 0; }
.hero-flora-right { right: 0; transform: scaleX(-1); }
.hero-flora-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-flora-svg path {
  stroke-width: 0.8;
  stroke-dasharray: 1;
  stroke-dashoffset: 0.8;   /* every stroke sits at 20% until its turn comes */
}
/* Hand-drawn reveal: each path waits for its own --d (0→3s in the markup,
   stretched to 0→5s here) then draws itself in 2s. Last stroke lands at 7s,
   and because the strokes fire in sequence it reads as someone drawing fast
   rather than the whole illustration fading up at once. */
html.morph-started .hero-flora-svg path {
  animation: flora-draw 2s var(--ease-out) both;
  animation-delay: calc(var(--d, 0s) * 1.667);
}
@keyframes flora-draw {
  to { stroke-dashoffset: 0; }
}

.couple-scene {
  width: min(864px, 94vw);
  margin: -138px auto 29px;
  box-sizing: border-box;
}
.couple-scene img {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
}
.couple-scene-rule {
  max-width: 624px;
  margin: 29px auto 58px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--copper-light), transparent);
  opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
  .hero-flora-svg path { stroke-dashoffset: 0; animation: none; }
  html.morph-started .hero-flora-svg path { stroke-dashoffset: 0; animation: none; }
}
@media (max-width: 720px) {
  .hero-flora { width: 28vw; opacity: 0.6; }
}

.hero-content {
  position: relative;
  text-align: center;
  max-width: 900px;
  z-index: 1;
}
.hero-content .eyebrow {
  display: block;
  margin-bottom: 40px;
  font-size: calc(19px * var(--ts));
  opacity: 0;
  animation: rise .9s var(--ease-out) .4s forwards;
}
/* Language-morphing eyebrow (Apple-style cross-fade) */
.hero-eyebrow .greet {
  display: inline-block;
  transition: opacity 500ms ease, transform 500ms ease;
  will-change: opacity, transform;
}
.hero-eyebrow .greet.is-fading {
  opacity: 0;
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow .greet { transition: none; }
}
.hero-names-wrap {
  position: relative;
  margin: 0 auto 40px;
  width: min(88vw, 560px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-names-wrap.morph-active .hero-names {
  visibility: hidden;
}
.names-morph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
}
.hero-names-wrap.morph-active .names-morph {
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .names-morph { display: none !important; }
  .hero-names-wrap.morph-active .hero-names { visibility: visible; }
}
.hero-names {
  font-weight: 400;
  line-height: 1;
  color: var(--copper-deep);
  letter-spacing: -0.01em;
  display: grid;
  gap: 8px;
  margin-bottom: 0;
}
.hero-stephanie, .hero-adam {
  font-family: var(--f-script);
  font-size: calc(clamp(72px, 13vw, 160px) * var(--ts));
  color: var(--copper);
  line-height: 1;
  opacity: 0;
  animation: rise 1.1s var(--ease-out) .55s forwards;
}
.hero-adam { animation-delay: .85s; }
.hero-and {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: calc(clamp(42px, 6vw, 72px) * var(--ts));
  color: var(--copper);
  line-height: 1;
  opacity: 0;
  animation: rise .9s var(--ease-out) .7s forwards;
}
.hero-meta {
  font-family: var(--f-sans);
  font-size: calc(15px * var(--ts));
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  animation: rise .9s var(--ease-out) 1s forwards;
}
.hero-meta .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--copper-light);
}
.hero-scroll {
  position: absolute;
  bottom: -140px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  animation: fade 1s var(--ease-out) 1.3s forwards;
}
.hero-scroll-line {
  width: 1px; height: 50px;
  background: linear-gradient(to bottom, transparent, var(--copper));
  animation: scroll-line 2.4s var(--ease) infinite;
}
@keyframes scroll-line {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.hero-scroll-label {
  font-family: var(--f-sans);
  font-size: calc(10px * var(--ts));
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--copper);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade {
  to { opacity: 1; }
}

/* ---------- Section Scaffolding ---------- */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 7.2vw, 84px) var(--pad-x);
}
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(29px, 3.6vw, 48px);
}
.section-head .eyebrow { display: block; margin-bottom: 16px; }
.section-head .display { margin-bottom: 16px; }
.section-head .subhead { margin: 0 auto; }

/* ---------- Announce / Save the Date ---------- */
.announce {
  background: var(--paper);
  padding: clamp(48px, 6vw, 84px) var(--pad-x);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.announce-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.announce-copy .eyebrow { display: block; margin-bottom: 18px; }
.announce-copy .display { margin-bottom: 24px; }
.announce-copy .lead + .lead { margin-top: 18px; }
.announce-rule {
  margin-top: 40px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--copper-light), transparent);
  opacity: 0.6;
}
/* Australian botanical wreath — watercolour */
.announce-copy { align-self: start; }
.floral-wreath {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 24px 0 0 -8px;
}

.announce-sig {
  display: flex; align-items: center; gap: 16px;
  margin-top: 36px;
}
.sig-line {
  flex: 1; height: 1px; background: var(--line);
  max-width: 80px;
}
.sig-name {
  font-family: var(--f-script);
  font-size: calc(36px * var(--ts));
  color: var(--copper);
  line-height: 1;
  transform: translateY(-4px);
}
.announce-card {
  position: relative;
  padding: 24px;
  background: linear-gradient(180deg, #fdfaf4 0%, #f3ecdf 100%);
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 20px 60px -20px rgba(107, 79, 50, 0.3),
    0 40px 80px -40px rgba(107, 79, 50, 0.2);
  transform: rotate(-0.6deg);
  transition: transform .6s var(--ease-out);
}
.announce-card:hover { transform: rotate(0); }
.announce-card::before {
  content: '';
  position: absolute; inset: 10px;
  border: 1px solid var(--line);
  pointer-events: none;
  border-radius: 2px;
}
/* The frame is all on .announce-card — padding, gradient, the inset rule in
   ::before — so swapping the img for a video leaves it untouched. The global
   reset covers img and svg but not video, so the video gets the same
   treatment here or it renders at its intrinsic width and overflows. */
.announce-card img,
.announce-card video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
/* Paper-coloured, so any instant before the poster paints isn't black. */
.announce-card video { background: #fbf7f0; }

/* ---------- Countdown ---------- */
.countdown-section {
  padding: 48px var(--pad-x);
  text-align: center;
  background: var(--cream);
}
.countdown-section .eyebrow { margin-bottom: 34px; }
.countdown {
  display: inline-flex;
  align-items: flex-start;
  gap: clamp(14px, 3.6vw, 48px);
}
.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 84px;
}
.countdown-num {
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: calc(clamp(53px, 8.4vw, 101px) * var(--ts));
  color: var(--copper-deep);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown-label {
  font-family: var(--f-sans);
  font-size: calc(12px * var(--ts));
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 12px;
}
.countdown-sep {
  font-family: var(--f-serif);
  font-size: calc(clamp(43px, 7.2vw, 77px) * var(--ts));
  color: var(--copper-light);
  line-height: 1;
  transform: translateY(-5px);
}
.countdown-rule {
  max-width: 624px;
  margin: 46px auto 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--copper-light), transparent);
  opacity: 0.6;
}

/* ---------- Story ---------- */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px) clamp(40px, 6vw, 96px);
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}
.story-grid::before {
  content: '';
  position: absolute;
  left: 50%; top: 5%;
  width: 1px; height: 90%;
  background: var(--line);
}
.story-chapter {
  position: relative;
  padding: 8px 0;
}
.chapter-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 24px;
  background: rgba(140, 100, 60, 0.08);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chapter-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chapter-image-label {
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--copper);
  opacity: 0.55;
}
.chapter-meta {
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 10px;
}
.chapter-title {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: calc(28px * var(--ts));
  color: var(--copper-deep);
  margin-bottom: 16px;
  line-height: 1.2;
}
.story-chapter p {
  font-size: calc(17px * var(--ts));
  color: var(--ink-soft);
}

/* ---------- Flourish divider ---------- */
.flourish {
  color: var(--copper-light);
  text-align: center;
  padding: 20px 0 0;
}
.flourish svg {
  width: clamp(200px, 30vw, 300px);
  height: auto;
  margin: 0 auto;
  opacity: 0.7;
}

/* ---------- Details ---------- */
.details { background: var(--cream); }
.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
/* The after-party is a coda, not a fourth act. It runs the full width of the
   three cards as a quiet strip — mark, time and name on one line — and keeps
   the rest folded away until someone asks, so the three cards above keep
   their proportions exactly as they were. */
.detail-coda {
  grid-column: 1 / -1;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.detail-coda:hover { box-shadow: 0 16px 34px -22px rgba(107, 79, 50, 0.18); }
.detail-coda[open] { border-color: var(--copper-light); }

.detail-coda summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px 56px;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.detail-coda summary::-webkit-details-marker { display: none; }

.coda-mark {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: calc(15px * var(--ts));
  color: var(--copper);
  border: 1px solid var(--copper-light);
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.coda-time {
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--copper);
}
.coda-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--copper-light);
  flex: none;
}
.coda-name {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: calc(21px * var(--ts));
  color: var(--copper-deep);
}

/* Same chevron as the rates accordion, drawn from two borders. */
.coda-chev {
  position: absolute;
  right: 26px;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--copper);
  border-bottom: 1.5px solid var(--copper);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .35s var(--ease);
}
.detail-coda[open] .coda-chev { transform: translateY(2px) rotate(-135deg); }

.coda-body {
  padding: 0 36px 30px;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.coda-body p { font-size: calc(16px * var(--ts)); color: var(--ink-soft); }

.detail-card {
  background: var(--paper);
  padding: 48px 36px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  text-align: center;
  position: relative;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.detail-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -24px rgba(107, 79, 50, 0.2);
}
.detail-mark {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: calc(22px * var(--ts));
  color: var(--copper);
  border: 1px solid var(--copper-light);
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
}
.detail-time {
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 12px;
}
.detail-card h3 {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: calc(26px * var(--ts));
  color: var(--copper-deep);
  margin-bottom: 14px;
}
.detail-card p {
  font-size: calc(16px * var(--ts));
  color: var(--ink-soft);
}
.detail-meta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts)) !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute) !important;
}
.detail-meta { line-height: 2; }
.detail-dress {
  margin-top: 13px;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: calc(16px * var(--ts));
  color: var(--copper-deep);
}
.detail-logo {
  /* Sits on the line as the word it replaces. The global reset at the top
     of this file sets img to display:block, so it has to be overridden
     here or the wordmark takes a line of its own. */
  display: inline-block;
  height: 0.92em;
  width: auto;
  vertical-align: -0.11em;
  margin-left: 3px;
}
/* The wordmark is the link, so the target is the mark itself and nothing
   underlines it — a rule shows on hover instead. */
.detail-logo-link {
  display: inline-block;
  border-bottom: 1px solid transparent;
  line-height: 1;
  transition: border-color .3s var(--ease), opacity .3s var(--ease);
}
.detail-logo-link:hover { border-bottom-color: var(--copper-light); opacity: .82; }

/* A name that happens to be a link — inherits the italic serif around it and
   carries only a hairline, so the card still reads as a printed card. */
.detail-link {
  color: inherit;
  border-bottom: 1px solid var(--copper-light);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.detail-link:hover { color: var(--copper); border-bottom-color: var(--copper); }

/* Rides the text baseline the way .detail-logo does — the same global
   img, svg { display: block } reset applies here too. */
.detail-icon {
  display: inline-block;
  width: 1.45em;
  height: 1.45em;
  vertical-align: -0.34em;
  margin-left: 8px;
  color: var(--copper);
}

/* The one playful button on the page. It tips its glass on a slow loop so
   the eye catches it, and tips it properly when you reach for it. The jump
   to the poll is the browser's own smooth scroll — html carries
   scroll-behavior: smooth and scroll-padding-top for the fixed nav. */
.detail-vote {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 11px 20px 11px 22px;
  border-radius: 999px;
  background: var(--copper);
  color: var(--paper);
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 22px -14px rgba(107, 79, 50, .9);
  transition: background .3s var(--ease), transform .3s var(--ease),
              box-shadow .3s var(--ease);
}
.detail-vote:hover {
  background: var(--copper-deep);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 28px -14px rgba(107, 79, 50, .9);
}
.detail-vote:active { transform: translateY(0) scale(.98); }
.detail-vote-ico {
  width: 1.5em;
  height: 1.5em;
  flex: none;
  transform-origin: 50% 80%;
  animation: vote-tip 4.6s var(--ease) infinite;
}
.detail-vote:hover .detail-vote-ico { animation-duration: 1.2s; }
@keyframes vote-tip {
  0%, 80%, 100% { transform: rotate(0deg); }
  86%           { transform: rotate(-17deg); }
  93%           { transform: rotate(11deg); }
}
@media (prefers-reduced-motion: reduce) {
  .detail-vote, .detail-vote:hover, .detail-vote:active { transform: none; }
  .detail-vote-ico { animation: none; }
  html { scroll-behavior: auto; }
}

.detail-dress span {
  display: block;
  font-family: var(--f-sans);
  font-style: normal;
  font-size: calc(10px * var(--ts));
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 3px;
}

/* ---------- Sydney ---------- */
.sydney {
  background: var(--cream-2);
  padding: clamp(48px, 7.2vw, 84px) var(--pad-x);
  position: relative;
  overflow: hidden;
}
.sydney::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 165, 55, 0.15), transparent 70%);
}
.sydney-inner {
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}
.sydney-copy {
  max-width: 640px;
  margin: 0 auto clamp(29px, 3.6vw, 48px);
  text-align: center;
}
.sydney-copy .eyebrow { display: block; margin-bottom: 16px; }
.sydney-copy .display { margin-bottom: 20px; }
.sydney-copy .lead { margin: 0 auto; }

.sydney-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.sydney-card {
  background: var(--paper);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.sydney-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 50px -24px rgba(107, 79, 50, 0.25);
}
.sydney-card-img {
  aspect-ratio: 4 / 3;
  background: var(--cream-3);
  position: relative;
  overflow: hidden;
}
.sydney-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sydney-card h3 {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: calc(22px * var(--ts));
  color: var(--copper-deep);
  margin: 24px 28px 10px;
}
.sydney-card p {
  font-size: calc(15px * var(--ts));
  color: var(--ink-soft);
  margin: 0 28px 28px;
  line-height: 1.6;
}

/* ---------- Travel ---------- */
.travel { background: var(--cream); }
.travel-list {
  list-style: none;
}
.travel-list li {
  padding: 10px 0;
  border-bottom: 1px dashed var(--line-soft);
  color: var(--ink-soft);
  font-size: calc(16px * var(--ts));
}
.travel-list li:last-child { border-bottom: none; }
.travel-list strong {
  font-family: var(--f-serif-sc);
  font-weight: 500;
  color: var(--copper-deep);
  letter-spacing: 0.04em;
}

/* ---------- FAQ ---------- */
.faq { background: var(--paper); }
.faq-list {
  max-width: 780px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
}
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: calc(22px * var(--ts));
  color: var(--copper-deep);
  transition: color .3s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--copper); }
.faq-icon {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: calc(24px * var(--ts));
  color: var(--copper);
  transition: transform .3s var(--ease);
  line-height: 1;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item p {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: calc(17px * var(--ts));
  max-width: 62ch;
}
/* The one answer that carries a phone number and an address — set in the
   sans face so the details read as details, not as more prose. */
.faq-item p.faq-contact {
  font-family: var(--f-sans);
  font-size: calc(13px * var(--ts));
  letter-spacing: .04em;
  color: var(--ink-mute);
}
.faq-contact a { color: var(--copper); border-bottom: 1px solid var(--copper-light); }
.faq-contact a:hover { color: var(--copper-deep); }
.faq-contact span { margin: 0 8px; color: var(--copper-light); }
@media (max-width: 560px) {
  .faq-contact { line-height: 2; }
  .faq-contact span { display: none; }
  .faq-contact a { display: block; }
}

/* ---------- RSVP ---------- */
/* Full-bleed band so the reply section reads as its own place, not more page.
   .section is capped at --max, so the band has to sit outside it. */
.rsvp-band {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(251, 247, 240, 0.9) 0%, rgba(251, 247, 240, 0) 60%),
    linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 42%, var(--cream-2) 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 80px;
}
.rsvp {
  background: transparent;
  padding-top: clamp(64px, 9vw, 108px);
  padding-bottom: clamp(64px, 9vw, 108px);
}
.rsvp-crest {
  width: clamp(150px, 20vw, 210px);
  margin: 0 auto 28px;
  opacity: 0.5;
}
.rsvp-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(26px, 4vw, 46px) clamp(20px, 4vw, 46px) clamp(30px, 4vw, 46px);
  box-shadow: 0 24px 60px -38px rgba(107, 79, 50, 0.45);
}
.rsvp-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.rsvp-inner .eyebrow { margin-bottom: 16px; }
.rsvp-inner .display { margin-bottom: 20px; }
.rsvp-inner .lead { margin: 0 auto 34px; }
.rsvp-form {
  display: flex;
  gap: 8px;
  background: var(--paper);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  /* The pill widens with the text setting, or the button grows into the name
     field and squeezes it shut. Below 900px it is already a stacked column. */
  max-width: calc(480px * var(--ts));
  margin: 0 auto;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.rsvp-form:focus-within {
  border-color: var(--copper);
  box-shadow: 0 0 0 4px rgba(139, 107, 71, 0.1);
}
.rsvp-form input {
  flex: 1;
  padding: 14px 20px;
  font-size: calc(16px * var(--ts));
  color: var(--ink);
  outline: none;
}
.rsvp-form input::placeholder { color: var(--ink-mute); }
.rsvp-form button {
  background: var(--copper);
  color: var(--paper);
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: calc(12px * var(--ts));
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.rsvp-form button:hover {
  background: var(--copper-deep);
  transform: translateY(-1px);
}
.rsvp-note {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: calc(15px * var(--ts));
  color: var(--copper);
  min-height: 24px;
  margin-top: 16px;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--copper-deep);
  color: var(--cream);
  text-align: center;
  padding: 80px var(--pad-x) 60px;
  position: relative;
}
.footer-mark {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: calc(24px * var(--ts));
  display: inline-flex;
  align-items: baseline;
  color: var(--cream);
  opacity: 0.7;
  margin-bottom: 20px;
}
.footer-amp {
  font-family: var(--f-script);
  font-size: calc(30px * var(--ts));
  margin: 0 6px;
  color: var(--banksia);
}
.footer-line {
  font-family: var(--f-script);
  font-size: calc(clamp(48px, 6vw, 72px) * var(--ts));
  color: var(--cream);
  margin-bottom: 14px;
  line-height: 1;
}
.footer-line .amp { color: var(--banksia); }
.footer-meta {
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, 0.6);
  margin-bottom: 32px;
}
.footer-credit {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: calc(15px * var(--ts));
  color: rgba(245, 239, 230, 0.55);
}

/* ---------- Reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: var(--cream);
    padding: 16px 0 20px;
    border-top: 1px solid var(--line-soft);
    /* On a short window the stack can run past the bottom of the screen and
       take the language picker with it. Cap it and let it scroll. */
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-links.open li { width: 100%; text-align: center; }
  .nav-links.open a {
    display: block;
    padding: 11px 20px;
  }
  .nav-links.open .nav-cta { margin: 10px auto; display: inline-block; }
  /* the li is width:100% for the stacked links; the picker is a box, so let it
     shrink to its own size and be centred by the column's align-items */
  .nav-links.open .nav-lang { width: auto; margin: 14px auto 2px; flex: none; }

  .announce-inner { grid-template-columns: 1fr; }
  .announce-card { max-width: 440px; margin: 0 auto; }

  .story-grid { grid-template-columns: 1fr; }
  .story-grid::before { display: none; }

  .detail-grid { grid-template-columns: 1fr; gap: 20px; }
  .detail-coda summary { padding: 16px 44px; gap: 11px; flex-wrap: wrap; }
  .coda-name { font-size: calc(18px * var(--ts)); }
  .coda-body { padding: 0 22px 24px; }

  .sydney-cards { grid-template-columns: repeat(2, 1fr); }


  .rsvp-form {
    flex-direction: column;
    border-radius: 20px;
    padding: 12px;
  }
  .rsvp-form button { width: 100%; padding: 16px; }
}

@media (max-width: 560px) {
  /* The day count goes to three digits, so the row has to be sized for
     "324" and not "24" — at the larger scale it pushed past the width of
     a phone and made the browser shrink the whole page to fit. */
  .countdown { gap: 5px; }
  .countdown-num { font-size: calc(clamp(30px, 10.5vw, 50px) * var(--ts)); }
  .countdown-sep { font-size: calc(clamp(22px, 7.5vw, 34px) * var(--ts)); transform: translateY(-3px); }
  .countdown-item { min-width: 56px; }
  .countdown-label { font-size: calc(9px * var(--ts)); letter-spacing: .16em; margin-top: 8px; }
  .sydney-cards { grid-template-columns: 1fr; }
  .hero-meta { font-size: calc(10px * var(--ts)); gap: 10px; padding: 12px; }
}

/* Netlify Forms honeypot — never shown, never focusable */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Password gate ---------- */
html.locked, html.locked body { overflow: hidden; height: 100%; }
html.unlocked .gate { display: none; }

.gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px var(--pad-x);
  text-align: center;
  background: var(--cream);
  background-image: radial-gradient(130% 95% at 50% 0%, var(--paper) 0%, var(--cream) 52%, var(--cream-2) 100%);
  transition: opacity .7s var(--ease-out), visibility .7s var(--ease-out);
}
.gate.is-open { opacity: 0; visibility: hidden; pointer-events: none; }
.gate-inner { width: 100%; max-width: 760px; }


.gate-title {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: calc(clamp(64px, 13vw, 160px) * var(--ts));
  line-height: 1;
  color: var(--copper-deep);
}
.gate-title { margin-bottom: 38px; }
.gate-title em {
  display: block;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: .3em;
  line-height: 1.6;
  color: var(--ink-mute);
}


.gate-form {
  display: flex;
  gap: 8px;
  max-width: 560px;
  margin: 0 auto;
  background: var(--paper);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.gate-form:focus-within { border-color: var(--copper); box-shadow: 0 0 0 4px rgba(139, 107, 71, 0.1); }
.gate-field {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.gate-form input {
  flex: 1;
  min-width: 0;
  padding: 14px 20px;
  font-family: var(--f-serif);
  font-size: calc(16px * var(--ts));
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
  letter-spacing: .06em;
}
.gate-form input::placeholder { color: var(--ink-mute); letter-spacing: .04em; }
.gate-eye {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-mute);
  transition: color .25s var(--ease);
}
.gate-eye:hover, .gate-eye:focus-visible { color: var(--copper); }
.gate-eye svg { width: 20px; height: 20px; display: block; }
.gate-eye .eye-off { display: none; }
.gate-eye.is-on .eye-on { display: none; }
.gate-eye.is-on .eye-off { display: block; }

.gate-form button[type="submit"] {
  background: var(--copper);
  color: var(--paper);
  border: 0;
  cursor: pointer;
  flex: none;
  white-space: nowrap;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: calc(12px * var(--ts));
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.gate-form button[type="submit"]:hover { background: var(--copper-deep); transform: translateY(-1px); }

.gate-note {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: calc(15px * var(--ts));
  color: var(--waratah);
  min-height: 24px;
  margin-top: 16px;
}

.gate-shake { animation: gateShake .42s var(--ease); }
@keyframes gateShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

@media (max-width: 480px) {
  .gate-form { flex-direction: column; border-radius: 22px; }
  .gate-form button[type="submit"] { width: 100%; }
  .gate-field { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .gate { transition: none; }
  .gate-shake { animation: none; }
}

/* ---------- Language picker ---------- */
.nav-lang {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-left: 10px;
}
.nav-lang-row {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 3px;
  background: rgba(251, 247, 240, 0.55);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav-lang:hover .nav-lang-row { border-color: var(--line); background: rgba(251, 247, 240, 0.9); }
.nav-lang-caption {
  font-family: var(--f-sans);
  font-size: calc(8.5px * var(--ts));
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1;
}
.nav-lang-btn {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color .3s var(--ease), background .3s var(--ease);
}
.nav-lang-btn:hover { color: var(--copper); }
.nav-lang-btn.is-on {
  color: var(--copper-deep);
  background: var(--cream-2);
}

/* ---------- Travel, as four collapsed rows ----------
   The section was four blocks of prose in a two-column grid — a wall on
   desktop and four screens on a phone. Now it is four rows you can read
   at a glance and open one at a time. Every word is still here. */
.travel-rows {
  max-width: 740px;
  margin: 0 auto;
  border-top: 1px solid var(--line-soft);
}
.travel-row { border-bottom: 1px solid var(--line-soft); }
.travel-row > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 16px;
  padding: clamp(16px, 2vw, 22px) 2px;
  cursor: pointer;
  list-style: none;
  transition: color .25s var(--ease);
}
/* Safari still draws its own triangle without this. */
.travel-row > summary::-webkit-details-marker { display: none; }
.travel-row > summary::marker { content: ""; }
.travel-row > summary:hover .row-name { color: var(--copper); }

/* Same face, size and weight as the heading this replaced
   (.travel-block h3), so the rows sit in the site's own hierarchy. The one
   thing not carried over is that heading's underline — the row already has
   a border, and two rules in a row looked like a mistake. */
.row-name {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: calc(28px * var(--ts));
  line-height: 1.2;
  margin: 0;
  color: var(--copper-deep);
  transition: color .25s var(--ease);
}
.row-teaser {
  grid-column: 1;
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: .08em;
  line-height: 1.5;
  color: var(--ink-mute);
}
.row-chev {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--copper);
  border-bottom: 1.5px solid var(--copper);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .3s var(--ease);
}
.travel-row[open] > summary .row-chev { transform: rotate(-135deg); }
.travel-row[open] > summary .row-name { color: var(--copper); }

.row-body { padding: 2px 2px clamp(20px, 2.4vw, 28px); }
/* .travel-block p used to set these; the wrapper is gone, so they live here
   now — without them the prose jumps to full-strength ink and default
   paragraph spacing, which reads heavier than the rest of the page. */
.row-body p { color: var(--ink-soft); margin-bottom: 16px; }
.row-body > p:first-child { margin-top: 0; }
.row-body > :last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .row-chev, .travel-row[open] > summary .row-chev { transition: none; }
}

/* Collapsed rows print as four empty headings — every word of the travel
   information is lost on paper or in a "save as PDF". So in print the rows
   are all open, and the flight list goes back to being a list: a printout
   can't be tapped, so one city's answer is no use. */
@media print {
  /* Opening the rows is main.js's job — Chromium hides a closed details'
     contents from inside its shadow DOM, where author CSS cannot reach. */
  .row-chev { display: none !important; }
  .flight-pick { display: none !important; }
  .flight-list.is-folded { display: block !important; }
  .travel-row { break-inside: avoid; }
}

/* ---------- "Where are you flying from?" ----------
   Eight rows of flight times collapse to one: a row of cities, then the
   single line that applies to you. The <ul> stays in the markup for the
   no-JavaScript case and is folded away once flights.js takes over. */
/* The chip label only ever exists to be read by flights.js, which takes
   its textContent — that works on a hidden element. Without this it
   renders, and anyone without JavaScript reads "New YorkFrom New York:". */
.travel-city { display: none; }

.flight-list.is-folded { display: none; }

.flight-pick { margin-top: 18px; }
.flight-ask {
  font-family: var(--f-sans);
  font-size: calc(10px * var(--ts));
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 12px;
}
.flight-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}
.flight-chip {
  background: rgba(251, 247, 240, 0.6);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  cursor: pointer;
  padding: 7px 14px;
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: border-color .25s var(--ease), background .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease);
}
.flight-chip:hover {
  border-color: var(--copper-light);
  color: var(--copper-deep);
  transform: translateY(-1px);
}
.flight-chip.is-on {
  border-color: var(--copper);
  background: var(--cream-2);
  color: var(--copper-deep);
}

/* The answer holds its height whether or not a city is chosen, so picking
   one doesn't shunt everything below it down the page. */
.flight-answer {
  font-family: var(--f-serif);
  font-size: calc(16px * var(--ts));
  line-height: 1.6;
  color: var(--ink);
  min-height: 3.2em;
  margin: 0;
  padding-top: 2px;
  border-top: 1px dotted var(--line-soft);
}
.flight-answer .flight-city {
  font-style: italic;
  font-weight: 400;
  color: var(--copper-deep);
}
.flight-hint { color: var(--ink-mute); font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .flight-chip, .flight-chip:hover { transform: none; }
}
@media (max-width: 560px) {
  .flight-chips { gap: 6px; }
  .flight-chip { padding: 7px 12px; }
  .flight-answer { min-height: 4.4em; }
}

/* ---------- The floating kit: language + text size ----------
   Two separate pills stacked bottom-right, on every screen size. It sits
   under the nav's z-index so an open menu covers it. */
.float-kit {
  position: fixed;
  right: 14px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.float-kit.is-on { opacity: 1; transform: none; pointer-events: auto; }
.float-kit .nav-lang { margin: 0; }
/* Opaque and lifted — these float over photographs and the map, where the
   nav bar's translucent pill would disappear. */
.float-kit .nav-lang-row,
.float-kit .ts-row {
  background: var(--paper);
  border-color: var(--line);
  box-shadow: 0 8px 22px -10px rgba(107, 79, 50, .45);
}
.float-kit .nav-lang-caption,
.float-kit .ts-caption { display: none; }
/* The kit is chrome, not content: it holds its size while the page grows,
   so it never balloons over what you are trying to read. */
.float-kit .nav-lang-btn { padding: 7px 11px; font-size: 11px; }
@media (min-width: 901px) {
  .float-kit { right: 20px; bottom: 20px; }
}

/* The nav is chrome, not reading matter. It grows with the setting, but only
   about a tenth: past that the six links wrap and the sticky bar doubles in
   height, eating the screen it was meant to help you read. */
/* The container too: the list items inherit from body, and their line boxes
   grow even when the link text inside them is capped. */
.nav { font-size: calc(18px * min(var(--ts), 1.1)); }
.nav-mark { font-size: calc(22px * min(var(--ts), 1.1)); white-space: nowrap; }
.nav-amp  { font-size: calc(28px * min(var(--ts), 1.1)); }
.nav-links a { font-size: calc(12px * min(var(--ts), 1.1)); }
.nav-lang-btn { font-size: calc(11px * min(var(--ts), 1.1)); }
.nav-lang-caption { font-size: calc(8.5px * min(var(--ts), 1.1)); }

/* ---------- Text size control ----------
   The four A's are the control's own scale, so they are written without
   var(--ts): the pill stays put while the page around it grows. */
.ts-pick {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.ts-row {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 3px 3px 3px 8px;
  background: rgba(251, 247, 240, 0.55);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.ts-pick:hover .ts-row { border-color: var(--line); background: rgba(251, 247, 240, 0.9); }
.ts-icon {
  display: inline-flex;
  width: 17px;
  height: 17px;
  margin-right: 4px;
  color: var(--ink-mute);
  flex: none;
}
.ts-icon svg { width: 100%; height: 100%; }
.ts-caption {
  font-family: var(--f-sans);
  font-size: 8.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1;
}
.ts-btn {
  background: none;
  border: 0;
  cursor: pointer;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  font-family: var(--f-serif);
  font-weight: 400;
  line-height: 1;
  color: var(--ink-mute);
  transition: color .3s var(--ease), background .3s var(--ease);
}
.ts-1 { font-size: 11px; }
.ts-2 { font-size: 13px; }
.ts-3 { font-size: 15px; }
.ts-4 { font-size: 17px; }
.ts-btn:hover { color: var(--copper); }
.ts-btn.is-on { color: var(--copper-deep); background: var(--cream-2); }
.ts-pick:hover .ts-icon { color: var(--copper); }

/* ---------- Cocktail poll ---------- */
/* This is the one section asking for something back, so it sits in its own
   panel inside a zig-zag frame that breathes and drifts through the site's
   colours — loud enough to catch the eye, quiet enough to belong. */
.poll { padding-top: clamp(10px, 1.6vw, 20px); padding-bottom: clamp(38px, 4.4vw, 58px); }
/* poll.js puts poll-off on <html> before it has heard back from the
   backend, and takes it off once a real tally arrives. A poll that can't
   take a vote simply isn't on the page — and neither is the button in
   Cocktail Hour that points at it. */
.poll-off .poll,
.poll-off .detail-vote { display: none; }
.poll-frame {
  position: relative;
  max-width: 752px;
  margin: 0 auto;
  padding: clamp(28px, 3.6vw, 40px) clamp(22px, 3vw, 28px) clamp(18px, 2.2vw, 26px);
  background: var(--paper);
  box-shadow: 0 24px 50px -40px rgba(107, 79, 50, .5);
}

/* One repeating SVG tile, nine-sliced, so the teeth keep their size at any
   width. Drawn in banksia gold — the hue cycle below moves it from there. */
.poll-zig {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 16px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none' stroke='%23D4A537' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 16 24 8 32 16 40 8 48 16'/%3E%3Cpath d='M48 16 56 24 48 32 56 40 48 48'/%3E%3Cpath d='M48 48 40 56 32 48 24 56 16 48'/%3E%3Cpath d='M16 48 8 40 16 32 8 24 16 16'/%3E%3Cpath d='M16 16 8 8M48 16 56 8M48 48 56 56M16 48 8 56'/%3E%3C/svg%3E") 16 round;
  animation: poll-hues 22s linear infinite, poll-breathe 4.6s ease-in-out infinite;
}

/* Waratah → banksia → foliage → harbour, then back the way it came, so it
   never passes through a colour the rest of the site doesn't use. Hue alone
   can't reach a dark red from gold — it preserves luminance — so each stop
   carries its own saturation and brightness, solved to land on the exact
   palette hex. The three values interpolate together between stops. */
@keyframes poll-hues {
  0%   { filter: hue-rotate(-52deg) saturate(3.7)  brightness(.72); }  /* #B8312A waratah */
  22%  { filter: hue-rotate(0deg)   saturate(1)    brightness(1.01); } /* #D4A537 banksia */
  48%  { filter: hue-rotate(44deg)  saturate(.6)   brightness(.77); }  /* #6B8C4E foliage */
  74%  { filter: hue-rotate(162deg) saturate(.4)   brightness(.91); }  /* #7B9DB8 harbour */
  100% { filter: hue-rotate(-52deg) saturate(3.7)  brightness(.72); }
}
@keyframes poll-breathe {
  0%, 100% { transform: scale(1);     opacity: .6; }
  50%      { transform: scale(1.016); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .poll-zig { animation: none; opacity: .85; }
}

.poll-head { text-align: center; margin: 0 auto clamp(20px, 2.4vw, 28px); }
.poll-head .eyebrow { display: block; margin-bottom: 12px; }
.poll-head .display { font-size: calc(clamp(28px, 3.6vw, 40px) * var(--ts)); margin-bottom: 12px; }
.poll-lead {
  font-family: var(--f-serif);
  font-size: calc(17px * var(--ts));
  color: var(--ink-soft);
  text-align: center;
  max-width: 460px;
  margin: 0 auto;
}
.poll-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 700px;
  margin: 0 auto;
}
.poll-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 9px 11px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease),
              transform .35s cubic-bezier(.34, 1.56, .64, 1), background .3s var(--ease);
}
/* The name and its sub-label stack beside the glass. */
.poll-text { display: flex; flex-direction: column; min-width: 0; }
.poll-card:nth-child(6n+1) { transform: rotate(-1.1deg); }
.poll-card:nth-child(6n+2) { transform: rotate(0.8deg); }
.poll-card:nth-child(6n+3) { transform: rotate(-0.5deg); }
.poll-card:nth-child(6n+4) { transform: rotate(1deg); }
.poll-card:nth-child(6n+5) { transform: rotate(-0.9deg); }
.poll-card:nth-child(6n)   { transform: rotate(0.6deg); }

/* Straighten up and lift when you reach for one. */
.poll-card:hover {
  border-color: var(--copper-light);
  transform: rotate(0deg) translateY(-4px) scale(1.04);
  box-shadow: 0 18px 30px -22px rgba(107, 79, 50, .45);
  z-index: 2;
}
.poll-card:active { transform: rotate(0deg) translateY(-1px) scale(.99); }
.poll-card.is-mine {
  border-color: var(--copper);
  background: var(--cream-2);
  transform: rotate(0deg) scale(1.03);
}
.poll-card.is-mine:hover { transform: rotate(0deg) translateY(-4px) scale(1.05); }

/* Votes are final, so once one is in the cards stop behaving like buttons:
   no lift, no hover colour, no pointer. The chosen one keeps its copper
   border and full contrast — disabled must not read as "greyed out and
   unimportant" when it is the guest's own answer. */
.poll-grid.is-locked .poll-card {
  cursor: default;
  opacity: 1;
  color: inherit;
}
.poll-grid.is-locked .poll-card:hover,
.poll-grid.is-locked .poll-card:active {
  border-color: var(--line-soft);
  background: var(--paper);
  box-shadow: none;
  transform: none;
}
.poll-grid.is-locked .poll-card.is-mine,
.poll-grid.is-locked .poll-card.is-mine:hover {
  border-color: var(--copper);
  background: var(--cream-2);
  transform: scale(1.03);
  box-shadow: none;
}
.poll-grid.is-locked .poll-card:not(.is-mine) { opacity: .82; }

/* The glass gives a little nudge when it's yours. */
@keyframes poll-cheers {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(-11deg); }
  60%  { transform: rotate(7deg); }
  100% { transform: rotate(0deg); }
}
.poll-card.is-mine .poll-art { animation: poll-cheers .55s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .poll-card, .poll-card:hover, .poll-card.is-mine { transform: none; }
  .poll-card.is-mine .poll-art { animation: none; }
}

.poll-art {
  width: 46px;
  height: 46px;
  flex: none;
  color: var(--copper);
  margin-bottom: 0;
  transition: color .3s var(--ease);
}
.poll-card.is-mine .poll-art { color: var(--copper-deep); }

.poll-name {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: calc(15px * var(--ts));
  color: var(--copper-deep);
  line-height: 1.2;
}
.poll-note-sm {
  font-family: var(--f-sans);
  font-size: calc(8.5px * var(--ts));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--copper);
  margin-top: 2px;
  line-height: 1.5;
}
.poll-note-role { text-transform: none; letter-spacing: .06em; color: var(--ink-mute); }


/* The bar and percentage only mean anything once a vote is in, so they stay
   out of the layout until then — the cards read as a clean set of choices. */
.poll-result { display: none; }
.poll-grid.is-revealed .poll-result {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-top: 5px;
}
.poll-grid.is-revealed .poll-bar {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--line-soft);
  border-radius: 999px;
  overflow: hidden;
}
.poll-grid.is-revealed .poll-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--copper-light);
  border-radius: 999px;
  transition: width .7s var(--ease);
}
.poll-grid.is-revealed .poll-card.is-mine .poll-bar i { background: var(--copper); }
.poll-grid.is-revealed .poll-pct {
  display: block;
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: .14em;
  color: var(--ink-mute);
  margin-top: 7px;
}
.poll-grid.is-revealed .poll-card.is-mine .poll-pct { color: var(--copper-deep); }

.poll-note {
  text-align: center;
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 22px;
  min-height: 14px;
}

@media (max-width: 900px) {
  .poll-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 560px; }
}
/* One per row below 560px — side-by-side needs the width, or the names break
   onto two lines and "Cosmopolitan" runs out of its card. */
@media (max-width: 560px) {
  .poll-grid { grid-template-columns: 1fr; gap: 8px; max-width: 420px; }
  .poll-card { padding: 8px 14px; }
  .poll-lead { font-size: calc(16px * var(--ts)); }
  /* Smaller teeth and a tighter panel, or the frame crowds the cards. */
  .poll-zig { border-width: 12px; }
  .poll-frame { padding: 26px 16px 18px; }
}

/* ---------- RSVP flow ---------- */
.rsvp-flow { min-height: 0; }

.rsvp-step {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.rsvp-step.in { opacity: 1; transform: none; }

.rsvp-field { display: flex; align-items: center; flex: 1; min-width: 0; }
.rsvp-form-inline { margin-top: 14px; }

.rsvp-lead {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: calc(clamp(24px, 3.4vw, 34px) * var(--ts));
  line-height: 1.25;
  color: var(--copper-deep);
  margin-bottom: 10px;
}
.rsvp-sub {
  font-family: var(--f-serif);
  font-size: calc(17px * var(--ts));
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 460px;
  margin: 0 auto 26px;
}
.rsvp-quiet { color: var(--ink-soft); font-size: calc(16px * var(--ts)); margin-top: 22px; }
.rsvp-help {
  color: var(--copper);
  text-decoration: none;
  border-bottom: 1px solid var(--copper);
  padding-bottom: 1px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.rsvp-help:hover,
.rsvp-help:focus-visible {
  color: var(--copper-deep);
  border-bottom-color: var(--copper-deep);
}

.rsvp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}
.rsvp-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  padding: 14px 26px;
  font-family: var(--f-sans);
  font-size: calc(12px * var(--ts));
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  background-color: var(--paper);
  transition: border-color .3s var(--ease), color .3s var(--ease),
              background .3s var(--ease), transform .3s var(--ease);
}
.rsvp-btn:hover { border-color: var(--copper); color: var(--copper-deep); transform: translateY(-1px); }
.rsvp-btn-primary {
  background-color: var(--copper);
  border-color: var(--copper);
  color: var(--paper);
}
.rsvp-btn-primary:hover { background-color: var(--copper-deep); border-color: var(--copper-deep); color: var(--paper); }

.rsvp-link {
  display: inline-block;
  margin-top: 26px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.rsvp-link:hover { color: var(--copper); border-bottom-color: var(--line); }

/* per-person event cards */
.rsvp-cards {
  max-width: 500px;
  margin: 0 auto 8px;
  text-align: left;
  display: grid;
  gap: 14px;
}
.rsvp-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 18px 20px 14px;
  opacity: 0;
  transform: translateY(8px);
  animation: rsvpIn .45s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 90ms);
  transition: border-color .3s var(--ease), background .3s var(--ease), opacity .3s var(--ease);
}
@keyframes rsvpIn { to { opacity: 1; transform: none; } }
.rsvp-card.is-out { background: transparent; opacity: .72; }

.rsvp-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.rsvp-person-name {
  font-family: var(--f-serif);
  font-size: calc(20px * var(--ts));
  color: var(--ink);
}
.rsvp-card.is-out .rsvp-person-name { color: var(--ink-mute); }

.rsvp-events { list-style: none; }
.rsvp-event {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.rsvp-event:last-child { border-bottom: 0; }
.rsvp-event-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rsvp-event-label {
  font-family: var(--f-serif);
  font-size: calc(17px * var(--ts));
  color: var(--ink);
  transition: color .3s var(--ease);
}
.rsvp-event-detail {
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rsvp-event.is-out .rsvp-event-label { color: var(--ink-mute); }

.rsvp-card-note {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: calc(15px * var(--ts));
  color: var(--ink-soft);
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

/* Both answers visible, the chosen one filled — a lone pill can't say
   whether it's showing the current state or the action to take. */
.rsvp-choice {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
}
.rsvp-opt {
  min-width: 52px;
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.rsvp-opt:hover { color: var(--copper-deep); }
.rsvp-opt-yes.is-on { background: var(--copper);   color: var(--paper); }
.rsvp-opt-no.is-on  { background: var(--ink-mute); color: var(--paper); }
.rsvp-opt-lang.is-on {
  background: var(--copper);
  color: var(--paper);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.rsvp-opt-lang.is-on:hover { color: var(--paper); }

.rsvp-diet {
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.rsvp-diet-label {
  display: block;
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 9px;
}
.rsvp-diet-input {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--f-serif);
  font-size: calc(17px * var(--ts));
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  outline: none;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.rsvp-diet-input:focus { border-color: var(--copper-light); box-shadow: 0 0 0 3px rgba(139,107,71,.08); }
.rsvp-diet-input::placeholder { color: var(--ink-mute); }

/* ---- the three questions asked once per invitation ----
   Set apart from the per-person cards by a hairline and a little air, so it
   reads as "and now, about your party" rather than as more of the same. */
.rsvp-extras {
  margin: 30px auto 0;
  max-width: 460px;
  text-align: left;
}
.rsvp-extra {
  padding-top: 22px;
  margin-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.rsvp-extras > .rsvp-extra:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.rsvp-extra-label {
  display: block;
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 10px;
}
/* "required" rides along inside the label, in copper so it reads as a flag
   rather than as more of the label's own words. */
.rsvp-req {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--copper-light);
  color: var(--copper);
  letter-spacing: .12em;
}
/* Same shape as "required", one step quieter — it's a note, not a demand. */
.rsvp-req.is-optional { color: var(--ink-mute); border-left-color: var(--line); }
.rsvp-extra-hint {
  font-family: var(--f-serif);
  font-size: calc(16px * var(--ts));
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 8px 2px 0;
}
.rsvp-extra-hint-top { margin: -2px 2px 12px; }
.rsvp-extra .rsvp-choice-wide { margin: 0; }
.rsvp-extra-follow { margin-top: 12px; }
.rsvp-extra-other { margin-top: 12px; }
.rsvp-diet-input.is-error { border-color: #B8312A; box-shadow: 0 0 0 3px rgba(184,49,42,.10); }
.rsvp-extra-error { margin: 18px auto 0; max-width: 460px; }

.rsvp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rsvp-chip {
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: color .25s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.rsvp-chip:hover { color: var(--copper); border-color: var(--copper-light); }
.rsvp-chip.is-on {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--paper);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.rsvp-chip.is-on:hover { color: var(--paper); }

.rsvp-langpick { margin: 26px auto 0; max-width: 460px; }
/* A general sibling, not an adjacent one: the validation note can sit between
   the language picker and the button, and an adjacent selector silently stopped
   matching the moment it did. */
.rsvp-langpick ~ .rsvp-actions { margin-top: 48px; }
@media (max-width: 560px) {
  .rsvp-langpick ~ .rsvp-actions { margin-top: 40px; }
}
.rsvp-langpick .rsvp-sub { margin-bottom: 12px; font-size: calc(15px * var(--ts)); }
.rsvp-choice-wide {
  margin: 0 auto;
  width: fit-content;
}
.rsvp-choice-wide .rsvp-opt { min-width: 84px; letter-spacing: .1em; }

.rsvp-plusone { margin: 22px auto 4px; max-width: 460px; }
.rsvp-plusone .rsvp-sub { margin-bottom: 0; font-size: calc(15px * var(--ts)); }

/* the closing message */
.rsvp-done { padding: 8px 0; }
.rsvp-eyebrow {
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 18px;
}
.rsvp-message {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: calc(clamp(22px, 3vw, 30px) * var(--ts));
  line-height: 1.45;
  color: var(--copper-deep);
  max-width: 520px;
  margin: 0 auto 18px;
}
.rsvp-note.is-error { color: var(--waratah); }

@media (max-width: 520px) {
  .rsvp-card { border-radius: 18px; }
  .rsvp-actions { flex-direction: column; }
  .rsvp-btn { width: 100%; }
  .rsvp-card { padding: 16px 16px 12px; }
  .rsvp-event-label { font-size: calc(16px * var(--ts)); }
  .rsvp-opt { min-width: 44px; padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .rsvp-step { transition: none; opacity: 1; transform: none; }
  .rsvp-card { animation: none; opacity: 1; transform: none; }
}


/* ---------- Sydney guide map ---------- */
.guide { padding: 72px var(--pad-x) 88px; background: var(--paper); }
.guide-inner { max-width: var(--max); margin: 0 auto; }
.guide-head { text-align: center; margin-bottom: 26px; }
.guide-head .lead { max-width: 640px; margin-left: auto; margin-right: auto; }

.guide-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 10px;
}
.guide-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--cream);
  cursor: pointer;
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.guide-key:hover { border-color: var(--copper-light); }
.guide-key.is-on { background: var(--copper-deep); border-color: var(--copper-deep); color: var(--paper); }
.guide-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
}
/* Take the map with you */
.guide-take {
  margin: 30px auto 0;
  max-width: 620px;
  text-align: center;
}
.guide-take-lead {
  font-family: var(--f-serif);
  font-size: calc(16px * var(--ts));
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.guide-take-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.guide-take-btn {
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--copper);
  border: 1px solid var(--copper);
  color: var(--paper);
  transition: background .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), transform .3s var(--ease);
}
.guide-take-btn:hover { background: var(--copper-deep); border-color: var(--copper-deep); transform: translateY(-1px); }
.guide-take-btn[hidden] { display: none; }

.guide-hint {
  text-align: center;
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: .08em;
  color: var(--ink-mute);
  margin-bottom: 22px;
}
.guide-hint button {
  border: 0; background: none; padding: 0;
  font: inherit; letter-spacing: inherit;
  color: var(--copper);
  border-bottom: 1px solid var(--copper);
  cursor: pointer;
}
.guide-hint button:hover { color: var(--copper-deep); border-bottom-color: var(--copper-deep); }

.guide-grid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 24px;
  align-items: start;
}
.guide-list {
  max-height: 620px;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
}
.guide-group { margin-bottom: 18px; }
.guide-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--f-sans);
  font-size: calc(10px * var(--ts));
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 8px;
  cursor: default;
}
.guide-group-count,
.guide-chev { display: none; }
.guide-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-left: 2px solid transparent;
  background: none;
  padding: 9px 12px;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.guide-item:hover { background: var(--cream); }
.guide-item.is-on { background: var(--cream-2); border-left-color: var(--copper); }
.guide-item-name {
  display: block;
  font-family: var(--f-serif);
  font-size: calc(18px * var(--ts));
  color: var(--ink);
  line-height: 1.25;
}
.guide-item-addr {
  display: block;
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: .04em;
  color: var(--ink-mute);
  margin-top: 2px;
}
.guide-item.is-venue .guide-item-name {
  font-style: italic;
  color: var(--copper-deep);
  font-size: calc(21px * var(--ts));
}

.guide-map {
  height: 620px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--cream-2);
  z-index: 0;
}
/* Warm the basemap toward the paper the rest of the page is printed on. */
.guide-map .leaflet-tile-pane { filter: grayscale(.38) sepia(.38) saturate(.88) brightness(1.04) contrast(.96); }

.guide-pin span {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 2px solid var(--paper);
  box-shadow: 0 1px 4px rgba(47, 42, 36, .35);
}
.guide-pin.is-venue span {
  border-width: 3px;
  box-shadow: 0 0 0 4px rgba(107, 79, 50, .22), 0 2px 8px rgba(47, 42, 36, .4);
}
.guide-pop { font-family: var(--f-sans); }
.guide-pop strong {
  display: block;
  font-family: var(--f-serif);
  font-size: calc(19px * var(--ts));
  font-weight: 500;
  color: var(--ink);
}
.guide-pop span {
  display: block;
  font-size: calc(11.5px * var(--ts));
  color: var(--ink-mute);
  margin: 3px 0 8px;
}
.guide-pop a {
  font-size: calc(11px * var(--ts));
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--copper);
}
.leaflet-popup-content-wrapper { border-radius: 8px; }
.leaflet-container { font-family: var(--f-sans); background: var(--cream-2); }

@media (max-width: 900px) {
  .guide-grid { grid-template-columns: 1fr; }
  .guide-map { height: 380px; order: -1; }
  /* Fifty-one places stacked open runs the page off the bottom of the
     phone, so each category collapses and the panel scrolls on its own. */
  .guide-list {
    max-height: 56vh;
    overflow-y: auto;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
  }
  .guide-group { margin-bottom: 4px; }
  .guide-group-head {
    cursor: pointer;
    padding: 13px 6px;
    margin: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .guide-group-name { flex: 1; text-align: left; }
  .guide-group-count {
    display: inline-block;
    font-size: calc(10px * var(--ts));
    letter-spacing: .08em;
    color: var(--ink-mute);
    opacity: .75;
  }
  .guide-chev {
    display: block;
    width: 7px; height: 7px;
    border-right: 1px solid var(--ink-mute);
    border-bottom: 1px solid var(--ink-mute);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .25s var(--ease);
    flex: none;
  }
  .guide-group.is-open .guide-chev {
    transform: rotate(-135deg) translate(-2px, -2px);
  }
  .guide-group:not(.is-open) .guide-item { display: none; }
  .guide-group.is-open { padding-bottom: 8px; }
  .guide-item { padding: 10px 12px; }
}


/* ---------- Room block (Establishment Hotel) ---------- */
.stay-block {
  max-width: 820px;
  margin: 52px auto 0;
  padding: 38px clamp(20px, 4vw, 46px) 34px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  text-align: center;
}
/* The watercolour bleeds to the card's edges — pull it back out through the
   card padding, and round only the top corners so it sits inside the border. */
.stay-figure {
  margin: -38px calc(-1 * clamp(20px, 4vw, 46px)) 30px;
  border-radius: 13px 13px 0 0;
  overflow: hidden;
  background: var(--cream-2);
}
.stay-figure img {
  width: 100%;
  height: clamp(190px, 26vw, 300px);
  object-fit: cover;
  object-position: center 46%;
}

.stay-name {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: calc(clamp(26px, 3.4vw, 36px) * var(--ts));
  color: var(--copper-deep);
  margin: 0 0 8px;
}
.stay-kicker { margin: 0 0 14px; }
.stay-where {
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 18px;
}
.stay-how {
  font-family: var(--f-serif);
  font-size: calc(18px * var(--ts));
  color: var(--ink-soft);
  max-width: 470px;
  margin: 0 auto 12px;
}
.stay-contact {
  font-family: var(--f-sans);
  font-size: calc(13px * var(--ts));
  letter-spacing: .04em;
  margin: 0 0 26px;
  color: var(--ink-mute);
}
.stay-contact a { color: var(--copper); border-bottom: 1px solid var(--copper-light); }
.stay-contact a:hover { color: var(--copper-deep); }
.stay-contact span { margin: 0 8px; color: var(--copper-light); }

/* Currency stated where the numbers are actually read — a bare "$" reads
   as USD to a good part of this guest list. */
.rates-note {
  font-family: var(--f-sans);
  font-size: calc(10px * var(--ts));
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: right;
  margin: 0 2px 8px;
}
.rates-wrap { margin: 0 0 22px; }
.rates {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-sans);
  font-size: calc(14px * var(--ts));
  color: var(--ink-soft);
}
.rates th, .rates td { padding: 10px 6px; text-align: center; }
.rates thead th {
  font-size: calc(10px * var(--ts));
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--copper);
  border-bottom: 1px solid var(--line-soft);
}
.rates thead th span { display: block; color: var(--ink-mute); letter-spacing: .14em; }
.rates tbody th {
  text-align: left;
  font-weight: 400;
  font-family: var(--f-serif);
  font-size: calc(17px * var(--ts));
  color: var(--ink);
  white-space: nowrap;
}
.rates tbody th small {
  display: block;
  font-family: var(--f-sans);
  font-size: calc(10px * var(--ts));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.rates tbody tr + tr th, .rates tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.rates tbody td { font-variant-numeric: tabular-nums; }

.stay-terms {
  list-style: none;
  padding: 0;
  margin: 0 auto 18px;
  max-width: 560px;
  text-align: left;
}
.stay-terms li {
  position: relative;
  padding-left: 16px;
  font-family: var(--f-sans);
  font-size: calc(12.5px * var(--ts));
  line-height: 1.75;
  color: var(--ink-mute);
}
.stay-terms li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--copper-light);
}
.stay-more { margin: 0; }
.stay-more a {
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--copper);
  border-bottom: 1px solid var(--copper-light);
}
.stay-more a:hover { color: var(--copper-deep); }

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

/* Five columns will not fit a phone, so each room becomes its own block
   with the night written beside each rate. */
@media (max-width: 640px) {
  .rates, .rates tbody, .rates tr, .rates th, .rates td { display: block; }
  .rates thead { display: none; }
  .rates tbody tr {
    padding: 14px 0;
    border-top: 1px solid var(--line-soft);
  }
  .rates tbody tr + tr th, .rates tbody tr + tr td { border-top: 0; }
  .rates tbody th { padding: 0 0 8px; white-space: normal; }
  .rates tbody td {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: calc(14px * var(--ts));
  }
  .rates tbody td::before {
    content: attr(data-n);
    font-size: calc(11px * var(--ts));
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  .stay-block { padding: 30px 20px 26px; }
  .stay-figure { margin: -30px -20px 24px; }
}


/* the one line in Where to stay that people must not skim past */
.travel-standout {
  margin: 14px 0 4px;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: calc(19px * var(--ts));
  line-height: 1.5;
  color: var(--copper-deep);
}
.travel-link {
  display: inline-block;
  margin-top: 5px;
  font-family: var(--f-sans);
  font-size: calc(12px * var(--ts));
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--copper);
  border-bottom: 1px solid var(--copper);
  padding-bottom: 1px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.travel-link::after { content: ' \2192'; }
.travel-link:hover, .travel-link:focus-visible {
  color: var(--copper-deep);
  border-bottom-color: var(--copper-deep);
}

/* rates accordion */
.stay-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 4px auto 0;
  padding: 12px 24px;
  border: 1px solid var(--copper-light);
  border-radius: 999px;
  background: none;
  cursor: pointer;
  font-family: var(--f-sans);
  font-size: calc(11px * var(--ts));
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--copper-deep);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.stay-toggle:hover, .stay-toggle:focus-visible {
  background: var(--cream);
  border-color: var(--copper);
}
.stay-chev {
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--copper);
  border-bottom: 1.5px solid var(--copper);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease);
}
.stay-toggle[aria-expanded="true"] .stay-chev {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.stay-panel { padding-top: 26px; }
.stay-panel[hidden] { display: none; }