/* ============================================================================
   VALERON RESEARCH -- article layout + article type scale
   Built to valeron-article-layout-study-3.html. Requires tokens.css and
   components.css (copied verbatim, never edited here).

   The page rhythm the study establishes, and the thing to preserve when
   changing anything below: thin dark bar, large light editorial space,
   ONE dark band (the ledger), dark footer. The verdict opens on ivory,
   not graphite, so the ledger stays the only dark interruption.

   Scale goes to the reading, not the brand. The wordmark is a 21px logo
   in a 64px bar; the verdict runs to 214px. Every colour is a token
   (design system rule 1) and the light palette comes from
   data-v-theme="light" set on .v-art-root by single.php/archive.php.
   ============================================================================ */

/* The article templates own the document (template-parts/doc-open.php),
   so nothing from the parent theme resets the body for us. */
body.v-art-page{margin:0;background:var(--v-bg)}
.v-art-root *,.v-art-root *::before,.v-art-root *::after{box-sizing:border-box}

.v-art-root{
  background:var(--v-bg);
  color:var(--v-ink);
  font-family:var(--v-font-ui);
  overflow-x:hidden;
}
.v-art-bleed{padding:0 var(--v-art-pad)}
.v-art-hr{height:1px;background:var(--v-rule);border:0;margin:0}

/* ---------------------------------------------------------------- TOPBAR -- */
/* data-v-theme="dark" on the bar, like the ledger band and footer. The
   first build set nav links to light-theme --v-ink-3 on --v-ink, which
   the generated contrast ledger measured at 3.58:1 and failed. Inside a
   dark island the same token resolves to 5.45:1 on the dark ground. */
.v-art-topbar{
  background:var(--v-bg);
  color:var(--v-ink);
}
.v-art-topbar__in{
  height:var(--v-art-topbar-h);
  display:flex;align-items:center;justify-content:space-between;gap:var(--v-space-5);
}
/* The logo never reacts to hover: it is the mark, not a control whose
   state needs signalling. The first letter carries --v-accent-hot as a
   logotype (exempt from the text floor, see tokens.css). */
.v-art-logo,
.v-art-logo:hover,
.v-art-logo:focus,
.v-art-logo:visited{color:var(--v-ink);text-decoration:none}
.v-art-logo__mark{color:var(--v-accent-hot)}
.v-art-logo{
  font-family:var(--v-font-mark);
  font-weight:600;
  font-size:var(--v-art-logo);
  letter-spacing:var(--v-art-logo-track);
  text-transform:uppercase;
  color:inherit;
  text-decoration:none;
  white-space:nowrap;
}
/* wp_nav_menu() renders a <ul><li>, so the list needs resetting here:
   without it the topbar shows bullets and inherited list padding. */
.v-art-topnav{
  list-style:none;margin:0;padding:0;
  display:flex;gap:30px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
}
.v-art-topnav a{color:var(--v-ink-3);text-decoration:none}
.v-art-topnav a:hover,
.v-art-topnav .current-menu-item>a,
.v-art-topnav a[aria-current]{color:var(--v-ink)}
/* Add the CSS class "ext" to a menu item to mark an off-site link. */
.v-art-topnav .ext>a{color:var(--v-brass)}

/* --------------------------------------------------------------- VERDICT -- */
.v-art-verdict{
  padding-top:clamp(40px,5.4vw,84px);
  padding-bottom:clamp(32px,4vw,60px);
}
/* The dated-instance label. Not decoration: the verdict is the biggest
   element on an evergreen page, so it has to read unmistakably as a
   worked example rather than live conditions, which is the tense-framing
   rule the whole content system rests on (03-article-learn.md section 3,
   enforced by qc-rules.js checkTenseFraming). */
.v-art-verdict__label{
  display:flex;flex-wrap:wrap;gap:var(--v-space-5);
  font-family:var(--v-font-mono);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--v-ink-3);
  margin-bottom:clamp(16px,2vw,28px);
}
.v-art-verdict__label b{color:var(--v-brass);font-weight:500}
.v-art-verdict__row{
  display:grid;grid-template-columns:1fr auto;
  align-items:end;gap:clamp(24px,4vw,64px);
}
.v-art-verdict__state{
  font-size:var(--v-art-verdict);
  line-height:var(--v-art-verdict-lh);
  letter-spacing:var(--v-art-verdict-ls);
  font-weight:600;
  color:var(--v-accent-text);
  min-width:0;
}
/* The suggested size. Deliberately NOT inline at the state's own size:
   "STRESSED / AVOID" measures 7.89em and overflows every viewport under
   1920px, where the state word alone is 4.50em and fits comfortably.
   Colour is --v-ink-2 (5.76:1), not ink at 22% opacity (1.60:1) -- this
   word IS the sizing instruction, and rule 4 says the state carries a
   word, so the most consequential word on the page cannot be the least
   legible thing on it. Subordinate, still readable. */
.v-art-verdict__size{
  font-size:var(--v-art-verdict-size);
  font-style:normal;
  color:var(--v-ink-2);
  letter-spacing:-.02em;
  white-space:nowrap;
}
.v-art-verdict__score{
  text-align:right;
  font-family:var(--v-font-mono);
  line-height:.78;
  font-variant-numeric:tabular-nums;
}
/* Ink, not oxblood: two loud reds on one page and the accent stops
   meaning anything. The oxblood is reserved for the state alone. */
.v-art-verdict__n{
  display:block;
  font-size:var(--v-art-score);
  letter-spacing:var(--v-art-score-ls);
  color:var(--v-ink);
}
.v-art-verdict__d{
  font-size:11px;color:var(--v-ink-3);
  letter-spacing:.18em;margin-top:16px;
}

