/* ==========================================================================
   Angelica & Peter
   Palette taken from the wedding logo (Figma node 2:39). The three brand
   values are exact; the rest are derived to sit with them.

     --ivory  #FFFDFA   the logo frame's ground
     --rose   #BA9192   the mauve R
     --blush  #EEB9B8   the blush A

   Note on --rose: at 2.74:1 on ivory it is too low-contrast for small text,
   so it is used decoratively (rules, marks, large display accents) and
   --rose-deep (5.26:1) carries eyebrows, links and small caps instead.
   ========================================================================== */

:root{
  --ivory:      #FFFDFA;   /* brand — exact */
  --ivory-warm: #FBF4F1;
  --blush:      #EEB9B8;   /* brand — exact */
  --blush-light:#F7E0DF;   /* the same hue lifted, for accents over photographs */
  --rose:       #BA9192;   /* brand — exact, decorative only */
  --rose-deep:  #8A6062;   /* accent text on ivory — 5.26:1 */
  --night:      #43302F;   /* deep plum: footer, room-block callout */
  --ink:        #2E2626;   /* 14.6:1 */
  --ink-soft:   #5A4B4B;   /*  8.1:1 */
  --muted:      #8A7A79;   /*  4.0:1 */
  --line:       #EADCD9;

  --serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', 'Futura', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --pad:      clamp(1.25rem, 5vw, 5rem);
  --section:  clamp(5rem, 12vw, 10rem);
  --maxw:     1240px;
  --ease:     cubic-bezier(.22,.61,.36,1);

  --nav-h:    72px;
  --draft-h:  0px;   /* main.js raises this when DRAFT_MODE is on */

  /* Loading screen timing — the only numbers worth touching.
     The mark plays for --loader-run, holds briefly, then the screen fades
     over --loader-fade, revealing the hero beneath. Total ≈ 5.15s. */
  --loader-run:  3s;
  --loader-fade: 2.1s;
  --loader-hold: .05s;
}

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

/* Must beat the display rules further down. */
[hidden]{ display:none !important; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + var(--draft-h));
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

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

/* ----- shared type ------------------------------------------------------ */
.display{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.4rem,6vw,4.4rem);
  line-height:1.04;
  letter-spacing:.005em;
  margin:.1em 0 .35em;
}
.display em{ font-style:italic; color:var(--rose-deep); }

.eyebrow{
  font-family:var(--sans);
  font-size:.66rem;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--rose-deep);
  margin:0 0 1.1em;
}

.lede{
  font-family:var(--serif);
  font-size:clamp(1.14rem,1.6vw,1.42rem);
  line-height:1.72;
  color:var(--ink-soft);
  font-weight:300;
  max-width:46ch;
}

