/* ===================================================================
   Digital Futurist — Homepage redesign (Concept 3: The Timeline)
   Dark-mode-first, with a light theme. Tokens ported verbatim from the
   Claude Design file (Digital Futurist - Timeline.dc.html).
   Scoped under .df-home so nothing leaks to inner pages.
   =================================================================== */

:root {
  --df-bg:#0e0f12; --df-panel:#14161b; --df-border:#20232a; --df-text:#e9e8e4;
  --df-text2:#c7cad0; --df-muted:#8b8f98; --df-muted2:#9da2ab; --df-dim:#5b6068;
  --df-accent:#5fd0a8; --df-accent-glow:rgba(95,208,168,.28); --df-axis:#3a4048;
  --df-line:#2a2e36; --df-node-ring:#6b7280; --df-chip-border:#2e333c;
  --df-pill-bg:#10211a; --df-pill-border:#1e3a30; --df-sel-bg:#1b1e24; --df-sel-border:#2f5f4d;
  --df-img-bg:#1c1f25; --df-img-hatch:rgba(255,255,255,.035);
}
:root[data-theme="light"] {
  --df-bg:#e8e1d3; --df-panel:#f4efe0; --df-border:#ddd4bf; --df-text:#15181d;
  --df-text2:#2c3138; --df-muted:#54575c; --df-muted2:#4a4d52; --df-dim:#9aa0a8;
  --df-accent:#2e4b6e; --df-accent-glow:rgba(46,75,110,.22); --df-axis:#c2c5bd;
  --df-line:#877c62; --df-node-ring:#b3b9c0; --df-chip-border:#d7d9d2;
  --df-pill-bg:#e7ecf1; --df-pill-border:#c3d0dd; --df-sel-bg:#eef2f6; --df-sel-border:#8fa6bd;
  --df-img-bg:#edefe9; --df-img-hatch:rgba(0,0,0,.04);
}

/* reset (this template bypasses the theme header/footer) */
.df-home *, .df-home *::before, .df-home *::after { box-sizing:border-box; }
html, body { margin:0; padding:0; }
/* theme-aware root so there's no white flash/gap and plugin-injected
   elements (e.g. the cookie banner) inherit the palette */
html { background:var(--df-bg); color:var(--df-text); font-family:'Space Grotesk', system-ui, sans-serif; transition:background .35s ease, color .35s ease; }
.df-home a { color:inherit; text-decoration:none; }
.df-home img { max-width:100%; display:block; }

.df-home {
  min-height:100vh;
  background:var(--df-bg);
  color:var(--df-text);
  font-family:'Space Grotesk', system-ui, sans-serif;
  transition:background .35s ease, color .35s ease;
  -webkit-font-smoothing:antialiased;
}
.df-mono { font-family:'IBM Plex Mono', ui-monospace, monospace; }
.df-shell { max-width:1200px; margin:0 auto; }

/* ---- top nav ---- */
.df-nav {
  display:flex; flex-direction:column; gap:14px;
  padding:18px 44px 18px; border-bottom:1px solid var(--df-border);
}
.df-nav-top { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.df-brand { display:flex; flex-direction:column; gap:2px; text-decoration:none; line-height:1.15; }
.df-brand-name { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--df-text); }
.df-brand-dot { width:8px; height:8px; border-radius:50%; background:var(--df-accent); box-shadow:0 0 8px var(--df-accent-glow); flex-shrink:0; }
.df-brand-tag { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.05em; color:var(--df-muted); }
.df-brand-home .df-brand-name { font-size:29px; }
.df-brand-home .df-brand-dot { width:12px; height:12px; }
.df-navlinks { display:flex; align-items:center; flex-wrap:wrap; row-gap:10px; gap:22px; font-family:'IBM Plex Mono',monospace;
  font-size:13px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--df-text2); }
.df-navlinks a:hover { color:var(--df-text); }
.df-navlinks a[aria-current="page"] { color:var(--df-text); }

