/* ══════════════════════════════════════════════════════════════
   विद्यापति पुस्तकालय — reading-room kiosk

   Light "museum paper" ground. The Mithila identity is carried by the
   pigment accents — geru red ochre, turmeric, neel indigo — and by the
   palm-leaf card: a double rule with a punched binding hole, the way a
   pothi leaf is strung. Colour is used sparingly so the scanned pages,
   not the interface, are the brightest thing on screen.
   ══════════════════════════════════════════════════════════════ */

@font-face{font-family:"Noto Sans Deva";src:url("assets/fonts/NotoSansDevanagari-Regular.ttf")format("truetype");font-weight:400;font-display:block}
@font-face{font-family:"Noto Sans Deva";src:url("assets/fonts/NotoSansDevanagari-SemiBold.ttf")format("truetype");font-weight:600;font-display:block}
@font-face{font-family:"Noto Serif Deva";src:url("assets/fonts/NotoSerifDevanagari-Regular.ttf")format("truetype");font-weight:400;font-display:block}
@font-face{font-family:"Noto Serif Deva";src:url("assets/fonts/NotoSerifDevanagari-Bold.ttf")format("truetype");font-weight:700;font-display:block}
@font-face{font-family:"Noto Tirhuta";src:url("assets/fonts/NotoSansTirhuta-Regular.ttf")format("truetype");font-display:block}

:root{
  --paper:#FAF7F2;      /* ground — warm, near-paper */
  --card:#FFFFFF;
  --ink:#1A1E2E;        /* text — deep indigo-black */
  --indigo:#2A3A63;     /* headings, brand */
  --geru:#B23A20;       /* red ochre — action, active state */
  --haldi:#B87814;      /* turmeric — the Tirhuta line */
  --muted:#6E6A78;
  --rule:#E2DCD2;       /* hairlines */
  --rule-soft:#EFEAE2;

  --sans:"Noto Sans Deva",system-ui,sans-serif;
  --serif:"Noto Serif Deva",Georgia,serif;
  --tir:"Noto Tirhuta","Noto Sans Deva",sans-serif;

  --s:1;                /* large-text multiplier */
  --pad:clamp(26px,3vw,60px);
  --gap:clamp(18px,1.6vw,26px);
}
html.lg{--s:1.3}

*{box-sizing:border-box}
/* Panels below set their own display (grid/flex), which outranks the
   browser's [hidden]{display:none}. Without this they never hide. */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:calc(17.5px * var(--s));line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--geru);outline-offset:3px}
.en{display:block;font-size:.72em;color:var(--muted)}
.tir{font-family:var(--tir);color:var(--haldi)}

/* ─────────── start screen ─────────── */
.splash{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:var(--paper);text-align:center;padding:var(--pad);
}
.splash-inner{max-width:60rem}
/* MBK's own mark leads: this is the Kosh's library. The twin fish is the
   Mithila auspicious motif, so it also sets the regional register. */
.splash-logo{width:112px;height:112px;object-fit:contain;margin:0 0 1.4rem}
/* No letter-spacing on Devanagari: it separates matras from their base
   consonant. Word-spacing gives the same airy feel without breaking shaping. */
