/* Vanity or Vice — Register of Unproven Claims.
 *
 * Every selector is anchored under .vvr, which exists only on the three
 * Register templates, so nothing here can reach an existing component. Colour
 * comes from the theme's semantic tokens with literal fallbacks, the same way
 * the rest of the estate does it.
 */

.vvr{
  --vvr-paper: var(--color-surface-page, #f7f0e7);
  --vvr-stone: var(--color-surface-stone, #e8e0d4);
  --vvr-ink: var(--color-text-primary, #151315);
  --vvr-quiet: var(--color-text-quiet, #5c5350);
  --vvr-black: var(--color-surface-espresso, #241b19);
  --vvr-wine: var(--color-status-worth, #7e2938);
  --vvr-rule: var(--color-border-line, rgba(21,19,21,.18));
  --vvr-gold: var(--color-accent-metal, #c9a227);
  background: var(--vvr-paper);
  color: var(--vvr-ink);
}

/* ---- masthead ---- */
.vvr-masthead{
  padding: clamp(3.5rem,9vw,7.5rem) 0 clamp(2.5rem,5vw,4rem);
  background: var(--vvr-black);
  color: var(--color-text-on-dark, #f7f0e7);
  border-bottom: 1px solid rgba(247,240,231,.16);
}
.vvr-eyebrow{
  display:flex; align-items:center; gap:.7rem; margin:0 0 1.1rem;
  font:700 .66rem/1 var(--vovn-mono, ui-monospace, monospace);
  letter-spacing:.18em; text-transform:uppercase; color:var(--vvr-gold);
}
.vvr-eyebrow .rule{ display:block; width:2.5rem; height:1px; background:currentColor; }
.vvr-masthead h1{
  margin:0 0 1.2rem; max-width:16ch;
  font:500 clamp(2.9rem,8vw,6.5rem)/.9 var(--vovn-display, Georgia, serif);
  letter-spacing:-.045em;
}
.vvr-standfirst{
  max-width:60ch; margin:0 0 1rem;
  font-size:clamp(1.02rem,1.6vw,1.22rem); line-height:1.55;
  color:var(--color-text-on-dark-muted, rgba(247,240,231,.82));
}
.vvr-standfirst--quiet{ font-size:clamp(.95rem,1.4vw,1.06rem); }
.vvr-masthead__meta{
  margin:2rem 0 0; font:600 .72rem/1.7 var(--vovn-mono, ui-monospace, monospace);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-text-on-dark-muted, rgba(247,240,231,.72));
}
.vvr-masthead__meta a{ color:var(--vvr-gold); text-decoration:none; border-bottom:1px solid transparent; }
.vvr-masthead__meta a:hover,.vvr-masthead__meta a:focus-visible{ border-bottom-color:currentColor; }

/* ---- filters ---- */
.vvr-filters{ margin:clamp(2rem,4vw,3rem) 0 0; display:grid; gap:1.4rem; }
.vvr-filters fieldset{ border:0; margin:0; padding:0; }
.vvr-filters legend{
  padding:0 0 .55rem;
  font:700 .64rem/1 var(--vovn-mono, ui-monospace, monospace);
  letter-spacing:.16em; text-transform:uppercase; color:var(--vvr-quiet);
}
/* 44px, and a real gap between them. These are the primary control on the index
   and they are operated with a thumb. WCAG 2.5.8 puts the floor at 24px; 44 is
   the size a filter chip has to reach before it stops being irritating. */
.vvr-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.vvr-chips a{
  display:inline-flex; align-items:center; min-height:44px; padding:.3rem .85rem;
  border:1px solid var(--vvr-rule); text-decoration:none; color:inherit;
  font:500 .74rem/1 var(--vovn-mono, ui-monospace, monospace); letter-spacing:.04em;
  transition:background-color .15s,color .15s,border-color .15s;
}
.vvr-chips a:hover,.vvr-chips a:focus-visible{ background:var(--vvr-stone); }
.vvr-chips a[aria-current]{ background:var(--vvr-black); color:var(--vvr-paper); border-color:var(--vvr-black); }

/* ---- index rows ---- */
.vvr-list{ list-style:none; margin:clamp(2.5rem,5vw,3.5rem) 0 0; padding:0; border-top:1px solid var(--vvr-rule); }
.vvr-row{ padding:clamp(1.4rem,3vw,2.1rem) 0; border-bottom:1px solid var(--vvr-rule); }
.vvr-row__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1rem; }
.vvr-row h2{
  margin:0; flex:1 1 22ch;
  font:500 clamp(1.5rem,3vw,2.25rem)/1.08 var(--vovn-display, Georgia, serif);
  letter-spacing:-.02em;
}
.vvr-row h2 a{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; }
.vvr-row h2 a:hover,.vvr-row h2 a:focus-visible{ border-bottom-color:var(--vvr-wine); }
.vvr-row__verdict{ margin:.7rem 0 0; max-width:70ch; font-size:1.02rem; line-height:1.55; }
.vvr-row__meta{
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin:.8rem 0 0;
  font:600 .68rem/1.5 var(--vovn-mono, ui-monospace, monospace);
  letter-spacing:.1em; text-transform:uppercase; color:var(--vvr-quiet);
}
.vvr-row__absence{ color:var(--vvr-wine); }
.vvr-row--empty h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); }

/* ---- the grade pill ----
 * Six positions, and the colour has to carry the difference between "nobody
 * tested it" and "it was tested and failed" without a legend. Hue does that
 * work; weight and border do it again for anyone who cannot see the hue.
 */
.vvr-pill{
  display:inline-flex; align-items:center; padding:.34rem .72rem;
  border:1px solid currentColor; text-decoration:none;
  font:700 .66rem/1 var(--vovn-mono, ui-monospace, monospace);
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
}
.vvr-pill--established{ color:#1f5c3d; }
.vvr-pill--partially-established{ color:#4a6741; }
.vvr-pill--thinly-supported{ color:#8a6a1f; }
.vvr-pill--untested-as-claimed{ color:#8a4b1f; }
.vvr-pill--not-established{ color:var(--vvr-wine); }
.vvr-pill--no-adequate-source-found{ color:#4a4340; }
.vvr-pill--absence{ color:var(--vvr-wine); border-style:dashed; }
.vvr-entry__head .vvr-pill,.vvr-masthead .vvr-pill{ color:#f7f0e7; }
.vvr-entry__head .vvr-pill--not-established{ color:#e8a0ac; }
.vvr-entry__head .vvr-pill--established{ color:#8fd3ae; }
.vvr-entry__head .vvr-pill--absence{ color:var(--vvr-gold); }

/* ---- entry ---- */
.vvr-crumbs{ padding:1rem 0; border-bottom:1px solid var(--vvr-rule); font:600 .7rem/1 var(--vovn-mono, ui-monospace, monospace); letter-spacing:.1em; text-transform:uppercase; }
.vvr-crumbs a{ color:var(--vvr-wine); text-decoration:none; }
.vvr-crumbs span{ color:var(--vvr-quiet); margin-left:.5rem; }
.vvr-crumbs span[aria-hidden]{ margin:0 .35rem 0 .5rem; }

.vvr-entry__head{
  padding:clamp(3rem,7vw,6rem) 0 clamp(2.2rem,4vw,3.4rem);
  background:var(--vvr-black); color:var(--color-text-on-dark, #f7f0e7);
}
.vvr-entry__head h1{
  margin:0 0 1.4rem; max-width:18ch;
  font:500 clamp(2.5rem,6.5vw,5rem)/.94 var(--vovn-display, Georgia, serif);
  letter-spacing:-.04em;
}
.vvr-verdict{
  max-width:52ch; margin:0 0 1.8rem; padding-left:1.1rem;
  border-left:3px solid var(--vvr-gold);
  font-size:clamp(1.15rem,2.2vw,1.5rem); line-height:1.45;
}
.vvr-entry__pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0; }

/* Drawn cards.
   The SVG carries width/height attributes so it has an intrinsic ratio and
   reserves its own space before paint; these two rules are what let it scale
   from a full-width entry hero down to an archive tile without reflow. */
.vvr-entry__card{ margin:0 0 clamp(1.6rem,3vw,2.6rem); }
.vvr-card-svg{ display:block; width:100%; height:auto; }
.vvr-card{ display:block; overflow:hidden; }
.vvr-entry__card .vvr-card-svg{ border:1px solid rgba(216,195,165,.18); }

/* the gap between what is sold and what is testable */
.vvr-gap{ background:var(--vvr-stone); border-bottom:1px solid var(--vvr-rule); }
.vvr-gap__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }
.vvr-gap__grid article{ padding:clamp(1.8rem,4vw,3rem) clamp(1rem,3vw,2.5rem); }
.vvr-gap__grid article:first-child{ border-right:1px solid var(--vvr-rule); }
.vvr-gap h2{
  margin:0 0 1rem;
  font:700 .68rem/1 var(--vovn-mono, ui-monospace, monospace);
  letter-spacing:.16em; text-transform:uppercase; color:var(--vvr-quiet);
}
.vvr-gap blockquote{ margin:0; padding:0; border:0; }
.vvr-gap blockquote p{
  margin:0; font:500 clamp(1.2rem,2.4vw,1.7rem)/1.32 var(--vovn-display, Georgia, serif);
  letter-spacing:-.01em;
}
.vvr-gap blockquote p::before{ content:'\201C'; }
.vvr-gap blockquote p::after{ content:'\201D'; }
.vvr-gap__tested{ margin:0; font-size:clamp(1rem,1.8vw,1.15rem); line-height:1.5; }
.vvr-gap__note{ margin:1.1rem 0 0; font-size:.86rem; line-height:1.5; color:var(--vvr-quiet); }

.vvr-absence{ padding:clamp(2rem,5vw,3.5rem) 0; background:var(--vvr-paper); border-bottom:1px solid var(--vvr-rule); }
.vvr-absence h2{ margin:0 0 .8rem; font:500 clamp(1.7rem,3.4vw,2.6rem)/1.05 var(--vovn-display, Georgia, serif); letter-spacing:-.025em; }
.vvr-absence p{ max-width:62ch; margin:0 0 .7rem; font-size:1.02rem; line-height:1.55; }
.vvr-absence__link a{ font:600 .72rem/1 var(--vovn-mono, ui-monospace, monospace); letter-spacing:.1em; text-transform:uppercase; color:var(--vvr-wine); text-decoration:none; }

.vvr-body__grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(17rem,.72fr); gap:clamp(2rem,5vw,4.5rem); padding:clamp(2.5rem,6vw,5rem) 0; }
.vvr-field{ margin:0 0 clamp(2.2rem,4vw,3.4rem); }
.vvr-field h2{
  margin:0 0 1rem;
  font:500 clamp(1.55rem,3vw,2.3rem)/1.05 var(--vovn-display, Georgia, serif);
  letter-spacing:-.025em;
}
.vvr-field p{ max-width:68ch; margin:0 0 1rem; font-size:1.04rem; line-height:1.62; }
.vvr-field--would_change{ padding:clamp(1.4rem,3vw,2.2rem); background:var(--vvr-stone); border-top:4px solid var(--vvr-gold); }
.vvr-field--deciding{ padding:clamp(1.4rem,3vw,2.2rem); background:var(--vvr-black); color:var(--color-text-on-dark, #f7f0e7); border-top:4px solid var(--vvr-wine); }
.vvr-field--deciding h2{ color:inherit; }

.vvr-rail{ align-self:start; position:sticky; top:1.5rem; display:grid; gap:1.4rem; }
.vvr-rail__block{ padding:1.3rem; border:1px solid var(--vvr-rule); background:#fff; }
.vvr-rail__block h2{
  margin:0 0 .8rem;
  font:700 .66rem/1.3 var(--vovn-mono, ui-monospace, monospace);
  letter-spacing:.15em; text-transform:uppercase; color:var(--vvr-wine);
}
.vvr-rail__block p{ margin:0 0 .7rem; font-size:.92rem; line-height:1.55; }
.vvr-rail__lede{ font-weight:600; }
.vvr-searched dl{ margin:0; }
.vvr-searched dl>div{ padding:.55rem 0; border-top:1px solid var(--vvr-rule); }
.vvr-searched dl>div:first-child{ border-top:0; padding-top:0; }
.vvr-searched dt{ font:700 .62rem/1.4 var(--vovn-mono, ui-monospace, monospace); letter-spacing:.12em; text-transform:uppercase; color:var(--vvr-quiet); }
.vvr-searched dd{ margin:.25rem 0 0; font-size:.88rem; line-height:1.5; word-break:break-word; }
.vvr-rail__link a,.vvr-term__link a{ font:600 .68rem/1 var(--vovn-mono, ui-monospace, monospace); letter-spacing:.1em; text-transform:uppercase; color:var(--vvr-wine); text-decoration:none; }
.vvr-related{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem; }
.vvr-related a{ display:block; font-weight:600; color:var(--vvr-ink); }
.vvr-related span{ display:block; margin-top:.15rem; font-size:.84rem; line-height:1.45; color:var(--vvr-quiet); }

.vvr-sources{ padding:clamp(2.5rem,5vw,4rem) 0; background:var(--vvr-stone); border-top:1px solid var(--vvr-rule); }
.vvr-sources h2{ margin:0 0 .8rem; font:500 clamp(1.6rem,3vw,2.2rem)/1.05 var(--vovn-display, Georgia, serif); }
.vvr-sources__note{ max-width:64ch; margin:0 0 1.6rem; font-size:.94rem; line-height:1.55; color:var(--vvr-quiet); }
.vvr-sources ol{ margin:0; padding-left:1.3rem; display:grid; gap:1.1rem; }
.vvr-sources li{ max-width:78ch; font-size:.95rem; line-height:1.55; }
.vvr-source__tags{ display:flex; flex-wrap:wrap; gap:.35rem .9rem; margin-top:.3rem; font:600 .64rem/1.4 var(--vovn-mono, ui-monospace, monospace); letter-spacing:.1em; text-transform:uppercase; color:var(--vvr-quiet); }

.vvr-entry__foot{ padding:clamp(2.5rem,5vw,4rem) 0; background:var(--vvr-paper); border-top:1px solid var(--vvr-rule); }
.vvr-entry__foot-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.5rem,4vw,3.5rem); }
.vvr-entry__foot h2{ margin:0 0 .9rem; font:700 .66rem/1.3 var(--vovn-mono, ui-monospace, monospace); letter-spacing:.15em; text-transform:uppercase; color:var(--vvr-wine); }
.vvr-entry__foot p{ max-width:56ch; margin:0 0 .8rem; font-size:.96rem; line-height:1.6; }
.vvr-changelog{ list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.7rem; }
.vvr-changelog time{ display:block; font:700 .64rem/1.4 var(--vovn-mono, ui-monospace, monospace); letter-spacing:.12em; text-transform:uppercase; color:var(--vvr-quiet); }
.vvr-changelog span{ font-size:.94rem; line-height:1.5; }
.vvr-reviewed{ font-size:.86rem; color:var(--vvr-quiet); }

.vvr-note{ margin:clamp(2.5rem,5vw,4rem) 0 0; padding:clamp(1.4rem,3vw,2.2rem); border-top:4px solid var(--vvr-wine); background:var(--vvr-stone); }
.vvr-note h2{ margin:0 0 .8rem; font:500 clamp(1.4rem,2.6vw,1.9rem)/1.1 var(--vovn-display, Georgia, serif); }
.vvr-note p{ max-width:72ch; margin:0 0 .8rem; font-size:.96rem; line-height:1.6; }

/* ---- method page ---- */
.vvr-method__body{ padding:clamp(2.5rem,6vw,5rem) 0; }
/* Fleet appearance audit, 2026-09-21: the blocks fill the 90% shell. At 74ch they sat at 58% of a
   1440 screen, a long narrow column by the fleet's own standard (prose at 80% or more). */
.vvr-method__block{ max-width:none; margin:0 0 clamp(2.5rem,5vw,4rem); }
.vvr-method__block h2{ margin:0 0 1rem; font:500 clamp(1.7rem,3.4vw,2.6rem)/1.05 var(--vovn-display, Georgia, serif); letter-spacing:-.025em; }
.vvr-method__block p{ margin:0 0 1rem; font-size:1.04rem; line-height:1.62; }
.vvr-threshold{ padding:1.1rem 1.3rem; border-left:4px solid var(--vvr-gold); background:var(--vvr-stone); font-size:1rem !important; }
.vvr-terms{ margin:1.5rem 0 0; display:grid; gap:0; border-top:1px solid var(--vvr-rule); }
.vvr-term{ padding:1.3rem 0; border-bottom:1px solid var(--vvr-rule); }
.vvr-term dt{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem .9rem; margin:0 0 .6rem; font:500 1.15rem/1.3 var(--vovn-display, Georgia, serif); }
.vvr-term__short{ font:600 .66rem/1 var(--vovn-mono, ui-monospace, monospace); letter-spacing:.12em; text-transform:uppercase; color:var(--vvr-quiet); }
.vvr-term dd{ margin:0; }
.vvr-term dd p{ max-width:70ch; margin:0 0 .5rem; font-size:.98rem; line-height:1.6; }
.vvr-terms--absence .vvr-term dt{ font-size:1.2rem; color:var(--vvr-wine); }
.vvr-method__downloads{ display:flex; flex-wrap:wrap; gap:.5rem; }
.vvr-method__downloads a{
  display:inline-flex; align-items:center; min-height:44px; padding:.4rem 1.1rem;
  border:1px solid var(--vvr-black); background:var(--vvr-black); color:var(--vvr-paper);
  font:700 .68rem/1 var(--vovn-mono, ui-monospace, monospace); letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none;
}
.vvr-method__downloads a:hover,.vvr-method__downloads a:focus-visible{ background:transparent; color:var(--vvr-ink); }
.vvr-method__licence{ font-size:.86rem !important; color:var(--vvr-quiet); }
.vvr-method__back a{ font:600 .72rem/1 var(--vovn-mono, ui-monospace, monospace); letter-spacing:.1em; text-transform:uppercase; color:var(--vvr-wine); text-decoration:none; }

/* ---- carry the finding to a desk ----
 * Deliberately the loudest thing in the reading column. Everything above it is
 * the publication explaining itself; this is the one block that asks the reader
 * to do something, and it is the only place on an entry where an action lives.
 */
.vvr-carry{
  margin: clamp(2.5rem,5vw,3.5rem) 0 0;
  padding: clamp(1.5rem,3.5vw,2.4rem);
  background: var(--vvr-black);
  color: var(--color-text-on-dark, #f7f0e7);
  border-top: 5px solid var(--vvr-gold);
}
.vvr-carry__eyebrow{
  margin: 0 0 .9rem !important;
  font: 700 .66rem/1 var(--vovn-mono, ui-monospace, monospace);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--vvr-gold);
}
.vvr-carry h2{
  margin: 0 0 1rem;
  max-width: 22ch;
  font: 500 clamp(1.5rem,3vw,2.3rem)/1.06 var(--vovn-display, Georgia, serif);
  letter-spacing: -.025em;
}
.vvr-carry__lede{
  max-width: 62ch; margin: 0 0 1.5rem;
  font-size: 1rem; line-height: 1.6;
  color: var(--color-text-on-dark-muted, rgba(247,240,231,.84));
}
.vvr-carry__grid{
  display: flex; flex-wrap: wrap; gap: 1px;
  margin: 0 0 1.4rem;
  background: rgba(247,240,231,.28);
  border: 1px solid rgba(247,240,231,.28);
}
.vvr-carry__grid > div{ flex: 1 1 8rem; padding: .8rem 1rem; background: var(--vvr-black); }
.vvr-carry__grid dt{
  margin: 0 0 .35rem;
  font: 700 .6rem/1.3 var(--vovn-mono, ui-monospace, monospace);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text-on-dark-muted, rgba(247,240,231,.7));
}
.vvr-carry__grid dd{ margin: 0; font-size: .92rem; line-height: 1.35; }
.vvr-carry__verdict{
  max-width: 58ch; margin: 0 0 1.5rem; padding-left: 1rem;
  border-left: 3px solid var(--vvr-gold);
  font-size: 1.02rem; line-height: 1.5;
}
.vvr-carry__actions{ display: flex; flex-wrap: wrap; gap: .6rem; }
.vvr-carry__actions button,
.vvr-carry__actions a{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .5rem 1.2rem;
  font: 700 .7rem/1 var(--vovn-mono, ui-monospace, monospace);
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--color-text-on-dark, #f7f0e7);
  background: transparent; color: var(--color-text-on-dark, #f7f0e7);
  transition: background-color .15s, color .15s;
}
.vvr-carry__actions a{
  background: var(--vvr-gold); border-color: var(--vvr-gold); color: var(--vvr-black);
}
.vvr-carry__actions button:hover,.vvr-carry__actions button:focus-visible{
  background: var(--color-text-on-dark, #f7f0e7); color: var(--vvr-black);
}
.vvr-carry__actions a:hover,.vvr-carry__actions a:focus-visible{ background: transparent; color: var(--vvr-gold); }
.vvr-carry__actions :focus-visible{ outline: 2px solid var(--color-text-on-dark, #f7f0e7); outline-offset: 3px; }
.vvr-carry__nodesk,
.vvr-carry__status{
  max-width: 62ch; margin: 1.1rem 0 0;
  font-size: .88rem; line-height: 1.5;
  color: var(--color-text-on-dark-muted, rgba(247,240,231,.78));
}
.vvr-carry__status:empty{ margin: 0; }

/* ---- the card that appears under a mapped article ----
 * Lives outside .vvr because it renders inside an article body, which the
 * Register's own wrapper never touches. Every property is set explicitly for
 * that reason: it is a guest in somebody else's stylesheet.
 */
.vvr-crosslink{
  margin: clamp(2.5rem,5vw,4rem) 0 0;
  padding: clamp(1.4rem,3vw,2.2rem);
  border-top: 4px solid var(--color-status-worth, #7e2938);
  background: var(--color-surface-stone, #e8e0d4);
  color: var(--color-text-primary, #151315);
}
.vvr-crosslink__eyebrow{
  margin: 0 0 .7rem !important;
  font: 700 .66rem/1 var(--vovn-mono, ui-monospace, monospace) !important;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-status-worth, #7e2938);
}
.vvr-crosslink__title{
  margin: 0 0 .7rem !important;
  font: 500 clamp(1.4rem,2.8vw,2.1rem)/1.1 var(--vovn-display, Georgia, serif) !important;
  letter-spacing: -.02em;
}
.vvr-crosslink__title a{ color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.vvr-crosslink__title a:hover,.vvr-crosslink__title a:focus-visible{ border-bottom-color: var(--color-status-worth, #7e2938); }
.vvr-crosslink__verdict{ margin: 0 0 .8rem !important; max-width: 62ch; font-size: 1.02rem !important; line-height: 1.5 !important; }
.vvr-crosslink__meta{
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0 0 1rem !important;
  font: 600 .66rem/1.5 var(--vovn-mono, ui-monospace, monospace) !important;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text-quiet, #5c5350);
}
.vvr-crosslink__grade{ color: var(--color-status-worth, #7e2938); }
.vvr-crosslink__note{ margin: 0 !important; max-width: 68ch; font-size: .93rem !important; line-height: 1.55 !important; }

/* ---- responsive ---- */
@media (max-width:900px){
  .vvr-body__grid,.vvr-gap__grid,.vvr-entry__foot-grid{ grid-template-columns:1fr; }
  .vvr-gap__grid article:first-child{ border-right:0; border-bottom:1px solid var(--vvr-rule); }
  .vvr-rail{ position:static; }
}
@media (prefers-reduced-motion:reduce){
  .vvr *,.vvr *::before,.vvr *::after{ transition-duration:.01ms !important; }
}