/* =========================================================
   multiverse moon — design system
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Space+Grotesk:wght@400;500;600&family=Work+Sans:wght@400;500&display=swap');

:root{
  --ink:      #0b0d14;   /* deep space background */
  --panel:    #12141f;   /* card / raised surface */
  --panel-2:  #171a28;   /* hover surface */
  --line:     #262a3b;   /* hairline rule */
  --line-lit: #3a3f57;   /* brighter hairline, on hover/focus */
  --paper:    #edeae0;   /* moonlight warm white — primary text */
  --dim:      #948fa3;   /* dusty lavender — secondary text */
  --faint:    #5c5a6d;   /* tertiary text, captions */
  --gold:     #c7973f;   /* brass / alchemical accent — shop */
  --gold-lit: #e0b563;
  --tide:     #5fa89b;   /* moon-water teal — practice */
  --tide-lit: #7fc4b7;

  --serif: 'Fraunces', ui-serif, Georgia, serif;
  --sans:  'Work Sans', ui-sans-serif, system-ui, sans-serif;
  --mono:  'Space Grotesk', ui-sans-serif, system-ui, sans-serif;

  --max: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; margin:0; }
p{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

::selection{ background:var(--gold); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--tide-lit);
  outline-offset:3px;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* =========================================================
   background texture — a faint starfield, drawn once
   ========================================================= */
.stars{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(237,234,224,0.5) 0, transparent 60%),
    radial-gradient(1px 1px at 78% 8%, rgba(237,234,224,0.35) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 65%, rgba(237,234,224,0.4) 0, transparent 60%),
    radial-gradient(1px 1px at 92% 48%, rgba(237,234,224,0.3) 0, transparent 60%),
    radial-gradient(1px 1px at 25% 82%, rgba(237,234,224,0.3) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 30%, rgba(237,234,224,0.35) 0, transparent 60%),
    radial-gradient(1px 1px at 8% 55%, rgba(237,234,224,0.25) 0, transparent 60%),
    radial-gradient(1px 1px at 68% 88%, rgba(237,234,224,0.3) 0, transparent 60%);
  background-repeat:no-repeat;
  background-size:100% 100%;
}

/* =========================================================
   header / nav
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(11,13,20,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{
  font-family:var(--serif);
  font-size:1.35rem;
  letter-spacing:0.01em;
  display:flex; align-items:center; gap:10px;
}
.logo .mark{ width:20px; height:20px; flex:none; }
.logo em{ font-style:italic; color:var(--dim); font-weight:400; }

.nav-links{
  display:flex; align-items:center; gap:clamp(18px,3vw,36px);
  font-family:var(--mono);
  font-size:0.86rem;
  letter-spacing:0.02em;
}
.nav-links a{
  position:relative; padding:6px 0; color:var(--dim);
  transition:color .2s ease;
}
.nav-links a:hover{ color:var(--paper); }
.nav-links a[aria-current="page"]{ color:var(--paper); }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--gold);
}
.nav-toggle{
  display:none; background:none; border:1px solid var(--line); color:var(--paper);
  width:40px; height:40px; align-items:center; justify-content:center;
}

@media (max-width:820px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; inset:76px 0 0 0; background:var(--ink);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:0; padding:8px var(--gutter) 40px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
  }
  .nav-links.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .nav-links a{ width:100%; padding:16px 0; border-bottom:1px solid var(--line); font-size:1rem; }
}

/* =========================================================
   buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px;
  font-family:var(--mono); font-size:0.85rem; letter-spacing:0.02em;
  border:1px solid var(--line-lit);
  background:transparent; color:var(--paper);
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.btn:hover{ border-color:var(--paper); }
.btn-gold{ border-color:var(--gold); color:var(--gold); }
.btn-gold:hover{ background:var(--gold); color:var(--ink); }
.btn-tide{ border-color:var(--tide); color:var(--tide-lit); }
.btn-tide:hover{ background:var(--tide); color:var(--ink); }
.btn-quiet{ border-color:transparent; color:var(--dim); padding-left:0; padding-right:0; }
.btn-quiet:hover{ color:var(--paper); }

/* =========================================================
   section scaffolding
   ========================================================= */
section{ padding:clamp(56px,9vw,110px) 0; }
.section-line{ border-top:1px solid var(--line); }
.label{
  font-family:var(--mono); font-size:0.78rem; color:var(--dim);
  letter-spacing:0.02em;
}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  margin-bottom:clamp(28px,5vw,52px);
}
.section-head h2{ font-size:clamp(1.6rem,3vw,2.3rem); max-width:20ch; }
.section-head p{ color:var(--dim); max-width:38ch; }

/* =========================================================
   hero
   ========================================================= */
