/* Moonshade Workshop — shared styles. Single committed dark apothecary look. */
:root{
  --ground:#1B1229; --panel:#251A38; --well:#1F152F;
  --line:#4A3D63; --line-soft:#3A2E52; --line-strong:#8C86A0;
  --ink:#F1F2F6; --text:#D9DCE5; --muted:#C4C0D2; --faint:#A9A3BC;
  --silver:#C9CCD6; --gold:#C9A961;
  --display:'IM Fell English','Noto Serif TC',Georgia,'Times New Roman',serif;
  --label:'IM Fell English SC','Noto Serif TC',Georgia,'Times New Roman',serif;
  --body:'Cormorant Garamond','Noto Serif TC',Georgia,'Times New Roman',serif;
  color-scheme:dark;
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--ground);color:var(--text);font-family:var(--body);font-size:19px;line-height:1.6;margin:0}
img{max-width:100%}
a{color:var(--text)}a:hover{color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:24px}
@media (max-width:480px){.wrap{padding-inline:16px}}
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--ink);margin:0;text-wrap:balance}
p{margin:0}
.eyebrow{font-family:var(--label);letter-spacing:4px;font-size:15px;color:var(--gold)}
.lbl{font-family:var(--label);letter-spacing:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 30px;font-family:var(--label);letter-spacing:2px;font-size:17px;text-decoration:none;border-radius:2px;border:1px solid transparent;cursor:pointer}
.btn-gold{background:var(--gold);color:var(--ground)}
.btn-gold:hover{background:#D4B66A;color:var(--ground)}
.btn-line{border-color:var(--line-strong);color:var(--text);background:transparent}
.btn-line:hover{border-color:var(--silver)}

/* header */
header{border-bottom:1px solid var(--line)}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand span{font-family:var(--label);font-size:24px;letter-spacing:2px;color:var(--ink)}
.nav-right{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}
.nav nav{display:flex;flex-wrap:wrap;gap:8px 26px;font-family:var(--label);font-size:17px;letter-spacing:1.5px}
.nav nav a{text-decoration:none;padding-block:4px;border-bottom:1px solid transparent}
.nav nav a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}

/* page title (inner pages) */
.page-title{text-align:center;padding-block:72px 24px;display:flex;flex-direction:column;gap:12px;align-items:center}
.page-title h1{font-size:clamp(40px,5.5vw,58px);line-height:1.1}
.page-title p:not(.eyebrow){color:var(--muted);max-width:600px;font-size:20px}

/* hero */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:56px;padding-block:80px 96px}
.hero-copy{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.hero h1{font-size:clamp(42px,6vw,64px);line-height:1.08}
.hero-copy>p:not(.eyebrow){max-width:540px;font-size:21px;color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px}
.hero-art{flex:1 1 320px;display:flex;justify-content:center}
.arch{width:340px;max-width:100%;aspect-ratio:3/4;border:1px solid var(--line);border-radius:170px 170px 4px 4px;background:var(--panel);display:flex;align-items:center;justify-content:center}
.arch svg{width:60%;height:auto}

.divider{display:flex;align-items:center;gap:20px;color:var(--gold)}
.divider i{flex:1;height:1px;background:var(--line)}

/* vows */
.vows{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px;text-align:center;padding-block:72px 0}
.vow{display:flex;flex-direction:column;align-items:center;gap:12px}
.vow h3{font-size:26px}
.vow p{color:var(--muted);max-width:320px}

/* shelf */
.section-head{text-align:center;display:flex;flex-direction:column;gap:8px;margin-bottom:48px}
.section-head h2{font-size:clamp(34px,4.5vw,44px)}
.shelf{padding-block:80px}
.shelf-more{display:flex;justify-content:center;margin-top:40px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:28px;display:flex;flex-direction:column;gap:14px;min-width:0}
.card .pic{height:220px;border:1px solid var(--line-soft);background:var(--well);display:flex;align-items:center;justify-content:center}
.card .no{font-size:14px;color:var(--gold)}
.card h3{font-size:28px}
.card .desc{color:var(--muted)}
.recipe{border-top:1px dashed var(--line);padding-top:12px;display:flex;flex-direction:column;gap:4px}
.recipe .lbl{font-size:13px;color:var(--gold)}
.recipe p:last-child{font-size:17px;color:var(--muted)}
.blessed{font-size:16px;font-style:italic;color:var(--faint)}
.buy{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px;flex-wrap:wrap}
.price{font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
.soon{min-height:44px;padding:0 20px;display:inline-flex;align-items:center;border:1px dashed var(--line-strong);color:var(--faint);font-family:var(--label);letter-spacing:1.5px;font-size:15px;border-radius:2px}

/* shop filters */
.shop{padding-top:32px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:40px}
.chip{min-height:44px;padding:0 22px;background:transparent;border:1px solid var(--line-strong);color:var(--text);font-family:var(--label);letter-spacing:2px;font-size:16px;border-radius:999px;cursor:pointer}
.chip:hover{border-color:var(--silver)}
.chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ground)}
.card-soon{background:var(--well);border-style:dashed}
.card-soon .tag{border:1px solid var(--gold);color:var(--gold)}
.card-soon a{margin-top:auto;font-size:16px}

