/* ============================================================
   Kathryn & Samuel, 10.10.26
   The couple are keyed off the studio seamless and stand on a
   field sampled from that same backdrop, with their names in
   script behind them. Bands of field and paper, torn apart.
   ============================================================ */

:root{
  --field:   #A7B7CC;   /* the studio roll, sampled from the photographs */
  --field-2: #95AECC;
  --paper:   #F6F1E9;
  --ink:     #0A1130;
  --ink-2:   #3D4A6E;
  --blue:    #0B2FB5;
  --coral:   #C0492F;   /* their coral, taken down for text contrast */
  --coral-lit: #F2725C;
  --red:     #A5301C;   /* his name, dark enough to read on the field */
  --hair:    rgb(10 17 48 / .18);

  --script:"Pinyon Script",cursive;
  --disp:"Alegreya",Georgia,"Times New Roman",serif;
  --ui:"Alegreya Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --pad:1.5rem;
  --bar:3.75rem;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--field);color:var(--ink-2);
  font-family:var(--ui);font-size:1.0625rem;line-height:1.62;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:.75rem;top:.75rem;z-index:90;background:var(--ink);color:var(--paper);padding:.7rem 1rem;font-weight:600}

.wrap{width:100%;max-width:56rem;margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:34rem}

/* ---------------- the bar ---------------- */
/* Liquid Glass: the controls float as their own islands and the page runs
   edge to edge underneath them, softened by a scroll edge rather than a rule. */

.bar{
  position:fixed;top:clamp(.7rem,1.5vw,1.15rem);left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:clamp(.7rem,2vw,1.4rem);
  pointer-events:none;
}
.bar>*{pointer-events:auto}

.glass{
  background:rgb(255 255 255 / .52);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border-radius:999px;
  box-shadow:
    0 8px 30px rgb(10 17 48 / .10),
    inset 0 1px 0 rgb(255 255 255 / .60),
    inset 0 0 0 .5px rgb(255 255 255 / .28);
}

.mono{
  display:inline-flex;align-items:center;height:2.75rem;padding-inline:1.05rem;
  font-family:var(--script);font-size:1.5rem;line-height:1;padding-bottom:.18em;
  color:var(--ink);text-decoration:none;
}
.bar-nav{display:none}

.menu-btn{
  appearance:none;border:0;cursor:pointer;color:var(--ink);
  display:inline-flex;align-items:center;height:2.75rem;padding-inline:1.15rem;
  font-family:var(--disp);font-size:1rem;font-weight:500;letter-spacing:.1em;
  transition:color 200ms var(--ease);
}
.menu-btn:hover{color:var(--coral)}