/* ------------------------------------------------------------------ HEAD -- */
.v-art-head{
  padding-top:clamp(40px,5vw,76px);
  padding-bottom:clamp(36px,4.6vw,68px);
}
.v-art-kicker{
  display:flex;flex-wrap:wrap;gap:26px;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--v-brass);
  margin-bottom:clamp(22px,2.6vw,36px);
}
.v-art-kicker span+span{color:var(--v-ink-3)}
.v-art-h1{
  font-size:var(--v-art-h1);
  font-weight:600;
  letter-spacing:var(--v-art-h1-ls);
  line-height:var(--v-art-h1-lh);
  max-width:18ch;
  margin:0;
}
.v-art-meta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  margin-top:clamp(36px,4.2vw,64px);
  border-top:var(--v-border) solid var(--v-rule);
  padding-top:20px;
  font-size:11.5px;color:var(--v-ink-3);
}
.v-art-meta b{display:block;color:var(--v-ink);font-weight:500;font-size:13px;margin-bottom:3px}
.v-art-meta .v-art-mono{font-family:var(--v-font-mono);font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- OPENING -- */
.v-art-opening{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(40px,5vw,88px);
  align-items:start;
  padding-bottom:clamp(52px,6.6vw,96px);
}
.v-art-lede{
  font-size:var(--v-art-lede);
  line-height:var(--v-art-lede-lh);
  letter-spacing:-.018em;
  max-width:27ch;
  color:var(--v-ink);
}
.v-art-lede p{margin:0}
.v-art-lede p+p{margin-top:.6em}
.v-art-lede b,.v-art-lede strong{color:var(--v-accent-text);font-weight:600}
.v-art-head .v-art-lede{margin-top:clamp(24px,3vw,40px)}
.v-art-plot{margin:0}
.v-art-plot svg,.v-art-plot img{display:block;width:100%;height:auto}
.v-art-plot__cap{
  margin-top:14px;
  font-family:var(--v-font-mono);font-size:10.5px;
  color:var(--v-ink-3);letter-spacing:.1em;
  display:flex;justify-content:space-between;
}

/* ------------------------------------------------------------------ BODY -- */
/* Three columns: a number rail, the prose measure, and a side column for
   a pulled figure. The rail is what makes the page read as a numbered
   research note rather than a blog post. */
.v-art-body{
  display:grid;
  grid-template-columns:minmax(0,var(--v-art-rail)) minmax(0,var(--v-art-measure)) 1fr;
  gap:clamp(24px,4vw,64px);
  padding-top:var(--v-art-rhythm);
}
/* A section with nothing in the side column: rail + measure only, centred.
   Keeping the third 1fr column for a legacy post (which has no reading to
   put beside it) leaves roughly 1200px of empty page at 1920 and pins the
   prose to the left edge, which is what the first live legacy article
   looked like. */
.v-art-body--solo{
  grid-template-columns:minmax(0,var(--v-art-rail)) minmax(0,var(--v-art-measure));
  justify-content:center;
}
.v-art-body__num{
  font-family:var(--v-font-mono);
  font-size:11px;color:var(--v-brass);
  letter-spacing:.1em;padding-top:12px;
}
.v-art-block{padding-bottom:var(--v-art-rhythm)}
.v-art-block h2,.v-art-h2{
  font-size:var(--v-art-h2);
  font-weight:600;
  letter-spacing:-.028em;
  line-height:var(--v-art-h2-lh);
  margin:0 0 24px;
}
.v-art-block h3{
  font-size:var(--v-art-h3);font-weight:600;line-height:1.3;
  margin:0 0 12px;
}
.v-art-block p{
  font-size:var(--v-art-body);
  line-height:var(--v-art-body-lh);
  margin:0 0 24px;
}
.v-art-block p:last-child{margin-bottom:0}
.v-art-block a{color:var(--v-accent-text);text-decoration:underline;text-underline-offset:2px}
.v-art-block a:visited{color:var(--v-accent-text)}
.v-art-block a:hover{color:var(--v-accent-hot)}
.v-art-block strong{font-weight:600}
.v-art-block ul,.v-art-block ol{margin:0 0 24px;padding-left:1.3em;font-size:var(--v-art-body);line-height:var(--v-art-body-lh)}
.v-art-block li+li{margin-top:.4em}
.v-art-block code{
  font-family:var(--v-font-mono);font-size:.88em;
  background:var(--v-panel-2);border:var(--v-border) solid var(--v-rule);
  border-radius:var(--v-radius-1);padding:.1em .35em;
}
.v-art-block .v-tblwrap{margin-bottom:24px}

.v-art-side .v-art-side__k{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--v-brass);display:block;margin-bottom:10px;
}
.v-art-side__big{
  font-family:var(--v-font-mono);
  font-size:clamp(34px,4.2vw,58px);
  letter-spacing:-.04em;line-height:.9;
  color:var(--v-ink);
  font-variant-numeric:tabular-nums;
  display:block;
}
.v-art-side p{font-size:12.5px;line-height:1.6;color:var(--v-ink-3);margin:14px 0 0}

/* ---------------------------------------------------------------- LEDGER -- */
/* The single dark band. data-v-theme="dark" is set on this section in
   the template, so tokens.css's dark palette applies inside it and every
   colour here stays a token -- no bespoke greys, and the dark-theme
   pairs are already in docs/contrast-ledger.md. Reuses the component
   layer's .v-ledger* class names (brief section 5.8, "do not rebuild
   it"); what changes is the surface it sits on, not the structure. */
.v-art-ledger{
  background:var(--v-bg);
  color:var(--v-ink);
  padding:var(--v-art-rhythm) 0;
}
.v-art-ledger .v-ledger{background:transparent;border-top:0}
.v-art-ledger .v-ledger__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
}
.v-art-ledger .v-ledger__cell{
  padding:0 clamp(24px,3.4vw,56px) 0 0;
  border-left:0;
}
.v-art-ledger .v-ledger__cell+.v-ledger__cell{
  border-left:var(--v-border) solid var(--v-rule);
  padding-left:clamp(24px,3.4vw,56px);
}
.v-art-ledger .v-ledger__n{
  font-family:var(--v-font-mono);
  font-size:clamp(28px,3vw,46px);
  color:var(--v-brass);
  letter-spacing:-.03em;line-height:1;
  display:block;margin-bottom:6px;
  font-variant-numeric:tabular-nums;
}
.v-art-ledger .v-ledger__k{
  display:block;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--v-ink-3);
  margin-bottom:22px;
}
.v-art-ledger .v-ledger__t{
  font-size:16px;line-height:1.62;color:var(--v-ink-2);
}
.v-art-ledger .v-ledger__t p{margin:0}
.v-art-ledger .v-ledger__t p+p{margin-top:.8em}
/* Links inside the dark ledger band had no explicit color at all --
   `a{color:inherit}` (components.css) made them the same shade as the
   surrounding --v-ink-2 body text, with no underline: functionally
   invisible, confirmed from a live screenshot (2026-09-30). --v-accent-text
   is the token this theme already measured as dark-safe (tokens.css:
   "text-safe oxblood"); --v-accent-hot resolves to the SAME value under
   the dark theme (tokens.css's own note: #990000 is only 2.21:1 there),
   so hover adds the underline rather than a color that was never going
   to look different. */
.v-art-ledger .v-ledger__t a{color:var(--v-accent-text);text-decoration:underline;text-underline-offset:2px}
.v-art-ledger .v-ledger__t a:visited{color:var(--v-accent-text)}
.v-art-ledger .v-ledger__t a:hover{color:var(--v-accent-hot);text-decoration-thickness:2px}

