/* vs214-blog-editorial-20261004a.css — shared editorial template (editorial.css v1) + 214 tokens + 214 header offset. Scoped to .ed-article; loaded only on /post/* (prerender link + BlogPost chunk). */
/* editorial.css — shared premium blog editorial template (v1, 2026-10-04)
   Five sites, one structure. Consumes ONLY --ed-* custom properties; brand values live in tokens/<site>.css.
   Every selector is scoped under .ed-article, so nothing here can reach non-blog pages or site chrome.
   Defaults sit in :where(.ed-article) (specificity 0) so a site token file (.ed-article, 0-1-0) always wins
   regardless of load order. No images, no fonts, no JS, no !important. */

/* ---------- 0. Token defaults (neutral; every site overrides the brand ones) ---------- */
:where(.ed-article) {
  /* colour */
  --ed-bg: #ffffff;
  --ed-surface: #ffffff;
  --ed-ink: #1a1a1a;           /* headings */
  --ed-text: #333333;          /* body copy */
  --ed-muted: #5c5c5c;         /* meta, captions (must stay >= 4.5:1 on --ed-bg) */
  --ed-link: #1a4d8f;
  --ed-link-hover: var(--ed-ink);
  --ed-link-underline: currentColor;
  --ed-accent: #8a6d3b;        /* rules, list markers, answer rule (decorative; not text) */
  --ed-rule: rgba(0, 0, 0, .14);
  --ed-focus: #1a4d8f;
  --ed-hero-bg: var(--ed-bg);
  --ed-hero-bg-image: none;
  --ed-hero-fg: var(--ed-ink);
  --ed-hero-muted: var(--ed-muted);
  --ed-hero-accent: var(--ed-link);
  --ed-hero-rule: 1px solid var(--ed-rule);
  --ed-answer-bg: var(--ed-surface);
  --ed-answer-fg: var(--ed-text);
  --ed-answer-ink: var(--ed-ink);
  --ed-answer-rule: var(--ed-accent);
  --ed-answer-border: var(--ed-rule);
  --ed-answer-label: var(--ed-muted);
  --ed-cta-bg: var(--ed-ink);
  --ed-cta-bg-image: none;
  --ed-cta-fg: #ffffff;
  --ed-cta-muted: rgba(255, 255, 255, .86);
  --ed-btn-bg: var(--ed-accent);
  --ed-btn-fg: #111111;
  --ed-btn-bg-hover: var(--ed-btn-bg);
  --ed-btn-border: transparent;
  --ed-cta-link: var(--ed-cta-fg);
  --ed-card-bg: var(--ed-surface);
  --ed-card-border: var(--ed-rule);

  /* type */
  --ed-font-display: Georgia, serif;
  --ed-font-body: system-ui, sans-serif;
  --ed-font-ui: var(--ed-font-body);
  --ed-display-weight: 600;
  --ed-display-tracking: -.01em;
  --ed-ui-weight: 600;
  --ed-ui-transform: none;
  --ed-ui-tracking: .01em;
  --ed-eyebrow-font: var(--ed-font-ui);
  --ed-eyebrow-style: normal;
  --ed-eyebrow-transform: none;
  --ed-eyebrow-tracking: .02em;
  --ed-eyebrow-size: .875rem;
  --ed-eyebrow-weight: 600;
  /* display faces with a small x-height (Cormorant, Bodoni) set --ed-display-scale > 1 */
  --ed-display-scale: 1;
  --ed-fs-body: 1.0625rem;                                  /* 17px phones */
  --ed-fs-body-lg: 1.125rem;                                /* 18px >= 48rem */
  --ed-lh-body: 1.68;
  --ed-fs-dek: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --ed-fs-h1: calc(var(--ed-display-scale) * clamp(2rem, 1.35rem + 2.4vw, 3.25rem));
  --ed-fs-h2: calc(var(--ed-display-scale) * clamp(1.5rem, 1.25rem + 1vw, 2rem));
  --ed-fs-h3: calc(var(--ed-display-scale) * clamp(1.1875rem, 1.1rem + .4vw, 1.375rem));
  --ed-fs-small: .9375rem;
  --ed-fs-meta: .875rem;
  --ed-lh-display: 1.12;
  --ed-lh-heading: 1.22;

  /* measure + layout */
  --ed-measure: 58ch;           /* CSS ch = width of "0", not an average letter: each site calibrates this so a full
                                   line lands at a median of ~66 characters (45-75 band), measured in shots/checks.json */
  --ed-h1-measure: 22ch;
  --ed-container: 72rem;        /* 1152px */
  --ed-rail: 20rem;             /* hero answer card + sticky TOC column */
  --ed-col-gap: clamp(2.5rem, 5vw, 4.5rem);
  --ed-gutter: 1rem;            /* 16px phone side gutter */
  --ed-sticky-offset: 6rem;     /* clears the site's sticky/fixed header for anchor jumps */

  /* spacing scale (4px base) */
  --ed-s-1: .25rem; --ed-s-2: .5rem; --ed-s-3: .75rem; --ed-s-4: 1rem; --ed-s-5: 1.5rem;
  --ed-s-6: 2rem;   --ed-s-7: 3rem; --ed-s-8: 4rem;    --ed-s-9: 6rem;
  --ed-hero-pt: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  --ed-hero-pb: clamp(2rem, 1rem + 3.5vw, 3.75rem);
  --ed-section: clamp(3rem, 2rem + 4vw, 5rem);

  /* shape */
  --ed-radius: 4px;
  --ed-radius-card: var(--ed-radius);
  --ed-btn-radius: var(--ed-radius);
  --ed-answer-rule-w: 4px;
}