/* starfield behind everything */
#sky{position:fixed;top:0;left:0;z-index:0;pointer-events:none}
header,main,footer{position:relative;z-index:1}

/* motion */
.arch{position:relative;overflow:hidden}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flicker 2.6s ease-in-out infinite}
@keyframes flicker{0%,100%{transform:scale(1,1) rotate(0)}25%{transform:scale(.94,1.06) rotate(-2deg)}50%{transform:scale(1.04,.96) rotate(1.5deg)}75%{transform:scale(.97,1.04) rotate(-1deg)}}
.halo{transform-box:fill-box;transform-origin:center;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.star{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold);opacity:.2;animation:twinkle 4s ease-in-out infinite}
.s1{top:14%;left:20%;animation-delay:0s}.s2{top:24%;right:18%;animation-delay:1.1s}.s3{top:46%;left:12%;animation-delay:2.2s}.s4{top:62%;right:14%;animation-delay:.6s}.s5{top:34%;left:76%;animation-delay:3s}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}
.rise>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.rise>*:nth-child(2){animation-delay:.12s}.rise>*:nth-child(3){animation-delay:.24s}.rise>*:nth-child(4){animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card,.svc,.btn,.chip{transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease,background-color .25s ease}
.card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 14px 34px -18px rgba(201,169,97,.55)}
.card .pic svg{transition:transform .6s ease}
.card:hover .pic svg{transform:translateY(-4px) rotate(-3deg)}
.btn-gold:hover{box-shadow:0 0 22px -4px rgba(201,169,97,.7)}
/* animated vow icons */
.vow-ico{height:92px;display:flex;align-items:center;justify-content:center}
.book3d{width:110px;height:92px;perspective:320px;display:flex;align-items:center;justify-content:center}
.tome{position:relative;width:88px;height:58px;transform-style:preserve-3d;transform:rotateX(50deg) translateY(6px)}
.tome .cover{position:absolute;inset:-4px -6px;border:1.4px solid var(--gold);border-radius:5px;background:var(--panel);transform:translateZ(-3px)}
.tome .pg{position:absolute;top:0;width:44px;height:58px;box-sizing:border-box;border:1.2px solid var(--gold);background-color:var(--ground);
  background-image:repeating-linear-gradient(to bottom,transparent 0 7px,rgba(201,169,97,.5) 7px 8px);
  background-origin:content-box;background-clip:content-box;padding:8px 7px;backface-visibility:visible}
.tome .left{left:0;border-radius:4px 0 0 4px}
.tome .right{left:44px;border-radius:0 4px 4px 0}
.tome .flip{left:44px;border-radius:0 4px 4px 0;transform-origin:left center;animation:pageturn 6s cubic-bezier(.45,.05,.35,1) infinite}
.tome .f2{animation-delay:2s}.tome .f3{animation-delay:4s}
@keyframes pageturn{
  0%{transform:rotateY(0) translateZ(.5px)}
  40%{transform:rotateY(-90deg) translateZ(.5px)}
  70%,100%{transform:rotateY(-180deg) translateZ(.5px)}
}
.candle .glow{opacity:.12;transform-box:fill-box;transform-origin:center;animation:glow 2.6s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.08;transform:scale(.9)}50%{opacity:.2;transform:scale(1.08)}}
.flame.core{animation-duration:1.9s}
.sigil{position:relative;width:92px;height:92px;display:flex;align-items:center;justify-content:center}
.sigil::before{content:"";position:absolute;inset:0;border:1px dashed rgba(201,169,97,.5);border-radius:50%;animation:spin 36s linear infinite}
.sigil img{width:72px;height:72px;animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.8;filter:drop-shadow(0 0 1px rgba(201,169,97,.3))}50%{opacity:1;filter:drop-shadow(0 0 9px rgba(226,198,122,.85))}}

