/* Homepage-only redesign modules layered after home-sesame.css. */

:root {
  /* 46px running head plus its 1px rule. */
  --home-runhead-block: 47px;
}

/* Static editorial image wells ----------------------------------------- */
.image-slot--wide,
.image-slot--small {
  overflow: hidden;
  background: var(--paper-2);
}

.image-slot--wide { aspect-ratio: 16 / 9; }
.image-slot--small { aspect-ratio: 3 / 2; }

.image-slot--wide img,
.image-slot--small img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* About spread --------------------------------------------------------- */
.d-editor-spread {
  display: block;
}

.d-editor-spread .d-editor {
  max-inline-size: none;
}

/* Files spread --------------------------------------------------------- */
.files {
  display: grid;
  gap: 24px;
}

.file-lead {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  padding-block-end: 24px;
  border-block-end: 1px solid var(--rule-soft);
}

.file-lead-media,
.file-card-media {
  min-block-size: 100%;
}

.file-lead-body {
  display: grid;
  align-content: center;
  gap: 12px;
  padding-block: 10px;
}

.file-kicker,
.file-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.file-kicker {
  color: var(--spot);
}

.file-meta {
  color: var(--ink-mute);
}

.file-lead h3,
.file-card h3 {
  font-family: var(--disp);
  font-weight: 600;
  line-height: 1.08;
}

.file-lead h3 {
  max-inline-size: 16ch;
  font-size: 36px;
}

.file-card h3 {
  font-size: 24px;
}

/* one editorial note per case — the editor's voice, not a rubric */
.file-lead .file-note,
.file-card .file-note {
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.6;
}

.files-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding-block-start: 2px;
}

.file-card {
  display: grid;
  grid-template-columns: minmax(150px, 0.55fr) minmax(0, 1fr);
  gap: 18px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--rule-soft);
}

.file-card-body {
  display: grid;
  align-content: start;
  gap: 10px;
}

/* Case studies remain compact until the true mobile breakpoint so iPad
   layouts do not become unnecessarily tall. */
@media (max-width: 860px) {
  .file-lead h3 {
    max-inline-size: 22ch;
  }
}

@media (max-width: 640px) {
  .file-lead h3 {
    font-size: 29px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .file-lead,
  .file-card {
    transition: none;
  }
}

/* availability lede sits a touch apart from the "Available for" chips */
.d-avail-lede { margin-block-end: 18px; }

/* ════════════════════════════════════════════════════════════════════════
   STORY FILES
   ════════════════════════════════════════════════════════════════════════ */

#files {
  overflow: clip;
  background: transparent;
  border-block: 0;
  border-block-start: 1px solid var(--rule-soft);
}

#files .d-wrap { position: relative; z-index: 1; }

#files .file-lead,
#files .file-card {
  border: 1px solid var(--rule-soft);
  background: transparent;
  box-shadow: var(--shadow-sm);
  transition:
    transform 200ms var(--ease),
    box-shadow 200ms ease,
    background-color 180ms ease;
}

#files .file-lead {
  border-radius: var(--r-xl);
}

#files .file-card {
  border-radius: var(--r-lg);
}

#files .file-lead:focus-within,
#files .file-card:focus-within {
  box-shadow:
    0 0 0 2px var(--verm),
    var(--shadow-sm);
}

#files .file-lead {
  grid-template-columns: minmax(300px, 1.12fr) minmax(0, 0.88fr);
  gap: 0;
  padding: 0;
  border-block-end: 1px solid var(--rule-soft);
}

#files .file-lead-body {
  padding: clamp(22px, 4vw, 48px);
  border-inline-start: 1px solid var(--rule-soft);
}

#files .files-row { gap: 16px; }

#files .file-card {
  gap: 0;
  padding: 0;
  border-block-start: 1px solid var(--rule-soft);
}

#files .file-card-body {
  padding: 20px;
}

#files .file-lead-media,
#files .file-card-media {
  min-inline-size: 0;
  aspect-ratio: auto;
  overflow: hidden;
}

/* Article photography runs full-bleed so the case studies read like a
   publication spread, while the canonical cover ratio keeps embedded type
   and interface details intact on the compact cards. */
#files .file-lead-media {
  display: grid;
  min-block-size: clamp(360px, 42vw, 600px);
}

#files .file-lead-media img,
#files .file-card-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

#files .file-card {
  grid-template-columns: 1fr;
}

#files .file-card-media { aspect-ratio: 1200 / 628; }

#files .file-card-body {
  border-inline-start: 0;
  border-block-start: 1px solid var(--rule-soft);
}

@media (hover: hover) {
  #files .file-lead:hover,
  #files .file-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}

@media (max-width: 640px) {
  #files .file-lead,
  #files .file-card {
    grid-template-columns: 1fr;
  }
  #files .file-lead-media {
    min-block-size: 0;
    aspect-ratio: 1200 / 628;
  }
  #files .file-lead-body,
  #files .file-card-body {
    border-inline-start: 0;
    border-block-start: 1px solid var(--rule-soft);
  }
  #files .files-row { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #files .file-lead,
  #files .file-card,
  #files .file-lead-media,
  #files .file-card-media {
    animation: none;
    transition: none;
  }

  #files .file-lead,
  #files .file-card {
    transform: none !important;
  }
}

@media (forced-colors: active) {
  #files .file-lead,
  #files .file-card {
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }
}

@media print {
  #files .file-lead,
  #files .file-card {
    border-color: var(--rule);
    box-shadow: none !important;
    transform: none !important;
  }
}

/* ═══ CONTENTS — the edition's index, set as a table of contents ═══════
   Rows, not boxes: a numbered list the eye reads top to bottom in one
   pass. Each row carries the spot of the section it opens, so the
   numeral and the hover wash preview the plate you land on. Circulation
   figures sit below as their own plate. */
.d-desk-map {
  --desk-title-size: clamp(2.375rem, 12vw, 3.125rem);
  --desk-stat-size: 1.875rem;
  padding-block: clamp(var(--space-5), 4vw, var(--space-6));
  border-block-start: 1px solid var(--ink);
  background: transparent;
}

.d-desk-map > .d-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.d-desk-map-head {
  display: grid;
  gap: var(--space-2);
}

.d-desk-map-head h2 {
  font-family: var(--disp);
  font-weight: 600;
  font-size: var(--desk-title-size);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.d-toc {
  position: relative;
  isolation: isolate;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-xl);
  background: transparent;
  box-shadow: var(--shadow-sm);
}