/* ---------- 1. Scope reset (only inside the article) ---------- */
.ed-article,
.ed-article *,
.ed-article *::before,
.ed-article *::after { box-sizing: border-box; }

.ed-article {
  display: block;
  background: var(--ed-bg);
  color: var(--ed-text);
  font-family: var(--ed-font-body);
  font-size: var(--ed-fs-body);
  line-height: var(--ed-lh-body);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
@media (min-width: 48rem) { .ed-article { font-size: var(--ed-fs-body-lg); } }

.ed-article :where(h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote, table) { margin: 0; }
.ed-article :where(h1, h2, h3, h4) {
  font-family: var(--ed-font-display);
  font-weight: var(--ed-display-weight);
  letter-spacing: var(--ed-display-tracking);
  color: var(--ed-ink);
  text-wrap: balance;
}
.ed-article :where(p, li) { text-wrap: pretty; }
.ed-article :where(img, svg, video) { max-width: 100%; height: auto; display: block; }

.ed-article a {
  color: var(--ed-link);
  text-decoration-line: underline;          /* links are never colour-only (WCAG 1.4.1) */
  text-decoration-color: var(--ed-link-underline);
  text-decoration-thickness: max(1px, .07em);
  text-underline-offset: .2em;
}
.ed-article a:hover { color: var(--ed-link-hover); text-decoration-thickness: max(2px, .1em); }
.ed-article :focus-visible {
  outline: 3px solid var(--ed-focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.ed-article .ed-wrap {
  width: min(100% - 2 * var(--ed-gutter), var(--ed-container));
  margin-inline: auto;
}

/* ---------- 2. Hero: breadcrumb → eyebrow → H1 → dek → byline | answer card ---------- */
.ed-article .ed-hero {
  background-color: var(--ed-hero-bg);
  background-image: var(--ed-hero-bg-image);
  color: var(--ed-hero-fg);
  padding-block: var(--ed-hero-pt) var(--ed-hero-pb);
  border-bottom: var(--ed-hero-rule);
}
.ed-article .ed-hero__grid { display: grid; gap: var(--ed-s-6); }
@media (min-width: 64rem) {
  .ed-article .ed-hero__grid {
    grid-template-columns: minmax(0, 1fr) var(--ed-rail);
    column-gap: var(--ed-col-gap);
    align-items: end;                         /* the answer card sits on the byline baseline */
  }
}
.ed-article .ed-hero__main { display: grid; gap: var(--ed-s-4); min-width: 0; }

.ed-article .ed-crumbs ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--ed-s-1) var(--ed-s-2);
  font-family: var(--ed-font-ui); font-size: var(--ed-fs-meta); line-height: 1.4;
  color: var(--ed-hero-muted);
}
.ed-article .ed-crumbs li { display: inline-flex; gap: var(--ed-s-2); min-width: 0; }
.ed-article .ed-crumbs li + li::before { content: "/" / ""; opacity: .7; }
.ed-article .ed-crumbs a { color: inherit; text-decoration-color: transparent; }
.ed-article .ed-crumbs a:hover { text-decoration-color: currentColor; }
.ed-article .ed-crumbs [aria-current="page"] {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch;
}

.ed-article .ed-eyebrow {
  font-family: var(--ed-eyebrow-font);
  font-style: var(--ed-eyebrow-style);
  font-size: var(--ed-eyebrow-size);
  font-weight: var(--ed-eyebrow-weight);
  letter-spacing: var(--ed-eyebrow-tracking);
  text-transform: var(--ed-eyebrow-transform);
  line-height: 1.3;
  color: var(--ed-hero-accent);
  margin-top: var(--ed-s-2);
}
.ed-article .ed-eyebrow a { color: inherit; text-decoration-color: transparent; }
.ed-article .ed-eyebrow a:hover { text-decoration-color: currentColor; }

.ed-article .ed-title {
  font-size: var(--ed-fs-h1);
  line-height: var(--ed-lh-display);
  color: var(--ed-hero-fg);
  max-width: var(--ed-h1-measure);
}
.ed-article .ed-dek {
  font-size: var(--ed-fs-dek);
  line-height: 1.55;
  color: var(--ed-hero-muted);
  max-width: 58ch;
}

/* byline + dates: a quiet two-part row, separated by a hairline, never by middle dots */
.ed-article .ed-byline {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--ed-s-2) 0;
  margin-top: var(--ed-s-2);
  padding-top: var(--ed-s-4);
  border-top: 1px solid color-mix(in srgb, var(--ed-hero-fg) 18%, transparent);
  font-family: var(--ed-font-ui); font-size: var(--ed-fs-meta); line-height: 1.45;
  color: var(--ed-hero-muted);
}
.ed-article .ed-byline > * { margin: 0; padding-inline: var(--ed-s-4); }
.ed-article .ed-byline > :first-child { padding-left: 0; }
.ed-article .ed-byline > * + * { border-left: 1px solid color-mix(in srgb, var(--ed-hero-fg) 24%, transparent); }
.ed-article .ed-byline__author { color: var(--ed-hero-fg); font-weight: var(--ed-ui-weight); }
.ed-article .ed-byline__author a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.ed-article .ed-byline time { font-variant-numeric: tabular-nums; }
@media (max-width: 39.99rem) {             /* phones: stack, no separators (a rule must never start a wrapped line) */
  .ed-article .ed-byline { flex-direction: column; align-items: flex-start; gap: var(--ed-s-1); }
  .ed-article .ed-byline > * { padding-inline: 0; }
  .ed-article .ed-byline > * + * { border-left: 0; }
}

