/* ── bars ───────────────────────────────────────────────────────────── */
.chrome {
  position: fixed; left: 0; right: 0;
  z-index: 60;
  display: flex; align-items: center; gap: .75rem;
  height: calc(var(--chrome-h) + .35rem);
  padding: 0 clamp(.75rem, 2.4vw, 1.6rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 460ms ease, translate 560ms cubic-bezier(.3,.7,.3,1);
}
.chrome--top    { top: 0;    translate: 0 -.6rem; padding-top: .35rem; }
.chrome--bottom { bottom: 0; translate: 0 .6rem; padding-bottom: .35rem; justify-content: center; }

/* Full-bleed, the page runs under the bars, and a page can be any colour at
   all. The scrim is taller than the bar so it has room to fall off, and it
   sits behind the controls rather than clipping them to the bar's own height. */
.chrome::before {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 300%;
  z-index: -1;
  pointer-events: none;
}
.chrome--top::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(8,5,7,.97) 0%, rgba(8,5,7,.82) 26%, rgba(8,5,7,.42) 58%, rgba(8,5,7,0) 100%);
}
.chrome--bottom::before {
  bottom: 0;
  background: linear-gradient(to top, rgba(8,5,7,.98) 0%, rgba(8,5,7,.86) 26%, rgba(8,5,7,.46) 58%, rgba(8,5,7,0) 100%);
}

body[data-state="reading"] .chrome { opacity: 1; translate: 0 0; }

/* Full-bleed, the page runs underneath these bars, so the bar itself and its
   scrim must be transparent to the pointer — otherwise the top and bottom of
   every page stops answering clicks. Only the controls take events. */
body[data-state="reading"] .chrome { pointer-events: none; }
body[data-state="reading"] .chrome > *:not(.chrome__title) { pointer-events: auto; }

.chrome__title {
  flex: 1 1 auto;
  margin: 0;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--ink-soft);
  text-transform: uppercase;
  display: flex; flex-direction: column; line-height: 1.25;
  pointer-events: none;
}
.chrome__title b { font-weight: 500; color: var(--ink-soft); letter-spacing: .13em; }
.chrome__title span { color: var(--accent-ink); letter-spacing: .16em; font-size: .68rem; transition: color 400ms ease; }

.chrome__right { display: flex; gap: .5rem; align-items: center; }

.scrubber { display: flex; flex-direction: column; align-items: center; gap: .1rem; width: min(30rem, 46vw); }
.scrubber__read {
  margin: 0; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}

#scrub {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 1.1rem; background: transparent; cursor: pointer; margin: 0;
}
#scrub::-webkit-slider-runnable-track {
  height: 2px; border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--pct, 0%), rgba(236,226,225,.20) var(--pct, 0%));
}
#scrub::-moz-range-track { height: 2px; border-radius: 2px; background: rgba(236,226,225,.20); }
#scrub::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--accent); }
#scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: .62rem; height: .62rem; border-radius: 50%;
  background: var(--accent-ink); border: 2px solid var(--room-deep);
  margin-top: -.28rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.7);
}
#scrub::-moz-range-thumb {
  width: .62rem; height: .62rem; border-radius: 50%; border: 2px solid var(--room-deep);
  background: var(--accent-ink); box-shadow: 0 1px 3px rgba(0,0,0,.7);
}

@media (max-width: 820px) {
  .chrome__title b { display: none; }
  .scrubber { width: 52vw; }
}

/* ── contents drawer ────────────────────────────────────────────────── */
.drawer { position: fixed; inset: 0; z-index: 120; }
.drawer[hidden] { display: none; }

.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(6,4,5,.62);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 300ms ease;
}
.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: min(24rem, 88vw);
  background: var(--card);
  box-shadow: 0 0 60px -10px rgba(0,0,0,.9); border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  translate: -100% 0;
  transition: translate 380ms cubic-bezier(.3,.8,.3,1);
}
.drawer.is-open .drawer__panel { translate: 0 0; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--line-soft);
}
.drawer__head h2 {
  margin: 0; font-family: var(--font-orn); font-weight: 400;
  font-size: 2.1rem; line-height: 1; color: var(--ink);
}

.drawer__body { overflow-y: auto; padding: .5rem 0 2rem; overscroll-behavior: contain; }

.sect { border-bottom: 1px solid var(--line-soft); padding: .9rem 1.25rem 1.1rem; }
.sect:last-child { border-bottom: 0; }
.sect__head {
  display: flex; align-items: baseline; gap: .55rem; width: 100%;
  border: 0; background: none; padding: 0; text-align: left; cursor: pointer;
}
.sect__rule { flex: 1 1 auto; border-bottom: 1px solid var(--line); translate: 0 -.25em; }
.sect__head:hover .sect__rule { border-bottom-color: var(--accent); }
.sect__title { font-size: 1.02rem; font-weight: 600; letter-spacing: .01em; }
.sect__pp { font-size: .74rem; color: var(--ink-faint); letter-spacing: .06em; }
.sect__season {
  display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: .1rem;
}
.sect__head:hover .sect__title { color: var(--accent); }

.sect__grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem;
  margin-top: .7rem;
}
.thumb {
  position: relative; padding: 0; border: 0; background: none; cursor: pointer;
  aspect-ratio: var(--page-ratio);
  border-radius: 1px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--accent), 0 8px 18px -8px rgba(0,0,0,.9); }
.thumb.is-current { box-shadow: 0 0 0 2px var(--accent-ink); }
.thumb__n {
  position: absolute; inset: auto 0 0 0;
  font-size: .55rem; letter-spacing: .04em;
  background: rgba(12,8,10,.82); color: var(--ink-soft);
  padding: .05rem 0;
}
/* The front matter and the closing page are not numbered, so their caption is
   the page's name. It is allowed two lines rather than being cut to the first
   few letters, which left "Still Le" under the closing page. */
.thumb__n--name {
  font-size: .5rem; line-height: 1.25; letter-spacing: .03em;
  padding: .18rem .3rem; text-wrap: balance;
}

/* ── zoom overlay ───────────────────────────────────────────────────── */
.zoom { position: fixed; inset: 0; z-index: 150; background: #17130f; display: flex; flex-direction: column; }
.zoom[hidden] { display: none; }
.zoom.is-open { animation: zoomIn 240ms ease both; }
@keyframes zoomIn { from { opacity: 0 } to { opacity: 1 } }

.zoom__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem clamp(.75rem, 2.4vw, 1.4rem);
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex: 0 0 auto;
}
.zoom__label { margin: 0; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.zoom__tools { display: flex; align-items: center; gap: .4rem; }
.zoom .chip {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.8);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.zoom .chip:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.34); }
.zoom__pct { font-size: .74rem; color: rgba(255,255,255,.6); min-width: 3.2rem; text-align: center; font-variant-numeric: tabular-nums; }

.zoom__viewport {
  flex: 1 1 auto; overflow: hidden; position: relative;
  cursor: grab; touch-action: none;
}
.zoom__viewport.is-grabbing { cursor: grabbing; }
.zoom__canvas {
  position: absolute; top: 50%; left: 50%;
  display: flex; gap: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.zoom__page { position: relative; margin: 0; line-height: 0; }
.zoom__canvas img { height: auto; background: #fff; box-shadow: 0 0 40px rgba(0,0,0,.5); }

@media (prefers-reduced-motion: reduce) {
  .drawer__panel, .drawer__scrim { transition: none; }
  .zoom.is-open { animation: none; }
  .chrome { transition: opacity 240ms ease; translate: 0 0 !important; }
  .thumb, .polaroid { transition: none; }
}