/* ============================================================
   ADAM & KARIN · STRÖMSTAD · 15 MAY 2027
   Static site. No build step.
   Palette: warm ivory, linen and sand, espresso-brown text and
   champagne gold. The harbour photo, the night-sky arch and the
   arrivals board stay dark, like objects placed on the page.
   Token names: --ink* = backgrounds, --cream* = text.
   ============================================================ */

:root{
  --ink:        #f7f1e7;   /* ivory, page */
  --ink-2:      #f0e7d8;   /* linen */
  --ink-3:      #e8dcc9;   /* sand */
  --ink-rgb:    247,241,231;
  --ink2-rgb:   240,231,216;
  --gold:       #7d5e2c;   /* text gold, 5.3:1 on ivory */
  --gold-soft:  #94723a;   /* display gold: big numbers, ornaments */
  --gold-rgb:   125,94,44;
  --gold-dim:   rgba(125,94,44,.34);
  --gold-faint: rgba(125,94,44,.16);
  --sea:        #6f8f80;   /* sage */
  --cream:      #2f2a25;   /* espresso text */
  --cream-rgb:  47,42,37;
  --cream-dim:  rgba(47,42,37,.82);
  --cream-faint:rgba(47,42,37,.7);
  --paper:      #fffdf8;
  --paper-ink:  #2b2620;
  --paper-gold: #7a5a28;
  --red:        #b4574c;
  --err:        #a8402f;
  --btn-top:    #9c7840;
  --btn-bot:    #7c5c2a;
  --btn-fg:     #fffaf1;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Jost", "Futura", "Avenir Next", system-ui, sans-serif;

  --gutter: clamp(1rem, 5vw, 4rem);
  --maxw: 72rem;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --navh: 4.25rem;
}

/* Dark objects on the light page: the hero photo, the night-sky arch,
   the arrivals board, the landing page, and the nav while it floats over the photo. */
.hero, .sky, .gate, .nav:not(.nav--solid){
  --ink:#1a1510; --ink-2:#211b15; --ink-3:#2a231b;
  --ink-rgb:26,21,16; --ink2-rgb:33,27,21;
  --cream:#f6efe3; --cream-rgb:246,239,227;
  --cream-dim:rgba(246,239,227,.82); --cream-faint:rgba(246,239,227,.62);
  --gold:#d2ad6a; --gold-soft:#e8cc94; --gold-rgb:210,173,106;
  --gold-dim:rgba(210,173,106,.4); --gold-faint:rgba(210,173,106,.18);
  --btn-top:#e8cc94; --btn-bot:#d2ad6a; --btn-fg:#1a1510;
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--navh);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:350;
  font-size:clamp(1.0625rem,1rem + .2vw,1.125rem); /* 17px floor: some guests are in their eighties */
  line-height:1.72;
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
button{ font:inherit; }

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

.i18n-pending [data-i18n]{ visibility:hidden; }

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

.skip{
  position:fixed; left:1rem; top:-4rem; z-index:100;
  background:var(--btn-bot); color:var(--btn-fg);
  padding:.7rem 1.1rem; font-size:.9rem; text-decoration:none;
  transition:top .3s var(--ease);
}
.skip:focus{ top:1rem; }

:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; }

/* film grain over everything, very faint */
.grain{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared type ---------- */

.eyebrow{
  font-family:var(--sans);
  font-size:clamp(.72rem,.68rem + .18vw,.8rem);
  font-weight:400;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0;
}

h2{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.3rem,1.5rem + 3vw,4rem);
  line-height:1.04;
  letter-spacing:.005em;
  margin:.6rem 0 0;
  color:var(--cream);
  text-wrap:balance;
}

h3{
  font-family:var(--sans);
  font-weight:400;
  font-size:.8rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin:0 0 .6rem;
}

p{ margin:0 0 1.1rem; color:var(--cream-dim); }
p:last-child{ margin-bottom:0; }

a{ color:var(--gold); text-underline-offset:.25em; text-decoration-thickness:1px; }
a:hover{ color:var(--cream); }

strong{ color:var(--cream); font-weight:450; }

.lede{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);
  line-height:1.55;
  color:var(--cream-dim);
  max-width:38rem;
  margin:1.4rem auto 0;
  text-wrap:pretty;
}

/* ---------- ornament ---------- */

.rule{
  display:flex; align-items:center; justify-content:center;
  gap:1.1rem; margin:1.6rem 0; color:var(--gold);
}
.rule::before,.rule::after{
  content:""; height:1px; flex:1; max-width:7rem;
  background:linear-gradient(90deg,transparent,var(--gold-dim));
}
.rule::after{ background:linear-gradient(270deg,transparent,var(--gold-dim)); }
.rule svg{ display:block; color:var(--gold); }

/* ---------- layout ---------- */

section{ position:relative; }

.wrap{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(5rem,12vh,9rem) var(--gutter);
}
.wrap--tight{ max-width:46rem; }
.wrap--mid{ max-width:58rem; }

.center{ text-align:center; }

.section-head{ text-align:center; margin-bottom:clamp(2.8rem,7vh,4.5rem); }

.tone{ background:var(--ink-2); }
.tone-3{ background:var(--ink-3); }
.hairline{ border-top:1px solid var(--gold-faint); }

/* ---------- buttons ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  min-height:3.2rem;
  padding:1rem 2.4rem 1rem calc(2.4rem + .26em);
  font-family:var(--sans); font-size:.78rem; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--btn-fg);
  background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));
  border:1px solid var(--btn-top);
  border-radius:0;
  cursor:pointer; text-decoration:none;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease), background .35s var(--ease);
}
.btn:hover{ color:var(--btn-fg); transform:translateY(-2px); box-shadow:0 14px 40px rgba(var(--gold-rgb),.22); filter:brightness(1.06); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

.btn--ghost{
  background:transparent; color:var(--gold);
  border:1px solid var(--gold-dim);
}
.btn--ghost:hover{ color:var(--cream); background:rgba(var(--gold-rgb),.08); box-shadow:none; filter:none; }

.btn--small{ min-height:2.75rem; padding:.7rem 1.4rem .7rem calc(1.4rem + .26em); font-size:.72rem; }

/* ============================================================
   NAV
   Over the hero only the language switch and RSVP show, so the
   opening frame stays clean. The full bar slides in on scroll.
   ============================================================ */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav__inner{
  max-width:86rem; margin:0 auto;
  height:var(--navh);
  padding:0 clamp(1.4rem,3.4vw,2.8rem);
  display:flex; align-items:center; gap:1.5rem;
  transition:padding .5s var(--ease), margin .5s var(--ease);
}
/* sit inside the hero's gold frame until scrolled */
.nav:not(.nav--solid) .nav__inner{ margin-top:clamp(.7rem,2.2vw,1.6rem); }

.nav--solid{
  background:rgba(var(--ink-rgb),.84);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--gold-faint);
}

.nav__mono{
  font-family:var(--serif); font-weight:400; font-size:1.45rem;
  color:var(--cream); text-decoration:none; letter-spacing:.04em;
  opacity:0; transform:translateY(-6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  white-space:nowrap;
}
.nav__mono i{ color:var(--gold-soft); font-size:1.15rem; padding:0 .12em; }
.nav--solid .nav__mono{ opacity:1; transform:none; }

.nav__links{
  list-style:none; margin:0 auto; padding:0;
  display:flex; gap:clamp(1rem,2.2vw,2.2rem);
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.nav--solid .nav__links{ opacity:1; transform:none; pointer-events:auto; }
.nav__links a{
  position:relative;
  font-size:.74rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cream-dim); text-decoration:none; padding:.6rem 0;
  white-space:nowrap;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:.24em; bottom:.2rem; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="true"]{ color:var(--cream); }
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after{ transform:scaleX(1); }

.nav__right{ display:flex; align-items:center; gap:.6rem; margin-left:auto; }
.nav--solid .nav__right{ margin-left:0; }

.lang{
  display:flex; align-items:center;
  border:1px solid var(--gold-dim);
  background:rgba(var(--ink-rgb),.5);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.lang button{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:.7rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-faint);
  min-width:2.75rem; min-height:2.75rem;
  padding:.5rem .7rem .5rem calc(.7rem + .16em);
  transition:color .3s var(--ease), background .3s var(--ease);
}
.lang button + button{ border-left:1px solid var(--gold-faint); }
.lang button:hover{ color:var(--cream); }
.lang button[aria-pressed="true"]{
  color:var(--btn-fg);
  background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));
}

