/*
Theme Name: BA Preview
Theme URI: https://benalldridge.com
Author: Ben Alldridge
Description: WordPress/WooCommerce implementation of the approved benalldridge.com preview interface.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 8.2
Text Domain: ba-preview
*/

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url("assets/fonts/fraunces-latin.woff2") format("woff2");
}

@property --gallery-darkness {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --color-ink: #0a0a0a;
  --color-paper: #f3eddd;
  --color-ash: #6b6b68;
  --color-hairline: #e5e2db;
  --surface-paper-tinted: #f3eddd;
  --editorial-reading: 50rem;
  --gallery-start-paper: var(--color-paper);
  --gallery-start-ink: var(--color-ink);
  --gallery-start-ash: var(--color-ash);
  --gallery-start-hairline: var(--color-hairline);
  --gallery-end-paper: #0a0a0a;
  --gallery-end-ink: #f3eddd;
  --gallery-end-ash: #9a9a95;
  --gallery-end-hairline: #1f1e1b;
  --gallery-transition-duration: 1.5s;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: Fraunces, ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --content-max: 1600px;
  --detail-media-max: 1536px;
  --rail: 1.1111rem;
  --surface-shell-max: 1600px;
  --detail-chrome-max: 28rem;
  --detail-media-sticky-top: 5rem;
  --display-density-scale: 1;
  --block-rhythm-scale: 0.67;
  --paragraph-leading-contract: 1.84;
  --paragraph-lh: calc(1rem * var(--paragraph-leading-contract));
  --clearance-light: calc(var(--paragraph-lh) * 1.125 * var(--display-density-scale));
  --clearance-dark: calc(var(--paragraph-lh) * 1.25 * var(--display-density-scale));
  --section-rhythm: calc(clamp(1.75rem, 3vw, 3.25rem) * var(--display-density-scale));
  --section-content-rhythm: calc(clamp(1.75rem, 3vw, 3rem) * var(--display-density-scale));
  --page-start-gap: clamp(2.35rem, 3.2vw, 2.56rem);
  --layout-column-gap: clamp(2rem, 3.2vw, 2.56rem);
  --section-stack-gap: calc(var(--clearance-dark) * 1.6);
  --section-rule-gap: var(--clearance-light);
  --site-header-height: 3.5556rem;
  --type-h5: 0.8125rem;
  --type-h4: calc(var(--type-h5) * 1.2);
  --type-h3: calc(var(--type-h4) * 1.4);
  --type-h2: calc(var(--type-h3) * 1.5);
  --type-h1: calc(var(--type-h2) * 1.7);
  --type-eyebrow: 0.8125rem;
  --tracking-eyebrow: 0.14em;
  --type-eyebrow-compact: 0.75rem;
  --tracking-eyebrow-compact: 0.12em;
  --type-title-page: clamp(2.25rem, 5vw, 4.5rem);
  --type-title-detail: clamp(1.75rem, 3vw, 2.5rem);
  --type-title-section: clamp(2rem, 4vw, 3.25rem);
  --type-title-tile: clamp(1.5rem, 2.4vw, 2.25rem);
  --type-price-headline: clamp(2.25rem, 5vw, 3.5rem);
  --type-price-peer: 1.25rem;
}

:root[data-display-density="compact"] {
  --display-density-scale: 0.75;
}

:root[data-display-density="wide"] {
  --display-density-scale: 1.5;
}

:root[data-theme-resolved="dark"] {
  --color-ink: #f3eddd;
  --color-paper: #181616;
  --section-rhythm: calc(clamp(1.9rem, 3.25vw, 3.5rem) * var(--display-density-scale));
  --section-content-rhythm: calc(clamp(1.85rem, 3.2vw, 3.15rem) * var(--display-density-scale));
  --color-ash: #a8a097;
  --color-hairline: #33312e;
  --surface-paper-tinted: #181616;
}

:root[data-contrast-preference="high"][data-theme-resolved="light"] {
  --color-ink: #000;
  --color-paper: #fff7e8;
  --color-ash: #3b3933;
  --color-hairline: #6a6257;
  --surface-paper-tinted: #fff7e8;
}

:root[data-contrast-preference="high"][data-theme-resolved="dark"] {
  --color-ink: #fff8e8;
  --color-paper: #050505;
  --color-ash: #e0d8c8;
  --color-hairline: #8a8276;
  --surface-paper-tinted: #050505;
}

@media (min-width: 768px) {
  :root {
    --rail: 2rem;
    --type-h5: 0.9375rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --type-h5: 1rem;
  }
}

@media (min-width: 1440px) {
  :root {
    --rail: 2.6667rem;
    --type-h5: 1.0625rem;
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--surface-paper-tinted);
  color: var(--color-ink);
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 4px;
}

:root[data-focus-mode="strong"] :focus-visible {
  outline-width: 4px;
  outline-offset: 6px;
}

:root[data-link-visibility="underline"] main a,
:root[data-link-visibility="underline"] footer a {
  text-decoration-line: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.22em;
}

:root[data-motion-preference="reduce"] *,
:root[data-motion-preference="reduce"] *::before,
:root[data-motion-preference="reduce"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}

:root[data-transparency-preference="reduce"] .site-header,
:root[data-transparency-preference="reduce"] .home-hero::after {
  backdrop-filter: none !important;
}

.screen-reader-text,
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  inset-block-start: 1rem;
  inset-inline-start: var(--rail);
  z-index: 1000;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 0.65rem 0.9rem;
}

.rail-gutter {
  padding-inline: var(--rail);
}

.immersive-shell,
.editorial-shell,
.detail-media-shell {
  width: min(100%, var(--surface-shell-max));
  margin-inline: auto;
}

.guide-detail-shell {
  width: min(100%, var(--detail-media-max));
  margin-inline: auto;
  padding-inline: var(--rail);
}

.guide-page-start {
  padding-top: var(--page-start-gap);
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  --header-paper-current: color-mix(in oklab, var(--surface-paper-tinted) 96%, #c8bda8 4%);
  --header-ink-current: var(--color-ink);
  --header-ash-current: color-mix(in oklab, var(--color-ink) 62%, var(--color-paper) 38%);
  --header-hairline-current: color-mix(in oklab, var(--color-hairline) 82%, #7c7264 18%);
  --header-surface: color-mix(in oklab, var(--header-paper-current) 96%, var(--header-ink-current) 4%);
  border-block-end: 1px solid var(--header-hairline-current);
  background: var(--header-surface);
  color: var(--header-ink-current);
  box-shadow: 0 18px 42px rgba(18, 14, 10, 0.06);
  backdrop-filter: blur(18px);
}

.home .site-header {
  --header-paper-current: #181616;
  --header-ink-current: #f3eddd;
  --header-ash-current: #a8a097;
  --header-hairline-current: #33312e;
  --header-surface: color-mix(in oklab, #181616 88%, transparent);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.3);
}

.site-header__inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.45rem 0.7rem;
}

@media (min-width: 768px) {
  .site-header__inner {
    min-height: 63px;
    padding-block: 0;
  }
}

@media (min-width: 1024px) {
  .site-header__inner {
    min-height: 63px;
  }
}

.ba-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ba-wordmark__mark {
  display: none;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
}

.ba-wordmark__lines {
  display: grid;
  gap: 0.14rem;
}

@media (min-width: 768px) {
  .ba-wordmark {
    font-size: 1.125rem;
    letter-spacing: 0.28em;
  }

  .ba-wordmark__mark {
    display: block;
  }

  .ba-wordmark__lines {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55em;
  }
}

.site-menu-button,
.ba-button-primary,
.button,
button[type="submit"],
input[type="submit"] {
  min-height: 44px;
  border: 1px solid var(--color-ink);
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 0.72rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}

.site-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border: 0;
  background: transparent;
  color: var(--header-ink-current);
  padding-inline: 0;
}

.site-menu-button__glyph {
  display: grid;
  gap: 0.22rem;
  inline-size: 1rem;
}

.site-menu-button__glyph span {
  display: block;
  block-size: 1px;
  background: currentColor;
}

.site-header__nav {
  display: none;
}

.site-header__nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.65rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}

@media (min-width: 1024px) {
  .site-header__nav {
    display: block;
  }

  .site-menu-button {
    display: none;
  }
}

.site-header__mobile-nav {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease;
}

.site-header[data-open="true"] .site-header__mobile-nav {
  max-height: 24rem;
  opacity: 1;
  border-top: 1px solid var(--header-hairline-current);
}

.site-header__mobile-nav ul {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0 0 1rem;
}

.site-header__mobile-nav li {
  border-bottom: 1px solid var(--header-hairline-current);
}

.site-header__mobile-nav a {
  display: block;
  min-height: 56px;
  padding-block: 1rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
}

@media (min-width: 1024px) {
  .site-header__mobile-nav {
    display: none;
  }
}

.site-main {
  min-height: 55svh;
}

.home-hero {
  position: relative;
  isolation: isolate;
  height: 66svh;
  max-height: 34rem;
  overflow: hidden;
  background: #181616;
  color: #f3eddd;
}

.home-hero__frames,
.home-hero__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.home-hero__frame {
  z-index: -2;
  opacity: 0;
  transition: opacity 1500ms ease;
}

.home-hero__frame[data-active="true"] {
  opacity: 1;
}

.home-hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.home-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgb(24 22 22 / 0.18), transparent 44%, rgb(24 22 22 / 0.72));
}

.home-hero__inner {
  display: grid;
  width: 100%;
  max-width: none;
  height: 100%;
  margin-inline: 0;
  align-content: end;
  padding-top: clamp(3rem, 9svh, 4.5rem);
  padding-bottom: 0;
}

.home-hero__content {
  position: relative;
  display: grid;
  align-items: end;
}

.home-hero__line {
  margin: 0;
  max-width: min(100%, 22.65rem);
  min-height: 8.4rem;
  font-family: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  font-size: 3.4rem;
  font-weight: 400;
  font-variation-settings: "wght" 400, "opsz" 144;
  line-height: 0.82;
  color: #f3eddd;
  text-wrap: wrap;
  white-space: pre-line;
  text-shadow:
    0 0 0.5px rgb(243 237 221 / 0.82),
    0 1px 2px rgb(0 0 0 / 0.45);
  /* Tagline sits its own 0.67em clearance above the hero's bottom edge;
     the value recomputes automatically at each breakpoint's font-size
     (including the xxl 6.9rem treatment) since em is resolved against
     this rule's own font-size, not inherited. */
  padding-bottom: 0.67em;
}

