@charset "UTF-8";
/*!
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;
  --secondary-col-min: 20rem;
  --secondary-col-preferred: 33.333vw;
  --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);
}

/* A work with no print product doesn't link anywhere -- rather than falling
   back to the bare /works/ page, its caption/tile renders dimmed instead of
   underlined, so purchasable vs. not is visible without relying on a hover
   cursor alone. */
.ba-unlinked-caption {
  opacity: 0.62;
}

.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, rgba(24, 22, 22, 0.18), transparent 44%, rgba(24, 22, 22, 0.72));
}

.home-hero__inner {
  /* Width/centering come from .immersive-shell (already on this element in
     the markup) so the tagline lines up with the rest of the page's
     content rail at every viewport size, including wide ones where the
     shell is narrower than the viewport -- the hero photo itself is a
     separate, absolutely-positioned full-bleed layer (.home-hero__frames)
     and is unaffected by this element's width either way. */
  display: grid;
  height: 100%;
  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 rgba(243, 237, 221, 0.82), 0 1px 2px rgba(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;
}

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

@media (hover: none) {
  /* Touch devices have no reliable persistent hover, so hiding the controls
     until hover/focus would leave no way to reach them at all -- same fix
     already used for .taxon-card__meta. */
  .hero-frame-controls {
    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);
}

/* The Recognition ribbon reads as cramped against whatever sparse section
   happens to precede it (its own content is just a row of press logos, no
   large image to anchor the standard section-to-section rhythm) -- give it
   the same wider stacked-section gap already used elsewhere
   (--section-stack-gap), not the plain --section-rhythm every other
   .rhythm-section pair uses. */
.rhythm-section--recognition {
  padding-top: var(--section-stack-gap);
}

.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 {
  /* Top matches .archive-hero's rhythm -- this hero used to carry its own
     bespoke clamp() that read noticeably taller than /store or /prints at
     small viewports (2.55rem floor vs. archive-hero's ~0.8*section-rhythm),
     the source of the recurring "/work top spacing too great" annotations. */
  padding-block: calc(var(--section-rhythm) * 0.8) 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 {
  /* Top matches every other no-hero page (--page-start-gap); bottom stays
     its own generous clamp -- an empty/short cart still needs real
     clearance before the footer. */
  padding-top: var(--page-start-gap);
  padding-bottom: 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 {
  /* No top padding of its own -- the nested .page-hero already supplies
     --page-start-gap, same as every other no-hero page. This used to add
     a second, separate top gap on top of that (only below 720px was it
     zeroed out), which is what made these specific pages sit further from
     the header than the rest of the no-hero pages at wider viewports. */
  padding-bottom: var(--section-rhythm);
}

.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 {
  /* Matches every other no-hero page's top gap (--page-start-gap). */
  padding-top: var(--page-start-gap);
  padding-bottom: 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;
  }
}
/* .archive-hero is the large carousel/archive-index treatment and keeps its
   own top rhythm; .page-hero/.status-surface are the plain no-hero page
   heading (utility pages, 404) and share --page-start-gap with every other
   no-hero surface below (.cart-surface, .search-surface,
   .checkout-status-surface) so the gap under the sticky header reads the
   same everywhere a page doesn't open on a big hero. */
.archive-hero {
  padding-block: calc(var(--section-rhythm) * 0.8) var(--section-content-rhythm);
}

.page-hero,
.status-surface {
  padding-top: var(--page-start-gap);
  padding-bottom: 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/.status-surface are the no-hero page family -- the eyebrow is
   excluded here (unlike .archive-hero/.work-reference-hero below) so it
   doesn't inherit body-copy clearance on top of the section's own
   --page-start-gap padding, which was the other half of the top-spacing
   inconsistency across no-hero pages (.cart-surface/.search-surface/
   .checkout-status-surface never had a wrapping <header> for this rule to
   reach in the first place). */
.page-hero p:not(.ba-eyebrow),
.status-surface p:not(.ba-eyebrow) {
  max-width: 74ch;
  margin: var(--clearance-light) 0 0;
  font-family: var(--font-serif);
  line-height: 1.68;
}

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

@media (max-width: 47.9375rem) {
  /* The rule above targets every <p> in the hero for real body-copy
     clearance, but .work-reference-hero's first child is the "Work"
     eyebrow label, not a body paragraph -- it shouldn't inherit that
     spacing on top of the hero's own padding-top. Left alone above this
     breakpoint (unreported, and the wider hero reads fine with it). */
  .work-reference-hero .ba-eyebrow {
    margin-top: 0;
  }
}
.ba-eyebrow {
  /* 0.75rem * 1.25 -- review-sweep asked for 25% more eyebrow-to-title
     clearance site-wide once the eyebrow's own margin (rather than a
     borrowed body-copy one) started actually reaching the page. */
  margin: 0 0 0.9375rem;
  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-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: 0.45rem 0 0;
}

.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-product-grid__controls {
  padding-block-end: var(--clearance-dark);
}

.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 a {
  color: var(--color-ink);
  text-underline-offset: 0.25em;
}

.archive-pagination__pages {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.archive-pagination__pages a,
.archive-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.35rem;
  color: var(--color-ash);
}

.archive-pagination__pages a {
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease;
}

.archive-pagination__pages a:hover {
  color: var(--color-ink);
}

.archive-pagination__pages a[aria-current=page] {
  background: var(--color-ink);
  color: var(--color-paper);
}

.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;
  /* Unlike a still image, a clip carries its own picture as soon as its
     poster resolves -- the hairline placeholder fill every other
     .media-card__image keeps for its loading state would otherwise show
     around/behind the video. */
  background: none;
}

.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: rgba(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: rgba(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;
}

/* Trial variant, store catalogue only (page-store.php passes $price_row) --
   see the comment on ba_preview_product_archive_card() in functions.php for
   how to revert. Title hangs left, price hangs right, 70/30, both centered
   on the same line -- and both in font-serif, matching the mockup's point
   that the price should read in the title's own typeface, not get
   relegated to a smaller utility face. */
.archive-product-card--priced .archive-product-card__row {
  display: grid;
  grid-template-columns: 7fr 3fr;
  align-items: center;
  column-gap: 0.75rem;
}

.archive-product-card--priced .archive-product-card__row .archive-product-card__title {
  min-width: 0;
}

.archive-product-card--priced .archive-product-card__price {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.05;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.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: var(--type-eyebrow-compact);
  letter-spacing: var(--tracking-eyebrow-compact);
  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: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  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 {
  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%, (100svh - var(--site-header-height) - var(--page-start-gap) * 2) * 0.6038751346);
  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;
  /* Single column (the base/default layout -- grid and masonry are the
     explicit overrides below) renders each item at full rail width, so an
     unusually tall/portrait source image would otherwise render at natural
     height with no ceiling. `data-gallery-layout` is only set by a
     wp_footer script, so this has to be the unscoped default rather than
     conditioned on the attribute -- it must already hold true on first
     paint, before that script has run. */
  max-height: min(62rem, 92svh);
  object-fit: contain;
}

[data-gallery-layout=grid] .series-evidence__item img,
[data-gallery-layout=masonry] .series-evidence__item img {
  max-height: none;
}

.series-evidence__item--motion {
  cursor: default;
}

.series-evidence__item--motion video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(62rem, 92svh);
  object-fit: contain;
}

[data-gallery-layout=grid] .series-evidence__item--motion video,
[data-gallery-layout=masonry] .series-evidence__item--motion video {
  max-height: none;
}

.series-evidence__motion-caption {
  margin-top: 0.75rem;
}

.series-evidence__motion-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.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, rgba(10, 10, 10, 0.85), rgba(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, rgba(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-title a {
  /* The title itself is the link to the print page (the separate "Print ->"
     CTA this replaced was breaking the gallery's visual flow); underlined
     since color alone against a photo isn't a reliable link affordance. */
  pointer-events: auto;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.gallery-figure__overlay-description {
  margin: 0.4rem 0 0;
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(243, 237, 221, 0.75);
}

@media (max-width: 47.9375rem) {
  /* On phones the overlay's always-on (hover:none) dark scrim permanently
     covers part of every photo -- there's no hover to reveal it against,
     so it just sits there. Below this width the caption drops out of the
     image entirely and reads as a normal block underneath the frame. */
  .gallery-figure__overlay {
    position: static;
    inset: auto;
    padding: 0.75rem 0 0;
    background: none;
    opacity: 1;
  }
  .gallery-figure__overlay-title {
    color: var(--color-ink);
  }
  .gallery-figure__overlay-description {
    color: var(--color-ash);
  }
}
.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;
}

.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 {
  /* Matches every other no-hero page's top gap (--page-start-gap). */
  padding-top: var(--page-start-gap);
  padding-bottom: 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);
  /* 0 outside the >=72rem media query below: only a side-by-side layout
     needs to reserve floor space for the chrome column ahead of time. */
  --detail-object-chrome-floor: 0px;
  --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));
  /* The media column is snug to the rail at its own intrinsic aspect ratio,
     capped by viewport height -- never wider than that. Subtracting the
     chrome floor here (not just the gap) is what makes it impossible for a
     wide-ish image at a tall viewport to squeeze the title column past
     its minimum: the image gives way first, every time. */
  --detail-object-media-max-inline: calc(
    var(--detail-object-content-inline) - var(--detail-object-gap) - var(--detail-object-chrome-floor)
  );
  --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%, var(--detail-object-image-cap) * var(--image-aspect, 1));
  max-width: 100%;
  height: auto;
  max-height: var(--detail-object-image-cap);
  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: rgba(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;
  }
  /* A motion clip's tile in a gallery grid is nowhere near full-size at any
     viewport width (unlike a detail page's own sticky-column image), so
     the expand-to-lightbox button stays available here even though the
     shared rule above hides it on a product/experience detail page. */
  .series-evidence__item--motion .detail-object-expand-hint {
    display: inline-flex;
  }
}
.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;
}

