/*
 * css/library.css  ·  the archive behind the sky (DESIGN §9)
 * Shell · top bar · Albums index · album hero · filters/sort · sections · justified grid · year scrubber
 */

/* ── Shell: its own full-screen scroll container above the sky ─────────── */
.library {
  --bar-h: 64px; --maxw: 1680px; --pad: var(--gutter);
  position: fixed; inset: 0; z-index: var(--z-library); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: var(--dusk-900); color: var(--cream); -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--dusk-600) transparent;
  user-select: none; -webkit-user-select: none;
}
/* entering in two layers, so the letter is never seen through the library's words: first the dusk
   ground (160 ms, linear), then, once it is opaque, the content rises 24 px and fades in on the glide
   (420 ms, from 160 ms; the glide is fast at its start, so an earlier start shows the words over the letter).
   Leaving reverses it. The ground is its own layer animating opacity, so it runs on the compositor
   clock with the content: a busy main thread (building the albums) can't hold the ground back while
   the words fade in over the letter. */
.library::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--dusk-900); pointer-events: none; }
/* the shell's own opaque ground steps aside only while that layer animates, then comes back as a safety net */
.library.is-entering { animation: lib-clear 160ms linear; }
.library.is-entering::before { animation: lib-ground-in 160ms linear both; }
.library.is-entering > * { animation: lib-content-in 420ms var(--ease-glide) 160ms both; }
.library.is-leaving { animation: lib-clear 400ms linear forwards; pointer-events: none; }
.library.is-leaving::before { animation: lib-ground-out 160ms linear 160ms forwards; }
.library.is-leaving > * { animation: lib-content-out 200ms var(--ease-drift) forwards; }
@keyframes lib-clear { from, to { background-color: transparent; } }
@keyframes lib-ground-in { from { opacity: 0; } }
@keyframes lib-ground-out { to { opacity: 0; } }
@keyframes lib-content-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes lib-content-out { to { opacity: 0; transform: translateY(24px); } }
.lib-view.is-in { animation: view-in 520ms var(--ease-glide); }
.library.is-entering > .lib-view.is-in { animation: lib-content-in 420ms var(--ease-glide) 160ms both; }
.library.is-leaving > .lib-view.is-in { animation: lib-content-out 200ms var(--ease-drift) forwards; }   /* beats .lib-view.is-in */
@keyframes view-in { from { opacity: 0; transform: translateY(12px); } }

/* ── Top bar ───────────────────────────────────────────────────────────── */
.lib-bar {
  position: sticky; top: 0; z-index: 6; height: calc(var(--bar-h) + var(--safe-t));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: var(--safe-t) calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l));
  background: var(--dusk-900); border-bottom: 1px solid var(--dusk-600);
}
.lib-bar-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lib-bar-r { display: flex; justify-content: flex-end; }
.lib-seal { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; text-decoration: none; flex: none; }
@media (hover: hover) and (pointer: fine) { .lib-seal:hover .mark-num { background: var(--ember-300); color: var(--dusk-900); } }
.lib-name { font: italic 400 22px/1 var(--f-display); color: var(--cream); white-space: nowrap; }
.lib-tabs {
  display: flex; height: 46px; padding: 0; border-radius: var(--r-chip);
  background: rgba(26, 20, 16, .82); border: 1px solid var(--haze);
}
.lib-tab {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 44px; padding: 0 20px;
  font: 500 13px/1 var(--f-ui); letter-spacing: .02em; color: var(--mist); text-decoration: none; white-space: nowrap; border-radius: var(--r-chip);
  transition: color var(--t-breath) var(--ease-breath);
}
.lib-tab::before { content: ""; position: absolute; inset: 4px; z-index: -1; border-radius: var(--r-chip); background: transparent; transition: background-color var(--t-breath) var(--ease-breath); }
.lib-tab[aria-current="page"] { color: var(--dusk-900); }
.lib-tab[aria-current="page"]::before { background: var(--cream); }
@media (hover: hover) and (pointer: fine) { .lib-tab:not([aria-current]):hover { color: var(--cream); } .lib-tab:not([aria-current]):hover::before { background: var(--dusk-700); } }
.lib-tab:focus-visible { outline-offset: -1px; }
.lib-back {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 2px;
  font: 500 13px/1 var(--f-ui); color: var(--cream); text-decoration: none; white-space: nowrap;
}
.lib-back::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ember-300); box-shadow: 0 0 0 3px rgba(242, 178, 108, .18), 0 0 14px rgba(242, 178, 108, .8); }
.lib-back:hover { color: var(--ember-100); }