/* ---------- 3. Quick answer card (the one memorable element) ---------- */
.ed-article .ed-answer {
  position: relative;
  background: var(--ed-answer-bg);
  color: var(--ed-answer-fg);
  border: 1px solid var(--ed-answer-border);
  border-top: var(--ed-answer-rule-w) solid var(--ed-answer-rule);
  border-radius: var(--ed-radius-card);
  padding: var(--ed-s-5) var(--ed-s-5) var(--ed-s-5);
  font-size: var(--ed-fs-small);
  line-height: 1.6;
}
.ed-article .ed-answer__label {
  font-family: var(--ed-eyebrow-font);
  font-style: var(--ed-eyebrow-style);
  font-size: var(--ed-fs-meta);
  font-weight: var(--ed-eyebrow-weight);
  letter-spacing: var(--ed-eyebrow-tracking);
  text-transform: var(--ed-eyebrow-transform);
  color: var(--ed-answer-label);
  margin-bottom: var(--ed-s-2);
}
.ed-article .ed-answer p { color: var(--ed-answer-fg); }
.ed-article .ed-answer p + p,
.ed-article .ed-answer p + ul { margin-top: var(--ed-s-3); }
.ed-article .ed-answer ul { padding-left: 1.1em; display: grid; gap: var(--ed-s-1); }
.ed-article .ed-answer strong { color: var(--ed-answer-ink); }
@media (min-width: 64rem) {
  .ed-article .ed-answer { padding: var(--ed-s-6) var(--ed-s-5) var(--ed-s-5); }
}