.nav__rsvp{
  display:inline-flex; align-items:center; min-height:2.75rem;
  padding:.5rem 1.2rem .5rem calc(1.2rem + .24em);
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); text-decoration:none;
  border:1px solid var(--gold-dim);
  background:rgba(var(--ink-rgb),.5);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.nav__rsvp:hover{ background:rgba(var(--gold-rgb),.12); color:var(--cream); }

.nav__burger{
  display:none;
  appearance:none; background:rgba(var(--ink-rgb),.5); cursor:pointer;
  border:1px solid var(--gold-dim);
  width:2.9rem; height:2.9rem; padding:0;
  position:relative;
}
.nav__burger i{
  position:absolute; left:.85rem; right:.85rem; height:1px; background:var(--gold-soft);
  transition:transform .4s var(--ease), top .4s var(--ease);
}
.nav__burger i:nth-of-type(1){ top:1.15rem; }
.nav__burger i:nth-of-type(2){ top:1.7rem; }
.nav__burger[aria-expanded="true"] i:nth-of-type(1){ top:1.43rem; transform:rotate(45deg); }
.nav__burger[aria-expanded="true"] i:nth-of-type(2){ top:1.43rem; transform:rotate(-45deg); }

/* full-screen phone menu */
.menu{
  position:fixed; inset:0; z-index:45;
  background:rgba(var(--ink-rgb),.97);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  display:grid; place-items:center;
  opacity:0; transition:opacity .45s var(--ease);
  overflow-y:auto;
}
.menu[hidden]{ display:none; }
.menu.is-open{ opacity:1; }
.menu__inner{ text-align:center; padding:calc(var(--navh) + 2rem) 1.5rem 3rem; }
.menu ul{ list-style:none; margin:0 0 2.6rem; padding:0; }
.menu li{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:calc(var(--i,0) * 55ms + 80ms);
}
.menu.is-open li{ opacity:1; transform:none; }
.menu a{
  display:inline-block; padding:.42rem 1rem;
  font-family:var(--serif); font-weight:300; font-size:clamp(1.9rem,8vw,2.6rem);
  color:var(--cream); text-decoration:none; line-height:1.2;
}
.menu a:hover{ color:var(--gold-soft); }
.menu .menu__rsvp{ color:var(--gold-soft); font-style:italic; }
.lang--menu{ display:inline-flex; }
.lang--menu button{ padding-inline:1rem; letter-spacing:.12em; }

/* phones and tablets: a flag in the top bar opens the three languages */
.langpick{ position:relative; display:none; }
.langpick__btn{
  appearance:none; cursor:pointer; padding:0;
  width:2.9rem; height:2.9rem; display:grid; place-items:center;
  background:rgba(var(--ink-rgb),.5); border:1px solid var(--gold-dim);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:border-color .3s var(--ease);
}
.langpick__btn:hover, .langpick__btn[aria-expanded="true"]{ border-color:var(--gold); }
.flag{ display:block; flex:none; width:1.5rem; height:1rem; box-shadow:0 0 0 1px rgba(var(--cream-rgb),.28); }
.langpick__list.lang{
  position:absolute; right:0; top:calc(100% + .45rem); z-index:60;
  flex-direction:column; align-items:stretch; min-width:11rem;
  background:rgba(var(--ink-rgb),.96); box-shadow:0 18px 40px -16px rgba(0,0,0,.55);
}
.langpick__list.lang[hidden]{ display:none; }
.langpick__list button{
  display:flex; align-items:center; gap:.8rem; text-align:left;
  padding:.75rem 1.1rem; letter-spacing:.12em; font-size:.76rem;
}
.langpick__list button + button{ border-left:0; border-top:1px solid var(--gold-faint); }

@media (max-width:1060px){
  .langpick{ display:block; }
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .nav__right{ margin-left:auto; }
  .nav--solid .nav__right{ margin-left:auto; }
  .nav .nav__right > .lang{ display:none; }
}
@media (min-width:1061px){
  .menu{ display:none !important; }
}
@media (max-width:420px){
  .nav__rsvp{ padding-inline:.9rem .7rem; letter-spacing:.18em; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(5rem,12vh,7rem) var(--gutter) calc(clamp(3rem,9vh,6rem) + 6rem);
  isolation:isolate;
  overflow:hidden;
  text-align:center;
}

.hero__bg{
  position:absolute; inset:0; z-index:-3;
  background-color:#2b3b4a;
  background-image:-webkit-image-set(url("../img/hero-skagerack.webp") 1x);
  background-image:image-set(url("../img/hero-skagerack.webp") type("image/webp"), url("../img/hero-skagerack.jpg") type("image/jpeg"));
  background-size:cover;
  background-position:var(--hero-x,30%) var(--hero-y,50%);
  transform:scale(1.08);
  transform-origin:50% 60%;
  will-change:transform;
  transition:transform 2.8s var(--ease-out);
}
.hero-in .hero__bg{ transform:scale(1.02); }

.hero__water{
  position:absolute; inset:0; width:100%; height:100%;
  display:block;
  opacity:0; transition:opacity 1.4s var(--ease);
}
.hero__water.is-ready{ opacity:1; }

/* vignette and darkening so the type always reads */
.hero__scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(ellipse 80% 62% at 50% 46%, rgba(var(--ink-rgb),.22) 0%, rgba(var(--ink-rgb),.42) 58%, rgba(var(--ink-rgb),.66) 100%),
    linear-gradient(180deg, rgba(var(--ink-rgb),.62) 0%, rgba(var(--ink-rgb),.16) 30%, rgba(var(--ink-rgb),.12) 62%, rgba(var(--ink-rgb),.5) 88%, rgba(var(--ink-rgb),.72) 100%);
}

/* thin double gold frame, like the printed card */
.hero__frame{
  position:absolute;
  inset:clamp(.7rem,2.2vw,1.6rem);
  z-index:1;
  border:1px solid var(--gold-dim);
  pointer-events:none;
}
.hero__frame i{
  position:absolute; inset:clamp(.3rem,.9vw,.6rem);
  border:1px solid var(--gold-faint);
}
.js .hero__frame{ opacity:0; transform:scale(1.025); transition:opacity 1.6s var(--ease), transform 1.8s var(--ease-out); }
.js.hero-in .hero__frame{ opacity:1; transform:none; }

.hero__inner{ position:relative; z-index:2; width:100%; max-width:72rem; }

.hero__kicker{
  font-size:clamp(.74rem,.64rem + .4vw,1rem);
  letter-spacing:.46em;
  text-transform:uppercase;
  color:var(--cream);
  margin:0 0 1.2rem;
  padding-left:.46em;
}

.hero__title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(4rem,1.4rem + 9vw,9.6rem);
  line-height:.9;
  letter-spacing:.02em;
  margin:0;
  color:#fff;
  text-shadow:0 0 80px rgba(var(--gold-rgb),.25), 0 2px 34px rgba(0,0,0,.55);
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  column-gap:.18em;
}
.hero__amp{
  font-style:italic; font-weight:300;
  font-size:.62em;
  color:var(--gold-soft);
  transform:translateY(-.08em);
}
.hero__name{ display:inline-block; }

.rule--hero{ margin:1.7rem auto 1.2rem; max-width:24rem; }

