:root{
  --ink:#2b2118;--gold:#c9a55c;--gold-light:#e3c989;--red:#8a2e2e;
  --paper:#f4ecdb;--paper-dark:#e8dcc3;--border:#b89968;--shadow:rgba(43,33,24,.25);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Noto Serif TC","Songti TC","STSong",serif;color:var(--ink);
  background:
    radial-gradient(circle at 20% 20%, rgba(201,165,92,.08), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(138,46,46,.06), transparent 40%),
    linear-gradient(160deg,#f7f0e1 0%,#efe5cf 50%,#e8dcc3 100%);
  min-height:100vh;overflow-x:hidden;
}
body::before{content:"";position:fixed;inset:0;
  background-image:repeating-linear-gradient(0deg, rgba(184,153,104,.04) 0 2px, transparent 2px 22px);
  pointer-events:none;z-index:0;}
header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:18px 6vw;border-bottom:1px solid var(--border);background:rgba(244,236,219,.92);backdrop-filter:blur(6px);}
.brand{display:flex;align-items:center;gap:12px;font-size:1.35rem;font-weight:700;letter-spacing:.15em;
  color:var(--ink);text-decoration:none}
.brand .seal{width:38px;height:38px;border-radius:8px;background:linear-gradient(135deg,var(--red),#6e2020);
  color:#f4ecdb;display:grid;place-items:center;font-size:1.1rem;box-shadow:0 2px 6px var(--shadow);}
nav{display:flex;gap:22px}
nav a:hover{opacity:1;color:var(--red)}
nav a.active{opacity:1;color:var(--red);font-weight:700}
.hamburger{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--ink);padding:4px 8px}
.title{font-size:clamp(2rem,5vw,2.8rem);letter-spacing:.3em;margin-bottom:8px;
  background:linear-gradient(180deg,var(--ink),var(--red));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{font-size:.9rem;letter-spacing:.45em;color:var(--gold);margin-bottom:8px}
.btn{padding:14px 40px;border-radius:40px;font-size:1.05rem;letter-spacing:.2em;cursor:pointer;
  border:none;text-decoration:none;display:inline-block;transition:.3s;
  background:linear-gradient(135deg,var(--red),#6e2020);color:#f4ecdb;box-shadow:0 6px 18px rgba(138,46,46,.35)}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(138,46,46,.45)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--border);box-shadow:none;margin-left:12px}
.btn.ghost:hover{background:var(--paper-dark)}
footer{position:relative;z-index:1;text-align:center;padding:40px 6vw;border-top:1px solid var(--border);
  background:rgba(244,236,219,.6);font-size:.88rem;color:#6b5a44;letter-spacing:.08em}
/* Share modal */
.share-modal{display:none;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center}
.share-modal.open{display:flex}
.share-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.share-sheet{position:relative;z-index:1;background:var(--paper);border:1px solid var(--border);border-radius:16px;padding:24px;max-width:400px;width:92vw;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.share-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.share-header h3{font-size:1.1rem;letter-spacing:.1em}
.share-close{background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--ink);opacity:.6;transition:.2s}
.share-close:hover{opacity:1}
#shareCanvas{width:100%;border-radius:10px;border:1px solid var(--border);margin-bottom:16px}
.share-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.share-actions .btn{font-size:.88rem;padding:10px 20px}
.share-btn:hover{background:var(--gold);color:#fff}
.share-btn.show{display:inline-block}