/* home-flare.css v5 — the homepage's own edition layer.
   Loaded after home-redesign.css. Holds only what makes the front page a
   front page: the cover face, the pinned street print, and the square
   plate grammar the inside sections print in. Shared shell stays in
   dispatch.css. */

/* ═══ COVER FACE ════════════════════════════════════════════════════════
   Fraunces is the cover face and nothing else: the 118px headline wears
   it, every heading inside the edition stays in the house Newsreader
   (same face as the running-head wordmark and every other page). */
/* while Fraunces is still on the wire, a Times cut sized to Fraunces'
   width (measured: Times runs ~1.11× wider at 118px) wraps the headline
   to the same three lines, so the cover doesn't reflow when the face
   lands (cold-load CLS was 0.16, almost all of it this headline) */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Times New Roman"), local("Times");
  size-adjust: 90%;
}

#front .d-landing-headline {
  font-family: "Fraunces", "Fraunces Fallback", var(--serif);
}

/* “understand / hiểu” is the thesis, so it takes the proof ink.
   dispatch.js re-splits the translated headline after every language swap. */
html[lang="en"] #front .d-landing-headline .d-w:nth-of-type(6) .d-w-i,
html[lang="vi"] #front .d-landing-headline .d-w:nth-of-type(8) .d-w-i {
  color: var(--spot);
  font-style: italic;
  background-image: linear-gradient(var(--spot), var(--spot));
  background-repeat: no-repeat;
  background-position: 0 94%;
  background-size: 100% 0.03em;
}

/* the cover carries no running head, so the language switch rides the
   dateline row in the same mono voice — a reader who lands in the wrong
   language is never a screen away from the fix */
#front .d-landing-meta {
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}
#front .d-landing-meta .d-landing-place { margin-inline-start: auto; }
#front .d-landing-lang { margin-block: -15px; }
#front .d-landing-meta .d-theme-toggle { margin-block: -18px; }

/* the cover's own theme control, sized to the dateline voice */
#front .d-landing-meta .d-theme-toggle {
  min-inline-size: var(--space-6);
  min-block-size: var(--space-6);
  padding: 0;
  color: var(--ink-mute);
}

#front .d-landing-meta .d-theme-toggle:hover,
#front .d-landing-meta .d-theme-toggle:focus-visible { color: var(--spot); }

#front .d-landing-meta .d-theme-toggle svg { width: 15px; height: 15px; }
#front .d-landing-lang button {
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 600;
}

/* ═══ THE STREET PRINT ══════════════════════════════════════════════════
   One photograph on the cover, pinned at a slight tilt like a proof on
   the board: 1px ink frame, muted as printed, inks up to colour on hover. */
#front {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.d-landing-frame {
  min-inline-size: 0;
  margin: 0;
  rotate: -1.25deg;
}

.d-landing-frame-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  padding: var(--space-2);
  border: 1px solid var(--ink);
  background: var(--paper);
}

.d-landing-frame img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 48%;
  filter: saturate(0.62) sepia(0.08);
  transition: filter 320ms var(--ease);
}

.d-landing-frame:hover img,
.d-landing-frame:focus-within img {
  filter: none;
}

.d-landing-frame figcaption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
  margin-block-start: var(--space-2);
  font-family: var(--mono);
  font-size: var(--type-meta);
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.d-landing-frame-note {
  display: grid;
  gap: var(--space-1);
}

.d-landing-frame-note > :first-child {
  color: var(--ink);
  font-weight: 600;
}

.d-landing-frame figcaption a {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  border-block-end: 1px solid var(--rule);
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.d-landing-frame figcaption a:hover,
.d-landing-frame figcaption a:focus-visible {
  border-block-end-color: currentColor;
  color: var(--spot);
}

@media (min-width: 761px) {
  #front .d-landing-headline {
    grid-column: 1 / 9;
    grid-row: 2;
  }

  #front .d-landing-brief {
    grid-column: 5 / 9;
    grid-row: 3;
  }

  .d-landing-frame {
    grid-column: 9 / -1;
    grid-row: 2 / span 2;
    align-self: end;
  }
}

@media (min-width: 1024px) {
  #front .d-landing-headline { grid-column: 1 / 10; }
  #front .d-landing-brief { grid-column: 6 / 10; }
  .d-landing-frame { grid-column: 10 / -1; }
}

