/* The library (BLOG) and the book reader (blog posts).
   Library: the painted scriptorium with each post as a pixel-art book placed on the art (positions in
   library-books.css, generated from content/library/slots.json). The newest book glows; its title tag
   is always visible; hover or keyboard focus strengthens the glow and shows "Open book".
   Reader: a journal from the same world, parchment pages and a leather cover in the post's colour.
   Motion lives in library.js and pages-motion.js; everything here is the complete static state. */

/* ---------- Library layout ---------- */

.page-library .screen > :not(.library__stage) { position: relative; z-index: 1; }

/* The book layer: same box as the painted art (shared rule in pages.css), above it, below the panels. */
.library__stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.page-library .screen > .library__stage { position: fixed; z-index: 0; }
.library__books { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }

.library__intro .library__line { margin: 0 0 0.35em; font: 400 1.5rem/1.35 var(--term); color: #e6ecfb; }
.library__intro .library__line:last-child { margin-bottom: 0; }

/* Browse all posts: a quiet key-cap that folds out a plain list of article links. */
.library__browse { align-self: flex-start; max-width: 100%; }
.library__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border: 2px solid var(--ui-edge);
  background: rgb(1 14 35 / 0.94);
  box-shadow: inset 0 0 0 2px var(--ui-void), 0 6px 14px rgb(0 0 0 / 0.45);
  font: 400 0.75rem/1.4 var(--pixel);
  color: #fff;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.library__summary::-webkit-details-marker { display: none; }
.library__summary::before {
  content: "";
  border-block: 5px solid transparent;
  border-left: 7px solid var(--lantern);
  transition: rotate 120ms steps(2);
}
.library__browse[open] > .library__summary::before { rotate: 90deg; }
.library__summary:hover { border-color: var(--ui-select-edge); color: var(--lantern); }
.library__summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.library__list {
  margin: 0.5rem 0 0;
  padding: 0.85rem 1.1rem;
  list-style: none;
  border: 2px solid var(--ui-edge);
  background: rgb(0 9 22 / 0.94);
  box-shadow: 0 6px 14px rgb(0 0 0 / 0.45);
}
.library__list li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.75rem; row-gap: 0.1rem; padding: 0.3rem 0; }
.library__list a {
  display: inline-block;
  padding-block: 0.35rem;
  font: 400 1.4375rem/1.25 var(--term);
  color: var(--cyan-strong);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.library__list a:hover { color: var(--lantern); }
.library__list time { font: 400 1.125rem/1.3 var(--term); color: var(--ui-edge-hi); }

.page-library .doc__empty p { font-size: 1.375rem; }

/* Wide screens: the panels stand in a column at the bottom left, clear of the desk and the book. */
@media (min-width: 40.01rem) and (orientation: landscape) {
  .page-library .screen {
    width: min(25rem, 38vw);
    margin: 0 0 0 clamp(1rem, 3vw, 3rem);
    padding: 2.25rem 0 1.5rem;
    justify-content: flex-end;
    gap: 1.25rem;
  }
  .page-library .library__intro { --pad: 1.5rem; }
  .page-library .library__intro .inlay__plaque { font-size: 1.5rem; margin-top: calc(-1 * var(--pad) - 0.5rem - 1.4rem); margin-bottom: 1rem; }
  .page-library .doc__empty { --pad: 1.25rem; }
  .page-library .doc__empty .inlay__label { margin-bottom: 0.75rem; }
  .page-library .doc__empty p { margin-bottom: 0.9rem; font-size: 1.3125rem; line-height: 1.3; }
  .page-library .doc__empty .key-button { min-height: 44px; padding: 0.7rem 1.1rem; }
}

/* Phones and portrait screens: the intro sits at the top over the shelves; the room and the book fill
   the first screen; the newsletter waits below it. */
@media (orientation: portrait), (max-width: 40rem) {
  .page-library .screen { padding-top: 2.4rem; gap: 0.9rem; min-height: calc(100svh - 56px + 17rem); }
  .page-library .library__intro { --pad: 1rem; padding-bottom: 0.9rem; }
  .page-library .library__intro .inlay__plaque { font-size: 1.125rem; padding: 0.55rem 0.9rem 0.5rem; margin-top: calc(-1 * var(--pad) - 0.5rem - 1.15rem); margin-bottom: 0.7rem; }
  .page-library .library__intro .library__line { font-size: 1.3125rem; line-height: 1.25; }
  .page-library .doc__empty { margin-top: auto; }
}
@media (orientation: portrait) and (max-height: 40rem) {
  .page-library .library__intro .library__line { font-size: 1.1875rem; }
  .page-library .screen { padding-top: 2.1rem; gap: 0.6rem; }
}

/* ---------- A book on the art ---------- */

.book {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
}
.book__link {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: auto;
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
/* A generous target: at least 96px square round the book, whatever the screen size. */
.book__link::before {
  content: "";
  position: absolute;
  inset: min(-8px, calc((100% - 96px) / 2));
}
.book__link:focus { outline: none; }
.book__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }

.book__sprite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  /* Sits in the desk's lighting: a short offset shadow in the desk's own shadow colour. */
  filter: drop-shadow(2px 3px 0 rgb(20 10 4 / 0.55));
  transition: transform 140ms steps(2);
}
.book--upright .book__sprite { filter: none; }
/* The newest book carries its own warm rim of light, so it reads even where the desk is bright. */
/* Its rim is a cool cyan the lamplit room has nowhere else, so it reads as "this one" next to the candles. */
.book--newest .book__sprite {
  filter: drop-shadow(0 0 1.5px rgb(170 245 255 / 1)) drop-shadow(0 0 7px rgb(80 220 255 / 0.85)) drop-shadow(0 0 16px rgb(255 214 120 / 0.55)) drop-shadow(2px 3px 0 rgb(20 10 4 / 0.55));
}
.book--newest .book__link:hover .book__sprite, .book--newest .book__link:focus-visible .book__sprite {
  filter: drop-shadow(0 0 2px rgb(200 250 255 / 1)) drop-shadow(0 0 11px rgb(80 220 255 / 1)) drop-shadow(0 0 22px rgb(255 214 120 / 0.7)) drop-shadow(2px 3px 0 rgb(20 10 4 / 0.55));
}

