@property --i { syntax: '<number>'; inherits: true; initial-value: 1; }

:root {
  --ink: #1d130a;
  --faded: #9a7b56;
  --gold: #d8b46a;
  --gold-dim: #8f7444;
  --vellum: #efe2c4;
  --vellum-dark: #d9c59b;
  --night: #0b0705;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='4' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.32 0 0 0 0 0.16 0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background-color: var(--night);
  background-image:
    radial-gradient(ellipse at 50% 30%, rgba(120, 72, 36, .35), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 2px, transparent 2px 118px),
    linear-gradient(180deg, #2a1a10, #1a100a 60%, #120b07);
  background-attachment: fixed;
  color: #e8d9bb;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  overflow-x: hidden;
}
@media (pointer: fine) {
  body, button, a, .slot { cursor: none; }
  input { cursor: text; }
  dialog, dialog * { cursor: auto; }
  dialog button { cursor: pointer; }
}

#fx { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
#toast {
  position: fixed; left: 50%; top: 74px; z-index: 60; transform: translate(-50%, -12px);
  background: var(--vellum) var(--noise); color: var(--ink); padding: 10px 18px; border-radius: 3px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6); opacity: 0; transition: .35s; pointer-events: none;
  max-width: min(92vw, 520px); text-align: center; font-size: 18px;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- header ------------------------------------------------------------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center;
  padding: 14px max(16px, env(safe-area-inset-left)); pointer-events: none;
}
.bar > * { pointer-events: auto; }
.mark { font-family: 'IM Fell English SC', serif; color: var(--gold); text-decoration: none; font-size: 20px; letter-spacing: .04em; opacity: 0; transition: opacity .6s; }
body:not(.in-hall) .mark { opacity: 1; }
.bar nav { display: flex; gap: 4px; align-items: center; }
.navlink { background: none; border: 0; color: #cdb98f; font: italic 18px 'Cormorant Garamond', serif; padding: 8px 10px; text-decoration: none; border-radius: 4px; }
.navlink:hover, .navlink:focus-visible { color: #fff1cf; background: rgba(255, 220, 160, .07); outline: none; }
.navlink.icon { font-style: normal; font-size: 16px; }

/* ---- buttons ------------------------------------------------------------- */
.btn {
  font: 600 18px 'Cormorant Garamond', serif; letter-spacing: .02em; color: #2a1a0c;
  background: linear-gradient(180deg, #e9cf92, #c49b52); border: 1px solid #8a6630; border-radius: 3px;
  padding: 10px 22px; box-shadow: 0 2px 0 #6e4f22, 0 8px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn:hover, .btn:focus-visible { filter: brightness(1.08); transform: translateY(-1px); outline: none; }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #6e4f22; }
.btn.small { padding: 7px 14px; font-size: 16px; }
.btn.ghost { background: transparent; color: #e6d1a3; border-color: rgba(216,180,106,.45); box-shadow: none; }

/* ---- the hall -------------------------------------------------------------- */
.hall { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 10vh 16px 60px; text-align: center; }
.title {
  font-family: 'IM Fell English', serif; font-weight: 400; margin: 0; line-height: 1;
  font-size: clamp(44px, 9vw, 104px); color: #ead6a6; filter: url(#roughTitle);
  text-shadow: 0 0 30px rgba(255, 170, 80, .25), 0 2px 0 #3b2412;
}
.title span { display: inline-block; opacity: 0; animation: inkIn 1.4s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--d); }
@keyframes inkIn {
  0% { opacity: 0; filter: blur(14px); transform: translateY(8px) scale(1.25); }
  45% { opacity: .9; filter: blur(3px); }
  100% { opacity: 1; filter: blur(0); transform: none; }
}
.sub { font-style: italic; font-size: clamp(19px, 2.4vw, 24px); color: #cfb98c; margin: 18px 0 0; opacity: 0; animation: fadeUp 1.2s 1.6s forwards; line-height: 1.4; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.shelves {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; row-gap: 70px;
  margin: 9vh auto 0; padding: 0 30px 18px; max-width: 980px;
}
.slot {
  position: relative; background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit;
  width: var(--t); height: calc(var(--h) + 4px); perspective: 900px; perspective-origin: 50% -30%;
  display: flex; align-items: flex-end; justify-content: center;
}
.slot::after { /* a stretch of shelf under each book; neighbours join into one plank */
  content: ''; position: absolute; left: -12px; right: -12px; bottom: -20px; height: 20px; z-index: -1;
  background: linear-gradient(180deg, #6a4325 0 3px, #4b2e18 3px, #3a2312 70%, #24150b), var(--fibers);
  background-blend-mode: multiply;
  box-shadow: 0 18px 30px rgba(0,0,0,.7);
}
.book {
  position: relative; display: block; width: var(--t); height: var(--h); transform-style: preserve-3d;
  transform-origin: 50% 100%; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.slot { opacity: 0; animation: shelve .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--delay); }
@keyframes shelve { from { opacity: 0; transform: translateZ(-120px) translateY(-20px); } to { opacity: 1; transform: none; } }
.slot:hover .book, .slot:focus-visible .book {
  transform: translateY(-16px) translateZ(46px) rotateY(32deg); transition-duration: .45s;
}
.slot:focus-visible { outline: none; }
.slot.taken .book { opacity: 0; transition: opacity .15s; }
.spine, .cover, .top { position: absolute; display: block; }
.spine {
  inset: 0; border-radius: 3px 3px 1px 1px; overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(255,255,255,.08) 22%, rgba(255,255,255,.14) 34%, rgba(0,0,0,.05) 60%, rgba(0,0,0,.6)),
    var(--noise), var(--c);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
  display: flex; flex-direction: column; align-items: center; padding: 16px 0 14px;
}
.spine::after { /* time and hands have faded the leather */
  content: ''; position: absolute; inset: 0; background: var(--fibers), rgba(210, 190, 160, .5);
  mix-blend-mode: screen; opacity: calc(var(--wear) * .8); pointer-events: none;
}
.band { display: block; width: 100%; height: 9px; border-top: 1px solid rgba(216,180,106,.7); border-bottom: 1px solid rgba(216,180,106,.7); opacity: calc(1 - var(--wear) * .6); }
.band.low { margin-top: auto; }
.spine-title {
  writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'IM Fell English SC', serif;
  font-size: 15px; line-height: 1.05; color: var(--gold); padding: 14px 0; max-height: calc(var(--h) - 90px); overflow: hidden;
  text-shadow: 0 1px 0 rgba(0,0,0,.6); opacity: calc(1 - var(--wear) * .75);
}
.spine-author { font: italic 11px 'Cormorant Garamond', serif; color: var(--gold); opacity: calc(.85 - var(--wear) * .6); margin-top: 8px; }
.cover {
  top: 0; left: 0; width: 150px; height: 100%; transform-origin: 0 50%; transform: rotateY(90deg);
  background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.1) 20%, rgba(0,0,0,.25)), var(--noise), var(--c);
  border-radius: 0 3px 3px 0; display: flex; align-items: center; justify-content: center; padding: 14px;
}
.cover-title { font: 18px/1.1 'IM Fell English SC', serif; color: var(--gold); text-align: center; border: 1px solid rgba(216,180,106,.5); padding: 14px 8px; opacity: calc(1 - var(--wear) * .7); }
.top {
  top: 0; left: 0; width: 100%; height: 150px; transform-origin: 50% 0; transform: rotateX(-90deg);
  background: repeating-linear-gradient(90deg, #e9dcc0 0 1px, #cbb894 1px 2px), #e2d3b0;
  box-shadow: inset 0 0 0 3px var(--c);
}
.tag {
  position: absolute; bottom: calc(100% + 26px); left: 50%; transform: translate(-50%, 6px); z-index: 5;
  width: 220px; background: var(--vellum) var(--noise); color: var(--ink); border-radius: 3px; padding: 10px 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.6); font-size: 15px; line-height: 1.3; display: flex; flex-direction: column; gap: 3px;
  opacity: 0; pointer-events: none; transition: .25s;
}
.tag b { font-size: 17px; }
.slot:hover .tag, .slot:focus-visible .tag { opacity: 1; transform: translate(-50%, 0); }
.meter { display: block; height: 5px; background: rgba(60,40,20,.25); border-radius: 3px; overflow: hidden; margin: 4px 0 1px; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, #6e1f12, #a8762f 50%, #d8b46a); transition: width 1s; }
.state { margin: 54px 0 6px; color: #bba57b; font-size: 17px; letter-spacing: .02em; }
.state b { color: var(--gold); }
.ticker { max-width: 640px; color: #a99470; font-size: 16px; font-style: italic; }
.ticker p { margin: 6px 0; }
.ticker time, .events time { color: #7d6b4e; font-size: .85em; margin-left: 6px; font-style: normal; }
.ev { font-style: normal; margin-right: 4px; }
.ev.lost { color: #b5583e; }
.ev.saved { color: var(--gold); }
.quiet { opacity: .7; }

/* ---- the flying book ---------------------------------------------------- */
#fly { position: fixed; inset: 0; z-index: 40; pointer-events: none; display: none; perspective: 1400px; }
#fly.on { display: block; }
.fbook { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform-origin: 50% 50%; }
.fpages { position: absolute; inset: 4px 6px 4px 0; background: var(--vellum) var(--noise); border-radius: 0 4px 4px 0; box-shadow: inset 10px 0 30px rgba(80,50,20,.35), 0 30px 60px rgba(0,0,0,.6); }
.fcover { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; }
.fcover-front, .fcover-back { position: absolute; inset: 0; border-radius: 3px 6px 6px 3px; backface-visibility: hidden; }
.fcover-front {
  background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(255,255,255,.06) 8%, rgba(0,0,0,.15)), var(--noise), var(--c);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), inset 0 0 0 10px rgba(0,0,0,.12), inset 0 0 0 11px rgba(216,180,106,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px; text-align: center;
}
.fcover-front span { font: 30px/1.1 'IM Fell English SC', serif; color: var(--gold); text-shadow: 0 1px 0 #000; }
.fcover-front small { font: italic 17px 'Cormorant Garamond', serif; color: #cfae6c; }
.fcover-back { transform: rotateY(180deg); background: var(--noise), #c9b083; box-shadow: inset 0 0 40px rgba(80,50,20,.5); }

/* ---- the reading room ---------------------------------------------------- */
.reader { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 70px 12px 120px; }
.desk { perspective: 1800px; }
.leather {
  padding: 14px; border-radius: 6px;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.35)), var(--noise), var(--c);
  box-shadow: 0 40px 80px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 6px rgba(0,0,0,.15);
}
.page {
  position: relative; width: min(660px, calc(100vw - 52px)); min-height: min(64vh, 680px);
  padding: 44px clamp(22px, 6vw, 62px) 30px; transform-origin: 0 50%; overflow: hidden;
  display: flex; flex-direction: column;
}
.vellum-page {
  background:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(120, 80, 30, .32)),
    var(--fibers), var(--noise), var(--vellum);
  color: var(--ink); border-radius: 2px;
  box-shadow: inset 18px 0 30px -18px rgba(70,40,10,.6), inset 0 0 0 1px rgba(120,90,40,.25);
}
.ph { display: flex; justify-content: space-between; font: 14px 'IM Fell English SC', serif; color: #7a5d38; letter-spacing: .06em; border-bottom: 1px solid rgba(120,90,50,.3); padding-bottom: 8px; margin-bottom: 26px; }
.text { font-size: clamp(20px, 2.6vw, 25px); line-height: 1.72; filter: url(#inkEdge); flex: 1; hyphens: auto; }
.w {
  opacity: calc(.08 + .92 * var(--i));
  color: color-mix(in srgb, var(--ink) calc(var(--i) * 100%), var(--faded));
  filter: blur(calc((1 - var(--i)) * .9px));
  transition: --i 2.4s ease-in-out;
  border-radius: 3px;
}
.dropcap { float: left; font: 3.6em/.82 'IM Fell English', serif; color: #6e1f12; margin: .06em .1em 0 0; }
.gap {
  display: inline-block; width: calc(var(--n) * .46em + .3em); height: .72em; vertical-align: -.04em;
  background: radial-gradient(ellipse at 50% 60%, rgba(120, 85, 45, .32), rgba(120, 85, 45, .08) 60%, transparent 75%);
  border-bottom: 1.5px dashed rgba(100, 70, 38, .55);
}
.w.crumbling { display: inline-block; animation: crumble 1.1s forwards; }
@keyframes crumble {
  0% { filter: blur(0); }
  30% { color: #5a3a1c; letter-spacing: .04em; }
  100% { opacity: 0; filter: blur(4px); transform: translateY(-8px) scale(1.05); letter-spacing: .25em; }
}
.w.fresh { display: inline-block; animation: bleed 1.5s cubic-bezier(.2,.7,.2,1); }
@keyframes bleed {
  0% { opacity: 0; filter: blur(9px); transform: scale(1.5); color: #000; }
  35% { opacity: 1; filter: blur(2.5px); color: #000; }
  100% { filter: blur(0); transform: none; }
}
.w.target {
  display: inline-block; opacity: 1; filter: none;
  background: radial-gradient(ellipse, rgba(255, 196, 90, .55), rgba(255, 196, 90, .15) 70%);
  box-shadow: 0 0 0 2px rgba(170, 110, 30, .55), 0 0 24px rgba(255, 170, 60, .5);
  animation: glow 1.6s ease-in-out infinite;
}
.w.target .gap { border-bottom-color: #8a5a1a; }
@keyframes glow { 50% { box-shadow: 0 0 0 2px rgba(170, 110, 30, .8), 0 0 34px rgba(255, 170, 60, .8); } }
.w.wrong { display: inline-block; animation: shake .42s; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.page.whole::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 230, 160, .55) 50%, transparent 65%);
  background-size: 260% 100%; animation: glint 1.8s ease-out forwards; mix-blend-mode: overlay;
}
@keyframes glint { from { background-position: 120% 0; } to { background-position: -40% 0; } }
.pf { margin-top: 24px; border-top: 1px solid rgba(120,90,50,.3); padding-top: 10px; font-size: 15px; color: #6c5232; display: flex; flex-direction: column; gap: 4px; }
.health { display: flex; align-items: center; gap: 10px; }
.health .meter { width: 90px; margin: 0; flex: none; }
.scribes { font-style: italic; }
.scribes span { font-family: 'IM Fell English', serif; font-style: italic; color: #4a3218; }

.controls { display: flex; align-items: center; gap: 18px; margin-top: 26px; }
.ctl {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(216,180,106,.45); background: rgba(30,18,10,.6);
  color: var(--gold); font-size: 30px; line-height: 1; padding-bottom: 4px; transition: .2s;
}
.ctl:hover:not(:disabled), .ctl:focus-visible { background: rgba(216,180,106,.18); outline: none; }
.ctl:disabled { opacity: .25; }
.quill span { display: inline-block; transform: rotate(-12deg); margin-right: 4px; }

body.scribing .reader { padding-bottom: 170px; }
.scribebar {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30;
  width: min(660px, calc(100vw - 24px)); background: rgba(22, 13, 7, .94); border: 1px solid rgba(216,180,106,.5);
  border-radius: 6px; padding: 12px 14px; box-shadow: 0 20px 50px rgba(0,0,0,.7);
  animation: fadeUp .35s;
}
.sb-info { font-size: 16px; color: #d9c39a; margin-bottom: 8px; }
.sb-info b { color: #f3dfb2; margin-right: 6px; }
.sb-info span { color: #a48d66; font-style: italic; }
#sbForm { display: flex; gap: 8px; flex-wrap: wrap; }
#sbInput {
  flex: 1 1 180px; min-width: 0; font: italic 22px 'IM Fell English', serif; color: #2a1a0c;
  background: var(--vellum) var(--noise); border: 1px solid #8a6630; border-radius: 3px; padding: 6px 12px; outline: none;
}
#sbInput:focus { box-shadow: 0 0 0 3px rgba(216,180,106,.35); }
#sbInput.wrong { animation: shake .42s; border-color: #a33; }

/* ---- the ledger -------------------------------------------------------------- */
.ledger { width: min(860px, calc(100vw - 24px)); margin: 80px auto 60px; padding: 36px clamp(16px, 5vw, 50px); }
.ledger h2 { font: 400 clamp(32px, 5vw, 46px) 'IM Fell English', serif; margin: 0; }
.ledger h3 { font: 400 24px 'IM Fell English SC', serif; margin: 36px 0 8px; border-bottom: 1px solid rgba(120,90,50,.35); padding-bottom: 6px; }
.lede { font-style: italic; color: #6c5232; margin: 4px 0 22px; }
.cond { width: 100%; border-collapse: collapse; }
.cond th { text-align: left; font: 14px 'IM Fell English SC', serif; color: #7a5d38; padding: 6px 4px; border-bottom: 1px solid rgba(120,90,50,.4); }
.cond td { padding: 9px 4px; border-bottom: 1px solid rgba(120,90,50,.18); vertical-align: middle; }
.cond td small { display: block; color: #7a5d38; font-size: 14px; }
.cond .num { text-align: right; font-variant-numeric: oldstyle-nums; font-size: 19px; }
.pages { white-space: nowrap; }
.pip {
  display: inline-block; width: 16px; height: 22px; margin-right: 3px; border-radius: 1px;
  background: color-mix(in srgb, #c89f55 calc(var(--h) * 100%), #2c1d12);
  box-shadow: inset 0 0 0 1px rgba(60,40,20,.35); transition: transform .15s;
}
.pip:hover { transform: translateY(-3px); }
.events { list-style: none; padding: 0; margin: 0; }
.events li { padding: 8px 0; border-bottom: 1px dotted rgba(120,90,50,.3); font-size: 17px; }
.events time { color: #8a7050; }

/* ---- dialogs ---------------------------------------------------------------- */
dialog.vellum {
  border: 0; padding: 30px clamp(20px, 5vw, 40px); max-width: min(540px, calc(100vw - 32px)); border-radius: 3px;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(120,80,30,.3)), var(--fibers), var(--noise), var(--vellum);
  color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.8); font-size: 19px; line-height: 1.5;
}
dialog.vellum h2 { font: 400 32px 'IM Fell English', serif; margin: 0 0 10px; }
dialog.vellum p { margin: 0 0 12px; }
dialog::backdrop { background: rgba(5,3,2,.72); backdrop-filter: blur(3px); }
dialog[open] { animation: fadeUp .35s; }
#signForm { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
#signName { font: italic 22px 'IM Fell English', serif; padding: 8px 12px; border: 1px solid #8a6630; background: rgba(255,255,255,.35); color: var(--ink); border-radius: 3px; }

/* ---- small screens ------------------------------------------------------------ */
@media (max-width: 640px) {
  .shelves { padding: 0 18px 18px; row-gap: 60px; margin-top: 6vh; }
  .slot { --s: .82; width: calc(var(--t) * .82); }
  .book { width: calc(var(--t) * .82); height: calc(var(--h) * .82); }
  .slot { height: calc(var(--h) * .82 + 4px); }
  .tag { display: none; }
  .page { padding-top: 30px; }
  .controls { gap: 12px; }
  .quill { padding: 10px 14px; }
  .bar { padding-top: 10px; }
  .page { min-height: 0; }
  .sb-info span { display: block; }
  #sbForm { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  #sbInput { grid-column: 1 / -1; }
  body.scribing .reader { padding-bottom: 230px; }
  .navlink { padding: 6px 7px; font-size: 16px; }
  .mark { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}