/* the phone cover keeps the print — smaller, after the routes */
@media (max-width: 760px) {
  /* the dateline keeps its phrase whole; when the Vietnamese one leaves no
     room, the language and theme controls drop to a second line */
  #front .d-landing-meta { flex-wrap: wrap; gap: var(--space-3); }
  #front .d-landing-meta p { white-space: nowrap; }
  #front .d-landing-place { display: none; }

  /* the print and its caption share one row: the pinned frame on the left,
     the caption set level beside it on the frame's foot */
  .d-landing-frame {
    order: 1;
    display: grid;
    grid-template-columns: min(56%, 220px) minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: end;
    margin-block-start: var(--space-5);
  }

  .d-landing-frame figcaption {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    margin-block-start: 0;
    padding-block-end: var(--space-2);
    rotate: 1.25deg;
  }
}

/* ═══ ONE PLATE GRAMMAR: SQUARE ═════════════════════════════════════════
   The one-stock sheet has no shadows, so a rounded outline on flat paper
   reads as an app card. Every plate on the front page is now a square
   screened box or a ruled strip — the same grammar as the record ledger. */
.d-toc,
.d-circulation,
#files .file-lead,
#files .file-card,
#files .file-card-media,
.d-fast-note,
#contact .d-letters-grid {
  border-radius: 0;
}

/* a washed plate is a screened box under a 3px cap — never a 1px outline */
#files .file-lead,
#contact .d-letters-grid {
  border: 0;
  border-block-start: 3px solid var(--spot);
}

/* contents: a washed table — 3px spot cap, ruled rows, no box */
.d-toc { border: 0; }

.d-toc-row:focus-visible {
  outline: 2px solid var(--verm);
  outline-offset: -2px;
}

/* circulation: a ruled strip under a 2px column-head rule, like the
   on-file strip that closes the record */
.d-circulation {
  border: 0;
  border-block-start: 2px solid var(--spot);
}

/* the front page's own folio is the section flag; the extra full-bleed
   hairline 80px above it said nothing the 3px rule doesn't */
#main .d-section { border-block-start: 0; }

/* the record is a sub-front inside About: its rule is a hairline, its title
   drops to the panel-head rung (one 38px front per section), and the
   ledger's 2px cap below it is the section's only column-head rule */
.d-profile .d-record-head::before {
  height: 1px;
  background: var(--rule);
}

.d-profile .d-record-head .ttl {
  font-size: clamp(24px, 2.4vw, 28px);
}

/* the sign-off is a dateline, not a paragraph */
.d-editor p.d-editor-sign {
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-mute);
}

/* ═══ THE FILES ═════════════════════════════════════════════════════════
   Lead plate with a washed body; the pair below sit unboxed on hairline
   mounts. Photographs print muted like the cover and ink up on hover. */
#files .file-lead-media img,
#files .file-card-media img {
  filter: saturate(0.72);
  transition: filter 320ms var(--ease);
}

#files .file-lead:hover img,
#files .file-lead:focus-within img,
#files .file-card:hover img,
#files .file-card:focus-within img {
  filter: none;
}

.file-kicker {
  font-weight: 600;
  letter-spacing: 0.16em;
}

#files .file-card,
#files .file-card:hover,
#files .file-card:focus-within {
  grid-template-rows: auto minmax(0, 1fr);
  border: 0;
  box-shadow: none;
}

#files .file-card-media {
  overflow: hidden;
  border: 1px solid var(--rule);
}

#files .file-card-body {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) 0 0;
  border: 0;
}

/* the two cards' notes run to different lengths — the CTA sits on the
   card foot so the pair share a baseline */
#files .file-card-body .d-jump { margin-block-start: auto; }

@media (min-width: 901px) {
  #files .files-row {
    align-items: stretch;
    gap: clamp(var(--space-4), 3vw, var(--space-6));
  }
}

/* ═══ PRACTICE ══════════════════════════════════════════════════════════
   Three disciplines as ruled rows; the one washed panel is the note that
   proves the method on a real piece. */
@media (min-width: 901px) {
  #practice .d-practice-board {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  /* three classified columns, ruled between, under one hairline */
  #practice .d-facets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 0;
    border-block: 1px solid var(--rule-soft);
  }

  #practice .d-facet,
  #practice .d-facet--systems {
    align-content: start;
    padding: var(--space-4) var(--space-4) var(--space-5) 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #practice .d-facet + .d-facet {
    padding-inline-start: var(--space-4);
    border-inline-start: 1px solid var(--rule-soft);
  }

  #practice .d-facet:last-child { padding-inline-end: 0; }
}