/* The glow: warm lamplight pooled round the newest book. */
.book__halo {
  position: absolute;
  left: -75%;
  right: -75%;
  top: -95%;
  bottom: -80%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 236 160 / 0.85), rgb(170 240 255 / 0.5) 45%, rgb(70 200 255 / 0.2) 70%, transparent);
  opacity: 0.8;
}
.book__halo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, rgb(255 236 170 / 0.55), rgb(246 200 100 / 0.2) 60%, transparent);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}
/* A soft pool of cool light on the desk under the book. */
.book__halo::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 62%;
  height: 26%;
  background: radial-gradient(closest-side, rgb(170 245 255 / 0.75), rgb(80 210 255 / 0.25) 60%, transparent);
}
.book:not(.book--newest) .book__halo { display: none; }

/* Three sparkle pixels above the cover. */
.book__spark {
  position: absolute;
  width: 5%;
  aspect-ratio: 1;
  min-width: 3px;
  background: #f4fdff;
  box-shadow: 0 0 5px 2px rgb(120 230 255 / 0.95);
  pointer-events: none;
}
.book__spark--a { left: 22%; top: -12%; }
.book__spark--b { left: 58%; top: -26%; }
.book__spark--c { left: 88%; top: -4%; }
.book:not(.book--newest) .book__spark { display: none; }

/* The title tag: always visible, tied to the book by a short pixel string. */
.book__tag {
  position: absolute;
  left: -70%;
  right: -70%;
  bottom: calc(100% + 18px);
  display: flex;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 4px 0 rgb(0 0 0 / 0.4));
}
.book__tag::after {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: 100%;
  width: 2px;
  height: 18px;
  background: repeating-linear-gradient(180deg, var(--ui-edge-hi) 0 4px, transparent 4px 7px);
}
.book__plate {
  position: relative;
  left: var(--nudge, 0px);
  display: block;
  max-inline-size: 14rem;
  padding: 0.5rem 0.75rem 0.45rem;
  background: rgb(0 9 22 / 0.94);
  box-shadow: inset 0 0 0 2px var(--ui-edge), inset 0 0 0 4px var(--ui-void);
  clip-path: var(--px-clip);
  font: 400 0.75rem/1.6 var(--pixel);
  color: #fff;
  text-align: center;
  text-wrap: balance;
  pointer-events: auto;
}

