/* ============================================================
   Wedding VIP Portal — styling
   Reuses the main site's palette and type.
   ============================================================ */

:root{
  --sage-deep:#4a5840;
  --sage:#6f8064;
  --sage-soft:#8aa07c;
  --sage-tint:#e7eade;
  --ivory:#f7f4ec;
  --ivory-2:#fbf9f3;
  --cream-card:#fffdf8;
  --ink:#3a3f33;
  --ink-soft:#5d6450;
  --gold:#ad8a4e;
  --gold-soft:#c7a86f;
  --line:#d9d6c8;

  --serif:"Cormorant Garamond", Georgia, serif;
  --script:"Pinyon Script", cursive;
  --sans:"Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

body.hp{
  margin:0;
  font-family:var(--serif);
  color:var(--ink);
  background:var(--ivory);
  font-size:18px;
  line-height:1.7;
  -webkit-text-size-adjust:100%;
}
img{ max-width:100%; display:block; }
sup{ font-size:.55em; }

.hp-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Top bar ---------- */
.hp-top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 1.2rem;
  padding-top:calc(.7rem + env(safe-area-inset-top));
  background:rgba(247,244,236,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hp-top__brand{
  font-family:var(--script); font-size:1.7rem; line-height:1;
  color:var(--sage-deep); text-decoration:none;
}
.hp-top__back{
  font-family:var(--sans); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.18em; color:var(--ink-soft); text-decoration:none;
}
.hp-top__back:hover{ color:var(--gold); }

/* ---------- Layout ---------- */
.hp-main{
  max-width:720px;
  margin-inline:auto;
  padding:2.4rem 1.3rem 4rem;
}

.hp-eyebrow{
  font-family:var(--sans); font-weight:400;
  text-transform:uppercase; letter-spacing:.32em;
  font-size:.66rem; color:var(--gold);
  margin:0 0 .8rem; text-align:center;
}

/* ---------- Buttons ---------- */
.hp-btn{
  display:inline-block;
  font-family:var(--sans); font-weight:400;
  text-transform:uppercase; letter-spacing:.2em;
  font-size:.76rem;
  padding:.9em 2.2em;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.hp-btn:active{ transform:scale(.97); }
.hp-btn--solid{
  background:var(--sage-deep); color:var(--ivory-2);
  box-shadow:0 8px 24px -12px rgba(74,88,64,.7);
}
.hp-btn--solid:hover{ background:var(--sage); }

.hp-link-btn{
  display:inline-block;
  background:none; border:none; cursor:pointer;
  font-family:var(--sans); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--sage); padding:.5em 0;
  border-bottom:1px solid var(--gold-soft);
}
.hp-link-btn:hover{ color:var(--sage-deep); }
.hp-link-btn--sm{ font-size:.62rem; letter-spacing:.14em; }

/* ---------- Gate ---------- */
.hp-gate{
  text-align:center;
  min-height:60vh;
  display:flex; align-items:center; justify-content:center;
}
.hp-who{ text-align:center; padding-top:3rem; }
.hp-gate__title, .hp-who__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.2rem, 9vw, 3.2rem);
  color:var(--sage-deep); margin:0 0 .6rem; line-height:1.1;
}
.hp-who__title{ margin-bottom:1.9rem; }
.hp-gate__lead, .hp-who__lead{
  color:var(--ink-soft); margin:0 auto 2.2rem; max-width:26rem;
}
.hp-gate__form{
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}
#hp-pass{
  font-family:var(--serif); font-size:1.1rem;
  text-align:center;
  padding:.8em 1em; width:min(100%, 20rem);
  border:1px solid var(--line); border-radius:12px;
  background:var(--cream-card); color:var(--ink);
}
#hp-pass:focus{ outline:2px solid var(--sage-soft); outline-offset:1px; }
.hp-gate__error{
  font-family:var(--sans); font-size:.8rem; color:#a4453a; margin:.2rem 0 0;
}

/* ---------- Sections list ---------- */
.hp-sections{ text-align:center; padding-top:1.5rem; }
.hp-sections__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.7rem, 6vw, 2.4rem);
  color:var(--sage-deep); margin:0 0 1.8rem; line-height:1.15;
}
.hp-sections__list{
  display:flex; flex-direction:column; gap:.7rem;
  max-width:34rem; margin:0 auto; text-align:left;
}
.hp-section{
  width:100%;
  background:var(--cream-card);
  border:1px solid var(--line); border-radius:14px;
  padding:1.1rem 1.2rem;
  cursor:pointer; font-family:inherit; color:inherit;
  display:flex; flex-direction:column; gap:.3rem;
  transition:border-color .25s, transform .2s var(--ease), box-shadow .25s;
}
.hp-section:hover{
  border-color:var(--gold-soft);
  transform:translateY(-1px);
  box-shadow:0 14px 30px -22px rgba(74,88,64,.6);
}
.hp-section__name{
  font-family:var(--serif); font-weight:600; font-size:1.3rem;
  color:var(--sage-deep); line-height:1.2;
}
.hp-section__meta{
  font-family:var(--sans); font-size:.82rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; color:var(--gold);
}
.hp-section__count{
  font-family:var(--sans); font-size:.68rem;
  text-transform:uppercase; letter-spacing:.13em; color:var(--ink-soft);
}

/* ---------- Section header (task list) ---------- */
.hp-tasks__head{
  border-bottom:1px solid var(--line);
  padding-bottom:.6rem; margin:.7rem 0 1.4rem;
}