.hero__date{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.3rem,1rem + 1vw,2rem);
  color:var(--gold-soft);
  letter-spacing:.02em;
  margin:0;
}
.hero__place{
  font-size:clamp(.74rem,.64rem + .35vw,.98rem);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--cream);
  margin:.85rem 0 0;
  padding-left:.42em;
}
/* a quiet "play the intro again" under the date, for anyone who skipped it */
.hero__again{ margin:1.1rem 0 0; }
.hero__again[hidden]{ display:none; }
.hero__again button{
  appearance:none; background:none; border:0; cursor:pointer; padding:.5rem .6rem; min-height:2.75rem;
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:inherit; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cream); opacity:.72; transition:opacity .3s, color .3s;
}
.hero__again button:hover, .hero__again button:focus-visible{ opacity:1; color:var(--gold-soft); }

/* the film-title entrance. Only hidden once JS has said it can show them again. */
.js .hero [data-rise]{
  opacity:0;
  transform:translateY(22px);
  filter:blur(8px);
}
.js.hero-in .hero [data-rise]{
  opacity:1; transform:none; filter:blur(0);
  transition:opacity 1.3s var(--ease), transform 1.5s var(--ease-out), filter 1.3s var(--ease);
  transition-delay:calc(var(--d,0) * 150ms + 250ms);
}
.js.hero-in .hero .hero__amp[data-rise]{ transform:translateY(-.08em); }
.js.hero-in .hero .scrollcue[data-rise]{ transform:translateX(-50%); }
.js .hero .scrollcue[data-rise]{ transform:translate(-50%,22px); }

/* the intro's letters are flying in: the title stands still and its letters
   wait for them (see flyIntoTitle in main.js) */
.js.hero-morph .hero__title [data-rise]{ opacity:1; transform:none; filter:none; transition:none; }
.js.hero-morph .hero__title .hero__amp[data-rise]{ transform:translateY(-.08em); }
.js.hero-morph .hero__title .ltr{ opacity:0; }   /* after the rule above, so the & waits too */
.morph{ position:fixed; inset:0; z-index:96; pointer-events:none; color:#fff; }
.morph > *{ position:fixed; display:block; transform-origin:50% 50%; will-change:transform, opacity; }
.morph svg{ display:block; width:100%; height:100%; overflow:visible; }
.morph i{ border-radius:50%; }

/* scroll cue */
.scrollcue{
  position:absolute; left:50%; bottom:clamp(2rem,5vh,3.2rem);
  transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-size:.66rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--cream-faint); text-decoration:none;
}
.scrollcue span{ padding-left:.34em; }
.scrollcue i{
  display:block; width:1px; height:3.2rem;
  background:linear-gradient(180deg,var(--gold-dim),transparent);
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{opacity:.35;transform:scaleY(.6);transform-origin:top} 50%{opacity:1;transform:scaleY(1)} }

@media (max-height:700px){
  .hero{ padding-bottom:calc(clamp(3rem,9vh,6rem) + 5rem); }
  .scrollcue{ gap:.5rem; bottom:1.5rem; }
  .scrollcue i{ height:1.8rem; }
}
@media (max-height:520px){
  .hero{ padding-bottom:clamp(3rem,9vh,6rem); }
  .scrollcue{ display:none; }
}
@media (max-width:640px){
  .hero{ --hero-x:33%; } /* keeps lit Skagerack in the middle of a phone screen */
  .hero__kicker{ letter-spacing:.34em; padding-left:.34em; }
  .hero__place{ letter-spacing:.32em; padding-left:.32em; }
}
/* phones: stack the names like a film poster rather than let them wrap */
@media (max-width:560px){
  .hero__title{ flex-direction:column; align-items:center; font-size:clamp(4.4rem,22vw,6.2rem); line-height:.86; }
  .hero__amp{ font-size:.5em; margin:.04em 0 .1em; }
}

/* ============================================================
   INVITATION CARD
   A cream card on the dark page, like holding the printed invite.
   ============================================================ */

.invite .wrap{ padding-top:clamp(5rem,13vh,9rem); }

.card{
  position:relative;
  max-width:44rem;
  margin:0 auto;
  padding:clamp(4.6rem,9vw,6.2rem) clamp(1.6rem,7vw,5rem) clamp(3rem,7vw,4.4rem);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(186,160,112,.16), transparent 70%),
    var(--paper);
  color:var(--paper-ink);
  text-align:center;
  box-shadow:0 30px 70px -34px rgba(90,64,30,.32), 0 2px 0 rgba(255,255,255,.6) inset;
}
.card::before{
  content:""; position:absolute; inset:clamp(.7rem,1.6vw,1rem);
  border:1px solid rgba(138,103,48,.42);
  pointer-events:none;
}
.card::after{
  content:""; position:absolute; inset:clamp(1.05rem,2.2vw,1.45rem);
  border:1px solid rgba(138,103,48,.2);
  pointer-events:none;
}
.card__seal{
  position:absolute; left:50%; top:0; z-index:2;   /* above the card's frame lines */
  width:clamp(6.4rem,15vw,8rem); height:auto;
  transform:translate(-50%,-50%);
  color:var(--gold-soft);
  background:var(--ink-2);
  border-radius:50%;
  padding:.35rem;
  box-shadow:0 0 0 1px var(--gold-dim), 0 18px 40px -16px rgba(0,0,0,.8);
}
.card__eyebrow{
  font-size:.74rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--paper-gold); margin:0 0 1.6rem; padding-left:.4em;
}
.card__greet{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);
  color:var(--paper-ink); margin:0 0 1.3rem; line-height:1.25;
}
.card__text p{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.18rem,1.08rem + .45vw,1.4rem);
  line-height:1.62;
  color:#3b332b;
  margin:0 0 1.05rem;
  text-wrap:pretty;
}
.card__sig{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);
  color:var(--paper-gold); margin:2rem 0 0;
}
.card a{ color:var(--paper-gold); }

/* at a glance */
.trio{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--gold-faint);
  max-width:60rem;
  margin:clamp(4rem,9vh,6rem) auto 0;
}
.trio > div{
  padding:clamp(1.8rem,4vw,2.8rem) clamp(.8rem,2vw,1.5rem);
  text-align:center;
  border-left:1px solid var(--gold-faint);
}
.trio > div:first-child{ border-left:0; }
.trio svg{ margin:0 auto .9rem; display:block; stroke:var(--gold); }
.trio h3{ color:var(--cream); margin-bottom:.5rem; padding-left:.28em; font-size:.74rem; }
.trio .big{
  font-family:var(--serif);
  font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);
  color:var(--gold-soft); line-height:1.15;
}
.trio .sub{
  font-size:.9rem; letter-spacing:.04em; color:var(--cream-faint);
  margin-top:.5rem; line-height:1.5;
}
.trio .sub a{ color:var(--cream-faint); }
.trio .sub a:hover{ color:var(--gold-soft); }

@media (max-width:700px){
  .trio{ grid-template-columns:1fr; }
  .trio > div{ border-left:0; border-top:1px solid var(--gold-faint); }
  .trio > div:first-child{ border-top:0; }
}

/* ============================================================
   COUNTDOWN
   ============================================================ */

.count{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(1.2rem,5vw,3.6rem);
  margin-top:2.2rem;
}
.count div{ min-width:4.4rem; }
.count b{
  display:block;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.8rem,1.7rem + 3.8vw,4.6rem);
  line-height:1;
  color:var(--gold-soft);
  font-variant-numeric:tabular-nums lining-nums;
}
.count small{
  display:block; margin-top:.6rem;
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cream-faint); padding-left:.3em;
}
.count__note{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,1rem + .4vw,1.3rem);
  color:var(--cream-dim); margin:2.2rem auto 0; max-width:30rem;
}
.count__cal{ margin-top:2.4rem; }

/* ============================================================
   THE DAY, IN LIGHT
   ============================================================ */

.day__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}