.splash-eyebrow{margin:0 0 1.8rem;color:var(--geru);font-size:.9rem;word-spacing:.45em}
.splash-name{
  margin:0;font-family:var(--serif);font-weight:700;color:var(--indigo);
  font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1.28;
}
.splash-name .ch{display:inline-block;transition:opacity .24s ease}
.splash-name .ch.t{font-family:var(--tir);color:var(--haldi)}
.splash-sub{margin:1.8rem 0 2.6rem;color:var(--muted);font-size:1.05rem}
.begin{
  background:var(--geru);color:#FFF8F3;
  padding:.85em 2.4em;border-radius:2px;font-size:1.05rem;font-weight:600;
  transition:background .18s ease, box-shadow .18s ease;
}
.begin:hover{background:#9C3018;box-shadow:0 6px 18px rgba(178,58,32,.24)}
.begin.small{padding:.6em 1.6em;font-size:.92rem;margin-top:1.4rem}

/* Donor acknowledgement. The club is funding this and recognition matters to
   them, so it is given its own rule and real size rather than a footnote. */
.donor{
  margin:4.5rem auto 0;padding-top:2.2rem;max-width:30rem;
  border-top:1px solid var(--rule);
  display:flex;gap:1.4rem;align-items:center;justify-content:center;
}
/* The emblem carries its own outline, so it is not framed or clipped.
   The dotted circle is only the empty-state placeholder. */
.donor-mark{width:118px;height:118px;display:grid;place-items:center;flex:none}
.donor-mark.empty{border:1px dashed var(--rule);border-radius:50%}
.donor-mark img{width:100%;height:100%;object-fit:contain}
.donor-mark .donor-placeholder{display:none;font-size:.5rem;line-height:1.3;color:var(--muted);letter-spacing:.08em}
.donor-mark.empty .donor-placeholder{display:block}
.donor-text{margin:0;text-align:left;font-size:.95rem;color:var(--ink);line-height:1.5}

/* ─────────── shell ─────────── */
.app{height:100%;display:flex;flex-direction:column}

.topbar{
  display:flex;align-items:center;gap:var(--pad);flex:none;
  padding:1.15rem var(--pad);background:var(--card);
  border-bottom:1px solid var(--rule);
}
/* logo spans both rows; the two name lines stack beside it */
.brand{
  text-align:left;line-height:1.15;display:grid;align-items:center;
  grid-template-columns:auto 1fr;column-gap:.7rem;
}
.brand-logo{width:46px;height:46px;object-fit:contain;grid-row:1/3;grid-column:1}
.brand-dev{grid-column:2;grid-row:1}
.brand-tir{grid-column:2;grid-row:2}
.brand-dev{display:block;font-family:var(--serif);font-weight:700;font-size:1.18rem;color:var(--indigo)}
.brand-tir{display:block;font-family:var(--tir);color:var(--haldi);font-size:.82rem;margin-top:.15rem}

.search{flex:1;position:relative;max-width:52rem}
.search input{
  width:100%;padding:.85em 1.15em;font:inherit;font-size:1.04rem;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--rule);border-radius:2px;
}
.search input::placeholder{color:var(--muted)}
.search input:focus{border-color:var(--geru);outline:none;background:var(--card)}
.search-count{
  position:absolute;right:.9em;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:.85rem;pointer-events:none;
}