/* Newsroom History Site pill - lives in .df-navlinks, right-aligned via
   margin-left:auto so it sits on the same row/baseline as the main nav
   links rather than paired with the theme toggle. On narrow screens it
   just wraps to its own line under everything via normal flex-wrap - no
   special stacking logic needed. The search box (.df-nav-search-row,
   below) sits in its own row directly under this pill, right-aligned to
   match it. */
.df-nav-standout {
  font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; letter-spacing:.05em;
  color:var(--df-accent) !important; border:1px solid var(--df-pill-border);
  background:var(--df-pill-bg); border-radius:999px; padding:7px 16px; white-space:nowrap;
  margin-left:auto;
}
.df-nav-standout:hover { border-color:var(--df-accent); }
.df-toggle-group {
  display:inline-flex; align-items:center; gap:2px;
  background:var(--df-panel); border:1px solid var(--df-chip-border); border-radius:999px; padding:3px;
}
.df-toggle-btn {
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--df-muted); background:transparent; border:none; border-radius:999px;
  padding:6px 13px; cursor:pointer; transition:background .2s ease, color .2s ease;
}
.df-toggle-btn:hover:not([aria-pressed="true"]) { color:var(--df-text); }
.df-toggle-btn[aria-pressed="true"] { background:var(--df-accent); color:var(--df-bg); }

/* ---- nav search box: own row under the Newsroom pill, right-aligned to
   match it (not paired with the theme toggle anymore - see 2026-08-10).
   The FORM's total width (not the input's) is set by matchSearchWidth()
   in homepage.js as the --df-search-w custom property, mirroring the
   pill's own rendered width - the pill's width is text-driven (auto), so
   JS measurement is the only reliable way to keep the two aligned as one
   block, same lesson as matchTimelineHeight() in that file. The input
   itself has no width of its own; it flex-grows to fill whatever's left
   in the form after the button's fixed 34px, so the outer box (the part
   that visually needs to line up with the pill) is what's controlled. */
.df-nav-search-row { display:flex; justify-content:flex-end; }
.df-search-form { display:flex; align-items:stretch; width:var(--df-search-w, 164px); }
.df-search-input {
  flex:1 1 auto; min-width:0; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--df-text);
  background:var(--df-panel); border:1px solid var(--df-chip-border); border-right:none;
  border-radius:999px 0 0 999px; padding:7px 0 7px 14px; transition:border-color .2s ease;
}
.df-search-input::placeholder { color:var(--df-muted); }
.df-search-input:focus { border-color:var(--df-accent); outline:none; }
/* Safari/webkit adds its own clear-button chrome to type=search inputs -
   drop it so the field matches the rest of the site's plain styling. */
.df-search-input::-webkit-search-cancel-button { -webkit-appearance:none; }
.df-search-btn {
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:34px; color:var(--df-muted2); background:var(--df-panel);
  border:1px solid var(--df-chip-border); border-radius:0 999px 999px 0; cursor:pointer; padding:0;
}
.df-search-btn:hover { color:var(--df-accent); border-color:var(--df-accent); }
.df-search-btn svg { width:14px; height:14px; }

/* ---- hero ---- */
.df-hero { padding:54px 44px 30px; text-align:center; }
.df-pill {
  display:inline-flex; align-items:center; gap:9px; font-family:'IBM Plex Mono',monospace;
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--df-accent);
  border:1px solid var(--df-pill-border); background:var(--df-pill-bg); border-radius:999px;
  padding:6px 14px; margin-bottom:26px;
}
.df-pill .df-blip { width:6px; height:6px; border-radius:50%; background:var(--df-accent); box-shadow:0 0 8px var(--df-accent); }

/* ---- file link pill: shared component for any downloadable file link
   (single entries, archival documents, ledger rows) ---- */
.df-file-pill {
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--df-chip-border); border-radius:6px; padding:9px 13px;
  text-decoration:none; color:var(--df-text); font-size:.85rem;
}
.df-shell .df-file-pill { color:var(--df-text); }
.df-file-pill:hover { border-color:var(--df-accent); }
.df-file-pill .ext {
  font-family:'IBM Plex Mono', monospace; font-size:.62rem; letter-spacing:.04em;
  color:var(--df-bg); background:var(--df-accent); border-radius:3px; padding:3px 6px; flex-shrink:0;
}