@media (prefers-reduced-motion:reduce){
  .flame,.halo,.star,.rise>*,.tome .flip,.candle .glow,.sigil::before,.sigil img{animation:none}
  .tome .flip{display:none}
  .star{opacity:.6}
  .card:hover,.card:hover .pic svg{transform:none}
}

/* band */
.band{background:var(--panel);border-block:1px solid var(--line)}
.band-in{display:flex;flex-wrap:wrap;align-items:center;gap:40px;padding-block:72px}
.band-in>div{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:10px}
.band h2{font-size:clamp(30px,4vw,40px)}
.band p:not(.eyebrow){color:var(--muted);max-width:560px}

/* services */
.services{padding-block:48px 88px}
.svc{border-radius:4px;padding:36px;display:flex;flex-direction:column;gap:14px;min-width:0}
.svc-open{border:1px solid var(--gold);background:var(--panel)}
.svc-closed{border:1px solid var(--line);background:var(--well)}
.svc h3{font-size:30px}
.svc p:not(.tag){color:var(--muted)}
.tag{align-self:flex-start;padding:4px 12px;border-radius:2px;font-family:var(--label);letter-spacing:2px;font-size:13px}
.svc-open .tag{border:1px solid var(--gold);color:var(--gold)}
.svc-closed .tag{border:1px solid #6E6487;color:var(--faint)}
.svc a{margin-top:auto;font-family:var(--label);letter-spacing:2px;font-size:16px}

/* journal */
.journal{display:flex;flex-wrap:wrap;gap:56px;padding-block:88px}
.journal>div:first-child{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.journal h2{font-size:clamp(30px,4vw,40px)}
.journal>div:first-child p:not(.eyebrow){color:var(--muted)}
.posts{flex:1 1 460px;min-width:0;border-top:1px solid var(--line)}
.posts a{text-decoration:none;padding-block:22px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.posts .pt{font-family:var(--display);font-size:24px}
.posts .pd{color:var(--faint);font-size:17px}
.post-list{max-width:820px;margin:0 auto;padding-block:24px 88px}
.post-list .posts p{color:var(--muted);flex-basis:100%}

/* about */
.about{background:var(--panel);border-top:1px solid var(--line)}
.about .wrap{max-width:760px;text-align:center;padding-block:88px;display:flex;flex-direction:column;gap:16px}
.about h2{font-size:clamp(30px,4vw,40px)}
.about p:not(.eyebrow){color:var(--muted)}
.prose{max-width:720px;margin:0 auto;padding-block:24px 88px;display:flex;flex-direction:column;gap:20px}
.prose h2{font-size:32px;margin-top:20px}
.prose p{color:var(--muted)}

/* signup */
.signup{text-align:center;padding-block:72px;display:flex;flex-direction:column;gap:14px;align-items:center}
.signup h2{font-size:34px}
.signup>p{color:var(--muted)}
.signup form{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px;width:100%}
.signup input{min-height:48px;width:300px;max-width:100%;box-sizing:border-box;padding:0 16px;background:var(--well);border:1px solid #6E6487;color:var(--ink);font-family:var(--body);font-size:18px;border-radius:2px}
.signup .note{font-size:17px;color:var(--gold);min-height:1.6em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

footer{border-top:1px solid var(--line)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;padding-block:40px;font-size:16px;color:var(--faint)}
.foot>div{max-width:540px;display:flex;flex-direction:column;gap:6px}
.foot .lbl{color:var(--text)}
.foot nav{display:flex;flex-wrap:wrap;gap:20px}

/* language */
:root[lang^="zh"] [data-l="en"],:root:not([lang^="zh"]) [data-l="zh"]{display:none!important}
.lang{min-height:40px;padding:0 16px;border:1px solid var(--line-strong);background:transparent;color:var(--text);font-family:var(--label);letter-spacing:1.5px;font-size:15px;border-radius:999px;cursor:pointer}
.lang:hover{border-color:var(--gold);color:var(--gold)}
:root[lang^="zh"] .eyebrow{letter-spacing:3px}

/* buy button */
.btn-buy{min-height:44px;padding:0 24px;background:transparent;border:1px solid var(--gold);color:var(--ink);font-family:var(--label);letter-spacing:2px;font-size:16px;border-radius:2px;cursor:pointer;transition:background-color .25s ease,color .25s ease}
.btn-buy:hover{background:var(--gold);color:var(--ground)}

/* disclaimer dialog */
dialog.terms{max-width:560px;width:calc(100% - 32px);box-sizing:border-box;max-height:calc(100% - 32px);overflow:auto;padding:0;background:var(--panel);color:var(--text);border:1px solid var(--gold);border-radius:6px}
dialog.terms::backdrop{background:rgba(10,6,18,.78)}
.terms-in{padding:32px;display:flex;flex-direction:column;gap:18px}
@media (max-width:480px){.terms-in{padding:22px}}
.terms h2{font-size:30px}
.terms ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:18px}
:root[lang^="zh"] .terms ul[data-l="en"],:root:not([lang^="zh"]) .terms ul[data-l="zh"]{display:none}
.agree{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px dashed var(--line-strong);border-radius:4px;cursor:pointer;color:var(--ink)}
.agree input{width:22px;height:22px;accent-color:var(--gold);margin:3px 0 0;flex:none}
.terms .msg{color:var(--gold);font-size:17px}
.terms .msg:empty{display:none}
.terms .actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px}
.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;box-shadow:none}

/* schedule */
.home-sched{padding-block:24px 88px}
.sched-page{max-width:860px;margin:0 auto;padding-block:24px 88px}
.sched{display:flex;flex-direction:column;gap:16px;max-width:860px;margin:0 auto}
.ev{display:flex;flex-wrap:wrap;gap:20px 26px;align-items:center;padding:22px 26px;background:var(--panel);border:1px solid var(--line);border-radius:4px;transition:border-color .35s ease}
.ev:hover{border-color:var(--gold)}
.ev .when{flex:none;width:78px;display:flex;flex-direction:column;align-items:center;gap:4px;padding-right:22px;border-right:1px solid var(--line)}
.ev .day{font-family:var(--display);font-size:46px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.ev .mon{font-family:var(--label);letter-spacing:2px;font-size:14px;color:var(--faint)}
.ev .what{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:6px}
.ev h3{font-size:26px}
.ev .desc{color:var(--muted)}
.ev .meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:16px;color:var(--faint)}
.kind{padding:1px 12px;border:1px solid var(--gold);border-radius:999px;font-family:var(--label);letter-spacing:1.5px;font-size:13px;color:var(--gold)}
.kind.done{display:none;border-color:var(--line-strong);color:var(--faint)}
.ev.past{opacity:.5}
.ev.past .kind.done{display:inline-block}
.sched-empty{text-align:center;color:var(--faint);padding-block:12px}

/* product links, photos, stock */
.card .pic{text-decoration:none;overflow:hidden}
.card .pic img{width:100%;height:100%;object-fit:cover}
.card-link{text-decoration:none;color:inherit}
.card-link:hover{color:var(--gold)}
.soldout{min-height:44px;padding:0 20px;display:inline-flex;align-items:center;border:1px solid var(--line-strong);color:var(--faint);font-family:var(--label);letter-spacing:2px;font-size:15px;border-radius:2px}

/* product page */
.product{padding-block:40px 88px;display:flex;flex-direction:column;gap:24px}
.back{font-size:16px;text-decoration:none;color:var(--faint);align-self:flex-start}
.back:hover{color:var(--gold)}
.product-in{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.gallery{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:12px}
.g-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border:1px solid var(--line);border-radius:4px;background:var(--well);scrollbar-width:none}
.g-track::-webkit-scrollbar{display:none}
.g-slide{flex:0 0 100%;aspect-ratio:4/5;max-width:100%;scroll-snap-align:start;display:flex;align-items:center;justify-content:center}
.g-slide img{width:100%;height:100%;object-fit:cover}
.g-empty svg{width:34%;height:auto}
.g-thumbs{display:flex;flex-wrap:wrap;gap:10px}
.g-thumb{width:72px;height:72px;padding:0;border:1px solid var(--line);border-radius:3px;background:var(--well);cursor:pointer;overflow:hidden;opacity:.6;transition:opacity .25s ease,border-color .25s ease}
.g-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.g-thumb[aria-current="true"],.g-thumb:hover{opacity:1;border-color:var(--gold)}
.p-info{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:16px}
.p-info h1{font-size:clamp(38px,5vw,54px);line-height:1.1}
.p-info .no{font-size:14px;color:var(--gold)}
.p-info .price{font-size:28px}
.p-info .desc{color:var(--muted);font-size:20px}
.p-info .buy{justify-content:flex-start}