/* ── Page heads ────────────────────────────────────────────────────────── */
.lib-head { max-width: var(--maxw); margin: 0 auto; padding: 64px calc(var(--pad) + var(--safe-r)) 44px calc(var(--pad) + var(--safe-l)); }
.lib-head.is-all { padding-bottom: 28px; }
.lib-title { height: 1.04em; font: italic 400 clamp(44px, 7vw, 88px)/1 var(--f-display); letter-spacing: -.012em; color: var(--cream); white-space: nowrap; }
.lib-title:focus, .hero-title:focus { outline: none; }
.lib-meta, .hero-range {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
  font: 600 10.5px/1.4 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--mist);
}
.lib-meta::before { content: ""; flex: none; width: 18px; height: 1px; background: var(--ember-300); }

/* ── Albums index ──────────────────────────────────────────────────────── */
.lib-albums {
  max-width: var(--maxw); margin: 0 auto; padding: 0 calc(var(--pad) + var(--safe-r)) 120px calc(var(--pad) + var(--safe-l));
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px 28px;
}
@media (max-width: 1179px) { .lib-albums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; } }
@media (max-width: 699px) { .lib-albums { grid-template-columns: minmax(0, 1fr); gap: 40px 16px; } }
.card { display: block; color: inherit; text-decoration: none; border-radius: var(--r-card); outline-offset: 6px; -webkit-touch-callout: none; }
.card-cover {
  position: relative; aspect-ratio: 4 / 3; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px;
  border-radius: var(--r-card); overflow: hidden; background: var(--dusk-950);
  box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .85);
  transition: transform 420ms var(--ease-glide), box-shadow 420ms var(--ease-glide);
}
.card-cover::after { /* the faint warmth of the sky's letter-light, on the paper's edge */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 226, 190, .08); transition: box-shadow 420ms var(--ease-glide);
}
.cc-main { position: relative; grid-row: 1 / 3; overflow: hidden; background: var(--dusk-800); }
.cc-side { position: relative; overflow: hidden; background: var(--dusk-800); }
.card-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms linear; }
.cc-side img.is-in, .cc-main img.is-in.is-front { opacity: 1; }
.card-body { padding: 20px 2px 0; }
.card-title { font: italic 400 30px/1.1 var(--f-display); color: var(--cream); transition: color var(--t-breath) var(--ease-breath); }
.card-range { margin-top: 10px; font: 600 10.5px/1.4 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ember-300); }
.card-counts { margin-top: 6px; font: 400 13px/1.45 var(--f-ui); color: var(--mist); word-spacing: .14em; }   /* Instrument Sans has a narrow space: the "·" separators need air */
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-cover { transform: translateY(-4px); box-shadow: 0 46px 70px -34px rgba(0, 0, 0, .95), 0 24px 70px -40px rgba(242, 178, 108, .35); }
  .card:hover .card-cover::after { box-shadow: inset 0 0 0 1px rgba(255, 226, 190, .22); }
  .card:hover .card-title { color: var(--ember-100); }
}
.card:active .card-cover { transform: scale(.985); transition-duration: var(--t-press); }
.lib-view.is-in .lib-albums li { animation: card-in 760ms var(--ease-glide) both; animation-delay: var(--d, 0ms); }
.lib-view.is-in:has(.lib-albums) { animation: none; }
@keyframes card-in { from { opacity: 0; transform: translateY(18px); } }
@media (max-width: 1279px) { .card-title { font-size: 28px; } }
@media (max-width: 599px) { .card-title { font-size: 26px; } }

