/* Shadowmere Tales Wiki (session 87): shared stylesheet. Same paper / brass look as the Bestiary and Lore pages. */
@import url("../../vendor/fonts/bestiary-fonts.css");
:root{
  --paper:#e7e1d3; --card:#f0ebde; --ink:#23241d; --ink-soft:#4c4d42; --line:#c7bfa9; --line-soft:#d5cdb8;
  --brass:#8a6a24; --teal:#2f5d5b; --shade:rgba(35,36,29,.06); --note:#efe6c9; --maxw:1100px;
}
:root[data-theme="dark"]{
  --paper:#191a16; --card:#20221c; --ink:#e9e4d4; --ink-soft:#a7a394; --line:#3a3c31; --line-soft:#2c2e25;
  --brass:#c8a24e; --teal:#6fb0a6; --shade:rgba(233,228,212,.05); --note:#2a2819;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#191a16; --card:#20221c; --ink:#e9e4d4; --ink-soft:#a7a394; --line:#3a3c31; --line-soft:#2c2e25;
    --brass:#c8a24e; --teal:#6fb0a6; --shade:rgba(233,228,212,.05); --note:#2a2819;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:"Spectral",Georgia,serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px 64px}
a{color:var(--teal);text-underline-offset:2px}
h1,h2,h3{font-family:"Cinzel",Georgia,serif;font-weight:600;line-height:1.2;margin:0}
h1{font-size:clamp(30px,5vw,48px);margin:14px 0 6px}
h2{font-size:24px;margin:30px 0 10px;border-bottom:1px solid var(--line);padding-bottom:4px}
h3{font-size:19px;margin:0 0 6px}
header{border-bottom:2px solid var(--ink);padding:18px 0 14px;margin-bottom:6px}
.topline{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.crest{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:600;text-decoration:none}
.tools{display:flex;gap:8px;align-items:center;font-size:14px}
.tools button{font:inherit;font-size:13px;cursor:pointer;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:3px 10px}
nav{display:flex;flex-wrap:wrap;gap:4px 14px;margin:12px 0 4px;font-size:15px}
nav a{text-decoration:none;color:var(--ink-soft);padding:3px 0;border-bottom:2px solid transparent}
nav a:hover{color:var(--ink)} nav a.on{color:var(--ink);border-bottom-color:var(--brass);font-weight:600}
.dek{font-size:18px;color:var(--ink-soft);font-style:italic;margin:4px 0 0;max-width:70ch}
main{padding-top:10px}
.note{background:var(--note);border:1px solid var(--line);border-left:4px solid var(--brass);padding:10px 14px;margin:14px 0;border-radius:3px}
.caveat{background:var(--note);border:1px dashed var(--brass);color:var(--ink);padding:8px 14px;margin:8px 0 6px;border-radius:3px;font-size:15px}
.blurb{margin:2px 0 8px;color:var(--ink-soft)}
.gloss dt{font-weight:700;margin-top:12px;color:var(--brass)} .gloss dd{margin:2px 0 0 14px}
.small{font-size:14px;color:var(--ink-soft)} .spec{font-size:14px;color:var(--ink-soft);margin:4px 0}
.flavour{font-style:italic;color:var(--ink-soft);margin:0 0 4px}
.filter{margin:14px 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.filter input{font:inherit;font-size:15px;padding:6px 10px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--ink);min-width:240px;max-width:100%}
.chip{font:inherit;font-size:13px;cursor:pointer;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:2px 11px}
.chip.on{background:var(--brass);color:#fff;border-color:var(--brass)}
table{border-collapse:collapse;width:100%}
table.data{margin:8px 0 18px;font-size:15px}
.data th,.data td{padding:6px 9px;border-bottom:1px solid var(--line-soft);vertical-align:top;text-align:left}
.data thead th{border-bottom:2px solid var(--ink);font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);position:sticky;top:0;background:var(--paper)}
.data tbody tr:nth-child(even){background:var(--shade)}
.num{text-align:right !important;font-variant-numeric:tabular-nums;white-space:nowrap}
.nm{font-weight:600}
.desc{min-width:260px;font-size:14px}
table.kv{width:auto;margin:6px 0 12px;font-size:15px} .kv th{text-align:left;font-weight:500;color:var(--ink-soft);padding:3px 18px 3px 0} .kv td{padding:3px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:14px 18px;margin:16px 0;box-shadow:0 1px 0 rgba(255,255,255,.4)}
.card h2{margin-top:0;border:0}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:6px 28px}
.scroll{overflow-x:auto}
.racehead{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;margin-top:10px}
/* The race art is dark line-art on a transparent background, so it always sits on a parchment tile (as in the game), in light and dark themes. */
.portrait{width:210px;max-width:100%;height:auto;border:1px solid #996515;border-radius:4px;background:#d2c3a1}
.arch{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0}
.specials{max-width:68ch}
.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:16px 0}
.home-grid a.tile{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:12px 16px}
.home-grid a.tile:hover{border-color:var(--brass)} .tile strong{display:block;font-family:"Cinzel",serif;font-size:18px;color:var(--brass)} .tile span{font-size:14px;color:var(--ink-soft)}
footer{margin-top:40px;border-top:1px solid var(--line);padding-top:10px} .src{font-size:13px;color:var(--ink-soft);margin:4px 0}
code{font-family:"IBM Plex Mono",monospace;font-size:.9em}
.hidden{display:none !important}
@media (max-width:640px){ table.data{display:block;overflow-x:auto} body{font-size:16px} .data{font-size:14px} .data th,.data td{padding:5px 6px} .portrait{width:150px} }

/* Floating back-to-top button (session 87), shown once the page is scrolled. */
.totop{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;border:1px solid var(--brass);background:var(--card);color:var(--brass);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3);opacity:0;visibility:hidden;transition:opacity .2s;z-index:50}
.totop.show{opacity:.92;visibility:visible} .totop:hover{background:var(--brass);color:#fff}