.tools{display:flex;align-items:center;gap:.5rem;flex:none}
.tool{
  padding:.68em 1.2em;border:1px solid var(--rule);border-radius:2px;
  font-size:.92rem;transition:border-color .15s,background .15s,color .15s;
}
.tool:hover{border-color:var(--geru);color:var(--geru)}
.tool[aria-pressed="true"]{background:var(--geru);border-color:var(--geru);color:#FFF8F3}
.tool-a{font-family:var(--serif);font-size:1.15em;margin-right:.15em}
.net{width:9px;height:9px;border-radius:50%;background:#C9C3BA;flex:none}
.net[data-on="true"]{background:#3F8F5E;box-shadow:0 0 0 3px rgba(63,143,94,.16)}

/* categories */
.cats{display:flex;padding:0 var(--pad);background:var(--card);flex:none;
  border-bottom:1px solid var(--rule)}
.cat{
  padding:1.05em 2.05em;font-size:1.06rem;color:var(--muted);
  border-bottom:3px solid transparent;line-height:1.3;transition:color .15s;
}
.cat .en{font-size:.66em}
.cat:hover{color:var(--ink)}
.cat.on{color:var(--indigo);border-bottom-color:var(--geru);font-weight:600}

.facets{display:flex;flex-wrap:wrap;gap:.6rem;padding:1.1rem var(--pad) .4rem;flex:none}
.chip{
  padding:.58em 1.3em;border:1px solid var(--rule);border-radius:2px;
  font-size:.95rem;background:var(--card);transition:border-color .15s;
}
.chip:hover{border-color:var(--geru)}
.chip.on{background:var(--indigo);border-color:var(--indigo);color:#fff}
.chip b{color:var(--muted);font-weight:400;margin-left:.5em}
.chip.on b{color:#C8CEE0}

/* ─────────── results: palm-leaf cards ─────────── */
.results{
  flex:1;overflow-y:auto;padding:var(--pad);
  display:grid;gap:var(--gap) calc(var(--gap) * .9);
  grid-template-columns:repeat(auto-fill,minmax(calc(212px * var(--s)),1fr));
  align-content:start;
}
.leaf{
  position:relative;text-align:left;background:var(--card);
  padding:1.1rem 1.25rem 1.1rem 3.2rem;
  border:1px solid var(--rule);
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
/* the Madhubani double line: a second rule inside the first */
.leaf::before{
  content:"";position:absolute;inset:5px;pointer-events:none;
  border:1px solid var(--rule-soft);
}
.leaf::after{                       /* binding hole of a pothi leaf */
  content:"";position:absolute;left:1.2rem;top:50%;
  width:14px;height:14px;margin-top:-7px;border-radius:50%;
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule);
}
.leaf:hover{border-color:var(--geru);box-shadow:0 6px 20px rgba(26,30,46,.09);transform:translateY(-2px)}
.leaf.readable{border-left:3px solid var(--geru)}

.leaf-title{font-family:var(--serif);font-size:1.06rem;font-weight:700;line-height:1.35;margin:0;color:var(--indigo)}
.leaf-tir{font-family:var(--tir);color:var(--haldi);font-size:.92rem;margin:.32rem 0 0;line-height:1.55}
.leaf-meta{margin:.6rem 0 0;font-size:.84rem;color:var(--muted);line-height:1.55}
.leaf-meta b{color:var(--ink);font-weight:600}
.leaf-foot{margin:.65rem 0 0;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-size:.75rem}
.tag{padding:.22em .7em;border:1px solid var(--rule);color:var(--muted);background:var(--paper)}
.tag.live{border-color:var(--geru);color:var(--geru);background:#FCF1ED;font-weight:600}

.empty{padding:3rem var(--pad);color:var(--muted);text-align:center}

.foot{
  flex:none;display:flex;justify-content:space-between;gap:var(--pad);
  padding:.95rem var(--pad);border-top:1px solid var(--rule);
  background:var(--card);font-size:.86rem;color:var(--muted);
}
.foot-src{margin-left:1.1rem;color:var(--muted)}
.foot a{color:var(--geru);text-decoration:none;margin-left:1.1rem}
.foot a:hover{text-decoration:underline}
.foot a[aria-disabled="true"]{color:#C4BEB4;pointer-events:none;text-decoration:none}

/* ─────────── reader ─────────── */
.reader{position:fixed;inset:0;z-index:56;background:var(--paper);display:flex;flex-direction:column}
.reader-bar{
  display:flex;align-items:center;gap:var(--pad);flex:none;
  padding:.7rem var(--pad);background:var(--card);border-bottom:1px solid var(--rule);
}
.reader-title{flex:1;line-height:1.2}
.reader-title span:first-child{font-family:var(--serif);font-weight:700;color:var(--indigo)}
.reader-title .tir{display:block;font-size:.82rem}
.reader-nav{display:flex;align-items:center;gap:.4rem}
.rbtn{padding:.5em 1em;border:1px solid var(--rule);border-radius:2px;font-size:.95rem;background:var(--card)}
.rbtn:hover:not(:disabled){border-color:var(--geru);color:var(--geru)}
.rbtn:disabled{opacity:.4;cursor:default}
.rpage{min-width:7em;text-align:center;color:var(--muted);font-size:.9rem}
.rzoom{min-width:6em;text-align:center;color:var(--muted);font-size:.9rem}
.rsep{width:1px;height:1.6em;background:var(--rule);margin:0 .4rem}
/* min-height:0 is required: without it this flex child refuses to shrink
   below the intrinsic height of the page image and the scan overflows. */
.reader-stage{flex:1;min-height:0;display:flex;align-items:center;
  justify-content:center;padding:var(--pad);overflow:hidden}
.reader-stage.zoomed{overflow:auto;align-items:flex-start;justify-content:flex-start}
.reader-stage.zoomed img{max-height:none;max-width:none;margin:auto}
.reader-stage img{max-height:100%;max-width:100%;object-fit:contain;
  box-shadow:0 0 0 1px var(--rule),0 10px 34px rgba(26,30,46,.14)}
.reader-credit{flex:none;margin:0;padding:.55rem var(--pad);font-size:.74rem;color:var(--muted);
  border-top:1px solid var(--rule);background:var(--card)}

/* audio has nothing to look at, so the panel gives it a subject and a size
   that reads from across the room rather than a bare browser control */
.audiobox{
  display:flex;flex-direction:column;align-items:center;gap:1.6rem;
  padding:3rem 3.5rem;background:var(--card);
  border:1px solid var(--rule);box-shadow:0 10px 34px rgba(26,30,46,.10);
  max-width:44rem;width:100%;
}
.audiobox-art{width:132px;height:132px;object-fit:contain;opacity:.9}
.audiobox-title{margin:0;font-family:var(--serif);font-size:1.3rem;font-weight:700;
  color:var(--indigo);text-align:center;line-height:1.4}
.audiobox audio{width:100%;min-width:min(34rem,70vw)}
/* the source is 640x480; let it scale up to fill the stage rather than
   sitting as a postage stamp on a 24-inch screen */
.reader-stage video{width:100%;height:100%;object-fit:contain;background:#000;
  box-shadow:0 0 0 1px var(--rule),0 10px 34px rgba(26,30,46,.14)}

/* ─────────── readership ─────────── */
.stats{position:fixed;inset:0;z-index:58;display:grid;place-items:center;background:rgba(26,30,46,.34)}
.stats-card{
  background:var(--card);border:1px solid var(--rule);padding:2.2rem 2.6rem;
  max-width:34rem;text-align:center;box-shadow:0 24px 60px rgba(26,30,46,.22);
}
.stats-card h2{margin:0 0 .5rem;font-family:var(--serif);color:var(--indigo)}
.stats-note{margin:0 0 1.6rem;font-size:.82rem;color:var(--muted);line-height:1.6}
.stats dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:.7rem 1.5rem;text-align:left}
.stats dt{color:var(--muted);font-size:.92rem}
.stats dd{margin:0;font-family:var(--serif);font-weight:700;color:var(--geru);font-size:1.2rem;text-align:right}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ══════════════════════════════════════════════════════════════
   Documentary layer — hero, shelves, cover art, item page
   ══════════════════════════════════════════════════════════════ */

.scroll{flex:1;overflow-y:auto;overflow-x:hidden}

/* ── hero ───────────────────────────────────────────────────── */
.hero{position:relative;height:min(62vh,520px);overflow:hidden;display:flex;align-items:flex-end}
.hero-art{
  position:absolute;inset:0;background-size:cover;background-position:center 42%;
  transform:scale(1.06);animation:drift 34s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:scale(1.06) translate3d(0,0,0)}
                 to  {transform:scale(1.14) translate3d(-1.4%,-1.2%,0)}}
/* the wash keeps the type legible over any painting behind it */
.hero-wash{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,18,32,.90) 0%,rgba(20,18,32,.72) 42%,rgba(20,18,32,.18) 78%,rgba(20,18,32,.05) 100%);
}
.hero-body{position:relative;padding:var(--pad);padding-bottom:3.4rem;max-width:48rem;color:#FBF7F1}
.hero-eyebrow{margin:0 0 .7rem;color:var(--haldi);font-size:.86rem;word-spacing:.35em}
.hero-title{margin:0;font-family:var(--serif);font-weight:700;line-height:1.18;
  font-size:clamp(1.9rem,3.6vw,3.1rem);text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero-sub{margin:1.2rem 0 2rem;font-size:1.08rem;color:#E8E0D4}
.hero-credit{position:absolute;right:var(--pad);bottom:.5rem;margin:0;
  font-size:.66rem;color:rgba(251,247,241,.55);max-width:40%;text-align:right}

/* ── shelves ────────────────────────────────────────────────── */
.shelf{padding:3rem var(--pad) .5rem}
.shelf-head{display:flex;align-items:baseline;gap:1.1rem;margin:0 0 1.4rem}
.shelf-title{margin:0;font-family:var(--serif);font-size:1.6rem;font-weight:700;color:var(--indigo)}
.shelf-count{color:var(--muted);font-size:.86rem}
.shelf-more{margin-left:auto;color:var(--geru);font-size:.88rem;background:none}
.shelf-more:hover{text-decoration:underline}
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc(212px * var(--s));
  gap:var(--gap);overflow-x:auto;padding-bottom:1.4rem;
  scroll-snap-type:x proximity;
}
.rail > *{scroll-snap-align:start}

/* ── cover art ──────────────────────────────────────────────── */
/* Most records have no cover; a typographic one built from the title is
   honest and gives the shelf a rhythm a text list cannot. */
.tile{text-align:left;display:flex;flex-direction:column;gap:.75rem}
.cover{
  position:relative;aspect-ratio:3/4;width:100%;overflow:hidden;
  background:var(--tone,#2A3A63);display:flex;flex-direction:column;
  justify-content:flex-end;padding:1.05rem;
  box-shadow:0 3px 12px rgba(26,30,46,.14);transition:transform .18s ease,box-shadow .18s ease;
}
.cover::before{content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.24)}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover-scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(12,10,20,.82) 100%)}
.cover-tir{position:relative;font-family:var(--tir);font-size:.76rem;
  color:rgba(255,255,255,.62);line-height:1.5;margin-bottom:.25rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cover-name{position:relative;font-family:var(--serif);font-weight:700;color:#fff;
  font-size:1.06rem;line-height:1.34;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cover-badge{
  position:absolute;top:.7rem;left:.7rem;z-index:2;
  background:var(--geru);color:#fff;font-size:.66rem;font-weight:600;
  padding:.22em .6em;letter-spacing:.02em;
}
.tile:hover .cover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(26,30,46,.24)}
.tile-name{font-size:.94rem;line-height:1.45;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile-sub{font-size:.82rem;color:var(--muted);margin-top:.2rem}

/* ── item page ──────────────────────────────────────────────── */
.item{position:fixed;inset:0;z-index:52;background:var(--paper);display:flex;flex-direction:column}
.item-bar{flex:none;padding:.7rem var(--pad);background:var(--card);border-bottom:1px solid var(--rule)}
.item-body{
  flex:1;min-height:0;overflow-y:auto;display:grid;gap:clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:minmax(240px,330px) 1fr;
  padding:clamp(1.5rem,4vw,3.5rem) var(--pad);align-content:start;
}
.item-art{
  aspect-ratio:3/4;background:var(--tone,#2A3A63);position:relative;overflow:hidden;
  box-shadow:0 14px 40px rgba(26,30,46,.22);display:flex;flex-direction:column;
  justify-content:flex-end;padding:1.4rem;
}
.item-art::before{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.24)}
.item-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.item-info{max-width:52rem}
.item-kind{margin:0 0 .6rem;color:var(--geru);font-size:.82rem;font-weight:600;word-spacing:.2em}
.item-title{margin:0;font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.5rem);
  font-weight:700;color:var(--indigo);line-height:1.25}
.item-tir{margin:.5rem 0 0;font-size:1.05rem}
.item-note{margin:1.3rem 0 0;font-size:1.02rem;line-height:1.7;color:var(--ink);max-width:44rem}
.item-meta{margin:1.8rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.6rem;
  font-size:.92rem;max-width:38rem}
.item-meta dt{color:var(--muted)}
.item-meta dd{margin:0;color:var(--ink)}
.item-actions{margin:2.2rem 0 0}
.item-unavail{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6;
  padding:1rem 1.2rem;background:var(--card);border:1px solid var(--rule);max-width:34rem}
.item-credit{margin:2.4rem 0 0;font-size:.74rem;color:var(--muted);line-height:1.6;max-width:44rem}

@media (max-width:820px){
  .item-body{grid-template-columns:1fr}
  .item-art{max-width:260px}
}

/* ── alphabet index, view toggle, list view, breadcrumb ─────── */
.gridbar{display:flex;align-items:center;gap:1.4rem;padding:1.5rem var(--pad) .3rem;flex-wrap:wrap}
/* the varnamala, not A-Z: this is the index a Maithili reader already knows */
.varna{display:flex;flex-wrap:wrap;gap:.3rem;flex:1}
.vk{
  min-width:2.3em;padding:.34em .45em;border:1px solid transparent;border-radius:2px;
  font-size:1.08rem;color:var(--ink);line-height:1.5;
}
.vk:hover{border-color:var(--rule);background:var(--card)}
.vk.on{background:var(--geru);border-color:var(--geru);color:#fff;font-weight:600}
.vk.all{font-size:.86rem;padding-inline:.7em;min-width:auto}
.vk:disabled{color:#CFC8BE;pointer-events:none}

.viewtoggle{display:flex;gap:.2rem;flex:none}
.vt{width:2.7em;height:2.5em;border:1px solid var(--rule);border-radius:2px;
  color:var(--muted);font-size:1rem;line-height:1}
.vt.on{background:var(--indigo);border-color:var(--indigo);color:#fff}

/* list view — dense and scannable, for someone working rather than browsing */
.results.list{display:block;padding-top:.5rem}
/* four children - cover, title, author, extent - so four columns, or the
   last one wraps onto a row of its own */
.results.list .tile{
  display:grid;grid-template-columns:52px minmax(0,2.2fr) minmax(0,1.3fr) 8em;
  align-items:center;gap:1.5rem;padding:.95rem .6rem;
  border-bottom:1px solid var(--rule-soft);width:100%;text-align:left;
}
.results.list .tile:hover{background:var(--card)}
.results.list .cover{aspect-ratio:3/4;width:52px;box-shadow:none}
.results.list .cover::before{inset:3px}
.results.list .cover-tir,
.results.list .cover-name,
.results.list .cover-badge{display:none}
.results.list .cover-img{display:block}
.results.list .tile-name{font-family:var(--serif);font-weight:700;color:var(--indigo);
  font-size:1.08rem;-webkit-line-clamp:1}
.results.list .tile-sub{margin:0}
.list-extent{color:var(--muted);font-size:.82rem;white-space:nowrap;text-align:right}
.results.list .list-extent{display:block}
.list-extent{display:none}

.crumb{display:inline-flex;gap:.45rem;align-items:center;margin-left:1.1rem;
  font-size:.84rem;color:var(--muted)}
.crumb b{font-weight:400;color:var(--ink)}

/* ── external collections ───────────────────────────────────── */
.extbar{
  display:flex;gap:var(--pad);align-items:flex-end;flex-wrap:wrap;
  padding:2rem var(--pad) 1.2rem;border-bottom:1px solid var(--rule);
}
.ext-title{margin:0;font-family:var(--serif);font-size:1.6rem;font-weight:700;color:var(--indigo)}
.ext-sub{margin:.5rem 0 0;max-width:46rem;color:var(--muted);font-size:.92rem;line-height:1.6}
.extform{display:flex;gap:.6rem;flex:1;min-width:22rem}
.extform input{
  flex:1;padding:.85em 1.15em;font:inherit;font-size:1.02rem;
  background:var(--card);color:var(--ink);border:1px solid var(--rule);border-radius:2px;
}
.extform input:focus{border-color:var(--geru);outline:none}
.ext-state{padding:1.6rem var(--pad);margin:0;color:var(--muted);line-height:1.7;max-width:52rem}
.ext-state b{color:var(--ink);font-weight:600}
/* an external record is never mistakable for one of the Kosh's own */
.tile.foreign .cover{background:repeating-linear-gradient(
   135deg,#4A5568 0 9px,#414D5C 9px 18px)}
.tile.foreign .cover-badge{background:var(--indigo)}

/* external reader (Internet Archive BookReader, online only) */
.reader-stage iframe{width:100%;height:100%;border:0;background:var(--card);
  box-shadow:0 0 0 1px var(--rule)}

/* ── loading state ──────────────────────────────────────────── */
/* A remote page can take a second or two to arrive. An empty stage reads as
   broken, so the wait is made visible and named. */
.loader{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.1rem;
  color:var(--muted);pointer-events:none;z-index:2;
}
.loader-ring{
  width:38px;height:38px;border-radius:50%;
  border:2px solid var(--rule);border-top-color:var(--geru);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-text{font-size:.92rem}
.loader.failed .loader-ring{display:none}
.loader.failed .loader-text{color:var(--geru);max-width:26rem;text-align:center;line-height:1.6}
/* the stage is the positioning context for the overlay */
.reader-stage{position:relative}
/* with motion reduced a frozen ring looks broken; the words carry it instead */
@media (prefers-reduced-motion:reduce){
  .loader-ring{display:none}
}

/* external search, same treatment */
.ext-state.busy{display:flex;align-items:center;gap:.8rem}
.ext-state.busy::before{
  content:"";width:20px;height:20px;border-radius:50%;flex:none;
  border:2px solid var(--rule);border-top-color:var(--geru);
  animation:spin .8s linear infinite;
}
@media (prefers-reduced-motion:reduce){ .ext-state.busy::before{display:none} }

/* ── page-turning book ──────────────────────────────────────── */
/* StPageFlip (MIT) renders the turn; the styling here is what makes it read
   as paper rather than as a slideshow — a warm sheet, a soft edge shadow,
   and no rounded corners, because a book page has none. */
.flipbook{margin:auto}
.flipbook .pg{
  background:#FBF8F1;
  box-shadow:0 2px 14px rgba(26,30,46,.18);
  overflow:hidden;
}
.flipbook .pg img{
  width:100%;height:100%;object-fit:contain;display:block;background:#FBF8F1;
}
/* the gutter shadow: a real spread is darker where the pages meet */
.flipbook .pg.--left::after,
.flipbook .pg.--right::after{
  content:"";position:absolute;top:0;bottom:0;width:26px;pointer-events:none;
}
.flipbook .pg.--left::after{right:0;background:linear-gradient(270deg,rgba(26,20,10,.16),transparent)}
.flipbook .pg.--right::after{left:0;background:linear-gradient(90deg,rgba(26,20,10,.16),transparent)}
.stf__parent{margin:auto}

/* immersive: the page takes the whole screen, chrome steps away */
.reader.immersive .reader-bar,
.reader.immersive .reader-credit{display:none}
.reader.immersive .reader-stage{padding:0}
.immersive-hint{
  position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);
  background:rgba(26,30,46,.82);color:#FBF7F1;padding:.5em 1.2em;
  font-size:.84rem;border-radius:2px;pointer-events:none;
  opacity:0;transition:opacity .3s ease;z-index:60;
}
.reader.immersive .immersive-hint{opacity:1}

/* toolbar icon button */
.rbtn-icon{display:inline-flex;align-items:center;gap:.5em}
.rbtn-icon svg{width:1.05em;height:1.05em;flex:none}
.rbtn-label{font-size:.92em}
/* in full screen the toolbar is gone, so an always-visible way back is needed */
.exit-full{
  position:fixed;top:1.1rem;right:1.4rem;z-index:61;display:none;
  align-items:center;gap:.5em;padding:.55em 1.1em;
  background:rgba(26,30,46,.82);color:#FBF7F1;border-radius:2px;font-size:.9rem;
}
.exit-full svg{width:1em;height:1em}
.reader.immersive .exit-full{display:inline-flex}
.exit-full:hover{background:rgba(26,30,46,.95)}

/* ── session timeout warning ────────────────────────────────── */
.idle{position:fixed;inset:0;z-index:70;display:grid;place-items:center;
  background:rgba(26,30,46,.55)}
.idle-card{background:var(--card);border:1px solid var(--rule);
  padding:2.4rem 2.8rem;max-width:34rem;text-align:center;
  box-shadow:0 24px 60px rgba(26,30,46,.28)}
.idle-card h2{margin:0 0 .8rem;font-family:var(--serif);color:var(--indigo)}
.idle-card p{margin:0 0 1.8rem;color:var(--muted);line-height:1.7}

/* ── which collections can actually be reached, and how ─────── */
.collections{
  display:grid;gap:var(--gap);padding:1.6rem var(--pad) .4rem;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
}
.coll{padding:1rem 1.2rem;border:1px solid var(--rule);background:var(--card)}
.coll-live{border-left:3px solid var(--geru)}
.coll-name{margin:0;font-weight:600;color:var(--indigo);font-size:.98rem;
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.coll-tag{font-size:.72rem;font-weight:400;color:var(--muted);
  border:1px solid var(--rule);padding:.12em .55em}
.coll-live .coll-tag{color:var(--geru);border-color:var(--geru)}
.coll-what{margin:.5rem 0 0;font-size:.85rem;color:var(--muted);line-height:1.55}
.coll-url{margin:.5rem 0 0;font-size:.82rem;color:var(--ink);font-family:var(--sans)}