/*
 * DFW Veterans Chamber — North Texas Field Journal
 * Shared production system: editorial grid, brass rules, paper/navy rhythm.
 */

:root {
  --color-navy: #0c1b2e;
  --color-navy-2: #102540;
  --color-navy-3: #081421;
  --color-gold: #d4af37;
  --color-gold-light: #e8c84a;
  --color-gold-ink: #7f6921;
  --color-gold-ink-lg: #a1852a;
  --color-bg: #fafaf8;
  --color-bg-warm: #f2ede6;
  --color-text: #0c1b2e;
  --color-text-light: #ede8e0;
  --color-muted: #4e5c6c;
  --color-rule: rgba(12, 27, 46, 0.12);
  --color-rule-gold: rgba(212, 175, 55, 0.30);
  --page-gutter: clamp(1.25rem, 4vw, 7rem);
  --content-max: 90rem;
  --text-max: 44rem;
  --sec-tight: clamp(3.5rem, 8vh, 6rem);
  --sec-std: clamp(5.5rem, 12vh, 9rem);
  --sec-generous: clamp(7rem, 17vh, 12rem);
  --shadow-paper: 0 1.5rem 4rem rgba(8, 20, 33, 0.12);
}

html { scroll-behavior: smooth; }

body {
  --dfw-header-offset: 44px;
  margin: 0;
  overflow-x: clip;
  background: var(--color-navy);
  color: var(--color-text);
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 300;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  content: "";
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 4px 4px, 5px 5px;
  mix-blend-mode: soft-light;
}

::selection { background: var(--color-gold); color: var(--color-navy-3); }

a { text-underline-offset: .22em; }

img { max-width: 100%; height: auto; }

button, input, textarea, select { font: inherit; }

[id] { scroll-margin-top: calc(var(--dfw-header-offset, 0px) + 7rem); }

.site-frame {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.site-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

.sec-tight { padding-block: var(--sec-tight); }
.sec-std { padding-block: var(--sec-std); }
.sec-gen { padding-block: var(--sec-generous); }

/* C5 — a section that closes the page was paying its full generous bottom
   pad on top of the footer's own, which put 235px of empty navy between the
   final CTA button and the footer columns. The footer supplies the
   separation; the section only has to stop. */
main > section:last-child.sec-gen,
main > section:last-child.sec-std { padding-bottom: clamp(3rem, 7vh, 5rem); }

/* C16 — the directory's "List Your Business. Join." band stacked a generous
   top pad under the browser section's standard bottom pad, so up to 336px
   of cream separated the pagination row from the heading. Cristie's hunch
   that the gap started at the pagination row was right: it is the join of
   the two, not either one alone. */
.directory-cta.sec-gen { padding-top: clamp(3.5rem, 8vh, 5.5rem); }
.directory-browser.sec-std { padding-bottom: clamp(2.5rem, 6vh, 4rem); }

.t-display,
.t-display-sm,
.t-mission,
.t-cta,
.t-hero-fit {
  text-wrap: balance;
}

.t-display { font-size: clamp(3.25rem, 6vw, 6.5rem); line-height: .92; }
.t-display-sm { font-size: clamp(2.75rem, 4.6vw, 5rem); line-height: .96; }
.t-mission { font-size: clamp(2.7rem, 5.4vw, 5.75rem); line-height: .98; }
.t-cta { font-size: clamp(3rem, 6.5vw, 6.25rem); line-height: .9; }
.t-hero-fit { font-size: clamp(3.75rem, 7.4vw, 6.5rem); line-height: .88; }

.field-rule {
  width: clamp(3rem, 7vw, 7rem);
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.field-rule--gold { color: var(--color-gold); }

.field-intro {
  max-width: var(--text-max);
  color: var(--color-muted);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.85;
}

.field-hero {
  position: relative;
  min-height: clamp(40rem, 82vh, 58rem);
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--color-text-light);
  background: var(--color-navy);
}

.field-hero::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background:
    linear-gradient(90deg, rgba(8,20,33,.96) 0%, rgba(12,27,46,.9) 42%, rgba(12,27,46,.24) 78%),
    linear-gradient(180deg, rgba(8,20,33,.42), transparent 45%, rgba(8,20,33,.9));
}

.field-hero::after {
  position: absolute;
  inset: auto var(--page-gutter) clamp(2rem, 5vh, 4rem);
  z-index: 1;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--color-gold), rgba(212,175,55,.08) 70%, transparent);
}

