/* ══════════════════════════════════════════════════════════════
   BibTee: The Good Scroll
   An illuminated-manuscript-meets-OS design. No frameworks.
   Themes: scriptorium (parchment day) · vigil (OLED night)
   ══════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

:root {
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spine-w: 96px;
}

html[data-theme="scriptorium"] {
  --parchment: #f4edda;
  --parchment-2: #ece1c6;
  --paper: #faf5e8;
  --ink: #1c1710;
  --ink-soft: #4d4433;
  --ink-faint: #8a7d63;
  --rule: #d8c9a3;
  --rule-soft: #e7dab9;
  --forest: #2d5a3e;
  --forest-deep: #1d3d29;
  --christ: #b3231b;
  --gold: #a07d1c;
  --gold-bright: #c9a227;
  --card: #fbf6ea;
  --card-shadow: 0 30px 60px -30px rgba(60, 45, 15, .35);
  --glow: radial-gradient(60% 45% at 70% 20%, rgba(201, 162, 39, .16), transparent 70%);
  --ticker-bg: #1c1710;
  --ticker-fg: #f4edda;
  color-scheme: light;
}

html[data-theme="vigil"] {
  --parchment: #0b0a08;
  --parchment-2: #12100c;
  --paper: #14110c;
  --ink: #ece2c9;
  --ink-soft: #c9bda1;
  --ink-faint: #7d7360;
  --rule: #2c2718;
  --rule-soft: #221e13;
  --forest: #7fbf8f;
  --forest-deep: #bfe6c8;
  --christ: #ff6b5e;
  --gold: #c9a227;
  --gold-bright: #e8c84a;
  --card: #161310;
  --card-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
  --glow: radial-gradient(55% 40% at 70% 15%, rgba(201, 162, 39, .12), transparent 70%);
  --ticker-bg: #c9a227;
  --ticker-fg: #14100a;
  color-scheme: dark;
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--sans);
  background: var(--parchment);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background .5s var(--ease), color .5s var(--ease);
  padding-left: var(--spine-w);
}

::selection {
  background: var(--christ);
  color: #fff
}

a {
  color: inherit
}

img,
svg {
  display: block
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer
}

/* film grain + candlelight */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

html[data-theme="vigil"] .grain {
  mix-blend-mode: screen;
  opacity: .35
}

.candle-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--glow)
}

.skip-link {
  position: fixed;
  top: -60px;
  left: calc(var(--spine-w) + 12px);
  z-index: 200;
  background: var(--ink);
  color: var(--parchment);
  padding: .6rem 1rem;
  border-radius: 0 0 10px 10px;
  transition: top .2s
}

.skip-link:focus {
  top: 0
}

/* bookmark scroll progress: hangs like a ribbon */
.bookmark-progress {
  position: fixed;
  top: 0;
  right: 26px;
  z-index: 90;
  width: 26px;
  height: 120px;
  background: linear-gradient(var(--christ), #7e1712);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
  display: flex;
  justify-content: center
}

.bookmark-progress span {
  position: absolute;
  bottom: 14px;
  width: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .85);
  height: 0%
}

.bookmark-progress i {
  position: absolute;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 10px var(--gold-bright)
}

/* ══ ticker ══ */
.ticker {
  background: var(--ticker-bg);
  color: var(--ticker-fg);
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  position: relative;
  z-index: 5
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  padding: .5rem 1rem;
  animation: tick 46s linear infinite;
  will-change: transform
}

.ticker-track span,
.ticker-track em {
  margin-right: 1.4rem
}

.ticker-track em {
  color: var(--gold-bright);
  font-style: normal
}

@keyframes tick {
  to {
    transform: translateX(-50%)
  }
}

/* ══ spine ══ */
.spine {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--spine-w);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem .6rem;
  background: color-mix(in srgb, var(--parchment) 88%, transparent);
  backdrop-filter: blur(14px);
  border-right: 1px solid var(--rule)
}

.spine::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5px;
  width: 1px;
  background: repeating-linear-gradient(var(--rule) 0 6px, transparent 6px 12px);
  opacity: .6
}

.spine-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem
}

.spine-seal svg,
.spine-seal .logo-mark {
  width: 34px;
  height: 34px;
  color: var(--forest)
}

.spine-links {
  display: flex;
  flex-direction: column;
  gap: 1.15rem
}

.spine-links a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  text-decoration: none;
  color: var(--ink-faint);
  transition: color .25s, transform .25s
}

.spine-links a b {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  border: 1px solid var(--rule);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: inherit;
  background: var(--paper)
}

