/* The Mongolian Protein Co. — site styles */
:root {
  --navy:#1a2766; --lapis:#2a3c96; --deep:#0f1640; --night:#05081c;
  --gold:#c9a253; --gold2:#e6c97f; --cream:#f4e7c4; --parch:#f3ead3; --ivory:#f7f1e3;
  --muted:#cfc4a5; --ink:#1a2766; --ink-soft:#4a5070; --gold-ink:#9a7a35; --line:#e3d3a8;
  --stars:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><g fill='%23fff'><circle cx='12' cy='20' r='.9'/><circle cx='70' cy='8' r='.7'/><circle cx='118' cy='54' r='1'/><circle cx='180' cy='22' r='.8'/><circle cx='160' cy='110' r='.7'/><circle cx='36' cy='134' r='.9'/><circle cx='96' cy='170' r='.7'/><circle cx='204' cy='184' r='.9'/><circle cx='134' cy='206' r='.6'/><circle cx='60' cy='78' r='.6'/></g><g fill='%23f6e3a6'><circle cx='170' cy='68' r='1.4'/><circle cx='24' cy='196' r='1.2'/><circle cx='106' cy='118' r='1.1'/></g></svg>");
  --gutter:clamp(16px, 4vw, 48px);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; background:var(--night); }
body { font-family:'DM Sans',sans-serif; color:var(--cream); background:var(--deep); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img, svg { display:block; }
button, input, select, textarea { font:inherit; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- surfaces ---------- */
.night { background:linear-gradient(180deg,#05081c 0%,#0c1338 45%,#1a2766 85%,#22328a 100%); }
.deep { background:var(--deep); }
.navy { background:var(--navy); }
.starry { position:relative; }
.starry::before { content:""; position:absolute; inset:0; background-image:var(--stars); background-size:220px; pointer-events:none; }
.starry > * { position:relative; }
.light { background:var(--ivory); color:var(--ink); }
.parch { background:#f1e8d2; color:var(--ink); }
.sec { padding:90px var(--gutter); }
.wrap { max-width:1100px; margin:0 auto; }
.narrow { max-width:760px; margin:0 auto; }
.center { text-align:center; }

/* ---------- type ---------- */
.eyebrow { font:12px 'Cinzel',serif; letter-spacing:.42em; text-transform:uppercase; color:var(--gold); }
h1, h2, h3, h4 { font-family:'Cinzel',serif; font-weight:500; }
h2 { font-size:clamp(26px,3.4vw,40px); line-height:1.12; margin:12px 0; }
.lede { font:italic clamp(18px,2vw,22px)/1.4 'Cormorant Garamond',serif; color:var(--muted); }
.prose p { font:19px/1.6 'Cormorant Garamond',serif; margin-bottom:18px; }
:is(.light, .parch) .eyebrow { color:var(--gold-ink); }
:is(.light, .parch) :is(h1, h2, h3, h4) { color:var(--ink); }
:is(.light, .parch) :is(.lede, .prose p) { color:var(--ink-soft); }
.divider { width:220px; height:12px; margin:8px auto 0; }
.tbc { display:inline-block; font:10px 'IBM Plex Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-ink); border:1px solid currentColor; padding:2px 6px; margin-left:6px; vertical-align:2px; font-style:normal; }

/* ---------- buttons ---------- */
.btn { display:inline-block; font:13px 'Cinzel',serif; letter-spacing:.22em; text-transform:uppercase; padding:15px 30px; border:1px solid var(--gold); color:var(--gold2); background:none; cursor:pointer; text-align:center; transition:background .2s, color .2s; }
.btn:hover { background:rgba(201,162,83,.12); }
.btn.fill { background:var(--gold); color:var(--navy); font-weight:700; }
.btn.fill:hover { background:var(--gold2); }
:is(.light, .parch) .btn.fill { background:var(--navy); color:var(--gold2); border-color:var(--navy); }
:is(.light, .parch) .btn.fill:hover { background:var(--lapis); }
:is(.light, .parch) .btn:not(.fill) { color:var(--navy); border-color:var(--navy); }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.textlink { display:inline-block; font:12px 'Cinzel',serif; letter-spacing:.14em; color:var(--gold); border-bottom:1px solid rgba(201,162,83,.4); padding-bottom:3px; }
.textlink:hover { color:var(--gold2); }
:is(.light, .parch) .textlink { color:var(--gold-ink); }

/* ---------- nav ---------- */
.nav { display:flex; align-items:center; justify-content:space-between; padding:0 var(--gutter); height:72px; font:12px 'Cinzel',serif; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); position:relative; z-index:20; }
.nav .links { display:flex; gap:30px; flex:1; }
.nav .links.right { justify-content:flex-end; }
.nav .star { font-size:18px; padding:0 20px; }
.nav a:hover, .nav a[aria-current="page"] { color:var(--gold2); }
.nav a[aria-current="page"] { border-bottom:1px solid var(--gold); }
.nav .menu { display:none; background:none; border:none; color:var(--gold); font-size:22px; cursor:pointer; }
.nav .mobile-bag { display:none; }
.drawer { position:fixed; inset:0; z-index:60; background:rgba(5,8,28,.97); display:none; flex-direction:column; align-items:center; justify-content:center; gap:26px; font:16px 'Cinzel',serif; letter-spacing:.24em; text-transform:uppercase; color:var(--gold2); }
.drawer.open { display:flex; }
.drawer .close { position:absolute; top:20px; right:22px; background:none; border:none; color:var(--gold); font-size:28px; cursor:pointer; }

/* ---------- home hero ---------- */
.hero { min-height:min(820px, 100vh); display:flex; flex-direction:column; overflow:hidden; }
.hero-inner { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:40px var(--gutter) 210px; }
.hero-crest { width:120px; height:120px; color:var(--gold); margin-bottom:20px; }
.hero h1 { font-size:clamp(40px,6vw,76px); line-height:1.04; color:#f4e7c4; margin:16px 0 18px; }
.hero .lede { max-width:620px; margin-bottom:34px; }
.horizon { position:absolute; left:0; right:0; bottom:0; height:200px; pointer-events:none; }
.horizon .ridge { position:absolute; inset:0; width:100%; height:100%; }
.horizon .yurt { position:absolute; left:50%; bottom:48px; width:120px; height:84px; transform:translateX(-50%); }
.horizon .glow { position:absolute; left:50%; bottom:28px; width:260px; height:120px; transform:translateX(-50%); background:radial-gradient(ellipse at 50% 70%, rgba(246,210,122,.35), transparent 65%); }

/* ---------- inner page hero ---------- */
.page-hero { overflow:hidden; }
.page-hero-inner { text-align:center; padding:56px var(--gutter) 150px; }
.page-hero h1 { font-size:clamp(34px,5vw,58px); line-height:1.06; color:#f4e7c4; margin:14px 0 14px; }
.page-hero .lede { max-width:620px; margin:0 auto; }
.page-hero .horizon { height:130px; }
.page-hero .horizon .yurt { width:76px; height:54px; bottom:30px; }
.page-hero .horizon .glow { width:160px; height:80px; bottom:16px; }

/* ---------- breaker: aaruul medallion band ---------- */
.breaker { height:64px; background:var(--navy) url(assets/pattern-medallion.svg) center / 72px 64px repeat-x; border-top:1px solid var(--gold); border-bottom:1px solid var(--gold); }

/* ---------- USPs ---------- */
.usps { display:grid; grid-template-columns:repeat(3,1fr); }
.usp { text-align:center; padding:56px 28px; border-right:1px solid var(--line); }
.usp:last-child { border-right:none; }
.usp svg { width:44px; height:44px; margin:0 auto; color:var(--gold-ink); }
.usp h3 { font-size:18px; letter-spacing:.14em; text-transform:uppercase; margin:18px 0 8px; }
.usp p { font:italic 19px/1.4 'Cormorant Garamond',serif; color:var(--ink-soft); max-width:280px; margin:0 auto; }

/* ---------- product stage + home shop module ---------- */
.stage { position:relative; display:flex; align-items:center; justify-content:center; padding:24px 0; }
.stage img { position:relative; width:100%; filter:drop-shadow(0 22px 26px rgba(0,0,0,.55)) drop-shadow(0 0 34px rgba(230,201,127,.22)); }
.shop-home { border-top:1px solid rgba(201,162,83,.25); }
.shop-inner { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center; }
.info h2 { font-size:clamp(28px,3vw,40px); color:#f4e7c4; }
.info .desc { font:italic 20px/1.45 'Cormorant Garamond',serif; color:var(--muted); margin-bottom:22px; }
.price { font:500 26px 'Cinzel',serif; color:#f4e7c4; margin-bottom:22px; }
.price span { font:italic 18px 'Cormorant Garamond',serif; color:var(--muted); }
.buy { display:flex; gap:12px; }
.buy .btn { flex:1; }
.qty { display:inline-flex; align-items:stretch; border:1px solid rgba(201,162,83,.6); }
.qty button { width:44px; background:none; border:none; color:var(--gold2); font-size:18px; cursor:pointer; }
.qty output { width:30px; display:flex; align-items:center; justify-content:center; font-size:15px; }
:is(.light, .parch) .qty { border-color:#cdbb8c; }
:is(.light, .parch) .qty button { color:var(--navy); }
.buy + .textlink { margin-top:18px; }

/* ---------- charter ---------- */
.charter-sec { padding:80px var(--gutter); background-color:var(--navy); background-image:linear-gradient(rgba(15,22,64,.62),rgba(15,22,64,.62)), url(assets/pattern-medallion.svg); background-size:auto, 72px 64px; }
.charter { position:relative; max-width:760px; margin:0 auto; background:var(--parch); color:var(--navy); text-align:center; border:2px solid var(--gold); outline:1px solid var(--gold); outline-offset:-10px; padding:56px clamp(24px,6vw,72px) 76px; }
.charter h2 { color:var(--navy); }
.charter .eyebrow { color:#a5843e; }
.charter .lede { color:var(--ink-soft); margin-bottom:24px; }
.charter-crest { width:64px; height:64px; margin:0 auto 14px; color:var(--navy); }
.articles { list-style:none; text-align:left; }
.articles li { display:grid; grid-template-columns:56px 1fr auto; align-items:baseline; border-bottom:1px solid #dccba0; padding:14px 0; }
.articles li:last-child { border-bottom:none; }
.articles b { font:500 20px 'Cinzel',serif; color:#a5843e; }
.articles span { font:500 22px 'Cormorant Garamond',serif; }
.articles em { font:italic 17px 'Cormorant Garamond',serif; color:#6a6f8c; }
.seal { position:absolute; left:50%; bottom:-36px; transform:translateX(-50%); width:76px; height:76px; border-radius:50%; background:radial-gradient(circle at 40% 35%,#f3dc98,#a67c30); box-shadow:0 6px 14px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; font:700 13px 'Cinzel',serif; color:var(--navy); }

/* ---------- nutrition card (simple dial) ---------- */
.nutri-card { margin-top:30px; display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:center; background:var(--deep); color:var(--cream); border:1px solid var(--gold); border-radius:10px; padding:40px 48px; text-align:left; box-shadow:0 24px 50px rgba(26,39,102,.22); }
.dial { width:240px; height:240px; }
.facts .facts-title { font:12px 'Cinzel',serif; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.facts div { display:flex; justify-content:space-between; border-top:1px solid rgba(201,162,83,.3); padding:12px 0; font-size:17px; }
.facts div:last-of-type { border-bottom:1px solid rgba(201,162,83,.3); }
.facts dd { font-family:'Cinzel',serif; }
.facts .pending { margin-top:14px; font:11px 'Cinzel',serif; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }

/* ---------- timeline ---------- */
.timeline { list-style:none; position:relative; max-width:760px; margin:40px auto 0; }
.timeline::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--gold); }
.timeline li { display:grid; grid-template-columns:1fr 48px 1fr; align-items:center; margin-bottom:44px; }
.timeline li:last-child { margin-bottom:0; }
.timeline li > :first-child { text-align:right; }
.timeline li > :last-child { text-align:left; }
.timeline .pt { color:#f6e3a6; font-size:22px; text-align:center; text-shadow:0 0 12px rgba(246,227,166,.8); position:relative; }
.timeline .k { font:14px 'Cinzel',serif; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.timeline .d { font:italic 19px/1.35 'Cormorant Garamond',serif; color:#d6c79f; }

/* ---------- moons ---------- */
.moons { display:flex; justify-content:space-between; align-items:center; max-width:720px; margin:0 auto; gap:8px; }
.moons i { width:52px; height:52px; border-radius:50%; border:1.5px solid var(--gold); flex-shrink:0; }
.moons .full { background:radial-gradient(circle at 40% 35%,#f6e3a6,#c9a253); }
.moons .wax-c { box-shadow:inset -14px 0 0 0 #e6c97f; }
.moons .wax-h { background:linear-gradient(90deg,transparent 50%,#e6c97f 50%); }
.moons .wax-g { box-shadow:inset -38px 0 0 0 #e6c97f; }
.moons .wan-h { background:linear-gradient(90deg,#e6c97f 50%,transparent 50%); }
.moons .wan-c { box-shadow:inset 14px 0 0 0 #e6c97f; }
.moons .new { background:var(--night); border:2px solid var(--gold2); box-shadow:0 0 24px rgba(230,201,127,.6); }
.moonlab { display:flex; justify-content:space-between; max-width:740px; margin:12px auto 40px; font:11px 'Cinzel',serif; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.moonbox .lede { max-width:640px; margin:0 auto 40px; }

/* ---------- forms ---------- */
.field { display:flex; max-width:480px; margin:24px auto 0; }
.field input { flex:1; min-width:0; background:none; border:1px solid var(--gold); border-right:none; padding:14px 16px; color:var(--cream); }
.field input::placeholder { color:#9c9a8c; }
:is(.light, .parch) .field input { background:#fff; color:var(--ink); border-color:var(--gold-ink); }
:is(.light, .parch) .field input::placeholder { color:#8a8fa8; }
.form-msg { margin-top:14px; font:italic 18px 'Cormorant Garamond',serif; min-height:1.4em; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; text-align:left; }
.form-grid > * { min-width:0; }
.form-grid :is(input, select, textarea) { width:100%; }
.form-grid label { display:flex; flex-direction:column; gap:6px; font:11px 'Cinzel',serif; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); }
.form-grid .full { grid-column:1/-1; }
.form-grid :is(input, select, textarea) { background:#fff; border:1px solid #d6c28e; padding:13px 14px; color:var(--ink); font:15px 'DM Sans',sans-serif; letter-spacing:0; text-transform:none; }
.form-grid textarea { min-height:140px; resize:vertical; }

/* ---------- footer ---------- */
footer.site { background:var(--deep); padding:48px var(--gutter) 28px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:24px; font-size:14px; line-height:2; }
footer.site h5 { font:11px 'Cinzel',serif; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); font-weight:400; }
footer.site a { display:block; color:#d6c79f; }
footer.site a:hover { color:var(--gold2); }
footer.site .brand svg { width:44px; height:44px; color:var(--gold); }
footer.site .brand span { font:13px 'Cinzel',serif; letter-spacing:.14em; }
footer.site .small { grid-column:1/-1; border-top:1px solid rgba(201,162,83,.3); padding-top:16px; font-size:12px; opacity:.6; display:flex; justify-content:space-between; gap:12px; }

/* ---------- product page ---------- */
.pdp { display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:start; }
.gallery .thumbs { display:flex; gap:10px; margin-top:12px; }
.gallery .thumbs button { flex:1; aspect-ratio:1.4/1; border:1px solid rgba(201,162,83,.4); background:radial-gradient(circle,#1d2a72,#0a0f2e 72%); cursor:pointer; padding:8px; display:flex; align-items:center; justify-content:center; }
.gallery .thumbs button.on { border-color:var(--gold); }
.gallery .thumbs img { width:100%; border-radius:2px; }
.gallery .thumbs svg { width:56%; height:auto; color:var(--gold); }
.gallery .stage svg.big { width:46%; height:auto; color:var(--gold); position:relative; }
.buybox h1 { font-size:clamp(30px,3.4vw,44px); color:#f4e7c4; margin:10px 0 6px; }
.buybox .desc { font:italic 20px/1.45 'Cormorant Garamond',serif; color:var(--muted); margin:10px 0 22px; }
.plans { display:grid; gap:10px; margin-bottom:20px; }
.plan { display:grid; grid-template-columns:22px 1fr auto; gap:12px; align-items:center; border:1px solid rgba(201,162,83,.45); padding:16px 18px; cursor:pointer; }
.plan input { accent-color:var(--gold); width:18px; height:18px; }
.plan b { font:500 14px 'Cinzel',serif; letter-spacing:.12em; display:block; }
.plan small { font-size:13px; color:var(--muted); }
.plan .p { font:500 18px 'Cinzel',serif; }
.plan:has(input:checked) { border:2px solid var(--gold); background:rgba(201,162,83,.07); padding:15px 17px; }
.acc { margin-top:28px; }
.acc details { border-top:1px solid rgba(201,162,83,.35); }
.acc details:last-child { border-bottom:1px solid rgba(201,162,83,.35); }
.acc summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; padding:16px 0; font:12px 'Cinzel',serif; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.acc summary::-webkit-details-marker { display:none; }
.acc summary::after { content:"+"; font-size:16px; }
.acc details[open] summary::after { content:"−"; }
.acc .body { padding:0 0 18px; font:18px/1.55 'Cormorant Garamond',serif; color:var(--muted); }
:is(.light, .parch) .acc details { border-color:var(--line); }
:is(.light, .parch) .acc summary { color:var(--gold-ink); }
:is(.light, .parch) .acc .body { color:var(--ink-soft); }
.assure { display:flex; gap:22px; flex-wrap:wrap; margin-top:20px; font:13px 'DM Sans',sans-serif; color:var(--muted); }

/* ---------- cards / steps ---------- */
.cards3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card { border:1px solid rgba(201,162,83,.45); padding:28px 24px; }
.card .num { font:500 30px 'Cinzel',serif; color:var(--gold2); }
.card h3 { font-size:17px; letter-spacing:.14em; text-transform:uppercase; margin:12px 0 8px; }
.card p { font:italic 18px/1.45 'Cormorant Garamond',serif; color:var(--muted); }
:is(.light, .parch) .card { border-color:var(--line); background:#fffdf7; }
:is(.light, .parch) .card .num { color:var(--gold-ink); }
:is(.light, .parch) .card p { color:var(--ink-soft); }

.steps-long { list-style:none; max-width:900px; margin:40px auto 0; }
.steps-long li { display:grid; grid-template-columns:110px 1fr; gap:34px; align-items:start; padding:34px 0; border-top:1px solid var(--line); }
.steps-long li:last-child { border-bottom:1px solid var(--line); }
.steps-long .roman { width:96px; height:96px; border-radius:50%; border:1px solid var(--gold); outline:1px solid var(--gold); outline-offset:4px; display:flex; align-items:center; justify-content:center; font:500 30px 'Cinzel',serif; color:var(--gold-ink); }
.steps-long h3 { font-size:24px; margin-bottom:8px; }
.steps-long p { font:19px/1.55 'Cormorant Garamond',serif; color:var(--ink-soft); }

/* ---------- moon dates (moon box page) ---------- */
.dates { list-style:none; max-width:720px; margin:34px auto 0; }
.dates li { display:grid; grid-template-columns:52px 1fr auto; gap:18px; align-items:center; padding:14px 0; border-top:1px solid rgba(201,162,83,.3); text-align:left; }
.dates li:last-child { border-bottom:1px solid rgba(201,162,83,.3); }
.dates i { width:36px; height:36px; border-radius:50%; background:var(--night); border:2px solid var(--gold2); box-shadow:0 0 14px rgba(230,201,127,.45); }
.dates b { font:500 16px 'Cinzel',serif; letter-spacing:.08em; display:block; }
.dates span { font:italic 17px 'Cormorant Garamond',serif; color:var(--muted); }
.dates em { font:11px 'Cinzel',serif; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-style:normal; }

/* ---------- founders ---------- */
.founders { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.founder { background:#fffdf7; border:1px solid var(--line); padding:34px 30px; }
.founder .initials { width:74px; height:74px; border-radius:50%; background:var(--navy); color:var(--gold2); display:flex; align-items:center; justify-content:center; font:500 24px 'Cinzel',serif; border:1px solid var(--gold); outline:1px solid var(--gold); outline-offset:4px; margin-bottom:20px; }
.founder h3 { font-size:22px; }
.founder .role { font:11px 'Cinzel',serif; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-ink); margin:6px 0 14px; }
.founder p { font:18px/1.55 'Cormorant Garamond',serif; color:var(--ink-soft); }

/* ---------- bag ---------- */
.bag-grid { display:grid; grid-template-columns:1.6fr 1fr; gap:40px; align-items:start; }
.bag-list { list-style:none; }
.bag-item { display:grid; grid-template-columns:120px 1fr auto; gap:20px; align-items:center; padding:20px 0; border-top:1px solid var(--line); }
.bag-item:last-child { border-bottom:1px solid var(--line); }
.bag-item .thumb img { filter:drop-shadow(0 8px 10px rgba(26,39,102,.3)); }
.bag-item .thumb img { width:100%; }
.bag-item h3 { font-size:18px; }
.bag-item .meta { font:italic 17px 'Cormorant Garamond',serif; color:var(--ink-soft); margin:4px 0 10px; }
.bag-item .controls { display:flex; align-items:center; }
.bag-item .remove { background:none; border:none; font:11px 'Cinzel',serif; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); cursor:pointer; margin-left:14px; }
.bag-item .line { font:500 18px 'Cinzel',serif; }
.summary { background:var(--deep); color:var(--cream); border:1px solid var(--gold); padding:30px; }
.summary h2 { font-size:22px; color:#f4e7c4 !important; margin:0 0 16px; }
.summary .row { display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid rgba(201,162,83,.3); font-size:15px; }
.summary .row.total { font:500 18px 'Cinzel',serif; border-bottom:1px solid rgba(201,162,83,.3); }
.summary .btn { width:100%; margin-top:20px; }
.summary .btn.fill { background:var(--gold); color:var(--navy); border-color:var(--gold); }
.summary .textlink { color:var(--gold); }
.summary .note { font:italic 16px/1.4 'Cormorant Garamond',serif; color:var(--muted); margin-top:12px; }
.empty { text-align:center; padding:30px 0; }
.empty p { margin:10px 0 24px; }

/* ---------- toast ---------- */
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 160%); background:var(--navy); color:var(--gold2); border:1px solid var(--gold); padding:14px 22px; font:12px 'Cinzel',serif; letter-spacing:.16em; text-transform:uppercase; z-index:70; visibility:hidden; transition:transform .3s, visibility .3s; display:flex; gap:16px; align-items:center; box-shadow:0 10px 30px rgba(0,0,0,.4); white-space:nowrap; }
.toast.show { transform:translate(-50%, 0); visibility:visible; }
.toast a { color:#f4e7c4; border-bottom:1px solid var(--gold); }

/* ---------- responsive ---------- */
@media (max-width:860px) {
  .nav .links { display:none; }
  .nav .menu, .nav .mobile-bag { display:block; }
  /* mobile header: bag left, star centred, menu right */
  .nav .mobile-bag { order:1; flex:1; }
  .nav .star { order:2; padding:0; font-size:22px; }
  .nav .menu { order:3; flex:1; text-align:right; }
  .usps, .cards3, .founders { grid-template-columns:1fr; }
  .usp { border-right:none; border-bottom:1px solid var(--line); padding:40px 24px; }
  .sec { padding:64px var(--gutter); }
  .shop-inner, .pdp, .bag-grid { grid-template-columns:1fr; gap:32px; }
  .nutri-card { grid-template-columns:1fr; justify-items:center; padding:32px 24px; gap:28px; }
  .facts { width:100%; }
  .timeline::before { left:12px; }
  .timeline li { grid-template-columns:24px 1fr; gap:4px 14px; margin-bottom:30px; }
  .timeline li > * { text-align:left !important; }
  .timeline .pt { grid-column:1; grid-row:1 / span 2; align-self:start; }
  .timeline .k { grid-column:2; grid-row:1; }
  .timeline .d { grid-column:2; grid-row:2; }
  .moons i { width:30px; height:30px; }
  .moons .wax-c { box-shadow:inset -8px 0 0 0 #e6c97f; }
  .moons .wan-c { box-shadow:inset 8px 0 0 0 #e6c97f; }
  .moons .wax-g { box-shadow:inset -22px 0 0 0 #e6c97f; }
  .steps-long li { grid-template-columns:1fr; gap:16px; }
  .steps-long .roman { width:64px; height:64px; font-size:22px; }
  .form-grid { grid-template-columns:1fr; }
  .bag-item { grid-template-columns:80px 1fr; }
  .bag-item .line { grid-column:2; }
  footer.site { grid-template-columns:1fr 1fr; }
  footer.site .brand { grid-column:1/-1; }
  footer.site .small { flex-direction:column; }
  .toast { white-space:normal; width:calc(100% - 32px); justify-content:space-between; }
}
.seal svg { width:50px; height:50px; color:var(--navy); }

/* ---------- framed photo ---------- */
.photo { max-width:980px; margin:0 auto 44px; }
.photo img { width:100%; height:auto; border:2px solid var(--gold); outline:1px solid var(--gold); outline-offset:6px; box-shadow:0 24px 50px rgba(26,39,102,.22); }
.photo figcaption { margin-top:20px; text-align:center; font:italic 17px/1.45 'Cormorant Garamond',serif; color:var(--ink-soft); }
:is(.night, .deep, .navy) .photo img { box-shadow:0 24px 50px rgba(0,0,0,.45); }
:is(.night, .deep, .navy) .photo figcaption { color:var(--muted); }