/* ===================================================================
   LAYOUT — the page, section by section, following the original
   =================================================================== */

/* ===============================================================
   1 · HERO
   Name lockup, invitation line, rings flourish and the RSVP link on
   the left; the portrait bleeds off the right edge.
   =============================================================== */
.hero{position:relative;overflow:hidden;background:var(--paper)}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  align-items:center;padding-block:clamp(16px,2.6vw,38px);
}
.hero__left{
  container-type:inline-size;min-width:0;position:relative;z-index:2;
  padding:clamp(28px,4.4vw,64px) clamp(12px,2.4vw,40px) clamp(34px,5vw,72px);
  padding-left:max(var(--gutter),calc(50vw - 570px));
}

/* Sized in container units so the whole lockup scales as one piece:
   an oversized initial followed by the rest of the word, which is how
   the original gets its big sweeping S and W.

   The swash of the W carries the art about 15% past the right edge of
   the box, so the box itself is held at 86.5% of the column and the
   lockup becomes its own container — that way the glyphs scale with it
   and the whole lockup lands exactly inside the column at every width
   instead of running under the portrait. */
.lockup{
  position:relative;container-type:inline-size;
  width:86.5%;aspect-ratio:465/262;margin-bottom:clamp(22px,3.6vw,48px);
}
.lockup>span{position:absolute;line-height:.95;white-space:nowrap;font-family:'Amsterdam One',cursive;font-weight:400;letter-spacing:.002em}
.lockup b{font-weight:400;font-size:1.48em;margin-right:-.08em}
.lockup .n1 {left:3%;    top:25%;  font-size:13.5cqw;color:var(--brown)}
.lockup .amp{left:30%;   top:78%;  font-size:10.5cqw;color:var(--sage)}
.lockup .n2 {left:55%;   top:49%;  font-size:14cqw;  color:var(--brown)}

/* only shown when the link carries ?to=<name> (js/greeting.js) */
.hero__greeting{
  font-family:'Madelyn Rough',cursive;letter-spacing:0;line-height:1.2;
  text-align:center;color:var(--brown);
  font-size:clamp(21px,2.6vw,36px);margin-bottom:.4em;
}

.hero__invite{
  text-align:center;color:var(--sage);text-transform:uppercase;
  font-size:var(--t-invite);letter-spacing:normal;line-height:1.35;
}
.hero__rings{
  margin:clamp(14px,2.2vw,30px) auto clamp(12px,1.8vw,24px);
  width:min(86%,clamp(210px,52cqw,310px));
}
.hero__rings img{width:100%;height:auto}
.hero__rsvp{
  text-align:center;color:var(--sage);text-transform:uppercase;
  font-size:var(--t-invite);letter-spacing:normal;
}

.hero__photo{
  min-width:0;position:relative;display:flex;justify-content:flex-end;
  padding-right:max(var(--gutter),4.8vw);
}
.hero__photo img{width:100%;height:auto}

/* ===============================================================
   2 · COUNTDOWN  (an addition, dressed in the original's language)
   =============================================================== */
.count{position:relative;text-align:center;padding-block:clamp(34px,4.6vw,68px) clamp(48px,6.4vw,92px)}
.count__title{color:var(--brown);font-size:var(--t-script-lg);margin:0}
.count__sub{
  color:var(--sage);text-transform:uppercase;letter-spacing:.16em;
  font-size:var(--t-lead);margin-top:.5em;
}
.count__grid{
  display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(8px,2.6vw,38px);margin-top:clamp(22px,3.2vw,42px);
}
.count__unit{min-width:clamp(52px,9vw,110px)}
.count__num{
  font-family:'Amsterdam One',cursive;color:var(--brown);
  font-size:clamp(34px,6vw,80px);line-height:1;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.count__label{
  color:var(--sage);text-transform:uppercase;
  font-size:var(--t-fine);letter-spacing:.18em;margin-top:.7em;
}
.count__dot{
  align-self:flex-start;width:4px;height:4px;border-radius:50%;
  background:var(--sage);opacity:.5;margin-top:clamp(16px,2.6vw,36px);flex:none;
}
.count__actions{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(12px,2.4vw,30px);margin-top:clamp(24px,3.4vw,42px);
}
.count__done{
  font-family:'Madelyn Rough',cursive;color:var(--brown);
  font-size:var(--t-script-lg);margin-top:.4em;
}

/* ===============================================================
   3 · OUR WEDDING  (brown band)
   =============================================================== */
.band{background:var(--brown);color:var(--paper);position:relative;overflow:hidden}
.band__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.24fr);
  align-items:center;gap:clamp(20px,4vw,56px);
  padding-block:clamp(56px,7.9vw,114px);
}
.band__copy{padding-left:clamp(0px,7.4vw,106px)}
.band__title{font-size:var(--t-script-lg);margin:0 0 clamp(18px,3.4vw,49px)}
.band__body{font-size:var(--t-lead);line-height:1.45;text-transform:uppercase;letter-spacing:normal;max-width:17em}
.band__figure{display:flex;justify-content:center}
.band__car{width:100%;max-width:clamp(280px,41.5vw,597px);height:auto}