.field-hero__image {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.08);
}

.field-hero__content {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding: clamp(10rem, 20vh, 14rem) var(--page-gutter) clamp(5.5rem, 12vh, 8.5rem);
}

.field-hero__title {
  max-width: 11ch;
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(4rem, 8.2vw, 7.5rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .86;
  text-wrap: balance;
}

.field-hero__lead {
  max-width: 39rem;
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
  color: rgba(237,232,224,.82);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.75;
}

.btn-gold,
.btn-outline,
.field-button {
  min-height: 46px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: .85rem 1.25rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .11em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.btn-gold,
.field-button {
  border: 1px solid var(--color-gold);
  background: var(--color-gold);
  color: var(--color-navy-3);
}

/* Light sections darken the gold token for AA-safe accent text. Gold-filled
   controls and badges therefore switch to white ink; nested dark sections
   restore the original navy-on-bright-gold pairing.

   The ink is carried by --btn-gold-ink rather than enumerated per call site,
   so any scope that re-lights the gold token only has to reset one variable
   and every gold-filled control below it follows (AGENTS.md s5). */
[data-theme="light"] :is(.btn-gold, .field-button, .bg-gold, .tier-badge) {
  color: var(--btn-gold-ink, #fff);
}

[data-theme="dark"] :is(.btn-gold, .field-button, .bg-gold, .tier-badge) {
  color: var(--btn-gold-ink, var(--color-navy-3));
}

/* Dark editorial cards nested inside light sections must opt back into the
   bright-gold system; otherwise scoped gold-ink text loses contrast on navy.
   They also restore navy button ink: white on #d4af37 is 2.10:1 and fails AA,
   which is what the "Apply Free" CTA in .vso-callout was doing. */
[data-theme="light"] :is(
  .wj-tile,
  .vso-callout,
  .circle-card,
  .rate-block.dark,
  .sponsor-tier--feature,
  .sponsor-band,
  .speakers-step--dark
) {
  --color-gold: #d4af37;
  --color-gold-light: #e8c84a;
  --btn-gold-ink: var(--color-navy-3);
}

[data-theme="light"] :is(.vso-callout, .circle-card, .rate-block.dark) [class*="text-gold"],
[data-theme="light"] :is(.vso-callout, .circle-card) .eyebrow {
  color: var(--color-gold) !important;
}

.btn-outline {
  border: 1px solid rgba(212,175,55,.66);
  background: rgba(8,20,33,.2);
  color: var(--color-text-light);
}

@media (pointer: fine) {
  .btn-gold:hover,
  .field-button:hover { background: var(--color-gold-light); border-color: var(--color-gold-light); transform: translateY(-2px); }
  .btn-outline:hover { background: rgba(212,175,55,.1); border-color: var(--color-gold); transform: translateY(-2px); }
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--color-gold-light);
  outline-offset: 4px;
}

footer nav a,
footer ul a {
  min-width: 44px;
}

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 1000;
  transform: translateY(-180%);
  border: 2px solid var(--color-gold);
  border-radius: 2px;
  background: var(--color-navy-3);
  color: var(--color-text-light);
  padding: .8rem 1rem;
  font-weight: 600;
}

.skip-link:focus { transform: translateY(0); }

#site-header {
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}

#mobile-menu {
  max-height: calc(100vh - var(--dfw-header-offset) - 72px);
  max-height: calc(100dvh - var(--dfw-header-offset) - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media screen and (min-width: 1024px) {
  body.admin-bar { --dfw-header-offset: 68px; }
}

#site-header.nav-scrolled {
  border-color: rgba(212,175,55,.18);
  background: rgba(8,20,33,.94);
  box-shadow: 0 1rem 3rem rgba(0,0,0,.14);
  backdrop-filter: blur(16px);
}