/* 3px = the top of a plate */
.d-toc::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: var(--spot);
  transform-origin: left center;
}

.d-toc-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "no name arrow"
    "no desc arrow";
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  align-items: baseline;
  min-inline-size: 0;
  padding: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--rule-soft);
  color: inherit;
  text-decoration: none;
  background: transparent;
}

.d-toc-row:first-child { border-block-start: 0; }

.d-toc-no {
  grid-area: no;
  align-self: start;
  padding-block-start: 0.4em;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--spot);
}

.d-toc-name {
  grid-area: name;
  min-inline-size: 0;
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.d-toc-desc {
  grid-area: desc;
  min-inline-size: 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-mute);
  text-wrap: pretty;
}

.d-toc-arrow {
  grid-area: arrow;
  align-self: start;
  padding-block-start: 0.4em;
  font-family: var(--mono);
  font-size: var(--type-support);
  line-height: 1;
  color: var(--ink-mute);
}

/* the plate is already washed in slate; a row lifts in its own ink,
   mixed a shade past the wash so it reads on top of it */
.d-toc-row:hover,
.d-toc-row:focus-visible {
  background: color-mix(in srgb, var(--spot) 14%, transparent);
  outline: none;
}

.d-toc-row:hover .d-toc-name,
.d-toc-row:focus-visible .d-toc-name,
.d-toc-row:hover .d-toc-arrow,
.d-toc-row:focus-visible .d-toc-arrow {
  color: var(--spot-deep);
}

.d-toc-row:hover .d-toc-arrow,
.d-toc-row:focus-visible .d-toc-arrow {
  transform: translate(var(--space-1), calc(var(--space-1) * -1));
}

.d-circulation {
  grid-column: 1;
  grid-row: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  background: transparent;
  box-shadow: var(--shadow-sm);
  scroll-margin-block-start: calc(var(--home-runhead-block) + var(--space-3));
}

.d-circulation-head {
  padding: var(--space-3) var(--space-4);
  border-inline-end: 0;
  border-block-end: 1px solid var(--rule-soft);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: baseline;
  gap: var(--space-3);
}

.d-circulation-tag {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--spot);
}

.d-circulation-head h3 {
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-align: end;
}

.d-circrow {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.d-circulation .d-circ {
  min-inline-size: 0;
  padding: var(--space-3) 0;
  border-block-end: 0;
  border-block-start: 1px solid var(--rule-soft);
  border-inline-start: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  justify-content: stretch;
  align-items: baseline;
  gap: var(--space-3);
  background: transparent;
}

.d-circulation .d-circ:first-child {
  border-block-start: 0;
  border-inline-start: 0;
}

.d-circulation .d-circ-l {
  grid-column: 1;
  grid-row: 1;
  max-inline-size: none;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-align: start;
  text-transform: none;
  color: var(--ink-mute);
}

.d-circulation .d-circ-v {
  grid-column: 2;
  grid-row: 1;
}

.d-circulation .d-circ-n {
  font-size: var(--desk-stat-size);
}

@supports selector(:has(*)) {
  .d-toc:has(.d-toc-row:focus-visible) .d-toc-row:not(:focus-visible) .d-toc-name {
    color: var(--ink-soft);
  }

  .d-toc:has(.d-toc-row:focus-visible) .d-toc-row:not(:focus-visible) :is(.d-toc-no, .d-toc-arrow) {
    opacity: 0.42;
  }

  @media (hover: hover) {
    .d-toc:has(.d-toc-row:hover) .d-toc-row:not(:hover) .d-toc-name {
      color: var(--ink-soft);
    }

    .d-toc:has(.d-toc-row:hover) .d-toc-row:not(:hover) :is(.d-toc-no, .d-toc-arrow) {
      opacity: 0.42;
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .d-toc-row {
    transition: background-color var(--motion-fast) var(--ease);
  }

  .d-toc-name,
  .d-toc-arrow,
  .d-toc-no {
    transition:
      color var(--motion-fast) var(--ease),
      opacity var(--motion-fast) var(--ease),
      transform 220ms var(--ease);
  }

  html.home-reveal-ready #desk-map > .d-wrap.d-home-reveal:not(.d-home-in) .d-toc::before {
    transform: scaleX(0);
  }

  html.home-reveal-ready #desk-map > .d-wrap.d-home-reveal:not(.d-home-in) .d-toc-row,
  html.home-reveal-ready #desk-map > .d-wrap.d-home-reveal:not(.d-home-in) .d-circulation {
    opacity: 0;
    translate: 0 var(--space-3);
  }

  html.home-reveal-ready #desk-map > .d-wrap.d-home-reveal.d-home-in .d-toc::before {
    transition: transform var(--motion-settle) var(--ease) 40ms;
  }

  html.home-reveal-ready #desk-map > .d-wrap.d-home-reveal.d-home-in .d-toc-row {
    animation: d-desk-route-set 480ms var(--ease) both;
  }

  html.home-reveal-ready #desk-map > .d-wrap.d-home-reveal.d-home-in .d-toc-row:nth-child(1) { animation-delay: 60ms; }
  html.home-reveal-ready #desk-map > .d-wrap.d-home-reveal.d-home-in .d-toc-row:nth-child(2) { animation-delay: 120ms; }
  html.home-reveal-ready #desk-map > .d-wrap.d-home-reveal.d-home-in .d-toc-row:nth-child(3) { animation-delay: 180ms; }
  html.home-reveal-ready #desk-map > .d-wrap.d-home-reveal.d-home-in .d-toc-row:nth-child(4) { animation-delay: 240ms; }
  html.home-reveal-ready #desk-map > .d-wrap.d-home-reveal.d-home-in .d-toc-row:nth-child(5) { animation-delay: 300ms; }

  html.home-reveal-ready #desk-map > .d-wrap.d-home-reveal.d-home-in .d-circulation {
    animation: d-desk-proof-set 520ms var(--ease) 400ms both;
  }
}

@keyframes d-desk-route-set {
  from {
    opacity: 0;
    translate: 0 var(--space-3);
  }
  to {
    opacity: 1;
    translate: none;
  }
}

@keyframes d-desk-proof-set {
  from {
    opacity: 0;
    translate: 0 var(--space-2);
  }
  to {
    opacity: 1;
    translate: none;
  }
}

