@font-face { font-family:'LXGW WenKai'; src:url(../fonts/wenkai.woff2) format('woff2'); font-display:swap; }
@font-face { font-family:'Ms Madi'; src:url(../fonts/ms-madi.woff2) format('woff2'); font-display:swap; }
@font-face { font-family:'Jost'; src:url(../fonts/jost.woff2) format('woff2'); font-weight:300 600; font-display:swap; }

:root { --paper:#e1d3bf; --paper-2:#eadfcf; --ink:#2a2420; --mute:#584c42; --red:#b23a2e; --red-ink:#9a2e24;
  --gold:#c8892f; --gold-2:#e2b45a; --u:3.75px; --col:480px;
  --zh:'LXGW WenKai','Kaiti SC','STKaiti',serif; --label:'Jost','Helvetica Neue',sans-serif; --script:'Ms Madi',cursive;
  --out:cubic-bezier(.16,1,.3,1); --io:cubic-bezier(.65,0,.35,1); --spring:cubic-bezier(.34,1.56,.64,1); }
* { margin:0; padding:0; box-sizing:border-box; }
html { background:var(--paper); -webkit-text-size-adjust:100%; }
html.locked, html.locked body { overflow:hidden; height:100%; }
body { background:var(--paper); color:var(--ink); font-family:var(--zh); font-size:18px; line-height:1.9; overflow-x:hidden; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
a { color:inherit; -webkit-tap-highlight-color:transparent; }
img { max-width:100%; }
.vh { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible { outline:2px dashed var(--red-ink); outline-offset:3px; }

.page { width:100%; max-width:var(--col); margin:0 auto; }
.sec { position:relative; padding:72px 18px 24px; }
.label { font-family:var(--label); font-weight:500; font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--red-ink); }
.sec-h { text-align:center; }
.sec-h .label { display:block; }
.sec-h h2 { font-weight:400; font-size:30px; letter-spacing:.2em; padding-left:.2em; line-height:1.4; margin-top:6px; }
.doodle { display:block; width:150px; height:18px; margin:10px auto 0; color:var(--red); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:46px; padding:8px 18px;
  font-family:var(--zh); font-size:17px; color:var(--ink); text-decoration:none; position:relative; background:var(--paper-2); border-radius:14px 18px 15px 17px / 17px 14px 18px 15px; border:1.5px solid var(--ink); }
.btn.solid { background:var(--ink); color:var(--paper-2); }
.btn:active { transform:translate3d(0,1px,0); }

/* gentle reveal on scroll */
.js .up { opacity:0; transform:translate3d(0,22px,0); transition:opacity .9s var(--out), transform 1.1s var(--out); }
.js .up.in { opacity:1; transform:none; }

/* music button + toast */
.music { position:fixed; z-index:40; top:max(10px, env(safe-area-inset-top)); right:max(10px, calc(50% - var(--col) / 2 + 10px)); width:44px; height:44px;
  border-radius:50%; background:rgba(234,223,207,.92); border:1.5px solid var(--ink); display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity .6s; }
.opened .music { opacity:1; pointer-events:auto; }
.music svg { width:24px; height:24px; }
.music .slash { stroke:var(--red); }
.music.on .slash { display:none; }
.music.dead { opacity:.4 !important; }
.toast { position:fixed; z-index:70; left:50%; bottom:calc(28px + env(safe-area-inset-bottom)); max-width:86vw; transform:translate3d(-50%,20px,0); opacity:0;
  background:var(--ink); color:var(--paper-2); font-size:15px; line-height:1.6; padding:10px 18px; border-radius:16px; transition:opacity .3s, transform .3s var(--out); pointer-events:none; }
.toast.show { opacity:1; transform:translate3d(-50%,0,0); }

@media (prefers-reduced-motion: reduce) { .js .up { opacity:1; transform:none; transition:none; } }