.df-hero h1 { font-weight:700; font-size:74px; line-height:.98; margin:0 auto; letter-spacing:-.03em; max-width:900px; }
.df-hero-sub { font-size:17px; line-height:1.55; color:var(--df-muted2); max-width:620px; margin:22px auto 0; text-wrap:pretty; }

/* ---- content layout: bio+entries (left, ~40%) / vertical timeline (right, ~60%) ---- */
.df-layout { display:grid; grid-template-columns:2fr 3fr; gap:30px; padding:18px 44px 40px; align-items:start; }
.df-col-left { display:flex; flex-direction:column; gap:22px; }
.df-col-right { min-width:0; }

/* ---- vertical timeline panel ---- */
/* Height is set inline by matchTimelineHeight() in homepage.js, to match
   the left column's actual rendered height (bio + memos highlight +
   latest entries) so there's no dead space below the panel. Tried doing
   this with pure CSS grid stretch + flex first: a grid row's auto-sizing
   uses each item's max-content size, and a scrollable list's max-content
   height is its full *unclipped* content height, not its scrolled/clipped
   height - so the row blew out to ~9500px (the full unscrolled timeline)
   instead of respecting the intended height. JS measurement sidesteps
   that entirely by using the actually-laid-out height. 700px here is
   just the pre-JS fallback so there's no flash of an unstyled height.  */
.df-timeline-vert {
  background:var(--df-panel); border:1px solid var(--df-border);
  border-radius:6px; padding:22px 26px 20px; transition:background .35s ease, border-color .35s ease;
  display:flex; flex-direction:column; height:700px;
}
.df-timeline-head, .df-panel-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.df-timeline-head .df-label, .df-panel-head .df-label { font-family:'IBM Plex Mono',monospace; font-size:16px; font-weight:600; letter-spacing:0; text-transform:uppercase; color:var(--df-text); }
.df-timeline-head .df-hint, .df-panel-head .df-hint { font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--df-accent); }
a.df-hint:hover { text-decoration:underline; }

/* independently-scrolling window onto the full entry list; scrollbar always
   visible, plus a bottom fade so it's obvious there's more to scroll to -
   reaching the end of the outer page previously looked identical to
   reaching the end of this inner list. */
.df-vscroll-wrap { position:relative; flex:1; min-height:0; margin-top:12px; }
.df-vscroll-wrap::after {
  content:''; position:absolute; left:0; right:12px; bottom:0; height:44px;
  background:linear-gradient(to bottom, transparent, var(--df-panel));
  pointer-events:none; opacity:1; transition:opacity .2s ease;
}
.df-vscroll-wrap.is-at-bottom::after { opacity:0; }
.df-vscroll { height:100%; overflow-y:scroll; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:var(--df-node-ring) transparent; }
.df-vscroll::-webkit-scrollbar { width:10px; }
.df-vscroll::-webkit-scrollbar-track { background:var(--df-bg); border-radius:5px; }
.df-vscroll::-webkit-scrollbar-thumb { background:var(--df-node-ring); border-radius:5px; border:2px solid var(--df-panel); }
.df-vscroll::-webkit-scrollbar-thumb:hover { background:var(--df-accent); }

/* the vertical timeline list — center spine, entries alternating left/right */
.df-tl { list-style:none; margin:0; padding:4px 0; position:relative; }
.df-tl::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:3px;
  margin-left:-1.5px; background:var(--df-axis); }
.df-tl-item { position:relative; width:50%; }
.df-tl-item.is-right { margin-left:50%; }

/* decade divider — a section break on the spine: era chip + theme headline */
.df-tl-decade { position:relative; text-align:center; padding:34px 12px 18px; }
.df-tl-decade::before { content:''; position:absolute; left:0; right:0; top:15px; height:1px;
  background:linear-gradient(90deg,transparent,var(--df-border) 12%,var(--df-border) 88%,transparent); }
