:root,
[data-theme='light'] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.5rem + 7vw, 8rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  /* 7, 9 and 14 were used in eight places but never defined. A var() that
     resolves to nothing invalidates the whole declaration, so those rules
     were silently dropping their gaps and margins — the Journal's two-column
     grid lost its column gap entirely and the cards sat edge to edge. */
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Band rhythm. 96px a side put more empty band than text in front of the
     reader, so About and Equilibrist were cut to 4vw/56px and Home tighter
     still. Both held, so 56px is the default now. One dial per band size. */
  --band-pad: clamp(var(--space-10), 4vw, var(--space-14));
  --band-pad-lg: clamp(var(--space-12), 5.5vw, var(--space-20));
  --band-pad-tight: clamp(var(--space-6), 2.5vw, var(--space-10));

  --font-display: 'Literata', 'Palatino Linotype', serif;
  --font-body: 'Spectral', Georgia, serif;
  --font-ui: 'Spectral', Georgia, serif;

  --color-bg: #f4f0e6;
  --color-surface: #fbf8f1;
  --color-surface-2: #fffdf8;
  --color-surface-offset: #ebe4d4;
  --color-divider: #ddd4c4;
  --color-border: oklch(0.28 0.02 80 / 0.12);
  --color-text: #1a1610;
  --color-text-muted: #5c564c;
  --color-text-faint: #696355;
  --color-text-inverse: #f7f1e4;
  --color-primary: #c9a227;
  --color-primary-hover: #a8871b;
  --color-primary-active: #8a6e14;
  /* The brand gold reads at only 2.28:1 on paper -- it fails AA as text at any
     size. This is a deepened version of it, kept in the same hue, which
     clears 4.79:1 even on the cream offset -- the darkest of the three light
     grounds the gold sits on -- and it is the one to use whenever the gold is
     TEXT on a light ground. #c9a227 stays for rules, hairlines, frames and button fills,
     where contrast rules do not apply and the brighter gold is the point. */
  --color-primary-text: #77600e;
  --color-ink: #1a1610;
  --color-paper: #fbf8f1;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --shadow-sm: 0 1px 2px oklch(0.2 0.03 80 / 0.06);
  --shadow-md: 0 8px 24px oklch(0.2 0.03 80 / 0.1);
  --shadow-lg: 0 18px 40px oklch(0.2 0.03 80 / 0.16);
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --header-h: 4.25rem;
}

[data-theme='dark'] {
  --color-bg: #14110d;
  --color-surface: #1c1914;
  --color-surface-2: #221e18;
  --color-surface-offset: #2a251e;
  --color-divider: #3a342a;
  --color-border: oklch(0.9 0.02 80 / 0.12);
  --color-text: #ece6d8;
  --color-text-muted: #b3ab9c;
  --color-text-faint: #7d7668;
  --color-text-inverse: #14110d;
  --color-primary: #d4b45a;
  --color-primary-hover: #e2c878;
  --color-primary-active: #c9a227;
  /* On the dark ground the bright gold is already 8.7:1, so text uses the
     same value the rest of the theme does. */
  --color-primary-text: #d4b45a;
  --color-ink: #ece6d8;
  --color-paper: #1c1914;
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35);
  --shadow-md: 0 8px 24px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 18px 40px oklch(0 0 0 / 0.5);
}

/* The homepage is intentionally white so the catalog mockups blend cleanly. */
body[data-page='home'] {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #ffffff;
  --color-surface-offset: #ffffff;
  --color-paper: #ffffff;
  --color-divider: #e6e1d8;
  --color-border: oklch(0.28 0.02 80 / 0.1);
  --color-text: #1a1610;
  --color-text-muted: #5c564c;
  --color-text-faint: #696355;
  --color-ink: #1a1610;
}

/* Dangerous Liaisons: tropical noir */
body[data-page='dangerous-liaisons'] {
  --liaisons-night: #071318;
  --liaisons-deep: #0d252a;
  --liaisons-sea: #4ca6a0;
  --liaisons-coral: #f06f4f;
  --liaisons-sand: #f1e8d8;
  --liaisons-mist: #dce9e5;
}
.liaisons-hero {
  position: relative;
  min-height: min(760px, calc(100vh - var(--header-h)));
  display: grid;
  overflow: hidden;
  background: var(--liaisons-night);
  color: #fff9ec;
}
.liaisons-hero-image,
.liaisons-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.liaisons-hero-image {
  object-fit: cover;
  object-position: center 46%;
}
.liaisons-hero-shade {
  background:
    linear-gradient(90deg, rgba(2, 12, 16, .56) 0%, rgba(2, 12, 16, .16) 50%, rgba(2, 12, 16, .08) 100%),
    linear-gradient(0deg, rgba(2, 12, 16, .38), transparent 44%);
}
.liaisons-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 8vw, 7rem);
}
.liaisons-hero-card {
  width: min(500px, 100%);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid rgba(255, 247, 227, .38);
  background: rgba(3, 18, 22, .48);
  backdrop-filter: blur(3px);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .25);
}
.liaisons-kicker {
  margin: 0 0 .85rem;
  color: var(--liaisons-coral);
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.35;
  text-transform: uppercase;
}
.liaisons-hero h1 {
  max-width: 9ch;
  margin: 0;
  color: #fff9ec;
  font-family: var(--font-display);
  font-size: clamp(2.9rem, 5.3vw, 5.8rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .9;
}
.liaisons-byline {
  margin: 1.1rem 0 0;
  color: #fff9ec;
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.liaisons-hero-deck {
  max-width: 43ch;
  margin: 1.35rem 0 0;
  color: rgba(255, 249, 236, .88);
  font-size: clamp(1rem, 1.3vw, 1.22rem);
  line-height: 1.55;
}
.liaisons-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  margin-top: 1.6rem;
}
.liaisons-text-link {
  color: #fff9ec;
  text-underline-offset: .3em;
}
.liaisons-premise {
  padding: clamp(5rem, 9vw, 8.5rem) 0;
  background: var(--liaisons-sand);
  color: #14252a;
}
.liaisons-premise-grid {
  display: grid;
  grid-template-columns: .55fr 1.3fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.liaisons-index {
  margin: 0;
  color: rgba(20, 37, 42, .32);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: .92;
}
.liaisons-premise h2,
.liaisons-section-head h2 {
  max-width: 18ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.4vw, 4.8rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1;
}
.liaisons-premise-copy {
  font-size: 1.08rem;
  line-height: 1.72;
}
.liaisons-premise-copy p {
  margin: 0 0 1.2rem;
}
.liaisons-story {
  padding: clamp(5rem, 9vw, 9rem) 0;
  background: #f8f4eb;
  color: #14252a;
}
.liaisons-section-head {
  max-width: 820px;
  margin-bottom: clamp(3rem, 7vw, 6rem);
}
.liaisons-section-head > p:last-child {
  max-width: 56ch;
  margin: 1.25rem 0 0;
  font-size: 1.08rem;
  line-height: 1.65;
}
.liaisons-section-head-centered {
  margin-inline: auto;
  text-align: center;
}
.liaisons-section-head-centered h2,
.liaisons-section-head-centered > p:last-child {
  margin-inline: auto;
}
.liaisons-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .72fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 5rem) 0;
  border-top: 1px solid rgba(20, 37, 42, .15);
}
.liaisons-chapter-reverse .liaisons-frame {
  order: 2;
}
.liaisons-frame {
  margin: 0;
  overflow: hidden;
  background: #0a171b;
}
.liaisons-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.liaisons-chapter:hover .liaisons-frame img {
  transform: scale(1.018);
}
.liaisons-chapter-copy {
  max-width: 430px;
}
.liaisons-number {
  margin: 0 0 1.8rem;
  color: rgba(20, 37, 42, .25);
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: .8;
}
.liaisons-chapter h3,
.liaisons-finale h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 3.8rem);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.03;
}
.liaisons-chapter-copy > p:last-child,
.liaisons-finale-copy > p:last-child {
  margin: 1.2rem 0 0;
  font-size: 1.06rem;
  line-height: 1.65;
}
.liaisons-finale {
  position: relative;
  min-height: 640px;
  margin-top: clamp(3rem, 6vw, 6rem);
  display: flex;
  align-items: end;
  overflow: hidden;
  background: var(--liaisons-night);
  color: #fff9ec;
}
.liaisons-finale > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.liaisons-finale::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(3, 15, 19, .9), rgba(3, 15, 19, .08) 68%);
}
.liaisons-finale-copy {
  position: relative;
  z-index: 1;
  width: min(700px, 100%);
  padding: clamp(2rem, 6vw, 5rem);
}
.liaisons-forces {
  padding: clamp(5rem, 9vw, 9rem) 0;
  background: var(--liaisons-night);
  color: var(--liaisons-mist);
}
.liaisons-section-head-light h2 {
  color: #fff9ec;
}
.liaisons-force-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(220, 233, 229, .2);
  border-left: 1px solid rgba(220, 233, 229, .2);
}
.liaisons-force-grid article {
  min-height: 310px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-right: 1px solid rgba(220, 233, 229, .2);
  border-bottom: 1px solid rgba(220, 233, 229, .2);
}
.liaisons-force-grid span {
  color: var(--liaisons-coral);
  font-size: .8rem;
  letter-spacing: .14em;
}
.liaisons-force-grid h3 {
  margin: 4.2rem 0 1rem;
  color: #fff9ec;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 400;
}
.liaisons-force-grid p {
  margin: 0;
  color: rgba(220, 233, 229, .75);
  line-height: 1.6;
}
.liaisons-editions {
  padding: clamp(5rem, 9vw, 9rem) 0;
  background: var(--liaisons-sand);
  color: #14252a;
}
.liaisons-edition-grid {
  display: grid;
  grid-template-columns: minmax(0, 680px);
  justify-content: center;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: stretch;
}
.liaisons-edition {
  margin: 0;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(20, 37, 42, .16);
  background: rgba(255, 255, 255, .38);
  text-align: center;
}
.liaisons-edition[hidden] {
  display: none !important;
}
.liaisons-cover-button {
  width: 100%;
  min-height: 420px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.liaisons-cover-button img {
  display: block;
  width: 100%;
  max-width: 430px;
  height: 430px;
  object-fit: contain;
  transition: transform var(--transition-interactive);
}
.liaisons-cover-button:hover img,
.liaisons-cover-button:focus-visible img {
  transform: translateY(-5px);
}
.liaisons-edition-label {
  margin: 1.5rem 0 .65rem;
  color: #bd4c35;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.liaisons-edition h3 {
  margin: 0 auto .55rem;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 3.3rem);
  font-weight: 400;
  line-height: 1.02;
}
.liaisons-details {
  margin: 1rem 0 1.4rem;
  padding: .35rem 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: #14252a;
  cursor: pointer;
  font: inherit;
}
.liaisons-edition .buy-row,
.liaisons-jacket .buy-row {
  justify-content: center;
}
.liaisons-delivery-note {
  max-width: 680px;
  margin: 2rem auto 0;
  color: rgba(20, 37, 42, .68);
  text-align: center;
}
.liaisons-closer {
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: #f8f4eb;
  color: #14252a;
  text-align: center;
}
.liaisons-quote {
  margin: 0 auto 2.25rem;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 5.4rem);
  font-style: italic;
  letter-spacing: -.035em;
  line-height: 1;
}
.liaisons-content-note {
  max-width: 620px;
  margin: 2rem auto 0;
  color: rgba(20, 37, 42, .62);
  font-size: .9rem;
}
.liaisons-jacket .jacket-inner {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  gap: 0 2.5rem;
  align-items: start;
}
.liaisons-jacket .jacket-toolbar {
  grid-column: 1 / -1;
}
.liaisons-jacket .jacket-cover {
  grid-row: 2 / span 4;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
}
.liaisons-jacket .jacket-inner h3 {
  margin-top: 0;
}
.liaisons-jacket .jacket-copy {
  max-width: 58ch;
}

@media (max-width: 900px) {
  .liaisons-premise-grid {
    grid-template-columns: 1fr 1.5fr;
  }
  .liaisons-premise-copy {
    grid-column: 2;
  }
  .liaisons-force-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .liaisons-hero {
    min-height: 700px;
  }
  .liaisons-hero-image {
    object-position: 58% center;
  }
  .liaisons-hero-shade {
    background: linear-gradient(0deg, rgba(2, 12, 16, .72), rgba(2, 12, 16, .02) 75%);
  }
  .liaisons-hero-inner {
    align-items: end;
    padding: 1rem 0 2rem;
  }
  .liaisons-hero-card {
    width: 100%;
    padding: 1.25rem;
    background: rgba(3, 18, 22, .58);
  }
  .liaisons-hero h1 {
    max-width: 10ch;
    font-size: clamp(2.6rem, 13vw, 4rem);
  }
  .liaisons-premise-grid,
  .liaisons-chapter,
  .liaisons-edition-grid {
    grid-template-columns: 1fr;
  }
  .liaisons-premise-copy {
    grid-column: auto;
  }
  .liaisons-index {
    font-size: 2rem;
  }
  .liaisons-chapter-reverse .liaisons-frame {
    order: 0;
  }
  .liaisons-number {
    margin-bottom: 1rem;
    font-size: 4rem;
  }
  .liaisons-finale {
    min-height: 560px;
  }
  .liaisons-force-grid {
    grid-template-columns: 1fr;
  }
  .liaisons-force-grid article {
    min-height: 240px;
  }
  .liaisons-force-grid h3 {
    margin-top: 2.5rem;
  }
  .liaisons-cover-button {
    min-height: 330px;
  }
  .liaisons-cover-button img {
    height: 340px;
  }
  .liaisons-jacket .jacket-inner {
    display: block;
  }
  .liaisons-jacket .jacket-cover {
    width: min(220px, 70%);
    margin: 0 auto 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .liaisons-frame img,
  .liaisons-cover-button img {
    transition: none;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #14110d;
    --color-surface: #1c1914;
    --color-surface-2: #221e18;
    --color-surface-offset: #2a251e;
    --color-divider: #3a342a;
    --color-border: oklch(0.9 0.02 80 / 0.12);
    --color-text: #ece6d8;
    --color-text-muted: #b3ab9c;
    --color-text-faint: #7d7668;
    --color-text-inverse: #14110d;
    --color-primary: #d4b45a;
    --color-primary-hover: #e2c878;
    --color-primary-active: #c9a227;
    --color-primary-text: #d4b45a;
    --color-ink: #ece6d8;
    --color-paper: #1c1914;
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35);
    --shadow-md: 0 8px 24px oklch(0 0 0 / 0.4);
    --shadow-lg: 0 18px 40px oklch(0 0 0 / 0.5);
  }
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-3);
  z-index: 100;
  background: var(--color-primary);
  color: var(--color-ink);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: translateY(0);
}

.wrap {
  width: min(var(--content-wide), calc(100% - 2 * var(--space-4)));
  margin-inline: auto;
}
.wrap-n {
  width: min(var(--content-narrow), calc(100% - 2 * var(--space-4)));
  margin-inline: auto;
}
.wrap-d {
  width: min(var(--content-default), calc(100% - 2 * var(--space-4)));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition:
    box-shadow var(--transition-interactive),
    border-color var(--transition-interactive),
    background var(--transition-interactive);
}
.site-header.is-scrolled {
  background: var(--color-surface);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.site-header .inner {
  width: min(var(--content-wide), calc(100% - 2 * var(--space-4)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  flex-shrink: 0;
}
.brand svg {
  width: 28px;
  height: 28px;
}
.brand-name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.brand-name em {
  font-style: italic;
  font-weight: 400;
}
@media (max-width: 720px) {
  .brand-last {
    display: none;
  }
  .site-header .inner {
    gap: var(--space-2);
  }
  .lang-toggle button {
    padding: 0.35rem 0.55rem;
  }
}

.nav-desk {
  display: none;
  align-items: center;
  gap: var(--space-5);
  margin-left: auto;
}
.nav-desk a,
.nav-desk button.nav-btn {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  background: none;
  padding: var(--space-2) 0;
  letter-spacing: 0.02em;
}
.nav-desk a:hover,
.nav-desk button.nav-btn:hover,
.nav-desk a[aria-current='page'] {
  color: var(--color-text);
}
.nav-tools {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.icon-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--color-text);
  border-radius: var(--radius-md);
}
.icon-btn:hover {
  background: var(--color-surface-offset);
}
.lang-toggle {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
}
.lang-toggle button {
  padding: 0.4rem 0.7rem;
  min-height: 36px;
  color: var(--color-text-muted);
}
.lang-toggle button[aria-pressed='true'] {
  background: var(--color-text);
  color: var(--color-bg);
}

.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--header-h);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 28px 60px oklch(0.2 0.03 80 / 0.22);
  padding: var(--space-8) 0;
  display: none;
  z-index: 49;
}
.mega.is-open {
  display: block;
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
.mega h3 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}
.mega a {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  padding: var(--space-2) 0;
  font-size: var(--text-base);
}
.mega a:hover {
  color: var(--color-primary-hover);
}
.mega a span {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}
.drawer.is-open {
  pointer-events: auto;
}
.drawer-scrim {
  position: absolute;
  inset: 0;
  background: oklch(0.1 0.02 80 / 0.45);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.drawer.is-open .drawer-scrim {
  opacity: 1;
}
.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(22rem, 92vw);
  height: 100%;
  background: var(--color-surface);
  padding: var(--space-16) var(--space-6) var(--space-8);
  overflow: auto;
  box-shadow: -12px 0 40px oklch(0.15 0.03 80 / 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out), visibility 0.3s var(--ease-out);
}
.drawer.is-open .drawer-panel {
  opacity: 1;
  visibility: visible;
}
.drawer-panel a {
  display: block;
  padding: var(--space-3) 0;
  text-decoration: none;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: var(--text-base);
  white-space: normal;
}
.drawer-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

@media (min-width: 980px) {
  .nav-desk {
    display: flex;
  }
  .nav-tools .menu-btn {
    display: none;
  }
  .nav-tools {
    margin-left: 0;
  }
}

.hero {
  position: relative;
  min-height: min(88vh, 820px);
  display: grid;
  align-items: end;
  overflow: hidden;
  color: #f7f1e4;
}
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, oklch(0.12 0.02 80 / 0.15) 0%, oklch(0.12 0.02 80 / 0.35) 40%, oklch(0.1 0.02 80 / 0.88) 100%);
}
body[data-page='home'] .hero img {
  object-position: center center;
  filter: brightness(1.06) saturate(0.98);
}
body[data-page='home'] .hero-scrim {
  background:
    linear-gradient(90deg, rgba(225, 206, 164, 0.2) 0%, rgba(225, 206, 164, 0.07) 30%, transparent 48%),
    linear-gradient(90deg, rgba(7, 11, 19, 0.22) 0%, rgba(7, 11, 19, 0.14) 34%, rgba(7, 11, 19, 0.04) 64%, transparent 100%),
    linear-gradient(180deg, rgba(7, 11, 19, 0.03) 0%, rgba(7, 11, 19, 0.08) 54%, rgba(7, 11, 19, 0.62) 100%);
}
.hero-copy {
  position: relative;
  z-index: 1;
  padding: clamp(var(--space-12), 10vw, var(--space-24)) 0 var(--space-12);
}
.eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary-text);
  margin-bottom: var(--space-4);
  font-weight: 600;
  text-shadow: 0 1px 12px oklch(0 0 0 / 0.45);
}
body[data-page='home'] .hero .eyebrow {
  font-family: 'Cinzel', 'Trajan Pro', serif;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.8rem);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.025em;
  line-height: 1.06;
  text-transform: none;
  /* The hero is a photograph, so it behaves as a dark surface whatever theme
     the site is in. --color-primary-text is #77600e on the light theme, the
     dark olive gold meant for gold type on paper, and over the plate it read
     at 1.63:1 against the mid tones. This is the luminous gold, at 6.2:1. */
  color: #e7cb80;
  text-shadow: 0 1px 2px rgba(6, 10, 18, 0.55), 0 2px 18px rgba(6, 10, 18, 0.72);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  max-width: 16ch;
  color: #f7f1e4;
}
.hero h1 em {
  font-style: italic;
  font-weight: 300;
}
.hero-lead {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  color: oklch(0.92 0.02 80 / 0.88);
  max-width: 42ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.hero-branded {
  min-height: 0;
  aspect-ratio: 2 / 1;
}
.hero-branded img {
  object-position: center center;
}
.hero-branded .hero-scrim {
  background: linear-gradient(
    180deg,
    oklch(0.12 0.02 80 / 0.06) 0%,
    oklch(0.12 0.02 80 / 0.12) 52%,
    oklch(0.1 0.02 80 / 0.82) 100%
  );
}
.hero-branded .hero-copy {
  padding-top: var(--space-8);
}
.hero-branded .hero-actions {
  margin-top: 0;
}
body[data-page="equilibrist"] .hero-branded img {
  filter: brightness(1.32) contrast(0.94) saturate(1.04);
}
body[data-page="equilibrist"] .hero-branded .hero-scrim {
  background: linear-gradient(
    180deg,
    transparent 0%,
    oklch(0.12 0.02 80 / 0.02) 58%,
    oklch(0.1 0.02 80 / 0.36) 100%
  );
}

.equilibrist-editorial,
.equilibrist-guide {
  display: grid;
  gap: clamp(var(--space-6), 3vw, var(--space-10));
  align-items: center;
}
body[data-page="equilibrist"] #from-the-book .wrap,
body[data-page="equilibrist"] #verse .wrap,
body[data-page="equilibrist"] #guide .wrap {
  width: min(calc(100% - 2rem), 68rem);
}
.equilibrist-scene {
  position: relative;
  width: min(100%, 34rem);
  justify-self: center;
}
.equilibrist-scene img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow:
    0 2px 4px oklch(0.16 0.02 75 / 0.12),
    0 20px 54px oklch(0.16 0.02 75 / 0.16);
}
.equilibrist-scene figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.equilibrist-copy {
  min-width: 0;
}
.equilibrist-copy .display {
  max-width: 12ch;
}
.equilibrist-scene-wide {
  width: min(100%, 42rem);
}
.equilibrist-guide-copy {
  min-width: 0;
}

/* The Satoshi language rail reuses every world-* component from the
   Equilibrist gallery; only the ground behind it changes. Vol. I's jacket is
   black and gold rather than navy, so the section carries the same warmth
   instead of the Equilibrist's blue. */