.sky{
  --sky-top:#1d3346; --sky-bot:#8c7856; --sun:#f3d7a0; --stars:0; --hz:66%;
  --sea-top:#5d8aa3; --sea-bot:#3c6279;
  position:relative;
  aspect-ratio:4 / 4.3;
  border-radius:999px 999px 0 0;
  overflow:hidden;
  background:linear-gradient(180deg,var(--sky-top) 0%, var(--sky-bot) var(--hz), var(--sea-top) var(--hz), var(--sea-bot) 100%);
  box-shadow:0 0 0 1px var(--gold-faint), 0 36px 80px -40px rgba(40,28,14,.45);
  isolation:isolate;
}
.sky-wrap{ position:sticky; top:calc(var(--navh) + 2rem); }
.sky::after{ /* inner gold arch line */
  content:""; position:absolute; inset:.7rem .7rem 0;
  border:1px solid rgba(var(--gold-rgb),.22); border-bottom:0;
  border-radius:999px 999px 0 0;
  pointer-events:none;
}
.sky__svg{ position:absolute; inset:auto 0 0 0; width:100%; height:100%; overflow:visible; }
.sky__arc{ fill:none; stroke:rgba(var(--cream-rgb),.22); stroke-width:1; stroke-dasharray:2 6; }
.sky__tick{ fill:rgba(var(--cream-rgb),.35); transition:fill .4s var(--ease), r .4s var(--ease); }
.sky__tick.is-on{ fill:var(--gold-soft); }
.sky__sun{ fill:var(--sun); }
.sky__horizon{ stroke:rgba(var(--gold-rgb),.5); stroke-width:1; }
.sky__sea{ stroke:rgba(var(--cream-rgb),.12); stroke-width:1; fill:none; }
.sky__stars circle{ fill:#fff; opacity:calc(var(--stars) * var(--o,1)); }
.sky__label{
  font-family:var(--sans); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  fill:rgba(var(--cream-rgb),.5);
}
.sky__time{
  position:absolute; left:0; right:0; bottom:6%;
  text-align:center; z-index:2;
}
.sky__time b{
  display:block;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.6rem,1.6rem + 3vw,4.2rem); line-height:1;
  color:var(--cream); font-variant-numeric:tabular-nums lining-nums;
}
.sky__time span{
  display:block; margin-top:.5rem;
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-soft);
  padding-left:.3em; min-height:1.2em;
}

.events{
  list-style:none; margin:0; padding:0 0 0 clamp(1.6rem,3vw,2.6rem);
  position:relative;
  counter-reset:ev;
}
.events::before{
  content:""; position:absolute; left:0; top:1.2rem; bottom:1.2rem; width:1px;
  background:linear-gradient(180deg,transparent,var(--gold-dim) 8%,var(--gold-dim) 92%,transparent);
}
.event{
  position:relative;
  padding:clamp(1.8rem,5.5vh,3.2rem) 0;
  border-bottom:1px solid var(--gold-faint);
  transition:opacity .5s var(--ease);
  opacity:.72; /* still readable for older eyes */
}
.event:last-child{ border-bottom:0; }
.event.is-active{ opacity:1; }
.event::before{
  content:""; position:absolute;
  left:calc(-1 * clamp(1.6rem,3vw,2.6rem) - 4px); top:calc(clamp(1.8rem,5.5vh,3.2rem) + 1.05rem);
  width:9px; height:9px; border-radius:50%;
  background:var(--ink-2); border:1px solid var(--gold);
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.event.is-active::before{ background:var(--gold-soft); box-shadow:0 0 0 5px rgba(var(--gold-rgb),.14), 0 0 22px rgba(var(--gold-rgb),.5); }
.event__time{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,1.5rem + 1.6vw,2.8rem); line-height:1;
  color:var(--gold-soft); font-variant-numeric:lining-nums tabular-nums;
}
.event__title{
  text-transform:none; letter-spacing:0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1vw,2rem); line-height:1.2;
  color:var(--cream); margin:.7rem 0 .35rem;
}
.event__place{
  font-size:.74rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin:0 0 .8rem;
}
.event__note{ margin:0; color:var(--cream-dim); max-width:32rem; }
.event--ambient .event__time{ color:var(--sea); }
.event--ambient .event__place{ color:var(--sea); }

.provisional{
  margin:clamp(2.8rem,6vh,4rem) auto 0; text-align:center;
  font-size:.92rem; color:var(--cream-faint); font-style:italic;
  max-width:36rem;
}

/* Friday and Sunday, either side of the day */
.around{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.4vw,1.6rem);
  max-width:52rem; margin:clamp(3.5rem,8vh,5rem) auto 0;
}
.around__card{
  border:1px solid var(--gold-faint);
  padding:clamp(1.6rem,3.5vw,2.4rem);
  text-align:center;
  background:linear-gradient(180deg,rgba(141,182,169,.05),transparent 70%);
}
.around__title{
  font-family:var(--serif); font-weight:300; text-transform:none; letter-spacing:0;
  font-size:clamp(1.7rem,1.4rem + 1vw,2.2rem); color:var(--cream); line-height:1.15;
  margin:.6rem 0 .8rem;
}
.around__card p:last-child{ font-size:.98rem; margin:0; }
.around__note{ text-align:center; margin:1.4rem auto 0; font-size:.92rem; color:var(--cream-faint); }
@media (max-width:640px){ .around{ grid-template-columns:1fr; } }

@media (max-width:820px){
  .day__grid{ grid-template-columns:1fr; gap:0; }
  /* phones: the sky pins under the nav on a solid band, so the
     programme scrolls cleanly underneath it */
  .sky-wrap{
    top:var(--navh); z-index:5;
    margin:0 calc(-1 * var(--gutter)) 1rem;
    padding:.6rem var(--gutter) 0;
    background:var(--ink-2);
  }
  .sky-wrap::after{
    content:""; position:absolute; left:0; right:0; top:100%; height:2.2rem;
    background:linear-gradient(180deg,var(--ink-2),rgba(var(--ink2-rgb),0));
    pointer-events:none;
  }
  .sky{
    aspect-ratio:auto; height:clamp(190px,32vh,250px);
    border-radius:50% 50% 0 0 / 42% 42% 0 0;
  }
  .sky::after{ border-radius:50% 50% 0 0 / 42% 42% 0 0; }
  .sky__time{ bottom:5%; }
  .sky__time b{ font-size:2.4rem; }
  .events{ padding-left:1.5rem; }
  .event::before{ left:calc(-1.5rem - 4px); }
}

/* ============================================================
   VENUES
   ============================================================ */

.venue{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(2.2rem,6vw,6rem);
  align-items:center;
}
.venue--rev{ grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); }
.venue--rev .venue__media{ order:2; aspect-ratio:3 / 2; }

.venue__media{
  position:relative; margin:0;
  overflow:hidden;
  aspect-ratio:4 / 3.2;
  box-shadow:0 30px 70px -38px rgba(80,56,24,.38);
}
.venue__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.12) translate3d(0,var(--py,0px),0);
  filter:saturate(.9) contrast(1.03);
  will-change:transform;
}
.venue__media--plate{
  display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 100%, rgba(111,143,128,.16), transparent 60%), var(--ink-2);
  color:var(--gold-soft);
}
.venue__drawing{ width:72%; height:auto; }
.venue__media .venue__photo{ position:absolute; inset:0; z-index:1; }
.venue__media .venue__photo[hidden]{ display:none; }
.venue__plate-cap{
  position:absolute; left:0; right:0; bottom:1.6rem; text-align:center;
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
}
.venue__media::after{
  content:""; position:absolute; inset:.85rem;
  border:1px solid rgba(255,250,240,.55);
  pointer-events:none;
}

.venue__num{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(3.6rem,2.6rem + 3vw,5.6rem); line-height:.8;
  color:var(--gold-dim); margin:0 0 1.2rem;
}
.venue__name{
  font-family:var(--serif); font-weight:300; text-transform:none; letter-spacing:.005em;
  font-size:clamp(2.2rem,1.6rem + 2.2vw,3.4rem); line-height:1.05;
  color:var(--cream); margin:.55rem 0 1.4rem;
}
.venue__text p{ color:var(--cream-dim); }