/* Multi-image carousel (>=2 gallery images) -- same frame-stack + crossfade
   technique as .about-carousel, but sized off the same --image-aspect/
   --detail-object-image-cap custom properties the single-image path uses
   (moved from the <img> itself onto the wrapping viewport, since absolutely
   positioned frames don't contribute to a parent's intrinsic size). The
   zoom cursor moves from .detail-object-media (which now also contains the
   controls bar) to just the frame viewport. */
.detail-object-media--carousel {
  cursor: default;
}

.detail-object-carousel-frames {
  position: relative;
  width: min(100%, var(--detail-object-image-cap) * var(--image-aspect, 1));
  max-width: 100%;
  aspect-ratio: var(--image-aspect, 1);
  max-height: var(--detail-object-image-cap);
  margin-inline: auto;
  overflow: hidden;
  cursor: zoom-in;
}

.detail-object-carousel-frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 220ms ease;
}

.detail-object-carousel-frame[data-active=true] {
  opacity: 1;
}

.detail-object-carousel-frame .detail-object-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
}

.detail-object-carousel-controls {
  /* .media-frame-controls is flex-direction:column, so centering its rows
     under the (possibly narrower-than-column, margin-inline:auto'd) image
     needs the box itself centered and shrunk to content, not
     align-items/justify-content on the flex container. */
  width: fit-content;
  margin-inline: auto;
  margin-block-start: 0.75rem;
}