#practice .d-fast-note {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-5);
  border: 0;
  border-block-start: 3px solid var(--spot);
  border-radius: 0;
  background: var(--spot-wash);
  box-shadow: none;
}

#practice .d-fast-note strong {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

#practice .d-fast-note p {
  max-inline-size: 60ch;
  font-size: 16.5px;
  line-height: 1.55;
}

@media (min-width: 901px) {
  #practice .d-fast-note {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-6);
  }
}

/* the note's route is the same red-pen CTA as every other one on the page */
#practice .d-fast-note a,
#practice .d-fast-note a:hover {
  justify-self: start;
  inline-size: auto;
  padding: 0;
  border: 0;
  border-block-end: 1px solid var(--spot);
  border-radius: 0;
  color: var(--spot);
  letter-spacing: 0.14em;
}

#practice .d-fast-note a:hover,
#practice .d-fast-note a:focus-visible {
  color: var(--spot-deep);
  border-block-end-color: currentColor;
}

/* ═══ FROM THE DESK / OTHER DESKS — open columns, no cards ══════════════ */
#stories .d-latest-grid {
  gap: 0;
  border-block: 1px solid var(--rule-soft);
}

#stories .d-latest-column,
#stories .d-latest-column:focus-within {
  overflow: visible;
  padding-block: var(--space-4);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#stories .d-latest-column:first-child {
  padding-inline-end: clamp(var(--space-4), 3vw, var(--space-6));
}

#stories .d-latest-column + .d-latest-column {
  padding-inline-start: clamp(var(--space-4), 3vw, var(--space-6));
  border-inline-start: 1px solid var(--rule-soft);
}

#stories .d-latest-item {
  padding-block: var(--space-3);
}

#wire .d-wire-compact {
  gap: 0;
  border-block: 1px solid var(--rule-soft);
}

#wire .d-wire-card,
#wire .d-wire-card:hover,
#wire .d-wire-card:focus-visible {
  min-block-size: 0;
  padding: var(--space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

#wire .d-wire-card + .d-wire-card {
  border-inline-start: 1px solid var(--rule-soft);
}

#wire .d-wire-card:hover,
#wire .d-wire-card:focus-visible {
  background: var(--spot-wash);
}

#wire .d-wire-card:focus-visible {
  outline: 2px solid var(--verm);
  outline-offset: -2px;
}

#wire .d-wire-card.d-wire-card--sesame {
  border-inline-start: 3px solid var(--filed);
}

/* ═══ LETTERS ═══════════════════════════════════════════════════════════ */
/* the chips' leading bar reads the section ink (sprout by day, sage by
   night) instead of a day-only green */
#contact .d-chips span::before { background: var(--spot); }

/* 2px = a label's rule; 3px was plate weight on a link */
#contact .d-email {
  border-bottom-width: 2px;
  overflow-wrap: anywhere;
}

/* ═══ RESPONSIVE COMPRESSION ════════════════════════════════════════════ */
@media (max-width: 900px) {
  #wire .d-wire-card:nth-child(odd) {
    border-inline-start: 0;
  }

  #wire .d-wire-card:nth-child(n + 3) {
    border-block-start: 1px solid var(--rule-soft);
  }

  #wire .d-wire-card.d-wire-card--sesame {
    border-inline-start: 3px solid var(--filed);
  }
}

/* under the three-column board the facets keep the row grammar: ruled
   between, no boxes — the tablet tier had fallen back to rounded cards */
@media (max-width: 900px) {
  #practice .d-facets {
    gap: 0;
    border-block: 1px solid var(--rule-soft);
  }

  #practice .d-facet,
  #practice .d-facet--systems {
    align-content: start;
    padding: var(--space-4) 0;
    border: 0;
    border-block-end: 1px solid var(--rule-soft);
    border-radius: 0;
    box-shadow: none;
  }

  #practice .d-facet:last-child {
    border-block-end: 0;
  }
}

