/* ── 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-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 38px 68px -24px rgba(51,80,107,.6),
             0 4px 9px rgba(51,80,107,.19);
}
.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:2.5%;top:6%;width:55%;transform:rotate(-7deg);z-index:2}
.polaroid--r{left:42%;top:-3%;width:57%;transform:rotate(4.5deg);z-index:3}

/* — the scalloped shell card — */
.shellcard{
  left:13%;top:38%;width:74%;
  z-index:5;
  filter:drop-shadow(0 14px 24px rgba(51,80,107,.26));
}
.shellcard .arc{
  /* a small-caps label, like the ones on the invitation */
  font-family:"Jost",-apple-system,sans-serif;
  font-size:17px;
  letter-spacing:4.4px;
  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{
  /* the same script that signs the letter inside */
  font-family:"Great Vibes",cursive;
  font-size:50px;
  letter-spacing:1px;
  fill:var(--ink-soft);
}

/* — 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);
  /* a call to action in reverse on powder blue: the serif's thin strokes
     went soft there, so the label face carries it instead */
  font-family:"Jost",-apple-system,sans-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(.76rem,2.3vw,1.06rem);letter-spacing:.16em}
.badge .b{font-size:clamp(1.18rem,3.6vw,1.74rem);letter-spacing:.08em}
.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){
  .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.05rem;
  /* A printed letter, signed by hand. Caveat ran at handwriting sizes; the
     serif has a far larger eye, so it is stepped down and the leading
     tightened to keep the letter from becoming a scroll. */
  font-family:"Cormorant Garamond",Georgia,serif;
  /* 500, not 400: Cormorant is a display face, and at body size its hairlines
     thin out badly on screen. The weight is already in the font request. */
  font-weight:500;
  font-size:clamp(1.12rem,1rem + .62vw,1.42rem);
  line-height:1.52;
  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:"Great Vibes",cursive;
  font-weight:400;
  font-size:clamp(1.9rem,1.45rem + 1.8vw,2.6rem);
  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 .archgroup{opacity:0;transform:translateY(9px)}
.letter.is-written .letter__line,
.letter.is-written .archgroup{
  animation:writeIn .85s var(--ease) forwards;
  animation-delay:calc(var(--i) * .42s);
}
@keyframes writeIn{to{opacity:1;transform:translateY(0)}}
.letter__ps{
  /* the one line in the letter that asks the reader to do something: lifted
     out of the paragraph flow by position, style and colour rather than by
     a box — three quiet signals instead of one loud one */
  margin:2rem 0 0;
  padding-top:1.35rem;
  border-top:1px solid var(--rule);
  text-align:center;
  font-style:italic;
  font-size:1.12em;
  color:var(--tide-deep);
}
.letter__families{
  /* the same face as the body, set as a quiet italic rather than tracked
     capitals — it belongs to the signature above it, not to a third voice */
  margin:.45rem 0 0;
  text-align:right;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;
  font-size:.92em;
  line-height:1.5;
  color:var(--ink-soft);
  text-wrap:balance;
}

/* ── Hero ──────────────────────────────────────────── */
.details{margin-top:clamp(1rem,3vh,2rem);text-align:center;width:min(var(--measure),100%)}
/* the band now opens the invitation, above the letter */
.topband{padding-top:clamp(2rem,6vh,3.5rem);text-align:center}
/* the wider label tracking used to come from .details; keep it on the band */
.stdband .u-label{letter-spacing:.46em}
.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.25rem,6vh,3.25rem) 1.25rem clamp(2.5rem,7vh,3.5rem);
  /* the photograph now sits inside the band as its own shape, so the band
     itself is paper and the type is ink rather than reversed out */
  background:var(--ivory);
  border:1px solid var(--rule);
  text-align:center;
}


