/* ==========================================================================
   Seed Video — design system
   Register: brand (editorial reference desk). Lane: reference manual, not magazine.
   Sans headings for wayfinding, serif prose for reading, mono only for real code.
   Palette: Restrained. One accent, under 10% of surface. Authority comes from
   type weight and whitespace, never from decoration.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Ink. Blue-tinted neutrals, never pure black. */
  --sv-ink:        #111921;  /* oklch(.21 .02 250)  headings          17.7:1 */
  --sv-body:       #2D343A;  /* oklch(.32 .015 250) prose             12.6:1 */
  --sv-muted:      #636A71;  /* oklch(.52 .015 250) metadata           5.5:1 */

  /* Accent. Deep pine, not lawn. Links, one CTA, table rules. */
  --sv-accent:     #007F56;  /* oklch(.52 .13 165)                     5.0:1 */
  --sv-accent-dk:  #005938;  /* oklch(.40 .11 165)  hover              8.5:1 */
  --sv-accent-wash:#E5F5ED;

  /* Caution. Never color alone: always paired with a word. */
  --sv-caution:    #894D00;  /* 6.7:1 */
  --sv-caution-wash:#FEF2DD;

  /* Paper and rules. */
  --sv-white:      #FFFFFF;
  --sv-paper:      #F6F9F7;
  --sv-rule:       #DAE0DC;
  --sv-rule-strong:#BFC6C2;

  /* Type. Self-hosted variable faces, see @font-face below. */
  --sv-sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --sv-serif: 'Literata', Georgia, 'Times New Roman', serif;
  --sv-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Scale: 1.25 ratio. Few sizes, real contrast between them. */
  --sv-t-xs:    .75rem;
  --sv-t-sm:    .875rem;
  --sv-t-base:  1rem;
  --sv-t-prose: 1.125rem;
  --sv-t-lead:  1.3125rem;
  --sv-t-h4:    1.1875rem;
  --sv-t-h3:    1.5rem;
  --sv-t-h2:    clamp(1.75rem, 1.25rem + 1.5vw, 2.25rem);
  --sv-t-h1:    clamp(2.125rem, 1.5rem + 2.2vw, 3rem);

  /* 4pt spacing. */
  --sv-1:4px; --sv-2:8px; --sv-3:12px; --sv-4:16px; --sv-5:20px;
  --sv-6:24px; --sv-8:32px; --sv-10:40px; --sv-12:48px; --sv-16:64px; --sv-24:96px;

  /* Prose measure. Tables and figures deliberately exceed it. */
  --sv-measure: 68ch;

  --sv-ease: cubic-bezier(.22,1,.36,1); /* ease-out-quart */
}

/* --- 2. Faces ----------------------------------------------------------- */
/* Self-hosted so there is no third-party request and no FOUT from a CDN.
   Variable fonts: one file covers every weight we use. */