/* the page fades as it passes beneath the floating controls */
.scroll-edge{
  position:fixed;inset:0 0 auto 0;height:clamp(72px,9vw,116px);z-index:39;
  pointer-events:none;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(to bottom,#000 26%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 26%,transparent 100%);
}

.contents{
  position:fixed;inset:0;z-index:50;background:var(--ink);color:#E4EAFA;
  padding:calc(var(--bar) + 1.5rem) var(--pad) var(--pad);overflow-y:auto;
  visibility:hidden;opacity:0;transition:opacity 320ms var(--ease),visibility 320ms;
}
.contents[data-open="1"]{visibility:visible;opacity:1}
.contents-close{
  position:absolute;top:calc((var(--bar) - 2.125rem)/2);right:var(--pad);
  appearance:none;border:1px solid rgb(228 234 250 / .4);background:transparent;color:#E4EAFA;
  font-family:var(--ui);font-size:.6875rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;height:2.125rem;padding-inline:.9rem;border-radius:999px;cursor:pointer;
}
.contents ol{list-style:none;margin:0;padding:0}
.contents li{border-top:1px solid rgb(228 234 250 / .18)}
.contents li:last-child{border-bottom:1px solid rgb(228 234 250 / .18)}
.contents a{
  display:flex;align-items:baseline;gap:1rem;padding:1.05rem 0;text-decoration:none;
  font-family:var(--script);font-size:clamp(1.75rem,8vw,2.5rem);line-height:1.1;
  transition:color 200ms var(--ease);
}
.contents a:hover{color:#A9BEFF}
.contents a b{font-family:var(--ui);font-weight:600;font-size:.75rem;letter-spacing:.1em;color:#8296D6;min-width:1.4rem}

/* ---------------- bands ---------------- */

.band{position:relative}
.band--field{background:var(--field)}

/* a real seamless is not a flat swatch: the light falls off from a hot spot
   behind the subject to the corners, and the paper has grain. */
.band--field,
.band--field2{
  background-image:
    radial-gradient(78% 62% at 50% 30%, rgb(255 255 255 / .34), rgb(255 255 255 / 0) 62%),
    radial-gradient(120% 100% at 50% 108%, rgb(10 17 48 / .13), rgb(10 17 48 / 0) 58%);
  background-repeat:no-repeat;
}
.band--field::before,
.band--field2::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.band--field2{background:var(--field-2)}
.band--paper{background:var(--paper)}

/* a torn edge, filled with the colour of whatever comes next */
.tear{position:absolute;left:0;right:0;bottom:0;z-index:6;line-height:0;pointer-events:none}
.tear svg{display:block;width:100%;height:clamp(46px,6.5vw,92px)}
.tear--up,
.tear--top{bottom:calc(100% - 1px);top:auto}

/* ---------------- the hero ---------------- */

.hero{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;display:grid;place-items:end center}
.figure{position:relative;z-index:2;height:clamp(380px,72svh,880px);margin-bottom:clamp(112px,12.5vw,182px)}
.figure img{height:100%;width:auto}
.figure .shadow{position:absolute;left:-6%;right:-6%;bottom:-2.2%;height:9%;
  background:radial-gradient(52% 100% at 50% 100%,rgb(20 30 58 / .22),rgb(20 30 58 / 0) 70%)}

.script{position:absolute;z-index:1;left:50%;transform:translateX(-50%);width:max-content;
  font-family:var(--script);line-height:.78;white-space:nowrap;
  text-shadow:0 3px 44px rgb(10 17 48 / .12)}
.s1{color:var(--blue)}   /* hers */
.s2{color:var(--red)}    /* his */
.s1{top:9svh;font-size:clamp(6rem,25vw,21rem)}
.s2{top:41svh;font-size:clamp(6rem,25vw,21rem)}
/* the crop ends at their waist, so it has to leave rather than stop. masking
   the image made them see-through and his name read straight through her dress,
   which kills the whole point of them standing in front of it. so the couple
   stay opaque and the field rises over the whole scene instead, which also
   avoids the pale rectangle a figure-shaped overlay leaves behind. */
.hero .figure{height:clamp(420px,82svh,980px);margin-bottom:clamp(112px,12vw,172px)}
.hero .shadow{display:none}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:40%;
  z-index:4;pointer-events:none;
  background:linear-gradient(to bottom,
    rgb(167 183 204 / 0)    0%,
    rgb(167 183 204 / .08) 22%,
    rgb(167 183 204 / .26) 40%,
    rgb(167 183 204 / .52) 57%,
    rgb(167 183 204 / .76) 72%,
    rgb(167 183 204 / .92) 85%,
    rgb(167 183 204 / 1)  100%);
}

/* their hashtag, flat on the surface below where the couple dissolve away */
.hero-tag{
  position:absolute;z-index:5;left:50%;bottom:clamp(3.25rem,5.5vw,5.5rem);
  margin:0;white-space:nowrap;pointer-events:none;
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.25rem,4.4vw,3.5rem);
  letter-spacing:.34em;text-indent:.34em;
  color:rgb(16 26 54 / .34);
  transform:translateX(-50%) perspective(760px) rotateX(68deg) scaleY(1.4);
  transform-origin:50% 100%;
}

.s2 i{font-family:var(--disp);font-style:italic;font-size:.2em;letter-spacing:.04em;
  color:var(--ink);vertical-align:.66em;padding-right:.12em}

/* on a phone there is no room beside them, so the names sit above their heads
   and the figure drops until it clears the second one */
@media (max-width:47.99em){
  .s1{top:2.5svh;font-size:29vw}
  .s2{top:15svh;font-size:29vw}
  .hero .figure{height:clamp(340px,66svh,760px);margin-bottom:clamp(92px,19vw,134px)}
  .hero-tag{font-size:8vw;letter-spacing:.22em;text-indent:.22em;bottom:3.25rem}
}

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

.hand{
  font-family:var(--script);font-weight:400;line-height:1;
  font-size:clamp(2.75rem,10vw,4.25rem);color:var(--blue);margin:0 0 1rem;
  padding-bottom:.06em;
}
.hand--coral{color:var(--coral)}
.hand--long{font-size:clamp(2.25rem,8vw,3.5rem);line-height:1.1;max-width:15ch;
  margin-inline:auto;text-wrap:balance}
.lede{font-family:var(--disp);font-size:clamp(1.125rem,3.6vw,1.375rem);line-height:1.55;color:var(--ink);margin:0}
.note{font-family:var(--disp);font-size:1.0625rem;line-height:1.6;margin:0}
.stamp{font-family:var(--disp);font-weight:500;font-size:clamp(.75rem,1.9vw,.875rem);
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);margin:0 0 1.25rem}