/* ===============================================================
   4/5 · CARD SECTIONS — About the Wedding, Wedding Venues
   =============================================================== */
.sec{position:relative;overflow:hidden;padding-block:clamp(46px,5.8vw,84px) clamp(56px,7.2vw,104px)}
.sec__head{text-align:center;margin-bottom:clamp(0px,.6vw,8px)}
.sec__title{color:var(--brown);font-size:var(--t-script-lg);margin:0}
.sec__sub{
  font-size:calc(var(--t-lead) - 4px);letter-spacing:normal;color:var(--brown);
  text-transform:uppercase;margin-top:.05em;
}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3.2vw,44px) 0;align-items:start}
.card{text-align:center;max-width:clamp(190px,16vw,230px);margin-inline:auto}
.card--wide{max-width:clamp(210px,19.4vw,280px)}
/* the original drops only the middle column, by a different amount in
   each row; the outer two share a baseline */
.cards--about .card:nth-child(2){margin-top:clamp(28px,7.2vw,104px)}
.cards--venues .card:nth-child(2){margin-top:clamp(20px,4.4vw,64px)}

/* Every figure box is the same height and the art sits on its floor, so
   the drawings share a baseline the way they do in the original while
   each keeps its own size. Absolute lengths, not percentages, so the art
   can never outgrow its box however the surrounding grid resolves. */
.card__figure{
  --box:clamp(96px,12.1vw,174px);
  --fig:var(--box);
  min-height:var(--box);
  display:flex;align-items:flex-end;justify-content:center;
  margin:0 auto clamp(12px,1.8vw,24px);
}
.card__figure>img,.card__figure>picture>img{max-width:100%;max-height:var(--fig);width:auto;height:auto}
/* heights measured off the original, drawing by drawing */
.card__figure--church{--fig:clamp(93px,11.7vw,168px)}
.card__figure--shoes {--fig:clamp(74px,9.2vw,132px)}
.card__figure--opera {--fig:clamp(56px,6.8vw,98px)}
.card__figure--mca   {--fig:clamp(84px,10.4vw,149px)}

.card__title{
  font-weight:700;color:var(--ink);
  font-size:var(--t-title);letter-spacing:normal;line-height:1.25;margin:0 0 .5em;
}
.card__place{display:block;font-size:var(--t-place);margin-top:.12em}
.card__body{font-size:var(--t-body);line-height:1.45;color:var(--brown);letter-spacing:normal}

/* the wet-weather card keeps its little couple standing under the arch */
.arch{position:relative;display:flex;align-items:flex-end;justify-content:center;height:var(--fig)}
.arch__frame{max-height:var(--fig);width:auto}
.arch__couple{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  height:70%;width:auto;
}

/* ===============================================================
   6 · SCHEDULE OF EVENTS — a two-by-two grid, as drawn
   =============================================================== */
.schedule__head{position:relative}
.schedule__plate{
  position:absolute;left:max(-22px,-1.53vw);top:50%;transform:translateY(-46%);
  width:clamp(72px,11.5vw,166px);height:auto;
}
.events{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(32px,5vw,66px) clamp(20px,2.6vw,40px);
  max-width:1040px;margin-inline:auto;
}
.event{text-align:center;max-width:400px;margin-inline:auto}
.event__time{
  font-size:var(--t-time);letter-spacing:.06em;color:var(--brown);
}
.event__name{
  font-weight:700;color:var(--ink);
  font-size:var(--t-title);letter-spacing:normal;margin:.3em 0 .45em;
}
.event__text{font-size:var(--t-body);line-height:1.45;letter-spacing:normal}

