:root{
    --ink: #11141d;
    --ink-deep: #090b12;
    --ivory: #f6f2e8;
    --ivory-dim: #e9e2d1;
    --gold: #c8a24a;
    --gold-soft: #ddc07f;
    --rose: #7d2f3b;
    --rose-soft: #9c4854;
    --stone: #b7b0a0;
    --line: rgba(200,162,74,0.25);
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--ink);
    color: var(--ivory);
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1,h2,h3, .display{
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin: 0;
  }

  a{ color: inherit; }
  img{ max-width: 100%; display:block; }

  .eyebrow{
    font-family:'Work Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 0.72rem;
    color: var(--gold-soft);
    font-weight: 500;
  }

  .wrap{
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 28px;
  }

  /* ---------- Buttons ---------- */
  .cta-row{
    display:flex;
    gap: 18px;
    flex-wrap: wrap;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding: 18px 38px;
    font-family:'Work Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration:none;
    border-radius: 2px;
    border: 1.5px solid transparent;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
    cursor: pointer;
  }
  .btn:focus-visible{
    outline: 2px solid var(--gold-soft);
    outline-offset: 3px;
  }
  .btn-gold{
    background: var(--gold);
    color: var(--ink-deep);
  }
  .btn-gold:hover{
    background: var(--gold-soft);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(200,162,74,0.25);
  }
  .btn-outline{
    background: transparent;
    color: var(--ivory);
    border-color: var(--rose-soft);
  }
  .btn-outline:hover{
    background: var(--rose);
    border-color: var(--rose);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(125,47,59,0.35);
  }
  .btn-ghost{
    background: transparent;
    color: var(--gold-soft);
    border-color: var(--gold);
  }
  .btn-ghost:hover{
    background: var(--gold);
    color: var(--ink-deep);
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(200,162,74,0.25);
  }
  @media (prefers-reduced-motion: reduce){
    .btn, .step-bar span, .reveal{ transition: none !important; animation: none !important; }
  }

  /* ---------- Hero ---------- */
  .hero{
    min-height: 100svh;
    display:flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: 140px 0 90px;
    background:
      radial-gradient(ellipse at 50% -10%, rgba(200,162,74,0.14), transparent 55%),
      linear-gradient(180deg, var(--ink) 0%, var(--ink) 70%, var(--ink-deep) 100%);
    overflow: hidden;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(200,162,74,0.035) 40px);
    pointer-events:none;
  }
  .hero-inner{ position: relative; z-index: 1; text-align:center; }
  .hero .eyebrow{ display:block; margin-bottom: 22px; }
  .hero .eyebrow-sub{
    margin-top: -14px;
    margin-bottom: 6px;
    font-size: 0.65rem;
    opacity: 0.75;
  }
  .hero .eyebrow-sub + .eyebrow-sub{
    margin-top: -2px;
    margin-bottom: 22px;
  }
  .hero h1{
    font-size: clamp(2.6rem, 7vw, 5.4rem);
    color: var(--ivory);
    line-height: 1.05;
  }
  .hero h1 em{
    font-style: italic;
    color: var(--gold);
  }
  .hero .sub{
    margin: 26px auto 44px;
    max-width: 560px;
    font-size: 1.15rem;
    color: var(--stone);
  }
  .hero .cta-row{ justify-content:center; margin-bottom: 46px; }
  .hero .meta{
    font-family:'Work Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--gold-soft);
    letter-spacing: 0.04em;
  }
  .hero .meta span{ color: var(--stone); }
  .hero .meta .sep{ margin: 0 12px; color: var(--line); }
  .hero .meta.highlights{ margin-top: 10px; }
  .hero .meta.highlights span:not(.sep){ color: var(--gold-soft); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; }

  .arch{
    width: min(70%, 420px);
    margin: 0 auto 8px;
    color: var(--gold);
    opacity: 0.75;
  }
  .arch svg{ width:100%; height:auto; fill:none; stroke: currentColor; stroke-width: 1.4; }

  .top-cta-row{
    display:flex;
    gap: 12px;
    justify-content:center;
    margin-bottom: 26px;
  }
  .btn-small{
    padding: 11px 24px;
    font-size: 0.78rem;
  }

  .spark{
    color: var(--gold);
    font-size: 1.4rem;
    margin: 30px 0 8px;
    opacity: 0.9;
  }

  .lights{
    position:absolute;
    top:0; left:0; right:0;
    height: 90px;
    z-index: 2;
    opacity: 0.9;
    pointer-events: none;
  }

  .sparkle-field{
    position:absolute;
    inset:0;
    z-index: 0;
    pointer-events:none;
    overflow:hidden;
  }
  .sparkle-field svg{ width:100%; height:100%; }

  /* ---------- Step motif divider ---------- */
  .step-divider{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap: 6px;
    height: 46px;
    margin: 0 auto;
    padding-top: 8px;
  }
  .step-divider span{
    display:block;
    width: 5px;
    background: linear-gradient(180deg, var(--gold-soft), var(--gold));
    border-radius: 1px;
    opacity: 0.85;
  }
  .step-divider span:nth-child(1){ height: 8px; }
  .step-divider span:nth-child(2){ height: 14px; }
  .step-divider span:nth-child(3){ height: 20px; }
  .step-divider span:nth-child(4){ height: 26px; }
  .step-divider span:nth-child(5){ height: 32px; }
  .step-divider span:nth-child(6){ height: 38px; }
  .step-divider span:nth-child(7){ height: 44px; }

  /* ---------- Details strip ---------- */
  .details{
    background: var(--ink-deep);
    padding: 56px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .details-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align:center;
  }
  .details-grid .item .eyebrow{ margin-bottom: 10px; }
  .details-grid .item .val{
    font-family:'Cormorant Garamond', serif;
    font-size: 1.5rem;
    color: var(--ivory);
  }
  @media (max-width: 760px){
    .details-grid{ grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  }

  /* ---------- Story section ---------- */
  /* ---------- Lineup ---------- */
  .lineup{
    background: var(--ink-deep);
    padding: 90px 0;
    text-align:center;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .lineup .eyebrow{ margin-bottom: 18px; }
  .lineup h2{
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    color: var(--ivory);
    max-width: 640px;
    margin: 0 auto 50px;
  }
  .lineup-grid{
    display:flex;
    gap: 28px;
    justify-content:center;
    flex-wrap:wrap;
  }
  .lineup-card{
    width: 320px;
    max-width: 100%;
  }
  .lineup-photo{
    aspect-ratio: 4/3;
    border: 1px solid var(--gold);
    border-radius: 2px;
    overflow:hidden;
    margin-bottom: 18px;
    background: rgba(246,242,232,0.03);
  }
  .lineup-photo img{
    width:100%; height:100%;
    object-fit: cover;
    display:block;
  }
  .lineup-photo--placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .lineup-photo--placeholder span{
    font-size: 0.8rem;
    color: var(--stone);
    font-style: italic;
  }
  .lineup-photo--framed{
    background: var(--ivory);
    padding: 18px;
  }
  .lineup-photo--framed img{
    object-fit: contain;
  }
  .lineup-card h3{
    font-family:'Cormorant Garamond', serif;
    font-size: 1.4rem;
    color: var(--gold-soft);
    margin: 0 0 4px;
  }
  .lineup-card p{
    color: var(--stone);
    font-size: 0.88rem;
    margin: 0;
  }

  .story{
    background: var(--ivory);
    color: var(--ink-deep);
    padding: 120px 0 100px;
  }
  .story .eyebrow{ color: var(--rose); }
  .story h2{
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    max-width: 720px;
    margin: 18px 0 48px;
    color: var(--ink-deep);
  }
  .story .lede{
    font-family:'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-style: italic;
    color: var(--rose);
    max-width: 640px;
    margin-bottom: 40px;
    line-height: 1.5;
  }
  .story-body{
    columns: 1;
    max-width: 720px;
  }
  .story-body p{
    margin: 0 0 22px;
    font-size: 1.04rem;
    color: #2c2822;
  }
  .story-body p.pull{
    font-family:'Cormorant Garamond', serif;
    font-size: 1.7rem;
    font-style: italic;
    color: var(--rose);
    border-left: 3px solid var(--rose);
    padding-left: 24px;
    margin: 38px 0;
    line-height: 1.4;
  }

  .photo-pair{
    display:flex;
    gap: 22px;
    margin: 46px 0 42px;
    max-width: 720px;
  }
  .photo-pair figure{
    flex: 1;
    margin: 0;
  }
  .photo-pair img{
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 1px solid var(--gold);
    border-radius: 2px;
    display:block;
  }
  .photo-pair figcaption{
    font-family:'Work Sans', sans-serif;
    font-size: 0.82rem;
    color: #6b6558;
    text-align:center;
    margin-top: 10px;
    font-style: italic;
  }
  @media (max-width: 560px){
    .photo-pair{ flex-direction: column; max-width: 320px; margin-left:auto; margin-right:auto; }
  }

  /* ---------- Cause / charities ---------- */
  .causes{
    background: var(--ivory);
    padding: 100px 0;
    text-align:center;
  }
  .causes .eyebrow{ margin-bottom: 18px; color: var(--rose); }
  .causes h2{
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    color: var(--ink-deep);
    max-width: 640px;
    margin: 0 auto 50px;
  }
  .charity-row{
    display:flex;
    gap: 24px;
    justify-content:center;
    flex-wrap: wrap;
    margin-bottom: 56px;
  }
  .charity-logos{
    display:flex;
    gap: 44px;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.12);
    margin-top: 8px;
  }
  .charity-logos{ padding-top: 44px; }
  .charity-logo{
    max-width: 220px;
    height: auto;
    opacity: 1;
  }
  .charity-card{
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    padding: 34px 30px;
    min-width: 260px;
    max-width: 320px;
    text-align:left;
    border-radius: 3px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  }
  .charity-card h3{
    font-size: 1.5rem;
    color: var(--rose);
    margin-bottom: 10px;
  }
  .charity-card p{
    color: #4a453b;
    font-size: 0.96rem;
    margin:0;
  }

  /* ---------- Final CTA ---------- */
  .final-cta{
    background: linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%);
    padding: 90px 0 70px;
    text-align:center;
    border-top: 1px solid var(--line);
  }
  .final-cta h2{
    font-size: clamp(2rem, 4.6vw, 3rem);
    color: var(--ivory);
    margin-bottom: 12px;
  }
  .final-cta .sub{ color: var(--stone); margin-bottom: 40px; }
  .final-cta .cta-row{ justify-content:center; }

  .get-in-touch{
    background: var(--ink-deep);
    padding: 80px 0;
    text-align:center;
    border-top: 1px solid var(--line);
  }
  .get-in-touch .eyebrow{ display:block; margin-bottom: 18px; }
  .get-in-touch p{
    max-width: 560px;
    margin: 0 auto 34px;
    color: var(--stone);
    font-size: 1.05rem;
  }

  /* ---------- Top nav ---------- */
  .topnav{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(9,11,18,0.82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .topnav-inner{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 28px;
  }
  .topnav-brand{
    font-family:'Cormorant Garamond', serif;
    font-size: 1.15rem;
    color: var(--gold-soft);
    white-space: nowrap;
  }
  .topnav-links{
    display:flex;
    gap: 26px;
    flex: 1;
    justify-content:center;
    overflow-x:auto;
  }
  .topnav-links a{
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ivory);
    text-decoration:none;
    white-space:nowrap;
    opacity: 0.85;
    transition: opacity 0.2s ease, color 0.2s ease;
  }
  .topnav-links a:hover{ opacity: 1; color: var(--gold-soft); }
  .topnav-cta{
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--ink-deep);
    background: var(--gold);
    padding: 9px 20px;
    border-radius: 2px;
    text-decoration:none;
    white-space:nowrap;
    transition: background 0.2s ease;
  }
  .topnav-cta:hover{ background: var(--gold-soft); }
  @media (max-width: 640px){
    .topnav-brand{ display:none; }
    .topnav-inner{ padding: 14px 18px; }
    .topnav-links{ gap: 16px; justify-content:flex-start; }
  }

  /* ---------- Gallery ---------- */
  .gallery{
    background: var(--ivory);
    padding: 100px 0;
    text-align:center;
  }
  .gallery .eyebrow{ color: var(--rose); }
  .gallery h2{
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    color: var(--ink-deep);
    max-width: 640px;
    margin: 18px auto 12px;
  }
  .gallery-sub{
    color: #5c574c;
    max-width: 480px;
    margin: 0 auto 46px;
  }
  .gallery-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .gallery-item{
    aspect-ratio: 1;
    overflow:hidden;
    border-radius: 2px;
  }
  .gallery-item img{
    width:100%; height:100%;
    object-fit: cover;
    display:block;
    transition: transform 0.5s ease;
  }
  .gallery-item:hover img{ transform: scale(1.06); }
  @media (max-width: 760px){
    .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  }

  .gallery-more-link{
    display:inline-block;
    margin-top: 38px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rose);
    text-decoration:none;
    border-bottom: 1px solid var(--rose);
    padding-bottom: 3px;
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  .gallery-more-link:hover{
    color: #5c1620;
    border-color: #5c1620;
  }

  /* ---------- News ---------- */
  .news{
    background: var(--ink);
    padding: 100px 0;
    text-align:center;
  }
  .news .eyebrow{ margin-bottom: 18px; }
  .news h2{
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    color: var(--ivory);
    max-width: 640px;
    margin: 0 auto 14px;
  }
  .news-placeholder-note{
    color: var(--stone);
    font-size: 0.85rem;
    font-style: italic;
    max-width: 480px;
    margin: 0 auto 46px;
  }
  .news-feature{
    background: rgba(246,242,232,0.04);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 40px 44px;
    text-align:left;
    max-width: 820px;
    margin: 0 auto 40px;
  }
  .news-feature .news-date{ display:block; margin-bottom: 10px; }
  .news-feature h3{
    font-family:'Cormorant Garamond', serif;
    font-size: 1.7rem;
    color: var(--ivory);
    margin: 0 0 16px;
  }
  .news-feature p{
    color: var(--stone);
    font-size: 0.98rem;
    line-height: 1.7;
    margin: 0 0 18px;
  }
  .news-feature p:last-child{ margin-bottom: 0; }
  .news-feature p em{
    color: var(--gold-soft);
    font-style: italic;
  }
  .sponsor-logo-row{
    display:flex;
    flex-wrap:wrap;
    gap: 16px;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
  }
  .sponsor-logo-card{
    background: var(--ivory);
    border-radius: 3px;
    padding: 14px 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    height: 64px;
  }
  .sponsor-logo-card img{
    max-height: 100%;
    max-width: 140px;
    width:auto;
    height:auto;
    object-fit: contain;
  }
  @media (max-width: 640px){
    .news-feature{ padding: 30px 26px; }
  }
  .news-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    max-width: 820px;
    margin: 0 auto;
    gap: 24px;
    text-align:left;
  }
  .news-card{
    background: rgba(246,242,232,0.03);
    border: 1px solid var(--line);
    padding: 30px 26px;
    border-radius: 3px;
  }
  .news-date{
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold-soft);
  }
  .news-card h3{
    font-size: 1.4rem;
    color: var(--ivory);
    margin: 10px 0 10px;
  }
  .news-card p{
    color: var(--stone);
    font-size: 0.92rem;
    margin: 0;
  }
  .news-card-link{
    display:inline-block;
    margin-top: 14px;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gold-soft);
    text-decoration:none;
    border-bottom: 1px solid var(--gold-soft);
    padding-bottom: 2px;
  }
  .news-card-link:hover{ color: var(--gold); border-color: var(--gold); }
  @media (max-width: 760px){
    .news-grid{ grid-template-columns: 1fr; }
  }

  footer{
    background: var(--ink-deep);
    padding: 40px 0;
    text-align:center;
    font-size: 0.85rem;
    color: var(--stone);
    border-top: 1px solid var(--line);
  }
  footer .footer-links{
    margin-bottom: 14px;
    display:flex;
    gap: 20px;
    justify-content:center;
    flex-wrap:wrap;
  }
  footer a{ text-decoration: none; color: var(--gold-soft); }
  footer a:hover{ text-decoration: underline; }

  /* scroll reveal */
  .reveal{
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  .reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
  }

  @media (max-width: 560px){
    .btn{ padding: 16px 26px; font-size: 0.85rem; width: 100%; }
    .cta-row{ flex-direction: column; }
    .hero{ padding-top: 110px; }
  }