/* ===================================================================
   COMPONENTS — nav, links, floating bits
   =================================================================== */

/* ===============================================================
   UNDERLINED LINK
   The original only ever marks a link by underlining it in place —
   "please RSVP HERE", "royal botanical garden", "mca". Same rule
   everywhere, so links read as part of the sentence.
   =============================================================== */
/* the rule is drawn with text-decoration, not a pseudo-element, so it
   follows the text when a link wraps onto a second line (see
   "the Royal Botanical Gardens" in the venue cards) */
.ulink{
  color:inherit;position:relative;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:currentColor;
  text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);
  transition:color .3s ease,text-decoration-color .3s ease;
}
.ulink:hover{color:var(--brown);text-decoration-color:currentColor}
.hero__rsvp .ulink,.rsvp__cta .ulink{color:var(--brown)}
.hero__rsvp .ulink:hover{color:var(--ink)}
.ulink--light,.rsvp__cta .ulink--light{color:var(--paper)}
.ulink--light:hover{color:var(--paper);opacity:.82}
.ulink--sm{
  text-transform:uppercase;letter-spacing:.16em;
  font-size:var(--t-fine);color:var(--brown);
}
/* the link has not been pointed at a form yet (js/rsvp.js) */
.ulink.is-unset{cursor:default;opacity:.55}

/* ===============================================================
   NAV — hidden over the hero, slides down once you scroll past it
   =============================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line);
  transform:translateY(-101%);
  transition:transform .55s var(--ease-soft);
}
@supports (backdrop-filter:blur(10px)){
  .nav{background:rgba(255,255,255,.76);backdrop-filter:blur(12px) saturate(1.15)}
}
html.nav-on .nav{transform:none}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--nav-h)}
.nav__mark{
  font-family:'Madelyn Rough',cursive;color:var(--brown);text-decoration:none;
  font-size:clamp(21px,2.2vw,30px);line-height:1;white-space:nowrap;
  letter-spacing:0;transition:opacity .3s ease;
}
.nav__mark em{color:var(--sage);font-style:normal;padding-inline:.12em}
.nav__mark:hover{opacity:.7}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2.4vw,36px)}
.nav__link{
  position:relative;color:var(--brown);text-decoration:none;text-transform:uppercase;
  font-size:clamp(9.5px,1vw,12.5px);letter-spacing:.18em;
  padding-block:6px;transition:color .3s ease;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:center;transition:transform .4s var(--ease-soft);
}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{color:var(--ink)}
/* the RSVP entry stays underlined, matching how the page marks links */
.nav__link--cta{margin-left:clamp(2px,.8vw,10px)}
.nav__link--cta::after{transform:scaleX(1);opacity:.75}
.nav__link--cta:hover::after{opacity:1}

/* reading progress hairline along the bottom edge of the bar */
.nav__progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--sage),var(--brown));
  transform:scaleX(var(--p,0));transform-origin:left;
}

/* burger */
.nav__burger{display:none;width:38px;height:38px;place-items:center;color:var(--brown);margin-right:-6px}
.nav__burger svg{width:24px;height:16px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.nav__burger line{transition:transform .4s var(--ease-soft),opacity .25s ease;transform-origin:center}
html.menu-on .nav__burger .l1{transform:translateY(6px) rotate(45deg)}
html.menu-on .nav__burger .l2{opacity:0}
html.menu-on .nav__burger .l3{transform:translateY(-6px) rotate(-45deg)}

/* full-screen menu for phones */
.menu{
  position:fixed;inset:0;z-index:39;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(14px,3.4vh,30px);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;
}
html.menu-on .menu{opacity:1;visibility:visible}
html.menu-on,html.menu-on body{overflow:hidden}
.menu__link{
  font-family:'Madelyn Rough',cursive;color:var(--brown);text-decoration:none;
  font-size:clamp(30px,8.4vw,52px);line-height:1.1;letter-spacing:0;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft),color .3s ease;
}
html.menu-on .menu__link{opacity:1;transform:none;transition-delay:calc(.06s * var(--i,0) + .08s)}
.menu__link:hover{color:var(--ink)}
.menu__date{
  margin-top:clamp(10px,2.4vh,24px);color:var(--sage);text-transform:uppercase;
  letter-spacing:.22em;font-size:var(--t-fine);
  opacity:0;transition:opacity .5s ease .5s;
}
html.menu-on .menu__date{opacity:1}

@media (max-width:900px){
  .nav__links{display:none}
  .nav__burger{display:grid}
}

/* ===============================================================
   BACK TO TOP
   =============================================================== */
.to-top{
  position:fixed;right:clamp(14px,2.4vw,30px);bottom:clamp(14px,2.4vw,30px);z-index:35;
  width:clamp(44px,4.4vw,54px);height:clamp(44px,4.4vw,54px);
  display:grid;place-items:center;color:var(--brown);
  background:rgba(255,255,255,.86);border-radius:50%;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .4s ease,transform .4s var(--ease-soft),visibility .4s,color .3s ease;
}
@supports (backdrop-filter:blur(6px)){
  .to-top{background:rgba(255,255,255,.6);backdrop-filter:blur(8px)}
}
html.top-on .to-top{opacity:1;visibility:visible;transform:none}
.to-top:hover{color:var(--ink);transform:translateY(-3px)}
.to-top svg{width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.to-top .ring{opacity:.6}

/* ===============================================================
   ODDS AND ENDS
   =============================================================== */
.skip{
  position:absolute;left:50%;top:0;transform:translate(-50%,-140%);z-index:60;
  background:var(--paper);color:var(--brown);border:1px solid var(--line);
  padding:12px 22px;text-transform:uppercase;letter-spacing:.18em;
  font-size:11px;text-decoration:none;transition:transform .3s var(--ease-soft);
}
.skip:focus{transform:translate(-50%,14px)}