@media (min-width: 360px) {
  .d-desk-map {
    --desk-stat-size: clamp(1.625rem, 7.4vw, 2.125rem);
  }

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

  .d-circulation .d-circ,
  .d-circulation .d-circ:first-child {
    padding: var(--space-3) var(--space-2);
    border-block-start: 0;
    border-inline-start: 1px solid var(--rule-soft);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: var(--space-2);
  }

  .d-circulation .d-circ:first-child {
    border-inline-start: 0;
  }

  .d-circulation .d-circ-l {
    grid-column: auto;
    grid-row: 2;
  }

  .d-circulation .d-circ-v {
    grid-column: auto;
    grid-row: 1;
  }
}

@media (min-width: 641px) {
  .d-desk-map {
    --desk-title-size: clamp(2.25rem, 6vw, 3rem);
    --desk-stat-size: clamp(1.75rem, 4.8vw, 2.25rem);
  }

  /* one line per entry: numeral · name · description · arrow */
  .d-toc-row {
    grid-template-columns: 3.25rem minmax(9ch, 0.5fr) minmax(0, 1fr) auto;
    grid-template-areas: "no name desc arrow";
    column-gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
  }

  .d-toc-no,
  .d-toc-arrow {
    align-self: baseline;
    padding-block-start: 0;
  }

  .d-toc-desc {
    max-inline-size: 44ch;
  }

  .d-circulation {
    grid-template-columns: minmax(11rem, 0.8fr) minmax(0, 2.2fr);
  }

  .d-circulation-head {
    padding: var(--space-3) var(--space-4);
    border-inline-end: 1px solid var(--rule-soft);
    border-block-end: 0;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-1);
  }

  .d-circulation-head h3 {
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    text-align: start;
  }

  .d-circulation .d-circ {
    padding: var(--space-3);
  }

  .d-circulation .d-circ-l {
    font-size: 0.8125rem;
    line-height: 1.35;
  }
}

@media (min-width: 901px) {
  .d-desk-map {
    --desk-title-size: clamp(2.25rem, 4vw, 3.25rem);
    --desk-stat-size: clamp(2rem, 3.5vw, 2.875rem);
  }

  .d-circulation {
    grid-template-columns: minmax(13rem, 3fr) minmax(0, 9fr);
  }

  .d-circulation .d-circ {
    padding: var(--space-3) var(--space-4);
  }
}

@media (forced-colors: active) {
  .d-toc,
  .d-circulation {
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }

  .d-toc::before {
    background: CanvasText;
  }
}

@media print {
  #desk-map .d-toc,
  #desk-map .d-circulation {
    border-color: var(--rule);
    box-shadow: none !important;
  }

  #desk-map .d-toc::before {
    transform: none !important;
    transition: none !important;
  }

  #desk-map .d-toc-row,
  #desk-map .d-circulation {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
  }
}

.d-profile { scroll-margin-block-start: 60px; }
.d-profile .d-editor p { max-inline-size: 68ch; }

/* ═══ PRACTICE — THE PROOF CIRCUIT ═══════════════════════════════════════
   Three disciplines enter from the left and feed one visible editorial
   route. The icons are compact wayfinding marks; the copy remains primary. */
#practice {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.d-practice-board {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-4);
  background: transparent;
}

#practice .d-facets {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
  min-inline-size: 0;
  margin: 0;
  gap: var(--space-3);
  border: 0;
}

#practice .d-facet {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-inline-size: 0;
  margin: 0;
  padding: clamp(var(--space-4), 3vw, var(--space-5));
  overflow: hidden;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  background: transparent;
  box-shadow: var(--shadow-sm);
}

#practice .d-facet--editorial {
  background: transparent;
}

.d-facet-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}

#practice .d-notice-label {
  margin: 0;
  color: var(--spot-deep);
  line-height: 1.35;
}

#practice .d-facet h3 {
  position: relative;
  z-index: 1;
  max-inline-size: 19ch;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}

#practice .d-facet p {
  position: relative;
  z-index: 1;
  max-inline-size: 48ch;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.52;
}

.d-fast-note {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  min-inline-size: 0;
  margin: 0;
  padding: var(--space-4) clamp(var(--space-4), 3vw, var(--space-5));
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  background: transparent;
  box-shadow: var(--shadow-sm);
  break-inside: avoid;
}

.d-fast-note-copy {
  display: grid;
  gap: var(--space-1);
  min-inline-size: 0;
}

.d-fast-note strong {
  color: var(--ink);
  font-family: var(--disp);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 600;
  line-height: 1.15;
}

.d-fast-note p {
  max-inline-size: 72ch;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.48;
}

.d-fast-note a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 44px;
  padding-inline: var(--space-4);
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--spot-deep);
  background: transparent;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    color var(--motion-fast) ease,
    background var(--motion-fast) ease,
    border-color var(--motion-fast) ease;
}

.d-fast-note-arrow {
  inline-size: 16px;
  block-size: 16px;
  transition: transform var(--motion-fast) var(--ease);
}

@media (hover: hover) {
  .d-fast-note a:hover {
    border-color: var(--spot-deep);
    color: var(--spot-deep);
    background: transparent;
  }

  .d-fast-note a:hover .d-fast-note-arrow {
    transform: translateX(4px);
  }
}

@media (max-width: 900px) {
  .d-practice-board {
    grid-template-columns: minmax(0, 1fr);
  }

  /* under the three-column board the facets run as ruled rows (home-flare) */
  #practice .d-facets {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  #practice {
    padding-block: var(--space-7);
  }

  #practice .d-facet h3 {
    max-inline-size: none;
  }

  .d-fast-note {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .d-fast-note a {
    grid-column: 1 / -1;
    inline-size: 100%;
  }
}

@media (max-width: 360px) {
  #practice .d-facet {
    padding-inline: var(--space-3);
  }

}

@keyframes d-practice-set {
  from {
    opacity: 0;
    translate: 0 var(--space-3);
  }
  to {
    opacity: 1;
    translate: none;
  }
}


@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {

  html.home-reveal-ready #practice > .d-wrap.d-home-reveal.d-home-in .d-facet,
html.home-reveal-ready #practice > .d-wrap.d-home-reveal.d-home-in .d-fast-note {
    animation: d-practice-set 420ms var(--ease) both;
  }

  html.home-reveal-ready #practice > .d-wrap.d-home-reveal.d-home-in .d-facet:nth-child(1) { animation-delay: 60ms; }
  html.home-reveal-ready #practice > .d-wrap.d-home-reveal.d-home-in .d-facet:nth-child(2) { animation-delay: 140ms; }
  html.home-reveal-ready #practice > .d-wrap.d-home-reveal.d-home-in .d-facet:nth-child(3) { animation-delay: 220ms; }

  html.home-reveal-ready #practice > .d-wrap.d-home-reveal.d-home-in .d-fast-note { animation-delay: 580ms; }

}