/* the engraved card: a solid navy plate with a hairline ruled inside it, the
   way an invitation's reply card is printed. set in the serif, because
   everything ceremonial on this site is. */
.act{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:3.875rem;padding:0 3rem;
  font-family:var(--disp);font-weight:500;font-size:1.25rem;letter-spacing:.06em;
  text-decoration:none;border-radius:2px;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  cursor:pointer;transition:background 240ms var(--ease),color 240ms var(--ease);
}
.act::after{
  content:"";position:absolute;inset:5px;border-radius:1px;
  border:1px solid rgb(246 241 233 / .38);
  transition:border-color 240ms var(--ease);
}
.act:hover{background:transparent;color:var(--ink)}
.act:hover::after{border-color:rgb(10 17 48 / .34)}

/* the same plate, ruled but unfilled, for a secondary action */
.act--quiet{background:transparent;color:var(--ink);border-color:var(--hair)}
.act--quiet::after{border-color:rgb(10 17 48 / .16)}
.act--quiet:hover{background:transparent;color:var(--coral);border-color:var(--coral)}
.act--quiet:hover::after{border-color:rgb(192 73 47 / .30)}
.act .ico{width:1em;height:1em;margin-left:.6rem;opacity:.72;flex:0 0 auto}

.invite .act-row{justify-content:center;margin-top:2.25rem}
.link{font-family:var(--ui);font-weight:600;color:var(--blue);text-underline-offset:4px}

/* ---------------- the invitation ---------------- */

.invite{text-align:center;padding:clamp(3rem,9vw,6rem) 0 clamp(4.5rem,11vw,8rem)}

.cal{margin:2.5rem auto 0;max-width:19rem;font-family:var(--ui)}
.cal-h{font-family:var(--disp);font-weight:500;font-size:.8125rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 .875rem}
.cal-g{display:flex;flex-wrap:wrap;font-size:.875rem}
.cal-g b,.cal-g span{flex:0 0 14.2857%;height:2.4em;display:flex;align-items:center;justify-content:center}
.cal-g b{font-weight:600;font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);opacity:.75;height:2em}
.cal-g span{color:var(--ink-2)}
.cal-g .mark{position:relative;color:var(--ink);font-weight:600}
.cal-g .mark::after{
  content:"";position:absolute;left:50%;top:50%;
  width:2.9em;height:2.5em;
  transform:translate(-50%,-50%) rotate(-8deg) scale(.72);
  border:2px solid var(--coral);border-radius:50%;
  opacity:0;pointer-events:none;
}
.js .cal.lit .mark::after{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1);
  transition:opacity 520ms var(--ease) 260ms,transform 720ms var(--ease) 260ms}

