/* Mazo Moon product sales pages (/products/...). Same tokens as src/site.html: warm ivory, charcoal, one rosewood band. */
:root{
  --surface:#f7f4ef; --surface-raised:#fbf9f6; --surface-sunken:#e7e2dc; --surface-inverse:#434342;
  --surface-feature:#80615f; --text:#434342; --text-muted:#675f5b; --text-accent:#705b65;
  --text-on-inverse:#f7f4ef; --text-on-feature:#f7f4ef; --accent:#967a85;
  --action:#434342; --on-action:#f7f4ef; --hairline:#d9d2cb; --border-strong:#8a7c73; --focus:#80615f;
  --display:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --sans:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;
  --r-sm:2px; --wrap:1120px; color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --surface:#303133; --surface-raised:#3a3b3c; --surface-sunken:#3a3b3c; --surface-inverse:#f7f4ef;
  --text:#f7f4ef; --text-muted:#b9b0aa; --text-accent:#c4a9b4; --text-on-inverse:#303133;
  --accent:#c4a9b4; --action:#f7f4ef; --on-action:#303133; --hairline:#4d4e4f; --border-strong:#8f8580; --focus:#c4a9b4; color-scheme:dark}}
:root[data-theme="dark"]{
  --surface:#303133; --surface-raised:#3a3b3c; --surface-sunken:#3a3b3c; --surface-inverse:#f7f4ef;
  --text:#f7f4ef; --text-muted:#b9b0aa; --text-accent:#c4a9b4; --text-on-inverse:#303133;
  --accent:#c4a9b4; --action:#f7f4ef; --on-action:#303133; --hairline:#4d4e4f; --border-strong:#8f8580; --focus:#c4a9b4; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--text);font-family:var(--sans);font-size:16px;line-height:26px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--action);color:var(--on-action);padding:8px 14px;z-index:20}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
@media (max-width:600px){.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}

/* type */
.label{font:500 12px/16px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text-accent)}
.d-xl,.d-l,.h,.t{font-family:var(--display);font-weight:500;text-wrap:balance;margin:0}
.d-xl{font-size:clamp(40px,5.6vw,62px);line-height:1.05;letter-spacing:-.01em}
.d-xl em,.d-l em{font-style:italic}
.d-l{font-size:clamp(30px,4vw,42px);line-height:1.12}
.h{font-size:30px;line-height:36px}
.t{font-size:22px;line-height:28px;font-weight:600}
.lead{font-size:18px;line-height:28px;color:var(--text-muted);max-width:36em}
.muted{color:var(--text-muted)}
.small{font-size:14px;line-height:22px}
.strong-s{font-size:14px;line-height:20px;font-weight:500}
.caption{font-size:13px;line-height:19px;color:var(--text-muted)}
.prose{max-width:62ch;display:grid;gap:16px}
.prose p{font-size:17px;line-height:29px}
.star{color:var(--accent)}
.center{text-align:center;justify-content:center;margin-inline:auto}

/* header */
header.site{position:sticky;top:0;z-index:9;background:var(--surface);border-bottom:1px solid var(--hairline)}
.bar{display:flex;flex-direction:column;align-items:center;gap:18px;padding-block:22px 12px}
.wordmark{display:block;background:var(--text);-webkit-mask:url(/img/wordmark-mask.png) center/contain no-repeat;mask:url(/img/wordmark-mask.png) center/contain no-repeat;aspect-ratio:900/124;width:200px;flex:none}
.wordmark span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;flex-wrap:wrap;justify-content:center}
nav.main a{font:500 12px/16px var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--text-muted);padding-block:6px;border-bottom:1px solid transparent}
nav.main a:hover{color:var(--text)}
nav.main a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent)}
.menu-btn{display:none;font:500 12px/16px var(--sans);letter-spacing:.14em;text-transform:uppercase;background:none;border:1px solid var(--border-strong);color:var(--text);border-radius:var(--r-sm);padding:10px 14px;cursor:pointer}
@media (max-width:1100px){
  .bar{flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding-block:16px}
  .wordmark{width:160px}
  .menu-btn{display:block}
  nav.main{display:none;width:100%}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;gap:0;padding-bottom:8px}
  nav.main li a{display:block;padding:14px 0;border-bottom:1px solid var(--hairline)}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:500 15px/20px var(--sans);letter-spacing:.04em;text-decoration:none;border-radius:var(--r-sm);padding:14px 24px;cursor:pointer;border:1px solid transparent;transition:background .2s,color .2s;min-height:48px}
