/*
Theme Name: DFA Broadsheet
Theme URI: https://digitalfamilyadvisor.com/
Author: Digital Family Advisor
Description: A modern broadsheet theme for The Digital Family Advisor. Typography-led editorial design built to read well with or without photography, tuned for long-form consumer-technology journalism.
Version: 1.0.3
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dfa-broadsheet
Tags: editorial, magazine, news, typography, blog, one-column, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================================
   THE DIGITAL FAMILY ADVISOR — BROADSHEET
   -------------------------------------------------------------------------
   Design notes for whoever maintains this next:

   The archive this site was rebuilt from is text, not photography. So the
   design never leans on images to create hierarchy. Rank is expressed with
   type size, optical size, rule weight, and white space — the way a printed
   broadsheet does it. Every layout below degrades gracefully to zero images.

   Deliberately absent: card drop-shadows, rounded corners, gradient hero
   sections, icon fonts, and centred button pairs. Those are the visual
   signature of a template. Hairlines and a real type scale are the signature
   of a newspaper.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------- */

:root {
  /* --- Ink & paper ------------------------------------------------------ */
  --dfa-ink:        #12151a;   /* headline / body black, very slightly cool */
  --dfa-ink-2:      #3d434d;   /* secondary prose, decks                    */
  --dfa-ink-3:      #6c727c;   /* metadata, captions, timestamps            */
  --dfa-ink-4:      #949aa4;   /* disabled, ordinal numerals                */

  --dfa-paper:      #fbf9f5;   /* warm newsprint                            */
  --dfa-paper-2:    #f4f1e9;   /* banded sections                           */
  --dfa-paper-3:    #ece8dd;   /* inset panels, table stripes               */

  --dfa-rule:       #ddd8cc;   /* hairline                                  */
  --dfa-rule-2:     #c6bfae;   /* emphasised hairline                       */
  --dfa-rule-3:     #12151a;   /* section rules (heavy)                     */

  /* --- Accent ----------------------------------------------------------- */
  /* One colour only. Oxblood reads as authority in print and never looks
     like a default framework blue. */
  --dfa-accent:     #8e2c21;
  --dfa-accent-2:   #6e211a;
  --dfa-accent-3:   #f0e3e0;   /* accent tint for rare fills                */

  /* --- Type ------------------------------------------------------------- */
  --dfa-serif: "Newsreader", "Charter", "Bitstream Charter", "Iowan Old Style",
               "Source Serif 4", Georgia, "Times New Roman", serif;
  --dfa-sans:  "Archivo", "Helvetica Neue", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, sans-serif;
  --dfa-mono:  ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  /* Fluid display scale. Ratio ~1.28 at the small end, ~1.33 at the large,
     so headlines separate more sharply on desktop than on phones. */
  --dfa-t-hero:  clamp(2.6rem, 1.35rem + 4.3vw, 5.25rem);
  --dfa-t-lead:  clamp(2.0rem, 1.15rem + 2.9vw, 3.5rem);
  --dfa-t-1:     clamp(1.6rem, 1.15rem + 1.6vw, 2.4rem);
  --dfa-t-2:     clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem);
  --dfa-t-3:     clamp(1.15rem, 1.03rem + 0.45vw, 1.4rem);
  --dfa-t-body:  1.1875rem;   /* 19px — long-form measure                   */
  --dfa-t-small: 0.9375rem;
  --dfa-t-meta:  0.75rem;
  --dfa-t-eyebrow: 0.6875rem;

  /* --- Space ------------------------------------------------------------ */
  --dfa-s-1: 0.25rem;
  --dfa-s-2: 0.5rem;
  --dfa-s-3: 0.75rem;
  --dfa-s-4: 1rem;
  --dfa-s-5: 1.5rem;
  --dfa-s-6: 2rem;
  --dfa-s-7: 3rem;
  --dfa-s-8: 4rem;
  --dfa-s-9: 6rem;
  --dfa-s-10: 8rem;

  /* --- Measure & frame -------------------------------------------------- */
  --dfa-shell:    1320px;  /* outer page frame                              */
  --dfa-measure:  40rem;   /* ~68 characters at 19px — the reading column   */
  --dfa-measure-wide: 52rem;
  --dfa-gutter:   clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --dfa-col-gap:  clamp(1.5rem, 0.8rem + 2vw, 2.75rem);
}

/* Dark mode. Restrained: the paper goes to a deep warm charcoal rather than
   pure black so the oxblood accent still has somewhere to sit. */
