:root{
  --void:#0f0e0c;
  --void2:#17150f;
  --paper:#eae6dc;
  --paper2:#e2ddd1;
  --paper3:#d6d0c1;
  --ink:#262219;
  --ink2:#443d31;
  --dim:#756c5c;
  --faint:#968d7c;
  --rule:#aaa08c;
  --ember:#a84e1d;
  --moss:#46543a;
  --red:#873b2a;
  --edge:rgba(38,34,25,.17);
  --veil:rgba(234,230,220,.92);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font:13px/1.65 "Courier Prime",ui-monospace,monospace;
  -webkit-font-smoothing:antialiased;
}
body.deep{background:var(--void)}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background-image:radial-gradient(circle at 50% 40%,transparent 60%,rgba(0,0,0,.18) 100%);
}

a{color:inherit;text-decoration:none;border-bottom:1px solid var(--edge)}
a:hover{border-bottom-color:var(--ink)}
button:focus-visible,a:focus-visible,input:focus-visible{
  outline:1px solid var(--ember);outline-offset:3px;
}

.sheet{
  position:relative;
  min-height:100vh;
  margin:0 auto;
  padding:26px max(30px,calc(50vw - 620px)) 40px;
  background:var(--paper);
}
.sheet::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 8%,rgba(0,0,0,.05),transparent 30%),
    radial-gradient(circle at 88% 92%,rgba(0,0,0,.06),transparent 35%);
  mix-blend-mode:multiply;
}

.sheet + .sheet{margin-top:26px}

/* --- chrome --- */
.bar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.crumb{color:var(--dim);letter-spacing:.04em;font-size:11px}

/* --- map: the map is the navigation --- */
.map{position:relative;margin:14px 0 0}
.map img{
  width:100%;display:block;
  /* the engraving's paper is flattened to white in the file itself, so multiply
     drops it out of the page entirely — no edge to hide, only strokes remain */
  filter:url(#wind1) saturate(.8) contrast(1.12);
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(#0000,#000 6%,#000 94%,#0000),linear-gradient(90deg,#0000,#000 4%,#000 96%,#0000);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(#0000,#000 6%,#000 94%,#0000),linear-gradient(90deg,#0000,#000 4%,#000 96%,#0000);
  mask-composite:intersect;
}
/* wind: two static warps of the same engraving crossfading — the strokes sway,
   but each filter rasters once and the fade runs on the compositor */
.map .m2{
  position:absolute;inset:0;
  filter:url(#wind2) saturate(.8) contrast(1.12);
  opacity:0;
  animation:windfade 7s ease-in-out infinite;
}
@keyframes windfade{0%,100%{opacity:0}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .map img{filter:saturate(.8) contrast(1.12)}
  .map .m2{display:none}
}

/* stations are hotspots over the engraving; the art carries the labels */
.hot{
  position:absolute;border:0;
  left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  transform:translate(-50%,-50%);
  cursor:pointer;
}
.pin{
  position:absolute;left:50%;bottom:-6px;transform:translate(-50%,100%);
  white-space:nowrap;text-align:center;opacity:0;pointer-events:none;
  transition:opacity .18s ease;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:var(--paper);padding:5px 9px;border:1px solid var(--rule);z-index:2;
}
.pin i{display:block;margin-top:4px;font-style:normal;text-transform:none;letter-spacing:0;color:var(--dim)}
.hot:hover .pin{opacity:1}

/* --- life on the map: overlays only, the engraving itself stays still --- */
.fx span{
  position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);pointer-events:none;
  animation-delay:var(--del,0s);
}
.glow{
  width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle,rgba(196,110,30,.5),rgba(196,110,30,.15) 45%,transparent 68%);
  filter:blur(5px);mix-blend-mode:multiply;
  animation:flicker var(--dur,3s) ease-in-out infinite;
}
@keyframes flicker{
  0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}
  23%{opacity:.85;transform:translate(-50%,-50%) scale(1.1)}
  41%{opacity:.5;transform:translate(-50%,-50%) scale(.94)}
  67%{opacity:.75;transform:translate(-50%,-50%) scale(1.05)}
  82%{opacity:.6;transform:translate(-50%,-50%) scale(.98)}
}
.smoke{
  width:5px;height:5px;border-radius:50%;
  background:rgba(72,66,55,.4);filter:blur(2px);
  animation:rise var(--dur,7s) linear infinite;
}
@keyframes rise{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  12%{opacity:.7}
  60%{opacity:.35}
  100%{opacity:0;transform:translate(calc(-50% + 16px),calc(-50% - 52px)) scale(2.2)}
}
.spark{
  width:2.5px;height:2.5px;border-radius:50%;
  background:rgba(196,100,25,.85);
  animation:spark var(--dur,3.5s) ease-out infinite;
}
@keyframes spark{
  0%,55%{opacity:0;transform:translate(-50%,-50%)}
  60%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + 7px),calc(-50% - 30px))}
}
.lamp{
  width:6px;height:8px;border-radius:1px;
  background:rgba(196,130,35,.55);filter:blur(1.5px);mix-blend-mode:multiply;
  animation:lamp 5.2s ease-in-out infinite;
}
@keyframes lamp{
  0%,100%{opacity:.7}
  8%{opacity:.4}
  11%{opacity:.75}
  46%{opacity:.6}
  49%{opacity:.3}
  52%{opacity:.7}
}
/* wind: loose glyphs tumbling east, and faint gust streaks */
.leafbit{
  font-size:12px;line-height:1;color:var(--ink);opacity:0;
  animation:blowby var(--dur,15s) ease-in-out infinite;
}
@keyframes blowby{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(0deg)}
  8%{opacity:.9}
  30%{opacity:.85;transform:translate(calc(-50% + calc(var(--drift) * .3)),calc(-50% - 22px)) rotate(150deg)}
  55%{opacity:.7;transform:translate(calc(-50% + calc(var(--drift) * .62)),calc(-50% + 10px)) rotate(280deg)}
  80%{opacity:.5;transform:translate(calc(-50% + calc(var(--drift) * .85)),calc(-50% - 16px)) rotate(390deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--drift)),calc(-50% - 4px)) rotate(450deg)}
}
.gust{
  width:120px;height:1px;border-radius:1px;
  background:linear-gradient(90deg,transparent,var(--dim),transparent);
  opacity:0;
  animation:gust var(--dur,12s) ease-in-out infinite;
}
@keyframes gust{
  0%,55%,100%{opacity:0;transform:translate(-50%,-50%) scaleX(.4)}
  62%{opacity:.5;transform:translate(calc(-50% + 80px),calc(-50% - 5px)) scaleX(1.4)}
  72%{opacity:0;transform:translate(calc(-50% + 200px),calc(-50% - 10px)) scaleX(.7)}
}
@media(prefers-reduced-motion:reduce){.fx span{animation:none}}