/* Archivo latin-ext */
@font-face { font-family:'Archivo'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(fonts/Archivo-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Archivo latin */
@font-face { font-family:'Archivo'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(fonts/Archivo-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Literata latin-ext italic */
@font-face { font-family:'Literata'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(fonts/Literata-Italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Literata latin italic */
@font-face { font-family:'Literata'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(fonts/Literata-Italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Literata latin-ext */
@font-face { font-family:'Literata'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/Literata-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Literata latin */
@font-face { font-family:'Literata'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/Literata-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* JetBrainsMono latin-ext */
@font-face { font-family:'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/JetBrainsMono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* JetBrainsMono latin */
@font-face { font-family:'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/JetBrainsMono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --- 3. Base ------------------------------------------------------------ */

body {
  font-family: var(--sv-sans);
  font-size: var(--sv-t-base);
  line-height: 1.6;
  color: var(--sv-body);
  background: var(--sv-white);
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .page-title {
  font-family: var(--sv-sans);
  color: var(--sv-ink);
  letter-spacing: -.015em;
  text-wrap: balance;
}

/* Focus: visible, accent-colored, never removed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sv-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--sv-accent-wash); color: var(--sv-ink); }

/* --- 4. Header ---------------------------------------------------------- */
/* Sticky, quiet, and it earns its rule only once you have scrolled. */

.ct-header [data-row="middle"] {
  --height: 68px;
  border-bottom: 1px solid var(--sv-rule);
}

.ct-header [data-id="logo"] img { display: block; }

/* Nav: sentence case at a readable size. Blocksy's default is 12px uppercase 700,
   which reads as a toolbar, not a masthead. */
.ct-header [data-id="menu"] > ul > li > a {
  font-family: var(--sv-sans);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--sv-body);
}

.ct-header [data-id="menu"] > ul > li > a:hover,
.ct-header [data-id="menu"] > ul > li.current-menu-item > a {
  color: var(--sv-ink);
}

/* Current section marker: a rule under the word, not a pill or a background. */
.ct-header [data-id="menu"] > ul > li > a::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 3px;
  background: var(--sv-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--sv-ease);
}
.ct-header [data-id="menu"] > ul > li:hover > a::after,
.ct-header [data-id="menu"] > ul > li.current-menu-item > a::after,
.ct-header [data-id="menu"] > ul > li.current-menu-ancestor > a::after {
  transform: scaleX(1);
}

/* CTA: outlined, not a filled pill. The tools are useful, not urgent. */
.ct-header-cta .ct-button,
.ct-header [data-id="button"] .ct-button {
  font-family: var(--sv-sans);
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: -.005em;
  border-radius: 6px;
  background: transparent;
  color: var(--sv-accent-dk);
  box-shadow: inset 0 0 0 1px var(--sv-rule-strong);
  transition: box-shadow .2s var(--sv-ease), background-color .2s var(--sv-ease);
}
.ct-header-cta .ct-button:hover,
.ct-header [data-id="button"] .ct-button:hover {
  background: var(--sv-accent-wash);
  box-shadow: inset 0 0 0 1px var(--sv-accent);
  color: var(--sv-accent-dk);
}

/* Sticky: the masthead stays available through a 3,000-word article without
   stealing height. 68px, hairline rule, no shadow theatre. */
#header.ct-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--sv-white);
}

.admin-bar #header.ct-header { top: 32px; }
@media (max-width: 782px) { .admin-bar #header.ct-header { top: 46px; } }

/* Anchor links from the table of contents must clear the sticky masthead. */
html { scroll-padding-top: 84px; }
.entry-content :is(h2, h3, h4)[id] { scroll-margin-top: 84px; }

/* Search trigger sits as a quiet icon, not a boxed control. */
.ct-header [data-id="search"] .ct-icon { color: var(--sv-body); }
.ct-header [data-id="search"]:hover .ct-icon { color: var(--sv-accent-dk); }

/* Blocksy sizes the search and menu buttons to their glyph: 15px and 18px on
   mobile, well under the 44px touch minimum. The visual size is kept and the
   tap area is grown with a pseudo-element. */
.ct-header-search.ct-toggle,
.ct-header-trigger.ct-toggle { position: relative; }

.ct-header-search.ct-toggle::after,
.ct-header-trigger.ct-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* Same for the logo link and the breadcrumb trail. */
.ct-header [data-id="logo"] .site-logo-container { display: inline-flex; padding-block: var(--sv-2); }

/* The two 44px tap areas sit side by side, so they need real space between
   them or each one eats into its neighbour. */
.ct-header [data-column="end"] [data-items] { gap: var(--sv-5); }
.ct-header [data-id="search"] + [data-id="trigger"],
.ct-header [data-id="search"] { margin-inline: var(--sv-2); }

/* Mobile drawer. Blocksy ships it near-black, which read as a different product
   on a light reference site, and the accent CTA on that panel measured 3.64:1
   against the 4.5:1 floor. Brought onto the site's own paper. */
[data-header*="type-1"] #offcanvas .ct-panel-inner,
#offcanvas .ct-panel-inner {
  background-color: var(--sv-white);
}

[data-header*="type-1"] [data-id="mobile-menu"],
#offcanvas [data-id="mobile-menu"] {
  --theme-link-initial-color: var(--sv-ink);
  --theme-link-hover-color: var(--sv-accent-dk);
  --theme-font-family: var(--sv-sans);
  --theme-font-size: 1.1875rem;
  --theme-font-weight: 600;
}

#offcanvas [data-id="mobile-menu"] .ct-menu-link {
  border-bottom: 1px solid var(--sv-rule);
  padding-block: var(--sv-4);
}
#offcanvas [data-id="mobile-menu"] li:last-child .ct-menu-link { border-bottom: 0; }

#offcanvas .ct-button {
  background: transparent;
  color: var(--sv-accent-dk);
  box-shadow: inset 0 0 0 1px var(--sv-rule-strong);
  border-radius: 6px;
  font-family: var(--sv-sans);
  font-weight: 600;
}
#offcanvas .ct-button:hover {
  background: var(--sv-accent-wash);
  box-shadow: inset 0 0 0 1px var(--sv-accent);
}

/* Blocksy hard-sets the close icon's svg fill to rgba(255,255,255,.7) for its
   dark drawer, which is invisible on paper, so the fill is set rather than
   inherited. The tap target is also grown to the 44px minimum. */
#offcanvas .ct-toggle-close {
  color: var(--sv-muted);
  --theme-icon-color: var(--sv-muted);
  --theme-icon-hover-color: var(--sv-ink);
  position: relative;
}
#offcanvas .ct-toggle-close svg,
#offcanvas .ct-toggle-close .ct-icon { fill: var(--sv-muted); }
#offcanvas .ct-toggle-close:hover svg,
#offcanvas .ct-toggle-close:hover .ct-icon { fill: var(--sv-ink); }
#offcanvas .ct-toggle-close::before {
  content: "";
  position: absolute;
  inset: -6px;
}

/* --- 5. Footer ---------------------------------------------------------- */
/* The main row holds three real columns. Policy links live here in the open,
   which readers and ad reviewers both look for. */

.ct-footer {
  background: var(--sv-paper);
  border-top: 1px solid var(--sv-rule-strong);
}

.ct-footer [data-row="middle"] { padding-block: var(--sv-12) var(--sv-10); }

.ct-footer .widget { margin-bottom: 0; }

.ct-footer .widget-title,
.ct-footer .wp-block-heading {
  font-family: var(--sv-sans);
  font-size: var(--sv-t-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sv-muted);
  margin: 0 0 var(--sv-4);
}

.sv-foot-about p {
  font-family: var(--sv-serif);
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--sv-body);
  max-width: 46ch;
  margin: 0 0 var(--sv-3);
}

.sv-foot-about .sv-foot-mark {
  font-family: var(--sv-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--sv-ink);
  display: block;
  margin-bottom: var(--sv-3);
}

.ct-footer .wp-block-list,
.ct-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sv-2);
}

.ct-footer li { margin: 0; }

.ct-footer a {
  font-family: var(--sv-sans);
  font-size: .9375rem;
  color: var(--sv-body);
  text-decoration: none;
  transition: color .18s var(--sv-ease);
}
.ct-footer a:hover { color: var(--sv-accent-dk); text-decoration: underline; text-underline-offset: 3px; }

/* Bottom bar: the independence statement is a legal requirement, so it is set
   to be read, not shrunk into the gutter. */
.ct-footer [data-row="bottom"] {
  border-top: 1px solid var(--sv-rule);
  padding-block: var(--sv-6);
}

.sv-footer-disclaimer {
  font-family: var(--sv-sans);
  font-size: var(--sv-t-sm);
  line-height: 1.6;
  color: var(--sv-muted);
  text-align: left;
  max-width: 86ch;
  margin: 0 auto var(--sv-3);
  padding: 0;
  border: 0;
}

.ct-footer-copyright {
  font-family: var(--sv-sans);
  font-size: var(--sv-t-xs);
  color: var(--sv-muted);
  letter-spacing: .02em;
}

/* --- 6. Article shell --------------------------------------------------- */

.entry-content {
  font-family: var(--sv-serif);
  font-size: var(--sv-t-prose);
  line-height: 1.75;
  color: var(--sv-body);
}

/* Reading container. Blocksy's "wide" content style would otherwise run articles
   to the full 1160px site width, which is far past a readable measure. */
.single-post .entry-content,
.page .entry-content {
  max-width: 760px;
  margin-inline: auto;
}

.single-post .entry-content > .alignwide,
.page .entry-content > .alignwide {
  max-width: 1000px;
  margin-left: calc(50% - 500px);
}

.single-post .entry-content > .alignfull,
.page .entry-content > .alignfull { max-width: 100%; margin-left: 0; }

@media (max-width: 1040px) {
  .single-post .entry-content > .alignwide,
  .page .entry-content > .alignwide { max-width: 100%; margin-left: auto; }
}

/* Prose runs to a comfortable measure and sits left inside the container.
   Tables, figures and callouts take the full width. That asymmetry is the
   reference-desk signature: the argument is narrow, the data is wide. */
.entry-content > p,
.entry-content > ul:not(.sv-takeaways),
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > blockquote {
  max-width: var(--sv-measure);
  margin-inline: 0;
}

.entry-content > p { text-wrap: pretty; }

.entry-content h2 {
  font-size: var(--sv-t-h2);
  font-weight: 700;
  line-height: 1.15;
  margin: var(--sv-16) 0 var(--sv-4);
  padding-top: var(--sv-4);
  border-top: 1px solid var(--sv-rule);
}

.entry-content h3 {
  font-size: var(--sv-t-h3);
  font-weight: 600;
  line-height: 1.25;
  margin: var(--sv-10) 0 var(--sv-3);
}

.entry-content h4 {
  font-size: var(--sv-t-h4);
  font-weight: 600;
  margin: var(--sv-8) 0 var(--sv-2);
}

.entry-content p { margin: 0 0 var(--sv-6); }

.entry-content ul:not(.sv-takeaways),
.entry-content ol { padding-left: 1.25em; margin: 0 0 var(--sv-6); }
.entry-content li { margin-bottom: var(--sv-2); }
.entry-content li::marker { color: var(--sv-muted); }

/* Links: underlined in prose. An underline is a promise; color alone is not. */
.entry-content a:not(.wp-block-button__link):not(.ct-button) {
  color: var(--sv-accent-dk);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--sv-accent) 40%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color .18s var(--sv-ease), color .18s var(--sv-ease);
}
.entry-content a:not(.wp-block-button__link):not(.ct-button):hover {
  color: var(--sv-ink);
  text-decoration-color: var(--sv-accent);
}