.hero-frame-controls {
  /* Absolutely positioned so the hidden-until-focus control cluster never
     reserves grid space in .home-hero__content -- otherwise the tagline
     gets pushed up by an invisible block, defeating the bottom anchor. */
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  color: #f3eddd;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.hero-frame-controls:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.hero-frame-controls__nav,
.hero-frame-indicators {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 44px;
  align-items: center;
  justify-content: start;
}

.hero-frame-indicators {
  min-height: 44px;
}

.hero-frame-button,
.hero-frame-indicator {
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
  transition:
    color 180ms ease,
    opacity 180ms ease;
}

.hero-frame-button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
}

.hero-frame-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.hero-frame-button:hover,
.hero-frame-indicator:hover {
  color: color-mix(in oklab, #f3eddd 72%, #ffffff 28%);
}

.hero-frame-indicator {
  position: relative;
  width: 44px;
  height: 44px;
  opacity: 0.48;
}

.hero-frame-indicator span {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 50%;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
}

.hero-frame-indicator[data-active="true"] {
  opacity: 1;
}

.hero-frame-indicator[data-active="true"] span {
  height: 2px;
}

/* Same icon-button + line-indicator visual language as the hero carousel
   (.hero-frame-*), reused wherever a frame carousel sits on a light/paper
   surface instead of the hero's dark image -- e.g. the About portrait rail.
   Unlike the hero, always visible (no focus-reveal hiding): these aren't an
   autoplay-with-hidden-controls surface, just a plain manual carousel. */
.media-frame-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  color: #f3eddd;
}

.media-frame-controls--on-light {
  color: var(--color-ink);
}

.media-frame-controls__nav,
.media-frame-indicators {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 44px;
  align-items: center;
  justify-content: start;
}

.media-frame-indicators {
  min-height: 44px;
}

.media-frame-button,
.media-frame-indicator {
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
  transition:
    color 180ms ease,
    opacity 180ms ease;
}

.media-frame-button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
}

.media-frame-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.media-frame-button:hover,
.media-frame-indicator:hover {
  color: color-mix(in oklab, #f3eddd 72%, #ffffff 28%);
}

.media-frame-controls--on-light .media-frame-button:hover,
.media-frame-controls--on-light .media-frame-indicator:hover {
  color: color-mix(in oklab, var(--color-ink) 72%, var(--color-ash) 28%);
}

.media-frame-indicator {
  position: relative;
  width: 44px;
  height: 44px;
  opacity: 0.48;
}

.media-frame-indicator span {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 50%;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
}

.media-frame-indicator[data-active="true"] {
  opacity: 1;
}

.media-frame-indicator[data-active="true"] span {
  height: 2px;
}

.rhythm-section {
  padding-block: var(--section-rhythm);
}

.rhythm-section--first {
  padding-top: calc(var(--section-rhythm) * 0.72);
}

.rhythm-section__content {
  margin-top: var(--section-content-rhythm);
}

.home-about {
  margin-top: clamp(1rem, 2vh, 1.5rem);
  padding-top: 0;
}

.home-about .rhythm-section__content {
  margin-top: 0.9rem;
}

.about-excerpt p:first-child {
  max-width: none;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.55vw, 2.25rem);
  font-weight: 300;
  line-height: 1.22;
}

@media (min-width: 87.5rem) {
  .about-excerpt p:first-child {
    max-width: var(--editorial-reading, 50rem);
  }
}

.about-excerpt__link {
  margin: 1.5rem 0 0;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.section-rule {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section-rule span {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ash);
}

.section-rule i {
  display: block;
  height: 1px;
  flex: 1;
  background: var(--color-hairline);
}

.series-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 1.5rem;
  list-style: none;
  margin-block: 0;
  padding-block: 0;
}

/* On /prints the same series tiles precede a catalogue of individual print
   thumbnails at a smaller scale -- full-bleed single-column tiles here read
   oversized next to that catalogue, so match the multi-column density used
   at the largest breakpoint instead of waiting for min-width:1024px. */
.prints-series-grid .series-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1rem;
}

@media (min-width: 640px) {
  .prints-series-grid .series-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.series-card {
  display: block;
  text-decoration: none;
}

.series-card__image {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: color-mix(in oklab, var(--color-ink) 5%, transparent);
}

.series-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms ease-out;
}

.series-card:hover .series-card__image img {
  transform: scale(1.01);
}

.series-card__title {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1;
}

.work-reference-hero {
  padding-block: clamp(2.55rem, 4vw, 2.6rem) var(--gallery-stack-gap, clamp(2rem, 4vw, 3rem));
}

.work-reference-hero h1 {
  margin: 0;
  max-width: 50rem;
  font-family: var(--font-serif);
  font-size: var(--type-title-page);
  font-weight: 400;
  line-height: 1.02;
}

.work-reference-categories h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.work-reference-showcase-section {
  margin-block-start: var(--section-rhythm);
  border-block-start: 1px solid var(--color-hairline);
  padding-block-start: var(--clearance-dark);
}

.work-reference-showcase__title {
  margin: 0;
  max-width: 50rem;
  font-family: var(--font-serif);
  font-size: var(--type-title-page);
  font-weight: 400;
  line-height: 1.02;
}

.series-showcase {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: var(--section-content-rhythm) calc(var(--section-content-rhythm) * 0.7);
}

.series-showcase-card a {
  display: grid;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
}

.series-showcase-card__image {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: color-mix(in oklab, var(--color-ink) 5%, transparent);
}

.series-showcase-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.series-showcase-card__body {
  display: grid;
  gap: 0.75rem;
  border-top: 1px solid var(--color-hairline);
  padding-top: 1rem;
}

.series-showcase-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  line-height: 1.05;
}

.series-showcase-card__copy {
  max-width: 42rem;
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.58;
  color: var(--color-ash);
}

.work-reference-filter {
  padding-block: 0 var(--section-rhythm);
}

.work-reference-filter form {
  display: grid;
  gap: 0.8rem;
  border-block: 1px solid var(--color-hairline);
  padding-block: 1.25rem;
}

.work-reference-filter label {
  display: grid;
  gap: 0.45rem;
}

.work-reference-filter span,
.work-reference-filter button,
.work-reference-filter nav {
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.work-reference-filter span {
  color: var(--color-ash);
}

.work-reference-filter input {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid var(--color-hairline);
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: 0.9375rem;
}

.work-reference-filter button {
  justify-self: start;
  border: 1px solid var(--color-hairline);
  background: transparent;
  color: var(--color-ink);
  padding: 0.8rem 1rem;
  cursor: pointer;
}

.work-reference-filter nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  margin-top: 1rem;
}

.work-reference-filter a {
  color: var(--color-ash);
  text-underline-offset: 0.24em;
}

.work-reference-filter__chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--color-hairline);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}

.work-reference-filter__chip:hover {
  background: color-mix(in oklab, var(--color-ink) 6%, transparent);
}

.work-reference-filter__chip.is-active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

@media (min-width: 760px) {
  .series-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .series-showcase-card a {
    grid-template-columns: 1fr;
  }

  .work-reference-filter form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 1.5rem;
}

.feature-tile {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}

.feature-tile h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-ink);
}

.feature-tile h3 a {
  color: inherit;
  text-decoration: none;
}

.feature-tile h3 a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.feature-tile .ba-eyebrow {
  margin-top: 0.75rem;
}

.feature-tile p:not(.ba-eyebrow) {
  margin: 1rem 0 0;
  font-family: var(--font-serif);
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.feature-tile a {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-underline-offset: 0.25rem;
}

.recognition-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 2.5rem;
  color: var(--color-ink);
  list-style: none;
  margin: 0;
  padding: 0;
  /* Marks are sized in em against this font-size; bumped so the rendered
     height clears --type-h2 (a mark shorter than a natural H2 read as an
     afterthought next to the other section headers on this page). */
  font-size: 1.2em;
}

.recognition-ribbon li {
  display: flex;
  align-items: center;
}

.press-mark {
  display: inline-flex;
  align-items: center;
}

.press-mark--fallback {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1;
}

.cart-surface {
  padding-block: clamp(4rem, 6.25vw, 5rem) clamp(8rem, 14vw, 12rem);
}

.cart-surface h1 {
  margin: 0 0 2.5rem;
  font-family: var(--font-serif);
  font-size: clamp(2.22rem, 5vw, 4.1rem);
  font-weight: 400;
  line-height: 1;
}

.cart-rule {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--color-hairline);
}

.cart-rule span {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ash);
}

.cart-rule i {
  height: 1px;
  flex: 1;
  background: var(--color-hairline);
}

.cart-empty {
  padding-block: 2.6rem;
  border-bottom: 1px solid var(--color-hairline);
}

.cart-empty h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 2.6vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
}

.cart-empty p {
  max-width: 42rem;
  margin: 1.55rem 0 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.55;
}

.cart-empty p:nth-of-type(1) {
  color: var(--color-ash);
}

.settings-surface,
.utility-page {
  padding-block: clamp(1.4rem, 2vw, 1.8rem) var(--section-rhythm);
}

@media (max-width: 719px) {
  .settings-surface,
  .utility-page {
    padding-top: 0;
  }
}

.settings-surface.immersive-shell {
  width: 100%;
  max-width: none;
}

@media (min-width: 1800px) {
  .settings-surface.rail-gutter {
    --layout-column-gap: clamp(6rem, 8.7vw, 11rem);
    padding-inline: clamp(5.5rem, 5.55vw, 7.25rem);
  }
}

.settings-hero {
  padding-block: 0 var(--section-content-rhythm);
}

.preferences-heading {
  border-top: 1px solid var(--color-hairline);
  padding-block: var(--clearance-light);
}

.preferences-heading h2 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-ash);
}

.preferences-layout,
.preferences-form {
  display: block;
}