/* ---------- Task list ---------- */
.hp-phase{ margin-bottom:2.2rem; }
.hp-phase__head{
  border-bottom:1px solid var(--line);
  padding-bottom:.5rem; margin-bottom:1rem;
}
.hp-phase__name{
  font-family:var(--serif); font-weight:600; font-size:1.5rem;
  color:var(--sage-deep); margin:0;
}
.hp-phase__meta{
  font-family:var(--sans); font-size:.92rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--gold); margin:.4rem 0 0;
}
.hp-phase__place{
  font-size:.95rem; color:var(--ink-soft); margin:.2rem 0 0;
}
.hp-phase__note{
  font-size:.98rem; color:var(--ink-soft); line-height:1.5;
  margin:.6rem 0 0;
}

.hp-card{
  width:100%; text-align:left;
  background:var(--cream-card);
  border:1px solid var(--line); border-radius:14px;
  padding:1.1rem 1.15rem;
  margin-bottom:.7rem;
  cursor:pointer;
  font-family:inherit; color:inherit;
  transition:border-color .25s, transform .2s var(--ease), box-shadow .25s;
}
.hp-card:hover{
  border-color:var(--gold-soft);
  transform:translateY(-1px);
  box-shadow:0 14px 30px -22px rgba(74,88,64,.6);
}
.hp-card--mine{
  border-color:var(--sage);
  border-left:4px solid var(--sage-deep);
  background:#f3f5ee;
}
.hp-card__title{
  font-family:var(--serif); font-weight:600; font-size:1.2rem;
  color:var(--ink); margin:0 0 .55rem; line-height:1.25;
}
.hp-card__chips{ display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; }

.hp-chip{
  font-family:var(--sans); font-size:.6rem;
  text-transform:uppercase; letter-spacing:.1em;
  padding:.35em .7em; border-radius:999px;
  background:var(--sage-tint); color:var(--sage-deep);
}
.hp-chip--me{ background:var(--sage-deep); color:var(--ivory-2); }
.hp-chip--none{ background:#f0ded9; color:#a4453a; }
.hp-chip--fyi{ background:#f6efdd; color:var(--gold); }
.hp-chip--groomsmen{ background:var(--sage-tint); color:var(--sage-deep); }
.hp-chip--bridesmaids{ background:#ecdfe4; color:#8a5a6b; }
.hp-chip--party,
.hp-chip--everyone{ background:#e6dcc4; color:#776139; }

.hp-empty{
  font-family:var(--sans); font-size:.9rem; color:var(--ink-soft);
  text-align:center; padding:2rem 0;
}

/* ---------- Task detail ---------- */
.hp-task{ padding-top:.5rem; }
.hp-task__title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.7rem, 6vw, 2.3rem);
  color:var(--sage-deep); margin:1rem 0 .4rem; line-height:1.15;
}
.hp-task__phase{
  font-family:var(--sans); font-size:.92rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--gold); margin:0 0 1rem;
}
.hp-task__chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.6rem; }
.hp-task__intro{ margin:0 0 1.6rem; color:var(--ink-soft); line-height:1.6; }

.hp-task h3{
  font-family:var(--sans); font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; font-size:.72rem;
  color:var(--sage-deep); margin:1.8rem 0 .7rem;
}
.hp-steps{ margin:0; padding-left:1.3rem; }
.hp-steps li{ margin-bottom:.6rem; }
.hp-notes{ margin:0; padding-left:1.3rem; list-style:none; }
.hp-notes li{
  position:relative; margin-bottom:.5rem; color:var(--ink-soft); font-size:1rem;
}
.hp-notes li::before{
  content:""; position:absolute; left:-1rem; top:.7em;
  width:5px; height:5px; border-radius:50%; background:var(--gold-soft);
}

.hp-photos{
  display:grid; grid-template-columns:1fr 1fr; gap:.7rem;
  margin-top:.5rem;
}
@media(max-width:460px){ .hp-photos{ grid-template-columns:1fr; } }
.hp-photo{
  margin:0; border:1px solid var(--line); border-radius:12px;
  overflow:hidden; background:var(--sage-tint); cursor:pointer;
}
.hp-photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.hp-photo figcaption{
  font-family:var(--sans); font-size:.66rem; color:var(--ink-soft);
  padding:.5rem .6rem;
}

/* ---------- Lightbox ---------- */
.hp-lightbox{
  position:fixed; inset:0; z-index:50;
  background:rgba(40,46,34,.92);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2rem 1.2rem;
}
.hp-lightbox img{
  max-width:100%; max-height:78vh; border-radius:8px;
  object-fit:contain;
}
.hp-lightbox__cap{
  font-family:var(--sans); font-size:.72rem; color:rgba(255,255,255,.8);
  margin:.9rem 0 0; text-align:center;
}
.hp-lightbox__close{
  position:absolute; top:1rem; right:1.2rem;
  background:none; border:none; color:#fff; font-size:2rem;
  cursor:pointer; line-height:1;
}

/* ---------- Footer ---------- */
.hp-footer{
  background:var(--sage-deep); color:var(--ivory);
  text-align:center; padding:2.4rem 1.2rem;
  font-family:var(--sans); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.18em;
}
.hp-footer span{
  font-family:var(--serif); font-style:italic; color:var(--gold-soft);
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}