.venue__meta{ margin:1.8rem 0 0; border-top:1px solid var(--gold-faint); }
.venue__meta > div{
  display:grid; grid-template-columns:7.5rem 1fr; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--gold-faint);
}
.venue__meta dt{
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  padding-top:.3rem;
}
.venue__meta dd{ margin:0; color:var(--cream-dim); font-size:.98rem; }
.venue__meta .links a{ margin-right:1.1rem; white-space:nowrap; }

@media (max-width:860px){
  .venue{ grid-template-columns:1fr; gap:2.2rem; }
  .venue--rev .venue__media{ order:0; }
  .venue__num{ display:none; }
}
@media (max-width:460px){
  .venue__meta > div{ grid-template-columns:1fr; gap:.15rem; }
}

/* the stroll */
.walk{
  max-width:52rem;
  margin:clamp(4rem,10vh,7rem) auto;
  text-align:center;
}
.walk__svg{ width:100%; height:auto; overflow:visible; }
.walk__path{ fill:none; stroke:var(--gold-dim); stroke-width:1.6; stroke-dasharray:.5 8; stroke-linecap:round; }
.walk__draw{
  fill:none; stroke:var(--gold-soft); stroke-width:1.1;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 3.2s var(--ease) .3s;
}
.walk.in .walk__draw{ stroke-dashoffset:0; }
.walk__pin{ fill:var(--ink); stroke:var(--gold-soft); stroke-width:1.2; }
.walk__dot{ fill:var(--gold-soft); opacity:0; }
.walk.in .walk__dot{ opacity:1; transition:opacity .6s var(--ease) 1s; }
.walk__labels{
  display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:start;
  margin-top:.4rem;
}
.walk__labels span{
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}
.walk__labels p{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,1rem + .6vw,1.45rem);
  color:var(--cream-dim); margin:0; line-height:1.45;
}
@media (max-width:560px){
  .walk__labels{ grid-template-columns:1fr 1fr; }
  .walk__labels p{ grid-column:1 / -1; grid-row:2; margin-top:.6rem; }
  .walk__labels span:last-child{ text-align:right; }
}

/* ============================================================
   TRAVEL
   ============================================================ */

.board-wrap{
  max-width:64rem; margin:0 auto;
  padding:clamp(1rem,2.6vw,1.8rem);
  background:linear-gradient(180deg,#fbf7ef,#f2e9dc);
  border:1px solid var(--gold-dim);
  box-shadow:0 36px 80px -44px rgba(30,20,10,.5), inset 0 1px 0 rgba(255,255,255,.03);
}
.board-head{
  display:flex; align-items:center; gap:.8rem;
  font-size:.74rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-soft);
  padding:0 .2rem 1rem; margin-bottom:1rem;
  border-bottom:1px solid var(--gold-faint);
}
/* a cream split-flap board with dark letters, to sit with the page */
.board-wrap .fb{
  --fb-tile-hi:#ffffff; --fb-tile-top:#faf6ef; --fb-tile-bot:#eee5d6; --fb-tile-lo:#e4d8c4;
  --fb-char:#2b2620;
}
.board-wrap .fb__t{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 0 rgba(110,84,44,.26), 0 calc(var(--fb-tw) * .1) calc(var(--fb-tw) * .22) -1px rgba(90,64,30,.16);
}
.board-wrap .fb__face, .board-wrap .fb__h > b, .board-wrap .fb__f > b{ text-shadow:none; }
.board-wrap .fb__h--t, .board-wrap .fb__f--t{ box-shadow:inset 0 1px 0 rgba(255,255,255,.8); }
.board-wrap .fb__t::after{ background:rgba(110,84,44,.3); box-shadow:0 1px 0 rgba(255,255,255,.6); }
.board-wrap .fb__t::before{
  background:linear-gradient(90deg, #b3a184 0 var(--pin), transparent var(--pin) calc(100% - var(--pin)), #b3a184 calc(100% - var(--pin)));
}
.board-wrap .fb__table tbody tr + tr td{ border-top-color:rgba(47,42,37,.07); }
.board-wrap .fb__lamp{ background:radial-gradient(circle at 35% 30%, #efe5d3, #cbb998 75%); box-shadow:inset 0 0 0 1px rgba(110,84,44,.3); }
.board-head__lamp{
  width:7px; height:7px; border-radius:50%; background:#f0b85a;
  box-shadow:0 0 10px #f0b85a; animation:lamp 2.4s ease-in-out infinite;
}
@keyframes lamp{ 50%{ opacity:.45; } }
.board-head__date{ margin-left:auto; color:var(--cream-faint); letter-spacing:.2em; }
.board-note{
  margin:1rem .2rem 0; font-size:.88rem; color:var(--cream-faint); font-style:italic;
}

.info{ border-top:1px solid var(--gold-faint); margin:0; }
.info > div{
  border-bottom:1px solid var(--gold-faint);
  padding:1.7rem 0;
  display:grid;
  grid-template-columns:14rem 1fr;
  gap:1.6rem;
  align-items:start;
}
.info dt{
  font-size:.74rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); padding-top:.3rem;
}
.info dt small{
  display:block; margin-top:.45rem; letter-spacing:.06em; text-transform:none;
  font-size:.92rem; color:var(--cream-faint); font-family:var(--serif); font-style:italic;
}
.info dd{ margin:0; color:var(--cream-dim); }
.info dd p{ margin:0 0 .8rem; }
.info dd p:last-child{ margin:0; }
.info dd ul{ margin:.2rem 0 .8rem; padding-left:1.1rem; }
.info dd li{ margin:.2rem 0; color:var(--cream-dim); }
.info dd li::marker{ color:var(--gold); }
@media (max-width:700px){
  .info > div{ grid-template-columns:1fr; gap:.5rem; }
}

.info--routes{ max-width:58rem; margin:clamp(3.5rem,8vh,5rem) auto 0; }

.nudge{
  max-width:40rem; margin:clamp(3rem,7vh,4.5rem) auto 0;
  text-align:center; color:var(--gold);
}
.nudge svg{ margin:0 auto 1rem; display:block; }
.nudge p{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem); line-height:1.5; color:var(--cream);
}

/* ============================================================
   STAY
   ============================================================ */

.feature{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  border:1px solid var(--gold-faint);
  background:var(--ink-2);
  margin-bottom:clamp(2rem,4vw,3rem);
}
.feature__media{ position:relative; margin:0; min-height:22rem; overflow:hidden; }
.feature__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.92); }
.feature__body{ padding:clamp(2rem,4.5vw,3.6rem); align-self:center; }
.feature__name{
  font-family:var(--serif); font-weight:300; text-transform:none; letter-spacing:0;
  font-size:clamp(2rem,1.5rem + 1.8vw,2.9rem); color:var(--cream); line-height:1.08; margin:.6rem 0 1rem;
}
.badge{
  position:absolute; right:clamp(1rem,2.5vw,1.8rem); bottom:clamp(1rem,2.5vw,1.8rem);
  width:clamp(6.4rem,11vw,7.6rem); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle at 35% 30%, #f3dba8, #c9a35e 60%, #a88442);
  color:#2b2014;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.7), inset 0 0 0 4px rgba(var(--ink-rgb),.12), inset 0 0 0 5px rgba(255,255,255,.3);
  transform:rotate(-8deg);
}
.badge b{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,1.5rem + 1vw,2.4rem); line-height:.9; }
.badge span{ display:block; font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; line-height:1.4; padding:0 .6rem; margin-top:.25rem; }

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.2rem; padding:0; list-style:none; }
.subnote--tight{ margin-top:-.4rem; }

