/* =========================================================
   Katharine & David  —  July 25, 2026
   Theme: Juno  ·  warm off-white, terracotta, soft botanicals
   ========================================================= */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}

/* ---------- Tokens ---------- */
:root{
  --paper:#F1EDE3;        /* warm off-white page */
  --paper-2:#E8E3D5;      /* deeper sand, alternating sections */
  --card:#F7F4EC;         /* card surface */
  --ink:#211E18;          /* near-black text + headings */
  --ink-soft:#6E685A;     /* muted secondary text */
  --accent:#BE6440;       /* terracotta */
  --accent-soft:#D69A72;  /* soft peach */
  --line:#D2CCBC;         /* hairline */

  --grotesk:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;

  --wrap:1180px;
  --measure:38rem;
  --ease:cubic-bezier(.23,1,.32,1);
}

/* ---------- Base ---------- */
body{
  font-family:var(--grotesk);
  font-size:1.02rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;line-height:1.08;
  letter-spacing:-.015em;color:var(--ink)}
p{max-width:var(--measure)}
a{text-decoration:none;transition:color .2s ease}

/* ---------- Helpers ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.4rem,5vw,2.5rem)}
.center{text-align:center}
.center p{margin-inline:auto}
.section{padding-block:clamp(3.6rem,7vw,6.5rem)}
.section-lead{padding-block:clamp(1.7rem,4vw,2.8rem)}
.eyebrow{
  font-family:var(--grotesk);text-transform:uppercase;letter-spacing:.26em;
  font-size:.7rem;font-weight:600;line-height:1.5;color:var(--accent);
  margin-bottom:1rem;
}
.lede{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.3rem,2.4vw,1.6rem);line-height:1.5;letter-spacing:-.005em;
  color:var(--ink);
}
.muted{color:var(--ink-soft)}
h2{font-size:clamp(2rem,4.2vw,3.2rem)}

/* ---------- Divider ---------- */
.divider{display:flex;align-items:center;justify-content:center;gap:.8rem;
  margin:1.5rem auto 0}
.divider::before,.divider::after{content:"";height:1px;
  width:clamp(34px,7vw,70px);background:var(--line)}