/* ----- buttons ---------------------------------------------------------- */
.btn{
  display:inline-block;
  margin:.5rem .55rem .5rem 0;
  padding:.95em 2.1em;
  border:1px solid var(--rose-deep);
  border-radius:0;
  background:transparent;
  color:var(--rose-deep);
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn:hover,.btn:focus-visible{ background:var(--rose-deep); color:var(--ivory); }
.btn--solid{ background:var(--night); border-color:var(--night); color:var(--ivory); }
.btn--solid:hover,.btn--solid:focus-visible{ background:var(--rose-deep); border-color:var(--rose-deep); }
.btn--ghost{ border-color:var(--line); color:var(--ink-soft); }
.btn--ghost:hover,.btn--ghost:focus-visible{ background:var(--ink); border-color:var(--ink); color:var(--ivory); }

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

/* ----- scroll reveal ---------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 1.05s var(--ease), transform 1.05s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ==========================================================================
   THE MARK  —  Figma node 2:39
   Two vector layers on a 3490 × 4075 frame. All offsets below are that
   frame's coordinates expressed as percentages, so the mark scales without
   drifting:

     mauve R  (2:56)  x 716  y 680  w 2110  h 2410
     blush A  (2:42)  x 664  y 835  w 2087  h 2560

   The inner inset on each layer is Figma's own overdraw and is preserved
   rather than rounded away — it is what keeps the two strokes meeting.
   ========================================================================== */
.mark{
  display:block;                 /* rendered as a <span> in nav and footer */
  position:relative;
  aspect-ratio:3490 / 4075;
  flex:none;
}
.mark__layer{ display:block; position:absolute; }
.mark__layer img{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.mark__layer--r{ left:20.5158%; top:16.6871%; width:60.4585%; height:59.1411%; }
.mark__layer--r img{ inset:-0.2% -0.24% -0.21% -0.24%; }

.mark__layer--a{ left:19.0258%; top:20.4908%; width:59.7994%; height:62.8221%; }
.mark__layer--a img{ inset:-0.29% -0.24% 0 -0.24%; }

/* Static sizes for the mark outside the loader. */
.mark--nav{ height:34px; }
.mark--foot{ height:96px; margin:0 auto 1.4rem; }

/* ==========================================================================
   LOADING SCREEN
   The motion is Figma's, translated from absolute pixels to percentages of
   each layer's own box (-2000px ÷ 2410 = -82.9876%; 2000px ÷ 2087 =
   95.8313%) so it reads identically at any rendered size.

   The overlay clears itself with CSS alone — no JavaScript is required to
   dismiss it, so a script failure can never leave a guest staring at it.
   ========================================================================== */
.loader{
  position:fixed; inset:0; z-index:300;
  /* A warm vignette rather than flat ivory — gives the mark somewhere to sit. */
  background:radial-gradient(125% 100% at 50% 42%,
              #FFFFFF 0%, var(--ivory) 42%, #F4E9E6 100%);
  display:grid; place-items:center;
  animation:loaderOut var(--loader-fade) cubic-bezier(.55,0,.85,.35)
            calc(var(--loader-run) + var(--loader-hold)) forwards;
}
.loader .mark{
  height:clamp(220px, 44vmin, 440px);
  /* Exit: the mark pushes toward the viewer as the screen dissolves, so the
     hand-off reads as moving *through* the logo rather than past it. */
  animation:markExit var(--loader-fade) cubic-bezier(.45,0,.75,.1)
            calc(var(--loader-run) + var(--loader-hold)) forwards;
}
.loader .mark__layer{ will-change:translate, opacity, filter; }

@keyframes loaderOut{
  to{ opacity:0; visibility:hidden; }
}
@keyframes markExit{
  from{ scale:1; }
  to  { scale:1.16; }
}

/* A warm halo blooms as the two letters lock together. */
.loader .mark::before{
  content:'';
  position:absolute; inset:-22%;
  background:radial-gradient(circle at 50% 50%,
              rgba(238,185,184,.42) 0%, rgba(238,185,184,.16) 38%, transparent 66%);
  animation:markBloom var(--loader-run) ease-out both;
}
@keyframes markBloom{
  0%,46%{ opacity:0; scale:.7; }
  80%   { opacity:1; scale:1; }
  100%  { opacity:.7; scale:1.03; }
}

/* --------------------------------------------------------------------------
   Figma's gesture — R from above, A from the right — with weight added.

   Three changes from the literal export, all in service of drama:
     · opacity resolves early (14%) so the travel is *seen*, not just its
       arrival. The original ease-in kept them near-invisible while moving.
     · the travel starts much further out and carries motion blur that
       resolves to sharp, which is what sells speed.
     · each letter overshoots its mark and settles back, and the A is
       delayed behind the R so the two read as choreography rather than
       one object sliding.
   Both still land exactly on 0 — the interlock is unchanged.
   -------------------------------------------------------------------------- */

/* kf_2_56 — the mauve R falls in from above and lands first. */
@keyframes markR_fade{
  0%   { animation-timing-function:cubic-bezier(.2,.7,.3,1); opacity:0; }
  14%  { opacity:1; }
  100% { opacity:1; }
}
@keyframes markR_move{
  0%   { animation-timing-function:cubic-bezier(.16,.85,.3,1);
         translate:0 -168%; filter:blur(11px); }
  52%  { animation-timing-function:cubic-bezier(.36,0,.28,1);
         translate:0 4.2%;  filter:blur(0px); }   /* overshoots past home */
  66%  { animation-timing-function:cubic-bezier(.36,0,.28,1);
         translate:0 -1.1%; }                     /* settles back */
  78%  { translate:0 0; }
  100% { translate:0 0; filter:blur(0px); }
}

/* kf_2_42 — the blush A sweeps in from the right, a beat later. */
@keyframes markA_fade{
  0%,14% { animation-timing-function:cubic-bezier(.2,.7,.3,1); opacity:0; }
  30%    { opacity:1; }
  100%   { opacity:1; }
}
@keyframes markA_move{
  0%,14% { animation-timing-function:cubic-bezier(.16,.85,.3,1);
           translate:172% 0; filter:blur(11px); }
  66%    { animation-timing-function:cubic-bezier(.36,0,.28,1);
           translate:-3.6% 0; filter:blur(0px); }
  80%    { animation-timing-function:cubic-bezier(.36,0,.28,1);
           translate:1.1% 0; }
  90%    { translate:0 0; }
  100%   { translate:0 0; filter:blur(0px); }
}

.loader .mark__layer--r{
  animation:markR_fade var(--loader-run) linear both,
            markR_move var(--loader-run) linear both;
}
.loader .mark__layer--a{
  animation:markA_fade var(--loader-run) linear both,
            markA_move var(--loader-run) linear both;
}

/* Already seen this session — don't make them sit through it again. */
html.seen-loader .loader{ display:none; }

/* No animation wanted: skip the whole screen rather than hold them on a
   static one for two seconds. */
@media (prefers-reduced-motion:reduce){
  .loader{ display:none; }
}

/* ==========================================================================
   DRAFT BAR
   ========================================================================== */
.draft-bar{
  position:fixed; inset:0 0 auto 0; z-index:120;
  background:var(--night); color:var(--ivory);
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  text-align:center; padding:.55rem 1rem;
  height:var(--draft-h);
  display:flex; align-items:center; justify-content:center;
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; top:var(--draft-h); left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding:0 var(--pad);
  height:var(--nav-h);
  color:var(--ivory);
  transition:background .5s var(--ease), color .5s var(--ease),
             box-shadow .5s var(--ease), height .5s var(--ease);
}
.nav.is-solid{
  background:rgba(255,253,250,.94);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  color:var(--ink);
  box-shadow:0 1px 0 var(--line);
  height:64px;
}

.nav__mark{
  font-family:var(--serif);
  font-size:1.16rem;
  letter-spacing:.24em;
  text-decoration:none;
  white-space:nowrap;
}

.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.1rem); }
.nav__links a{
  position:relative;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.4rem 0;
  opacity:.88;
  transition:opacity .35s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:currentColor; opacity:.55;
  transition:right .45s var(--ease);
}
.nav__links a:hover, .nav__links a.is-active{ opacity:1; }
.nav__links a:hover::after, .nav__links a.is-active::after{ right:0; }

.nav__cta{
  border:1px solid currentColor;
  padding:.62em 1.5em !important;
  opacity:1 !important;
}
.nav__cta::after{ display:none !important; }
.nav__cta:hover{ background:var(--rose-deep); border-color:var(--rose-deep); color:var(--ivory); }

.nav__toggle{
  display:none;
  width:34px; height:34px;
  background:none; border:0; cursor:pointer;
  padding:0;
}
.nav__toggle span{
  display:block; height:1px; background:currentColor; margin:7px 0;
  transition:transform .45s var(--ease), opacity .3s;
}
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{  transform:translateY(-4px) rotate(-45deg); }

@media (max-width:900px){
  .nav__toggle{ display:block; }
  .nav__links{
    position:fixed; inset:0;
    flex-direction:column; justify-content:center;
    gap:1.6rem;
    background:var(--ivory);
    color:var(--ink);
    opacity:0; visibility:hidden;
    transition:opacity .5s var(--ease), visibility .5s;
  }
  .nav__links.is-open{ opacity:1; visibility:visible; }
  .nav__links a{ font-size:.86rem; letter-spacing:.26em; }
  .nav.is-open-menu{ color:var(--ink); }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
  padding:calc(var(--nav-h) + var(--draft-h)) var(--pad) 5rem;
}

.hero__stage{ position:absolute; inset:0; }
.hero__slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center 42%;
  opacity:0;
  transform:scale(1.06);
  transition:opacity 2.6s var(--ease);
  will-change:opacity, transform;
}
.hero__slide.is-on{
  opacity:1;
  animation:kenburns 13s linear forwards;
}
@keyframes kenburns{ from{ transform:scale(1.045); } to{ transform:scale(1.12); } }

