/* ============================================================================
   THE MOON LETTER — styles.css
   One shared, tokenised stylesheet for the whole site. Look: "Enchanted
   Moonlight" — warm candlelight, gold on deep night-brown, realistic moon.
   Sections: fonts · tokens · base · layout · header · buttons · hero ·
   ambient · cards · feature · quote · newsletter · products · members ·
   policy · contact · footer · 404 · motion · responsive.
   ========================================================================== */

/* ---- Self-hosted fonts (latin) — see tools/fetch_fonts.py ---------------- */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Cinzel-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Cinzel-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Cinzel-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('../fonts/CormorantGaramond-300-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/CormorantGaramond-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/CormorantGaramond-300-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/CormorantGaramond-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/EBGaramond-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/EBGaramond-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/EBGaramond-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- Design tokens ------------------------------------------------------- */
:root{
  --bg:#1a1207; --bg-2:#251a0e; --bg-3:#2a1d10; --bg-deep:#120c05;
  --panel-1:rgba(78,56,30,.95); --panel-2:rgba(26,18,7,.95);
  --panel-soft-1:rgba(78,56,30,.72); --panel-soft-2:rgba(26,18,7,.72);
  --ink:#e9dec6; --ink-soft:#dccfb2; --ink-muted:#d7cbaf; --ink-faint:#c8bda1; --ink-dim:#aba189;
  --gold:#e6c079; --gold-bright:#f4dc93; --gold-deep:#d8a94e;
  --cream:#f0e0bb; --cream-2:#f2e4c2; --heading:#f0e0bb;
  --night:#18244e;
  --line:rgba(230,192,121,.22); --line-soft:rgba(230,192,121,.14); --line-strong:rgba(230,192,121,.45);
  --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-label:'Cinzel',Georgia,serif;
  --font-body:'EB Garamond',Georgia,'Times New Roman',serif;
  --maxw:1180px; --measure:66ch;
  --shadow-card:0 30px 60px -40px rgba(0,0,0,.9);
  --shadow-lift:0 40px 80px -40px rgba(0,0,0,.95),0 0 46px -8px rgba(230,192,121,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad-x:clamp(20px,5vw,24px);
  --space-section:clamp(76px,10vw,140px);
}

/* ---- Reset / base -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:18px;line-height:1.8;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.16}
p{margin:0;text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--gold-bright)}
ul{margin:0;padding:0}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:rgba(230,192,121,.28);color:#fff8e6}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}

.skip-link{position:fixed;top:10px;left:10px;z-index:100;transform:translateY(-160%);
  background:var(--bg-2);color:var(--gold-bright);border:1px solid var(--gold);
  padding:10px 18px;font-family:var(--font-label);font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:transform .25s var(--ease)}
.skip-link:focus{transform:translateY(0)}

/* Ambient grain + vignette, once, via body pseudos (was 2 divs per page) */
body::before{content:"";position:fixed;inset:0;z-index:7;pointer-events:none;box-shadow:inset 0 0 240px 90px rgba(14,8,3,.86)}
body::after{content:"";position:fixed;inset:0;z-index:8;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}

/* ---- Layout -------------------------------------------------------------- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.container--narrow{max-width:780px}
main{display:block}
/* content-visibility defers offscreen sections (and their background images),
   so below-the-fold art never competes with the hero for bandwidth on load. */
.section{position:relative;overflow:hidden;padding-block:var(--space-section);padding-inline:var(--pad-x);content-visibility:auto;contain-intrinsic-size:auto 720px}
.section > .container{position:relative}
.section--tint{background:linear-gradient(180deg,var(--bg),var(--bg-2) 45%,var(--bg))}
.section--tint2{background:linear-gradient(180deg,var(--bg),var(--bg-3) 50%,var(--bg))}
.section--edged{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.section__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 45% at 50% 0%,rgba(230,192,121,.1),rgba(230,192,121,0) 70%)}
.section-head{text-align:center;max-width:52ch;margin:0 auto clamp(40px,5.5vw,72px)}
.section-head .eyebrow{margin-bottom:14px}

.eyebrow{font-family:var(--font-label);font-size:11.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-deep);margin:0;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.display-1{font-family:var(--font-display);font-weight:300;font-size:clamp(3rem,10vw,7rem);letter-spacing:.04em;color:var(--gold-bright);text-shadow:0 0 60px rgba(230,192,121,.35),0 2px 30px rgba(0,0,0,.6)}
.display-2{font-family:var(--font-display);font-weight:300;font-size:clamp(2.3rem,5.2vw,3.8rem);color:var(--heading)}
.h-section{font-family:var(--font-display);font-weight:300;font-size:clamp(2.1rem,4.6vw,3.3rem);color:var(--heading)}
.lead{font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1.55;color:var(--cream)}
.prose p{color:var(--ink-soft)}
.prose p + p{margin-top:1.1em}
.rule{width:78px;height:1px;margin:clamp(26px,4vw,40px) auto;background:linear-gradient(90deg,rgba(230,192,121,0),var(--gold),rgba(230,192,121,0));border:0}
.text-center{text-align:center}
.measure{max-width:var(--measure);margin-inline:auto}

/* ---- Header / nav -------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,rgba(18,12,5,.95),rgba(26,18,7,.82));
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line)}
.site-header__inner{max-width:var(--maxw);margin-inline:auto;padding:12px var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#f1e6cf}
.brand__moon{width:26px;height:26px;border-radius:50%;box-shadow:0 0 18px 5px rgba(230,192,121,.45);animation:mlMoon 9s ease-in-out infinite}
.brand__name{font-family:var(--font-label);font-size:15px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:#e9d3a2;white-space:nowrap}
.main-nav__list{display:flex;align-items:center;gap:clamp(14px,2.2vw,28px);list-style:none}
.main-nav__link{display:block;padding:6px 0;text-decoration:none;color:var(--ink-soft);
  font-family:var(--font-label);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid transparent;transition:color .4s var(--ease),border-color .4s var(--ease),text-shadow .4s var(--ease)}
.main-nav__link:hover{color:var(--gold-bright);text-shadow:0 0 16px rgba(230,192,121,.5)}
.main-nav__link[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:1px solid var(--line);color:var(--gold)}
.nav-toggle svg{width:20px;height:20px}
.nav-toggle .icon-close{display:none}

/* ---- Buttons ------------------------------------------------------------- */
.btn{display:inline-block;padding:15px 34px;text-decoration:none;text-align:center;
  font-family:var(--font-label);font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  border:1px solid var(--line-strong);background:transparent;color:var(--gold-bright);
  transition:box-shadow .5s var(--ease),background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease),border-color .5s var(--ease)}