/* signing in with your email: on the landing page and above the RSVP form */
.me{ margin:clamp(1rem,3vh,1.4rem) auto 0; max-width:26rem; text-align:center; }
.me[hidden], .me__form[hidden], .me__hello[hidden], .me__open[hidden]{ display:none; }
.me__open, .me__out{
  appearance:none; background:none; border:0; cursor:pointer; padding:.5rem .2rem; min-height:2.5rem;
  font:inherit; font-size:.95rem; color:var(--gold);
  text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:1px;
}
.me__open:hover, .me__out:hover{ color:var(--cream); }
.me__form{ display:flex; gap:.6rem; margin-top:.6rem; }
.me__form input{ flex:1; min-width:0; }
.me__form .btn{ padding-inline:1.2rem calc(1.2rem + .26em); }
.me__msg{ min-height:1.4em; margin:.6rem 0 0; font-size:.95rem; color:var(--cream-dim); }
.me__msg.is-good{ color:var(--sea); }
.me__msg.is-bad{ color:var(--err); }
.me--rsvp{ margin:0 auto clamp(1.6rem,4vh,2.4rem); }
.me__hello{ margin:0; font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--cream); }
@media (max-width:420px){ .me__form{ flex-direction:column; } }
.chips li{
  font-size:.8rem; letter-spacing:.06em; color:var(--cream-dim);
  border:1px solid var(--gold-faint); padding:.3rem .7rem; line-height:1.4;
}
.chips li.hi{ color:var(--gold); border-color:var(--gold-dim); }

.stay__links{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }
.feature__code{
  margin:1.2rem 0 0; padding:.8rem 1rem;
  border:1px dashed var(--gold-dim); color:var(--gold);
  font-size:.95rem; line-height:1.5;
}
.feature__code b{ font-family:var(--serif); font-weight:500; font-size:1.2rem; letter-spacing:.08em; color:var(--cream); }

.stays{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.6rem);
}
.stay-card{
  display:flex; flex-direction:column;
  border:1px solid var(--gold-faint);
  background:var(--ink-2);
  transition:border-color .4s var(--ease), transform .5s var(--ease);
}
.stay-card:hover{ border-color:var(--gold-dim); transform:translateY(-3px); }
.stay-card__media{ margin:0; aspect-ratio:3 / 2; overflow:hidden; background:var(--ink-3); position:relative; }
.stay-card__media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9); transition:transform .9s var(--ease); }
.stay-card:hover .stay-card__media img{ transform:scale(1.04); }
.stay-card__plate{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--serif); font-style:italic; font-size:1.4rem; color:var(--gold-dim);
  background:radial-gradient(circle at 50% 120%, rgba(141,182,169,.18), transparent 60%), var(--ink-3);
}
.stay-card__body{ padding:1.5rem 1.4rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.stay-card__type{ font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin:0; }
.stay-card__name{
  font-family:var(--serif); font-weight:400; text-transform:none; letter-spacing:0;
  font-size:1.65rem; color:var(--cream); line-height:1.15; margin:.45rem 0 .9rem;
}
.stay-card__desc{ font-size:.98rem; margin-bottom:1rem; }
.stay-card .stay__links{ margin-top:auto; padding-top:.4rem; }
.stay-card .chips{ margin-bottom:1rem; }

.stays__note{
  margin:clamp(2rem,5vh,3rem) auto 0; max-width:40rem; text-align:center;
  font-size:.95rem; color:var(--cream-faint);
}
.tbc{
  display:inline-block; vertical-align:.12em; margin-left:.35rem;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream-faint); border:1px dashed rgba(var(--cream-rgb),.3); padding:.05rem .4rem;
}

@media (max-width:960px){
  .stays{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px){
  .feature{ grid-template-columns:1fr; }
  .feature__media{ min-height:0; }
  .feature__media img{ position:static; display:block; height:auto; aspect-ratio:4 / 3; }   /* the whole photo, nothing cut */
  .feature .badge{ width:5.2rem; right:.75rem; bottom:.75rem; }
  .feature .badge b{ font-size:1.55rem; }
  .feature .badge span{ font-size:.5rem; letter-spacing:.14em; padding:0 .4rem; }
}
/* phones: the cards become a swipeable row that bleeds to the screen edge */
@media (max-width:640px){
  .stays{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gutter)); padding:0 var(--gutter) 1rem;
    gap:.9rem; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .stays::-webkit-scrollbar{ display:none; }
  .stay-card{ flex:0 0 84%; scroll-snap-align:center; }
}

/* ============================================================
   TOASTMASTERS
   ============================================================ */

.hosts{
  display:flex; justify-content:center;
  gap:clamp(2rem,8vw,5rem);
}
.host{ text-align:center; min-width:0; }
.host .portrait{
  position:relative;
  width:clamp(7.5rem,24vw,10rem);
  aspect-ratio:1;
  margin:0 auto 1.1rem;
  border-radius:50%;
  overflow:hidden;
  border:1px solid var(--gold-dim);
  background:radial-gradient(circle at 50% 30%, rgba(var(--gold-rgb),.12), rgba(var(--gold-rgb),.03));
  box-shadow:0 0 0 6px rgba(var(--gold-rgb),.05);
}
.host .portrait::after{
  content:attr(data-initials);
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.8rem,4vw,2.4rem);
  letter-spacing:.06em;
  color:var(--gold-soft);
}
.host .portrait img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.88) contrast(1.02);
}
.host .portrait img[hidden]{ display:none; }
.host .nm{ font-family:var(--serif); font-size:clamp(1.2rem,1rem + .7vw,1.5rem); color:var(--cream); line-height:1.3; }
.tm__body{ margin:2.4rem auto 0; max-width:34rem; }
.tm__cta{ margin-top:2rem; }
.tm__cta p{ font-size:.95rem; color:var(--cream-faint); font-style:italic; }
.tm__cta .tm__addr{ margin-top:1rem; font-style:normal; font-size:1rem; letter-spacing:.02em; }

/* ============================================================
   RSVP FORM
   ============================================================ */

.form{ margin-top:clamp(2rem,5vh,3rem); }

.field{ margin:0 0 2rem; padding:0; border:0; min-width:0; }
.field--last{ margin-bottom:0; }

.field > label,
.legend{
  display:block;
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.75rem; padding:0;
}
.opt{ color:var(--cream-faint); letter-spacing:.1em; text-transform:none; font-size:.82rem; }