.preferences-preview {
  display: grid;
  gap: var(--clearance-light);
  border-top: 1px solid var(--color-hairline);
  padding-block: var(--clearance-light);
}

.utility-grid h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  font-weight: 400;
  line-height: 1.1;
}

.preferences-panel h2,
.preferences-panel legend,
.preferences-preview h2,
.settings-save-panel h2 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-ash);
}

.preferences-preview__intro {
  display: grid;
  gap: 2.35rem;
  align-content: start;
}

.preferences-preview__intro p {
  max-width: 18rem;
  margin: 0;
  color: var(--color-ash);
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.preferences-preview__reader {
  border: 1px solid var(--color-hairline);
  padding: clamp(1.25rem, 1.85vw, 2rem);
}

.preferences-preview__reader .ba-eyebrow {
  margin: 0;
  color: var(--color-ink);
}

.preferences-preview__reader .ba-eyebrow + .preferences-preview__sample {
  margin-top: clamp(1.2rem, 1.8vw, 2.5rem);
}

.preferences-preview__sample {
  max-width: 64rem;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.35vw, 1.55rem);
  line-height: 1.55;
}

.utility-grid p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.65;
}

.preferences-preview dl {
  display: grid;
  gap: 1rem;
  margin: clamp(1.1rem, 1.8vw, 2rem) 0 0;
  border-top: 1px solid var(--color-hairline);
  padding-top: clamp(1rem, 1.5vw, 1.65rem);
}

.preferences-preview dl div {
  display: grid;
  gap: 0.25rem;
}

.preferences-preview dt,
.preferences-status,
.preferences-panel legend,
.preferences-panel label > span,
.toggle-line > span {
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.preferences-preview dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.45;
}

.preferences-status {
  color: var(--color-ash);
}

.preferences-panel {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-hairline);
  padding: var(--clearance-light) 0;
}

.preferences-panel__intro p,
.preferences-applies,
.preferences-panel small,
.toggle-line small {
  margin: 0;
  color: var(--color-ash);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.55;
}

.preferences-panel__intro {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.preferences-applies {
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.preset-grid,
.choice-row,
.settings-grid {
  display: grid;
  gap: 0.75rem;
}

.preset-grid button,
.choice-row label,
.toggle-line {
  display: grid;
  align-content: start;
  background: transparent;
  color: var(--color-ink);
  padding: 0.888rem;
  text-align: left;
}

.preset-grid button {
  border: 1px solid var(--color-hairline);
  background: transparent !important;
  color: var(--color-ink) !important;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  line-height: 1.4;
  min-height: 7rem;
  padding: 1rem;
  text-transform: uppercase;
}

.preset-grid button:first-child {
  border-color: var(--color-ink);
  background: color-mix(in oklab, var(--color-ink) 6%, transparent) !important;
}

.preset-title {
  display: block;
}

.preset-summary {
  display: block;
  margin-top: 0.5rem;
  color: var(--color-ash);
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  text-transform: none;
}

.choice-row label,
.toggle-line {
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0 0.75rem;
}

.choice-row label {
  border: 1px solid var(--color-hairline);
  min-height: 6rem;
  padding: 1rem;
}

.option-card {
  display: grid !important;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: 0 0.75rem;
  align-content: start;
  min-height: 6rem;
  border: 1px solid var(--color-hairline);
  padding: 1rem;
}

.toggle-line {
  min-height: 0;
  border: 0;
  padding: 0.5rem 0;
}

.choice-row label input,
.option-card input,
.toggle-line input {
  grid-row: 1 / span 2;
  margin-top: 0.25rem;
}

.choice-row label > span,
.choice-row label > small,
.option-card > span,
.option-card > small,
.toggle-line > span,
.toggle-line > small {
  grid-column: 2;
}

.choice-row input,
.option-card input,
.toggle-line input {
  appearance: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border: 1px solid var(--color-ash);
  background: transparent;
  flex: 0 0 auto;
}

.choice-row input[type="radio"] {
  border-radius: 50%;
}

.option-card input[type="radio"] {
  border-radius: 50%;
}

.choice-row input:checked,
.option-card input:checked,
.toggle-line input:checked {
  border-color: var(--color-ink);
  background: var(--color-ink);
  box-shadow: inset 0 0 0 4px var(--color-paper);
}

.choice-row label:has(input:checked) {
  border-color: var(--color-ink);
  background: color-mix(in oklab, var(--color-ink) 6%, transparent);
}

.option-card:has(input:checked) {
  border-color: var(--color-ink);
  background: color-mix(in oklab, var(--color-ink) 6%, transparent);
}

.toggle-line:has(input:checked) {
  background: transparent;
}

.settings-grid label {
  display: block;
}

.settings-grid select {
  width: 100%;
  min-height: 49.5px;
  border: 1px solid var(--color-hairline);
  border-radius: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-serif);
  font-size: 1rem;
}

.preferences-actions {
  display: grid;
  gap: 0.75rem;
  border-top: 1px solid var(--color-hairline);
  padding-block: var(--clearance-light);
}

.button-secondary {
  background: transparent !important;
  color: var(--color-ink) !important;
}

.settings-disclosure {
  border-top: 1px solid var(--color-hairline);
  padding-block: var(--clearance-light);
}

.settings-disclosure summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  list-style: none;
  text-transform: uppercase;
}

.settings-disclosure summary::-webkit-details-marker {
  display: none;
}

.settings-disclosure summary span:first-child {
  display: inline-grid;
  width: 1rem;
  place-items: center;
}

.settings-disclosure[open] summary span:first-child {
  transform: rotate(45deg);
}

.settings-disclosure__content {
  display: grid;
  gap: 1rem;
  margin-top: 1.55rem;
}

.settings-disclosure__content > p,
.preferences-actions p {
  margin: 0;
  color: var(--color-ash);
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.settings-save-panel {
  display: grid;
  gap: 2rem;
  border-top: 1px solid var(--color-hairline);
  padding-block: 2rem;
}

.settings-save-panel h2 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ash);
}

.settings-save-panel > p {
  max-width: 42rem;
  margin: 0;
  color: var(--color-ash);
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.settings-save-grid {
  display: grid;
  gap: 1rem;
}

.settings-save-grid > div {
  border: 1px solid var(--color-hairline);
  padding: 1rem;
}

.settings-save-grid p {
  margin: 0;
}

.settings-save-grid p:first-child {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.settings-save-grid p + p {
  margin-top: 0.5rem;
  color: var(--color-ash);
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.utility-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.utility-grid section {
  display: grid;
  gap: 1rem;
  border-top: 1px solid var(--color-hairline);
  padding-top: var(--clearance-light);
}

@media (min-width: 720px) {
  .settings-grid,
  .choice-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .preferences-preview,
  .preferences-panel,
  .settings-disclosure__content {
    grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
    column-gap: var(--layout-column-gap);
  }

  .preferences-preview > .ba-eyebrow,
  .preferences-preview > h2,
  .preferences-preview__intro,
  .preferences-preview > .preferences-status,
  .preferences-panel > legend,
  .preferences-panel > h2,
  .preferences-panel > p,
  .preferences-panel__intro,
  .settings-disclosure__content > p {
    grid-column: 1;
  }

  .preferences-preview > .preferences-preview__sample,
  .preferences-preview > dl,
  .preferences-preview__reader,
  .preferences-panel > :is(.preset-grid, .choice-row, .settings-grid, .toggle-line),
  .preferences-panel__controls,
  .settings-disclosure__content > :is(.settings-grid, .toggle-line) {
    grid-column: 2;
  }

  .preferences-panel > .preset-grid,
  .preferences-panel > .choice-row {
    grid-row: 1 / span 2;
  }

  .preferences-panel__controls {
    grid-row: 1;
    margin-top: 0;
  }

  .preferences-preview dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .preferences-actions {
    grid-template-columns: 1fr auto auto;
    align-items: center;
  }

  .preferences-actions p {
    max-width: 42rem;
  }

  .settings-save-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--layout-column-gap);
  }
}

@media (min-width: 1120px) {
  .utility-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cart-line-list {
  border-bottom: 1px solid var(--color-hairline);
}

.cart-line {
  display: grid;
  gap: 1.5rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--color-hairline);
}

.cart-line:last-child {
  border-bottom: 0;
}

.cart-line h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  font-weight: 400;
  line-height: 1.1;
}

.cart-line__meta,
.cart-line__main a,
.cart-line__qty small,
.cart-checkout-panel label > span,
.cart-subtotal > span {
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ash);
}

.cart-line__main {
  display: grid;
  gap: 0.65rem;
}

.cart-line__main a {
  width: max-content;
  color: var(--color-ink);
}

.cart-line__commerce {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.cart-line__qty {
  display: grid;
  gap: 0.2rem;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.cart-line__price {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.1;
}

.cart-checkout-panel {
  display: grid;
  gap: 1.4rem;
  justify-items: stretch;
  padding-block: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.cart-checkout-panel label {
  display: grid;
  gap: 0.45rem;
}

.cart-subtotal {
  display: grid;
  gap: 0.3rem;
  justify-items: end;
  border-top: 1px solid var(--color-hairline);
  padding-top: 1.25rem;
}

.cart-subtotal strong {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1;
}

.cart-checkout-panel .ba-button-primary {
  justify-self: end;
}

@media (min-width: 760px) {
  .cart-line {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.4fr);
    align-items: start;
  }

  .cart-checkout-panel {
    margin-left: auto;
    max-width: 28rem;
  }
}

.status-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.55rem;
}

.status-actions__secondary {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ash);
}

.status-surface--notfound {
  min-height: calc(100svh - var(--site-header-height));
  display: grid;
  place-items: center;
  padding-block: 0;
}

.status-notfound-row {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 1.25rem;
}

.status-notfound-row h1 {
  margin: 0;
  border-right: 1px solid var(--color-hairline);
  padding-right: 1.25rem;
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
}

.status-notfound-row p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.35;
}

.bibliography-page {
  min-height: calc(100svh - var(--site-header-height));
  padding-block: clamp(1.7rem, 3vw, 2rem) var(--section-rhythm);
}

.bibliography-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ash);
}

