/* ==================================================================
   The Gospel of the Logos — reading room
   A candlelit codex for a cosmic comedy.
   Display: Fraunces · Body: Newsreader · UI: Schibsted Grotesk
   ================================================================== */

/* ----------------------------- themes ---------------------------- */
:root {
  --serif-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --serif-body: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Schibsted Grotesk", "Avenir Next", "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(.22, .7, .25, 1);
  /* dawn palette doubles as the fallback: an unknown data-theme degrades
     to dawn instead of a transparent page */
  --bg: #f5efe2;
  --bg-raised: #efe7d3;
  --bg-panel: #faf5ea;
  --ink: #2b2218;
  --ink-soft: #756449;
  --line: rgba(43, 34, 24, .16);
  --accent: #8b5e19;
  --accent-2: #8d3f2a;
  --quote-bg: rgba(139, 94, 25, .07);
  --grain: .05;
  --star: 0;
}

html[data-theme="dawn"] {
  --bg: #f5efe2;
  --bg-raised: #efe7d3;
  --bg-panel: #faf5ea;
  --ink: #2b2218;
  --ink-soft: #756449;
  --line: rgba(43, 34, 24, .16);
  --accent: #8b5e19; /* AA on every dawn surface incl. the Begin button */
  --accent-2: #8d3f2a;
  --quote-bg: rgba(139, 94, 25, .07);
  --grain: .05;
  --star: 0;
  color-scheme: light;
}

html[data-theme="dusk"] {
  --bg: #211a13;
  --bg-raised: #2b2218;
  --bg-panel: #281f16;
  --ink: #ecdfc7;
  --ink-soft: #ab9878;
  --line: rgba(236, 223, 199, .16);
  --accent: #d9a648;
  --accent-2: #cd7a50;
  --quote-bg: rgba(217, 166, 72, .07);
  --grain: .06;
  --star: 0;
  color-scheme: dark;
}

html[data-theme="midnight"] {
  --bg: #0b0e16;
  --bg-raised: #131829;
  --bg-panel: #101524;
  --ink: #d8dcec;
  --ink-soft: #8e96b4;
  --line: rgba(216, 220, 236, .15);
  --accent: #cda761;
  --accent-2: #8aa3dd;
  --quote-bg: rgba(205, 167, 97, .07);
  --grain: .03;
  --star: .5;
  color-scheme: dark;
}

/* ------------------- reader preference mappings ------------------ */
html[data-size="1"] { --body-size: 1.0625rem; }
html[data-size="2"] { --body-size: 1.1875rem; }
html[data-size="3"] { --body-size: 1.3125rem; }
html[data-size="4"] { --body-size: 1.46875rem; }
html[data-size="5"] { --body-size: 1.625rem; }

html[data-width="1"] { --measure: 34em; }
html[data-width="2"] { --measure: 40em; }
html[data-width="3"] { --measure: 48em; }

html[data-leading="1"] { --leading: 1.55; }
html[data-leading="2"] { --leading: 1.72; }
html[data-leading="3"] { --leading: 1.9; }

html[data-face="serif"] { --body-face: var(--serif-body); --body-tracking: 0; }
html[data-face="sans"]  { --body-face: var(--sans); --body-tracking: .002em; }

/* ------------------------------ base ----------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  transition: background-color .5s var(--ease), color .5s var(--ease);
  min-height: 100dvh;
}

/* paper grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--grain);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/><feColorMatrix type="saturate" values="0"/></filter><rect width="180" height="180" filter="url(%23n)"/></svg>');
  mix-blend-mode: multiply;
}
html[data-theme="dusk"] body::after,
html[data-theme="midnight"] body::after { mix-blend-mode: screen; }

/* midnight starfield */
.stars {
  position: fixed;
  inset: 0 -640px -640px 0; /* bleed matches the one-tile drift */
  z-index: 0;
  pointer-events: none;
  opacity: var(--star);
  transition: opacity .8s var(--ease);
  background-image:
    radial-gradient(1px 1px at 12% 22%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 71% 9%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 64%, #b9c6f4 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 47%, #e8d9b4 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 54% 86%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 24% 91%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 78%, #b9c6f4 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 56%, #e8d9b4 50%, transparent 51%);
  background-size: 640px 640px;
  animation: drift 320s linear infinite;
}
html:not([data-theme="midnight"]) .stars { animation-play-state: paused; }
@keyframes drift {
  /* exactly one tile — the loop point is invisible */
  to { transform: translate3d(-640px, -640px, 0); }
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--ink);
}

