/* ————————————————————————————————————————————————————————
   dr-2026 — base.css
   Verbatim from Phase C §08 (base element rules) + a stock
   .visually-hidden helper that several Phase C components rely on.
   All values come from tokens.css; this file declares no colours,
   sizes, or fonts of its own.
   ———————————————————————————————————————————————————————— */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "kern", "liga", "onum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--color-accent-hover); }
a:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }

::selection { background: var(--color-mark); color: var(--color-text); }

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

hr { border: 0; border-top: var(--border-hair); margin: var(--space-5) 0; }

/* Skip link — required for WCAG, first focusable element */
.dr-skip {
  position: absolute; left: -9999px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-meta);
  text-transform: uppercase; padding: 8px 12px;
  background: var(--color-text); color: var(--color-bg); text-decoration: none;
}
.dr-skip:focus { left: var(--space-3); top: var(--space-3); z-index: 100; }

/* Visually-hidden helper for screen-reader-only labels */
.visually-hidden,
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ————————————————————————————————————————————————————————
   Step 3 — Container, masthead, footer.
   Container rule from Phase C §07; component rules from §09.
   ———————————————————————————————————————————————————————— */

/* Container — wraps content to the landing-width grid. Mobile gutter
   24px, tablet/desktop 32px (Phase C §07). */
.dr-container {
  max-width: var(--container-landing);
  margin-inline: auto;
  padding-inline: var(--space-3);
}
@media (min-width: 641px) {
  .dr-container { padding-inline: var(--space-4); }
}

/* .dr-masthead — Phase C §09 + Step 5 narrow-width fix.
   Phase C verbatim doesn't carry a `gap` or `flex-wrap`. With the brand mono
   font now actually loading (post-Step 2 token fix-up), the wordmark + nav
   measure their true width and at innerWidth ≤375px there's no room left for
   `justify-content: space-between` to distribute. Adding `gap` reserves a
   minimum 16px of breathing room and `flex-wrap: wrap` lets the nav drop to a
   second row at the narrowest viewports rather than colliding. */
.dr-masthead {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: var(--space-2);
  border-bottom: var(--border-strong);
  padding: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--color-text-2);
}
.dr-masthead .dr-wordmark { color: var(--color-text); font-weight: 500; text-decoration: none; }
.dr-masthead nav { display: flex; gap: var(--space-3); }
.dr-masthead nav a { color: var(--color-text-2); text-decoration: none; }
.dr-masthead nav a[aria-current="page"] { color: var(--color-text); }
.dr-masthead nav a:hover { color: var(--color-accent); }
@media (max-width: 640px) {
  .dr-masthead { font-size: 10px; }
  .dr-masthead nav { gap: var(--space-2); }
}
/* Nav items (approved): Home · About · Archive · Contact */

/* .dr-footer — Phase C §09, verbatim. */
.dr-footer {
  border-top: var(--border-hair);
  padding: var(--space-4) 0 var(--space-2);
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--space-3); align-items: end;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--ls-nav); text-transform: uppercase;
  color: var(--color-text-3);
}
.dr-footer__socials { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; }
.dr-footer__socials a { color: var(--color-text-2); text-decoration: none; }
.dr-footer__socials a:hover { color: var(--color-accent); }
@media (max-width: 640px) {
  .dr-footer { grid-template-columns: 1fr; gap: var(--space-1); font-size: 10px; }
  .dr-footer__socials { justify-content: flex-start; gap: var(--space-2); }
}
/* Socials (approved): LinkedIn · SiliconANGLE · Twitter / X · Facebook */

/* Footer top breathing room so the rule sits clear of the last block. */
.dr-site-footer { margin-top: var(--space-7); }