/* ----------------------------------------------------------------- STATS -- */
.v-art-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:var(--v-border) solid var(--v-rule);
  margin-top:clamp(44px,5.4vw,80px);
}
.v-art-stat{
  padding:26px 0 0 24px;
  border-left:var(--v-border) solid var(--v-rule-soft);
}
.v-art-stat:first-child{border-left:0;padding-left:0}
.v-art-stat__k{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--v-ink-3);display:block;margin-bottom:12px;
}
.v-art-stat__v{
  font-family:var(--v-font-mono);
  font-size:clamp(26px,3.2vw,44px);
  letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;
  display:block;
}
.v-art-stat__v--accent{color:var(--v-accent-text)}

/* ------------------------------------------------------------ DATA BLOCK -- */
.v-art-data{
  border-top:var(--v-border) solid var(--v-rule);
  border-bottom:var(--v-border) solid var(--v-rule);
  padding:var(--v-space-6) 0;
  margin-bottom:24px;
}
.v-art-data__stamp{
  font-family:var(--v-font-mono);
  font-size:var(--v-text-data);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--v-brass);
  margin-bottom:var(--v-space-4);
}
.v-art-data__body{font-size:var(--v-art-body);line-height:var(--v-art-body-lh);color:var(--v-ink)}
.v-art-data__body p{margin:0}

/* ----------------------------------------------------------- METHOD NOTE -- */
.v-art-method{
  font-family:var(--v-font-mono);
  font-size:13px;line-height:1.7;
  color:var(--v-ink-3);
}
.v-art-method__k{
  display:block;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--v-brass);margin-bottom:10px;
}

/* ------------------------------------------------------------------- FAQ -- */
.v-art-faq__item{
  padding:26px 0;
  border-top:var(--v-border) solid var(--v-rule-soft);
}
.v-art-faq__item:first-of-type{border-top:var(--v-border) solid var(--v-rule)}
.v-art-faq__q{font-size:var(--v-text-value);font-weight:500;margin:0 0 10px;line-height:1.35}
.v-art-faq__a{font-size:15.5px;line-height:1.66;color:var(--v-ink-2)}
.v-art-faq__a p{margin:0}

/* --------------------------------------------------------------- RELATED -- */
.v-art-related__list{list-style:none;margin:0;padding:0}
.v-art-related__item{border-top:var(--v-border) solid var(--v-rule-soft)}
.v-art-related__item:last-child{border-bottom:var(--v-border) solid var(--v-rule-soft)}
.v-art-related__link{
  position:relative;
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--v-space-3);
  padding:16px 0;color:var(--v-ink);text-decoration:none;
}
.v-art-related__title{font-size:var(--v-text-value);font-weight:500}
.v-art-related__cluster{
  font-family:var(--v-font-mono);font-size:var(--v-text-chip);
  letter-spacing:var(--v-track-chip);text-transform:uppercase;
  color:var(--v-ink-3);white-space:nowrap;
}
.v-art-related__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--v-ink);transform:scaleY(1);transform-origin:bottom;opacity:0;
}
.v-art-related__link:hover::after{opacity:1}

/* ------------------------------------------------------------- RISK NOTE -- */
.v-art-risk{
  font-size:var(--v-art-caption);
  line-height:1.6;color:var(--v-ink-3);
  max-width:var(--v-art-measure);
}
.v-art-risk p{margin:0}

/* ---------------------------------------------------------------- FOOTER -- */
/* Dark, like the ledger. data-v-theme="dark" again, same reasoning. */
.v-art-foot{
  margin-top:clamp(72px,9vw,140px);
  background:var(--v-bg);
  color:var(--v-ink-3);
  padding:clamp(48px,6vw,80px) 0 40px;
}
.v-art-foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.v-art-foot h4{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--v-ink);margin:0 0 18px;font-weight:500;
}
.v-art-foot a{color:var(--v-ink-3);text-decoration:none;display:block;font-size:13px;line-height:2.1}
.v-art-foot a:hover{color:var(--v-ink)}
.v-art-foot__desk{font-size:14px;line-height:1.7;max-width:40ch;margin:0}
.v-art-foot__desk b{color:var(--v-ink);font-weight:500}
.v-art-foot__legal{
  margin-top:clamp(40px,5vw,72px);
  border-top:var(--v-border) solid var(--v-rule);
  padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--v-space-3);
  font-family:var(--v-font-mono);font-size:10.5px;
}

/* -------------------------------------------------- GRACEFUL DEGRADATION -- */
/* Legacy posts (brief acceptance item 9): no markers, so no verdict, no
   ledger, no stats. Just the head and plain prose at article scale. */
/* Legacy posts now sit inside .v-art-block (single.php), which already
   supplies the measure, the type scale and the section rhythm. What is
   left here is only what old WordPress markup adds and the pipeline's
   own markdown never does: images, embeds and figures. */
.v-art-legacy > *:first-child{margin-top:0}
.v-art-legacy figure,.v-art-legacy .wp-caption{margin:0 0 24px;max-width:100%}
.v-art-legacy figcaption,.v-art-legacy .wp-caption-text{
  font-size:var(--v-art-caption);color:var(--v-ink-3);line-height:1.5;margin-top:8px;
}
.v-art-legacy iframe,.v-art-legacy embed,.v-art-legacy object{max-width:100%}
.v-art-legacy blockquote{
  margin:0 0 24px;padding-left:var(--v-space-4);
  border-left:3px solid var(--v-rule);color:var(--v-ink-2);
}
.v-art-legacy img{max-width:100%;height:auto}
.v-art-block--legacy{max-width:none}

/* ------------------------------------------------------------ RESPONSIVE -- */
@media (max-width:900px){
  .v-art-opening,
  .v-art-body,
  .v-art-meta,
  .v-art-foot__grid{grid-template-columns:1fr}
  .v-art-body__num{display:none}
  .v-art-ledger .v-ledger__grid{grid-template-columns:1fr}
  .v-art-ledger .v-ledger__cell{padding-right:0}
  .v-art-ledger .v-ledger__cell+.v-ledger__cell{
    border-left:0;
    border-top:var(--v-border) solid var(--v-rule);
    padding-left:0;padding-top:32px;margin-top:32px;
  }
  .v-art-stats{grid-template-columns:1fr 1fr}
  .v-art-stat{border-left:0;padding-left:0}
  .v-art-stat:nth-child(n+3){margin-top:var(--v-space-5)}
  .v-art-verdict__row{grid-template-columns:1fr}
  .v-art-verdict__score{text-align:left}
  .v-art-topnav{display:none}
}