.btn-primary{background:var(--action);color:var(--on-action)}
.btn-primary:hover{background:var(--surface-feature);color:var(--text-on-feature)}
.btn-secondary{border-color:var(--border-strong);color:var(--text);background:transparent}
.btn-secondary:hover{background:var(--surface-sunken)}
.btn-text{padding:0 0 2px;min-height:0;border:0;background:none;color:var(--text);border-bottom:1px solid var(--accent);border-radius:0;align-self:center}
.btn small{font-size:13px;opacity:.8;letter-spacing:.04em;padding-left:10px;border-left:1px solid currentColor}
.btn-row{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.btn-col{display:grid;gap:10px}

/* sections */
.sec{padding-block:72px}
.sec-tight{padding-block:32px}
.narrow{max-width:820px}
.sec-head{display:grid;gap:14px;margin-bottom:36px;max-width:720px}
.sunken{background:var(--surface-sunken)}
.feature{background:var(--surface-feature);color:var(--text-on-feature)}
.feature .label{color:var(--text-on-feature);opacity:.85}
.feature .narrow{display:grid;gap:18px}
.wrap.sec.narrow{display:grid;gap:18px}
.page-hero{padding-block:56px 24px;display:grid;gap:16px;max-width:780px}
@media (max-width:600px){.sec{padding-block:52px}}

/* 01 hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding-block:40px 56px}
.hero-copy{display:grid;gap:18px;align-content:center;min-width:0}
.hero-art{min-width:0}
.hero-copy > *{min-width:0;max-width:100%}
.crumbs{font-size:13px;color:var(--text-muted)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.for{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.for li{position:relative;padding-left:22px;font-size:16px;line-height:24px}
.for li::before{content:"✦";position:absolute;left:0;top:0;color:var(--accent);font-size:12px}
.stage{margin:0;background:var(--surface-sunken);aspect-ratio:1/1;position:relative;overflow:hidden}
.stage img{width:100%;height:100%;object-fit:cover}
.stage.cover img{object-fit:contain;padding:8% 12%;filter:drop-shadow(0 14px 18px rgba(48,49,51,.22))}
.thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.thumbs button{flex:none;width:68px;height:68px;padding:0;border:1px solid var(--hairline);background:var(--surface-sunken);cursor:pointer;border-radius:var(--r-sm);overflow:hidden}
.thumbs button[aria-pressed="true"]{border-color:var(--text);box-shadow:0 0 0 1px var(--text)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.variants{display:grid;gap:8px}
.var-row{display:flex;flex-wrap:wrap;gap:8px}
.var{display:inline-flex;align-items:center;gap:8px;font:500 14px/18px var(--sans);text-decoration:none;border:1px solid var(--border-strong);border-radius:999px;padding:8px 14px;background:var(--surface-raised)}
.var:hover{background:var(--action);color:var(--on-action);border-color:var(--action)}
.dot{width:14px;height:14px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:28px;padding-block:20px 40px}.hero-art{order:-1}.crumbs{display:none}}

/* social proof strip */
.proofbar{border-block:1px solid var(--hairline);background:var(--surface-raised)}
.proofbar .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 36px;padding-block:16px;font:500 12px/18px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);text-align:center}
.proofbar a{color:var(--text);text-underline-offset:4px;text-decoration-color:var(--accent)}

/* 04 offer */
.feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.feats li{display:grid;gap:10px;align-content:start;padding:28px 24px;background:var(--surface-raised);border:1px solid var(--hairline)}
.num{font:italic 500 30px/1 var(--display);color:var(--accent)}
@media (max-width:820px){.feats{grid-template-columns:1fr}}

/* 05 proof */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.shot{margin:0;display:grid;gap:8px;align-content:start}
.shot img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--surface);box-shadow:0 1px 2px rgba(48,49,51,.08),0 10px 24px rgba(48,49,51,.08)}
.shot.tall img{aspect-ratio:3/4;object-fit:contain;background:#fff}
.shot figcaption{font-size:14px;line-height:20px;color:var(--text-muted)}
@media (max-width:820px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:40px}
.quotes blockquote{margin:0;padding:24px;background:var(--surface-raised);border:1px solid var(--hairline);display:grid;gap:10px}
.quotes p{font:italic 500 22px/30px var(--display)}
.quotes cite{font-style:normal;font-size:13px;color:var(--text-muted)}
.note{display:grid;grid-template-columns:200px minmax(0,1fr);gap:36px;align-items:start;margin-top:56px;padding-top:40px;border-top:1px solid var(--hairline)}
.portrait{margin:0;aspect-ratio:356/452;overflow:hidden;background:var(--surface);border-radius:var(--r-sm)}
.portrait img{width:100%;height:100%;object-fit:cover}
.sign{font:italic 500 24px/1 var(--display);color:var(--text-accent)}
@media (max-width:600px){.note{grid-template-columns:112px minmax(0,1fr);gap:18px}}

/* 06 inside */
.split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:start}
.split > div{display:grid;gap:18px}
.ticks{list-style:none;margin:0;padding:0;display:grid}
.ticks li{display:grid;grid-template-columns:24px 1fr;gap:10px;padding-block:14px;border-top:1px solid var(--hairline)}
.ticks li:last-child{border-bottom:1px solid var(--hairline)}
.box{background:var(--surface-sunken);padding:28px;display:grid;gap:14px}
dl.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:15px;line-height:22px}
dl.facts dt{color:var(--text-muted)}
dl.facts dd{margin:0}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:32px}}