.detail-object-grid--wide .detail-object-carousel-frames {
  width: 100%;
  aspect-ratio: auto;
  height: var(--detail-object-wide-media-cap);
  max-height: var(--detail-object-wide-media-cap);
}

.detail-object-grid--wide .detail-object-carousel-frame .detail-object-image {
  object-fit: cover;
}

.motion-detail .detail-object-media {
  cursor: default;
}

.motion-detail__meta {
  color: var(--color-ash, currentColor);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.motion-thumbnail-sheet {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
  margin-block-start: 1rem;
}

.motion-thumbnail-sheet__frame {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

@media (max-width: 40rem) {
  .motion-thumbnail-sheet {
    grid-template-columns: repeat(3, 1fr);
  }
}
.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) {
  /* PRIMARY rule: the chrome column holds >= 1/3 of the viewport, so a
     wide-ish image can never swallow it (it used to have no floor at all,
     which is what let a tall viewport's aspect-driven media-basis crush it
     to the point of title overflow). The 20rem floor and the half-content
     ceiling are second-order guards that only bite on very small or very
     wide viewports -- the 1/3 rule governs everything in between. The
     media column itself is snug to the rail at its own intrinsic aspect
     ratio (--detail-object-media-basis, set above), capped by this floor:
     the image shrinks to make room, never the other way around. */
  .detail-object-grid {
    --detail-object-chrome-floor: clamp(
      var(--secondary-col-min),
      var(--secondary-col-preferred),
      calc(var(--detail-object-content-inline) * 0.5)
    );
    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;
  }
  /* Options/chrome column is a fraction strictly narrower than the media
     column, so it can never be wider than the copy beside it. Only images
     past the wide threshold (aspect > 2) reach this variant at all -- the
     ordinary media-basis/chrome-floor split above handles everything else,
     including every aspect ratio that previously got its own separate
     "panorama" treatment. */
  .detail-object-grid--wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    align-items: start;
    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 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(0, 0.8fr);
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
  /* .detail-object-chrome form.cart's margin-block-start (--clearance-light)
     exists to separate the form from the summary text stacked above it in
     every other layout -- but here summary and form sit side by side from
     the same row-start. Replaced with a small fixed offset (tuned against
     the h1/price baselines directly, not derived from any shared rhythm
     token) so the price's baseline lands on the same line as the h1's,
     rather than sitting visibly higher. */
  .detail-object-grid--wide .detail-object-chrome form.cart {
    margin-block-start: 1.15rem;
  }
}
.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;
  /* Absolute guarantee against a single unbreakable word (a long compound
     title) overflowing its column, no matter how the column ends up
     sized -- costs nothing when it never triggers. */
  overflow-wrap: anywhere;
}