/* ---------- 4. Body grid: reading column | rail (sticky TOC) ---------- */
.ed-article .ed-body { padding-block: var(--ed-section) 0; }
.ed-article .ed-body__grid { display: grid; gap: var(--ed-s-6); }
@media (min-width: 75rem) {
  .ed-article .ed-body__grid {
    grid-template-columns: minmax(0, 1fr) var(--ed-rail);
    column-gap: var(--ed-col-gap);
    align-items: start;
  }
  .ed-article .ed-body__grid > .ed-toc { grid-column: 2; grid-row: 1; position: sticky; top: var(--ed-sticky-offset); }
  .ed-article .ed-body__grid > .ed-prose { grid-column: 1; grid-row: 1; }
}

/* TOC: <details> — tap to open on phones/tablets; always visible in the desktop rail */
.ed-article .ed-toc {
  border: 1px solid var(--ed-rule);
  border-radius: var(--ed-radius-card);
  background: var(--ed-surface);
  font-family: var(--ed-font-ui);
  font-size: var(--ed-fs-meta);
  line-height: 1.45;
  max-width: var(--ed-measure);
}
.ed-article .ed-toc > summary {
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--ed-s-3);
  min-height: 2.75rem;                         /* 44px target */
  padding: var(--ed-s-2) var(--ed-s-4);
  font-weight: var(--ed-ui-weight);
  color: var(--ed-ink);
}
.ed-article .ed-toc > summary::-webkit-details-marker { display: none; }
.ed-article .ed-toc > summary::after {
  content: ""; width: .5rem; height: .5rem; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.ed-article .ed-toc[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.ed-article .ed-toc ol {
  margin: 0; padding: 0 var(--ed-s-4) var(--ed-s-4) var(--ed-s-4);
  list-style: none; counter-reset: ed-toc; display: grid; gap: var(--ed-s-1);
}
.ed-article .ed-toc li { counter-increment: ed-toc; display: grid; grid-template-columns: 1.6em 1fr; }
.ed-article .ed-toc li::before { content: counter(ed-toc); color: var(--ed-muted); font-variant-numeric: tabular-nums; }
.ed-article .ed-toc--numbered-headings li { grid-template-columns: 1fr; }   /* headings already carry "1." / "Step 1:" */
.ed-article .ed-toc--numbered-headings li::before { content: none; }
.ed-article .ed-toc a {
  color: var(--ed-text); text-decoration-color: transparent;
  display: block; padding-block: .3rem;                 /* >= 24px target (WCAG 2.2 2.5.8 head-room) */
}
.ed-article .ed-toc a:hover { color: var(--ed-link); text-decoration-color: currentColor; }
@media (min-width: 75rem) {
  .ed-article .ed-toc { background: transparent; border-width: 0 0 0 1px; border-radius: 0; }
  .ed-article .ed-toc > summary { cursor: default; pointer-events: none; padding-top: 0; min-height: 0; }
  .ed-article .ed-toc > summary::after { display: none; }
  .ed-article .ed-toc::details-content { content-visibility: visible; display: block; }
}

/* ---------- 5. Prose ---------- */
.ed-article .ed-prose { max-width: var(--ed-measure); min-width: 0; }
.ed-article .ed-prose > * + * { margin-top: 1.05em; }
.ed-article .ed-prose h2 {
  font-size: var(--ed-fs-h2);
  line-height: var(--ed-lh-heading);
  margin-top: 2.4em;
  scroll-margin-top: var(--ed-sticky-offset);
}
.ed-article .ed-prose h3 {
  font-size: var(--ed-fs-h3);
  line-height: 1.3;
  margin-top: 1.8em;
  scroll-margin-top: var(--ed-sticky-offset);
}
.ed-article .ed-prose h2 + *,
.ed-article .ed-prose h3 + * { margin-top: .6em; }
.ed-article .ed-prose > :first-child { margin-top: 0; }
.ed-article .ed-prose p,
.ed-article .ed-prose li { color: var(--ed-text); }
.ed-article .ed-prose strong { color: var(--ed-ink); font-weight: 600; }
.ed-article .ed-prose :where(ul, ol) { padding-left: 1.35em; display: grid; gap: .5em; }
.ed-article .ed-prose li { padding-left: .25em; }
.ed-article .ed-prose li::marker { color: var(--ed-accent); font-weight: 700; }
.ed-article .ed-prose ol > li::marker { font-variant-numeric: tabular-nums; }
.ed-article .ed-prose blockquote {
  border-left: 3px solid var(--ed-accent);
  padding-left: var(--ed-s-5);
  font-family: var(--ed-font-display);
  font-size: 1.15em; line-height: 1.5; color: var(--ed-ink);
}
.ed-article .ed-prose .ed-note {
  font-size: var(--ed-fs-small);
  color: var(--ed-muted);
  border-left: 2px solid var(--ed-rule);
  padding-left: var(--ed-s-4);
}

/* worksheet / comparison tables scroll inside their own box, never the page */
.ed-article .ed-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--ed-rule); border-radius: var(--ed-radius-card); }
.ed-article .ed-table:focus-visible { outline-offset: 2px; }
.ed-article .ed-table table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: var(--ed-fs-small); background: var(--ed-surface); }
.ed-article .ed-table caption { text-align: left; padding: var(--ed-s-3) var(--ed-s-4); color: var(--ed-muted); font-size: var(--ed-fs-meta); }
.ed-article .ed-table :where(th, td) { text-align: left; vertical-align: top; padding: var(--ed-s-3) var(--ed-s-4); border-top: 1px solid var(--ed-rule); }
.ed-article .ed-table thead th { font-family: var(--ed-font-ui); font-weight: var(--ed-ui-weight); color: var(--ed-ink); border-top: 0; background: color-mix(in srgb, var(--ed-accent) 9%, var(--ed-surface)); }
.ed-article .ed-table td { height: 3rem; }

