/* ── Print: comics, magazines and newspapers ─────────────────
   The directory (/print), browsing, a work's page and the page-by-page
   reader. Colours are the site's tokens; covers come from the archives. */

/* ── Covers and cards ── */
.pr-cover { background: var(--placeholder); }
/* No backdrop of its own: until a cover arrives, the name below it shows. */
.pr-cover .card-img { object-fit: cover; background: none; }
/* A work without a cover: its name set like a masthead. */
.pr-cover-name {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0.9rem;
  font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem; line-height: 1.15;
  text-align: center; color: var(--text); overflow: hidden;
  border-top: 3px double var(--border-strong); border-bottom: 3px double var(--border-strong);
  margin: 1.4rem 0.6rem;
}
.pr-card .card-meta { font-variant-numeric: tabular-nums; }
.pr-badge { position: absolute; left: 0.5rem; bottom: 0.5rem; z-index: 1; padding: 2px 7px; border-radius: 4px; background: var(--scrim); color: var(--on-media); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; }

/* ── The directory ── */
.pr-hero { padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) 0.5rem; }
.pr-hero h1 { margin: 0 0 0.35rem; }
.pr-lede { max-width: 46rem; color: var(--text-muted); margin: 0 0 1rem; }
.pr-links { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 0.5rem; }
.pr-stat { color: var(--text-dim); font-size: var(--step--1); font-variant-numeric: tabular-nums; margin: 0.5rem 0 0; }
.pr-rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0 var(--gutter); }
.pr-more { color: var(--accent-text); font-size: var(--step--1); text-decoration: underline; white-space: nowrap; }
.pr-credit { max-width: 52rem; padding: 0 var(--gutter) 2.5rem; color: var(--text-muted); font-size: var(--step--1); line-height: 1.55; }
.pr-credit a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.15em; }
.pr-credit li { margin: 0.35rem 0; }