@media (prefers-color-scheme: dark) {
  :root:not([data-dfa-theme="light"]) {
    --dfa-ink:      #eceae5;
    --dfa-ink-2:    #bdbab3;
    --dfa-ink-3:    #918d85;
    --dfa-ink-4:    #6e6a63;
    --dfa-paper:    #14151a;
    --dfa-paper-2:  #1b1d23;
    --dfa-paper-3:  #23252c;
    --dfa-rule:     #32343c;
    --dfa-rule-2:   #464951;
    --dfa-rule-3:   #eceae5;
    --dfa-accent:   #d4756a;
    --dfa-accent-2: #e69185;
    --dfa-accent-3: #2c1f1d;
  }
}

/* -------------------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--dfa-paper);
  color: var(--dfa-ink);
  font-family: var(--dfa-serif);
  font-size: var(--dfa-t-body);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  hanging-punctuation: first last;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--dfa-serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.017em;
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--dfa-rule-2);
  transition: color 140ms ease, text-decoration-color 140ms ease;
}
a:hover { color: var(--dfa-accent); text-decoration-color: currentColor; }
a:focus-visible {
  outline: 2px solid var(--dfa-accent);
  outline-offset: 3px;
  border-radius: 1px;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--dfa-rule);
  margin: var(--dfa-s-7) 0;
}

::selection { background: var(--dfa-accent); color: #fff; }

/* -------------------------------------------------------------------------
   3. UTILITIES
   ---------------------------------------------------------------------- */

.dfa-shell {
  max-width: var(--dfa-shell);
  margin-inline: auto;
  padding-inline: var(--dfa-gutter);
}

.dfa-measure { max-width: var(--dfa-measure); }

.screen-reader-text,
.dfa-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: fixed !important;
  top: 0.75rem; left: 0.75rem;
  z-index: 999;
  width: auto; height: auto;
  clip: auto; clip-path: none;
  padding: 0.7rem 1.1rem;
  background: var(--dfa-ink);
  color: var(--dfa-paper);
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-meta);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* The eyebrow — small caps label above a headline or section. Its 24px
   accent underline is the single most repeated motif on the site. */
.dfa-eyebrow {
  display: inline-block;
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-eyebrow);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dfa-accent);
  text-decoration: none;
}
.dfa-eyebrow--ruled { padding-bottom: 0.5rem; position: relative; }
.dfa-eyebrow--ruled::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 24px; height: 2px;
  background: var(--dfa-accent);
}
a.dfa-eyebrow:hover { color: var(--dfa-accent-2); }

.dfa-meta {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-meta);
  font-weight: 400;
  letter-spacing: 0.055em;
  color: var(--dfa-ink-3);
  line-height: 1.5;
  font-variant-numeric: lining-nums tabular-nums;
}
.dfa-meta--caps { text-transform: uppercase; letter-spacing: 0.12em; }

.dfa-deck {
  font-size: var(--dfa-t-3);
  line-height: 1.44;
  color: var(--dfa-ink-2);
  font-weight: 300;
  letter-spacing: -0.004em;
}

/* Heavy section rule: the horizontal divider that opens each block. */
.dfa-section-rule {
  display: flex;
  align-items: baseline;
  gap: var(--dfa-s-4);
  border-top: 2px solid var(--dfa-rule-3);
  padding-top: var(--dfa-s-3);
  margin-bottom: var(--dfa-s-6);
}
.dfa-section-rule h2 {
  font-size: var(--dfa-t-2);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.dfa-section-rule .dfa-section-rule__more {
  margin-left: auto;
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-meta);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dfa-ink-3);
  text-decoration: none;
  white-space: nowrap;
}
.dfa-section-rule .dfa-section-rule__more:hover { color: var(--dfa-accent); }

/* -------------------------------------------------------------------------
   4. MASTHEAD
   ---------------------------------------------------------------------- */

.dfa-dateline {
  border-bottom: 1px solid var(--dfa-rule);
  background: var(--dfa-paper);
}
.dfa-dateline__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dfa-s-4);
  min-height: 34px;
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dfa-ink-3);
}
.dfa-dateline__slogan { font-weight: 500; }
.dfa-dateline__date { font-variant-numeric: lining-nums; }
@media (max-width: 700px) {
  .dfa-dateline__slogan { display: none; }
  .dfa-dateline__inner { justify-content: center; }
}