.btn--primary{border-color:rgba(230,192,121,.75);background:linear-gradient(180deg,rgba(230,192,121,.2),rgba(201,150,46,.1))}
.btn--primary:hover{box-shadow:0 0 44px rgba(230,192,121,.42);background:linear-gradient(180deg,rgba(230,192,121,.34),rgba(201,150,46,.2));color:#fff6df;transform:translateY(-2px)}
.btn--ghost{border-color:rgba(240,222,187,.32);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-2px)}
.btn--block{display:block;width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(30px,4.5vw,46px)}
.btn-row--center{justify-content:center}

/* ---- Hero + ambient ------------------------------------------------------ */
.hero{position:relative;overflow:hidden;min-height:min(100vh,980px);display:flex;align-items:center;justify-content:center;padding:clamp(90px,12vw,150px) var(--pad-x) clamp(80px,10vw,130px)}
.page-hero{position:relative;overflow:hidden;text-align:center;padding:clamp(96px,13vw,170px) var(--pad-x) clamp(64px,8vw,104px)}
.hero__content{position:relative;z-index:3;max-width:840px;margin:0 auto;text-align:center}
.hero__content--push{padding-top:clamp(140px,20vw,280px)}
.page-hero__content{position:relative;z-index:3;max-width:820px;margin:0 auto}
/* Soft dark plate behind hero text — guarantees legibility over any photo. */
.hero__content::before,.page-hero__content::before{content:"";position:absolute;z-index:-1;inset:-16% -20%;
  background:radial-gradient(65% 60% at 50% 46%,rgba(8,5,2,.74),rgba(8,5,2,.44) 52%,rgba(8,5,2,0) 78%);filter:blur(24px);pointer-events:none}