.divider__mark{width:6px;height:6px;background:var(--accent);
  transform:rotate(45deg);flex:none}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-family:var(--grotesk);
  font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:.95rem 2.05rem;border-radius:100px;
  transition:background-color .2s var(--ease),color .2s var(--ease),
    border-color .2s var(--ease),transform .12s var(--ease);
}
.btn:active{transform:scale(.98)}
.btn--solid{background:var(--accent);color:#FBF7EE}
.btn--ghost{border:1px solid var(--ink);color:var(--ink)}
.btn--light{border:1px solid var(--paper);color:var(--paper)}
@media (hover:hover) and (pointer:fine){
  .btn--solid:hover{background:var(--ink)}
  .btn--ghost:hover{background:var(--ink);color:var(--paper)}
  .btn--light:hover{background:var(--paper);color:var(--ink)}
}

/* ---------- Top strip (floats over hero/page-head) ---------- */
.topstrip{
  position:absolute;top:0;left:0;right:0;z-index:60;
  background:transparent;color:#FAF6EC;text-align:center;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.7rem 1rem;font-weight:500;
}
.topstrip a{border-bottom:1px solid rgba(250,246,236,.6);
  padding-bottom:1px;margin-left:.45rem}
.topstrip a:hover{color:var(--accent-soft);border-color:var(--accent-soft)}

/* ---------- Header / Nav (floats transparent over hero/page-head) ---------- */
.site-header{
  position:absolute;top:34px;left:0;right:0;z-index:50;
  background:transparent;border-bottom:0;
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;
  padding-block:1.15rem}
.brand{font-family:var(--serif);font-weight:400;font-size:1.32rem;
  letter-spacing:.01em;color:#FAF6EC;white-space:nowrap}
.brand:hover{color:var(--accent-soft)}
.nav{display:flex;align-items:center;gap:1.1rem}
.nav a{font-family:var(--grotesk);font-size:.72rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:#FAF6EC;white-space:nowrap}
.nav a:hover{color:var(--accent-soft)}
.nav a.is-active{color:var(--accent-soft)}
.nav .btn--ghost{border-color:#FAF6EC;color:#FAF6EC}
.nav .btn{padding:.62rem 1.35rem}
.nav .btn--ghost:hover{background:#FAF6EC;color:var(--ink);border-color:#FAF6EC}
.nav-toggle{display:none;width:30px;height:22px}
.nav-toggle span{display:block;height:1.5px;background:#FAF6EC;margin:6px 0;
  transition:transform .3s var(--ease),opacity .3s var(--ease)}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- Hero (homepage) ---------- */
.hero{
  position:relative;min-height:88vh;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--paper-2) url('../images/juno-hero.webp') center 40%/cover no-repeat;
  overflow:hidden;
}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,27,21,.50) 0%,rgba(30,27,21,.38) 22%,
    rgba(30,27,21,.42) 60%,rgba(30,27,21,.34) 100%)}
.hero__inner{position:relative;z-index:2;padding:7rem 1.5rem 3rem}
.hero .eyebrow{color:#F3E4D4;margin-bottom:1.7rem}
.hero h1{font-weight:300;font-size:clamp(3.2rem,9vw,7.2rem);
  line-height:.98;letter-spacing:-.02em;color:#FAF6EC}
.hero h1 .amp{font-style:italic;color:#E7B58C}
.hero__rule{width:54px;height:1px;background:#FAF6EC;opacity:.7;
  margin:2.1rem auto 1.8rem}
.hero__meta{font-family:var(--grotesk);font-size:.78rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:#FAF6EC}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  z-index:3;font-family:var(--grotesk);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(250,246,236,.85)}

/* ---------- Page header (inner pages) ---------- */
.page-head{background:var(--paper-2);text-align:center;
  padding-block:clamp(3.6rem,8vw,6rem)}
.page-head .eyebrow{margin-bottom:1.1rem}
.page-head h1{font-size:clamp(2.6rem,6vw,4.4rem)}

.page-head--floral{position:relative;
  background-color:var(--paper-2);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  padding:clamp(8.5rem,13vw,10rem) 0 clamp(3.8rem,8vw,5.8rem)}
.page-head--floral::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(30,27,21,.50) 0%,rgba(30,27,21,.42) 30%,rgba(30,27,21,.44) 70%,rgba(30,27,21,.36) 100%)}
.page-head--floral > *{position:relative;z-index:2}
.page-head--floral h1{color:#FAF6EC}
.page-head--floral .eyebrow{color:#F3E4D4}
.page-head--floral .divider::before,
.page-head--floral .divider::after{background:rgba(250,246,236,.55)}
.page-head--floral .divider__mark{background:#E7B58C}

.btn-row{margin:2.4rem auto 0;display:flex;gap:1rem;justify-content:center;
  flex-wrap:wrap;max-width:none}

/* ---------- Sections ---------- */
.band{background:var(--paper-2)}
.section-head{text-align:center;margin-bottom:3.4rem}
.section-head .eyebrow{margin-bottom:1rem}
.section-head h2{font-size:clamp(2.2rem,4.4vw,3.4rem)}

/* ---------- Full-bleed image break ---------- */
.photo-break{overflow:hidden;height:clamp(320px,52vh,560px)}
.photo-break img{width:100%;height:100%;object-fit:cover}
.photo-break--tall{height:clamp(420px,62vh,620px)}
.photo-break--short{height:clamp(300px,46vh,500px)}

/* ---------- Welcome / portrait band ---------- */
.portrait{background:var(--paper-2);display:grid;grid-template-columns:1.05fr .95fr}
.portrait__img{position:relative;overflow:hidden;min-height:600px}
.portrait__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait__text{padding:clamp(3rem,6vw,6rem) clamp(2rem,5.4vw,5.4rem);
  display:flex;flex-direction:column;justify-content:center}
.portrait__text .eyebrow{margin-bottom:1.2rem}
.portrait__text h2{margin-bottom:1.3rem}
.portrait__text p{color:var(--ink-soft);margin-bottom:1rem}
.portrait__text .btn{margin-top:1.6rem;align-self:flex-start}

/* ---------- Countdown band ---------- */
.countdown-band{position:relative;text-align:center;
  background:var(--paper-2) url('../images/juno-amber.webp') center/cover no-repeat;
  padding-block:clamp(4rem,9vw,6.5rem)}
.countdown-band::after{content:"";position:absolute;inset:0;
  background:rgba(241,237,227,.34)}
.countdown-band__inner{position:relative;z-index:2}
.countdown-band .eyebrow{margin-bottom:1rem}
.countdown-band h2{margin-bottom:2.4rem}
.countdown{display:flex;justify-content:center;gap:clamp(1.6rem,5vw,3.6rem)}
.cd-unit__num{font-family:var(--serif);font-weight:300;
  font-size:clamp(2.8rem,6vw,4.1rem);line-height:1}
.cd-unit__label{font-family:var(--grotesk);font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;color:var(--ink-soft);
  margin-top:.6rem}
.countdown-band .btn{margin-top:2.8rem}

/* ---------- Cards (weekend at a glance) ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:3px;
  padding:clamp(2rem,3vw,2.8rem)}
.card .when{font-family:var(--grotesk);font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;color:var(--accent);
  margin-bottom:1.3rem}
.card h3{font-weight:300;font-size:1.8rem;line-height:1.1;margin-bottom:.9rem}
.card .where{color:var(--ink-soft);font-size:.95rem}

/* ---------- Floral background bands ---------- */
.weekend-band{position:relative;
  background:var(--paper-2) url('../images/juno-blooms.webp') center/cover no-repeat}
.weekend-band::after{content:"";position:absolute;inset:0;
  background:rgba(241,237,227,.48);z-index:1}
.weekend-band > *{position:relative;z-index:2}

/* ---------- Plan your visit (paper, item cards) ---------- */
.plan{background:var(--paper)}
.plan__list{max-width:46rem;margin:0 auto}
.plan__item{display:flex;gap:1.4rem;align-items:center;
  padding:1.5rem 1.8rem;
  background:var(--paper-2);border:1px solid var(--line);border-radius:3px;
  margin-bottom:.9rem;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.plan__item:last-child{margin-bottom:0}
.plan__item .idx{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:1.15rem;color:var(--accent);min-width:1.8rem}
.plan__item h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;
  margin-bottom:.2rem}
.plan__item p{color:var(--ink-soft);font-size:.92rem;margin:0;max-width:none}
.plan__item .arrow{margin-left:auto;color:var(--accent);font-size:1.1rem}
@media (hover:hover){
  .plan__item:hover{border-color:var(--accent);background:var(--card)}
  .plan__item:hover h3{color:var(--accent)}
}

/* ---------- Big display heading (Welcome) ---------- */
.h-big{font-size:clamp(2.6rem,5.4vw,4.2rem);line-height:1.02;letter-spacing:-.02em}

/* ---------- Story block (Our Story narrative) ---------- */
.story-block{max-width:62rem;margin:0 auto}
.story-block__media{margin-bottom:clamp(2.4rem,5vw,3.4rem);overflow:hidden;
  border-radius:3px;aspect-ratio:16/9}
.story-block__media img{width:100%;height:100%;object-fit:cover}
.story-block__text{max-width:38rem;margin:0 auto;text-align:left}
.story-block__text .eyebrow{display:block;text-align:center;margin-bottom:.9rem}
.story-block__text h2{text-align:center;margin-bottom:1.7rem}
.story-block__text p{color:var(--ink-soft);max-width:none;margin-bottom:1.1rem;
  line-height:1.7}
.story-block__text p:last-child{margin-bottom:0}
.story-block__text em{font-family:var(--serif);font-style:italic;color:var(--ink)}

/* ---------- Spotify embed ---------- */
.spotify-embed{margin:2.4rem auto 0;border-radius:14px;overflow:hidden;
  box-shadow:0 6px 24px rgba(30,27,21,.10);max-width:42rem}
.spotify-embed iframe{display:block;width:100%;border:0;border-radius:14px}

/* ---------- Event grid (The Weekend 2×2) ---------- */
.event-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;
  max-width:64rem;margin:0 auto}
.event-grid .event{max-width:none;margin:0;
  display:flex;flex-direction:column}
@media (max-width:760px){.event-grid{grid-template-columns:1fr}}

/* ---------- Equal-height homepage cards ---------- */
.grid-3 .card{display:flex;flex-direction:column}

/* ---------- Sticky header on scroll (paper + blur) ---------- */
.site-header.is-stuck{position:fixed;top:0;
  background:rgba(241,237,227,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.site-header.is-stuck .brand,
.site-header.is-stuck .nav a{color:var(--ink)}
.site-header.is-stuck .nav a:hover,
.site-header.is-stuck .nav a.is-active{color:var(--accent)}
.site-header.is-stuck .nav .btn--ghost{border-color:var(--ink);color:var(--ink)}
.site-header.is-stuck .nav .btn--ghost:hover{background:var(--ink);color:var(--paper)}
.site-header.is-stuck .nav-toggle span{background:var(--ink)}
.topstrip.is-stuck{opacity:0;pointer-events:none;transition:opacity .2s ease}
.topstrip{transition:opacity .25s ease}
.site-header{transition:background .25s ease,backdrop-filter .25s ease}

/* ---------- Feature (image + text) ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.feature__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.feature--flip .feature__media{order:2}
.feature__text .eyebrow{margin-bottom:.8rem}
.feature__text h2{margin-bottom:1rem;font-size:clamp(1.9rem,3.6vw,2.7rem)}
.feature__text p{color:var(--ink-soft)}

/* ---------- Entry list ---------- */
.entrylist{max-width:46rem;margin-inline:auto;text-align:left}
.entry{border-top:1px solid var(--line);padding-block:1.8rem}
.entry:first-child{border-top:none}
.entry h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;
  margin-bottom:.3rem}
.entry .meta{display:block;font-family:var(--grotesk);text-transform:uppercase;
  letter-spacing:.16em;font-size:.66rem;font-weight:600;color:var(--accent);
  margin-bottom:.6rem}
.entry p{margin:0;color:var(--ink-soft)}
.entry .link{color:var(--accent);border-bottom:1px solid var(--accent);
  padding-bottom:1px}

/* ---------- Schedule ---------- */
.event{max-width:42rem;margin:0 auto 1.4rem;background:var(--card);
  border:1px solid var(--line);border-radius:3px;
  padding:clamp(1.7rem,3vw,2.4rem);text-align:center}
.event .when{font-family:var(--grotesk);text-transform:uppercase;
  letter-spacing:.18em;font-size:.68rem;font-weight:600;color:var(--accent);
  margin-bottom:.55rem}
.event h3{font-weight:300;font-size:1.8rem;margin-bottom:.5rem}
.event .place{color:var(--ink-soft);margin-inline:auto;margin-bottom:.55rem}
.event p{margin-inline:auto;color:var(--ink-soft)}
.event__cal{display:flex;justify-content:center;gap:1.3rem;
  margin-top:auto;padding-top:1.1rem}
.cal-link{font-family:var(--grotesk);font-size:.64rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--accent);
  border-bottom:1px solid rgba(190,100,64,.4);padding-bottom:2px;
  transition:color .2s ease,border-color .2s ease}
.cal-link:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- FAQ ---------- */
.faq{max-width:44rem;margin-inline:auto;text-align:left}
.faq details{border-top:1px solid var(--line);padding:1.3rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-family:var(--serif);font-weight:400;font-size:1.25rem;
  color:var(--ink);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:1.2rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--grotesk);color:var(--accent);
  font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:.9rem 0 0;color:var(--ink-soft)}
.faq .link{color:var(--accent);border-bottom:1px solid var(--accent)}

/* ---------- Attire board ---------- */
.board{display:block;max-width:62rem;width:100%;margin:2rem auto 0;
  border-radius:3px;border:1px solid var(--line)}

/* ---------- Form ---------- */
.form{max-width:38rem;margin-inline:auto;text-align:left}
.field{margin-bottom:1.5rem}
.field>label,.field legend{display:block;font-family:var(--grotesk);
  font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink);margin-bottom:.5rem}
.field fieldset{border:0;margin:0;padding:0;min-width:0}
.field input[type=text],.field input[type=email],.field textarea{
  width:100%;font-family:var(--grotesk);font-size:1rem;color:var(--ink);
  padding:.8rem .95rem;border:1px solid var(--line);border-radius:4px;
  background:var(--card)}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);
  outline-offset:1px}
.choice{display:flex;gap:1.5rem;flex-wrap:wrap}
.choice label{display:flex;align-items:center;gap:.5rem;font-family:var(--grotesk);
  font-size:.96rem;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--ink)}