.satoshi-world {
  position: relative;
  overflow: hidden;
  color: #f7f0df;
  background:
    radial-gradient(circle at 86% 14%, rgba(216, 178, 74, 0.16), transparent 32rem),
    radial-gradient(circle at 6% 88%, rgba(174, 123, 35, 0.12), transparent 28rem),
    linear-gradient(140deg, #14100a 0%, #0b0906 52%, #050403 100%);
}
.satoshi-world::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}
.satoshi-world .wrap { position: relative; z-index: 1; }
.satoshi-world .kicker { color: #d8b866; }
.satoshi-world .display { max-width: 15ch; color: #fffaf0; }

/* A language still being translated has no cover to show, so it gets a plate
   rather than an <img>: no placeholder artwork to commission, and no font
   fallback risk for the scripts we do not yet set (Japanese, Hebrew, Arabic). */
.world-edition-plate {
  display: block;
  aspect-ratio: 11 / 17;
  border: 1px dashed rgba(216, 178, 74, 0.34);
  background: linear-gradient(160deg, rgba(216, 178, 74, 0.07), rgba(0, 0, 0, 0.28));
}
.world-edition.is-soon figcaption { color: rgba(247, 240, 223, 0.5); }
.world-edition-soon {
  display: block;
  margin-top: var(--space-2);
  color: #d8b866;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

.equilibrist-world {
  position: relative;
  overflow: hidden;
  color: #f7f0df;
  background:
    radial-gradient(circle at 84% 16%, rgba(46, 89, 147, 0.34), transparent 34rem),
    radial-gradient(circle at 8% 86%, rgba(174, 123, 35, 0.15), transparent 30rem),
    linear-gradient(135deg, #071a31 0%, #03101f 48%, #020912 100%);
}
.equilibrist-world::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}
.equilibrist-world .wrap {
  position: relative;
  z-index: 1;
}
/* The fact and the count. The copy column used to be 1fr, but .world-lead
   caps itself at 62ch and .display at 13-15ch, so on a wide screen the track
   was far wider than anything in it and the numeral drifted off to the right
   margin with a few hundred pixels of nothing between it and the sentence it
   counts. Both tracks are sized to their content now and the row starts at
   the left edge, so the numeral sits just past the text it belongs to and
   stays aligned with the rail heading below. */
.world-intro {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(14rem, max-content);
  gap: clamp(var(--space-6), 5vw, var(--space-16));
  align-items: end;
  justify-content: start;
}
.equilibrist-world .kicker {
  color: #d8b866;
}
.equilibrist-world .display {
  max-width: 13ch;
  color: #fffaf0;
}
.world-lead {
  max-width: 62ch;
  margin-top: var(--space-6);
  color: rgba(247, 240, 223, 0.78);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.18rem);
  line-height: 1.75;
}
.world-stat {
  display: grid;
  justify-items: end;
  align-content: end;
  text-align: right;
}
.world-stat strong {
  display: block;
  color: #d8b24a;
  font-family: var(--font-display);
  font-size: clamp(6.5rem, 14vw, 12rem);
  font-weight: 500;
  line-height: 0.72;
  letter-spacing: -0.08em;
  text-shadow: 0 18px 52px rgba(0, 0, 0, 0.38);
}
.world-stat span {
  max-width: 15ch;
  margin-top: var(--space-5);
  color: rgba(247, 240, 223, 0.7);
  font-size: var(--text-sm);
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.world-rail-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  align-items: baseline;
  margin: clamp(var(--space-14), 9vw, var(--space-24)) 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(216, 178, 74, 0.32);
}
.world-rail-heading p {
  margin: 0;
  color: #f4e5bd;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.04rem + 0.8vw, 1.75rem);
}
.world-rail-heading span {
  color: rgba(247, 240, 223, 0.58);
  font-size: var(--text-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.world-editions-rail {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: clamp(9.75rem, 14vw, 12rem);
  gap: var(--space-7) var(--space-5);
  overflow-x: auto;
  padding: var(--space-5) max(var(--space-4), calc((100vw - min(100vw - 2rem, 78rem)) / 2)) var(--space-8);
  margin-inline: calc(50% - 50vw);
  scroll-padding-inline: var(--space-4);
  scroll-snap-type: x proximity;
  scrollbar-color: #b88f32 rgba(255,255,255,0.08);
  scrollbar-width: thin;
}
.world-editions-rail:focus-visible {
  outline: 2px solid #d8b24a;
  outline-offset: 5px;
}
.world-edition {
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
}
.world-edition img {
  display: block;
  width: 100%;
  aspect-ratio: 11 / 17;
  object-fit: cover;
  border: 1px solid rgba(234, 205, 130, 0.2);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.42);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.world-edition:hover img {
  transform: translateY(-7px);
  border-color: rgba(234, 205, 130, 0.62);
  box-shadow: 0 26px 48px rgba(0, 0, 0, 0.54);
}
.world-edition figcaption {
  margin: var(--space-3) 0 0;
  color: rgba(247, 240, 223, 0.72);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}
.world-back-link {
  color: inherit;
  cursor: zoom-in;
  text-decoration: underline;
  text-decoration-color: rgba(216, 178, 74, 0.7);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}
.world-back-link:hover,
.world-back-link:focus-visible {
  color: #f2cf72;
  text-decoration-color: currentColor;
}
.world-coming-cover {
  display: flex;
  width: 100%;
  aspect-ratio: 11 / 17;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-7);
  padding: var(--space-5);
  border: 1px dashed rgba(216, 178, 74, 0.5);
  text-align: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(216, 178, 74, 0.16), transparent 34%),
    linear-gradient(160deg, rgba(20, 55, 91, 0.92), rgba(2, 9, 18, 0.98));
  box-shadow: inset 0 0 0 5px rgba(216, 178, 74, 0.05), 0 18px 35px rgba(0, 0, 0, 0.32);
}
.world-coming-cover span {
  color: #e0bc5a;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  line-height: 1.25;
}
.world-coming-cover b {
  max-width: 12ch;
  color: rgba(247, 240, 223, 0.6);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.45;
  text-transform: uppercase;
}
.world-coming > p {
  margin: var(--space-3) 0 0;
  color: rgba(216, 178, 74, 0.8);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}
.world-back-dialog {
  width: min(96vw, 64rem);
  max-width: none;
  max-height: 94dvh;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(216, 178, 74, 0.52);
  border-radius: 0;
  color: #f7f0df;
  background: #061426;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75);
}
.world-back-dialog::backdrop {
  background: rgba(1, 6, 13, 0.88);
  backdrop-filter: blur(5px);
}
.world-back-dialog-inner {
  max-height: 94dvh;
  padding: clamp(var(--space-4), 3vw, var(--space-8));
  overflow: auto;
}
.world-back-toolbar {
  position: sticky;
  z-index: 2;
  top: calc(-1 * clamp(var(--space-4), 3vw, var(--space-8)));
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
  padding: var(--space-4) 0;
  background: linear-gradient(#061426 78%, transparent);
}
.world-back-toolbar .meta {
  margin: 0 0 var(--space-1);
  color: #d8b866;
}
.world-back-toolbar h3 {
  margin: 0;
  color: #fffaf0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  font-weight: 500;
}
.world-back-toolbar .jacket-close {
  flex: 0 0 auto;
  border-color: rgba(216, 178, 74, 0.82);
  color: #fffaf0;
  background: rgba(216, 178, 74, 0.16);
}
.world-back-toolbar .jacket-close:hover,
.world-back-toolbar .jacket-close:focus-visible {
  border-color: #f2cf72;
  color: #071426;
  background: #f2cf72;
}
.world-back-image {
  display: block;
  width: min(100%, 56rem);
  height: auto;
  margin: 0 auto;
  border: 1px solid rgba(234, 205, 130, 0.24);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.48);
}
.world-note {
  max-width: 74ch;
  margin: var(--space-6) 0 0;
  color: rgba(247, 240, 223, 0.56);
  font-size: var(--text-sm);
  line-height: 1.65;
}

@media (max-width: 700px) {
  .world-intro {
    grid-template-columns: 1fr;
  }
  .world-stat {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    align-items: end;
    gap: var(--space-5);
    text-align: left;
  }
  .world-stat strong {
    font-size: clamp(5.5rem, 29vw, 8rem);
  }
  .world-stat span {
    margin: 0 0 var(--space-2);
  }
  .world-rail-heading {
    align-items: flex-end;
  }
  .world-rail-heading span {
    max-width: 9rem;
    white-space: normal;
    text-align: right;
  }
  .world-editions-rail {
    grid-template-rows: auto;
    grid-auto-columns: 9.75rem;
    gap: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-edition img {
    transition: none;
  }
}

@media (min-width: 860px) {
  .equilibrist-editorial {
    grid-template-columns: minmax(17rem, 0.76fr) minmax(0, 1fr);
  }
  .equilibrist-editorial-rev {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.76fr);
  }
  .equilibrist-editorial-rev .equilibrist-scene {
    order: 2;
  }
  .equilibrist-editorial-rev .equilibrist-copy {
    order: 1;
  }
  .equilibrist-guide {
    grid-template-columns: minmax(0, 1.3fr) minmax(17rem, 0.58fr);
    align-items: center;
  }
  .equilibrist-guide .equilibrist-scene {
    position: static;
    justify-self: start;
  }
  .equilibrist-guide .guide-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

@media (max-width: 859px) {
  .equilibrist-editorial-rev .equilibrist-copy {
    order: 1;
  }
  .equilibrist-editorial-rev .equilibrist-scene {
    order: 2;
  }
  .equilibrist-scene {
    width: min(100%, 30rem);
  }
  .equilibrist-guide .equilibrist-scene {
    margin-top: var(--space-4);
  }
}

@media (max-width: 620px) {
  body[data-page="equilibrist"] .hero-branded {
    min-height: 22rem;
    /* 22rem tall x aspect-ratio 2/1 resolves to a 704px-wide section, which
       is wider than the phones this breakpoint exists for. */
    aspect-ratio: auto;
    width: 100%;
    background: #070a12;
  }
  body[data-page="equilibrist"] .hero-branded::before {
    content: "";
    position: absolute;
    inset: -1rem;
    background:
      linear-gradient(oklch(0.08 0.02 255 / 0.5), oklch(0.08 0.02 255 / 0.5)),
      var(--hero-mobile-bg, url("./assets/equilibrist/scenes/equilibrist-banner-final-2x1.webp")) center / cover no-repeat;
    filter: blur(12px);
    transform: scale(1.06);
  }
  body[data-page="equilibrist"] .hero-branded img {
    object-fit: contain;
    z-index: 0;
  }
}

.series-id {
  display: grid;
  grid-template-columns: minmax(96px, 140px) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}
.series-logo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}
.series-id .display {
  font-size: var(--text-xl);
  max-width: 22ch;
  margin: var(--space-2) 0 var(--space-4);
}
.series-id .prose {
  max-width: 52ch;
}

#volumes {
  scroll-margin-top: 5.5rem;
}
.volume {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--color-border);
}
.volume:last-of-type {
  border-bottom: 0;
}
.volume-head h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  margin: var(--space-2) 0 var(--space-3);
}
.cover-trio {
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) minmax(140px, 220px);
  gap: var(--space-4);
  align-items: end;
}
.cover-trio figure {
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.cover-trio img {
  width: 100%;
  height: auto;
  display: block;
  background: #fbf8f1;
  border: 1px solid oklch(0.28 0.02 80 / 0.12);
  box-shadow: var(--shadow-md);
}
.cover-trio .front img {
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
.cover-trio .jacket-art img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.cover-trio .hard img {
  aspect-ratio: 4 / 5;
  object-fit: contain;
}
body[data-page="equilibrist"] .cover-trio {
  display: block;
  min-height: 0;
  position: relative;
  isolation: isolate;
}
body[data-page="equilibrist"] .cover-trio .front,
body[data-page="equilibrist"] .cover-trio .jacket-art {
  display: none;
}
body[data-page="equilibrist"] .cover-trio .hard {
  width: min(100%, 28rem);
  height: clamp(20rem, 32vw, 28rem);
  margin-inline: auto;
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
body[data-page="equilibrist"] .cover-trio .hard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  object-fit: contain;
  z-index: 1;
  transition: transform var(--transition-interactive), filter var(--transition-interactive);
}
body[data-page="equilibrist"] .cover-trio .hard figcaption {
  display: none;
}
body[data-page="equilibrist"] .cover-trio .hard:hover img,
body[data-page="equilibrist"] .cover-trio .hard:focus-visible img {
  transform: scale(1.015);
  filter: drop-shadow(0 18px 24px oklch(0.2 0.02 80 / 0.18));
}
body[data-page="equilibrist"] .volume > .buy-row {
  position: relative;
  z-index: 2;
  clear: both;
  margin-top: 0;
}

@media (min-width: 860px) {
  body[data-page="equilibrist"] #volumes .volume {
    grid-template-columns: minmax(18rem, 0.82fr) minmax(22rem, 1.18fr);
    grid-template-areas:
      "head cover"
      "buy cover";
    column-gap: clamp(var(--space-8), 4vw, var(--space-14));
    row-gap: var(--space-5);
    align-items: center;
    padding: var(--space-10) 0;
  }
  body[data-page="equilibrist"] #volumes .volume-head {
    grid-area: head;
    align-self: end;
  }
  body[data-page="equilibrist"] #volumes .cover-trio {
    grid-area: cover;
    align-self: center;
  }
  body[data-page="equilibrist"] #volumes .volume > .buy-row {
    grid-area: buy;
    align-self: start;
  }
}
.cover-trio figcaption {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
@media (max-width: 800px) {
  .cover-trio {
    grid-template-columns: 1fr 1fr;
  }
  .cover-trio .jacket-art {
    grid-column: 1 / -1;
  }
  .series-id {
    grid-template-columns: 96px 1fr;
    gap: var(--space-4);
  }
}
@media (max-width: 520px) {
  .cover-trio {
    grid-template-columns: 1fr;
  }
  .cover-trio .jacket-art {
    grid-column: auto;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  border-radius: 2px;
  font-weight: 600;
}
.btn-gold {
  background: var(--color-primary);
  color: #1a1610;
}
.btn-gold:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-gold:active {
  transform: translateY(0);
}
.btn-ghost {
  border: 1px solid oklch(1 0 0 / 0.45);
  color: #f7f1e4;
  background: oklch(0 0 0 / 0.2);
}
.btn-ghost:hover {
  background: oklch(1 0 0 / 0.1);
}
.btn-ink {
  background: var(--color-text);
  color: var(--color-bg);
}
.btn-ink:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-line {
  border: 1px solid var(--color-text);
  color: var(--color-text);
}
.btn-line:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.section {
  padding-block: var(--band-pad);
}
.section.tight {
  padding-block: var(--band-pad-tight);
}

/* About, Equilibrist and the Orloj shelf each carried their own tighter
   padding. That value is --band-pad now, so the overrides are gone. */

.section.cream {
  background: var(--color-surface);
}
.section.paper {
  background: var(--color-surface-2);
}
.section.offset {
  background: var(--color-surface-offset);
}

.home-scene-break {
  margin-top: var(--band-pad);
  max-width: 54rem;
}
.home-scene-break img {
  width: 100%;
  aspect-ratio: 722 / 422;
  object-fit: cover;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.kicker {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
h2.display {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  margin-bottom: var(--space-5);
}
h2.display em {
  font-style: italic;
}
.prose {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 65ch;
}
.prose p + p {
  margin-top: var(--space-4);
}

.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  text-align: center;
  border-block: 1px solid var(--color-border);
  padding-block: var(--space-8);
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
@media (min-width: 700px) {
  .stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.split {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}
@media (min-width: 860px) {
  .split {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .split.flip {
    grid-template-columns: 0.9fr 1.1fr;
  }
  .split.flip > :first-child {
    order: 2;
  }
}

/* The Reader Club offer and the pull quote that answers it. As a plain
   .split they were 1.1fr/0.9fr across the full wrap -- on a wide screen that
   put a third of the viewport of empty paper between a sentence and its
   reply, and they stopped reading as a pair. Content-sized tracks centred as
   a group instead, the same correction .world-teaser already carries. The
   modifier outranks the .split rule on specificity, so it needs no media
   query of its own to win at the 860px breakpoint. */
/* This band once carried a pull quote beside the copy, so the grid declared
   two tracks. The quote is gone but the second track stayed: with a single
   child the empty track and its gap still occupied the row, which is what
   pushed the block left of centre. One centred track, contents centred in it. */
.home-club-split {
  justify-content: center;
  gap: var(--space-8);
  text-align: center;
}
.home-club-split .prose {
  margin-inline: auto;
}
.home-club-split .hero-actions {
  justify-content: center;
}
@media (min-width: 860px) {
  .home-club-split {
    grid-template-columns: minmax(0, 34rem);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
  }
}
/* <blockquote> still carries the user agent's 40px inline margins. Inside a
   centred max-content track they are not indentation, they are 80px of track
   that belongs to nothing -- which is what pushed the pair off centre. */
.home-club-split .quote {
  margin-inline: 0;
}

.series-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: var(--space-5);
  overflow-x: auto;
  padding-bottom: var(--space-4);
  scroll-snap-type: x mandatory;
}
.series-card {
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  display: grid;
  gap: var(--space-3);
}
.series-card:hover .cover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.cover {
  aspect-ratio: 2 / 3;
  width: 100%;
  object-fit: cover;
  background: var(--color-surface-offset);
  border: 1px solid oklch(0.28 0.02 80 / 0.12);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--transition-interactive),
    box-shadow var(--transition-interactive);
}
.cover.mockup-cover {
  object-fit: contain;
  padding: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.mockup-hit {
  display: block;
  width: 100%;
  min-height: 44px;
  background: transparent;
  border: 0;
}
.mockup-hit .mockup-cover {
  width: 100%;
}
.mockup-hit:hover .mockup-cover,
.mockup-hit:focus-visible .mockup-cover {
  transform: scale(1.035);
  filter: drop-shadow(0 18px 24px oklch(0.2 0.02 80 / 0.18));
}
.cover-ph {
  aspect-ratio: 2 / 3;
  display: grid;
  place-items: end start;
  padding: var(--space-4);
  background:
    radial-gradient(120% 80% at 20% 0%, oklch(from var(--color-primary) l c h / 0.35), transparent 50%),
    var(--color-ink);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
}
.cover-ph strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
}
.cover-ph em {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: var(--space-2);
}
.series-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
}
.series-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: var(--space-6);
}
.book {
  text-decoration: none;
  color: inherit;
  display: grid;
  gap: var(--space-3);
}

/* Shop catalog: two distinct language shelves with larger, brighter covers. */
body[data-page="shop"] .filters {
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}

body[data-page="shop"] .shop-language-group {
  padding-block: var(--space-4);
}

body[data-page="shop"] .legacy-shop-grid {
  display: none !important;
}

body[data-page="shop"] .shop-language-group + .shop-language-group {
  margin-top: var(--band-pad);
  padding-top: clamp(var(--space-12), 6vw, var(--space-20));
  border-top: 1px solid color-mix(in oklab, var(--color-primary) 24%, transparent);
}

body[data-page="shop"] .shop-language-heading {
  margin-bottom: clamp(var(--space-8), 4vw, var(--space-12));
}

body[data-page="shop"] .shop-language-heading .display {
  max-width: 16ch;
  margin-top: var(--space-2);
}

body[data-page="shop"] .book-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(var(--space-8), 3vw, var(--space-12));
  row-gap: clamp(var(--space-12), 6vw, var(--space-20));
}

body[data-page="shop"] .book {
  min-width: 0;
  align-content: start;
  gap: var(--space-4);
}

body[data-page="shop"] .book .cover {
  aspect-ratio: 2 / 3;
  object-fit: contain;
  padding: var(--space-2);
  background: #f5efe3;
  filter: brightness(1.08) saturate(1.04);
  box-shadow:
    0 1.25rem 2.5rem oklch(0.2 0.025 75 / 0.14),
    0 0.25rem 0.75rem oklch(0.2 0.025 75 / 0.1);
}

body[data-page="shop"] .book .cover-contain {
  object-fit: contain;
}

body[data-page="shop"] .book .cover-rebel {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}

body[data-page="shop"] .book h3 {
  font-size: var(--text-lg);
  line-height: 1.25;
}

body[data-page="shop"] .book .buy-row {
  gap: var(--space-3);
  margin-top: var(--space-1);
  align-items: stretch;
}

body[data-page="shop"] .book .buy-direct,
body[data-page="shop"] .book .shop-amazon {
  flex: 1 1 9.5rem;
}

body[data-page="shop"] .book .buy-direct .btn,
body[data-page="shop"] .book .shop-amazon {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  text-align: center;
}

body[data-page="shop"] .shop-count,
body[data-page="shop"] .shop-formats,
body[data-page="shop"] .shop-unavailable {
  color: var(--color-text-muted);
}

/* The count is a big display numeral beside small body text. Left on the
   baseline the label hangs off the bottom of the numeral and reads as
   misaligned; centring the pair is what makes it sit right. */
body[data-page="shop"] .shop-count {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

body[data-page="shop"] .shop-count strong {
  color: var(--color-primary-text);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
}

body[data-page="shop"] .shop-formats,
body[data-page="shop"] .shop-unavailable {
  font-size: var(--text-sm);
}

body[data-page="shop"] .shop-unavailable {
  flex: 1 1 100%;
  padding: .75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-align: center;
}

[data-theme="dark"] body[data-page="shop"] .book .cover {
  background: #ece5d7;
  filter: brightness(1.14) saturate(1.05);
}

@media (max-width: 900px) {
  body[data-page="shop"] .book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 580px) {
  body[data-page="shop"] .book-grid {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 23rem);
    margin-inline: auto;
    row-gap: var(--space-14);
  }
}
.book:hover .cover,
.book:hover .cover-ph {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.book h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
}
.meta {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.buy-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-end;
}
.buy-option {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 11.5rem;
}
.buy-format {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.buy-direct {
  min-width: 11.5rem;
}

/* Print and eBook are separate Shopify products, not two variants of one, so
   the jacket carries one buy slot per format. Price is suppressed on both via
   data-shopify-hide-price, which app.js reads. */
.jacket-buy-two {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}

.jacket-buy-two .buy-direct {
  flex: 1 1 11.5rem;
  max-width: 16rem;
}

.jacket-buy-two .buy-direct .shopify-buy__product,
.jacket-buy-two .buy-direct .btn,
.jacket-buy-two .buy-direct .shopify-buy__btn {
  width: 100%;
  text-align: center;
}
.btn-gold.is-awaiting {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-primary);
  cursor: default;
  pointer-events: none;
}
.buy-direct .visuallyhidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.buy-direct .shopify-buy__product-img-wrapper,
.buy-direct .shopify-buy__product__title {
  display: none;
}
.buy-direct .shopify-buy__product {
  text-align: left;
}
.buy-direct .shopify-buy__product__price,
.buy-direct .shopify-buy__product__actual-price {
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 0.45rem;
}
.buy-direct .shopify-buy__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.75rem 1.25rem;
  background: var(--color-primary);
  color: #1a1610;
  border: 0;
  border-radius: 2px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.buy-direct .shopify-buy__btn:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
iframe.shopify-buy-frame--toggle,
iframe.shopify-buy-frame--cart,
.shopify-buy-frame--toggle,
.shopify-buy-frame--cart {
  display: none !important;
}
.buy-alt {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  text-decoration: none;
  padding: 0.2rem 0;
}
.buy-alt:hover {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.chrono {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.chrono b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
}
.chrono span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .chrono {
    grid-template-columns: 1fr 1fr;
  }
}

.glossary {
  display: grid;
  gap: var(--space-3);
}
.g-item {
  border-bottom: 1px solid var(--color-border);
}
.g-item button {
  width: 100%;
  text-align: left;
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text);
  display: flex;
  justify-content: space-between;
  min-height: 44px;
}
.g-item button::after {
  content: '+';
  font-style: normal;
  color: var(--color-primary-text);
}
.g-item.is-open button::after {
  content: '–';
}
.g-body {
  display: none;
  padding: 0 0 var(--space-4);
  color: var(--color-text-muted);
  max-width: 60ch;
}
.g-item.is-open .g-body {
  display: block;
}

.novella {
  border: 1px solid var(--color-primary);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  background: var(--color-surface);
}
.novella-with-cover {
  display: grid;
  /* The form is capped at 28rem inside a 1fr column, which on wide screens left
     ~370px of dead air and pushed the cover against the gold frame. Capping the
     whole pair at 60rem and centring it inside the frame closes that gap and
     lets the cover grow 14rem -> 22rem. */
  max-width: 60rem;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 22rem);
  gap: clamp(var(--space-6), 3vw, var(--space-12));
  align-items: center;
}
.novella-copy {
  min-width: 0;
}
.novella-cover-thumb {
  width: min(100%, 22rem);
  margin: 0;
  justify-self: start;
  text-align: center;
}
.novella-cover-thumb img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow:
    0 2px 5px rgb(20 17 12 / 0.14),
    0 18px 42px rgb(20 17 12 / 0.18);
}
.novella-cover-thumb figcaption {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-style: italic;
  line-height: 1.35;
}
.novella form {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  max-width: 28rem;
}
.novella label {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.novella input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}
@media (max-width: 1000px) {
  /* two columns start to crowd here, so let the cover give ground first */
  .novella-with-cover {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 16rem);
  }
  .novella-cover-thumb {
    width: min(100%, 16rem);
  }
}
@media (max-width: 700px) {
  .novella-with-cover {
    grid-template-columns: 1fr;
  }
  .novella-cover-thumb {
    width: min(78%, 16rem);
    justify-self: center;
  }
}
.form-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.chip {
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.chip[aria-pressed='true'] {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.blog-grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 800px) {
  .blog-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
  .blog-card:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
  body[data-page='home'] .blog-card:first-child {
    grid-column: auto;
    grid-row: auto;
  }
  body[data-page='home'] .blog-card:nth-child(2) {
    grid-column: 2 / span 2;
    grid-row: 1 / span 2;
  }
}
.blog-card {
  text-decoration: none;
  color: inherit;
  display: grid;
  gap: var(--space-3);
}
.blog-card:hover h3 {
  color: var(--color-primary-hover);
}
.blog-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
body[data-page='home'] .blog-card:first-child img {
  object-fit: contain;
  object-position: center;
  background: #11100d;
}

@media (max-width: 620px) {
  body[data-page='home'] .hero img {
    object-position: 56% center;
  }
  body[data-page='home'] .hero-scrim {
    background:
      linear-gradient(90deg, rgba(225, 206, 164, 0.08) 0%, transparent 55%),
      linear-gradient(90deg, rgba(7, 11, 19, 0.4) 0%, rgba(7, 11, 19, 0.28) 100%),
      linear-gradient(180deg, rgba(7, 11, 19, 0.16) 0%, rgba(7, 11, 19, 0.3) 50%, rgba(7, 11, 19, 0.82) 100%);
  }
}
.blog-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
}

/* Downloaded journal archive */
.journal-library {
  min-height: 70vh;
}

.journal-intro {
  max-width: 52rem;
}

.journal-intro > p:last-child {
  max-width: 62ch;
  margin-top: var(--space-5);
  color: var(--color-text-muted);
}

.journal-category-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: clamp(var(--space-10), 6vw, var(--space-16)) 0 var(--space-8);
}

.journal-tab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 5.5rem;
  padding: var(--space-5);
  color: var(--color-text);
  text-align: left;
  background: transparent;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition:
    color var(--transition-interactive),
    background var(--transition-interactive),
    border-color var(--transition-interactive);
}

.journal-tab span {
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 2.2vw, var(--text-2xl));
}

.journal-tab b {
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.journal-tab:hover,
.journal-tab.is-active {
  color: var(--color-bg);
  background: var(--color-text);
  border-color: var(--color-text);
}

.journal-tab:hover b,
.journal-tab.is-active b {
  color: currentColor;
}

.journal-language-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-block: 1px solid var(--color-border);
}

.journal-language-row .meta {
  margin: 0;
}

.journal-language-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.journal-language-chip {
  padding: .55rem .85rem;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
}

.journal-language-chip.is-active {
  color: var(--color-bg);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.journal-language-chip b {
  margin-left: .35rem;
  font-size: .75em;
  opacity: .76;
}

.journal-status {
  margin: var(--space-8) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.journal-article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-10), 5vw, var(--space-16)) clamp(var(--space-6), 3vw, var(--space-10));
}

.journal-card {
  display: grid;
  align-content: start;
  min-width: 0;
}

.journal-card-image {
  display: block;
  overflow: hidden;
  margin-bottom: var(--space-5);
  background: #171614;
  box-shadow: var(--shadow-md);
}

.journal-card-image img,
.journal-card-monogram {
  width: 100%;
  aspect-ratio: 16 / 10;
}

.journal-card-image img {
  display: block;
  object-fit: cover;
  transition: transform var(--transition-interactive);
}

.journal-card-image:hover img {
  transform: scale(1.025);
}

.journal-card-monogram {
  display: grid;
  place-items: center;
  color: #d6a928;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: .08em;
  background:
    radial-gradient(circle at 70% 25%, rgba(214, 169, 40, .2), transparent 30%),
    linear-gradient(145deg, #132329, #171614 72%);
}

.journal-card-copy {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.journal-card-copy .meta {
  margin: 0;
}

.journal-card-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2.4vw, var(--text-2xl));
  font-weight: 400;
  line-height: 1.08;
}

.journal-card-copy h3 a,
.journal-read {
  color: inherit;
  text-decoration: none;
}

.journal-card-copy > p:not(.meta) {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-text-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.journal-read {
  width: fit-content;
  margin-top: var(--space-2);
  border-bottom: 1px solid currentColor;
}

.journal-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(var(--space-12), 7vw, var(--space-20));
}

.journal-reader {
  width: min(100% - 2rem, 58rem);
  padding-block: clamp(var(--space-16), 7vw, var(--space-24));
}

.journal-back {
  display: inline-block;
  margin-bottom: var(--space-12);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.journal-reader-head {
  padding-bottom: clamp(var(--space-10), 5vw, var(--space-16));
  border-bottom: 1px solid var(--color-border);
}

.journal-reader-head h1 {
  max-width: 19ch;
  margin-top: var(--space-4);
}

.journal-reader-meta {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
}

.journal-reader-body {
  padding-block: clamp(var(--space-10), 6vw, var(--space-16));
  font-family: var(--font-body);
  font-size: clamp(var(--text-base), 1.5vw, var(--text-lg));
  line-height: 1.75;
}

.journal-reader-body > * + * {
  margin-top: 1.35em;
}

.journal-reader-body h2,
.journal-reader-body h3,
.journal-reader-body h4 {
  margin-top: 2.2em;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
}

.journal-reader-body img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 48rem;
  margin-inline: auto;
  object-fit: contain;
}

.journal-reader-body blockquote {
  padding: var(--space-6) 0 var(--space-6) var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  border-left: 2px solid var(--color-primary);
}

.journal-reader-body a {
  overflow-wrap: anywhere;
}

.journal-reader-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.journal-reader-body th,
.journal-reader-body td {
  padding: .65rem;
  border: 1px solid var(--color-border);
}

.journal-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
}

.journal-source p {
  max-width: 36rem;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .journal-article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .journal-category-tabs,
  .journal-article-grid {
    grid-template-columns: 1fr;
  }

  .journal-category-tabs {
    gap: var(--space-2);
  }

  .journal-tab {
    min-height: 4.25rem;
  }

  .journal-language-row,
  .journal-source {
    align-items: flex-start;
    flex-direction: column;
  }
}

.site-footer {
  background: var(--color-ink);
  color: var(--color-text-inverse);
  padding: var(--space-16) 0 var(--space-8);
}
[data-theme='dark'] .site-footer {
  background: #0c0a08;
}
.foot-grid {
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 800px) {
  .foot-grid {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }
}
.site-footer a {
  color: oklch(0.92 0.02 80 / 0.8);
  text-decoration: none;
  display: block;
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
}
.site-footer a:hover {
  color: var(--color-primary);
}
.site-footer h2 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  color: var(--color-primary);
}
.legal {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid oklch(1 0 0 / 0.12);
  font-size: var(--text-xs);
  color: oklch(0.92 0.02 80 / 0.55);
}

.reveal {
  opacity: 1;
}
@supports (animation-timeline: view()) {
  .reveal {
    opacity: 0;
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}
@keyframes reveal-fade {
  to {
    opacity: 1;
  }
}

@view-transition {
  navigation: auto;
}

.signoff-bar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--space-3) var(--space-4);
}
.signoff-bar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}
.signoff-bar p {
  font-size: var(--text-sm);
  max-width: none;
}
.signoff-bar .btn-gold {
  min-height: 40px;
}

.city-track {
  display: grid;
  gap: 0;
}
.city {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
}
.city:hover .city-name {
  color: var(--color-primary-hover);
}
.city-num {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.city-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}
.badge {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.badge.soon {
  border-color: var(--color-primary);
  color: var(--color-primary-hover);
}

.yt {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface-offset);
}
.yt a {
  color: var(--color-text);
}

.quote {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: 400;
  max-width: 22ch;
}

.imprint {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.volume-title {
  appearance: none;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--color-primary);
  min-height: 2.75rem;
}
.volume-title:hover,
.volume-title:focus-visible {
  color: var(--color-primary-text);
}
.volume-hint {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 var(--space-3);
}
.volume-teaser {
  font-style: italic;
  max-width: 52ch;
}

dialog.jacket {
  width: min(42rem, calc(100vw - 2rem));
  max-height: min(78vh, 46rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
dialog.jacket::backdrop {
  background: oklch(0.2 0.03 80 / 0.55);
}
body:has(dialog.jacket[open]) .signoff-bar {
  visibility: hidden;
}
body:has(dialog.jacket[open]) {
  overflow: hidden;
}
.jacket-inner {
  padding: var(--space-8);
  overflow: auto;
  max-height: min(78vh, 46rem);
}
.jacket-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.jacket-close {
  appearance: none;
  background: none;
  border: 1px solid var(--color-divider);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  min-height: 44px;
  cursor: pointer;
}
.jacket-inner h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  margin: var(--space-4) 0 var(--space-6);
  max-width: 22ch;
}
.jacket-copy {
  max-width: 62ch;
}
.jacket-copy p {
  margin: 0 0 var(--space-4);
}
.jacket-quote {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-primary-text);
}
.jacket-review {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.jacket-review blockquote {
  font-style: italic;
  margin: 0 0 var(--space-3);
}
.jacket-review figcaption {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

#reviews {
  border-bottom: 1px solid var(--color-divider);
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.review-card {
  margin: 0;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.review-card blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  font-weight: 400;
  margin: 0 0 var(--space-4);
  line-height: 1.35;
}
.review-card figcaption {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
@media (max-width: 800px) {
  .review-grid {
    grid-template-columns: 1fr;
  }
}

.watch-lead {
  margin-bottom: var(--space-8);
}
.yt-stage {
  position: relative;
  display: block;
  overflow: hidden;
  color: #f7f1e4;
  text-decoration: none;
  background: #1a1610;
  aspect-ratio: 2.4 / 1;
  min-height: 220px;
}
.yt-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0.88;
  transition: opacity 220ms var(--ease-out), transform 500ms var(--ease-out);
}
.yt-stage:hover img,
.yt-stage:focus-visible img {
  opacity: 1;
  transform: scale(1.02);
}
.yt-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  pointer-events: none;
}
.yt-play svg {
  filter: drop-shadow(0 8px 24px oklch(0 0 0 / 0.45));
  transition: transform 220ms var(--ease-out);
}
.yt-stage:hover .yt-play svg,
.yt-stage:focus-visible .yt-play svg {
  transform: scale(1.06);
}
.yt-stage-copy {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-5);
  right: var(--space-5);
  display: grid;
  gap: 0.15rem;
  pointer-events: none;
  text-shadow: 0 1px 12px oklch(0 0 0 / 0.55);
}
.yt-stage-copy .meta {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--color-primary);
}
.yt-stage-copy strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
}
.yt-stage-copy span:last-child {
  font-size: var(--text-sm);
  color: #f7f1e4;
}
.yt-stage img.yt-avatar {
  position: absolute;
  left: var(--space-5);
  top: var(--space-5);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-primary);
  box-shadow: 0 4px 16px oklch(0 0 0 / 0.4);
  opacity: 1;
  z-index: 2;
}
@media (max-width: 700px) {
  .yt-stage img.yt-avatar {
    width: 40px;
    height: 40px;
  }
}
.watch-actions {
  margin-top: var(--space-6);
}

/* ---- YouTube call-to-action: subscribe pill + subscriber frame -----------
   Two jobs under the channel banner and no more: one red pill that goes to
   YouTube's own subscribe confirmation, and one quiet frame holding the
   count. The count is hand-maintained -- YouTube rounds the public figure to
   three significant figures anyway, so a live lookup would buy nothing.
   Update it with _build/yt_subs.py, never by hand in the markup.          */
/* The State of Super-Intelligence banner is a 3:1 strip whose own typography
   runs to the right edge; the default 2.4:1 stage would crop the stats block
   off it. No copy overlay on this one either -- the artwork already names the
   channel and carries its tagline. */
.yt-stage-wide { aspect-ratio: 3 / 1 }
/* Centred, the play badge lands squarely on the monolith mark. Confine it to
   the left panel so it sits in the corridor instead of over the logo. */
.yt-stage-wide .yt-play {
  inset: 0 auto 0 0;
  width: 46%;
}
@media (max-width: 700px) {
  .yt-stage-wide .yt-play svg { width: 46px; height: 46px }
}

.yt-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

/* ---- The Medium window ---------------------------------------------------
 * The book pages give YouTube a 2.4:1 stage filled with the channel's own
 * banner. Medium has no banner, and the two candidate photographs on this site
 * -- the About hero and the Journal hero -- both carry their own headline type,
 * which fought the overlay and read as two designs stacked. So this window is
 * built rather than borrowed: the site's ink ground, the inset gold hairline
 * the bundle frames use, and the follower figure as the subject, since the
 * count is the thing worth showing. Same 2.4:1 proportion as the YouTube stage
 * so the two read as one family across the site.
 * ------------------------------------------------------------------------ */
.md-window {
  display: block;
  text-decoration: none;
  color: #f4ecdc;
}

/* The Medium banner takes the slot the drawn window card used to fill -- same
   2.4:1 proportion. The artwork carries its own headline, so it ships as an
   EN and an ES plate swapped by applyLang() through data-src-*. Deliberately
   no srcset: applyLang rewrites src only, and a srcset would win over it and
   strand the reader on the wrong language. The section's own h2 and prose stay
   above it as the layer that still reads at phone widths, where the banner's
   baked type is too small to carry the message on its own. */