/* ---------------- their words ---------------- */

.words{padding:clamp(3.5rem,10vw,7rem) 0}
.words-grid{display:grid;gap:2rem}
.arch{overflow:hidden;border-radius:9999px 9999px 8px 8px;background:rgb(255 255 255 / .25);
  box-shadow:0 24px 60px -34px rgb(10 17 48 / .55)}
.arch img{width:100%;height:clamp(19rem,54vw,29rem);object-fit:cover;object-position:center 20%}
.said+.said{margin-top:1.75rem;padding-top:1.75rem;border-top:1px solid var(--hair)}
.who{font-family:var(--ui);font-size:.6875rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--blue);margin:0 0 .625rem}
.said:nth-of-type(2) .who{color:var(--red)}   /* his */
.quote{font-family:var(--disp);font-size:clamp(1.3125rem,5vw,1.75rem);line-height:1.34;
  color:var(--ink);margin:0;text-wrap:pretty}
.words-more{margin:2rem 0 0}

/* ---------------- the day, threaded on a line ---------------- */

.day{padding:clamp(3.5rem,10vw,6.5rem) 0 clamp(4.5rem,11vw,8rem);text-align:center}
.thread{position:relative;margin:2.5rem auto 0;max-width:40rem}
.thread > svg{left:0;right:0}
.thread > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 90%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 90%,transparent 100%)}
.road-bed{fill:none;stroke:var(--coral);stroke-width:32;opacity:.11;stroke-linecap:round}
.road-line{stroke-width:1.6;opacity:.65}
.js .road-line{stroke-dasharray:10 14}
.thread-path{fill:none;stroke:var(--coral);stroke-width:1.5;opacity:.45;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.rite{position:relative;padding:1.75rem 0}
.rite-when{font-family:var(--ui);font-size:.6875rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 .5rem}
.cal-g .on{color:var(--coral);font-weight:600}
.rite h3{font-family:var(--script);font-size:clamp(2rem,7.5vw,2.75rem);line-height:1;
  color:var(--coral);margin:0 0 .625rem;font-weight:400;padding-bottom:.05em}
.rite dl{margin:0;display:inline-grid;grid-template-columns:auto auto;gap:.35rem .9rem;text-align:left}
.rite dt{font-family:var(--ui);font-size:.625rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);padding-top:.42em}
.rite dd{margin:0;font-family:var(--disp);font-size:1.0625rem;color:var(--ink)}
.venue{
  color:var(--coral);font-weight:500;text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--coral) 45%,transparent);
  padding-bottom:1px;white-space:nowrap;
  transition:border-color 200ms var(--ease),color 200ms var(--ease);
}
.venue:hover{color:var(--coral);border-bottom-color:var(--coral)}
.venue .pin{position:static;display:inline-block;width:.62em;height:.8em;margin-left:.32em;vertical-align:-.04em}

.tbc{color:var(--ink-2);text-decoration:underline dotted var(--hair);text-underline-offset:4px}

/* a per-gathering calendar link, quieter than the venue above it */
.rite-cal{margin:.875rem 0 0}
.rite-cal a{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--ui);font-size:.8125rem;font-weight:600;
  letter-spacing:.06em;color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid var(--hair);padding-bottom:2px;
  transition:color 200ms var(--ease),border-color 200ms var(--ease);
}
.rite-cal a:hover{color:var(--coral);border-bottom-color:var(--coral)}
.rite-cal .ico{width:.95em;height:.95em;opacity:.7;margin:0}
.rite .inner{max-width:21rem;text-align:left}
.rite:nth-of-type(odd) .inner{margin-left:auto}    /* right of the road */
.rite:nth-of-type(even) .inner{margin-right:auto}  /* left of the road */

.stop{
  position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px var(--paper);
  opacity:0;transform:scale(.4);pointer-events:none;
}
.stop.lit{opacity:1;transform:scale(1);transition:opacity 420ms var(--ease) var(--d,0ms),transform 520ms var(--ease) var(--d,0ms)}