/* ============================================================================
   CLUSTER ARCHIVE -- valeron-archive-layout-study.html
   Class prefix .v-arc-. Same surface and tokens as the article: light page,
   dark topbar and footer. No dark band here; the study has none.
   ============================================================================ */

.v-arc-crumb{
  font-family:var(--v-font-mono);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--v-ink-3);
  padding-top:clamp(28px,3.4vw,48px);
}
.v-arc-crumb__sep{color:var(--v-rule);margin:0 10px}

.v-arc-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(32px,5vw,88px);align-items:end;
  padding-top:clamp(24px,3vw,40px);
  padding-bottom:clamp(40px,5vw,72px);
}
.v-arc-h1{
  font-size:var(--v-art-archive-h1);
  line-height:var(--v-art-archive-h1-lh);
  letter-spacing:-.05em;
  font-weight:600;
  margin:0;
}
.v-arc-h1sub{
  font-family:var(--v-font-mono);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--v-brass);margin-top:22px;
}
.v-arc-intro{font-size:clamp(16px,1.35vw,18.5px);line-height:1.62;color:var(--v-ink)}
.v-arc-intro p{margin:0 0 16px}
.v-arc-intro p:last-child{margin-bottom:0}

/* the latest dated reading */
.v-arc-strip{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:var(--v-border) solid var(--v-rule);
  border-bottom:var(--v-border) solid var(--v-rule);
}
.v-arc-strip__c{padding:22px 0 22px 22px;border-left:var(--v-border) solid var(--v-rule-soft);min-width:0}
.v-arc-strip__c:first-child{border-left:0;padding-left:0}
.v-arc-strip__k{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--v-ink-3);display:block;margin-bottom:10px;
}
.v-arc-strip__v{
  font-family:var(--v-font-mono);
  font-size:clamp(20px,2.3vw,32px);
  letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;
  display:block;
}
.v-arc-strip__v--accent{color:var(--v-accent-text)}
.v-arc-strip__v--date{color:var(--v-brass);font-size:15px;letter-spacing:0}

/* shared small labels */
.v-arc-k{
  font-family:var(--v-font-mono);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--v-brass);display:block;margin-bottom:20px;
}
.v-arc-m{
  font-family:var(--v-font-mono);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--v-ink-3);margin-top:22px;
  font-variant-numeric:tabular-nums;
}

/* lead */
.v-arc-lead{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(32px,4.6vw,80px);align-items:center;
  padding-top:clamp(44px,5.6vw,88px);
  padding-bottom:clamp(44px,5.6vw,88px);
}
.v-arc-lead__art{
  display:block;
  aspect-ratio:16/9;
  background:var(--v-panel);
  border:var(--v-border) solid var(--v-rule-soft);
  overflow:hidden;
}
.v-arc-lead__art svg,.v-arc-lead__art img{display:block;width:100%;height:100%;object-fit:cover}
.v-arc-lead__h{
  font-size:clamp(28px,4.2vw,58px);
  font-weight:600;letter-spacing:-.038em;line-height:.98;
  margin:0 0 20px;max-width:20ch;
}
.v-arc-lead__h a{color:inherit;text-decoration:none}
.v-arc-lead__p{font-size:17px;line-height:1.6;color:var(--v-ink-2);max-width:44ch;margin:0}

/* section titles */
.v-arc-section{padding-top:clamp(40px,5vw,72px)}
.v-arc-gtitle{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--v-space-4);
  border-bottom:var(--v-border) solid var(--v-rule);
  padding-bottom:14px;
  margin-bottom:clamp(28px,3.4vw,44px);
}
.v-arc-gtitle h3{
  font-size:14px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin:0;
}
.v-arc-gtitle__n{
  font-family:var(--v-font-mono);font-size:11px;color:var(--v-ink-3);
  text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;
}

/* state cards. The 1px grid gap over a rule-coloured background draws the
   hairlines between cards without per-card borders. */
.v-arc-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--v-rule-soft);
}
.v-arc-card{
  display:block;background:var(--v-bg);
  padding:0 0 30px;color:var(--v-ink);text-decoration:none;
}
.v-arc-card__art{
  background:var(--v-panel);
  border-bottom:var(--v-border) solid var(--v-rule-soft);
  transition:background var(--v-motion-fast) var(--v-motion-ease);
}
.v-arc-card__art svg{display:block;width:100%;height:auto}
.v-arc-card:hover .v-arc-card__art{background:var(--v-panel-2)}
.v-arc-card__in{padding:22px 26px 0}
.v-arc-card .v-arc-k{font-size:9.5px;margin-bottom:12px}
.v-arc-card__h{font-size:20px;font-weight:600;letter-spacing:-.022em;line-height:1.14;margin:0 0 12px}
.v-arc-card__p{font-size:14px;line-height:1.58;color:var(--v-ink-3);margin:0}
.v-arc-card .v-arc-m{font-size:10px;margin-top:16px}

/* ruled list */
.v-arc-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:baseline;
  padding:20px 0;border-bottom:var(--v-border) solid var(--v-rule-soft);
  color:var(--v-ink);text-decoration:none;
}
.v-arc-row:first-child{border-top:var(--v-border) solid var(--v-rule)}
.v-arc-row__h{font-size:19px;font-weight:500;letter-spacing:-.018em;margin:0;transition:color var(--v-motion-fast) var(--v-motion-ease)}
.v-arc-row:hover .v-arc-row__h{color:var(--v-accent-hot)}
.v-arc-row__t{
  font-family:var(--v-font-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--v-ink-3);white-space:nowrap;
}

/* other clusters */
.v-arc-others{padding-top:clamp(56px,7vw,104px)}
.v-arc-oc{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--v-rule-soft);
}
.v-arc-oc a{
  display:block;background:var(--v-bg);padding:26px 24px;
  color:var(--v-ink);text-decoration:none;
  transition:background var(--v-motion-fast) var(--v-motion-ease);
}
.v-arc-oc a:hover{background:var(--v-panel-2)}
.v-arc-oc__n{font-family:var(--v-font-mono);font-size:10px;color:var(--v-ink-3);letter-spacing:.14em;text-transform:uppercase;display:block}
.v-arc-oc__h{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:10px;display:block}

.v-arc-empty{font-size:var(--v-art-body);color:var(--v-ink-2);margin:0}