.hero__scrim{
  position:absolute; inset:0;
  /* Weighted at the top so the navigation stays legible over a bright sky. */
  background:
    linear-gradient(to bottom, rgba(28,24,19,.54) 0%, rgba(28,24,19,.30) 12%,
                    rgba(28,24,19,.08) 34%, rgba(28,24,19,.16) 62%,
                    rgba(28,24,19,.52) 100%),
    radial-gradient(120% 90% at 50% 55%, transparent 30%, rgba(28,24,19,.34) 100%);
}

.hero__inner{ position:relative; z-index:2; max-width:1000px; }

.hero__eyebrow{
  font-size:.66rem; letter-spacing:.42em; text-transform:uppercase;
  color:rgba(255,255,255,.86);
  margin:0 0 clamp(1.4rem,3vw,2.4rem);
  text-shadow:0 1px 22px rgba(0,0,0,.4);
}

.hero__names{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(3.1rem,12vw,8.4rem);
  line-height:.98;
  letter-spacing:.012em;
  margin:0;
  text-shadow:0 2px 40px rgba(0,0,0,.34);
}
.hero__amp{
  display:block;
  font-style:italic;
  font-size:.42em;
  color:var(--blush-light);
  margin:.12em 0;
  opacity:.94;
}
.hero__name .ch{
  display:inline-block;
  opacity:0;
  transform:translateY(.5em);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.hero__name .ch.is-in{ opacity:1; transform:none; }

.hero__rule{
  display:flex; align-items:center; justify-content:center; gap:.85rem;
  margin:clamp(1.6rem,3.4vw,2.6rem) auto clamp(1.2rem,2.4vw,1.8rem);
  width:min(340px,70%);
}
.hero__rule i{ flex:1; height:1px; background:rgba(255,255,255,.55); }
.hero__rule b{ width:5px; height:5px; transform:rotate(45deg); background:var(--blush-light); }

.hero__date{
  font-family:var(--serif);
  font-size:clamp(1rem,1.7vw,1.34rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.94);
  margin:0;
  text-shadow:0 1px 24px rgba(0,0,0,.42);
}
.hero__date{ font-weight:600; line-height:1.9; }
.hero__line{ display:block; }

.hero__scroll{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  z-index:2; width:1px; height:62px;
  background:rgba(255,255,255,.3);
  overflow:hidden;
}
.hero__scroll span{
  position:absolute; inset:0;
  background:var(--blush);
  animation:trickle 2.6s var(--ease) infinite;
}
@keyframes trickle{
  0%{ transform:translateY(-100%); }
  55%{ transform:translateY(0); }
  100%{ transform:translateY(100%); }
}

/* ==========================================================================
   COUNTDOWN
   ========================================================================== */
.count{
  background:var(--ivory-warm);
  border-bottom:1px solid var(--line);
  padding:clamp(2.4rem,5vw,3.6rem) var(--pad);
}
.count__list{
  list-style:none; margin:0 auto; padding:0;
  max-width:760px;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.count__list li{
  text-align:center;
  border-left:1px solid var(--line);
}
.count__list li:first-child{ border-left:0; }
.count__n{
  display:block;
  font-family:var(--serif);
  font-size:clamp(1.9rem,4.6vw,3.1rem);
  font-weight:300; line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--night);
}
.count__l{
  display:block; margin-top:.7em;
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted);
}

/* ==========================================================================
   SECTION SCAFFOLD
   ========================================================================== */
.section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:var(--section) var(--pad);
}
.section__head{ text-align:center; max-width:60ch; margin:0 auto clamp(3rem,6vw,5rem); }
.section__sub{ color:var(--muted); font-family:var(--serif); font-size:1.16rem; font-style:italic; margin:0; }

/* ==========================================================================
   INVITATION
   ========================================================================== */