/* ————————————————————————————————————————————————————————
   Step 3 fix-up — three browser-QA regressions.
   1. .dr-nav targeted directly so the shortcode's class wins
      regardless of cascade interactions with parent themes.
   2. .dr-footer__socials reaffirmed with a higher-specificity
      `.dr-footer .dr-footer__socials` selector — same flex/gap
      values, raised to (0,2,0) so nothing in the cascade wins.
   3. Skip-link focus reveal. The previous `.screen-reader-text`
      rule clipped with `clip: rect(0 0 0 0)` (no `!important`)
      while WP core's wp-block-template-skip-link injected its own
      <a class="skip-link screen-reader-text"> with
      `clip-path: inset(50%)`. Core's :focus reset only `clip-path`
      and not `clip`, so the legacy clip kept the link hidden on
      focus. Reset both clip and clip-path here with `!important`
      and brand-style the revealed element with Phase C tokens.
   ———————————————————————————————————————————————————————— */

/* 1. Nav anchors — direct class match. */
.dr-nav {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
}
.dr-nav a {
  color: var(--color-text-2);
  text-decoration: none;
  font-family: var(--font-mono);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
}
.dr-nav a[aria-current="page"] { color: var(--color-text); }
.dr-nav a:hover { color: var(--color-accent); }
@media (max-width: 640px) {
  .dr-nav { gap: var(--space-2); }
}

/* 2. Footer socials — raised specificity. */
.dr-footer .dr-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
  align-items: baseline;
}
.dr-footer .dr-footer__socials a {
  color: var(--color-text-2);
  text-decoration: none;
}
.dr-footer .dr-footer__socials a:hover { color: var(--color-accent); }
@media (max-width: 640px) {
  .dr-footer .dr-footer__socials { justify-content: flex-start; gap: var(--space-2); }
}

/* 3. Skip-link reveal on focus.
   Targets:
   - .dr-skip          — our part-rendered link
   - .skip-link        — core's wp-block-template-skip-link injected link
   - .screen-reader-text — any other a11y-clipped element that gains focus
   */
/* Doubled class so specificity (0,3,0) beats `a { color: ... }` (0,0,1) even
   if `!important` is later removed. Var fallbacks (`var(--name, #literal)`) so
   the rule renders correctly even if the token system regresses. */
.dr-skip.dr-skip:focus,
.dr-skip.dr-skip:focus-visible,
.skip-link.skip-link:focus,
.skip-link.skip-link:focus-visible,
.screen-reader-text.screen-reader-text:focus,
.screen-reader-text.screen-reader-text:focus-visible {
  position: absolute !important;
  top: var(--space-3, 24px) !important;
  left: var(--space-3, 24px) !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  margin: 0 !important;
  padding: var(--space-1, 12px) var(--space-2, 16px) !important;
  background: var(--color-text, #1a1613) !important;
  color: var(--color-bg, #f7f4ee) !important;
  font-family: var(--font-mono, ui-monospace, monospace) !important;
  font-size: 12px !important;
  letter-spacing: var(--ls-meta, 0.14em) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  z-index: 100000 !important;
  outline: var(--focus-outline, 2px solid #1d2a4a) !important;
  outline-offset: var(--focus-offset, 3px) !important;
}

/* ————————————————————————————————————————————————————————
   Step 4 — Landing components.
   .dr-hero, .dr-portrait, .dr-bio, .dr-feed*, .dr-article-card*, .dr-chip
   — all verbatim from Phase C §09.
   ———————————————————————————————————————————————————————— */

.dr-hero {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--space-6);
  align-items: end;
  margin: var(--space-6) 0 var(--space-7);
}
.dr-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--color-text-3);
  margin-bottom: var(--space-2);
}
.dr-hero__name {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
.dr-hero__tagline {
  font-style: italic;
  font-size: var(--fs-lede);
  line-height: var(--lh-body);
  color: var(--color-text-2);
  margin: 0 0 var(--space-4);
  max-width: 36ch;
}
.dr-hero__line {
  font-size: 18px;
  line-height: 1.55;
  max-width: var(--measure-tight);
  margin: 0;
  padding-top: var(--space-3);
  border-top: var(--border-hair);
}
@media (max-width: 1023px) {
  .dr-hero { grid-template-columns: 1fr; gap: var(--space-4); }
  .dr-hero > figure { order: -1; } /* portrait on top on mobile */
  .dr-hero__name { font-size: 44px; }
  .dr-hero__tagline { font-size: 17px; }
  .dr-hero__line { font-size: 15px; padding-top: var(--space-2); }
}

.dr-portrait {
  aspect-ratio: 4 / 5;
  background: var(--color-bg-2);
  overflow: hidden;
  position: relative;
  margin: 0;
}
.dr-portrait img,
.dr-portrait picture { width: 100%; height: 100%; display: block; }
.dr-portrait img { object-fit: cover; }
.dr-portrait__cap {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--color-text-3);
  margin-top: var(--space-1);
  display: flex; justify-content: space-between;
}

