:root{
    --rose:      #E3A4B0;
    --rose-2:    #EDBCC6;
    --rose-3:    #F6D8DE;
    --white:     #FFFFFF;
    --ink:       #33202A;
    --ink-soft:  rgba(51,32,42,.62);
    --shadow:    0 18px 44px rgba(51,32,42,.14);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    background: var(--rose);
    color: var(--ink);
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }
  body.locked{ overflow: hidden; }

  ::selection{ background: var(--ink); color: var(--white); }
  a{ color: inherit; text-decoration: none; }

  /* ============ BACKGROUND SHAPES ============ */
  .upper{ position:relative; }
  .waves{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
  .waves svg{ position:absolute; }
  /* full-height flowing streams — no horizontal cutoffs anywhere.
     negative top/bottom so the drift animation never exposes an edge. */
  .flow-right{
    position:absolute; top:-80px; bottom:-80px; right:-60px;
    width:calc(56% + 60px); min-width:440px;
  }
  .flow-left{
    position:absolute; top:-80px; bottom:-80px; left:-60px;
    width:calc(44% + 60px); min-width:360px;
  }
  .flow-right svg, .flow-left svg{
    width:100%; height:100%;
    display:block;
  }
  .orb{
    position:absolute; border-radius:50%;
    background: radial-gradient(circle at 32% 28%, var(--white), var(--rose-3) 78%);
    box-shadow: 0 14px 30px rgba(51,32,42,.08);
  }
  .orb-a{ width:120px; height:120px; top:10%; right:34%; }
  .orb-b{ width:54px;  height:54px;  top:22%; right:48%; }
  .orb-c{ width:84px;  height:84px;  top:52%; left:8%; opacity:.85; }
  .orb-d{ width:64px;  height:64px;  bottom:16%; right:12%; opacity:.8; }

  /* ---- ambient drift: slow, gentle, alive ---- */
  @keyframes drift-a{
    0%,100%{ transform:translate(0,0) rotate(0deg); }
    50%    { transform:translate(-14px,18px) rotate(-1.2deg); }
  }
  @keyframes drift-b{
    0%,100%{ transform:translate(0,0) rotate(0deg); }
    50%    { transform:translate(16px,-14px) rotate(1.4deg); }
  }
  @keyframes float-o{
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(-14px); }
  }
  @keyframes breathe-y{
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(20px); }
  }
  .flow-right{ animation:breathe-y 26s ease-in-out infinite; }
  .flow-left{  animation:breathe-y 30s ease-in-out infinite reverse; }
  .orb-a{ animation:float-o 9s  ease-in-out infinite; }
  .orb-b{ animation:float-o 12s ease-in-out infinite 1.5s; }
  .orb-c{ animation:float-o 10s ease-in-out infinite .8s; }
  .orb-d{ animation:float-o 13s ease-in-out infinite 2s; }

  /* ============ PILLS ============ */
  .pill{
    display:inline-block;
    font-family:'Manrope',sans-serif;
    font-size:.78rem; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase;
    background:var(--ink); color:var(--white);
    border:none; border-radius:999px;
    padding:14px 34px; cursor:pointer;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .pill:hover, .pill:focus-visible{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(51,32,42,.28);
    outline:none;
  }
  .pill-ghost{ background:transparent; color:var(--ink-soft); box-shadow:none; }
  .pill-ghost:hover{ box-shadow:none; color:var(--ink); }

  /* ============ AGE GATE ============ */
  .gate{
    position:fixed; inset:0; z-index:200;
    background:var(--rose);
    display:flex; align-items:center; justify-content:center;
    padding:24px;
  }
  .gate.hidden{ display:none; }
  .gate-card{
    position:relative; z-index:1;
    max-width:430px; width:100%;
    background:var(--white); border-radius:28px;
    box-shadow:var(--shadow);
    padding:46px 40px 42px; text-align:center;
  }
  .gate-card h2{
    font-size:1.45rem; font-weight:800;
    letter-spacing:.16em; text-transform:uppercase;
    margin-bottom:14px;
  }
  .gate-card p{ color:var(--ink-soft); font-size:.93rem; margin-bottom:30px; }
  .gate-actions{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

  /* ============ NAV ============ */
  .nav-wrap{
    position:sticky; top:0; z-index:50;
    padding:18px clamp(20px,5vw,56px) 12px;
  }
  nav{
    background:var(--white); border-radius:999px;
    box-shadow:var(--shadow);
    display:flex; align-items:center;
    padding:8px 10px 8px 26px;
    max-width:1080px; margin:0 auto; gap:8px;
  }
  .brand{
    font-weight:800; font-size:.82rem;
    letter-spacing:.18em; text-transform:uppercase;
    margin-right:auto; white-space:nowrap;
  }
  .brand span{ font-weight:400; color:var(--ink-soft); }
  nav .link{
    font-size:.74rem; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-soft);
    padding:11px 18px; border-radius:999px;
    background:none; border:none; cursor:pointer;
    font-family:'Manrope',sans-serif;
    transition:color .18s ease, background .18s ease;
    white-space:nowrap;
  }
  nav .link:hover{ color:var(--ink); }
  nav .link.active{ color:var(--white); }
  .nav-ind{
    position:absolute;
    top:8px; bottom:8px;
    background:var(--ink);
    border-radius:999px;
    z-index:0;
    transition:left .35s cubic-bezier(.5,0,.2,1), width .35s cubic-bezier(.5,0,.2,1);
  }
  nav{ position:relative; }
  nav .link{ position:relative; z-index:1; }
  @media (max-width:760px){ nav .link:not(.active){ display:none; } }

  /* ============ HERO ============ */
  .hero{
    position:relative; z-index:1;
    max-width:1080px; margin:0 auto;
    padding: clamp(70px,12vh,130px) clamp(20px,5vw,56px) clamp(50px,8vh,90px);
  }
  .hero-inner{ max-width:520px; }
  .kicker{
    font-size:.74rem; font-weight:700;
    letter-spacing:.3em; text-transform:uppercase;
    color:var(--white); margin-bottom:14px;
  }
  .hero h1{
    font-size:clamp(2rem,5.4vw,3.4rem);
    font-weight:800; letter-spacing:.22em;
    text-transform:uppercase; line-height:1.18;
  }
  .hero h1 .tld{
    font-size:.45em; letter-spacing:.3em;
    vertical-align:.85em; color:var(--white);
  }
  .hero p{
    margin-top:20px; max-width:380px;
    font-size:.95rem; font-weight:500;
    color:var(--ink-soft);
  }
  .hero .pill{ margin-top:34px; }

  /* ============ CARDS ============ */
  .collection{
    position:relative; z-index:1;
    max-width:1080px; margin:0 auto;
    padding:0 clamp(20px,5vw,56px) clamp(80px,12vh,130px);
  }
  .section-head{
    font-size:.74rem; font-weight:700;
    letter-spacing:.3em; text-transform:uppercase;
    color:var(--white); margin-bottom:22px;
  }
  .cards{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:22px;
  }
  .card-wide{ grid-column:1 / -1; min-height:300px; }
  @media (max-width:680px){
    .cards{ grid-template-columns:1fr; }
    .card-wide{ grid-column:auto; }
  }

  /* coming-soon card: visible but not interactive */
  .card.soon{ cursor:default; }
  .card.soon:hover, .card.soon:focus-visible{
    transform:none;
    box-shadow:var(--shadow);
  }
  .card.soon:hover .card-bg{ transform:none; }
  .card.soon:hover .chip{ background:rgba(255,255,255,.16); }
  .soon-tag{
    margin-top:14px;
    display:inline-block;
    font-size:.68rem; font-weight:800;
    letter-spacing:.2em; text-transform:uppercase;
    color:var(--rose-3);
    border:1px solid rgba(246,216,222,.45);
    border-radius:999px;
    padding:8px 18px;
    position:relative; z-index:2;
    align-self:flex-start;
  }
  .card{
    position:relative;
    overflow:hidden;
    background:var(--white); border-radius:26px;
    box-shadow:var(--shadow);
    padding:30px 28px 28px;
    min-height:360px;
    display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
    text-align:left;
    border:none; cursor:pointer;
    font-family:'Manrope',sans-serif;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .card:hover, .card:focus-visible{
    transform:translateY(-5px);
    box-shadow:0 26px 54px rgba(51,32,42,.28);
    outline:none;
  }

  /* --- image layer ---------------------------------------
     To use a real photo, add to the matching .card-bg rule:
       background-image:url('images/wanko.jpg');
       background-size:cover; background-position:center;
     The placeholder gradients below will sit underneath
     until a photo is provided.
  --------------------------------------------------------- */
  .card-bg{
    position:absolute; inset:0;
    z-index:0;
    transition:transform .5s ease;
  }
  .card:hover .card-bg{ transform:scale(1.05); }

  .bg-wanko{
    background:
      radial-gradient(120% 90% at 80% 10%, #F6D8DE 0%, transparent 55%),
      radial-gradient(100% 80% at 15% 85%, #B76E7E 0%, transparent 60%),
      linear-gradient(160deg, #E3A4B0 0%, #8E4B59 100%);
  }
  .bg-agf{
    background:
      radial-gradient(110% 80% at 20% 15%, #F6D8DE 0%, transparent 55%),
      radial-gradient(120% 90% at 85% 80%, #6E3D4B 0%, transparent 65%),
      linear-gradient(200deg, #EDBCC6 0%, #7A3B49 100%);
  }
  .bg-bsx{
    background:
      radial-gradient(110% 85% at 80% 12%, #E88FA4 0%, transparent 55%),
      radial-gradient(115% 90% at 12% 88%, #4A2233 0%, transparent 65%),
      linear-gradient(170deg, #C2607A 0%, #5C2A3D 100%);
  }
  .bg-grief{
    background:
      radial-gradient(110% 85% at 18% 12%, #EFCBD4 0%, transparent 55%),
      radial-gradient(115% 90% at 85% 88%, #59444E 0%, transparent 65%),
      linear-gradient(185deg, #C69AA6 0%, #6B4F5A 100%);
  }
  .bg-club{
    background:
      radial-gradient(100% 80% at 85% 15%, #C97F8E 0%, transparent 55%),
      radial-gradient(120% 90% at 15% 90%, #33202A 0%, transparent 70%),
      linear-gradient(180deg, #A05B6A 0%, #46242F 100%);
  }

  .card-logo{
    height:34px; width:auto;
    align-self:flex-start;
    display:block;
    margin:2px 0 2px;
  }
  .sheet .m-logo{
    height:46px; width:auto;
    display:block;
    margin-bottom:14px;
  }
  /* scrim keeps text readable over any image */
  .card-scrim{
    position:absolute; inset:0;
    z-index:1;
    background:linear-gradient(to top, rgba(51,32,42,.82) 0%, rgba(51,32,42,.35) 45%, rgba(51,32,42,0) 75%);
  }

  .card > .chip, .card > .cat, .card > h3, .card > p, .card > .go{
    position:relative; z-index:2;
  }
  /* whole card links straight to the site... */
  .card-link{
    position:absolute; inset:0;
    z-index:3;
    border-radius:26px;
  }
  /* ...except the chip (top row), which opens the details menu */
  .card .chip{
    z-index:4;
    border:none; cursor:pointer;
    font-family:inherit;
  }
  .card:focus-within{
    transform:translateY(-5px);
    box-shadow:0 26px 54px rgba(51,32,42,.28);
  }
  .card-link:focus-visible, .card .chip:focus-visible{
    outline:2px solid var(--white); outline-offset:3px;
  }
  .card .chip{
    width:52px; height:52px;
    border-radius:16px;
    background:rgba(255,255,255,.16);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    color:var(--white);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:auto;
    transition:background .2s ease;
  }
  .card:hover .chip{ background:var(--rose); }
  .card .cat{
    font-size:.64rem; font-weight:800;
    letter-spacing:.26em; text-transform:uppercase;
    color:var(--rose-3);
    margin-top:16px;
  }
  .card h3{
    font-size:1.05rem; font-weight:800;
    letter-spacing:.14em; text-transform:uppercase;
    color:var(--white);
  }
  .card p{ font-size:.9rem; color:rgba(255,255,255,.78); }
  .card .go{
    margin-top:14px;
    display:inline-flex; align-items:center; gap:8px;
    font-size:.74rem; font-weight:800;
    letter-spacing:.14em; text-transform:uppercase;
    color:var(--white);
  }
  .card .go svg{ transition:transform .2s ease; }
  .card:hover .go svg{ transform:translateX(4px); }

  /* ============ BRAND MODALS ============ */
  .modal{
    position:fixed; inset:0; z-index:150;
    display:flex; align-items:center; justify-content:center;
    padding:clamp(16px,3vw,40px);
    visibility:hidden;
    opacity:0;
    transition:opacity .28s ease, visibility 0s linear .28s;
  }
  .modal.open{
    visibility:visible;
    opacity:1;
    transition:opacity .28s ease;
  }
  .modal-backdrop{
    position:absolute; inset:0;
    background:rgba(51,32,42,.45);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    border:none; cursor:pointer;
  }
  .sheet{
    position:relative;
    width:min(640px, 100%);
    max-height:min(92vh, 840px);
    overflow-y:auto;
    background:var(--white);
    border-radius:30px;
    box-shadow:0 30px 80px rgba(51,32,42,.35);
    padding:clamp(30px,4.5vw,44px);
    transform:translateY(18px) scale(.985);
    transition:transform .28s ease;
  }
  .modal.open .sheet{ transform:translateY(0) scale(1); }

  .sheet .close{
    position:absolute; top:20px; right:20px;
    width:38px; height:38px;
    border-radius:50%;
    border:none; cursor:pointer;
    background:var(--rose-3); color:var(--ink);
    font-size:1rem; line-height:1;
    display:flex; align-items:center; justify-content:center;
    transition:background .18s ease, transform .18s ease;
  }
  .sheet .close:hover, .sheet .close:focus-visible{
    background:var(--rose-2);
    transform:rotate(90deg);
    outline:none;
  }

  .sheet .m-kicker{
    font-size:.68rem; font-weight:800;
    letter-spacing:.28em; text-transform:uppercase;
    color:var(--rose);
    margin-bottom:10px;
  }
  .sheet h2{
    font-size:clamp(1.5rem,4vw,2rem);
    font-weight:800;
    letter-spacing:.16em; text-transform:uppercase;
    line-height:1.2;
    margin-bottom:12px;
  }
  .sheet .lede{
    font-size:1rem; font-weight:500;
    color:var(--ink-soft);
    margin-bottom:20px;
  }
  .sheet .body p{
    font-size:.93rem; color:var(--ink-soft);
    margin-bottom:12px;
  }
  .sheet .feature-list{
    list-style:none;
    margin:16px 0 24px;
    display:flex; flex-direction:column; gap:10px;
  }
  .sheet .feature-list li{
    background:var(--rose-3);
    border-radius:18px;
    padding:13px 18px;
  }
  .sheet .feature-list h4{
    font-size:.78rem; font-weight:800;
    letter-spacing:.14em; text-transform:uppercase;
    margin-bottom:2px;
  }
  .sheet .feature-list p{ font-size:.88rem; color:var(--ink-soft); margin:0; }
  .sheet .m-actions{
    display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  }

  /* ============ FAQ — dark platform-style band ============ */
  .faq-band{
    position:relative; z-index:2;
    background:var(--ink);
    border-radius:44px 44px 0 0;
    margin-top:-44px;   /* overlap the wave section so the rounded top sits ON the waves */
  }
  .faq{
    max-width:760px; margin:0 auto;
    padding:clamp(60px,9vh,90px) clamp(20px,5vw,56px) clamp(70px,10vh,110px);
  }
  .faq .section-head{
    color:var(--rose);
  }
  .faq-sub{
    color:rgba(246,216,222,.55);
    font-size:.92rem;
    font-weight:500;
    margin:-10px 0 28px;
  }
  .faq-item{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.09);
    border-radius:18px;
    margin-bottom:12px;
    overflow:hidden;
    transition:background .2s ease, border-color .2s ease;
  }
  .faq-item:hover{ background:rgba(255,255,255,.09); }
  .faq-item.open{
    background:rgba(255,255,255,.09);
    border-color:rgba(227,164,176,.4);
  }
  .faq-q{
    width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:none; border:none; cursor:pointer;
    font-family:'Manrope',sans-serif;
    font-size:.86rem; font-weight:800;
    letter-spacing:.08em; text-transform:uppercase;
    color:var(--white);
    text-align:left;
    padding:20px 24px;
  }
  .faq-q:focus-visible{ outline:2px solid var(--rose); outline-offset:-2px; border-radius:18px; }
  .faq-q .chev{
    flex-shrink:0;
    color:var(--rose);
    transition:transform .25s ease;
  }
  .faq-item.open .faq-q .chev{ transform:rotate(180deg); }
  .faq-a{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .3s ease;
  }
  .faq-item.open .faq-a{ grid-template-rows:1fr; }
  .faq-a-inner{
    overflow:hidden;
  }
  .faq-a-inner p{
    padding:0 24px 22px;
    font-size:.92rem;
    color:rgba(255,255,255,.66);
  }

  /* ============ FOOTER ============ */
  footer{
    position:relative; z-index:1;
    text-align:center;
    padding:0 24px 44px;
    color:rgba(255,255,255,.45);
    font-size:.76rem; font-weight:500;
  }

  @media (prefers-reduced-motion: reduce){
    .pill, .card, .card .go svg, nav .link,
    .modal, .sheet, .sheet .close{ transition:none; }
    .flow-right,.flow-left,
    .orb-a,.orb-b,.orb-c,.orb-d{ animation:none; }
  }