@media (prefers-reduced-motion: reduce) {
  #practice .d-facet,
#practice .d-facet::after,
#practice .d-fast-note,
#practice .d-fast-note a,
#practice .d-fast-note-arrow {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}

@media (forced-colors: active) {
  .d-practice-board,
#practice .d-facet,
.d-fast-note,
.d-fast-note a {
    border-color: CanvasText;
    color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }
}

@media print {

  #practice .d-facet,
.d-fast-note {
    break-inside: avoid;
    box-shadow: none !important;
  }

  #practice .d-facet,
#practice .d-facet::after,
#practice .d-fast-note {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .d-fast-note a {
    border-color: var(--ink);
    color: var(--ink);
    background: transparent;
  }
}

.d-latest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.d-latest-column {
  min-inline-size: 0;
  overflow: hidden;
  padding: clamp(var(--space-3), 2.5vw, var(--space-5));
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  background: transparent;
  box-shadow: var(--shadow-sm);
}
.d-latest-column:focus-within {
  box-shadow:
    0 0 0 2px var(--verm),
    var(--shadow-sm);
}
.d-column-head {
  min-block-size: 62px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: 0 var(--space-3);
  border-block-end: 1px solid var(--ink);
}
.d-column-head h3 { font-family: var(--disp); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.12; letter-spacing: -0.015em; }
.d-column-head a {
  min-inline-size: 44px;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--spot);
}
.d-latest-item { padding-block: var(--space-4); border-block-end: 1px solid var(--rule); }
.d-latest-item:last-child { border-block-end: 0; }
.d-latest-item h4 { font-family: var(--disp); font-weight: 600; font-size: clamp(20px, 2vw, 24px); line-height: 1.14; letter-spacing: -0.015em; margin-block: 5px 8px; text-wrap: balance; }
.d-latest-item h4 a {
  min-block-size: 44px;
  max-inline-size: 100%;
  display: inline-flex;
  align-items: center;
}
.d-latest-item h4 a:hover,
.d-latest-item h4 a:focus-visible { color: var(--spot); }
.d-latest-item > p:last-child { color: var(--ink-soft); font-size: 16px; line-height: 1.52; max-inline-size: 58ch; }

/* Wire projects share the page stock; rules and spacing keep each file clear. */
.d-wire-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; border-block: 0; }
.d-wire-card {
  position: relative;
  min-inline-size: 0;
  min-block-size: 260px;
  padding: var(--space-4);
  background: transparent;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-2);
  transition:
    transform 200ms var(--ease),
    box-shadow 200ms ease,
    background-color 180ms ease;
}
.d-wire-card:focus-visible {
  transform: none;
  background: transparent;
  box-shadow: var(--shadow-md);
}
@media (hover: hover) {
  .d-wire-card:hover {
    transform: translateY(-2px);
    background: transparent;
    box-shadow: var(--shadow-md);
  }
}
.d-wire-no { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; color: var(--spot); text-transform: uppercase; }
.d-wire-card h3 { font-family: var(--disp); font-weight: 600; font-size: clamp(20px, 2vw, 24px); line-height: 1.14; letter-spacing: -0.015em; }
.d-wire-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.52; }
.d-wire-card .d-jump { align-self: end; }
.d-wire-card--sesame .d-seed { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; inline-size: 28px; block-size: 38px; }

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

@media (max-width: 640px) {
  .d-latest-grid { grid-template-columns: 1fr; }
  .d-latest-column { padding: var(--space-4); }
  .d-wire-compact { grid-template-columns: 1fr; }
  .d-wire-card { min-block-size: 0; }
  #files .files-row { grid-template-columns: 1fr; }
  #files .file-lead-media,
  #files .file-card-media { aspect-ratio: 1200 / 628; }
}

/* Letters remain on the same stock; the internal rules do the sorting. */
#contact .d-letters-grid {
  overflow: hidden;
  padding: clamp(var(--space-4), 4vw, var(--space-6));
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-xl);
  background: transparent;
  box-shadow: var(--shadow-sm);
}

#contact .d-chips span {
  padding-inline: var(--space-3);
  border-color: var(--rule-soft);
}

#contact .d-soc {
  margin-inline: calc(var(--space-2) * -1);
  padding-inline: var(--space-2);
  border-block-end-color: var(--rule-soft);
  border-radius: var(--r-sm);
  transition:
    color 180ms ease,
    background-color 180ms ease;
}

@media (max-width: 640px) {
  #contact .d-letters-grid {
    padding: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .d-wire-card,
  #contact .d-soc {
    transform: none;
    transition: none;
  }
}

@media (forced-colors: active) {
  .d-latest-column,
  .d-wire-card,
  #contact .d-letters-grid {
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }

  #contact .d-soc:hover,
  #contact .d-soc:focus-visible {
    background: Canvas;
  }
}

@media print {
  .d-latest-column,
  .d-wire-card,
  #contact .d-letters-grid {
    box-shadow: none !important;
    transform: none !important;
  }
}

/* ═══ LANDING COVER — one full-view editorial composition ═══════════════
   The cover arrives without navigation chrome. Identity, proposition,
   context, and two routes carry the page without decorative press furniture. */

/* theme-bootstrap adds .js before the stylesheets paint, so the enhanced
   homepage has stable geometry even if the motion script loads later. */
html.js .d-runhead {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  inline-size: 100%;
}

html.home-nav-ready .d-runhead {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(-100% - 1px));
  transition:
    transform 420ms var(--ease),
    opacity 220ms ease,
    visibility 0s linear 420ms;
}

html.home-nav-ready .d-runhead.d-runhead--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

#front.d-front {
  min-block-size: calc(100vh - var(--home-runhead-block));
  min-block-size: calc(100svh - var(--home-runhead-block));
  padding: 0;
}

#front .d-landing-shell {
  min-block-size: calc(100vh - var(--home-runhead-block));
  min-block-size: calc(100svh - var(--home-runhead-block));
  display: grid;
  /* one column, capped at the shell: an auto track sizes to the widest
     min-content inside it, and the nowrap Vietnamese dateline was pushing
     every cover row 60px past a phone's edge (clipped, so it read as a cut
     standfirst) */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  padding-block: clamp(var(--space-4), 4vw, var(--space-6)) var(--space-4);
}