.md-banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
.md-stat {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
}
.md-stat strong {
  margin-right: .4em;
  font-family: var(--font-display);
  font-size: var(--text-lg);
}
.md-window-frame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-3) var(--space-6);
  min-height: 15rem;
  aspect-ratio: 2.4 / 1;
  padding: clamp(1.4rem, 3.2vw, 2.6rem);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(120% 140% at 82% 18%, oklch(0.32 0.045 72 / 0.55) 0%, transparent 62%),
    linear-gradient(155deg, #1f1a12 0%, #14110c 55%, #0f0d09 100%);
  box-shadow:
    0 1px 2px oklch(0 0 0 / 0.35),
    0 24px 50px -26px oklch(0 0 0 / 0.75);
  overflow: hidden;
}
.md-window-frame::after {
  content: '';
  position: absolute;
  inset: clamp(0.5rem, 1vw, 0.8rem);
  border: 1px solid var(--color-primary);
  border-radius: 2px;
  opacity: 0.34;
  pointer-events: none;
}
.md-window-top {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.md-window-meta { color: var(--color-primary) }
.md-window-handle { color: #f4ecdc; opacity: 0.55; letter-spacing: 0.12em }

/* The figure is the point of the block, so it gets the display face and the
   room a headline would get. tabular-nums keeps it from shifting when the
   number is updated. */
.md-window-count {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  display: grid;
  gap: 0.15rem;
}
.md-window-figure {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.4rem, 2rem + 6vw, 6rem);
  line-height: 0.92;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.md-window-label {
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: #f4ecdc;
  opacity: 0.72;
}
.md-window-id {
  grid-column: 1;
  grid-row: 3;
  display: grid;
  gap: 0.1rem;
  align-self: end;
}
.md-window-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
}
.md-window-bio {
  font-size: var(--text-sm);
  opacity: 0.62;
}
.md-window-go {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  color: var(--color-primary);
  display: flex;
  transition: transform 240ms var(--ease-out);
}
.md-window:hover .md-window-go,
.md-window:focus-visible .md-window-go { transform: translateX(5px) }
.md-window:hover .md-window-frame::after,
.md-window:focus-visible .md-window-frame::after { opacity: 0.6 }

@media (max-width: 640px) {
  .md-window-frame { aspect-ratio: auto; min-height: 0 }
  .md-window-go { grid-column: 1; grid-row: 4; justify-self: start; margin-top: var(--space-2) }
}
@media (prefers-reduced-motion: reduce) {
  .md-window:hover .md-window-go,
  .md-window:focus-visible .md-window-go { transform: none }
}

.yt-subscribe.md-follow {
  background: var(--color-primary);
  color: var(--color-text);
}
.yt-subscribe.md-follow:hover,
.yt-subscribe.md-follow:focus-visible {
  background: var(--color-text);
  color: var(--color-paper);
}

.yt-subscribe {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .68rem 1.35rem;
  border-radius: 999px;
  background: var(--yt-red, #c4302b);
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.yt-subscribe svg { transition: transform 220ms var(--ease-out) }
.yt-subscribe:hover,
.yt-subscribe:focus-visible {
  background: var(--yt-red-hover, #a52521);
  transform: translateY(-1px);
}
.yt-subscribe:hover svg,
.yt-subscribe:focus-visible svg { transform: translateX(3px) }

.yt-subcount {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  margin: 0;
  padding: .58rem 1rem;
  border: 1px solid var(--yt-frame, rgba(26, 22, 16, .18));
  border-radius: .5rem;
  background: var(--yt-frame-bg, rgba(255, 255, 255, .45));
}
.yt-subcount-value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.yt-subcount-label {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .62;
}

[data-theme='dark'] .yt-subcount {
  --yt-frame: rgba(236, 230, 216, .22);
  --yt-frame-bg: rgba(255, 255, 255, .04);
}

@media (prefers-reduced-motion: reduce) {
  .yt-subscribe, .yt-subscribe svg { transition: none }
  .yt-subscribe:hover { transform: none }
}

@media (max-width: 480px) {
  .yt-cta { gap: var(--space-3) }
  .yt-subscribe { padding: .62rem 1.1rem }
}
.follow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.follow-kicker {
  width: 100%;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 var(--space-2);
}
.follow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  background: var(--color-surface);
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.follow-link:hover,
.follow-link:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-surface-2);
  transform: translateY(-1px);
}
.follow-link svg {
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .yt-stage {
    aspect-ratio: 16 / 10;
  }
  .yt-play svg {
    width: 56px;
    height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .yt-stage img,
  .yt-play svg,
  .follow-link {
    transition: none;
  }
  .yt-stage:hover img {
    transform: none;
  }
}

/* Poetry in Symmetry — light editorial collection */
body[data-page="poetry"] {
  background: #fff;
  --poetry-ink: #172535;
  --poetry-gold: #a97825;
  --poetry-blue: #153c5c;
  --poetry-paper: #f7f3ea;
  --poetry-rule: #d8c7a8;
}
body[data-page="poetry"] main {
  overflow: clip;
  background: #fff;
}
.poetry-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(50rem, calc(100vh - 4.5rem));
  display: flex;
  align-items: center;
  padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem);
  background: #07131f;
  border-bottom: 1px solid var(--poetry-rule);
}
.poetry-hero-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  filter: saturate(1.4) contrast(1.06) brightness(0.88);
}
.poetry-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(4, 24, 47, 0.92) 0%, rgba(7, 33, 61, 0.78) 34%, rgba(8, 40, 72, 0.34) 63%, rgba(8, 40, 72, 0.08) 100%),
    linear-gradient(180deg, rgba(5, 28, 53, 0.12) 0%, rgba(5, 28, 53, 0.02) 55%, rgba(4, 24, 47, 0.38) 100%);
}
.poetry-hero-grid {
  position: relative;
}
.poetry-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 42rem;
}
.poetry-hero-copy .eyebrow,
.poetry-kicker {
  margin: 0 0 1.1rem;
  color: var(--poetry-gold);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.poetry-hero h1 {
  max-width: 9ch;
  margin: 0;
  color: #fffaf0;
  font-family: "Boska", var(--font-display);
  font-size: clamp(4.2rem, 7.6vw, 8.5rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.86;
  text-shadow: 0 0.12em 0.5em rgba(0, 0, 0, 0.3);
}
.poetry-deck {
  max-width: 34rem;
  margin: 2rem 0 1.6rem;
  color: rgba(246, 244, 238, 0.86);
  font-family: var(--font-body);
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.35rem);
  line-height: 1.65;
}
.poetry-text-link,
.poetry-details {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--poetry-blue);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}
.poetry-hero .poetry-text-link {
  color: #f2e6c7;
}
.poetry-text-link::after,
.poetry-details::after {
  content: "→";
  color: var(--poetry-gold);
  font-size: 1rem;
  transition: transform 180ms ease;
}
.poetry-text-link:hover::after,
.poetry-details:hover::after {
  transform: translateX(0.3rem);
}
.poetry-opening {
  padding: clamp(5rem, 9vw, 9rem) 0;
  background: #fff;
}
.poetry-opening-grid {
  display: grid;
  grid-template-columns: 0.25fr 1.15fr 0.9fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.poetry-index {
  margin: 0;
  color: var(--poetry-rule);
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  writing-mode: vertical-rl;
}
.poetry-opening h2,
.poetry-section-head h2 {
  margin: 0;
  color: var(--poetry-ink);
  font-family: "Boska", var(--font-display);
  font-size: clamp(2.7rem, 5vw, 5.5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.98;
}
.poetry-opening-copy {
  padding-top: 2rem;
  color: #4b5864;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.8;
}
.poetry-opening-copy p + p {
  margin-top: 1.25rem;
}
.poetry-arc {
  padding: clamp(5rem, 9vw, 8rem) 0;
  background: var(--poetry-paper);
  border-block: 1px solid var(--poetry-rule);
}
.poetry-section-head {
  max-width: 52rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.poetry-section-head h2 {
  font-size: clamp(2.5rem, 4.4vw, 4.6rem);
}
.poetry-section-head > p:last-child {
  margin: 1.25rem 0 0;
  color: #64707b;
}
.poetry-section-head-centered {
  margin-inline: auto;
  text-align: center;
}
.poetry-journey {
  display: grid;
  gap: clamp(4.5rem, 9vw, 8rem);
}
.poetry-movement-story {
  display: grid;
  grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
  padding-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--poetry-rule);
}
.poetry-movement-story-reverse {
  grid-template-columns: minmax(0, 1.28fr) minmax(16rem, 0.72fr);
}
.poetry-movement-story-reverse .poetry-movement-art {
  order: 2;
}
.poetry-movement-story-reverse .poetry-movement-copy {
  order: 1;
}
.poetry-movement-art {
  position: relative;
  width: min(100%, 29rem);
  margin: 0;
  padding: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--poetry-gold) 52%, transparent);
}
.poetry-movement-art::before {
  content: none;
}
.poetry-movement-art img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 42%;
  box-shadow: 0 24px 62px rgb(17 27 38 / 0.18);
}
.poetry-movement-story:nth-child(2) .poetry-movement-art img {
  object-position: center 48%;
}
.poetry-movement-story:nth-child(3) .poetry-movement-art img {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}
.poetry-movement-art figcaption {
  position: relative;
  z-index: 2;
  margin: 1.25rem 0 0;
  color: #727a80;
  font-family: "Boska", var(--font-display);
  font-size: 1rem;
  font-style: italic;
}
.poetry-movement-copy {
  max-width: 38rem;
}
.poetry-roman {
  margin: 0 0 1.25rem;
  color: var(--poetry-gold);
  font-family: "Boska", var(--font-display);
  font-size: clamp(4rem, 8vw, 7.5rem);
  font-style: italic;
  line-height: 0.72;
}
.poetry-movement-copy h3 {
  margin: 0;
  color: var(--poetry-ink);
  font-family: "Boska", var(--font-display);
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.94;
}
.poetry-movement-book {
  margin: 0 0 0.9rem;
  color: var(--poetry-gold);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.poetry-movement-copy > p:not(.poetry-roman, .poetry-movement-book) {
  max-width: 48ch;
  margin-top: 1.75rem;
  color: #59636b;
  font-size: 1.05rem;
  line-height: 1.75;
}
.poetry-whisper {
  max-width: 31ch;
  margin: 2rem 0 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--poetry-gold);
}
.poetry-whisper p {
  margin: 0;
  color: var(--poetry-blue);
  font-family: "Boska", var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-style: italic;
  line-height: 1.35;
}
.poetry-whisper cite {
  display: block;
  margin-top: 0.9rem;
  color: #8a6a2d;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.poetry-quote-section {
  padding: clamp(6rem, 12vw, 11rem) 0;
  color: #f5ecd9;
  background:
    radial-gradient(circle at 20% 20%, rgba(187, 143, 59, 0.14), transparent 30rem),
    var(--poetry-ink);
}
.poetry-quote-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}
.poetry-quote-art {
  position: relative;
  margin: 0;
  padding: 0.7rem;
  border: 1px solid rgba(187, 143, 59, 0.6);
}
.poetry-quote-art::after {
  content: none;
}
.poetry-quote-art img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1.45 / 1;
  object-fit: cover;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.32);
}
.poetry-quote-copy {
  position: relative;
}
.poetry-quote-mark {
  display: block;
  height: 3rem;
  color: var(--poetry-gold);
  font-family: "Boska", var(--font-display);
  font-size: 7rem;
  line-height: 0.8;
}
.poetry-quote-copy blockquote {
  max-width: 15ch;
  margin: 1.2rem 0 2rem;
  font-family: "Boska", var(--font-display);
  font-size: clamp(2.5rem, 4.2vw, 4.8rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.poetry-quote-copy > p {
  margin: 0;
  color: #cbb9a0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.poetry-library {
  padding: clamp(5rem, 9vw, 9rem) 0;
  background: #fff;
}
.poetry-book-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 84rem);
  margin-inline: auto;
  gap: clamp(1rem, 2.6vw, 2.75rem);
  align-items: start;
}
.poetry-book {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.25rem, 2.4vw, 2.25rem) clamp(1rem, 2vw, 1.75rem) clamp(2rem, 3vw, 3rem);
  border: 1px solid #e5dccb;
  background: linear-gradient(180deg, #fff 0%, #fbf8f2 100%);
  box-shadow: 0 18px 48px rgb(27 37 47 / 0.07);
  text-align: center;
}
.poetry-cover-button {
  width: 100%;
  margin: 0 0 1.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.poetry-cover-button img {
  display: block;
  width: 100%;
  height: clamp(27rem, 37vw, 34rem);
  object-fit: contain;
  transition: transform 220ms ease, filter 220ms ease;
}
#equilibrium .poetry-cover-button img,
#balance .poetry-cover-button img,
#symmetry .poetry-cover-button img {
  scale: 1.16;
}
.poetry-cover-button:hover img,
.poetry-cover-button:focus-visible img {
  transform: translateY(-0.55rem);
  filter: drop-shadow(0 1.25rem 1.1rem rgba(24, 29, 33, 0.16));
}
.poetry-cover-button:focus-visible {
  outline: 2px solid var(--poetry-gold);
  outline-offset: 0.35rem;
}
.poetry-book-number {
  min-height: 2.6em;
  margin: 0.7rem 0 0.75rem;
  color: var(--poetry-gold);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.poetry-book h3 {
  margin: 0;
  color: var(--poetry-ink);
  font-family: "Boska", var(--font-display);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}
.poetry-book > p:not(.poetry-book-number) {
  min-height: 3.2em;
  margin: 1rem 0 1.2rem;
  color: #68727b;
}
.poetry-details {
  appearance: none;
  margin: 0;
  padding: 0.55rem 0;
  border: 0;
  border-bottom: 1px solid var(--poetry-rule);
  background: transparent;
  cursor: pointer;
}
.poetry-complete {
  position: absolute;
  z-index: 3;
  top: 0.7rem;
  right: 0.4rem;
  padding: 0.55rem 0.75rem;
  color: #fff;
  background: var(--poetry-blue);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.poetry-sampler {
  padding: clamp(4.5rem, 8vw, 8rem) 0;
  background: var(--poetry-paper);
  border-top: 1px solid var(--poetry-rule);
}
.poetry-sampler-inner {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  width: min(72rem, calc(100% - 2 * var(--space-4)));
  margin-inline: auto;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.poetry-sampler-cover {
  margin: 0;
}
.poetry-sampler-cover img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 1.25rem 2.25rem rgba(23, 37, 53, 0.22);
}
.poetry-sampler-body {
  color: var(--poetry-ink);
}
.poetry-sampler-kicker {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: 0.45rem 0.75rem;
  color: #fff;
  background: var(--poetry-gold);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.poetry-sampler-body h2 {
  margin: 0 0 0.45rem;
  color: var(--poetry-blue);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.08;
  text-wrap: balance;
}
.poetry-sampler-source {
  margin: 0 0 1.5rem;
  color: var(--poetry-gold);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.poetry-sampler-lede {
  margin: 0 0 1.75rem;
  max-width: 40rem;
  line-height: 1.65;
}
button.poetry-sampler-more {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.poetry-sampler-formats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.65rem;
  margin: 0 0 1.6rem;
}
.poetry-format-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--poetry-rule);
  border-radius: 999px;
  background: #fff;
  color: var(--poetry-ink);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}
.poetry-format-chip:hover,
.poetry-format-chip:focus-visible {
  border-color: var(--poetry-gold);
  transform: translateY(-1px);
}
.poetry-format-chip .chip-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  padding-left: 0.1em;
  border-radius: 50%;
  background: var(--poetry-gold);
  color: #fff;
  font-size: 0.5rem;
  line-height: 1;
}
.poetry-sampler-note {
  margin: 0 0 1.5rem;
  color: var(--poetry-gold);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.poetry-sampler-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}
.poetry-coda {
  padding: clamp(6rem, 11vw, 10rem) 0;
  color: var(--poetry-ink);
  background: var(--poetry-paper);
  border-top: 1px solid var(--poetry-rule);
  text-align: center;
}
.poetry-coda-path {
  display: flex;
  max-width: 26rem;
  margin: 0 auto 3rem;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--poetry-gold);
  font-family: "Boska", var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.14em;
}
.poetry-coda-path span {
  width: 4rem;
  height: 1px;
  background: var(--poetry-rule);
}
.poetry-coda-link {
  margin-top: 2.25rem;
}
.poetry-coda-line {
  margin: 0 auto 1.4rem;
  font-family: "Boska", var(--font-display);
  font-size: clamp(3.4rem, 7vw, 7.8rem);
  font-style: italic;
  letter-spacing: -0.05em;
  line-height: 0.92;
}
.poetry-coda p:last-child {
  color: #6a737a;
  letter-spacing: 0.08em;
}
body[data-page="poetry"] dialog.jacket {
  width: min(57rem, calc(100vw - 2rem));
  max-height: min(88vh, 56rem);
  border-color: var(--poetry-rule);
  background: #fff;
}
body[data-page="poetry"] .jacket-inner {
  max-height: min(88vh, 56rem);
  padding: clamp(1.5rem, 4vw, 3.5rem);
}
body[data-page="poetry"] .jacket-cover {
  width: min(13rem, 42%);
  margin: 0 auto 2.2rem;
  aspect-ratio: auto;
  object-fit: contain;
}
body[data-page="poetry"] .jacket-inner h3 {
  max-width: none;
  margin: 0 0 1.5rem;
  color: var(--poetry-ink);
  font-family: "Boska", var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.3rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-align: center;
}
body[data-page="poetry"] .jacket-copy {
  max-width: 43rem;
  margin-inline: auto;
  font-family: var(--font-body);
  line-height: 1.72;
}
body[data-page="poetry"] .jacket-lede {
  color: var(--poetry-blue);
  font-family: "Boska", var(--font-display);
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-style: italic;
  line-height: 1.35;
}
body[data-page="poetry"] .jacket-review {
  border-color: var(--poetry-rule);
}
body[data-page="poetry"] .jacket-review blockquote {
  color: #485763;
}
body[data-page="poetry"] .jacket-buy {
  max-width: 43rem;
  margin-inline: auto;
  border-color: var(--poetry-rule);
}

@media (max-width: 900px) {
  .poetry-hero-copy {
    max-width: 42rem;
  }
  .poetry-opening-grid {
    grid-template-columns: 2rem 1fr;
  }
  .poetry-opening-copy {
    grid-column: 2;
    padding-top: 0;
  }
  .poetry-movement-story,
  .poetry-movement-story-reverse {
    grid-template-columns: minmax(14rem, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
  .poetry-movement-story-reverse .poetry-movement-art,
  .poetry-movement-story-reverse .poetry-movement-copy {
    order: initial;
  }
  .poetry-roman {
    margin-bottom: 1rem;
  }
}
@media (max-width: 680px) {
  .poetry-hero {
    min-height: 44rem;
    align-items: flex-end;
    padding: 8rem 0 4rem;
  }
  .poetry-hero-art {
    object-position: center 14%;
  }
  .poetry-hero-overlay {
    background:
      linear-gradient(180deg, rgba(5, 30, 58, 0.18) 0%, rgba(5, 30, 58, 0.28) 35%, rgba(4, 25, 49, 0.88) 78%, #041a32 100%),
      linear-gradient(90deg, rgba(5, 30, 58, 0.3), rgba(5, 30, 58, 0.04));
  }
  .poetry-hero h1 {
    font-size: clamp(4rem, 20vw, 6.2rem);
  }
  .poetry-opening-grid {
    display: block;
  }
  .poetry-index {
    margin-bottom: 1.5rem;
    writing-mode: initial;
  }
  .poetry-opening-copy {
    margin-top: 2rem;
  }
  .poetry-journey {
    gap: 4.5rem;
  }
  .poetry-movement-story,
  .poetry-movement-story-reverse {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .poetry-movement-story-reverse .poetry-movement-art {
    order: initial;
  }
  .poetry-movement-art {
    width: calc(100% - 1rem);
  }
  .poetry-book-grid {
    grid-template-columns: 1fr;
    gap: 4.5rem;
  }
  .poetry-sampler-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .poetry-sampler-cover {
    width: min(100%, 17rem);
    margin-inline: auto;
  }
  .poetry-book {
    max-width: 26rem;
    margin-inline: auto;
  }
  .poetry-cover-button img {
    height: clamp(29rem, 128vw, 35rem);
  }
  .poetry-book-number,
  .poetry-book > p:not(.poetry-book-number) {
    min-height: 0;
  }
  .poetry-quote-inner {
    grid-template-columns: 1fr;
  }
  .poetry-quote-copy blockquote {
    max-width: 18ch;
    font-size: clamp(2.4rem, 11vw, 4rem);
  }
  body[data-page="poetry"] .jacket-cover {
    width: min(10rem, 48%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .poetry-cover-button img,
  .poetry-text-link::after,
  .poetry-details::after {
    transition: none;
  }
  .poetry-cover-button:hover img,
  .poetry-cover-button:focus-visible img {
    transform: none;
  }
}

/* Equilibrist landing — type as the design */
.display-callig {
  font-weight: 300;
  font-style: italic;
  font-optical-sizing: auto;
  letter-spacing: -0.035em;
  line-height: 1.06;
  max-width: 14ch;
}
.callig-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-optical-sizing: auto;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: var(--space-3) 0 0;
  max-width: 18ch;
  color: var(--color-text);
}
.fleuron {
  font-family: var(--font-display);
  color: var(--color-primary-text);
  font-size: var(--text-lg);
  margin: var(--space-4) 0;
  letter-spacing: 0;
}
.from-book .lede {
  font-size: var(--text-lg);
  line-height: 1.55;
  max-width: 38ch;
}
.from-book .lede::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 3.6em;
  float: left;
  line-height: 0.78;
  padding: 0.08em 0.1em 0 0;
  color: var(--color-primary-text);
}
.from-book p {
  max-width: 38ch;
}
.verse-sec {
  text-align: left;
}
.equilibrist-verse-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.62fr);
  gap: clamp(var(--space-6), 3vw, var(--space-10));
  align-items: center;
}
.equilibrist-verse-copy {
  min-width: 0;
}
.equilibrist-verse-art {
  width: min(100%, 22rem);
  justify-self: start;
}
.verse-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-optical-sizing: auto;
  font-size: clamp(2.1rem, 1.2rem + 3.2vw, 4.2rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: 10ch;
  margin: var(--space-2) 0 var(--space-2);
}
.verse {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
  font-size: clamp(1.35rem, 1.05rem + 1.15vw, 1.9rem);
  line-height: 1.48;
  letter-spacing: -0.015em;
  max-width: 22em;
  margin: var(--space-8) 0;
}
.verse p {
  margin: 0 0 1.35em;
}
.verse p:last-child {
  margin-bottom: 0;
  font-size: 1.08em;
}
.verse-cite {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 42ch;
  margin: var(--space-10) 0 var(--space-2);
  line-height: 1.55;
}
@media (max-width: 759px) {
  .equilibrist-verse-layout {
    grid-template-columns: 1fr;
  }
  .equilibrist-verse-art {
    width: min(100%, 21rem);
    justify-self: center;
  }
}
.pull {
  margin: 0;
  padding: 0;
  border: 0;
}
.pull p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-optical-sizing: auto;
  font-size: clamp(1.65rem, 1.1rem + 1.8vw, 2.55rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
  max-width: 18ch;
  margin: 0;
}
.pull-cite {
  margin: var(--space-5) 0 0;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.pull-whisper {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lg);
  max-width: 28ch;
  margin: var(--space-10) 0 var(--space-2);
  color: var(--color-text-muted);
  line-height: 1.35;
}
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin: var(--space-10) 0 var(--space-12);
}
.guide-col .num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--text-3xl);
  line-height: 0.9;
  color: var(--color-primary-text);
  margin: 0 0 var(--space-3);
}
.guide-col h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lg);
  margin: 0 0 var(--space-3);
  max-width: 12ch;
  line-height: 1.15;
}
.guide-col p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 28ch;
  line-height: 1.5;
}
.years {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-8);
}
.years b {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}
.years span {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.coinage {
  margin: var(--space-10) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
}
.jacket-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: var(--space-3) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  cursor: pointer;
  min-height: 44px;
}
.jacket-link:hover,
.jacket-link:focus-visible {
  color: var(--color-text);
}
.volume-teaser {
  font-style: italic;
  font-size: var(--text-base);
  max-width: 46ch;
  line-height: 1.55;
}
.quote-callig {
  font-weight: 300;
  font-optical-sizing: auto;
  font-size: clamp(1.8rem, 1.1rem + 2vw, 2.8rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
  max-width: 14ch;
}
@media (max-width: 800px) {
  .guide-grid,
  .years {
    grid-template-columns: 1fr 1fr;
  }
  .display-callig {
    max-width: 12ch;
  }
}
@media (max-width: 520px) {
  .guide-grid,
  .years {
    grid-template-columns: 1fr;
  }
  .verse {
    font-size: 1.28rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .from-book .lede::first-letter {
    float: none;
    font-size: inherit;
    color: inherit;
    padding: 0;
  }
}

/* ---------- Satoshi ---------- */
.split-cta {
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 800px) {
  .split-cta {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}
.split-cta > * {
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  border: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
.split-cta .cta-free {
  border-color: var(--color-primary);
  background: var(--color-surface);
}
.split-cta .cta-buy {
  background: var(--color-bg);
}
.split-cta .cta-thumbs {
  display: flex;
  gap: var(--space-3);
}
.split-cta .cta-thumbs img {
  width: 84px;
  height: auto;
  background: #fbf8f1;
  border: 1px solid oklch(0.28 0.02 80 / 0.12);
  object-fit: contain;
  aspect-ratio: 4/5;
}

.feature-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 800px) {
  .feature-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.feature-card {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}
.feature-num {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-primary-text);
  font-weight: 600;
}
.feature-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  margin: 0;
}
.feature-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.satoshi-cover-wrap {
  margin: 0;
  width: min(100%, 34rem);
  max-width: none;
}
.satoshi-cover {
  width: 100%;
  height: clamp(22rem, 44vw, 34rem);
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
  object-fit: contain;
  transition: transform var(--transition-interactive), filter var(--transition-interactive);
}
.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.4rem);
  line-height: 1.3;
  max-width: 34ch;
  margin: 0 auto;
  text-align: center;
}
.pull-quote-by {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
@media (max-width: 640px) {
  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.cover-hit {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: left;
  border-radius: 0;
}
.cover-hit:focus-visible .cover {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
.orloj-shelf {
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  margin-top: var(--space-6);
}
.orloj-shelf .buy-row {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}
.orloj-shelf .buy-option,
.orloj-shelf .buy-direct {
  min-width: 0;
  width: 100%;
}
.orloj-shelf .volume-title {
  min-height: 0;
  font-size: inherit;
}
.orloj-shelf .jacket-link {
  margin-top: 0;
}
.orloj-soon {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.orloj-soon li {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
}
.orloj-soon .city-num {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
@media (max-width: 560px) {
  .orloj-soon li {
    grid-template-columns: 1fr auto;
  }
  .orloj-soon .city-num {
    grid-column: 1 / -1;
  }
}

html[lang="es"] [data-hide-es] {
  display: none !important;
}

body[data-page="orloj"] {
  --orloj-lapis: #1e3a7a;
  --orloj-callig: "Boska", "Fraunces", "Palatino Linotype", serif;
}
body[data-page="orloj"] .orloj-hero img {
  filter: brightness(1.45) contrast(0.9) saturate(1.04);
}
body[data-page="orloj"] .orloj-hero picture {
  position: absolute;
  inset: 0;
}
body[data-page="orloj"] .orloj-hero picture img {
  width: 100%;
  height: 100%;
}
body[data-page="orloj"] .orloj-hero .hero-scrim {
  background: linear-gradient(
    180deg,
    oklch(0.12 0.02 80 / 0.02) 0%,
    oklch(0.12 0.02 80 / 0.1) 52%,
    oklch(0.1 0.02 80 / 0.58) 100%
  );
}
[data-theme="dark"] body[data-page="orloj"] {
  --orloj-lapis: #8aa4d8;
}

body[data-page="orloj"] .orloj-hero h1.display-callig,
body[data-page="orloj"] .story-box .display-callig,
body[data-page="orloj"] #books .display-callig,
body[data-page="orloj"] #coming .display-callig,
body[data-page="orloj"] #novella .display-callig {
  font-family: var(--orloj-callig);
  font-weight: 400;
  font-style: italic;
  color: var(--orloj-lapis);
  max-width: 18ch;
}
body[data-page="orloj"] .orloj-hero h1.display-callig {
  font-size: var(--text-2xl);
  max-width: 10ch;
  color: #f4f0e6;
}
body[data-page="orloj"] .orloj-hero .eyebrow {
  color: #c9a227;
}

@media (min-width: 860px) {
  body[data-page="orloj"] .orloj-hero {
    min-height: 0;
    height: min(40vw, 576px);
    background: #020811;
  }
  body[data-page="orloj"] .orloj-hero picture img {
    object-fit: contain;
    object-position: center;
    filter: none;
  }
  body[data-page="orloj"] .orloj-hero .hero-scrim {
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 68%,
      oklch(0.08 0.02 255 / 0.34) 100%
    );
  }
  body[data-page="orloj"] .orloj-hero .hero-copy {
    width: min(calc(100% - 2 * var(--space-5)), 1440px);
    margin-inline: auto;
    padding: 0 0 var(--space-5);
  }
  body[data-page="orloj"] .orloj-hero .orloj-live-title {
    display: none;
  }
}

.story-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-10);
  align-items: center;
}
.story-split-rev {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.story-split-rev .story-still {
  order: 2;
}
.story-still {
  margin: 0;
}
.story-still img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
}
.story-still-portrait {
  display: grid;
  place-items: center;
}
.story-still-portrait img {
  width: min(100%, 29rem);
  max-height: 36rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 32%;
}
.story-follow {
  margin-top: var(--space-10);
}
.story-stack {
  display: grid;
  gap: var(--space-10);
  max-width: 46rem;
}
.story-intro {
  max-width: 52rem;
}
body[data-page="orloj"] .story-emphasis {
  grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.72fr);
}
body[data-page="orloj"] .story-emphasis.story-split-rev {
  grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.4fr);
}
body[data-page="orloj"] .story-emphasis.story-intro {
  max-width: none;
}
.story-box {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-6);
}
.story-box > summary {
  list-style: none;
  cursor: pointer;
}
.story-box > summary::-webkit-details-marker {
  display: none;
}
.story-lede {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  max-width: 42ch;
  margin: var(--space-4) 0 0;
}
.more-cue {
  display: inline-flex;
  margin-top: var(--space-4);
  font-family: var(--orloj-callig, var(--font-display));
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--orloj-lapis, var(--color-primary));
}
.more-cue::after {
  content: " \2192";
}
.story-box[open] .more-cue::after {
  content: " \2191";
}
.story-more {
  margin-top: var(--space-5);
  max-width: 46ch;
  font-size: var(--text-base);
}
.story-more p {
  margin: 0 0 var(--space-3);
}

.orloj-shelf {
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  overflow: visible;
}
.orloj-shelf .orloj-book {
  grid-template-rows: 22.5rem auto auto;
  align-content: start;
  overflow: hidden;
}
.orloj-shelf .cover-hit {
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 15rem;
  max-width: 100%;
  height: 22.5rem;
  margin-inline: auto;
}
.orloj-shelf .cover-hit .mockup-cover {
  position: static;
  display: block;
  width: 100%;
  height: 22.5rem;
  aspect-ratio: auto;
  object-fit: fill;
}
body[data-page="orloj"] .orloj-shelf .book:hover .cover,
body[data-page="orloj"] .orloj-shelf .book:hover .cover-ph,
body[data-page="orloj"] .orloj-shelf .cover-hit:focus-visible .cover {
  transform: none;
  box-shadow: none;
  filter: drop-shadow(0 14px 18px oklch(0.2 0.02 80 / 0.16));
}

.soon-carousel {
  display: flex;
  gap: var(--space-8);
  overflow-x: auto;
  overflow-y: visible;
  padding: 3rem 2.5rem 2.5rem;
  scroll-padding-inline: 2.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.soon-card {
  flex: 0 0 clamp(10.5rem, 17vw, 12rem);
  scroll-snap-align: start;
  overflow: visible;
  position: relative;
  z-index: 1;
}
.soon-card .cover,
.soon-card .cover-ph {
  transform-origin: center;
}
.soon-card:hover,
.soon-card:focus-within {
  z-index: 4;
}
.soon-card:hover .cover,
.soon-card:hover .cover-ph,
.soon-card:focus-within .cover {
  transform: scale(1.16);
  box-shadow: var(--shadow-lg);
}
.soon-card h3 {
  font-size: var(--text-base);
}
.coming-note {
  margin: 0;
}

.jacket-cover {
  width: min(280px, 70%);
  height: auto;
  display: block;
  margin: 0 auto var(--space-6);
  aspect-ratio: 2 / 3;
  object-fit: cover;
  box-shadow: var(--shadow-md);
}
body[data-page="orloj"] dialog.jacket {
  width: min(54rem, calc(100vw - 2rem));
}
body[data-page="orloj"] .jacket-inner {
  display: block;
  max-width: 42rem;
  margin-inline: auto;
}
body[data-page="orloj"] .jacket-toolbar {
  width: 100%;
}
body[data-page="orloj"] .jacket-cover {
  display: block;
  width: 12rem;
  max-width: 46%;
  height: 18rem;
  margin: var(--space-4) auto var(--space-8);
  position: static;
  object-fit: contain;
}
body[data-page="orloj"] .jacket h3 {
  font-family: var(--orloj-callig);
  font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--orloj-lapis);
  margin-bottom: var(--space-3);
}
body[data-page="orloj"] .jacket h3 + .meta {
  width: 100%;
}
body[data-page="orloj"] .jacket-copy {
  max-width: 39rem;
  margin: var(--space-6) auto 0;
  font-family: var(--orloj-callig);
  font-size: clamp(1.08rem, 1rem + 0.3vw, 1.28rem);
  line-height: 1.68;
  color: var(--color-text);
  text-wrap: pretty;
}
body[data-page="orloj"] .jacket-copy .jacket-lede {
  font-size: clamp(1.35rem, 1.18rem + 0.65vw, 1.72rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--orloj-lapis);
  margin-bottom: var(--space-6);
}
body[data-page="orloj"] .jacket-copy .jacket-lede::first-letter {
  float: left;
  font-size: 3.7em;
  font-weight: 500;
  line-height: 0.78;
  padding: 0.11em 0.1em 0 0;
  color: var(--color-primary-text);
}
body[data-page="orloj"] .jacket-copy .jacket-paragraph {
  margin: 0 0 var(--space-5);
}
body[data-page="orloj"] .jacket-copy .jacket-paragraph + .jacket-paragraph {
  text-indent: 1.25em;
}
body[data-page="orloj"] .jacket-buy {
  position: relative;
  z-index: 1;
  clear: both;
  width: 100%;
}
@media (max-width: 680px) {
  body[data-page="orloj"] .jacket-inner {
    display: block;
    padding: var(--space-6);
  }
  body[data-page="orloj"] .jacket-cover {
    width: min(160px, 48%);
    margin: var(--space-2) auto var(--space-6);
    position: static;
  }
  body[data-page="orloj"] .jacket-copy {
    margin-top: var(--space-6);
  }
}
.jacket-buy {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}

@media (max-width: 800px) {
  .story-split,
  .story-split-rev,
  body[data-page="orloj"] .story-emphasis,
  body[data-page="orloj"] .story-emphasis.story-split-rev {
    grid-template-columns: 1fr;
  }
  .story-split-rev .story-still {
    order: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="orloj"] .orloj-shelf .book:hover .cover,
  body[data-page="orloj"] .orloj-shelf .book:hover .cover-ph,
  .soon-card:hover .cover,
  .soon-card:hover .cover-ph {
    transform: none;
  }
}

#books,
#coming,
#novella,
#what {
  scroll-margin-top: 5.5rem;
}

.cover-ph.cover {
  display: grid;
  place-items: end start;
}
.cover-ph.cover em {
  display: block;
}
.cover-ph.cover strong {
  display: block;
}

.orloj-shelf .volume-title,
.soon-card .volume-title {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: center;
  font: inherit;
  color: inherit;
}

body[data-page="orloj"] .orloj-shelf .orloj-book {
  justify-items: center;
  text-align: center;
}

body[data-page="orloj"] .orloj-shelf .orloj-book > .meta,
body[data-page="orloj"] .orloj-shelf .orloj-book > h3 {
  width: min(100%, 22rem);
  margin-inline: auto;
  text-align: center;
}

body[data-page="orloj"] .soon-card {
  text-align: center;
}

body[data-page="orloj"] .soon-card > .meta,
body[data-page="orloj"] .soon-card > h3 {
  width: 100%;
  text-align: center;
}

.orloj-scroll-cue {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: fit-content;
  margin: var(--space-6) 0 calc(-1 * var(--space-4));
  color: var(--color-primary-hover);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .02em;
}

.orloj-scroll-arrow {
  color: var(--color-primary-text);
  font-size: 1.75rem;
  line-height: 1;
}

body[data-page="orloj"] .orloj-coming-section {
  padding-bottom: clamp(var(--space-6), 3vw, var(--space-10));
}

body[data-page="orloj"] .orloj-novella-section {
  padding-top: clamp(var(--space-5), 2.5vw, var(--space-8));
}

@media (max-width: 700px) {
  .orloj-scroll-cue {
    align-items: flex-start;
    margin-bottom: calc(-1 * var(--space-3));
  }
}