.invite{
  max-width:var(--maxw);
  margin:0 auto;
  padding:var(--section) var(--pad);
}
.invite__grid{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:center;
}
.invite__figure{ margin:0; position:relative; }
.invite__figure img{
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;
  filter:saturate(.96);
}
.invite__figure::after{
  content:''; position:absolute; inset:14px;
  border:1px solid rgba(255,255,255,.34);
  pointer-events:none;
}
.invite__figure figcaption{
  margin-top:1rem;
  font-size:.63rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
.invite__meta{
  font-family:var(--serif);
  font-size:1.06rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink);
  margin:2.2rem 0 2rem;
  padding-left:1.2rem;
  border-left:1px solid var(--rose-deep);
  line-height:2;
}

@media (max-width:820px){
  .invite__grid{ grid-template-columns:1fr; }
  .invite__figure{ order:2; }
}

/* ==========================================================================
   STORY
   ========================================================================== */
.story__list{ display:grid; gap:clamp(3.5rem,8vw,7rem); }

.story__item{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.story__item:nth-child(even) .story__figure{ order:2; }

.story__figure{ margin:0; position:relative; overflow:hidden; }
.story__figure img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  transition:transform 1.4s var(--ease);
}
.story__item:hover .story__figure img{ transform:scale(1.035); }

.story__year{
  font-size:.63rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--rose-deep); margin:0 0 .9em;
}
.story__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.75rem,3.4vw,2.5rem);
  line-height:1.14; margin:0 0 .7em;
}
.story__text{ color:var(--ink-soft); max-width:46ch; margin:0 0 1em; }
.story__text:last-child{ margin-bottom:0; }

.story__num{
  display:block;
  font-family:var(--serif); font-style:italic;
  font-size:3.4rem; line-height:1;
  color:var(--blush);
  margin-bottom:.2em;
}

/* Two columns get cramped before the layout technically breaks — stack early. */
@media (max-width:860px){
  .story__item{ grid-template-columns:1fr; }
  .story__item:nth-child(even) .story__figure{ order:0; }
}

/* ==========================================================================
   WEDDING PARTY
   ========================================================================== */
.party__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:clamp(2.5rem,5vw,4rem) clamp(1.5rem,3vw,2.5rem);
  max-width:1080px; margin:0 auto;
}
.pcard{ text-align:center; }
.pcard__photo{
  width:min(170px,60%); aspect-ratio:1; margin:0 auto 1.4rem;
  border-radius:50%; overflow:hidden;
  background:var(--ivory-warm); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.pcard__photo img{ width:100%; height:100%; object-fit:cover; }
.pcard__photo span{
  font-family:var(--serif); font-style:italic; font-size:3rem; color:var(--rose);
}
.pcard__role{
  font-size:.63rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--rose-deep); margin:0 0 .6em;
}
.pcard__name{
  font-family:var(--serif); font-weight:300;
  font-size:1.6rem; line-height:1.2; margin:0 0 .5em;
}
.pcard__bio{ color:var(--ink-soft); font-size:.95rem; max-width:30ch; margin:0 auto; }

/* ==========================================================================
   PHOTO BANDS
   ========================================================================== */
/* Text sits in the lower-left rather than dead centre — it keeps the words
   off whatever the crop happens to put in the middle, usually a face. */
.band{
  position:relative;
  min-height:clamp(300px,52vh,520px);
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  display:flex; align-items:flex-end; justify-content:flex-start;
  text-align:left;
  color:#fff;
  padding:clamp(3rem,8vw,5rem) var(--pad);
}
.band--tall{ min-height:clamp(380px,68vh,700px); }
.band::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(28,24,19,.68) 0%, rgba(28,24,19,.34) 38%, rgba(28,24,19,.10) 72%, rgba(28,24,19,.16) 100%);
}
.band__quote{ position:relative; z-index:1; max-width:34ch; }
.band__quote p{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.4rem,3.2vw,2.3rem);
  line-height:1.5; margin:0;
  text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.band__quote cite{
  display:block; margin-top:1.1rem;
  font-family:var(--sans); font-style:normal;
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--blush-light);
}

@media (hover:none),(max-width:820px){
  .band{ background-attachment:scroll; }
}

/* ==========================================================================
   THE DAY
   ========================================================================== */
.day__list{
  list-style:none; margin:0 auto; padding:0;
  max-width:660px;
  position:relative;
}
.day__list::before{
  content:''; position:absolute; top:.6rem; bottom:.6rem;
  left:clamp(74px,15vw,110px);
  width:1px; background:var(--line);
}
.day__item{
  display:grid;
  grid-template-columns:clamp(74px,15vw,110px) 1fr;
  gap:clamp(1.4rem,4vw,2.6rem);
  padding:clamp(1.1rem,2.6vw,1.7rem) 0;
  position:relative;
}
.day__time{
  text-align:right;
  padding-right:1.15rem;          /* keep the numerals off the rule */
  font-family:var(--serif);
  font-size:1.34rem;
  color:var(--night);
  line-height:1.2;
  white-space:nowrap;
}
.day__time sup{
  font-family:var(--sans); font-size:.5em; letter-spacing:.12em;
  text-transform:uppercase; margin-left:.25em; color:var(--muted);
  vertical-align:.5em;
}
.day__body{ position:relative; }
.day__body::before{
  content:''; position:absolute;
  left:calc(clamp(1.4rem,4vw,2.6rem) * -1 - 3.5px);
  top:.62em;
  width:7px; height:7px;
  background:var(--ivory);
  border:1px solid var(--rose-deep);
  transform:rotate(45deg);
}
.day__title{
  font-family:var(--serif); font-weight:400;
  font-size:1.36rem; margin:0 0 .18em; line-height:1.25;
}
.day__note{ margin:0; color:var(--muted); font-size:.92rem; }