.entry-content strong { font-weight: 700; color: var(--sv-ink); }

/* Model IDs and code. Mono only where it is literally code. */
.entry-content code,
.entry-content kbd {
  font-family: var(--sv-mono);
  font-size: .855em;
  font-variant-ligatures: none;
  background: var(--sv-paper);
  border: 1px solid var(--sv-rule);
  border-radius: 4px;
  padding: .1em .35em;
  color: var(--sv-ink);
  word-break: break-word;
}

.entry-content pre {
  font-family: var(--sv-mono);
  font-size: .8125rem;
  line-height: 1.7;
  background: var(--sv-ink);
  color: #E8EDEA;
  border-radius: 8px;
  padding: var(--sv-5) var(--sv-6);
  overflow-x: auto;
  margin: var(--sv-8) 0;
}
.entry-content pre code {
  background: none; border: 0; padding: 0; color: inherit; font-size: inherit;
}

/* --- 7. Tables: the hero ------------------------------------------------ */
/* Most pages exist to deliver one of these. They get first-class treatment,
   not the leftovers of a body-copy theme. */

.entry-content .wp-block-table {
  margin: var(--sv-10) 0;
  max-width: none;
}

.entry-content .wp-block-table > table,
.entry-content table {
  font-family: var(--sv-sans);
  font-size: .9375rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;   /* price columns align on the decimal */
  border-collapse: collapse;
  width: 100%;
  border: 0;
  border-top: 2px solid var(--sv-ink);
  border-bottom: 1px solid var(--sv-rule-strong);
}