.schedule__flutes{
  /* Anchored to .wrap, whose bottom edge sits well inside the section's
     bottom padding — so a negative offset drops the flutes alongside the
     footer note (which is only 715px wide, centred) instead of reaching
     up into the third event's copy. */
  position:absolute;right:clamp(0px,1.7vw,24px);bottom:clamp(-34px,-3.2vw,-14px);
  width:clamp(62px,7.5vw,108px);height:auto;z-index:1;
}
.schedule__foot{
  position:relative;text-align:center;margin:clamp(34px,5vw,66px) auto 0;
  font-size:var(--t-body);line-height:1.5;max-width:715px;letter-spacing:normal;
}
.schedule__tz{
  display:block;margin-top:.9em;color:var(--sage);
  letter-spacing:.16em;font-size:var(--t-fine);
}

/* ===============================================================
   7 · FAQ — the original sets these out flush left, all open
   =============================================================== */
.faq__title{
  color:var(--brown);font-size:var(--t-script-md);
  margin:0 0 clamp(24px,3.4vw,46px);margin-left:clamp(0px,5.8vw,83px);
}
.faq__list{max-width:740px;margin-left:clamp(0px,5.8vw,83px)}
.faq__item + .faq__item{margin-top:clamp(24px,3.4vw,44px)}
.faq__q{
  font-weight:700;color:var(--ink);
  font-size:var(--t-q);letter-spacing:normal;line-height:1.3;margin:0 0 .55em;
}
.faq__a{font-size:var(--t-body);line-height:1.55;letter-spacing:normal}
.faq__sparklers{
  position:absolute;right:clamp(4px,6.9vw,100px);bottom:clamp(12px,5vw,72px);
  width:clamp(88px,11.3vw,162px);height:auto;z-index:1;
}

/* ===============================================================
   8 · RSVP  (brown band)
   =============================================================== */
.rsvp{
  background:var(--brown);color:var(--paper);text-align:center;
  padding-block:clamp(64px,8.4vw,120px);position:relative;overflow:hidden;
}
.rsvp__title{font-size:var(--t-script-xl);margin:0}
.rsvp__art{width:min(88%,clamp(260px,38.3vw,551px));margin:clamp(26px,4vw,58px) auto clamp(20px,3vw,42px)}
.rsvp__art img{width:100%;height:auto}
.rsvp__cta{
  color:var(--ice);letter-spacing:normal;
  font-size:var(--t-invite);
}
.rsvp__foot{
  margin-top:clamp(16px,2.4vw,32px);
  font-size:var(--t-note);letter-spacing:normal;color:var(--ice);
}

/* ===============================================================
   9 · FOOTER  (an addition — the original ends on the Canva bar)
   =============================================================== */
.foot{text-align:center;padding-block:clamp(30px,4vw,52px) clamp(40px,5.4vw,72px);background:var(--paper);color:var(--sage)}
/* Amsterdam One draws 2.21em above the baseline and 0.98em below it,
   so the swashes need that room reserved or they hit the line below. */
.foot__mark{
  font-family:'Amsterdam One',cursive;color:var(--brown);
  font-size:clamp(28px,3.6vw,46px);line-height:1;
  padding:1.5em 0 .9em;
}
.foot__mark em{color:var(--sage);font-style:normal}
.foot__meta{text-transform:uppercase;letter-spacing:.18em;font-size:var(--t-fine);line-height:2.1}

/* ===============================================================
   10 · SCROLL VINES
   Two fixed line-art vines that draw themselves as the page scrolls
   (stroke-dashoffset on the stems) and open their blossoms as the
   growth line passes each one. All state comes from one scroll var,
   so nothing here reflows the page.
   =============================================================== */
.vines{position:fixed;inset:0;pointer-events:none;z-index:2;contain:layout style}
.vine{position:absolute;top:0;height:100vh;overflow:visible;opacity:.45}
/* Each vine must be at least (its viewBox ratio) of the viewport height
   wide, or the art shrinks instead of reaching top to bottom. Narrow
   screens therefore get slimmer artwork rather than a squeezed box. */
.vine--full{width:14.2vh}                /* 140 : 1000 */
.vine--slim{width:6.8vh;display:none}    /*  64 : 1000 */
.vine--left {left:0}
.vine--right{right:0}

.vine__stem{
  fill:none;stroke:var(--vine);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
}
.vine__stem--thin{stroke-width:1.5;opacity:.85}

/* Art parts live in <defs> and are cloned by <use>, so they are styled
   on the original element and the clones inherit it. Everything is
   outline only, matching the line-art sprays in the corners. */