@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: 1rem;
  border-bottom: 1px solid var(--color-hairline);
  color: color-mix(in oklab, var(--color-ink) 58%, var(--color-paper) 42%);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

@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:not(.is-disabled):hover {
  background-color: color-mix(in oklab, var(--color-ink) 5%, var(--color-paper) 95%);
}

.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-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);
}

/* 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;
  }
}
.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-framing {
  margin-block-start: clamp(2rem, 3.5vw, 3rem);
}

.ba-framing__checkbox {
  appearance: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border: 1px solid var(--color-ash);
  background: transparent;
  flex: 0 0 auto;
  cursor: pointer;
}

.ba-framing__checkbox:checked {
  border-color: var(--color-ink);
  background: var(--color-ink);
  box-shadow: inset 0 0 0 4px var(--color-paper);
}

/*
 * The `hidden` DOM property (set/cleared in ba_framing_purchase_script) is
 * only a user-agent-stylesheet-level `display: none` -- it loses to ANY
 * author `display` declaration on the same element regardless of
 * specificity, and `.edition-rows`/list styling further down sets one.
 * This rule is what actually hides the panel; without it `hidden` is set
 * correctly but has no visual effect.
 */
.ba-framing__options[hidden] {
  display: none;
}

.ba-purchase-form .ba-framing__options {
  margin-block-start: 1.1rem;
}

.ba-framing__options .edition-rows {
  margin-top: 0;
}

.ba-framing__row {
  cursor: default;
}

.ba-framing__select-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