/* ==========================================================================
   THE WEEKEND — three days, times optional
   ========================================================================== */
.weekend__days{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,2.6vw,2.2rem);
  align-items:start;
}
@media (max-width:820px){ .weekend__days{ grid-template-columns:1fr; } }

.wday{
  border-top:1px solid var(--line);
  padding-top:clamp(1.4rem,2.6vw,2rem);
}
.wday--lead{ border-top-color:var(--rose-deep); }

.wday__day{
  font-family:var(--serif);
  font-size:clamp(1.6rem,3vw,2.1rem);
  font-weight:300;
  margin:0 0 .1em;
  line-height:1.1;
}
.wday--lead .wday__day{ color:var(--rose-deep); }

.wday__date{
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.8em;
}

.wday__events{ list-style:none; margin:0; padding:0; }
.wday__event{ margin-bottom:1.7rem; }
.wday__event:last-child{ margin-bottom:0; }

.wday__time{
  display:block;
  font-family:var(--serif); font-size:1.15rem;
  color:var(--rose-deep); margin-bottom:.15em;
}
.wday__title{
  display:block;
  font-family:var(--serif); font-size:1.32rem; font-weight:400;
  line-height:1.25;
}
.wday__note{
  display:block; margin-top:.3em;
  color:var(--muted); font-size:.92rem;
}

.weekend__note{
  margin:clamp(2.6rem,5vw,4rem) auto 0;
  max-width:52ch; text-align:center;
  font-family:var(--serif); font-style:italic; font-size:1.06rem;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:clamp(1.6rem,3vw,2.2rem);
}

/* ==========================================================================
   DETAILS
   ========================================================================== */
.details__cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
}
.card{
  background:var(--ivory-warm);
  border:1px solid var(--line);
  padding:clamp(2rem,4vw,3rem);
  text-align:center;
}
.card__label{
  font-size:.62rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--rose-deep); margin:0 0 1.4em;
}
.card__name{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.5rem,2.6vw,2rem);
  margin:0 0 .6em; line-height:1.2;
}
.card__lines{ margin:0 0 1.2em; color:var(--ink-soft); font-size:.95rem; line-height:1.9; }
.card__time{
  font-family:var(--serif); font-style:italic;
  color:var(--rose-deep); margin:0 0 1.6em;
}
.card__map{
  display:inline-block;
  font-size:.63rem; letter-spacing:.24em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--rose-deep);
  padding-bottom:.35em;
  transition:color .35s var(--ease);
}
.card__map:hover{ color:var(--rose-deep); }

/* ----- the resort itself ------------------------------------------------ */
.venue{
  margin-top:clamp(2.2rem,4.5vw,3.4rem);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4rem);
  align-items:start;
  border-top:1px solid var(--line);
  padding-top:clamp(2.2rem,4.5vw,3.4rem);
}
@media (max-width:760px){ .venue{ grid-template-columns:1fr; } }

.venue__name{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.7rem,3.2vw,2.3rem);
  margin:0 0 .2em; line-height:1.15;
}
.venue__brand{
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--rose-deep); margin:0 0 1.4em;
}
.venue__addr{ margin:0 0 1.4em; color:var(--ink-soft); line-height:1.9; }

.venue__links{ display:flex; flex-wrap:wrap; gap:1.4rem; margin:0; }
.venue__links a{
  font-size:.63rem; letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--rose-deep); padding-bottom:.3em;
  transition:color .35s var(--ease);
}
.venue__links a:hover{ color:var(--rose-deep); }

.venue__features{ list-style:none; margin:0; padding:0; }
.venue__features li{
  position:relative;
  padding:.62em 0 .62em 1.6rem;
  border-bottom:1px solid var(--line);
  color:var(--ink-soft); font-size:.95rem;
}
.venue__features li:last-child{ border-bottom:0; }
.venue__features li::before{
  content:''; position:absolute; left:0; top:1.15em;
  width:5px; height:5px; transform:rotate(45deg);
  background:var(--blush);
}

/* ----- the resort's overview film -------------------------------------- */
.film{ margin:clamp(2.2rem,4.5vw,3.4rem) 0 0; }

.film__frame{
  position:relative;
  aspect-ratio:16 / 9;
  background:var(--night);
  border:1px solid var(--line);
  overflow:hidden;
}

/* The whole frame is the button until it is pressed. */
.film__play{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.55rem;
  width:100%; height:100%;
  background:none; border:0; cursor:pointer;
  color:var(--ivory);
  transition:background .5s var(--ease);
}
.film__play:hover,.film__play:focus-visible{ background:rgba(238,185,184,.08); }

.film__icon{
  width:66px; height:66px;
  border:1px solid var(--blush);
  border-radius:50%;
  position:relative;
  transition:background .45s var(--ease), transform .45s var(--ease);
}
.film__icon::after{           /* play triangle, optically centred */
  content:''; position:absolute;
  top:50%; left:calc(50% + 2px); transform:translate(-50%,-50%);
  border-style:solid;
  border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--blush);
}
.film__play:hover .film__icon{ background:rgba(238,185,184,.14); transform:scale(1.05); }

.film__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.2rem,2.4vw,1.6rem);
  margin-top:.5rem;
}
.film__hint{
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,253,250,.55);
}

/* Autoplay is only permitted muted, so hand the sound back deliberately.
   Sits clear of the native control bar. */
.film__sound{
  position:absolute; top:1rem; right:1rem; z-index:2;
  padding:.7em 1.4em;
  background:rgba(67,48,47,.7);
  border:1px solid rgba(238,185,184,.5);
  color:var(--blush);
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  cursor:pointer;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background .4s var(--ease), color .4s var(--ease);
}
.film__sound:hover,.film__sound:focus-visible{ background:var(--blush); color:var(--night); }