input[type=text], input[type=email], input[type=tel], textarea{
  width:100%;
  background:#fffdf9;
  border:1px solid rgba(var(--gold-rgb),.32);
  border-radius:0;
  color:var(--cream);
  font-family:var(--serif);
  font-size:1.25rem;
  font-weight:400;
  padding:.85rem 1.1rem;
  min-height:3.4rem;
  transition:border-color .3s var(--ease), background .3s var(--ease);
  -webkit-appearance:none;
}
textarea{ resize:vertical; min-height:5.6rem; line-height:1.55; }
input::placeholder, textarea::placeholder{ color:rgba(var(--cream-rgb),.5); font-style:italic; }
input:focus, textarea:focus{ outline:none; border-color:var(--gold); background:#fff; }
input[readonly]{ background:transparent; color:var(--cream-faint); cursor:default; }   /* the email of a signed-in guest */
input:focus-visible, textarea:focus-visible{ box-shadow:0 0 0 1px var(--gold); }
input[aria-invalid="true"], textarea[aria-invalid="true"]{ border-color:var(--red); }

.err{ display:none; margin-top:.5rem; font-size:.9rem; color:var(--err); }
.err.show{ display:block; }

.row{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
@media (max-width:640px){ .row{ grid-template-columns:1fr; gap:0; } }

.choices{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.choices--list{ grid-template-columns:1fr; gap:.55rem; }
@media (max-width:460px){ .choices{ grid-template-columns:1fr; } }
/* yes / maybe / no: always three on one row, even on phones */
.choices.choices--three{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.choices--three .choice span{ min-height:3.8rem; padding:.7rem .5rem; }
.choices--three .choice b{ font-size:clamp(1.05rem,1rem + .3vw,1.25rem); }

.choice{ position:relative; display:block; }
.choice input{ position:absolute; opacity:0; width:1px; height:1px; }
.choice span{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.25rem; min-height:5.2rem; padding:1rem .9rem;
  border:1px solid rgba(var(--gold-rgb),.22);
  background:rgba(255,253,248,.7);
  cursor:pointer; text-align:center;
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.choice span:hover{ border-color:var(--gold-dim); }
.choice b{ font-family:var(--serif); font-weight:400; font-size:1.35rem; color:var(--cream); line-height:1.2; }
.choice em{ font-style:normal; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-faint); }
.choice input:checked + span{
  border-color:var(--gold);
  background:rgba(var(--gold-rgb),.11);
  box-shadow:inset 0 0 0 1px var(--gold-dim);
}
.choice input:checked + span b{ color:var(--gold); }
.choice input:focus-visible + span{ outline:2px solid var(--gold-soft); outline-offset:2px; }

.choices--list .choice span{
  flex-direction:row; justify-content:space-between; align-items:baseline;
  min-height:3.6rem; padding:.8rem 1.2rem; text-align:left; gap:1rem; flex-wrap:wrap;
}
.choices--list .choice b{ font-size:1.25rem; }
.choices--list .choice em{ letter-spacing:.08em; text-transform:none; font-size:.9rem; font-style:italic; font-family:var(--serif); }

/* checkbox */
.check{ position:relative; display:block; cursor:pointer; }
.check input{ position:absolute; opacity:0; width:1px; height:1px; }
.check span{
  display:block; position:relative;
  padding:1rem 1.2rem 1rem 3.6rem;
  border:1px solid rgba(var(--gold-rgb),.22);
  background:rgba(255,253,248,.7);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.check span::before{
  content:""; position:absolute; left:1.2rem; top:1.25rem;
  width:1.25rem; height:1.25rem; border:1px solid var(--gold-dim); background:var(--ink);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.check span::after{
  content:""; position:absolute; left:1.62rem; top:1.4rem;
  width:.38rem; height:.72rem; border:solid var(--ink); border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0); transition:transform .3s var(--ease);
}
.check b{ display:block; font-family:var(--serif); font-weight:400; font-size:1.25rem; color:var(--cream); line-height:1.3; }
.check em{ display:block; font-style:normal; font-size:.92rem; color:var(--cream-faint); margin-top:.25rem; }
.check input:checked + span{ border-color:var(--gold); background:rgba(var(--gold-rgb),.09); }
.check input:checked + span::before{ background:var(--gold-soft); border-color:var(--gold-soft); }
.check input:checked + span::after{ transform:rotate(45deg) scale(1); }
.check input:focus-visible + span{ outline:2px solid var(--gold-soft); outline-offset:2px; }

.subnote{ margin:.8rem 0 0; font-size:.92rem; line-height:1.6; color:var(--cream-faint); font-style:italic; }
.hint{ margin:.5rem 0 0; font-size:.88rem; color:var(--cream-faint); }
.sublabel{
  display:block; margin:1.2rem 0 .6rem;
  font-size:.92rem; color:var(--cream-dim);
}

/* dietary tags */
.tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.tag{ position:relative; display:inline-block; }
.tag input{ position:absolute; opacity:0; width:1px; height:1px; }
.tag span{
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:2.75rem; padding:.45rem 1rem;
  border:1px solid rgba(var(--gold-rgb),.26); border-radius:999px;
  font-size:.95rem; color:var(--cream-dim); cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.tag span::before{
  content:""; width:.5rem; height:.5rem; border-radius:50%;
  border:1px solid var(--gold-dim); transition:background .3s var(--ease), border-color .3s var(--ease);
}
.tag span:hover{ border-color:var(--gold-dim); color:var(--cream); }
.tag input:checked + span{ border-color:var(--gold); background:rgba(var(--gold-rgb),.12); color:var(--cream); }
.tag input:checked + span::before{ background:var(--gold-soft); border-color:var(--gold-soft); }
.tag input:focus-visible + span{ outline:2px solid var(--gold-soft); outline-offset:2px; }

/* Friday / Sunday: yes, maybe, no */
.seg{ border-top:1px solid var(--gold-faint); }
.seg__row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.9rem 0; border-bottom:1px solid var(--gold-faint);
}
.seg__label{ font-family:var(--serif); font-size:1.2rem; color:var(--cream); }
.seg__opts{ display:inline-flex; border:1px solid rgba(var(--gold-rgb),.26); }
.seg__opts label{ position:relative; }
.seg__opts input{ position:absolute; opacity:0; width:1px; height:1px; }
.seg__opts span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:4.6rem; min-height:2.75rem; padding:.4rem .9rem;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-faint);
  cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease);
}
.seg__opts label + label span{ border-left:1px solid rgba(var(--gold-rgb),.2); }
.seg__opts span:hover{ color:var(--cream); }
.seg__opts input:checked + span{ background:linear-gradient(180deg,var(--btn-top),var(--btn-bot)); color:var(--btn-fg); }
.seg__opts input:focus-visible + span{ outline:2px solid var(--gold-soft); outline-offset:-2px; }
@media (max-width:460px){
  .seg__opts{ width:100%; }
  .seg__opts label{ flex:1; }
  .seg__opts span{ width:100%; min-width:0; }
}

.plusbox{
  border-left:2px solid var(--gold-dim);
  background:rgba(var(--gold-rgb),.05);
  padding:1.5rem clamp(1rem,3vw,1.6rem);
  margin-bottom:2rem;
}
.plusbox__tag{ font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin:0 0 1.2rem; }

.reveal-wrap{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease), opacity .35s var(--ease);
  opacity:0; visibility:hidden;
}
.reveal-wrap.open{ grid-template-rows:1fr; opacity:1; visibility:visible; }
.reveal-wrap > div{ overflow:hidden; min-height:0; }
.reveal-wrap.open > div{ overflow:visible; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__send{ margin-top:2.6rem; }
.formnote{ font-size:.9rem; color:var(--cream-faint); text-align:center; margin-top:1.3rem; }
.status{
  margin-top:1.4rem; padding:1rem 1.2rem;
  border:1px solid var(--red); color:var(--err);
  font-size:.98rem; line-height:1.6;
  display:none;
}
.status.show{ display:block; }

.done{
  display:none; text-align:center;
  padding:clamp(3rem,7vh,4.6rem) clamp(1.2rem,4vw,2.6rem);
  border:1px solid var(--gold-dim);
  background:rgba(var(--gold-rgb),.05);
}
.done.show{ display:block; animation:fadeup .8s var(--ease) both; }
.done:focus{ outline:none; }
.done__seal{ width:6.5rem; height:auto; margin:0 auto 1.4rem; color:var(--gold-soft); display:block; }
.done h2{ font-size:clamp(2rem,1.5rem + 2vw,3rem); }
.done #doneText{ max-width:28rem; margin:1.1rem auto 0; }
.done__next{ list-style:none; padding:0; margin:2rem auto 0; max-width:26rem; text-align:left; border-top:1px solid var(--gold-faint); }
.done__next li{ padding:.8rem 0 .8rem 2.2rem; border-bottom:1px solid var(--gold-faint); position:relative; color:var(--cream-dim); }
.done__next li::before{
  content:counter(list-item); position:absolute; left:0; top:.72rem;
  font-family:var(--serif); font-style:italic; font-size:1.25rem; color:var(--gold);
}
.done__actions{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2.2rem; }

@keyframes fadeup{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }

/* ============================================================
   FAQ
   ============================================================ */

.faq__list{ border-top:1px solid var(--gold-faint); }
.faq__item{ border-bottom:1px solid var(--gold-faint); }
.faq__item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
  padding:1.4rem 0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.3rem,1.15rem + .55vw,1.6rem); line-height:1.3;
  color:var(--cream);
  transition:color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--gold-soft); }
.faq__item summary i{
  flex:0 0 auto; position:relative; width:1.9rem; height:1.9rem;
  border:1px solid var(--gold-dim); border-radius:50%;
  transition:transform .45s var(--ease), background .3s var(--ease);
}
.faq__item summary i::before, .faq__item summary i::after{
  content:""; position:absolute; left:50%; top:50%; width:.7rem; height:1px; background:var(--gold-soft);
  transform:translate(-50%,-50%);
}
.faq__item summary i::after{ transform:translate(-50%,-50%) rotate(90deg); transition:transform .45s var(--ease); }
.faq__item[open] summary i{ background:rgba(var(--gold-rgb),.12); }
.faq__item[open] summary i::after{ transform:translate(-50%,-50%) rotate(0deg); }
.faq__a{ padding:0 3.2rem 1.6rem 0; }
.faq__item[open] .faq__a{ animation:fadeup .5s var(--ease) both; }
.faq__a p{ margin:0 0 .8rem; }
.faq__a .faq__meme{ margin:.2rem 0 1rem; }
.faq__meme img{ display:block; width:100%; max-width:30rem; height:auto; border:1px solid var(--gold-faint); }
.faq__more{ text-align:center; margin-top:2.6rem; font-size:.98rem; }