.df-tl-decade:first-child { padding-top:8px; }
.df-tl-decade:first-child::before { display:none; }
.df-tl-decade-era { position:relative; display:inline-block; font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:.14em; color:var(--df-accent);
  background:var(--df-tl-mask,var(--df-panel)); border:1px solid var(--df-pill-border); border-radius:999px; padding:3px 13px; }
.df-tl-decade-theme { position:relative; display:block; margin-top:9px; font-size:17px; font-weight:600;
  letter-spacing:-.01em; line-height:1.25; color:var(--df-text);
  background:var(--df-tl-mask,var(--df-panel)); padding:0 8px; }

/* row header (the clickable button) */
.df-tl-head { display:flex; align-items:baseline; gap:12px; width:100%;
  background:none; border:none; cursor:pointer; color:inherit; font:inherit;
  position:relative; transition:background .18s ease; }
.is-left .df-tl-head { flex-direction:row-reverse; text-align:right; padding:12px 26px 12px 10px; }
.is-right .df-tl-head { text-align:left; padding:12px 10px 12px 26px; }
.df-tl-head:hover { background:var(--df-sel-bg); }
.df-tl-head:focus-visible { outline:2px solid var(--df-accent); outline-offset:-2px; }
.df-tl-dot { position:absolute; top:17px; width:11px; height:11px; border-radius:50%;
  background:var(--df-bg); border:2px solid var(--df-node-ring); transition:border-color .18s ease, background .18s ease; }
.is-left .df-tl-dot { right:-5.5px; }
.is-right .df-tl-dot { left:-5.5px; }
.df-tl-head:hover .df-tl-dot { border-color:var(--df-accent); }
.df-tl-title { font-size:14.5px; line-height:1.35; color:var(--df-text2); flex:1 1 auto; }
.df-tl-chev { font-family:'IBM Plex Mono',monospace; font-size:16px; line-height:1; color:var(--df-dim);
  flex:none; transition:transform .18s ease, color .18s ease; }
.df-tl-head:hover .df-tl-chev { color:var(--df-accent); }

/* expanded state */
.df-tl-head[aria-expanded="true"] .df-tl-dot { background:var(--df-accent); border-color:var(--df-accent);
  box-shadow:0 0 0 4px var(--df-accent-glow); }
.df-tl-head[aria-expanded="true"] .df-tl-title { color:var(--df-text); }
.df-tl-head[aria-expanded="true"] .df-tl-chev { transform:rotate(45deg); color:var(--df-accent); }

.is-left .df-tl-body { padding:0 26px 16px 10px; text-align:right; }
.is-right .df-tl-body { padding:0 10px 16px 26px; }
.df-tl-desc { font-size:13px; line-height:1.5; color:var(--df-muted2); margin:0 0 10px; }
.df-shell .df-tl-more { display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--df-accent); }
.df-tl-more:hover { text-decoration:underline; }

/* ---- left column: entries + bio ---- */
.df-entries .df-label { display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--df-muted); margin-bottom:6px; }
.df-entry { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--df-border); }
.df-entry:last-child { border-bottom:none; }
.df-entry:hover .df-entry-title { color:var(--df-accent); }
.df-entry-l { display:flex; gap:18px; align-items:baseline; }
.df-entry-year { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--df-accent); width:38px; flex:none; }
.df-entry-title { font-size:15.5px; transition:color .2s ease; }
.df-entry-arrow { color:var(--df-dim); }

.df-bio { background:var(--df-panel); border:1px solid var(--df-border); border-radius:6px; padding:22px; transition:background .35s ease, border-color .35s ease; }
.df-bio-portrait { aspect-ratio:5/4; background:var(--df-img-bg);
  background-image:repeating-linear-gradient(45deg,var(--df-img-hatch) 0 11px,transparent 11px 22px);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--df-line); border-radius:4px; margin-bottom:16px; overflow:hidden; }