.spine-links a u {
  text-decoration: none;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-family: var(--mono)
}

.spine-links a:hover,
.spine-links a.active {
  color: var(--ink);
  transform: translateX(2px)
}

.spine-links a.active b {
  background: var(--ink);
  color: var(--parchment);
  border-color: var(--ink)
}

.spine-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem
}

.spine-count {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-faint);
  line-height: 1
}

.vigil-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .55rem .6rem;
  background: var(--paper);
  transition: transform .25s
}

.vigil-btn:hover {
  transform: translateY(-2px)
}

.vigil-btn small {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft)
}

.vigil-orb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--gold-bright), var(--gold) 60%, #5c4a10);
  box-shadow: 0 0 14px rgba(201, 162, 39, .55);
  transition: all .4s
}

html[data-theme="vigil"] .vigil-orb {
  background: radial-gradient(circle at 65% 35%, #fff 0 18%, #cfd6ff 22%, #1a1c2e 60%);
  box-shadow: 0 0 16px rgba(180, 200, 255, .5)
}

.vigil-btn.small {
  flex-direction: row;
  padding: .4rem .55rem
}

.mobilebar {
  display: none
}

/* ══ page ══ */
.page {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 3rem) 0
}

.marginalia {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint)
}

/* ══ hero ══ */
.hero {
  position: relative;
  padding: clamp(2rem, 5vw, 4.5rem) 0 1rem;
  overflow: clip
}

.hero-watermark {
  position: absolute;
  top: -4rem;
  right: -2rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(16rem, 34vw, 30rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--rule);
  opacity: .55;
  pointer-events: none;
  user-select: none
}

.marginalia-hero {
  position: absolute;
  top: 1.2rem;
  right: 0;
  writing-mode: vertical-rl;
  opacity: .8
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  position: relative;
  max-width: 46rem
}

.hero-content h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 1.2rem 0 1.1rem;
  text-wrap: balance
}

.hero-content h1 em {
  font-style: italic;
  color: var(--forest)
}

.dropcap {
  float: left;
  font-size: 1.9em;
  line-height: .78;
  padding: .08em .14em .02em 0;
  margin: .04em .06em 0 0;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 55%, #6d5510);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .08))
}

.lede {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 34rem
}

.lede strong {
  color: var(--ink)
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin: 1.6rem 0 1.4rem
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  font-weight: 600;
  border-radius: 999px;
  transition: transform .25s var(--ease), box-shadow .25s, background .3s
}

.btn-seal {
  background: linear-gradient(180deg, var(--forest), var(--forest-deep));
  color: #f6f0e2;
  padding: .35rem;
  box-shadow: 0 18px 34px -14px rgba(29, 61, 41, .6), inset 0 0 0 1px rgba(201, 162, 39, .5)
}

.btn-seal span {
  font-size: 1rem;
  padding-left: 1.05rem
}

.btn-seal:not(:has(small)) span {
  padding-right: 1.05rem
}

.btn-seal small {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .68rem;
  background: rgba(255, 255, 255, .16);
  padding: .55rem .8rem;
  border-radius: 999px
}

.btn-seal:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 26px 44px -14px rgba(29, 61, 41, .65)
}

html[data-theme="vigil"] .btn-seal {
  color: #0b0a08;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  box-shadow: 0 18px 40px -12px rgba(201, 162, 39, .45)
}

.btn-ghost {
  border: 1px solid var(--rule);
  padding: .95rem 1.4rem;
  background: color-mix(in srgb, var(--paper) 70%, transparent)
}

.btn-ghost:hover {
  background: var(--ink);
  color: var(--parchment);
  transform: translateY(-3px)
}

.btn.small {
  padding: .6rem 1rem;
  font-size: .85rem
}

.hero-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 0 0 .9rem
}

.hero-chips li {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  border: 1px dashed var(--rule);
  border-radius: 999px;
  padding: .4rem .75rem;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper) 60%, transparent)
}

.hero-chips b {
  color: var(--christ);
  font-weight: 500
}

.hero-meta {
  font-size: .85rem;
  color: var(--ink-faint)
}

.hero-meta a {
  color: var(--forest);
  font-weight: 600
}

.hero-strip {
  margin-top: 2.6rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: .7rem 0;
  display: flex;
  gap: 1.2rem;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .2em;
  color: var(--ink-faint)
}

.hero-strip em {
  color: var(--gold);
  font-style: normal
}

/* ══ chapters ══ */
.chapter {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  border-top: 1px solid var(--rule);
  position: relative
}

.chapter-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.4rem;
  align-items: start;
  margin-bottom: 2.2rem
}