.entry-content table th {
  font-size: var(--sv-t-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sv-muted);
  text-align: left;
  vertical-align: bottom;
  background: none;
  padding: var(--sv-3) var(--sv-4);
  border: 0;
  border-bottom: 1px solid var(--sv-rule-strong);
}

.entry-content table td {
  padding: var(--sv-3) var(--sv-4);
  border: 0;
  border-bottom: 1px solid var(--sv-rule);
  vertical-align: top;
  color: var(--sv-body);
}

/* First column is the label column: it names the row, so it carries weight. */
.entry-content table td:first-child {
  font-weight: 600;
  color: var(--sv-ink);
}

.entry-content table tr:last-child td { border-bottom: 0; }
.entry-content table tbody tr:hover td { background: var(--sv-paper); }

/* Wide tables scroll inside their own box. The page never scrolls sideways.
   The scroll shadow is the affordance: it appears only on the side that still
   has content, so a reader can tell the table continues past the edge. */
.entry-content .wp-block-table.is-style-stripes table { background: none; }

.entry-content figure.wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  background:
    linear-gradient(to right, var(--sv-white) 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  var(--sv-white) 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,   rgba(17,25,33,.14), rgba(17,25,33,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(17,25,33,.14), rgba(17,25,33,0)) right center;
  background-repeat: no-repeat;
  background-size: 36px 100%, 36px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Never break a word mid-syllable to make a column fit. Hyphenate, or widen
   the table and let it scroll. */
.entry-content table th,
.entry-content table td { overflow-wrap: normal; hyphens: auto; }

/* The caption belongs to the table, not to the scroll position. */
.entry-content figure.wp-block-table > figcaption { position: sticky; left: 0; }

/* The "as of" line is part of the table, not an afterthought under it. */
.entry-content .wp-block-table figcaption,
.entry-content figcaption {
  font-family: var(--sv-sans);
  font-size: var(--sv-t-xs);
  line-height: 1.5;
  color: var(--sv-muted);
  text-align: left;
  margin-top: var(--sv-3);
  padding-top: var(--sv-2);
  max-width: 76ch;
}

/* --- 8. Freshness stamp ------------------------------------------------- */
/* Was a green side-stripe box. A stale number is worse than no number, so the
   date is set as a dated record line, on a rule, above the first paragraph. */

.sv-updated {
  font-family: var(--sv-sans);
  font-size: var(--sv-t-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sv-muted);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--sv-rule);
  border-radius: 0;
  padding: 0 0 var(--sv-3);
  margin: 0 0 var(--sv-8);
  max-width: none;
  display: flex;
  align-items: center;
  gap: var(--sv-2);
}