.bibliography-breadcrumb a,
.bibliography-breadcrumb span:last-child {
  color: inherit;
  text-underline-offset: 0.24em;
}

.bibliography-breadcrumb span:last-child {
  color: var(--color-ink);
  text-decoration: underline;
}

.bibliography-hero h1 {
  max-width: 68rem;
}

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

.bibliography-list {
  display: grid;
  gap: 0;
}

.bibliography-list article {
  border-bottom: 1px solid var(--color-hairline);
  padding-block: clamp(1.6rem, 3vw, 2.2rem);
}

.bibliography-list h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.9vw, 1.35rem);
  font-weight: 400;
  line-height: 1.18;
}

.bibliography-list h2 a {
  text-underline-offset: 0.24em;
}

.bibliography-list p {
  margin: 0.8rem 0 0;
  max-width: 70rem;
  color: var(--color-ash);
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.bibliography-list .status-actions__secondary {
  display: inline-block;
  margin-top: 1rem;
}

.checkout-status-surface {
  padding-block: clamp(4.4rem, 7vw, 6rem) var(--section-rhythm);
}

.checkout-status-surface h1 {
  max-width: 42rem;
  margin: 1.1rem 0 0;
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5.1vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
}

.checkout-status-surface p:not(.ba-eyebrow):not(.ba-meta) {
  max-width: 46rem;
  margin: 1.2rem 0 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
}

.checkout-status-reason {
  color: var(--color-ash);
}

@media (min-width: 640px) {
  .series-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1536px) {
  .feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .home-hero__line {
    max-width: 10.6ch;
    min-height: 0;
    font-size: 6.25rem;
    line-height: 0.76;
    text-wrap: balance;
    white-space: normal;
  }
}

@media (min-width: 1024px) {
  .home-hero {
    height: min(78svh, 52rem);
    max-height: none;
  }

  .home-hero__inner {
    align-content: end;
    padding-top: clamp(3rem, 7vw, 7rem);
    padding-bottom: 0;
  }

  .hero-frame-controls {
    inset-inline-start: auto;
    inset-inline-end: 0;
    align-items: flex-end;
  }

  .hero-frame-controls__nav,
  .hero-frame-indicators {
    justify-content: end;
  }

  .series-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1536px) {
  .series-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .home-hero__line {
    font-size: 6.9rem;
  }
}

.page-hero,
.archive-hero,
.status-surface {
  padding-block: calc(var(--section-rhythm) * 0.8) var(--section-content-rhythm);
}

.page-hero h1,
.archive-hero h1,
.status-surface h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5.1vw, 4rem);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: 0;
}

.status-surface--notfound .status-notfound-row h1 {
  border-right: 1px solid var(--color-hairline);
  padding-right: 1.25rem;
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
}

.status-surface--notfound .status-notfound-row p {
  max-width: none;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.35;
}

.archive-hero h1 {
  max-width: 51rem;
}

.motion-activate {
  margin-top: var(--clearance-light);
  border: 1px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
  padding: 0.85rem 1.15rem;
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.motion-activation-note {
  max-width: 42rem !important;
  color: var(--color-ash);
}

.page-hero p,
.archive-hero p,
.status-surface p,
.work-reference-hero p {
  max-width: 74ch;
  margin: var(--clearance-light) 0 0;
  font-family: var(--font-serif);
  line-height: 1.68;
}

.utility-page .page-hero,
.settings-surface .page-hero {
  padding-top: 2.45rem;
}

.ba-eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ash);
}

.ba-eyebrow--compact {
  font-size: var(--type-eyebrow-compact);
  letter-spacing: var(--tracking-eyebrow-compact);
}

.ba-eyebrow--ink {
  color: var(--color-ink);
}

.product_meta,
.woocommerce-breadcrumb,
.ba-card__meta,
.ba-meta {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ash);
}

.ba-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--clearance-dark);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .ba-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .ba-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1800px) {
  .ba-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ba-card a {
  display: block;
  text-decoration: none;
}

.ba-card__image {
  aspect-ratio: 4 / 5;
  background: var(--color-hairline);
  overflow: hidden;
}

.ba-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba-card h2,
.ba-card h3 {
  margin: 0.85rem 0 0;
  font-size: clamp(1.25rem, 2vw, var(--type-h3));
  line-height: 1.12;
}

.ba-card__meta {
  margin-block-start: 0.45rem;
}

.archive-note {
  max-width: 72rem;
  padding-block: 0 var(--section-rhythm);
}

.archive-note p {
  max-width: 54ch;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.42;
  color: var(--color-ash);
}

.editorial-shell {
  max-width: var(--shell-wide);
  margin-inline: auto;
}

.about-reference {
  padding-block: clamp(2.55rem, 4vw, 2.6rem) var(--section-rhythm);
}

.about-reference__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.about-reference__main {
  min-width: 0;
}

.about-reference h1 {
  width: min(42rem, 100%);
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 4.5vw, 4.25rem);
  font-weight: 400;
  line-height: 1.02;
}

.about-reference__intro,
.about-reference__copy {
  max-width: min(100%, 42rem);
  font-family: var(--font-serif);
  color: var(--color-ink);
}

.about-reference__intro {
  margin-top: 1.5rem;
  display: grid;
  gap: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.82;
}

.about-reference__intro p,
.about-reference__copy p {
  margin: 0;
}

.about-reference__sections {
  display: grid;
  gap: var(--section-stack-gap, clamp(3.2rem, 6vw, 5rem));
  margin-top: var(--section-rhythm);
}

.about-reference__sections .section-rule {
  padding-inline: 0;
}

.about-reference__sections h2 {
  margin: 0 0 1.5rem;
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ash);
}

.about-reference__copy {
  display: grid;
  gap: 1.25rem;
  font-size: 1rem;
  line-height: 1.8;
}

.about-reference__rail {
  display: grid;
  align-content: start;
  gap: var(--gallery-stack-gap, clamp(2rem, 4vw, 3rem));
}

.about-carousel {
  display: grid;
  gap: 0.75rem;
}

.about-carousel__frames {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: color-mix(in oklab, var(--color-ink) 4%, transparent);
}

.about-carousel figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 220ms ease;
}

.about-carousel figure[data-active="true"] {
  opacity: 1;
}

.about-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-reference__actions a {
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: max(0.72rem, 12px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.24em;
  cursor: pointer;
}

.about-reference__facts {
  display: grid;
  gap: 1rem;
}

.about-reference__facts ul {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.75;
}

.about-reference__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.about-reference__actions a {
  border: 1px solid var(--color-hairline);
  padding: 0.9rem 1rem;
  text-decoration: none;
}

.about-awards__grid {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: var(--clearance-dark) 0;
  border-block: 1px solid var(--color-hairline);
  list-style: none;
}

.about-awards__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.2;
}

.about-awards__title + p {
  margin-top: 0.75rem;
}

.about-awards__more {
  margin-top: var(--clearance-light);
}

.about-press .recognition-ribbon {
  justify-content: flex-start;
}

@media (min-width: 64rem) {
  .about-awards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.about-system-links {
  display: grid;
  border-block: 1px solid var(--color-hairline);
  margin-bottom: var(--section-rhythm);
}

.about-system-links a {
  display: block;
  padding-block: 1.25rem;
  color: inherit;
  text-decoration: none;
}

.about-system-links span {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.375rem);
  line-height: 1.1;
}

.about-system-links small {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-ash);
}

@media (min-width: 64rem) {
  .about-reference__grid {
    grid-template-columns: minmax(0, 42rem) minmax(18rem, 26rem);
    justify-content: start;
  }

  .about-reference__rail {
    position: sticky;
    top: 7rem;
    justify-self: end;
    width: min(100%, 26rem);
  }

  .about-system-links {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .about-system-links a {
    padding-right: 2rem;
  }
}

.store-area-grid,
.archive-product-grid,
.reference-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding-block: var(--section-content-rhythm) var(--section-rhythm);
}

.archive-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-block-start: 1px solid var(--color-hairline);
  padding-block: var(--clearance-dark) var(--section-rhythm);
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.archive-pagination__status {
  color: var(--color-ash);
}

.archive-pagination a {
  color: var(--color-ink);
  text-underline-offset: 0.25em;
}

.store-area-card a,
.archive-product-card a,
.reference-card a {
  display: grid;
  align-content: start;
  gap: 1rem;
  min-height: 100%;
  color: inherit;
  text-decoration: none;
}

.store-area-card__image,
.archive-product-card__image {
  display: block;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--color-ink) 7%, transparent), transparent),
    var(--color-hairline);
}

.store-area-card__image {
  aspect-ratio: 1;
}

.archive-product-card__image {
  aspect-ratio: 1;
}

.store-area-card__image img,
.archive-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-area-card__content,
.archive-product-card__body {
  display: grid;
  gap: 0.65rem;
}

.reference-card a {
  align-content: start;
  min-height: clamp(12rem, 22vw, 18rem);
  border: 1px solid var(--color-hairline);
  padding: clamp(1.35rem, 2vw, 1.8rem);
}

.reference-card__title {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  line-height: 1.08;
}

.reference-card__copy {
  display: block;
  max-width: 38ch;
  color: var(--color-ash);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.55;
}

.media-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding-block: var(--section-content-rhythm) var(--section-rhythm);
}

.archive-hero--media-index {
  padding-bottom: clamp(1.15rem, 2.5vw, 1.9rem);
}

.media-card-grid--index {
  padding-top: 0;
}

.media-card a,
.media-card--motion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
}

.media-card__image {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-hairline);
}

.media-card-grid--landscape .media-card__image {
  aspect-ratio: 4 / 3;
}

.media-card-grid--motion .media-card__image {
  aspect-ratio: 8 / 5;
}

.media-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card__title {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  line-height: 1.08;
}

.media-card__copy {
  display: block;
  max-width: 38ch;
  color: var(--color-ash);
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.55;
}

.media-card__image .motion-activate {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 0;
  border-radius: 50%;
  margin: 0;
  background: rgb(5 5 5 / 0.55);
  color: #f3eddd;
  cursor: pointer;
}

.media-card__image .motion-activate svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: currentColor;
  stroke: none;
  margin-inline-start: 0.15rem;
}

