:root{
    --white:#FFF7ED;
    --pink-pale2:#F7E4DC;
    --pink-pale:#E7C7C2;
    --pink-mid:#CE8A93;
    --pink-hot:#BC6A78;
    --pink-deep:#7A4A50;
    --ink:#140D0C;
    --ink-soft:#5A4E4B;
    --serif:'Playfair Display', serif;
    --sans:'Cormorant Garamond', serif;
    --maxw:1260px;
    --hard: 0 16px 36px -18px rgba(20,13,12,0.22);
    --hard-pink: 0 16px 32px -16px rgba(122,74,80,0.3);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;font-family:var(--sans);color:var(--ink);background:var(--white);
    line-height:1.5;-webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
  @media(max-width:640px){.wrap{padding:0 20px;}}
  h1,h2,h3,h4{font-family:var(--serif);font-weight:700;margin:0;line-height:1.03;letter-spacing:-0.015em;}

  .dot-icon{display:inline-block;width:1em;height:1em;vertical-align:-0.12em;}

  /* buttons — hard graphic shadow */
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--sans);font-weight:800;font-size:15px;
    padding:15px 28px;border-radius:100px;
    cursor:pointer;border:none;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
    white-space:nowrap;box-shadow:var(--hard);background:var(--white);color:var(--ink);
  }
  .btn:hover{transform:translateY(-2px);box-shadow:0 20px 34px -18px rgba(20,13,12,0.28);}
  .btn-primary{background:var(--pink-hot);color:var(--white);border-color:transparent;}
  .btn-onink{background:var(--pink-hot);color:var(--white);border-color:transparent;box-shadow:0 16px 30px -14px rgba(0,0,0,0.45);}
  .btn-onink:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(0,0,0,0.5);}
  .btn-ghost-onink{background:transparent;color:var(--white);border-color:rgba(255,255,255,0.5);box-shadow:none;}
  .btn-ghost-onink:hover{background:rgba(255,255,255,0.08);}

  /* ---------- NAV ---------- */
  header{position:sticky;top:0;z-index:100;background:var(--white);box-shadow:0 1px 0 rgba(20,13,12,0.06);transition:transform .3s ease;}
  header.header-hide{transform:translateY(-100%);}
  nav.wrap{display:flex;align-items:center;justify-content:space-between;height:82px;}
  .logo{font-family:var(--serif);font-size:25px;font-weight:900;letter-spacing:-0.01em;display:inline-flex;align-items:center;}
  .logo span{color:var(--pink-hot);}
  .logo-img{height:26px;width:auto;display:block;}
  .nav-links{display:flex;align-items:center;gap:34px;}
  .nav-links a{font-size:15px;font-weight:700;color:var(--ink);position:relative;padding-bottom:3px;}
  .nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:3px;background:var(--pink-hot);transition:width .18s;}
  .nav-links a:hover::after{width:100%;}
  .nav-cta{display:flex;align-items:center;gap:20px;}
  .nav-login{font-size:15px;font-weight:700;color:var(--ink);}
  .nav-login:hover{color:var(--pink-deep);}
  .menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
  .menu-toggle span{display:block;width:24px;height:3px;background:var(--ink);margin:5px 0;}
  @media(max-width:880px){
    .nav-links{display:none;}
    .menu-toggle{display:block;}
    .nav-cta .btn-primary{display:none;}
  }

  .mobile-menu{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:99;
    background:var(--white);box-shadow:0 20px 30px -20px rgba(20,13,12,0.2);
    padding:20px 32px 28px;flex-direction:column;gap:16px;
  }
  .mobile-menu.open{display:flex;}
  .mobile-menu a{font-size:16px;font-weight:700;color:var(--ink);}
  .mobile-menu .btn{align-self:flex-start;margin-top:6px;}
  @media(min-width:881px){.mobile-menu{display:none !important;}}

  /* ---------- HERO ---------- */
  .hero{
    padding:74px 0 60px;overflow:hidden;position:relative;
  }
  .hero-grid{max-width:1060px;margin:0 auto;text-align:center;position:relative;z-index:1;}
  .eyebrow-badge{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--pink-pale2);border:none;border-radius:100px;
    padding:8px 16px 8px 10px;font-size:13px;font-weight:800;color:var(--pink-deep);box-shadow:none;
    margin-bottom:24px;
  }
  .eyebrow-badge svg{width:16px;height:16px;fill:var(--pink-hot);}

  /* ---------- EVENTS TICKER ---------- */
  .events-ticker{background:var(--pink-hot);color:var(--white);overflow:hidden;white-space:nowrap;}
  .events-ticker-track{display:inline-flex;align-items:center;gap:40px;padding:13px 0;animation:tickerScroll 30s linear infinite;}
  .events-ticker-track span{font-family:var(--serif);font-style:italic;font-size:16px;font-weight:500;display:inline-flex;align-items:center;gap:40px;}
  .events-ticker-track svg{width:14px;height:14px;fill:var(--pink-hot);flex-shrink:0;}
  @keyframes tickerScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion: reduce){.events-ticker-track{animation:none;}}

  .hero h1{font-size:clamp(40px,5.6vw,72px);max-width:none;margin:0 auto;}
  .hero h1 .underline-wrap{position:relative;white-space:nowrap;display:inline-block;}
  .hero h1 .underline-wrap svg{position:absolute;left:0;bottom:-14px;width:100%;height:16px;}
  .hero p.lead{font-size:19px;color:var(--ink-soft);max-width:70ch;margin:30px auto 34px;}
  .hero-ctas{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:32px;align-items:center;justify-content:center;}
  .hand-arrow{width:64px;height:64px;flex-shrink:0;}
  .hero-rating{display:inline-flex;align-items:center;gap:10px;background:var(--white);border-radius:100px;padding:11px 20px;box-shadow:var(--hard);margin-bottom:36px;}
  .hero-rating .stars{color:var(--pink-hot);font-size:14px;letter-spacing:2px;}
  .hero-rating .caption{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap;}
  .hero-stats{display:flex;gap:40px;justify-content:center;}
  .hero-stats div{padding:0;}
  .hero-stats div b{display:block;font-family:var(--serif);font-size:28px;font-weight:800;color:var(--pink-hot);}
  .hero-stats div span{font-size:12.5px;color:var(--ink-soft);font-weight:600;}

  @media(max-width:900px){
    .hero-stats{gap:18px;}
    .hero-stats div{flex:1;min-width:0;}
    .hero-stats div b{font-size:22px;}
    .hero-stats div span{display:block;font-size:11.5px;line-height:1.3;}
  }

  /* ---------- MANIFESTO ---------- */
  .manifesto{background:var(--white);color:var(--pink-hot);padding:100px 0;position:relative;}
  .manifesto .wrap{position:relative;}
  .manifesto p{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(27px,3.8vw,44px);max-width:20ch;line-height:1.3;letter-spacing:0.01em;}
  .manifesto .attrib{margin-top:32px;font-family:var(--sans);font-style:normal;font-size:14px;font-weight:800;color:var(--ink-soft);opacity:0.9;}

  /* ---------- SECTIONS ---------- */
  .section{padding:104px 0;}
  .section-head{max-width:640px;margin-bottom:56px;}
  .section-label{font-size:13px;font-weight:800;color:var(--pink-deep);margin-bottom:14px;display:inline-flex;align-items:center;gap:8px;background:var(--pink-pale2);border:none;padding:5px 14px;border-radius:100px;}
  .section-head h2{font-size:clamp(29px,3.6vw,44px);margin-top:18px;}
  .section-head p{color:var(--ink-soft);font-size:17px;margin-top:16px;max-width:52ch;}

  /* ---------- MEMBERSHIP ---------- */
  .membership{background:var(--pink-pale2);}
  .membership-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
  .value-list{list-style:none;padding:0;margin:0 0 38px;}
  .value-list li{display:flex;gap:14px;padding:16px 0;font-size:16px;}
  .value-list li:first-child{padding-top:0;}

  .value-ticker{overflow:hidden;white-space:nowrap;background:var(--pink-pale2);border-radius:100px;margin-top:8px;}
  .value-ticker-track{display:inline-flex;align-items:center;gap:56px;padding:18px 0;animation:tickerScroll 20s linear infinite;}
  .value-ticker-track span{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-weight:800;font-size:17px;color:var(--pink-deep);}
  .value-ticker-track svg{width:22px;height:22px;stroke:var(--pink-hot);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
  @media (prefers-reduced-motion: reduce){.value-ticker-track{animation:none;}}
  .dot{width:20px;height:20px;flex-shrink:0;margin-top:2px;}
  .dot svg{width:100%;height:100%;fill:var(--pink-hot);}

  .card-visual{display:flex;justify-content:center;position:relative;}
  .member-card{
    width:100%;max-width:400px;aspect-ratio:1.586/1;
    background:linear-gradient(135deg, var(--pink-mid) 0%, var(--pink-hot) 50%, var(--pink-deep) 100%);
    border-radius:20px;padding:30px;color:var(--white);position:relative;overflow:hidden;
    box-shadow:0 26px 50px -20px rgba(122,74,80,0.45);
    display:flex;flex-direction:column;justify-content:space-between;z-index:2;
  }
  .member-card::after{content:'';position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,0.12);}
  .card-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1;}
  .card-chip{width:38px;height:28px;border-radius:6px;background:rgba(255,255,255,0.9);}
  .card-brand{font-family:var(--serif);font-weight:800;font-size:16px;}
  .card-number{font-family:var(--sans);font-size:16px;letter-spacing:0.15em;font-weight:700;position:relative;z-index:1;}
  .card-bottom{display:flex;justify-content:space-between;align-items:flex-end;position:relative;z-index:1;}
  .card-bottom .label{font-size:10.5px;text-transform:uppercase;letter-spacing:0.08em;opacity:0.75;display:block;margin-bottom:4px;}
  .card-bottom .value{font-family:var(--serif);font-size:15px;font-weight:700;}
  .price-line{display:flex;align-items:baseline;gap:8px;margin-top:34px;justify-content:center;position:relative;z-index:2;}
  .price-line b{font-family:var(--serif);font-size:34px;font-weight:800;color:var(--pink-hot);}
  .price-line span{color:var(--ink-soft);font-size:15px;font-weight:600;}

  @media(max-width:880px){
    .membership-grid{grid-template-columns:1fr;gap:56px;}
    .card-visual{order:-1;}
  }

  /* ---------- DIRECTORY ---------- */
  .directory-tags{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:44px;}
  .tag{border:none;border-radius:100px;padding:11px 22px;font-weight:800;font-family:var(--sans);box-shadow:none;transition:background .14s, transform .14s;background:var(--pink-pale2);color:var(--ink);}
  .tag:hover{transform:translateY(-2px);background:var(--pink-pale);}
  .tag.fill{background:var(--pink-hot);color:var(--white);}
  .tag.fill:hover{background:var(--pink-deep);}
  .tag.outline{background:var(--pink-pale2);color:var(--ink);}
  .tag.lg{font-size:19px;padding:15px 26px;}
  .tag.md{font-size:16px;}
  .tag.sm{font-size:14px;}
  .directory-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding-top:12px;}
  .directory-foot .stat{font-size:15px;color:var(--ink-soft);font-weight:600;}
  .directory-foot .stat b{color:var(--ink);}

  /* ---------- EVENTS ---------- */
  .events{background:var(--pink-pale2);}
  .ticket-row{display:flex;gap:30px;overflow-x:auto;padding:6px 6px 16px;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;}
  .ticket-row::-webkit-scrollbar{display:none;}
  .ticket{
    flex:0 0 320px;scroll-snap-align:start;background:var(--white);
    border-radius:16px;position:relative;padding:28px 26px;box-shadow:var(--hard-pink);
  }
  .ticket .tdate{font-size:13px;font-weight:800;color:var(--pink-hot);margin-bottom:12px;}
  .ticket h3{font-size:22px;margin-bottom:8px;}
  .ticket .tloc{font-size:14px;color:var(--ink-soft);margin-bottom:22px;font-weight:600;}
  .ticket .tdivider{margin:18px 0;}
  .ticket .tfoot{display:flex;justify-content:space-between;align-items:center;}
  .ticket .tprice{font-family:var(--serif);font-weight:800;font-size:17px;}
  .ticket .tlink{font-size:14px;font-weight:800;color:var(--pink-hot);}

  /* ---------- STORIES ----------
     Uses flexbox (not CSS grid) for the feature/minis split — grid's
     `fr` track sizing was letting the feature image's intrinsic size
     force the minis column down to almost nothing, even with
     min-width:0 set on the grid items. flex-basis:0 + flex-grow gives
     the same proportional 1.4:1 split without that failure mode. */
  .stories-grid{display:flex;gap:36px;align-items:flex-start;}
  .story-feature{flex:1.4 1 0%;min-width:0;}
  .story-minis{flex:1 1 0%;min-width:0;display:flex;flex-direction:column;gap:30px;}
  .story-feature img, .story-mini img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;filter:grayscale(15%);}
  .story-feature .story-body{margin-top:20px;}
  .story-cat{font-size:12.5px;font-weight:800;color:var(--pink-hot);margin-bottom:10px;display:inline-block;background:var(--pink-pale2);padding:4px 12px;border-radius:100px;}
  .story-feature h3{font-size:clamp(23px,2.4vw,31px);margin:12px 0 10px;overflow-wrap:anywhere;}
  .story-feature p{color:var(--ink-soft);font-size:15.5px;max-width:52ch;}
  .story-mini{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:start;min-width:0;}
  .story-mini > div{min-width:0;}
  .story-mini img{aspect-ratio:1/1;border-radius:12px;}
  .story-mini h4{font-size:16.5px;margin:8px 0 0;line-height:1.3;overflow-wrap:anywhere;}

  @media(max-width:880px){
    .stories-grid{display:block !important;}
    .stories-grid > *{width:100% !important;}
    .story-minis{margin-top:22px;gap:22px !important;}

    /* Turn the feature post into a compact list row too, so the whole
       Spotlight section reads as one uniform list on mobile instead of
       one big photo followed by a separate mini list. */
    .story-feature{
      display:grid !important;grid-template-columns:84px 1fr !important;
      gap:14px !important;align-items:start !important;
    }
    .story-feature img{aspect-ratio:1/1 !important;border-radius:10px !important;}
    .story-feature .story-body{margin-top:0 !important;}
    .story-feature h3{font-size:16.5px !important;margin:8px 0 0 !important;}
    .story-feature p{display:none !important;}
    .story-cat{font-size:11.5px;padding:3px 10px;margin-bottom:6px;}

    /* Minis shrink to match. */
    .story-mini{grid-template-columns:84px 1fr !important;}
  }

  /* ---------- TESTIMONIAL ---------- */
  .testimonial{background:var(--white);position:relative;padding:110px 0;}
  .quote-mark{font-family:var(--serif);font-size:160px;color:var(--pink-pale);line-height:0.4;position:absolute;top:70px;left:32px;font-weight:900;}
  .testimonial blockquote{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(25px,3.2vw,36px);line-height:1.38;max-width:19ch;position:relative;z-index:1;}
  .testimonial .who{margin-top:28px;font-size:15px;font-weight:800;color:var(--ink-soft);}

  /* ---------- FAQS ---------- */
  .faq-list{max-width:760px;}
  .faq-item{padding:22px 0;}
  .faq-item summary{
    cursor:pointer;font-family:var(--serif);font-weight:600;font-size:19px;
    list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary .plus{font-family:var(--sans);font-size:22px;font-weight:400;color:var(--pink-hot);flex-shrink:0;transition:transform .2s ease;}
  .faq-item[open] summary .plus{transform:rotate(45deg);}
  .faq-item p{color:var(--ink-soft);font-size:15.5px;margin:14px 0 0;max-width:60ch;}

  /* ---------- DOWNLOAD APP ---------- */
  .download-app h2{color:var(--white);}
  .download-app p{color:rgba(255,247,237,0.85);font-size:17px;max-width:48ch;margin:0 auto 34px;}

  /* ---------- CTA ---------- */
  .cta{background:var(--ink);color:var(--white);padding:120px 0;text-align:center;position:relative;overflow:hidden;}
  .cta .wrap{position:relative;}
  .cta h2{font-size:clamp(32px,4.6vw,56px);color:var(--white);max-width:16ch;margin:0 auto 36px;}
  .cta .ctas{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--ink);color:rgba(255,255,255,0.72);padding:70px 0 30px;}
  .footer-grid{display:grid;grid-template-columns:1.2fr 0.8fr 0.8fr 0.8fr 1fr;gap:32px;padding-bottom:50px;}
  .footer-brand .logo{color:var(--white);}
  .footer-brand p{font-size:14.5px;max-width:32ch;margin:18px 0 24px;line-height:1.6;}
  .footer-social{display:flex;gap:14px;}
  .footer-social a{width:38px;height:38px;border-radius:50%;background:rgba(188,106,120,0.25);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--white);}
  .footer-col h5{font-family:var(--sans);font-size:14px;font-weight:800;color:var(--white);margin-bottom:18px;}
  .footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;}
  .footer-col a{font-size:14.5px;}
  .footer-col a:hover{color:var(--pink-hot);}
  .footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:26px;font-size:13px;}

  @media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:480px){.footer-grid{grid-template-columns:1fr;}}

  @media (prefers-reduced-motion: no-preference){
    .member-card{animation:floatCard 4.4s ease-in-out infinite;}
  }
  @keyframes floatCard{0%,100%{transform:translateY(0);}50%{transform:translateY(-18px);}}

  :focus-visible{outline:3px solid var(--pink-hot);outline-offset:3px;}

  /* ---------- TWINKLING DOT FIELDS ---------- */
  .dot-field{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
  .hero .dot-field{z-index:30;}
  .hero .twinkle-dot{box-shadow:0 0 0 3px rgba(255,255,255,0.85), 0 0 10px rgba(255,20,100,0.55);}
  .twinkle-dot{position:absolute;border-radius:50%;opacity:0.15;background:var(--pink-pale);}
  .dot-field.pink .twinkle-dot{background:var(--pink-hot);}
  .dot-field.white .twinkle-dot{background:var(--white);}
  .dot-field.pale .twinkle-dot{background:var(--pink-pale);}
  @media (prefers-reduced-motion: no-preference){
    .twinkle-dot{animation:twinkle 3s ease-in-out infinite;}
  }
  @media (prefers-reduced-motion: reduce){
    .twinkle-dot{opacity:0.45;}
  }
  @keyframes twinkle{0%,100%{opacity:0.12;transform:scale(0.7);}50%{opacity:1;transform:scale(1.25);}}

  /* ---------- MAINTENANCE OVERLAY ---------- */
  .maint-overlay{
    position:fixed;inset:0;z-index:9999;background:var(--white);
    display:flex;align-items:center;justify-content:center;padding:24px;
  }
  .maint-inner{
    max-width:480px;width:100%;text-align:center;
    background:var(--white);border-radius:22px;
    padding:52px 40px;box-shadow:var(--hard);
  }
  .maint-title{font-size:clamp(26px,4vw,34px);margin-bottom:14px;}
  .maint-sub{color:var(--ink-soft);font-size:15.5px;margin:0 0 30px;}
  .maint-password-wrap{margin-top:30px;padding-top:8px;}
  .maint-password-label{font-size:13px;font-weight:800;color:var(--ink-soft);margin-bottom:14px;}
  #maintPasswordForm{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
  .maint-password-input{
    font-family:var(--sans);font-size:15px;font-weight:600;
    padding:13px 18px;border-radius:100px;border:none;background:var(--pink-pale2);
    min-width:180px;flex:1 1 180px;color:var(--ink);
  }
  .maint-password-input:focus{outline:none;box-shadow:0 0 0 2px var(--pink-hot);}
  .maint-password-error{color:var(--pink-deep);font-size:13.5px;font-weight:700;margin:14px 0 0;}

  .more-link{font-size:16px;font-weight:800;color:var(--pink-hot);}
  .more-link:hover{text-decoration:underline;}
  .ticket h2{font-size:22px;margin-bottom:8px;}
  .story-feature img, .story-mini img{height:auto;}