/* ── Utility bar ground (D1) ───────────────────────────────────────────────
   The bar used to be a flat bg-navy-3/95 slab. On a hero whose own upper sky
   is near-navy that slab and the photograph behind the nav row merged into one
   tall band, which is what read as "the hero starts below the header" — the
   geometry was always correct; nothing was ever inset. Measured: hero section
   top 0, image top 0, image height = section height, on all seven hero pages
   at 375/768/1280/1440/2380.

   So the fix is tonal, not structural. The bar keeps a real scrim, because it
   has to: sampled under the actual controls, the worst ground behind it is
   PURE WHITE (Resources, under the phone link at 1280px). These heroes are
   bright — Membership, Corporate Sponsorship, Events and Resources all peak
   above L=0.89 directly beneath the bar — so a light scrim was never an
   option.

   The ramp below was measured, not guessed. A first pass at 0.94/0.90/0.86
   failed on ten page/width combinations, all at the bar's lower edge where
   the scrim is thinnest and all marginal (4.36-4.45 against 4.5). Raised to
   0.96/0.93/0.90, which clears every control on every hero at 1024, 1280,
   1440 and 2380.

   What changes is everything BELOW the bar: the scrim falls away across the
   header instead of stopping dead at a hard edge, so the nav row sits on the
   photograph rather than on a slab, and the flat band is 45px instead of 118px.
   Once scrolled, both return to the solid ground the header already used. */
#utility-bar {
  background: linear-gradient(
    180deg,
    rgba(8, 20, 33, 0.96) 0%,
    rgba(8, 20, 33, 0.93) 62%,
    rgba(8, 20, 33, 0.90) 100%
  );
  transition: background-color .3s ease, background-image .3s ease;
}

/* The soft handoff into the photograph. It belongs to the header's stacking
   context, not the bar's: #utility-bar is z-60 and #site-header z-50, so a
   tail hung off the bar would paint over the nav links and the logo. As a
   header pseudo-element at z-index 0 it sits behind the header's own content
   where it belongs, and it doubles as the nav links' ground on bright heroes. */
#site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8, 20, 33, 0.78) 0%,
    rgba(8, 20, 33, 0.42) 48%,
    rgba(8, 20, 33, 0) 100%
  );
  transition: opacity .3s ease;
}
#site-header > * { position: relative; z-index: 1; }

/* Scrolled, or over a light section: the scrim has nothing to do and would
   only muddy a solid ground. */
#site-header.nav-scrolled::before,
#site-header.nav-light::before { opacity: 0; }

#utility-bar.nav-scrolled {
  background-image: none;
  background-color: rgba(8, 20, 33, 0.95);
}

#utility-bar { letter-spacing: .02em; }

#utility-bar :is(a, button, input) { min-height: 44px; }

#utility-bar button,
#utility-bar .utility-social a {
  min-width: 44px;
  display: inline-grid;
  place-items: center;
}

#utility-bar .utility-social { gap: 0; }

/* Preloader lockup (C22). dfw-new-logo-white.png is a 1080x1080 master whose
   artwork is a 2.75:1 band sitting in the middle third — roughly 34% of the
   canvas is transparent above it and 34% below. Sizing it by width alone would
   reserve a square box three times taller than the mark and shove the tagline
   down the screen, so crop to the art band instead.

   2.7:1 is deliberately a little wider than the artwork's own 2.75:1: cropping
   flush to the art leaves the lockup touching its own frame, which is the exact
   tangent C2 is about. The extra sliver gives it air. Sized here rather than
   inline so all fifteen preloaders stay in step; the templates keep only the
   pre-animation opacity/transform state GSAP needs before CSS arrives. */
#dfw-preloader #pl-logo {
  width: clamp(240px, 30vw, 340px);
  aspect-ratio: 2.7 / 1;
  height: auto;
  object-fit: cover;
}

.logo-text { white-space: nowrap; }
.logo-accent { color: var(--color-gold); }

/* Footer lockup (C22). Same 1080x1080 master as the preloader, same reason for
   the crop — but smaller, so it takes a touch more margin (2.6:1) to keep the
   seal off the type above and below it. */
/* C4 — the site-wide "Important Notice" band that closes every footer.
   Formerly .contact-notice in contact.css, which only the contact page
   enqueues; it lives here now because the notice renders everywhere. Toned
   a step darker than the footer above it so it reads as a separate legal
   band rather than a fifth column. */
.footer-notice {
  display: block;
  border-top: 1px solid rgba(212, 175, 55, .15);
  background: var(--color-navy-2);
  color: var(--color-text-light);
}

.footer-notice__inner {
  width: min(100%, 88rem);
  margin-inline: auto;
  padding: clamp(2.25rem, 4vw, 3.25rem) 1.5rem;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
}

.footer-notice h2 {
  margin: 0;
  color: var(--color-gold);
  font-size: clamp(1.75rem, 2.6vw, 2.6rem);
  font-weight: 300;
  line-height: .98;
}

.footer-notice p {
  margin: 0;
  max-width: 58rem;
  color: rgba(237, 232, 224, .78);
  font-size: 1rem;
  line-height: 1.8;
}