.film__video{
  width:100%; height:100%;
  object-fit:contain;          /* letterbox rather than crop if not 16:9 */
  background:var(--night);
  display:block;
}

/* It is a large, non-fast-start file — say something while it spools up. */
.film__frame.is-loading::after{
  content:'Loading…';
  position:absolute; inset:auto 0 1rem 0;
  text-align:center;
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,253,250,.6);
  pointer-events:none;
}

.film__fail{
  position:absolute; inset:0;
  display:grid; place-items:center;
  margin:0; padding:2rem;
  text-align:center; color:var(--ivory);
  font-family:var(--serif); font-size:1.1rem;
}
.film__fail a{ color:var(--blush); }

.film__credit{
  margin:.9rem 0 0;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
  text-align:center;
}

.dress{
  margin-top:clamp(2.5rem,5vw,4rem);
  text-align:center;
  padding:clamp(2.2rem,5vw,3.4rem);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.dress__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.5rem,3vw,2.1rem);
  margin:0 0 .5em;
}
.dress__text{ margin:0 auto; max-width:50ch; color:var(--ink-soft); }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery__filters{
  display:flex; justify-content:center; flex-wrap:wrap; gap:.6rem;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.chip{
  border:1px solid var(--line);
  background:transparent;
  padding:.7em 1.5em;
  font-size:.63rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
  cursor:pointer;
  transition:all .4s var(--ease);
}
.chip:hover{ color:var(--ink); border-color:var(--rose); }
.chip.is-on{ background:var(--night); border-color:var(--night); color:var(--ivory); }

.gallery__grid{
  column-count:3;
  column-gap:clamp(.6rem,1.4vw,1.1rem);
}
@media (max-width:900px){ .gallery__grid{ column-count:2; } }
@media (max-width:520px){ .gallery__grid{ column-count:1; } }

.shot{
  display:block; width:100%;
  break-inside:avoid;
  margin:0 0 clamp(.6rem,1.4vw,1.1rem);
  padding:0; border:0; background:none;
  position:relative;
  overflow:hidden;
  cursor:zoom-in;
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.shot.is-in{ opacity:1; transform:none; }
.shot img{
  width:100%;
  transition:transform 1.2s var(--ease), filter .6s var(--ease);
  background:var(--ivory-warm);
}
.shot::after{
  content:''; position:absolute; inset:0;
  background:rgba(43,40,35,.16);
  opacity:0; transition:opacity .5s var(--ease);
}
.shot:hover img, .shot:focus-visible img{ transform:scale(1.04); }
.shot:hover::after, .shot:focus-visible::after{ opacity:1; }

.shot__scene{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:1.4rem 1.1rem .95rem;
  font-size:.58rem; letter-spacing:.26em; text-transform:uppercase;
  color:#fff; text-align:left;
  background:linear-gradient(transparent, rgba(30,26,20,.55));
  opacity:0; transform:translateY(6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.shot:hover .shot__scene, .shot:focus-visible .shot__scene{ opacity:1; transform:none; }

.page-photos .gallery{ padding-top:calc(var(--nav-h) + var(--draft-h) + clamp(3rem,7vw,5rem)); }
.gallery__back{ text-align:center; margin:clamp(2.5rem,5vw,4rem) 0 0; }
.gallery__more{ text-align:center; margin-top:clamp(1.6rem,3vw,2.4rem); }

.gallery__hint{
  text-align:center; margin-top:2.4rem;
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted);
}

/* ==========================================================================
   TRAVEL
   ========================================================================== */
/* ----- the room-block deadline: the most important thing on the page ---- */
.block{
  background:var(--night);
  color:var(--ivory);
  text-align:center;
  padding:clamp(2.4rem,5.5vw,4rem) clamp(1.5rem,4vw,3rem);
  margin-bottom:clamp(2.6rem,5vw,4rem);
  position:relative;
}
.block::after{
  content:''; position:absolute; inset:12px;
  border:1px solid rgba(255,253,250,.18);
  pointer-events:none;
}
.block__eyebrow{
  font-size:.62rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--blush); margin:0 0 .9em;
}
.block__date{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,5vw,3.4rem);
  line-height:1.05; margin:0;
  color:#fff;
}
.block__count{ list-style:none; margin:1.2rem 0 2rem; padding:0; }
.block__n{
  font-family:var(--serif); font-size:1.5rem;
  color:var(--blush); font-variant-numeric:tabular-nums;
}
.block__l{
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,253,250,.55); margin-left:.7em;
}
.block__head{
  font-family:var(--serif); font-weight:300;
  font-size:1.4rem; margin:0 0 .6em;
  color:var(--blush);
}
.block__body{
  margin:0 auto 1.8rem; max-width:52ch;
  color:rgba(255,253,250,.86);
}
.block__cta .btn{ border-color:var(--blush); color:var(--blush); }
.block__cta .btn:hover{ background:var(--blush); color:var(--night); }
.block__cta .btn--solid{ background:var(--rose-deep); border-color:var(--rose-deep); color:#fff; }
.block__soon{
  margin:0 auto; max-width:46ch;
  font-family:var(--serif); font-style:italic; font-size:1.02rem;
  color:var(--blush);
  border:1px dashed rgba(255,253,250,.28);
  padding:1.1rem 1.4rem;
}
.block__code{
  margin:1rem 0 0; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,253,250,.7);
}
.block__code strong{ color:#fff; letter-spacing:.24em; }
.block__fine{
  margin:1.6rem 0 0;
  font-size:.8rem; color:rgba(255,253,250,.6);
}

/* ----- airports --------------------------------------------------------- */
.travel__airports{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(1.2rem,2.6vw,2rem);
  margin-bottom:clamp(2.6rem,5vw,4rem);
}
.airport{
  border:1px solid var(--line);
  background:var(--ivory-warm);
  padding:clamp(1.6rem,3vw,2.2rem);
  transition:border-color .45s var(--ease), transform .45s var(--ease);
}
.airport:hover{ border-color:var(--rose); transform:translateY(-3px); }
.airport__code{
  font-family:var(--serif); font-size:2rem; line-height:1;
  color:var(--rose-deep); margin:0 0 .35em; letter-spacing:.06em;
}
.airport__name{
  font-family:var(--serif); font-weight:400; font-size:1.18rem;
  margin:0 0 .5em; line-height:1.25;
}
.airport__note{ margin:0; color:var(--muted); font-size:.92rem; }

.travel__notes{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(1.6rem,3.4vw,3rem);
  border-top:1px solid var(--line);
  padding-top:clamp(2.2rem,4.5vw,3.4rem);
}
.tnote h4{
  font-family:var(--serif); font-weight:400; font-size:1.2rem;
  margin:0 0 .5em;
}
.tnote p{ margin:0; color:var(--muted); font-size:.93rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq__list{ max-width:780px; margin:0 auto; border-top:1px solid var(--line); }

.qa{ border-bottom:1px solid var(--line); }
.qa__q{
  width:100%;
  display:flex; align-items:flex-start; justify-content:space-between; gap:2rem;
  background:none; border:0;
  padding:clamp(1.3rem,2.6vw,1.75rem) 0;
  text-align:left;
  cursor:pointer;
  font-family:var(--serif);
  font-size:clamp(1.08rem,1.9vw,1.32rem);
  font-weight:400;
  color:var(--ink);
  transition:color .35s var(--ease);
}
.qa__q:hover{ color:var(--rose-deep); }
.qa__sign{
  flex:none; position:relative; width:13px; height:13px; margin-top:.45em;
}
.qa__sign::before,.qa__sign::after{
  content:''; position:absolute; background:var(--rose-deep);
  transition:transform .45s var(--ease), opacity .35s var(--ease);
}
.qa__sign::before{ top:6px; left:0; width:13px; height:1px; }
.qa__sign::after{ left:6px; top:0; width:1px; height:13px; }
.qa.is-open .qa__sign::after{ transform:rotate(90deg); opacity:0; }

.qa__a{
  overflow:hidden;
  max-height:0;
  transition:max-height .55s var(--ease);
}
.qa__a p{
  margin:0;
  padding:0 3rem 1.7rem 0;
  color:var(--ink-soft);
  max-width:62ch;
}

/* ==========================================================================
   RSVP FORM
   ========================================================================== */
.form{ max-width:720px; margin:0 auto; }
.form__row{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1rem,2.4vw,1.8rem);
}
@media (max-width:640px){ .form__row{ grid-template-columns:1fr; } }

.field{ display:block; margin-bottom:1.7rem; border:0; padding:0; min-width:0; }
.field__label{
  display:block; margin-bottom:.7em;
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted);
}
.field__label em{ font-style:normal; text-transform:none; letter-spacing:.06em; opacity:.7; }