/* Algorithm Saga */
body[data-page='algorithm'] {
  --algorithm-paper: #ffffff;
  --algorithm-cream: #f4f0e6;
  --algorithm-ink: #151513;
  --algorithm-muted: #625f58;
}
.algorithm-hero {
  position: relative;
  min-height: min(78vh, 48rem);
  background: #0a1112;
  overflow: hidden;
}
.algorithm-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.9) brightness(1.1);
}
.algorithm-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(4 10 11 / .04) 42%, rgb(4 10 11 / .48) 100%);
  pointer-events: none;
}
.algorithm-hero-inner {
  position: relative;
  z-index: 1;
  min-height: min(78vh, 48rem);
  display: flex;
  align-items: flex-end;
  padding-block: var(--space-12);
}
.algorithm-hero-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: min(36rem, 100%);
  padding: clamp(var(--space-4), 2vw, var(--space-6));
  border: 1px solid rgb(212 180 90 / .48);
  background: rgb(5 13 14 / .36);
  color: #f8f4ea;
  backdrop-filter: blur(2px);
  box-shadow: 0 12px 32px rgb(0 0 0 / .16);
  text-shadow: 0 1px 10px rgb(0 0 0 / .72);
}
.algorithm-label,
.algorithm-kicker {
  margin: 0 0 var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.algorithm-label,
.algorithm-kicker {
  color: #876b12;
}
.algorithm-hero h1 {
  margin: 0;
  max-width: 9ch;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
}
.algorithm-deck {
  max-width: 42ch;
  margin: var(--space-6) 0 0;
  color: #eee9de;
  font-size: var(--text-base);
  line-height: 1.65;
}
.algorithm-text-link,
.algorithm-details {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-6);
  color: inherit;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .03em;
  text-decoration: none;
}
.algorithm-text-link::after,
.algorithm-details::after {
  content: '→';
  margin-left: var(--space-3);
  transition: transform var(--transition-interactive);
}
.algorithm-text-link:hover::after,
.algorithm-text-link:focus-visible::after,
.algorithm-details:hover::after,
.algorithm-details:focus-visible::after {
  transform: translateX(var(--space-1));
}
.algorithm-premise {
  padding-block: var(--band-pad-lg);
  background: var(--algorithm-cream);
  color: var(--algorithm-ink);
}
.algorithm-premise-grid {
  display: grid;
  gap: var(--space-8);
}
.algorithm-index {
  margin: 0;
  color: #a89048;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: .12em;
}
.algorithm-premise h2,
.algorithm-section-head h2,
.algorithm-prequel h2,
.algorithm-covenant h2 {
  margin: 0;
  color: inherit;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.algorithm-premise-copy {
  color: #4d4941;
  font-size: var(--text-base);
  line-height: 1.72;
}
.algorithm-premise-copy p + p {
  margin-top: var(--space-4);
}
.algorithm-order {
  position: relative;
  padding-block: var(--band-pad);
  background: #111616;
  color: #f4f0e6;
  overflow: hidden;
  isolation: isolate;
}
.algorithm-order::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(7 12 13 / .38) 0%, rgb(7 12 13 / .14) 58%, transparent 82%),
    linear-gradient(180deg, rgb(5 10 11 / .08), rgb(5 10 11 / .42));
  content: "";
  pointer-events: none;
}
.algorithm-order-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.algorithm-order-layout {
  position: relative;
  z-index: 1;
}
.algorithm-order-panel {
  position: relative;
  width: min(62rem, 68%);
  padding: clamp(2rem, 5vw, 5rem);
  border: 1px solid rgb(212 180 90 / .48);
  background: rgb(5 13 14 / .36);
  box-shadow: 0 12px 32px rgb(0 0 0 / .16);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  text-shadow: 0 1px 10px rgb(0 0 0 / .72);
}
.algorithm-section-head {
  max-width: 48rem;
}
.algorithm-order .algorithm-kicker,
.algorithm-covenant .algorithm-kicker {
  color: #d4b45a;
}
.algorithm-reading-path {
  display: grid;
  margin: clamp(var(--space-8), 4vw, var(--space-12)) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgb(244 240 230 / .24);
}
.algorithm-reading-path li {
  display: grid;
  grid-template-columns: 3rem 5rem 1fr;
  align-items: baseline;
  gap: var(--space-4);
  min-height: 7rem;
  padding-block: var(--space-6);
  border-bottom: 1px solid rgb(244 240 230 / .18);
  color: #a7a49d;
}
.algorithm-reading-path li.is-live {
  color: #f4f0e6;
}
.algorithm-step,
.algorithm-reading-path small {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.algorithm-reading-path strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
}
.algorithm-reading-path li > span:nth-of-type(2) {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}
.algorithm-reading-path small {
  grid-column: 3;
  color: #d4b45a;
}
.algorithm-scenes {
  padding-block: var(--band-pad-lg);
  background:
    radial-gradient(circle at 82% 18%, rgb(80 122 125 / .13), transparent 28rem),
    #070d0f;
  color: #f4f0e6;
  overflow: hidden;
}
.algorithm-scenes-intro {
  max-width: 54rem;
  margin-bottom: var(--band-pad);
}
.algorithm-scenes-intro .algorithm-kicker,
.algorithm-scene-copy .algorithm-kicker {
  color: #d4b45a;
}
.algorithm-scenes-intro h2 {
  max-width: 19ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.025em;
}
.algorithm-scenes-intro > p:last-child {
  max-width: 58ch;
  margin-top: var(--space-6);
  color: #b7c3c2;
  font-size: var(--text-base);
  line-height: 1.72;
}
.algorithm-scene-chapter {
  display: grid;
  align-items: center;
  gap: clamp(var(--space-8), 7vw, var(--space-20));
  margin-top: var(--band-pad-lg);
}
.algorithm-scene-frame,
.algorithm-scene-collage figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(212 180 90 / .24);
  background: #0b1416;
  box-shadow: 0 28px 80px rgb(0 0 0 / .42);
}
.algorithm-scene-frame {
  aspect-ratio: 4 / 3;
}
.algorithm-scene-frame img,
.algorithm-scene-collage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.algorithm-scene-collage {
  position: relative;
  min-height: clamp(31rem, 58vw, 44rem);
}
.algorithm-scene-main {
  position: absolute;
  inset: 0 10% 10% 0;
}
.algorithm-scene-inset {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 46%;
  height: 42%;
}
.algorithm-scene-collage-wide {
  min-height: clamp(27rem, 48vw, 38rem);
}
.algorithm-scene-collage-wide .algorithm-scene-main {
  inset: 0 0 17% 0;
}
.algorithm-scene-notebook {
  width: 37%;
  height: 48%;
  right: 5%;
}
.algorithm-scene-copy {
  position: relative;
  max-width: 36rem;
}
.algorithm-scene-number {
  margin: 0 0 var(--space-5);
  color: rgb(212 180 90 / .2);
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 10vw, 8rem);
  line-height: .72;
}
.algorithm-scene-copy h3 {
  max-width: 18ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.12;
}
.algorithm-scene-copy > p:last-child {
  margin-top: var(--space-6);
  color: #b7c3c2;
  line-height: 1.72;
}
.algorithm-library {
  padding-block: var(--band-pad-lg);
  background: var(--algorithm-paper);
  color: var(--algorithm-ink);
}
.algorithm-section-head-centered {
  margin-inline: auto;
  text-align: center;
}
.algorithm-section-head-centered > p:last-child {
  margin: var(--space-5) auto 0;
  color: var(--algorithm-muted);
}
.algorithm-book-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12) var(--space-6);
  margin-top: var(--band-pad);
}
.algorithm-book {
  min-width: 0;
  text-align: center;
}
.algorithm-cover-button {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0;
  background: var(--algorithm-paper);
  overflow: hidden;
}
.algorithm-cover-button img {
  display: block;
  width: 100%;
  height: clamp(20rem, 48vw, 30rem);
  object-fit: contain;
  background: var(--algorithm-paper);
  transition: transform 360ms var(--ease-out);
}
.algorithm-cover-button:hover img,
.algorithm-cover-button:focus-visible img {
  transform: translateY(calc(-1 * var(--space-2)));
}
.algorithm-cover-button:focus-visible {
  outline-color: #876b12;
}
.algorithm-book-status {
  margin: var(--space-4) auto 0;
  color: #876b12;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.algorithm-book h3 {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
}
.algorithm-book > p:not(.algorithm-book-status) {
  margin: var(--space-3) auto 0;
  max-width: 36ch;
  color: var(--algorithm-muted);
  line-height: 1.62;
}
.algorithm-details {
  margin-top: var(--space-3);
  color: var(--algorithm-ink);
}
.algorithm-prequel {
  padding-block: var(--band-pad-lg);
  background: var(--algorithm-cream);
  color: var(--algorithm-ink);
}
.algorithm-prequel-grid {
  display: grid;
  align-items: start;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
}
.algorithm-prequel-cover {
  margin: 0;
}
.algorithm-prequel-cover img {
  display: block;
  width: min(25rem, 100%);
  margin-inline: auto;
  box-shadow: var(--shadow-lg);
}
.algorithm-prequel-copy {
  max-width: 38rem;
}
.algorithm-prequel-subtitle {
  margin: var(--space-2) 0 var(--space-6);
  color: #876b12;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
}
.algorithm-prequel-copy > p:not(.algorithm-kicker, .algorithm-prequel-subtitle) {
  color: #4d4941;
  line-height: 1.72;
}
.algorithm-prequel-copy .btn {
  margin-top: var(--space-6);
}
.series-novella-offer {
  margin-top: var(--space-8);
  padding: clamp(var(--space-5), 3vw, var(--space-8));
  border: 1px solid rgb(135 107 18 / .32);
  background: rgb(255 255 255 / .52);
  box-shadow: 0 18px 44px rgb(49 39 15 / .08);
}
.series-novella-offer > p:not(.algorithm-kicker, .rebel-kicker, .poetry-offer-kicker, .form-note) {
  margin: 0;
  line-height: 1.65;
}
.poetry-offer-kicker {
  margin: 0 0 var(--space-4);
  color: #7d651f;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.poetry-offer-kicker .free-word { margin-right: .08em; }
.series-novella-form {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.series-novella-form label {
  display: grid;
  gap: var(--space-2);
  color: inherit;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.series-novella-form input {
  width: 100%;
  min-height: 46px;
  padding-inline: var(--space-3);
  border: 1px solid rgb(135 107 18 / .45);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / .74);
  color: var(--color-text);
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.series-novella-form .btn {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
}
.algorithm-prequel-concepts {
  width: min(100%, 64rem);
  margin: var(--space-4) auto 0;
}
.algorithm-prequel-concepts img {
  display: block;
  width: 100%;
  box-shadow: var(--shadow-md);
}
.algorithm-prequel-concepts figcaption {
  margin-top: var(--space-3);
  color: #6b665c;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
}
.algorithm-covenant {
  padding-block: var(--band-pad-lg);
  background: #111716;
  color: #f4f0e6;
}
.algorithm-covenant-grid {
  display: grid;
  align-items: center;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
}
.algorithm-covenant figure {
  padding: var(--space-3);
  background: #f4f0e6;
}
.algorithm-covenant figure img {
  width: 100%;
}
.algorithm-covenant-copy {
  max-width: 38rem;
}
.algorithm-covenant-copy > div:not(.algorithm-covenant-links) {
  margin-top: var(--space-6);
  color: #c7c3b9;
  line-height: 1.72;
}
.algorithm-covenant-copy p + p {
  margin-top: var(--space-4);
}

/* The convergence map was retired, so the covenant runs as one column under
   the threshold band. The modifier outranks the two-track desktop rule on
   specificity alone, so it holds at every width without a second media query,
   and the copy centres as a block while its text stays left-aligned. */
.algorithm-covenant-grid.is-solo {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
.algorithm-covenant-grid.is-solo .algorithm-covenant-copy {
  max-width: 44rem;
}
.algorithm-free-novella {
  padding-block: var(--band-pad-lg);
  background: var(--algorithm-cream);
  color: var(--algorithm-ink);
}
.algorithm-free-novella-grid {
  display: grid;
  align-items: center;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
}
.algorithm-free-novella-cover {
  margin: 0;
}
.algorithm-free-novella-cover img {
  display: block;
  width: min(23rem, 100%);
  margin-inline: auto;
  box-shadow: var(--shadow-lg);
}
.algorithm-free-novella-copy {
  max-width: 40rem;
}
/* Mirrors .rebel-novella-subtitle / the Rebel Hackers copy column: kicker,
   title, italic lede, description, one quiet link out, then the offer card.
   Without the middle three this block was a headline sitting on a form. */
.algorithm-free-novella-subtitle {
  margin: var(--space-3) 0 var(--space-4);
  color: #6a6152;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.35;
}
.algorithm-free-novella-lede {
  margin: 0 0 var(--space-5);
  max-width: 46ch;
  color: var(--algorithm-muted, #5d5749);
  line-height: 1.62;
}
.algorithm-free-novella-lede + .series-novella-offer {
  margin-top: var(--space-8);
}

.algorithm-free-novella-copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.algorithm-covenant-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-8);
}
.algorithm-covenant-links .algorithm-text-link {
  margin-top: 0;
  color: #f4f0e6;
}
dialog.algorithm-jacket {
  color: var(--color-text);
  max-height: min(88dvh, 46rem);
}
.algorithm-jacket .jacket-inner {
  max-height: min(88dvh, 46rem);
  overscroll-behavior: contain;
}
.algorithm-jacket .jacket-cover {
  background: #111;
}
.algorithm-jacket .jacket-buy {
  margin-top: var(--space-8);
}
@media (max-width: 759px) {
  .algorithm-order-panel {
    width: 100%;
    background: rgb(5 13 14 / .52);
  }
  .algorithm-order-backdrop {
    object-position: 62% center;
  }
}
@media (min-width: 760px) {
  .algorithm-premise-grid {
    grid-template-columns: .35fr 1.4fr 1fr;
    align-items: start;
  }
  .algorithm-reading-path li {
    grid-template-columns: 4rem 7rem 1fr auto;
  }
  .algorithm-reading-path small {
    grid-column: auto;
  }
  .algorithm-scene-chapter {
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
  }
  .algorithm-scene-siege .algorithm-scene-collage,
  .algorithm-scene-consent .algorithm-scene-collage {
    order: 2;
  }
  .algorithm-scene-siege .algorithm-scene-copy,
  .algorithm-scene-consent .algorithm-scene-copy {
    order: 1;
  }
  .algorithm-scene-trespass {
    grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.28fr);
  }
  .algorithm-prequel-grid {
    /* the jacket that used to fill the first column now appears once, in the
       free-novella block below, so this section is copy only */
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
  }
  .algorithm-prequel-concepts {
    grid-column: 1 / -1;
  }
  .algorithm-prequel-copy .series-novella-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
  }
  .algorithm-prequel-copy .series-novella-form .btn,
  .algorithm-prequel-copy .series-novella-form .form-note {
    grid-column: 1 / -1;
  }
  .algorithm-covenant-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
  }
  .algorithm-free-novella-grid {
    /* Same ratio the Rebel Hackers novella uses, so the two landing pages show
       the jacket at the same size (400px at desktop) instead of this one
       rendering 23px narrower for no reason. */
    grid-template-columns: minmax(16rem, .82fr) minmax(22rem, 1.18fr);
  }
}
@media (min-width: 1080px) {
  .algorithm-book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 62rem);
    margin-inline: auto;
    gap: clamp(var(--space-10), 5vw, var(--space-16));
  }
  .algorithm-cover-button img {
    height: 38rem;
  }
}
@media (max-width: 759px) {
  .algorithm-hero,
  .algorithm-hero-inner {
    min-height: 42rem;
  }
  .algorithm-hero-image {
    object-position: 61% center;
  }
  .algorithm-hero-inner {
    padding-block: var(--space-4);
  }
  .algorithm-hero-card {
    max-width: calc(100% - var(--space-2));
    padding: var(--space-5);
    background: rgb(5 13 14 / .4);
  }
  .algorithm-book-grid {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }
  .algorithm-cover-button img {
    height: 20rem;
  }
  .algorithm-prequel-concepts {
    margin-top: var(--space-4);
  }
  .algorithm-scene-collage {
    min-height: 30rem;
  }
  .algorithm-scene-collage-wide {
    min-height: 26rem;
  }
  .algorithm-scene-main {
    inset: 0 7% 9% 0;
  }
  .algorithm-scene-collage-wide .algorithm-scene-main {
    inset: 0 0 15% 0;
  }
  .algorithm-scene-inset {
    width: 50%;
    height: 38%;
  }
  .algorithm-scene-notebook {
    width: 44%;
    height: 42%;
    right: 4%;
  }
}

/* Rebel Hackers */
body[data-page='rebel-hackers'] {
  --rebel-paper: #ffffff;
  --rebel-cream: #f3f0e8;
  --rebel-ink: #121616;
  --rebel-muted: #5d6462;
  --rebel-ice: #b8d5d6;
  --rebel-gold: #a88427;
}
.rebel-hero {
  position: relative;
  min-height: min(80vh, 50rem);
  overflow: hidden;
  background: #101819;
}
.rebel-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.82) brightness(1.3) contrast(.92);
}
.rebel-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(6 14 15 / .1), transparent 58%);
  pointer-events: none;
}
.rebel-hero-inner {
  position: relative;
  z-index: 1;
  min-height: min(80vh, 50rem);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-block: var(--space-12);
}
.rebel-hero-card {
  width: fit-content;
  max-width: min(36rem, 100%);
  padding: clamp(var(--space-4), 2vw, var(--space-6));
  border: 1px solid rgb(212 180 90 / .48);
  background: rgb(5 13 14 / .34);
  color: #f8f4ea;
  backdrop-filter: blur(2px);
  box-shadow: 0 12px 32px rgb(0 0 0 / .16);
  text-shadow: 0 1px 10px rgb(0 0 0 / .72);
}
.rebel-label,
.rebel-kicker {
  margin: 0 0 var(--space-4);
  color: #7d651f;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.rebel-hero h1 {
  margin: 0;
  max-width: 9ch;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.04em;
}
.rebel-deck {
  max-width: 42ch;
  margin: var(--space-6) 0 0;
  color: #f1ede4;
  font-size: var(--text-base);
  line-height: 1.65;
}
.rebel-text-link,
.rebel-details {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-5);
  color: inherit;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .03em;
  text-decoration: none;
}
.rebel-text-link::after,
.rebel-details::after {
  content: '→';
  margin-left: var(--space-3);
  transition: transform var(--transition-interactive);
}
.rebel-text-link:hover::after,
.rebel-text-link:focus-visible::after,
.rebel-details:hover::after,
.rebel-details:focus-visible::after {
  transform: translateX(var(--space-1));
}
.rebel-premise {
  padding-block: var(--band-pad-lg);
  background: var(--rebel-cream);
  color: var(--rebel-ink);
}
.rebel-premise-grid {
  display: grid;
  gap: var(--space-8);
}
.rebel-index {
  margin: 0;
  color: #98b6b7;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: .12em;
}
.rebel-premise h2,
.rebel-section-head h2,
.rebel-novella h2,
.rebel-convergence h2 {
  margin: 0;
  color: inherit;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.rebel-premise-copy {
  color: #48504e;
  font-size: var(--text-base);
  line-height: 1.72;
}
.rebel-premise-copy p + p {
  margin-top: var(--space-4);
}
.rebel-order {
  position: relative;
  padding-block: var(--band-pad);
  background: #090b0b;
  color: #f5f2ea;
  overflow: hidden;
  isolation: isolate;
}
.rebel-order::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(5 7 7 / .5) 0%, rgb(5 7 7 / .18) 56%, transparent 82%),
    linear-gradient(180deg, rgb(4 5 5 / .08), rgb(4 5 5 / .44));
  content: "";
  pointer-events: none;
}
.rebel-order-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.rebel-order-layout {
  position: relative;
  z-index: 1;
}
.rebel-order-panel {
  width: min(64rem, 72%);
  padding: clamp(2rem, 5vw, 5rem);
  border: 1px solid rgb(213 183 89 / .5);
  background: rgb(7 12 12 / .34);
  box-shadow: 0 12px 34px rgb(0 0 0 / .2);
  text-shadow: 0 1px 10px rgb(0 0 0 / .78);
}
.rebel-order .rebel-kicker,
.rebel-convergence .rebel-kicker {
  color: #d5b759;
}
.rebel-section-head {
  max-width: 52rem;
}
.rebel-reading-path {
  display: grid;
  margin: var(--space-12) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgb(245 242 234 / .23);
}
.rebel-reading-path li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: baseline;
  gap: var(--space-3) var(--space-5);
  min-height: 7rem;
  padding-block: var(--space-6);
  border-bottom: 1px solid rgb(245 242 234 / .16);
  color: #aeb7b5;
}
.rebel-reading-path li.is-live {
  color: #f5f2ea;
}
.rebel-step,
.rebel-reading-path small {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rebel-reading-path strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
}
.rebel-reading-path li > span:nth-of-type(2),
.rebel-reading-path small {
  grid-column: 2;
}
.rebel-reading-path small {
  color: #d5b759;
}
@media (max-width: 759px) {
  .rebel-order-panel {
    width: 100%;
    background: rgb(7 12 12 / .52);
  }
  .rebel-order-backdrop {
    object-position: 62% center;
  }
}
.rebel-scenes {
  padding-block: var(--band-pad-lg);
  background: #081113;
  color: #f5f2ea;
  overflow: hidden;
}
.rebel-scenes-intro {
  max-width: 52rem;
  margin-bottom: var(--band-pad);
}
.rebel-scenes-intro .rebel-kicker,
.rebel-scene-copy .rebel-kicker {
  color: #d5b759;
}
.rebel-scenes-intro h2 {
  max-width: 18ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.025em;
}
.rebel-scenes-intro > p:last-child {
  max-width: 54ch;
  margin-top: var(--space-6);
  color: #bdc9c8;
  font-size: var(--text-base);
  line-height: 1.7;
}
.rebel-scene-chapter {
  display: grid;
  align-items: center;
  gap: clamp(var(--space-8), 7vw, var(--space-20));
  margin-top: var(--band-pad-lg);
}
.rebel-scene-collage {
  position: relative;
  min-height: clamp(30rem, 62vw, 46rem);
}
.rebel-scene-collage figure,
.rebel-scene-portrait {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(184 213 214 / .22);
  background: #0d1719;
  box-shadow: 0 24px 70px rgb(0 0 0 / .36);
}
.rebel-scene-collage img,
.rebel-scene-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rebel-scene-wide {
  position: absolute;
  inset: 0 10% 12% 0;
}
.rebel-scene-tall {
  position: absolute;
  z-index: 1;
  width: 38%;
  height: 72%;
  right: 0;
  bottom: 0;
}
.rebel-scene-glacial .rebel-scene-tall {
  width: 64%;
  height: 100%;
  right: auto;
  left: 0;
}
.rebel-scene-glacial .rebel-scene-inset {
  inset: auto 0 7% auto;
  z-index: 2;
  width: 52%;
  height: 35%;
}

/* Genesis runs three plates: the empty cottage (wide), the book artwork
   (tall), and the crew at the workstation (inset). The inset sits bottom-left,
   clear of the tall plate's 62% left edge, so the three never overlap. */
.rebel-scene-genesis .rebel-scene-inset {
  position: absolute;
  inset: auto auto 0 0;
  z-index: 2;
  width: 46%;
  height: 30%;
}
.rebel-scene-portrait {
  max-height: 50rem;
  aspect-ratio: 2 / 3;
}
.rebel-scene-copy {
  position: relative;
  max-width: 36rem;
}
.rebel-scene-number {
  margin: 0 0 var(--space-5);
  color: rgb(184 213 214 / .22);
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 10vw, 8rem);
  line-height: .72;
}
.rebel-scene-copy h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.12;
}
.rebel-scene-copy > p:last-child {
  margin-top: var(--space-6);
  color: #bdc9c8;
  line-height: 1.72;
}
.rebel-library {
  padding-block: var(--band-pad-lg);
  background: var(--rebel-paper);
  color: var(--rebel-ink);
}
.rebel-section-head-centered {
  margin-inline: auto;
  text-align: center;
}
.rebel-section-head-centered .rebel-kicker,
.rebel-section-head-centered h2 {
  position: relative;
  z-index: 3;
}
.rebel-section-head-centered blockquote {
  margin: var(--space-6) auto 0;
  color: #273a3b;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.3;
}
.rebel-section-head-centered > p:last-child {
  margin: var(--space-5) auto 0;
  color: var(--rebel-muted);
}
.rebel-book-grid {
  display: grid;
  gap: var(--space-16) var(--space-7);
  margin-top: var(--band-pad);
}
.rebel-book {
  min-width: 0;
  text-align: center;
}
.rebel-cover-button,
.rebel-novella-cover {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0;
  background: var(--rebel-paper);
  overflow: hidden;
}
.rebel-cover-button img {
  display: block;
  width: 100%;
  height: clamp(20rem, 70vw, 28rem);
  object-fit: contain;
  background: var(--rebel-paper);
  transition: transform 360ms var(--ease-out);
}

/* .rebel-book is a grid with a 20px row-gap, and the status line was adding
   another 16px margin on top of that -- 36px between the jacket and its
   caption, which read as the title floating away from the book. The row-gap
   alone is the separation. Applies to both language pages. */
body[data-page="rebel-hackers"] .rebel-book {
  /* The card's 20px row-gap set the distance from the jacket to its caption.
     Tighten the gap itself and give the rows below their own margins back, so
     the caption sits under the book instead of floating away from it. */
  row-gap: var(--space-2);
}
body[data-page="rebel-hackers"] .rebel-book-status {
  margin-top: 0;
}
body[data-page="rebel-hackers"] .rebel-book h3 {
  margin-top: var(--space-3);
}
body[data-page="rebel-hackers"] .rebel-book > p:not(.rebel-book-status) {
  margin-top: var(--space-4);
}

/* Deliberately NO drop-shadow on the Rebel Hackers mockups, same as the
   Algorithm set. The pale mass beside each cover is the book's own page block
   in the supplied render — measured 40-80px wide at brightness ~228 against
   this white (255) section, with a soft outer edge. A shadow traces that mass
   and makes it read as a glow instead of as paper. Cutting it away flattens
   the book into a coverless rectangle; only new renders fix the softness. */

/* Deliberately NO drop-shadow on the Algorithm mockups either. Their renders
   carry a white base that differs book to book: a soft reflection cloud on the
   English set, a solid page-block slab on the Spanish one. On a white section
   those bases are invisible; a shadow traces them and makes the inconsistency
   plain. Cutting them out is not an option — on the Spanish mockups that pale
   mass is the book's own page block, not a reflection. */

/* Optical normalization: the three mockups use different perspective widths,
   so equal source canvases do not appear equally tall to the eye. */
#rebel-point-breeze .rebel-cover-button img {
  scale: 0.985;
}
#rebel-glacial-dawn .rebel-cover-button img {
  scale: 1.025;
}
#rebel-threshold .rebel-cover-button img {
  scale: 1;
}
.rebel-cover-button:hover img,
.rebel-cover-button:focus-visible img,
.rebel-novella-cover:hover img,
.rebel-novella-cover:focus-visible img {
  transform: translateY(calc(-1 * var(--space-2)));
}
.rebel-cover-button:focus-visible,
.rebel-novella-cover:focus-visible {
  outline-color: #7d651f;
}
.rebel-book-status {
  margin: var(--space-4) auto 0;
  color: #7d651f;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rebel-book h3 {
  margin: var(--space-2) auto 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.14;
}
.rebel-book > p:not(.rebel-book-status) {
  margin: var(--space-3) auto 0;
  max-width: 38ch;
  color: var(--rebel-muted);
  line-height: 1.62;
}
.rebel-details {
  margin-top: var(--space-3);
  color: var(--rebel-ink);
}
.rebel-novella {
  padding-block: var(--band-pad-lg);
  background: var(--rebel-cream);
  color: var(--rebel-ink);
}
.rebel-novella-grid {
  display: grid;
  align-items: center;
  gap: var(--space-8);
}
.rebel-novella-cover {
  background: transparent;
}
.rebel-novella-cover img {
  width: min(25rem, 100%);
  /* the height="1536" attribute is a presentational hint and wins over
     `auto`, stretching the jacket to two and a half times its height */
  height: auto;
  margin-inline: auto;
  transition: transform 360ms var(--ease-out);
}
.rebel-novella-copy {
  max-width: 36rem;
}
.rebel-novella-subtitle {
  margin: var(--space-3) 0 var(--space-6);
  color: #566563;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.35;
}
.rebel-novella-copy > div {
  color: #48504e;
  line-height: 1.72;
}
.rebel-note {
  color: #7d651f;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}
.rebel-convergence {
  padding-block: var(--band-pad-lg);
  background: #11191a;
  color: #f5f2ea;
}
.rebel-convergence-grid {
  display: grid;
  align-items: center;
  gap: clamp(var(--space-10), 8vw, var(--space-24));
}

/* The Silent Tenant threshold plate. It opens the convergence section, whose
   copy describes the two sagas meeting at one shared threshold -- the image
   carries a teal wall on one side and a gold wall on the other, which is why
   it needs no frame or tint: its own ground is already the section's #11191a. */
.rebel-threshold-band,
.algorithm-threshold-band {
  margin: 0 auto clamp(var(--space-10), 7vw, var(--space-20));
}
.rebel-threshold-band img,
.algorithm-threshold-band img {
  display: block;
  width: 100%;
  height: auto;
}
.rebel-manifesto {
  padding: clamp(var(--space-8), 7vw, var(--space-16));
  border: 1px solid rgb(184 213 214 / .38);
  background: linear-gradient(150deg, rgb(184 213 214 / .12), transparent);
}
.rebel-manifesto blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-style: italic;
  line-height: 1.08;
}
.rebel-manifesto > p:last-child,
.rebel-convergence-copy > div:not(.rebel-convergence-links) {
  margin-top: var(--space-6);
  color: #c6cecc;
  line-height: 1.72;
}
.rebel-convergence-copy {
  max-width: 39rem;
}
.rebel-convergence-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-8);
}
.rebel-convergence-links .rebel-text-link {
  margin-top: 0;
  color: #f5f2ea;
}
dialog.rebel-jacket {
  width: min(58rem, calc(100vw - 2rem));
  max-height: min(88dvh, 48rem);
  color: var(--color-text);
  overflow: auto;
}
.rebel-jacket .jacket-inner {
  max-height: none;
  overflow: visible;
  overscroll-behavior: contain;
}
.rebel-jacket .jacket-cover {
  background: #fff;
}
.rebel-jacket .jacket-buy {
  margin-top: var(--space-8);
}
@media (min-width: 760px) {
  .rebel-premise-grid {
    grid-template-columns: .35fr 1.4fr 1fr;
    align-items: start;
  }
  .rebel-reading-path li {
    grid-template-columns: 4rem minmax(15rem, 1.2fr) 1fr auto;
  }
  .rebel-reading-path li > span:nth-of-type(2),
  .rebel-reading-path small {
    grid-column: auto;
  }
  .rebel-book-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rebel-scene-chapter {
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
  }
  .rebel-scene-glacial .rebel-scene-collage {
    order: 2;
  }
  .rebel-scene-glacial .rebel-scene-copy {
    order: 1;
  }
  .rebel-scene-threshold {
    grid-template-columns: minmax(18rem, .7fr) minmax(0, 1.3fr);
  }
  .rebel-scene-threshold .rebel-scene-portrait {
    max-width: 32rem;
  }
  .rebel-cover-button img {
    height: clamp(21rem, 34vw, 28rem);
  }
  /* 18rem + 28rem is a 46rem (736px) floor, and with the gap on top the two
     columns could not fit a 760-820px viewport: the grid pushed the document
     ~45px wider than the screen and the whole page grew a horizontal
     scrollbar. The proportions are unchanged; only the floors come down, so
     the columns can compress into a narrow tablet instead of overflowing it. */
  .rebel-novella-grid {
    grid-template-columns: minmax(14rem, .82fr) minmax(20rem, 1.18fr);
    gap: clamp(var(--space-10), 7vw, var(--space-24));
  }
  .rebel-convergence-grid {
    grid-template-columns: minmax(0, .9fr) minmax(20rem, 1.1fr);
  }
  .rebel-jacket .jacket-inner {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    align-items: start;
    gap: 0 var(--space-8);
  }
  .rebel-jacket .jacket-toolbar {
    grid-column: 1 / -1;
  }
  .rebel-jacket .jacket-cover {
    grid-column: 1;
    grid-row: 2 / span 4;
    width: 13rem;
    max-width: 100%;
    height: 20rem;
    margin: var(--space-4) auto 0;
    object-fit: contain;
  }
  .rebel-jacket .jacket-inner h3,
  .rebel-jacket .jacket-copy,
  .rebel-jacket .jacket-buy {
    grid-column: 2;
  }
  .rebel-jacket .jacket-inner h3 {
    margin-top: var(--space-4);
  }
  .rebel-jacket .jacket-copy {
    font-size: .98rem;
    line-height: 1.58;
  }
  .rebel-jacket .jacket-buy {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
  }
}
@media (max-width: 759px) {
  .rebel-hero,
  .rebel-hero-inner {
    min-height: 43rem;
  }
  .rebel-hero-image {
    object-position: 38% center;
  }
  .rebel-hero-inner {
    padding-block: var(--space-4);
  }
  .rebel-hero-card {
    max-width: calc(100% - var(--space-2));
    padding: var(--space-5);
    background: rgb(5 13 14 / .38);
  }
  .rebel-book-grid {
    grid-template-columns: 1fr;
  }
  .rebel-scene-collage {
    min-height: 31rem;
  }
  .rebel-scene-wide {
    inset: 0 8% 14% 0;
  }
  .rebel-scene-tall {
    width: 42%;
    height: 62%;
  }
  .rebel-scene-glacial .rebel-scene-tall {
    width: 68%;
  }
  .rebel-scene-glacial .rebel-scene-inset {
    width: 58%;
    height: 31%;
  }
  .rebel-scene-genesis .rebel-scene-inset {
    width: 52%;
    height: 27%;
  }
  .rebel-scene-portrait {
    max-height: 38rem;
  }
  .rebel-novella-scene {
    margin-top: var(--space-4);
  }
}
/* South Beach Conversational Method */
body[data-page="south-beach"] {
  --south-ink: #153333;
  --south-sea: #0f6564;
  --south-deep: #0c4446;
  --south-coral: #d94b3d;
  --south-sand: #f4ecda;
  --south-sun: #f2c45d;
  background: var(--south-sand);
  color: var(--south-ink);
}

body[data-page="south-beach"] main {
  overflow: hidden;
}

.south-hero {
  min-height: 44rem;
  position: relative;
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  color: #fffdf5;
  background:
    radial-gradient(circle at 82% 20%, rgba(242,196,93,.5) 0 7%, transparent 7.3%),
    radial-gradient(circle at 73% 31%, rgba(255,255,255,.12), transparent 22%),
    linear-gradient(145deg, #083638 0%, #0f6564 55%, #42a3a0 100%);
}

.south-hero::before,
.south-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
}

.south-hero::before {
  width: 48rem;
  height: 48rem;
  right: -12rem;
  top: -18rem;
}

.south-hero::after {
  width: 38rem;
  height: 38rem;
  right: -7rem;
  bottom: -25rem;
}

.south-hero-grid {
  min-height: 44rem;
  display: grid;
  grid-template-columns: minmax(20rem,.86fr) minmax(35rem,1.35fr);
  align-items: center;
  gap: clamp(2rem,5vw,6rem);
  padding-top: 7rem;
  padding-bottom: 5rem;
}

.south-hero-copy {
  position: relative;
  z-index: 3;
}

.south-kicker {
  margin: 0 0 1rem;
  font-family: "DM Sans", sans-serif;
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1.4;
}

.south-hero h1 {
  max-width: 10ch;
  margin: 0;
  color: #fffdf5;
  font-family: "Fraunces", serif;
  font-size: clamp(4.2rem,7vw,7.6rem);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .86;
  text-wrap: balance;
}

.south-hero-lead {
  max-width: 34rem;
  margin: 1.8rem 0 0;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(1rem,1.35vw,1.2rem);
  line-height: 1.65;
  color: rgba(255,253,245,.86);
}

.south-cta {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  margin-top: 2rem;
  padding: .8rem 1.2rem;
  border: 1px solid rgba(255,255,255,.65);
  color: inherit;
  font-family: "DM Sans", sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}

.south-cta:hover,
.south-cta:focus-visible {
  background: #fffdf5;
  color: var(--south-deep);
}

.south-hero-books {
  height: 35rem;
  position: relative;
  z-index: 2;
}

.south-fan {
  width: clamp(10rem,15vw,14rem);
  height: clamp(14rem,21vw,19.5rem);
  position: absolute;
  left: 58%;
  top: 72%;
  object-fit: contain;
  filter: drop-shadow(0 1.2rem 1.3rem rgba(0,0,0,.26));
  transform-origin: 50% 90%;
}

.south-fan-1 { transform: translate(-148%,-24%) rotate(-16deg); }
.south-fan-2 { transform: translate(-103%,-31%) rotate(-8deg); }
.south-fan-3 { transform: translate(-50%,-36%) rotate(0deg); z-index: 2; }
.south-fan-4 { transform: translate(3%,-31%) rotate(8deg); }
.south-fan-5 { transform: translate(48%,-24%) rotate(16deg); }

.south-scroll-note {
  position: absolute;
  left: clamp(1rem,4vw,4rem);
  bottom: 1rem;
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "DM Sans", sans-serif;
  font-size: .62rem;
  letter-spacing: .18em;
  color: rgba(255,255,255,.58);
}

.south-manifesto {
  padding: clamp(5rem,10vw,9rem) 0;
  background: #fffaf0;
}

.south-manifesto-grid,
.south-library-intro {
  display: grid;
  grid-template-columns: 5rem minmax(18rem,1fr) minmax(18rem,.82fr);
  gap: clamp(1.5rem,4vw,4rem);
  align-items: start;
}

.south-index {
  margin: .35rem 0 0;
  font-family: "DM Sans", sans-serif;
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--south-coral);
}

.south-manifesto h2,
.south-section-head h2,
.south-library-intro h2 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: clamp(2.8rem,5vw,5.2rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .98;
  text-wrap: balance;
}

.south-manifesto-grid > p:last-child {
  margin: 2.2rem 0 0;
  font-family: "DM Sans", sans-serif;
  font-size: 1.03rem;
  line-height: 1.75;
}

.south-rhythm {
  padding: clamp(5rem,9vw,8rem) 0;
  background: var(--south-sun);
}