@media (max-width: 640px) {
  #practice .d-fast-note { padding: var(--space-4); }

  /* the record head is a panel head inside About: it sits under the 30px
     section front, not over it */
  .d-profile .d-record-head .ttl { font-size: 24px; }

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

  .d-circulation-head h3 { text-align: start; }

  #stories .d-latest-column,
  #stories .d-latest-column:first-child,
  #stories .d-latest-column + .d-latest-column {
    padding-inline: 0;
    border-inline-start: 0;
  }

  #stories .d-latest-column + .d-latest-column {
    border-block-start: 1px solid var(--rule-soft);
  }

  #wire .d-wire-card,
  #wire .d-wire-card:hover,
  #wire .d-wire-card:focus-visible {
    padding-inline: 0;
  }

  #wire .d-wire-card + .d-wire-card,
  #wire .d-wire-card:nth-child(n + 3) {
    border-inline-start: 0;
    border-block-start: 1px solid var(--rule-soft);
  }

  #wire .d-wire-card.d-wire-card--sesame {
    padding-inline-start: var(--space-4);
    border-inline-start: 3px solid var(--filed);
  }

  #contact .d-email {
    font-size: clamp(19px, 5.4vw, 24px);
    gap: var(--space-2);
  }

  #contact .d-email svg {
    inline-size: 20px;
    block-size: 20px;
  }
}

/* ═══ MOTION, THEMES, AND OUTPUT MODES ══════════════════════════════════ */
@keyframes d-proof-set {
  from {
    opacity: 0;
    translate: var(--space-3) var(--space-3);
  }
  to {
    opacity: 1;
    translate: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .d-landing-frame {
    animation: d-proof-set 620ms var(--ease) 560ms both;
  }

  #front .d-w-i {
    transition-delay: calc(var(--wi, 0) * 34ms);
  }
}

/* night: the cover print keeps its day treatment (a brightness cut turned
   the street into a slab); ink-weight rules step down to ink-soft so they
   read as rules, not glare */
html[data-theme="night"] .d-landing-frame-media,
body.dispatch[data-theme="night"] .d-landing-frame-media,
html[data-theme="night"] .d-desk-map,
body.dispatch[data-theme="night"] .d-desk-map {
  border-color: var(--ink-soft);
}

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

@media (forced-colors: active) {
  .d-landing-frame-media,
  #files .file-card-media {
    border-color: CanvasText;
    background: Canvas;
  }

  #stories .d-latest-grid,
  #stories .d-latest-column,
  #wire .d-wire-compact,
  #wire .d-wire-card,
  #practice .d-facets,
  #practice .d-facet,
  #practice .d-fast-note,
  .d-circulation {
    border-color: CanvasText;
  }
}

@media print {
  #front .d-landing-lang,
  #front .d-landing-meta .d-theme-toggle { display: none; }

  .d-landing-frame {
    rotate: none;
    animation: none;
  }

  .d-landing-frame img,
  #files .file-lead-media img,
  #files .file-card-media img {
    filter: none;
  }

  #wire .d-wire-card:hover,
  #wire .d-wire-card:focus-visible {
    background: transparent;
  }
}

/* The edition: direct routes on the cover, a photographic interlude,
   room for each independent project, and a generous final invitation. */
:root {
  --edition-dark: #201F1B;
  --edition-light: #F7F0E1;
  --edition-muted: #C2BAAC;
  --edition-rule: #59564D;
  --edition-display: clamp(2.75rem, 6.4vw, 6rem);
}

#front .d-landing-meta {
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--rule);
}
#front .d-landing-meta .d-theme-toggle {
  min-inline-size: var(--space-6);
  min-block-size: var(--space-6);
}
.d-cover-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: 1px solid var(--ink);
}
.d-cover-index a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 64px;
  padding-inline: var(--space-2);
  border-block-end: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--type-support);
  line-height: 1.4;
  transition: color var(--motion-fast), background-color var(--motion-fast);
}
.d-cover-index a:nth-child(odd) { border-inline-end: 1px solid var(--rule); }
.d-cover-no {
  font: var(--type-meta) var(--mono);
  color: var(--ink-mute);
}
.d-cover-index a:hover { color: var(--verm); background: var(--spot-wash); }
.d-cover-index a:focus-visible { outline: 2px solid var(--verm); outline-offset: -2px; }