.dfa-masthead {
  text-align: center;
  padding: clamp(1.5rem, 0.8rem + 2.2vw, 2.75rem) 0 0;
}
.dfa-masthead__wordmark {
  display: inline-block;
  text-decoration: none;
  color: var(--dfa-ink);
  line-height: 0.94;
}
.dfa-masthead__the {
  display: block;
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;         /* optical centring for the tracked caps */
  text-transform: uppercase;
  color: var(--dfa-ink-3);
  margin-bottom: 0.6rem;
}
.dfa-masthead__name {
  display: block;
  font-family: var(--dfa-serif);
  font-weight: 600;
  font-size: clamp(2.1rem, 0.9rem + 4.2vw, 4.6rem);
  letter-spacing: -0.028em;
  margin: 0;
}
.dfa-masthead__rule {
  margin: clamp(1rem, 0.7rem + 1vw, 1.6rem) 0 0;
  border: 0;
  border-top: 3px solid var(--dfa-rule-3);
  border-bottom: 1px solid var(--dfa-rule-3);
  height: 4px;
}
.dfa-masthead__tagline {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dfa-ink-3);
  padding: 0.55rem 0 0;
}

/* Compact masthead once the reader scrolls (set by assets/js/site.js) */
.dfa-sticky {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--dfa-paper) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--dfa-rule);
}

/* -------------------------------------------------------------------------
   5. NAVIGATION
   ---------------------------------------------------------------------- */

.dfa-nav { border-bottom: 1px solid var(--dfa-rule); }
.dfa-nav__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 0.3rem + 2vw, 2.5rem);
  min-height: 48px;
  position: relative;
}
.dfa-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.3rem + 2vw, 2.5rem);
  list-style: none;
  margin: 0; padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.dfa-nav a {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dfa-ink);
  padding: 0.85rem 0;
  display: inline-block;
  position: relative;
}
.dfa-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.45rem;
  height: 2px;
  background: var(--dfa-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.dfa-nav a:hover::after,
.dfa-nav .current-menu-item > a::after,
.dfa-nav .current_page_item > a::after { transform: scaleX(1); }
.dfa-nav .current-menu-item > a { color: var(--dfa-accent); }

.dfa-nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--dfa-rule-2);
  color: var(--dfa-ink);
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}
.dfa-nav__search {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 0.4rem;
  cursor: pointer;
  color: var(--dfa-ink-3);
}
.dfa-nav__search:hover { color: var(--dfa-accent); }

@media (max-width: 860px) {
  .dfa-nav__toggle { display: inline-block; }
  .dfa-nav__inner { justify-content: space-between; }
  .dfa-nav ul {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--dfa-paper);
    border-bottom: 1px solid var(--dfa-rule);
    padding: var(--dfa-s-2) 0 var(--dfa-s-4);
    z-index: 70;
  }
  .dfa-nav[data-open="true"] ul { display: flex; }
  .dfa-nav ul li { border-top: 1px solid var(--dfa-rule); }
  .dfa-nav ul a { padding: 0.9rem var(--dfa-gutter); display: block; }
  .dfa-nav a::after { display: none; }
}

/* -------------------------------------------------------------------------
   6. FRONT PAGE
   ---------------------------------------------------------------------- */

.dfa-front { padding-block: clamp(2rem, 1.2rem + 2.4vw, 3.5rem) var(--dfa-s-9); }

/* --- 6a. The fold: lead story + two rails ----------------------------- */
.dfa-fold {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dfa-col-gap);
  padding-bottom: var(--dfa-s-7);
  border-bottom: 2px solid var(--dfa-rule-3);
  margin-bottom: var(--dfa-s-7);
}
@media (min-width: 900px) {
  .dfa-fold {
    grid-template-columns: minmax(0, 7.5fr) minmax(0, 4.5fr);
  }
  .dfa-fold__rail {
    border-left: 1px solid var(--dfa-rule);
    padding-left: var(--dfa-col-gap);
  }
}

.dfa-lead__eyebrow { margin-bottom: var(--dfa-s-4); }
.dfa-lead__title {
  font-size: var(--dfa-t-hero);
  line-height: 0.99;
  letter-spacing: -0.031em;
  font-weight: 600;
  margin-bottom: var(--dfa-s-5);
}
.dfa-lead__title a { text-decoration: none; }
.dfa-lead__title a:hover { color: var(--dfa-accent); }
.dfa-lead__deck {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.42;
  font-weight: 300;
  color: var(--dfa-ink-2);
  max-width: 34rem;
  margin-bottom: var(--dfa-s-5);
}
.dfa-lead__figure { margin-bottom: var(--dfa-s-5); }
.dfa-lead__figure img { width: 100%; }

