/* ── Tokens ─────────────────────────────────────────────
   Deliberately single-theme. This is a piece of stationery:
   it is ivory in every light, so every colour is painted
   explicitly and nothing is left to the host ground.      */
:root{
  --paper:#FCFBF8;
  --ivory:#F4F1E8;
  --ivory-deep:#E9E4D7;
  --shell:#FFFFFF;
  --ink:#33506B;
  --ink-soft:#5F7E9D;
  --ink-faint:#9DB3C6;
  --tide:#7FA0BC;
  --tide-deep:#4A6C8A;
  --powder:#A9C3D4;
  --powder-soft:#C6D8E4;
  --seaglass:#BFD4DC;
  --sand:#DCCDB4;
  --rule:#DEDACF;

  --measure:34rem;
  --step--1:clamp(.72rem,.69rem + .15vw,.8rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.1rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.6rem,1.4rem + 1vw,2.2rem);
  --step-3:clamp(2.6rem,2rem + 3vw,4.6rem);

  --ease:cubic-bezier(.22,.61,.36,1);
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  font-size:var(--step-0);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-sealed{overflow:hidden;height:100vh}

img{max-width:100%}

:focus-visible{
  outline:2px solid var(--tide);
  outline-offset:3px;
  border-radius:2px;
}

/* ── Shared type roles ─────────────────────────────── */
.u-label{
  font-family:"Jost",-apple-system,"Helvetica Neue",sans-serif;
  font-weight:400;
  font-size:var(--step--1);
  text-transform:uppercase;
  letter-spacing:.32em;
  color:var(--ink-soft);
  margin:0;
}
.u-display{
  font-family:"Italiana",Didot,Georgia,serif;
  font-weight:400;
  letter-spacing:.06em;
  line-height:1.05;
  text-wrap:balance;
  margin:0;
}
.u-script{
  font-family:"Mrs Saint Delafield",cursive;
  font-weight:400;
  color:var(--tide);
  line-height:1;
}

/* ── The envelope gate ─────────────────────────────── */
.gate{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(.9rem,2.4vh,1.6rem);
  background:var(--paper);
  padding:1.25rem 1rem;
  overflow:hidden;
  transition:opacity .9s var(--ease),visibility .9s;
}
.gate.is-open{opacity:0;visibility:hidden;pointer-events:none}

/* the whole composition scales as one block */
.stage{
  position:relative;
  /* height is derived from width, so the composition keeps its
     proportions instead of squashing on short screens */
  width:min(33rem,95vw,58svh);
  aspect-ratio:1/1.32;
  cursor:pointer;
}
.stage > *{position:absolute}

/* — the open envelope — */
.env__back{
  left:2%;right:2%;bottom:0;
  height:57%;
  background:linear-gradient(166deg,#FAF8F2 0%,var(--ivory) 44%,var(--ivory-deep) 100%);
  border-radius:5px;
  box-shadow:0 28px 56px -28px rgba(51,80,107,.34),
             0 2px 6px rgba(51,80,107,.07);
  z-index:1;
}
.env__front{
  left:2%;right:2%;bottom:0;
  width:96%;height:43%;
  z-index:4;
  filter:drop-shadow(0 -4px 8px rgba(51,80,107,.06));
}

/* — the photographs — */
.polaroid{
  background:#FDFCFA;
  padding:5.5% 5.5% 15%;
  border-radius:2px;
  box-shadow:0 24px 44px -22px rgba(51,80,107,.46),
             0 2px 5px rgba(51,80,107,.14);
}
.polaroid__img{
  display:block;
  aspect-ratio:1/1.2;
  background-size:cover;
  background-position:center;
  background-image:
    radial-gradient(ellipse at 64% 30%,rgba(255,247,231,.95) 0%,rgba(255,247,231,0) 46%),
    linear-gradient(180deg,#DFD2BD 0%,#E8DCC9 26%,#CBD4D2 46%,#9DB3B8 68%,#7C949B 100%);
}
/* Kate and David's own photographs. CONFIG.photoOne / photoTwo
   still override these if you ever want to swap them. */
#photoL{background-image:url("images/photo-left.jpg")}
#photoR{background-image:url("images/photo-right.jpg")}
.polaroid--l{left:3%;top:9%;width:46%;transform:rotate(-6deg);z-index:2}
.polaroid--r{left:44%;top:1%;width:47%;transform:rotate(3.5deg);z-index:3}

/* — the scalloped shell card — */
.shellcard{
  left:13%;top:39%;width:64%;
  z-index:5;
  filter:drop-shadow(0 14px 24px rgba(51,80,107,.26));
}
.shellcard .arc{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:18px;
  letter-spacing:3px;
  fill:var(--ink-soft);
}
.shellcard .date{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:58px;
  letter-spacing:.5px;
  fill:var(--ink-soft);
  font-variant-numeric:lining-nums tabular-nums;
}
.shellcard .mono{
  font-family:"Mrs Saint Delafield",cursive;
  font-size:48px;
  fill:var(--ink-soft);
}

/* — pearl wax seal — */
.waxseal{
  left:44.5%;top:71%;width:12%;
  aspect-ratio:1;
  z-index:6;
  border-radius:48% 52% 51% 49%/50% 48% 52% 50%;
  background:radial-gradient(circle at 36% 30%,#FFFFFF 0%,#F4F0E7 46%,#DFD9CA 100%);
  box-shadow:0 6px 13px -5px rgba(51,80,107,.48),
             inset 0 -2px 4px rgba(120,110,90,.18),
             inset 0 2px 3px rgba(255,255,255,.85);
  display:grid;
  place-items:center;
}
.waxseal svg{width:62%;height:62%;overflow:visible}

/* — the call to action — */
.badge{
  right:0%;top:30%;width:31%;
  aspect-ratio:1;
  z-index:8;
  border:0;
  border-radius:50%;
  padding:0;
  background:var(--powder);
  color:#FFFFFF;
  cursor:pointer;
  display:grid;
  place-items:center;
  align-content:center;
  box-shadow:0 16px 32px -14px rgba(51,80,107,.5);
  font-family:"Cormorant Garamond",Georgia,serif;
  line-height:1.22;
  text-align:center;
  transition:transform .4s var(--ease),background .4s var(--ease);
}
.badge span{display:block;text-transform:uppercase}
.badge .s{font-size:clamp(.7rem,2.15vw,1.02rem);letter-spacing:.1em}
.badge .b{font-size:clamp(1.1rem,3.5vw,1.75rem);letter-spacing:.04em}
.stage:hover .badge{transform:scale(1.045);background:#9CB9CD}
@media (prefers-reduced-motion:no-preference){
  .badge{animation:breathe 3.6s var(--ease) infinite}
}
@keyframes breathe{
  0%,100%{box-shadow:0 16px 32px -14px rgba(51,80,107,.5)}
  50%{box-shadow:0 16px 40px -12px rgba(51,80,107,.62)}
}

/* the envelope is opening */
.is-open .polaroid--l{transform:rotate(-11deg) translate(-9%,-13%);opacity:0}
.is-open .polaroid--r{transform:rotate(7deg) translate(9%,-15%);opacity:0}
.is-open .shellcard{transform:translateY(-14%) scale(1.04);opacity:0}
.is-open .badge{transform:scale(.7);opacity:0}
.polaroid,.shellcard,.badge{
  transition:transform .95s var(--ease),opacity .8s var(--ease);
}

@media (max-width:26rem){
  .shellcard .arc{font-size:22px;letter-spacing:3.4px}
  .badge{width:34%;right:2%}
}

/* ── Page shell ────────────────────────────────────── */
.page{
  opacity:0;
  transition:opacity 1.1s var(--ease) .25s;
}
.page.is-revealed{opacity:1}

.wrap{
  width:min(var(--measure),calc(100% - 2.75rem));
  margin-inline:auto;
}

section{padding-block:clamp(3.5rem,9vh,6rem)}

/* section divider: a hairline horizon with a shell on it */
.divider{
  display:flex;
  align-items:center;
  gap:1.1rem;
  width:min(var(--measure),calc(100% - 2.75rem));
  margin-inline:auto;
  color:var(--seaglass);
}
.divider::before,
.divider::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--rule) 22%,var(--rule) 78%,transparent);
}

/* ── The letter ────────────────────────────────────── */
.letter{
  min-height:92svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(1.75rem,5vh,2.75rem);
  padding:clamp(3rem,8vh,5rem) 1.25rem clamp(2rem,5vh,3rem);
  background:var(--paper);
}
.letter__paper{
  width:min(31rem,100%);
  padding:clamp(2.25rem,7vw,3.4rem) clamp(1.75rem,6vw,2.9rem);
  background:linear-gradient(178deg,#FFFDF8 0%,var(--ivory) 100%);
  border-radius:3px;
  box-shadow:0 28px 56px -30px rgba(20,45,60,.4),
             0 2px 5px rgba(20,45,60,.07);
  text-align:left;
}
.letter__line{
  margin:0 0 1.2rem;
  font-family:"Caveat","Bradley Hand",cursive;
  font-weight:500;
  font-size:clamp(1.38rem,1.15rem + 1vw,1.78rem);
  line-height:1.62;
  color:#2C4356;
}
.letter__salutation{margin-bottom:1.55rem}
.letter__line:last-child{margin-bottom:0}
.letter__sign{
  margin-top:2.3rem;
  text-align:right;
  font-family:"Mrs Saint Delafield",cursive;
  font-weight:400;
  font-size:clamp(2.4rem,1.8rem + 2.4vw,3.3rem);
  line-height:1;
  color:var(--tide-deep);
}
/* armed by script, so the words still show if it never runs */
.letter.is-armed .letter__line,
.letter.is-armed .arch{opacity:0;transform:translateY(9px)}
.letter.is-written .letter__line,
.letter.is-written .arch{
  animation:writeIn .85s var(--ease) forwards;
  animation-delay:calc(var(--i) * .42s);
}
@keyframes writeIn{to{opacity:1;transform:translateY(0)}}
.letter__ps{
  margin:2rem 0 0;
  padding-top:1.35rem;
  border-top:1px solid var(--rule);
  font-size:clamp(1.08rem,.98rem + .45vw,1.3rem);
  color:var(--ink-soft);
}
.letter__families{
  margin:.7rem 0 0;
  text-align:right;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(.74rem,.68rem + .3vw,.9rem);
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height:1.65;
  color:var(--ink-soft);
}

/* ── Hero ──────────────────────────────────────────── */
.details{margin-top:clamp(1rem,3vh,2rem);text-align:center;width:min(var(--measure),100%)}
.details .u-label{letter-spacing:.46em;color:var(--tide)}

/* the ocean, kept to a band so the letter around it stays calm.
   Turquoise shallows, CC0 (public domain), Wikimedia Commons. */
.stdband{
  position:relative;
  width:100%;
  border-radius:4px;
  overflow:hidden;
  padding:clamp(2.75rem,8vh,4.25rem) 1.25rem clamp(2.5rem,7vh,3.75rem);
  background-color:#2C6C8B;
  background-image:
    linear-gradient(180deg,
      rgba(8,44,52,.44) 0%,
      rgba(8,44,52,.30) 45%,
      rgba(8,44,52,.46) 100%),
    url("images/ocean-band.jpg");
  background-size:cover;
  background-position:32% center;
  background-repeat:no-repeat;
  box-shadow:0 22px 46px -24px rgba(8,44,52,.5);
}
.stdband .u-label{color:rgba(255,255,255,.9)}
.stdband .names{color:#FFFFFF;text-shadow:0 2px 20px rgba(8,36,48,.35)}
.stdband .names .amp{color:rgba(255,255,255,.94)}
.stdband .hero__date{color:#FFFFFF;text-shadow:0 1px 10px rgba(8,36,48,.4)}
.stdband .hero__place{color:rgba(255,255,255,.93);text-shadow:0 1px 10px rgba(8,36,48,.4)}

.names{
  margin:1.6rem 0 0;
  font-size:var(--step-3);
  text-transform:uppercase;
  color:var(--ink);
}
.names .amp{
  display:block;
  font-family:"Mrs Saint Delafield",cursive;
  font-size:.62em;
  text-transform:none;
  color:var(--tide);
  line-height:.7;
  margin:.1em 0 .04em;
}

.hero__meta{
  margin:2.4rem auto 0;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.hero__date{
  font-family:"Jost",-apple-system,sans-serif;
  font-size:clamp(.85rem,.8rem + .3vw,1rem);
  text-transform:uppercase;
  letter-spacing:.24em;
  color:var(--ink);
  margin:0;
}
.hero__place{
  margin:0;
  font-style:italic;
  font-size:var(--step-1);
  color:var(--ink-soft);
}
.gate__note{
  margin:0;
  font-family:"Jost",-apple-system,sans-serif;
  font-size:var(--step--1);
  text-transform:uppercase;
  letter-spacing:.28em;
  color:var(--ink-faint);
  text-align:center;
}


/* ── Generic section head ──────────────────────────── */
.head{text-align:center;margin-bottom:2.2rem}
.head .u-label{color:var(--tide);letter-spacing:.4em}
.head h2{
  font-family:"Italiana",Didot,Georgia,serif;
  font-weight:400;
  font-size:var(--step-2);
  letter-spacing:.05em;
  margin:.75rem 0 0;
  text-wrap:balance;
}
/* the .75rem above spaces the heading below an eyebrow label; with no
   label there is nothing to clear. */
.head h2:first-child{margin-top:0}
.head p{
  margin:.85rem auto 0;
  max-width:28rem;
  color:var(--ink-soft);
  font-style:italic;
}

/* ── RSVP ──────────────────────────────────────────── */
.form{display:flex;flex-direction:column;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field > span{
  font-family:"Jost",sans-serif;
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.24em;
  color:var(--ink-soft);
}
.field input[type=text],
.field input[type=email],
.field input[type=number],
.field textarea{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.05rem;
  color:var(--ink);
  background:var(--shell);
  border:1px solid var(--rule);
  border-radius:2px;
  padding:.7rem .8rem;
  width:100%;
}
.field textarea{resize:vertical;min-height:5.5rem;line-height:1.55}
.field input::placeholder,
.field textarea::placeholder{color:var(--ink-faint);font-style:italic}

.choice{display:flex;gap:.55rem}
.choice label{
  flex:1;
  position:relative;
  display:block;
}
.choice input{
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer;
}
.choice span{
  display:block;
  text-align:center;
  padding:.75rem .5rem;
  background:var(--shell);
  border:1px solid var(--rule);
  border-radius:2px;
  font-family:"Jost",sans-serif;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ink-soft);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.choice input:checked + span{
  background:var(--tide);
  border-color:var(--tide);
  color:var(--shell);
}
.choice input:focus-visible + span{outline:2px solid var(--tide);outline-offset:3px}

.btn{
  align-self:center;
  margin-top:.6rem;
  min-width:14rem;
  padding:.9rem 2rem;
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  border-radius:2px;
  font-family:"Jost",sans-serif;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.28em;
  cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.btn:hover{background:var(--tide-deep);border-color:var(--tide-deep)}

.form__note{
  margin:.4rem 0 0;
  text-align:center;
  font-size:var(--step--1);
  color:var(--ink-faint);
  font-family:"Jost",sans-serif;
  letter-spacing:.04em;
  line-height:1.7;
}
.form__error{
  margin:0;
  text-align:center;
  color:#9C4A34;
  font-family:"Jost",sans-serif;
  font-size:var(--step--1);
  letter-spacing:.04em;
}
[hidden]{display:none !important}

.thanks{text-align:center}
.thanks .u-script{font-size:3.4rem}
.thanks h3{
  font-family:"Italiana",Didot,Georgia,serif;
  font-weight:400;
  font-size:var(--step-2);
  margin:.5rem 0 .75rem;
}
.thanks p{margin:0 auto;max-width:24rem;color:var(--ink-soft);font-style:italic}
.thanks button{
  margin-top:1.4rem;
  background:none;
  border:0;
  border-bottom:1px solid var(--tide);
  padding:0 0 .2rem;
  color:var(--tide);
  font-family:"Jost",sans-serif;
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.22em;
  cursor:pointer;
}

/* ── Calendar link ─────────────────────────────────── */
.arch{
  width:min(15.5rem,58vw);
  aspect-ratio:4/5;
  margin:0 auto;
  overflow:hidden;
  border-radius:50% 50% 3px 3px / 32% 32% 3px 3px;
  box-shadow:0 24px 46px -24px rgba(20,45,60,.45);
}
.arch img,.footer__ring img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.footer__ring{
  width:clamp(9.5rem,30vw,13rem);
  aspect-ratio:1;
  margin:0 auto 2.25rem;
  overflow:hidden;
  border-radius:50%;
  box-shadow:0 14px 28px -14px rgba(20,45,60,.42);
}
.hero__cal a{
  display:inline-block;
  color:var(--tide);
  text-decoration:none;
  border-bottom:1px solid var(--seaglass);
  padding-bottom:.25rem;
  font-family:"Jost",sans-serif;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.24em;
  transition:border-color .3s var(--ease)
}
.hero__cal a:hover{border-color:var(--tide)}

/* ── The closing ───────────────────────────────────── */
.hero__cal{margin:1.9rem 0 0}

.panel{
  width:min(var(--measure),100%);
  margin:1.9rem auto 0;
  padding:clamp(1.5rem,5vw,2.4rem);
  background:var(--ivory);
  border:1px solid var(--rule);
  border-radius:4px;
  text-align:left;
}
.panel .head{margin-bottom:1.6rem}

/* — the countdown band — */
.coast{
  background:#DCE4E6;
  text-align:center;
  padding-block:clamp(2.75rem,7vh,4.25rem);
}
.coast__script{
  margin:0 0 .5rem;
  font-family:"Sacramento",cursive;
  font-size:clamp(2.2rem,1.45rem + 3.5vw,3.6rem);
  line-height:1.15;
  color:var(--tide-deep);
}
.clock{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(.3rem,1.8vw,1.2rem);
}
.clock__unit{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:clamp(3rem,13vw,5rem);
}
.clock__num{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(2.3rem,1.5rem + 3.7vw,4rem);
  line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.clock__lbl{
  margin-top:.75rem;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(.68rem,.6rem + .35vw,.92rem);
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ink);
}
.clock__sep{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.7rem,1.1rem + 2.6vw,2.9rem);
  line-height:1.25;
  color:var(--ink-soft);
}

/* ── Footer ────────────────────────────────────────── */
footer{
  text-align:center;
  padding:clamp(3rem,8vh,4.75rem) 1.5rem clamp(3.5rem,9vh,5.5rem);
}
.footer__names{
  margin:0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.5rem,1.1rem + 1.9vw,2.4rem);
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--ink);
}
.footer__back{margin:2.75rem 0 0}
.footer__back button{
  background:none;
  border:0;
  padding:0 0 .3rem;
  border-bottom:1px solid var(--ink-faint);
  color:var(--ink);
  font-family:"Jost",-apple-system,sans-serif;
  font-size:var(--step--1);
  text-transform:uppercase;
  letter-spacing:.24em;
  cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.footer__back button:hover{border-color:var(--tide-deep);color:var(--tide-deep)}
.footer__date{
  margin:.9rem 0 0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.15rem,.95rem + 1.15vw,1.75rem);
  letter-spacing:.3em;
  color:var(--ink);
}

@media (max-width:30rem){
  .count{gap:.35rem}
  .count__cell{padding:.85rem .2rem .7rem}
  .plan li{grid-template-columns:1fr;gap:.3rem}
  .choice{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .gate{transition:opacity .2s linear,visibility .2s}
  .page{transition:opacity .2s linear}
}