@media (max-width:1000px){
  .v-arc-cards,.v-arc-oc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v-arc-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v-arc-strip__c:nth-child(3n+1){border-left:0;padding-left:0}
}
@media (max-width:760px){
  .v-arc-head,.v-arc-lead,.v-arc-cards,.v-arc-oc{grid-template-columns:1fr}
  .v-arc-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v-arc-strip__c{border-left:0;padding-left:0}
  .v-arc-row{grid-template-columns:1fr;gap:6px}
}

/* ============================================================================
   FRONT PAGE -- valeron-frontpage-study.html
   Class prefix .v-home-. Opt-in template (templates/frontpage.php); see
   functions.php for why it is not front-page.php.
   ============================================================================ */

.v-home-dateline{
  display:flex;flex-wrap:wrap;gap:26px;align-items:center;
  font-family:var(--v-font-mono);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--v-ink-3);
  padding:18px 0;
  border-bottom:var(--v-border) solid var(--v-rule);
}
.v-home-dateline__b{color:var(--v-brass)}
.v-home-dateline__r{margin-left:auto}

/* lead */
/* No cluster graphic: one column, so the lead is not a half-width column
   of text beside an empty half. */
.v-home-lead--solo{grid-template-columns:minmax(0,1fr)!important}
.v-home-lead--solo .v-home-h1{max-width:20ch}
.v-home-lead{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);align-items:center;
  padding-top:clamp(40px,5.4vw,80px);
  padding-bottom:clamp(44px,5.6vw,88px);
}
.v-home-h1{
  font-size:var(--v-home-h1);
  line-height:var(--v-home-h1-lh);
  letter-spacing:var(--v-home-h1-ls);
  font-weight:600;
  max-width:18ch;
  margin:0;
}
.v-home-h1 a{color:inherit;text-decoration:none}
.v-home-lede{
  font-size:var(--v-home-lede);
  line-height:1.46;color:var(--v-ink-2);
  max-width:40ch;
  margin:clamp(24px,2.8vw,38px) 0 0;
}
.v-home-lead__m{
  display:flex;flex-wrap:wrap;gap:18px;
  font-family:var(--v-font-mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--v-ink-3);
  margin-top:clamp(22px,2.4vw,32px);
  font-variant-numeric:tabular-nums;
}
.v-home-lead__art{
  display:block;aspect-ratio:16/9;overflow:hidden;
  background:var(--v-panel);
  border:var(--v-border) solid var(--v-rule-soft);
}
.v-home-lead__art svg,.v-home-lead__art img{display:block;width:100%;height:100%;object-fit:cover}

/* section headings reuse .v-arc-gtitle for the rule and the baseline row */
.v-home-gt{font-size:12.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;margin:0}
.v-home-gt__more{
  font-family:var(--v-font-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--v-brass);text-decoration:none;white-space:nowrap;
}

/* three up */
/* The grid draws its hairlines with a 1px gap over a ruled background, so
   a fixed three columns with only two cards leaves a lit, empty third
   cell that reads as a broken card. Column count follows the card count. */
.v-home-three{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--v-rule-soft);
}
.v-home-three--1{grid-template-columns:minmax(0,1fr)}
.v-home-three--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.v-home-card{display:block;background:var(--v-bg);color:var(--v-ink);text-decoration:none}
.v-home-card__art{
  background:var(--v-panel);
  border-bottom:var(--v-border) solid var(--v-rule-soft);
  aspect-ratio:16/9;overflow:hidden;
  transition:background var(--v-motion-fast) var(--v-motion-ease);
}
.v-home-card__art svg,.v-home-card__art img{display:block;width:100%;height:100%;object-fit:cover}
.v-home-card:hover .v-home-card__art{background:var(--v-panel-2)}
.v-home-card__in{padding:22px 26px 30px}
.v-home-card__h{font-size:23px;font-weight:600;letter-spacing:-.026em;line-height:1.12;margin:0 0 12px}
.v-home-card__p{font-size:14.5px;line-height:1.56;color:var(--v-ink-3);margin:0}
.v-home-card__m{
  font-family:var(--v-font-mono);font-size:9.5px;letter-spacing:.14em;
  color:var(--v-ink-3);margin-top:16px;font-variant-numeric:tabular-nums;
}

/* by cluster */
.v-home-byc{padding-top:clamp(52px,6.6vw,96px)}
.v-home-cols{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--v-rule-soft);
}
.v-home-col{background:var(--v-bg);padding:24px 24px 28px}
.v-home-col__h{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--v-space-3);
  border-bottom:var(--v-border) solid var(--v-rule);
  padding-bottom:12px;margin-bottom:16px;
}
.v-home-col__h a{color:inherit;text-decoration:none}
.v-home-col__h b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.v-home-col__h span{font-family:var(--v-font-mono);font-size:9.5px;color:var(--v-ink-3);letter-spacing:.12em}
.v-home-col__a{
  display:block;font-size:14.5px;line-height:1.42;
  padding:11px 0;border-bottom:var(--v-border) solid var(--v-rule-soft);
  color:var(--v-ink-2);text-decoration:none;
  transition:color var(--v-motion-fast) var(--v-motion-ease);
}
.v-home-col__a:last-child{border-bottom:0}
.v-home-col__a:hover{color:var(--v-accent-hot)}
.v-home-col__st{
  display:block;font-family:var(--v-font-mono);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--v-brass);margin-top:5px;
}

/* recent */
.v-home-recent{padding-top:clamp(52px,6.6vw,96px)}
.v-home-row{
  display:grid;grid-template-columns:96px minmax(0,1fr) auto;
  gap:clamp(20px,3vw,48px);align-items:baseline;
  padding:19px 0;border-bottom:var(--v-border) solid var(--v-rule-soft);
  color:var(--v-ink);text-decoration:none;
}
.v-home-row:first-child{border-top:var(--v-border) solid var(--v-rule)}
.v-home-row__d{
  font-family:var(--v-font-mono);font-size:10.5px;
  color:var(--v-ink-3);letter-spacing:.1em;font-variant-numeric:tabular-nums;
}
.v-home-row__h{
  font-size:19.5px;font-weight:500;letter-spacing:-.018em;margin:0;
  transition:color var(--v-motion-fast) var(--v-motion-ease);
}
.v-home-row:hover .v-home-row__h{color:var(--v-accent-hot)}
.v-home-row__t{
  font-family:var(--v-font-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--v-brass);white-space:nowrap;
}

/* engine strip. data-v-theme="dark" on the section, so --v-bg/--v-ink
   here are the dark palette and every colour stays a token. */