/* The rail: numbered secondary stories, no images, hairline separated. */
.dfa-rail__list { list-style: none; margin: 0; padding: 0; }
.dfa-rail__item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--dfa-s-3);
  padding: var(--dfa-s-5) 0;
  border-top: 1px solid var(--dfa-rule);
}
.dfa-rail__item:first-child { border-top: 0; padding-top: 0; }
.dfa-rail__num {
  font-family: var(--dfa-serif);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--dfa-ink-4);
  font-variant-numeric: lining-nums;
  padding-top: 0.12em;
}
.dfa-rail__title {
  font-size: var(--dfa-t-3);
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: var(--dfa-s-2);
}
.dfa-rail__title a { text-decoration: none; }
.dfa-rail__title a:hover { color: var(--dfa-accent); }

/* --- 6b. Story grid ----------------------------------------------------
   Explicit column counts rather than auto-fill: the column rules have to be
   suppressed on the last item of each row, and that needs a known count. */
.dfa-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-bottom: var(--dfa-s-8);
}
@media (min-width: 620px)  { .dfa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .dfa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .dfa-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.dfa-story {
  padding: var(--dfa-s-6) var(--dfa-col-gap) var(--dfa-s-6) 0;
  border-right: 1px solid var(--dfa-rule);
  border-top: 1px solid var(--dfa-rule);
}
/* No rule against the outer edge of the grid. */
.dfa-story:last-child { border-right: 0; }
@media (min-width: 620px)  and (max-width: 899px)  { .dfa-grid > .dfa-story:nth-child(2n) { border-right: 0; padding-right: 0; } }
@media (min-width: 900px)  and (max-width: 1179px) { .dfa-grid > .dfa-story:nth-child(3n) { border-right: 0; padding-right: 0; } }
@media (min-width: 1180px)                         { .dfa-grid > .dfa-story:nth-child(4n) { border-right: 0; padding-right: 0; } }
.dfa-story__eyebrow { margin-bottom: var(--dfa-s-3); }
.dfa-story__title {
  font-size: var(--dfa-t-2);
  line-height: 1.14;
  margin-bottom: var(--dfa-s-3);
  font-weight: 600;
}
.dfa-story__title a { text-decoration: none; }
.dfa-story__title a:hover { color: var(--dfa-accent); }
.dfa-story__excerpt {
  font-size: var(--dfa-t-small);
  line-height: 1.55;
  color: var(--dfa-ink-2);
  margin-bottom: var(--dfa-s-3);
}
.dfa-story__figure { margin-bottom: var(--dfa-s-4); }
.dfa-story__figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

@media (max-width: 620px) {
  .dfa-story {
    border-right: 0;
    padding-right: 0;
    margin-right: 0;
  }
}

/* --- 6c. Section blocks -----------------------------------------------
   Section fronts butt directly against one another and alternate a paper
   tint, so the page reads as a sequence of sections rather than a stack of
   floating panels. No outer margins: the tint must run edge to edge or it
   looks like a mistake. */
.dfa-section-block {
  padding-block: var(--dfa-s-8);
}
.dfa-section-block .dfa-grid { margin-bottom: 0; }

.dfa-section-block--tint {
  background: var(--dfa-paper-2);
  border-top: 1px solid var(--dfa-rule);
  border-bottom: 1px solid var(--dfa-rule);
  /* Break the tint out of the page gutter to the full viewport width. */
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--dfa-gutter), calc(50vw - var(--dfa-shell) / 2 + var(--dfa-gutter)));
}

/* --- 6d. Editor's note / standfirst panel ------------------------------ */
.dfa-note {
  border-left: 3px solid var(--dfa-accent);
  padding: var(--dfa-s-2) 0 var(--dfa-s-2) var(--dfa-s-5);
  max-width: var(--dfa-measure);
}
.dfa-note__label {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dfa-accent);
  display: block;
  margin-bottom: var(--dfa-s-3);
}
.dfa-note p { font-size: var(--dfa-t-3); line-height: 1.5; color: var(--dfa-ink-2); }

/* -------------------------------------------------------------------------
   7. ARCHIVE / RIVER
   ---------------------------------------------------------------------- */

.dfa-page-head {
  padding-block: clamp(2rem, 1.2rem + 2.6vw, 4rem) var(--dfa-s-6);
  border-bottom: 2px solid var(--dfa-rule-3);
  margin-bottom: var(--dfa-s-7);
}
.dfa-page-head__title {
  font-size: var(--dfa-t-lead);
  letter-spacing: -0.026em;
  margin-bottom: var(--dfa-s-4);
}
.dfa-page-head__desc { max-width: var(--dfa-measure); color: var(--dfa-ink-2); font-weight: 300; }
.dfa-page-head__count {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dfa-ink-3);
  margin-top: var(--dfa-s-4);
  display: block;
  font-variant-numeric: lining-nums;
}