@media (min-width: 640px) {
  .ba-framing__select-wrap {
    justify-content: flex-end;
  }
}
.ba-framing__select {
  appearance: auto;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1;
  text-align: inherit;
  padding: 0;
}

@media (min-width: 640px) {
  .ba-framing__select {
    width: auto;
  }
}
.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 {
  /* Matches every other no-hero page's top gap (--page-start-gap); this
     used to run its own much larger clamp() for no evident reason. */
  padding-top: var(--page-start-gap);
  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 {
  /* Two columns even at the smallest widths (mobile), stepping to three at
     tablet and four at desktop -- reflowing to as few rows as the column
     count allows rather than the single stacked column this used to be.
     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. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--clearance-dark);
  padding-block: var(--section-rhythm);
}

@media (min-width: 48rem) {
  .site-footer__main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}
@media (min-width: 64rem) {
  .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;
    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 would leave Contact's cell
   stretched to match the tallest column, pushing Discover down with a big
   empty gap. Below 48rem this cell only ever holds half the two-column
   grid, so it stays a single stacked track at every width. */
.footer-nav-last-col {
  display: grid;
  gap: 2.5rem;
}

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

@media (min-width: 64rem) {
  .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;
}

.utility-toggle {
  /* Same icon-button treatment as .theme-toggle button -- it used to
     render as bare, unstyled button text ("Reading mode") sitting next to
     the icon-only color-mode group; the icon markup already existed
     (ba_preview_reading_mode_icon()) and is used the same way on article
     pages (.reading-mode-controls), just not wired up in the footer. */
  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;
}

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

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

.utility-toggle 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__work-link {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.recognition-row__work-link:hover {
  color: var(--color-ash);
}

.recognition-row__image {
  display: block;
  width: 100%;
  max-width: 10rem;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-hairline);
}

.recognition-row__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.recognition-list-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}

.recognition-images-toggle {
  flex-shrink: 0;
  border: 0;
  padding: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ash);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
  transition: color 180ms ease;
}

.recognition-images-toggle:hover {
  color: var(--color-ink);
}

.recognition-list-section--images-hidden .recognition-row__image {
  display: none;
}

@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);
  }
}
.comparison-gallery {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  margin: 1.75rem 0 0;
}

.comparison-set {
  margin: 0;
}

/* On /work/comparisons/ this class is combined directly onto the same
   .series-evidence grid a plain gallery uses (single-ba_series.php), so
   its existing view-toggle grid/masonry rules reach these figures without
   needing their own duplicate breakpoints -- masonry just needs the same
   break-inside treatment .series-evidence__item already gets. */
[data-gallery-layout=masonry] .comparison-set {
  break-inside: avoid;
  margin-bottom: var(--section-content-rhythm);
}

.comparison-set__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--comparison-aspect, 3/2);
  /* A tall/portrait pair at full rail width would otherwise size the stage
     off the aspect ratio alone, which can run taller than the viewport on
     narrow screens -- capped so the frame (and the controls below it)
     always fit on screen; object-fit: cover on the layers absorbs the crop. */
  max-height: min(70svh, 44rem);
  /* Single column (the default) sizes the frame off its own aspect ratio
     and centers it, the same as a plain gallery image
     (.series-lead-image) -- rather than stretching to the full rail width
     and letting object-fit: cover crop the photo to match. Grid/masonry
     override this back to filling their own cell (below), same as
     .series-evidence__item. */
  width: min(100%, min(70svh, 44rem) * var(--comparison-aspect, 1.5));
  margin-inline: auto;
  background: var(--color-hairline);
  cursor: ew-resize;
  touch-action: pan-y;
}

[data-gallery-layout=grid] .comparison-set__stage,
[data-gallery-layout=masonry] .comparison-set__stage {
  width: 100%;
  margin-inline: 0;
  max-height: none;
}