.hero__lede{margin-inline:auto;max-width:56ch;font-size:clamp(17px,1.5vw,20.5px);color:var(--cream);text-shadow:0 2px 20px rgba(0,0,0,.7)}
.hero__tagline{font-family:var(--font-display);font-style:italic;font-size:clamp(1.35rem,3.2vw,2.15rem);color:#f0e6cc;text-shadow:0 2px 22px rgba(0,0,0,.72)}
.page-hero__tagline{font-family:var(--font-display);font-style:italic;font-size:clamp(1.2rem,2.6vw,1.75rem);color:#eee2c6;margin-top:18px;text-shadow:0 2px 20px rgba(0,0,0,.7)}

/* ambient layers (decorative, aria-hidden) */
.layer{position:absolute;pointer-events:none}
.layer-bg{position:absolute;left:0;right:0;top:-12%;height:124%;will-change:transform}
.layer-bg__img{position:absolute;inset:0;background-size:cover;background-position:50% 42%}
.scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(20,13,6,.72) 0%,rgba(26,18,8,.5) 38%,rgba(26,18,8,.86) 78%,var(--bg) 100%)}
.scrim--strong{background:linear-gradient(180deg,rgba(14,9,4,.92),rgba(18,12,6,.84) 40%,rgba(18,12,6,.96) 82%,var(--bg))}
.scrim--soft{background:linear-gradient(180deg,var(--bg),rgba(26,18,8,.82) 40%,var(--bg))}
/* Home hero: let the moonlit-woman painting carry the frame — hide the rival
   parallax moon and lift the top of the scrim so she shows through. */
/* Home hero: bring the big moon back, but up in the top-right where she gazes. */
.hero--woman .hero__moon-wrap{top:clamp(6px,1.4vw,34px);left:auto;right:clamp(90px,25vw,405px);justify-content:flex-end}
.hero--woman .hero__moon{width:clamp(135px,16vw,230px);height:clamp(135px,16vw,230px)}
.hero--woman .scrim{background:linear-gradient(180deg,rgba(16,10,4,.30) 0%,rgba(20,13,6,.30) 38%,rgba(18,12,6,.80) 80%,var(--bg) 100%)}
.hero--woman .layer-bg__img{filter:saturate(1.06) contrast(1.02)}
.glow-warm{position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 55% at 50% 26%,rgba(230,192,121,.16),rgba(230,192,121,0) 65%)}
.sky-blue{position:absolute;left:0;right:0;top:0;height:66%;pointer-events:none;background:radial-gradient(46% 66% at 50% 16%,rgba(24,36,78,.92),rgba(24,36,78,.4) 52%,rgba(24,36,78,0) 78%)}
.stars{position:absolute;left:0;right:0;top:0;height:70%;width:100%;opacity:.7;mix-blend-mode:screen;pointer-events:none}
.mist{position:absolute;left:-12%;right:-12%;bottom:2%;height:44%;pointer-events:none;background:radial-gradient(60% 100% at 50% 100%,rgba(78,56,30,.85),rgba(78,56,30,0));animation:mlMist 46s ease-in-out infinite alternate}
.hero__moon-wrap{position:absolute;top:clamp(58px,9vw,120px);left:0;right:0;display:flex;justify-content:center;will-change:transform}
.hero__moon{position:relative;width:clamp(170px,23vw,320px);height:clamp(170px,23vw,320px);animation:mlRise 2.6s var(--ease) both}
.hero__moon-halo{position:absolute;inset:-46%;border-radius:50%;background:radial-gradient(circle,rgba(240,222,187,.3),rgba(230,192,121,.12) 46%,rgba(230,192,121,0) 72%);animation:mlHalo 13s ease-in-out infinite}
.hero__moon-img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;box-shadow:0 0 90px 26px rgba(240,222,187,.26),0 0 200px 70px rgba(230,192,121,.2);animation:mlMoon 14s ease-in-out infinite}
.dust{position:absolute;border-radius:50%;background:var(--gold-bright);box-shadow:0 0 12px 4px rgba(244,220,147,.5);animation:mlDust 18s ease-in-out infinite}