.sv-updated::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sv-accent);
  flex: none;
}

/* --- 9. Key takeaways --------------------------------------------------- */
/* Not a card. A ruled summary block that reads as the head of the record. */

.sv-takeaways {
  list-style: none;
  margin: 0 0 var(--sv-10);
  padding: var(--sv-5) 0 var(--sv-2);
  background: none;
  border: 0;
  border-top: 2px solid var(--sv-ink);
  border-bottom: 1px solid var(--sv-rule);
  border-radius: 0;
  display: grid;
  gap: var(--sv-3);
  max-width: none;
}

.sv-takeaways li {
  font-family: var(--sv-sans);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--sv-body);
  margin: 0;
  padding-left: var(--sv-6);
  position: relative;
}

.sv-takeaways li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 10px; height: 2px;
  background: var(--sv-accent);
}

/* --- 10. Notes and cautions --------------------------------------------- */
/* Full border plus a worded label. Never a side stripe, never color alone. */

.sv-note {
  font-family: var(--sv-sans);
  font-size: .9375rem;
  line-height: 1.6;
  background: var(--sv-paper);
  border: 1px solid var(--sv-rule-strong);
  border-radius: 8px;
  padding: var(--sv-5) var(--sv-6);
  margin: var(--sv-8) 0;
  max-width: none;
}

.sv-note::before {
  content: "Note";
  display: block;
  font-size: var(--sv-t-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sv-muted);
  margin-bottom: var(--sv-2);
}

.sv-note--warn {
  background: var(--sv-caution-wash);
  border-color: color-mix(in srgb, var(--sv-caution) 30%, transparent);
}
.sv-note--warn::before { content: "Check this"; color: var(--sv-caution); }

.sv-note p { margin-bottom: var(--sv-3); }
.sv-note p:last-child { margin-bottom: 0; }

/* --- 11. FAQ ------------------------------------------------------------ */
/* Was a stack of identical bordered cards. Now a ruled question list, which is
   what a reference section actually looks like. */

.entry-content .wp-block-rank-math-faq-block { margin: var(--sv-10) 0; }