.south-section-head {
  max-width: 55rem;
}

.south-steps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  margin-top: clamp(3rem,6vw,5rem);
  border-top: 1px solid rgba(21,51,51,.36);
}

.south-steps article {
  min-height: 18rem;
  padding: 1.5rem clamp(1rem,1.5vw,1.25rem) 2rem;
  border-right: 1px solid rgba(21,51,51,.3);
}

.south-steps article + article {
  padding-left: clamp(1rem,1.5vw,1.25rem);
}

.south-steps article:last-child {
  border-right: 0;
}

.south-steps span,
.south-track-number {
  font-family: "DM Sans", sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
}

.south-steps h3 {
  margin: 3.2rem 0 .7rem;
  font-family: "Fraunces", serif;
  font-size: clamp(2.1rem,3vw,3.2rem);
  font-weight: 500;
}

.south-steps p {
  max-width: 28ch;
  margin: 0;
  font-family: "DM Sans", sans-serif;
  line-height: 1.65;
}

.south-library {
  padding: clamp(5rem,10vw,9rem) 0;
  background: var(--south-sand);
}

.south-library-intro {
  grid-template-columns: 5rem 1fr;
  max-width: 70rem;
  margin-bottom: 5rem;
}

.south-track + .south-track {
  margin-top: clamp(6rem,10vw,10rem);
}

.south-track > header {
  display: grid;
  grid-template-columns: 4rem 1fr;
  align-items: start;
  gap: 1.4rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(21,51,51,.3);
}

.south-track-number {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--south-coral);
  color: #fff;
}

.south-track h3 {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: clamp(2.2rem,4vw,4rem);
  font-weight: 500;
  letter-spacing: -.04em;
}

.south-track header p:last-child {
  max-width: 45rem;
  margin: .35rem 0 0;
  font-family: "DM Sans", sans-serif;
  line-height: 1.55;
}

.south-edition-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: clamp(1rem,2.2vw,2rem);
  margin-top: 3rem;
}

.south-edition {
  min-width: 0;
}

.south-cover-button {
  width: 100%;
  height: clamp(17rem,24vw,23rem);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.south-cover-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 .9rem .7rem rgba(21,51,51,.14));
  transition: transform .28s ease, filter .28s ease;
}

.south-cover-button:hover img,
.south-cover-button:focus-visible img {
  transform: translateY(-.5rem);
  filter: drop-shadow(0 1.2rem .9rem rgba(21,51,51,.23));
}

.south-destination {
  margin: 1.25rem 0 .4rem;
  color: var(--south-coral);
  font-family: "DM Sans", sans-serif;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .18em;
}

.south-edition h4 {
  min-height: 3.2rem;
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.15;
}

.south-edition .jacket-link {
  font-family: "DM Sans", sans-serif;
  font-size: .72rem;
}

.south-track-es {
  padding-top: clamp(4rem,7vw,7rem);
  border-top: 1px solid rgba(21,51,51,.18);
}

.south-coda {
  padding: clamp(6rem,12vw,11rem) 0;
  text-align: center;
  color: #fffdf5;
  background: var(--south-deep);
}

.south-coda blockquote {
  max-width: 18ch;
  margin: 1.4rem auto 0;
  font-family: "Fraunces", serif;
  font-size: clamp(3rem,6vw,6.5rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: .98;
}

.south-cta-light {
  margin-top: 3rem;
}

dialog.south-jacket {
  width: min(57rem,calc(100vw - 2rem));
  max-height: min(88dvh,50rem);
  color: var(--south-ink);
  background: #fffaf0;
  border-color: rgba(21,51,51,.25);
}

.south-jacket .jacket-inner {
  display: grid;
  grid-template-columns: minmax(12rem,.68fr) minmax(18rem,1.32fr);
  column-gap: clamp(2rem,5vw,4rem);
  max-height: min(88dvh,50rem);
  padding: clamp(1.5rem,4vw,3rem);
}

/* Book-mockup production standard:
   1500 × 1500 transparent source canvas, 1200 px visible-book height.
   The square display box keeps every title optically consistent while
   preserving each cover's proportions. */
img[src*="/mockups/"] {
  display: block;
  width: min(100%, 22rem);
  height: auto;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  object-fit: contain;
}

.orloj-shelf .cover-hit {
  width: min(100%, 22rem);
  height: auto;
  aspect-ratio: 1 / 1;
}

.orloj-shelf .cover-hit .mockup-cover,
.liaisons-cover-button img[src*="/mockups/"] {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  mix-blend-mode: normal;
}

/* Cross-page book-card consistency pass */
.book-card-buy {
  width: min(100%, 14rem);
  justify-content: center;
  margin: var(--space-5) auto 0;
}

.jacket-link.book-card-buy {
  min-height: 44px;
  padding: .75rem 1.25rem;
  border: 0;
  background: var(--color-primary);
  color: #1a1610;
  text-decoration: none;
}

.jacket-link.book-card-buy:hover,
.jacket-link.book-card-buy:focus-visible {
  background: var(--color-primary-hover);
  color: #1a1610;
}

.orloj-shelf .orloj-book {
  grid-template-rows: 22.5rem auto auto auto;
}

.orloj-card-buy {
  align-self: end;
}

@media (min-width: 1080px) {
  .algorithm-cover-button img {
    height: 38rem;
  }
}

/* Single column is the NARROW layout only. Unscoped, this rule sat after the
   two-column media query and — media queries carrying no extra specificity —
   flattened the block at every width: jacket stranded above a full-bleed form,
   nothing like the other landing pages. */
@media (max-width: 859px) {
  .algorithm-free-novella-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .algorithm-free-novella-copy {
    width: min(100%, 52rem);
    max-width: 52rem;
  }
}

/* The supplied mockup includes a white canvas; multiply integrates it into
   the surrounding sand surface without altering the cover itself. */
.liaisons-cover-button img {
  max-width: 560px;
  height: 540px;
  mix-blend-mode: multiply;
}

.liaisons-edition {
  border-color: transparent;
  background: transparent;
}

/* Dangerous Liaisons editions: the mockups are square renders that fill their
   own canvas, so the plate is sized to the frame and pinned to its top edge.
   (The earlier -135px lift existed for a mockup with 20% empty canvas above
   the book; with these renders it cropped the top of the jacket.) The plate
   is 700px so the jacket reads at the same scale as the mockups on the
   Orloj, Algorithm and Rebel Hackers pages; it is wider than the 680px
   column on purpose -- only background is trimmed at the sides. */
.liaisons-editions .liaisons-section-head {
  margin-bottom: var(--space-3);
}

.liaisons-editions .liaisons-cover-button {
  position: relative;
  height: 700px;
  min-height: 0;
  overflow: hidden;
}

.liaisons-editions .liaisons-cover-button img[src*="/mockups/"] {
  position: absolute;
  top: 0;
  left: 50%;
  width: 700px;
  max-width: none;
  height: 700px;
  transform: translateX(-50%);
}

.liaisons-editions .liaisons-cover-button:hover img,
.liaisons-editions .liaisons-cover-button:focus-visible img {
  transform: translate(-50%, -5px);
}

.south-hero-art,
.south-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.south-hero-art {
  z-index: -3;
  object-fit: cover;
  object-position: center;
}

.south-hero-shade {
  z-index: -2;
  background: linear-gradient(90deg, rgba(4,35,38,.94) 0%, rgba(4,35,38,.76) 39%, rgba(4,35,38,.2) 72%, rgba(4,35,38,.06) 100%);
}

.south-steps article > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 1.35rem;
  object-fit: cover;
  box-shadow: 0 1rem 2.4rem rgba(21,51,51,.15);
}

.south-steps h3 {
  margin-top: 1.2rem;
}

@media (max-width: 759px) {
  .liaisons-cover-button {
    min-height: 340px;
  }

  .liaisons-cover-button img {
    height: 360px;
  }

  .liaisons-editions .liaisons-cover-button {
    height: 420px;
    min-height: 0;
  }

  .liaisons-editions .liaisons-cover-button img[src*="/mockups/"] {
    top: 0;
    width: 420px;
    height: 420px;
  }

  .south-hero-books {
    display: none;
  }

  .south-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .south-hero-shade {
    background: rgba(4,35,38,.74);
  }
}

.south-jacket .jacket-toolbar {
  grid-column: 1 / -1;
  font-family: "DM Sans", sans-serif;
  font-size: .67rem;
  letter-spacing: .14em;
  color: var(--south-coral);
}

.south-jacket .jacket-cover {
  aspect-ratio: 4 / 5;
  grid-column: 1;
  grid-row: 2 / span 4;
  width: 100%;
  max-width: 18rem;
  max-height: 28rem;
  margin: 1rem auto 0;
  object-fit: contain;
  box-shadow: 0 1.2rem 2.4rem rgba(21,51,51,.16);
}

.south-jacket h3,
.south-jacket .jacket-copy,
.south-jacket .jacket-buy {
  grid-column: 2;
}

.south-jacket h3 {
  max-width: 15ch;
  margin-top: 2rem;
  color: var(--south-ink);
  font-family: "Fraunces", serif;
  font-size: clamp(2.2rem,4vw,3.8rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1;
}

.south-jacket .jacket-copy {
  font-family: "DM Sans", sans-serif;
  line-height: 1.7;
}

.south-jacket .jacket-buy {
  align-self: end;
}

@media (max-width: 1050px) {
  .south-hero-grid {
    grid-template-columns: minmax(18rem,.9fr) minmax(25rem,1.1fr);
  }
  .south-edition-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 760px) {
  .south-hero {
    min-height: 54rem;
  }
  .south-hero-grid {
    min-height: 54rem;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 0;
    padding: 6rem 1rem 2rem;
  }
  .south-hero h1 {
    font-size: clamp(3.8rem,17vw,5.6rem);
  }
  .south-hero-books {
    height: 19rem;
    margin-top: 1rem;
  }
  .south-fan {
    width: 9.6rem;
    height: 15rem;
  }
  .south-scroll-note {
    display: none;
  }
  .south-manifesto-grid,
  .south-library-intro {
    grid-template-columns: 2.5rem 1fr;
  }
  .south-manifesto-grid > p:last-child {
    grid-column: 2;
    margin-top: 0;
  }
  .south-steps {
    grid-template-columns: 1fr;
  }
  .south-steps article,
  .south-steps article + article {
    min-height: 0;
    padding: 1.5rem 0 2.5rem;
    border-right: 0;
    border-bottom: 1px solid rgba(21,51,51,.3);
  }
  .south-steps article:last-child {
    border-bottom: 0;
  }
  .south-steps h3 {
    margin-top: 1.5rem;
  }
  .south-edition-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .south-cover-button {
    height: 18rem;
  }
  .south-jacket .jacket-inner {
    display: block;
  }
  .south-jacket .jacket-cover {
    width: min(12rem,58%);
    max-height: 18rem;
    margin: 1rem auto 1.5rem;
  }
  .south-jacket h3 {
    max-width: none;
    margin: 0 0 1rem;
    text-align: center;
  }
}

@media (max-width: 460px) {
  .south-fan {
    width: 8.5rem;
    height: 13.5rem;
  }
  .south-edition-grid {
    grid-template-columns: 1fr;
  }
  .south-cover-button {
    height: 23rem;
  }
  .south-edition {
    text-align: center;
  }
  .south-edition h4 {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .south-cover-button img {
    transition: none;
  }
}

/* Satoshi Nakamoto — supplied channel artwork as the page's visual anchor */
.satoshi-hero {
  position: relative;
  min-height: clamp(39rem, 48vw, 46rem);
  display: grid;
  overflow: hidden;
  isolation: isolate;
  background: #202225;
}

.satoshi-hero-image,
.satoshi-hero-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.satoshi-hero-image {
  inset: 50% -11.5rem auto auto;
  width: 78%;
  height: auto;
  object-fit: contain;
  object-position: right center;
  transform: translateY(-50%) scale(1.16);
  transform-origin: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 100%);
}

.satoshi-hero-scrim {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(32, 34, 37, .82) 0%, rgba(32, 34, 37, .34) 31%, rgba(32, 34, 37, 0) 54%),
    linear-gradient(0deg, rgba(32, 34, 37, .2), rgba(32, 34, 37, .06));
}

.satoshi-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.satoshi-hero-card {
  width: min(34rem, 100%);
  height: 34rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.75rem, 3vw, 2.65rem);
  border: 1px solid rgba(211, 161, 74, .56);
  background: rgba(5, 25, 45, .36);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
  backdrop-filter: blur(2px);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .72);
}

.satoshi-hero-card .eyebrow {
  color: #e9bd66;
}

.satoshi-hero-card h1 {
  max-width: 12ch;
  margin: .35rem 0 .8rem;
  color: #fff8e9;
  font-size: clamp(2.65rem, 4vw, 3.75rem);
  line-height: .94;
  text-wrap: balance;
}

.satoshi-hero-lead {
  max-width: 62ch;
  color: rgba(255, 250, 238, .9);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.62;
}

.satoshi-evidence-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
}

.satoshi-evidence-art {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(9rem, .9fr);
  gap: .7rem;
  min-height: 39rem;
}

.satoshi-evidence-art figure {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #17181a;
}

.satoshi-evidence-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.satoshi-evidence-main figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 1.25rem;
  color: #fff8e9;
  background: linear-gradient(0deg, rgba(3, 6, 9, .9), rgba(3, 6, 9, 0));
  font-size: .9rem;
  letter-spacing: .04em;
}

.satoshi-feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: stretch;
}

.satoshi-feature-grid .feature-card {
  min-height: 0;
}

.satoshi-quote-section {
  position: relative;
  min-height: clamp(30rem, 42vw, 39rem);
  display: grid;
  overflow: hidden;
  isolation: isolate;
  background: #202225;
}

.satoshi-quote-section > img {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 auto;
  width: 62%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.satoshi-quote-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, #202225 0%, rgba(32, 34, 37, .94) 34%, rgba(32, 34, 37, .18) 72%);
}

.satoshi-quote-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}

.satoshi-quote-card {
  width: min(38rem, 58%);
  padding: clamp(1.75rem, 3vw, 3rem);
  border-left: 2px solid #d5a935;
  color: #fff8e9;
}

.satoshi-quote-card .pull-quote {
  color: inherit;
  text-align: left;
}

.satoshi-quote-card .pull-quote-by {
  color: #dcb957;
  text-align: left;
}

.satoshi-visual-bridge {
  color: #f6f0e4;
  background: #17191c;
}

.satoshi-visual-bridge .kicker {
  color: #d8ae45;
}

.satoshi-visual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: var(--space-7);
}

.satoshi-visual-grid figure {
  display: grid;
  grid-template-rows: auto 1fr;
  margin: 0;
}

.satoshi-visual-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
  transform: scale(1.025);
}

.satoshi-visual-grid figure {
  overflow: hidden;
}

.satoshi-visual-grid figcaption {
  position: relative;
  z-index: 1;
  margin-top: 0;
  background: #17191c;
}

.satoshi-visual-grid figcaption {
  padding-top: .85rem;
  color: rgba(246, 240, 228, .72);
  font-size: .88rem;
  letter-spacing: .035em;
}

.satoshi-novella-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(15rem, .85fr);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: center;
}

.satoshi-novella-copy {
  margin: 0;
}

.satoshi-novella-cover {
  margin: 0;
  text-align: center;
}

.satoshi-novella-cover img {
  /* text-align:center does not centre a block-level image, so the jacket sat
     54px left of the caption, plates and link that share its column. */
  margin-inline: auto;
  width: min(21rem, 100%);
  max-height: 34rem;
  object-fit: contain;
  box-shadow: 0 1.5rem 3.5rem rgba(25, 19, 11, .22);
}

.satoshi-novella-cover figcaption {
  margin-top: 1rem;
  /* --ink-muted is not a token on this site; the caption was falling back to
     inherited body colour instead of the muted tone, and it does not follow
     the dark theme. */
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .satoshi-hero {
    min-height: 43rem;
    background: #202225;
  }

  .satoshi-hero-image {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 42% center;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .satoshi-hero-scrim {
    background:
      linear-gradient(0deg, rgba(3, 11, 22, .9) 0%, rgba(3, 11, 22, .16) 72%),
      linear-gradient(90deg, rgba(4, 14, 27, .12), rgba(4, 14, 27, .3));
  }

  .satoshi-hero-inner {
    align-items: flex-end;
    justify-content: flex-start;
    padding-top: 21rem;
    padding-bottom: 1.25rem;
  }

  .satoshi-hero-card {
    width: 100%;
    height: auto;
    padding: 1.35rem;
    background: rgba(5, 25, 45, .76);
  }

  .satoshi-evidence-layout,
  .satoshi-novella-grid {
    grid-template-columns: 1fr;
  }

  .satoshi-evidence-art {
    min-height: 27rem;
    grid-template-columns: minmax(0, 1.7fr) minmax(7rem, .8fr);
  }

  .satoshi-feature-grid {
    grid-template-columns: 1fr;
  }

  .satoshi-quote-section {
    min-height: 34rem;
  }

  .satoshi-quote-section > img {
    width: 100%;
  }

  .satoshi-quote-shade {
    background: linear-gradient(0deg, rgba(32, 34, 37, .96) 0%, rgba(32, 34, 37, .25) 100%);
  }

  .satoshi-quote-inner {
    align-items: flex-end;
    padding-bottom: 2rem;
  }

  .satoshi-quote-card {
    width: 100%;
  }

  .satoshi-visual-grid {
    grid-template-columns: 1fr;
  }

  .satoshi-visual-grid img {
    height: 18rem;
  }

  .satoshi-novella-cover,
  .novella-visual:has(.satoshi-novella-cover) {
    grid-row: 1;
  }
}

/* Shared landing-page spacing standard: keep related copy and artwork together. */
@media (min-width: 860px) {
  body[data-page="algorithm"] .algorithm-free-novella-grid,
  body[data-page="rebel-hackers"] .rebel-novella-grid,
  body[data-page="satoshi"] .satoshi-novella-grid {
    width: min(calc(100% - 2rem), 68rem);
    column-gap: clamp(var(--space-6), 3vw, var(--space-10));
  }

  body[data-page="orloj"] .story-split {
    width: min(calc(100% - 2rem), 70rem);
    gap: clamp(var(--space-6), 3vw, var(--space-10));
  }

  body[data-page="satoshi"] .split {
    gap: clamp(var(--space-6), 3vw, var(--space-10));
  }

  body[data-page="dangerous-liaisons"] .liaisons-premise-grid,
  body[data-page="south-beach"] .south-manifesto-grid,
  body[data-page="south-beach"] .south-library-intro {
    gap: clamp(var(--space-6), 3vw, var(--space-10));
  }
}

body[data-page="algorithm"] .algorithm-book-grid {
  width: min(100%, 72rem);
  margin: var(--space-4) auto 0;
  column-gap: var(--space-6);
  row-gap: var(--space-6);
}

body[data-page="algorithm"] .algorithm-cover-button {
  position: relative;
  height: 42rem;
}

body[data-page="algorithm"] .algorithm-cover-button img[src*="/mockups/"] {
  position: absolute;
  /* Sized as a share of the button, not a fixed rem width. The mockups bleed
     past their column on purpose, but a fixed width kept that bleed constant
     while the column narrowed, so between 760px and 1000px the artwork was
     being sliced by the container's own overflow:hidden. Percentages hold the
     desktop proportion at every width. */
  top: 0;
  left: 50%;
  width: 141.84%;
  max-width: none;
  height: auto;
  aspect-ratio: 1 / 1;
  /* -20% of the IMAGE, so the crop scales with it; `top` would be a share of
     the container and would stay 160px as the image shrank. */
  transform: translate(-50%, -20%);
}

body[data-page="algorithm"] #algorithm-324 .algorithm-cover-button img[src*="/mockups/"],
body[data-page="algorithm"] #algorithm-326 .algorithm-cover-button img[src*="/mockups/"] {
  top: 0;
  width: 148.94%;
  height: auto;
}

body[data-page="algorithm"] .algorithm-cover-button:hover img,
body[data-page="algorithm"] .algorithm-cover-button:focus-visible img {
  transform: translate(-50%, calc(-20% - var(--space-2)));
}

@media (max-width: 759px) {
  body[data-page="algorithm"] .algorithm-book-grid {
    margin-top: var(--space-4);
    row-gap: var(--space-6);
  }

  body[data-page="algorithm"] .algorithm-cover-button {
    height: 25rem;
  }

  body[data-page="algorithm"] .algorithm-cover-button img[src*="/mockups/"] {
    top: 0;
    width: 30rem;
    height: 30rem;
  }

  body[data-page="algorithm"] #algorithm-324 .algorithm-cover-button img[src*="/mockups/"],
  body[data-page="algorithm"] #algorithm-326 .algorithm-cover-button img[src*="/mockups/"] {
    top: 0;
    width: 31.25rem;
    height: 31.25rem;
  }
}

body[data-page="rebel-hackers"] .rebel-book-grid {
  margin-top: var(--space-2);
  row-gap: clamp(var(--space-8), 4vw, var(--space-12));
}

@media (min-width: 760px) {
  body[data-page="rebel-hackers"] .rebel-cover-button {
    position: relative;
    /* same headroom rule as the desktop block: canvas 32.5rem -> art 26rem */
    height: 30rem;
  }

  body[data-page="rebel-hackers"] .rebel-cover-button img[src*="/mockups/"] {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 50%;
    width: min(32.5rem, 90vw);
    max-width: none;
    height: 32.5rem;
    transform: translateX(-50%);
    scale: 1;
    /* The image box is wider than its column and the columns overlap. An opaque
       background paints a white rectangle over the neighbouring book, which
       reads as the cover being sliced off. */
    background: transparent;
  }

  body[data-page="rebel-hackers"] #rebel-point-breeze .rebel-cover-button img,
  body[data-page="rebel-hackers"] #rebel-glacial-dawn .rebel-cover-button img {
    scale: 1;
  }

  body[data-page="rebel-hackers"] #rebel-threshold .rebel-cover-button img {
    top: auto;
    bottom: 0;
    width: 34.375rem;
    height: 34.375rem;
    scale: 1;
  }

  body[data-page="rebel-hackers"] .rebel-cover-button:hover img,
  body[data-page="rebel-hackers"] .rebel-cover-button:focus-visible img {
    transform: translate(-50%, calc(-1 * var(--space-2)));
  }
}

body[data-page="poetry"] .poetry-book-grid,
body[data-page="orloj"] .orloj-shelf,
body[data-page="south-beach"] .south-edition-grid {
  row-gap: clamp(var(--space-6), 3vw, var(--space-10));
}

.home-book-pair {
  width: min(100%, 34rem);
  justify-self: center;
  gap: 0;
}
.home-book-pair .book:first-child {
  transform: translateX(5%);
}
.home-book-pair .book:last-child {
  transform: translateX(-5%);
}
@media (max-width: 620px) {
  .home-book-pair .book:first-child {
    transform: translateX(2%);
  }
  .home-book-pair .book:last-child {
    transform: translateX(-2%);
  }
}

/* Homepage scale study: books lead, with tighter transitions between sections. */
body[data-page="home"] .section {
  padding-block: clamp(var(--space-6), 3.5vw, var(--space-12));
}

body[data-page="home"] .section.tight {
  padding-block: clamp(var(--space-4), 2vw, var(--space-6));
}

body[data-page="home"] .home-scene-break {
  margin-top: clamp(var(--space-5), 3.5vw, var(--space-10));
}

@media (min-width: 860px) {
  body[data-page="home"] .split.reveal {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  body[data-page="home"] .split.reveal > :first-child {
    width: 100%;
  }

  body[data-page="home"] .home-lineage-copy .prose {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(var(--space-8), 6vw, var(--space-16));
    max-width: none;
  }

  body[data-page="home"] .home-lineage-copy .prose p {
    max-width: none;
    margin: 0;
  }

  body[data-page="home"] .home-book-pair {
    width: min(100%, 68rem);
    transform: translateY(-3rem);
  }

  body[data-page="home"] .home-book-pair img[src*="/mockups/"] {
    width: 100%;
    max-width: none;
  }

  body[data-page="home"] .series-rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    width: min(100%, 72rem);
    margin-inline: auto;
    gap: var(--space-6);
    overflow: visible;
    padding-top: var(--space-2);
    padding-bottom: var(--space-6);
  }

  body[data-page="home"] .series-card {
    grid-template-rows: 29rem auto auto;
    align-items: start;
    gap: var(--space-2);
  }

  body[data-page="home"] .series-rail img[src*="/mockups/"] {
    align-self: start;
    width: 27.5rem;
    height: 27.5rem;
    max-width: none;
    padding: .75rem;
    object-fit: contain;
    object-position: center;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="home"] .series-card h3,
  body[data-page="home"] .series-card p {
    width: 100%;
    margin: 0;
    text-align: center;
  }
}

@media (max-width: 859px) {
  body[data-page="home"] .home-lineage-copy .prose {
    max-width: none;
  }

  body[data-page="home"] .series-rail {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
  }

  body[data-page="home"] .series-card {
    grid-template-rows: min(82vw, 27.5rem) auto auto;
    align-items: start;
  }

  body[data-page="home"] .series-rail img[src*="/mockups/"] {
    width: 100%;
    height: 100%;
    padding: .5rem;
    object-fit: contain;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page="home"] .series-card h3,
  body[data-page="home"] .series-card p {
    margin: 0;
    text-align: center;
  }
}

/* Orloj library: match the large Algorithm presentation and keep captions close. */
@media (min-width: 760px) {
  body[data-page="orloj"] .orloj-shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 72rem);
    margin: 2.5rem auto 0;
    column-gap: var(--space-6);
    row-gap: var(--space-6);
  }

  body[data-page="orloj"] .orloj-shelf .orloj-book {
    grid-template-rows: 45rem auto auto auto;
    gap: 0;
    overflow: visible;
  }

  body[data-page="orloj"] .orloj-shelf .cover-hit {
    position: relative;
    width: 100%;
    max-width: none;
    height: 45rem;
    overflow: hidden;
  }

  body[data-page="orloj"] .orloj-shelf .cover-hit .mockup-cover {
    position: absolute;
    top: 0;
    left: 50%;
    /* proportional to the shelf slot, so the bleed does not grow as the
       column narrows and slice the jacket at tablet widths */
    width: 170.94%;
    max-width: none;
    height: auto;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -14.5%);
    object-fit: contain;
  }

  body[data-page="orloj"] .orloj-shelf .book:hover .mockup-cover,
  body[data-page="orloj"] .orloj-shelf .cover-hit:focus-visible .mockup-cover {
    transform: translate(-50%, calc(-14.29% - var(--space-2)));
  }

  body[data-page="orloj"] .orloj-shelf .orloj-book > .meta {
    margin: 0 auto;
  }

  body[data-page="orloj"] .orloj-shelf .orloj-book > h3 {
    margin: var(--space-1) auto 0;
  }
}

/* Large-book standard: Rebel Hackers, Satoshi, and South Beach now match
   the 50rem presentation canvas established on the Algorithm page. */
@media (min-width: 760px) {
  body[data-page="rebel-hackers"] .rebel-book-grid {
    width: min(100%, 72rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: var(--space-2) auto 0;
    column-gap: var(--space-6);
    row-gap: var(--space-6);
  }

  body[data-page="rebel-hackers"] .rebel-book:nth-child(3) {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    width: min(100%, 35rem);
    margin-top: -7rem;
    justify-self: center;
  }

  body[data-page="rebel-hackers"] .rebel-book:nth-child(-n + 2) {
    position: relative;
    z-index: 2;
  }

  body[data-page="rebel-hackers"] .rebel-cover-button {
    position: relative;
    /* Headroom. The artwork is 80% of its canvas and is pinned to the bottom,
       so the button's height minus 80% of the canvas is the air above the
       book. At 42rem that left Point Breeze and Threshold 32px and Glacial
       Dawn — whose canvas is 5% larger — exactly 0. A book whose top corner
       touches the boundary reads as trimmed even when nothing is clipped,
       and it read that way next to two neighbours that had air. 45rem gives
       every book a clear margin at every width. */
    height: 45rem;
    overflow: visible;
    background: transparent;
  }

  body[data-page="rebel-hackers"] .rebel-cover-button img[src*="/mockups/"],
  body[data-page="rebel-hackers"] #rebel-threshold .rebel-cover-button img {
    position: absolute;
    /* Every mockup canvas puts the artwork at y=300 and runs it to the very
       bottom (verified across all 42 files), so the box is 20% taller than
       the book. A fixed negative `top` pulled that box up by a hand-picked
       amount, and on these three it pulled the book itself above the button —
       48px on Point Breeze and Threshold, 80px on Glacial Dawn. Anchoring the
       bottom instead lands the artwork's baseline on the button's baseline at
       any size, which is also what keeps the three books on a common shelf. */
    top: auto;
    bottom: 0;
    left: 50%;
    width: min(50rem, 90vw);
    max-width: none;
    height: 50rem;
    object-fit: contain;
    transform: translateX(-50%);
    scale: 1;
    /* The image box is wider than its column and the columns overlap. An opaque
       background paints a white rectangle over the neighbouring book, which
       reads as the cover being sliced off. */
    background: transparent;
  }

  body[data-page="rebel-hackers"] .rebel-cover-button:hover img,
  body[data-page="rebel-hackers"] .rebel-cover-button:focus-visible img {
    transform: translate(-50%, calc(-1 * var(--space-2)));
  }

  body[data-page="satoshi"] .satoshi-cover-wrap {
    width: 100%;
    max-width: none;
  }

  body[data-page="satoshi"] .satoshi-cover-wrap .mockup-hit {
    position: relative;
    width: 100%;
    height: 42rem;
    overflow: visible;
  }

  body[data-page="satoshi"] .satoshi-cover {
    position: absolute;
    top: -9.5rem;
    left: 50%;
    width: 50rem;
    max-width: none;
    height: 50rem;
    object-fit: contain;
    transform: translateX(-50%);
  }

  body[data-page="satoshi"] .mockup-hit:hover .satoshi-cover,
  body[data-page="satoshi"] .mockup-hit:focus-visible .satoshi-cover {
    transform: translate(-50%, calc(-1 * var(--space-2)));
  }

  body[data-page="south-beach"] .south-edition-grid {
    width: min(100%, 72rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-10);
    row-gap: var(--space-6);
    margin: var(--space-3) auto 0;
  }

  body[data-page="south-beach"] .south-edition {
    grid-column: auto;
  }

  body[data-page="south-beach"] .south-edition:nth-child(4) {
    grid-column: auto;
  }

  body[data-page="south-beach"] .south-edition:nth-child(5) {
    grid-column: 1 / -1;
    width: min(100%, 35rem);
    justify-self: center;
  }

  body[data-page="south-beach"] .south-cover-button {
    position: relative;
    /* The frame ends 620px down; 42rem left 52px of dead box under it and
       pushed the caption away from the art. 40rem leaves 20px, so the
       eyebrow lands about 29px below the frame line. */
    height: 39.5rem;
    overflow: visible;
  }

  body[data-page="south-beach"] .south-cover-button img {
    position: absolute;
    top: -8.5rem;
    left: 50%;
    width: 46rem;
    max-width: none;
    height: 46rem;
    object-fit: contain;
    transform: translateX(-50%);
    z-index: 1;
  }

  /* A frame, not a panel. The earlier filled plate painted a white rectangle
     on the cream ground, and min(100%,30rem) collapsed to the column width,
     which is narrower than the art, so the books hung outside it and it
     crossed the Buy buttons. Measured from the mockups themselves: on a
     1500x1500 canvas every book sits y 301 -> 1488 and the widest spans
     902px. At the 46rem render that is 36.4rem tall and 27.66rem wide,
     starting 0.73rem below the top of the button box. The box below wraps
     that with about 1.5rem of air on every side. No fill, so nothing is
     painted over anything. */
  body[data-page="south-beach"] .south-cover-button::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -.75rem;
    width: 30.75rem;
    height: 39.5rem;
    transform: translateX(calc(-50% + .12rem));
    border: 1px solid rgba(21, 51, 51, .20);
    border-radius: 3px;
    outline: 1px solid rgba(21, 51, 51, .07);
    outline-offset: 5px;
    background: none;
    box-shadow: none;
    pointer-events: none;
    z-index: 0;
  }

  body[data-page="south-beach"] .south-cover-button:hover img,
  body[data-page="south-beach"] .south-cover-button:focus-visible img {
    transform: translate(-50%, -.5rem);
  }
}

body[data-page="south-beach"] .south-manifesto,
body[data-page="south-beach"] .south-rhythm,
body[data-page="south-beach"] .south-library {
  padding: clamp(3rem, 5vw, 5rem) 0;
}