.dr-bio {
  padding: var(--space-5) 0;
  border-top: var(--border-hair);
  border-bottom: var(--border-hair);
  margin: 0 0 var(--space-6);
}
.dr-bio p {
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: var(--color-text);
  margin: 0;
  max-width: var(--measure-prose);
}

.dr-feed__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--space-4);
}
.dr-feed__head h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-h2); line-height: var(--lh-heading);
  letter-spacing: var(--ls-h);
  margin: 0;
}
.dr-feed__head .dr-feed__meta {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta); text-transform: uppercase;
  color: var(--color-text-3);
}
.dr-feed__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-4);
}
@media (max-width: 640px) {
  .dr-feed__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .dr-feed__head { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
}

.dr-article-card {
  display: flex; flex-direction: column; gap: var(--space-2);
}
.dr-article-card__thumb {
  aspect-ratio: 16 / 10;
  background: var(--color-bg-2);
  overflow: hidden;
}
.dr-article-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-article-card__meta {
  display: flex; gap: var(--space-2); align-items: baseline;
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-nav); text-transform: uppercase;
  color: var(--color-text-3);
}
.dr-article-card__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--fs-card); line-height: 1.28; letter-spacing: var(--ls-h-sm);
  margin: 0; text-wrap: balance;
}
.dr-article-card__title a { color: var(--color-text); text-decoration: none; }
.dr-article-card__title a:hover { color: var(--color-accent); }
.dr-article-card__excerpt {
  font-size: var(--fs-sm); line-height: 1.55;
  color: var(--color-text-2); margin: 0;
}

.dr-feed__more {
  padding: var(--space-3) 0;
  border-top: var(--border-hair);
  margin: var(--space-4) 0 var(--space-7);
}
.dr-feed__more a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dr-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta); text-transform: uppercase;
  color: var(--color-accent);
}
.dr-chip::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--color-accent);
  border-radius: 100%;
}

/* ————————————————————————————————————————————————————————
   Step 5 — About-page components.
   Verbatim from Phase C §09: .dr-page-head, .dr-about-article,
   .dr-about-links. Phase C uses .dr-dropcap (renamed from Phase B's
   .about-dc); the paragraph wrapper has no class — the dropcap is a
   span inside the first <p>.
   ———————————————————————————————————————————————————————— */

.dr-page-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding-bottom: var(--space-4);
  border-bottom: var(--border-hair);
  margin-bottom: var(--space-6);
}
.dr-page-head__slug {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta); text-transform: uppercase;
  color: var(--color-text-3);
  margin: 0;
}
.dr-page-head__title {
  grid-column: 1 / -1;
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-h1); line-height: var(--lh-tight);
  letter-spacing: var(--ls-title);
  margin: 0;
}
.dr-page-head__lead {
  grid-column: 2 / -1;
  font-style: italic; font-size: 19px; line-height: 1.5;
  color: var(--color-text-2);
  max-width: 52ch; margin: var(--space-2) 0 0;
}
@media (max-width: 640px) {
  .dr-page-head { grid-template-columns: 1fr; gap: var(--space-1); }
  .dr-page-head__title { font-size: 44px; }
  .dr-page-head__lead { grid-column: 1 / -1; font-size: 15px; }
}

