/* The Build Library — a Zuzalu-style pop-up village library. No web fonts, no third-party anything. */
:root{
  --plaster:#efe4cf; --plaster2:#e6d6b8; --paper:#fbf6ec; --ink:#2b2118; --ink2:#5a4632;
  --wood:#6b4423; --wood2:#4a2d14; --wood3:#8a5a32; --sea:#1f5f66; --sea-l:#bfe3e8; --leaf:#3f6b2c;
  --lamp:rgba(255,196,110,.42); --focus:#0b57d0;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Noto Serif",serif;
  --hand:"Segoe Print","Bradley Hand","Chalkboard SE","Comic Sans MS","Marker Felt",cursive;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:16px/1.5 var(--sans);
  background:radial-gradient(1200px 500px at 15% -10%,rgba(191,227,232,.55),transparent 60%),
             linear-gradient(var(--plaster),var(--plaster2));min-height:100vh}
a{color:var(--sea);text-underline-offset:2px}
a:hover{color:#123c41}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.5em 1em;z-index:10}
.skip:focus{left:8px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hand{font-family:var(--hand);color:var(--leaf);margin:0;transform:rotate(-1.2deg);font-size:1.02rem}
.private-banner{background:#7a1f1f;color:#fff;margin:0;padding:.5em 1em;font-weight:700;text-align:center}

/* ── header: the reading desk ── */
.top{padding:18px clamp(14px,3vw,36px) 10px;border-bottom:10px solid var(--wood);
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0));
  box-shadow:0 6px 0 var(--wood2) inset, 0 4px 14px rgba(60,35,10,.18)}
.brand .hand{display:block;margin-bottom:4px}
.brand h1{font:700 clamp(1.8rem,4vw,2.8rem)/1.1 var(--serif);margin:0 0 .15em;letter-spacing:.01em}
.lede{max-width:72ch;margin:.2em 0 .4em;color:var(--ink2)}
.stats{margin:.2em 0 .6em;font-size:.95rem}
.wings ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0}
.wings a{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--paper);border:1px solid #cdb88f;text-decoration:none;color:var(--ink);font-size:.9rem}
.wings a small{color:var(--ink2)}
.wings a:hover{background:#fff}
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.find{display:flex;align-items:center;gap:8px}
.find span{font-weight:600}
input[type=search]{font:inherit;padding:6px 10px;border:2px solid var(--wood3);border-radius:8px;background:var(--paper);min-width:min(260px,70vw);color:var(--ink)}
.time{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.time label{font-weight:600}
.time output{font-family:var(--hand);color:var(--sea);font-weight:400}
input[type=range]{width:min(320px,80vw);accent-color:var(--wood)}
button{font:inherit;cursor:pointer;padding:5px 12px;border-radius:8px;border:2px solid var(--wood);background:var(--paper);color:var(--ink)}
button:hover{background:#fff}
button[aria-pressed=true]{background:var(--wood);color:#fff}
.walk{display:flex;gap:6px}
.statusline{margin:0;min-height:1.5em;font-size:.92rem;color:var(--ink2);flex-basis:100%}
html:not(.js) .controls{display:none}

/* ── rooms ── */
.corridor{outline:none}
.room{position:relative;padding:22px clamp(14px,3vw,36px) 30px;border-bottom:18px solid var(--wood2)}
.room:nth-child(even){background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,0))}
.wall{position:relative;max-width:76ch;margin-bottom:14px}
.wall h2{font:700 clamp(1.4rem,3vw,2rem)/1.15 var(--serif);margin:.15em 0 .1em}
.sub{margin:.1em 0 .5em;color:var(--ink2)}
.small{font-size:.85rem}
.lamp{position:absolute;left:-30px;top:-34px;width:260px;height:180px;pointer-events:none;
  background:radial-gradient(closest-side,var(--lamp),transparent);filter:blur(2px)}
.lamp::before{content:"";position:absolute;left:112px;top:20px;width:36px;height:22px;border-radius:18px 18px 4px 4px;background:#3b2a1a;box-shadow:0 10px 0 -6px #c9a25a}
.window{position:absolute;right:0;top:0;width:150px;height:110px;border:8px solid var(--wood3);border-radius:70px 70px 6px 6px;
  background:linear-gradient(#cfeef2 0 52%,#7fc3cc 52% 66%,#3f8f99 66%);box-shadow:inset 0 0 18px rgba(255,255,255,.7)}
.entrance .wall{padding-right:170px;max-width:none}
.notes-wall{list-style:none;padding:0;margin:.4em 0 0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.note{background:#fffdf3;padding:8px 10px 9px;border-radius:2px;box-shadow:0 2px 6px rgba(60,35,10,.18);font-size:.88rem;line-height:1.35;transform:rotate(-.6deg)}
.note:nth-child(even){transform:rotate(.7deg);background:#f7fbf2}
.note .emo{margin-right:4px}
.note .d{font-family:var(--hand);color:var(--leaf);display:inline-block;margin-right:4px}
.note b{font-family:var(--serif)}
.note .t{display:block;color:var(--ink2);margin-top:2px}
.empty{padding:20px;font-family:var(--hand);color:var(--ink2)}

/* ── shelves & books ── */
.shelf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));column-gap:0;row-gap:18px}
.book{padding:12px 9px 10px;border-bottom:14px solid var(--wood);box-shadow:0 10px 0 -2px var(--wood2);position:relative}
.book article{background:var(--paper);border-radius:3px 6px 6px 3px;border-left:9px solid var(--spine,#7a4b26);
  box-shadow:0 3px 10px rgba(60,35,10,.22);height:100%;display:flex;flex-direction:column;transition:transform .18s ease, box-shadow .18s}
.book article:hover,.book:focus-within article{transform:translateY(-4px);box-shadow:0 10px 18px rgba(60,35,10,.28)}
.cover{position:relative;aspect-ratio:16/10;background:#d9c7a4;overflow:hidden;border-radius:0 5px 0 0}
.cover img{display:block;width:100%;height:100%;object-fit:cover}
.ph{display:grid;place-items:center;width:100%;height:100%;font:700 3rem var(--serif);color:#fff;background:var(--spine,#7a4b26)}
.kind{position:absolute;left:6px;bottom:6px;background:rgba(32,22,12,.86);color:#fff;font-size:.72rem;padding:1px 7px;border-radius:999px}
.k-hosted .cover{aspect-ratio:16/8}
.book h3{font:700 1rem/1.25 var(--serif);margin:8px 10px 2px;overflow-wrap:anywhere}
.book h3 a{color:var(--ink);text-decoration:none}
.book h3 a:hover{text-decoration:underline}
.meta{margin:0 10px 4px;font-size:.8rem;color:var(--ink2)}
.hidden-note{margin:0 10px 4px;font-size:.78rem;color:#7a1f1f}
details{margin:auto 10px 8px;font-size:.86rem}
summary{cursor:pointer;color:var(--sea);font-weight:600;font-family:var(--hand)}
.plaque p{margin:.4em 0}
.plaque dl{margin:.4em 0;display:grid;grid-template-columns:max-content 1fr;gap:2px 10px}
.plaque dt{font-weight:600;color:var(--ink2)}
.plaque dd{margin:0;overflow-wrap:anywhere}
.plaque h4{margin:.7em 0 .2em;font-family:var(--serif)}
.plaque ul{margin:0;padding-left:1.1em}
.plaque li{margin:.1em 0}
.plaque small{color:var(--ink2)}
.ok{color:#1e6b2f;font-weight:600}
.warn{color:#8a3b00;font-weight:600}
.spark{vertical-align:middle;margin-left:6px;fill:var(--wood)}
.spark .z{fill:#cdb88f}
.book.future article{opacity:.28;filter:grayscale(1)}
.book.future::after{content:"not yet built";position:absolute;top:22px;left:20px;right:12px;text-align:center;font-family:var(--hand);color:var(--ink);background:rgba(251,246,236,.9);border-radius:4px;padding:2px 0}
.book.lit-new article{box-shadow:0 0 0 3px #e0a43a,0 8px 20px rgba(224,164,58,.45)}
.book.searched-out{display:none}
.room.no-match .shelf::before{content:"no books on this shelf match";font-family:var(--hand);color:var(--ink2);padding:10px}
.is-hidden article{outline:2px dashed #7a1f1f}
.exit .wall{max-width:70ch}
.nojs{margin:12px;padding:10px;background:var(--paper)}

/* ── the plaque reading dialog ── */
dialog.reader{max-width:min(640px,94vw);width:100%;border:0;border-left:12px solid var(--wood);border-radius:6px;background:var(--paper);color:var(--ink);padding:18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
dialog.reader::backdrop{background:rgba(30,18,6,.55)}
dialog.reader h3{font:700 1.3rem/1.2 var(--serif);margin:0 2.5em .4em 0}
dialog.reader .close{position:absolute;right:12px;top:12px}
dialog.reader .shot{width:100%;height:auto;border-radius:4px;display:block;margin-bottom:8px}

/* ── the corridor (JS, wide screens): walk sideways through the wings ── */
@media (min-width:760px){
  html.js:not(.listmode) body{overflow:hidden;height:100vh;display:flex;flex-direction:column}
  html.js:not(.listmode) .top{flex:0 0 auto;padding-top:10px}
  html.js:not(.listmode) .lede{display:none}
  html.js:not(.listmode) .brand h1{font-size:1.9rem;display:inline-block;margin-right:14px}
  html.js:not(.listmode) .brand .hand{display:inline-block}
  html.js:not(.listmode) .stats{margin:0 0 6px}
  html.js:not(.listmode) .wings ol{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin-bottom:6px}
  html.js:not(.listmode) .wings a{white-space:nowrap}
  html.js:not(.listmode) input[type=search]{min-width:190px}
  html.js:not(.listmode) input[type=range]{width:220px}
  html.js:not(.listmode) .controls{gap:8px 14px}
  html.js:not(.listmode) .corridor{flex:1 1 auto;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
    background:repeating-linear-gradient(90deg,rgba(107,68,35,.06) 0 2px,transparent 2px 160px)}
  html.js:not(.listmode) .room{flex:0 0 auto;display:flex;gap:22px;align-items:stretch;border-bottom:0;border-right:18px solid var(--wood2);padding:16px 22px 10px;scroll-snap-align:start;height:100%}
  html.js:not(.listmode) .wall{flex:0 0 300px;overflow:auto;margin:0}
  html.js:not(.listmode) .entrance .wall{padding-right:0;padding-top:120px}
  html.js:not(.listmode) .window{left:0;right:auto}
  html.js:not(.listmode) .notes-wall{grid-template-columns:1fr}
  html.js:not(.listmode) .shelf{grid-auto-flow:column;grid-template-rows:repeat(var(--rows,2),min-content);grid-template-columns:none;grid-auto-columns:214px;align-content:start;row-gap:10px}
  html.js:not(.listmode) .book details .plaque{display:none}
  html.js:not(.listmode) .exit{min-width:520px}
}
@media (max-width:759px){
  .lamp::before{display:none}
  .entrance .wall{padding-right:0;padding-top:118px}
  .window{left:0;right:auto}
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .book{padding:10px 5px 8px}
  .book h3{font-size:.92rem;margin:6px 7px 2px}
  .meta,details{margin-left:7px;margin-right:7px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .book article:hover,.book:focus-within article{transform:none}
}
@media print{.controls,.wings,.window,.lamp{display:none}}