/* Reset cơ bản */
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: sơn mài (lacquer) ground, bronze-drum hero, sticky era rail, two-column era blocks (time column | story column) */
:root{
  --bg:#150e0b; --bg2:#21160f; --bg3:#2c1e15;
  --fg:#f2e7d3; --muted:#b8a58b; --line:#3d2c21;
  --gold:#dcab48; --red:#d64b30; --patina:#74b39c;
  --on-gold:#1a100a;
  --f-display:"Fraunces", "Times New Roman", serif;
  --f-body:"Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f1eee4; --bg2:#e7e1d1; --bg3:#ddd5c1;
    --fg:#1f1711; --muted:#67574a; --line:#d1c7b2;
    --gold:#8f600c; --red:#b0351f; --patina:#2b7160;
    --on-gold:#fbf6ea; color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#f1eee4; --bg2:#e7e1d1; --bg3:#ddd5c1;
  --fg:#1f1711; --muted:#67574a; --line:#d1c7b2;
  --gold:#8f600c; --red:#b0351f; --patina:#2b7160;
  --on-gold:#fbf6ea; color-scheme:light;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;line-height:1.1;margin:0}
p{margin:0}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:20px}
.eyebrow{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* HERO */
.hero{padding-block:56px 40px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 78% 45%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;position:relative}
.hero h1{font-size:clamp(3.6rem,10vw,7.4rem);font-weight:850;letter-spacing:-.03em;font-variation-settings:"opsz" 144;line-height:.92;margin-block:14px 20px}
.hero h1 em{font-style:italic;font-weight:500;color:var(--gold)}
.lede{font-size:1.15rem;color:var(--muted);max-width:34ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;padding:12px 20px;border-radius:999px;border:1px solid var(--gold);color:var(--gold);background:transparent;font-family:var(--f-body);font-size:.95rem;cursor:pointer;transition:background .2s,color .2s}
.btn.solid{background:var(--gold);color:var(--on-gold)}
.btn:hover{background:var(--gold);color:var(--on-gold)}
.stats{display:flex;flex-wrap:wrap;gap:28px;margin-top:36px}
.stats div{display:grid}
.stats b{font-family:var(--f-display);font-size:2rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.stats span{font-size:.82rem;color:var(--muted)}
.drum-box{display:grid;place-items:center;min-width:0}
#drum{width:100%;max-width:440px;aspect-ratio:1;height:auto}
.drum-cap{font-size:.78rem;color:var(--muted);text-align:center;margin-top:8px;max-width:36ch}

/* RAIL */
.rail{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-block:1px solid var(--line)}
.rail .wrap{display:flex;gap:6px;overflow-x:auto;padding-block:10px;scrollbar-width:thin}
.rail a{flex:none;text-decoration:none;font-size:.82rem;padding:6px 12px;border-radius:999px;color:var(--muted);border:1px solid transparent;white-space:nowrap}
.rail a b{font-family:var(--f-mono);font-size:.7rem;color:var(--gold);margin-right:6px}
.rail a:hover{color:var(--fg);border-color:var(--line)}
.rail a.on{color:var(--fg);border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent)}

/* SEARCH */
.search{padding-block:40px 8px}
.search label{display:block;font-family:var(--f-display);font-size:1.5rem;font-weight:600;margin-bottom:12px}
.sbox{display:flex;gap:10px;flex-wrap:wrap}
.sbox input{flex:1 1 260px;min-width:0;font:inherit;font-size:1rem;padding:14px 18px;border-radius:14px;border:1px solid var(--line);background:var(--bg2);color:var(--fg)}
.sbox input::placeholder{color:var(--muted)}
.sbox input:focus{outline:none;border-color:var(--gold)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tag{font:inherit;font-size:.82rem;padding:5px 12px;border-radius:999px;border:1px dashed var(--line);background:none;color:var(--muted);cursor:pointer}
.tag:hover{border-color:var(--patina);color:var(--patina)}
#scount{margin-top:14px;font-size:.9rem;color:var(--patina);min-height:1.5em}
mark{background:color-mix(in srgb,var(--gold) 35%,transparent);color:inherit;border-radius:3px;padding:0 1px}

/* ERAS */
.eras{padding-block:16px 40px}
.era{display:grid;grid-template-columns:230px minmax(0,1fr);gap:36px;padding-block:56px;border-bottom:1px solid var(--line);scroll-margin-top:72px}
.era-side{position:sticky;top:90px;align-self:start}
.era-num{font-family:var(--f-mono);font-size:.8rem;color:var(--gold);letter-spacing:.1em}
.era-range{font-family:var(--f-display);font-size:1.6rem;font-weight:700;line-height:1.15;margin-top:8px;font-variant-numeric:tabular-nums}
.era-cap{font-size:.85rem;color:var(--muted);margin-top:14px}
.era-cap b{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--patina);font-weight:600}
.era h2{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:750;letter-spacing:-.015em}
.era .sum{margin-top:14px;font-size:1.06rem;max-width:65ch}
.events{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:2px}
.events li{border-radius:10px;transition:background .2s,opacity .2s}
.events a.evl{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:16px;padding:12px 14px;color:inherit;text-decoration:none;border-radius:10px}
.events a.evl > span:last-child::after{content:" ↗";color:var(--gold);opacity:.45;transition:opacity .2s}
.events a.evl:hover > span:last-child, .events a.evl:focus-visible > span:last-child{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.events li:hover{background:var(--bg2)}
.events li:hover a.evl > span:last-child::after{opacity:1}
.events .y{font-family:var(--f-mono);font-size:.85rem;font-weight:700;color:var(--gold);padding-top:2px;font-variant-numeric:tabular-nums}
.events li.dim{opacity:.32}
.fact{margin-top:26px;padding:20px 22px;border-radius:16px;background:var(--bg2);display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;max-width:70ch}
.fact svg{width:34px;height:34px;color:var(--gold)}
.fact h3{font-family:var(--f-body);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--patina);margin-bottom:4px}
.people{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;align-items:center}
.people span{font-size:.8rem;color:var(--muted);margin-right:4px}
.people a{font-size:.85rem;text-decoration:none;padding:4px 12px;border-radius:999px;background:var(--bg3)}
.people a:hover{background:var(--gold);color:var(--on-gold)}
.legend{font-size:.72rem;font-family:var(--f-mono);padding:2px 8px;border-radius:6px;border:1px solid var(--red);color:var(--red);margin-left:8px;vertical-align:middle;white-space:nowrap}
#empty{padding:48px 0;color:var(--muted);font-size:1.05rem}

/* SECTIONS */
.sec{padding-block:72px;border-top:1px solid var(--line)}
.sec-head{display:grid;gap:10px;margin-bottom:36px;max-width:60ch}
.sec-head h2{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.02em}
.sec-head p{color:var(--muted)}

/* FIGURES */
.figs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.fig{background:var(--bg2);border-radius:18px;padding:22px;display:grid;gap:8px;align-content:start;scroll-margin-top:80px;border:1px solid transparent;transition:border-color .2s}
.fig:target,.fig.open{border-color:var(--gold)}
.fig .mono{font-family:var(--f-display);font-size:2.4rem;font-weight:800;color:var(--gold);line-height:1;font-style:italic}
.fig h3{font-size:1.35rem;font-weight:700}
.fig .yrs{font-family:var(--f-mono);font-size:.78rem;color:var(--muted)}
.fig .role{font-size:.93rem}
.fig button{justify-self:start;font:inherit;font-size:.85rem;font-weight:600;background:none;border:none;color:var(--patina);padding:4px 0;cursor:pointer}
.fig .more{font-size:.92rem;color:var(--muted);display:grid;gap:10px;border-top:1px dashed var(--line);padding-top:12px}
.fig .more a{color:var(--gold);font-weight:600;font-size:.85rem}

/* QUIZ */
.quiz{background:var(--bg2);border-radius:22px;padding:clamp(20px,4vw,40px);max-width:760px}
.qbar{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
.qprog{height:4px;border-radius:4px;background:var(--bg3);margin-top:10px;overflow:hidden}
.qprog i{display:block;height:100%;background:var(--gold);transition:width .3s}
.qtext{font-family:var(--f-display);font-size:clamp(1.35rem,3vw,1.8rem);font-weight:650;margin-block:22px}
.qopts{display:grid;gap:10px}
.qopts button{font:inherit;text-align:left;padding:14px 18px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;transition:border-color .2s,background .2s}
.qopts button:hover:not(:disabled){border-color:var(--gold)}
.qopts button:disabled{cursor:default}
.qopts .ok{border-color:var(--patina);background:color-mix(in srgb,var(--patina) 18%,var(--bg))}
.qopts .no{border-color:var(--red);background:color-mix(in srgb,var(--red) 15%,var(--bg))}
.qexp{margin-top:18px;font-size:.95rem}
.qexp b{color:var(--patina)}
.qexp b.bad{color:var(--red)}
.qnext{margin-top:20px}
.qend{text-align:left}
.qend .big{font-family:var(--f-display);font-size:4rem;font-weight:800;color:var(--gold);line-height:1}

footer{padding-block:48px 64px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}
footer .wrap{display:grid;gap:12px;max-width:820px}
footer h2{font-family:var(--f-body);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
footer ul{margin:0;padding-left:18px}
.top{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:11;width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);background:var(--bg);color:var(--gold);font-size:1.2rem;cursor:pointer}
/* nút đổi giao diện sáng / tối (lựa chọn được nhớ trong trình duyệt, ưu tiên hơn cài đặt của máy) */
.theme{position:fixed;right:16px;top:calc(14px + env(safe-area-inset-top,0px));z-index:12;width:42px;height:42px;border-radius:50%;border:1px solid var(--gold);background:var(--bg);color:var(--gold);font-size:1.15rem;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 12px rgba(0,0,0,.22);transition:background .2s,color .2s}
.theme:hover{background:var(--gold);color:var(--on-gold)}
/* GÓP Ý CỦA NGƯỜI ĐỌC: nút nổi góc dưới trái, bảng trượt từ phải (điện thoại: từ dưới lên) */
.gopy-btn{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:11;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--gold);background:var(--bg);color:var(--gold);font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.22);transition:background .2s,color .2s}
.gopy-btn:hover{background:var(--gold);color:var(--on-gold)}
.gopy-btn span{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--red);color:#fff;font-family:var(--f-mono);font-size:.72rem;display:grid;place-items:center}
.gopy-wrap{position:fixed;inset:0;z-index:20}
.gopy-back{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.gopy{position:absolute;top:0;right:0;bottom:0;width:min(540px,100%);background:var(--bg);color:var(--fg);border-left:1px solid var(--line);display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.3);animation:gopy-in .25s ease-out}
@keyframes gopy-in{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.gopy > header{padding:20px 22px 14px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:start}
.gopy > header .eyebrow{grid-column:1}
.gopy > header h2{grid-column:1;font-size:1.35rem;font-weight:750}
.gopy-x{grid-column:2;grid-row:1/3;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg);font-size:1.3rem;cursor:pointer}
.gopy-list{flex:1;overflow:auto;padding:16px 22px;display:grid;gap:12px;align-content:start}
.gopy-item{background:var(--bg2);border-radius:14px;padding:14px 16px;font-size:.95rem}
.gopy-item header{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-bottom:6px}
.gopy-item header span{font-family:var(--f-mono);font-size:.72rem;color:var(--muted)}
.gopy-item header em{font-style:normal;font-size:.78rem;color:var(--patina)}
.gopy-item blockquote{margin:0 0 8px;padding:6px 12px;border-left:3px solid var(--gold);color:var(--muted);font-style:italic;font-size:.9rem}
.gopy-item p{margin:0;white-space:pre-wrap}
.gopy-reply{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);font-size:.9rem}
.gopy-reply b{color:var(--gold)}
.gopy-empty{color:var(--muted);font-size:.92rem}
.gopy-form{padding:14px 22px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);display:grid;gap:10px;background:var(--bg2)}
.gopy-form label{display:grid;gap:4px;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.gopy-form input,.gopy-form select,.gopy-form textarea{font:inherit;font-size:.95rem;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 12px;width:100%;box-sizing:border-box}
.gopy-form textarea{resize:vertical;min-height:90px}
.gopy-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gopy-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.gopy-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gopy-actions .btn{padding:10px 18px;font-size:.9rem}
#gopy-msg{font-size:.88rem;color:var(--patina)}
body.gopy-open{overflow:hidden}
@media (max-width:640px){
  .gopy{top:auto;left:0;width:100%;height:min(92vh,100%);border-left:none;border-top:1px solid var(--line);border-radius:18px 18px 0 0;animation:gopy-up .25s ease-out}
  @keyframes gopy-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
  .gopy-row{grid-template-columns:1fr}
  .gopy-btn{left:12px;padding:9px 13px;font-size:.85rem}
}
/* thanh báo có bản mới (chỉ hiện khi chạy bằng serve.py và file vừa được sửa) */
.newver{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:13;padding:12px 20px;border-radius:999px;border:1px solid var(--gold);background:var(--gold);color:var(--on-gold);font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.28);max-width:calc(100vw - 32px)}