.dr-about-article {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.dr-about-article > figure { margin: 0; position: sticky; top: var(--space-4); align-self: start; }
.dr-about-article__prose p {
  font-size: 18px; line-height: 1.7; max-width: 58ch;
  margin: 0 0 var(--space-2);
}
.dr-about-article__prose .dr-dropcap {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 68px; line-height: 0.8;
  float: left; padding: 6px 10px 0 0; margin-top: 4px;
  color: var(--color-accent);
}
@media (max-width: 820px) {
  .dr-about-article { grid-template-columns: 1fr; gap: var(--space-4); }
  .dr-about-article > figure { position: static; max-width: 240px; }
  .dr-about-article__prose p { font-size: 16px; line-height: 1.65; }
  .dr-about-article__prose .dr-dropcap { font-size: 48px; }
}

.dr-about-links {
  padding: var(--space-5) 0;
  border-top: var(--border-hair);
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-6);
}
.dr-about-links__label {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta); text-transform: uppercase;
  color: var(--color-text-3);
  margin: 0;
}
.dr-about-links__list { list-style: none; padding: 0; margin: 0; }
.dr-about-links__list li a {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3);
  color: var(--color-text); text-decoration: none;
  padding: var(--space-1) 0; border-bottom: var(--border-hair);
  font-size: 17px;
}
.dr-about-links__list li a span {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: 0.08em; color: var(--color-text-3); text-transform: lowercase;
}
.dr-about-links__cta {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: var(--ls-meta); text-transform: uppercase;
  padding: 14px 20px;
  background: var(--color-text); color: var(--color-bg);
  text-decoration: none; white-space: nowrap;
  align-self: start;
}
.dr-about-links__cta:hover { background: var(--color-accent); }
@media (max-width: 820px) {
  .dr-about-links { grid-template-columns: 1fr; gap: var(--space-3); }
  .dr-about-links__cta { align-self: stretch; text-align: center; }
}

/* ————————————————————————————————————————————————————————
   Step 6 Phase 3 — Archive components.
   Verbatim from Phase C §09 for: .dr-archive-intro,
   .dr-archive-intro--note, .dr-years (+states),
   .dr-archive-item (+__meta, __title, __excerpt),
   .dr-pager (+__nums, anchor states).
   .dr-archive-list and .dr-archive-meta-row are not declared in
   Phase C §09 — added here per the Phase 3 spec (zero list-style +
   zero padding for the list; flex justify-between baseline for the
   meta row). Naming follows the established .dr-archive-* family.
   ———————————————————————————————————————————————————————— */

.dr-archive-intro {
  font-size: 17px; line-height: 1.65;
  color: var(--color-text-2);
  margin: 0;
  max-width: 58ch;
}
.dr-archive-intro--note {
  color: var(--color-text-3);
  font-size: 15px;
  margin-top: var(--space-1);
}

.dr-years {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2);
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.08em;
  padding: var(--space-2) 0;
  border-top: var(--border-hair);
  border-bottom: var(--border-hair);
}
.dr-years a { color: var(--color-text-2); text-decoration: none; }
.dr-years a[aria-current="true"] { color: var(--color-text); font-weight: 500; }
.dr-years a:hover { color: var(--color-accent); }

.dr-archive-meta-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--space-2) 0;
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta); text-transform: uppercase;
  color: var(--color-text-3);
}

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

.dr-archive-item {
  padding: var(--space-3) 0;
  border-top: var(--border-hair);
}
.dr-archive-item:last-child { border-bottom: var(--border-hair); }
.dr-archive-item__meta {
  display: flex; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-nav); text-transform: uppercase;
  color: var(--color-text-3);
  margin-bottom: var(--space-0);
}
.dr-archive-item__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--fs-h3); line-height: 1.28; letter-spacing: var(--ls-h-sm);
  margin: 0 0 var(--space-1); text-wrap: balance;
}
.dr-archive-item__title a { color: var(--color-text); text-decoration: none; }
.dr-archive-item__title a:hover { color: var(--color-accent); }
.dr-archive-item__excerpt {
  font-size: 15.5px; line-height: 1.55;
  color: var(--color-text-2);
  margin: 0; max-width: var(--measure-prose);
}