.chapter-num {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 6vw, 5.2rem);
  font-weight: 700;
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--gold);
  margin-top: -.4rem
}

.chapter-kicker {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--christ);
  margin-bottom: .5rem
}

.chapter-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -.015em;
  text-wrap: balance
}

.chapter-head h2 em {
  font-style: italic;
  color: var(--forest)
}

.section-lead {
  color: var(--ink-soft);
  max-width: 38rem;
  margin-top: .6rem
}

.chapter-head .marginalia {
  writing-mode: vertical-rl;
  opacity: .75
}

/* ══ lab ══ */
.lab {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 1.2rem;
  margin-bottom: 2.4rem
}

.lab-controls {
  border: 1px solid var(--rule);
  border-radius: 1.4rem;
  background: var(--card);
  padding: 1.2rem;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-self: start
}

.lab-row {
  display: flex;
  flex-direction: column;
  gap: .6rem
}

.lab-label {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint)
}

.seg {
  display: flex;
  background: color-mix(in srgb, var(--ink) 7%, var(--paper));
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px;
  gap: 2px
}

.seg button {
  flex: 1;
  border-radius: 999px;
  padding: .5rem .2rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: all .2s
}

.seg button.is-on {
  background: var(--ink);
  color: var(--parchment);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .4)
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer
}

.switch input {
  display: none
}

.switch span {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 18%, var(--paper));
  border: 1px solid var(--rule);
  position: relative;
  transition: background .25s
}

.switch span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  transition: left .25s
}

.switch input:checked+span {
  background: var(--christ)
}

.switch input:checked+span::after {
  left: 22px
}

.sliders label {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft)
}

input[type="range"] {
  flex: 1;
  accent-color: var(--christ);
  height: 22px
}

.lab-page {
  border: 1px solid var(--rule);
  border-radius: 1.4rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  position: relative;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: background .4s, color .4s;
  min-height: 320px
}

.lab-page[data-lablight="parchment"] {
  background: linear-gradient(180deg, #fbf6ea, #efe3c6);
  color: #1c1710
}

.lab-page[data-lablight="black"] {
  background: #050505;
  color: #ece2c9;
  border-color: #2b2b2b
}

.lab-page::before {
  content: "❧";
  position: absolute;
  top: .7rem;
  right: 1.1rem;
  font-size: 1.6rem;
  color: var(--gold);
  opacity: .7
}

.lab-folio {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .6;
  display: block;
  margin-bottom: 1rem
}

.lab-page p {
  transition: font-size .15s, line-height .15s
}

.lab-page[data-labfont="serif"] p {
  font-family: var(--serif)
}

.lab-page[data-labfont="sans"] p {
  font-family: var(--sans)
}

.lab-page[data-labfont="mono"] p {
  font-family: var(--mono)
}

.lab-page[data-labfont="cursive"] p {
  font-family: var(--serif);
  font-style: italic
}

.lab-page .christ {
  color: var(--christ)
}

.lab-page.no-red .christ {
  color: inherit
}

.lab-actions {
  display: flex;
  gap: 1.2rem;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .65
}

/* ══ gloss grid ══ */
.gloss-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem
}

.gloss {
  border: 1px solid var(--rule);
  border-radius: 1.3rem;
  background: var(--card);
  padding: 1.4rem 1.3rem 1.3rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform .3s var(--ease)
}

.gloss:hover {
  transform: translateY(-5px) rotate(-.3deg)
}

.gloss-no {
  position: absolute;
  top: .4rem;
  right: .9rem;
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px var(--rule)
}

.gloss svg {
  width: 26px;
  height: 26px;
  color: var(--forest);
  margin-bottom: .7rem
}

.gloss h3 {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  margin-bottom: .4rem
}

.gloss p {
  font-size: .92rem;
  color: var(--ink-soft)
}

.gloss .sample {
  margin-top: .8rem;
  font-family: var(--serif);
  font-style: italic;
  border-left: 3px solid var(--christ);
  padding-left: .8rem;
  color: var(--ink)
}

.textlink {
  color: var(--christ);
  font-weight: 600;
  font-size: .9rem
}

.oracle input {
  width: 100%;
  margin-top: .8rem;
  border: 1px solid var(--rule);
  border-radius: .8rem;
  background: var(--parchment);
  color: var(--ink);
  padding: .65rem .8rem;
  font: inherit;
  font-size: .88rem
}

.oracle input:focus {
  outline: 2px solid var(--forest);
  outline-offset: 2px
}

.oracle ul {
  list-style: none;
  margin-top: .6rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  max-height: 190px;
  overflow: auto
}