.dfa-river { list-style: none; margin: 0 0 var(--dfa-s-8); padding: 0; }
.dfa-river__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dfa-s-4);
  padding-block: var(--dfa-s-6);
  border-bottom: 1px solid var(--dfa-rule);
}
.dfa-river__item:first-child { padding-top: 0; }
@media (min-width: 780px) {
  .dfa-river__item {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: var(--dfa-col-gap);
  }
  .dfa-river__item--media { grid-template-columns: 8.5rem minmax(0, 1fr) 12rem; }
}
.dfa-river__date {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dfa-ink-3);
  font-variant-numeric: lining-nums tabular-nums;
  padding-top: 0.35rem;
}
.dfa-river__title {
  font-size: var(--dfa-t-1);
  line-height: 1.15;
  margin-bottom: var(--dfa-s-3);
}
.dfa-river__title a { text-decoration: none; }
.dfa-river__title a:hover { color: var(--dfa-accent); }
.dfa-river__excerpt {
  color: var(--dfa-ink-2);
  font-size: var(--dfa-t-small);
  line-height: 1.6;
  max-width: var(--dfa-measure);
  margin-bottom: var(--dfa-s-3);
}
.dfa-river__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Pagination */
.dfa-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--dfa-s-2);
  padding-block: var(--dfa-s-7);
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-meta);
  letter-spacing: 0.08em;
  font-variant-numeric: lining-nums;
}
.dfa-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.6rem;
  text-decoration: none;
  border: 1px solid transparent;
  color: var(--dfa-ink-2);
}
.dfa-pagination .page-numbers:hover { border-color: var(--dfa-rule-2); color: var(--dfa-ink); }
.dfa-pagination .page-numbers.current {
  border-color: var(--dfa-rule-3);
  color: var(--dfa-ink);
  font-weight: 600;
}
.dfa-pagination .page-numbers.dots { border: 0; }

/* -------------------------------------------------------------------------
   8. SINGLE ARTICLE
   ---------------------------------------------------------------------- */

.dfa-article { padding-block: clamp(2rem, 1.2rem + 2.4vw, 3.5rem) var(--dfa-s-9); }

/* The head shares the reading column's exact left edge. Misaligning the
   headline against the body text is the single fastest way to make an
   article page look assembled rather than designed. */
.dfa-article__head {
  max-width: var(--dfa-measure);
  margin-inline: auto;
  text-align: left;
  margin-bottom: var(--dfa-s-7);
}
.dfa-article__eyebrow { margin-bottom: var(--dfa-s-4); }
.dfa-article__title {
  font-size: var(--dfa-t-lead);
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin-bottom: var(--dfa-s-5);
}
.dfa-article__deck {
  font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.45rem);
  line-height: 1.45;
  font-weight: 300;
  color: var(--dfa-ink-2);
  margin-bottom: var(--dfa-s-6);
  max-width: var(--dfa-measure);
}

/* Byline block */
.dfa-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dfa-s-4);
  padding-block: var(--dfa-s-4);
  border-top: 1px solid var(--dfa-rule);
  border-bottom: 1px solid var(--dfa-rule);
}
.dfa-byline__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--dfa-paper-3);
  flex: none;
}
.dfa-byline__who { line-height: 1.35; }
.dfa-byline__names {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-small);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.dfa-byline__names a { text-decoration: none; }
.dfa-byline__names a:hover { color: var(--dfa-accent); }
.dfa-byline__when {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-meta);
  color: var(--dfa-ink-3);
  letter-spacing: 0.06em;
  font-variant-numeric: lining-nums;
}
.dfa-byline__share {
  margin-left: auto;
  display: flex;
  gap: var(--dfa-s-3);
  align-items: center;
}
.dfa-byline__share a {
  color: var(--dfa-ink-3);
  display: inline-flex;
  padding: 0.3rem;
}
.dfa-byline__share a:hover { color: var(--dfa-accent); }

/* Hero image */
.dfa-article__hero { margin-bottom: var(--dfa-s-7); }
.dfa-article__hero img { width: 100%; }
.dfa-caption {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-meta);
  line-height: 1.5;
  color: var(--dfa-ink-3);
  padding-top: var(--dfa-s-3);
  border-top: 1px solid var(--dfa-rule);
  margin-top: var(--dfa-s-3);
  max-width: var(--dfa-measure);
}

/* The body of the piece */
.dfa-prose {
  max-width: var(--dfa-measure);
  margin-inline: auto;
  font-size: var(--dfa-t-body);
  line-height: 1.68;
}
.dfa-prose > * + * { margin-top: 1.2em; }