.df-bio-portrait span { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--df-dim); }
.df-bio-portrait img { width:100%; height:100%; object-fit:cover; object-position:100% 45%; }
.df-bio-text { font-size:15px; line-height:1.55; color:var(--df-text2); text-wrap:pretty; }
.df-bio-text a { color:var(--df-accent); }

/* ---- homepage: Memos & History Bits highlight ---- */
.df-memos-highlight {
  background:var(--df-panel); border:1px solid var(--df-border); border-radius:6px;
  padding:22px; transition:background .35s ease, border-color .35s ease;
}
.df-memos-highlight-text { font-size:14.5px; line-height:1.6; color:var(--df-text2); margin:0; }
.df-memos-chips { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.df-shell .df-memos-chip {
  font-family:'Space Grotesk',sans-serif; font-size:12.5px; font-weight:600;
  color:var(--df-muted2); border:1px solid var(--df-line); border-radius:999px; padding:7px 15px;
  text-decoration:none; transition:color .15s ease, border-color .15s ease;
}
.df-memos-chip:hover { color:var(--df-accent); border-color:var(--df-accent); }
.df-shell .df-memos-highlight-cta {
  display:block; margin-top:20px; padding-top:16px; border-top:1px solid var(--df-border);
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--df-accent); text-decoration:none;
}
.df-memos-highlight-cta:hover { text-decoration:underline; }

/* ---- dedicated timeline page (page-398) ---- */
html { scroll-behavior:smooth; }
.df-shell .df-back-link {
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--df-accent);
  text-decoration:none; margin-bottom:18px;
}
.df-back-link:hover { text-decoration:underline; }
.df-hero-page { padding-bottom:14px; }
.df-hero-page::after { content:''; display:table; clear:both; }
.df-hero-page h1 { font-size:46px; line-height:1.06; max-width:680px; text-wrap:pretty; }
.df-page-intro { max-width:680px; margin:24px auto 0; font-size:15.5px; line-height:1.6;
  color:var(--df-muted2); text-align:left; text-wrap:pretty; }
.df-page-intro p { margin:0 0 1em; font-size:inherit; color:inherit; }
.df-page-intro a { color:var(--df-accent); }
.df-page-intro img { border-radius:4px; }
.df-page-intro img.alignleft { float:left; margin:5px 14px 4px 0; }
.df-page-intro img.alignright { float:right; margin:5px 0 4px 14px; }
.df-page-intro figure.alignright { float:right; margin:5px 0 4px 14px; max-width:300px; }
.df-page-intro figure.alignright img { display:block; width:100%; margin:0; }
.df-page-intro figure.alignright figcaption { font-family:'IBM Plex Mono', monospace; font-size:.68rem; letter-spacing:.03em; color:var(--df-muted); margin-top:.4rem; }

/* shared container for simple single-page content (Video & Audio, Newsroom
   History, any future page that's just chrome + narrative, not a
   data-driven collection) - narrower than the site's general max-width. */
.df-simple-page { max-width:760px; margin:0 auto; padding:26px 24px 56px; }
.df-simple-page .df-page-intro { margin-top:24px; }
@media (max-width:640px) {
  .df-simple-page { padding:20px 18px 44px; }
}

.df-decadenav { position:sticky; top:0; z-index:5; display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap; gap:8px; padding:12px 20px; background:var(--df-bg);
  border-top:1px solid var(--df-border); border-bottom:1px solid var(--df-border);
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.1em;
  transition:background .35s ease, border-color .35s ease; }