body[data-page="south-beach"] .south-steps {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

body[data-page="south-beach"] .south-library-intro {
  margin-bottom: var(--space-6);
}

body[data-page="south-beach"] .south-track + .south-track {
  margin-top: var(--space-8);
}

body[data-page="south-beach"] .south-track-es {
  padding-top: var(--space-8);
}

body[data-page="south-beach"] .south-edition.volume {
  display: block;
  padding: 0;
  border: 0;
}

body[data-page="south-beach"] .south-destination {
  margin-top: var(--space-2);
}

body[data-page="south-beach"] .south-edition > .south-destination,
body[data-page="south-beach"] .south-edition > h4,
body[data-page="south-beach"] .south-edition > .jacket-link {
  position: relative;
  left: 0;
}

/* These three were nudged right by 6.5rem to sit under the art, which is
   itself centred on the card. The nudge pushed the eyebrow and the title
   past the card's right edge and left the Buy button off-centre. The art,
   the frame and the card all share one centre line, so the text simply
   centres on it. */
@media (min-width: 760px) {
  body[data-page="south-beach"] .south-edition > .south-destination,
  body[data-page="south-beach"] .south-edition > h4,
  body[data-page="south-beach"] .south-edition > .jacket-link {
    left: 0;
    margin-inline: 0;
    /* .south-destination inherits a readable-measure max-width from the
       global paragraph rule, which left its box 127px short on the right,
       so centring inside it still read as off-centre. */
    max-width: none;
    text-align: center;
  }

  body[data-page="south-beach"] .south-edition > .jacket-link {
    display: block;
    width: fit-content;
    margin-inline: auto;
  }

  /* Vertical rhythm. .south-edition h4 reserves min-height 3.2rem, which is
     two lines, but every title on this page runs to one, so each card carried
     26px of empty box under the title. The Buy button then added another 20px
     on top of that, reading as a 46px hole between the title and the button.
     1.75rem fits one line with almost nothing spare. */
  body[data-page="south-beach"] .south-edition > h4 {
    min-height: 1.75rem;
  }

  body[data-page="south-beach"] .south-edition > .south-destination {
    margin-bottom: .2rem;
  }

  body[data-page="south-beach"] .south-edition > .jacket-link.book-card-buy {
    margin-top: .75rem;
  }
}

body[data-page="south-beach"] .south-coda {
  padding: clamp(4rem, 7vw, 7rem) 0;
}

@media (max-width: 759px) {
  body[data-page="rebel-hackers"] .rebel-cover-button,
  body[data-page="satoshi"] .satoshi-cover-wrap .mockup-hit,
  body[data-page="south-beach"] .south-cover-button {
    position: relative;
    /* canvas 30rem -> art 24rem, so 26rem leaves 2rem of air */
    height: 26rem;
    overflow: hidden;
    background: transparent;
  }

  body[data-page="rebel-hackers"] .rebel-cover-button img[src*="/mockups/"],
  body[data-page="rebel-hackers"] #rebel-threshold .rebel-cover-button img,
  body[data-page="satoshi"] .satoshi-cover,
  body[data-page="south-beach"] .south-cover-button img {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 50%;
    width: 30rem;
    max-width: none;
    height: 30rem;
    object-fit: contain;
    transform: translateX(-50%);
    scale: 1;
    /* The image box is wider than its column and the columns overlap. An opaque
       background paints a white rectangle over the neighbouring book, which
       reads as the cover being sliced off. */
    background: transparent;
  }

  body[data-page="rebel-hackers"] .rebel-cover-button:hover img,
  body[data-page="rebel-hackers"] .rebel-cover-button:focus-visible img,
  body[data-page="satoshi"] .mockup-hit:hover .satoshi-cover,
  body[data-page="satoshi"] .mockup-hit:focus-visible .satoshi-cover,
  body[data-page="south-beach"] .south-cover-button:hover img,
  body[data-page="south-beach"] .south-cover-button:focus-visible img {
    transform: translate(-50%, calc(-1 * var(--space-2)));
  }

  body[data-page="south-beach"] .south-edition-grid {
    margin-top: var(--space-3);
    row-gap: var(--space-6);
  }

  body[data-page="south-beach"] .south-edition.volume {
    padding: 0;
  }
}

/* Poetry library: use the established Algorithm-scale book presentation. */
@media (min-width: 760px) {
  body[data-page="poetry"] .poetry-book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 72rem);
    column-gap: var(--space-6);
    row-gap: var(--space-10);
  }

  body[data-page="poetry"] .poetry-book-featured {
    grid-column: 1 / -1;
    width: min(100%, 35rem);
    justify-self: center;
  }

  body[data-page="poetry"] .poetry-cover-button {
    position: relative;
    height: 45rem;
    margin-bottom: var(--space-5);
    overflow: visible;
  }

  body[data-page="poetry"] .poetry-cover-button img {
    position: absolute;
    top: -7.75rem;
    left: 53%;
    width: 50rem;
    max-width: none;
    height: 50rem;
    object-fit: contain;
    scale: 1;
    transform: translateX(-50%);
  }

  body[data-page="poetry"] #balance .poetry-cover-button img {
    top: -10.25rem;
    left: 56%;
    width: 52.5rem;
    height: 52.5rem;
  }

  body[data-page="poetry"] #symmetry .poetry-cover-button img {
    /* The source mockup has a large white gutter on its right side.
       Offset the canvas so the visible book—not the file bounds—is centered. */
    left: 67.5%;
  }

  body[data-page="poetry"] .poetry-cover-button:hover img,
  body[data-page="poetry"] .poetry-cover-button:focus-visible img {
    transform: translate(-50%, -0.55rem);
  }
}

@media (max-width: 759px) {
  body[data-page="poetry"] .poetry-cover-button {
    position: relative;
    height: 30rem;
    overflow: visible;
  }

  body[data-page="poetry"] .poetry-cover-button img {
    position: absolute;
    top: -4rem;
    left: 50%;
    width: 35rem;
    max-width: none;
    height: 35rem;
    object-fit: contain;
    scale: 1;
    transform: translateX(-50%);
  }

  body[data-page="poetry"] .poetry-cover-button:hover img,
  body[data-page="poetry"] .poetry-cover-button:focus-visible img {
    transform: translate(-50%, -0.4rem);
  }
}

/* Home: editorial Harlequin passage and seven-world gateways */
body[data-page="home"] .home-harlequin-copy {
  margin-top: clamp(-1rem, -1.8vw, -0.25rem);
}

body[data-page="home"] .home-harlequin-copy .display {
  max-width: 18ch;
}

.world-gateway-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.15rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.world-gateway {
  position: relative;
  min-height: 25rem;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: #101419;
  text-decoration: none;
}

.world-gateway--lead {
  grid-column: span 7;
  min-height: 32rem;
}

.world-gateway--tall {
  grid-column: span 5;
  min-height: 32rem;
}

.world-gateway--third {
  grid-column: span 4;
}

.world-gateway--half {
  grid-column: span 6;
  min-height: 27rem;
}

/* The eighth door closes the mosaic on its own row rather than turning the
   final pair into a third triple. Same height as the halves above it, so the
   last two rows read as a coda that differs only in how it is divided. */
.world-gateway--full {
  grid-column: span 12;
  min-height: 27rem;
}

.world-gateway > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 650ms cubic-bezier(.2,.7,.2,1), filter 650ms ease;
  /* These six frames carry the colour the mosaic is built on: the blues of
     Prague and Symmetry, the orange chair and gold coin of Satoshi, the
     glitter on the Algorithm peak, the gold of the Rebel Hackers rig, the
     aurora over the Equilibrist. At 29 to 48 luminance they were reading as
     near-monochrome, so the artwork is lifted rather than only the scrim
     over it. The two bright frames need none of this and opt out. */
  filter: saturate(1.32) contrast(1.07) brightness(1.07);
}

.world-gateway--bright > img {
  filter: none;
}

/* The titles compete with the photography, not with each other, so the scrim
   does the separating rather than a bigger or slanted face. The middle stop
   lands the ramp where the copy actually sits instead of only at the edge. */
/* Measured at the copy zone, the artwork falls into two groups: six frames
   average 29 to 48 in luminance, and two (South Beach, Dangerous Liaisons)
   average 103 to 106. One scrim cannot serve both, and a single deep one was
   burying the six dark frames to rescue the two bright ones. So the default
   is light enough to let dark artwork show, and the bright pair opts in. */
.world-gateway::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 10, 13, 0) 36%, rgba(7, 10, 13, 0.16) 62%, rgba(7, 10, 13, 0.76) 100%),
    linear-gradient(90deg, rgba(7, 10, 13, 0.2), transparent 54%);
}
.world-gateway--bright::after {
  background:
    linear-gradient(180deg, rgba(7, 10, 13, 0.04) 16%, rgba(7, 10, 13, 0.54) 54%, rgba(7, 10, 13, 0.97) 100%),
    linear-gradient(90deg, rgba(7, 10, 13, 0.52), transparent 64%);
}

.world-gateway__copy {
  position: absolute;
  inset: auto 0 0;
  padding: clamp(1.35rem, 2.4vw, 2.25rem);
  /* insurance for the bright frames: South Beach and Poetry both put light
     sky directly behind the title. */
  text-shadow: 0 1px 16px rgba(7, 10, 13, 0.6);
}

.world-gateway__index {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.75rem;
  border: 1px solid rgba(236, 191, 82, 0.76);
  border-radius: 50%;
  color: #f2cb70;
  font-size: 0.73rem;
  letter-spacing: 0.08em;
}

.world-gateway h3 {
  max-width: 16ch;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  /* Literata's true italic, loaded via the ital axis on the font link. Without
     that axis the browser shears the roman instead, which shows badly at this
     size. Emphasis italics elsewhere are Spectral, so nothing collides. */
  font-style: italic;
  font-size: clamp(1.75rem, 3vw, 3.35rem);
  font-weight: 500;
  line-height: 0.98;
}

.world-gateway p {
  max-width: 38ch;
  margin: 0.75rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.94rem, 1.15vw, 1.08rem);
}

.world-gateway__enter {
  display: inline-block;
  margin-top: 1rem;
  color: #f2cb70;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.world-gateway__enter::after {
  content: "  →";
}

.world-gateway:hover > img,
.world-gateway:focus-visible > img {
  transform: scale(1.035);
  filter: saturate(1.42) contrast(1.10) brightness(1.10);
}
.world-gateway--bright:hover > img,
.world-gateway--bright:focus-visible > img {
  filter: saturate(1.08) contrast(1.04);
}

.world-gateway:focus-visible {
  outline: 3px solid #e5b94e;
  outline-offset: 3px;
}

@media (max-width: 860px) {
  .world-gateway--lead,
  .world-gateway--tall,
  .world-gateway--third,
  .world-gateway--half {
    grid-column: span 6;
    min-height: 26rem;
  }

  .world-gateway--lead {
    grid-column: span 12;
    min-height: 30rem;
  }
}

@media (max-width: 620px) {
  body[data-page="home"] .home-harlequin-copy {
    margin-top: 0;
  }

  .world-gateway--lead,
  .world-gateway--tall,
  .world-gateway--third,
  .world-gateway--half {
    grid-column: 1 / -1;
    min-height: 25rem;
  }
}

/* Final large-book calibration: Orloj left column +5%; Equilibrist = Algorithm scale. */
@media (min-width: 760px) {
  /* One rule for every volume. The old odd/even split sized the left column
     at 52.5rem and the right at 50rem, and gave them different `top` values;
     even after matching the widths the differing top pushed the right-hand
     books 8px down and clipped 6px off their base, so Venice, London and
     Tokyo still painted shorter than Prague, Paris and Boston. */
  body[data-page="orloj"] .orloj-shelf .orloj-book .cover-hit .mockup-cover {
    top: 0;
    width: 179.49%;
    height: auto;
    transform: translate(-50%, -14.29%);
  }

  body[data-page="equilibrist"] #volumes .volume {
    grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.28fr);
  }

  body[data-page="equilibrist"] #volumes .cover-trio .hard {
    position: relative;
    width: 100%;
    max-width: none;
    height: 42rem;
    overflow: hidden;
  }

  body[data-page="equilibrist"] #volumes .cover-trio .hard img[src*="/mockups/"] {
    position: absolute;
    inset: auto auto auto 50%;
    /* The image is letterboxed to 672px inside an 800px-wide box, so the art
       begins 134px down, not 160px. At -10rem the top of every jacket was
       being sliced off by the container's overflow:hidden. */
    top: -19.94%;
    width: 104.17%;
    max-width: none;
    height: 119.05%;
    transform: translateX(-50%);
    object-fit: contain;
  }

  body[data-page="equilibrist"] #volumes .cover-trio .hard:hover img[src*="/mockups/"],
  body[data-page="equilibrist"] #volumes .cover-trio .hard:focus-visible img[src*="/mockups/"] {
    transform: translate(-50%, calc(-1 * var(--space-2)));
  }
}

@media (max-width: 759px) {
  body[data-page="orloj"] .orloj-shelf .orloj-book .cover-hit .mockup-cover {
    top: -4.55rem;
    width: 31.5rem;
    height: 31.5rem;
  }

  body[data-page="equilibrist"] #volumes .cover-trio .hard {
    position: relative;
    width: 100%;
    max-width: none;
    height: 25rem;
    overflow: hidden;
  }

  body[data-page="equilibrist"] #volumes .cover-trio .hard img[src*="/mockups/"] {
    position: absolute;
    inset: auto auto auto 50%;
    top: -5rem;
    width: 30rem;
    max-width: none;
    height: 30rem;
    transform: translateX(-50%);
    object-fit: contain;
  }

  body[data-page="equilibrist"] #volumes .cover-trio .hard:hover img[src*="/mockups/"],
  body[data-page="equilibrist"] #volumes .cover-trio .hard:focus-visible img[src*="/mockups/"] {
    transform: translate(-50%, calc(-1 * var(--space-2)));
  }
}

@media (max-width: 759px) {
  body[data-page="orloj"] .orloj-shelf .orloj-book {
    grid-template-rows: 27rem auto auto auto;
    gap: 0;
  }

  body[data-page="orloj"] .orloj-shelf .cover-hit {
    position: relative;
    width: 100%;
    height: 27rem;
    overflow: hidden;
  }

  body[data-page="orloj"] .orloj-shelf .cover-hit .mockup-cover {
    position: absolute;
    top: -4rem;
    left: 50%;
    width: 30rem;
    max-width: none;
    height: 30rem;
    transform: translateX(-50%);
    object-fit: contain;
  }

  body[data-page="orloj"] .orloj-shelf .book:hover .mockup-cover,
  body[data-page="orloj"] .orloj-shelf .cover-hit:focus-visible .mockup-cover {
    transform: translate(-50%, calc(-14.29% - var(--space-2)));
  }

  body[data-page="orloj"] .orloj-shelf .orloj-book > .meta {
    margin: 0 auto;
  }

  body[data-page="orloj"] .orloj-shelf .orloj-book > h3 {
    margin: var(--space-1) auto 0;
  }
}

/* ===== ECS additions: plates, interview, reviews ===== */

/* ---- About: interview Q&A ------------------------------------------------ */
.qa-list{margin-top:var(--space-8); max-width:74ch}
.qa{padding:var(--space-6) 0; border-top:1px solid var(--color-divider)}
.qa:first-child{border-top:0}
.qa-q{
  font-family:var(--font-display); font-weight:500;
  font-size:var(--text-base); line-height:1.3;
  color:var(--color-primary-text); margin:0 0 .5em; max-width:60ch;
}
.qa-a{
  font-family:var(--font-body); font-size:var(--text-base);
  line-height:1.65; color:var(--color-text); margin:0; max-width:68ch;
}
@media (min-width:900px){
  .qa{display:grid; grid-template-columns:19rem 1fr; gap:var(--space-6); align-items:start}
  .qa-q{margin:0}
}

/* ---- About: reader pull-quotes ------------------------------------------- */
.rv-grid{display:grid; gap:var(--space-6);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); margin-top:var(--space-8)}
.rv{margin:0; padding:var(--space-6); border:1px solid var(--color-divider);
  display:flex; flex-direction:column; gap:var(--space-4); height:100%}
.rv blockquote{margin:0; flex:1}
.rv blockquote p{
  font-family:var(--font-display); font-weight:400;
  font-size:var(--text-lg); line-height:1.32; margin:0; max-width:30ch;
  color:var(--color-text); text-wrap:balance;
}
.rv figcaption{
  font-family:var(--font-body); font-size:var(--text-xs);
  letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-faint);
  display:flex; align-items:center; gap:.7em; flex-wrap:wrap;
}
.rv-stars{color:var(--color-primary-text); letter-spacing:.1em; text-transform:none}
.rv-note{font-size:var(--text-sm); color:var(--color-text-faint)}

/* ---- About: editorial review quotes -------------------------------------- */
.pr-grid{display:grid; gap:var(--space-6);
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); margin-top:var(--space-8)}
.pr{margin:0; padding:var(--space-6) 0 0; border-top:2px solid var(--color-primary);
  display:flex; flex-direction:column; gap:var(--space-4); height:100%}
.pr blockquote{margin:0; flex:1}
.pr blockquote p{
  font-family:var(--font-display); font-weight:400;
  font-size:var(--text-lg); line-height:1.34; margin:0; max-width:34ch;
  color:var(--color-text); text-wrap:balance;
}
.pr figcaption{
  font-family:var(--font-body); font-size:var(--text-xs);
  letter-spacing:.12em; text-transform:uppercase; color:var(--color-text);
  display:flex; flex-direction:column; gap:.25em;
}
.pr-note{color:var(--color-text-faint); letter-spacing:.08em}

/* ---- Baked banner plates: the artwork IS the headline --------------------
   The hero is locked to each plate's own proportion so the gold lettering is
   never cropped, and transparent anchors sit on the painted controls. app.js
   swaps the plate via data-src-en/es and toggles the hit-area layers via
   data-lang-panel; CSS picks desktop vs mobile.                            */
.hero-plate{position:relative;width:100%;overflow:hidden;background:#0d0a07;
  aspect-ratio:1672/941;display:block;
  /* .hero forces min-height:min(88vh,820px); that would crop the plate */
  min-height:0;height:auto}
.hero-plate .plate{position:absolute;inset:0;width:100%;height:100%;
  object-fit:fill;display:block;max-width:none}
.hero-plate .plate-m{display:none}
.hero-plate .hs-m{display:none}
@media (max-width:899px){
  .hero-plate{aspect-ratio:1122/1402}
  .hero-plate .plate-d{display:none}
  .hero-plate .plate-m{display:block}
  .hero-plate .hs-d{display:none}
  .hero-plate .hs-m{display:block}
}
.hs-layer{position:absolute;inset:0}
/* These hotspots are transparent <a> elements laid over the hero artwork, and
   their only text is an .sr-only label. They set no colour, so that label was
   inheriting the browser's default link blue (#0000EE) -- invisible today
   because .sr-only clips it, but one stylesheet quirk away from showing. An
   explicit inherit removes the dependency on a user-agent default. */
.hs{position:absolute;display:block;border-radius:3px;text-decoration:none;outline:0;
  color:inherit;
  transition:box-shadow .18s ease,background-color .18s ease}
.hs:hover{background:rgba(221,187,144,.10);box-shadow:0 0 0 1px rgba(221,187,144,.55)}
.hs-btn:hover{background:rgba(221,187,144,.13)}
.hs:focus-visible{box-shadow:0 0 0 2px #DDBB90,0 0 0 5px rgba(221,187,144,.28)}
/* must beat the display rules above, so it comes last and is forced */
.hero-plate [hidden]{display:none !important}

/* ---- Photo hero (shop): full plate, no crop, and NO full-bleed darkening.
   The old .hero-scrim dimmed the whole picture; here the wash is confined to
   the corner the copy sits in, so the artwork itself stays clean.          */
.hero-photo{display:grid;align-items:end}
.hero-photo .hero-scrim{
  background:linear-gradient(105deg,
    oklch(0.10 0.02 80 / 0.82) 0%,
    oklch(0.10 0.02 80 / 0.62) 26%,
    oklch(0.10 0.02 80 / 0.18) 48%,
    transparent 66%);
}
@media (max-width:899px){
  .hero-photo .hero-scrim{
    background:linear-gradient(180deg,
      oklch(0.10 0.02 80 / 0.10) 0%,
      oklch(0.10 0.02 80 / 0.35) 46%,
      oklch(0.10 0.02 80 / 0.86) 100%);
  }
}
.hero-photo .hero-copy{position:relative;z-index:2;padding-bottom:var(--space-12)}
.hero-photo .hero-copy .hero-lead,
.hero-photo .hero-copy h1,
.hero-photo .hero-copy .eyebrow{text-shadow:0 1px 14px oklch(0.10 0.02 80 / 0.55)}

/* ---- Reader's Club: free novellas --------------------------------------- */
.nv-grid{display:grid;gap:var(--space-8) var(--space-6);
  grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
  list-style:none;padding:0;margin:var(--space-8) 0 0}
.nv{margin:0;max-width:none;display:flex;flex-direction:column;gap:var(--space-4)}
.nv-shot{position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:2px;
  background:#2a2318;display:grid;place-items:center}
.nv-shot img{width:100%;height:100%;object-fit:cover;display:block}
.nv-nocover{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-text-faint);text-align:center;padding:1rem}
.nv-series{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-primary-text);margin:0}
.nv-title{font-family:var(--font-display);font-weight:400;font-size:var(--text-lg);
  line-height:1.2;margin:.25em 0 0;max-width:none;text-wrap:balance}
.nv form{display:grid;gap:.6rem;margin-top:var(--space-4)}
.nv label{display:grid;gap:.25rem;font-family:var(--font-body);font-size:var(--text-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-faint)}
.nv input{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);
  background:transparent;border:0;border-bottom:1px solid var(--color-divider);
  padding:.45em 0;text-transform:none;letter-spacing:normal}
.nv input:focus{outline:0;border-bottom-color:var(--color-primary)}
.nv .form-note{font-family:var(--font-body);font-size:var(--text-xs);
  color:var(--color-text-faint);margin:.2rem 0 0;min-height:1.2em}

/* ---- Reader's Club: how it works ---------------------------------------- */
.rc-steps{list-style:none;padding:0;margin:var(--space-8) 0 0;display:grid;gap:var(--space-6);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));counter-reset:none}
.rc-steps li{margin:0;display:flex;gap:var(--space-4);align-items:flex-start}
.rc-num{flex:0 0 auto;width:2.1rem;height:2.1rem;border-radius:50%;
  border:1px solid var(--color-primary);color:var(--color-primary-text);
  font-family:var(--font-display);font-size:var(--text-sm);
  display:grid;place-items:center;font-variant-numeric:tabular-nums}
.rc-steps p{margin:0;font-family:var(--font-body);font-size:var(--text-base);
  line-height:1.55;color:var(--color-text);max-width:32ch}

/* ---- Reader's Club: single-form novella picker -------------------------- */
.nvp-form{margin:var(--space-8) 0 0;display:grid;gap:var(--space-8)}
.nvp-set{border:0;padding:0;margin:0;min-width:0}
.nvp-legend{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-text-faint);padding:0;margin:0 0 var(--space-4)}
.nvp-grid{display:grid;gap:var(--space-6) var(--space-5);
  grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));
  list-style:none;padding:0;margin:0}
.nvp{margin:0;max-width:none}
.nvp-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nvp-card{position:relative;display:grid;gap:.6rem;cursor:pointer;
  padding:.5rem;border-radius:3px;border:1px solid transparent;
  transition:border-color .18s ease,background-color .18s ease}
.nvp-card:hover{background:rgba(201,162,39,.06);border-color:rgba(201,162,39,.35)}
.nvp-shot{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;border-radius:2px;
  background:#2a2318;box-shadow:0 1px 6px rgba(0,0,0,.18)}
.nvp-shot img{width:100%;height:100%;object-fit:cover;display:block}
.nvp-meta{display:block}
.nvp-series{display:block;font-family:var(--font-body);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--color-primary-text)}
.nvp-title{display:block;font-family:var(--font-display);font-size:var(--text-sm);
  line-height:1.25;margin-top:.15em;text-wrap:balance}
.nvp-tick{position:absolute;top:.9rem;right:.9rem;width:1.35rem;height:1.35rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);background:rgba(20,16,10,.35);
  display:grid;place-items:center;opacity:0;transform:scale(.85);
  transition:opacity .18s ease,transform .18s ease}
.nvp-tick::after{content:"";width:.42rem;height:.72rem;margin-top:-.16rem;
  border:solid #14100a;border-width:0 2px 2px 0;transform:rotate(45deg)}
.nvp-radio:checked + .nvp-card{border-color:var(--color-primary);background:rgba(201,162,39,.10)}
.nvp-radio:checked + .nvp-card .nvp-shot{box-shadow:0 0 0 2px var(--color-primary),0 2px 10px rgba(0,0,0,.28)}
.nvp-radio:checked + .nvp-card .nvp-tick{opacity:1;transform:scale(1);
  background:var(--color-primary);border-color:var(--color-primary)}
.nvp-radio:focus-visible + .nvp-card{outline:2px solid var(--color-primary);outline-offset:3px}
.nvp-ask{display:grid;gap:.9rem;max-width:34rem}
.nvp-fields{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.nvp-ask label{display:grid;gap:.25rem;font-family:var(--font-body);font-size:var(--text-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-faint)}
.nvp-ask input{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);
  background:transparent;border:0;border-bottom:1px solid var(--color-divider);
  padding:.45em 0;text-transform:none;letter-spacing:normal}
.nvp-ask input:focus{outline:0;border-bottom-color:var(--color-primary)}
.nvp-send{justify-self:start;margin-top:.3rem}
.nvp-ask .form-note{font-family:var(--font-body);font-size:var(--text-xs);
  color:var(--color-text-faint);margin:0;min-height:1.2em}
.nvp-fine{font-family:var(--font-body);font-size:var(--text-xs);line-height:1.6;
  color:var(--color-text-faint);margin:0;max-width:40ch}
@media (max-width:520px){
  .nvp-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-5) var(--space-4)}
}

/* ---- Poetry: book mockups, measured rather than eyeballed -----------------
   All six mockup PNGs are 1500x1500 with the book art occupying the bottom
   80% of the canvas (alpha bbox y 300 -> 1500) and horizontally centred
   (art centre x = 0.493-0.500 of canvas on every file). The earlier rules
   hand-tuned left:53%/56%/67.5% and 50rem/52.5rem canvases against the
   English files only, so the Spanish art — which is ~22% wider on the same
   canvas — broke out of the cards entirely.

   Anchoring the canvas to the bottom of the button and clipping the empty
   top 20% makes the visible book exactly as tall as the button, centred, on
   every file in both languages, with no per-book constants.               */
@media (min-width: 760px) {
  body[data-page="poetry"] .poetry-cover-button {
    position: relative;
    height: 40rem;              /* visible book height */
    overflow: hidden;           /* was visible — this is what let art escape */
    margin-bottom: var(--space-5);
  }
  body[data-page="poetry"] #equilibrium .poetry-cover-button img,
  body[data-page="poetry"] #balance .poetry-cover-button img,
  body[data-page="poetry"] #symmetry .poetry-cover-button img {
    position: absolute;
    top: auto;
    bottom: 0;                  /* art bottom == canvas bottom */
    left: 50%;                  /* art is centred in the canvas on all six */
    width: 50rem;               /* 40rem / 0.80 art fraction */
    height: 50rem;
    max-width: none;
    object-fit: contain;
    scale: 1;
    transform: translateX(-50%);
  }
  body[data-page="poetry"] .poetry-cover-button:hover img,
  body[data-page="poetry"] .poetry-cover-button:focus-visible img {
    transform: translate(-50%, -0.55rem);
  }
}
@media (max-width: 759px) {
  body[data-page="poetry"] .poetry-cover-button {
    position: relative;
    height: 30rem;
    overflow: hidden;
  }
  body[data-page="poetry"] #equilibrium .poetry-cover-button img,
  body[data-page="poetry"] #balance .poetry-cover-button img,
  body[data-page="poetry"] #symmetry .poetry-cover-button img {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 50%;
    width: 37.5rem;
    height: 37.5rem;
    max-width: none;
    object-fit: contain;
    scale: 1;
    transform: translateX(-50%);
  }
  body[data-page="poetry"] .poetry-cover-button:hover img,
  body[data-page="poetry"] .poetry-cover-button:focus-visible img {
    transform: translate(-50%, -0.4rem);
  }
}

/* ---- Poetry coda: centre the closing line under the display line ---------
   `.poetry-coda p:last-child` never matched — the last child is the
   "Return to the collection" link, not the paragraph — so the paragraph kept
   a default max-width and sat left of the display line above it.          */
body[data-page="poetry"] .poetry-coda .wrap > p:not(.poetry-coda-path):not(.poetry-coda-line) {
  max-width: 44rem;
  margin-inline: auto;
  color: #6a737a;
  letter-spacing: 0.08em;
}

/* ---- Algorithm 326 ("Redemption") : close the gap to the artwork ---------
   The chapter grid is 1.2fr / 0.8fr while the copy is capped at 36rem, so on
   a wide screen 96px of the text column sat empty and the 80px gutter was
   added on top — 176px of dead space between the last line and the image.
   Sizing the text column to the text itself and tightening the gutter brings
   the artwork in beside the copy.                                          */
@media (min-width: 760px) {
  body[data-page="algorithm"] .algorithm-scene-consent {
    grid-template-columns: minmax(0, 36rem) minmax(20rem, 1fr);
    gap: clamp(var(--space-6), 3vw, var(--space-10));
  }
}

/* ---- Algorithm prequel: copy left, concept poster right -----------------
   These rules used to place three children: the poster full-width on row 1,
   then a .algorithm-prequel-cover jacket and the copy side by side on row 2.
   The jacket has since moved to the free-novella block and that element no
   longer exists in the markup -- which left the poster pinned to row 1, the
   copy stranded in row 2 / column 2, and both row-2-column-1 and
   row-1-column-2 empty. Two children, two columns, one row.               */
@media (min-width: 760px) {
  body[data-page="algorithm"] .algorithm-prequel-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    align-items: center;
  }
  body[data-page="algorithm"] .algorithm-prequel-copy {
    grid-row: 1;
    grid-column: 1;
    max-width: 34rem;
  }
  body[data-page="algorithm"] .algorithm-prequel-concepts {
    grid-row: 1;
    grid-column: 2;
    width: 100%;
    margin: 0;
  }
}
@media (max-width: 759px) {
  /* single column: order alone puts the poster first */
  body[data-page="algorithm"] .algorithm-prequel-concepts { order: -1; margin-bottom: var(--space-8); }
}

/* ---- Algorithm: close the gap between the 319 cover and the signup box ---
   The prequel section and the free-novella section share the same cream
   background, so their 128px bottom / 128px top padding read as one dead
   band 443px tall between the novella cover and the form. Trimmed to ~24px
   each; the remaining 187px is the kicker and heading, which is content.  */
body[data-page="algorithm"] .algorithm-prequel {
  padding-bottom: clamp(var(--space-4), 2vw, var(--space-6));
}
body[data-page="algorithm"] .algorithm-free-novella {
  padding-top: clamp(var(--space-4), 2vw, var(--space-6));
}

/* ---- Poetry: Poesía en Balance +5% (Spanish only) ------------------------
   The art fills the button height exactly, so simply enlarging the artwork
   in the PNG just clipped the top. Instead the button grows 40rem -> 42rem
   for all three cards (they are bottom-anchored, so the books keep a common
   baseline and the extra headroom sits above the shorter two), and only
   Balance's canvas grows 50rem -> 52.5rem, i.e. exactly +5%.              */
@media (min-width: 760px) {
  body[data-page="poetry"] .poetry-cover-button {
    height: 42rem;
  }
  html[lang="es"] body[data-page="poetry"] #balance .poetry-cover-button img {
    width: 52.5rem;
    height: 52.5rem;
  }
}
@media (max-width: 759px) {
  body[data-page="poetry"] .poetry-cover-button {
    height: 31.5rem;
  }
  html[lang="es"] body[data-page="poetry"] #balance .poetry-cover-button img {
    width: 39.375rem;
    height: 39.375rem;
  }
}

/* ---- Rebel Hackers: three fixes on the book shelf and scene 02 -----------
   1. Scene 02 ("Glacial Dawn"): the chapter grid is 1.25fr / 0.75fr while the
      copy is capped, so 124px of the text column sat empty and the 80px
      gutter added to it — 204px between the last line and the artwork.
   2. Glacial Dawn cover +5% (50rem -> 52.5rem). The canvas top moves with it
      (-13rem -> -15.5rem) so the book grows upward and keeps its baseline
      level with Point Breeze rather than sinking.
   3. Book III was pulled up with margin-top:-7rem while its canvas also sits
      at top:-13rem with overflow visible, so the artwork rode 55px into the
      "Read the cover & editions" buttons of the two books above it.       */
@media (min-width: 760px) {
  body[data-page="rebel-hackers"] .rebel-scene-glacial {
    grid-template-columns: minmax(0, 36rem) minmax(20rem, 1fr);
    gap: clamp(var(--space-6), 3vw, var(--space-10));
  }

  body[data-page="rebel-hackers"] #rebel-glacial-dawn .rebel-cover-button img {
    width: min(52.5rem, 90vw);
    height: auto;
    aspect-ratio: 1 / 1;
    top: auto;
    bottom: 0;
  }

  body[data-page="rebel-hackers"] .rebel-book:nth-child(3) {
    margin-top: 0;
  }
}
@media (min-width: 760px) {
  /* Glacial Dawn's +5% grows upward to keep its baseline level with Point
     Breeze, which left its artwork 32px into the section heading. Give the
     shelf the headroom back. */
  body[data-page="rebel-hackers"] .rebel-book-grid {
    margin-top: 3rem;
  }
}

/* ---- Dangerous Liaisons: mirror chapter 02 instead of shrinking it -------
   .liaisons-chapter is 1.5fr / .72fr — wide image, narrow copy. The reverse
   chapter only flips the two with `order`, so the copy landed in the WIDE
   column (where it is capped at 430px, leaving 322px empty) and the yacht
   image landed in the NARROW one: 361x271 against 752x564 for chapters 01
   and 03, with 409px of dead air between text and image. Flipping the track
   sizes as well makes 02 a true mirror of its neighbours.                 */
@media (min-width: 761px) {
  body[data-page="dangerous-liaisons"] .liaisons-chapter-reverse {
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.5fr);
  }
}

/* ---- Satoshi: bring Volume II's cover in toward its text -----------------
   Vol I sets its copy flush at the column edge, so the eye measures a 131px
   gap. Vol II is the exact geometric mirror, but with the text on the left
   its ragged right edge stops ~108px short of the column, so the same
   centred cover reads 239px away. Shifting the canvas left inside its own
   column closes that to match Vol I.                                      */
@media (min-width: 860px) {
  body[data-page="satoshi"] #vol-ii .satoshi-cover {
    left: 34%;
  }
}

/* ---- Shop: hero title order, and two books per row -----------------------
   The gold weight belongs on the shop's name, not on the instruction, so the
   eyebrow ("Buy direct") is now the quiet white line and the headline
   ("Author's Shop") carries the gold.                                     */