/* File-type/format info as an icon overlay directly on the thumbnail rather
   than a caption line underneath it. */
.media-card-format-badge {
  position: absolute;
  inset: auto 1rem 1rem auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100% - 2rem);
  padding: 0.4rem 0.65rem;
  background: rgb(5 5 5 / 0.55);
  color: #f3eddd;
}

.media-card-format-badge svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.media-card-format-badge span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.archive-product-card__body {
  align-content: start;
}

.store-area-card__title,
.archive-product-card__title {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  line-height: 1.05;
}

.store-area-card__copy,
.archive-product-card__copy {
  display: block;
  max-width: 36rem;
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.58;
  color: var(--color-ash);
}

.archive-product-card__price {
  display: none;
}

.work-tile a,
.article-card a,
.taxon-card a,
.search-result-card a {
  display: grid;
  gap: 0.8rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.work-tile,
.article-card,
.taxon-card,
.search-result-card {
  min-width: 0;
}

.work-tile__image,
.article-card__image,
.taxon-card__image {
  display: block;
  overflow: hidden;
  background: var(--color-hairline);
}

.work-tile__image,
.article-card__image {
  aspect-ratio: 1;
}

.taxon-card__image {
  aspect-ratio: 1;
}

.work-tile__image img,
.article-card__image img,
.taxon-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-tile__body,
.taxon-card__body {
  display: grid;
  gap: 0.35rem;
}

.work-tile__title,
.article-card__title,
.taxon-card__title,
.search-result-card > a > span:not(.ba-eyebrow) {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  line-height: 1.08;
}

.taxon-card__title {
  /* Relaxed relative to the shared caption size -- this sits directly
     under a large lead photo and reads as shouting at the tile scale. */
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
}

.article-card-grid,
.related-work-strip,
.search-result-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding-block: var(--section-content-rhythm) var(--section-rhythm);
}

.article-card-grid {
  /* More rhythm between journal entries specifically at narrow widths --
     the shared clamp read as too tight stacked single-column on mobile. */
  gap: clamp(2.5rem, 6vw, 3rem);
}

.related-work-strip-section {
  border-block-start: 1px solid var(--color-hairline);
  padding-block-start: var(--section-rhythm);
}

.related-work-strip__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
}

.article-card__meta,
.article-card__copy,
.taxon-card__latin,
.taxon-card__meta,
.search-result-card small {
  color: var(--color-ash);
}

.taxon-card__latin {
  font-weight: 400;
}

.taxon-card__status {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 0.6em;
  padding: 0.15em 0.5em;
  border: 1px solid color-mix(in oklab, var(--color-ink) 35%, transparent);
  font-family: var(--font-mono);
  font-size: 0.62em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}

.taxon-card__meta {
  display: block;
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 180ms ease;
}

.taxon-card:hover .taxon-card__meta,
.taxon-card:focus-within .taxon-card__meta {
  opacity: 1;
}

@media (hover: none) {
  .taxon-card__meta {
    opacity: 1;
  }
}

.article-card__meta {
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.article-card__copy,
.search-result-card small {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.series-detail-hero,
.search-surface {
  padding-block: calc(var(--section-rhythm) * 0.8) var(--section-content-rhythm);
}

.search-surface h1,
.split-editorial-hero h1,
.taxon-detail-hero h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5.6vw, 4.45rem);
  font-weight: 400;
  line-height: 1.05;
}

.series-detail-hero h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--type-title-page);
  font-weight: 400;
  line-height: 1.05;
}

.split-editorial-hero h1 {
  font-size: clamp(2.5rem, 5.1vw, 4rem);
}

.series-detail-hero p:not(.ba-eyebrow),
.search-surface p,
.split-editorial-hero p,
.taxon-detail-section p {
  max-width: 62ch;
  font-family: var(--font-serif);
  line-height: 1.58;
}

.series-intro-copy {
  width: 100%;
  max-width: none !important;
  font-size: 1rem;
  line-height: 1.72 !important;
}

@media (min-width: 64rem) {
  .series-intro-copy {
    column-count: 2;
    column-gap: var(--layout-column-gap, clamp(2rem, 5vw, 4rem));
  }
}

.series-lead-image {
  position: relative;
  cursor: zoom-in;
  margin-block: 0 var(--section-rhythm);
}

.series-lead-image img {
  display: block;
  width: min(100%, calc((100svh - var(--site-header-height) - (var(--page-start-gap) * 2)) * 0.603875134553));
  max-height: min(62rem, 92svh);
  margin-inline: auto;
  object-fit: contain;
}

.series-evidence {
  display: grid;
  /* Never let gallery items sit closer than 5% of the viewport height,
     even where --section-content-rhythm's rem-based clamp would allow it
     on tall desktop/wide viewports. */
  gap: max(var(--section-content-rhythm), 5svh);
  padding-block: 0 var(--section-rhythm);
}

.series-evidence h2,
.taxa-index h2,
.taxon-detail-section h2,
.editorial-band h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
}

.series-evidence__item {
  position: relative;
  display: block;
  margin: 0;
  cursor: zoom-in;
}

.series-evidence__item img {
  display: block;
  width: 100%;
  height: auto;
}

.gallery-figure__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem 1rem 1.25rem;
  background: linear-gradient(to top, rgb(10 10 10 / 0.85), rgb(10 10 10 / 0.3) 66%, transparent);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.series-evidence__item:hover .gallery-figure__overlay,
.series-evidence__item:focus-within .gallery-figure__overlay {
  opacity: 1;
}

@media (hover: none) {
  .gallery-figure__overlay {
    opacity: 1;
    background: linear-gradient(to top, rgb(10 10 10 / 0.78), transparent 80%);
  }
}

.gallery-figure__overlay-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.35;
  color: #f3eddd;
}

.gallery-figure__overlay-cta {
  display: inline-block;
  pointer-events: auto;
  margin-top: 0.75rem;
  border-bottom: 1px solid rgb(243 237 221 / 0.4);
  padding-bottom: 0.15rem;
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f3eddd;
  text-decoration: none;
}

.gallery-figure__overlay-cta:hover {
  border-color: #f3eddd;
}

.series-detail-hero__row {
  display: flex;
  /* Baseline, not flex-start: the toggle has no text of its own to align by,
     so its synthesized baseline is its bottom margin edge -- this lines that
     edge up with the H1's actual text baseline instead of the top of its
     line box (which sat noticeably above where the letters themselves
     sit, particularly for a display serif with a tall cap-height/line-gap). */
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.series-detail-hero__row h1 {
  min-width: 0;
}

.series-detail-hero__toggle {
  /* Irrelevant on mobile -- there's no room for a multi-column/masonry
     layout choice to matter, so the control is dropped entirely rather
     than just visually hidden. */
  display: none;
}

@media (min-width: 64rem) {
  .series-detail-hero__toggle {
    display: block;
    flex-shrink: 0;
  }
}

.gallery-view-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.gallery-view-controls > .ba-eyebrow {
  margin: 0;
}

.gallery-view-controls [role="group"] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.gallery-view-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: transparent;
  color: var(--color-ash);
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}

.gallery-view-controls button:hover {
  color: var(--color-ink);
}

.gallery-view-controls button[aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-paper);
}

.gallery-view-controls button svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
}

[data-gallery-layout="grid"] .series-evidence {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 1024px) {
  [data-gallery-layout="grid"] .series-evidence {
    grid-template-columns: repeat(3, 1fr);
  }
}

[data-gallery-layout="masonry"] .series-evidence {
  display: block;
  column-count: 2;
  column-gap: var(--section-content-rhythm);
}

[data-gallery-layout="masonry"] .series-evidence__item {
  break-inside: avoid;
  margin-bottom: var(--section-content-rhythm);
}

@media (min-width: 1024px) {
  [data-gallery-layout="masonry"] .series-evidence {
    column-count: 3;
  }
}

/* Grid/masonry resolve the lead work inline as the first gallery item rather
   than pulling it into a separate featured hero (the reference reserves the
   featured treatment for single-column, #23) -- so the lead figure and the
   grid's first item swap visibility by layout mode instead of both showing
   the same work twice. */
.series-evidence__item--lead {
  display: none;
}

[data-gallery-layout="grid"] .series-lead-image,
[data-gallery-layout="masonry"] .series-lead-image {
  display: none;
}

[data-gallery-layout="grid"] .series-evidence__item--lead {
  display: grid;
}

[data-gallery-layout="masonry"] .series-evidence__item--lead {
  display: grid;
  break-inside: avoid;
  margin-bottom: var(--section-content-rhythm);
}

.series-facets,
.series-featured-taxa,
.series-related-series,
.taxa-index,
.taxon-detail-section,
.editorial-band {
  padding-block: var(--section-content-rhythm) var(--section-rhythm);
}

.series-facets,
.series-featured-taxa,
.series-related-series,
.editorial-band {
  border-block-start: 1px solid var(--color-hairline);
}

.editorial-band:first-of-type {
  border-block-start: 0;
}

.series-facets h2,
.series-featured-taxa h2,
.series-related-series h2 {
  margin: 0 0 1.5rem;
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.08;
}

.series-featured-taxa h2 {
  margin-bottom: 2.25rem;
}

.series-facets p:not(.ba-eyebrow) {
  max-width: 48rem;
  margin: 1rem 0 1.5rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-ash);
}

.series-facets div,
.filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.series-facets span,
.filter-chip-row a {
  border: 1px solid var(--color-hairline);
  padding: 0.58rem 0.72rem;
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.series-related-series ul {
  display: grid;
  gap: 0.85rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
}

.series-related-series a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
}