/* ---------------- what you need ---------------- */

.need{padding:0 0 clamp(4.5rem,12vw,8rem)}
.rows{border-top:1px solid var(--hair)}
.row{display:grid;grid-template-columns:2rem 1fr 1.125rem;align-items:center;gap:0 1rem;
  padding:1.125rem 0;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit;
  transition:padding-left 260ms var(--ease)}
.row:hover{padding-left:.5rem}
.row:hover .row-t{color:var(--blue)}
.row:hover .row-go{transform:translateX(4px);opacity:1}
.row-n{font-family:var(--disp);font-weight:700;font-size:1.375rem;line-height:1;color:var(--coral);
  font-variant-numeric:tabular-nums}
.row-t{display:block;font-family:var(--script);font-size:clamp(1.5rem,6vw,2rem);line-height:1.05;
  color:var(--ink);padding-bottom:.04em;transition:color 200ms var(--ease)}
.row-s{display:block;font-family:var(--disp);font-size:1rem;line-height:1.45;color:var(--ink-2)}
.row-go{width:1.125rem;color:var(--ink-2);opacity:.5;transition:transform 240ms var(--ease),opacity 240ms var(--ease)}
.row-go svg{width:100%;height:auto}

/* ---------------- the close ---------------- */

.close{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;
  display:grid;place-items:end center;background:var(--field-2)}
.close .figure{height:clamp(400px,74svh,900px)}
/* the hashtag sits above the date, in clear field above their heads. the
   figure's top is at 26% of the viewport and the words start at 18%, so the
   two cannot meet. */
.close-words{position:absolute;z-index:3;left:0;right:0;top:18svh;text-align:center;padding-inline:var(--pad)}
.date{font-family:var(--script);font-size:clamp(4rem,20vw,11rem);line-height:.85;color:#fff;
  margin:0;padding-bottom:.05em;text-shadow:0 3px 44px rgb(10 17 48 / .16)}
.hash{font-family:var(--ui);font-size:.8125rem;font-weight:600;letter-spacing:.22em;color:var(--ink);margin:0}
.close .hash{margin:0 0 .875rem}
/* the paper floods up out of the foot and the photograph dissolves into it, so
   the action sits on something solid rather than on their clothes */
.close::after{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:4;pointer-events:none;
  height:52%;
  background:linear-gradient(to bottom,
    rgb(246 241 233 / 0)    0%,
    rgb(246 241 233 / .18) 34%,
    rgb(246 241 233 / .55) 62%,
    rgb(246 241 233 / .88) 84%,
    rgb(246 241 233 / 1)  100%);
}
.close-act{position:absolute;z-index:5;left:0;right:0;bottom:clamp(80px,10vw,132px);text-align:center}

.credit{background:var(--paper);padding:1.75rem var(--pad) 2.5rem;text-align:center;
  font-family:var(--disp);font-size:.9375rem;color:var(--ink-2)}
.credit a{color:var(--ink);text-underline-offset:3px}

/* ---------------- wide ---------------- */

@media (min-width:48em){
  :root{--pad:3rem;--bar:4.5rem}
  .bar-nav{display:flex;align-items:center;padding:.3125rem}
  .bar-nav a{
    display:inline-flex;align-items:center;height:2.125rem;padding-inline:1rem;
    border-radius:999px;text-decoration:none;color:var(--ink);
    font-family:var(--disp);font-size:1rem;font-weight:500;letter-spacing:.01em;
    transition:background 220ms var(--ease),color 220ms var(--ease);
  }
  .bar-nav a:hover{background:rgb(255 255 255 / .55);color:var(--coral)}
  .menu-btn{display:none}

  .words-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1fr);gap:3.5rem;align-items:center}
  .arch img{height:clamp(22rem,30vw,27rem)}
  /* the couple stay in the middle, where they belong. the names stagger across
     them, hers from the left and his from the right, so each one loses a single
     end behind them rather than being cut through the middle. */
  /* the two names read as one phrase, clear above the couple. anything that
     overlaps them takes a bite out of the middle of a word, because they stand
     430-odd pixels wide in the centre of the frame. */

  .row{grid-template-columns:2.75rem 1fr 1.25rem;padding:1.375rem 0}
  .row-n{font-size:1.75rem}
  .thread{max-width:48rem}
  /* the entries pull outward into the wrap's slack so the script swashes
     clear the road instead of sitting on it */
  /* the entries sit close to the road, about 20px off it, so each stop reads
     as belonging to the gathering beside it. they run outward into the wrap's
     slack instead, which buys the width back. */
  .rite .inner{max-width:19rem}
  .rite:nth-of-type(odd) .inner{margin-right:-1.5rem}
  /* the entries on the left face the road, so their edge hugs it the way the
     right-hand ones do and each stop sits beside its own heading */
  .rite:nth-of-type(even) .inner{margin-left:-1.5rem;text-align:right}
  .rite:nth-of-type(even) dl{text-align:left;margin-left:auto}
  .rite{padding:2.25rem 0}
}

