/* the research screen: parchment, ink and brass */
:root {
  --ink: #3a2815; --ink-soft: #6e5434; --parch: #efe0bb; --parch-dark: #d9c290;
  --walnut: #22160d; --leather: #33210f; --leather-2: #4a3019;
  --brass: linear-gradient(180deg, #f8e3a0 0%, #dcb25c 30%, #a2732c 58%, #c9974a 78%, #7a5420 100%);
  --brass-flat: #c9974a; --brass-dark: #6b4818; --gold: #ffd982;
  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --caps: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --top: 50px; --hud: 152px;
  --M: 88px;   /* medallion size, set from the screen in app.js */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--walnut); color: var(--ink); overflow: hidden; }
body { font-family: var(--serif); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------------------------------------------------------------- loading screen */
#loader { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(40,20,5,.55) 100%), url(art/parchment.webp) center / cover, #e6d3a6;
  transition: opacity .7s ease, visibility .7s; }
#loader.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.ld-card { width: min(640px, 86vw); text-align: center; }
.ld-title { margin: 18px 0; white-space: nowrap; font: 700 clamp(26px, 6.2vw, 60px)/1 var(--caps); letter-spacing: .14em; text-indent: .14em; color: #4a3014;
  text-shadow: 0 1px 0 rgba(255,240,200,.8), 0 -1px 0 rgba(60,30,0,.45); }