.oracle li {
  font-size: .82rem;
  border: 1px solid var(--rule-soft);
  border-radius: .7rem;
  padding: .5rem .65rem;
  background: color-mix(in srgb, var(--paper) 70%, transparent)
}

.oracle li b {
  color: var(--christ)
}

.swatches {
  display: flex;
  gap: .4rem;
  margin-top: .9rem
}

.swatches i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--s);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--rule)
}

/* ══ ordo ══ */
.chapter-ordo {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--forest) 7%, transparent) 30%, transparent)
}

.ordo-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.6rem
}

.ordo-stats div {
  border: 1px solid var(--rule);
  border-radius: 1.2rem;
  background: var(--card);
  padding: 1.1rem;
  text-align: center;
  box-shadow: var(--card-shadow)
}

.ordo-stats b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 700;
  color: var(--forest);
  line-height: 1
}

.ordo-stats span {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-faint)
}

.dial {
  border: 1px solid var(--rule);
  border-radius: 1.4rem;
  background: var(--card);
  padding: 1.3rem;
  box-shadow: var(--card-shadow);
  margin-bottom: 1.2rem
}

.dial-top label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  margin-bottom: .4rem
}

.dial-top output {
  color: var(--christ);
  font-weight: 700
}

#dayRange {
  width: 100%
}

.dial-reading {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-style: italic;
  margin-top: .6rem
}

.dial-weeks {
  display: flex;
  gap: .3rem;
  margin-top: 1rem
}

.dial-weeks i {
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 12%, var(--paper));
  overflow: hidden;
  position: relative
}

.dial-weeks i.on {
  background: linear-gradient(90deg, var(--forest), var(--gold-bright))
}

.strip-wrap {
  position: relative
}

.strip-hint {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: right;
  margin-bottom: .4rem
}

.strip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: .4rem .1rem 1rem;
  cursor: grab
}

.strip:active {
  cursor: grabbing
}

.strip article {
  min-width: 270px;
  scroll-snap-align: start;
  border: 1px solid var(--rule);
  border-radius: 1.2rem;
  background: var(--paper);
  padding: 1.15rem;
  box-shadow: var(--card-shadow);
  position: relative;
  transition: transform .25s
}

.strip article:hover {
  transform: translateY(-4px)
}

.strip b {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--christ)
}

.strip strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  margin: .35rem 0 .25rem
}

.strip span {
  font-size: .85rem;
  color: var(--ink-soft)
}

.plan-note {
  margin-top: 1.1rem;
  font-size: .92rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--gold);
  padding-left: 1rem;
  max-width: 46rem
}

/* ══ ledger ══ */
.ledger {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--rule);
  border-radius: 1.4rem;
  overflow: hidden;
  background: var(--rule-soft);
  box-shadow: var(--card-shadow)
}

.ledger div {
  padding: 1.05rem 1.2rem;
  background: var(--card);
  transition: background .2s
}

.ledger div:hover {
  background: color-mix(in srgb, var(--gold-bright) 9%, var(--card))
}

.ledger dt {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .2rem
}

.ledger dd {
  font-weight: 600;
  font-size: .95rem
}

/* ══ download ══ */
.download {
  padding: clamp(3.5rem, 7vw, 6rem) 0
}

.seal-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 2rem;
  border: 1px solid var(--rule);
  border-radius: 1.8rem;
  background: linear-gradient(160deg, var(--card), color-mix(in srgb, var(--forest) 10%, var(--card)));
  padding: clamp(1.5rem, 3.5vw, 2.8rem);
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: hidden
}

.seal-card::before {
  /* content: "BibTee · BibTee · BibTee · "; */
  position: absolute;
  bottom: .6rem;
  left: 0;
  right: 0;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .4em;
  color: var(--ink-faint);
  opacity: .5;
  white-space: nowrap;
  overflow: hidden
}

.seal-wax {
  width: 130px;
  height: 130px;
  border-radius: 46% 54% 52% 48%/48% 46% 54% 52%;
  background: radial-gradient(circle at 35% 30%, #d84a3f, #b3231b 45%, #6d130e 85%);
  display: grid;
  place-content: center;
  text-align: center;
  color: #f6e8d8;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  box-shadow: 0 18px 34px -10px rgba(179, 35, 27, .6), inset 0 2px 6px rgba(255, 255, 255, .35), inset 0 -6px 12px rgba(0, 0, 0, .4);
  transform: rotate(-8deg);
  align-self: start;
  animation: wobble 6s ease-in-out infinite
}

@keyframes wobble {

  0%,
  100% {
    transform: rotate(-8deg)
  }

  50% {
    transform: rotate(-4deg) scale(1.02)
  }
}

.seal-body h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.05;
  font-weight: 600
}