.d-photographic {
  padding-block: var(--section-space);
  margin-block: var(--space-6);
  background: var(--edition-dark);
  color: var(--edition-light);
  scroll-margin-block-start: var(--space-7);
}
.d-photographic-head { display: grid; gap: var(--space-4); margin-block-end: var(--space-6); }
.d-photographic .d-kicker { color: var(--edition-muted); }
.d-photographic h2 {
  max-inline-size: 13ch;
  font-family: var(--serif);
  font-size: var(--edition-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.d-photographic-note {
  max-inline-size: 27ch;
  color: var(--edition-muted);
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.5;
}
.d-contact-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); align-items: end; }
.d-contact-print { min-inline-size: 0; margin: 0; }
.d-contact-print--lead { grid-column: 1 / -1; }
.d-contact-print a { display: block; overflow: hidden; }
.d-contact-print img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.d-contact-print--lead img { aspect-ratio: 1600 / 1069; }
.d-contact-print figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block-start: var(--space-3);
  color: var(--edition-muted);
  font-family: var(--mono);
  font-size: var(--type-meta);
  line-height: 1.5;
}
.d-photographic a:focus-visible { outline: 2px solid var(--edition-light); outline-offset: 4px; }
.d-photographic-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--edition-rule);
  font-family: var(--sans);
  font-size: var(--type-support);
  color: var(--edition-muted);
}
.d-photographic-foot a { display: inline-flex; align-items: center; gap: var(--space-4); min-block-size: 44px; color: var(--edition-light); }
.d-photographic-foot a:hover { text-decoration: underline; text-underline-offset: 0.3em; }

#wire .d-wire-compact { grid-template-columns: minmax(0, 1fr); }
#wire .d-wire-card,
#wire .d-wire-card:hover,
#wire .d-wire-card:focus-visible {
  padding: var(--space-5) var(--space-4);
  gap: var(--space-3);
  border-inline-start: 0;
  border-block-end: 1px solid var(--rule);
}
#wire .d-wire-card + .d-wire-card { border-inline-start: 0; }
#wire .d-project-number {
  position: absolute;
  inset-block-start: var(--space-5);
  inset-inline-end: var(--space-4);
  color: var(--ink-mute);
  font: var(--type-meta) var(--mono);
}
#wire .d-wire-card h3 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 500; }
#wire .d-wire-card p { max-inline-size: 48ch; font-size: var(--type-body); line-height: 1.55; }
#wire .d-wire-card--sesame .d-seed { inset-block-start: auto; inset-block-end: var(--space-5); inset-inline-end: var(--space-4); }
#wire .d-wire-card .d-jump { margin-block-start: var(--space-3); padding-inline-end: var(--space-6); }
#wire .d-wire-card .d-wire-no { padding-inline-end: var(--space-6); }