.df-tlfilters, .df-decadelinks { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.df-decadenav a, .df-tlfilter { color:var(--df-muted); border:1px solid var(--df-chip-border); border-radius:999px;
  padding:4px 12px; transition:color .18s ease, border-color .18s ease; }
.df-tlfilter { background:none; cursor:pointer; font:inherit; letter-spacing:inherit; }
.df-decadenav a:hover, .df-tlfilter:hover { color:var(--df-accent); border-color:var(--df-accent); }
.df-tlfilter.is-active { color:var(--df-accent); border-color:var(--df-accent); background:var(--df-pill-bg); }
.df-decadenav-sep { width:1px; align-self:stretch; background:var(--df-border); margin:0 6px; }
.df-decadenav a.is-disabled { opacity:.35; pointer-events:none; }
.df-tl-item.is-hidden { display:none; }
.df-tl-decade.is-empty { display:none; }

.df-timeline-page { max-width:820px; margin:0 auto; padding:26px 24px 56px; }
.df-timeline-page .df-tl { --df-tl-mask:var(--df-bg); }
.df-tl-decade { scroll-margin-top:64px; }

/* ---- footer ---- */
.df-foot { padding:16px 44px; border-top:1px solid var(--df-border); font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--df-dim);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ---- responsive ---- */
@media (max-width:900px) {
  .df-nav { padding:16px 20px 16px; }
  .df-navlinks { gap:14px; font-size:12px; }
  .df-hero { padding:40px 20px 24px; }
  .df-hero h1 { font-size:44px; }
  .df-hero-page h1 { font-size:31px; }
  .df-timeline-page { padding:20px 16px 44px; }
  .df-layout { grid-template-columns:1fr; padding:20px 20px 34px; gap:26px; }
  .df-timeline-vert { height:460px; }
  /* narrow screens: half-columns are too cramped — collapse the alternating
     center-spine layout back to a single left spine */
  .df-tl::before { left:8px; margin-left:0; }
  .df-tl-item, .df-tl-item.is-right { width:100%; margin-left:0; }
  .is-left .df-tl-head, .is-right .df-tl-head { flex-direction:row; text-align:left; padding:12px 8px 12px 26px; }
  .is-left .df-tl-dot, .is-right .df-tl-dot { left:3.5px; right:auto; }
  .is-left .df-tl-body, .is-right .df-tl-body { padding:0 8px 16px 26px; text-align:left; }
  .df-tl-decade { text-align:left; padding-left:26px; }
  .df-foot { padding:16px 20px; }
}

/* AI-assisted disclosure badge - deliberately quiet/muted, sits at the
   bottom of a post, not a loud callout. */
.df-ai-badge {
  margin-top:28px; padding-top:16px; border-top:1px solid var(--df-border);
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.05em;
  color:var(--df-muted);
}

/* Newsroom History homepage panel - gives the nav pill real context
   before a visitor clicks (Howard's copy, verbatim), plus a few highlight
   links into what's actually live on that subsite today. */
.df-newsroom-highlight { margin-top:22px; }
.df-newsroom-highlight-text {
  font-size:14px; line-height:1.65; color:var(--df-text2); margin-top:10px;
}
.df-newsroom-highlight-text em { color:var(--df-muted); font-style:italic; }
.df-newsroom-links { display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.df-shell .df-newsroom-links a {
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.03em;
  color:var(--df-accent); text-decoration:none;
}
.df-newsroom-links a:hover { text-decoration:underline; }

/* Quick edit link - visible only to a logged-in user who can edit the
   current page, jumps straight into its wp-admin edit screen in a new
   tab so the front-end page isn't lost. */
.df-edit-link {
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.05em;
  color:var(--df-muted) !important; border:1px solid var(--df-chip-border);
  background:var(--df-panel); border-radius:999px; padding:6px 12px; white-space:nowrap;
  text-decoration:none;
}
.df-edit-link:hover { color:var(--df-accent) !important; border-color:var(--df-accent); }

/* Complianz TCF vendor-management link - this site doesn't use the IAB
   TCF vendor-consent framework (tcf_active is empty in cmplz_options),
   but Complianz's own cookiebanner.php template renders this link
   unconditionally, and its public-facing complianz.js has no code path
   to fill in {vendor_count} (that substitution only exists in the
   plugin's admin-preview JS bundle, never shipped to the front end) -
   so it shows literally as "Manage {vendor_count} vendors" to real
   visitors. Not something to patch in the plugin itself (wiped on next
   update); hiding it here since it's genuinely unused functionality.
   Flagged 2026-08-12 via Claude Chat while Howard was building the
   input-app spec, confirmed live via browser JS inspection. */
.cmplz-manage-vendors.tcf { display: none !important; }