/* 07 decision */
.deal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:56px;align-items:center}
.deal > div:first-child{display:grid;gap:18px}
.plain{margin:0;padding-left:20px;display:grid;gap:10px;color:var(--text-muted)}
.price-card{background:var(--surface);border:1px solid var(--hairline);padding:32px;display:grid;gap:16px;box-shadow:0 20px 40px rgba(48,49,51,.08)}
.bigprice{font:500 48px/1 var(--display);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.bigprice small{font:400 13px/18px var(--sans);color:var(--text-muted)}
@media (max-width:860px){.deal{grid-template-columns:1fr;gap:32px}.price-card{padding:24px}}

/* 08 faq */
.faq{display:grid;border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font:500 22px/28px var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:18px;font:400 24px/1 var(--sans);color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 22px;color:var(--text-muted);max-width:62ch}

/* 09 close */
.close{background:var(--surface-inverse);color:var(--text-on-inverse)}
.close .lead{color:var(--text-on-inverse);opacity:.85;margin-inline:auto}
.close .btn-primary{background:var(--text-on-inverse);color:var(--surface-inverse)}
.close .btn-primary:hover{background:var(--surface-feature);color:var(--text-on-feature)}
.rel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.sec .rel{grid-template-columns:repeat(3,minmax(0,1fr))}
.relcard{display:grid;gap:6px;text-decoration:none;align-content:start}
.relcard .art{display:block;aspect-ratio:1/1;background:var(--surface-sunken);overflow:hidden;margin-bottom:8px}
.relcard .art img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.relcard .art.cover img{object-fit:contain;padding:10% 14%;filter:drop-shadow(0 10px 14px rgba(48,49,51,.18))}
.relcard:hover .art img{transform:scale(1.03)}
.relcard:hover .t{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
@media (max-width:900px){.rel,.sec .rel{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}

/* phone buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:8;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--hairline);box-shadow:0 -8px 24px rgba(48,49,51,.08);transform:translateY(110%);transition:transform .3s ease}
.buybar .bb-name{font:500 18px/22px var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.buybar .btn{flex:none;padding:10px 16px;min-height:44px}
@media (max-width:860px){.buybar{display:flex}.buybar.show{transform:none}}

/* footer */
footer.site{background:var(--surface-inverse);color:var(--text-on-inverse)}
footer.site .wordmark{background:var(--text-on-inverse);width:180px}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px;padding-block:64px 40px}
.foot-about{display:grid;gap:16px;align-content:start}
.foot-about p{opacity:.85;max-width:30em}
.dim{opacity:.75!important}
@media (max-width:820px){.foot{grid-template-columns:1fr;gap:36px}}
.foot h4{font:500 12px/16px var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;opacity:.75}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.foot a{text-decoration:none;opacity:.9}
.foot a:hover{opacity:1;text-decoration:underline}
.news{display:flex;gap:8px;flex-wrap:wrap}
.news input{flex:1 1 200px;min-width:0;font:400 16px/24px var(--sans);background:transparent;color:var(--text-on-inverse);border:1px solid var(--text-on-inverse);border-radius:var(--r-sm);padding:10px 12px}
.news input::placeholder{color:var(--text-on-inverse);opacity:.8}
.news button{background:var(--text-on-inverse);color:var(--surface-inverse);border:0}
.legal{border-top:1px solid color-mix(in srgb,var(--text-on-inverse) 20%,transparent);padding-block:20px 90px;font-size:13px;opacity:.75;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
@media (min-width:861px){.legal{padding-bottom:20px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* coming soon sign-up */
.notify{display:grid;gap:12px}
.notify input{font:400 16px/24px var(--sans);color:var(--text);background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:12px;width:100%}

/* open-book spreads */
.gallery.spreads{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
.shot.spread img{aspect-ratio:1200/862;object-fit:cover;box-shadow:none;background:none}
.shot.aplus{grid-column:1/-1}
.shot.aplus img{aspect-ratio:auto;height:auto;box-shadow:none;background:none;border-radius:4px}
.shot.aplus figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:700px){.gallery.spreads{grid-template-columns:1fr}}