/* ========= Tokens ========= */
:root{
  --espresso:#2c2520;
  --mocha:#3a302a;
  --cocoa:#4a3f38;
  --latte:#e9e1d7;
  --cream:#f5efe6;
  --ink:#111;
  --white:#fff;
  --accent:#d1b18a;
  --accent-2:#b28a64;
  --muted:#cfc7be;

  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --trans:220ms cubic-bezier(.2,.6,.2,1);
}

/* ========= Base ========= */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  background:linear-gradient(180deg, var(--espresso), var(--mocha));
  color:var(--cream);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
img{ max-width:100%; display:block }
.container{ width:min(1200px, 92%); margin-inline:auto }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ========= Page Transition (initial + external link sweep) ========= */
.page-transition{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:linear-gradient(90deg, var(--espresso), var(--mocha));
  transform:translateX(-100%); transition:transform 450ms ease-in-out;
}

/* ========= Topbar ========= */
.topbar{
  display:flex; gap:.6rem; align-items:center; justify-content:center; flex-wrap:wrap;
  background: linear-gradient(90deg, var(--cocoa), var(--mocha));
  color:#e8dfd4; text-align:center; padding:8px 16px; font-size:.94rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar a{ color:var(--accent); text-decoration:underline }
.topbar__sep{ opacity:.6 }
.topbar__dates{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .6rem; border-radius:999px;
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.2);
  color:#f2e9df; font-weight:600; letter-spacing:.01em; backdrop-filter: blur(4px);
  white-space:nowrap;
}
.topbar__dates i{ opacity:.9 }

/* ========= Header / Nav ========= */
.header{
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(1.2) blur(10px);
  background: color-mix(in srgb, var(--espresso) 80%, transparent);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition: box-shadow var(--trans), background var(--trans);
}
.header.scrolled{
  background: color-mix(in srgb, var(--espresso) 92%, transparent);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; height:72px }
.brand{ display:flex; align-items:center; gap:.75rem; color:var(--cream); text-decoration:none }
.brand__logo{
  width:42px; height:42px; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 2px rgba(255,255,255,.1);
  background:#fff1;
}
.brand__text{ font-family:"Playfair Display", serif; font-weight:800; letter-spacing:.4px; font-size:1.3rem }
.brand__year{ color:var(--accent) }

.nav{ position:relative }
.nav__toggle{
  display:none; background:transparent; border:1px solid rgba(255,255,255,.15);
  color:#eee; width:40px; height:40px; border-radius:10px;
}
.nav__menu{ display:flex; gap:1rem; align-items:center; list-style:none; margin:0; padding:0 }
.nav__link{
  color:#eae3da; text-decoration:none; padding:.6rem .8rem; border-radius:10px;
  transition:transform var(--trans), background var(--trans), color var(--trans);
}
.nav__link:hover{ background:rgba(255,255,255,.06); transform:translateY(-1px) }
.nav__link.is-active{ color:#fff; font-weight:600 }
.nav__cta{
  color:var(--ink); background:var(--accent); border-radius:12px; padding:.6rem 1rem;
  text-decoration:none; font-weight:600; box-shadow: var(--shadow);
  transition: transform var(--trans), background var(--trans), color var(--trans);
}
.nav__cta:hover{ transform:translateY(-1px); background:var(--accent-2) }

/* Mobile nav */
@media (max-width: 960px){
  .nav__toggle{ display:inline-grid; place-items:center }
  .nav__menu{
    position:fixed; inset:auto 0 0 0; top:72px; height:0; overflow:hidden;
    flex-direction:column; gap:0; padding:0;
    background:linear-gradient(180deg, rgba(28,22,19,.98), rgba(44,37,32,.98));
    border-top:1px solid rgba(255,255,255,.08);
    transition: height var(--trans), padding var(--trans);
  }
  .nav__menu.open{ height:calc(100vh - 72px); padding:12px 16px }
  .nav__menu li{ width:100% }
  .nav__link, .nav__cta{ display:block; width:100%; text-align:center; margin:.25rem 0 }
}

/* ========= Views & SPA transitions ========= */
#app{ position:relative; min-height:calc(100vh - 72px - 38px) }
.view{
  position:absolute; inset:0; overflow-x:hidden; overflow-y:auto;
  display:none; will-change: transform, opacity; background:transparent;
}
.view.is-active{ display:block }

/* slide classes for SPA transitions */
.view.enter-from-right{ transform:translateX(40px); opacity:0 }
.view.enter-from-left{  transform:translateX(-40px); opacity:0 }
.view.enter-active{ transition: transform 420ms cubic-bezier(.2,.6,.2,1), opacity 420ms cubic-bezier(.2,.6,.2,1); transform:translateX(0); opacity:1 }
.view.exit-to-left{  transform:translateX(-40px); opacity:0; transition: transform 420ms cubic-bezier(.2,.6,.2,1), opacity 420ms }
.view.exit-to-right{ transform:translateX(40px);  opacity:0; transition: transform 420ms cubic-bezier(.2,.6,.2,1), opacity 420ms }

/* ========= Hero / Carousel ========= */
.hero{ position:relative; min-height:calc(100vh - 72px - 38px); isolation:isolate }
.carousel{ position:relative; height:100% }
.carousel__track{ position:absolute; inset:0; overflow:hidden }
.carousel__slide{
  position:absolute; inset:0; opacity:0; transform:scale(1.04);
  background-image: var(--bg); background-size:cover; background-position:center;
  transition: opacity 900ms ease, transform 2400ms ease;
}
.carousel__slide::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(80% 60% at 50% 30%, transparent 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.6) 100%);
}
.carousel__slide.is-active{ opacity:1; transform:scale(1) }
.hero__scrim{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(26,20,17,.25), rgba(26,20,17,.55) 60%, rgba(26,20,17,.85)); pointer-events:none }