/* page-scoped background photos (WebP with JPEG fallback) */
.bg-garden{background-image:url('../img/garden-path-hd.jpg');background-image:image-set(url('../img/garden-path-hd.webp') type('image/webp'),url('../img/garden-path-hd.jpg') type('image/jpeg'))}
.bg-door{background-image:url('../img/moonlit-door-hd.jpg');background-image:image-set(url('../img/moonlit-door-hd.webp') type('image/webp'),url('../img/moonlit-door-hd.jpg') type('image/jpeg'))}
.bg-desk{background-image:url('../img/candlelit-desk-hd.jpg');background-image:image-set(url('../img/candlelit-desk-hd.webp') type('image/webp'),url('../img/candlelit-desk-hd.jpg') type('image/jpeg'))}
.bg-woman{background-image:url('../img/woman-moonlight-hd.jpg');background-image:image-set(url('../img/woman-moonlight-hd.webp') type('image/webp'),url('../img/woman-moonlight-hd.jpg') type('image/jpeg'))}
.bg-tree{background-image:url('../img/tree-hd.jpg');background-image:image-set(url('../img/tree-hd.webp') type('image/webp'),url('../img/tree-hd.jpg') type('image/jpeg'))}
.bg-hands{background-image:url('../img/hands-hd.jpg');background-image:image-set(url('../img/hands-hd.webp') type('image/webp'),url('../img/hands-hd.jpg') type('image/jpeg'))}
.bg-wanderer{background-image:url('../img/wanderer-hd.jpg');background-image:image-set(url('../img/wanderer-hd.webp') type('image/webp'),url('../img/wanderer-hd.jpg') type('image/jpeg'))}
.bg-letter{background-image:url('../img/letter-hd.jpg');background-image:image-set(url('../img/letter-hd.webp') type('image/webp'),url('../img/letter-hd.jpg') type('image/jpeg'))}
.bg-water{background-image:url('../img/water-hd.jpg');background-image:image-set(url('../img/water-hd.webp') type('image/webp'),url('../img/water-hd.jpg') type('image/jpeg'))}
.bg-bowl{background-image:url('../img/bowl-hd.jpg');background-image:image-set(url('../img/bowl-hd.webp') type('image/webp'),url('../img/bowl-hd.jpg') type('image/jpeg'))}
.bg-veil{background-image:url('../img/veil-hd.jpg');background-image:image-set(url('../img/veil-hd.webp') type('image/webp'),url('../img/veil-hd.jpg') type('image/jpeg'))}
@media (max-width:760px){
  .bg-garden{background-image:image-set(url('../img/garden-path-960hd.webp') type('image/webp'),url('../img/garden-path-hd.jpg') type('image/jpeg'))}
  .bg-door{background-image:image-set(url('../img/moonlit-door-960hd.webp') type('image/webp'),url('../img/moonlit-door-hd.jpg') type('image/jpeg'))}
  .bg-desk{background-image:image-set(url('../img/candlelit-desk-960hd.webp') type('image/webp'),url('../img/candlelit-desk-hd.jpg') type('image/jpeg'))}
  .bg-woman{background-image:image-set(url('../img/woman-moonlight-960hd.webp') type('image/webp'),url('../img/woman-moonlight-hd.jpg') type('image/jpeg'))}
  .bg-tree{background-image:image-set(url('../img/tree-960hd.webp') type('image/webp'),url('../img/tree-hd.jpg') type('image/jpeg'))}
  .bg-hands{background-image:image-set(url('../img/hands-960hd.webp') type('image/webp'),url('../img/hands-hd.jpg') type('image/jpeg'))}
  .bg-wanderer{background-image:image-set(url('../img/wanderer-960hd.webp') type('image/webp'),url('../img/wanderer-hd.jpg') type('image/jpeg'))}
  .bg-letter{background-image:image-set(url('../img/letter-960hd.webp') type('image/webp'),url('../img/letter-hd.jpg') type('image/jpeg'))}
  .bg-water{background-image:image-set(url('../img/water-960hd.webp') type('image/webp'),url('../img/water-hd.jpg') type('image/jpeg'))}
  .bg-bowl{background-image:image-set(url('../img/bowl-960hd.webp') type('image/webp'),url('../img/bowl-hd.jpg') type('image/jpeg'))}
  .bg-veil{background-image:image-set(url('../img/veil-960hd.webp') type('image/webp'),url('../img/veil-hd.jpg') type('image/jpeg'))}
}