.ld-rule { height: 10px; background:
  linear-gradient(90deg, transparent, #7a5420 20%, #7a5420 80%, transparent) center / 100% 2px no-repeat,
  radial-gradient(circle, #7a5420 3px, transparent 3.5px) center / 10px 10px no-repeat; }
.ld-bar { margin: 34px auto 0; width: min(420px, 70vw); height: 14px; border-radius: 8px; padding: 3px;
  background: var(--brass); box-shadow: 0 2px 6px rgba(40,20,0,.45), inset 0 1px 0 rgba(255,255,255,.5); }
.ld-bar { position: relative; background-color: #24160a; }
.ld-bar::before { content: ""; position: absolute; inset: 3px; border-radius: 5px; background: #24160a; }
.ld-bar i { position: relative; display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(180deg, #ffe7a6, #e2b04e 55%, #a8721f); box-shadow: 0 0 10px rgba(255,200,90,.5); transition: width .25s ease; }

/* ---------------------------------------------------------------- the frame */
#game { position: fixed; inset: 0; display: grid; grid-template-rows: var(--top) 1fr var(--hud); }
#topbar { position: relative; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: 0 max(14px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: linear-gradient(180deg, #5b3b18 0%, #3b250f 55%, #2a190a 100%);
  border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #6b4818, #f0cf7c 20%, #a2732c 50%, #f0cf7c 80%, #6b4818) 1;
  box-shadow: 0 4px 14px rgba(0,0,0,.55); }
.tb-name { font: 700 15px/1 var(--caps); letter-spacing: .2em; color: #f2d58c; text-shadow: 0 1px 0 #000, 0 0 12px rgba(255,200,90,.25); white-space: nowrap; }
.tb-right { display: flex; align-items: center; gap: 8px; }
.tb-turn { font: 600 14px/1 var(--caps); letter-spacing: .08em; color: #f5e2b0; padding: 0 12px 0 4px; white-space: nowrap; }
.tb-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid #b8893c;
  background: linear-gradient(180deg, #4d3216, #2c1b0b); color: #f2d58c; font: 600 12px/1 var(--caps); letter-spacing: .1em;
  box-shadow: inset 0 1px 0 rgba(255,220,150,.25), 0 1px 3px rgba(0,0,0,.6); }
.tb-btn:hover { background: linear-gradient(180deg, #6a4620, #3a2410); }
.tb-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.tb-sound { padding: 0; width: 34px; justify-content: center; }
.tb-sound .off { display: none; }
.tb-sound[aria-pressed="false"] .on { display: none; }
.tb-sound[aria-pressed="false"] .off { display: inline; }

/* ---------------------------------------------------------------- the tree */
#tree-wrap { position: relative; overflow: hidden; background: url(art/parchment.webp) center / cover, #e8d6aa; }
#tree-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(70,35,5,.32) 100%); }
#tree { position: relative; height: 100%; margin: 0 auto; }
#eras { position: absolute; inset: 0; pointer-events: none; }
.era { position: absolute; top: 0; bottom: 0; border-left: 1px solid rgba(90,60,25,.28); }
.era:nth-child(even) { background: rgba(120,80,30,.07); }
.era:first-child { border-left: 0; }
.era b { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); min-width: 46px; padding: 5px 12px 4px; text-align: center;
  font: 700 13px/1 var(--caps); letter-spacing: .14em; text-indent: .14em; color: #f4dc9c; border-radius: 3px;
  background: linear-gradient(180deg, #5a3a17, #34200c); border: 1px solid #a8792e; box-shadow: 0 2px 4px rgba(50,25,0,.35); }
.era b::before, .era b::after { content: ""; position: absolute; top: 50%; width: 22px; height: 1px; background: rgba(90,60,25,.55); }
.era b::before { right: 100%; margin-right: 6px; } .era b::after { left: 100%; margin-left: 6px; }
#links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#links path { fill: none; stroke-linecap: round; }
#links .l-under { stroke: rgba(60,38,15,.55); stroke-width: 5; }
#links .l-over { stroke: #c8ad7a; stroke-width: 1.6; }
#links .done .l-under { stroke: #7a5418; }
#links .done .l-over { stroke: #ffd77a; stroke-width: 2; }
#nodes { position: absolute; inset: 0; }

.node { position: absolute; width: calc(var(--M) + 44px); margin-left: calc((var(--M) + 44px) / -2); padding: 0; border: 0; background: none;
  display: grid; justify-items: center; gap: 0; color: var(--ink); touch-action: manipulation; }
.medal { position: relative; width: var(--M); height: var(--M); border-radius: 50%; padding: 5px;
  background: conic-gradient(from 210deg, #6b4818, #e9c675, #8a6224, #f7dd94, #6b4818, #c9974a, #6b4818);
  box-shadow: 0 0 0 1.5px #3b250c, 0 4px 9px rgba(50,25,0,.45); transition: transform .18s ease, box-shadow .25s ease; }
.medal img { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
  filter: sepia(.28) saturate(.82) brightness(.95) contrast(.98); transition: filter .5s ease; background: #2a1b10; }
.medal::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 -10px 18px rgba(30,15,0,.28), inset 0 8px 14px rgba(255,240,200,.12); }
.ring { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.ring circle { fill: none; stroke-width: 4.5; }
.ring .track { stroke: rgba(40,22,5,.0); }
.ring .prog { stroke: #fff0b8; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255,200,80,.9)); transition: stroke-dashoffset .6s ease; }
.plate { position: relative; margin-top: -9px; z-index: 1; max-width: 100%; padding: 5px 8px 4px; border-radius: 4px; text-align: center;
  background: linear-gradient(180deg, #4a3017, #2b1a0b); border: 1px solid #a8792e; box-shadow: 0 2px 4px rgba(40,20,0,.35); }
.plate .nm { display: block; font: 700 10.5px/1.2 var(--caps); letter-spacing: .05em; color: #f6e3b3; text-wrap: balance; }
.plate .tn { display: block; margin-top: 2px; font: italic 500 11px/1.1 var(--serif); color: #e2c48a; }
.seal { display: inline-block; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle;
  background: radial-gradient(circle at 40% 35%, #c2412f, #7d1a10 70%); box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,190,150,.25); position: relative; }
.seal::after { content: ""; position: absolute; inset: 4px; background: #ffd77a;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.node .seal { position: absolute; top: -3px; right: calc(50% - var(--M) / 2 - 6px); z-index: 2; width: 26px; height: 26px; }
.node:hover .medal, .node:focus-visible .medal { transform: translateY(-2px) scale(1.04); }
.node:focus-visible { outline: none; }
.node:focus-visible .medal { box-shadow: 0 0 0 1.5px #3b250c, 0 0 0 4px var(--gold), 0 4px 9px rgba(50,25,0,.45); }
.node.current .medal { box-shadow: 0 0 0 1.5px #3b250c, 0 0 0 5px rgba(255,214,120,.55), 0 0 22px 6px rgba(255,200,90,.55), 0 4px 9px rgba(50,25,0,.45); animation: glow 2.4s ease-in-out infinite; }
.node.current .plate { border-color: #ffd77a; }
@keyframes glow { 50% { box-shadow: 0 0 0 1.5px #3b250c, 0 0 0 5px rgba(255,214,120,.8), 0 0 30px 10px rgba(255,200,90,.7), 0 4px 9px rgba(50,25,0,.45); } }
.node.done .medal { background: conic-gradient(from 210deg, #8a6224, #fff1b8, #c9974a, #fff4c4, #9a6c28, #f7dd94, #8a6224); }
.node.done .medal img { filter: none; }
.node.done .plate { background: var(--brass); border-color: #fff0b8; }
.node.done .plate .nm { color: #2a1708; text-shadow: 0 1px 0 rgba(255,240,200,.6); }
.node.done .plate .tn { color: #4a2f10; }
.node.fresh .medal { animation: stamp .9s cubic-bezier(.2,1.6,.4,1); }
@keyframes stamp { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* tooltip: the real thumbnail */
#tip { position: fixed; z-index: 9; width: 300px; padding: 8px 8px 10px; border-radius: 6px; pointer-events: none;
  background: linear-gradient(180deg, #3a2512, #22150a); border: 1px solid #c9974a; box-shadow: 0 10px 28px rgba(0,0,0,.55); color: #f3e2b8; }
.tip-pic { display: grid; place-items: center; background: #120b05; border: 1px solid #6b4818; }
.tip-pic img { display: block; max-width: 100%; max-height: 190px; width: auto; height: auto; }
.tip-name { margin-top: 8px; font: 700 15px/1.15 var(--caps); letter-spacing: .04em; color: #ffe3a0; }
.tip-client { margin-top: 2px; font: 500 11px/1.2 var(--caps); letter-spacing: .12em; color: #c9a86a; }
.tip-turns { margin-top: 6px; font: italic 14px/1.2 var(--serif); color: #e8d3a2; }

/* ---------------------------------------------------------------- the bottom panel */
#hud { position: relative; z-index: 6; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  padding: 12px max(18px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at 30% 0%, rgba(255,200,120,.08), transparent 60%), linear-gradient(180deg, #3d2711, #23150a 70%, #1a1007);
  border-top: 3px solid transparent; border-image: linear-gradient(90deg, #6b4818, #f0cf7c 20%, #a2732c 50%, #f0cf7c 80%, #6b4818) 1;
  box-shadow: 0 -6px 18px rgba(0,0,0,.5); color: #f3e2b8; }
.hud-pic { height: calc(var(--hud) - 30px); aspect-ratio: 16 / 9; padding: 4px; border: 0; border-radius: 3px; background: var(--brass); box-shadow: 0 3px 10px rgba(0,0,0,.6); display: grid; place-items: center; }
.hud-pic img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; background: #0e0804; }
.hud-pic { background-color: #0e0804; }
.hud-pic::before { content: ""; position: absolute; }
.hud-info { min-width: 0; display: grid; gap: 3px; }
.hud-label { font: 600 11px/1 var(--caps); letter-spacing: .2em; color: #c9a86a; }
.hud-name { font: 700 clamp(17px, 2.1vw, 24px)/1.1 var(--caps); letter-spacing: .03em; color: #ffe3a0; text-shadow: 0 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-client { font: 500 11px/1.2 var(--caps); letter-spacing: .14em; color: #bfa06a; }
.hud-bar { margin-top: 6px; height: 12px; max-width: 520px; padding: 2px; border-radius: 7px; background: var(--brass); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 3px rgba(0,0,0,.6); }
.hud-bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(180deg, #fff1b8, #e9b54e 55%, #a0691c); transition: width .6s ease; box-shadow: 0 0 8px rgba(255,200,90,.5); }
.hud-bar { background-color: #1b1008; }
.hud-row { display: flex; align-items: center; gap: 14px; max-width: 520px; justify-content: space-between; }
.hud-rec { display: inline-flex; align-items: center; gap: 7px; font: 600 11px/1 var(--caps); letter-spacing: .12em; color: #f0cf7c; }
.hud-rec .seal { width: 18px; height: 18px; }
.hud-turns { font: italic 15px/1 var(--serif); color: #e8d3a2; margin-left: auto; white-space: nowrap; }
.hud-next { display: grid; justify-items: center; gap: 12px; padding: 0 8px; }
.next-label { font: 700 12px/1 var(--caps); letter-spacing: .16em; color: #ffe3a0; text-shadow: 0 1px 0 #000; white-space: nowrap; }
#next { width: calc(var(--hud) - 66px); height: calc(var(--hud) - 66px); border-radius: 50%; padding: 0; border: 0; position: relative;
  background: radial-gradient(circle at 50% 38%, #fff3c4 0%, #f0c96a 30%, #b57d2a 62%, #6b4414 100%);
  box-shadow: 0 0 0 3px #2a1708, 0 0 0 6px #c9974a, 0 0 0 8px #3b250c, 0 6px 18px rgba(0,0,0,.7), 0 0 26px rgba(255,200,90,.35);
  display: grid; place-items: center; transition: transform .12s ease, filter .2s; }
#next::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(70,40,10,.55), inset 0 6px 12px rgba(255,255,230,.45), inset 0 -8px 14px rgba(80,40,0,.45); pointer-events: none; }
#next svg { width: 46%; height: 46%; fill: none; stroke: #3a210a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#next svg .sand { fill: #3a210a; stroke: none; opacity: .85; }
#next:hover { filter: brightness(1.08); }
#next:active { transform: scale(.95); }
#next.ready { animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px #2a1708, 0 0 0 6px #e9b54e, 0 0 0 8px #3b250c, 0 6px 18px rgba(0,0,0,.7), 0 0 42px rgba(255,210,100,.75); } }
#next.turning svg { animation: flip .6s ease; }
@keyframes flip { to { transform: rotate(180deg); } }

/* ---------------------------------------------------------------- discovery */
#discovery { position: fixed; inset: 0; z-index: 30; color: #f3e2b8; background: radial-gradient(ellipse at 50% 30%, #3e2810 0%, #170e06 60%, #080503 100%);
  opacity: 0; transition: opacity .45s ease; }
#discovery.on { opacity: 1; }
.dc-rays { position: absolute; inset: -50%; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,214,140,.10) 0deg 6deg, rgba(255,214,140,0) 6deg 18deg);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 45%); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 45%);
  animation: rays 90s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
.dc-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.dc-inner { min-height: 100%; display: grid; justify-items: center; align-content: center; gap: 0; padding: 22px 18px calc(26px + env(safe-area-inset-bottom)); }
.dc-head { display: flex; align-items: center; gap: 14px; font: 700 14px/1 var(--caps); letter-spacing: .32em; text-indent: .32em; color: #e9c675; margin-bottom: 16px; text-transform: uppercase; }
.orn { width: 60px; height: 9px; background: linear-gradient(90deg, transparent, #c9974a) center / 100% 1px no-repeat, radial-gradient(circle, #e9c675 2.5px, transparent 3px) right center / 9px 9px no-repeat; }
.orn.r { transform: scaleX(-1); }
.dc-frame, .pa-frame { position: relative; padding: clamp(8px, 1.2vw, 14px); border-radius: 2px;
  background: linear-gradient(135deg, #7a5420, #f7dd94 18%, #a2732c 40%, #ffefb0 55%, #8a6224 75%, #e9c675 90%, #6b4818);
  box-shadow: 0 0 0 2px #2a1708, 0 18px 50px rgba(0,0,0,.75), 0 0 80px rgba(255,190,90,.18); }
.dc-frame::before, .pa-frame::before { content: ""; position: absolute; inset: clamp(5px, .8vw, 9px); border: 1px solid rgba(60,30,0,.55); pointer-events: none; }
.dc-frame img, .pa-frame img { display: block; width: auto; height: auto; background: #0d0804; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), 0 0 0 2px #3a230c; }
#dc-frame { cursor: pointer; }
.dc-frame img { max-width: min(880px, calc(100vw - 64px)); max-height: 50vh; max-height: 50svh; }
#discovery.on .dc-frame { animation: unveil 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes unveil { from { opacity: 0; transform: translateY(14px) scale(.96); filter: brightness(1.8) blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.dc-name { margin: 22px 0 0; font: 700 clamp(26px, 3.4vw, 40px)/1.05 var(--caps); letter-spacing: .06em; color: #ffe3a0; text-align: center; text-shadow: 0 2px 0 #000, 0 0 24px rgba(255,190,90,.35); }
.dc-client { margin-top: 6px; font: 600 12px/1 var(--caps); letter-spacing: .22em; color: #b9965a; text-align: center; }
.dc-quote, .pa-quote { margin: 18px 0 0; max-width: 760px; text-align: center; }
.dc-quote p { margin: 0; font: italic 400 clamp(20px, 2.3vw, 29px)/1.32 var(--serif); color: #fbecc8; text-wrap: balance; }
.dc-quote footer { margin-top: 10px; font: 500 15px/1.2 var(--serif); font-variant: small-caps; letter-spacing: .06em; color: #d6b878; }
#discovery.on .dc-quote { animation: ink 1.2s .7s ease both; }
@keyframes ink { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dc-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.brass-btn { min-height: 44px; padding: 0 22px; border-radius: 22px; border: 1px solid #e9c675; color: #f6e3b3; font: 700 13px/1 var(--caps); letter-spacing: .14em;
  background: linear-gradient(180deg, #5b3b18, #2c1b0b); box-shadow: inset 0 1px 0 rgba(255,220,150,.3), 0 3px 10px rgba(0,0,0,.6); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.brass-btn:hover { background: linear-gradient(180deg, #74501f, #3a2410); }
.brass-btn.gold { background: var(--brass); color: #2a1708; border-color: #fff0b8; text-shadow: 0 1px 0 rgba(255,240,200,.6); }
.brass-btn.gold:hover { filter: brightness(1.07); }
.brass-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
#dc-replay { width: 44px; padding: 0; }

/* ---------------------------------------------------------------- encyclopedia */
#pedia { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; padding: 18px; background: rgba(10,6,2,.72); opacity: 0; transition: opacity .3s; }
#pedia.on { opacity: 1; }
.pd-book { width: min(1220px, 100%); height: 100%; display: grid; grid-template-rows: 54px 1fr; border-radius: 6px; overflow: hidden;
  background: url(art/parchment.webp) center / cover, #ead8ac; box-shadow: 0 0 0 2px #2a1708, 0 0 0 6px #b8893c, 0 0 0 8px #3b250c, 0 24px 60px rgba(0,0,0,.7); }
.pd-top { display: grid; grid-template-columns: 54px 1fr 54px; align-items: center; background: linear-gradient(180deg, #5b3b18, #2a190a); border-bottom: 2px solid #c9974a; }
.pd-title { margin: 0; text-align: center; font: 700 17px/1 var(--caps); letter-spacing: .26em; text-indent: .26em; color: #f2d58c; text-shadow: 0 1px 0 #000; }
.pd-back, .pd-close { width: 44px; height: 44px; margin: 0 auto; border: 0; border-radius: 22px; background: transparent; color: #f2d58c; display: grid; place-items: center; font: 400 30px/1 var(--serif); }
.pd-back:hover, .pd-close:hover { background: rgba(255,220,150,.12); }
.pd-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pd-back { visibility: hidden; }
#pedia.reading .pd-back { visibility: visible; }
.pd-body { min-height: 0; display: grid; grid-template-columns: 250px 1fr; }
.pd-index { min-height: 0; overflow-y: auto; padding: 14px 10px 24px 14px; border-right: 1px solid rgba(90,60,25,.35); background: rgba(80,50,15,.08); }
.pd-index h4 { margin: 10px 6px 6px; font: 700 11px/1 var(--caps); letter-spacing: .22em; color: var(--ink-soft); }
.pd-index button { display: flex; width: 100%; align-items: center; gap: 9px; padding: 5px 6px; border: 0; border-radius: 4px; background: none; text-align: left; color: var(--ink); font: 500 16px/1.15 var(--serif); }
.pd-index button img { width: 30px; height: 30px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px #b8893c, 0 0 0 3px #4a2f10; }
.pd-index button:hover { background: rgba(120,80,30,.14); }
.pd-index button[aria-current="true"] { background: linear-gradient(90deg, rgba(150,100,30,.32), rgba(150,100,30,.08)); font-weight: 600; }
.pd-page { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 26px clamp(18px, 4vw, 52px) 60px; -webkit-overflow-scrolling: touch; outline: none; }
#pd-home h3 { margin: 4px 0 18px; text-align: center; font: 700 15px/1 var(--caps); letter-spacing: .26em; color: var(--ink-soft); }
.pd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 18px 10px; }
.pd-grid button { border: 0; background: none; padding: 4px; display: grid; justify-items: center; gap: 8px; color: var(--ink); border-radius: 6px; }
.pd-grid button:hover { background: rgba(120,80,30,.12); }
.pd-grid img { width: 92px; height: 92px; border-radius: 50%; padding: 4px; background: conic-gradient(from 210deg, #6b4818, #e9c675, #8a6224, #f7dd94, #6b4818, #c9974a, #6b4818); box-shadow: 0 3px 8px rgba(50,25,0,.4); }
.pd-grid span { font: 700 11.5px/1.2 var(--caps); letter-spacing: .04em; text-align: center; }
.pd-grid .leader img { background: var(--brass); object-fit: cover; }
#pd-article, #pd-leader { max-width: 900px; margin: 0 auto; }
.pa-frame { width: fit-content; max-width: 100%; margin: 4px auto 0; box-shadow: 0 0 0 2px #2a1708, 0 12px 30px rgba(40,20,0,.45); }
.pa-frame img { max-width: 100%; max-height: 54vh; max-height: 54svh; }
.pa-name { margin: 20px 0 0; text-align: center; font: 700 clamp(26px, 3.2vw, 38px)/1.05 var(--caps); letter-spacing: .05em; color: #3a2210; }
.pa-client { margin-top: 6px; text-align: center; font: 600 12px/1 var(--caps); letter-spacing: .22em; color: var(--ink-soft); }
.pa-quote { margin: 18px auto 0; padding: 16px 22px 14px; border-top: 1px solid rgba(90,60,25,.45); border-bottom: 1px solid rgba(90,60,25,.45); }
.pa-quote p { margin: 0; font: italic 400 clamp(19px, 2vw, 25px)/1.35 var(--serif); color: #2e1c0c; text-wrap: balance; }
.pa-quote footer { margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; font: 500 15px/1.2 var(--serif); font-variant: small-caps; letter-spacing: .06em; color: var(--ink-soft); }
.pa-hear { width: 36px; height: 36px; border-radius: 18px; padding: 0; border: 1px solid #8a6224; background: rgba(120,80,30,.12); color: #5a3a14; display: grid; place-items: center; }
.pa-hear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.pa-work { margin-top: 26px; --ab-fg: #2e1c0c; --ab-muted: #6e5434; --ab-accent: #8a5a14; --ab-chrome: 150px; font-size: 18px; line-height: 1.5; }
.pa-work .ab-lede { font-size: 20px; line-height: 1.45; text-align: center; max-width: 720px; margin: 0 auto; }
.pa-work .ab-heading { font: 700 15px/1.2 var(--caps); letter-spacing: .12em; color: #3a2210; padding-top: 12px; border-top: 1px solid rgba(90,60,25,.35); }
.pa-work .ab-text { color: #3e2a14; }
.pa-work .ab-credits { font-size: 15px; padding-top: 14px; border-top: 1px solid rgba(90,60,25,.35); }
.pa-work figcaption { font: 600 12px/1.3 var(--caps); letter-spacing: .1em; color: #6e5434; text-align: center; }
.pa-work .ab-frame { box-shadow: 0 0 0 2px #3a230c, 0 0 0 5px #b8893c, 0 8px 20px rgba(40,20,0,.45); }
.pa-work .ab-image img { box-shadow: 0 0 0 1px #3a230c, 0 6px 16px rgba(40,20,0,.35); }
.pa-work audio { filter: sepia(.4) saturate(.8); }
.pa-nav { margin-top: 40px; display: flex; justify-content: space-between; gap: 12px; }
.pa-nav button { border: 0; background: none; padding: 8px 4px; font: 600 13px/1.2 var(--caps); letter-spacing: .1em; color: #5a3a14; display: inline-flex; align-items: center; gap: 8px; }
.pa-nav button:hover { text-decoration: underline; }
.pa-nav img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px #b8893c; }
#pd-leader h3 { margin: 6px 0 4px; text-align: center; font: 700 clamp(28px, 3.4vw, 42px)/1.05 var(--caps); letter-spacing: .08em; color: #3a2210; }
#pd-leader .ld-sub { text-align: center; font: 600 13px/1.2 var(--caps); letter-spacing: .18em; color: var(--ink-soft); }
#pd-leader .ld-bio { margin: 22px auto 0; max-width: 640px; text-align: center; font: italic 400 22px/1.4 var(--serif); }
#pd-leader .ld-contact { margin: 22px auto 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
#pd-leader .ld-contact a { text-decoration: none; }
#pd-leader .ld-place { margin-top: 14px; text-align: center; font: 500 16px/1.3 var(--serif); color: var(--ink-soft); }
#pd-leader ol { list-style: none; margin: 34px auto 0; padding: 0; max-width: 700px; display: grid; gap: 14px; }
#pd-leader li { padding: 12px 0 0; border-top: 1px solid rgba(90,60,25,.35); }
#pd-leader li b { display: block; font: 700 14px/1.2 var(--caps); letter-spacing: .08em; color: #3a2210; }
#pd-leader li i { display: block; font: 600 11px/1.3 var(--caps); letter-spacing: .16em; font-style: normal; color: var(--ink-soft); margin-top: 3px; }
#pd-leader li span { display: block; margin-top: 4px; font-size: 17px; line-height: 1.4; }

/* ---------------------------------------------------------------- ending */
#ending { position: fixed; inset: 0; z-index: 28; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(40,25,8,.86), rgba(5,3,1,.95)); opacity: 0; transition: opacity .5s; }
#ending.on { opacity: 1; }
.en-card { position: relative; width: min(640px, 94vw); aspect-ratio: 1; }
.en-ring { position: absolute; inset: 0; }
.en-ring img { position: absolute; width: 13%; height: 13%; border-radius: 50%; padding: 3px; background: conic-gradient(from 210deg, #8a6224, #fff1b8, #c9974a, #fff4c4, #9a6c28, #f7dd94, #8a6224); box-shadow: 0 4px 10px rgba(0,0,0,.6); animation: pop .6s both; }
@keyframes pop { from { opacity: 0; transform: scale(.5); } }
.en-actions { position: absolute; inset: 0; display: grid; place-content: center; gap: 14px; }

/* ---------------------------------------------------------------- phones and small screens */
@media (max-width: 760px) {
  :root { --top: 48px; --hud: 132px; }
  .tb-name { font-size: 12px; letter-spacing: .16em; }
  .tb-btn span { display: none; }
  .tb-btn { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 18px; }
  .tb-turn { font-size: 12px; padding: 0 4px; }
  #tree-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
  #tree-wrap::-webkit-scrollbar { display: none; }
  #tree-wrap::after { position: fixed; top: var(--top); bottom: var(--hud); }
  #hud { gap: 10px; padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .hud-pic { height: 64px; }
  #hud { grid-template-columns: auto 1fr auto; }
  .hud-name { font-size: 16px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .hud-client { font-size: 9.5px; }
  .hud-label { font-size: 9.5px; }
  .hud-rec { font-size: 0; gap: 0; }
  .hud-rec .seal { width: 16px; height: 16px; }
  .hud-turns { font-size: 13px; }
  .hud-row { gap: 6px; }
  #next { width: 62px; height: 62px; }
  .hud-next { gap: 10px; padding: 0 6px; }
  .next-label { font-size: 10px; letter-spacing: .1em; }
  #pedia { padding: 0; }
  .pd-book { border-radius: 0; box-shadow: none; }
  .pd-body { grid-template-columns: 1fr; }
  .pd-index { display: none; }
  .pd-page { padding: 18px 16px 50px; }
  .pd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 6px; }
  .pd-grid img { width: 84px; height: 84px; }
  .pa-work { --ab-chrome: 120px; font-size: 17px; }
  .dc-head { font-size: 11px; letter-spacing: .24em; margin-bottom: 12px; }
  .orn { width: 34px; }
  .dc-frame img { max-width: calc(100vw - 44px); max-height: 44vh; max-height: 44svh; }
  .brass-btn.wide { padding: 0 18px; }
}
@media (max-width: 760px) and (max-height: 700px) { :root { --hud: 116px; } }
@media (min-width: 761px) and (max-height: 700px) { :root { --hud: 128px; --top: 44px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }
}