.hero__content{ position:relative; z-index:2; display:grid; gap:1rem; padding-top:min(20vh, 140px) }
.hero__title{
  font-family:"Playfair Display", serif; font-weight:800; letter-spacing:.12em;
  font-size:clamp(2.8rem, 7vw, 6rem); line-height:1.05; text-shadow:0 2px 24px rgba(0,0,0,.45)
}
.hero__edition{ font-size:1rem; letter-spacing:.2em; text-transform:uppercase; color:#f6efea; opacity:.9 }
.hero__subtitle{ max-width:48ch; color:#f0e8de; opacity:.95; line-height:1.6 }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.25rem }
.badges{ display:flex; flex-wrap:wrap; gap:.5rem }
.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .8rem; border-radius:999px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.25);
  color:#fff; font-weight:600; letter-spacing:.02em; backdrop-filter: blur(6px);
}

/* Carousel controls & dots */
.carousel__control{
  position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); color:#fff; background:rgba(0,0,0,.25);
  display:grid; place-items:center; z-index:3; cursor:pointer; transition: background var(--trans), transform var(--trans), opacity var(--trans)
}
.carousel__control:hover{ background:rgba(0,0,0,.4); transform:translateY(-50%) scale(1.03) }
.carousel__control--prev{ left:18px } .carousel__control--next{ right:18px }
.carousel__dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:22px; display:flex; gap:.5rem; z-index:3 }
.carousel__dots button{ width:10px; height:10px; border-radius:50%; border:0; background:rgba(255,255,255,.45); cursor:pointer; transition:transform var(--trans), background var(--trans) }
.carousel__dots button[aria-current="true"]{ background:#fff; transform:scale(1.2) }

.hero__scroll{
  position:absolute; left:50%; transform:translateX(-50%); bottom:64px; z-index:3; color:#ffffffd0; font-size:1.1rem;
  border:1px solid rgba(255,255,255,.25); border-radius:999px; width:42px; height:42px; display:grid; place-items:center; backdrop-filter: blur(4px);
  transition: background var(--trans), transform var(--trans)
}
.hero__scroll:hover{ background:rgba(255,255,255,.08); transform:translateX(-50%) translateY(-2px) }
.hero__scroll i{ animation:bob 1500ms ease-in-out infinite }
@keyframes bob{ 0%,100%{ transform:translateY(-1px) } 50%{ transform:translateY(2px) } }

/* ========= Quote ========= */
.quote{ position:relative; padding:72px 0; background:var(--mocha) }
.quote__wrap{ position:relative; z-index:1 }
.quote blockquote{
  font-family:"Playfair Display", serif; font-weight:600; font-size:clamp(1.4rem, 3vw, 2.2rem);
  color:var(--latte); line-height:1.4; position:relative
}
.quote__mark{ color:var(--accent); font-size:1.2em }
.quote__bg{ position:absolute; inset:0; z-index:0; opacity:.15; background-image:var(--bg); background-size:cover; background-position:center }

/* ========= Mission ========= */
.mission{
  background: radial-gradient(80% 80% at 30% 10%, rgba(199,236,210,.5), rgba(71,89,58,.25) 60%, transparent 100%), linear-gradient(180deg, #43533f, #2f3a30);
  color:#eaf3ea; padding:96px 0
}
.mission__wrap{ max-width:900px }
.mission h2{ font-family:"Playfair Display", serif; font-size:clamp(1.8rem, 4vw, 2.8rem); margin:0 0 12px 0 }
.mission p{ color:#e6efe6; opacity:.92; line-height:1.8 }

/* ========= Discover ========= */
.section{ padding:96px 0 }
.grid-2{ display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center }
@media (max-width: 900px){ .grid-2{ grid-template-columns:1fr } }
.stack h3{ font-family:"Playfair Display", serif; font-size:clamp(1.6rem, 4vw, 2.4rem); margin:0 0 10px }
.stack p{ color:var(--muted); line-height:1.8 }
.card.art{ background:#fff1; border:1px solid #ffffff1a; padding:12px; border-radius:var(--radius); box-shadow:var(--shadow) }
.card.art img{ border-radius:calc(var(--radius) - 6px) }

/* ========= Why Join ========= */
.why{ background: var(--espresso) }
.why__grid{ display:grid; grid-template-columns: 1.2fr 1fr; min-height:520px }
@media (max-width: 900px){ .why__grid{ grid-template-columns:1fr } }
.why__image{ background-image:var(--bg); background-size:cover; background-position:center }
.why__text{
  background: linear-gradient(180deg, #a57f68, #8e6a55);
  padding:48px 36px; color:#f7ede4; display:flex; flex-direction:column; justify-content:center
}
.why__text h3{ font-family:"Playfair Display", serif; font-size:clamp(1.6rem, 4vw, 2.2rem); margin-top:0 }
.why__list{ display:grid; gap:12px; padding-left:18px }
.why__list li{ line-height:1.7 }

/* ========= FAQs ========= */
.faqs h3{ font-family:"Playfair Display", serif; font-size:clamp(1.6rem, 4vw, 2.2rem); margin:0 0 16px }
.accordion{ border-top:1px solid #ffffff1a; border-bottom:1px solid #ffffff1a }
.accordion details{ border-bottom:1px solid #ffffff12 }
.accordion summary{
  list-style:none; cursor:pointer; padding:18px 8px; display:flex; align-items:center; justify-content:space-between; color:#f0e8de
}
.accordion summary::-webkit-details-marker{ display:none }
.accordion__content{ padding:0 8px 18px; color:var(--muted); line-height:1.7 }
.accordion details[open] summary i{ transform:rotate(180deg) }
.accordion summary i{ transition: transform var(--trans) }

/* ========= CTA ========= */
.cta{ position:relative; padding:80px 0; background:transparent }
.cta__bg{ position:absolute; inset:0; background-image:var(--bg); background-size:cover; background-position:center; filter:brightness(.5); border-radius:20px; width:min(1200px, 92%); margin-inline:auto }
.cta__wrap{ position:relative; z-index:1; text-align:center }
.cta h3{ font-family:"Playfair Display", serif; font-size:clamp(1.8rem, 4vw, 2.6rem); margin:0 0 6px }
.cta p{ color:#eee; margin:6px 0 18px }

/* Buttons */
.btn{ display:inline-block; font-weight:600; border-radius:12px; padding:.6rem 1rem; text-decoration:none }
.btn--primary{ background:var(--accent); color:var(--ink) }
.btn--primary:hover{ background:var(--accent-2) }
.btn--ghost{ border:1px solid rgba(255,255,255,.6); color:#fff }
.btn--ghost:hover{ background:rgba(255,255,255,.1) }
.btn--dark { background:#111; color:#fff; border:1px solid #000 }
.btn--dark:hover { background:#000; color:#fff; transform:translateY(-2px) }
.btn--light { background:#fff; color:#111; border:1px solid #fff }
.btn--light:hover { background:#f0f0f0; color:#000; transform:translateY(-2px) }

/* ========= Footer ========= */
.footer{ background:#1f1a17; padding:36px 0 0 }
.legal__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.event-dates{ color:#e5dbcf; display:inline-flex; align-items:center; gap:.5rem; font-weight:600 }
.event-dates i{ opacity:.85 }

/* ====== Generic Icon Grid & Tiles ====== */
.icon-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap:1.2rem;
}
.icon-tile{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:1.4rem;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.75rem;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans), background var(--trans);
  cursor:pointer; text-decoration:none; color:inherit;
}
.icon-tile:hover{
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
}
.icon-tile.is-soon{ opacity:.78; cursor:not-allowed }
.icon-wrap{
  font-size:2.1rem; width:64px; height:64px; border-radius:16px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}

/* ====== Councils (hero + icon tiles + reveal) ====== */
.councils-hero{
  position:relative; padding:90px 0 60px; overflow:hidden;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6));
}
.councils-hero__bg{
  position:absolute; inset:0; z-index:-1;
  background-image:var(--bg); background-size:cover; background-position:center; filter:brightness(.55);
}
.councils-hero__content h1{
  margin:0 0 6px; text-align:center; font-family:"Playfair Display", serif;
  font-size:clamp(2.2rem, 5vw, 3rem);
}
.councils-hero__content p{ text-align:center; color:#e8e0d6; margin:0 0 16px; }
.councils { padding: 80px 0; background: var(--mocha); color: var(--cream) }

/* reveal panel inside council tile */
.council-tile{ position:relative; overflow:hidden }
.council-tile .tile-reveal{
  position:absolute; inset:auto 12px 12px 12px; bottom:12px;
  background: rgba(17,17,17,.72);
  border:1px solid rgba(255,255,255,.14);
  color:#f1eae0; padding:12px; border-radius:12px;
  transform: translateY(110%); opacity:0;
  transition: transform var(--trans), opacity var(--trans);
}
.council-tile:hover .tile-reveal,
.council-tile:focus-within .tile-reveal{
  transform: translateY(0); opacity:1;
}
.tile-reveal ul{ margin:0 0 10px 0; padding-left:18px; text-align:left; color:#d9d1c7; line-height:1.5 }
.quick-links{ display:flex; gap:.5rem; flex-wrap:wrap }
.quick-links a{
  padding:.4rem .6rem; border-radius:8px; background:rgba(255,255,255,.1);
  color:#fff; font-size:.85rem; text-decoration:none; border:1px solid rgba(255,255,255,.14)
}
.quick-links a:hover{ background:var(--accent); color:var(--ink) }

/* ====== Register ====== */
.register-hero{
  position:relative; padding:90px 0 50px; overflow:hidden;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6));
}
.register-hero__bg{
  position:absolute; inset:0; z-index:-1;
  background-image:var(--bg); background-size:cover; background-position:center; filter:brightness(.55);
}
.register-hero__content h1{
  margin:0 0 6px; text-align:center; font-family:"Playfair Display", serif;
  font-size:clamp(2.2rem, 5vw, 3rem);
}
.register-hero__content p{ text-align:center; color:#e8e0d6; margin:0 0 10px; }
.register{ padding:70px 0; background:var(--espresso) }
.register-icons .reg-meta{ color:var(--muted); margin:0 }
.register-note{ margin-top:12px; color:#d9d1c7; font-size:.95rem; opacity:.9 }

/* ====== Information ====== */
.info-hero{
  position:relative; padding:90px 0 50px; overflow:hidden;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6));
}
.info-hero__bg{
  position:absolute; inset:0; z-index:-1;
  background-image:var(--bg); background-size:cover; background-position:center; filter:brightness(.55);
}
.info-hero__content h1{
  margin:0 0 6px; text-align:center; font-family:"Playfair Display", serif;
  font-size:clamp(2.2rem, 5vw, 3rem);
}
.info-hero__content p{ text-align:center; color:#e8e0d6; margin:0 0 10px; }
.info-cards{ background: var(--espresso) }

.dress .dress__title{
  font-family:"Playfair Display", serif; font-size:clamp(1.8rem, 4vw, 2.6rem); margin:0 0 6px;
}
.dress .dress__intro{ color:#e8e0d6; margin:0 0 18px }
.dress-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1.1rem }
.dress-card{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px; padding:1rem;
}
.dress__note{ color:#d9d1c7; margin-top:12px }

/* ====== Placeholder pages (Team / Gallery / Contact) ====== */
.parallax-hero{
  position:relative; min-height:70vh; display:grid; place-items:center; overflow:hidden;
  background: radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,.15), rgba(0,0,0,.65)),
              url("about:blank");
  background-image: var(--bg);
  background-size:cover; background-position:center;
}
.placeholder-hero__content{ position:relative; z-index:1; text-align:center }
.hover-heading{
  font-family:"Playfair Display", serif;
  font-size:clamp(2rem, 6vw, 3.2rem);
  color:#f3eadf; padding:.6rem 1rem; border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  transition: transform 420ms cubic-bezier(.2,.6,.2,1), box-shadow var(--trans), background var(--trans);
  backdrop-filter: blur(6px);
}
.hover-heading:hover{
  transform:translateY(-4px);
  background: rgba(0,0,0,.48);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}