/* ==========================================================
   art.allisterk.com — Fine Arts · v1.0
   ----------------------------------------------------------
   Self-contained stylesheet. Steel Blue pigment family
   (mirrored from server/allisterk.com/common-assets/css/tokens.css;
   keep in sync when the hub tokens change).
   ========================================================== */

:root {
  /* type */
  --type-serif: "Crimson Pro", "Iowan Old Style", Georgia, serif;
  --type-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ink */
  --ink:        #14110E;
  --ink-soft:   #6B6357;
  --ink-faint:  rgba(20, 17, 14, 0.13);
  --ink-rule:   rgba(20, 17, 14, 0.18);

  /* paper */
  --paper:        #F7F3EA;
  --paper-shade:  #ECE6D5;
  --paper-shade-c: var(--paper-shade);

  /* steel-blue pigment family */
  --pigment:      #1982C4;
  --pigment-deep: #0E4868;
  --pigment-soft: #9CC6E2;
  --hl-1:         #C9503A;
  --hl-2:         #C9B23A;

  /* layout */
  --bound: 90rem;
  --pad-x:    1.5rem;
  --pad-x-lg: 3rem;
}

/* ── Reset / base ───────────────────────────────────────── */

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

html, body { margin: 0; padding: 0; }

html {
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 900px) { html { font-size: 18px; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--type-serif);
  font-weight: 400;
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
}

img, svg {
  max-width: 100%;
  display: block;
}

a {
  color: var(--pigment);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--pigment) 35%, transparent);
  transition: color 180ms ease, border-color 180ms ease;
}
a:hover { color: var(--pigment-deep); border-bottom-color: var(--pigment-deep); }

::selection { background: var(--pigment-soft); color: var(--ink); }

/* ── Bound utility — every section uses the same wrap ───── */

.fa-bound {
  max-width: var(--bound);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
@media (min-width: 900px) {
  .fa-bound { padding-left: var(--pad-x-lg); padding-right: var(--pad-x-lg); }
}

/* ── Masthead with CSS-only hamburger ───────────────────── */

.masthead-bar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ink);
}
.masthead-id {
  font-family: var(--type-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  border: none;
}
.masthead-id:hover { color: var(--pigment); }

/* hidden checkbox drives the toggle */
.nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  inline-size: 0;
  block-size: 0;
}

/* burger button — visible <720px only. No box; just the bars. */
.nav-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  padding: 0;
  align-self: center;
  border: none;
  background: transparent;
}
.nav-burger span {
  display: block;
  height: 2px;
  background: var(--ink);
  width: 100%;
  transition: transform 220ms ease, opacity 200ms ease;
  transform-origin: center;
}
.nav-toggle:checked ~ .nav-burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle:checked ~ .nav-burger span:nth-child(2) {
  opacity: 0;
}
.nav-toggle:checked ~ .nav-burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* nav panel — mobile: hidden until :checked */
.nav-panel {
  grid-column: 1 / -1;
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 1rem;
  padding-bottom: 0.25rem;
  margin-top: 1rem;
  border-top: 1px solid var(--ink-rule);
}
.nav-toggle:checked ~ .nav-panel { display: flex; }

/* All nav items are .fa-cta (with .fa-cta--sm sizing). The button
   styling comes from the unified .fa-cta block lower in this file;
   here we just space them in the panel. */
.nav-panel .nav-link {
  align-self: flex-start;
  margin-top: 0.25rem;
}

/* ≥720px: nav inline, hamburger hidden */
@media (min-width: 720px) {
  .masthead-bar {
    grid-template-columns: 1fr auto;
  }
  .nav-burger { display: none; }
  .nav-panel {
    grid-column: auto;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 1.4rem;
    margin-top: 0;
    padding: 0;
    border: none;
  }
  .nav-panel .nav-link { margin-top: 0; }
}

/* ── Breadcrumb ─────────────────────────────────────────── */