.series-related-series a span {
  color: var(--color-ash);
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.taxa-reference-hero {
  padding-block: clamp(3.6rem, 7vw, 5rem) calc(var(--section-content-rhythm) * 0.8);
}

.taxa-reference-hero h1 {
  max-width: 48rem;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  font-weight: 400;
  line-height: 1.02;
}

.taxa-reference-hero p {
  max-width: 42rem;
  margin: 1rem 0 0;
  font-family: var(--font-serif);
  font-size: 0.875rem;
  line-height: 1.7;
}

.taxa-reference-index {
  display: grid;
  gap: 1.5rem;
  padding-block: var(--section-content-rhythm) var(--section-rhythm);
}

.taxa-reference-index h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.taxa-reference-search {
  display: grid;
  gap: 0.8rem;
}

.taxa-reference-search label {
  display: grid;
  gap: 0.45rem;
}

.taxa-reference-search span,
.taxa-reference-search button,
.taxa-status-filters a,
.taxa-reference-count {
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.taxa-reference-search span,
.taxa-reference-count {
  color: var(--color-ash);
}

.taxa-reference-search input {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid var(--color-hairline);
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: 0.9375rem;
}

.taxa-reference-search button {
  /* Follow the same solid-ink primary CTA used on known-good surfaces
     (.ba-button-primary / button[type=submit]) instead of the outlined,
     easy-to-miss treatment this previously had. */
  justify-self: start;
}

.taxa-status-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
}

.taxa-status-filters a {
  color: var(--color-ash);
  text-underline-offset: 0.24em;
}

.taxa-reference-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--color-hairline);
}

.taxa-reference-list li + li {
  border-top: 1px solid var(--color-hairline);
}

.taxa-reference-list a {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  padding-block: 1.35rem;
  color: inherit;
  text-decoration: none;
}

.taxa-reference-thumb {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: color-mix(in oklab, var(--color-ink) 5%, transparent);
}

.taxa-reference-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.taxa-reference-name {
  display: grid;
  gap: 0.45rem;
}

.taxa-reference-name > span {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.375rem);
  line-height: 1.08;
}

.taxa-reference-name em {
  color: var(--color-ash);
  font-style: italic;
}

.taxa-reference-name small {
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--color-ash);
}

.taxa-reference-status {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

@media (min-width: 720px) {
  .taxa-reference-search {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .taxa-reference-list a {
    /* auto (not a reserved minmax track) so rows without a conservation
       status don't leave an empty column squeezing the name column --
       many taxa have no iucnStatus at all. */
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    gap: 2rem;
  }

  .taxa-reference-status {
    display: block;
    justify-self: start;
  }
}

.taxon-detail-hero,
.split-editorial-hero {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-block: calc(var(--section-rhythm) * 0.8) var(--section-rhythm);
}

.commissions-page .split-editorial-hero {
  padding-top: calc((var(--section-rhythm) * 0.8) + 2.45rem);
}

.taxon-detail-hero h1 {
  display: grid;
  gap: 0.25rem;
}

.taxon-detail-hero h1 em {
  color: var(--color-ash);
  font-style: italic;
}

.taxon-detail-hero img,
.split-editorial-hero__media img {
  width: 100%;
  object-fit: cover;
}

.taxon-detail-hero img {
  max-height: min(44rem, 72svh);
}

.taxon-reference-detail .detail-object-chrome {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
}

.taxon-reference-header {
  padding-bottom: var(--section-rule-gap);
}

.taxon-heading-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: baseline;
}

.taxon-heading-row h1,
.taxon-identity h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 400;
  line-height: 1.05;
}

.taxon-heading-row h1 em,
.taxon-identity h1 em {
  color: var(--color-ash);
  font-style: italic;
}

.taxon-heading-latin {
  display: block;
  color: var(--color-ash);
}

.taxon-heading-row > span {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

@media (min-width: 640px) {
  .taxon-heading-latin {
    display: inline;
    margin-left: 0.75rem;
  }
}

.taxon-story {
  display: grid;
  gap: 1rem;
}

.taxon-story p,
.taxon-status-panel > p,
.taxon-reference-grid dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.taxon-story p:first-child {
  font-size: 1.0625rem;
}

.taxon-story p:last-child {
  color: var(--color-ash);
  font-style: italic;
}

.taxon-status-panel {
  display: grid;
  gap: 0.9rem;
  border-block: 1px solid var(--color-hairline);
  padding-block: 1.2rem;
}

.taxon-status-panel h2,
.taxon-field-record summary,
.taxon-reference-grid dt,
.taxon-actions,
.taxon-locality {
  margin: 0;
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.taxon-status-panel h2,
.taxon-reference-grid dt,
.taxon-locality {
  color: var(--color-ash);
}

.taxon-status-panel div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: baseline;
}

.taxon-status-panel div p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.1;
}

.taxon-status-panel div span {
  font-family: var(--font-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.taxon-locality {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border-bottom: 1px solid var(--color-hairline);
  padding-bottom: 1.2rem;
}

.taxon-locality span {
  width: 0.95em;
  height: 0.95em;
  border: 1px solid currentColor;
}

.taxon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
}

.taxon-reference-header .taxon-actions {
  margin-top: 1.777rem;
}

.taxon-actions a {
  color: var(--color-ash);
  text-underline-offset: 0.24em;
}

.taxon-evidence {
  display: grid;
  gap: var(--section-content-rhythm);
  padding-block: 0 var(--section-rhythm);
}

.taxon-evidence h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.taxon-evidence figure {
  margin: 0;
}

.taxon-evidence img {
  width: 100%;
  max-height: 90svh;
  object-fit: contain;
  background: #050505;
}

.taxon-evidence figcaption {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.taxon-field-record {
  padding-block: var(--section-content-rhythm) var(--section-rhythm);
}

.taxon-field-record details {
  border-bottom: 1px solid var(--color-hairline);
  padding-bottom: 1.2rem;
}

.taxon-field-record summary {
  cursor: pointer;
  color: var(--color-ash);
}

.taxon-reference-grid {
  display: grid;
  gap: 2rem;
  margin-top: 1.5rem;
}

.taxon-reference-grid dl,
.taxon-reference-grid ul {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.taxon-reference-grid ul {
  list-style: none;
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.taxon-reference-grid a {
  text-underline-offset: 0.24em;
}

@media (min-width: 900px) {
  .taxon-reference-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.split-editorial-hero__media {
  display: grid;
  gap: 1rem;
}

.split-editorial-hero__media img {
  aspect-ratio: 4 / 5;
}

.process-method-sections {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  margin-top: clamp(3.3rem, 5.5vw, 4.75rem);
}

.process-method-section h2 {
  margin: 0 0 1.6rem;
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ash);
}

.process-method-section p {
  margin: 0;
  max-width: 68rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.58;
}

.editorial-band p {
  max-width: 72ch;
  margin: 1rem 0 0;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.5;
}

.next-route-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding-block: var(--section-content-rhythm) var(--section-rhythm);
}

.search-surface {
  padding-block: clamp(3rem, 5.1vw, 5rem) var(--section-content-rhythm);
}

.search-surface h1 {
  max-width: 56rem;
  margin: 1.35rem 0 0;
  font-family: var(--font-serif);
  font-size: clamp(3.2rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.08;
}

.search-surface > p:not(.ba-eyebrow):not(.search-count) {
  max-width: 78ch;
  margin: 2rem 0 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.55;
}

.search-row {
  display: flex;
  gap: 1.5rem;
  align-items: end;
  margin-top: clamp(1.6rem, 2.6vw, 2.4rem);
  border-bottom: 2px solid var(--color-ink);
  padding-bottom: 0.75rem;
}

.search-row .search-field {
  min-height: 0;
  flex: 1 1 auto;
  border: 0;
  padding: 0;
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.2vw, 2.75rem);
  line-height: 1.12;
}

.search-row .search-field::placeholder {
  color: var(--color-ash);
  opacity: 1;
}

.search-row .ba-button-primary {
  min-height: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  padding: 0 0 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-decoration: underline;
  text-underline-offset: 0.32em;
}

.filter-chip-row {
  margin-top: var(--clearance-light);
}

.search-surface .filter-chip-row {
  gap: 1rem 1.5rem;
  margin-top: 1.8rem;
}

.search-surface .filter-chip-row a {
  border: 0;
  padding: 0;
  color: var(--color-ash);
  font-size: 0.875rem;
  font-weight: 400;
}

.search-surface .filter-chip-row a:first-child {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 0.28em;
}

.search-surface .search-count {
  margin: 2rem 0 0;
  color: var(--color-ash);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.search-result-card {
  border-top: 1px solid var(--color-hairline);
  padding-top: 1rem;
}

.store-secondary-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  padding-block: 0 var(--section-rhythm);
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ash);
}

.store-secondary-links a {
  color: inherit;
}

@media (min-width: 720px) {
  .store-area-grid,
  .archive-product-grid,
  .article-card-grid,
  .media-card-grid,
  .reference-card-grid,
  .related-work-strip,
  .search-result-grid,
  .next-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (min-width: 980px) {
  .archive-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 3.2vw, 2.5rem) clamp(2rem, 3vw, 2.8rem);
  }

  .archive-product-card a {
    grid-template-columns: 1fr;
    gap: clamp(1rem, 1.7vw, 1.35rem);
  }
}

@media (min-width: 1180px) {
  .store-area-grid,
  .series-showcase,
  .article-card-grid,
  .media-card-grid,
  .reference-card-grid,
  .search-result-grid,
  .related-work-strip,
  .next-route-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .store-area-grid {
    grid-template-columns: repeat(4, minmax(0, 17.2rem));
    justify-content: start;
  }

  .taxon-detail-hero,
  .split-editorial-hero {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22.5rem);
  }

  .commissions-page .split-editorial-hero {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
  }
}