.dr-pager {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--space-4) 0;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: var(--ls-nav); text-transform: uppercase;
  color: var(--color-text-3);
}
.dr-pager__nums { display: flex; gap: var(--space-2); }
.dr-pager a { color: var(--color-text-2); text-decoration: none; }
.dr-pager a[aria-current="page"] { color: var(--color-text); }
.dr-pager a:hover { color: var(--color-accent); }

/* ————————————————————————————————————————————————————————
   Step 7 — Contact form + aside.
   Verbatim from Phase C §09 for: .dr-form__row, .dr-field (+ states),
   .dr-form__counter, .dr-form__hp, .dr-btn (+ states), .dr-contact-body,
   .dr-contact-aside (+ __links, __note), plus the Phase C @media blocks
   at 640 / 820 px.
   .dr-contact-aside__label, .dr-form__submit, .dr-form__status* are
   added here per the Step 7 spec — naming follows the established
   .dr-* family. Form layout is hand-rolled to match the Phase C contract
   (Fluent Forms Lite was evaluated and rejected — see step7-report.md).
   ———————————————————————————————————————————————————————— */

.dr-form__row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.dr-field {
  display: flex; flex-direction: column; gap: var(--space-0);
  margin-bottom: var(--space-3);
}
.dr-field label {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta); text-transform: uppercase;
  color: var(--color-text-3);
}
.dr-field input,
.dr-field textarea {
  font-family: var(--font-serif); font-size: var(--fs-body);
  line-height: 1.5; color: var(--color-text);
  background: transparent; border: 0;
  border-bottom: 1px solid var(--color-rule-2);
  padding: 8px 0; outline: none; width: 100%;
  resize: none;
}
.dr-field input:focus,
.dr-field textarea:focus { border-bottom-color: var(--color-accent); }
.dr-field textarea { min-height: 180px; }

.dr-form__counter {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta); text-transform: uppercase;
  color: var(--color-text-3); text-align: right; padding-top: 4px;
}

/* Honeypot — must be present and hidden */
.dr-form__hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.dr-btn {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: var(--ls-meta); text-transform: uppercase;
  background: var(--color-text); color: var(--color-bg);
  border: 0; padding: 14px 22px; cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.dr-btn:hover { background: var(--color-accent); }
.dr-btn:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }

.dr-form__submit { padding-top: var(--space-2); }

/* Inline status banner above the form (success / validation error). */
.dr-form__status {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta); text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
  border-left: 3px solid var(--color-accent);
  color: var(--color-text);
}
.dr-form__status--err { border-left-color: var(--color-text); color: var(--color-text); }

@media (max-width: 640px) {
  .dr-form__row { grid-template-columns: 1fr; gap: 0; }
  .dr-btn { width: 100%; }
}

.dr-contact-body {
  display: grid; grid-template-columns: 1fr 260px; gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.dr-contact-aside {
  border-left: var(--border-hair);
  padding-left: var(--space-4);
}
.dr-contact-aside__label { margin: 0 0 var(--space-2); }
.dr-contact-aside__links { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.dr-contact-aside__links li a {
  display: block; padding: var(--space-1) 0;
  color: var(--color-text); text-decoration: none;
  border-bottom: var(--border-hair); font-size: 16px;
}
.dr-contact-aside__note p {
  font-size: 13.5px; color: var(--color-text-3);
  line-height: 1.55; margin: 0;
}
@media (max-width: 820px) {
  .dr-contact-body { grid-template-columns: 1fr; gap: var(--space-4); }
  .dr-contact-aside {
    border-left: 0; border-top: var(--border-hair);
    padding-left: 0; padding-top: var(--space-3);
  }
}

/* ————————————————————————————————————————————————————————
   Step 8 — Single post + 404 components.
   Phase C §09 doesn't define `.dr-post-*` — derived per the
   build brief's "no new tokens" guidance from .dr-page-head
   (header), .dr-archive-item__meta (meta line), .dr-about-article
   (body typography), and .dr-pager (foot nav).
   ———————————————————————————————————————————————————————— */

/* Post header — single-column variant of .dr-page-head, tighter. */
.dr-post-head {
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hair);
  margin-bottom: var(--space-5);
}
.dr-post-head__meta {
  display: flex; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-nav); text-transform: uppercase;
  color: var(--color-text-3);
  margin-bottom: var(--space-1);
}
.dr-post-head__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: var(--fs-h1); line-height: var(--lh-tight);
  letter-spacing: var(--ls-title);
  margin: 0;
  text-wrap: balance;
}