.fa-crumb {
  padding-top: 2rem;
  padding-bottom: 0;
  font-family: var(--type-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
@media (min-width: 900px) { .fa-crumb { padding-top: 3rem; } }
.fa-crumb a { color: var(--ink-soft); border: none; }
.fa-crumb a:hover { color: var(--pigment); }
.fa-crumb .sep { color: var(--ink-faint); margin: 0 0.6em; }
.fa-crumb .here { color: var(--pigment-deep); }

/* ── Image cells (orientation-aware) ────────────────────── */

/* The image cell — neutral tan mat (paper-shade-c) by default;
   pigment-soft on hover. Placeholders AND real photographs share
   the same treatment. Padding-based inset gives an equal-weight
   border on all four sides regardless of content aspect ratio. */
.fa-image {
  background: var(--paper-shade-c);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1.25rem;
  box-sizing: border-box;
  transition: background-color 250ms ease;
}
.fa-image[data-orient="portrait"]  { aspect-ratio: 4 / 5; }
.fa-image[data-orient="landscape"] { aspect-ratio: 5 / 4; }
.fa-image[data-orient="square"]    { aspect-ratio: 1 / 1; }

/* Cell contents fill the padded inner box, preserving intrinsic
   aspect ratio. SVGs and IMGs use the same rules so the framed
   look is unified. */
.fa-image svg,
.fa-image img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  transition: transform 400ms ease;
}
.fa-image img {
  object-fit: contain;
  object-position: center;
}

.fa-image-link {
  display: block;
  border: none;
}
.fa-image-link:hover .fa-image,
.series-card:hover .fa-image {
  background: var(--pigment-soft);
}
.fa-image-link:hover .fa-image svg,
.fa-image-link:hover .fa-image img,
.series-card:hover .fa-image svg,
.series-card:hover .fa-image img { transform: scale(1.02); }

/* ── Two-register caption (FM lesson) ───────────────────── */

.fa-caption {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}
.fa-caption .title-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
}
.fa-caption .title {
  font-family: var(--type-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}
.fa-caption .title a { color: inherit; border: none; }
.fa-caption .title a:hover { color: var(--pigment-deep); }
.fa-caption .year {
  font-family: var(--type-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: oldstyle-nums;
}
.fa-caption .spec {
  font-family: var(--type-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  line-height: 1.55;
}
.fa-caption .spec .sep { color: var(--ink-faint); margin: 0 0.4em; }

/* ── Landing ────────────────────────────────────────────── */

.page-landing .intro {
  padding-top: 4rem;
  padding-bottom: 3rem;
}
@media (min-width: 900px) {
  .page-landing .intro { padding-top: 5rem; padding-bottom: 4rem; }
}
.page-landing .intro-h1 {
  font-family: var(--type-serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  max-width: 22ch;
}
.page-landing .intro-h1 em {
  font-style: italic;
  color: var(--pigment-deep);
  font-weight: 300;
}

.page-landing .series-list {
  padding-bottom: 5rem;
}
@media (min-width: 900px) {
  .page-landing .series-list { padding-bottom: 6rem; }
}
.series-list-head {
  padding: 3rem 0 1.25rem;
  border-bottom: 1px solid var(--ink-rule);
  font-family: var(--type-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.series-list-head .label { color: var(--ink); font-weight: 500; }

.series-grid {
  /* mobile: 2 columns minimum, even on narrow phones */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 1.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 640px) {
  .series-grid {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 3.5rem 2.5rem;
  }
}
.series-card {
  display: block;     /* top-stack; extra row-height pads bottom */
  text-decoration: none;
  color: var(--ink);
  border: none;
}
.series-card-body {
  display: grid;
  gap: 0.3rem;
  margin-top: 1rem;
}
.series-card .name {
  font-family: var(--type-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 1.8vw, 1.6rem);
  line-height: 1.15;
  color: var(--ink);
}
.series-card:hover .name { color: var(--pigment-deep); }
.series-card .meta {
  font-family: var(--type-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.series-card .meta .yrs { color: var(--pigment-deep); }
/* hover treatment unified above in .fa-image rules */

/* ── Series-detail head (title + 3-col header) ──────────
   Layout v1.0.11:
   - h1 spans full width at the top.
   - ≥900px: header is a 3-col grid below the h1.
       cols 1 + 2 → description (text flows via `column-count: 2`)
       col 3      → meta dl
   - Below the header, the works grid is its own full-width
     section (2-col on narrow, auto-fill on wide).
   - <900px: lead paragraph + "More + details" expander; further
     paragraphs and meta hidden until the toggle is checked.
*/

.page-series .series-head {
  padding-top: 3rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--ink);
}
@media (min-width: 900px) {
  .page-series .series-head { padding-top: 3.5rem; padding-bottom: 4.5rem; }
}

.series-title {
  font-family: var(--type-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 2rem;
  color: var(--ink);
}
@media (min-width: 900px) {
  .series-title { margin-bottom: 2.5rem; }
}

/* Body: mobile stacks (description, expander, meta); desktop is a
   3-col grid where the description occupies cols 1–2 and the meta
   sits in col 3. Source order: toggle → description → label → meta,
   so the checkbox-hack sibling selectors can reach the description
   and the meta with `~`. */
.series-head-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .series-head-body {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: 3rem;
    align-items: start;
  }
  .series-head-body .series-description { grid-column: 1; }
  .series-head-body .series-meta         { grid-column: 2; }
}

/* Description block.
   Mobile: one column at base size; only the first paragraph
   is visible by default, the rest are revealed by the expander.
   Desktop: text flows across 2 columns via `column-count: 2`,
   filling the left 2/3 of the header. */
.series-description {
  font-family: var(--type-serif);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
}
.series-description p { margin: 0 0 1em; }
.series-description p:last-child { margin-bottom: 0; }
.series-description em { color: var(--pigment-deep); font-style: italic; }

/* First paragraph is the lead — italic, larger. Visible at all
   viewports (the mobile expander hides only the following paragraphs). */
.series-description p:first-child {
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 1em;
}
.series-description p:first-child em { color: var(--pigment-deep); }

@media (min-width: 900px) {
  .series-description {
    column-count: 2;
    column-gap: 2.5rem;
    column-fill: balance;
  }
  /* Keep the lead paragraph in column 1 so it doesn't get split. */
  .series-description p:first-child {
    break-after: column;
    break-inside: avoid;
  }
}

/* ── Mobile expander (CSS-only, checkbox-hack) ────────────
   Matches the existing nav-hamburger pattern. The hidden checkbox
   carries state; its sibling label is the visible button; the body
   container is the next sibling and its display is gated by
   :checked. On ≥900px the expander is hidden and the body is
   always visible. */
.series-expand-toggle {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
  pointer-events: none;
}
.series-expand-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  cursor: pointer;
  padding: 0.4rem 0;
  font-family: var(--type-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink-rule);
  user-select: none;
  transition: color 180ms ease, border-color 180ms ease;
}
.series-expand-summary:hover {
  color: var(--pigment-deep);
  border-bottom-color: var(--pigment);
}
.series-expand-toggle:focus-visible + .series-expand-summary {
  outline: 1px solid var(--pigment);
  outline-offset: 4px;
}
.series-expand-text::before { content: attr(data-more); }
.series-expand-toggle:checked ~ .series-expand-summary .series-expand-text::before {
  content: attr(data-less);
}
.series-expand-icon {
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}
.series-expand-toggle:checked ~ .series-expand-summary .series-expand-icon {
  transform: translateY(2px) rotate(-135deg);
}

/* Mobile collapsed state: hide every paragraph after the first inside
   .series-description, and hide the entire .series-meta. The toggle's
   `:checked` state reveals them. Selectors lean on the markup order
   (toggle → description → label → meta as siblings of .series-head-body). */
@media (max-width: 899px) {
  .series-expand-toggle ~ .series-description > p ~ p { display: none; }
  .series-expand-toggle ~ .series-meta { display: none; }

  .series-expand-toggle:checked ~ .series-description > p ~ p { display: block; }
  .series-expand-toggle:checked ~ .series-meta { display: grid; }
}

/* Desktop: expander button hidden, everything else always shown. */
@media (min-width: 900px) {
  .series-expand-summary { display: none; }
}

/* Meta dl — vertical stack inside the body column. */
.series-meta {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0.6rem 1rem;
  font-family: var(--type-serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  align-items: baseline;
}
.series-meta dt {
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
}
.series-meta dd { margin: 0; }
.series-meta a { color: var(--pigment); border: none; }
.series-meta a:hover { color: var(--pigment-deep); }

/* ── Works grid (orientation-aware, auto-fill on wide) ──────
   Full-width section below the series header. Mobile = 2 cols
   minimum; ≥640px = auto-fill with a 20rem minimum so wide
   viewports get 3+ columns. Landscape works span 2 cols via the
   existing :has() rule. */

.page-series .works {
  padding-top: 2.5rem;
  padding-bottom: 5rem;
}
@media (min-width: 900px) {
  .page-series .works { padding-top: 3rem; padding-bottom: 6rem; }
}

.works-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 1.5rem;
}
@media (min-width: 640px) {
  .works-grid {
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 4rem 2.5rem;
  }
}
.work {
  display: block;     /* natural top-stack; outer grid stretches the
                         article so any extra height pads the bottom,
                         not the gap between image and caption. */
}

/* Landscape works span 2 columns on multi-column grids — gives wide
   pieces room to breathe. Falls back to single column on narrow
   viewports. Uses :has() which is supported in all evergreen
   browsers since 2023. */
@media (min-width: 760px) {
  .works-grid > .work:has(.fa-image[data-orient="landscape"]),
  .related-grid > .work:has(.fa-image[data-orient="landscape"]),
  .related-grid > .related-card:has(.fa-image[data-orient="landscape"]),
  .series-grid > .series-card:has(.fa-image[data-orient="landscape"]) {
    grid-column: span 2;
  }

  /* A 2-col landscape card is 2× a portrait col + the inter-column gap.
     8/5 (1.6) was too tall — the gap-width pushes total width past 2×col,
     so the resulting cell ended up ~30px taller than a portrait card.
     17/10 (1.7) absorbs the gap and brings landscape height in line
     with portrait at typical column widths (200–400px). */
  .works-grid > .work:has(.fa-image[data-orient="landscape"]) .fa-image,
  .related-grid > .work:has(.fa-image[data-orient="landscape"]) .fa-image,
  .related-grid > .related-card:has(.fa-image[data-orient="landscape"]) .fa-image,
  .series-grid > .series-card:has(.fa-image[data-orient="landscape"]) .fa-image {
    aspect-ratio: 17 / 10;
  }
}

/* ── Work detail ────────────────────────────────────────── */

.page-work .work-detail {
  padding-top: 3rem;
  padding-bottom: 4rem;
}
@media (min-width: 900px) {
  .page-work .work-detail { padding-top: 4rem; padding-bottom: 5rem; }
}
.work-detail-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 900px) {
  .work-detail-inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 4rem;
  }
}
/* The stage stacks the cover image and any number of detail shots,
   each at full column width. No thumb grid, no swap — each shot is its
   own first-class artifact. The sticky `.work-info` aside provides
   the TOC that anchors readers back to a specific detail.

   `scroll-margin-top` gives anchor jumps a little air above each
   figure so the heading doesn't kiss the viewport edge. */
.work-stage {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media (min-width: 900px) {
  .work-stage { gap: 3.5rem; }
}
.work-image,
.work-detail-shot {
  margin: 0;
  scroll-margin-top: 2rem;
}

.work-detail-shot figcaption {
  font-family: var(--type-serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0.85rem 0 0;
  max-width: 52ch;
}

/* Sidebar TOC into the detail shots — small numbered list of links.
   Lives inside the sticky `.work-info` so it stays visible while
   reading. Numbers use the monospace face; labels use serif italic. */
.work-detail-nav {
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-rule);
}
.work-detail-nav .label {
  font-family: var(--type-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}
.work-detail-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.work-detail-nav li { margin: 0; }
.work-detail-nav a {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.2rem 0;
  border: none;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--type-serif);
  font-size: 1rem;
  line-height: 1.4;
  transition: color 180ms ease;
}
.work-detail-nav a .n {
  font-family: var(--type-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "lnum" 1;
}
.work-detail-nav a .t {
  font-style: italic;
  color: var(--ink);
}
.work-detail-nav a:hover { color: var(--pigment-deep); }
.work-detail-nav a:hover .n { color: var(--pigment); }
.work-detail-nav a:hover .t { color: var(--pigment-deep); }
.work-detail-nav a:focus-visible {
  outline: 1px solid var(--pigment);
  outline-offset: 2px;
}

/* Smooth-scroll anchor jumps — gated to honor reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.work-info {
  align-self: start;
  padding-top: 0.25rem;
}
@media (min-width: 900px) {
  .work-info { position: sticky; top: 1.5rem; }
}
.work-info h1 {
  font-family: var(--type-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.05;
  margin: 0 0 0.4rem;
  color: var(--ink);
}
.work-info .spec {
  margin: 1.5rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.55rem 1rem;
  /* one type family for label + value so baselines align cleanly */
  font-family: var(--type-serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  align-items: baseline;
}
.work-info .spec dt {
  /* label distinguished by italic + softer color, NOT by font swap */
  font-style: italic;
  color: var(--ink-soft);
  font-feature-settings: "lnum" 1;
}
.work-info .spec dd {
  margin: 0;
  font-variant-numeric: oldstyle-nums proportional-nums;
}
.work-info .spec dd em { color: var(--pigment-deep); font-style: italic; }
.work-info .spec dd.tabular {
  /* tabular numerals stay in Crimson Pro */
  font-variant-numeric: tabular-nums lining-nums;
}
.work-info .spec dd a { color: var(--pigment); border: none; }
.work-info .spec dd a:hover { color: var(--pigment-deep); }

.work-info .note {
  font-family: var(--type-serif);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 1.5rem 0 1.25rem;
}
.work-info .note p { margin: 0 0 0.85em; }
.work-info .note p:last-child { margin-bottom: 0; }
.work-info .note em { color: var(--ink-soft); font-style: italic; }

.work-info .actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
/* Action links are .fa-cta — shared slide-wipe styling above. */

/* ── Related rail (work detail) ─────────────────────────── */

.related {
  padding-top: 3rem;
  padding-bottom: 4rem;
  border-top: 1px solid var(--ink);
}
@media (min-width: 900px) {
  .related { padding-top: 4rem; padding-bottom: 5rem; }
}
.related-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
  margin-bottom: 2rem;
}
.related-head .label {
  font-family: var(--type-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.related-head .series-link {
  font-family: var(--type-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pigment);
  border: none;
}
.related-head .series-link:hover { color: var(--pigment-deep); }
.related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 1.5rem;
}
@media (min-width: 640px) {
  .related-grid {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 3rem 2.5rem;
  }
}

/* ── Statement page ─────────────────────────────────────── */

.page-statement .statement {
  padding-top: 4rem;
  padding-bottom: 5rem;
}
@media (min-width: 900px) {
  .page-statement .statement {
    padding-top: 5rem;
    padding-bottom: 6rem;
  }
}
.statement-head {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--ink);
}
.statement-head h1 {
  font-family: var(--type-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 22ch;
  color: var(--ink);
}
.statement-head h1 em {
  color: var(--pigment-deep);
  font-style: italic;
}

/* The grid: image left, text right on wide; stacked on mobile.
   When no image is present (.page-statement without .has-portrait),
   the grid collapses to a single column and text gets full width. */
.statement-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .page-statement.has-portrait .statement-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 4rem;
  }
}

.statement-portrait {
  margin: 0;
}
.statement-portrait .fa-image {
  /* mat / inset / hover already from .fa-image rules */
}
.statement-portrait figcaption {
  margin-top: 0.85rem;
  font-family: var(--type-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.statement-portrait figcaption em { color: var(--pigment-deep); }
@media (min-width: 900px) {
  .page-statement.has-portrait .statement-portrait {
    position: sticky;
    top: 1.5rem;
  }
}

.statement-body {
  max-width: 38rem;
  font-family: var(--type-serif);
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--ink);
}
.statement-body p { margin: 0 0 1.1em; }
.statement-body p:last-child { margin-bottom: 0; }

/* Lead paragraph: bigger, italic, leans into the page. */
.statement-body p:first-child {
  font-style: italic;
  font-size: clamp(1.35rem, 1.8vw, 1.55rem);
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 1.6em;
}
.statement-body p:first-child em { color: var(--pigment-deep); }

/* Drop cap on the first paragraph's first letter. Tuned so the cap
   height of the dropcap aligns with the cap height of the first line
   of running text (not its ascender — that would float above). */
.statement-body p:first-child::first-letter {
  font-family: var(--type-serif);
  font-weight: 300;
  font-size: 3em;
  line-height: 1;
  float: left;
  margin: 0.12em 0.1em 0 0;
  padding: 0;
  color: var(--pigment-deep);
  font-style: normal;
}

.statement-body em { color: var(--pigment-deep); }
.statement-body a {
  color: var(--pigment);
  border-bottom: 1px solid color-mix(in srgb, var(--pigment) 35%, transparent);
}
.statement-body a:hover {
  color: var(--pigment-deep);
  border-bottom-color: var(--pigment-deep);
}

/* ── Footer + colophon ──────────────────────────────────── */

.fa-end {
  padding-top: 5rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: end;
}
@media (min-width: 900px) {
  .fa-end {
    padding-top: 6rem;
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
.fa-end .ask {
  font-family: var(--type-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  max-width: 36ch;
}
.fa-end .ask em { color: var(--pigment-deep); }
.fa-end .fa-cta { align-self: start; }

/* ── Unified CTA with slide-wipe ─────────────────────────
   Bottom-style: paper bg, ink border, ink text.
   Hover: ::before slides pigment-deep in from left;
          text becomes paper (paper-on-pigment-deep is AAA
          for Steel Blue). Pattern lifted from the family's
          tokens.css .cta-deep.
*/
.fa-cta {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 0.9em 1.4em;
  border: 2px solid var(--ink);
  font-family: var(--type-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  text-decoration: none;
  overflow: hidden;
  transition: color 280ms cubic-bezier(.7,0,.2,1);
}
.fa-cta::before {
  content: "";
  position: absolute;
  /* extend slightly past the padding box to cover the border too —
     avoids sub-pixel seams between border and fill on hover. */
  inset: -2px;
  background: var(--pigment-deep);
  transform: translateX(-101%);
  transition: transform 280ms cubic-bezier(.7,0,.2,1);
  z-index: -1;
}
.fa-cta:hover {
  color: var(--paper);
  border-color: var(--ink);
}
.fa-cta:hover::before { transform: translateX(0); }

.fa-cta--sm {
  padding: 0.5em 0.9em;
  font-size: 0.72rem;
}

.colophon {
  padding-top: 2rem;
  padding-bottom: 4rem;
  font-family: var(--type-mono);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.colophon .well {
  display: grid;
  gap: 1rem;
  border-top: 1px solid var(--ink-faint);
  padding-top: 1.5rem;
}
.colophon .item {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.5rem;
}
.colophon .item .num { color: var(--pigment-deep); font-family: var(--type-serif); font-style: italic; }
.colophon a { color: var(--ink-soft); border-bottom: 1px solid var(--ink-faint); }
.colophon a:hover { color: var(--pigment); border-bottom-color: var(--pigment); }
.colophon em { font-style: italic; }

/* ── Reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}