.v-home-engine{
  margin-top:clamp(56px,7vw,104px);
  background:var(--v-bg);color:var(--v-ink);
  padding:clamp(36px,4.4vw,64px) 0;
}
.v-home-engine__in{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:40px;align-items:center;
}
.v-home-engine__k{
  font-family:var(--v-font-mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--v-brass);margin-bottom:16px;
}
.v-home-engine__h{
  font-size:clamp(24px,3.2vw,42px);font-weight:600;
  letter-spacing:-.032em;line-height:1.04;max-width:26ch;margin:0;
}
.v-home-engine__p{font-size:15px;line-height:1.6;color:var(--v-ink-3);max-width:46ch;margin:16px 0 0}
/* Border is --v-ink-3 (5.45:1 on the dark ground), not --v-rule (1.31:1).
   A divider can be exempt from the non-text floor; the boundary of a
   button cannot, because WCAG 1.4.11 covers the visual information
   needed to identify a UI component. */
.v-home-engine__btn{
  border:var(--v-border) solid var(--v-ink-3);
  padding:15px 26px;white-space:nowrap;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--v-ink);text-decoration:none;
  transition:background var(--v-motion-fast) var(--v-motion-ease),
             border-color var(--v-motion-fast) var(--v-motion-ease);
}
.v-home-engine__btn:hover{background:var(--v-accent);border-color:var(--v-accent)}

/* the footer sits directly under the engine strip on the front page, so
   it drops its own top margin and takes a rule instead */
.v-art-foot--joined{margin-top:0;border-top:var(--v-border) solid var(--v-rule)}
.v-art-foot__h{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--v-ink);margin:0 0 18px;font-weight:500}
.v-art-foot__risk{font-size:12px;line-height:1.7;color:var(--v-ink-3);max-width:52ch;margin:24px 0 0}

@media (max-width:1000px){
  .v-home-three,.v-home-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .v-home-lead,.v-home-three,.v-home-cols,.v-home-engine__in{grid-template-columns:1fr}
  .v-home-row{grid-template-columns:1fr;gap:6px}
  .v-home-dateline__r{margin-left:0}
}

/* ============================================================================
   EDITORIAL PAGES -- Prototypes/about.html, methodology.html, compare.html
   (and Prototypes/shared.css, whose shared parts are folded into the
   .v-art-*/.v-arc-* rules above rather than duplicated here).
   Class prefix .v-pg-.
   ============================================================================ */

/* shared page head: crumb, oversized title, lede + side column */
.v-pg-head{padding-top:clamp(30px,3.8vw,58px);padding-bottom:clamp(36px,4.4vw,64px)}
.v-pg-h1{
  font-size:clamp(46px,9vw,140px);
  font-weight:600;letter-spacing:-.05em;line-height:.86;
  max-width:14ch;margin:0;
}
.v-pg-h1--narrow{max-width:13ch;font-size:clamp(44px,8.4vw,132px)}
.v-pg-sub{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(32px,5vw,80px);align-items:end;
  margin-top:clamp(32px,4vw,58px);
}
.v-pg-lede{
  font-size:clamp(19px,1.9vw,26px);line-height:1.38;letter-spacing:-.014em;
  max-width:32ch;margin:0;
}
.v-pg-lede b{color:var(--v-accent-text);font-weight:600}
.v-pg-facts{font-family:var(--v-font-mono);font-size:11.5px;line-height:2.2;color:var(--v-ink-3)}
.v-pg-facts b{color:var(--v-ink);font-weight:500}

/* jump list (methodology) */
.v-pg-jump{font-family:var(--v-font-mono);font-size:11px;letter-spacing:.12em}
.v-pg-jump a{
  display:block;padding:7px 0;
  border-bottom:var(--v-border) solid var(--v-rule-soft);
  color:var(--v-ink-2);text-decoration:none;
}
.v-pg-jump a:hover{color:var(--v-accent-hot)}

/* buttons */
.v-pg-btn{
  display:inline-block;padding:15px 26px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  transition:background var(--v-motion-fast) var(--v-motion-ease);
}
.v-pg-btn--primary{background:var(--v-accent);color:var(--v-panel)}
.v-pg-btn--primary:hover{background:var(--v-ink)}
.v-pg-btn--secondary{border:var(--v-border) solid var(--v-ink-3);color:var(--v-ink)}

/* dashed-rule list, used on both the about and compare pages */
.v-pg-plain{list-style:none;margin:0 0 22px;padding:0}
.v-pg-plain li{font-size:17px;line-height:1.66;padding-left:22px;position:relative}
.v-pg-plain li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:9px;height:1px;background:var(--v-brass);
}
.v-pg-subhead{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:32px 0 12px}

/* ---------------------------------------------------------------- ABOUT -- */
.v-pg-cred{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:var(--v-border) solid var(--v-rule);
  border-bottom:var(--v-border) solid var(--v-rule);
}
.v-pg-cred__c{padding:24px 0 24px 22px;border-left:var(--v-border) solid var(--v-rule-soft)}
.v-pg-cred__c:first-child{border-left:0;padding-left:0}
.v-pg-cred__k{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--v-ink-3);display:block;margin-bottom:11px;
}
.v-pg-cred__v{
  font-family:var(--v-font-mono);font-size:clamp(22px,2.6vw,36px);
  letter-spacing:-.04em;line-height:1;display:block;
  font-variant-numeric:tabular-nums;
}
.v-pg-cred__v--small{font-size:16px;letter-spacing:-.01em;line-height:1.35}
.v-pg-cred__v--brass{color:var(--v-brass)}

/* quote band: the page's one dark interruption */
.v-pg-quote{
  margin-top:clamp(48px,6vw,88px);
  background:var(--v-bg);color:var(--v-ink);
  padding:clamp(40px,5vw,76px) 0;
}
.v-pg-quote__q{
  font-size:clamp(24px,3.4vw,46px);font-weight:600;
  letter-spacing:-.034em;line-height:1.14;max-width:26ch;margin:0;
}
.v-pg-quote__a{
  font-family:var(--v-font-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--v-brass);margin-top:26px;
}

/* disclosure */
.v-pg-disc{margin-top:clamp(48px,6vw,88px)}
.v-pg-dg{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--v-rule-soft)}
.v-pg-dc{background:var(--v-bg);padding:clamp(26px,3vw,40px)}
.v-pg-dc__k{
  font-family:var(--v-font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--v-brass);display:block;margin-bottom:16px;
}
.v-pg-dc h3{font-size:20px;font-weight:600;letter-spacing:-.022em;margin:0 0 12px}
.v-pg-dc p{font-size:15px;line-height:1.62;color:var(--v-ink-2);margin:0 0 14px}
.v-pg-dc p:last-child{margin-bottom:0}