.field input[type=text],
.field input[type=email],
.field select,
.field textarea{
  width:100%;
  background:transparent;
  border:0; border-bottom:1px solid var(--line);
  border-radius:0;
  padding:.75em 0;
  font-family:var(--serif);
  font-size:1.1rem;
  color:var(--ink);
  transition:border-color .4s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; }
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--rose-deep) 50%),
                   linear-gradient(135deg,var(--rose-deep) 50%,transparent 50%);
  background-position:calc(100% - 12px) 1.2em, calc(100% - 7px) 1.2em;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.field input::placeholder,.field textarea::placeholder{ color:#A89594; font-style:italic; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-bottom-color:var(--rose-deep);
}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{ border-bottom-color:#B4553F; }

.field__err{
  display:block; margin-top:.5em; min-height:1em;
  font-size:.68rem; letter-spacing:.06em; color:#B4553F;
}

.choice{ display:flex; flex-wrap:wrap; gap:.8rem; }
.choice label{ position:relative; cursor:pointer; }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice span{
  display:inline-block;
  border:1px solid var(--line);
  padding:.85em 1.7em;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
  transition:all .4s var(--ease);
}
.choice input:checked + span{
  background:var(--night); border-color:var(--night); color:var(--ivory);
}
.choice input:focus-visible + span{ outline:2px solid var(--rose-deep); outline-offset:3px; }

.form__fallback{
  margin-top:1.6rem; font-size:.8rem; color:var(--muted);
}
.form__fallback a{ color:var(--rose-deep); }

.form__done{ text-align:center; max-width:52ch; margin:0 auto; }
.form__done-mark{
  font-family:var(--serif); font-style:italic;
  font-size:4rem; color:var(--blush); margin:0;
}
.form__done p{ color:var(--ink-soft); }

/* ----- RSVP holding state (no mechanism until it's decided) ------------- */
.rsvp__hold, .rsvp__external{ text-align:center; max-width:54ch; margin:0 auto; }
.rsvp__hold-mark{
  font-family:var(--serif); font-style:italic;
  font-size:3.4rem; color:var(--blush); margin:0 0 .4rem;
}
.rsvp__hold-text{
  font-family:var(--serif); font-size:clamp(1.1rem,1.7vw,1.34rem);
  line-height:1.7; color:var(--ink-soft);
  margin:0 0 2rem;
}

/* ==========================================================================
   OUTSTANDING ITEMS — draft mode only, never seen by a guest
   ========================================================================== */
.todo{
  background:#221F1B;
  color:#E8E1D6;
  padding:clamp(3rem,7vw,5rem) var(--pad);
}
.todo__inner{ max-width:820px; margin:0 auto; }
.todo__eyebrow{
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  color:#C0553F; margin:0 0 1em;
}
.todo__head{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.8rem,4vw,2.6rem); margin:0 0 .4em;
}
.todo__lede{ color:rgba(232,225,214,.6); font-size:.9rem; margin:0 0 2.4rem; max-width:60ch; }
.todo__lede code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.85em; color:var(--blush);
}