.dfa-prose h2 {
  font-size: var(--dfa-t-1);
  margin-top: 2.1em;
  margin-bottom: 0.55em;
  letter-spacing: -0.019em;
}
.dfa-prose h3 {
  font-size: var(--dfa-t-3);
  margin-top: 1.9em;
  margin-bottom: 0.45em;
  font-weight: 600;
}
.dfa-prose h4 {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-small);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-top: 1.9em;
  margin-bottom: 0.4em;
  color: var(--dfa-ink-2);
}

/* Drop cap on the opening paragraph. Suppressed on small screens where a
   three-line cap eats the measure. */
@media (min-width: 640px) {
  .dfa-prose > p.dfa-prose__lede::first-letter {
    float: left;
    font-family: var(--dfa-serif);
    font-size: 3.62em;
    line-height: 0.82;
    font-weight: 600;
    padding: 0.06em 0.09em 0 0;
    margin-top: 0.04em;
    color: var(--dfa-ink);
  }
}
.dfa-prose > p.dfa-prose__lede { text-indent: 0; }

.dfa-prose a { text-decoration-color: var(--dfa-accent); }
.dfa-prose strong { font-weight: 600; }

.dfa-prose blockquote {
  margin: 2em 0;
  padding-left: var(--dfa-s-5);
  border-left: 3px solid var(--dfa-accent);
  font-size: var(--dfa-t-3);
  font-style: italic;
  line-height: 1.45;
  color: var(--dfa-ink);
}
.dfa-prose blockquote cite {
  display: block;
  margin-top: var(--dfa-s-3);
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-meta);
  font-style: normal;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dfa-ink-3);
}

/* Pull quote — breaks the measure, no quotation glyph graphic.
   Resets the blockquote rules explicitly, because a pull quote is usually
   authored as <blockquote class="pull"> and would otherwise inherit them. */
.dfa-prose .dfa-pullquote,
.dfa-prose blockquote.dfa-pullquote,
.dfa-prose .pull,
.dfa-prose blockquote.pull {
  margin: 2.4em 0;
  padding: var(--dfa-s-5) 0;
  border-left: 0;
  border-top: 2px solid var(--dfa-rule-3);
  border-bottom: 1px solid var(--dfa-rule);
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
  line-height: 1.24;
  letter-spacing: -0.018em;
  font-weight: 400;
  font-style: normal;
  color: var(--dfa-ink);
}

.dfa-prose ul, .dfa-prose ol { padding-left: 1.35em; margin-block: 1.2em; }
.dfa-prose li { margin-bottom: 0.5em; }
.dfa-prose li::marker { color: var(--dfa-ink-4); }

.dfa-prose figure { margin-block: 2em; }
.dfa-prose figcaption {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-meta);
  color: var(--dfa-ink-3);
  padding-top: var(--dfa-s-2);
  line-height: 1.5;
}

.dfa-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--dfa-t-small);
  margin-block: 2em;
  font-variant-numeric: lining-nums tabular-nums;
}
.dfa-prose th {
  text-align: left;
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-meta);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.6rem 0.75rem;
  border-bottom: 2px solid var(--dfa-rule-3);
}
.dfa-prose td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--dfa-rule); }
.dfa-prose tbody tr:nth-child(even) { background: var(--dfa-paper-2); }

.dfa-prose code {
  font-family: var(--dfa-mono);
  font-size: 0.88em;
  background: var(--dfa-paper-3);
  padding: 0.12em 0.34em;
}
.dfa-prose pre {
  background: var(--dfa-paper-3);
  padding: var(--dfa-s-5);
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.5;
}
.dfa-prose pre code { background: none; padding: 0; }

/* Wide elements can break the reading column */
.dfa-prose .alignwide, .dfa-prose .alignfull {
  max-width: min(var(--dfa-measure-wide), 100%);
  margin-inline: auto;
}
@media (min-width: 1100px) {
  .dfa-prose .alignwide { max-width: 56rem; margin-inline: -8rem; }
}

/* Article footer: tags, author cards, next-up */
.dfa-article__foot {
  max-width: var(--dfa-measure);
  margin: var(--dfa-s-8) auto 0;
}
.dfa-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dfa-s-2);
  align-items: baseline;
  padding-top: var(--dfa-s-5);
  border-top: 2px solid var(--dfa-rule-3);
}
.dfa-tags__label {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-eyebrow);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dfa-ink-3);
  margin-right: var(--dfa-s-2);
}
.dfa-tags a {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-meta);
  letter-spacing: 0.05em;
  text-decoration: none;
  border: 1px solid var(--dfa-rule-2);
  padding: 0.3rem 0.65rem;
  color: var(--dfa-ink-2);
}
.dfa-tags a:hover { border-color: var(--dfa-accent); color: var(--dfa-accent); }