html.js #front.d-front,
html.js #front .d-landing-shell {
  min-block-size: 100vh;
  min-block-size: 100svh;
}

#front .d-landing-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--ink-mute);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

#front .d-landing-meta p {
  margin: 0;
}

#front .d-landing-place {
  text-align: end;
}

#front .d-landing-main {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-3);
  align-content: center;
  min-inline-size: 0;
  padding-block: var(--space-4);
}

#front .d-landing-name {
  grid-column: 1 / -1;
  margin: 0 0 var(--space-4);
  color: var(--ink);
  font-family: var(--disp);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1;
}

#front .d-landing-headline {
  grid-column: 1 / 11;
  /* em, not ch: a ch is the loaded face's zero, so the fallback face got a
     different box and re-wrapped the cover when Fraunces landed */
  max-inline-size: 6.78em;
  margin: 0;
  color: var(--ink);
  font-family: var(--disp);
  font-size: clamp(64px, 8.2vw, 118px);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

#front .d-landing-brief {
  grid-column: 7 / -1;
  display: grid;
  gap: var(--space-4);
  min-inline-size: 0;
  margin-block-start: clamp(var(--space-5), 4vw, var(--space-6));
}

#front .d-standfirst {
  max-inline-size: 56ch;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 400;
  line-height: 1.5;
}

#front .d-landing-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

#front .d-landing-link,
#front .d-scroll-cue {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#front .d-landing-link {
  position: relative;
}

#front .d-landing-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 7px;
  block-size: 1px;
  background: var(--rule);
  transition: background-color 220ms var(--ease);
}

#front .d-landing-link:hover,
#front .d-landing-link:focus-visible {
  color: var(--spot-deep);
}

#front .d-landing-link:hover::after,
#front .d-landing-link:focus-visible::after {
  background: currentColor;
}

#front .d-scroll-cue {
  justify-self: start;
  color: var(--ink-mute);
}

#front .d-scroll-arrow {
  color: var(--spot);
  font-size: 16px;
}

/* Each homepage section keeps its layout in the document, but its contents
   only settle into view after the section reaches the reading window. */
[data-home-reveal] {
  scroll-margin-block-start: calc(var(--home-runhead-block) + var(--space-3));
}

@media (prefers-reduced-motion: no-preference) {
  html.home-reveal-ready [data-home-reveal] > .d-wrap.d-home-reveal {
    opacity: 0;
    transform: translateY(var(--space-3));
  }

  html.home-reveal-ready [data-home-reveal] > .d-wrap.d-home-reveal.d-home-in {
    opacity: 1;
    transform: none;
    transition:
      opacity 580ms var(--ease),
      transform 660ms var(--ease);
  }
}

@media (max-width: 760px) {
  #front .d-landing-main {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--space-3);
  }

  #front .d-landing-name,
  #front .d-landing-headline,
  #front .d-landing-brief {
    grid-column: 1;
  }

  #front .d-landing-name {
    margin-block-end: var(--space-3);
    font-size: 24px;
  }

  #front .d-landing-headline {
    max-inline-size: 7.39em;
    font-size: clamp(44px, 14vw, 64px);
    line-height: 0.94;
  }

  #front .d-landing-brief {
    gap: var(--space-3);
    margin-block-start: var(--space-4);
  }
}

@media (max-width: 360px) {
  #front .d-landing-meta {
    letter-spacing: 0.1em;
  }

  #front .d-landing-place {
    display: none;
  }

  #front .d-landing-headline {
    font-size: clamp(42px, 13.5vw, 48px);
  }
}

@media print {
  html.js .d-runhead {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none !important;
    transition: none !important;
  }

  #front.d-front,
  #front .d-landing-shell {
    min-block-size: auto;
  }

  html.home-reveal-ready [data-home-reveal] > .d-wrap.d-home-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═══ THE RECORD — a ruled chronology, the year as the headline ═══════════
   No cards. Each entry is one ruled row of the ledger: the era set large in
   the left rail, the outlet as the headline, the roles filed beneath, and a
   hairline column rule standing in for the old spine. The current entry is
   this section's one washed panel — "you are here" without a badge. */

.d-record[id] {
  scroll-margin-block-start: calc(46px + var(--space-4));
}

.d-profile .d-record-head > *,
.d-profile .d-rec > *,
.d-profile .d-rec-body > *,
.d-profile .rec-role-head > * {
  min-inline-size: 0;
}

.d-profile .d-record-head .ttl,
.d-profile .rec-org,
.d-profile .rec-role-t,
.d-profile .rec-role-x,
.d-profile .rec-file .v {
  overflow-wrap: break-word;
  word-break: normal;
}

.d-profile .d-record-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "record-tag record-action"
    "record-title record-action";
  gap: var(--space-2) var(--space-4);
  align-items: end;
  margin-block-start: 0;
}

.d-profile .d-record-head .tag {
  grid-area: record-tag;
  justify-self: start;
  padding: 0;
  border-radius: 0;
  color: var(--spot-deep);
  background: transparent;
}

.d-profile .d-record-head .ttl { grid-area: record-title; }

.d-profile .d-record-head .more {
  grid-area: record-action;
  min-block-size: 44px;
  margin-inline-start: 0;
  display: inline-flex;
  align-items: center;
  align-self: end;
  color: var(--spot-deep);
}