@media (min-width: 1800px) {
  .related-work-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.detail-object-grid {
  /* clip, not hidden: keeps position:sticky on .detail-object-media working
     at >=72rem while guaranteeing the media column can never visually push
     past the established rail, however --detail-object-image-cap resolves
     (it's svh-derived, and svh has been observed to momentarily reflect the
     full document height rather than the viewport during some capture/
     screenshot pipelines and mobile dynamic-toolbar transitions). */
  overflow-x: clip;
  --detail-object-gap: var(--layout-column-gap);
  --detail-object-image-cap: calc(100svh - var(--site-header-height) - (var(--page-start-gap) * 2));
  --detail-object-shell-inline: min(100vw, var(--content-max));
  --detail-object-content-inline: calc(var(--detail-object-shell-inline) - (var(--rail) * 2));
  --detail-object-media-max-inline: calc(var(--detail-object-content-inline) - var(--detail-object-gap));
  --detail-object-media-basis: min(
    calc(var(--detail-object-image-cap) * var(--detail-object-aspect, var(--image-aspect, 1))),
    var(--detail-object-media-max-inline)
  );
  display: grid;
  gap: var(--detail-object-gap);
}

@media (max-width: 71.9375rem) {
  .detail-object-grid {
    --detail-object-gap: 1.25rem;
  }
}

.detail-object-media,
.detail-object-summary,
.detail-object-chrome {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.detail-object-media img,
.detail-object-image {
  display: block;
  width: min(100%, calc(var(--detail-object-image-cap) * var(--image-aspect, 1)));
  max-width: 100%;
  height: auto;
  max-height: var(--detail-object-image-cap);
  background: #050505;
  object-fit: contain;
  object-position: center;
  /* A tall/portrait image whose width is capped by the viewport-height
     budget (rather than the column width) falls short of the column's
     rails -- center it in the leftover space instead of hugging the
     start edge. */
  margin-inline: auto;
}

.detail-object-media {
  position: relative;
  cursor: zoom-in;
}

.detail-object-expand-hint {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: rgb(5 5 5 / 0.55);
  color: #f3eddd;
}

.detail-object-expand-hint svg {
  width: 1.1rem;
  height: 1.1rem;
}

@media (min-width: 72rem) {
  /* Desktop already presents the image at (or near) its full sticky-column
     size, so a click-to-expand affordance would just be a redundant no-op
     control -- the hint is mobile/tablet-only. */
  .detail-object-expand-hint {
    display: none;
  }
}

.detail-object-grid--wide {
  --detail-object-wide-media-cap: min(70svh, calc(100svh - 8rem));
}

.detail-object-grid--wide .detail-object-media img,
.detail-object-grid--wide .detail-object-image {
  width: 100%;
  height: var(--detail-object-wide-media-cap);
  max-height: var(--detail-object-wide-media-cap);
  object-fit: cover;
}

.taxon-reference-detail {
  --image-aspect: 1;
  --detail-object-aspect: 1;
  padding-bottom: var(--section-stack-gap);
}

.taxon-reference-detail .detail-object-media img,
.taxon-reference-detail .detail-object-image {
  width: min(100%, var(--detail-object-image-cap));
  height: min(var(--detail-object-image-cap), 100%);
  max-height: var(--detail-object-image-cap);
  aspect-ratio: 1;
  object-fit: cover;
}

@media (min-width: 72rem) {
  .detail-object-grid {
    grid-template-columns: minmax(0, var(--detail-object-media-basis)) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--detail-object-gap);
    row-gap: var(--detail-object-gap);
  }

  .detail-object-media {
    position: sticky;
    top: var(--detail-media-sticky-top);
    align-self: start;
    justify-self: start;
  }

  .detail-object-grid--wide {
    /* Info column floors at 30vw so it never collapses below 30% of the
       viewport at any desktop width, rather than capping out at a fixed
       42rem that reads as too narrow on very wide viewports. */
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 30vw);
    column-gap: clamp(2rem, 4vw, 4rem);
  }

  .detail-object-grid--wide .detail-object-media {
    grid-column: 1 / -1;
    position: static;
    justify-self: stretch;
  }

  /* Below a full-width ultrawide image, the chrome spans the whole row and
     splits into its own two columns (summary + purchase form) rather than
     sitting alone in the narrow 30vw sidecar column with a blank column
     beside it. */
  .detail-object-grid--wide .detail-object-chrome {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 30vw);
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }

  .detail-object-grid--panorama {
    grid-template-columns: minmax(0, 68%) minmax(18rem, 1fr);
  }

  .detail-object-grid--panorama .detail-object-media img,
  .detail-object-grid--panorama .detail-object-image {
    width: 100%;
  }

  .detail-object-grid--panorama .detail-object-chrome h1 {
    font-size: clamp(3.3rem, 4.8vw, 4rem);
    line-height: 1.03;
  }
}

.detail-object-chrome h1,
.detail-object-summary h1 {
  /* The page's top-level heading must read larger than any other on-screen
     text, including the price. The actual rule that sizes the price is
     .price-panel .price, which resolves --type-price-headline
     (clamp(2.25rem, 5vw, 3.5rem)) -- not the unused .detail-object-chrome
     .price declaration below, which nothing matches. Sized here to clear
     that price size with margin at every viewport width (checked against an
     18px root, this theme's actual base font-size, not the 16px default). */
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  line-height: 1.1;
  font-weight: 400;
}

@media (min-width: 72rem) {
  .detail-object-chrome h1,
  .detail-object-summary h1 {
    font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  }
}

.detail-object-summary {
  display: block;
}

.detail-object-summary .ba-eyebrow + h1 {
  margin-top: 0.75rem;
}

.detail-object-chrome .price,
.ba-price {
  display: block;
  margin-block: 0;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: 1.1;
}

.edition-panel {
  margin-block-start: clamp(2.5rem, 4vw, 3.5rem);
}

.price-panel {
  margin-block-start: clamp(1rem, 2vw, 1.5rem);
}

.purchase-panel {
  margin-block-start: 1.25rem;
}

.ba-purchase-form {
  display: grid;
}

.ba-purchase-form fieldset {
  min-width: 0;
  border: 0;
  margin-inline: 0;
  padding: 0;
}

.edition-rows {
  margin-top: 1.2rem;
  border-top: 1px solid var(--color-hairline);
  list-style: none;
  padding: 0;
}

.edition-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.5rem 1.25rem;
  align-items: center;
  min-height: 4.75rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--color-hairline);
  color: color-mix(in oklab, var(--color-ink) 58%, var(--color-paper) 42%);
  cursor: pointer;
}

@media (min-width: 640px) {
  .edition-row {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
  }
}

.edition-row.is-active {
  color: var(--color-ink);
}

.edition-row.is-disabled {
  cursor: not-allowed;
  color: color-mix(in oklab, var(--color-ink) 38%, var(--color-paper) 62%);
}

.edition-row__mark {
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1;
  color: transparent;
}

.edition-row.is-active:not(.is-disabled) .edition-row__mark {
  color: var(--color-ink);
}

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

.edition-row__label {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.2;
}

.edition-row.is-disabled .edition-row__label {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.edition-row__meta {
  display: block;
  margin-top: 0.25rem;
}

.edition-row__price {
  grid-column: 2;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1;
  text-align: left;
}

@media (min-width: 640px) {
  .edition-row__price {
    grid-column: 3;
    text-align: right;
  }
}

.ba-purchase-form--experience .edition-row__label {
  white-space: normal;
}

.experience-copy {
  display: grid;
  gap: 1rem;
  margin-block-start: var(--gallery-stack-gap, clamp(2rem, 4vw, 3rem));
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.experience-copy p {
  margin: 0;
}

.experience-why {
  display: grid;
  gap: 0.9rem;
  border-top: 1px solid var(--color-hairline);
  padding-block: var(--clearance-light);
}

.experience-why h2 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ash);
}

.experience-why p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
}

.experience-detail {
  padding-block: var(--page-start-gap) var(--section-rhythm);
}

.experience-detail__header {
  max-width: 50rem;
  margin-block-end: clamp(1.25rem, 4vw, var(--clearance-dark));
}

.experience-detail__header h1 {
  /* Must read larger than .price-panel .price (--type-price-headline,
     clamp(2.25rem, 5vw, 3.5rem)) at every width -- --type-title-page ties
     it exactly at the smaller breakpoints since both floor at 2.25rem. */
  margin: 0.75rem 0 0;
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 4.2rem);
  font-weight: 400;
  line-height: 1.05;
}

@media (min-width: 72rem) {
  .experience-detail__header h1 {
    font-size: clamp(3rem, 5.5vw, 4.5rem);
  }
}

.experience-detail__media {
  position: relative;
  cursor: zoom-in;
  margin: 0 0 var(--section-content-rhythm);
}

.experience-detail__media img {
  display: block;
  width: 100%;
  max-height: calc(100svh - var(--site-header-height) - (var(--page-start-gap) * 2));
  object-fit: contain;
}

.experience-detail__body {
  display: grid;
  gap: var(--section-content-rhythm);
}

.experience-detail__booking {
  min-width: 0;
}

/* Booking date-range labels ("14 Aug — 17") are longer than a print's short
   size labels ("A2"), so the shared edition-row's 3-column (mark / label /
   inline price) grid squeezes them onto multiple wrapped lines in a narrow
   mobile column. Stack the price under the label there -- but only below
   the shared edition-row's own 640px breakpoint, where there's room for the
   standard side-by-side layout again. */
@media (max-width: 39.9375rem) {
  .ba-purchase-form--experience .edition-row {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .ba-purchase-form--experience .edition-row__price {
    grid-column: 2;
    text-align: left;
    margin-top: 0.35rem;
  }
}

@media (min-width: 64rem) {
  .experience-detail__body {
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 30rem);
    align-items: start;
  }
}

.purchase-panel .woocommerce-variation-price,
.purchase-panel .woocommerce-variation-description,
.purchase-panel .reset_variations {
  display: none !important;
}

.ba-purchase-form .price-panel {
  display: block;
}

.detail-object-chrome form.cart {
  display: grid;
  gap: 1rem;
  margin-block-start: var(--clearance-light);
}

.ba-purchase-form .purchase-panel {
  display: grid;
  gap: 1.1rem;
  margin-block-start: 1.25rem;
}

.price-panel {
  /* No border-top here -- it read as a literal overline sitting directly
     above the price figure. Section separation now comes from the reduced
     margin-block-start above instead of a rule. */
  padding-block: 0 1.5rem;
}

.price-panel .price {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--type-price-headline);
  line-height: 1;
  color: var(--color-ink);
}

.detail-object-notes {
  display: grid;
  gap: 1rem;
  margin-block-start: clamp(1.6rem, 2.6vw, 2.25rem);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.58;
}

.detail-object-notes p {
  margin: 0;
}

.ba-purchase-form .edition-panel {
  margin-block-start: 0;
}

.ba-purchase-form .purchase-panel button {
  width: 100%;
  min-height: 68px;
  border: 0;
  font-weight: 400;
  padding-block: 1.25rem;
}