/* Post body — long-form prose. Mirror .dr-about-article__prose scale. */
.dr-post-body {
  max-width: var(--measure-prose);
  margin-bottom: var(--space-6);
}
.dr-post-body p {
  font-size: 18px; line-height: 1.7;
  margin: 0 0 var(--space-2);
}
.dr-post-body h2 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--fs-h2); line-height: var(--lh-tight);
  letter-spacing: var(--ls-h-sm);
  margin: var(--space-5) 0 var(--space-2);
  text-wrap: balance;
}
.dr-post-body h3 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: var(--fs-h3); line-height: 1.28;
  letter-spacing: var(--ls-h-sm);
  margin: var(--space-4) 0 var(--space-2);
  text-wrap: balance;
}
.dr-post-body ul,
.dr-post-body ol {
  font-size: 18px; line-height: 1.7;
  padding-left: var(--space-4);
  margin: 0 0 var(--space-3);
}
.dr-post-body li { margin-bottom: var(--space-1); }
.dr-post-body blockquote {
  font-style: italic;
  border-left: 2px solid var(--color-rule-2);
  padding: var(--space-1) var(--space-3);
  margin: var(--space-3) 0;
  color: var(--color-text-2);
}
.dr-post-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.dr-post-body a:hover { color: var(--color-accent-hover); }

/* Legacy media — defang fixed-width attributes. */
.dr-post-body img,
.dr-post-body iframe,
.dr-post-body video,
.dr-post-body embed,
.dr-post-body object {
  max-width: 100%;
  height: auto;
}
.dr-post-body iframe { display: block; }
.dr-post-body figure {
  margin: var(--space-3) 0;
  max-width: 100%;
}
.dr-post-body figcaption {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta); text-transform: uppercase;
  color: var(--color-text-3);
  margin-top: var(--space-1);
}
/* Legacy table layouts — keep them in flow but cap width. */
.dr-post-body table {
  max-width: 100%;
  border-collapse: collapse;
}
/* Legacy <pre>/code blocks. */
.dr-post-body pre {
  overflow-x: auto;
  font-family: var(--font-mono); font-size: 14px;
  line-height: 1.5;
  padding: var(--space-2) var(--space-3);
  background: var(--color-rule-1);
  margin: var(--space-3) 0;
}
.dr-post-body code {
  font-family: var(--font-mono); font-size: 0.92em;
}

/* Post footer — tags row + prev/next nav. */
.dr-post-foot {
  border-top: var(--border-hair);
  padding-top: var(--space-4);
  margin-top: var(--space-6);
}
.dr-post-foot__tags {
  font-family: var(--font-mono); font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta); text-transform: uppercase;
  color: var(--color-text-3);
  margin-bottom: var(--space-3);
}
.dr-post-foot__tags a { color: var(--color-text-2); text-decoration: none; }
.dr-post-foot__tags a:hover { color: var(--color-accent); }
.dr-post-foot__nav {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: var(--ls-nav); text-transform: uppercase;
}
.dr-post-foot__prev,
.dr-post-foot__next {
  color: var(--color-text-2);
  text-decoration: none;
}
.dr-post-foot__prev:hover,
.dr-post-foot__next:hover { color: var(--color-accent); }
/* If only "next" exists (oldest post), push it to the right. */
.dr-post-foot__nav .dr-post-foot__next:only-child { margin-left: auto; }

/* 404 body paragraph — a single inline paragraph, not the long-form
   .dr-post-body wrapper. Styled to match .dr-archive-intro. */
.dr-404__body {
  font-size: 17px; line-height: 1.65;
  color: var(--color-text-2);
  margin: 0;
  max-width: 58ch;
}