:root{
  --bg:#070b09;--card:#0e1612;--line:#22332a;--cream:#ece3cf;--mut:#9c9584;
  --gold:#b98a4e;--g:#5BC36E;--g2:#3f9a56;--g3:#25693a;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;min-height:100%;height:100%}
body{
  margin:0;color:var(--cream);
  font-family:Inter,system-ui,"PingFang TC","Noto Sans TC",sans-serif;
  line-height:1.55;
  /* iPhone notch / status bar: keep header below system UI */
  padding-top:env(safe-area-inset-top,0px);
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  /* Ink-green caustic: absolute layer so it spans full document height (not just viewport) */
  background-color:#0a1a12;
  position:relative;
  min-height:100%;
  min-height:100dvh;
  isolation:isolate;
}
body::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;bottom:0;
  min-height:100%;
  z-index:-1;
  pointer-events:none;
  background-color:#0a1a12;
  background-image:
    linear-gradient(rgba(4,18,12,.22), rgba(3,14,10,.30)),
    url("/assets/bg-ink-cover.jpg");
  background-size:auto, cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:scroll; /* never fixed — Safari iOS breaks it */
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--g)}
.w{max-width:960px;margin:auto;padding:0 18px}
.serif,h1,h2,h3{font-family:"Cormorant Garamond","Noto Serif TC","Songti TC",Georgia,serif;font-weight:500}
.zh .serif,.zh h1,.zh h2,.zh h3{font-family:"Noto Serif TC","Songti TC","Cormorant Garamond",Georgia,serif}
img{max-width:100%;height:auto;display:block}
.lf{width:1.15em;height:1.15em;vertical-align:-.2em;display:inline-block}
.lf.cannaby-ico{width:1.35em;height:1.35em;vertical-align:-.28em;border-radius:0;filter:drop-shadow(0 0 6px #5bc36e66)}
.lf-gold{width:1.2em;height:1.2em;vertical-align:-.22em;display:inline-block}

/* header */
header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;flex-wrap:wrap}
.logo{display:flex;gap:10px;align-items:center;font-size:.98rem}
.logo .em{height:28px;width:auto}
.nav{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:.82rem;color:var(--mut)}
.nav a{padding:4px 2px}
.nav a[aria-current="page"]{color:var(--g)}
.lang{display:inline-flex;border:1px solid #3a5244;border-radius:999px;overflow:hidden;font:500 .78rem/1 Inter,system-ui,sans-serif;margin-left:auto}
.lang a{padding:6px 10px;color:#a9a08c}
.lang a.on{background:var(--g);color:#07120b}

/* hero */
.hero{text-align:center;padding:28px 0 12px}
.hero .creed{
  font-size:clamp(1.55rem,5.5vw,2.6rem);line-height:1.25;margin:0 0 10px;color:var(--cream)
}
.hero .sub{color:var(--gold);letter-spacing:.08em;font-size:.92rem;margin:0 0 22px}
.hero .seal-wrap{
  position:relative;
  width:min(520px,88vw);margin:0 auto 18px;
  background:transparent;
}
.hero .seal-wrap::before,
.hero .seal-wrap::after{content:none;display:none}
.hero .seal{
  position:relative;z-index:1;
  display:block;width:100%;height:auto;margin:0;
  object-fit:contain;object-position:center;
  border-radius:0;aspect-ratio:auto;
  background:transparent;
  /* Soft outer fade into ink-green; full seal (finials) stay visible */
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.35));
}
.hero{background:transparent}
section.hero, .hero > *{background:transparent}
.hero .cannaby{display:none}
.divline{display:flex;align-items:center;gap:12px;color:var(--gold);max-width:280px;margin:16px auto}
.divline:before,.divline:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* doors / cards */
.doors{display:grid;gap:12px;margin:28px 0}
@media(min-width:640px){.doors{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.doors{grid-template-columns:repeat(3,1fr)}}
.door,.k{
  background:linear-gradient(160deg,#111c16,#0a110d);
  border:1px solid var(--line);border-radius:16px;padding:18px 16px;
  transition:border-color .2s;
}
a.door:hover,a.k:hover{border-color:var(--g)}
.door .icon{width:36px;height:36px;margin-bottom:10px}
.door b{display:block;font-size:1.12rem;margin-bottom:4px}
.door span{color:var(--mut);font-size:.88rem}

section{margin-top:40px}
h1{font-size:clamp(1.9rem,6vw,3rem);line-height:1.1;margin:0 0 8px}
h2{font-size:1.55rem;margin:0 0 6px}
.lead{color:var(--mut);margin:0 0 16px;font-size:.94rem}
.prose p{margin:0 0 14px;color:var(--cream)}
.prose .note{color:var(--mut);font-size:.9rem}

/* signup */
.signup{margin:36px 0 12px}
.signup form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.signup input[type=email]{
  flex:1;min-width:200px;padding:12px 14px;border-radius:999px;
  border:1px solid var(--line);background:#0a110d;color:var(--cream);font:inherit
}
.signup input:focus{outline:2px solid var(--g);outline-offset:2px}
.btn{
  display:inline-flex;gap:8px;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:999px;border:1px solid #6fd486;
  background:linear-gradient(var(--g2),var(--g3));color:var(--cream);
  font:500 1rem/1 Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 0 20px #5bc36e44
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border-color:var(--line);box-shadow:none}
.thanks{display:none;color:var(--g);margin-top:12px}
.thanks.show{display:block}

/* learn search */
.search{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:#0a110d;color:var(--cream);font:inherit;margin-bottom:14px}
.search:focus{outline:2px solid var(--g);outline-offset:2px}
.topics{display:grid;gap:12px}
@media(min-width:640px){.topics{grid-template-columns:1fr 1fr}}
.topic[hidden]{display:none !important}
.tagpill{display:inline-block;font-size:.72rem;color:var(--gold);border:1px solid #3a5244;
  border-radius:999px;padding:2px 8px;margin-right:4px;margin-bottom:6px}

/* related / CTA */
.related,.cta{
  margin-top:28px;padding:18px;border:1px dashed var(--line);border-radius:14px;background:#0a110d88
}
.related h3,.cta h3{margin:0 0 8px;font-size:1.15rem}
.muted{color:var(--mut);font-size:.9rem}

/* grow diary */
.stages{display:grid;gap:10px}
.stage{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:14px}
.stage .mark{width:40px;height:40px;border-radius:50%;border:1px solid var(--gold);
  display:grid;place-items:center;color:var(--gold);font-family:"Cormorant Garamond",serif;font-size:1.1rem}
.stage .soon{font-size:.75rem;color:var(--gold);letter-spacing:.06em;text-transform:uppercase}

/* shop age gate */
.gate{
  position:fixed;inset:0;background:#070b09ee;display:none;place-items:center;z-index:100;padding:20px
}
.gate.open{display:grid}
.gate .box{max-width:360px;width:100%;text-align:center;padding:28px 22px}
.gate .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.shop-content.locked{filter:blur(4px);pointer-events:none;user-select:none}
.cats{display:grid;gap:12px}
@media(min-width:640px){.cats{grid-template-columns:1fr 1fr}}
.cat .badge{font-size:.75rem;color:var(--gold);letter-spacing:.05em}

/* partners */
.tiers{display:grid;gap:12px}
@media(min-width:640px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier h3{margin:0 0 6px;color:var(--gold)}

/* ask embed */
.board-frame{
  width:100%;min-height:70vh;min-height:70dvh;height:min(78dvh,820px);border:1px solid var(--line);border-radius:14px;
  background:#0a110d
}
.board-link{display:inline-block;margin-top:12px;color:var(--g);font-size:.92rem}

/* footer */
footer{
  margin-top:56px;border-top:1px solid var(--line);padding:24px 0 40px;
  display:grid;gap:12px;text-align:center;color:var(--mut);font-size:.86rem
}
footer .closer{color:var(--cream);font-size:1.25rem}
footer .legal{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center}
footer a:hover{color:var(--cream)}
.notice{font-size:.8rem}

@media(min-width:720px){
  .w{padding:0 28px}
  header{padding:20px 0}
  .logo .em{height:32px}
}

/* Full-frame seals — never crop with border-radius:50% + object-fit:cover */
.seal-foot,.seal-sm{display:block;width:auto;height:auto;object-fit:contain;border-radius:0;background:transparent}
.seal-foot{width:40px;height:auto}
.seal-sm{width:72px;height:auto;margin:0 auto 12px}
.door img.seal-sm,.door .seal-sm{width:36px;margin:0 0 10px}
.hero .linkline{color:var(--g);font-weight:500;margin:0 auto 10px}
.hero .linkline a{color:inherit}

/* Knowledge tower gold frames (seal gold) */
.doors.tower{grid-template-columns:1fr}
@media(min-width:640px){.doors.tower{grid-template-columns:repeat(2,1fr)}}
.doors.tower .door{
  border:1.5px solid #c9a35a;
  background:linear-gradient(160deg,#111c16,#0a110d);
  box-shadow:
    inset 0 0 0 1px rgba(212,175,106,.38),
    0 0 14px rgba(201,163,90,.28),
    0 0 2px rgba(212,175,106,.45);
}
a.door.doors-tower-item:hover,
.doors.tower a.door:hover{
  border-color:#d4af6a;
  color:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(212,175,106,.55),
    0 0 18px rgba(212,175,106,.4),
    0 0 3px rgba(212,175,106,.6);
}
.doors.tower .door b{color:#ece3cf}
a.all-posts-gold{
  color:#c9a35a;
  font-weight:500;
  letter-spacing:.02em;
}
a.all-posts-gold:hover{color:#d4af6a}

/* Keep title last-word + Cannaby icon together */
span.nowrap{white-space:nowrap;display:inline}
h1 span.nowrap .lf,h1 span.nowrap .lf.cannaby-ico{
  width:1.15em;height:1.15em;vertical-align:-0.18em;display:inline-block;
}


/* Ask page: pin board iframe to visual viewport while iOS keyboard is open */
body.ask-kb-open{
  overflow:hidden;
  /* keep page paint dark so any gap isn't a white flash */
  background:#0a110d;
}
body.ask-kb-open .board-frame{
  position:fixed !important;
  left:0;right:0;
  /* Offset by visualViewport.offsetTop so the iframe fills the visible area above the keyboard */
  top:var(--vv-top, 0px);
  width:100% !important;
  height:var(--vv-h, 100dvh) !important;
  min-height:0 !important;
  max-height:none !important;
  z-index:80;
  border-radius:0;
  border-left:none;border-right:none;
  margin:0;
  background:#0a110d;
}
body.ask-kb-open header,
body.ask-kb-open footer,
body.ask-kb-open .board-link,
body.ask-kb-open section > h1,
body.ask-kb-open section > .lead{
  visibility:hidden;
  pointer-events:none;
}

/* Shop 21+ demo storefront */
.demo-banner{
  display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;align-items:center;
  margin:0 0 18px;padding:10px 14px;border-radius:12px;
  border:1px dashed var(--gold);background:#0a110dcc;
  color:var(--gold);font-size:.82rem;letter-spacing:.02em;text-align:center
}
.demo-banner strong{color:var(--cream);font-weight:500}
.shop-intro{margin:0 0 22px;color:var(--cream);font-size:1.02rem}
.shop-intro .tagline{color:var(--gold);font-size:.92rem;margin-top:6px}
.cats{display:grid;gap:12px;margin:0 0 28px}
@media(min-width:640px){.cats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.cats{grid-template-columns:repeat(3,1fr)}}
.cat{
  border:1.5px solid #c9a35a;
  box-shadow:inset 0 0 0 1px rgba(212,175,106,.28),0 0 12px rgba(201,163,90,.18);
}
.cat h3{margin:4px 0 6px;color:var(--cream)}
.products{display:grid;gap:12px;margin:0 0 28px}
@media(min-width:560px){.products{grid-template-columns:1fr 1fr}}
.product{
  border:1.5px solid #c9a35a;
  box-shadow:inset 0 0 0 1px rgba(212,175,106,.28),0 0 12px rgba(201,163,90,.18);
  display:flex;flex-direction:column;gap:8px
}
.product .ex-badge{
  align-self:flex-start;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:#07120b;background:var(--gold);border-radius:999px;padding:3px 9px;font-weight:600
}
.product h3{margin:0;font-size:1.2rem}
.product .cat-pill{
  display:inline-block;font-size:.72rem;color:var(--gold);border:1px solid #3a5244;
  border-radius:999px;padding:2px 8px
}
.product .btn[disabled],.product .btn.is-soon{
  opacity:.72;cursor:not-allowed;pointer-events:none;box-shadow:none
}
.ambassador{
  margin:8px 0 24px;padding:20px 18px;border-radius:16px;
  border:1.5px solid #c9a35a;
  background:linear-gradient(160deg,#111c16,#0a110d);
  box-shadow:inset 0 0 0 1px rgba(212,175,106,.32),0 0 14px rgba(201,163,90,.22);
  text-align:center
}
.ambassador .leaf{width:48px;height:48px;margin:0 auto 10px;filter:drop-shadow(0 0 8px #5bc36e66)}
.ambassador h2{margin:0 0 8px}
.ambassador p{margin:0 0 14px;color:var(--mut);font-size:.92rem}
.gate .legal-note{color:var(--mut);font-size:.82rem;margin:10px 0 0}
.gate .demo-line{color:var(--gold);font-size:.78rem;margin:12px 0 0;letter-spacing:.02em}
.shop-section-title{font-size:1.25rem;margin:8px 0 12px;color:var(--gold)}

/* Skip to content: visually hidden until focused; ink-green / gold when visible */
.skip-to-content{
  position:absolute;
  left:-10000px;
  top:0;
  z-index:10000;
  padding:10px 16px;
  background:var(--card);
  color:var(--cream);
  border:1px solid var(--gold);
  font-family:Inter,system-ui,sans-serif;
  font-size:.9rem;
  letter-spacing:.02em;
  white-space:nowrap;
  text-decoration:none;
}
.skip-to-content:focus,
.skip-to-content:focus-visible{
  left:16px;
  top:max(12px, env(safe-area-inset-top, 0px));
  outline:3px solid var(--g);
  outline-offset:2px;
  color:var(--cream);
  box-shadow:0 0 16px #5bc36e44;
}
main[tabindex="-1"]:focus{outline:none}

/* 2026-11-10 temple batch: clean nav/footer wrapping, hero calls to action, four home doors, shop status, 404, gate home link */
.nav{gap:4px 16px}
footer .legal{gap:8px 18px}
.hero-cta,.cta-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:14px auto 6px}
.cta-row{justify-content:flex-start}
.hero-cta .btn,.cta-row .btn{min-height:44px}
.btn.ghost{color:var(--cream);border-color:#c9a35a}
.btn.ghost:hover{color:var(--cream);border-color:#d4af6a}
@media(min-width:640px){.doors.home-doors{grid-template-columns:repeat(2,1fr)}}
.product .soon-tag{margin:auto 0 0;align-self:flex-start;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);border:1px dashed #c9a35a;border-radius:999px;padding:4px 10px}
.shop-next{margin-top:8px}
.shop-next .muted{margin:0 0 6px}
.nf{text-align:center;padding:24px 0 8px}
.nf .lead{max-width:30rem;margin:0 auto 8px}
.nf .hero-cta{margin-bottom:8px}
#cw-age #cw-age-home{display:block;min-height:44px;line-height:44px;margin:8px auto 0;color:#ece3cf;text-decoration:underline;font-size:.9rem}
#cw-age #cw-age-home:focus-visible{outline:3px solid #5bc36e}
.prose td code{overflow-wrap:anywhere;word-break:break-word}
.shop-intro .tagline{display:block}
@media(max-width:480px){header .nav{width:100%;justify-content:space-between;gap:4px 8px}}
.product .cat-pill{align-self:flex-start}
@media(max-width:480px){.prose td:first-child{min-width:8.5em}}