/* ── Browsing ── */
.pr-filters { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: end; margin-bottom: 0.75rem; }
.pr-filters label { display: grid; gap: 0.2rem; font-size: var(--step--2); color: var(--text-muted); }
.pr-filters select { min-width: 8rem; max-width: 14rem; padding: 0.4rem 0.6rem; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: var(--step--1); }
.pr-applied { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0 0 0.75rem; align-items: center; }
.pr-applied a:not(.filter-pill) { color: var(--accent-text); font-size: var(--step--1); text-decoration: underline; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 1.25rem 1rem; padding: 0 var(--gutter) 2rem; }
.pr-grid .card { flex-basis: auto; width: auto; }
.pr-pages-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; padding: 0 var(--gutter) 3rem; }
.pr-pages-nav a, .pr-pages-nav span { min-width: 2.5rem; text-align: center; }
.pr-about { max-width: 52rem; margin: 0.25rem 0 1rem; color: var(--text-muted); font-size: var(--step--1); line-height: 1.55; }
.pr-about summary { cursor: pointer; color: var(--text); font-weight: 600; }
.pr-about table { border-collapse: collapse; margin: 0.5rem 0; }
.pr-about th, .pr-about td { text-align: left; vertical-align: top; padding: 0.3rem 0.75rem 0.3rem 0; border-bottom: 1px solid var(--hairline); }
@media (max-width: 640px) {
  .pr-filters select { min-width: 0; max-width: none; width: 100%; }
  .pr-filters label { flex: 1 1 calc(50% - 0.75rem); }
  .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── A work's page ── */
.pr-work { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3rem); padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) 1.5rem; align-items: start; }
.pr-work-cover { position: relative; aspect-ratio: 2 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--placeholder); box-shadow: var(--shadow-1); }
.pr-work-cover img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-work h1 { margin: 0 0 0.25rem; font-size: var(--step-3, 1.9rem); line-height: 1.15; }
.pr-work-by { color: var(--text-muted); margin: 0 0 0.75rem; }
.pr-work-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; color: var(--text-dim); font-size: var(--step--1); margin: 0 0 1rem; list-style: none; padding: 0; }
.pr-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.25rem; }
.pr-desc { max-width: 46rem; line-height: 1.6; }
.pr-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 1rem 0; font-size: var(--step--1); }
.pr-facts dt { color: var(--text-dim); }
.pr-facts dd { margin: 0; color: var(--text-muted); }
.pr-facts a { color: var(--accent-text); }
.pr-note { max-width: 46rem; margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-left: 4px solid var(--warning); background: color-mix(in oklab, var(--warning) 10%, transparent); border-radius: 0 var(--radius) var(--radius) 0; color: var(--text); font-size: var(--step--1); line-height: 1.5; }
.pr-unavailable { color: var(--text-muted); }
.pr-issue-list { max-width: 72rem; padding: 0 var(--gutter) 2rem; }
.pr-years .filter-pill--active .count { color: inherit; }
.pr-years { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.pr-issues { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 0.4rem 0.75rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.pr-issues a { display: block; padding: 0.45rem 0.6rem; border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.pr-issues a:hover { background: var(--bg-hover); }
.pr-month { margin: 1rem 0 0.4rem; font-size: var(--step-0); color: var(--text-muted); }
@media (max-width: 700px) {
  .pr-work { grid-template-columns: 1fr; }
  .pr-work-cover { max-width: 14rem; }
}

/* ── The reader ── */
.pr { --pr-top: 0px; position: relative; }
/* Buttons with a display of their own still hide when told to. */
.pr [hidden], .pr-work [hidden] { display: none !important; }
.pr-bar { position: sticky; top: var(--pr-top); z-index: 5; display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem var(--gutter); background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.pr-heading { flex: 1 1 12rem; min-width: 0; }
.pr-title { margin: 0; font-size: var(--step-0); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-sub { margin: 0; color: var(--text-dim); font-size: var(--step--2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-width: 2.5rem; min-height: 2.5rem; padding: 0.3rem 0.6rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: var(--step--1); cursor: pointer; text-decoration: none; }
.pr-btn:hover { background: var(--bg-hover); }
.pr-btn[aria-pressed="true"], .pr-btn[aria-expanded="true"] { background: var(--accent-tint); border-color: var(--accent); color: var(--text); }
.pr-btn:disabled { opacity: 0.45; cursor: default; }
.pr-btn .icon { width: 1.1em; height: 1.1em; }
.pr-count, .pr-zoom-level { color: var(--text-muted); font-size: var(--step--1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-group { display: inline-flex; gap: 0.25rem; align-items: center; }
.pr .pr-note { margin: 0.75rem var(--gutter) 0; }
.pr-body { display: flex; align-items: stretch; }
.pr-stage { position: relative; flex: 1 1 auto; min-width: 0; outline: none; }
.pr-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.pr-pages { list-style: none; margin: 0 auto; padding: 1rem var(--gutter) 2rem; display: grid; gap: 1rem; max-width: 60rem; }
.pr-page { margin: 0; position: relative; }
.pr-page[data-failed] img { opacity: 0.25; }
.pr-retry { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); z-index: 2; }
.pr-page img { display: block; width: 100%; height: auto; background: var(--placeholder); box-shadow: var(--shadow-1); }
.pr-turn, .pr-foot, .pr-end { display: none; }

/* Paged (script running): one page or a spread at a time, fitted. */
.pr[data-paged] .pr-stage { height: calc(100dvh - 64px - 3.5rem - 3.25rem); overflow: auto; display: flex; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; background: color-mix(in oklab, var(--bg) 60%, var(--surface)); }
.pr[data-paged] .pr-pages { display: flex; flex-direction: row; gap: 0; margin: auto; padding: 8px; max-width: none; }
.pr[data-paged][data-dir="rtl"] .pr-pages { flex-direction: row-reverse; }
.pr[data-paged] .pr-page { display: none; flex: none; }
.pr[data-paged] .pr-page[data-on] { display: block; }
.pr[data-paged] .pr-page img { width: auto; max-width: none; }
.pr[data-paged][data-two] .pr-page img { box-shadow: none; }
.pr[data-paged][data-two] .pr-pages { box-shadow: var(--shadow-2); }
.pr[data-paged] .pr-turn { display: grid; place-items: center; position: absolute; top: 50%; z-index: 2; width: 3rem; height: 5rem; margin-top: -2.5rem; border: 0; border-radius: var(--radius); background: var(--scrim); color: var(--on-media); font-size: 1.6rem; cursor: pointer; opacity: 0; transition: opacity 0.2s; }
.pr[data-paged] .pr-turn--left { left: 0.5rem; }
.pr[data-paged] .pr-turn--right { right: 0.5rem; }
.pr[data-paged] .pr-body:hover .pr-turn, .pr[data-paged] .pr-turn:focus-visible { opacity: 0.85; }
.pr[data-paged] .pr-foot { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem var(--gutter); min-height: 3.25rem; border-top: 1px solid var(--hairline); }
.pr-foot input[type="range"] { flex: 1; min-width: 6rem; accent-color: var(--accent); }
.pr-foot a { color: var(--accent-text); font-size: var(--step--1); white-space: nowrap; }
.pr[data-paged] .pr-end:not([hidden]) { display: grid; place-items: center; gap: 0.75rem; position: absolute; inset: 0; z-index: 3; padding: 2rem; text-align: center; background: color-mix(in oklab, var(--bg) 88%, transparent); }
.pr-end p { margin: 0; color: var(--text-muted); }

/* The text beside the page. */
.pr-text { flex: 0 0 min(28rem, 40vw); max-height: calc(100dvh - var(--pr-top) - var(--pr-bar, 3.5rem) - 3.25rem); overflow: auto; padding: 0.75rem 1rem 2rem; border-left: 1px solid var(--hairline); background: var(--bg-raised); font-family: var(--font-serif); line-height: 1.55; }
.pr-text h2 { margin: 0 0 0.6rem; font-family: var(--font); font-size: var(--step-0); }
.pr-find { display: flex; gap: 0.4rem; margin: 0 0 0.5rem; font-family: var(--font); }
.pr-find input { flex: 1; min-width: 0; padding: 0.4rem 0.7rem; border-radius: var(--field-radius); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; }
.pr-find-status { margin: 0 0 0.5rem; font-family: var(--font); font-size: var(--step--2); color: var(--text-dim); }
.pr-hits { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.3rem; font-family: var(--font); }
.pr-hit { display: block; width: 100%; text-align: left; padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-muted); font: inherit; font-size: var(--step--2); cursor: pointer; }
.pr-hit strong { color: var(--text); }
.pr-text mark { background: color-mix(in oklab, var(--warning) 35%, transparent); color: var(--text); border-radius: 2px; }
.pr-text-body p { margin: 0 0 0.75rem; }
.pr-text-none { color: var(--text-dim); font-family: var(--font); }
.pr-text-links { font-family: var(--font); font-size: var(--step--1); }
.pr-text-links a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.15em; }
@media (max-width: 760px) {
  .pr-body { flex-direction: column; }
  .pr[data-paged][data-text-open] .pr-stage { height: 52dvh; }
  .pr-text { flex: none; max-height: none; border-left: 0; border-top: 1px solid var(--hairline); }
}
/* Two pages side by side need a wide screen, so the choice is not offered on a narrow one. */
@media (max-width: 899px) {
  .pr-bar [data-act="spread"] { display: none; }
}

/* Full screen: the pages and a toolbar that comes and goes. */
.pr[data-full] { background: var(--bg); overflow: hidden; }
.pr[data-full][data-paged] .pr-stage { height: calc(100dvh - 3.25rem); }
.pr[data-full] .pr-bar { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transition: opacity 0.2s; }
.pr[data-full] .pr-bar:focus-within, .pr[data-full][data-chrome] .pr-bar, .pr[data-full] .pr-bar:hover { opacity: 1; }
.pr[data-full] .pr-note { display: none; }

/* TV: one page fills the screen; the toolbar shows when focused. */
[data-tv] .pr[data-paged] .pr-stage { background: var(--media-bg); }
[data-tv] .pr .pr-bar { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transition: opacity 0.2s; }
[data-tv] .pr .pr-bar:focus-within { opacity: 1; }
[data-tv] .pr .pr-foot, [data-tv] .pr .pr-turn { display: none; }
[data-tv] .pr[data-paged] .pr-pages { padding: 0; }

/* ── The text-only issue ── */
.pr-plain { max-width: 44rem; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) 3rem; font-family: var(--font-serif); line-height: 1.65; font-size: var(--step-0); }
.pr-plain h1 { font-family: var(--font); line-height: 1.2; }
.pr-plain h2 { font-family: var(--font); font-size: var(--step-1); margin: 2.5rem 0 0.75rem; padding-top: 1rem; border-top: 1px solid var(--hairline); }
.pr-plain p { margin: 0 0 1rem; }
.pr-plain .pr-text-links { margin: 0 0 1.5rem; }