.detail-object-chrome table.variations {
  width: 100%;
  border-collapse: collapse;
}

.detail-object-chrome table.variations th,
.detail-object-chrome table.variations td {
  display: block;
  padding-block: 0.35rem;
  text-align: start;
}

.detail-object-chrome select,
.detail-object-chrome input.qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.search-field,
.contact-field {
  width: 100%;
  min-height: 53px;
  border: 0;
  border-bottom: 1px solid var(--color-hairline);
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  padding: 0.7rem 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  outline: none;
  transition: border-color 180ms ease;
}

.detail-object-chrome select:focus,
.detail-object-chrome input.qty:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.search-field:focus,
.contact-field:focus {
  border-color: var(--color-ash);
}

.contact-hero {
  padding-top: clamp(5.25rem, 7vw, 5.55rem);
  padding-bottom: calc(var(--section-content-rhythm) * 0.55);
}

.contact-surface {
  padding-block: var(--section-content-rhythm) var(--section-rhythm);
}

.contact-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}

.contact-copy p:not(.ba-eyebrow) {
  max-width: 32rem;
  margin: 0.9rem 0 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.55;
}

.contact-copy__rule {
  height: 1px;
  margin-block: clamp(1.8rem, 4vw, 3.25rem) 1.55rem;
  background: var(--color-hairline);
}

.contact-panel {
  display: grid;
  gap: 1.25rem;
  align-self: start;
  border-block: 1px solid var(--color-hairline);
  padding-block: 2rem;
}

.contact-panel__row {
  display: grid;
  gap: 1.25rem 1.55rem;
}

.contact-panel label {
  display: grid;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ash);
}

.contact-panel textarea.contact-field {
  resize: vertical;
}

.contact-panel button {
  justify-self: start;
  margin-top: 0.25rem;
}

@media (min-width: 960px) {
  .contact-grid {
    grid-template-columns: minmax(20rem, 0.52fr) minmax(0, 1fr);
  }

  .contact-panel__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.woocommerce table.shop_table {
  border: 0;
  border-collapse: collapse;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-color: var(--color-hairline);
}

.article-hero {
  /* Matches the rest of the system's page-hero treatment (paper surface,
     ink text) by default -- the inverted dark band is a reading-mode-only
     variant, not the standard journal-post hero. */
  padding-block: calc(var(--section-rhythm) * 0.8) var(--section-content-rhythm);
}

:root[data-reader-active="true"] .article-hero {
  background: var(--color-ink);
  color: var(--color-paper);
  margin-inline: calc(var(--rail) * -1);
  padding: var(--section-rhythm) var(--rail);
}

.article-hero h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 7vw, var(--type-h1));
  line-height: 1.05;
  /* A long unbroken title word (e.g. "Astrophotography?") can exceed the
     line box at narrow widths -- same overflow class as the footer email
     fix; let it wrap instead of escaping the hero band. */
  overflow-wrap: break-word;
}

.entry-content {
  line-height: 1.68;
}

.entry-content > * {
  margin-block: 0 var(--clearance-light);
}

.entry-content h2 {
  margin-block-start: var(--section-content-rhythm);
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, var(--type-h2));
  line-height: 1.12;
}

.site-footer {
  margin-block-start: calc(var(--section-rhythm) * 1.2);
  border-block-start: 1px solid var(--color-hairline);
}

.site-footer__main {
  /* Single column on narrow/mobile: pairing unequal-length nav lists (Site
     has 7 links, Editions has 4) into shared grid rows left a bigger visual
     gap under the shorter column than under the taller one before the next
     row -- stacking gives every column the same uniform trailing space. */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--clearance-dark);
  padding-block: var(--section-rhythm);
}

@media (min-width: 600px) {
  .site-footer__main {
    /* Two columns reaching the same rails as the rest of the page content --
       align-items:start means Site's 7 links and Editions' 4 links can
       differ in height without stretching either cell or disturbing
       whatever comes after them. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .footer-nav-last-col {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .site-footer__main {
    /* Discover stacks under Contact in a shared last column, rebalancing
       the row so it isn't a fifth column competing for width on its own. */
    grid-template-columns: 1.2fr auto auto auto;
    align-items: start;
    gap: 2.5rem;
  }

  /* Contact/Discover are one grid cell (.footer-nav-last-col) so Discover
     sits directly under Contact regardless of how tall Site/Editions are --
     giving them their own grid-row instead left Contact's cell stretched to
     match the tallest column, pushing Discover down with a big empty gap. */
  .footer-nav-last-col {
    grid-column: auto;
    display: grid;
    gap: 2.5rem;
  }
}

.site-footer__brand {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .site-footer__brand {
    grid-column: auto;
    max-width: 25rem;
  }
}

.footer-contact-email {
  overflow-wrap: break-word;
  word-break: break-word;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.site-footer__bottom {
  border-block-start: 1px solid var(--color-hairline);
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

.site-footer__utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.theme-toggle {
  /* Same understated icon-button-group language as .gallery-view-controls /
     .reading-mode-controls -- no boxed background, so it doesn't visually
     outweigh the rest of the footer utility row. */
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.theme-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: transparent;
  color: var(--color-ash);
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}

.theme-toggle button:hover {
  color: var(--color-ink);
}

.theme-toggle button[aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-paper);
}

.theme-toggle button svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
}

.reading-mode-controls {
  justify-content: flex-start;
  padding-block-end: 0;
}

:root[data-reader-active="true"] main :is(.entry-content, .article-card, .contact-copy, .taxon-story, .utility-grid, .preferences-preview__sample) {
  max-width: min(100%, var(--reader-width, 42rem));
}

:root[data-reader-width="narrow"] {
  --reader-width: 36rem;
}

:root[data-reader-width="standard"] {
  --reader-width: 42rem;
}

:root[data-reader-width="wide"] {
  --reader-width: 50rem;
}

:root[data-reader-size="large"] main :is(.entry-content p, .article-card p, .utility-grid p, .taxon-story p) {
  font-size: 1.125rem;
}

:root[data-reader-size="largest"] main :is(.entry-content p, .article-card p, .utility-grid p, .taxon-story p) {
  font-size: 1.25rem;
}

:root[data-reader-font="classic"] main :is(.entry-content, .article-card, .utility-grid, .taxon-story) {
  font-family: Georgia, "Times New Roman", serif;
}

:root[data-reader-font="system"] main :is(.entry-content, .article-card, .utility-grid, .taxon-story) {
  font-family: var(--font-sans);
}

.recognition-list-section {
  padding-block: var(--section-content-rhythm);
}

.recognition-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recognition-row {
  border-top: 1px solid var(--color-hairline);
  padding-block: var(--clearance-dark);
}

.recognition-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.recognition-row__grid {
  display: grid;
  gap: var(--layout-column-gap);
  grid-template-columns: 4rem minmax(0, 1fr);
  align-items: start;
}

.recognition-row__year {
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  line-height: 1.2;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.recognition-row__title {
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0 0 0.5rem;
}

.recognition-row__note {
  font-family: var(--font-serif);
  color: var(--color-ash);
  line-height: 1.68;
}

.recognition-row__image img {
  max-width: 100%;
  height: auto;
}

.recognition-empty {
  color: var(--color-ash);
}

@media (min-width: 768px) {
  .recognition-row__grid {
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  }
}

.style-guide-tokens {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--layout-column-gap);
  padding-block: var(--section-content-rhythm);
}

.style-guide-token__swatch {
  display: block;
  height: 5rem;
  border: 1px solid var(--color-hairline);
}

.style-guide-type {
  padding-block: var(--section-content-rhythm);
  display: grid;
  gap: var(--clearance-dark);
}

.style-guide-type__display {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 1;
  color: var(--color-ink);
}

.style-guide-type__editorial {
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  line-height: 1.2;
  color: var(--color-ink);
}

.style-guide-type__interface {
  font-family: var(--font-sans);
  font-size: var(--type-h5);
  line-height: 1.5;
  color: var(--color-ink);
}

.style-guide-components {
  padding-block: var(--section-content-rhythm);
  display: grid;
  gap: var(--clearance-dark);
}

.style-guide-row {
  display: grid;
  gap: var(--clearance-light);
  border-top: 1px solid var(--color-hairline);
  padding-top: var(--clearance-light);
}

.style-guide-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.style-guide-row__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.style-guide-price {
  font-family: var(--font-serif);
  font-size: var(--type-h3);
  color: var(--color-ink);
}

.style-guide-price--peer {
  font-size: var(--type-h4);
}

.style-guide-gates {
  padding-block: var(--section-content-rhythm);
}

.style-guide-gates ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink);
}

@media (min-width: 768px) {
  .style-guide-tokens {
    grid-template-columns: repeat(4, 1fr);
  }

  .style-guide-gates ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gallery-scroll-tint {
  transition: --gallery-darkness var(--gallery-transition-duration) cubic-bezier(0.22, 1, 0.36, 1);
  --color-paper: color-mix(in oklab, var(--gallery-start-paper), var(--gallery-end-paper) calc(var(--gallery-darkness) * 100%));
  --color-ink: color-mix(in oklab, var(--gallery-start-ink), var(--gallery-end-ink) calc(var(--gallery-darkness) * 100%));
  --color-ash: color-mix(in oklab, var(--gallery-start-ash), var(--gallery-end-ash) calc(var(--gallery-darkness) * 100%));
  --color-hairline: color-mix(in oklab, var(--gallery-start-hairline), var(--gallery-end-hairline) calc(var(--gallery-darkness) * 100%));
  background: var(--color-paper);
  min-height: 100svh;
}

.ba-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgb(10 10 10 / 0.92);
}

.ba-lightbox[aria-hidden="true"] {
  display: none;
}

.ba-lightbox__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ba-lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  border: 1px solid rgb(243 237 221 / 0.4);
  background: transparent;
  padding: 0.65rem 0.9rem;
  font-family: var(--font-mono);
  font-size: max(0.72rem, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3eddd;
  cursor: pointer;
}

.ba-lightbox__close:hover {
  border-color: #f3eddd;
}

body.ba-lightbox-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-scroll-tint {
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}