.presence{
  text-align:center;margin-top:20px;color:var(--dim);font-size:12px;letter-spacing:.02em;
}
.presence .sep{opacity:.4;padding:0 8px}
.heat{color:var(--ember)}

/* --- panels --- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
.panel h3{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  font-weight:500;margin:0 0 12px;display:flex;justify-content:space-between;gap:12px;
}
.panel-state{color:var(--ember);font-size:9px;letter-spacing:.08em;white-space:nowrap}
.box{
  border:1px solid var(--rule);padding:12px 14px;background:var(--paper2);
  font-size:11.5px;line-height:1.85;
}
.box .t{color:var(--dim)}
.box .say{display:block;padding-left:2px}
.noise{
  display:block;
  border:1px solid var(--rule);padding:12px 14px;background:var(--paper2);
  color:var(--faint);font-size:10px;line-height:1.5;
  height:100%;overflow:hidden;word-break:break-all;user-select:none;
}
.puzzle-tease{position:relative;display:block;border:0;min-height:148px;overflow:hidden}
.puzzle-tease .noise{height:148px;opacity:.34;transition:opacity .25s ease,color .25s ease}
.puzzle-signal{
  position:absolute;inset:1px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:18px;background:radial-gradient(circle,var(--veil) 0,rgba(0,0,0,0) 76%);
}
.puzzle-signal b{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-weight:700}
.puzzle-signal i{font-size:10.5px;color:var(--dim);font-style:normal;margin-top:5px;max-width:34ch}
.puzzle-signal em{font-size:10px;color:var(--ember);font-style:normal;margin-top:13px;letter-spacing:.12em;text-transform:uppercase}
.puzzle-tease:hover .noise,.puzzle-tease:focus .noise{opacity:.58;color:var(--ink2)}

/* --- station plates: ascii art, not images --- */
.scene{
  position:relative;margin:30px 0 26px;padding:34px 10px;
  text-align:center;
}
.scene pre{
  display:inline-block;text-align:left;margin:0;
  font-size:13px;line-height:1.35;color:var(--ink);
  text-shadow:0 0 1px rgba(38,35,29,.15);
}
.scene .fl{color:var(--ember);animation:embers 2.6s ease-in-out infinite}
@keyframes embers{0%,100%{opacity:.8}30%{opacity:1}60%{opacity:.65}}
.scene .dm{color:var(--dim)}
.scene .glow,.scene .lamp{z-index:-1}
.scene .fx-wrap{position:absolute;inset:0;pointer-events:none}