@media (min-width: 768px) {
  .footer-notice__inner { padding-inline: 2.5rem; }
}

@media (max-width: 860px) {
  .footer-notice__inner { grid-template-columns: 1fr; gap: 1rem; }
}

.footer-lockup {
  display: block;
  width: clamp(200px, 17vw, 244px);
  aspect-ratio: 2.6 / 1;
  height: auto;
  object-fit: cover;
}

.nav-link {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.nav-link::after {
  position: absolute;
  right: 0;
  bottom: .35rem;
  left: 0;
  height: 1px;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  background: var(--color-gold);
  transition: transform .28s ease;
}

.nav-link:hover::after,
.nav-link.is-current::after { transform: scaleX(1); transform-origin: left; }

.nav-link.is-current { color: var(--color-gold); }

.nav-dark .logo-text,
.nav-light .logo-text { color: var(--color-text-light); }

.paper-card {
  position: relative;
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  background: rgba(255,255,255,.64);
  box-shadow: var(--shadow-paper);
}

.paper-card::before {
  position: absolute;
  top: -1px;
  left: -1px;
  width: clamp(3rem, 6vw, 6rem);
  height: 3px;
  content: "";
  background: var(--color-gold-ink-lg);
}

.navy-stars {
  background-image:
    radial-gradient(circle at 18% 26%, rgba(212,175,55,.12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 64%, rgba(237,232,224,.08) 0 1px, transparent 1.5px);
  background-size: 5.5rem 5.5rem, 8rem 8rem;
}

.seam {
  height: 1px;
  transform-origin: left;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

/* Footer top edge: a 1px brass/30 hairline (2026-10-03). The left-margin
   gold rule that used to hang off footer::before was decorative, undocumented
   in DESIGN.md, and read as a stray line, so it was removed. */
footer {
  position: relative;
  border-top: 1px solid rgba(212,175,55,.3);
}

footer a { min-height: 44px; display: inline-flex; align-items: center; }

.field-placeholder {
  border: 1px dashed rgba(127,105,33,.55);
  border-radius: 2px;
  background: rgba(161,133,42,.07);
  color: #655519;
  padding: 1rem 1.2rem;
  font-size: .9rem;
  line-height: 1.6;
}

@media (max-width: 1023px) {
  body { --dfw-header-offset: 0px; }
  #utility-bar { display: none !important; }
  #site-header { top: 0 !important; }
  .site-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  :root { --page-gutter: 1.25rem; }
  body::before { opacity: .1; }
  .site-grid { grid-template-columns: 1fr; }
  .field-hero { min-height: 42rem; }
  .field-hero::before {
    background:
      linear-gradient(90deg, rgba(8,20,33,.94), rgba(12,27,46,.64)),
      linear-gradient(180deg, rgba(8,20,33,.3), transparent 35%, rgba(8,20,33,.94));
  }
  .field-hero__content { padding-top: 8rem; padding-bottom: 5rem; }
  .field-hero__title { font-size: clamp(3.35rem, 17vw, 5.25rem); }
  .logo-text { font-size: 1rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* -- News cards (template-parts/news-card.php) ------------------------------
   Shared by the homepage #newsroom band and the posts archive (R4,
   2026-10-01). Moved here from home.css so both pages get the same card. The
   image fills the 4:3 frame; theme fallbacks are 16:9, so the sides crop. */
.post-media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-card .aspect-\[4\/3\]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(to top, rgba(212,175,55,0.22), transparent 55%);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .post-card { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
  .post-media { transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease; }
  .post-card .aspect-\[4\/3\]::after { transition: opacity .5s ease; }
}
@media (pointer: fine) {
  .post-card:hover { transform: translateY(-8px); }
  .post-card:hover .post-media { transform: scale(1.06); filter: brightness(1.08); }
  .post-card:hover .aspect-\[4\/3\]::after { opacity: 1; }
}

/* -- Membership dropdown (template-parts/site-nav.php, R5 2026-10-01) -------
   The panel is absolutely positioned under its item, so opening it never
   moves the nav row. It is always a navy panel: the header switches between
   nav-dark and nav-light, and a fixed ground keeps the links legible on both.
   JS (site-nav.js) owns the open state through .is-open + aria-expanded, and
   sets data-nav-ready. Until it does, :hover/:focus-within open the panel so
   the links stay reachable without JS. */
.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .15rem;
}
.nav-sub-toggle {
  width: 28px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  margin-right: -.4rem;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
/* No hardcoded colour: the button is also a .nav-link, so it takes the link
   colour in every header state. The old nav-light override painted it navy,
   which vanished on content pages where the scrolled header stays navy (N3). */
.nav-sub-toggle.nav-link::after { display: none; }
#site-header .nav-item:hover > .nav-sub-toggle,
#site-header .nav-item.is-open > .nav-sub-toggle,
#site-header .nav-sub-toggle:focus-visible { color: var(--color-gold); }
.nav-sub-toggle svg { transition: transform .2s ease; }
.nav-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-sub {
  position: absolute;
  top: 100%;
  left: -1.25rem;
  z-index: 70;
  min-width: 16rem;
  padding-top: .9rem; /* hover bridge between the item and the panel */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
.nav-item.is-open .nav-sub,
.nav-item:not([data-nav-ready]):hover .nav-sub,
.nav-item:not([data-nav-ready]):focus-within .nav-sub {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.nav-sub__panel {
  margin: 0;
  padding: .5rem 0;
  list-style: none;
  border: 1px solid rgba(212,175,55,.22);
  border-top: 2px solid var(--color-gold);
  border-radius: 2px;
  background: rgba(8,20,33,.97);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.6);
}
#site-header .nav-sub__link {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: .55rem 1.25rem;
  color: rgba(237,232,224,.88);
  font-size: .9rem;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}
#site-header .nav-sub__link:hover,
#site-header .nav-sub__link.is-current { color: #d4af37; }
#site-header .nav-sub__link:focus-visible { outline-offset: -3px; }
@media (prefers-reduced-motion: no-preference) {
  .nav-sub { transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
  .nav-item.is-open .nav-sub,
  .nav-item:not([data-nav-ready]):hover .nav-sub,
  .nav-item:not([data-nav-ready]):focus-within .nav-sub { transition-delay: 0s; }
}

/* Mobile: the same nesting as a disclosure under Membership. */
.mobile-sub__list {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin: .85rem 0 0;
  padding: 0 0 0 1rem;
  border-left: 1px solid rgba(212,175,55,.35);
  list-style: none;
  font-size: 1rem;
}
.mobile-sub__list[hidden] { display: none; }
.mobile-sub__toggle svg { transition: transform .2s ease; }
.mobile-sub__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* -- Screen-reader-only text -------------------------------------------------
   WordPress core and plugins emit .screen-reader-text (e.g. pagination
   headings) and expect the theme to hide it. The parent theme's block CSS is
   pruned on redesigned pages, so it is defined here (N2, 2026-10-01). */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
  word-wrap: normal !important;
}

/* -- Pagination (template-parts/pagination.php, N2 2026-10-01) -------------
   One component for every paginated list. Always on a light surface, always
   flush with the container's left edge. 2px radius, 44px targets, the
   AA-safe bronze (--color-gold-ink, 5.6:1 with white ink) for the current
   page, and a bronze focus ring — gold-light disappears on cream. */
.dfw-pagination { margin-top: clamp(3rem, 6vw, 4.5rem); }
.dfw-pagination--bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-rule);
}
.dfw-pagination__status {
  margin: 0;
  color: var(--color-muted);
  font-size: .9rem;
}
.dfw-pagination__steps { display: flex; flex-wrap: wrap; gap: .5rem; }
.dfw-pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dfw-pagination .page-numbers {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: 0 .85rem;
  border: 1px solid rgba(12,27,46,.18);
  border-radius: 2px;
  background: transparent;
  color: var(--color-text);
  font-size: .88rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}
.dfw-pagination .page-numbers.current {
  border-color: var(--color-gold-ink);
  background: var(--color-gold-ink);
  color: #fff;
  font-weight: 600;
}
.dfw-pagination .page-numbers.dots {
  min-width: 2rem;
  padding: 0;
  border-color: transparent;
  color: var(--color-muted);
}
.dfw-pagination .page-numbers.is-disabled {
  border-color: var(--color-rule);
  color: var(--color-muted);
  cursor: default;
}
.dfw-pagination a.page-numbers:focus-visible {
  outline: 3px solid var(--color-gold-ink);
  outline-offset: 2px;
}
@media (pointer: fine) {
  .dfw-pagination a.page-numbers:hover {
    border-color: var(--color-gold-ink);
    color: var(--color-gold-ink);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .dfw-pagination a.page-numbers { transition: border-color .2s ease, color .2s ease; }
}