/* ---------------------------------------------------------- METHODOLOGY -- */
.v-pg-formula{
  margin-top:clamp(40px,5vw,72px);
  background:var(--v-panel);
  border:var(--v-border) solid var(--v-rule);
  padding:clamp(26px,3.2vw,44px);
}
.v-pg-formula__k{
  font-family:var(--v-font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--v-brass);margin-bottom:22px;
}
.v-pg-wrows{display:grid;gap:1px;background:var(--v-rule-soft)}
.v-pg-wrow{
  background:var(--v-panel);
  display:grid;grid-template-columns:78px minmax(0,1fr) 1fr;
  gap:clamp(16px,2.4vw,36px);align-items:center;padding:15px 0;
}
.v-pg-wrow__w{font-family:var(--v-font-mono);font-size:21px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.v-pg-wrow__nm{font-size:16px;font-weight:500}
.v-pg-wrow__ds{font-size:14px;line-height:1.55;color:var(--v-ink-3)}
/* Weight bar. Every segment is a token, and each weight is also printed
   as a number in the row above it, so the bar is a summary of figures
   already stated rather than the only place they appear. */
.v-pg-bar{margin-top:26px;height:26px;display:flex;border:var(--v-border) solid var(--v-rule)}
.v-pg-bar i{display:block;height:100%}
.v-pg-bar i:nth-child(1){background:var(--v-ink)}
.v-pg-bar i:nth-child(2){background:var(--v-ink-2)}
.v-pg-bar i:nth-child(3){background:var(--v-ink-3)}
.v-pg-bar i:nth-child(4){background:var(--v-brass)}
.v-pg-bar i:nth-child(5){background:var(--v-slate)}
.v-pg-bar i:nth-child(6){background:var(--v-accent)}

.v-pg-ladder{margin-top:clamp(40px,5vw,72px)}
.v-pg-lr{
  display:grid;grid-template-columns:140px 150px minmax(0,1fr);
  gap:clamp(18px,3vw,44px);align-items:baseline;
  padding:22px 0;border-bottom:var(--v-border) solid var(--v-rule-soft);
}
.v-pg-lr:first-of-type{border-top:var(--v-border) solid var(--v-rule)}
.v-pg-lr__st{font-family:var(--v-font-mono);font-size:15px;letter-spacing:.06em}
.v-pg-lr__st--calm{color:var(--v-pos)}
.v-pg-lr__st--norm{color:var(--v-ink)}
.v-pg-lr__st--elev{color:var(--v-brass)}
.v-pg-lr__st--str{color:var(--v-accent-text)}
.v-pg-lr__sc{font-family:var(--v-font-mono);font-size:22px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.v-pg-lr__sz{font-size:16px;line-height:1.5;color:var(--v-ink-2)}
.v-pg-lr__sz b{color:var(--v-ink);font-family:var(--v-font-mono);font-size:18px}

.v-pg-src{margin-top:clamp(44px,5.4vw,80px)}
.v-pg-sg{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--v-rule-soft);margin-top:clamp(24px,3vw,40px);
}
.v-pg-sg+.v-pg-sg{margin-top:1px}
.v-pg-sc{background:var(--v-bg);padding:26px 24px}
.v-pg-sc__nm{font-family:var(--v-font-mono);font-size:16px;letter-spacing:-.01em;margin-bottom:12px;display:block}
.v-pg-sc__st{
  font-family:var(--v-font-mono);font-size:9px;letter-spacing:.16em;
  padding:4px 9px;border:var(--v-border) solid var(--v-rule-soft);
  color:var(--v-ink-3);display:inline-block;margin-bottom:14px;
}
.v-pg-sc__st--ok{color:var(--v-pos);border-color:color-mix(in srgb,var(--v-pos) 40%,var(--v-rule))}
.v-pg-sc__st--down{color:var(--v-accent-text);border-color:color-mix(in srgb,var(--v-accent) 40%,var(--v-rule))}
.v-pg-sc p{font-size:14px;line-height:1.58;color:var(--v-ink-2);margin:0}
.v-pg-sc--wide{grid-column:span 2}

.v-pg-cad{margin-top:clamp(44px,5.4vw,80px)}
.v-pg-cg{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--v-rule-soft);margin-top:clamp(24px,3vw,40px);
}
.v-pg-cc{background:var(--v-bg);padding:28px 26px}
.v-pg-cc__k{
  font-family:var(--v-font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--v-brass);display:block;margin-bottom:14px;
}
.v-pg-cc__t{
  font-family:var(--v-font-mono);font-size:clamp(24px,2.8vw,36px);
  letter-spacing:-.03em;line-height:1;margin-bottom:12px;
}
.v-pg-cc p{font-size:14.5px;line-height:1.6;color:var(--v-ink-2);margin:0}

/* known limits: the one place with a heavy rule, because it is the part
   of the page most likely to be skipped and least safe to skip */
.v-pg-lim{margin-top:clamp(44px,5.4vw,80px);border-top:2px solid var(--v-ink);padding-top:26px}
.v-pg-lrow{
  display:grid;grid-template-columns:32px minmax(0,1fr);gap:20px;
  padding:18px 0;border-bottom:var(--v-border) solid var(--v-rule-soft);
}
.v-pg-lrow__n{font-family:var(--v-font-mono);font-size:11px;color:var(--v-accent-text);letter-spacing:.1em;padding-top:5px}
.v-pg-lrow p{font-size:16.5px;line-height:1.6;margin:0;max-width:70ch}