/* --------------------------- the thread -------------------------- */
.thread {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 60;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ----------------------------- topbar ---------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: .8rem clamp(1rem, 4vw, 2.2rem);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background-color .5s var(--ease);
}
.bar-side { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.bar-side.right { justify-content: flex-end; }

.wordmark {
  font-family: var(--serif-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
  min-width: 0; /* allow flex shrink on narrow screens */
  overflow: hidden;
  text-overflow: ellipsis;
}
.wordmark em {
  font-weight: 350;
  font-style: italic;
  color: var(--ink-soft);
}
.wordmark:hover { color: var(--accent); }

.iconbtn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .5rem .95rem;
  cursor: pointer;
  transition: color .25s, border-color .25s, background-color .25s;
}
.iconbtn:hover { color: var(--accent); border-color: var(--accent); }
.iconbtn .glyph { font-size: .95rem; line-height: 1; }
.iconbtn.small {
  border: none;
  padding: .35rem .5rem;
  letter-spacing: 0;
  font-size: .95rem;
}

/* ----------------------------- drawers --------------------------- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: color-mix(in srgb, var(--bg) 45%, rgba(0,0,0,.35));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.toc, .prefs {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 50;
  width: min(88vw, 340px);
  background: var(--bg-panel);
  border-right: 1px solid var(--line);
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform .45s var(--ease), background-color .5s var(--ease), visibility 0s .45s;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.prefs {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--line);
  transform: translateX(102%);
}
.toc.open, .prefs.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .45s var(--ease), background-color .5s var(--ease), visibility 0s 0s;
}

.toc-head, .prefs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.3rem .9rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}

.toc-body { padding: .8rem .8rem 1.2rem; flex: 1; }

.toc-group {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 1.4rem .6rem .45rem;
}

.toc-item {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .5rem .6rem;
  border-radius: .5rem;
  color: var(--ink);
  font-family: var(--serif-display);
  font-size: 1.02rem;
  font-weight: 450;
  line-height: 1.3;
  transition: background-color .2s, color .2s;
}
.toc-item:hover { background: var(--quote-bg); color: var(--accent); }
.toc-item.active {
  background: var(--quote-bg);
  box-shadow: inset 2px 0 0 var(--accent);
  color: var(--ink);
}
.toc-num {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  min-width: 1.7em;
  font-size: .85em;
}

.toc-foot {
  padding: 1rem 1.4rem 1.3rem;
  border-top: 1px solid var(--line);
  font-family: var(--serif-body);
  font-style: italic;
  font-size: .85rem;
  color: var(--ink-soft);
}

/* --------------------------- preferences ------------------------- */
.prefs { padding-bottom: 1rem; }
.pref { padding: 1.05rem 1.3rem 0; }
.pref-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .55rem;
}