.entry-content .rank-math-faq-item {
  background: none;
  border: 0;
  border-top: 1px solid var(--sv-rule);
  border-radius: 0;
  padding: var(--sv-6) 0;
  margin: 0;
  max-width: none;
}
.entry-content .rank-math-faq-item:last-child { border-bottom: 1px solid var(--sv-rule); }

.entry-content .rank-math-faq-item .rank-math-question {
  font-family: var(--sv-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sv-ink);
  margin: 0 0 var(--sv-3);
  max-width: 60ch;
}

.entry-content .rank-math-faq-item .rank-math-answer {
  font-family: var(--sv-serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--sv-body);
  max-width: var(--sv-measure);
}
.entry-content .rank-math-faq-item .rank-math-answer p:last-child { margin-bottom: 0; }

/* --- 12. Sources note --------------------------------------------------- */
/* Sourcing is the whole product. It gets set, not hidden. */

.entry-content .sv-sources {
  font-family: var(--sv-sans);
  font-size: var(--sv-t-sm);
  line-height: 1.6;
  color: var(--sv-muted);
  background: var(--sv-paper);
  border-radius: 8px;
  padding: var(--sv-5) var(--sv-6);
  margin: var(--sv-12) 0 0;
  max-width: none;
}
.entry-content .sv-sources em { font-style: normal; }

/* --- 13. Table of contents ---------------------------------------------- */
/* Quiet. It is wayfinding, not a feature. */

.entry-content #rank-math-toc,
.entry-content .wp-block-rank-math-toc-block {
  font-family: var(--sv-sans);
  font-size: .9375rem;
  background: none;
  border: 0;
  border-left: 0;
  border-top: 1px solid var(--sv-rule);
  border-bottom: 1px solid var(--sv-rule);
  padding: var(--sv-5) 0;
  margin: var(--sv-8) 0;
  max-width: var(--sv-measure);
}

.entry-content #rank-math-toc h2,
.entry-content .wp-block-rank-math-toc-block h2 {
  font-size: var(--sv-t-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sv-muted);
  border: 0;
  margin: 0 0 var(--sv-3);
  padding: 0;
}

.entry-content #rank-math-toc ul,
.entry-content .wp-block-rank-math-toc-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sv-1);
  columns: 2;
  column-gap: var(--sv-8);
}
.entry-content #rank-math-toc li { margin: 0; break-inside: avoid; }

.entry-content #rank-math-toc a,
.entry-content .wp-block-rank-math-toc-block a {
  text-decoration: none;
  color: var(--sv-body);
}
.entry-content #rank-math-toc a:hover,
.entry-content .wp-block-rank-math-toc-block a:hover {
  color: var(--sv-accent-dk);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 700px) {
  .entry-content #rank-math-toc ul,
  .entry-content .wp-block-rank-math-toc-block ul { columns: 1; }
}

/* --- 14. Figures and diagrams ------------------------------------------- */

.entry-content figure.sv-diagram { margin: var(--sv-10) 0; }
.entry-content figure.sv-diagram img {
  border: 1px solid var(--sv-rule);
  border-radius: 8px;
  background: var(--sv-white);
  display: block;
  width: 100%;
  height: auto;
}

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

/* --- 15. Article hero --------------------------------------------------- */
/* Catalog-record opening: category label, title, then a rule. */

.ct-container > article > .hero-section,
.entry-header {
  border-bottom: 0;
}

.page-title,
.entry-title {
  font-size: var(--sv-t-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--sv-ink);
  max-width: 26ch;
}

.hero-section .entry-meta,
.entry-meta {
  font-family: var(--sv-sans);
  font-size: var(--sv-t-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sv-muted);
}

.ct-breadcrumbs {
  font-family: var(--sv-sans);
  font-size: var(--sv-t-xs);
  letter-spacing: .03em;
  color: var(--sv-muted);
}
.ct-breadcrumbs a {
  color: var(--sv-muted);
  text-decoration: none;
  display: inline-block;
  padding-block: var(--sv-2);
}
.ct-breadcrumbs a:hover { color: var(--sv-accent-dk); text-decoration: underline; }

/* Catalog-record opening: breadcrumb trail, title, then a rule that closes the
   header off from the body. */
.hero-section .entry-header {
  padding-bottom: var(--sv-6);
  border-bottom: 1px solid var(--sv-rule);
  margin-bottom: var(--sv-8);
  display: grid;
  gap: var(--sv-4);
}