/* -------------------------------------------------------------- COMPARE -- */
.v-pg-vlab{
  display:flex;flex-wrap:wrap;gap:22px;
  font-family:var(--v-font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--v-ink-3);
  margin-bottom:clamp(18px,2.2vw,30px);
}
.v-pg-vlab b{color:var(--v-brass);font-weight:500}
.v-pg-vsum{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(32px,5vw,80px);align-items:end;margin-top:clamp(32px,4vw,58px);
}
.v-pg-act{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.v-pg-verify{
  display:flex;flex-wrap:wrap;gap:26px;
  font-family:var(--v-font-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--v-ink-3);
  border-top:var(--v-border) solid var(--v-rule);
  border-bottom:var(--v-border) solid var(--v-rule);
  padding:16px 0;
}
.v-pg-verify b{color:var(--v-brass);font-weight:500}
.v-pg-verify__r{margin-left:auto}

.v-pg-cmp{padding-top:clamp(44px,5.4vw,80px)}
.v-pg-cmp table{width:100%;border-collapse:collapse}
.v-pg-cmp thead th{
  text-align:left;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--v-ink-3);font-weight:500;
  padding:0 20px 16px 0;border-bottom:var(--v-border) solid var(--v-rule);vertical-align:bottom;
}
.v-pg-cmp thead th.is-us{color:var(--v-ink)}
.v-pg-cmp thead th .v-pg-cmp__nm{display:block;font-size:19px;letter-spacing:-.02em;color:var(--v-ink);margin-bottom:5px;text-transform:none}
.v-pg-cmp tbody th{
  text-align:left;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--v-ink-3);font-weight:500;
  padding:22px 24px 22px 0;border-bottom:var(--v-border) solid var(--v-rule-soft);
  width:19%;vertical-align:top;
}
.v-pg-cmp tbody td{
  font-size:16px;line-height:1.55;
  padding:22px 24px 22px 0;border-bottom:var(--v-border) solid var(--v-rule-soft);
  vertical-align:top;width:27%;
}
.v-pg-cmp tbody td.is-us{background:var(--v-panel);padding-left:22px}
.v-pg-cmp tbody td .v-pg-cmp__fig{
  font-family:var(--v-font-mono);font-size:22px;letter-spacing:-.03em;
  display:block;margin-bottom:4px;font-variant-numeric:tabular-nums;
}
/* An unverified competitor fact. Deliberately loud: this is the same
   [VERIFY] convention the content pipeline blocks a draft for, and it
   must never reach a published page unnoticed. */
.v-pg-cmp__verify{color:var(--v-accent-text)}
.v-pg-cmp tbody tr:last-child th,
.v-pg-cmp tbody tr:last-child td{border-bottom:var(--v-border) solid var(--v-rule)}

.v-pg-two{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--v-rule-soft);
  margin-top:clamp(48px,6vw,88px);
}
.v-pg-pane{background:var(--v-bg);padding:clamp(28px,3.4vw,44px)}
.v-pg-pane--us{background:var(--v-panel)}
.v-pg-pane__k{
  font-family:var(--v-font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--v-brass);display:block;margin-bottom:18px;
}
.v-pg-pane h2{font-size:clamp(22px,2.4vw,32px);margin:0 0 22px;max-width:22ch;font-weight:600;letter-spacing:-.028em;line-height:1.08}
.v-pg-pane li{margin-bottom:18px}
.v-pg-pane li:last-child{margin-bottom:0}
.v-pg-pane li b{display:block;font-size:16px;font-weight:600;margin-bottom:5px}
.v-pg-pane li p{font-size:14.5px;line-height:1.58;color:var(--v-ink-2);margin:0}

.v-pg-who{margin-top:clamp(48px,6vw,88px)}
.v-pg-wg{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--v-rule-soft)}
.v-pg-wc{background:var(--v-bg);padding:clamp(26px,3vw,40px)}
.v-pg-wc__nm{
  font-family:var(--v-font-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--v-ink-3);display:block;margin-bottom:14px;
}
/* Titles that are links must not pick up the browser's visited purple:
   themes routinely style a:visited, and without this a clicked-through
   lead H1 turns violet, which is what the front page did. */
.v-home-h1 a,.v-home-h1 a:visited,
.v-arc-lead__h a,.v-arc-lead__h a:visited,
.v-home-card,.v-home-card:visited,
.v-arc-card,.v-arc-card:visited,
.v-home-row,.v-home-row:visited,
.v-arc-row,.v-arc-row:visited,
.v-art-related__link,.v-art-related__link:visited{color:var(--v-ink);text-decoration:none}

.v-pg-wc h3{font-size:21px;font-weight:600;letter-spacing:-.022em;line-height:1.16;margin:0 0 12px}
.v-pg-wc p{font-size:15px;line-height:1.6;color:var(--v-ink-2);margin:0}

.v-pg-bottom{
  margin-top:clamp(48px,6vw,88px);border-top:2px solid var(--v-ink);padding-top:26px;
  display:grid;grid-template-columns:minmax(0,var(--v-art-rail)) minmax(0,var(--v-art-measure)) 1fr;
  gap:clamp(24px,4vw,64px);
}
.v-pg-bottom__t{font-size:clamp(21px,2.1vw,27px);line-height:1.42;letter-spacing:-.014em}

.v-pg-faq{margin-top:clamp(48px,6vw,88px)}
.v-pg-q{border-bottom:var(--v-border) solid var(--v-rule-soft);padding:22px 0}
.v-pg-q:first-of-type{border-top:var(--v-border) solid var(--v-rule)}
.v-pg-q h3{font-size:18px;font-weight:600;letter-spacing:-.018em;margin:0 0 10px}
.v-pg-q p{font-size:15.5px;line-height:1.62;color:var(--v-ink-2);margin:0;max-width:66ch}

@media (max-width:900px){
  .v-pg-sub,.v-pg-dg,.v-pg-sg,.v-pg-cg,.v-pg-vsum,.v-pg-two,.v-pg-wg{grid-template-columns:1fr}
  .v-pg-sc--wide{grid-column:auto}
  .v-pg-cred{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v-pg-cred__c{border-left:0;padding-left:0}
  .v-pg-wrow,.v-pg-lr{grid-template-columns:1fr;gap:6px}
  .v-pg-act{justify-content:flex-start}
  .v-pg-bottom{grid-template-columns:1fr}
  /* the comparison table becomes stacked rows, each cell labelled with
     the column it came from */
  .v-pg-cmp table,.v-pg-cmp thead,.v-pg-cmp tbody,.v-pg-cmp tr,
  .v-pg-cmp th,.v-pg-cmp td{display:block;width:100%}
  .v-pg-cmp thead{display:none}
  .v-pg-cmp tbody th{border-bottom:0;padding-bottom:8px}
  .v-pg-cmp tbody td{padding-left:0}
  .v-pg-cmp tbody td::before{
    content:attr(data-label);display:block;
    font-family:var(--v-font-mono);font-size:9.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--v-brass);margin-bottom:6px;
  }
}

/* Unverified-claim warning on a comparison page, and the standard
   WordPress visually-hidden helper the table caption uses. */
.v-pg-warn{color:var(--v-accent-text);margin-top:16px;font-size:15px;line-height:1.6}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
}

/* ------------------------------------------------------- ALL ARTICLES -- */
/* The sentinel is a real, zero-content element IntersectionObserver
   watches (assets/infinite-articles.js) -- unstyled beyond a little
   breathing room, since it is never meant to be seen, only crossed. */
.v-pg-articles-sentinel{height:1px}
.v-pg-articles-status{
  text-align:center;padding:32px 0;
  font-family:var(--v-font-mono);font-size:13px;letter-spacing:.08em;
  color:var(--v-ink-3);min-height:1.6em;
}