.seg {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.seg button {
  flex: 1;
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--line);
  border-radius: .6rem;
  padding: .55rem .4rem;
  cursor: pointer;
  transition: all .2s;
}
.seg button:hover { border-color: var(--accent); color: var(--accent); }
.seg button.on {
  border-color: var(--accent);
  color: var(--ink);
  background: var(--quote-bg);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.swatch { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.swatch i {
  width: .85rem; height: .85rem;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.25);
}
.swatch.dawn i     { background: #f5efe2; }
.swatch.dusk i     { background: #2b2218; }
.swatch.midnight i { background: #0b0e16; box-shadow: inset -2px -2px 0 #2c3552; }

.face-serif { font-family: var(--serif-body); font-size: 1rem; }
.face-sans  { font-family: var(--sans); }

.stepper { align-items: center; }
.stepper button { flex: 0 0 auto; min-width: 3.2rem; }
.stepper small { font-size: .7em; vertical-align: super; }
.dots { flex: 1; display: flex; justify-content: center; gap: .45rem; }
.dots i {
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--line);
  transition: background-color .2s, transform .2s;
}
.dots i.lit { background: var(--accent); transform: scale(1.15); }

.reset {
  margin: 1.5rem 1.3rem 1.2rem;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-bottom: 1px dotted var(--ink-soft);
  padding: 0 0 .15rem;
  cursor: pointer;
  align-self: flex-start;
}
.reset:hover { color: var(--accent); border-color: var(--accent); }

/* ------------------------------ page ----------------------------- */
#page {
  position: relative;
  z-index: 2;
  padding: 0 clamp(1.1rem, 5vw, 3rem) 4rem;
  outline: none;
}

.kicker {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.1rem;
}
.kicker .dot { color: var(--ink-soft); margin: 0 .2em; }

/* ------------------------------ cover ---------------------------- */
.cover {
  max-width: 46rem;
  margin: 0 auto;
  padding-top: clamp(3rem, 9vh, 6rem);
  text-align: center;
}

.cover-title {
  font-family: var(--serif-display);
  font-size: clamp(3rem, 9vw, 5.4rem);
  font-weight: 550;
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0 0 1.6rem;
}
.cover-title em {
  font-weight: 320;
  font-style: italic;
  font-size: .55em;
  color: var(--ink-soft);
  letter-spacing: .02em;
}

.blankverb {
  font-family: var(--sans);
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  font-weight: 800;
  letter-spacing: .3em;
  margin: 0 0 .5rem;
  color: var(--ink);
}
.blank {
  color: var(--accent);
  animation: breathe 3.4s ease-in-out infinite alternate;
}
.blank.b2 { animation-delay: 1.7s; }
@keyframes breathe {
  from { opacity: .45; }
  to   { opacity: .95; }
}

.cover-note {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: .95rem;
  color: var(--ink-soft);
  margin: 0 0 2.6rem;
}

.cover-quote {
  margin: 0 auto 2.8rem;
  max-width: 34rem;
  border: none;
  padding: 0;
}
.cover-quote p {
  font-family: var(--serif-body);
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}
.cover-quote::before {
  content: "❝";
  display: block;
  font-family: var(--serif-display);
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: .4rem;
}

.cover-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  margin-bottom: 3.6rem;
  flex-wrap: wrap;
}
.begin {
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  border-radius: 999px;
  padding: .95rem 2rem;
  transition: transform .25s var(--ease), background-color .25s, box-shadow .25s;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
.begin:hover {
  background: var(--accent-2);
  color: var(--bg);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 45%, transparent);
}
.quiet {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
  border-bottom: 1px dotted var(--ink-soft);
  padding-bottom: .1rem;
}
.quiet:hover { color: var(--accent); border-color: var(--accent); }

.cover-toc {
  text-align: left;
  border-top: 1px solid var(--line);
  margin: 0 auto;
  max-width: 36rem;
}
.cover-row {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1.05rem .4rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: padding-left .3s var(--ease), color .2s;
}
.cover-row:hover { padding-left: 1.1rem; color: var(--accent); }
.cover-num {
  font-family: var(--serif-display);
  font-style: italic;
  color: var(--accent);
  min-width: 2.4rem;
  font-size: .95rem;
}
.cover-name {
  font-family: var(--serif-display);
  font-size: 1.25rem;
  font-weight: 500;
  flex: 1;
}
.cover-min {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------------------------- chapter ---------------------------- */
.reading {
  /* the em-based measure must resolve against the reader's chosen body size,
     so characters-per-line stays constant as text size changes */
  font-size: var(--body-size);
  max-width: var(--measure);
  margin: 0 auto;
  padding-top: clamp(2.4rem, 7vh, 4.5rem);
}

.ch-head { margin-bottom: 2.6rem; }

.ch-title {
  font-family: var(--serif-display);
  font-size: clamp(2.1rem, 6vw, 3.3rem);
  font-weight: 560;
  line-height: 1.06;
  letter-spacing: -.012em;
  margin: 0 0 .9rem;
}

.ch-sub {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 1.4rem;
}

.colophon {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: .7rem;
  padding: .65rem .95rem;
  margin-top: 1.4rem;
}
.colophon summary {
  cursor: pointer;
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  list-style-position: outside;
}
.colophon dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem 1rem;
  margin: .8rem 0 .2rem;
}
.colophon dt { font-weight: 700; white-space: nowrap; }
.colophon dd { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }

/* ----------------------------- body ------------------------------ */
.body {
  font-family: var(--body-face);
  font-size: var(--body-size);
  line-height: var(--leading);
  letter-spacing: var(--body-tracking);
}

.body p { margin: 0 0 calc(var(--leading) * .62em); }

.body p.drop::first-letter {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 3.1em;
  line-height: .82;
  float: left;
  padding: .07em .12em 0 0;
  color: var(--accent);
}

.body h2 {
  font-family: var(--serif-display);
  font-size: 1.5em;
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: -.008em;
  margin: 2.4em 0 .75em;
}
.body h2::before {
  content: "";
  display: block;
  width: 2.6rem;
  border-top: 2px solid var(--accent);
  margin-bottom: .85rem;
}

.body h3 {
  font-family: var(--serif-display);
  font-size: 1.18em;
  font-weight: 600;
  font-style: italic;
  margin: 1.9em 0 .6em;
}

.body h4 {
  font-family: var(--sans);
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 1.8em 0 .6em;
}

.body blockquote {
  margin: 1.6em 0;
  padding: .9em 1.3em;
  border-left: 2px solid var(--accent);
  border-radius: 0 .6rem .6rem 0;
  background: var(--quote-bg);
}
.body blockquote p { margin: 0 0 .7em; }
.body blockquote p:last-child { margin-bottom: 0; }

.body ul, .body ol { padding-left: 1.4em; margin: 0 0 1.3em; }
.body li { margin-bottom: .45em; }
.body li::marker { color: var(--accent); }

.body code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .82em;
  background: var(--quote-bg);
  border: 1px solid var(--line);
  border-radius: .3em;
  padding: .08em .35em;
  overflow-wrap: anywhere;
}