.comparison-set__layer {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comparison-set__before {
  position: absolute;
  inset: 0;
  /* Matches the script's initial apply(75) and the range input's default
     value -- comparisons open mostly showing the "before" layer rather
     than an even 50/50 split. */
  clip-path: polygon(0 0, 75% 0, 75% 100%, 0 100%);
}

.comparison-set__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 75%;
  width: 1px;
  background: var(--color-paper);
  pointer-events: none;
}

.comparison-set__handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5rem;
  height: 2.5rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(5, 5, 5, 0.35);
  backdrop-filter: blur(2px);
}

.comparison-set__labels {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  pointer-events: none;
}

.comparison-set__labels span {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-compact);
  letter-spacing: var(--tracking-eyebrow-compact);
  text-transform: uppercase;
  color: #f3eddd;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.comparison-set__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: 0.75rem;
}

.comparison-set__footer .ba-eyebrow {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-set__reveal {
  /* Fixed to its own comfortable width and never allowed to shrink below
     it -- a long comparison title truncates (above) or the control wraps
     to its own line (flex-wrap, above) rather than the slider itself
     getting squeezed down to an unusable sliver. */
  display: flex;
  align-items: center;
  flex: 0 1 12rem;
  min-width: 8rem;
}

.comparison-set__reveal input {
  width: 100%;
  accent-color: var(--color-ink);
}

.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;
}

/* Plyr theming -- mapped onto this site's own tokens (which already flip
   with the light/dark toggle) rather than Plyr's default blue, so the
   player reads as part of this theme instead of a foreign embed. */
.plyr {
  --plyr-color-main: var(--color-ink);
  --plyr-video-control-color: var(--color-paper);
  --plyr-video-control-color-hover: var(--color-paper);
  /* No solid backdrop behind/around the clip itself (the video-wrapper and
     poster's own fill) -- only the control bar keeps its own dark gradient,
     needed for the icons to stay legible over whatever the footage shows. */
  --plyr-video-background: transparent;
  --plyr-menu-background: var(--color-paper);
  --plyr-menu-color: var(--color-ink);
  --plyr-font-family: var(--font-mono);
}

.ba-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 2rem;
  background: rgba(10, 10, 10, 0.92);
}

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

.ba-lightbox__image {
  max-width: 100%;
  max-height: min(70svh, 44rem);
  object-fit: contain;
}

.ba-lightbox__video {
  max-width: 100%;
  max-height: min(70svh, 44rem);
}

/* Plyr wraps .ba-lightbox__video in its own .plyr container -- this sizes
   that wrapper the same way .ba-lightbox__image sizes the plain photo, so
   a clip reads at the same scale a photo would in the same spot. */
.ba-lightbox .plyr {
  width: auto;
  max-width: 100%;
  max-height: min(70svh, 44rem);
}

.ba-lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  border: 1px solid rgba(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;
}

.ba-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #f3eddd;
  cursor: pointer;
  transition: color 180ms ease;
}

.ba-lightbox__nav:hover {
  color: #ffffff;
}

.ba-lightbox__nav[hidden] {
  display: none;
}

.ba-lightbox__nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ba-lightbox__nav--prev {
  left: 0.5rem;
}

.ba-lightbox__nav--next {
  right: 0.5rem;
}

@media (min-width: 48rem) {
  .ba-lightbox__nav--prev {
    left: 1.5rem;
  }
  .ba-lightbox__nav--next {
    right: 1.5rem;
  }
}
.ba-lightbox__meta {
  width: min(100%, 40rem);
  text-align: center;
}

.ba-lightbox__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: #f3eddd;
}

.ba-lightbox__description {
  margin: 0.4rem 0 0;
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(243, 237, 221, 0.75);
}

.ba-lightbox__position {
  margin: 0.6rem 0 0;
  font-family: var(--font-mono);
  font-size: max(0.68rem, 12px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(243, 237, 221, 0.6);
}

.ba-lightbox__title:empty,
.ba-lightbox__description:empty,
.ba-lightbox__position:empty {
  display: none;
}

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;
  }
}