/* ---------------- motion ---------------- */

.js .rise{opacity:0;transform:translateY(1.1rem)}
.js .rise.lit{opacity:1;transform:none;
  transition:opacity 820ms var(--ease) var(--d,0ms),transform 820ms var(--ease) var(--d,0ms)}
.js .thread-path.lit{transition:stroke-dashoffset 2200ms var(--ease);stroke-dashoffset:0}
.js .ring{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.js .ring.lit{stroke-dashoffset:0;transition:stroke-dashoffset 1100ms var(--ease) 240ms}

@media (prefers-reduced-motion:reduce){
  .js .rise,.js .rise.lit{opacity:1;transform:none;transition:none}
  .js .thread-path,.js .ring{stroke-dashoffset:0;transition:none}
  html{scroll-behavior:auto}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* on a phone the road runs as a rail down the left and the gatherings sit
   beside it, because a centred curve has nowhere to go at 390px */
@media (max-width:47.99em){
  .thread{padding-left:3.5rem;max-width:none}
  .thread > svg{left:0;right:auto;width:3.5rem}
  .rite .inner{max-width:none;margin:0}
  .rite{padding-block:1.5rem}
}

/* ============================================================
   inner pages
   ============================================================ */

.page-head{text-align:center;padding:calc(var(--bar) + clamp(2.5rem,8vw,5rem)) 0 clamp(3rem,9vw,5.5rem)}
.page-head .hand{font-size:clamp(2.5rem,9vw,4rem);line-height:1.08}

.section{padding:clamp(3rem,9vw,5rem) 0 clamp(4rem,10vw,6.5rem);text-align:center}
.page-head:not(:has(.lede)){padding-bottom:clamp(1.5rem,4vw,2.5rem)}

.pairs{margin:2rem auto 0;display:grid;gap:1.25rem;text-align:left;max-width:30rem}
.pairs dt{
  font-family:var(--ui);font-size:.6875rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:.3rem;
}
.pairs dd{margin:0;font-family:var(--disp);font-size:1.0625rem;line-height:1.5;color:var(--ink)}

.calls{list-style:none;margin:1.75rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
/* the secondary card: the same engraved plate, ruled but unfilled, so it sits
   under the primary action instead of competing with it */
.wa{
  display:inline-flex;align-items:center;gap:.6rem;min-height:3.125rem;padding:0 1.375rem;
  border-radius:2px;border:1px solid var(--hair);background:transparent;
  font-family:var(--disp);font-size:1.0625rem;font-weight:500;letter-spacing:.02em;
  color:var(--ink);text-decoration:none;
  transition:border-color 200ms var(--ease),color 200ms var(--ease);
}
.wa:hover{border-color:var(--coral);color:var(--coral)}

/* whose side they are on: hers is blue, his is red, the same pair as the names */
.wa--hers{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 34%,transparent)}
.wa--hers:hover{color:var(--blue);border-color:var(--blue)}
.wa--his{color:var(--red);border-color:color-mix(in srgb,var(--red) 34%,transparent)}
.wa--his:hover{color:var(--red);border-color:var(--red)}
.wa svg{width:1em;height:1em;flex:0 0 auto;opacity:.75}

.section .act-row{justify-content:center;margin-top:2.25rem}
.pairs + .note{margin-top:2.25rem}

/* ---------------- aso ebi ---------------- */

.prices{display:grid;gap:1.5rem;margin:0 auto;max-width:46rem}
.price{padding:1.5rem 0;border-top:1px solid var(--hair)}
.price:last-child{border-bottom:1px solid var(--hair)}
.price-n{
  font-family:var(--disp);font-weight:700;font-size:clamp(2rem,7vw,2.75rem);
  line-height:1;color:var(--coral);margin:0 0 .5rem;font-variant-numeric:tabular-nums;
}
.price-t{font-family:var(--script);font-size:clamp(1.5rem,5.5vw,2rem);line-height:1;
  color:var(--ink);margin:0 0 .35rem;padding-bottom:.04em}
.price-s{margin:0;font-family:var(--disp);font-size:1rem;color:var(--ink-2)}

.acct{margin:2rem auto 0;max-width:22rem}
.acct-n{
  appearance:none;width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.9rem 1.1rem;border:1px solid var(--hair);border-radius:2px;
  background:transparent;cursor:pointer;font-family:var(--ui);
  transition:border-color 200ms var(--ease);
}
.acct-n:hover{border-color:var(--coral)}
.acct-n span{font-size:1.375rem;font-weight:600;letter-spacing:.06em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.acct-n em{font-style:normal;font-size:.6875rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--coral)}
.acct-name{margin:.875rem 0 0;font-family:var(--disp);font-size:1.0625rem;color:var(--ink)}
.acct-bank{margin:.15rem 0 0;font-family:var(--ui);font-size:.8125rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}

@media (min-width:48em){
  .prices{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}
  .price{border-top:1px solid var(--hair);border-bottom:0}
  .price:last-child{border-bottom:0}
}

@media (min-width:48em){
  .pairs{grid-template-columns:auto minmax(0,1fr);gap:1rem 1.75rem;align-items:baseline;max-width:34rem}
  .pairs dt{margin:0;text-align:right;padding-top:.3em}
}

/* ============================================================
   our love story
   ============================================================ */

.beat{display:grid;gap:2rem;padding-block:clamp(3rem,9vw,5.5rem)}
.beat-fig{margin:0}
.beat .hand{margin-bottom:1.5rem}

.voice{padding-block:1.125rem}
.voice + .voice{border-top:1px solid var(--hair);margin-top:.5rem}
.voice .who{margin-bottom:.55rem}
.voice--her .who{color:var(--blue)}
.voice--him .who{color:var(--red)}
.voice .quote{
  font-family:var(--disp);font-size:clamp(1.125rem,3.6vw,1.3125rem);
  line-height:1.55;color:var(--ink);margin:0;text-wrap:pretty;
}
.voice .quote + .quote{margin-top:.9rem}

/* the proposal has its own room: her crimson backdrop, and candlelight */
.band--crimson{background:var(--room);color:#C9A19A;position:relative}
.proposal{padding-block:clamp(4.5rem,12vw,8rem)}
.proposal-plate{position:absolute;inset:0;z-index:0;overflow:hidden}
.proposal-plate img{width:100%;height:100%;object-fit:cover;object-position:64% 38%;opacity:.5}
.proposal-plate::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--room) 0%,rgb(42 2 6 / .55) 26%,
                             rgb(42 2 6 / .72) 70%,var(--room) 100%);
}
.proposal-said{position:relative;z-index:1}
.proposal .hand{color:#F1C9BE}
.proposal .voice{border-color:rgb(247 235 232 / .18)}
.proposal .voice + .voice{border-top-color:rgb(247 235 232 / .18)}
.proposal .voice .quote{color:#F7EBE8}
.proposal .voice--her .who{color:#9FB6F0}
.proposal .voice--him .who{color:#E8907C}

@media (min-width:48em){
  .beat{grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:3.75rem;align-items:center}
  .beat--flip .beat-fig{order:2}
  .beat .arch img{height:clamp(22rem,32vw,30rem)}
}

/* the vine from their own invitation, lifted off the card and framing the page
   the way it frames the printed one */
.gift{position:relative;overflow:hidden;min-height:100svh;display:grid;align-items:center}
.gift-inner{
  position:relative;z-index:1;text-align:center;
  padding:calc(var(--bar) + clamp(3rem,9vw,5rem)) 0 clamp(3.5rem,10vw,6rem);
}
.gift-inner .hand{font-size:clamp(2.5rem,9vw,4rem);line-height:1.08;margin-bottom:1.5rem}
.gift-inner .act-row{justify-content:center;margin-top:2.25rem}

.vine{position:absolute;z-index:0;pointer-events:none;user-select:none}
/* clear of the floating bar, which owns the top of the page */
.vine--tl{top:clamp(4.5rem,8vw,7rem);left:0;width:clamp(15rem,30vw,26rem);transform:translate(-5%,0)}
.vine--br{bottom:clamp(1rem,3vw,2.5rem);right:0;width:clamp(12rem,23vw,20rem);transform:translate(6%,0)}

@media (max-width:47.99em){
  .vine--tl{top:4.5rem;width:11rem;transform:translate(-14%,0)}
  .vine--br{bottom:3.5rem;width:9.5rem;transform:translate(16%,0)}
}

/* ---------------- the hero arrives ---------------- */

/* hers arrives from the left, his from the right, and they meet */
@keyframes nameFromLeft{
  from{opacity:0;transform:translateX(calc(-50% - 7vw))}
  to{opacity:1;transform:translateX(-50%)}
}
@keyframes nameFromRight{
  from{opacity:0;transform:translateX(calc(-50% + 7vw))}
  to{opacity:1;transform:translateX(-50%)}
}
@keyframes figureIn{
  from{opacity:0;transform:translateY(2.25rem) scale(1.035)}
  to{opacity:1;transform:none}
}
@keyframes markIn{from{opacity:0}to{opacity:1}}

.js .hero .figure{animation:figureIn 1250ms var(--ease) 60ms both}
.js .s1{animation:nameFromLeft 1150ms var(--ease) 260ms both}
.js .s2{animation:nameFromRight 1150ms var(--ease) 400ms both}
.js .hero-tag{animation:markIn 900ms var(--ease) 780ms both}
.js .bar{animation:markIn 700ms var(--ease) 620ms both}

@media (prefers-reduced-motion:reduce){
  .js .hero .figure,.js .s1,.js .s2,.js .hero-tag,.js .bar{animation:none}
}

/* ---------------- a page that opens on the field ---------------- */

.page-open{position:relative;overflow:hidden;display:grid;align-items:center;min-height:46svh}
.page-open .page-head{
  position:relative;z-index:1;
  padding:calc(var(--bar) + clamp(2.25rem,6vw,3.75rem)) 0 clamp(3rem,7vw,4.5rem);
}
.page-open .hand{color:var(--blue)}
.page-open .vine--tl{top:clamp(3.5rem,6.5vw,5.5rem);width:clamp(12rem,23vw,19rem);transform:translate(-3%,0)}
.page-open .vine--br{bottom:clamp(3rem,5vw,4.25rem);width:clamp(9rem,17vw,15rem);transform:translate(6%,0)}

/* the first beat begins right under the tear, not a screen later */
.page-open + .band .beat{padding-top:clamp(2.5rem,7vw,4rem)}

@media (max-width:47.99em){
  /* a phone has no room for two sprigs beside a two-line script heading, so
     keep the one and push it into the corner */
  .page-open{min-height:0}
  .page-open .page-head{padding-block:calc(var(--bar) + 3.25rem) 3rem}
  .page-open .vine--tl{top:3.25rem;width:8rem;transform:translate(-34%,0);opacity:.85}
  .page-open .vine--br{display:none}
}