:root{
  --ground:#EFE7D2; --plate:#E7DCC2; --rail:#DCCFAE; --sunk:#D2C39E;
  --ink:#2A2620; --soft:#5E5646; --faint:#8B8168; --hair:#C0B291; --edge:#B7A683;
  --iron:#4A4438; --party:#2F6C96; --cinder:#9A4E2A; --moss:#5B6B3A; --gold:#8A6A22;
  --violet:#6B4A82; --rust:#A3562E; --slate:#4C5A66;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#15130E; --plate:#1E1B14; --rail:#191710; --sunk:#131109;
    --ink:#E8DFC8; --soft:#9A917C; --faint:#6C6553; --hair:#37321F; --edge:#453F31;
    --iron:#C7BDA2; --party:#63A8D6; --cinder:#C67A4E; --moss:#8FA063; --gold:#C6A455;
    --violet:#A88BC0; --rust:#CE8354; --slate:#8FA3B3;
  }
}
:root[data-theme="dark"]{
  --ground:#15130E; --plate:#1E1B14; --rail:#191710; --sunk:#131109;
  --ink:#E8DFC8; --soft:#9A917C; --faint:#6C6553; --hair:#37321F; --edge:#453F31;
  --iron:#C7BDA2; --party:#63A8D6; --cinder:#C67A4E; --moss:#8FA063; --gold:#C6A455;
  --violet:#A88BC0; --rust:#CE8354; --slate:#8FA3B3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:"Source Sans 3",system-ui,sans-serif; font-size:16.5px; line-height:1.6}
.wrap{max-width:1180px; margin:0 auto; padding:0 clamp(.9rem,2.5vw,2rem) 5rem}
.wrap.wide{max-width:1420px}

/* ---- masthead and the tab strip across every page ---- */
nav.site{border-bottom:1px solid var(--hair); background:var(--rail); position:sticky; top:0; z-index:20}
nav.site .inner{max-width:1420px; margin:0 auto; display:flex; align-items:center; gap:.15rem;
  padding:0 clamp(.6rem,2vw,1.4rem); overflow-x:auto; scrollbar-width:thin}
nav.site .brand{font-family:Spectral,Georgia,serif; font-weight:600; font-size:.95rem;
  padding:.55rem .8rem .55rem 0; margin-right:.4rem; white-space:nowrap; color:var(--ink);
  text-decoration:none; border-right:1px solid var(--edge)}
nav.site a.tab{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.68rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--soft); text-decoration:none; padding:.7rem .72rem;
  white-space:nowrap; border-bottom:2px solid transparent}
nav.site a.tab:hover{color:var(--ink); background:var(--plate)}
nav.site a.tab[aria-current="page"]{color:var(--ink); border-bottom-color:var(--cinder)}
nav.site a.tab:focus-visible{outline:2px solid var(--party); outline-offset:-2px}

header.masthead{padding:clamp(1.6rem,4vw,3rem) 0 1.2rem}
.eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint)}
h1{font-family:Spectral,Georgia,serif; font-weight:600; font-size:clamp(2rem,5.4vw,3.2rem);
  line-height:1.04; margin:.2rem 0 0; letter-spacing:-.015em; text-wrap:balance}
.standfirst{max-width:66ch; color:var(--soft); margin:.7rem 0 0; font-size:1.06rem}

nav.sections{position:sticky; top:2.6rem; z-index:9; background:var(--ground);
  border-bottom:1px solid var(--hair); margin-bottom:2rem; overflow-x:auto}
nav.sections ul{display:flex; gap:.2rem; list-style:none; margin:0; padding:.5rem 0}
nav.sections a{font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--soft); text-decoration:none; padding:.45rem .7rem;
  border:1px solid transparent; border-radius:2px; white-space:nowrap}
nav.sections a:hover{color:var(--ink); border-color:var(--edge)}
nav.sections a:focus-visible{outline:2px solid var(--party); outline-offset:2px}

section{scroll-margin-top:6rem; margin-bottom:3.2rem}
h2{font-family:Spectral,Georgia,serif; font-weight:600; font-size:clamp(1.5rem,3vw,2rem);
  margin:0 0 .3rem; text-wrap:balance; letter-spacing:-.01em}
h3{font-family:Spectral,Georgia,serif; font-weight:600; font-size:1.24rem; margin:1.8rem 0 .5rem}
.lede{color:var(--soft); max-width:68ch; margin:0 0 1.3rem}
h3.country{font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cinder); margin:2rem 0 .8rem;
  padding-bottom:.4rem; border-bottom:1px solid var(--hair)}
p{margin:0 0 .85rem; max-width:70ch}
a{color:var(--party)}

/* ---- figures, cards, tags ---- */
.figures{display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.6rem; margin-bottom:1.6rem}
.fig{border:1px solid var(--edge); background:var(--plate); border-radius:2px; padding:.75rem .85rem}
.fig b{display:block; font-family:Spectral,serif; font-size:1.75rem; line-height:1;
  font-variant-numeric:tabular-nums}
.fig span{display:block; font-size:.76rem; color:var(--faint); margin-top:.3rem; line-height:1.35}

.places,.quests,.cards{display:grid; gap:.75rem}
.places{grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}
.quests{grid-template-columns:repeat(auto-fill,minmax(23rem,1fr))}
.cards{grid-template-columns:repeat(auto-fill,minmax(21rem,1fr))}
.cards.tight{grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr))}
.cards.wide{grid-template-columns:repeat(auto-fill,minmax(28rem,1fr))}
.place,.quest,.card{border:1px solid var(--edge); background:var(--plate); border-radius:2px; padding:.85rem .9rem}
.place header,.quest header,.card header{display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; margin-bottom:.35rem}
.place h4,.quest h4,.card h4{font-family:Spectral,serif; font-weight:600; font-size:1.12rem; margin:0}
.meta{font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--faint)}
.place p,.quest p,.card p{font-size:.93rem; color:var(--soft); margin:0}
.card p + p{margin-top:.5rem}
.tags{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.6rem}
.tag{font-family:"JetBrains Mono",monospace; font-size:.6rem; letter-spacing:.09em;
  text-transform:uppercase; padding:.14rem .42rem; border-radius:2px; border:1px solid var(--edge); color:var(--faint)}
.t-road{border-color:var(--party); color:var(--party)}
.t-set{background:var(--gold); border-color:var(--gold); color:var(--plate)}
.t-quest{border-color:var(--cinder); color:var(--cinder)}
.t-camp{border-color:var(--moss); color:var(--moss)}
.t-on{background:var(--iron); border-color:var(--iron); color:var(--plate)}
.quest ol{margin:.6rem 0 0; padding-left:1.1rem; font-size:.88rem; color:var(--soft)}
.quest ol li{margin-bottom:.3rem}
.card ul{margin:.5rem 0 0; padding-left:1.05rem; font-size:.9rem; color:var(--soft)}
.card li{margin-bottom:.32rem}
.dot{width:.55rem; height:.55rem; border-radius:50%; flex:0 0 auto; display:inline-block}

/* ---- controls ---- */
.sheet{border:1px solid var(--edge); background:var(--plate); border-radius:2px; overflow:hidden}
.bar{display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; padding:.6rem .75rem;
  border-bottom:1px solid var(--edge); background:var(--rail)}
.bar .sep{width:1px; height:1.3rem; background:var(--edge)}
.bar label{font-family:"JetBrains Mono",monospace; font-size:.63rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint)}
button{font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink); background:transparent; border:1px solid var(--edge); border-radius:2px;
  padding:.4rem .7rem; cursor:pointer}
button:hover{border-color:var(--iron)}
button[aria-pressed="true"]{background:var(--iron); color:var(--plate); border-color:var(--iron)}
button:focus-visible{outline:2px solid var(--party); outline-offset:2px}
input[type=search],select{font-family:"Source Sans 3",sans-serif; font-size:.85rem; color:var(--ink);
  background:var(--ground); border:1px solid var(--edge); border-radius:2px; padding:.36rem .55rem}
input[type=search]{min-width:13rem}
.count{font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint); margin-left:auto}
.foot{padding:.5rem .8rem; border-top:1px solid var(--edge); color:var(--faint);
  font-family:"JetBrains Mono",monospace; font-size:.68rem; letter-spacing:.05em}

/* ---- tables ---- */
table{border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; font-size:.92rem}
th,td{text-align:right; padding:.42rem .7rem; border-bottom:1px solid var(--hair); vertical-align:top}
th:first-child,td:first-child{text-align:left}
td.l,th.l{text-align:left}
thead th{font-family:"JetBrains Mono",monospace; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); font-weight:500; position:sticky; top:0;
  background:var(--ground)}
tbody tr:hover{background:var(--plate)}
.scroll{overflow-x:auto}
.scroll.tall{max-height:34rem; overflow-y:auto}

/* ---- skill trees ---- */
.treepick{display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:1rem}
.treepick button{font-size:.68rem}
.treewrap{background:var(--sunk); overflow-x:auto}
svg.tree{display:block; width:100%; min-width:760px; height:auto}
.tlink{stroke:var(--edge); stroke-width:1.6; fill:none}
.tlink.hi{stroke:var(--cinder); stroke-width:2.6}
.tband{fill:var(--iron); opacity:.07}
.tbranch{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em;
  fill:var(--faint); text-transform:uppercase}
.ttier{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.1em; fill:var(--faint)}
.tnode{cursor:pointer}
.tnode rect{fill:var(--plate); stroke:var(--edge); stroke-width:1.4; rx:2}
.tnode.Active rect{stroke:var(--cinder); stroke-width:2}
.tnode.Passive rect{stroke:var(--moss)}
.tnode.Amplifier rect{stroke:var(--party); stroke-dasharray:3 2}
.tnode.Keystone rect{stroke:var(--gold); stroke-width:2.4; fill:var(--rail)}
.tnode.Capstone rect{fill:var(--gold); stroke:var(--gold)}
.tnode.sel rect{stroke:var(--ink); stroke-width:3}
.tlabel{font-family:"Source Sans 3",sans-serif; font-size:11.5px; fill:var(--ink); pointer-events:none}
.tlabel.sub{font-size:9.5px; fill:var(--faint); font-family:"JetBrains Mono",monospace; letter-spacing:.06em}
.tnode.Capstone .tlabel{fill:var(--plate)}
.detail{border-top:1px solid var(--edge); padding:.9rem 1rem; background:var(--plate); min-height:8rem}
.detail h4{font-family:Spectral,serif; font-size:1.2rem; margin:0 0 .2rem}
.detail .stats{display:flex; flex-wrap:wrap; gap:.9rem; margin:.55rem 0}
.detail .stats div{font-size:.82rem}
.detail .stats b{display:block; font-family:"JetBrains Mono",monospace; font-size:.62rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:500}
.legend{display:flex; flex-wrap:wrap; gap:.9rem; font-size:.75rem; color:var(--faint); margin:.6rem 0 0}
.legend i{display:inline-block; width:.85rem; height:.6rem; border:2px solid; margin-right:.3rem;
  vertical-align:middle; font-style:normal}

/* ---- ability / item grids ---- */
.rowlist{display:grid; gap:.4rem}
.row{display:grid; grid-template-columns:2.4rem 1fr auto; gap:.7rem; align-items:start;
  border:1px solid var(--edge); background:var(--plate); border-radius:2px; padding:.55rem .7rem}
.row .ico{width:2.4rem; height:2.4rem; border:1px solid var(--hair); border-radius:2px;
  background:var(--sunk); object-fit:cover; image-rendering:auto}
.row h4{font-family:Spectral,serif; font-size:1.02rem; margin:0; font-weight:600}
.row .sub{font-size:.85rem; color:var(--soft); margin:.1rem 0 0}
.row .nums{display:flex; gap:.55rem; flex-wrap:wrap; justify-content:flex-end; text-align:right}
.row .nums span{font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.06em;
  color:var(--faint); text-transform:uppercase; white-space:nowrap}
.row .nums span b{display:block; font-family:Spectral,serif; font-size:1.05rem; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:0}
.fx{margin:.45rem 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.3rem}
.fx li{font-family:"JetBrains Mono",monospace; font-size:.63rem; letter-spacing:.05em;
  border:1px solid var(--hair); border-radius:2px; padding:.1rem .38rem; color:var(--soft)}
.fx li.dmg{border-color:var(--cinder); color:var(--cinder)}
.fx li.heal{border-color:var(--moss); color:var(--moss)}
.fx li.status{border-color:var(--violet); color:var(--violet)}
.fx li.surface{border-color:var(--slate); color:var(--slate)}

.itemgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr)); gap:.5rem}
.item{border:1px solid var(--edge); background:var(--plate); border-radius:2px; padding:.5rem;
  display:flex; gap:.55rem; align-items:flex-start}
.item img{width:3rem; height:3rem; border:1px solid var(--hair); border-radius:2px; background:var(--sunk)}
.item .nm{font-family:Spectral,serif; font-size:.94rem; line-height:1.2; font-weight:600}
.item .mt{font-family:"JetBrains Mono",monospace; font-size:.6rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint); margin-top:.2rem; display:block}
.r-Common{border-left:3px solid var(--faint)}
.r-Uncommon{border-left:3px solid var(--moss)}
.r-Rare{border-left:3px solid var(--party)}
.r-Epic{border-left:3px solid var(--violet)}
.r-Legendary{border-left:3px solid var(--gold)}
.r-Unique{border-left:3px solid var(--rust)}

/* ---- misc ---- */
.shots{display:grid; gap:1.1rem}
.shots figure{margin:0}
.shots img{display:block; width:100%; height:auto; border:1px solid var(--edge); border-radius:2px}
.shots figcaption{font-size:.86rem; color:var(--soft); margin-top:.45rem; max-width:70ch}
.status{display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:.75rem}
.hub{display:grid; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); gap:.65rem; margin:1.4rem 0 0}
.hub a{display:block; border:1px solid var(--edge); background:var(--plate); border-radius:2px;
  padding:.8rem .9rem; text-decoration:none; color:var(--ink)}
.hub a:hover{border-color:var(--iron); background:var(--rail)}
.hub a b{font-family:Spectral,serif; font-size:1.08rem; display:block}
.hub a span{font-size:.85rem; color:var(--soft); display:block; margin-top:.25rem}
.note{border-left:3px solid var(--edge); padding:.1rem 0 .1rem .8rem; color:var(--soft);
  font-size:.9rem; margin:.9rem 0; max-width:74ch}
.iconstrip{display:flex; flex-wrap:wrap; gap:.55rem; margin:.6rem 0 0}
.iconstrip figure{margin:0; width:4.2rem; text-align:center}
.iconstrip img{width:3rem; height:3rem; border:1px solid var(--hair); border-radius:2px; background:var(--plate)}
.iconstrip figcaption{font-family:"JetBrains Mono",monospace; font-size:.56rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--faint); margin-top:.2rem; line-height:1.25}
.portraits{display:grid; grid-template-columns:repeat(auto-fill,minmax(6rem,1fr)); gap:.4rem}
.portraits img{width:100%; height:auto; border:1px solid var(--edge); border-radius:2px; display:block}
footer{border-top:1px solid var(--hair); padding-top:1.2rem; margin-top:2rem; color:var(--faint); font-size:.84rem}
code{font-family:"JetBrains Mono",monospace; font-size:.86em}
.hide{display:none !important}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; scroll-behavior:auto} }
@media print{ nav.site,nav.sections{display:none} }