/* --- station pages read as one document, not a dashboard --- */
.doc{max-width:580px;margin:24px auto 60px}
.doc h1{
  font-family:"UnifrakturCook",serif;font-weight:700;text-align:center;
  font-size:clamp(38px,5vw,54px);line-height:1;margin:18px 0 6px;
}
.doc .eng{
  text-align:center;color:var(--dim);font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;margin-bottom:34px;
}
.doc p{color:var(--ink2);line-height:2.05;margin:0 0 20px}
.doc .vers{font-style:italic;text-align:center;color:var(--dim);margin:0 0 34px;line-height:2}
.doc .zahl{color:var(--ink);font-weight:700}
.notiz{
  text-align:center;color:var(--dim);font-size:11px;line-height:2;
  margin:30px 0;
}
.notiz .t{color:var(--faint)}
.doc .ask{
  display:inline-block;border:0;border-bottom:1px dashed var(--dim);
  background:none;font:inherit;color:var(--ink);width:20ch;outline:none;
  padding:0 2px;border-radius:0;
}
.doc .ask:focus{border-bottom-style:solid;border-bottom-color:var(--ink)}
.antwort{font-style:italic;color:var(--dim);min-height:2em}
.zeile{border:0;border-top:1px solid var(--rule);width:80px;margin:38px auto}

/* --- interactive strokes inside the art --- */
.scene .i{cursor:pointer;transition:color .15s ease}
.scene .i:hover{color:var(--ember)}
.scene .i.aus{color:var(--faint);cursor:default}
.flack{animation:lampflack .5s ease 1}
@keyframes lampflack{0%,100%{opacity:1}30%{opacity:.15}55%{opacity:.9}70%{opacity:.3}}

