/* =====================================================================
   v4 · Shop Directory, rooms, lore objects, catalog records in books
   ===================================================================== */
:root{--hand:"Homemade Apple","Segoe Script","Bradley Hand",cursive;--leather:#3b1f14;--leather-dk:#24120b}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip-link{position:fixed;left:12px;top:-60px;z-index:200;padding:8px 14px;background:#2a1a08;color:var(--brass-hi);border:1px solid var(--brass);border-radius:4px;text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}
body.in-room{overflow:hidden}
.brass-btn.small,.ghost-btn.small{margin-top:0;padding:7px 14px;font-size:11px;letter-spacing:.14em}

/* ---------- lore objects in the shop ---------- */
.wall-hot{position:absolute;inset:-3% -3% 0;z-index:1;pointer-events:none}
.wall-hot .gauge{pointer-events:auto;border:0;padding:0;cursor:pointer;transition:transform .25s,box-shadow .25s}
.lore-obj{cursor:pointer}
.lore-obj:hover{filter:brightness(1.18)}
.wall-hot .gauge:hover,.wall-hot .gauge:focus-visible{transform:scale(1.1);box-shadow:0 4px 10px #000,0 0 22px rgba(255,190,100,.6)}
.bell-btn{position:absolute;z-index:7;right:20%;bottom:calc(15% - 2px);top:auto;border:0;padding:0;transition:transform .2s}
.bell-btn:hover,.bell-btn:focus-visible{transform:rotate(-8deg) scale(1.08);box-shadow:0 4px 8px #000,0 0 18px rgba(255,200,120,.6)}
.shroom-patch{position:absolute;z-index:7;left:3%;bottom:15%;width:46px;height:28px;border:0;background:none;padding:0}
.shroom-patch span{position:absolute;bottom:0;width:5px;height:10px;background:linear-gradient(#e2f8e6,#88c9b0);border-radius:2px;animation:shroomPulse 4s ease-in-out infinite}
.shroom-patch span::before{content:"";position:absolute;left:-6px;top:-7px;width:17px;height:9px;border-radius:10px 10px 3px 3px;background:radial-gradient(ellipse at 50% 30%,#f1fbe0,#45d0b6 55%,#177a76);box-shadow:0 0 10px 3px rgba(72,212,182,.65)}
.shroom-patch span:nth-child(1){left:8px}.shroom-patch span:nth-child(2){left:22px;transform:scale(.75);animation-delay:-1.4s}.shroom-patch span:nth-child(3){left:34px;transform:scale(.55);animation-delay:-2.6s}
.shroom-patch:hover span::before,.shroom-patch:focus-visible span::before{box-shadow:0 0 16px 6px rgba(72,212,182,.9)}
button.trinket-rook{border:0;padding:0;cursor:pointer;transition:transform .2s,filter .2s}
button.trinket-rook:hover,button.trinket-rook:focus-visible{transform:translateY(-6px);filter:brightness(1.25) drop-shadow(0 0 8px rgba(255,190,100,.7))}

/* ---------- Shop Directory ---------- */
.directory{position:fixed;top:14px;right:14px;z-index:95}
.dir-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 14px 8px 10px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#2a1a08;
  border:1px solid #5a3b16;border-radius:22px;background:linear-gradient(#fff0c0,#e2b860 40%,#b8832f 62%,#e7c374);
  box-shadow:0 0 0 2px #2a1a08,0 0 0 3px #8a6a3a,0 8px 20px rgba(0,0,0,.7),inset 0 1px 0 #fff6d8;transition:transform .2s,box-shadow .2s}
.dir-toggle:hover{transform:translateY(-1px);box-shadow:0 0 0 2px #2a1a08,0 0 0 3px #c9973f,0 10px 24px rgba(0,0,0,.7),0 0 24px rgba(255,170,70,.4)}
.dir-gear{display:inline-block;font-size:17px;line-height:1;transition:transform .6s}
.menu-open .dir-gear{transform:rotate(120deg)}
.dir-caret{transition:transform .3s}.menu-open .dir-caret{transform:rotate(180deg)}
.dir-backdrop{position:fixed;inset:0;z-index:-1;background:rgba(0,0,0,.35);opacity:0;transition:opacity .3s}
.menu-open .dir-backdrop{opacity:1}
.dir-panel{position:absolute;right:0;top:calc(100% + 12px);width:290px;max-height:calc(100vh - 90px);overflow:auto;padding:16px 12px 12px;border-radius:8px;
  background:radial-gradient(ellipse at 30% 0,rgba(255,220,160,.08),transparent 60%),repeating-linear-gradient(35deg,rgba(0,0,0,.08) 0 2px,transparent 2px 5px),linear-gradient(var(--leather),var(--leather-dk));
  border:2px solid var(--brass);box-shadow:0 0 0 2px #1a0d06,0 0 0 4px var(--brass-lo),0 24px 60px rgba(0,0,0,.85),inset 0 0 0 6px rgba(0,0,0,.25),inset 0 0 0 7px rgba(201,151,63,.35);
  transform-origin:top right;transform:scale(.92) translateY(-8px);opacity:0;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s}
.menu-open .dir-panel{transform:none;opacity:1}
.dir-panel::before,.dir-panel::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2c2,#c9973f 50%,#4a300f);top:8px}
.dir-panel::before{left:8px}.dir-panel::after{right:8px}
.dir-head{margin:0 0 10px;text-align:center;font-family:var(--deco);font-size:17px;line-height:1.1;color:var(--brass-hi)}
.dir-head small{font-family:var(--display);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim)}
.dir-panel ul{list-style:none;margin:0;padding:0}
.dir-panel li+li{border-top:1px solid rgba(201,151,63,.18)}
.dir-panel a{display:flex;align-items:center;gap:10px;padding:9px 10px;color:var(--ink);text-decoration:none;font-size:16px;border-radius:4px;transition:background .15s,color .15s,padding .15s}
.dir-panel a i{width:20px;text-align:center;font-style:normal;color:var(--brass);font-size:15px}
.dir-panel a:hover,.dir-panel a:focus-visible{background:rgba(201,151,63,.14);color:#fff3c9;padding-left:14px}
.dir-panel a.here{color:var(--brass-hi);background:rgba(201,151,63,.1)}
.dir-panel a.here::after{content:"•";margin-left:auto;color:var(--portal)}

/* ---------- rooms ---------- */
.room{position:fixed;inset:0;z-index:45;overflow-y:auto;overflow-x:hidden;opacity:0;transition:opacity .45s}
.room[hidden]{display:none}
.room.open{opacity:1}
.room-bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 0,rgba(255,170,70,.14),transparent 55%),repeating-linear-gradient(90deg,rgba(0,0,0,.3) 0 2px,transparent 2px 160px),linear-gradient(#22150c,#160d07 60%,#0c0806)}
.room[data-room=stacks] .room-bg{background:radial-gradient(ellipse at 50% 40%,rgba(255,170,70,.12),transparent 50%),repeating-linear-gradient(90deg,#120b06 0 30px,#1a1009 30px 34px,#0e0805 34px 70px),#0a0604}
.room[data-room=web] .room-bg{background:radial-gradient(ellipse at 50% 50%,rgba(79,195,255,.08),transparent 60%),linear-gradient(#1a120c,#0c0806)}
.room-inner{min-height:100%;max-width:1160px;margin:0 auto;padding:84px 4vw 60px;transform:translateY(16px);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.room.open .room-inner{transform:none}
.room-head{display:flex;flex-direction:column;align-items:center;margin-bottom:26px}
.room-back{position:absolute}
.room-plaque{text-align:center;padding:12px 34px 10px;border:2px solid var(--brass);border-radius:6px;background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.35)),repeating-linear-gradient(90deg,#3a2415 0 3px,#432a18 3px 9px,#36210f 9px 14px);
  box-shadow:0 0 0 2px #2a1a08,0 0 0 4px var(--brass-lo),0 14px 30px rgba(0,0,0,.7)}
.room-kicker{margin:0;font-family:var(--display);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim)}
.room-plaque h2{margin:.1em 0 0;font-family:var(--deco);font-size:clamp(26px,4vw,42px);background:linear-gradient(180deg,#fff3c9,#f3d388 40%,#c9973f 70%,#8a5d1f);-webkit-background-clip:text;background-clip:text;color:transparent}
.room-loading,.empty-state{text-align:center;font-style:italic;color:var(--ink-dim);padding:40px 10px}
.empty-state{border:1px dashed rgba(201,151,63,.4);border-radius:6px;background:rgba(0,0,0,.25)}
.cn{font-family:var(--display);font-size:11px;letter-spacing:.12em;color:#8a5d1f}
.ph-stamp{position:absolute;top:14px;right:14px;transform:rotate(8deg);padding:3px 10px;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#a3281b;border:2px solid #a3281b;border-radius:3px;opacity:.75}

/* catalog */
.cabinet{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:14px;border-radius:6px;margin-bottom:18px;
  background:linear-gradient(#5a3a20,#3a2415);box-shadow:inset 0 0 0 4px #2b1a0e,0 18px 40px rgba(0,0,0,.6)}
.drawer{position:relative;cursor:pointer;padding:16px 8px 10px;border-radius:3px;color:#2a1a08;border:1px solid #2b1a0e;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 3px,transparent 3px 9px),linear-gradient(#8a5d33,#6b4524);box-shadow:inset 0 2px 0 rgba(255,220,170,.2),inset 0 -6px 10px rgba(0,0,0,.3);transition:transform .25s,box-shadow .25s}
.drawer .pull{position:absolute;left:50%;bottom:8px;width:36px;height:9px;margin-left:-18px;border-radius:0 0 18px 18px;background:linear-gradient(#f3d388,#8a5d1f);box-shadow:0 2px 3px #000}
.drawer .dlabel{display:block;margin:0 auto 20px;width:max-content;max-width:100%;padding:3px 8px;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:#efe0bf;border:2px solid #c9973f;border-radius:2px;box-shadow:inset 0 0 4px rgba(0,0,0,.3)}
.drawer small{position:absolute;right:8px;top:4px;font-size:11px;color:#f1e2c4;opacity:.75}
.drawer:hover{transform:translateY(-2px)}
.drawer.pulled{transform:translateY(8px) scale(1.02);box-shadow:inset 0 2px 0 rgba(255,220,170,.3),0 14px 18px rgba(0,0,0,.7),0 0 0 2px var(--brass-hi)}
.cat-search{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.cat-search input[type=search]{width:100%;padding:12px 16px;font:inherit;font-size:18px;color:var(--paper-ink);background:linear-gradient(var(--paper),var(--paper-dk));border:2px solid var(--brass-lo);border-radius:4px;box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}
.cat-filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.cat-filters label{display:flex;align-items:center;gap:6px;font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.cat-filters select{font:inherit;font-size:14px;text-transform:none;letter-spacing:0;padding:5px 8px;color:var(--ink);background:#1a1009;border:1px solid var(--brass-lo);border-radius:3px;max-width:200px}
.cat-count{margin:6px 0 12px;font-style:italic;color:var(--ink-dim)}
.index-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.index-card{position:relative;display:flex;flex-direction:column;gap:5px;text-align:left;cursor:pointer;padding:12px 14px 12px;min-height:160px;color:var(--paper-ink);border:0;border-radius:2px;
  background:repeating-linear-gradient(transparent 0 23px,rgba(79,140,200,.22) 23px 24px) 0 44px/100% auto no-repeat,linear-gradient(#f6ecd2,#ead9b3);
  box-shadow:0 6px 14px rgba(0,0,0,.55),inset 0 3px 0 #b9382a;transition:transform .2s,box-shadow .2s}
.index-card:hover,.index-card:focus-visible{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 12px 22px rgba(0,0,0,.6),inset 0 3px 0 #b9382a,0 0 18px rgba(255,190,100,.25)}
.index-card.status-stub{background:repeating-linear-gradient(transparent 0 23px,rgba(79,140,200,.16) 23px 24px) 0 44px/100% auto no-repeat,linear-gradient(#e7dcc1,#d5c49d);opacity:.86}
.ic-top{display:flex;justify-content:space-between;align-items:center}
.ic-stamp{font-family:var(--display);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:1px 6px;border:1px solid currentColor;border-radius:2px;color:#a3281b}
.status-stub .ic-stamp{color:#7a6448}.status-final .ic-stamp{color:#8a5d1f}
.ic-title{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.2;color:#2b1d12}
.ic-title .ph{font-family:var(--serif);font-weight:400;font-size:13px;color:#7a6448}
.ic-meta{font-size:13px;font-style:italic;color:#6b4d2c}
.ic-sum{font-size:14.5px;line-height:1.45;color:#3a2a1c}
.ic-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto}
.ic-tags i{font-style:normal;font-size:11px;padding:1px 6px;border-radius:8px;background:rgba(110,74,26,.12);color:#5a4128}

/* new arrivals */
.display-table{position:relative;padding:34px 20px 50px;border-radius:12px;background:radial-gradient(ellipse at 50% 30%,rgba(255,190,110,.18),transparent 70%),repeating-linear-gradient(90deg,#5a3a20 0 120px,#4e321b 120px 122px),#4e321b;box-shadow:inset 0 0 60px rgba(0,0,0,.7),0 30px 60px rgba(0,0,0,.6)}
.table-card{position:absolute;left:24px;top:-18px;margin:0;padding:8px 14px;font-family:var(--hand);font-size:15px;line-height:1.3;color:#3a1d10;background:#efe0bf;transform:rotate(-3deg);box-shadow:0 6px 12px rgba(0,0,0,.5)}
.table-card small{font-family:var(--serif);font-style:italic;font-size:12px;color:#6b4d2c}
.covers{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px;padding-top:20px}
.cover-face{position:relative;aspect-ratio:3/4;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px 12px;border:0;border-radius:2px 6px 6px 2px;transform:rotate(var(--r));
  background:radial-gradient(ellipse at 40% 30%,rgba(255,255,255,.1),transparent 60%),repeating-linear-gradient(35deg,rgba(0,0,0,.06) 0 2px,transparent 2px 6px),var(--c);
  box-shadow:inset 6px 0 0 rgba(0,0,0,.35),inset 0 0 0 8px rgba(0,0,0,.2),inset 0 0 0 10px var(--b),0 14px 24px rgba(0,0,0,.7);transition:transform .3s,box-shadow .3s}
.cover-face:hover,.cover-face:focus-visible{transform:rotate(0) translateY(-8px) scale(1.03);box-shadow:inset 6px 0 0 rgba(0,0,0,.35),inset 0 0 0 8px rgba(0,0,0,.2),inset 0 0 0 10px var(--b),0 22px 34px rgba(0,0,0,.7),0 0 26px rgba(255,190,100,.3)}
.cf-title{font-family:var(--deco);font-size:16px;line-height:1.15;text-align:center;color:var(--b);text-shadow:0 2px 0 #000}
.cf-orn{width:26px;height:26px;border:2px double var(--b);transform:rotate(45deg)}
.cf-date{position:absolute;bottom:14px;font-size:11px;font-style:italic;color:rgba(241,226,196,.8)}
.cf-draft{position:absolute;top:-8px;right:-8px;padding:2px 7px;font-family:var(--display);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#ffd9cc;background:#a3281b;border-radius:2px;transform:rotate(8deg)}

/* picks (handwritten) */
.handnote{position:relative;max-width:640px;margin:0 auto;padding:40px 44px 34px;color:#2b1d12;transform:rotate(-.6deg);
  background:radial-gradient(ellipse at 20% 10%,rgba(255,255,255,.5),transparent 50%),repeating-linear-gradient(transparent 0 33px,rgba(110,74,26,.16) 33px 34px),linear-gradient(#f3e6c6,#e2cd9e);
  box-shadow:0 20px 40px rgba(0,0,0,.6);clip-path:polygon(0 1%,4% 0,30% 1%,60% 0,100% 1%,99% 40%,100% 99%,70% 100%,30% 99%,0 100%,1% 60%)}
.handnote p{margin:0 0 .7em;font-family:var(--hand);font-size:17px;line-height:2}
.pick-list{margin:0 0 1em;padding-left:1.4em;font-family:var(--hand)}
.pick-list li{margin-bottom:.6em;line-height:1.7}
.pick-list a{font-family:var(--display);font-weight:700;font-size:16px;color:#7a1f12;text-decoration:none;border-bottom:1px solid rgba(122,31,18,.4)}
.pick-list span{display:block;font-size:14px;color:#4a3420}
.signed{text-align:right;font-size:20px!important}

/* reading lists */
.booklets{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.booklet{position:relative;padding:26px 26px 20px;color:var(--paper-ink);border-radius:3px 8px 8px 3px;background:linear-gradient(90deg,rgba(0,0,0,.15),transparent 8%),linear-gradient(var(--paper),var(--paper-dk));box-shadow:inset 8px 0 0 #5a2a1e,0 14px 30px rgba(0,0,0,.6)}
.booklet .ribbon{position:absolute;right:30px;top:-6px;width:16px;height:58px;background:linear-gradient(#d23a2a,#7a1515);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.booklet h3{margin:0 0 4px;font-family:var(--deco);font-size:22px;color:#3a1d10}
.bl-desc{margin:0 0 12px;font-style:italic;color:#6b4d2c}
.booklet ol{margin:0;padding-left:1.6em}
.booklet li{padding:4px 0;border-bottom:1px dotted rgba(110,74,26,.35)}
.booklet li .cn{margin-right:8px}
.book-link{color:#7a1f12;text-decoration:none;font-weight:600}
.book-link:hover{text-decoration:underline}
.dr{margin-left:6px;font-size:12px;color:#a3281b}

/* timeline */
.tl-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-style:italic;color:var(--ink-dim)}
.tl-toggle{font-style:normal;font-size:14px;cursor:pointer}
.timeline{position:relative;list-style:none;margin:20px 0 0;padding:0 0 0 42px}
.timeline::before{content:"";position:absolute;left:14px;top:0;bottom:0;width:6px;border-radius:3px;background:linear-gradient(90deg,#5a3b16,#f3d388 45%,#8a5d1f)}
.era{position:relative;margin-bottom:28px}
.era::before{content:"";position:absolute;left:-36px;top:6px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2c2,#c9973f 50%,#4a300f);box-shadow:0 0 0 3px #2a1a08,0 0 14px rgba(255,190,100,.5)}
.era.undated::before{background:radial-gradient(circle at 35% 30%,#ccc,#666 60%,#333)}
.era h3{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;font-family:var(--deco);font-size:22px;color:var(--brass-hi)}
.era h3 small{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--ink-dim)}
.era-books{display:flex;flex-wrap:wrap;gap:8px}
.tl-chip{cursor:pointer;padding:7px 14px;font:inherit;font-size:15px;color:var(--ink);border:1px solid rgba(201,151,63,.45);border-left:6px solid var(--c);border-radius:3px;background:rgba(20,12,6,.7);transition:transform .2s,background .2s}
.tl-chip:hover,.tl-chip:focus-visible{transform:translateX(3px);background:rgba(201,151,63,.15)}
.tl-chip.status-stub{opacity:.6;font-style:italic}

/* web */
.web-wrap{display:grid;grid-template-columns:1fr 290px;gap:16px;align-items:start}
.web{width:100%;height:auto;border-radius:10px;background:radial-gradient(ellipse at 50% 50%,rgba(255,190,110,.06),transparent 70%),rgba(10,6,3,.5);border:1px solid rgba(201,151,63,.3);touch-action:none}
.edge line{stroke:rgba(201,151,63,.35);stroke-width:1.5}
.edge text{font-family:var(--serif);font-style:italic;font-size:12px;fill:rgba(241,226,196,0);text-anchor:middle;pointer-events:none;transition:fill .2s}
.edge.lit line{stroke:var(--brass-hi);stroke-width:2.5}
.edge.lit text{fill:rgba(241,226,196,.9)}
.has-sel .edge:not(.lit) line{stroke:rgba(201,151,63,.12)}
.node{cursor:grab;outline:none}
.node .halo{opacity:0;transition:opacity .2s}
.node:hover .halo,.node:focus .halo,.node.sel .halo{opacity:1}
.node .dot{stroke:#2a1a08;stroke-width:3}
.node text{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.04em;fill:#f1e2c4;text-anchor:middle;paint-order:stroke;stroke:#0c0806;stroke-width:4px}
.t-character .dot{fill:#d9a545}.t-group .dot{fill:#f3d388}.t-place .dot{fill:#6b8f5a}.t-faction .dot{fill:#a3281b}.t-drift .dot{fill:#4fc3ff}
.node.sel .dot{stroke:#fff3c9}
.node:focus-visible .dot{stroke:#fff3c9;stroke-width:4}
.web-panel{padding:16px 18px;border-radius:6px;color:var(--paper-ink);background:linear-gradient(var(--paper),var(--paper-dk));box-shadow:0 12px 26px rgba(0,0,0,.6);min-height:200px}
.web-panel h3{margin:0 0 6px;font-family:var(--deco);font-size:22px;color:#3a1d10}
.web-panel ul{margin:0 0 8px;padding-left:1.1em;font-size:14.5px}
.web-panel b{cursor:pointer;color:#7a1f12}
.wp-type{margin:0;font-family:var(--display);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#8a5d1f}
.wp-sub{margin:10px 0 4px;font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6b4d2c}
.wp-books{display:flex;flex-direction:column;gap:3px}
.wp-hint{font-style:italic;color:#6b4d2c}
.web-panel .ghost-btn{color:#5a3b16;border-color:rgba(110,74,26,.5);background:rgba(110,74,26,.08);margin-top:8px}
.web-legend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;font-size:13px;color:var(--ink-dim)}
.web-legend span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;vertical-align:middle}
.web-legend .t-character::before{background:#d9a545}.web-legend .t-group::before{background:#f3d388}.web-legend .t-place::before{background:#6b8f5a}.web-legend .t-faction::before{background:#a3281b}.web-legend .t-drift::before{background:#4fc3ff}

/* lore cards */
.cards-count{text-align:center;font-style:italic;color:var(--ink-dim)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
.mini-card{position:relative;aspect-ratio:5/7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;cursor:pointer;text-align:center;border:0;border-radius:10px;color:var(--paper-ink);
  background:linear-gradient(var(--paper),var(--paper-dk));box-shadow:inset 0 0 0 4px #efe0bf,inset 0 0 0 6px #c9973f,inset 0 0 0 8px #efe0bf,0 12px 24px rgba(0,0,0,.6);transition:transform .25s}
.mini-card:hover{transform:translateY(-5px) rotate(-1deg)}
.mc-k{font-size:12px;font-style:italic;color:#6b4d2c}
.mc-t{font-family:var(--deco);font-size:18px;line-height:1.15;color:#3a1d10}
.mc-s{position:absolute;bottom:12px;font-family:var(--display);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#a3281b}
.mini-card.face-down{cursor:default;color:var(--ink-dim);background:repeating-linear-gradient(45deg,#3b1f14 0 8px,#2e170f 8px 16px);box-shadow:inset 0 0 0 4px #24120b,inset 0 0 0 6px #8a6a3a,0 12px 24px rgba(0,0,0,.6)}
.face-down .mc-q{font-family:var(--deco);font-size:46px;color:var(--brass)}
.face-down .mc-k{color:var(--ink-dim)}
.lore-modal{position:fixed;inset:0;z-index:65;display:flex;align-items:center;justify-content:center;padding:20px}
.lore-modal[hidden]{display:none}
.lore-backdrop{position:absolute;inset:0;background:rgba(5,3,2,.7);opacity:0;transition:opacity .25s}
.lore-card{position:relative;width:min(360px,92vw);padding:28px 26px 20px;text-align:center;color:var(--paper-ink);border-radius:14px;
  background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.5),transparent 60%),linear-gradient(var(--paper),var(--paper-dk));
  box-shadow:inset 0 0 0 5px #efe0bf,inset 0 0 0 7px #c9973f,inset 0 0 0 9px #efe0bf,inset 0 0 0 10px rgba(110,74,26,.4),0 30px 60px rgba(0,0,0,.8);
  transform:rotateY(80deg) scale(.9);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .25s}
.lore-modal.open .lore-backdrop{opacity:1}
.lore-modal.open .lore-card{transform:none;opacity:1}
.lore-card .close-book{top:-12px;right:-12px}
.lc-kicker{margin:0;font-family:var(--display);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#8a5d1f}
.lore-card h3{margin:.25em 0 .4em;font-family:var(--deco);font-size:26px;color:#3a1d10}
.lc-photo{display:block;margin:0 auto 10px;padding:5px;border:0;cursor:zoom-in;background:linear-gradient(135deg,#5a3b16,#f3d388 30%,#a0732e 50%,#f3d388 70%,#4a300f)}
.lc-photo img{display:block;width:220px;max-width:100%;height:auto}
.lc-text{font-size:17px;line-height:1.55;font-style:italic}
.lc-links{display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:center;font-size:14px}
.lc-links span{color:#6b4d2c}
.lc-status{margin:12px 0 0;font-family:var(--display);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#a3281b}
/* v0.2.7: grimier lore cards (aged, tea-stained, soot-edged parchment; tarnished brass). Shell styling only. */
.lore-card{isolation:isolate;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 24px 34px rgba(0,0,0,.85)) drop-shadow(0 0 2px rgba(0,0,0,.9))}
.lore-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  clip-path:polygon(0 1.2%,4% 0,11% .9%,19% .2%,27% 1.1%,36% 0,44% .7%,53% .1%,61% 1%,70% .2%,78% .9%,87% 0,95% .8%,100% .3%,99.4% 9%,100% 18%,99.2% 27%,100% 37%,99.5% 46%,100% 56%,99.1% 65%,100% 74%,99.4% 83%,100% 92%,99.3% 100%,91% 99.2%,83% 100%,74% 99.3%,66% 100%,57% 99.1%,48% 100%,40% 99.4%,31% 100%,22% 99.2%,14% 100%,6% 99.3%,0 100%,.7% 91%,0 82%,.8% 73%,0 63%,.6% 54%,0 45%,.9% 36%,0 27%,.6% 18%,0 9%);
  background:
    radial-gradient(ellipse at 50% 46%,transparent 58%,rgba(38,20,8,.34) 86%,rgba(20,10,4,.66) 100%),
    radial-gradient(circle at 18% 78%,rgba(110,68,24,.22),transparent 22%),
    radial-gradient(circle at 84% 20%,rgba(110,68,24,.18) 0,rgba(110,68,24,.05) 14%,transparent 18%),
    radial-gradient(circle at 86% 62%,transparent 9%,rgba(96,58,20,.18) 10.5%,transparent 12.5%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .16  0 0 0 0 .09  0 0 0 0 .03  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.012 .03' numOctaves='4' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .2  0 0 0 0 .06  0 0 0 -1.6 .9'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>"),
    linear-gradient(168deg,#d3bd94 0%,#c6aa7b 45%,#b4956a 100%);
  box-shadow:inset 0 0 0 2px #24180b,inset 0 0 0 5px #6b5730,inset 0 0 0 6px #a08850,inset 0 0 0 7px #3a2b16,inset 0 0 26px 6px rgba(28,14,5,.55)}
.lore-card .lc-kicker{color:#5a3a12}
.lore-card h3{color:#2e170b;text-shadow:0 1px 0 rgba(235,215,170,.35)}
.lore-card .lc-text{color:#24170d}
.lore-card .lc-links span{color:#47301a}
.lore-card .close-book{color:#1c1208;border:1px solid #2a1e0f;
  background:radial-gradient(circle at 70% 75%,rgba(74,112,92,.38),transparent 38%),radial-gradient(circle at 34% 30%,#cdb683,#8c7646 48%,#4b3b1d 100%);
  box-shadow:inset 0 1px 0 rgba(255,236,190,.25),inset 0 -3px 6px rgba(0,0,0,.45),0 3px 10px #000}
.lore-card .close-book:hover{filter:brightness(1.12)}

/* journal */
.journal-book{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:14px;border-radius:8px;background:linear-gradient(var(--leather),var(--leather-dk));box-shadow:0 0 0 2px #1a0d06,0 0 0 4px var(--brass-lo),0 30px 60px rgba(0,0,0,.8)}
.jpage{padding:26px 28px;color:var(--paper-ink);background:linear-gradient(var(--paper),var(--paper-dk))}
.jpage:first-child{border-radius:4px 0 0 4px;box-shadow:inset -24px 0 30px -20px rgba(60,35,10,.5)}
.jpage:last-child{border-radius:0 4px 4px 0;box-shadow:inset 24px 0 30px -20px rgba(60,35,10,.5)}
.jpage h3{margin:0 0 14px;font-family:var(--deco);font-size:22px;color:#3a1d10}
.jrow{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:10px;margin-bottom:10px;font-size:15px}
.jl{font-family:var(--display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#5a4128}
.bar{height:10px;border-radius:5px;background:rgba(110,74,26,.18);box-shadow:inset 0 1px 2px rgba(0,0,0,.3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#8a5d1f,#e2b860);transition:width .6s}
.jn{font-size:14px}.jn small{color:#7a6448}
.jtotal{margin-top:16px;font-style:italic}
.jlock{font-style:italic;color:#6b4d2c}
.unlock-note{margin:14px 0;padding:14px 16px;transform:rotate(-1deg);background:#fff6e0;border:1px dashed #a3281b;box-shadow:0 6px 12px rgba(0,0,0,.25)}
.unlock-note p{margin:.2em 0;font-family:var(--hand);font-size:14px;line-height:1.8}
.unlock-note .un-t{font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#a3281b}
.jfoot{font-size:12.5px;color:#7a6448}
.jpage .ghost-btn{color:#7a1f12;border-color:rgba(122,31,18,.5);background:rgba(122,31,18,.06)}

/* request */
.request-scene{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:30px;padding-top:10px}
.cloak{position:relative;flex:0 0 160px;height:300px;margin-top:20px;border-radius:80px 80px 10px 10px;background:linear-gradient(#2a2430,#120e16 70%);box-shadow:0 20px 40px rgba(0,0,0,.7)}
.cloak .hood{position:absolute;left:30px;right:30px;top:24px;height:90px;border-radius:50px 50px 40px 40px;background:radial-gradient(ellipse at 50% 70%,#000 45%,#1c1822 75%)}
.cloak .eyes{position:absolute;left:62px;top:78px;width:36px;height:5px;background:radial-gradient(circle at 6px 50%,rgba(140,215,255,.9) 2px,transparent 3px),radial-gradient(circle at 30px 50%,rgba(140,215,255,.9) 2px,transparent 3px);animation:blink 6s infinite}
@keyframes blink{0%,92%,100%{opacity:1}95%{opacity:0}}
.request-note{position:relative;flex:0 1 520px;padding:34px 36px 24px;color:#2b1d12;transform:rotate(1.2deg);background:radial-gradient(ellipse at 80% 0,rgba(255,255,255,.45),transparent 50%),linear-gradient(#efe0bf,#d8c294);box-shadow:0 20px 40px rgba(0,0,0,.6)}
.request-note::before{content:"";position:absolute;left:50%;top:-12px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e05a44,#7a1515);box-shadow:0 2px 4px #000}
.rn-from{margin:0 0 10px;font-family:var(--display);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#6b4d2c}
.rn-riddle p{margin:0;font-family:var(--hand);font-size:18px;line-height:2.1}
.rn-help{font-style:italic;color:#5a4128}
.rn-solved{font-family:var(--display);font-size:15px;color:#2f6b3a}
.request-note.solved::after{content:"Answered";position:absolute;right:22px;top:46px;pointer-events:none;padding:4px 12px;transform:rotate(-12deg);font-family:var(--display);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#2f6b3a;border:3px double #2f6b3a;border-radius:4px;opacity:.8}
.rn-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.request-note .ghost-btn{color:#5a3b16;border-color:rgba(110,74,26,.5);background:rgba(110,74,26,.08);margin-top:0}
.rn-tally{margin:12px 0 0;font-size:13px;color:#7a6448}

/* stacks */
.stacks-scene{display:flex;flex-direction:column;align-items:center;gap:22px;padding-top:10px;text-align:center}
.stacks-intro{font-style:italic;color:var(--ink-dim)}
.fragment{position:relative;max-width:640px;margin:0;padding:34px 40px 24px;color:var(--paper-ink);background:linear-gradient(var(--paper),var(--paper-dk));box-shadow:0 0 60px rgba(255,170,70,.18),0 20px 40px rgba(0,0,0,.7);transition:transform .26s,opacity .26s}
.fragment.turn{transform:rotateY(70deg);opacity:0}
.fragment blockquote{margin:0;font-size:20px;line-height:1.6;font-style:italic}
.fragment blockquote::before{content:"“";position:absolute;left:12px;top:-6px;font-family:var(--deco);font-size:64px;color:#c9973f}
.fragment figcaption{margin-top:14px;font-size:14px;color:#6b4d2c}

/* credits */
.credits-roll{max-width:620px;margin:0 auto;text-align:center}
.credits-roll section{margin-bottom:26px}
.credits-roll h3{margin:0 0 8px;font-family:var(--display);font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim)}
.credits-roll ul{list-style:none;margin:0;padding:0}
.credits-roll li{padding:3px 0;font-size:19px}
.credits-roll li b{font-family:var(--deco);font-weight:700;color:var(--brass-hi)}
.credits-roll li small{color:var(--ink-dim);font-style:italic}
.cr-extra li{font-size:15px;font-style:italic;color:var(--ink-dim)}
.built-by{margin-top:30px;font-family:var(--deco);font-size:22px;color:var(--portal-hi);text-shadow:0 0 14px rgba(79,195,255,.5)}

/* ---------- inside the book: slips, record line, secrets ---------- */
.page-left{flex-direction:column;justify-content:center}
.slips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%;margin-top:12px}
.slips:empty{display:none}
.slips-head{width:100%;margin:0;text-align:center;font-family:var(--display);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#8a5d1f}
.slip{position:relative;display:flex;flex-direction:column;align-items:flex-start;max-width:170px;padding:6px 12px 8px 16px;text-decoration:none;cursor:pointer;color:#2b1d12;border:0;font:inherit;text-align:left;
  background:linear-gradient(#fbf3de,#ecdcb6);box-shadow:0 3px 6px rgba(60,35,10,.35);transform:rotate(calc((var(--i,0) - 1) * 1.5deg));transition:transform .2s}
.slip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--slip,#a3281b)}
.slip span{font-family:var(--display);font-weight:700;font-size:12.5px;line-height:1.2}
.slip small{font-size:10.5px;color:#8a5d1f;letter-spacing:.1em}
.slip:hover,.slip:focus-visible{transform:translateY(-3px) rotate(0)}
.slip-card{background:linear-gradient(#e9f4fb,#cfe3ee)}
.slip-card::before{background:#4fc3ff}
.cat-line{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;padding-top:10px;border-top:1px solid rgba(110,74,26,.3);font-size:13px;color:#6b4d2c}
.cat-line .tags{display:flex;flex-wrap:wrap;gap:4px}
.cat-line .tags a{font-size:11.5px;padding:1px 7px;border-radius:8px;background:rgba(110,74,26,.12);color:#5a4128;text-decoration:none}
.cat-line .tags a:hover{background:rgba(110,74,26,.25)}
.secret{position:relative;margin:18px 0 6px;padding:16px 18px 14px;border:1px solid rgba(122,31,18,.35);border-radius:4px;background:rgba(255,248,230,.45)}
.secret-title{margin:0 0 8px;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.06em;color:#7a1f12}
.secret.sealed .seal-lines{display:flex;flex-direction:column;gap:9px;filter:blur(3px);opacity:.6}
.seal-lines i{display:block;height:9px;border-radius:4px;background:#8a6f4d}
.seal-lines i:nth-child(2){width:86%}.seal-lines i:nth-child(3){width:94%}.seal-lines i:nth-child(4){width:60%}
.seal-wax{position:absolute;right:22px;top:34px;width:58px;height:58px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#ffd9cc;transform:rotate(-12deg);border-radius:48% 52% 50% 50%;
  background:radial-gradient(circle at 38% 32%,#e05a44,#a3281b 45%,#6e140d 80%);box-shadow:0 3px 6px rgba(60,10,5,.5),inset 0 0 0 6px rgba(0,0,0,.12)}
.seal-by{margin:12px 0 2px;font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7a1f12}
.seal-hint{margin:0 0 8px;font-size:13.5px;font-style:italic;color:#6b4d2c}
.seal-form{display:flex;flex-wrap:wrap;gap:8px}
.seal-form input{flex:1;min-width:150px;padding:7px 10px;font:inherit;font-size:15px;color:#2b1d12;background:#fffaf0;border:1px solid rgba(110,74,26,.5);border-radius:3px}
.seal-form.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.secret.unsealed{border-color:rgba(163,40,27,.5);background:linear-gradient(rgba(255,240,220,.7),rgba(255,248,230,.4));animation:unseal .8s ease}
.secret.unsealed p{font-size:16.5px;line-height:1.6}
@keyframes unseal{from{filter:blur(4px);opacity:.3}to{filter:none;opacity:1}}

/* lightbox guided tour */
.lb-stage{max-width:100%;max-height:80vh;overflow:hidden;box-shadow:0 0 0 6px #8a5d1f,0 0 0 8px #2a1a08,0 20px 60px #000}
.lb-stage img{display:block;max-width:100%;max-height:80vh;box-shadow:none!important;transform-origin:50% 50%;transition:transform .9s cubic-bezier(.6,.05,.3,1)}
.lb-tour{display:flex;align-items:center;gap:14px;color:var(--ink-dim);font-style:italic}
.lb-tour[hidden]{display:none}
.lb-tour .ghost-btn{margin-top:0}
.lb-tour button:disabled{opacity:.4;cursor:default}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .directory{top:10px;right:10px}
  .dir-label{display:none}
  .dir-toggle{padding:9px 12px}
  .dir-panel{position:fixed;top:0;right:0;bottom:0;width:min(300px,86vw);max-height:none;border-radius:10px 0 0 10px;transform:translateX(105%);opacity:1;padding-top:62px}
  .menu-open .dir-panel{transform:none}
  .dir-panel a{padding:12px 10px;font-size:17px}
  .room-inner{padding:70px 14px 40px}
  .room-back{left:12px;top:12px;padding:8px 12px;font-size:11px}
  .room .ghost-btn,.lb-tour .ghost-btn,.book-overlay .ghost-btn{display:inline-block}
  .room-plaque{padding:10px 18px 8px}
  .cabinet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-filters label{flex:1 1 45%}
  .cat-filters select{flex:1;max-width:none}
  .web-wrap{grid-template-columns:1fr}
  .journal-book{grid-template-columns:1fr;padding:8px}
  .jpage{border-radius:4px!important;box-shadow:none!important;padding:20px 18px}
  .jpage+.jpage{margin-top:8px}
  .jrow{grid-template-columns:90px 1fr auto}
  .request-scene{flex-direction:column;align-items:center}
  .cloak{flex:0 0 auto;width:120px;height:150px;margin:0}
  .cloak .hood{left:20px;right:20px;height:70px}.cloak .eyes{left:42px;top:60px}
  .request-note{padding:28px 22px 20px}
  .handnote{padding:30px 22px}
  .fragment{padding:30px 22px 20px}
  .wall-hot .gauge{display:block;right:auto;left:10%;top:39%;width:44px;height:44px}
  .shroom-patch{left:2%;bottom:15.5%}
  .bell-btn{right:6%}
}
@media (prefers-reduced-motion:reduce){
  .dir-panel,.room,.room-inner,.lore-card,.fragment,.lb-stage img{transition:none!important}
}
.narr:empty{display:none}
.narr{margin:16px 0 4px;padding:10px 12px;border:1px solid rgba(110,74,26,.3);border-radius:4px;background:rgba(255,248,230,.4)}
.narr-head{margin:0 0 6px;font-family:var(--display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8a5d1f}
.narr audio{width:100%}
.narr-tr{display:inline-block;margin-top:6px;font-size:13.5px;color:#7a1f12}
.narr-tr.none{color:#7a6448;font-style:italic}

/* v0.2.3 atlas entry on the map book */
.atlas-frame img{cursor:zoom-in}
.atlas-open{display:inline-block;margin:12px auto 0}
@media (max-width:760px){.book-overlay .atlas-open{display:inline-block}}

/* ===== v0.2.9: The Map Room ===== */
.maproom{max-width:1040px;margin:0 auto}
.mr-intro{font-style:italic;color:var(--ink-dim);text-align:center;margin:0 0 22px}
.mr-h{font-family:var(--display,serif);letter-spacing:.14em;text-transform:uppercase;font-size:14px;color:#c9973f;margin:26px 0 12px;border-bottom:1px solid rgba(201,151,63,.3);padding-bottom:6px}
.mr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.mr-card{position:relative;display:flex;flex-direction:column;gap:3px;padding:10px 10px 12px;text-decoration:none;color:var(--ink);
  background:linear-gradient(#2a1c12,#1a110a);border:1px solid #4a3220;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(201,151,63,.18),0 6px 16px rgba(0,0,0,.5);transition:transform .25s,box-shadow .25s}
.mr-card:hover,.mr-card:focus-visible{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(243,211,136,.55),0 10px 22px rgba(0,0,0,.6)}
.mr-img{display:block;aspect-ratio:3/2;overflow:hidden;border:1px solid #0b0603;background:#0d0906;margin-bottom:6px}
.mr-img img{width:100%;height:100%;object-fit:cover;filter:sepia(.25) saturate(.85) contrast(.95)}
.mr-k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#a88a55}
.mr-t{font-family:var(--display,serif);font-size:17px}
.mr-badge{align-self:flex-start;font-size:10px;letter-spacing:.06em;padding:1px 6px;border:1px solid rgba(201,151,63,.5);color:#d8b56a;border-radius:2px}
.mr-c{font-size:13px;color:var(--ink-dim);font-style:italic}
.mr-book,.mr-soon{color:var(--ink-dim)}
.mr-soon{font-style:italic;border:1px dashed rgba(201,151,63,.35);background:rgba(0,0,0,.22);padding:12px 14px;border-radius:4px}
.mr-places{display:flex;flex-wrap:wrap;gap:8px 16px}
@media (prefers-reduced-motion:reduce){ .mr-card,.mr-card:hover{transition:none;transform:none} }

/* ===== v0.3.2: the Ages of Greymire (from the handbook) ===== */
.chron{max-width:900px;margin:0 auto 40px}
.ages-rail{position:sticky;top:60px;z-index:3;display:flex;gap:3px;margin:0 0 26px;padding:6px;border-radius:4px;
  background:linear-gradient(#24170e,#160e08);box-shadow:0 0 0 1px #4a3220,inset 0 0 0 1px rgba(201,151,63,.2),0 8px 20px rgba(0,0,0,.55)}
.ages-rail a{flex:var(--w) 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 8px;text-decoration:none;color:var(--ink-dim);
  border-left:3px solid rgba(201,151,63,.35);background:rgba(255,220,160,.03);transition:background .25s,color .25s,border-color .25s;overflow:hidden}
.ages-rail a b{font-family:var(--display);font-size:16px;color:#c9973f;line-height:1}
.ages-rail a span{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ages-rail a small{font-size:11px;opacity:.75;letter-spacing:.04em}
.ages-rail a:hover,.ages-rail a.on{color:var(--ink);background:rgba(201,151,63,.14);border-left-color:#f3d388}
.ages-rail a.on b{color:#f3d388}
.chron-head{text-align:center;color:var(--ink-dim);font-style:italic;max-width:720px;margin:0 auto 24px}
.chron-k{font-family:var(--display);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:#c9973f;font-size:14px}
.ages{list-style:none;margin:0;padding:0;position:relative}
.ages::before{content:"";position:absolute;left:31px;top:8px;bottom:8px;width:4px;border-radius:2px;background:linear-gradient(#5a3b16,#c9973f 30%,#8a6a32 70%,#4fa8d8)}
.age{position:relative;display:grid;grid-template-columns:66px 1fr;gap:18px;scroll-margin-top:130px;padding:0 0 34px;
  min-height:calc(120px + var(--span) * .18px)}
.age-mark{position:relative;z-index:1}
.age-mark span{position:sticky;top:130px;display:grid;place-items:center;width:66px;height:66px;border-radius:50%;font-family:var(--display);font-size:22px;color:#2a1a08;
  background:radial-gradient(circle at 35% 30%,#f3d388,#b8954e 55%,#6d5226);box-shadow:0 0 0 2px #2a1b0c,0 0 0 4px rgba(201,151,63,.35),0 6px 14px rgba(0,0,0,.6)}
.age-5 .age-mark span{background:radial-gradient(circle at 35% 30%,#d6f0ff,#4fa8d8 55%,#1d4a66);box-shadow:0 0 0 2px #0c1a24,0 0 18px rgba(79,195,255,.35)}
.age-body{padding:14px 20px 16px;border-radius:3px;color:#3a2614;background:linear-gradient(rgba(255,244,214,.92),rgba(226,202,150,.9)),var(--grime,none);
  box-shadow:inset 0 0 40px rgba(110,74,26,.25),0 8px 22px rgba(0,0,0,.5)}
.age-body h3{margin:2px 0 10px;font-family:var(--display);font-size:24px;color:#4a2e14}
.age-body p{margin:0 0 .8em;line-height:1.6}
.age-dates{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#7a5a30;margin:0!important}
.age-dates em{text-transform:none;letter-spacing:0}
.age-born{font-size:14px;border-top:1px dotted rgba(110,74,26,.45);padding-top:8px;color:#6b4d2c}
.age-born .book-link{margin-left:8px;color:#7a2a18}
.age-now{display:flex;align-items:center;gap:10px;font-style:italic;color:#1d4a66}
.age-now span{font-style:normal;font-weight:700;letter-spacing:.08em;padding:2px 8px;border:1px solid #1d4a66;border-radius:2px}
.chron-brief{margin:6px 0 0 84px;padding:14px 20px;border:1px solid rgba(79,195,255,.35);border-radius:4px;color:var(--ink);
  background:radial-gradient(ellipse at 50% 0,rgba(79,195,255,.12),transparent 70%),rgba(6,10,16,.6)}
.chron-brief h3{margin:0 0 8px;font-family:var(--display);color:#9fd8f5;letter-spacing:.06em}
.chron-src{text-align:center;font-style:italic;font-size:13px;color:var(--ink-dim);margin:18px 0 0}

.chron-cal{margin:18px 0 0 84px;padding:16px 20px 18px;border:1px solid rgba(201,151,63,.4);border-radius:4px;color:var(--ink);
  background:linear-gradient(rgba(40,28,16,.55),rgba(28,20,12,.65))}
.chron-cal h3{margin:0 0 10px;font-family:var(--display);color:#f3d388;letter-spacing:.06em;font-size:22px}
.chron-cal h4.lore-h{margin:1.1em 0 .45em;font-family:var(--display);color:#c9973f;font-size:16px;letter-spacing:.04em}
.chron-cal p{margin:0 0 .75em;line-height:1.55}
.chron-cal .lore-table-wrap{margin:.6em 0 1em;overflow-x:auto}
.chron-cal .lore-table{width:100%;border-collapse:collapse;font-size:13px}
.chron-cal .lore-table th,.chron-cal .lore-table td{border:1px solid rgba(201,151,63,.28);padding:5px 8px;text-align:left;vertical-align:top}
.chron-cal .lore-table th{background:rgba(201,151,63,.12);color:#f3d388;font-weight:600}
.ages-rail a.ages-rail-cal b{color:#9fd8f5}
@media (max-width:720px){
  .chron-cal{margin-left:0;padding:12px 14px}
}

.tl-books-h{max-width:900px;margin:10px auto 0;font-family:var(--display);color:#c9973f;letter-spacing:.12em;text-transform:uppercase;font-size:15px;border-top:1px solid rgba(201,151,63,.3);padding-top:22px}
@media (max-width:760px){
  .ages-rail{top:56px;padding:4px;gap:2px}
  .ages-rail a{padding:4px 5px}.ages-rail a span{display:none}.ages-rail a small{font-size:9.5px}
  .ages::before{left:19px}
  .age{grid-template-columns:42px 1fr;gap:10px;scroll-margin-top:128px}
  .age-mark span{width:42px;height:42px;font-size:15px;top:128px}
  .age-body{padding:12px 14px}.age-body h3{font-size:20px}
  .chron-brief{margin-left:0}
}
@media (prefers-reduced-motion:reduce){ .ages-rail a{transition:none} }

/* ===== v0.3.4: the Greymire Gazette broadsheet ===== */
.gazette{max-width:980px;margin:0 auto;padding:22px 26px 18px;color:#221a12;font-family:var(--serif,Georgia,serif);
  background:radial-gradient(ellipse 30% 22% at 82% 12%,rgba(140,110,60,.18),transparent 70%),radial-gradient(ellipse 25% 30% at 8% 88%,rgba(120,90,50,.16),transparent 70%),var(--grain-fine,none),linear-gradient(#e2d6ba,#cdbf9f);
  box-shadow:0 14px 40px rgba(0,0,0,.6),inset 0 0 60px rgba(90,70,40,.35);border-radius:1px}
.gz-mast{text-align:center;border-bottom:4px double #2a2016;padding-bottom:8px}
.gz-ears{display:flex;justify-content:space-between;margin:0 0 6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid #2a2016;padding-bottom:4px}
.gz-title{margin:4px 0 2px;font-family:var(--display);font-size:clamp(30px,5vw,56px);letter-spacing:.04em;color:#1a130c;line-height:1}
.gz-motto{margin:0;font-style:italic;font-size:14px}
.gz-lead{border-bottom:1px solid #2a2016;padding:12px 0 10px;text-align:center}
.gz-lead h4{margin:0;font-family:var(--display);font-size:clamp(24px,3.6vw,38px);text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
.gz-deck{margin:6px 0;font-style:italic;font-size:17px}
.gz-body{max-width:720px;margin:6px auto 0;font-size:17px;line-height:1.55;text-align:justify;hyphens:auto}
.gz-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;margin-top:10px}
.gz-item{padding:8px 14px 12px;border-right:1px solid rgba(42,32,22,.5)}
.gz-item:last-child{border-right:0}
.gz-item h5{margin:0 0 4px;font-family:var(--display);font-size:17px;text-transform:uppercase;line-height:1.15}
.gz-item p,.gz-item li{font-size:15px;line-height:1.5;text-align:justify;hyphens:auto}
.gz-item .gz-deck{font-size:14px}
.gz-rumours ul{margin:0;padding-left:18px}
.gz-rumours li{margin-bottom:6px}
.gz-small{font-size:12.5px;font-style:italic;opacity:.85}
.gz-tally{border-top:4px double #2a2016;margin-top:8px;padding-top:8px}
.gz-tally h5{margin:0 0 6px;font-family:var(--display);font-size:16px;text-transform:uppercase;text-align:center}
.gz-table{color:#221a12}.gz-table td:first-child{white-space:normal}
.gz-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin-top:10px;border-top:1px solid #2a2016;padding-top:6px;font-size:12px;font-style:italic}
@media (max-width:760px){ .gazette{padding:14px 12px} .gz-ears{font-size:9.5px;letter-spacing:.06em} .gz-item{border-right:0;border-bottom:1px solid rgba(42,32,22,.4)} .gz-body{font-size:16px} }

/* ---------- v0.4.0 The Players' Vault ---------- */
.vault-gate{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:center;max-width:780px;margin:10px auto 0}
.vg-door{position:relative;height:280px;aspect-ratio:1/1.9;justify-self:center}
.vg-seal .vg-note{margin:4px 90px 12px 0;font-style:italic;line-height:1.5}
.vault-room{max-width:1100px;margin:0 auto}
.vault-intro{font-style:italic;max-width:720px}
.vault-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.vault-tools .brass-btn,.vault-tools .ghost-btn{margin-top:0}
.vault-case{margin-top:18px}
.vault-src{margin-top:18px;font-size:13px;opacity:.7;font-style:italic}
@media (max-width:760px){
  .vault-gate{grid-template-columns:1fr;gap:14px}
  .vg-door{height:150px}
  .vg-seal .vg-note{margin-right:0;margin-top:70px}
}