/* ============================================================
   FOOTER
   ============================================================ */

.foot{
  text-align:center;
  padding:clamp(4.5rem,10vh,7rem) var(--gutter) clamp(3rem,6vh,4rem);
  border-top:1px solid var(--gold-faint);
  background:var(--ink-3);
}
.foot__seal{ width:clamp(7rem,16vw,8.5rem); height:auto; margin:0 auto 2rem; display:block; color:var(--gold); }
.foot .sig{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);
  color:var(--gold-soft);
}
.foot .fine{
  font-size:.74rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--cream-faint); margin-top:1.5rem;
}
.foot .fine--sub{ margin-top:.5rem; color:rgba(var(--cream-rgb),.56); }
.foot .credit{ font-size:.82rem; color:rgba(var(--cream-rgb),.52); margin-top:2.4rem; }
.foot__again{ margin-top:2rem; }
.foot__again[hidden]{ display:none; }
.foot__again button{
  appearance:none; background:none; border:0; cursor:pointer; padding:.6rem .4rem; min-height:2.75rem;
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--gold);
  text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:1px;
}
.foot__again button:hover{ color:var(--cream); }

/* ============================================================
   GUEST GATE
   ============================================================ */

.gated body{ overflow:hidden; background:#1a1510; }   /* dark from the first paint, before the landing page shows */
.gated .nav, .gated .hero, .gated main, .gated .foot, .gated .skip{ visibility:hidden; }
/* Centred when it fits. On a short screen the whole gate scrolls,
   never a box inside it, and the top of the seal is never cut off. */
.gate{
  position:fixed; inset:0; z-index:80;
  display:flex;
  padding:clamp(1.5rem,5vh,3rem) var(--gutter);
  overflow-x:hidden; overflow-y:auto;
  background:var(--ink);
  isolation:isolate;
  transition:opacity 1s var(--ease), visibility 1s var(--ease);
}
.gate[hidden]{ display:none; }
.gate__inner{ margin:auto; width:100%; }
/* fixed layers do not add scroll room, so the blur can overhang the edges */
.gate::before{
  content:""; position:fixed; inset:0; z-index:-2; transform:scale(1.12);
  background:url("../img/hero-skagerack.webp") 30% 50% / cover no-repeat;
  filter:blur(22px) saturate(.8) sepia(.2);
  opacity:.6;
}
.gate::after{
  content:""; position:fixed; inset:0; z-index:-1;
  background:radial-gradient(ellipse 70% 60% at 50% 45%, rgba(var(--ink-rgb),.55), rgba(var(--ink-rgb),.94));
}
.gate.is-leaving{ opacity:0; visibility:hidden; }
/* while the intro plays over the page, the page stays still */
.intro-on body{ overflow:hidden; }
.gate__inner{ max-width:30rem; text-align:center; }
.gate__seal{ width:clamp(5rem,12vh,6.5rem); height:auto; margin:0 auto clamp(1rem,3vh,1.8rem); display:block; color:var(--gold-soft); }
.gate__title{
  font-family:var(--serif); font-weight:300; font-size:clamp(2.8rem,1.6rem + 3vw,4.2rem);
  line-height:1; margin:.7rem 0 1rem; color:var(--cream);
}
.gate__body{ margin:0 auto clamp(1.2rem,3vh,1.8rem); max-width:24rem; }
.gate__form{ display:flex; gap:.6rem; }
.gate__form input{ flex:1; min-width:0; text-align:center; letter-spacing:.06em; }
.gate__form .btn{ padding-inline:1.6rem calc(1.6rem + .26em); }
.gate__form.shake{ animation:shake .45s var(--ease); }
@keyframes shake{ 20%,60%{ transform:translateX(-7px); } 40%,80%{ transform:translateX(7px); } }
.gate__err{ min-height:1.6em; margin:.7rem 0 0; color:var(--err); font-size:.95rem; }
.gate__lost{ font-size:.9rem; color:var(--cream-faint); margin-top:.6rem; }
/* the word box and the sign-in email box: light text on the dark landing page */
.gate input[type=text], .gate input[type=email]{ background:rgba(255,248,236,.06); border-color:rgba(var(--gold-rgb),.45); color:var(--cream); }
.gate input[type=text]:focus, .gate input[type=email]:focus{ background:rgba(255,248,236,.1); border-color:var(--gold); }
.gate__open{ min-width:min(100%,17rem); }
/* "Turn your sound on": a framed note above the button, the speaker gently sounding */
.gate__sound{
  display:flex; align-items:center; gap:.9rem; text-align:left;
  max-width:24rem; margin:0 auto clamp(1.1rem,3vh,1.6rem); padding:.8rem 1.1rem;
  border:1px solid var(--gold-dim); background:rgba(var(--gold-rgb),.07);
  color:var(--gold-soft);
}
.gate__sound p{ margin:0; display:flex; flex-direction:column; gap:.2rem; }
.gate__sound strong{
  font-family:var(--sans); font-weight:500; font-size:.8rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cream);
}
.gate__sound span{ font-family:var(--serif); font-style:italic; font-size:1.02rem; line-height:1.3; color:var(--cream-dim); }
.gate__speaker{ flex:none; color:var(--gold-soft); }
.gate__speaker .w1, .gate__speaker .w2{ animation:sound 1.6s ease-in-out infinite; }
.gate__speaker .w2{ animation-delay:.25s; }
@keyframes sound{ 0%,100%{ opacity:.25; } 45%{ opacity:1; } }
.gate__sound[hidden], .gate__lost[hidden], .gate__form[hidden], .gate__open[hidden]{ display:none; }
/* the landing page rises in, line by line */
.gate__inner > *{ animation:gateIn 1.1s var(--ease-out) both; }
.gate__inner > :nth-child(2){ animation-delay:.12s; }
.gate__inner > :nth-child(3){ animation-delay:.22s; }
.gate__inner > :nth-child(4){ animation-delay:.34s; }
.gate__inner > :nth-child(n+5){ animation-delay:.46s; }
@keyframes gateIn{ from{ opacity:0; transform:translateY(18px); filter:blur(6px); } }
.lang--gate{ display:inline-flex; margin-top:clamp(1rem,3vh,1.6rem); }
.lang--gate button{ padding-inline:1rem; letter-spacing:.12em; }
@media (max-width:420px){
  .gate__form{ flex-direction:column; }
}

/* the slow-turning seal ring */
.seal__ring{ transform-origin:100px 100px; animation:spin 80s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- scroll reveal ---------- */
/* Hidden only once JS has confirmed it can reveal things again. */
.js-anim [data-anim]{ opacity:0; transform:translateY(28px); }
.js-anim [data-anim].in{
  opacity:1; transform:none;
  transition:opacity 1s var(--ease), transform 1.1s var(--ease-out);
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .scrollcue i, .board-head__lamp, .seal__ring{ animation:none; }
  .js-anim [data-anim]{ opacity:1; transform:none; transition:none; }
  .js .hero [data-rise], .js .hero__frame{ opacity:1 !important; transform:none !important; filter:none !important; }
  .js .hero .scrollcue[data-rise]{ transform:translateX(-50%) !important; }
  .js .hero .hero__amp[data-rise]{ transform:translateY(-.08em) !important; }
  .hero__bg{ transform:none !important; transition:none; }
  .venue__media img{ transform:none; }
  .walk__draw{ stroke-dashoffset:0; transition:none; }
  .walk__dot{ display:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}