.hero-section .ct-breadcrumbs { margin: 0; }
.hero-section .entry-header .page-title,
.hero-section .entry-header .entry-title { margin: 0; }

.hero-section .ct-separator { opacity: .5; }

/* --- 16. Archive cards -------------------------------------------------- */
/* Listing rows, not a grid of identical boxes. */

.entries .entry-card {
  background: none;
  border: 0;
  border-top: 1px solid var(--sv-rule);
  border-radius: 0;
  box-shadow: none;
  padding: var(--sv-6) 0;
}

.entries .entry-card .entry-title {
  font-family: var(--sv-sans);
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.015em;
  max-width: 34ch;
}
.entries .entry-card .entry-title a { color: var(--sv-ink); text-decoration: none; }
.entries .entry-card .entry-title a:hover { color: var(--sv-accent-dk); }

.entries .entry-card .entry-excerpt {
  font-family: var(--sv-serif);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--sv-body);
  max-width: 62ch;
}

.entries .entry-card .entry-meta { display: block; margin-bottom: var(--sv-2); }

/* --- 17. Buttons -------------------------------------------------------- */

.entry-content .wp-block-button__link {
  font-family: var(--sv-sans);
  font-weight: 600;
  font-size: .9375rem;
  border-radius: 6px;
  padding: .7em 1.3em;
  background: var(--sv-accent);
  color: var(--sv-white);
  text-decoration: none;
  transition: background-color .2s var(--sv-ease);
}
.entry-content .wp-block-button__link:hover { background: var(--sv-accent-dk); color: var(--sv-white); }

/* --- 18. Tool pages ----------------------------------------------------- */

/* The tools render inside .entry-content, so the article's section-rule
   treatment for h2 was drawing a stray line and 64px of dead space inside the
   tool card. Headings inside a tool belong to the tool. */
.entry-content .sv-tool :is(h2, h3, h4) {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
  max-width: none;
}
.entry-content .sv-tool :is(p, ul, ol) { max-width: none; font-family: var(--sv-sans); }


.page-id-56 .entry-content,
.page-id-57 .entry-content { max-width: 1000px; }
.page-id-56 .entry-content > p,
.page-id-57 .entry-content > p { max-width: var(--sv-measure); }

/* --- 19. Responsive ----------------------------------------------------- */

@media (max-width: 800px) {
  :root { --sv-measure: 100%; }
  .entry-content { font-size: 1.0625rem; }
  .entry-content h2 { margin-top: var(--sv-12); }
  .ct-footer [data-row="middle"] { padding-block: var(--sv-8) var(--sv-6); }
  .sv-footer-disclaimer { font-size: var(--sv-t-xs); }
  .entry-content table { font-size: .875rem; }
  .entry-content table th,
  .entry-content table td { padding: var(--sv-2) var(--sv-3); }

  /* Four or more columns cannot fit 390px without crushing words to single
     characters. Give the table a floor and let it scroll instead. Two- and
     three-column tables are left alone so they never scroll needlessly. */
  .entry-content table:has(th:nth-child(4)),
  .entry-content table:has(td:nth-child(4)) { min-width: 40rem; }

  /* The label column stays put while the data scrolls, so a row never loses
     the thing it is about. */
  .entry-content table:has(th:nth-child(4)) :is(th, td):first-child,
  .entry-content table:has(td:nth-child(4)) :is(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--sv-white);
    box-shadow: 1px 0 0 var(--sv-rule);
  }
  .entry-content table tbody tr:hover :is(th, td):first-child { background: var(--sv-white); }
}

/* --- 20. Motion and print ----------------------------------------------- */

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

/* Reference sites get printed. Make that work. */
@media print {
  .ct-header, .ct-footer [data-row="middle"], .ct-back-to-top,
  #rank-math-toc, .sv-tool { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .entry-content { font-size: 11pt; }
  .entry-content > p, .entry-content > ul, .entry-content > h2, .entry-content > h3 { max-width: none; }
  .entry-content a { text-decoration: underline; }
  .entry-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .entry-content table { page-break-inside: avoid; }
  .entry-content h2, .entry-content h3 { page-break-after: avoid; }
}