.seal-body h2 em {
  font-style: italic;
  color: var(--forest)
}

.seal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.3rem 0 .8rem;
  border: 1px dashed var(--rule);
  border-radius: 1.1rem;
  padding: 1rem 1.1rem;
  background: color-mix(in srgb, var(--paper) 65%, transparent)
}

.seal-file {
  display: flex;
  gap: .9rem;
  align-items: center
}

.seal-file svg {
  width: 34px;
  height: 34px;
  color: var(--forest)
}

.seal-file b {
  display: block
}

.seal-file span {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--ink-soft)
}

.seal-note {
  font-size: .9rem;
  color: var(--ink-soft)
}

/* ══ colophon ══ */
.colophon {
  border-top: 1px solid var(--rule);
  padding: 2.2rem 0 3rem;
  color: var(--ink-soft);
  font-size: .88rem
}

.colophon-grid {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem
}

.wordmark.small {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
  margin-bottom: .6rem
}

.wordmark.small svg,
.wordmark.small .logo-mark {
  width: 26px;
  height: 26px;
  color: var(--forest)
}

.colophon nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-content: flex-start
}

.colophon nav a {
  text-decoration: none;
  border-bottom: 1px dotted var(--rule);
  font-size: .86rem
}

.colophon nav a:hover {
  color: var(--christ)
}

.colophon-end {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--ink-faint);
  border-top: 1px dashed var(--rule);
  padding-top: 1rem
}

.colophon-end span {
  color: var(--christ)
}

/* ══ reveal ══ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease)
}

.reveal.is-visible {
  opacity: 1;
  transform: none
}

.reveal:nth-child(2) {
  transition-delay: .08s
}

.reveal:nth-child(3) {
  transition-delay: .16s
}

/* focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.strip:focus-visible {
  outline: 2px solid var(--christ);
  outline-offset: 3px;
  border-radius: 6px
}

/* scrollbar */
::-webkit-scrollbar {
  width: 11px;
  height: 11px
}

::-webkit-scrollbar-track {
  background: var(--parchment)
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 30%, var(--rule));
  border-radius: 99px;
  border: 2px solid var(--parchment)
}

/* ══ responsive ══ */
@media (max-width:1080px) {
  .hero-watermark {
    font-size: clamp(10rem, 30vw, 18rem);
    top: -2rem
  }

  .gloss-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .ledger {
    grid-template-columns: repeat(2, 1fr)
  }

  .lab {
    grid-template-columns: 1fr
  }
}

@media (max-width:860px) {
  body {
    padding-left: 0
  }

  .spine {
    display: none
  }

  .mobilebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 80;
    padding: .7rem 1rem;
    background: color-mix(in srgb, var(--parchment) 88%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rule)
  }

  .mobilebar .wordmark {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.15rem
  }

  .mobilebar .wordmark svg,
  .mobilebar .wordmark .logo-mark {
    width: 28px;
    height: 28px;
    color: var(--forest)
  }

  .mobilebar-actions {
    display: flex;
    gap: .6rem;
    align-items: center
  }

  .chapter-head {
    grid-template-columns: 1fr
  }

  .chapter-head .marginalia,
  .marginalia-hero {
    display: none
  }

  .bookmark-progress {
    right: 10px;
    height: 90px;
    width: 20px
  }

  .ordo-stats {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width:620px) {
  /* Keep "top doomscrolling." and "tart hope scrolling." each on one line beside the
     drop cap S: every line is about 8.3em wide with the cap, so size from the viewport. */
  .hero-content h1 {
    font-size: min(2.6rem, calc((100vw - 2.5rem) / 8.9))
  }

  /* Tuck the drop cap in so it reads as part of "Stop" / "Start" rather than a separate glyph. */
  .hero-content h1 .dropcap {
    padding-right: 0;
    margin-right: .04em
  }

  .gloss-grid {
    grid-template-columns: 1fr
  }

  .ledger {
    grid-template-columns: 1fr
  }

  .seal-card {
    grid-template-columns: 1fr
  }

  .seal-wax {
    width: 96px;
    height: 96px;
    font-size: 1.3rem
  }

  .ticker {
    font-size: .6rem
  }
}

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001s !important;
    transition-duration: .001s !important
  }

  html {
    scroll-behavior: auto
  }

  .ticker-track {
    animation: none;
    flex-wrap: wrap;
    white-space: normal
  }

  .reveal {
    opacity: 1;
    transform: none
  }
}