/* FAQ: visible verbatim (FAQPage schema only mirrors what is shown here) */
.ed-article .ed-faq { margin-top: 2.4em; padding-top: var(--ed-s-6); border-top: 1px solid var(--ed-rule); }
.ed-article .ed-faq h2 { margin-top: 0; }
.ed-article .ed-faq h3 { font-size: var(--ed-fs-h3); margin-top: 1.4em; }

/* ---------- 6. End matter: author note → sources → related → CTA ---------- */
.ed-article .ed-end { padding-block: var(--ed-section); }
.ed-article .ed-end__inner { display: grid; gap: var(--ed-section); }
.ed-article .ed-end__col { max-width: var(--ed-measure); display: grid; gap: var(--ed-s-7); }
.ed-article .ed-end h2 { font-size: var(--ed-fs-h3); line-height: 1.3; }

.ed-article .ed-author {
  display: grid; gap: var(--ed-s-2);
  padding: var(--ed-s-5) 0 0;
  border-top: 2px solid var(--ed-ink);
  font-size: var(--ed-fs-small);
}
.ed-article .ed-author__label {
  font-family: var(--ed-eyebrow-font); font-style: var(--ed-eyebrow-style);
  font-size: var(--ed-fs-meta); font-weight: var(--ed-eyebrow-weight);
  letter-spacing: var(--ed-eyebrow-tracking); text-transform: var(--ed-eyebrow-transform);
  color: var(--ed-muted);
}
.ed-article .ed-author p { color: var(--ed-text); }

.ed-article .ed-sources { display: grid; gap: var(--ed-s-3); font-size: var(--ed-fs-small); }
.ed-article .ed-sources ol { padding-left: 1.6em; display: grid; gap: var(--ed-s-2); }
.ed-article .ed-sources li::marker { color: var(--ed-muted); font-variant-numeric: tabular-nums; }
.ed-article .ed-sources li { color: var(--ed-text); }
.ed-article .ed-sources .ed-sources__note,
.ed-article .ed-disclaimer { color: var(--ed-muted); font-size: var(--ed-fs-meta); line-height: 1.55; }