/* ---- The moon tonight ---------------------------------------------------- */
.moon-tonight{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(30px,6vw,72px);align-items:center;margin-top:clamp(20px,3vw,36px)}
.moon-tonight__disc{position:relative;justify-self:center;width:min(78%,280px);aspect-ratio:1}
.moon-tonight__disc .halo{position:absolute;inset:-20%;border-radius:50%;background:radial-gradient(circle,rgba(240,222,187,.30),rgba(230,192,121,.09) 50%,transparent 72%);animation:mlHalo 13s ease-in-out infinite}
.moon-tonight__disc svg{position:relative;width:100%;height:100%;display:block;filter:drop-shadow(0 0 34px rgba(230,192,121,.4))}
.moon-date{font-family:var(--font-label);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 10px}
.moon-name{font-family:var(--font-display);font-weight:300;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.02;color:var(--gold-bright);margin:0}
.moon-illum{font-family:var(--font-display);font-style:italic;font-size:clamp(1rem,2vw,1.25rem);color:var(--ink-soft);margin:8px 0 0}
.moon-line{font-family:var(--font-body);font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.6;color:var(--cream);max-width:46ch;margin:16px 0 22px}
.phase-row{display:flex;justify-content:space-between;gap:clamp(2px,1vw,10px);margin-top:clamp(30px,4.5vw,52px);max-width:680px;margin-inline:auto}
.phase-row .ph{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.38;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.phase-row .ph.is-now{opacity:1;transform:translateY(-3px)}
.phase-row .ph svg{width:clamp(20px,3.6vw,34px);height:auto;filter:drop-shadow(0 0 8px rgba(230,192,121,.35))}
.phase-row .ph .lbl{font-family:var(--font-label);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);text-align:center;line-height:1.3}
.phase-row .ph.is-now .lbl{color:var(--gold-bright)}
@media(max-width:760px){.moon-tonight{grid-template-columns:1fr;text-align:center}.moon-tonight__body{display:flex;flex-direction:column;align-items:center}.moon-line{margin-inline:auto}}

/* ---- Manifesto (full-bleed) ---------------------------------------------- */
.manifesto{position:relative;text-align:center;padding:clamp(90px,15vw,180px) var(--pad-x)}
.manifesto__inner{position:relative;z-index:3;max-width:720px;margin:0 auto}
.manifesto p{font-family:var(--font-display);font-weight:300;font-size:clamp(1.7rem,4vw,3rem);line-height:1.32;color:var(--gold-bright);text-shadow:0 2px 30px rgba(0,0,0,.8)}
.manifesto .sub{font-family:var(--font-body);font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.7;color:var(--cream);margin-top:26px;text-shadow:0 2px 16px rgba(0,0,0,.85)}
/* ---- Gallery strip ------------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.2vw,16px);margin-top:clamp(24px,3.4vw,44px)}
.gallery a{position:relative;display:block;aspect-ratio:1;overflow:hidden;border:1px solid var(--line);border-radius:3px}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease),filter .8s var(--ease);filter:saturate(.96) brightness(.94)}
.gallery a:hover img{transform:scale(1.07);filter:saturate(1.05) brightness(1.04)}
.gallery a::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 40px rgba(6,5,14,.5);pointer-events:none}
@media(max-width:760px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media(min-width:761px){.feature--reverse .feature__media{order:2}}

/* ---- Cards / grid -------------------------------------------------------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(18px,2.4vw,28px)}
.card{position:relative;padding:34px 28px 36px;background:linear-gradient(180deg,var(--panel-1),var(--panel-2));border:1px solid var(--line);box-shadow:var(--shadow-card);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .6s var(--ease)}
.card--link{text-decoration:none;display:block}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:rgba(230,192,121,.5)}
.card__icon{display:block;margin-bottom:20px}
.card__title{font-family:var(--font-display);font-size:1.75rem;color:var(--gold-bright);margin-bottom:12px}
.card__text{font-size:16.5px;color:var(--ink-muted)}
.card__kicker{display:block;font-family:var(--font-label);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px}
.card__lead{display:block;font-family:var(--font-display);font-size:1.6rem;color:var(--heading)}
/* Product image at the top of a card (full-bleed to the card edges). */
.card__media{margin:-34px -28px 22px;aspect-ratio:16/10;overflow:hidden;position:relative;border-bottom:1px solid var(--line)}
.card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.card__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(26,18,7,0) 52%,rgba(26,18,7,.6))}
.card--link:hover .card__media img{transform:scale(1.05)}