/* ── Album hero ────────────────────────────────────────────────────────── */
.lib-hero { position: relative; height: clamp(300px, 46vh, 560px); overflow: hidden; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.lib-hero.is-portrait .hero-media { background: var(--dusk-900) !important; }
.lib-hero.is-portrait .hero-img { left: auto; right: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad))); width: auto; aspect-ratio: var(--ar); object-fit: cover; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.lib-hero.is-portrait .hero-shade { background: linear-gradient(to top, var(--dusk-900) 0%, rgba(18, 13, 10, .6) 30%, rgba(18, 13, 10, 0) 60%); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity 600ms linear; }   /* faces near the top survive the wide crop */
.hero-img.is-in { opacity: 1; }
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(18, 13, 10, .45), rgba(18, 13, 10, 0) 26%),
    linear-gradient(to top, var(--dusk-900) 0%, rgba(18, 13, 10, .86) 24%, rgba(18, 13, 10, .35) 55%, rgba(18, 13, 10, 0) 72%),
    radial-gradient(70% 90% at 0% 100%, rgba(12, 9, 7, .72), rgba(12, 9, 7, 0) 70%);   /* a local scrim under the words */
}
.hero-text {
  position: absolute; left: 0; right: 0; bottom: 30px; max-width: var(--maxw); margin: 0 auto;
  padding: 0 calc(var(--pad) + var(--safe-r)) 0 calc(var(--pad) + var(--safe-l));
}
@media (min-width: 600px) {
  .hero-text::before { /* a soft pool of dusk under the words, so the date and counts read over any photograph */
    content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--pad)); top: -60px; bottom: -40px; width: min(980px, 80%); pointer-events: none;
    background: radial-gradient(closest-side, rgba(12, 9, 7, .74), rgba(12, 9, 7, .52) 60%, rgba(12, 9, 7, 0));
  }
  .hero-text { isolation: isolate; }
  .hero-range { padding: 6px 12px; margin-left: -12px; border-radius: var(--r-chip); background: rgba(12, 9, 7, .66); }
}
.hero-range { margin: 0; width: fit-content; color: var(--ember-300); text-shadow: 0 0 3px rgba(12, 9, 7, .9), 0 1px 14px rgba(12, 9, 7, .85); }
.hero-title {
  margin: 14px 0 0; font: italic 400 clamp(44px, 8vw, 104px)/1 var(--f-display); letter-spacing: -.015em; color: var(--cream);
  text-shadow: 0 2px 40px rgba(0, 0, 0, .45); text-wrap: balance;
  font-optical-sizing: none; font-variation-settings: "opsz" 28;   /* heavier hairlines over a photograph: "+" and "<" stay visible */
}
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.hero-counts { font: 400 13px/1.4 var(--f-ui); color: var(--cream); opacity: .78; word-spacing: .14em; text-shadow: 0 0 3px rgba(12, 9, 7, .8), 0 1px 12px rgba(12, 9, 7, .8); }
.lib-head .head-row { margin-top: 18px; }
.lib-head .head-row .lib-meta { margin-top: 0; }
.lib-sort.is-head { display: none; }
@media (max-width: 599px) { .head-row { flex-wrap: wrap; row-gap: 4px; } .head-row .lib-sort { margin-left: auto; } }