.v-line{fill:none;stroke:var(--vine);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.v-hair{fill:none;stroke:var(--vine-soft);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.v-dot{fill:var(--vine);stroke:none}

/* Closed until the growing stem reaches them. fill-box puts the origin
   at the blossom's own base so it unfurls off the branch. */
.bloom{
  transform-box:fill-box;transform-origin:50% 100%;
  transform:scale(.04) rotate(-14deg);opacity:0;
  transition:transform .85s var(--ease-spring),opacity .5s ease;
}
.bloom.is-open{transform:none;opacity:1}

/* ===============================================================
   RESPONSIVE
   =============================================================== */

/* Once the margins stop clearing the wide vine, swap in the slim one —
   it keeps its full height while sitting inside the page gutter. */
@media (max-width:1320px){
  .vine--full{display:none}
  .vine--slim{display:block}
  .vine{opacity:.45}
}
@media (max-width:900px){
  .vine{opacity:.4}
  .vine--slim.vine--left {left:-1.2vh}
  .vine--slim.vine--right{right:-1.2vh}
}

/* Narrow desktop — the three-up grid runs column three tall and the footer
   note nearly spans the width, leaving the flutes nowhere to sit without
   touching one or the other. The ornament steps out below 1100px. */
@media (max-width:900px){
  .schedule__flutes{display:none}
}

/* Tablet — cards go two-up and lose their stagger; band stacks */
@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,4.6vw,44px)}
  .card{margin-top:0!important;max-width:330px}
  .card:last-child:nth-child(odd){grid-column:1 / -1}
  .band__grid{grid-template-columns:1fr;text-align:center;gap:clamp(18px,4vw,34px)}
  /* drop the desktop indent, it fights the centering once stacked */
  .band__copy{max-width:44ch;margin-inline:auto;padding-left:0}
  .band__body{max-width:none}
  .band__car{max-width:420px;margin-inline:auto}
  /* three-up gets cramped here; drop to two with the last one centred */
  .events{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4.6vw,48px) clamp(20px,3vw,32px)}
  .event:last-child:nth-child(odd){grid-column:1 / -1}
  .schedule__plate{position:static;transform:none;width:clamp(48px,10vw,80px);margin:0 auto clamp(10px,2vw,18px)}
  .faq__sparklers{display:none}
  .corner{width:clamp(120px,20vw,170px);opacity:.75}
}

/* Phone — single column throughout, and the hero stacks portrait-first */
@media (max-width:720px){
  :root{--track:.07em;--maxw:100%}
  .hero__grid{grid-template-columns:1fr;row-gap:clamp(14px,4vw,26px)}
  .hero__left{order:2;padding:8px var(--gutter) clamp(30px,7vw,48px)}
  .hero__photo{order:1;max-width:340px;margin-inline:auto;padding-top:clamp(12px,4vw,26px)}
  .lockup{width:86.5%;max-width:400px;margin:0 auto clamp(14px,4vw,24px)}
  .lockup .n1{left:2%;top:27%;font-size:12.5cqw}
  .lockup .amp{left:28%;top:76%;font-size:9.6cqw}
  .lockup .n2{left:50%;top:50%;font-size:12.5cqw}
  .hero__invite,.hero__rsvp{letter-spacing:.08em}
  .hero__rings{width:min(70%,240px)}

  /* the car reads oversized once the band stacks — pull it back 25% */
  .band__car{width:75%;max-width:315px}

  .cards{grid-template-columns:1fr;gap:clamp(30px,7vw,42px)}
  .card{max-width:340px}
  .card:last-child:nth-child(odd){grid-column:auto}

  .events{grid-template-columns:1fr;gap:clamp(28px,7vw,40px)}
  .event:last-child:nth-child(odd){grid-column:auto}

  .count__grid{gap:clamp(4px,1.6vw,12px)}
  .count__unit{min-width:60px}
  .count__actions{gap:14px}

  .faq__title,.faq__list{margin-left:0}
  /* on a phone the flow is one column, so a spray hanging past the
     section edge lands in the middle of the next heading — keep the
     lower pair inside their own section instead */
  .corner--bl,.corner--br{bottom:0}
  .corner{width:clamp(112px,34vw,190px);opacity:.85}
}

/* Short landscape phones — keep the hero side by side, trim padding */
@media (max-height:520px) and (orientation:landscape){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);row-gap:0}
  .hero__left{order:0;padding-block:14px}
  .hero__photo{order:0;max-width:none;padding-top:0}
}

/* Ultra-wide — hold the design's proportions instead of stretching */
@media (min-width:1600px){:root{--maxw:1240px}}