.ed-article .ed-related h2 { margin-bottom: var(--ed-s-4); }
.ed-article .ed-related__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ed-s-4); }
@media (min-width: 48rem) { .ed-article .ed-related__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ed-article .ed-card {
  position: relative; height: 100%;
  display: grid; align-content: start; gap: var(--ed-s-2);
  padding: var(--ed-s-5);
  background: var(--ed-card-bg);
  border: 1px solid var(--ed-card-border);
  border-top: 2px solid var(--ed-accent);
  border-radius: var(--ed-radius-card);
}
.ed-article .ed-card__kicker { font-family: var(--ed-font-ui); font-size: var(--ed-fs-meta); color: var(--ed-muted); }
.ed-article .ed-card h3 { font-size: var(--ed-fs-h3); line-height: 1.28; }
.ed-article .ed-card h3 a { color: var(--ed-ink); text-decoration-color: transparent; }
.ed-article .ed-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }  /* whole card is the target */
.ed-article .ed-card:hover h3 a { text-decoration-color: var(--ed-accent); }
.ed-article .ed-card h3 a:focus-visible { outline: none; }
.ed-article .ed-card:has(a:focus-visible) { outline: 3px solid var(--ed-focus); outline-offset: 3px; }
.ed-article .ed-card p { font-size: var(--ed-fs-small); line-height: 1.55; color: var(--ed-text); }

.ed-article .ed-cta {
  background-color: var(--ed-cta-bg);
  background-image: var(--ed-cta-bg-image);
  color: var(--ed-cta-fg);
  border-radius: var(--ed-radius-card);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  display: grid; gap: var(--ed-s-4);
}
@media (min-width: 64rem) {
  .ed-article .ed-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--ed-s-8); }
}
.ed-article .ed-cta h2 { color: var(--ed-cta-fg); font-size: var(--ed-fs-h2); line-height: var(--ed-lh-heading); }
.ed-article .ed-cta p { color: var(--ed-cta-muted); max-width: 56ch; margin-top: var(--ed-s-3); }
.ed-article .ed-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ed-s-3) var(--ed-s-5); }
.ed-article .ed-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .75rem 1.5rem;
  background: var(--ed-btn-bg); color: var(--ed-btn-fg);
  border: 1px solid var(--ed-btn-border);
  border-radius: var(--ed-btn-radius);
  font-family: var(--ed-font-ui); font-weight: var(--ed-ui-weight);
  letter-spacing: var(--ed-ui-tracking); text-transform: var(--ed-ui-transform);
  font-size: 1rem; line-height: 1.2;
  text-decoration: none;
}
.ed-article .ed-btn:hover { background: var(--ed-btn-bg-hover); color: var(--ed-btn-fg); text-decoration: none; }
.ed-article .ed-cta p a { color: var(--ed-cta-link); text-decoration-color: currentColor; }
.ed-article .ed-cta__alt { color: var(--ed-cta-link); font-family: var(--ed-font-ui); font-size: var(--ed-fs-small); }
.ed-article .ed-cta__alt a { color: var(--ed-cta-link); font-weight: var(--ed-ui-weight); }
.ed-article .ed-cta :focus-visible { outline-color: var(--ed-cta-focus, var(--ed-cta-fg)); }