/* --- the descent: reading continues downward --- */
.depths{margin-top:0}
.tiefe-frag{animation:sink .8s ease both}
@keyframes sink{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.tiefe-frag .mark{
  display:block;text-align:center;color:var(--dim);font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;margin:36px 0 20px;
}
.tiefe-frag .mark::before,.tiefe-frag .mark::after{content:" — ";color:var(--faint)}
.tiefe-frag p{margin:0 0 18px;color:var(--ink2);line-height:2.05}
.tiefe-frag .t{color:var(--dim)}
.tiefe-frag pre{margin:14px auto 18px;color:var(--dim);font-size:12px;line-height:1.5;display:table}
/* strata navigation: hinauf · where you are · tiefer */
.sinkin{animation:sink .55s ease}
.stratanav{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  margin:40px 0 0;
}
.lvl{
  border:0;background:none;color:var(--dim);
  font:inherit;font-size:11px;letter-spacing:.2em;cursor:pointer;padding:6px 0;
}
.lvl:hover{color:var(--ink)}
.lvl.up{text-align:left}
.lvl.dn,.stratanav a{text-align:right}
.lvl.aus{cursor:default}
.lvlmark{
  color:var(--faint);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  text-align:center;
}
.stratanav a{font-size:11px;letter-spacing:.06em;color:var(--dim)}

/* --- die chronik: the endless record --- */
.chronik{max-width:640px;margin:70px auto 0}
.chronik h3{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  font-weight:700;margin:0 0 10px;text-align:center;
}
.chronik-sub{color:var(--dim);font-size:11px;text-align:center;line-height:1.9;margin:0 0 30px}
.ch{
  padding:11px 0;border-bottom:1px solid var(--edge);
  font-size:11.5px;line-height:1.8;color:var(--ink2);
}
.ch b{font-weight:700;color:var(--ink)}
.ch .t{color:var(--dim)}
.ch .corr{color:var(--faint);word-break:break-all}
.ch .still{color:var(--dim);font-style:italic}
.ch.depthmark{
  border:0;padding:30px 0 10px;text-align:center;
  color:var(--dim);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
.tiefer{
  display:block;width:100%;border:0;background:none;text-align:center;color:var(--dim);
  font:inherit;font-size:10.5px;letter-spacing:.18em;padding:30px 0 10px;cursor:pointer;
}
.tiefer:hover{color:var(--ink)}
.archive-end{text-align:center;padding:42px 0 14px;color:var(--dim)}
.archive-end::before{content:"";display:block;width:52px;border-top:1px solid var(--rule);margin:0 auto 22px}
.archive-end span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.archive-end small{display:block;color:var(--faint);font-size:10.5px;margin-top:8px}

.foot{
  display:flex;justify-content:space-between;margin-top:34px;padding-top:14px;
  border-top:1px solid var(--rule);color:var(--faint);font-size:11px;
}

/* --- die prüfung: WARD is treated as a ritual, never as a dashboard --- */
.trial-meta{margin-top:8px}
.trial-doc{max-width:720px}
.trial-scene{padding:24px 10px 18px;margin-bottom:12px}
.trial-scene pre{font-size:14px;line-height:1.4}
.probe-note{
  display:grid;grid-template-columns:124px 1fr;gap:18px;align-items:start;
  margin:8px 0 28px;padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  color:var(--dim);font-size:10.5px;line-height:1.7;
}
.probe-note b{color:var(--ember);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.ward-ledger{
  display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--rule);
  background:var(--paper2);margin:0 0 12px;
}
.ward-ledger>div{padding:15px 16px;min-width:0}
.ward-ledger>div+div{border-left:1px solid var(--rule)}
.ward-ledger span,.ward-ledger strong{display:block}
.ward-ledger>div>span{color:var(--dim);font-size:9px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}
.ward-ledger strong{color:var(--ink);font-size:18px;line-height:1.25;font-weight:700;overflow-wrap:anywhere}
.ward-ledger strong small{display:inline;color:var(--dim);font-size:9px;font-weight:400;letter-spacing:.04em}
.trial-rules{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--rule);margin-bottom:28px}
.trial-rules div{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;color:var(--dim);font-size:9.5px}
.trial-rules div+div{border-left:1px solid var(--edge)}
.trial-rules b{color:var(--ink2);font-weight:400;white-space:nowrap}
.trial-stage{position:relative;border:1px solid var(--rule);background:var(--paper2);padding:26px 28px;min-height:210px}
.trial-stage::before{
  content:"PRÜFUNG 0043";position:absolute;right:14px;top:10px;color:var(--faint);
  font-size:8px;letter-spacing:.18em;writing-mode:vertical-rl;
}
.trial-sealed{max-width:500px;margin:15px auto;text-align:center}
.trial-sealed p{color:var(--ink2);font-size:11.5px;line-height:1.9;margin:0 auto 22px;max-width:46ch}
.ritual-button{
  appearance:none;border:1px solid var(--ink2);background:var(--ink);color:var(--paper);
  font:inherit;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;padding:11px 17px;
  cursor:pointer;transition:background .16s ease,color .16s ease,transform .16s ease;
}
.ritual-button span,.ritual-button small{display:block}
.ritual-button small{font-size:8.5px;letter-spacing:.05em;text-transform:none;opacity:.65;margin-top:3px}
.ritual-button:hover{background:var(--ember);border-color:var(--ember);transform:translateY(-1px)}
.ritual-button:disabled{background:var(--rule);border-color:var(--rule);cursor:not-allowed;transform:none}
.ritual-button.compact{padding:9px 13px;font-size:9.5px}
.trial-heading{display:flex;justify-content:space-between;color:var(--faint);font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding-right:16px}
.trial-instruction{max-width:540px;margin:18px 0 16px;color:var(--ink2);font-size:11.5px;line-height:1.9}
.fragments{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fragment{
  min-height:92px;border:1px solid var(--rule);background:var(--paper);color:var(--ink2);
  font:inherit;text-align:left;padding:11px 13px;cursor:pointer;transition:border-color .16s ease,background .16s ease;
}
.fragment span,.fragment b,.fragment i{display:block}
.fragment span{color:var(--dim);font-size:9.5px;margin-bottom:5px}
.fragment b{font-size:10.5px;line-height:1.65;font-weight:400}
.fragment i{color:var(--ember);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;font-style:normal;margin-top:8px}
.fragment:hover{border-color:var(--ink2);background:var(--paper3)}
.fragment:disabled{cursor:default;opacity:.43;background:var(--paper2)}
.chosen-order{margin-top:20px;padding-top:14px;border-top:1px solid var(--rule)}
.chosen-order>span{display:block;color:var(--dim);font-size:9px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.chosen-order ol{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;list-style:none;margin:0;padding:0;counter-reset:ward-order}
.chosen-order li{
  counter-increment:ward-order;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--rule);padding:6px 4px;color:var(--dim);min-width:0;
}
.chosen-order li::before{content:counter(ward-order,upper-roman);font-size:8px;color:var(--faint);margin-right:5px}
.chosen-order li span{font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chosen-order li b{font-size:14px;color:var(--ink)}
.chosen-order li.empty{opacity:.5}
.trial-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:20px}
.text-button,.reset-probe{
  border:0;border-bottom:1px dashed var(--dim);background:none;color:var(--dim);padding:2px 0;
  font:inherit;font-size:9.5px;cursor:pointer;
}
.text-button:hover,.reset-probe:hover{color:var(--ink);border-bottom-style:solid}
.trial-result{text-align:center;max-width:500px;margin:14px auto;padding:18px 20px}
.trial-result span,.trial-result b{display:block}
.trial-result span{color:var(--dim);font-size:9px;letter-spacing:.13em;text-transform:uppercase}
.trial-result b{color:var(--ink);font-size:16px;letter-spacing:.12em;margin:7px 0}
.trial-result p{color:var(--ink2);font-size:11px;line-height:1.8;margin:0 0 14px}
.trial-result p strong{color:var(--ember)}
.trial-result.solved{border:1px solid var(--moss);background:rgba(70,84,58,.08)}
.trial-result.solved b{color:var(--moss);font-size:24px;letter-spacing:.32em;padding-left:.32em}
.trial-result.failed{border:1px solid var(--rule)}
.next-trials{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.next-trials div{display:grid;grid-template-columns:48px 1fr auto;align-items:center;border-bottom:1px solid var(--edge);padding:11px 3px;color:var(--faint)}
.next-trials span{font-size:9px;letter-spacing:.12em}
.next-trials b{color:var(--dim);font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.09em}
.next-trials small{font-size:8.5px}
.reset-probe{display:block;margin:24px auto 0;color:var(--faint);font-size:9px}

/* --- das archiv: a wiki with no bottom. article types reuse the site's
       plate styles so the descent keeps changing shape --- */
.wikimeta{
  text-align:center;color:var(--dim);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 34px;
}
.kammer{min-height:260px}
.kammer p{color:var(--ink2);line-height:2.05;margin:0 0 20px}
.az-note{color:var(--dim);font-size:11.5px;text-align:center;max-width:46ch;margin:30px auto 20px}
.az-allein{text-align:center;color:var(--dim);margin:44px auto;max-width:38ch}

/* the plate: dim engraving, and the strokes that lead somewhere warm up */
.az-art{
  display:table;margin:4px auto 30px;color:var(--dim);
  font-size:13px;line-height:1.35;text-align:left;
}
.az-art a{border-bottom:0;color:inherit;cursor:pointer;transition:color .15s ease}
.az-art a:hover{color:var(--ember)}

/* die säule: the live block where the category reports its own trades */
.saeule{
  border:1px solid var(--rule);background:var(--paper2);
  padding:13px 15px;margin:6px 0 24px;font-size:11.5px;line-height:1.9;color:var(--ink2);
}
.saeule .adr{color:var(--dim);overflow-wrap:anywhere}
.saeule .zug .t{color:var(--dim)}
.saeule a{color:inherit}

.az-fenster{
  text-align:center;color:var(--faint);font-size:10px;letter-spacing:.14em;
  margin-top:18px;min-height:1em;
}

.seealso{margin:34px 0 10px;border-top:1px solid var(--rule);padding-top:14px}
.seealso h3{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  font-weight:500;margin:0 0 10px;
}
.seealso a{display:inline-block;margin:0 18px 8px 0;font-size:12px;line-height:1.8}

.redact{
  display:block;height:13px;background:var(--ink2);opacity:.8;
  margin:10px 0;user-select:none;
}

/* verzeichnis articles: the card catalog, every card a door */
.az-karten{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.az-karte{
  display:block;border:1px solid var(--rule);background:var(--paper2);color:var(--ink2);
  padding:11px 13px;
}
.az-karte:hover{border-color:var(--ink2);border-bottom-color:var(--ink2)}
.az-karte span{display:block;color:var(--dim);font-size:9.5px;letter-spacing:.1em;margin-bottom:5px}
.az-karte b{font-size:11px;line-height:1.7;font-weight:700;color:var(--ink)}
.az-karte i{display:block;font-style:italic;color:var(--dim);font-size:10.5px;line-height:1.6;margin-top:6px}

/* ausgezählt articles: the walls count back */
.az-wand{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.az-tally{
  border:1px solid var(--rule);background:var(--paper2);color:var(--ink);
  font:inherit;font-size:13px;letter-spacing:1px;padding:13px 10px;text-align:left;
  cursor:pointer;line-height:1.6;
}
.az-tally span{display:block;color:var(--faint);font-size:9px;letter-spacing:.1em;margin-top:6px}
.az-tally:hover{border-color:var(--ink2)}

/* protokolliert articles: pressed voices, the old layer bleeds through */
.az-press{
  position:relative;padding:14px 16px;border:1px solid var(--edge);
  margin:0 0 14px;line-height:2;color:var(--ink2);overflow:hidden;
}
.az-press b{font-weight:700;color:var(--ink)}
.az-hinter{
  position:absolute;inset:4px 8px auto;color:var(--faint);opacity:.35;
  filter:blur(.6px);font-size:15px;white-space:nowrap;pointer-events:none;
  user-select:none;
}

/* --- location pages --- */
.loc{display:grid;grid-template-columns:1fr 260px;gap:34px;align-items:start;margin-top:26px}
.loc h1{
  font-family:"UnifrakturCook",serif;font-weight:700;font-size:clamp(34px,5vw,52px);
  line-height:1;margin:0 0 16px;
}
.lede{color:var(--ink2);line-height:1.9;margin:0 0 4px}
.lede + .lede{color:var(--dim)}


.side{font-size:11px;color:var(--dim);line-height:1.8}
.side .k{letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-size:10px}
.side .v{color:var(--ink);font-size:20px;margin:2px 0 18px;letter-spacing:.02em}
.side .v.small{font-size:13px}

.bars{display:flex;gap:2px;margin:6px 0 4px}
.bars i{width:9px;height:12px;background:var(--rule);display:block}
.bars i.on{background:var(--ink)}

.rule{border:0;border-top:1px solid var(--rule);margin:26px 0}

.entries{width:100%;border-collapse:collapse;font-size:11.5px}
.entries td{padding:5px 0;border-bottom:1px solid var(--edge);color:var(--ink2)}
.entries td:last-child{text-align:right;color:var(--dim);white-space:nowrap}

.quote{color:var(--dim);line-height:1.9;margin:22px 0 0;max-width:34ch}

.search{display:flex;border:1px solid var(--rule);background:var(--paper2);margin-top:10px}
.search input{
  flex:1;border:0;background:transparent;padding:9px 12px;color:var(--ink);
  font:inherit;font-size:11.5px;outline:none;
}
.search input::placeholder{color:var(--faint)}
.search button{border:0;background:transparent;color:var(--dim);padding:0 12px;cursor:pointer;font:inherit}
.search button:hover{color:var(--ink)}

.relics{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.relic{
  flex:0 0 92px;border:1px solid var(--rule);background:var(--paper2);
  padding:10px 6px 8px;text-align:center;
}
.relic pre{margin:0 0 8px;font-size:10.5px;line-height:1.3;color:var(--ink2);display:inline-block;text-align:left}
.relic span{display:block;color:var(--dim);font-size:9.5px;letter-spacing:.08em}
.relic.locked{opacity:.5}
.relic.locked pre{color:var(--faint);font-size:16px}

.chart{border:1px solid var(--rule);background:var(--paper2);padding:8px}
.chart svg{display:block;width:100%;height:70px}
.chart .axis{fill:var(--faint);font-size:8px}

.log{font-size:11px;line-height:1.9;color:var(--ink2)}
.log .t{color:var(--dim)}

h3.sec{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  font-weight:500;margin:30px 0 10px;display:flex;justify-content:space-between;align-items:baseline;
}
h3.sec .count{letter-spacing:.06em;color:var(--faint)}
.entries .dots,.dim{color:var(--faint)}
.answer{color:var(--dim);font-size:11.5px;line-height:1.9;margin:10px 0 0;min-height:1.9em}
.axis-row{display:flex;justify-content:space-between;color:var(--faint);font-size:9px;margin-top:4px}
.chart svg{color:var(--ember)}

.sealed{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.room{
  border:1px solid var(--rule);background:var(--paper2);color:var(--dim);
  font:inherit;font-size:10.5px;letter-spacing:.06em;padding:14px 4px;cursor:pointer;
}
.room:hover{color:var(--ink);border-color:var(--ink2)}

.box .who{color:var(--ink)}
.box .mine{display:block;opacity:1;transition:opacity 3.6s ease}
.box .mine.gone{opacity:0}

/* --- hidden layer --- */
body.deep{display:flex;align-items:center;min-height:100vh;padding:40px 20px}
body.deep .leaf p{margin:0 0 14px}

/* --- index of other locations --- */
.others{border-left:1px solid var(--rule);padding-left:24px}
.others h3{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:500;margin:0 0 18px}
.other{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--edge)}
.other .frame{width:44px;height:44px}
.other img{width:100%;display:block;mix-blend-mode:multiply}
.other .name{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.other .state{color:var(--dim);font-size:11px;line-height:1.6;margin-top:5px}
.other.locked{opacity:.45}

/* --- hidden layer --- */
.leaf{
  width:min(100% - 8px,640px);margin:0 auto;background:var(--void2);
  border:1px solid #262218;padding:22px 24px;color:#8e8672;
  font-size:12px;line-height:1.9;box-shadow:0 20px 60px rgba(0,0,0,.7);
}
.leaf .path{color:#5f5946;font-size:11px;margin-bottom:18px}
.leaf .t{color:#5f5946}
.leaf .who{color:#a89e86}
.leaf .corrupt{color:#4e4938;word-break:break-all;line-height:1.45;font-size:10px;user-select:none}
.leaf .center{text-align:center;padding:46px 0;color:#8e8672;line-height:2.2}
.leaf .center .sprig{width:22px;opacity:.5;margin-bottom:22px}
.leaf .cap{color:#5f5946;font-size:11px;text-align:right;margin-top:10px}
.leaf .wasser{
  color:#8e8672;font-size:13px;line-height:1.4;margin:24px auto;
  display:table;
}


@media(max-width:820px){
  .cols,.loc{grid-template-columns:1fr}
  .others{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:20px}
  .pin{font-size:9.5px;padding:4px 7px}
}

@media(max-width:600px){
  .sheet{padding:20px 18px 32px}
  .bar{gap:12px}
  .map{margin-left:-10px;margin-right:-10px}
  .map img{min-height:240px;object-fit:cover;object-position:center}
  .pin{display:none}
  .presence{font-size:10.5px;line-height:1.8}
  .presence .sep{padding:0 4px}
  .cols{gap:22px;margin-top:28px}
  .chronik{margin-top:52px}
  .doc{margin-top:18px}
  .doc h1{font-size:40px}
  .scene{padding-left:0;padding-right:0;overflow-x:auto}
  .scene pre{font-size:11px}
  .stratanav{gap:7px}
  .lvl,.stratanav a{font-size:9.5px;letter-spacing:.1em}
  .lvlmark{font-size:8.5px;letter-spacing:.12em}
  .foot{gap:14px;font-size:9.5px}
  .probe-note{grid-template-columns:1fr;gap:4px}
  .ward-ledger{grid-template-columns:1fr 1fr}
  .ward-ledger>div{padding:12px}
  .ward-ledger>div+div{border-left:1px solid var(--rule)}
  .ward-ledger>div:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--rule)}
  .trial-rules{grid-template-columns:1fr}
  .trial-rules div+div{border-left:0;border-top:1px solid var(--edge)}
  .trial-stage{padding:22px 18px}
  .fragments{grid-template-columns:1fr}
  .fragment{min-height:0}
  .chosen-order ol{grid-template-columns:1fr 1fr}
  .trial-actions{align-items:flex-end}
  .next-trials{grid-template-columns:1fr}
  .az-karten{grid-template-columns:1fr}
  .az-wand{grid-template-columns:1fr 1fr}
}