.hero{
  padding-top:clamp(60px,10vw,120px);
  padding-bottom:clamp(50px,8vw,90px);
}
.hero .wrap{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(30px,6vw,80px);
  align-items:center;
}
.hero h1{
  font-size:clamp(2.4rem,5.4vw,4.2rem);
  line-height:1.06;
  letter-spacing:-0.01em;
}
.hero .lede{
  margin-top:22px; color:var(--dim); font-size:1.08rem; max-width:46ch;
}
.hero .cta-row{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.hero-art{ position:relative; }
.hero-art svg{ width:100%; height:auto; }

@media (max-width:900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:220px; margin:0 auto; }
}

/* =========================================================
   pillars (home) — three offerings, not a numbered sequence
   ========================================================= */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.pillar{ background:var(--ink); padding:36px 30px; }
.pillar .glyph{ width:30px; height:30px; margin-bottom:22px; }
.pillar h3{ font-size:1.3rem; margin-bottom:10px; }
.pillar p{ color:var(--dim); font-size:0.95rem; }
.pillar a{ display:inline-block; margin-top:18px; font-family:var(--mono); font-size:0.82rem; }
.pillar a.gold{ color:var(--gold-lit); }
.pillar a.tide{ color:var(--tide-lit); }
.pillar a:hover{ text-decoration:underline; }

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

/* =========================================================
   product grid (shop)
   ========================================================= */
.filter-row{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px;
}
.filter-btn{
  font-family:var(--mono); font-size:0.82rem; letter-spacing:0.02em;
  padding:9px 18px; border:1px solid var(--line); background:transparent; color:var(--dim);
  transition:all .18s ease;
}
.filter-btn:hover{ color:var(--paper); border-color:var(--line-lit); }
.filter-btn.active{ color:var(--ink); background:var(--gold); border-color:var(--gold); }

.product-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.product{
  background:var(--ink); padding:26px 24px 28px; display:flex; flex-direction:column;
  transition:background .2s ease;
}
.product:hover{ background:var(--panel); }
.product .thumb{
  aspect-ratio:1/1; border:1px solid var(--line); margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel);
}
.product .thumb svg{ width:46%; height:46%; opacity:0.85; }
.product .kind{ font-family:var(--mono); font-size:0.72rem; color:var(--dim); letter-spacing:0.03em; }
.product h4{ font-size:1.08rem; margin-top:8px; }
.product .desc{ color:var(--dim); font-size:0.88rem; margin-top:6px; flex-grow:1; }
.product .meta-row{
  display:flex; align-items:center; justify-content:space-between; margin-top:18px;
  font-family:var(--mono);
}
.product .price{ color:var(--gold-lit); font-size:0.95rem; }
.product .add{
  font-size:0.78rem; color:var(--dim); border:1px solid var(--line-lit); padding:8px 14px;
  transition:all .18s ease;
}
.product .add:hover{ color:var(--ink); background:var(--paper); border-color:var(--paper); }

@media (max-width:900px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .product-grid{ grid-template-columns:1fr; } }

/* cart drawer */
.cart-toggle{
  font-family:var(--mono); font-size:0.85rem; display:flex; align-items:center; gap:8px;
  border:1px solid var(--line-lit); padding:9px 16px; background:none; color:var(--paper);
}
.cart-toggle .count{ color:var(--gold-lit); }
.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(400px,92vw);
  background:var(--panel); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .28s ease;
  z-index:60; display:flex; flex-direction:column;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-drawer .cart-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:24px var(--gutter); border-bottom:1px solid var(--line);
}
.cart-drawer .cart-body{ padding:20px var(--gutter); overflow-y:auto; flex-grow:1; }
.cart-drawer .cart-foot{ padding:20px var(--gutter) 28px; border-top:1px solid var(--line); }
.cart-item{ display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-size:0.92rem; }
.cart-item .x{ color:var(--faint); font-family:var(--mono); font-size:0.8rem; background:none; border:none; }
.cart-empty{ color:var(--faint); font-size:0.9rem; }
.scrim{
  position:fixed; inset:0; background:rgba(11,13,20,0.6); z-index:50;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.scrim.open{ opacity:1; pointer-events:auto; }

/* =========================================================
   video grid (practice)
   ========================================================= */
.video-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.video-card{
  background:var(--ink); cursor:pointer;
}
.video-card .frame{
  aspect-ratio:16/10; position:relative; overflow:hidden; background:var(--panel);
  border-bottom:1px solid var(--line);
}
.video-card .frame svg{ position:absolute; inset:0; width:100%; height:100%; }
.video-card .play{
  position:absolute; left:24px; bottom:24px;
  width:46px; height:46px; border:1px solid var(--tide-lit); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(11,13,20,0.55);
}
.video-card .play svg{ position:static; width:14px; height:14px; }
.video-card .info{ padding:20px 22px 24px; }
.video-card .tags{ font-family:var(--mono); font-size:0.75rem; color:var(--tide-lit); display:flex; gap:14px; }
.video-card h4{ font-size:1.15rem; margin-top:10px; }
.video-card .desc{ color:var(--dim); font-size:0.9rem; margin-top:6px; }

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

/* video modal */
.modal{
  position:fixed; inset:0; z-index:70; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(11,13,20,0.88);
}
.modal.open{ display:flex; }
.modal-inner{ width:min(920px,100%); }
.modal-close{
  display:flex; justify-content:flex-end; margin-bottom:10px;
  font-family:var(--mono); color:var(--dim); background:none; border:none; font-size:0.85rem;
  width:100%;
}
.modal-video{ width:100%; aspect-ratio:16/9; background:#000; border:1px solid var(--line); }
.modal-video iframe, .modal-video video{ width:100%; height:100%; border:none; }
.modal-caption{ margin-top:14px; color:var(--dim); font-size:0.9rem; }

/* =========================================================
   about / values list
   ========================================================= */
.split{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(30px,6vw,80px);
  align-items:start;
}
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }
.split h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); max-width:16ch; }
.body-copy p{ margin-bottom:1.1em; color:var(--dim); max-width:56ch; }
.body-copy p:last-child{ margin-bottom:0; }