/* ---- Feature split ------------------------------------------------------- */
.feature{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(34px,5vw,72px);align-items:center}
.feature__media{position:relative;padding:12px;border:1px solid var(--line-strong);box-shadow:0 40px 90px -50px rgba(0,0,0,.95)}
.feature__media::after{content:"";position:absolute;inset:-1px;pointer-events:none;box-shadow:inset 0 0 60px rgba(230,192,121,.14)}
.feature__flicker{position:absolute;left:22%;top:34%;width:46%;height:44%;pointer-events:none;background:radial-gradient(circle,rgba(244,220,147,.22),rgba(244,220,147,0) 70%);animation:mlFlicker 5.5s ease-in-out infinite}

/* ---- Quote --------------------------------------------------------------- */
.quote{position:relative;z-index:2;max-width:920px;margin:0 auto;text-align:center}
.quote p{font-family:var(--font-display);font-size:clamp(1.7rem,4vw,3rem);line-height:1.42;color:var(--cream-2);text-shadow:0 2px 40px rgba(0,0,0,.7)}
.quote .rule{margin-bottom:0}

/* ---- Find-us cards ------------------------------------------------------- */
.find-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(18px,2.4vw,26px);text-align:left}
.find-card{display:block;padding:30px 26px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(78,56,30,.92),rgba(26,18,7,.92));text-decoration:none;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .6s var(--ease)}
.find-card:hover{transform:translateY(-6px);border-color:rgba(230,192,121,.55);box-shadow:0 0 44px -8px rgba(230,192,121,.28)}

/* ---- Social row (real brand logos) ---- */
.social-row{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,32px);justify-content:center;align-items:flex-start;max-width:660px;margin:0 auto}
.social-link{display:flex;flex-direction:column;align-items:center;gap:11px;text-decoration:none;color:var(--gold);width:84px}
.social-ico{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle,rgba(22,16,9,.55),rgba(9,6,3,.7));transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.social-ico svg{width:30px;height:30px;display:block}
.social-link:hover .social-ico{transform:translateY(-5px);border-color:var(--gold);color:var(--gold-bright);box-shadow:0 0 32px -6px rgba(230,192,121,.45)}
.social-link span:last-child{font-family:var(--font-label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);text-align:center}
.footer-socials{display:flex;gap:14px;margin-top:2px}
.footer-socials a{color:var(--gold-deep);transition:color .4s var(--ease),transform .4s var(--ease)}
.footer-socials a:hover{color:var(--gold-bright);transform:translateY(-2px)}
.footer-socials svg{width:20px;height:20px;fill:currentColor;display:block}

/* ---- Newsletter ---------------------------------------------------------- */
.newsletter{position:relative;max-width:660px;margin:0 auto;text-align:center;padding:clamp(38px,5.5vw,58px) clamp(22px,4vw,44px);
  border:1px solid var(--line-strong);background:linear-gradient(180deg,var(--panel-soft-1),var(--panel-soft-2))}