.todo__list{ list-style:none; margin:0; padding:0; counter-reset:t; }
.todo__item{
  display:grid;
  grid-template-columns:5.5rem 1fr;
  gap:.4rem 1.4rem;
  padding:1rem 0;
  border-top:1px solid rgba(232,225,214,.12);
}
@media (max-width:600px){ .todo__item{ grid-template-columns:1fr; } }

.todo__pri{
  font-size:.55rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.42em 0; align-self:start;
  color:rgba(232,225,214,.45);
}
.todo__item--p1 .todo__pri{ color:#E0705A; }
.todo__item--p2 .todo__pri{ color:var(--blush); }

.todo__what{ font-family:var(--serif); font-size:1.2rem; line-height:1.35; }
.todo__note{
  grid-column:2; font-size:.85rem; color:rgba(232,225,214,.5); line-height:1.6;
}
@media (max-width:600px){ .todo__note{ grid-column:1; } }

/* ==========================================================================
   REGISTRY
   ========================================================================== */
.registry__links{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(1.2rem,2.6vw,2rem);
  max-width:820px; margin:0 auto;
}
.reg{
  display:block; text-decoration:none; text-align:center;
  border:1px solid var(--line);
  padding:clamp(2rem,4vw,2.8rem) 1.5rem;
  transition:background .45s var(--ease), border-color .45s var(--ease);
}
.reg:hover{ background:var(--ivory-warm); border-color:var(--rose); }
.reg__name{
  font-family:var(--serif); font-weight:300; font-size:1.5rem;
  margin:0 0 .4em;
}
.reg__note{ margin:0; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{
  background:var(--night);
  color:var(--ivory);
  text-align:center;
  padding:clamp(4rem,9vw,7rem) var(--pad);
}
.foot__mark{
  font-family:var(--serif); font-size:2rem; letter-spacing:.3em;
  margin:0 0 1.2rem; color:var(--blush);
}
.foot__date{
  font-family:var(--serif); font-size:1.05rem;
  letter-spacing:.28em; text-transform:uppercase; margin:0 0 .5rem;
}
.foot__city{
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,253,250,.55); margin:0;
}
.foot__block{
  margin:2rem auto 0; max-width:40ch;
  font-family:var(--serif); font-style:italic; font-size:1rem;
  color:var(--blush);
  border-top:1px solid rgba(255,253,250,.16);
  padding-top:1.6rem;
}
.foot__credit{
  margin:2.6rem 0 0;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,253,250,.4);
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lb{
  position:fixed; inset:0; z-index:200;
  background:rgba(24,21,17,.96);
  display:grid; place-items:center;
  padding:clamp(1rem,4vw,3.5rem);
  opacity:0;
  transition:opacity .4s var(--ease);
}
.lb.is-on{ opacity:1; }
.lb__figure{ margin:0; max-width:100%; max-height:100%; text-align:center; }
.lb__figure img{
  max-width:min(1100px,92vw);
  max-height:82vh;
  width:auto; margin:0 auto;
  object-fit:contain;
  opacity:0; transform:scale(.985);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.lb__figure img.is-ready{ opacity:1; transform:none; }
.lb__figure figcaption{
  margin-top:1.4rem;
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,253,250,.55);
}
.lb__close,.lb__nav{
  position:absolute; z-index:2;
  background:none; border:0; cursor:pointer;
  color:rgba(255,253,250,.7);
  transition:color .35s var(--ease);
  line-height:1;
}
.lb__close:hover,.lb__nav:hover{ color:#fff; }
.lb__close{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2.4rem); font-size:2.3rem; }
.lb__nav{ top:50%; transform:translateY(-50%); font-size:3.4rem; padding:.2em .45em; }
.lb__nav--prev{ left:clamp(.2rem,2vw,1.6rem); }
.lb__nav--next{ right:clamp(.2rem,2vw,1.6rem); }

body.lb-open{ overflow:hidden; }

/* ==========================================================================
   FILM GRAIN
   ========================================================================== */
.grain{
  position:fixed; inset:-120px;
  z-index:150;
  pointer-events:none;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); }
  10%{ transform:translate(-4%,-4%); }
  30%{ transform:translate(3%,-6%); }
  50%{ transform:translate(-3%,5%); }
  70%{ transform:translate(5%,3%); }
  90%{ transform:translate(-5%,2%); }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal,.shot,.hero__name .ch{ opacity:1 !important; transform:none !important; }
  .grain{ display:none; }
  .hero__slide.is-on{ animation:none; transform:scale(1.02); }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print{
  .nav,.hero__scroll,.grain,.gallery,.band,.draft-bar,.lb{ display:none !important; }
  body{ background:#fff; }
  .reveal{ opacity:1 !important; transform:none !important; }
}