body[data-page="shop"] .hero-photo .hero-copy .eyebrow {
  color: #f4efe3;
}
body[data-page="shop"] .hero-photo .hero-copy h1,
body[data-page="shop"] .hero-photo .hero-copy h1 em {
  color: var(--color-primary);
}
/* The books are the point of this page — two per row, not three. */
body[data-page="shop"] .book-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 62rem);
  margin-inline: auto;
}
@media (max-width: 640px) {
  body[data-page="shop"] .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Shop: the third poetry title stands alone ---------------------------
   Poetry in Symmetry / Poesía en Simetría is the odd third title of the
   poetry group. Centred on its own row directly under the other two, it
   both reads as deliberate -- the same treatment it gets on the poetry
   page -- and restores the pairing of everything that follows: the two
   Satoshi volumes, the two Dangerous Liaisons novels and the five South
   Beach courses each land side by side instead of one column out of step.
   A lone LAST card is no longer centred: with this card spanning the row,
   the grid comes out even, and a trailing card stays in its column.      */
@media (min-width: 641px) {
  body[data-page="shop"] .book-grid .book[data-book-title="Poetry in Symmetry"],
  body[data-page="shop"] .book-grid .book[data-book-title="Poes\00ED a en Simetr\00ED a"] {
    grid-column: 1 / -1;
    width: min(100%, 30rem);
    justify-self: center;
  }
}

/* ---- Shop: the fifth South Beach course stands alone --------------------
   The five courses are an odd number, so Portuguese lands by itself in the
   left column at the foot of the shelf and reads as a gap rather than a
   title. It is the last card in both shelves, so spanning and centring it
   costs nothing downstream. Same treatment as the third poetry title. */
@media (min-width: 641px) {
  body[data-page="shop"] .book-grid .book[data-book-title$="Conversational Portuguese"],
  body[data-page="shop"] .book-grid .book[data-book-title$="Portugu\00E9 s Conversacional"] {
    grid-column: 1 / -1;
    width: min(100%, 30rem);
    justify-self: center;
  }
}

/* ---- Shop: the card copy sits on the cover's centre line -----------------
   The jacket is mounted in a fixed 2:3 cream plate with object-fit:contain,
   so a cover that is not exactly 2:3 gets pillarboxed and its artwork starts
   4 to 14px inside the plate, on top of the plate's own 8px padding. Copy set
   flush left therefore hangs outside the picture by a different amount on
   every card, which is what reads as the block being skewed. Centring puts
   the copy on the artwork's own centre line, which contain() guarantees is
   also the plate's centre line, so every card lines up whatever the jacket's
   proportions. The wide bundle cards take the same treatment, so the shelf
   reads as one set: their copy is a narrow column beside the art and centres
   on its own axis. */
body[data-page="shop"] .book {
  text-align: center;
}
body[data-page="shop"] .book .buy-row {
  justify-content: center;
}
body[data-page="shop"] .book .buy-option {
  align-items: center;
}

/* Price shown on the shop card, populated live from Shopify by shop-prices.js.
   Absent (rather than blank) when Shopify cannot be reached. */
body[data-page="shop"] .book .shop-price {
  margin: .15rem 0 .5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--color-primary, #9a7b1f);
}

/* Language badge on a novella tile — nine covers in one picker span both
   languages, so each says which it is. */
.nvp-card .nvp-lang{
  position:absolute; top:.85rem; right:.85rem;
  font-size:.62rem; font-weight:700; letter-spacing:.09em;
  padding:.14rem .34rem; border-radius:2px;
  background:rgba(20,18,14,.72); color:#f3ead6;
  line-height:1; pointer-events:none;
}

/* Nine covers, both languages, one picker: lead with the reader's own language. */
.nvp-grid{ display:grid }
html[lang="es"] .nvp-grid .nvp:has(.nvp-radio[data-novella-lang="es"]){ order:-1 }
html[lang="en"] .nvp-grid .nvp:has(.nvp-radio[data-novella-lang="en"]){ order:-1 }

/* ===== Free novellas: one per row, each opening its own synopsis page ===== */
.nvrow-list{ list-style:none; margin:var(--space-8) 0 0; padding:0;
  display:grid; gap:var(--space-8) }
.nvrow{ display:grid; gap:clamp(1.25rem,4vw,2.5rem);
  grid-template-columns:minmax(0,1fr); align-items:center;
  max-width:none }   /* defeat the global list max-width */
@media (min-width:760px){
  /* Cap the pair and centre it. Left to 1fr the text column ran to 800px, so a
     row with a short blurb (or none yet) left the cover stranded far from it. */
  .nvrow{ grid-template-columns:minmax(14rem,20rem) minmax(0,34rem);
    max-width:60rem; margin-inline:auto; justify-content:center }
  /* Alternate sides by swapping the tracks, so the cover keeps the narrow
     column on both sides instead of stretching across the wide one. */
  .nvrow:nth-child(even){ grid-template-columns:minmax(0,34rem) minmax(14rem,20rem) }
  .nvrow:nth-child(even) .nvrow-visual{ grid-column:2; grid-row:1 }
  .nvrow:nth-child(even) .nvrow-body{ grid-column:1; grid-row:1 }
  .nvrow .nvrow-visual{ grid-column:1 }
}
.nvrow + .nvrow{ border-top:1px solid rgba(120,104,68,.22); padding-top:var(--space-8) }
.nvrow-shot{ display:block; margin:0 }
.nvrow-shot img{ display:block; width:100%; height:auto; border-radius:2px;
  box-shadow:0 2px 4px rgba(40,34,24,.12), 0 22px 44px -22px rgba(40,34,24,.55);
  transition:transform .25s ease, box-shadow .25s ease }
.nvrow-shot:hover img{ transform:translateY(-3px);
  box-shadow:0 3px 6px rgba(40,34,24,.14), 0 30px 56px -24px rgba(40,34,24,.6) }
.nvrow-series{ margin:0 0 .35rem; font-size:.76rem; letter-spacing:.14em;
  text-transform:uppercase; color:#7c6a45 }
.nvrow-lang{ display:inline-block; margin-left:.45rem; padding:.1rem .34rem;
  border-radius:2px; background:rgba(20,18,14,.72); color:#f3ead6;
  font-size:.62rem; letter-spacing:.08em }
.nvrow-title{ margin:0 0 .6rem; font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.15 }
.nvrow-title a{ color:inherit; text-decoration:none }
.nvrow-title a:hover{ text-decoration:underline; text-underline-offset:.16em }
.nvrow-prelude{ margin:0 0 .55rem; font-style:italic; color:#5d5342 }
.nvrow-blurb{ margin:0 0 1rem; max-width:44rem; color:#4a4335 }
.nvrow-cta{ margin:0 }

/* Bottom-of-page offer, and the same form on each novella page */
.nv-ask-wrap{ margin-top:var(--space-10); padding-top:var(--space-8);
  border-top:1px solid rgba(120,104,68,.28); text-align:center }
.nv-ask-wrap .nv-form{ text-align:left }   /* labels stay left-aligned inside */
.nv-form{ display:grid; gap:.85rem; max-width:30rem; margin-inline:auto }
.nv-form label{ display:grid; gap:.3rem; font-size:.82rem; letter-spacing:.03em }
.nv-form input, .nv-form select{ font:inherit; padding:.6rem .7rem; border-radius:2px;
  border:1px solid rgba(120,104,68,.42); background:rgba(255,255,255,.7) }
.nv-form .form-note{ margin:.2rem 0 0; font-size:.78rem; color:#6a6152 }

/* A novella's own page */
body[data-page="novella"] .nv-page{ display:grid; gap:clamp(1.5rem,5vw,3.5rem);
  grid-template-columns:minmax(0,1fr); align-items:start }
@media (min-width:820px){
  body[data-page="novella"] .nv-page{ grid-template-columns:minmax(16rem,24rem) minmax(0,1fr) }
}
body[data-page="novella"] .nv-jacket{ margin:0 }
body[data-page="novella"] .nv-jacket img{ display:block; width:100%; height:auto;
  border-radius:2px; box-shadow:0 2px 4px rgba(40,34,24,.12), 0 26px 50px -22px rgba(40,34,24,.55) }
body[data-page="novella"] .nv-prelude{ font-style:italic; font-size:1.05rem;
  color:#5d5342; margin:.2rem 0 1rem }
body[data-page="novella"] .nv-synopsis{ max-width:42rem; font-size:1.02rem; line-height:1.75 }
body[data-page="novella"] .nv-links{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem }

/* A novella page with a full write-up: lead, sections, and the six lenses. */
body[data-page="novella"] .nv-lead{ font-size:1.12rem; line-height:1.7; max-width:44rem;
  color:#3f3a2f; margin:.2rem 0 2rem }
body[data-page="novella"] .nv-sec{ margin:0 0 2.75rem; max-width:44rem }
body[data-page="novella"] .nv-sec > h2{ font-size:clamp(1.25rem,2.4vw,1.6rem);
  margin:0 0 .15rem; line-height:1.2 }
body[data-page="novella"] .nv-sec-sub{ margin:0 0 1rem; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:#8a7548 }
body[data-page="novella"] .nv-sec p{ line-height:1.75; margin:0 0 .9rem }
body[data-page="novella"] .nv-points{ margin:1rem 0 0; display:grid; gap:.9rem }
body[data-page="novella"] .nv-points dt{ font-weight:600; letter-spacing:.01em; color:#2f2a22 }
body[data-page="novella"] .nv-points dd{ margin:.2rem 0 0; line-height:1.7 }
body[data-page="novella"] .nv-lenses{ list-style:none; counter-reset:lens;
  margin:1.25rem 0 0; padding:0; display:grid; gap:1.6rem }
body[data-page="novella"] .nv-lenses > li{ counter-increment:lens;
  padding-left:2.9rem; position:relative; max-width:none }
body[data-page="novella"] .nv-lenses > li::before{ content:counter(lens,upper-roman);
  position:absolute; left:0; top:.1rem; width:2rem; text-align:right;
  font-size:.9rem; letter-spacing:.06em; color:#a08a4e }
body[data-page="novella"] .nv-lenses h3{ margin:0; font-size:1.06rem; line-height:1.25 }
body[data-page="novella"] .nv-lens-sub{ margin:.1rem 0 .45rem !important; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase; color:#8a7548 }

/* Reader's Club: the three numbered steps and the novellas that follow are one
   thought, but they sat across two full section paddings (89.6px + 89.6px).
   Close the seam so the list reads as the answer to the steps above it. */
body[data-page="reader-club"] #what{ padding-bottom:clamp(1.5rem, 3vw, 2.75rem) }
body[data-page="reader-club"] #novellas{ padding-top:clamp(1.75rem, 3.5vw, 3rem) }

/* The seven deliveries: an arabic-numbered journey, distinct from the
   roman-numeral "lenses" list used on the Slowness page. */
body[data-page="novella"] .nv-journey{ list-style:none; counter-reset:leg;
  margin:1.25rem 0 0; padding:0; display:grid; gap:1.5rem }
body[data-page="novella"] .nv-journey > li{ counter-increment:leg;
  padding-left:2.9rem; position:relative; max-width:none }
body[data-page="novella"] .nv-journey > li::before{ content:counter(leg);
  position:absolute; left:0; top:0; width:1.9rem; height:1.9rem;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid #b39a55; color:#8a7548;
  font-size:.8rem; font-variant-numeric:tabular-nums }
body[data-page="novella"] .nv-journey h3{ margin:0 0 .3rem; font-size:1.04rem; line-height:1.25 }
body[data-page="novella"] .nv-cost{ display:block; margin-top:.4rem;
  font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:#8a7548 }

/* ---- Illustrated plates inside a novella write-up -----------------------
   Two pieces of art carry the poem's central images: a watch that shows how
   much of the hour is filled rather than the hour itself, and the inward-
   opening chest of folded memory. Given room to breathe, they also break a
   long read into three movements. */
body[data-page="novella"] .nv-plate{
  margin: clamp(2rem, 5vw, 3.25rem) auto;
  max-width: 22rem;
  text-align: center;
}
body[data-page="novella"] .nv-plate img{
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 18px 34px rgba(30,34,54,.22));
}
body[data-page="novella"] .nv-plate figcaption{
  margin: .9rem auto 0; max-width: 26rem;
  font-family: var(--font-display, Georgia, serif);
  font-style: italic; font-size: .93rem; line-height: 1.6;
  color: #6a6152;
}
/* A hairline above and below sets the plate apart from the prose without
   boxing it in. */
body[data-page="novella"] .nv-plate::before{
  content: ""; display: block; width: 3.5rem; height: 1px;
  margin: 0 auto clamp(1.25rem, 3vw, 2rem);
  background: rgba(150,120,40,.42);
}
@media (min-width: 1100px){
  body[data-page="novella"] .nv-plate{ max-width: 25rem }
}
@media (prefers-reduced-motion: no-preference){
  body[data-page="novella"] .nv-plate img{ transition: transform 600ms ease }
  body[data-page="novella"] .nv-plate:hover img{ transform: translateY(-4px) }
}

/* The vow that closes Algorithm-319: four lines that carry the whole novella,
   so they are set apart from the prose rather than run into it. */
body[data-page="novella"] .nv-vow{
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  padding: clamp(1.25rem, 3vw, 1.75rem) 0 clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 4vw, 2rem);
  border-left: 2px solid rgba(150,120,40,.55);
  max-width: 38rem;
}
body[data-page="novella"] .nv-vow p{
  margin: 0 0 .5rem;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.02rem, 1.6vw, 1.16rem);
  line-height: 1.55;
  color: #3a3529;
}
body[data-page="novella"] .nv-vow p:first-child{ font-weight: 600 }
body[data-page="novella"] .nv-vow p:last-child{ margin-bottom: 0 }

/* ---- Novella art beyond its own page ----------------------------------- */

/* ---- The book page's novella column ------------------------------------
   Same vocabulary the Reader's Club rows use, and for the same reason: the
   jacket is the only large image, the plates are marks under it, and one
   quiet line leads out. Wrapping the three in a single grid item keeps the
   marks under the cover instead of stealing the copy's column. */
.novella-visual{
  display:grid; justify-items:center; align-content:start;
  gap:clamp(.85rem, 1.6vw, 1.15rem);
  /* The jacket's own rule sets its width in percent, which contributes
     nothing to max-content. Without this the column collapses to the width
     of the link beneath it and the cover shrinks with it. */
  width:100%; min-width:0; margin:0;
}
.novella-visual > figure,
.novella-visual > button{ margin:0; width:100% }

/* The plates: small, quiet, and never competing with the jacket. */
.novella-marks{
  display:flex; gap:.55rem; justify-content:center;
  text-decoration:none; line-height:0;
}
.novella-marks img{
  width:3.75rem; height:3.75rem; border-radius:2px;
  object-fit:contain; background:rgba(120,104,68,.05);
  border:1px solid rgba(120,104,68,.18);
  opacity:.88; transition:opacity .2s ease, transform .2s ease;
}
.novella-marks:hover img{ opacity:1; transform:translateY(-2px) }

.novella-synopsis-link{ margin:0; text-align:center;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase }
.novella-synopsis-link a{ color:#8a7548; text-decoration:none;
  border-bottom:1px solid rgba(150,120,40,.4); padding-bottom:2px }
.novella-synopsis-link a:hover{ color:#6b5310 }

/* Algorithm's free-novella block reserved a column for the jacket. It holds
   the real cover now, at the same width as the block above it. */
.algorithm-free-novella-cover{ margin:0 }
.algorithm-free-novella-cover img{
  display:block; width:min(25rem,100%); height:auto; margin-inline:auto;
  box-shadow:var(--shadow-lg);
}
.algorithm-free-novella-cover a{ display:block }

@media (max-width:700px){
  .novella-marks img{ width:3.25rem; height:3.25rem }
}

/* Reader's Club: an illustrated synopsis is signalled by two small discs under
   the jacket. Deliberately a detail — the cover stays the only real image in
   the row, so the index does not turn into a collage. */
.nvrow-visual{ display:grid; justify-items:center; gap:.9rem }
.nvrow-marks{ display:flex; gap:.55rem; justify-content:center; text-decoration:none }
.nvrow-marks img{
  width:4rem; height:4rem; border-radius:2px;
  object-fit:contain; background:rgba(120,104,68,.05);
  border:1px solid rgba(120,104,68,.18);
  opacity:.9; transition:opacity .2s ease, transform .2s ease;
}
.nvrow-marks:hover img{ opacity:1; transform:translateY(-2px) }

/* A single line that carries a whole section — "The waveform is a person." */
body[data-page="novella"] .nv-pull{
  margin: clamp(1.25rem, 3vw, 1.9rem) 0 0 !important;
  padding-left: clamp(1rem, 3vw, 1.5rem);
  border-left: 2px solid rgba(150,120,40,.55);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.4; color: #3a3529;
}

/* The cast of a single night — five people, five rooms. Unnumbered: they acted
   in parallel across time zones, not in sequence. */
body[data-page="novella"] .nv-cast{ list-style:none; margin:1.25rem 0 0; padding:0;
  display:grid; gap:1.5rem }
body[data-page="novella"] .nv-cast > li{ max-width:none; margin:0;
  padding-left:1.15rem; border-left:1px solid rgba(150,120,40,.32) }
body[data-page="novella"] .nv-cast h3{ margin:0; font-size:1.06rem; line-height:1.25 }
body[data-page="novella"] .nv-cast-place{ margin:.1rem 0 .5rem !important;
  font-size:.76rem; letter-spacing:.11em; text-transform:uppercase; color:#8a7548 }

/* ---------- Start here (homepage purchase band) --------------------------
 * The homepage carried no price and no buy control: the closest thing to a
 * purchase was a link into a 2,000-word essay. This band is the one place on
 * the page where a decided reader can act -- one book, one price, checkout.
 * It sits directly under the hero, above the stats, because a reader who has
 * already made up their mind should not have to scroll past the catalogue.
 * The cover is a link rather than decoration, so the undecided reader has a
 * second door into the series page.
 * --------------------------------------------------------------------- */
.start-here {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.start-here-inner {
  display: grid;
  /* The copy column is capped rather than 1fr: at 1200px a free column left
     the text measure (~46ch) stranded against 490px of empty cream. Capping
     it and letting the cover grow puts the weight back on the object being
     sold, which is the cover.
     Both tracks are then centred in the wrap. Packed left, the pair ended
     roughly 190px short of the right edge and the whole band read as having
     slid off-centre -- the cover, the heaviest thing on the page, sat hard
     against the left margin with a void opposite it. The copy cap is 34rem
     rather than 40rem so the track ends near where the longest line of type
     actually ends; centring a track the text does not fill only moves the
     hole from one side to the other. */
  grid-template-columns: minmax(10rem, clamp(13rem, 25vw, 24rem)) minmax(0, 34rem);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
  justify-content: center;
}
/* Centred against the copy, not pinned to its top: the buy row and the two
   lines under it make the text column the taller of the two at most widths,
   and a top-aligned jacket left the cover hanging off the top of the band
   with the weight of the section sitting under it. */
.start-here-cover {
  display: block;
  align-self: center;
}
.start-here-cover img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.start-here-copy > .kicker {
  margin-bottom: var(--space-2);
}
.start-here-copy > h2 {
  margin: 0 0 0.6rem;
}
.start-here-deck {
  color: var(--color-text-muted);
  max-width: 50ch;
  margin: 0 0 var(--space-5);
}
/* The Shopify button mounts asynchronously and the price line appears with
   it, so the row is sized by its content rather than a fixed height --
   otherwise the band visibly jumps when the SDK resolves. */
.start-here-buy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-end;
  margin-bottom: var(--space-4);
}
.start-here-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 58ch;
  margin: 0 0 0.75rem;
}
.start-here-alt {
  margin: 0;
  font-size: var(--text-sm);
}
.start-here-alt a {
  color: var(--color-text-muted);
  text-underline-offset: 0.2em;
}
.start-here-alt a:hover {
  color: var(--color-text);
}
@media (max-width: 820px) {
  .start-here-inner {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .start-here-cover {
    max-width: 13rem;
  }
  .start-here-buy {
    width: 100%;
  }
}

/* ---------- When you finish (free novella -> paid Vol. I) ----------------
 * Placed after the claim form on every novella page, never before it: the
 * novella is a lead magnet and the free offer stays the hero. A reader who
 * only wants the free book is not asked for money; a reader who is already
 * sold no longer has to hunt for the next volume in a grid of twenty-nine.
 * Quieter than the world pages' buy rows -- ink ground, no gold field --
 * so it reads as a next step rather than an interruption.
 * --------------------------------------------------------------------- */
.nv-next {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
}
.nv-next-inner {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.nv-next-cover {
  display: block;
  align-self: start;
}
.nv-next-cover img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.nv-next-copy > .kicker {
  margin-bottom: var(--space-2);
}
.nv-next-copy > h2 {
  margin: 0 0 0.6rem;
}
.nv-next-deck {
  color: var(--color-text-muted);
  max-width: 48ch;
  margin: 0 0 var(--space-5);
}
.nv-next-buy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-end;
  margin-bottom: var(--space-4);
}
.nv-next-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 52ch;
  margin: 0 0 0.75rem;
}
.nv-next-alt {
  margin: 0;
  font-size: var(--text-sm);
}
.nv-next-alt a {
  color: var(--color-text-muted);
  text-underline-offset: 0.2em;
}
.nv-next-alt a:hover {
  color: var(--color-text);
}
@media (max-width: 720px) {
  .nv-next-inner {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .nv-next-cover {
    max-width: 10rem;
  }
  .nv-next-buy {
    width: 100%;
  }
}

/* ---------- Start here strip (world pages) -------------------------------
 * Directly under each world hero: free prelude, Volume I with a live price
 * and a checkout button, and the route to every volume. Three equal cells,
 * separated by rules rather than boxed as cards -- it is a signpost, not a
 * product grid, and the full buy rows further down the page are unchanged.
 * Cells collapse to a single column well before the text can crowd.
 * --------------------------------------------------------------------- */
.start-strip {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.start-strip-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
}
.sh-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: var(--space-4) clamp(1rem, 3vw, 2.25rem);
  border-left: 1px solid var(--color-border);
}
.sh-cell:first-child {
  border-left: 0;
  padding-left: 0;
}
.sh-label {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0;
}
.sh-title {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.4rem;
  text-wrap: balance;
}
.sh-action {
  font-size: var(--text-sm);
  text-underline-offset: 0.2em;
}
.sh-action--quiet {
  color: var(--color-text-muted);
}
.sh-action--quiet:hover {
  color: var(--color-text);
}
/* The Shopify button and its price line mount asynchronously; keeping the
   cell bottom-aligned to its own content stops the strip reflowing when
   the SDK resolves a few hundred milliseconds after paint. */
.sh-buy {
  margin-top: auto;
}
@media (max-width: 780px) {
  .start-strip-inner {
    grid-template-columns: 1fr;
  }
  .sh-cell {
    border-left: 0;
    border-top: 1px solid var(--color-border);
    padding-left: 0;
    padding-right: 0;
  }
  .sh-cell:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

/* ---------- Free chapter reading pages -----------------------------------
 * The one instrument the site was missing: a way to read the actual prose
 * without handing over an email first. A bookshop that asked for your
 * address before letting you open a book would sell nothing.
 *
 * These pages are built for reading and nothing else -- no sidebar, no
 * related titles, no second call to action anywhere above the last line of
 * the chapter. The only commercial object on the page sits after the prose
 * has finished doing its work.
 * --------------------------------------------------------------------- */
.read-wrap {
  max-width: 40rem;          /* ~64 characters at the reading size */
  margin-inline: auto;
}
body[data-page="read"] .read-head {
  padding-bottom: 0;
  text-align: center;
}
body[data-page="read"] .read-head .kicker {
  margin-bottom: var(--space-3);
}
body[data-page="read"] .read-head .kicker a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
/* .display-callig shrink-wraps, so inheriting text-align from .read-head
   centred the text inside a box that was itself sitting left. Make the
   heading fill its column and centre within it. */
/* .display-callig caps its box at 14ch. Inside a centred column that left
   the title in a narrow box hugging the left edge — text centred within it,
   but the box itself off to one side, which is what read as skewed. Release
   the cap and centre the box, and let text-wrap balance the line lengths. */
body[data-page="read"] h1.display-callig {
  margin: 0 0 var(--space-5);
  display: block;
  max-width: 20ch;
  margin-inline: auto;
  width: auto;
  text-align: center;
  text-wrap: balance;
}
/* Stated plainly and once. It is the whole offer, and hedging it would
   make a reader wonder where the catch is. */
.read-free {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  font-style: italic;
}

.read-body {
  padding-top: var(--space-8);
}
.read-chapter {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  margin: 0 0 var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.read-body p {
  font-family: var(--font-display);
  font-size: 1.075rem;
  line-height: 1.78;
  margin: 0 0 1.15em;
  hyphens: auto;
}
/* The opening line, in small caps, is the one piece of book typography
   worth importing -- it marks where the reading starts. */
.read-body p:first-of-type::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.03em;
}
/* Verse carries its own line breaks out of the manuscript, so it must not
   be justified, hyphenated, or re-wrapped like prose. */
.read-verse {
  font-family: var(--font-body) !important;
  font-style: italic;
  line-height: 1.6 !important;
  padding-left: clamp(0.75rem, 4vw, 2rem);
  border-left: 1px solid var(--color-border);
  margin-block: var(--space-6) var(--space-6) !important;
  hyphens: none !important;
  color: var(--color-text-muted);
}

.read-end {
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.read-ends {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-3);
}
.read-ends-sub {
  color: var(--color-text-muted);
  margin: 0 auto var(--space-7);
  max-width: 34ch;
}
.read-buy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: center;
  align-items: flex-end;
  margin-bottom: var(--space-5);
}
.read-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 46ch;
  margin: 0 auto var(--space-4);
}
.read-back {
  margin: 0;
  font-size: var(--text-sm);
}
.read-back a { color: var(--color-text-muted); }
.read-back a:hover { color: var(--color-text); }

@media (max-width: 620px) {
  .read-body p { font-size: 1.03rem; line-height: 1.72; }
  .read-buy { justify-content: flex-start; }
  body[data-page="read"] .read-head,
  .read-end { text-align: left; }
  .read-ends-sub, .read-note { margin-inline: 0; }
}
/* The free-chapter link sits under the Volume I button rather than beside
   it: it is the alternative to buying, not a competing ask. */
.sh-read {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-underline-offset: 0.2em;
  margin-top: 0.5rem;
}
.sh-read:hover { color: var(--color-text); }
/* A poem's own title, inside a chapter. Small caps rather than a heading:
   it belongs to the prose, not to the page's outline. */
.read-poem-title {
  font-variant-caps: small-caps;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--color-text-muted);
  margin: var(--space-7) 0 var(--space-5) !important;
}

/* ---------- the omnibus saving -------------------------------------------
 * A discount the buyer never sees converts exactly as well as no discount.
 * The omnibus sat in the shop grid as its own card with its own price, so a
 * reader deciding on Volume I had no way to know that all three in one
 * volume costs ten dollars less. Stated as type rather than as a badge:
 * it is a price fact, and a flash or a starburst would be the first piece
 * of supermarket grammar on the site.
 * --------------------------------------------------------------------- */
.sh-save {
  font-size: var(--text-sm);
  color: var(--color-primary-ink, var(--color-text));
  font-weight: 600;
  margin: 0.15rem 0 0;
}
.buy-bundle {
  display: block;
  width: 100%;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-underline-offset: 0.2em;
  margin-top: 0.35rem;
}
.buy-bundle:hover { color: var(--color-text); }

/* ---------- three-book bundle band ---------------------------------------
 * Written ahead of the SKU; _build/bundle_band.py will not place the markup
 * until the Shopify product exists. The art is 3:2 and carries its own
 * title, so the band gives it the full column and sets the copy beneath
 * rather than beside it — putting type alongside a picture that already has
 * a headline reads as two competing titles.
 * --------------------------------------------------------------------- */
.bundle-band {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.bundle-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
.bundle-art {
  width: 100%;
  max-width: 60rem;
  height: auto;
  border-radius: var(--radius-sm);
}
.bundle-copy {
  text-align: center;
  max-width: 46ch;
}
.bundle-copy > h2 {
  margin: 0 0 0.6rem;
  max-width: none;
}
.bundle-deck {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}
.bundle-buy {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.bundle-save {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}
@media (max-width: 620px) {
  .bundle-copy { text-align: left; }
}

/* ===== Bundle option inside an existing buy row ==========================
   Not a banner: the bundle is a third choice in the row the visitor is
   already reading, so it reads as the best-value option rather than an
   advertisement. English only for now (data-lang-panel="en" hides it on
   the Spanish site, where no bundle SKU exists yet).                      */
.buy-option--bundle{
  position: relative;
}
.buy-option--bundle .buy-format{
  color: var(--color-primary-text);
}
/* The row is bottom-aligned (align-items:flex-end), so the saving note sits
   ABOVE the button: in flow, the cell grows upward and the three buttons stay
   on one line, with nothing overlapping the paragraph beneath the row. */
.buy-save-note{
  margin: -.1rem 0 .15rem;
  font-size: .76rem;
  letter-spacing: .02em;
  opacity: .68;
}
@media (max-width: 640px){
  .buy-save-note{ font-size: .72rem; }
}

/* ---------- price line: sale price and was-price --------------------------
 * Shopify renders the compare-at price as a sibling span with no separation
 * of its own, so "$19.95 $24.90" arrived as one run of digits that read as a
 * single number. Spaced, struck and stepped down a size, the pair reads as
 * one price and the thing it replaced.
 * --------------------------------------------------------------------- */
.buy-direct .shopify-buy__product__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0 0 0.45rem;
}
.buy-direct .shopify-buy__product__actual-price {
  margin: 0;
}
.buy-direct .shopify-buy__product__compare-price {
  font-family: inherit;
  font-size: 0.85em;
  color: var(--color-text-faint);
  text-decoration: line-through;
  margin: 0;
}

/* ---------- home page buy row: centred over the buttons -------------------
 * The Shopify button is wider than the price it carries, so a left-aligned
 * price sits off to one side of its own control and the row reads as three
 * ragged edges. Centre applies here only: the shop cards and the volume
 * pages set their buy rows against a left margin of running text.
 * --------------------------------------------------------------------- */
/* Three formats across, not two-and-a-widow. The row was flex with a
   11.5rem floor per option, which needs 592px; the copy column caps at
   34rem/544px, so the audiobook wrapped onto a line of its own and read as an
   afterthought rather than a third equal choice. A 3-track grid lets the
   options share whatever the column has. */
.start-here-buy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: end;
}
.start-here-buy .buy-option {
  align-items: center;
  text-align: center;
  min-width: 0;
}
.start-here-buy .buy-direct {
  min-width: 0;
  width: 100%;
}
.start-here-buy .buy-direct .shopify-buy__btn,
.start-here-buy .buy-direct .btn {
  width: 100%;
  padding-inline: 0.5rem;
}
@media (max-width: 560px) {
  .start-here-buy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.start-here-buy .buy-direct .shopify-buy__product {
  text-align: center;
}
.start-here-buy .buy-direct .shopify-buy__product__price {
  justify-content: center;
}

/* ===== Home page: the two bundles, beneath the book =====================
 * Tried first as a third column in the buy row above, and the art would not
 * survive it: each image is 3:2 and carries its own title, so a column
 * narrow enough to stand beside "Paperback" and "eBook" shrank the picture
 * past reading. Given the full width of the copy column instead, the pair
 * reads as two products rather than two more prices -- and the buy row
 * above goes back to being one book in two formats.
 * English only for now (data-lang-panel="en" on the wrapper).
 * --------------------------------------------------------------------- */
/* Built on the languages picker's three tracks, like the Satoshi band, so the
   bundle row's label and cards start and end exactly where the picker's copy
   and control do. Left as a plain full-wrap block it was 131px wider on each
   side than the row beneath it, which is what made the section read as two
   blocks of different widths stacked rather than one band. The children span
   all three tracks; the cards keep their own auto-fit grid inside. */
.bundle-pair-wrap {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: minmax(0, 27rem) clamp(3rem, 5vw, 5.4rem) minmax(0, 23rem);
  /* The picker's column gap too, or the group comes out 64px narrower than
     the row it is being matched to. */
  column-gap: clamp(1rem, 2.4vw, 2rem);
  justify-content: center;
}
.bundle-pair-wrap > * { grid-column: 1 / -1; }
.bundle-pair-lead {
  margin: 0 0 var(--space-5);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* The Spanish bundles live on the Spanish shop and on el-equilibrista.html,
   not on the Spanish home page, so this strip stays English-only. The note
   tells an English reader the same three bundles exist in Spanish, in
   sentence case so it reads as an aside rather than part of the label. */
.bundle-pair-also {
  margin-left: 0.6rem;
  font-size: 0.92em;
  letter-spacing: 0.02em;
  text-transform: none;
  font-style: italic;
  color: var(--color-text);
}
@media (max-width: 520px) {
  .bundle-pair-also { display: block; margin-left: 0; margin-top: 0.25rem; }
}
.bundle-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-6) var(--space-7);
  align-items: start;
}
.bundle-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
}
/* ---------- the bundle plate ---------------------------------------------
 * The artwork is finished work and wants no filter over it, so the frame is
 * built around it rather than on it: a cream mount a few pixels wider than
 * the picture, a gold hairline set inside that mount, and the same lifted
 * shadow the audiobook plates use. It is the site's existing vocabulary --
 * the Equilibrist jackets and the audiobook squares are already framed this
 * way -- so the bundles stop reading as loose images dropped into a grid.
 * --------------------------------------------------------------------- */
.bundle-pick-art {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  margin: 0;
}
.bundle-pick-frame {
  position: relative;
  display: block;
  width: 100%;
  padding: clamp(0.5rem, 1.1vw, 0.85rem);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--color-surface) 0%, var(--color-paper) 100%);
  box-shadow:
    0 1px 2px oklch(0.2 0.025 75 / 0.10),
    0 14px 30px -16px oklch(0.2 0.025 75 / 0.30),
    inset 0 1px 0 oklch(1 0 0 / 0.65);
  transition: transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease;
}
/* the hairline, inset from the mount's edge rather than drawn on the picture */
.bundle-pick-frame::after {
  content: '';
  position: absolute;
  inset: clamp(0.28rem, 0.6vw, 0.45rem);
  border: 1px solid var(--color-primary);
  border-radius: 2px;
  opacity: 0.38;
  pointer-events: none;
}
.bundle-pick:hover .bundle-pick-frame,
.bundle-pick:focus-within .bundle-pick-frame {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px oklch(0.2 0.025 75 / 0.12),
    0 22px 40px -18px oklch(0.2 0.025 75 / 0.38),
    inset 0 1px 0 oklch(1 0 0 / 0.65);
}
@media (prefers-reduced-motion: reduce) {
  .bundle-pick-frame { transition: none; }
  .bundle-pick:hover .bundle-pick-frame { transform: none; }
}

/* The home page's Satoshi band gets the same mount, at the larger size. */
.satoshi-band-art {
  position: relative;
  padding: clamp(0.6rem, 1.2vw, 1rem);
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--color-surface) 0%, var(--color-paper) 100%);
  box-shadow:
    0 1px 2px oklch(0.2 0.025 75 / 0.10),
    0 16px 34px -18px oklch(0.2 0.025 75 / 0.32),
    inset 0 1px 0 oklch(1 0 0 / 0.65);
}
.satoshi-band-art::after {
  content: '';
  position: absolute;
  inset: clamp(0.32rem, 0.7vw, 0.5rem);
  border: 1px solid var(--color-primary);
  border-radius: 2px;
  opacity: 0.38;
  pointer-events: none;
}
.satoshi-band-art img {
  border-radius: 2px;
  box-shadow: none;
}
.bundle-pick-kicker {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-text);
}
.bundle-pick-title {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.2;
  text-wrap: balance;
}
.bundle-pick-note {
  margin: 0 0 0.4rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.bundle-pick .buy-direct {
  min-width: 0;
  text-align: center;
}
.bundle-pick .buy-direct .shopify-buy__product {
  text-align: center;
}
.bundle-pick .buy-direct .shopify-buy__product__price {
  justify-content: center;
}
@media (max-width: 700px) {
  .bundle-pair { grid-template-columns: 1fr; }
  .bundle-pick-art { max-width: 26rem; }
}

/* ===== Cookie consent bar ================================================
   Deliberately quiet: a bottom strip in the site's own palette, not a
   full-screen blocker. GA4 is already denied by default (Consent Mode v2 in
   each page's head), so nothing is stored while this sits unanswered, and
   Plausible keeps measuring either way.                                   */
.consent-bar{
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 9999;
  width: min(62rem, calc(100% - 2rem));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.6rem;
  margin: 0 0 1rem;
  padding: 1rem 1.35rem;
  border: 1px solid rgba(198,163,79,.32);
  border-radius: 12px;
  background: #14110d;
  color: #efe7d7;
  box-shadow: 0 14px 40px rgba(0,0,0,.38);
  transform: translate(-50%, calc(100% + 1.5rem));
  opacity: 0;
  transition: transform .34s cubic-bezier(.2,.7,.3,1), opacity .34s ease;
}
.consent-bar.is-in{ transform: translate(-50%, 0); opacity: 1; }
.consent-bar.is-out{ transform: translate(-50%, calc(100% + 1.5rem)); opacity: 0; }

.consent-text{
  flex: 1 1 22rem;
  margin: 0;
  font-size: .84rem;
  line-height: 1.5;
  opacity: .9;
}
.consent-actions{
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 0 0 auto;
}
.consent-btn{
  font: inherit;
  font-size: .82rem;
  line-height: 1;
  padding: .62rem 1.15rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.consent-btn--gold{
  background: #c6a34f;
  border-color: #c6a34f;
  color: #14110d;
  font-weight: 600;
}
.consent-btn--gold:hover{ background: #d6b464; }
.consent-btn--quiet{
  background: transparent;
  border-color: rgba(239,231,215,.34);
  color: #efe7d7;
}
.consent-btn--quiet:hover{ border-color: rgba(239,231,215,.6); }
.consent-btn:focus-visible{ outline: 2px solid #c6a34f; outline-offset: 2px; }

@media (max-width: 560px){
  .consent-bar{ padding: .9rem 1rem; gap: .85rem; }
  .consent-text{ flex-basis: 100%; font-size: .8rem; }
  .consent-actions{ width: 100%; }
  .consent-btn{ flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce){
  .consent-bar{ transition: none; }
}

/* Privacy link inside the consent bar */
.consent-more{
  color: #c6a34f;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.consent-more:hover{ color: #d6b464; }

/* ===== Legal / policy pages ============================================ */
.legal-doc{ max-width: 46rem; }
.legal-doc h1{ margin-bottom: .35rem; }
.legal-updated{
  margin: 0 0 2.2rem;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .6;
}
.legal-doc h2{
  margin: 2.4rem 0 .7rem;
  font-size: 1.12rem;
  letter-spacing: .01em;
}
.legal-doc .prose{ margin: 0 0 1rem; }
.legal-doc code{
  font-size: .86em;
  padding: .1em .35em;
  border-radius: 4px;
  background: rgba(128,128,128,.14);
}
.legal-list{
  margin: 0 0 1.2rem;
  padding-left: 1.15rem;
}
.legal-list li{ margin-bottom: .5rem; line-height: 1.6; }
.legal-table{
  width: 100%;
  border-collapse: collapse;
  margin: .4rem 0 1.4rem;
  font-size: .86rem;
}
.legal-table th,
.legal-table td{
  text-align: left;
  padding: .6rem .7rem;
  border-bottom: 1px solid rgba(128,128,128,.24);
  vertical-align: top;
}
.legal-table th{
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .74rem;
  opacity: .72;
}
@media (max-width: 640px){
  .legal-table{ display: block; overflow-x: auto; white-space: nowrap; }
}

/* Bundle cards carry landscape artwork (a set of books, not one cover), so
   they get a landscape frame. Forcing 3:2 art into the 2:3 book frame left
   the image marooned in the middle of a very tall box. */
/* An 8 x 10 trim cannot fill the 2:3 plate the rest of the shelf uses, so the
   South Beach covers were sitting in thick cream bands. Give those ten cards
   a plate of their own proportion and the cover fills it edge to edge. */
body[data-page="shop"] .book[data-book-series="south-beach"] .cover{
  aspect-ratio: 4 / 5;
}

/* Must match the specificity of body[data-page="shop"] .book .cover, which
   sets 2/3 -- a bare .book--wide .cover loses to it and does nothing. */
body[data-page="shop"] .book--wide .cover{
  aspect-ratio: 3 / 2;
  object-fit: contain;
  padding: 0;
}

/* A bundle takes the whole row ------------------------------------------
 * Sharing a row with a single-cover card cost the bundle art twice: the
 * column was sized for a 2:3 jacket, so a 3:2 picture of three books came
 * in at roughly half the width it needs to be read, and the row beneath it
 * inherited whatever slot was left over -- which is how Prague ended up
 * beside a bundle instead of beside Venice. Given the full row, the art
 * gets a column of its own at about 55% of the grid and the copy sits
 * beside it rather than beneath it, and the single-cover cards resume
 * their own pairing underneath.
 * The card's five children are fixed by shop-catalog.js (cover, meta, h3,
 * formats, buy row), so they are placed explicitly; the 1fr rows top and
 * bottom absorb the height the picture adds and keep the copy centred
 * against it.
 * --------------------------------------------------------------------- */
body[data-page="shop"] .book--wide{
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto auto auto 1fr;
  column-gap: clamp(var(--space-6), 4vw, var(--space-12));
  row-gap: var(--space-4);
}
/* The copy elements carry their own vertical margins, written for a stacked
   card where they set the rhythm. Beside the art they fight the row gap and
   push the block past the height of the picture, so the 1fr rows never get
   any free space to centre it with. Gaps do the spacing here. */
body[data-page="shop"] .book--wide > .meta,
body[data-page="shop"] .book--wide > h3,
body[data-page="shop"] .book--wide > .shop-formats,
body[data-page="shop"] .book--wide > .buy-row{
  margin-block: 0;
}
body[data-page="shop"] .book--wide > .cover,
body[data-page="shop"] .book--wide > .shop-bundle-frame{
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  width: 100%;
}

/* The bundle art wears the same cream mount and inset gold hairline as the
   picks on the home page and the two landing pages, so a bundle reads as one
   object wherever it appears. The frame supplies the paper and the shadow,
   so the image inside drops its own. */
body[data-page="shop"] .shop-bundle-frame{
  margin-bottom: 0;
}
body[data-page="shop"] .shop-bundle-frame .cover{
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  box-shadow: none;
}
body[data-page="shop"] .book--wide:hover .shop-bundle-frame,
body[data-page="shop"] .book--wide:focus-within .shop-bundle-frame{
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px oklch(0.2 0.025 75 / 0.12),
    0 22px 42px -18px oklch(0.2 0.025 75 / 0.38),
    inset 0 1px 0 oklch(1 0 0 / 0.72);
}
@media (prefers-reduced-motion: reduce){
  body[data-page="shop"] .book--wide:hover .shop-bundle-frame{ transform: none; }
}
body[data-page="shop"] .book--wide > .meta{ grid-column: 2; grid-row: 2; align-self: end; }
body[data-page="shop"] .book--wide > h3{ grid-column: 2; grid-row: 3; }
body[data-page="shop"] .book--wide > .shop-formats{ grid-column: 2; grid-row: 4; }
body[data-page="shop"] .book--wide > .buy-row{ grid-column: 2; grid-row: 5; align-self: start; }

/* Below the two-column grid there is no width to put the copy beside the
   art, so the bundle card goes back to being an ordinary stacked card. */
@media (max-width: 700px){
  body[data-page="shop"] .book--wide{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: var(--space-3);
  }
  body[data-page="shop"] .book--wide > .cover,
  body[data-page="shop"] .book--wide > .shop-bundle-frame,
  body[data-page="shop"] .book--wide > .meta,
  body[data-page="shop"] .book--wide > h3,
  body[data-page="shop"] .book--wide > .shop-formats,
  body[data-page="shop"] .book--wide > .buy-row{
    grid-column: 1;
    grid-row: auto;
  }
}

/* ===== Home: the thirty-eight languages =================================
 * Deliberately the quietest band in the start-here section. The bundles
 * above it sell with pictures; this one sells with a single fact and one
 * control, because the reader it is for already knows what they want --
 * they only need to learn the book exists in their language. A rail of
 * thirty-eight covers here would have buried the two bundles it sits under.
 * --------------------------------------------------------------------- */
.world-teaser {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: grid;
  /* Three tracks sized to their content and centred as a group, not two
     columns stretched across the full wrap. Pushed to the page's outer edges
     the fact and the control read as two unrelated blocks; brought together
     around the arrow they read as one sentence -- here is the fact, here is
     what you do about it. */
  grid-template-columns: minmax(0, 27rem) auto minmax(0, 23rem);
  justify-content: center;
  gap: var(--space-5) clamp(1rem, 2.4vw, 2rem);
  align-items: center;
}

/* The arrow between them. Gold, but a hairline weight and 60% opacity so it
   guides without competing with the two gold buttons on the same screen. */
.world-teaser-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-text);
  opacity: 0.6;
}
.world-teaser-arrow svg {
  width: clamp(3rem, 5vw, 5.4rem);
  height: auto;
  display: block;
}
.world-teaser-kicker {
  margin: 0 0 0.55rem;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-text);
}
.world-teaser-lead {
  margin: 0;
  /* One step up from the body size: this band is the only place on the page
     that states the 38-language fact, and at --text-sm it read as a footnote. */
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 46ch;
}
/* The format phrase. Bold and a step up, but deliberately quieter than the
   count below it -- two equal emphases in one sentence is no emphasis. */
.world-teaser-em {
  font-size: 1.14em;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

/* The count is the whole claim: everything else in this band is a qualifier.
   It is set the way the page sets its headlines -- display roman against
   display italic ("Start tonight. Free.", "Not a backlist. A lineage.") --
   so the two words read as one typographic object rather than as two words
   that happen to be bold. The numeral leads; the noun follows a size behind
   it, which is the hierarchy a reader already applies to "38" and
   "languages" without being told. Ink, not gold: the gold button and the
   gold arrow are already doing the pointing on this row, and a third gold
   would flatten all three. */
.world-teaser-count {
  white-space: nowrap;
}
.world-teaser-count-num {
  font-family: var(--font-display);
  font-size: 1.85em;
  font-weight: 600;
  /* Pulled tight so the tall numeral does not open the line it sits on. */
  line-height: 0.9;
  letter-spacing: -0.015em;
  color: var(--color-text);
}
.world-teaser-count-word {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.3em;
  letter-spacing: 0.005em;
  color: var(--color-text);
  margin-left: 0.14em;
}
.world-teaser-label {
  display: block;
  /* Sits on the same line as the kicker opposite it, so the two fields start
     together instead of drifting. */
  margin: 0 0 0.55rem;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}
.world-teaser-control {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: stretch;
}
.world-teaser-select {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.6rem 2rem 0.6rem 0.8rem;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background-color: var(--color-paper);
  /* Chevron drawn rather than fetched: the page ships no icon set, and an
     external asset here would be one request for twelve pixels. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.8rem center;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  appearance: none;
}
.world-teaser-select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.world-teaser-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.world-teaser-note {
  margin: 0.6rem 0 0;
  font-size: var(--text-sm);
}
.world-teaser-note a {
  color: var(--color-text-muted);
  text-underline-offset: 0.2em;
}
.world-teaser-note a:hover { color: var(--color-text); }

@media (max-width: 860px) {
  /* Stacked, so the arrow turns to point down the page instead of across it. */
  .world-teaser {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: var(--space-4);
  }
  .world-teaser-arrow { transform: rotate(90deg); }
  .world-teaser-arrow svg { width: 3rem; }
}

/* The cover the reader picked, once the rail has scrolled to it. A ring
   rather than a scale or a bounce: the rail is a row of book jackets and
   anything that moves them reads as a glitch. */
.world-edition.is-picked img {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  transition: outline-color 300ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .world-edition.is-picked img { transition: none; }
}

/* ---- buying a translated edition, inside the synopsis dialog -------------
 * The reader opened this dialog to read the back cover in their own language;
 * the purchase belongs at the end of that, not stacked on the rail where it
 * would have put seventy-six gold buttons between the covers.
 * ---------------------------------------------------------------------- */
.world-back-buy {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.world-back-buy-row {
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-6);
}
.world-back-buy-row .buy-option {
  align-items: center;
  text-align: center;
}
.world-back-buy-row .buy-direct .shopify-buy__product { text-align: center; }
.world-back-buy-row .buy-direct .shopify-buy__product__price { justify-content: center; }
.world-back-buy-note {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
@media (max-width: 560px) {
  .world-back-buy-row { gap: var(--space-4); }
}

/* The Satoshi page carries four bundles rather than the home page's two, so
   the shared .bundle-pair grid reflows to 2x2 here. Same minmax, so a narrow
   laptop still drops to one column rather than squeezing four abreast. */
/* Two columns, explicitly -- not auto-fit. At 1280px auto-fit found room for
   three and left the fourth alone on its own row, which reads as a mistake
   rather than a set. Four bundles want a square. */
.satoshi-bundle-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: var(--space-8);
}
@media (max-width: 760px) {
  .satoshi-bundle-grid { grid-template-columns: minmax(0, 1fr); }
}
.satoshi-bundles .world-back-buy-note {
  margin-top: var(--space-7);
}

/* ===== Home: the Satoshi band ===========================================
 * One bundle, not four. The shelf-level pitch belongs on the Satoshi page;
 * the home page's job here is to show that a second, very different series
 * exists and give one way in. Art left, copy right -- the mirror of the
 * start-here block above it, so the page alternates rather than repeating.
 * --------------------------------------------------------------------- */
/* The band and the languages picker under it are two rows of the same
   section, so they are built on the same three tracks: the picker's copy
   column, its arrow gutter, and its control column. The art takes the first
   track and the copy the last two, which lands the bundle's left edge on the
   picker's kicker and the band's right edge on its button. Before this the
   band spanned the whole wrap while the picker sat centred and narrower, and
   the image read as shoved to the left of a block it belongs with. */
.satoshi-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 27rem) clamp(3rem, 5vw, 5.4rem) minmax(0, 23rem);
  gap: clamp(var(--space-6), 4vw, var(--space-10)) clamp(1rem, 2.4vw, 2rem);
  justify-content: center;
  align-items: center;
}
.satoshi-band-art { grid-column: 1; }
.satoshi-band-copy { grid-column: 2 / 4; }
.satoshi-band-art {
  display: block;
}
.satoshi-band-art img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.satoshi-band-kicker {
  margin: 0 0 0.4rem;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-text);
}
.satoshi-band-copy > h2 {
  margin: 0 0 0.7rem;
  text-wrap: balance;
}
.satoshi-band-deck {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  max-width: 46ch;
}
.satoshi-band-buy {
  min-width: 0;
  margin-bottom: 0.75rem;
}
.satoshi-band-alt {
  margin: 0;
  font-size: var(--text-sm);
}
.satoshi-band-alt a {
  color: var(--color-text-muted);
  text-underline-offset: 0.2em;
}
.satoshi-band-alt a:hover { color: var(--color-text); }

/* Stacks at the picker's breakpoint, not its own, so the two rows never
   disagree about whether this section is one column or two. */
@media (max-width: 860px) {
  .satoshi-band-inner {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }
  .satoshi-band-art,
  .satoshi-band-copy { grid-column: 1; }
}

/* The "for sale" mark on a rail cover. Deliberately small and gold-on-cream
   rather than a button: thirty-eight gold buttons in a row would turn a shelf
   of jackets into a pricing table. It opens the same synopsis dialog, where
   the two real buy buttons are. */
.world-edition-buy {
  display: block;
  margin: 0.2rem auto 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-text);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity .18s ease;
}
.world-edition-buy:hover,
.world-edition-buy:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 0.18em; }

/* Three bundles read best as a row of three; below a laptop they stack. */
.equilibrist-bundle-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: var(--space-8);
}
@media (max-width: 1000px) {
  .equilibrist-bundle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .equilibrist-bundle-grid { grid-template-columns: minmax(0, 1fr); }
}
.equilibrist-bundles .world-back-buy-note { margin-top: var(--space-7); }