/* ── Filters and sort (sticky under the bar) ──────────────────────────── */
.lib-controls {
  position: sticky; top: calc(var(--bar-h) + var(--safe-t)); z-index: 5; background: var(--dusk-900);
  border-bottom: 1px solid transparent; transition: border-color var(--t-glance) linear;
}
.lib-controls.is-stuck { border-bottom-color: var(--dusk-600); }
.lib-controls-in {
  max-width: var(--maxw); height: 60px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 calc(var(--pad) + var(--safe-r)) 0 calc(var(--pad) + var(--safe-l));
}
.lib-filters { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.lib-filters::-webkit-scrollbar { display: none; }
.f-pill, .lib-sort {
  position: relative; isolation: isolate; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 15px;
  font: 500 13px/1 var(--f-ui); color: var(--cream); white-space: nowrap; border-radius: var(--r-chip);
}
.f-pill::before, .lib-sort::before {
  content: ""; position: absolute; inset: 5px 0; z-index: -1; border-radius: var(--r-chip);
  background: rgba(26, 20, 16, .82); border: 1px solid var(--haze);
  transition: background-color var(--t-breath) var(--ease-breath), border-color var(--t-breath) var(--ease-breath);
}
.f-count { color: var(--mist); font-variant-numeric: lining-nums tabular-nums; }
.f-pill[aria-pressed="true"] { color: var(--dusk-900); }
.f-pill[aria-pressed="true"]::before { background: var(--cream); border-color: var(--cream); }
.f-pill[aria-pressed="true"] .f-count { color: rgba(18, 13, 10, .62); }
@media (hover: hover) and (pointer: fine) {
  .f-pill:not([aria-pressed="true"]):hover::before, .lib-sort:hover::before { background: var(--dusk-700); border-color: rgba(242, 178, 108, .45); }
}
.f-pill:active, .lib-sort:active { transform: scale(.97); }
.f-pill:focus-visible, .lib-sort:focus-visible { outline-offset: -1px; }
.lib-sort svg { width: 15px; height: 15px; fill: none; stroke: var(--ember-300); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* ── The current section, stuck under the controls ─────────────────────── */
.lib-stick { position: sticky; top: var(--stick-top, 124px); height: 0; z-index: 4; pointer-events: none; }
.lib-stick-in {
  position: absolute; left: 0; right: 0; top: 0; height: 48px; max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 calc(var(--pad) + var(--safe-r)) 6px calc(var(--pad) + var(--safe-l));
  background: linear-gradient(to bottom, var(--dusk-900) 74%, rgba(18, 13, 10, 0));
  opacity: 0; transition: opacity 160ms linear;
}
.lib-stick-in.is-on { opacity: 1; }
.lib-stick-in.is-month { height: 54px; }
.stick-label { font: 600 11.5px/1.2 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-month .stick-label { font: italic 400 22px/1.1 var(--f-display); letter-spacing: 0; text-transform: none; }
.library.is-scrubbing .stick-count { opacity: 0; }
.stick-count { flex: none; transition: opacity 160ms linear; min-width: 130px; text-align: right; font: 600 10.5px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }

/* ── Grid: sections, lanes and cells ───────────────────────────────────── */
.lib-gridwrap { max-width: var(--maxw); margin: 0 auto; padding: 0 calc(var(--pad) + var(--safe-r)) 0 calc(var(--pad) + var(--safe-l)); }
.lib-grid { position: relative; }
.lib-sec { position: absolute; left: 0; right: 0; display: flex; align-items: flex-end; gap: 16px; padding-bottom: 14px; }
.sec-title { font: 600 11.5px/1.2 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--cream); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-day, .lib-stick-in .sec-day { color: var(--ember-300); }
.lib-sec.is-month .sec-title { font: italic 400 28px/1.05 var(--f-display); letter-spacing: 0; text-transform: none; }
.sec-rule { flex: 1; min-width: 24px; height: 1px; margin-bottom: 5px; background: linear-gradient(90deg, rgba(243, 232, 216, .14), rgba(243, 232, 216, .05)); }
.lib-sec.is-month .sec-rule { margin-bottom: 9px; }
.sec-count { flex: none; margin-bottom: 1px; font: 600 10.5px/1.2 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }
.lib-row { position: absolute; left: 0; right: 0; }
.lane {
  position: absolute; top: 9px; height: 14px; display: flex; min-width: 0; overflow: hidden; white-space: nowrap;
  font: 600 10px/14px var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--mist);
}
.lane-date { flex: none; }
.lane-album { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: rgba(242, 178, 108, .88); }
.lane::before { content: ""; flex: none; width: 1px; height: 10px; margin: 2px 9px 0 0; background: var(--ember-300); opacity: .7; }

.cell {
  position: absolute; display: block; overflow: hidden; background-repeat: no-repeat; outline-offset: 2px;
  -webkit-touch-callout: none; transition: transform var(--t-press) var(--ease-press);
}
.cell img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 300ms linear, filter var(--t-glance) linear; -webkit-user-drag: none; }
.cell img.is-in { opacity: 1; }
.cell::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 226, 190, 0); transition: box-shadow var(--t-glance) linear; }
@media (hover: hover) and (pointer: fine) {
  .cell:hover img { filter: brightness(1.06); }
  .cell:hover::after { box-shadow: inset 0 0 0 1px rgba(255, 226, 190, .4); }
}
.cell:active { transform: scale(.98); }
.cell:focus-visible { z-index: 2; }
.cell.is-lifted { background: var(--dusk-950) !important; }
.cell.is-lifted > * , .cell.is-lifted::before { opacity: 0 !important; }
.cell.is-flash::after { animation: cell-flash 300ms var(--ease-breath) 2 alternate; }
@keyframes cell-flash { to { box-shadow: inset 0 0 0 3px var(--ember-300), inset 0 0 40px rgba(242, 178, 108, .35); } }
/* badges: Live (lagoon, top-left), video duration (bottom-left), loved (top-right) */
.cell.is-live::before {
  content: ""; position: absolute; left: 7px; top: 7px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(12, 9, 7, .42) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238fd3c7' stroke-width='1.2'%3E%3Ccircle cx='10' cy='10' r='2.2' fill='%238fd3c7' stroke='none'/%3E%3Ccircle cx='10' cy='10' r='4.6'/%3E%3Ccircle cx='10' cy='10' r='7' stroke-dasharray='1.1 1.7'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.cell.is-video::before {
  content: attr(data-dur); position: absolute; left: 7px; bottom: 7px; height: 19px; padding: 0 8px 0 21px; border-radius: 10px;
  font: 600 10.5px/19px var(--f-ui); color: var(--cream); letter-spacing: .02em; font-variant-numeric: tabular-nums;
  background: rgba(12, 9, 7, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 1.5v7l6-3.5z' fill='%23f3e8d8'/%3E%3C/svg%3E") 8px 50% / 9px no-repeat;
}
.c-loved { position: absolute; right: 8px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ember-300); box-shadow: 0 0 0 2px rgba(12, 9, 7, .35), 0 0 10px rgba(242, 178, 108, .8); }