.hero__meta{
  margin:2.4rem auto 0;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.hero__date{
  /* the only sans in an otherwise serif composition; Cormorant capitals
     hold the same wide, formal line without a fourth voice */
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.08rem,.98rem + .45vw,1.3rem);
  text-transform:uppercase;
  letter-spacing:.13em;
  /* Cormorant defaults to old-style figures, so "12" and "2027" sit at
     x-height with a descending 2 — wrong beside capitals. Lining figures
     match the cap height; tabular keeps the digits evenly spaced. */
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
  color:var(--ink);
  margin:0;
}
.hero__venue{
  margin:.45rem 0 .1rem;
  font-size:var(--step-1);
  letter-spacing:.01em;
  color:var(--ink);
}
.hero__place{
  margin:0;
  font-style:italic;
  font-size:var(--step-0);
  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;
  /* was .66rem in --ink-soft: 10.5px at 3.75:1, below the 4.5:1 minimum.
     Larger, darker, and less tracked — wide spacing hurts small text. */
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.17em;
  color:var(--tide-deep);
}
.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{
  /* --ink-faint was 2.17:1 on the white inputs; --tide-deep is 5.52:1 and
     still reads as a hint rather than as typed text */
  color:var(--tide-deep);
  font-style:italic;
  opacity:1;              /* Firefox dims placeholders by default */
}

.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__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:2.25rem auto 0;
  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}

/* — questions, under the form — */
.qa__item{
  padding:1.15rem 0 1rem;
  border-bottom:1px solid var(--rule);
}
/* :last-child stopped matching once .qa__note was added after the questions,
   which left the final question's rule sitting just above the note's own */
.qa__item:last-of-type{border-bottom:0;padding-bottom:0}
.qa__q{
  margin:0 0 .5rem;
  font-family:"Jost",-apple-system,sans-serif;
  /* --tide was 2.43:1 against the panel; these are headings, so they take
     the full ink and a size of their own rather than the smallest step.
     The weight is what separates them from the answer beneath — both are
     near-black, so colour alone cannot do it. 500 is already loaded. */
  font-weight:500;
  font-size:clamp(.84rem,.79rem + .22vw,.95rem);
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--ink);
}
.qa__a{
  margin:0;
  font-size:var(--step-0);
  line-height:1.55;
  color:#2C4356;
}
.qa__a a{
  color:var(--tide-deep);
  text-decoration:none;
  border-bottom:1px solid var(--powder);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.qa__a a:hover{color:var(--ink);border-bottom-color:var(--tide)}

.qa__note{
  margin:1.6rem 0 0;
  padding-top:1.25rem;
  border-top:1px solid var(--rule);
  text-align:center;
  font-style:italic;
  color:var(--ink-soft);
}

.qa__placestitle{
  margin:1.1rem 0 .1rem;
  font-family:"Jost",-apple-system,sans-serif;
  font-size:clamp(.76rem,.73rem + .16vw,.85rem);
  text-transform:uppercase;
  letter-spacing:.15em;
  /* same ink as the questions above it */
  color:var(--ink);
}

/* the hotels, set apart from the sentence as a small list */
.qa__places{
  list-style:none;
  margin:.55rem 0 .2rem;
  padding:0 0 0 1.1rem;
  border-left:1px solid var(--powder-soft);
  display:grid;
  gap:.75rem;
}
.qa__places a{
  font-size:var(--step-0);
  color:var(--tide-deep);
  text-decoration:none;
  border-bottom:1px solid var(--powder);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.qa__places a:hover{color:var(--ink);border-bottom-color:var(--tide)}
.qa__places span{
  display:block;
  margin-top:.15rem;
  font-style:italic;
  /* --ink-faint was 1.92:1 against the panel — the same problem as the
     label above. Darker and a step larger; still italic, so the town and
     drive time stay subordinate to the hotel name. */
  font-size:clamp(.82rem,.78rem + .2vw,.92rem);
  color:var(--tide-deep);
}

/* — the names, set into the arch photograph — */
/* — the names, curving over the arch photograph — */
.archgroup{
  /* wider than the photograph, so the date and venue never wrap to the
     picture's width */
  width:min(26rem,90vw);
  margin:0 auto;
  text-align:center;
}
/* the picture and its arc keep the narrow measure; percentages below
   resolve against this, not the wider group */
.archgroup__pic{
  width:min(15.5rem,58vw);
  margin:0 auto;
}
.archgroup .hero__meta{margin-top:clamp(1rem,3vh,1.5rem)}
.archgroup__names{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
  /* the arc's ends reach the foot of its box, but the lettering only occupies
     the crown — pull the photograph back up under it */
  margin-bottom:-17%;
}
.archgroup__names text{
  font-family:"Italiana",Didot,Georgia,serif;
  font-size:30px;
  letter-spacing:6px;
  text-transform:uppercase;
  fill:var(--ink);
}
.archgroup .arch{margin:0}

/* for screen readers only: the visible name is drawn as a curve */
.u-sr{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* — 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}
}