/* ---- 404 ----------------------------------------------------------------
 * Served for any unmatched path, so it has to look deliberate rather than
 * like a failure. One column, the same measure as the rest of the site, and
 * four real routes out rather than a lone "go home".
 * ------------------------------------------------------------------------ */
.not-found {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  max-width: 44rem;
  padding-block: clamp(var(--space-10), 8vw, var(--space-24));
}
.not-found-lead { max-width: 38rem }
.not-found-routes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* ---- Overflow on the oversized cover mockups ----------------------------
 * .rebel-cover-button img and .satoshi-cover are absolutely positioned at a
 * fixed 800-840px and centred with a transform, so they deliberately spill
 * past their container on both sides. The left spill is invisible; the right
 * spill was pushing the document 150-180px wider than the viewport from
 * 760px upward and giving the whole page a horizontal scrollbar with a strip
 * of empty ground beside it.
 *
 * overflow-x: clip rather than hidden: clip trims the overflow without
 * turning the element into a scroll container, so the hover lift and the
 * jacket dialog keep working exactly as before.
 * ------------------------------------------------------------------------ */
body[data-page="rebel-hackers"] .rebel-book,
body[data-page="satoshi"] .satoshi-cover-wrap {
  overflow-x: clip;
}

/* ---- Shop: retailers are a footnote, and a way in for a first-time visitor --
   A co-equal Amazon button beside our own put a $6.24 alternative next to a
   $24.95 sale, 37 times over. The link stays -- as one quiet line. The Start
   here row exists because a filter bar only helps a visitor who already knows
   the word "Orloj".                                                         */
body[data-page="shop"] .book .shop-retailer {
  flex: 1 1 100%;
  margin: .1rem 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

body[data-page="shop"] .book .shop-retailer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body[data-page="shop"] .book .shop-retailer a:hover,
body[data-page="shop"] .book .shop-retailer a:focus-visible {
  color: var(--color-primary-text);
}

.shop-start-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin-top: var(--space-6);
}

/* Same centre line as the shelves below: the four start cards are the first
   book cards on the page, so they follow the grid's alignment. */
.shop-start-card {
  text-align: center;
}
.shop-start-card {
  display: grid;
  gap: .55rem;
  text-decoration: none;
  color: inherit;
  align-content: start;
}

.shop-start-card img {
  width: 100%;
  height: auto;
  box-shadow: 0 .75rem 1.8rem rgba(21, 51, 51, .16);
}

.shop-start-card h3 {
  margin: 0;
  font-size: var(--text-lg);
}

.shop-start-card .meta {
  margin: .2rem 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.shop-start-card p:last-child {
  margin: 0;
  font-size: var(--text-sm);
}

.shop-start-card:hover h3,
.shop-start-card:focus-visible h3 {
  color: var(--color-primary-text);
}

/* ---------------------------------------------------------------------------
   The Silent Tenant release, inside the covenant / convergence section.

   The mockup ships on its own near-black ground: #16171B at the top corners,
   #0F1014 at the foot, sampled from the file. The section takes that same grey
   so the art sits on the page with no plate and no seam.
   --------------------------------------------------------------------------- */
.algorithm-covenant,
.rebel-convergence {
  background: #1a1d22;
}

/* The cream plate on figures is a print-plate motif. Right for the threshold
   band, wrong for a mockup that already carries its own ground. */
.algorithm-covenant .st-release-cover,
.rebel-convergence .st-release-cover {
  padding: 0;
  background: none;
}

/* With a release block underneath it, the full-bleed banner was reading as the
   subject of the section. Cap it so it frames rather than dominates. */
.algorithm-threshold-band img,
.rebel-threshold-band img {
  max-height: clamp(13rem, 24vw, 21rem);
  object-fit: cover;
  object-position: center;
}

.st-release {
  grid-column: 1 / -1;
  margin-top: clamp(var(--space-10), 6vw, var(--space-16));
}

/* The link that closes the section follows the release on the same axis. */
.algorithm-covenant-links,
.rebel-convergence-links {
  grid-column: 1 / -1;
  justify-content: center;
}

.st-release-panel {
  display: grid;
  justify-items: center;
  margin: 0 auto;
  text-align: center;
}

/* [hidden] is a user-agent display:none, which any author display rule beats.
   Without this both language panels render at once. */
.st-release-panel[hidden] {
  display: none !important;
}

.st-release-cover {
  width: min(100%, 50rem);
  margin: 0;
}

.st-release-cover img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 48%, #000 62%, transparent 97%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 48%, #000 62%, transparent 97%);
}

.st-release-kicker {
  margin: 0;
  color: #d4b45a;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.st-release-title {
  margin: 0.5rem 0 0.3rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  font-weight: 400;
  line-height: 1.04;
}

.st-release-sub {
  margin: 0 0 clamp(var(--space-6), 3vw, var(--space-8));
  color: #c7c3b9;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.st-buy {
  justify-content: center;
  gap: var(--space-4) var(--space-5);
}

.st-buy .buy-option {
  min-width: 9.5rem;
  align-items: center;
  text-align: center;
}

.st-buy .buy-direct {
  width: 100%;
  min-width: 9.5rem;
}

.st-buy .buy-format,
.st-buy .buy-direct .shopify-buy__product__actual-price {
  color: rgb(244 240 230 / 0.58);
}

.st-buy .buy-direct .shopify-buy__product,
.st-buy .buy-direct .shopify-buy__product__price {
  justify-content: center;
  text-align: center;
}

.st-buy .buy-direct .btn,
.st-buy .buy-direct .shopify-buy__btn {
  width: 100%;
  padding-inline: 0.75rem;
  font-size: var(--text-xs);
}

.st-release-soon {
  margin-top: var(--space-5);
  color: rgb(244 240 230 / 0.55);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
}

@media (max-width: 40rem) {
  .st-release-cover {
    width: min(100%, 20rem);
  }
  .st-buy {
    gap: var(--space-3);
  }
}

/* A book that is announced but not yet on sale keeps its cover in the grid and
   says so with a gold flag, the same signal the audiobook shelf uses. */
.shop-cover-wrap {
  position: relative;
  display: block;
}

.shop-cover-wrap .cover {
  display: block;
  width: 100%;
}

.shop-soon {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  padding: 0.22rem 0.5rem;
  border-radius: 2px;
  background: var(--color-primary);
  color: #1a1610;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The poetry trio reads as a set: the two companion volumes side by side, the
   compendium centred beneath them. That used to depend on how many books
   happened to precede it, which broke every time a title was added. Start the
   pair on a fresh row instead, so the arrangement holds at any column count
   and survives the next book. */
body[data-page="shop"] .book-grid .book[data-book-title="Poetry in Equilibrium"],
body[data-page="shop"] .book-grid .book[data-book-title="Poes\00ED a en Equilibrio"] {
  grid-column-start: 1;
}

/* The release block is centred, so the link that closes the section follows it
   on the same axis instead of dropping back to the left margin. */
.algorithm-covenant .st-release ~ .algorithm-covenant-links,
.rebel-convergence .st-release ~ .rebel-convergence-links {
  justify-content: center;
}


/* ---------------------------------------------------------------------------
   The convergence statement.

   The section's whole reason to exist is that one book stands in both sagas,
   and until now that was said in a heading below a banner nearly two thirds of
   a viewport tall. Stated above the band instead, in Boska at statement scale,
   with a gold hairline that hands the eye down into the threshold image.
   --------------------------------------------------------------------------- */
.algorithm-covenant .covenant-statement,
.rebel-convergence .covenant-statement {
  max-width: min(26ch, calc(100vw - 2rem));
  margin: 0 auto clamp(var(--space-10), 6vw, var(--space-16));
  color: #f4f0e6;
  font-family: "Boska", var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-align: center;
  text-wrap: balance;
}

.algorithm-covenant .covenant-statement::after,
.rebel-convergence .covenant-statement::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 1px;
  margin: clamp(var(--space-5), 2.5vw, var(--space-8)) auto 0;
  background: #d4b45a;
}

/* The book's name inside the covenant heading. Italic because it is the title
   of a work, and a shade larger so the eye lands on it before the claim it
   sits in. The heading is two elements, not one with a tag inside it: see
   _build/covenant_title_italic.py for why. */
.algorithm-covenant h2 .work-title,
.rebel-convergence h2 .work-title {
  font-size: 1.14em;
  font-style: italic;
  letter-spacing: -.03em;
}

/* ---------------------------------------------------------------------------
 * Free-companion audiobook module (novella + saga pages).
 * Deliberately its own namespace: the audiobooks catalogue uses .ab-listen and
 * is scoped to body[data-page='audiobooks'], and this must not disturb it.
 * English only -- the block carries data-lang-panel="en".
 * ------------------------------------------------------------------------- */
.nv-audio{
  display:flex; align-items:center; gap:clamp(14px,3vw,22px);
  margin:var(--space-4) 0; padding:clamp(14px,3vw,18px);
  border:1px solid rgba(20,16,10,.14); border-radius:4px;
  background:rgba(255,255,255,.42);
}
.nv-audio-art{
  position:relative; flex:0 0 auto;
  width:clamp(96px,22vw,132px); aspect-ratio:1;
  border-radius:3px; overflow:hidden;
  box-shadow:0 2px 10px rgba(20,16,10,.22);
}
.nv-audio-art img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Reader's Club rows: the same block, sized for a 34rem body column and set
   apart from the blurb by a rule rather than its own panel, so five of them
   down the page read as part of each row instead of five stacked cards. */
.nv-audio--row{
  margin:1.15rem 0 1.15rem; padding:1.05rem 0 0;
  gap:clamp(12px,2.4vw,16px);
  border:0; border-top:1px solid rgba(120,104,68,.28);
  border-radius:0; background:none;
}
.nv-audio--row .nv-audio-art{ width:clamp(80px,20vw,104px); }
.nv-audio--row .nv-audio-meta{ font-size:.85rem; }
.nv-audio-intro{ margin-top:.9rem; }
.nv-audio-body{ min-width:0; }
.nv-audio-kicker{
  margin:0 0 .25em; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; opacity:.62;
}
.nv-audio-title{ margin:0 0 .3em; font-size:1.02rem; line-height:1.25; }
.nv-audio-meta{ margin:0; font-size:.88rem; opacity:.76; }
.nv-audio-meta b{ font-weight:600; }

/* The listen control sits over the artwork: a clear ring and a white
   triangle, so the cover shows through rather than being covered by a chip. */
.nv-listen{
  position:absolute; inset:0; margin:0; padding:0;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer;
  -webkit-appearance:none; appearance:none; z-index:2;
}
.nv-listen-disc{
  position:relative; width:clamp(38px,32%,56px); aspect-ratio:1;
  border-radius:50%; background:transparent;
  border:1.5px solid rgba(255,255,255,.88);
  box-shadow:0 1px 6px rgba(20,16,10,.45), inset 0 0 6px rgba(20,16,10,.28);
  display:grid; place-items:center;
  transition:background .18s ease, transform .18s ease, border-color .18s ease;
}
.nv-listen-disc::after{
  content:''; width:34%; aspect-ratio:1; background:#fff;
  filter:drop-shadow(0 1px 2px rgba(20,16,10,.45));
  clip-path:polygon(18% 6%, 18% 94%, 92% 50%);
  transform:translateX(6%);
  transition:clip-path .16s ease, transform .16s ease, width .16s ease;
}
.nv-listen:hover .nv-listen-disc,
.nv-listen:focus-visible .nv-listen-disc{
  background:rgba(255,255,255,.10); border-color:#fff; transform:scale(1.06);
}
.nv-listen:focus-visible{ outline:2px solid currentColor; outline-offset:-6px; }
.nv-listen:active .nv-listen-disc{ transform:scale(.98); }
.nv-listen.is-playing .nv-listen-disc::after{
  width:30%; transform:none;
  clip-path:polygon(6% 6%, 34% 6%, 34% 94%, 6% 94%, 6% 6%,
                    66% 6%, 94% 6%, 94% 94%, 66% 94%, 66% 6%);
}
.nv-listen.is-playing .nv-listen-disc::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  background:conic-gradient(rgba(255,255,255,.95) calc(var(--p,0) * 360deg),
                            rgba(255,255,255,.18) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
.nv-listen-time{
  position:absolute; left:50%; bottom:8%; transform:translateX(-50%);
  font-size:.7rem; color:#fff; text-shadow:0 1px 3px rgba(20,16,10,.7);
  font-variant-numeric:tabular-nums;
}
@media (prefers-reduced-motion:reduce){
  .nv-listen-disc, .nv-listen-disc::after{ transition:none; }
}
@media (max-width:480px){
  .nv-audio{ flex-direction:column; align-items:flex-start; }
}


/* ===== Journal: the way out ================================================
   The 162 articles are the site's largest organic surface and every one of
   them used to end with no link to anything for sale and no way to leave an
   email address. This block is injected at build time by journal_cta.py. */
.journal-cta{
  max-width:44rem; margin:clamp(2.5rem,5vw,4rem) auto 0;
  padding:clamp(1.6rem,3.5vw,2.4rem);
  border:1px solid rgba(120,104,68,.30); border-radius:4px;
  background:var(--color-surface); text-align:center;
}
.journal-cta-kicker{
  margin:0 0 .5em; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-text-muted);
}
.journal-cta h2{
  margin:0 0 .5em; font-family:var(--font-display);
  font-size:clamp(1.45rem,1.1rem+1.4vw,2rem); font-weight:500; line-height:1.12;
}
.journal-cta p.journal-cta-lede{
  margin:0 auto 1.4rem; max-width:40rem; color:var(--color-text-muted);
}
.journal-cta-actions{
  display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin:0;
}
@media (max-width:520px){
  .journal-cta-actions .btn{ width:100%; }
}


/* ===== The terms, where the decision happens ===============================
   Every clause is taken from the live Shopify refund and shipping policies,
   not invented. Built at build time by buy_trust.py.

   This was an inline strip of four spans, each an inline-flex. A flex
   container makes every text run its own item, so "Ships in 1 to 3 business
   days from the US" shattered into stacked columns as soon as the space
   narrowed. It is a table now, which is what the content actually is: four
   terms and their values, stated once for everything on the page. */
.buy-terms{
  width:100%; border-collapse:collapse; margin:0 0 1.4rem;
  font-size:.85rem; line-height:1.5; color:var(--color-text-muted);
  border-top:1px solid rgba(120,104,68,.22);
  border-bottom:1px solid rgba(120,104,68,.22);
}
.buy-terms caption{
  caption-side:top; text-align:left; font-size:var(--text-xs);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-text-faint); padding:0 0 .5rem;
}
.buy-terms th,
.buy-terms td{ text-align:left; vertical-align:baseline; padding:.5rem .9rem .5rem 0; }
.buy-terms th{ font-weight:600; color:var(--color-text); white-space:nowrap; width:1%; }
.buy-terms td:last-child{ padding-right:0; }
.buy-terms tr + tr th,
.buy-terms tr + tr td{ border-top:1px solid rgba(120,104,68,.12); }
/* On a phone the two columns cannot both breathe, so the term becomes a label
   above its value rather than a squeezed column beside it. */
@media (max-width:30rem){
  .buy-terms, .buy-terms caption, .buy-terms tbody, .buy-terms tr,
  .buy-terms th, .buy-terms td{ display:block; width:auto; }
  /* A caption inside a table that has been switched to display:block loses
     its table-caption sizing and collapses to one word per line. */
  .buy-terms caption{ width:100%; }
  .buy-terms th{ padding:.6rem 0 .1rem; white-space:normal; }
  .buy-terms td{ padding:0 0 .6rem; }
  .buy-terms tr + tr th{ border-top:1px solid rgba(120,104,68,.12); }
  .buy-terms tr + tr td{ border-top:0; }
}
/* The shelf states the terms once, above the grid, so they read as applying
   to everything below rather than to whichever card they happened to land in. */
.shop-language-heading + .buy-terms{ max-width:46rem; margin-top:.4rem; }

/* ---------------------------------------------------------------------------
 * The word FREE in the free-novella blocks
 *
 * The offer is the whole point of those blocks, and the word carrying it was
 * set at the same size and weight as the words around it. Sized in em rather
 * than rem so it stays proportional to whatever it sits in: a small uppercase
 * kicker, a display heading, or a gold button.
 * ------------------------------------------------------------------------- */
.free-word {
  font-size: 1.18em;
  font-weight: 700;
  font-style: italic;
}
/* Buttons are flex containers, so the whitespace either side of the word is
   collapsed away and "All free novellas" runs together as one word. Margin
   puts the gap back; nothing else on the site lays type out with flex. */
.btn .free-word,
.sh-action .free-word {
  margin-inline: 0.2em;
}
/* The kickers are uppercase and letter-spaced; italic at that tracking leans
   away from the following word, so give it back a little room. */
.kicker .free-word,
.sh-label .free-word,
.nv-audio-kicker .free-word,
.algorithm-kicker .free-word,
.rebel-kicker .free-word {
  margin-right: 0.08em;
}