.newsletter__form{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.newsletter__input{flex:1 1 260px;min-width:0;padding:14px 18px;font-family:var(--font-body);font-size:17px;
  color:var(--ink);background:rgba(12,8,3,.6);border:1px solid var(--line);outline-offset:2px}
.newsletter__input::placeholder{color:#9d927b}
.newsletter__input:focus-visible{border-color:var(--gold)}
.newsletter .btn{white-space:nowrap}
.form-note{margin-top:16px;font-size:14px;color:var(--ink-dim)}
.form-note a{color:var(--gold-deep)}
.form-status{margin-top:16px;min-height:1.4em;font-family:var(--font-body);font-size:15.5px}
.form-status[data-state="loading"]{color:var(--ink-soft)}
.form-status[data-state="success"]{color:var(--gold-bright)}
.form-status[data-state="error"]{color:#f0b48a}

/* ---- Forms (contact-ready / generic) ------------------------------------- */
.field{display:flex;flex-direction:column;gap:8px;text-align:left;margin-bottom:18px}
.field label{font-family:var(--font-label);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.field input,.field textarea{padding:13px 16px;font-family:var(--font-body);font-size:17px;color:var(--ink);
  background:rgba(12,8,3,.6);border:1px solid var(--line)}
.field input:focus-visible,.field textarea:focus-visible{border-color:var(--gold)}

/* ---- Products ------------------------------------------------------------ */
.price{display:flex;align-items:baseline;gap:12px;margin:6px 0 4px}
.price__amount{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,3.4rem);color:var(--gold-bright);line-height:1}
.price__unit{font-family:var(--font-label);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.price__was{font-size:1rem;color:var(--ink-dim);text-decoration:line-through}
.badge{display:inline-block;padding:5px 13px;font-family:var(--font-label);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--bg);background:var(--gold);border-radius:2px}
.badge--soft{color:var(--gold);background:transparent;border:1px solid var(--line-strong)}
.spec-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin:8px 0 0}
.spec-list li{position:relative;padding-left:30px;color:var(--ink-soft)}
.spec-list li::before{content:"☾";position:absolute;left:0;top:1px;color:var(--gold-deep)}
.faq{max-width:780px;margin-inline:auto;display:flex;flex-direction:column;gap:0}
.faq__item{border-top:1px solid var(--line);padding:26px 0}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__q{font-family:var(--font-display);font-size:1.5rem;color:var(--heading);margin-bottom:10px}
.faq__a{color:var(--ink-soft)}

/* ---- Members / auth ------------------------------------------------------ */
.notice{max-width:820px;margin:0 auto;padding:22px 26px;border:1px solid var(--line-strong);
  background:linear-gradient(180deg,rgba(78,56,30,.55),rgba(26,18,7,.55));color:var(--ink-soft);font-size:16px}
.notice strong{color:var(--gold-bright)}
.auth-card{max-width:440px;margin:0 auto;padding:clamp(32px,5vw,48px);border:1px solid var(--line-strong);
  background:linear-gradient(180deg,var(--panel-1),var(--panel-2));box-shadow:var(--shadow-card)}
.auth-card h1{margin-bottom:8px}
.auth-alt{margin-top:22px;font-size:15px;color:var(--ink-dim);text-align:center}
.account-meta{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0}
.account-meta li{display:flex;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.account-meta dt,.account-meta .k{color:var(--ink-dim);font-family:var(--font-label);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.account-meta dd,.account-meta .v{margin:0;color:var(--cream)}
.lock-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-label);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.med-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel-1),var(--panel-2))}
.med-card__meta{font-family:var(--font-label);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.med-card__title{font-family:var(--font-display);font-size:1.5rem;color:var(--heading)}
.med-card--locked{opacity:.72}
.med-card--locked .med-card__title::after{content:" ⚿";color:var(--gold-deep);font-size:.9em}

/* auth-state visibility toggles (set on <body> by auth.js) */
.only-authed{display:none}
body.is-authed .only-authed{display:revert}
body.is-authed .only-guest{display:none}

/* ---- Policy pages -------------------------------------------------------- */
.policy{max-width:780px;margin:0 auto}
.policy__intro{margin-bottom:clamp(40px,5.5vw,64px);font-family:var(--font-display);font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.6;color:var(--cream)}
.policy__item{margin-top:clamp(34px,4.5vw,52px);padding-top:32px;border-top:1px solid rgba(230,192,121,.28)}
.policy__item:first-of-type{margin-top:0}
.policy__item--highlight{padding:32px 28px 34px;border:1px solid rgba(230,192,121,.3);border-top:1px solid rgba(230,192,121,.3);background:linear-gradient(180deg,rgba(78,56,30,.8),rgba(26,18,7,.8))}
.policy__num{margin:0 0 10px;font-family:var(--font-label);font-size:11px;letter-spacing:.34em;color:var(--gold-deep)}
.policy__item h2{font-family:var(--font-display);font-size:clamp(1.6rem,3.2vw,2.2rem);color:var(--heading);margin-bottom:14px}
.policy__item--highlight h2{color:var(--gold-bright)}
.policy__item h3{font-family:var(--font-display);font-size:1.3rem;color:#e8dcc0;margin:18px 0 6px}
.policy__item p{color:var(--ink-soft)}
.policy__item p + p{margin-top:14px}
.policy__item ul{padding-left:1.15em;color:var(--ink-soft);display:flex;flex-direction:column;gap:7px;margin:4px 0 14px}

/* ---- Footer -------------------------------------------------------------- */
.site-footer{position:relative;overflow:hidden;background:linear-gradient(180deg,#1c1409,var(--bg-deep));border-top:1px solid var(--line);padding:clamp(54px,7vw,90px) var(--pad-x) 34px}
.site-footer::before{content:"";position:absolute;left:50%;top:-140px;transform:translateX(-50%);width:520px;height:280px;pointer-events:none;background:radial-gradient(50% 60% at 50% 50%,rgba(230,192,121,.14),rgba(230,192,121,0) 70%)}
.site-footer__grid{position:relative;max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(28px,4vw,52px)}
@media (max-width:900px){.site-footer__grid{grid-template-columns:1fr 1fr}}
.footer-brand__row{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.footer-brand__moon{width:22px;height:22px;border-radius:50%;box-shadow:0 0 16px 4px rgba(230,192,121,.4);animation:mlMoon 11s ease-in-out infinite}
.footer-brand__name{font-family:var(--font-label);font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:#e9d3a2}
.footer-brand p{font-size:16.5px;line-height:1.85;color:var(--ink-faint);max-width:32ch;font-style:italic}
.footer-heading{font-family:var(--font-label);font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 16px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-links a{color:#d9cfb6;text-decoration:none;font-size:16px;transition:color .35s var(--ease)}
.footer-links a:hover{color:var(--gold-bright)}
.footer-bottom{position:relative;max-width:var(--maxw);margin:clamp(34px,5vw,56px) auto 0;padding-top:22px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:13.5px;color:var(--ink-dim);letter-spacing:.05em}
.footer-bottom em{color:var(--gold-deep);font-style:italic}

/* ---- 404 ----------------------------------------------------------------- */
.error-hero{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center}

/* ---- Motion keyframes ---------------------------------------------------- */
@keyframes mlMoon{0%,100%{opacity:.93;transform:scale(1)}50%{opacity:1;transform:scale(1.028)}}
@keyframes mlHalo{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}
@keyframes mlMist{from{transform:translate3d(-8%,0,0)}to{transform:translate3d(8%,0,0)}}
@keyframes mlDust{0%{opacity:0;transform:translate3d(0,0,0)}15%{opacity:.9}60%{opacity:.5;transform:translate3d(16px,-90px,0)}100%{opacity:0;transform:translate3d(-10px,-190px,0)}}
@keyframes mlFlicker{0%,100%{opacity:.72}12%{opacity:.95}26%{opacity:.62}41%{opacity:1}58%{opacity:.7}73%{opacity:.9}88%{opacity:.66}}
@keyframes mlIntro{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes mlRise{from{opacity:0;transform:translate3d(0,70px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.anim-intro{animation:mlIntro 1.5s var(--ease) both}
.d1{animation-delay:.3s}.d2{animation-delay:.5s}.d3{animation-delay:.7s}.d4{animation-delay:.9s}.d5{animation-delay:1.1s}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:760px){
  body{font-size:17px}
  .nav-toggle{display:inline-flex}
  .main-nav{position:absolute;top:100%;left:0;right:0;display:none;
    background:linear-gradient(180deg,rgba(20,14,7,.98),rgba(18,12,5,.98));
    border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
  .site-header.is-open .main-nav{display:block}
  .site-header.is-open .nav-toggle .icon-open{display:none}
  .site-header.is-open .nav-toggle .icon-close{display:block}
  .main-nav__list{flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad-x) 16px}
  .main-nav__link{padding:14px 0;font-size:13px;border-bottom:1px solid var(--line-soft)}
  .main-nav__link[aria-current="page"]{border-bottom-color:var(--line-soft);color:var(--gold-bright)}
  .site-footer__grid{grid-template-columns:1fr;gap:32px}
  .newsletter__form{flex-direction:column}
  .newsletter .btn{width:100%}
}
@media (max-width:420px){
  .brand__name{font-size:13px;letter-spacing:.2em}
  .btn{padding:14px 24px}
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .mist,.dust,.hero__moon-halo,.feature__flicker{animation:none!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}