.value-rows{ border-top:1px solid var(--line); margin-top:16px; }
.value-row{
  display:grid; grid-template-columns:1.2fr 2fr; gap:24px;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.value-row h4{ font-size:1.05rem; }
.value-row p{ color:var(--dim); font-size:0.92rem; }
@media (max-width:560px){ .value-row{ grid-template-columns:1fr; gap:6px; } }

/* =========================================================
   contact
   ========================================================= */
.form-grid{ display:grid; gap:20px; max-width:560px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:var(--mono); font-size:0.8rem; color:var(--dim); }
.field input, .field textarea, .field select{
  background:var(--panel); border:1px solid var(--line); color:var(--paper);
  padding:13px 14px; font-family:var(--sans); font-size:0.96rem;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--tide); }
.field textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:0.85rem; color:var(--faint); margin-top:6px; }

.contact-info{ display:flex; flex-direction:column; gap:26px; }
.contact-info .item .label{ display:block; margin-bottom:6px; }
.contact-info .item p, .contact-info .item a{ font-size:1.02rem; }
.socials{ display:flex; gap:16px; margin-top:6px; }
.socials a{ font-family:var(--mono); font-size:0.85rem; color:var(--dim); border-bottom:1px solid transparent; }
.socials a:hover{ color:var(--paper); border-color:var(--paper); }

/* =========================================================
   newsletter band
   ========================================================= */
.newsletter{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.newsletter .wrap{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  flex-wrap:wrap; padding:44px var(--gutter);
}
.newsletter h3{ font-size:1.4rem; max-width:20ch; }
.newsletter form{ display:flex; gap:0; border:1px solid var(--line-lit); }
.newsletter input{
  background:transparent; border:none; color:var(--paper); padding:13px 16px;
  font-family:var(--sans); width:230px; max-width:50vw;
}
.newsletter button{
  border:none; border-left:1px solid var(--line-lit); background:var(--gold);
  color:var(--ink); font-family:var(--mono); font-size:0.85rem; padding:0 20px;
}

/* =========================================================
   footer
   ========================================================= */
.site-footer{ padding:50px 0 40px; }
.site-footer .wrap{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px;
}
.foot-col h5{ font-family:var(--mono); font-size:0.78rem; color:var(--dim); margin-bottom:14px; letter-spacing:0.02em; }
.foot-col ul{ display:flex; flex-direction:column; gap:9px; }
.foot-col a{ color:var(--dim); font-size:0.92rem; }
.foot-col a:hover{ color:var(--paper); }
.foot-bottom{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:0.82rem; color:var(--faint); font-family:var(--mono);
}

/* =========================================================
   page intro (non-home pages)
   ========================================================= */
.page-intro{ padding-top:clamp(50px,8vw,86px); padding-bottom:10px; }
.page-intro h1{ font-size:clamp(2rem,4.4vw,3.2rem); max-width:18ch; }
.page-intro p{ color:var(--dim); margin-top:16px; max-width:52ch; font-size:1.05rem; }

/* toast (add to cart / form submit confirmation) */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px);
  background:var(--paper); color:var(--ink); font-family:var(--mono); font-size:0.85rem;
  padding:13px 22px; opacity:0; transition:opacity .25s ease, transform .25s ease;
  z-index:80; pointer-events:none;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }