*,*::before,*::after{box-sizing:border-box}
:root{
 --bg:#17120f; --panel:#211a15; --panel2:#2a211a; --ink:#f0e6d8; --mut:#a2917f;
 --line:#3a2e25; --accent:#d9702f; --accent2:#e8a04e;
 --amber:#e0a340; --teal:#4aa3a0; --violet:#9b7fd4; --slate:#8896a8;
 --sand:#c9a670; --rose:#d47f8c; --sage:#85a878; --sienna:#c26a45; --green:#78a86b;
 --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
 --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.35);
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.68 var(--sans);overflow-x:hidden}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");background-size:160px 160px;mix-blend-mode:overlay}
.wrap{max-width:960px;margin:0 auto;padding:30px 18px 70px;position:relative;z-index:2}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;z-index:99;background:var(--accent);color:#160f0b;padding:9px 15px;
 border-radius:8px;font-weight:700}
.ico{width:1em;height:1em;fill:currentColor;display:inline-block;vertical-align:-.12em}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
 padding:11px 20px;background:rgba(23,18,15,.9);backdrop-filter:blur(11px);
 border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:700;
 font-size:19px;letter-spacing:.2px;text-decoration:none;color:var(--ink)}
.brandico{width:20px;height:20px;fill:var(--accent)}
.brand .mark{color:var(--accent)}
.site-nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
.site-nav a{padding:7px 12px;border-radius:8px;text-decoration:none;color:var(--mut);
 font-size:14px;font-weight:600;white-space:nowrap}
.site-nav a:hover{background:var(--panel2);color:var(--ink)}
.site-nav a.on{background:var(--accent);color:#1a1108}
.burger{display:none;margin-left:auto;font-size:19px;background:none;border:1px solid var(--line);
 border-radius:8px;color:var(--ink);padding:4px 12px;cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line)}
.art-tall{display:none}
.hero-poster::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(100deg,rgba(30,6,8,.34) 0%,rgba(30,6,8,.14) 34%,rgba(30,6,8,0) 58%)}
.hero-poster .eyebrow{background:#141010;border-color:rgba(242,176,30,.55);color:#f2b01e}
.hero-poster h1{color:#fff6e8;text-shadow:0 2px 4px rgba(50,4,6,.55),0 6px 30px rgba(50,4,6,.65)}
.hero-poster .h1-sub{color:#f2b01e}
.hero-poster .lead{color:#ffeada;text-shadow:0 1px 3px rgba(50,4,6,.6),0 4px 18px rgba(50,4,6,.55)}
.hero-poster .btn-primary{background:#f2b01e;border-color:#f2b01e;color:#181008}
.hero-poster .btn-primary:hover{background:#ffc94b;border-color:#ffc94b}
.hero-poster .btn{background:rgba(20,16,16,.72);border-color:rgba(255,230,200,.32);color:#fff3e4}
.hero-poster .btn:hover{border-color:#f2b01e;color:#fff}
.hero-poster .statbar{border-top-color:rgba(255,225,190,.3)}
.hero-poster .statbar strong{color:#f2b01e}
.hero-poster .statbar span{color:#ffe2c8}
.hero-art{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero-in{max-width:960px;margin:0 auto;padding:74px 18px 44px;position:relative;z-index:2}
.eyebrow{display:inline-flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:1.5px;
 font-size:11px;font-weight:800;color:#ffd9a8;margin:0 0 12px;
 background:rgba(20,12,8,.5);border:1px solid rgba(255,210,150,.25);padding:5px 12px;border-radius:99px}
.eyeico{width:13px;height:13px;fill:currentColor}
h1{font-family:var(--serif);font-size:clamp(30px,6.2vw,54px);line-height:1.06;margin:0 0 16px;
 letter-spacing:-.5px;text-shadow:0 3px 22px rgba(0,0,0,.6);overflow-wrap:break-word}
.h1-sub{color:var(--accent2)}
.hero .lead{color:#e8dccb;max-width:54ch;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.lead{font-size:clamp(16px,2.3vw,18.5px);color:var(--mut);margin:0 0 24px;max-width:64ch}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.btn{display:inline-block;padding:11px 19px;border-radius:10px;border:1px solid var(--line);
 background:rgba(33,26,21,.85);color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:700}
.btn:hover{border-color:var(--accent);color:#fff}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#1a1108}
.btn-primary:hover{background:var(--accent2);border-color:var(--accent2);color:#1a1108}
.statbar{list-style:none;display:flex;flex-wrap:wrap;gap:26px;padding:16px 0 0;margin:0;
 border-top:1px solid rgba(255,220,180,.18)}
.statbar strong{display:block;font-family:var(--serif);font-size:26px;color:var(--accent2);line-height:1.1}
.statbar span{font-size:12px;text-transform:uppercase;letter-spacing:.9px;color:#c9b8a4}

/* ---------- page banner ---------- */
.pbanner{position:relative;height:120px;overflow:hidden;background:var(--panel);
 border-bottom:1px solid var(--line);color:var(--accent)}
.pbanner-art{position:absolute;inset:0;width:100%;height:100%}
.pbanner-ico{position:absolute;right:6%;top:50%;transform:translateY(-50%);
 width:82px;height:82px;fill:currentColor;opacity:.3}
.tone-amber{color:var(--amber)}.tone-teal{color:var(--teal)}.tone-violet{color:var(--violet)}
.tone-slate{color:var(--slate)}.tone-sand{color:var(--sand)}.tone-rose{color:var(--rose)}
.tone-sage{color:var(--sage)}.tone-sienna{color:var(--sienna)}.tone-orange{color:var(--accent)}
.tone-green{color:var(--green)}
.wrap h1{font-size:clamp(27px,5vw,41px);text-shadow:none;margin:.1em 0 .35em}

h2{font-family:var(--serif);font-size:clamp(20px,3.6vw,26px);margin:2.2em 0 .55em;letter-spacing:-.2px}
h3{font-size:16.5px;margin:1.6em 0 .4em;color:var(--accent2)}
.card h3{margin:0 0 6px;color:var(--ink);font-size:16px}
p{max-width:72ch;overflow-wrap:break-word}
a{color:var(--accent2)}
.muted{color:var(--mut);font-size:13.5px}
.hint{color:var(--mut);font-size:13.5px;margin:0 0 10px}

/* ---------- tabs ---------- */
.tablist{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--line);margin:0 0 22px}
.tablist button{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;
 padding:10px 15px;font-size:14.5px;font-weight:700;color:var(--mut);cursor:pointer;white-space:nowrap;
 font-family:var(--sans)}
.tablist button:hover{color:var(--ink)}
.tablist button[aria-selected="true"]{color:var(--accent2);border-bottom-color:var(--accent)}
.panel[hidden]{display:none}

/* ---------- tracker ---------- */
.tracker{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:15px 17px;
 margin:0 0 24px;box-shadow:var(--shadow)}
.tbar{height:9px;border-radius:99px;background:#150f0c;overflow:hidden;border:1px solid var(--line)}
.tfill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));
 border-radius:99px;transition:width .3s ease}
.trow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;
 font-size:14px;color:var(--mut);flex-wrap:wrap}
.trow strong{color:var(--accent2);font-size:16px}
.reset{background:none;border:1px solid var(--line);color:var(--mut);border-radius:8px;
 padding:5px 12px;font-size:13px;cursor:pointer;font-family:var(--sans)}
.reset:hover{color:var(--ink);border-color:var(--mut)}

/* ---------- checklist ---------- */
.items{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.item label{display:flex;align-items:flex-start;gap:13px;background:var(--panel);
 border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;
 transition:border-color .15s,background .15s,transform .12s}
.item label:hover{border-color:var(--accent);background:var(--panel2)}
.item input{margin:3px 0 0;width:19px;height:19px;flex:0 0 auto;accent-color:var(--accent);cursor:pointer}
.itxt{flex:1 1 auto;min-width:0}
.iname{display:block;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.iloc{display:block;color:var(--mut);font-size:14px;margin-top:3px;overflow-wrap:anywhere}
.item.done label{background:#1b2418;border-color:#3d5136}
.item.done .iname{text-decoration:line-through;opacity:.55}
.badge{flex:0 0 auto;align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.5px;
 text-transform:uppercase;padding:5px 10px;border-radius:99px;white-space:nowrap;border:1px solid}
.l-lake{background:#12283f;color:#8fc4f0;border-color:#245073}
.l-river{background:#123028;color:#84d6b4;border-color:#215744}
.l-swamp{background:#2a1f3d;color:#c0a8ee;border-color:#493670}
.l-region{background:#33270f;color:#e8c37a;border-color:#5c4718}
.l-slate{background:#1f2833;color:#a8bcd0;border-color:#3a4a5c}
.l-req{background:#3a1717;color:#f0a8a8;border-color:#642a2a}
.l-part{background:#1c2340;color:#adb9ee;border-color:#333f6e}

/* ---------- cards ---------- */
.grid{display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(218px,1fr))}
.card{position:relative;display:block;background:var(--panel);border:1px solid var(--line);
 border-radius:14px;padding:18px;text-decoration:none;color:inherit;box-shadow:var(--shadow);
 overflow:hidden;transition:transform .16s,border-color .16s}
a.card:hover{transform:translateY(-3px);border-color:currentColor}
.card-ico{position:absolute;right:-14px;bottom:-14px;opacity:.13}
.card-ico .ico{width:86px;height:86px}
.card .num{position:relative;font-family:var(--serif);font-size:32px;font-weight:700;
 color:currentColor;line-height:1;display:block;margin-bottom:2px}
.card h3,.card p,.card .tag{position:relative}
.card p{font-size:13.5px;color:var(--mut);margin:0 0 12px;max-width:none}
.card .tag{font-size:12.5px;font-weight:800;color:currentColor;letter-spacing:.3px}
.card-soon{opacity:.55}.card-soon .tag{color:var(--mut)}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
 border-radius:12px;background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:600px;font-size:14.5px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
th{background:#1a1410;font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;
 color:var(--mut);white-space:nowrap}
.sortable th{cursor:pointer;user-select:none}
.sortable th:hover{color:var(--accent2)}
.sortable th.asc::after{content:"\25B2";margin-left:5px;color:var(--accent)}
.sortable th.desc::after{content:"\25BC";margin-left:5px;color:var(--accent)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panel2)}
td.c,th.c{text-align:center}
.tset{display:flex;align-items:center;gap:9px}
.rowico{width:19px;height:19px;fill:currentColor;flex:0 0 auto}
.pill{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
 padding:4px 10px;border-radius:99px;background:#241c16;color:var(--mut);border:1px solid var(--line)}
.pill-live{background:#1d2b1a;color:#9fd18f;border-color:#3a5432}

/* ---------- misc ---------- */
.notes{padding-left:21px;margin:0}.notes li{margin:8px 0;max-width:72ch}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:14px 0 0}
.chips li{background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:6px 14px;
 font-size:13.5px;color:var(--mut)}
.filters{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 15px}
.filters button{background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:7px 14px;
 font-size:13.5px;font-weight:600;color:var(--mut);cursor:pointer;font-family:var(--sans)}
.filters button:hover{border-color:var(--accent);color:var(--ink)}
.filters button.on{background:var(--accent);border-color:var(--accent);color:#1a1108}
.callout{border-left:3px solid var(--accent);background:var(--panel);border-radius:0 11px 11px 0;
 padding:14px 17px;margin:0 0 24px;font-size:14.5px}
.callout p{margin:0}
.site-foot{border-top:1px solid var(--line);background:#130e0b;position:relative;z-index:2}
.foot-in{max-width:960px;margin:0 auto;padding:26px 18px 46px}
.site-foot p{margin:0 0 8px;font-size:13.5px;color:var(--mut)}
.foot-nav{display:flex;flex-wrap:wrap;gap:5px 16px;margin:0 0 16px;padding:0 0 16px;
 border-bottom:1px solid var(--line)}
.foot-nav a{font-size:13.5px;font-weight:600;color:var(--mut);text-decoration:none}
.foot-nav a:hover{color:var(--accent2)}
.toggle-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.toggle-row .hint{margin:0}
#bond-toggle[data-on="true"]{background:var(--panel2);border-color:var(--accent);color:var(--accent2)}
td.stat.bonded,td.total.bonded{color:var(--accent2)}

@media (max-width:700px){
 .wrap{padding:22px 15px 56px}
 .hero-in{padding:44px 15px 32px}
 .burger{display:block}
 .site-nav{display:none;width:100%;flex-direction:column;margin-left:0;gap:2px}
 .site-nav.open{display:flex}
 .site-nav a{padding:11px 12px}
 .item label{padding:13px 14px;flex-wrap:wrap}
 .badge{margin-left:32px}
 .cta .btn{flex:1 1 100%;text-align:center}
 .filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:4px;-ms-overflow-style:none}
 .filters::-webkit-scrollbar{display:none}
 .filters button{flex:0 0 auto}
 .foot-nav{gap:4px 12px}
 .toggle-row{gap:9px}
 .toggle-row .btn{width:100%;text-align:center}
 .art-wide{display:none}
 .art-tall{display:block}
 .hero-poster::before{background:linear-gradient(180deg,rgba(30,6,8,.42) 0%,rgba(30,6,8,.2) 42%,rgba(30,6,8,0) 72%)}
 .statbar{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
 .statbar strong{font-size:20px}
 .statbar span{font-size:10px;letter-spacing:.5px;line-height:1.3;display:block}
 .tablist{overflow-x:auto;flex-wrap:nowrap}
 .pbanner{height:88px}.pbanner-ico{width:58px;height:58px}
 table{min-width:540px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}