.lib-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 72px 0 140px; }
.lib-empty p { font: italic 400 22px/1.4 var(--f-text); color: var(--mist); }

/* ── Year scrubber (All photos) ────────────────────────────────────────── */
/* it lies over the grid's right edge (the grid runs to the same gutter as everything else); its hit area
   stays inside the gutter on desktop, and on touch it only takes fingers while it is showing.
   It starts below the stuck section label, so the thumb never covers that label's count. */
.scrub {
  position: fixed; z-index: 7; right: var(--safe-r);
  top: calc(var(--stick-top, 124px) + 62px); bottom: calc(28px + var(--safe-b)); width: 24px;
  touch-action: none; cursor: ns-resize; opacity: 0; transition: opacity 420ms var(--ease-glide);
  -webkit-user-select: none; user-select: none; outline-offset: 2px; border-radius: 12px;
}
.scrub:not(.is-armed):not(.is-active) { pointer-events: none; }
.scrub.is-on, .scrub:focus-visible { opacity: 1; }
.scrub::before { /* a backing strip, so the years never sit straight on a photograph */
  content: ""; position: absolute; right: calc(-1 * var(--safe-r)); top: -24px; bottom: -24px; width: 72px; pointer-events: none;
  background: linear-gradient(to left, rgba(18, 13, 10, .88), rgba(18, 13, 10, 0));
}
.scrub.is-active::before, .scrub.is-hover::before { width: 110px; }
.scrub-rail { position: absolute; right: 11px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: rgba(243, 232, 216, .18); }
.scrub-tick { position: absolute; right: -3px; width: 8px; height: 1px; background: rgba(243, 232, 216, .38); }
.scrub-tick.is-near span { visibility: hidden; }
.scrub-tick span {
  position: absolute; right: 18px; top: -6px; font: 600 9.5px/12px var(--f-ui); letter-spacing: .12em; color: var(--mist);
  opacity: 0; transition: opacity 200ms linear; font-variant-numeric: lining-nums tabular-nums;
}
.scrub.is-active .scrub-tick span, .scrub.is-hover .scrub-tick span, .scrub:focus-visible .scrub-tick span { opacity: 1; }
.scrub-thumb {
  position: absolute; right: 4px; top: 0; width: 16px; height: 32px; border-radius: 8px; background: var(--ember-300);
  box-shadow: 0 0 0 3px rgba(242, 178, 108, .18), 0 0 18px rgba(242, 178, 108, .6);
}
.scrub-bubble {
  position: absolute; right: 34px; top: 0; z-index: 2; height: 40px; padding: 0 18px; display: flex; align-items: center; white-space: nowrap;
  border-radius: 20px; background: var(--dusk-800); border: 1px solid rgba(242, 178, 108, .35); box-shadow: var(--sh-panel);
  font: italic 400 19px/1 var(--f-display); color: var(--cream); opacity: 0; transition: opacity 200ms linear; pointer-events: none;
}
.scrub.is-active .scrub-bubble, .scrub:focus-visible .scrub-bubble { opacity: 1; }
.scrub.is-active .scrub-tick span, .scrub.is-active .scrub-bubble { transition-duration: 80ms; }

@media (hover: none), (pointer: coarse) {
  .scrub { width: 44px; }
  .scrub:not(.is-on):not(.is-active) { pointer-events: none; }
  .scrub::before { width: 88px; }
  .scrub-rail { right: 21px; }
  .scrub-thumb { right: 14px; }
  .scrub-bubble { right: 52px; }
}