/* ---------- 7. Print (worksheet posts are printed) ---------- */
@media print {
  .ed-article { background: #fff; color: #000; font-size: 11pt; }
  .ed-article .ed-hero { background: none; color: #000; padding: 0 0 12pt; border-bottom: 1pt solid #000; }
  .ed-article .ed-hero *, .ed-article .ed-answer * { color: #000; }
  .ed-article .ed-toc, .ed-article .ed-related, .ed-article .ed-cta, .ed-article .ed-crumbs { display: none; }
  .ed-article .ed-sources a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .ed-article .ed-table td { height: 28pt; }
}

/* tokens/214.css — 214 Veteran Solutions (214vs.com) editorial tokens.
   Source (read 2026-10-04, live, read-only): assets/index-DVQEl4O-.css :root
     --background oklch(97% .008 80) = #F8F5EF (cream) · --foreground oklch(22% .05 250) = #061C31 (navy)
     --primary oklch(50% .18 25) = #B32228 (red: links, phone button) · --accent oklch(72% .12 60) = #DB9152
     --muted-foreground oklch(55% .02 250) = #69737D · --border oklch(90% .008 80) = #E1DDD8 · --radius .5rem
     post hero section.bg-navy computed rgb(6,28,49) · hero meta = white 60% -> #9BA4AD on navy
     body p = navy at 80% opacity -> flattened on cream = #364757 · Quick answer = white card, orange left rule
   Fonts: the CSS names "DM Serif Display" (--font-heading) and "Work Sans" (--font-body), but the live site
   loads NO webfont files (document.fonts empty; no @font-face, no Google Fonts link), so visitors see
   Georgia + system-ui. Tokens keep the exact same stacks so blog pages render identically to the rest of the
   site; loading the real faces is a site-wide owner decision (IMPLEMENTATION-NOTES). */
.ed-article {
  --ed-bg: #F8F5EF;
  --ed-surface: #FFFFFF;
  --ed-ink: #061C31;
  --ed-text: #364757;
  --ed-muted: #5B6570;               /* live --muted-foreground #69737D is 4.4:1 on cream; one step darker for AA */
  --ed-link: #B32228;
  --ed-link-hover: #061C31;
  --ed-link-underline: #B32228;
  --ed-accent: #DB9152;
  --ed-rule: #E1DDD8;
  --ed-focus: #B32228;

  --ed-hero-bg: #061C31;
  --ed-hero-fg: #FFFFFF;
  --ed-hero-muted: #B4BCC4;          /* white @ 70% on navy (live uses 60% = #9BA4AD; both pass, 70% reads cleaner) */
  --ed-hero-accent: #DB9152;
  --ed-hero-rule: 0;

  --ed-answer-bg: #FFFFFF;
  --ed-answer-fg: #233446;
  --ed-answer-ink: #061C31;
  --ed-answer-rule: #DB9152;
  --ed-answer-border: #FFFFFF;
  --ed-answer-label: #8A4B12;        /* orange family darkened to 6.4:1 on white for small text */

  --ed-cta-bg: #061C31;
  --ed-cta-fg: #FFFFFF;
  --ed-cta-muted: #C9D0D6;
  --ed-btn-bg: #B32228;
  --ed-btn-fg: #FFFFFF;
  --ed-btn-bg-hover: #96191F;
  --ed-cta-link: #F3C49B;
  --ed-cta-focus: #F3C49B;
  --ed-card-bg: #FFFFFF;
  --ed-card-border: #E1DDD8;

  --ed-font-display: "DM Serif Display", Georgia, serif;
  --ed-font-body: "Work Sans", system-ui, sans-serif;
  --ed-font-ui: "Work Sans", system-ui, sans-serif;
  --ed-display-weight: 400;
  --ed-display-tracking: 0;
  --ed-ui-weight: 600;
  --ed-eyebrow-transform: uppercase;  /* live category badge "REMODELING" */
  --ed-eyebrow-tracking: .08em;
  --ed-eyebrow-size: .8125rem;
  --ed-eyebrow-weight: 600;

  --ed-radius: 8px;
  --ed-radius-card: 8px;
  --ed-btn-radius: 6px;
  --ed-sticky-offset: 6rem;           /* fixed 80px nav */
  --ed-measure: 49ch;                 /* system-ui fallback, 1ch = 11.3px: 49ch = median ~66 characters per full line */
}

/* 214 site fit: the site header is position:fixed (~80px), so the navy hero starts under it like the live pt-32 hero. */
.ed-article .ed-hero { padding-top: calc(var(--ed-hero-pt) + 5.5rem); }
.ed-article .ed-cta .ed-btn svg { display: inline-block; vertical-align: -0.2em; }
/* 214 site fit: the site's Tailwind preflight sets ol,ul{list-style:none}; restore the template's list markers. */
.ed-article .ed-prose ul { list-style: disc; }
.ed-article .ed-prose ol { list-style: decimal; }
.ed-article .ed-sources ol { list-style: decimal; }