.dfa-authorcard {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--dfa-s-5);
  padding-block: var(--dfa-s-6);
  border-top: 1px solid var(--dfa-rule);
  margin-top: var(--dfa-s-6);
}
.dfa-authorcard img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.dfa-authorcard__name {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: var(--dfa-s-2);
}
.dfa-authorcard__bio { font-size: var(--dfa-t-small); color: var(--dfa-ink-2); line-height: 1.6; }

.dfa-nextup {
  display: grid;
  gap: var(--dfa-col-gap);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--dfa-s-8);
  padding-top: var(--dfa-s-5);
  border-top: 2px solid var(--dfa-rule-3);
}
@media (min-width: 700px) { .dfa-nextup { grid-template-columns: 1fr 1fr; } }
.dfa-nextup__label {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-eyebrow);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dfa-ink-3);
  display: block;
  margin-bottom: var(--dfa-s-3);
}
.dfa-nextup__title { font-size: var(--dfa-t-3); line-height: 1.2; }
.dfa-nextup__title a { text-decoration: none; }
.dfa-nextup__title a:hover { color: var(--dfa-accent); }
.dfa-nextup > div + div { }
@media (min-width: 700px) {
  .dfa-nextup > div:last-child:not(:only-child) {
    text-align: right;
    border-left: 1px solid var(--dfa-rule);
    padding-left: var(--dfa-col-gap);
  }
}

/* Reading progress hairline */
.dfa-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--dfa-accent);
  z-index: 100;
  transition: width 80ms linear;
}

/* -------------------------------------------------------------------------
   9. PAGES
   ---------------------------------------------------------------------- */

.dfa-page { padding-block: clamp(2rem, 1.2rem + 2.4vw, 3.5rem) var(--dfa-s-9); }
.dfa-page__head {
  max-width: var(--dfa-measure-wide);
  margin: 0 auto var(--dfa-s-7);
  padding-bottom: var(--dfa-s-5);
  border-bottom: 2px solid var(--dfa-rule-3);
}
.dfa-page__title { font-size: var(--dfa-t-lead); letter-spacing: -0.026em; }

/* Staff listing used by the About page */
.dfa-staff { display: grid; gap: 0; margin-top: var(--dfa-s-6); }
.dfa-staff__member {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dfa-s-3);
  padding-block: var(--dfa-s-6);
  border-top: 1px solid var(--dfa-rule);
}
@media (min-width: 760px) {
  .dfa-staff__member { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--dfa-col-gap); }
}
.dfa-staff__name { font-size: var(--dfa-t-2); line-height: 1.15; }
.dfa-staff__role {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dfa-accent);
  margin-top: var(--dfa-s-2);
}
.dfa-staff__bio { color: var(--dfa-ink-2); font-size: var(--dfa-t-small); line-height: 1.65; }

/* -------------------------------------------------------------------------
   10. SEARCH & 404
   ---------------------------------------------------------------------- */

.dfa-searchform { display: flex; gap: 0; max-width: 30rem; }
.dfa-searchform input[type="search"] {
  flex: 1;
  font-family: var(--dfa-serif);
  font-size: var(--dfa-t-small);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--dfa-rule-2);
  border-right: 0;
  background: transparent;
  color: var(--dfa-ink);
}
.dfa-searchform input[type="search"]:focus {
  outline: 2px solid var(--dfa-accent);
  outline-offset: -2px;
}
.dfa-searchform button {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.75rem 1.2rem;
  border: 1px solid var(--dfa-ink);
  background: var(--dfa-ink);
  color: var(--dfa-paper);
  cursor: pointer;
}
.dfa-searchform button:hover { background: var(--dfa-accent); border-color: var(--dfa-accent); }

.dfa-404 {
  padding-block: var(--dfa-s-10);
  max-width: var(--dfa-measure);
}
.dfa-404__code {
  font-family: var(--dfa-serif);
  font-size: clamp(4rem, 2rem + 8vw, 9rem);
  line-height: 0.85;
  font-variant-numeric: lining-nums;
  color: var(--dfa-rule-2);
  margin-bottom: var(--dfa-s-5);
}

/* -------------------------------------------------------------------------
   11. FOOTER
   ---------------------------------------------------------------------- */