/* ── Breakpoints ───────────────────────────────────────────────────────── */
@media (max-width: 899px) { .lib-bar-r { display: none; } .lib-bar { grid-template-columns: 1fr auto; } }
@media (max-width: 599px) {
  .library { --bar-h: 56px; }
  .lib-bar { gap: 8px; }
  .lib-name { display: none; }
  .lib-tab { padding: 0 15px; font-size: 12.5px; }
  .lib-head { padding-top: 40px; padding-bottom: 30px; }
  /* phones: the photo keeps its own shape (nobody's face goes under the title); the words sit just below it */
  .lib-hero, .lib-hero.is-portrait { height: auto; overflow: visible; }
  .hero-media, .lib-hero.is-portrait .hero-media { position: relative; width: 100%; aspect-ratio: var(--ar); max-height: 58vh; }
  .hero-img, .lib-hero.is-portrait .hero-img { position: absolute; inset: 0; left: 0; right: 0; width: 100%; height: 100%; aspect-ratio: auto; box-shadow: none; }
  .hero-shade, .lib-hero.is-portrait .hero-shade { background: linear-gradient(to top, var(--dusk-900) 0%, rgba(18, 13, 10, .7) 18%, rgba(18, 13, 10, 0) 45%); }
  .hero-text { position: relative; bottom: auto; margin-top: -44px; padding-bottom: 14px; }
  .lib-controls-in { height: 56px; gap: 8px; }
  /* phones: the pills keep the whole row (the sort moves into the page head), only the chosen pill shows
     its count, and a sideways scroll always comes to rest in a gap, never mid-word */
  .lib-filters { scroll-snap-type: x mandatory; scroll-padding-inline: 0; }
  .f-pill { scroll-snap-align: start; padding: 0 12px; font-size: 12.5px; gap: 6px; }
  .f-pill:not([aria-pressed="true"]) .f-count { display: none; }
  .lib-sort.is-bar { display: none; }
  .lib-sort.is-head { display: inline-flex; flex: none; padding: 0 14px; font-size: 12.5px; gap: 7px; margin-right: -6px; }
  .lib-gridwrap, .lib-gridwrap.is-all { padding: 0 calc(3px + var(--safe-r)) 0 calc(3px + var(--safe-l)); }
  .lib-stick.is-all .lib-stick-in { padding-right: calc(var(--pad) + var(--safe-r)); }
  .lib-sec { padding-left: 13px; padding-right: 13px; }
  .lib-sec.is-month .sec-title { font-size: 22px; }
  .sec-title { font-size: 10.5px; letter-spacing: .14em; }
  .lib-sec { gap: 10px; }
  .sec-rule { min-width: 0; }
  .sec-count { letter-spacing: .14em; }
  .stick-count { min-width: 98px; letter-spacing: .14em; }   /* a fixed box: changing counts never shift (CLS 0) */
  .stick-label { font-size: 10.5px; letter-spacing: .14em; }
  .lane { font-size: 9.5px; letter-spacing: .12em; }
  .lane::before { margin-left: 4px; }
  .cell.is-live::before { left: 5px; top: 5px; }
  .cell.is-video::before { left: 5px; bottom: 5px; }
}
/* a phone on its side: the library's sticky chrome must not take half the screen */
@media (max-height: 500px) and (orientation: landscape) {
  .library { --bar-h: 56px; }
  .lib-controls { position: relative; top: auto; }
  .lib-stick { display: none; }
  .lib-hero { height: max(220px, 60vh); }
}
@media (min-width: 900px) and (max-width: 1279px) { .lib-sec.is-month .sec-title { font-size: 26px; } }
@media (min-width: 600px) and (max-width: 899px) { .lib-sec.is-month .sec-title { font-size: 24px; } }

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .library.is-entering, .library.is-leaving, .library.is-entering::before, .library.is-leaving::before, .library.is-entering > *, .library.is-leaving > *, .library.is-entering > .lib-view.is-in, .library.is-leaving > .lib-view.is-in, .lib-view.is-in, .lib-view.is-in .lib-albums li { animation: none; }
  .card-cover, .cell, .cell img, .hero-img, .card-cover img { transition-duration: 1ms; }
  .cell.is-flash::after { animation-duration: 1ms; animation-iteration-count: 1; box-shadow: inset 0 0 0 3px var(--ember-300); }
}