.body .rule {
  display: flex;
  justify-content: center;
  margin: 2.6em 0;
  color: var(--accent);
  letter-spacing: .6em;
  font-size: .9em;
  user-select: none;
}

.body .seal {
  text-align: center;
  font-size: 1.35em;
  letter-spacing: .4em;
  margin: 2.2em 0 1.2em;
}

.body .signature {
  font-size: .92em;
  color: var(--ink-soft);
  margin-top: 1.6em;
}

.sealed {
  border-bottom: 1px dotted var(--ink-soft);
  cursor: help;
  color: var(--ink-soft);
}

/* ----------------------------- pager ----------------------------- */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 4.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
}
.pager-card {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  padding: 1.05rem 1.2rem;
  color: var(--ink);
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.pager-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 18%, transparent);
}
.pager-card small {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.pager-card span {
  font-family: var(--serif-display);
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.3;
}
.pager-card.next { text-align: right; align-items: flex-end; }

/* ----------------------------- footer ---------------------------- */
.colophon-foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 2.2rem 1rem 3rem;
  border-top: 1px solid var(--line);
  font-family: var(--serif-body);
  font-size: .9rem;
  color: var(--ink-soft);
  text-align: center;
}

/* --------------------------- animations -------------------------- */
.enter > * {
  opacity: 0;
  transform: translateY(16px);
  animation: rise .75s var(--ease) forwards;
}
.enter > *:nth-child(1) { animation-delay: .02s; }
.enter > *:nth-child(2) { animation-delay: .1s; }
.enter > *:nth-child(3) { animation-delay: .18s; }
.enter > *:nth-child(4) { animation-delay: .26s; }
.enter > *:nth-child(5) { animation-delay: .34s; }
.enter > *:nth-child(6) { animation-delay: .42s; }
.enter > *:nth-child(n+7) { animation-delay: .5s; }
@keyframes rise {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .blank { opacity: .85; }
}

/* ----------------------------- print ------------------------------ */
@media print {
  html {
    --bg: #fff;
    --ink: #1a1a1a;
    --ink-soft: #444;
    --accent: #7a4f12;
    --accent-2: #6b3522;
    --quote-bg: #f3ede0;
    --line: #ccc;
  }
  .topbar, .thread, .stars, .scrim, .toc, .prefs,
  .pager, .colophon-foot, body::after { display: none !important; }
  .reading { max-width: none; padding-top: 0; }
  .enter > * { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* --------------------------- responsive -------------------------- */
@media (max-width: 720px) {
  .iconbtn-label { display: none; }
  .iconbtn { padding: .5rem .7rem; }
  .wordmark { font-size: 1rem; }
  .pager { grid-template-columns: 1fr; }
  .pager-card.next { text-align: left; align-items: flex-start; }
  .cover-min { display: none; }
}

@media (max-width: 360px) {
  .topbar { gap: .5rem; }
}