.dfa-foot {
  border-top: 3px solid var(--dfa-rule-3);
  background: var(--dfa-paper-2);
  padding-block: var(--dfa-s-8) var(--dfa-s-6);
}
.dfa-foot__top {
  display: grid;
  gap: var(--dfa-s-7);
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: var(--dfa-s-7);
  border-bottom: 1px solid var(--dfa-rule);
}
@media (min-width: 820px) {
  .dfa-foot__top { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
}
.dfa-foot__brand-name {
  font-family: var(--dfa-serif);
  font-size: var(--dfa-t-2);
  letter-spacing: -0.02em;
  margin-bottom: var(--dfa-s-3);
}
.dfa-foot__brand-text {
  font-size: var(--dfa-t-small);
  color: var(--dfa-ink-2);
  line-height: 1.6;
  max-width: 26rem;
}
.dfa-foot__col h3 {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dfa-ink-3);
  margin-bottom: var(--dfa-s-4);
}
.dfa-foot__col ul { list-style: none; margin: 0; padding: 0; }
.dfa-foot__col li { margin-bottom: var(--dfa-s-3); }
.dfa-foot__col a {
  font-size: var(--dfa-t-small);
  text-decoration: none;
  color: var(--dfa-ink-2);
}
.dfa-foot__col a:hover { color: var(--dfa-accent); }

.dfa-foot__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dfa-s-4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--dfa-s-5);
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-meta);
  color: var(--dfa-ink-3);
  letter-spacing: 0.05em;
}
.dfa-foot__bottom a { text-decoration: none; }

/* -------------------------------------------------------------------------
   12. COMMENTS
   ---------------------------------------------------------------------- */

.dfa-comments { max-width: var(--dfa-measure); margin: var(--dfa-s-8) auto 0; }
.dfa-comments__title {
  font-size: var(--dfa-t-2);
  padding-bottom: var(--dfa-s-3);
  border-bottom: 2px solid var(--dfa-rule-3);
  margin-bottom: var(--dfa-s-6);
}
.dfa-comments .comment-list { list-style: none; margin: 0; padding: 0; }
.dfa-comments .comment-list li { padding-block: var(--dfa-s-5); border-bottom: 1px solid var(--dfa-rule); }
.dfa-comments .comment-list .children { list-style: none; padding-left: var(--dfa-s-6); border-left: 1px solid var(--dfa-rule); margin-top: var(--dfa-s-5); }
.dfa-comments .comment-author { font-family: var(--dfa-sans); font-size: var(--dfa-t-small); font-weight: 600; }
.dfa-comments .comment-metadata { font-family: var(--dfa-sans); font-size: var(--dfa-t-meta); color: var(--dfa-ink-3); margin-bottom: var(--dfa-s-3); }
.dfa-comments textarea,
.dfa-comments input[type="text"],
.dfa-comments input[type="email"],
.dfa-comments input[type="url"] {
  width: 100%;
  font-family: var(--dfa-serif);
  font-size: var(--dfa-t-small);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--dfa-rule-2);
  background: transparent;
  color: var(--dfa-ink);
  margin-bottom: var(--dfa-s-4);
}
.dfa-comments .submit {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--dfa-ink);
  background: var(--dfa-ink);
  color: var(--dfa-paper);
  cursor: pointer;
}
.dfa-comments .submit:hover { background: var(--dfa-accent); border-color: var(--dfa-accent); }

/* -------------------------------------------------------------------------
   13. WORDPRESS CORE CLASSES
   ---------------------------------------------------------------------- */

.alignleft  { float: left;  margin: 0.4em 1.6em 1.2em 0; }
.alignright { float: right; margin: 0.4em 0 1.2em 1.6em; }
.aligncenter { margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption {
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-meta);
  color: var(--dfa-ink-3);
  padding-top: var(--dfa-s-2);
  line-height: 1.5;
}
.sticky .dfa-river__title::before {
  content: "Pinned";
  display: block;
  font-family: var(--dfa-sans);
  font-size: var(--dfa-t-eyebrow);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dfa-accent);
  margin-bottom: var(--dfa-s-2);
}
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--dfa-s-4); margin-block: 2em; }

/* -------------------------------------------------------------------------
   14. PRINT
   ---------------------------------------------------------------------- */

@media print {
  :root {
    --dfa-paper: #fff; --dfa-paper-2: #fff; --dfa-paper-3: #fff;
    --dfa-ink: #000; --dfa-ink-2: #222; --dfa-ink-3: #555;
    --dfa-rule: #bbb; --dfa-rule-2: #999; --dfa-rule-3: #000;
    --dfa-accent: #000;
  }
  .dfa-nav, .dfa-dateline, .dfa-foot, .dfa-byline__share,
  .dfa-nextup, .dfa-comments, .dfa-progress, .dfa-nav__toggle { display: none !important; }
  body { font-size: 11pt; line-height: 1.45; }
  .dfa-prose { max-width: none; }
  .dfa-prose a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; word-break: break-all; }
  .dfa-article__title { font-size: 26pt; }
}