/* CHAPTER */
.read{display:inline-flex;margin-top:18px;font-weight:600;font-size:.95rem;color:var(--gold);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.read:hover{color:var(--fg)}
.ch{padding-block:28px 72px}
.ch-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line)}
.back{text-decoration:none;font-weight:600;font-size:.92rem;color:var(--gold)}
.back:hover{color:var(--fg)}
.ch-head{padding-block:44px 36px;display:grid;gap:14px}
.ch-range{font-family:var(--f-mono);font-size:.95rem;color:var(--gold);font-weight:700}
.ch-head h1{font-size:clamp(2.8rem,8vw,5.6rem);font-weight:850;letter-spacing:-.03em;font-variation-settings:"opsz" 144;line-height:.95}
.ch-lede{font-size:1.2rem;color:var(--muted);max-width:52ch}
.ch-cap{font-size:.9rem;color:var(--muted)}
.ch-cap b{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--patina);margin-right:8px}
.ch-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:start}
.ch-story{display:grid;gap:18px;font-size:1.08rem;max-width:66ch}
.ch-story > p:first-child::first-letter{font-family:var(--f-display);font-weight:800;font-size:3.6em;float:left;line-height:.85;margin:.06em .1em 0 0;color:var(--gold)}
.ch-story .fact{margin-top:10px}
/* Bài kể chuyện: mục lục, các phần có tiêu đề, chữ hoa đầu bài, nguồn */
.ch-sub{font-family:var(--f-display);font-size:clamp(1.3rem,3vw,1.8rem);font-weight:600;font-style:italic;color:var(--gold);line-height:1.25;margin-top:-4px}
.ch-story.tale{gap:0;font-size:1.1rem;line-height:1.75}
.tale-toc{list-style:none;margin:0 0 8px;padding:16px 20px;border-radius:14px;background:var(--bg2);display:grid;gap:6px;counter-reset:toc}
.tale-toc li{counter-increment:toc;display:flex;gap:12px;align-items:baseline;font-size:.92rem}
.tale-toc li::before{content:counter(toc,decimal-leading-zero);font-family:var(--f-mono);font-size:.72rem;color:var(--gold)}
.tale-toc a{color:var(--fg);text-decoration:none;border-bottom:1px solid transparent}
.tale-toc a:hover{color:var(--gold);border-color:currentColor}
.tale-part{padding-top:34px;scroll-margin-top:16px}
.tale-part h3{font-size:clamp(1.45rem,3vw,1.9rem);font-weight:750;margin-bottom:16px;display:flex;gap:14px;align-items:baseline}
.tale-part h3 span{font-family:var(--f-mono);font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--gold)}
.tale-part p{margin:0 0 16px;scroll-margin-top:28px;border-radius:8px}
/* tô sáng đoạn/phần vừa được cuộn tới từ một mốc sự kiện hoặc mục lục */
.hit{animation:hit 2.8s ease-out}
@keyframes hit{0%,40%{background:color-mix(in srgb,var(--gold) 26%,transparent);box-shadow:0 0 0 10px color-mix(in srgb,var(--gold) 26%,transparent)}100%{background:transparent;box-shadow:0 0 0 10px transparent}}
.tale-part:first-of-type > p:first-of-type::first-letter{font-family:var(--f-display);font-weight:800;font-size:3.6em;float:left;line-height:.85;margin:.06em .1em 0 0;color:var(--gold)}
.tale-src{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line);font-size:.85rem;color:var(--muted)}
.tale-src b{color:var(--patina);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;margin-right:6px}
.ch-story.tale .fact{margin-top:24px}
.fact2{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);color:var(--muted);font-size:.95rem}
.ch-map{position:sticky;top:24px;min-width:0}
.ch-map figure{margin:0;background:var(--bg2);border-radius:18px;padding:14px;display:grid;gap:14px}
.map{width:100%;height:auto;display:block;border-radius:12px;max-height:72vh}
.m-sea{fill:color-mix(in srgb,var(--patina) 10%,var(--bg))}
.m-nb{fill:var(--bg2);stroke:var(--line);stroke-width:.6}
.m-vn{fill:color-mix(in srgb,var(--gold) 40%,var(--bg2));stroke:var(--gold)}
.m-isl{fill:var(--gold)}
.m-lab{fill:var(--muted);font-family:var(--f-body);font-weight:600}
.m-sea-lab{fill:var(--patina);font-family:var(--f-mono);letter-spacing:.2em;opacity:.7}
.m-trail{fill:none;stroke:var(--red);opacity:.85}
.m-trail-lab{fill:var(--red)}
.m-pin circle{fill:var(--red);stroke:var(--bg);stroke-width:1.5px;vector-effect:non-scaling-stroke;transition:r .15s}
.m-pin text{fill:#fff;font-family:var(--f-mono);font-weight:700;text-anchor:middle}
.m-pin.on circle{fill:var(--gold)}
.maplist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.maplist li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;padding:6px 6px;border-radius:8px;font-size:.88rem}
.maplist li:hover{background:var(--bg3)}
.maplist b{width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--f-mono);font-size:.72rem;display:grid;place-items:center}
.maplist strong{display:block;font-weight:600;color:var(--fg)}
.maplist span{color:var(--muted)}
.mapnote,.artnote{font-size:.78rem;color:var(--muted)}
.ch-sec{margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.ch-sec h2{font-size:clamp(1.7rem,4vw,2.4rem);font-weight:750;margin-bottom:24px}
.arts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.art{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;background:var(--bg2);border-radius:18px;padding:18px}
.art-pic{background:var(--bg);border-radius:12px;color:var(--gold);padding:12px;display:grid;place-items:center}
.art-pic svg{width:100%;max-width:300px;height:auto}
.art h3{font-size:1.25rem;font-weight:700;margin-bottom:6px}
.art p{font-size:.95rem;color:var(--muted)}
.artnote{margin-top:12px}
.ch-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px}
.pn{display:grid;gap:4px;text-decoration:none;padding:20px 22px;border-radius:16px;border:1px solid var(--line);transition:border-color .2s,background .2s}
.pn:hover{border-color:var(--gold);background:var(--bg2)}
.pn.nx{text-align:right}
.pn small{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.pn b{font-family:var(--f-display);font-size:1.35rem;font-weight:700;line-height:1.2}
.pn span{font-size:.85rem;color:var(--muted)}
@media (max-width:820px){
  .ch-grid{grid-template-columns:1fr;gap:32px}
  .ch-map{position:static}
  .ch-nav{grid-template-columns:1fr}
  .pn.nx{text-align:left}
}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr}
  .drum-box{order:-1}
  #drum{max-width:280px}
  .era{grid-template-columns:1fr;gap:16px;padding-block:44px}
  .era-side{position:static;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
  .era-range{font-size:1.25rem;margin-top:0}
  .era-cap{margin-top:0;flex-basis:100%}
  .events a.evl{grid-template-columns:1fr;gap:2px;padding:10px 4px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
html{scroll-behavior:smooth}