/* "Open book": a small key-cap under the book with the HUD's amber pointer. */
.book__cue {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms steps(2);
}
.book__cue::before {
  content: "";
  width: 8px;
  height: 10px;
  background: var(--hero-eye);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  filter: drop-shadow(1px 1px 0 #8a5a00);
}
.book__cue-key {
  display: block;
  padding: 0.45rem 0.6rem 0.4rem;
  border: 2px solid var(--lantern);
  background: rgb(0 9 22 / 0.94);
  box-shadow: inset 0 0 0 2px var(--ui-void), 0 0 10px rgb(246 215 124 / 0.45);
  font: 400 0.625rem/1.4 var(--pixel);
  color: var(--lantern);
  text-transform: uppercase;
}

/* Hover or keyboard focus: the glow strengthens, the book lifts, the tag lights, the cue appears. */
.book__link:hover .book__halo::after, .book__link:focus-visible .book__halo::after { opacity: 1; transform: scale(1.12); }
.book__link:hover .book__sprite, .book__link:focus-visible .book__sprite { transform: translateY(-4%); }
.book__link:hover .book__plate, .book__link:focus-visible .book__plate {
  box-shadow: inset 0 0 0 2px var(--ui-select-edge), inset 0 0 0 4px var(--ui-void);
  background: rgb(9 30 72 / 0.96);
}
.book__link:hover .book__tag, .book__link:focus-visible .book__tag { filter: drop-shadow(0 0 6px rgb(62 140 255 / 0.85)) drop-shadow(0 4px 0 rgb(0 0 0 / 0.4)); }
.book__link:hover .book__cue, .book__link:focus-visible .book__cue { opacity: 1; }
.book__link:active .book__sprite { transform: translateY(2%); }
.book__link:hover .book__cue::before, .book__link:focus-visible .book__cue::before { animation: hud-bob 1s steps(1, end) infinite; }

/* Opening (library.js): the first page under the cover, then a parchment flash the reader continues from. */
.book__pages {
  position: absolute;
  inset: 8% 4% 8% 6%;
  background: linear-gradient(90deg, #d9c79c, #f3e7c8 18%, #f3e7c8);
  box-shadow: inset 0 0 0 1px #b89a62;
}
.book.is-opening .book__sprite { transition: none; }
.book.is-opening .book__link { outline: none; }
.lib-flash {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #f3e7c8;
  opacity: 0;
  pointer-events: none;
}

/* Back from reading: the book the visitor opened keeps a lit tag. */
.book.is-returned .book__plate { box-shadow: inset 0 0 0 2px var(--lantern), inset 0 0 0 4px var(--ui-void); }

/* Touch screens have no hover, so the cue is always shown. */
@media (hover: none) {
  .book--newest .book__cue { opacity: 1; }
}

/* Portrait: the tag hangs under the book on the desk front; the cue sits beside the book, pointing at it. */
@media (orientation: portrait) {
  .book__tag { bottom: auto; top: calc(100% + 14px); }
  .book__tag::after { top: auto; bottom: 100%; height: 14px; }
  .book__plate { max-inline-size: 12rem; }
  .book__cue { left: auto; right: calc(100% + 8px); top: 50%; translate: 0 -50%; flex-direction: row-reverse; }
}

@media (prefers-reduced-motion: reduce) {
  .book__sprite, .book__cue, .book__halo::after, .library__summary::before { transition: none; }
  .book__link:hover .book__cue::before, .book__link:focus-visible .book__cue::before { animation: none; }
}

@media (forced-colors: active) {
  .book__halo, .book__spark { display: none; }
  .book__plate, .book__cue-key, .library__summary, .library__list { border: 2px solid CanvasText; }
  .book__link:focus-visible { outline-color: Highlight; }
}

/* ---------- The reader: a journal from the same world ---------- */

/* The HUD strip is solid over the article, so text never shows through behind it while reading. */
.page-reader .topbar {
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 3px),
    rgb(0 9 22);
}

.page-reader .screen { width: min(72rem, 100% - 2rem); padding-top: clamp(2rem, 6vh, 4rem); }

.reader__book {
  --ink: #1d1830;
  --paper: #f3e7c8;
  --paper-2: #eadbb4;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 12px;
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.04) 0 2px, transparent 2px 6px),
    var(--spine, #7a2a8c);
  box-shadow:
    inset 0 0 0 2px #0b0614,
    inset 0 0 0 7px var(--spine-shade, #4f1b5b),
    inset 0 0 0 9px rgb(246 215 124 / 0.7),
    0 18px 40px rgb(0 0 0 / 0.55);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.reader__ribbon {
  position: absolute;
  top: 0;
  right: 10%;
  z-index: 2;
  width: 14px;
  height: 52px;
  background: var(--spine-shade, #4f1b5b);
  box-shadow: inset 2px 0 0 var(--spine-light, #9f66ac);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}
.reader__cover {
  padding: 2rem 1.25rem 1.75rem;
  background: var(--paper-2);
  color: var(--ink);
  text-align: center;
  outline: 1px solid #d9c79c;
  outline-offset: -8px;
}
.reader__cover-in { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.reader__emblem { width: 54px; height: 54px; filter: drop-shadow(0 0 0 #0b0614); }
.reader .reader__title {
  margin: 0;
  font: 400 1rem/1.7 var(--pixel);
  color: var(--ink);
  text-transform: none;
  text-shadow: none;
  text-wrap: balance;
}
.reader__byline {
  margin: 0;
  font: italic 400 1.0625rem/1.5 "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  color: #4a3f5c;
}
.reader__gutter { display: none; }

.reader__page {
  padding: 1.75rem 1.25rem 2rem;
  background: var(--paper);
  color: var(--ink);
  outline: 1px solid #d9c79c;
  outline-offset: -8px;
  font: 400 1.0625rem/1.65 "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}
.reader__page > * { max-width: 64ch; }
.reader__page p { margin: 0 0 1em; font: inherit; }
.reader__page h2 { margin: 1.75em 0 0.6em; font: 400 0.875rem/1.7 var(--pixel); color: var(--ink); }
.reader__page blockquote { margin: 1.25em 0; padding: 0.1em 0 0.1em 1.1em; border-left: 3px solid var(--spine, #7a2a8c); font-style: italic; }
.reader__page a { color: #1f4fa8; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.reader__page a:hover { color: #7a2a8c; }
.reader__page .post__salute { font-style: italic; }
.reader__page .post__signoff { margin-top: 1.5em; text-align: right; font-size: 1.25em; font-style: italic; }
.reader__page .post__ps { margin-top: 2rem; padding-top: 1.25rem; position: relative; }
.reader__page .post__ps::before { content: ""; position: absolute; top: 0; left: 0; width: 4rem; height: 2px; background: #b89a62; }
.reader__book ::selection { background: #f6d77c; color: #1d1830; }
.reader__book :focus-visible { outline: 3px solid #1f4fa8; outline-offset: 3px; }

/* "Back to the library": a dark key-cap on the parchment. */
.reader__back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.65rem 0.95rem;
  border: 2px solid #0b0614;
  background: #1d1830;
  box-shadow: inset 0 0 0 2px var(--spine, #7a2a8c);
  font: 400 0.6875rem/1.4 var(--pixel);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}
.reader__back::before { content: ""; border-block: 5px solid transparent; border-right: 7px solid var(--lantern); }
.reader__back:hover { background: var(--spine, #7a2a8c); color: #fff; }
.reader__page .reader__back { color: #fff; }
.reader__back:active { translate: 0 2px; }
.reader__page .reader__end { margin: 2.5rem 0 0; }

/* Wide screens: an open book. The cover page stays to hand while the article page scrolls with the page. */
@media (min-width: 64rem) {
  .reader__book { max-width: 72rem; width: 100%; margin: 0 auto; }
  .reader__book { grid-template-columns: 19rem 24px minmax(0, 1fr); align-items: stretch; }
  .reader__cover { padding: 2.75rem 1.5rem 2.25rem; }
  .reader__cover-in { position: sticky; top: 104px; gap: 1.25rem; }
  .reader__cover .reader__back { font-size: 0.625rem; }
  .reader__gutter {
    display: block;
    align-self: stretch;
    background: linear-gradient(90deg, #c9b483, #8d7748 50%, #c9b483);
  }
  .reader__page { padding: 3.5rem 4rem 4.5rem; font-size: 1.1875rem; line-height: 1.7; }
  .reader .reader__title { font-size: 1.25rem; line-height: 1.6; }
  .reader__emblem { width: 72px; height: 72px; }
}

@media (max-width: 40rem) {
  .reader__book { padding: 8px; box-shadow: inset 0 0 0 2px #0b0614, inset 0 0 0 5px var(--spine-shade, #4f1b5b), inset 0 0 0 6px rgb(246 215 124 / 0.7), 0 12px 28px rgb(0 0 0 / 0.55); }
  .reader__page { padding: 1.5rem 1.25rem 1.75rem; }
}

@media (forced-colors: active) {
  .reader__book { border: 2px solid CanvasText; }
  .reader__back { border-color: CanvasText; }
}