/* the ledger keeps its 2px ink cap from the base; entries rule at 1px */
.d-profile .d-ledger {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.d-profile .d-ledger::before { content: none; }

.d-profile .d-rec,
.d-profile .d-rec:hover,
.d-profile .d-rec:focus-within {
  position: relative;
  display: grid;
  grid-template-columns: minmax(10.5rem, 0.24fr) minmax(0, 1fr);
  grid-template-areas: "era body";
  column-gap: clamp(var(--space-4), 3vw, var(--space-6));
  align-items: start;
  padding: clamp(1.25rem, 2.6vw, 1.75rem) var(--space-3);
  border: 0;
  border-block-end: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background-color 180ms ease;
}

.d-profile .d-rec:hover,
.d-profile .d-rec:focus-within { background: var(--wash); }

.d-profile .d-rec:focus-within { box-shadow: inset 0 0 0 2px var(--verm); }

/* the current entry is the section's one washed panel */
.d-profile .d-rec--now,
.d-profile .d-rec--now:hover { background: var(--spot-wash); }

.d-profile .d-rec::after { display: none; }

/* left rail — the era set as the headline, folio № beneath, and a hairline
   column rule on the right where the spine used to run */
.d-profile .d-rec-era {
  grid-area: era;
  display: grid;
  gap: var(--space-2);
  align-content: start;
  align-self: stretch;
  padding: 0 var(--space-4) 0 0;
  border-inline-end: 1px solid var(--rule-soft);
}

.d-profile .d-rec-per {
  order: -1;
  font-family: var(--disp);
  font-size: clamp(1.75rem, 2.8vw, 2.375rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.d-profile .d-rec--now .d-rec-per { color: var(--spot-deep); }

.d-profile .d-rec-no {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
  color: var(--ink-mute);
}

.d-profile .d-rec-body {
  grid-area: body;
  display: block;
  max-inline-size: none;
}

.d-profile .d-rec-body .rec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-block-end: var(--space-3);
}

.d-profile .rec-org {
  margin: 0;
  color: var(--ink);
  font-family: var(--disp);
  font-size: clamp(24px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* a dateline, not pills: BEAT · PLACE in the one eyebrow voice */
.d-profile .rec-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 var(--space-2);
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: end;
}

.d-profile .rec-tag {
  order: -1;
  display: inline;
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--spot-deep);
  background: transparent;
}

.d-profile .rec-tag::after { content: " ·"; color: var(--ink-mute); }

.d-profile .rec-loc { color: var(--ink-mute); }

.d-profile .rec-roles {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.d-profile .rec-role,
.d-profile .rec-role:first-child {
  display: grid;
  gap: var(--space-1);
  padding: 0;
  border: 0;
}

.d-profile .rec-role + .rec-role {
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--rule-soft);
}

.d-profile .rec-role-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

.d-profile .rec-role-t {
  flex: 1 1 18rem;
  margin: 0;
  color: var(--ink);
  font-family: var(--disp);
  font-size: clamp(18px, 1.7vw, 20px);
  font-weight: 600;
  line-height: 1.22;
}

.d-profile .rec-role-d {
  padding: 0;
  color: var(--spot-deep);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.d-profile .rec-role-x {
  max-inline-size: 62ch;
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.55;
}

/* on file — a ruled strip, not a box: a 2px spot rule hugging its labels */
.d-profile .rec-file {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-block: var(--space-4) 0;
  padding: 0;
  border: 0;
  border-block-start: 2px solid var(--spot);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.d-profile .rec-file-item,
.d-profile .rec-file-item:first-child {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border: 0;
}

.d-profile .rec-file-item + .rec-file-item {
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--rule-soft);
}

.d-profile .rec-file .k {
  display: block;
  margin-block-end: var(--space-2);
  color: var(--spot-deep);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.d-profile .rec-file .v {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .d-profile .d-rec,
  .d-profile .d-rec:hover,
  .d-profile .d-rec:focus-within {
    grid-template-columns: minmax(10.5rem, 0.28fr) minmax(0, 1fr);
    column-gap: var(--space-4);
  }

  .d-profile .d-rec-per { font-size: clamp(1.5rem, 3.4vw, 1.875rem); }
}

@media (max-width: 640px) {
  .d-profile .d-record-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "record-tag record-action"
      "record-title record-title";
    gap: var(--space-2) var(--space-3);
    align-items: start;
    margin-block-start: var(--space-5);
    margin-block-end: var(--space-3);
  }

  .d-profile .d-record-head .tag { justify-self: start; align-self: center; }
  .d-profile .d-record-head .more { align-self: center; }

  /* the era becomes a dateline row above the body */
  .d-profile .d-rec,
  .d-profile .d-rec:hover,
  .d-profile .d-rec:focus-within {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "era" "body";
    row-gap: var(--space-2);
    padding: var(--space-4) var(--space-2);
  }

  .d-profile .d-rec-era {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    align-self: auto;
    padding: 0;
    border-inline-end: 0;
  }

  /* a dateline above the entry, not a second headline over the outlet */
  .d-profile .d-rec-per { font-size: clamp(1.125rem, 5.2vw, 1.375rem); }

  .d-profile .d-rec-body .rec-head {
    grid-template-columns: minmax(0, 1fr);
    margin-block-end: var(--space-3);
  }

  .d-profile .rec-meta { justify-content: flex-start; text-align: start; }

  .d-profile .rec-role-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .d-profile .rec-role-t { font-size: 18px; }
  .d-profile .rec-role-d { white-space: normal; }
  .d-profile .rec-role-x { font-size: 16px; }

  .d-profile .rec-file { grid-template-columns: minmax(0, 1fr); }

  .d-profile .rec-file-item,
  .d-profile .rec-file-item:first-child { padding: var(--space-3) 0; }

  .d-profile .rec-file-item + .rec-file-item {
    padding-inline-start: 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--rule-soft);
  }
}

/* the base ledger files entries in one after another on reveal; the retired
   pin choreography needs nothing here */
@media (prefers-reduced-motion: reduce) {
  .d-profile .d-ledger,
  .d-profile .d-rec { opacity: 1; transform: none; transition: none; }
}

@media (forced-colors: active) {
  .d-profile .d-rec,
  .d-profile .d-rec-era,
  .d-profile .rec-file {
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }
}

@media print {
  .d-profile .d-rec,
  .d-profile .rec-file {
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* ═══ LIVING ISSUE — homepage pacing and reduction ════════════════════ */

/* Give adjacent homepage chapters different silhouettes instead of
   repeating the same card-board rhythm. */
.d-profile .d-record {
  /* the air now sits above the head's own rule, not above a loose border */
  margin-block-start: clamp(3rem, 6vw, 4.5rem);
}

.rec-disclosure {
  min-block-size: 44px;
  margin-block-start: var(--space-2);
  padding: 0;
  border: 0;
  display: none;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--spot-deep);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.rec-disclosure::after {
  content: "↘";
  transition: transform var(--motion-fast) var(--ease);
}

.rec-disclosure[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

@media (max-width: 640px) {
  .d-profile .d-record {
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-4);
  }

  .d-profile .d-rec,
  .d-profile .d-rec:hover,
  .d-profile .d-rec:focus-within {
    padding: var(--space-4);
  }

  .d-profile .rec-head { margin-block-end: var(--space-2); }
  .d-profile .rec-org { font-size: clamp(22px, 6.2vw, 26px); }
  .rec-disclosure { display: inline-flex; }
  .rec-disclosure[aria-expanded="false"] + .rec-roles { display: none; }

}

/* ════════════════════════════════════════════════════════════════════════
   THE PRESS RUN — homepage motion
   The sheet was printed and then sat still: one blanket fade for the
   landing, one blanket fade per section. This layer gives the page a
   running order instead — the landing sets itself piece by piece, then
   dissolves as the reader scrolls off it, and every section composes
   itself in reading order when it reaches the window.

   Rules:
     · every hidden state lives inside a keyframe, never in a static rule,
       so print and any JS failure leave the page fully visible;
     · entrances animate the individual `translate` / `scale` properties,
       never `transform` — the hover lifts on cards own `transform` and the
       two must not fight;
     · one shared vocabulary: set (rise), press (type landing), stamp (pop);
     · the whole layer sits inside prefers-reduced-motion: no-preference.
   ════════════════════════════════════════════════════════════════════════ */

@keyframes d-home-set {
  from { opacity: 0; translate: 0 var(--space-3); }
  to   { opacity: 1; translate: none; }
}

/* type coming off the press: it arrives slightly loose, then tightens */
@keyframes d-home-press {
  from { opacity: 0; translate: 0 var(--space-2); letter-spacing: 0.08em; }
  to   { opacity: 1; translate: none; letter-spacing: normal; }
}

/* a struck mark — the ink dot, the diamond node, a chip */
@keyframes d-home-stamp {
  from { opacity: 0; scale: 0.82; }
  to   { opacity: 1; scale: none; }
}

/* the scroll cue nods, once every few seconds, and only while it is read */
@keyframes d-home-cue {
  0%, 64%, 100% { translate: none; }
  78%           { translate: 0 5px; }
  90%           { translate: none; }
}

@media (prefers-reduced-motion: no-preference) {

  /* ── 1 · THE LANDING SETS ITSELF ────────────────────────────────────────
     Load order reads top-to-bottom the way the page does: dateline, name,
     ink dot, headline (word by word, via .d-w in dispatch.css), standfirst,
     links, cue. The headline is the slowest element on purpose — everything
     else is furniture arriving around it. */
  #front .d-landing-meta p { animation: d-home-set 520ms var(--ease) both; }
  #front .d-landing-meta p:nth-child(1) { animation-delay: 60ms; }
  #front .d-landing-meta p:nth-child(2) { animation-delay: 130ms; }

  #front .d-landing-name { animation: d-home-press 660ms var(--ease) 140ms both; }
  #front .d-landing-name .d-verm {
    display: inline-block;
    animation: d-home-stamp 380ms var(--ease) 520ms both;
  }

  #front .d-standfirst { animation: d-home-set 560ms var(--ease) 640ms both; }

  #front .d-landing-link { animation: d-home-set 520ms var(--ease) both; }
  #front .d-landing-link:nth-child(1) { animation-delay: 760ms; }
  #front .d-landing-link:nth-child(2) { animation-delay: 830ms; }

  #front .d-scroll-cue { animation: d-home-set 560ms var(--ease) 940ms both; }
  #front .d-scroll-arrow {
    display: inline-block;
    animation: d-home-cue 2.6s var(--ease) 1.8s infinite;
  }

  /* ── 2 · THE LANDING DEPARTS ────────────────────────────────────────────
     Scroll-linked, native, no JS and no scroll listener: the cover dissolves
     upward over the first screen so the runhead trades places with it. Any
     engine without scroll-driven animations simply keeps the cover static. */
  @supports (animation-timeline: scroll()) {
    #front .d-landing-shell {
      animation: d-home-depart linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 82vh;
    }

    /* a phone cover runs taller than its screen, so the print at its foot
       was dissolving while it was still being looked at: the departure
       starts half a screen later there */
    @media (max-width: 760px) {
      #front .d-landing-shell { animation-range: 50vh 130vh; }
    }
  }

  /* ── 3 · SECTION FLAGS ──────────────────────────────────────────────────
     The 3px section rule draws across, the desk tag and the "more" link
     arrive behind it, and the title sets word by word (dispatch.js splits
     the words; the .d-home-in class here is what releases them). */
  html.home-reveal-ready [data-home-reveal] > .d-wrap.d-home-reveal .d-flag::before {
    transform: scaleX(0);
  }
  html.home-reveal-ready [data-home-reveal] > .d-wrap.d-home-in .d-flag::before {
    transform: scaleX(1);
    transition: transform 720ms var(--ease) 40ms;
  }
  html.home-reveal-ready [data-home-reveal] > .d-wrap.d-home-in .d-flag .tag {
    animation: d-home-set 460ms var(--ease) 120ms both;
  }
  html.home-reveal-ready [data-home-reveal] > .d-wrap.d-home-in .d-flag .more {
    animation: d-home-set 460ms var(--ease) 280ms both;
  }

  /* ── 4 · THE FILES — lead plate first, then the pair ────────────────────*/
  html.home-reveal-ready #files > .d-wrap.d-home-in .file-lead {
    animation: d-home-set 540ms var(--ease) 140ms both;
  }
  html.home-reveal-ready #files > .d-wrap.d-home-in .files-row .file-card:nth-child(1) {
    animation: d-home-set 520ms var(--ease) 260ms both;
  }
  html.home-reveal-ready #files > .d-wrap.d-home-in .files-row .file-card:nth-child(2) {
    animation: d-home-set 520ms var(--ease) 340ms both;
  }

  /* ── 5 · THE EDITOR & THE RECORD — the ledger fills in ──────────────────
     The editor column moves as one block (it is multi-column text; animating
     the fragments individually fights the column breaks). The chapters then
     file in down the ledger in order. */
  html.home-reveal-ready #about > .d-wrap.d-home-in .d-editor {
    animation: d-home-set 560ms var(--ease) 160ms both;
  }
  html.home-reveal-ready #about > .d-wrap.d-home-in .d-rec {
    animation: d-home-set 500ms var(--ease) both;
  }
  html.home-reveal-ready #about > .d-wrap.d-home-in .d-rec:nth-child(1) { animation-delay: 300ms; }
  html.home-reveal-ready #about > .d-wrap.d-home-in .d-rec:nth-child(2) { animation-delay: 380ms; }
  html.home-reveal-ready #about > .d-wrap.d-home-in .d-rec:nth-child(3) { animation-delay: 460ms; }
  html.home-reveal-ready #about > .d-wrap.d-home-in .d-rec:nth-child(4) { animation-delay: 540ms; }

  html.home-reveal-ready #about > .d-wrap.d-home-in .rec-file-item {
    animation: d-home-set 440ms var(--ease) both;
  }
  html.home-reveal-ready #about > .d-wrap.d-home-in .rec-file-item:nth-child(1) { animation-delay: 620ms; }
  html.home-reveal-ready #about > .d-wrap.d-home-in .rec-file-item:nth-child(2) { animation-delay: 680ms; }
  html.home-reveal-ready #about > .d-wrap.d-home-in .rec-file-item:nth-child(3) { animation-delay: 740ms; }

  /* ── 6 · LATEST FROM THE DESK — two columns, filed left then right ──────*/
  html.home-reveal-ready #stories > .d-wrap.d-home-in .d-column-head,
  html.home-reveal-ready #stories > .d-wrap.d-home-in .d-latest-item {
    animation: d-home-set 480ms var(--ease) both;
  }
  html.home-reveal-ready #stories > .d-wrap.d-home-in .d-latest-column:nth-child(1) .d-column-head { animation-delay: 120ms; }
  html.home-reveal-ready #stories > .d-wrap.d-home-in .d-latest-column:nth-child(1) .d-latest-item:nth-of-type(1) { animation-delay: 200ms; }
  html.home-reveal-ready #stories > .d-wrap.d-home-in .d-latest-column:nth-child(1) .d-latest-item:nth-of-type(2) { animation-delay: 270ms; }
  html.home-reveal-ready #stories > .d-wrap.d-home-in .d-latest-column:nth-child(1) .d-latest-item:nth-of-type(3) { animation-delay: 340ms; }
  html.home-reveal-ready #stories > .d-wrap.d-home-in .d-latest-column:nth-child(2) .d-column-head { animation-delay: 200ms; }
  html.home-reveal-ready #stories > .d-wrap.d-home-in .d-latest-column:nth-child(2) .d-latest-item:nth-of-type(1) { animation-delay: 280ms; }
  html.home-reveal-ready #stories > .d-wrap.d-home-in .d-latest-column:nth-child(2) .d-latest-item:nth-of-type(2) { animation-delay: 350ms; }

  /* the desk headlines take the same red proofing pen as .d-jump */
  .d-latest-item h4 a {
    background-image: linear-gradient(var(--spot), var(--spot));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1.5px;
    transition: background-size 340ms var(--ease), color var(--motion-fast) ease;
  }
  .d-latest-item h4 a:hover,
  .d-latest-item h4 a:focus-visible { background-size: 100% 1.5px; }

  /* ── 7 · OFF THE WIRE — four cards, then the seed drops in ──────────────*/
  html.home-reveal-ready #wire > .d-wrap.d-home-in .d-wire-card {
    animation: d-home-set 500ms var(--ease) both;
  }
  html.home-reveal-ready #wire > .d-wrap.d-home-in .d-wire-card:nth-child(1) { animation-delay: 140ms; }
  html.home-reveal-ready #wire > .d-wrap.d-home-in .d-wire-card:nth-child(2) { animation-delay: 220ms; }
  html.home-reveal-ready #wire > .d-wrap.d-home-in .d-wire-card:nth-child(3) { animation-delay: 300ms; }
  html.home-reveal-ready #wire > .d-wrap.d-home-in .d-wire-card:nth-child(4) { animation-delay: 380ms; }
  html.home-reveal-ready #wire > .d-wrap.d-home-in .d-seed {
    animation: d-home-stamp 460ms var(--ease) 560ms both;
  }

  /* ── 8 · LETTERS — the note, then the chips get stamped ─────────────────*/
  html.home-reveal-ready #contact > .d-wrap.d-home-in .d-letters-main {
    animation: d-home-set 520ms var(--ease) 140ms both;
  }
  html.home-reveal-ready #contact > .d-wrap.d-home-in .d-socials {
    animation: d-home-set 520ms var(--ease) 260ms both;
  }
  html.home-reveal-ready #contact > .d-wrap.d-home-in .d-chips span {
    animation: d-home-stamp 380ms var(--ease) both;
  }
  html.home-reveal-ready #contact > .d-wrap.d-home-in .d-chips span:nth-child(1) { animation-delay: 320ms; }
  html.home-reveal-ready #contact > .d-wrap.d-home-in .d-chips span:nth-child(2) { animation-delay: 370ms; }
  html.home-reveal-ready #contact > .d-wrap.d-home-in .d-chips span:nth-child(3) { animation-delay: 420ms; }
  html.home-reveal-ready #contact > .d-wrap.d-home-in .d-chips span:nth-child(4) { animation-delay: 470ms; }
}