.d-contact-invitation {
  max-inline-size: 16ch;
  margin-block: var(--space-6);
  font-family: var(--serif);
  font-size: var(--edition-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
#contact .d-letters-grid {
  padding: var(--space-5) 0;
  border-block-start: 1px solid var(--ink);
  background: transparent;
}
#contact .d-avail-lede { max-inline-size: 42ch; font-size: clamp(1.25rem, 2.3vw, 1.75rem); line-height: 1.4; }
#contact .d-email { min-block-size: 64px; }

@media (min-width: 761px) {
  .d-cover-index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .d-cover-index a { padding-inline: var(--space-3); }
  .d-cover-index a + a { border-inline-start: 1px solid var(--rule); }
  .d-cover-index a:nth-child(odd) { border-inline-end: 0; }
  .d-cover-index a:first-child { padding-inline-start: 0; }
  .d-photographic-head { grid-template-columns: 2fr 1fr; column-gap: var(--space-7); align-items: end; }
  .d-photographic-head .d-kicker { grid-column: 1 / -1; }
  .d-photographic h2 { max-inline-size: 15ch; }
  .d-contact-sheet { grid-template-columns: 2.4fr 1fr 1fr; gap: var(--space-4); }
  .d-contact-print--lead { grid-column: auto; }
  .d-contact-print:nth-child(2) { align-self: start; padding-block-start: var(--space-7); }
  #wire .d-wire-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #wire .d-wire-card,
  #wire .d-wire-card:hover,
  #wire .d-wire-card:focus-visible { padding: var(--space-6); }
  #wire .d-wire-card:nth-child(even) { border-inline-start: 1px solid var(--rule); }
  #wire .d-project-number { inset-block-start: var(--space-6); inset-inline-end: var(--space-6); }
  #wire .d-wire-card--sesame .d-seed { inset-inline-end: var(--space-6); inset-block-end: var(--space-6); }
}
@media (prefers-reduced-motion: no-preference) {
  .d-contact-print img { transition: transform 500ms var(--ease); }
  .d-contact-print a:hover img { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .d-photographic { background: Canvas; color: CanvasText; }
  .d-photographic :is(p, a, figcaption, .d-kicker, .d-photographic-foot) { color: CanvasText; }
  .d-photographic a:focus-visible { outline-color: Highlight; }
}
@media print {
  .d-cover-index { display: none; }
  .d-photographic { background: transparent; color: var(--ink); margin-block: 0; break-inside: avoid; }
  .d-photographic :is(p, a, figcaption, .d-kicker, .d-photographic-foot) { color: var(--ink); }
  .d-contact-invitation, .d-photographic h2 { font-size: 32pt; }
}

/* The cover index replaces the separate contents page: proof of practice
   now leads directly into the three selected stories. */
#desk-map { padding-block: var(--space-5); border-block: 1px solid var(--rule); }
#desk-map > .d-wrap { display: block; }
#desk-map .d-circulation { padding: 0; border: 0; background: transparent; }
#desk-map .d-circulation-head { display: grid; gap: var(--space-2); }
#desk-map .d-circulation-head h3 { text-align: start; font-size: var(--type-support); font-family: var(--sans); font-weight: 400; line-height: 1.5; color: var(--ink-mute); }
#desk-map .d-circrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#desk-map .d-circ { display: flex; flex-direction: column-reverse; align-items: start; justify-content: end; gap: var(--space-2); padding: var(--space-3) var(--space-2); border: 0; }
#desk-map .d-circ + .d-circ { border-inline-start: 1px solid var(--rule); }
#desk-map .d-circ-n { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 500; letter-spacing: -0.04em; }
#desk-map .d-circ-l { font-size: var(--type-meta); }
@media (min-width: 761px) {
  #desk-map .d-circulation { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-6); align-items: center; }
  #desk-map .d-circ { padding-inline: var(--space-5); }
}

/* Cover routes stay legible while the reader scrolls into the edition. */
#front .d-landing-shell { animation: none; }

/* Final finish: consistent rules, readable captions, and quiet link states. */
#main .d-flag {
  column-gap: var(--space-3);
  row-gap: var(--space-3);
  padding-block-start: var(--space-3);
  margin-block-end: var(--space-5);
}

#main .d-flag .ttl { line-height: 1.15; }
#files .file-card-body .d-jump { padding-block-start: var(--space-3); }
#desk-map .d-circ { justify-content: start; }
#desk-map .d-circ-l { line-height: 1.5; }
#desk-map .d-circ-n { font-variant-numeric: lining-nums tabular-nums; }

#contact .d-chips { gap: var(--space-2) var(--space-3); }
#contact .d-chips span {
  min-block-size: var(--space-5);
  padding: var(--space-1) 0;
  border: 0;
  border-block-end: 1px solid var(--rule);
  border-radius: 0;
  font-family: var(--sans);
  font-size: var(--type-support);
  line-height: 1.5;
}
#contact .d-chips span::before { content: none; }
#contact .d-soc { border-radius: 0; }
#contact .d-email { gap: var(--space-2); }

.d-photographic-foot a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--space-6);
}
.d-cover-index a:active { color: var(--spot-deep); }
#wire .d-wire-card:focus-visible {
  outline: 2px solid var(--spot);
  outline-offset: calc(-1 * var(--space-1));
}

@media (max-width: 760px) {
  .d-landing-frame { column-gap: var(--space-3); }
  .d-landing-frame figcaption { overflow-wrap: anywhere; }
  #desk-map .d-circ:first-child { padding-inline-start: 0; }
  #desk-map .d-circ:last-child { padding-inline-end: 0; }
  #wire .d-wire-card,
  #wire .d-wire-card:hover,
  #wire .d-wire-card:focus-visible { padding-inline: 0; }
  #wire .d-wire-card.d-wire-card--sesame { padding-inline-start: 0; border-inline-start: 0; }
  #wire .d-project-number,
  #wire .d-wire-card--sesame .d-seed { inset-inline-end: 0; }
}

@media print {
  #contact .d-chips span { break-inside: avoid; }
}