.choice input[type=radio]{accent-color:var(--accent)}
.form button.btn{width:100%;margin-top:.4rem}
.form-note{font-family:var(--grotesk);font-size:.86rem;color:var(--ink-soft);
  font-style:italic}
.req{color:var(--accent);font-weight:400}
.form-status{margin-top:1rem;font-family:var(--grotesk);display:none}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--paper);text-align:center;
  padding-block:clamp(3.6rem,7vw,5rem)}
.site-footer .monogram{font-family:var(--serif);font-weight:300;font-size:2.3rem;
  color:var(--paper);display:inline-flex;gap:.12em;line-height:1}
.site-footer .monogram .amp{font-style:italic;color:var(--accent-soft)}
.site-footer__meta{font-family:var(--grotesk);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.2em;
  color:rgba(241,237,227,.6);margin:.7rem auto 0;max-width:none}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;
  gap:.6rem 1.6rem;margin-top:2.4rem}
.footer-nav a{font-family:var(--grotesk);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.15em;color:rgba(241,237,227,.82)}
.footer-nav a:hover{color:var(--accent-soft)}
.footer-note{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:1.15rem;color:rgba(241,237,227,.7);
  margin:2.4rem auto 0;max-width:none}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .5s ease,transform .5s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:center;gap:1.6rem;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:2.2rem 1.5rem 2.6rem}
  .nav a{font-size:.8rem;letter-spacing:.14em;color:var(--ink)}
  .nav a:hover{color:var(--accent)}
  .nav .btn--ghost{border-color:var(--ink);color:var(--ink)}
  .nav .btn--ghost:hover{background:var(--ink);color:var(--paper)}
  .nav.is-open{display:flex}
}
@media (max-width:880px){
  .grid-3,.feature,.plan__grid,.portrait{grid-template-columns:1fr}
  .feature--flip .feature__media{order:0}
  .portrait__img{min-height:380px}
  .plan__img{aspect-ratio:16/10}
}
@media (max-width:520px){
  body{font-size:1rem}
  .countdown{gap:1.3rem}
  .hero h1{font-size:clamp(2.8rem,13vw,4rem)}
  .portrait__text{padding:3rem 1.6rem}
}