@keyframes d-home-depart {
  0%, 24% { opacity: 1; translate: none; }
  100%    { opacity: 0; translate: 0 -5vh; }
}

/* Print keeps the ink: the section rule is the one hidden state that lives
   outside a keyframe, so hand it back explicitly. */
@media print {
  html.home-reveal-ready [data-home-reveal] > .d-wrap .d-flag::before {
    transform: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   THE SPOT PLATE ON THE HOMEPAGE — colour that carries rank
   Every accent above now reads `--spot`, so each section is already set in
   its own ink (see "THE SPOT PLATE" in dispatch.css). This block does the
   other half of the job: FIGURE AND GROUND. One flat stock with hairline
   boxes gives every panel the same rank, which is what made the page read
   monotone even where the type was right.

   The rule: in each section exactly ONE panel — the one that leads it —
   is washed in that section's ink. Its peers stay on the bare stock. A
   wash is 6% ink, well under a second paper stock; it reads as a screened
   box in a newspaper, not as a card.
      desk map  → the routes panel   (the circulation strip stays bare)
      files     → the lead case body (the two cards stay bare)
      practice  → the method panel   (facets and the fast note stay bare)
      letters   → the letters panel
   Latest and Off the Wire deliberately get NO wash: their contents are
   peers, so ranking one of them would be a lie about the content.
   ════════════════════════════════════════════════════════════════════ */

.d-toc,
#files .file-lead-body,
#contact .d-letters-grid {
  background: var(--spot-wash);
}

/* Column heads are the rank line inside an unwashed panel — the ink rule
   under them becomes the section's ink and doubles in weight, which is
   what tells the eye these are headers and the rows below are entries. */
.d-column-head {
  border-block-end: 2px solid var(--spot);
}

/* The record's chapter numerals and eras were the only ledger furniture
   still set in mute grey; on the plate they carry the section ink and the
   entry reads № first, era second, org third instead of all at once. */
.d-profile .d-rec-no {
  color: var(--spot);
}

/* Latest is two peer columns, so nothing there may be washed or ranked —
   the datelines carry the ink instead, which gives the list a colour beat
   per row without claiming one column leads the other. */
#stories .d-entry-meta {
  color: var(--spot);
}