/* Tech Yarde front page — gold design layer (deployed 2026-10-03).
   Adapted from the ValleyRogue Original design system. Loaded only by
   front-page.php, after the theme stylesheet. The catalog skin at the
   end styles the existing ty_tool_card() / app.js machinery. */

/* ============================================================
   VALLEYROGUE ORIGINAL 1.0.0 — brand tokens
   Paper #F1EEE8 · Paper 2 #E4DED4 · Ink #10110F · Muted #5D5C56
   Gold #C9A227 (Customizer-adjustable) · Dark #111310
   Display: Playfair Display · Support: Archivo
   ============================================================ */
:root {
  --vr-paper: #F1EEE8;
  --vr-paper2: #E4DED4;
  --vr-ink: #10110F;
  --vr-muted: #5D5C56;
  --vr-accent: #C9A227;
  --vr-dark: #111310;
  --vr-white: #FBFAF5;
  --vr-rule: #1A1B18;
  --vr-soft-rule: rgba(16, 17, 15, 0.22);
  --vr-dark-rule: rgba(255, 255, 255, 0.35);
  --vr-serif: "Playfair Display", Baskerville, "Palatino Linotype", Georgia, serif;
  --vr-sans: "Archivo", "Avenir Next", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --vr-max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--vr-paper);
  color: var(--vr-ink);
  font-family: var(--vr-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* Accessibility */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--vr-accent); color: var(--vr-ink); padding: 10px 18px; border-radius: 3px;
  transition: top 0.2s ease; font-weight: 700;
}
.skip-link:focus { top: 12px; color: var(--vr-ink); }

/* Layout */
.vr-wrap { max-width: var(--vr-max); margin: 0 auto; padding: 0 28px; }
.vr-section { padding: clamp(70px, 10vw, 140px) clamp(20px, 5vw, 80px); }
.vr-section-head { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--vr-rule); align-items: end; }
.vr-section-no { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 800; }
.vr-section-head h2 { margin: 0; font: 400 clamp(2.7rem, 6vw, 6.6rem)/0.92 var(--vr-serif); letter-spacing: -0.045em; text-transform: uppercase; }
.vr-section-head h2 em { font-style: italic; }

/* Buttons */
.vr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 20px; border: 1px solid currentColor;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; font-weight: 900;
  cursor: pointer; background: transparent; color: inherit;
}
.vr-btn:hover, .vr-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.vr-btn--dark { background: var(--vr-ink); color: #fff; border-color: var(--vr-ink); }
.vr-btn--accent { background: var(--vr-accent); color: var(--vr-ink); border-color: var(--vr-accent); }

/* ============ Masthead / site header ============ */
.vr-mast {
  min-height: 94svh; display: grid; grid-template-rows: auto 1fr auto;
  padding: 22px clamp(20px, 4vw, 64px) 30px;
  background: var(--vr-dark); color: var(--vr-white);
  position: relative; overflow: hidden;
}
.vr-mast::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(255, 255, 255, 0.08) 25%);
}
.vr-mast::after {
  content: "VR"; position: absolute; right: -0.04em; bottom: -0.26em;
  font: 900 clamp(250px, 42vw, 760px)/0.76 var(--vr-serif); letter-spacing: -0.13em;
  color: rgba(255, 255, 255, 0.035); pointer-events: none;
}
.vr-topline, .vr-hero, .vr-mast-foot { position: relative; z-index: 1; }
.vr-topline {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.4); gap: 20px;
}
.vr-issue { font-weight: 700; font-size: 0.76rem; letter-spacing: 0.13em; text-transform: uppercase; }
.vr-wordmark { font-family: var(--vr-serif); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; }
.vr-wordmark:hover { color: var(--vr-accent); }
.vr-site-header .custom-logo { max-height: 40px; width: auto; }
.vr-nav { display: flex; gap: 24px; align-items: center; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
.vr-nav ul { display: flex; gap: 24px; align-items: center; list-style: none; margin: 0; padding: 0; }
.vr-nav a { padding: 8px 0; border-bottom: 1px solid transparent; }
.vr-nav a:hover, .vr-nav a:focus-visible, .vr-nav .current-menu-item > a { border-color: var(--vr-accent); }
.vr-menu-toggle { display: none; background: transparent; border: 1px solid rgba(255,255,255,0.4); color: var(--vr-white); padding: 10px 14px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; cursor: pointer; }

/* Slim inner-page header variant */
.vr-mast--slim { min-height: 0; padding-bottom: 22px; }
.vr-mast--slim::after { display: none; }

/* ============ Hero ============ */
.vr-hero {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, 0.5fr);
  gap: clamp(30px, 6vw, 100px); align-items: end; padding: clamp(72px, 13vh, 150px) 0 48px;
}
.vr-hero h1 { max-width: 1000px; margin: 0; font: 400 clamp(4.35rem, 10.5vw, 11rem)/0.78 var(--vr-serif); letter-spacing: -0.075em; text-transform: uppercase; }
.vr-hero h1 em { display: block; color: var(--vr-accent); font-style: italic; padding-left: 0.38em; }
.vr-dek { align-self: center; max-width: 360px; margin: 0; font-size: clamp(1rem, 1.5vw, 1.28rem); line-height: 1.42; color: #d9d7d0; }
.vr-dek strong { display: block; color: #fff; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; }
.vr-mast-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; border-top: 1px solid rgba(255, 255, 255, 0.4); padding-top: 18px; }
.vr-manifesto-line { max-width: 680px; margin: 0; font: italic 1.05rem/1.4 var(--vr-serif); }
.vr-down { display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; }
.vr-down span { display: grid; place-items: center; width: 36px; height: 36px; background: var(--vr-accent); color: var(--vr-ink); border-radius: 50%; font-size: 1.1rem; }

/* ============ Ticker ============ */
.vr-ticker { background: var(--vr-accent); color: var(--vr-ink); padding: 10px 0; overflow: hidden; border-block: 1px solid var(--vr-ink); white-space: nowrap; }
.vr-ticker-track { display: inline-block; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.76rem; animation: vr-marquee 28s linear infinite; }
.vr-ticker-track span { margin-right: 42px; }
@keyframes vr-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vr-ticker-track { animation: none; }
}

/* ============ Thesis / manifesto ============ */
.vr-manifesto { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 8vw, 120px); align-items: start; margin-top: 50px; }
.vr-lead-copy { font: 400 clamp(1.9rem, 3.5vw, 4rem)/1.05 var(--vr-serif); letter-spacing: -0.03em; margin: 0; }
.vr-lead-copy em { font-style: italic; background: var(--vr-accent); color: var(--vr-ink); padding: 0 0.12em; }
.vr-body-copy { max-width: 620px; font-size: clamp(1rem, 1.25vw, 1.18rem); }
.vr-body-copy p:first-child { margin-top: 0; }
.vr-principles { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--vr-soft-rule); display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vr-principles b { display: block; font: 700 2.2rem/1 var(--vr-serif); margin-bottom: 7px; }
.vr-principles span { font-size: 0.78rem; color: var(--vr-muted); }

/* ============ Stories / launch essays ============ */
.vr-stories { background: var(--vr-paper2); }
.vr-story-grid { display: grid; grid-template-columns: 1.35fr 0.825fr 0.825fr; margin-top: 42px; border-top: 1px solid var(--vr-rule); }
.vr-story-card { padding: 32px 32px 34px 0; border-right: 1px solid var(--vr-rule); display: flex; min-height: 430px; flex-direction: column; align-items: flex-start; }
.vr-story-card:not(:first-child) { padding-left: 32px; }
.vr-story-card:last-child { border-right: 0; }
.vr-story-meta { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--vr-muted); }
.vr-story-card h3 { font: 400 clamp(2rem, 4.1vw, 4.5rem)/0.94 var(--vr-serif); letter-spacing: -0.04em; margin: 54px 0 20px; text-transform: uppercase; }
.vr-story-card:not(:first-child) h3 { font-size: clamp(1.8rem, 2.8vw, 3.2rem); }
.vr-story-card p { margin: 0 0 28px; color: var(--vr-muted); }
.vr-read-story { margin-top: auto; border: 0; border-bottom: 1px solid currentColor; padding: 4px 0; background: transparent; color: var(--vr-ink); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.vr-read-story:hover, .vr-read-story:focus-visible { color: var(--vr-muted); }

/* Essay reading-view dialogs */
.vr-dialog { width: min(850px, calc(100% - 28px)); max-height: calc(100svh - 28px); padding: 0; border: 0; background: var(--vr-paper); color: var(--vr-ink); box-shadow: 0 20px 100px rgba(0, 0, 0, 0.55); }
.vr-dialog::backdrop { background: rgba(0, 0, 0, 0.72); }
.vr-article-shell { padding: clamp(26px, 6vw, 76px); }
.vr-article-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--vr-rule); padding-bottom: 16px; }
.vr-article-top span { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.vr-close-story { width: 36px; height: 36px; border: 1px solid var(--vr-rule); border-radius: 50%; background: transparent; color: var(--vr-ink); cursor: pointer; font-size: 1.25rem; line-height: 1; }
.vr-article-shell h2 { font: 400 clamp(2.8rem, 7vw, 6rem)/0.88 var(--vr-serif); letter-spacing: -0.055em; text-transform: uppercase; margin: 56px 0 20px; }
.vr-byline { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 800; margin-bottom: 48px; color: var(--vr-muted); }
.vr-article-body { max-width: 650px; margin: auto; font: 400 clamp(1.05rem, 1.6vw, 1.22rem)/1.72 var(--vr-serif); }
.vr-article-body p:first-child::first-letter { float: left; font-size: 5.2rem; line-height: 0.72; padding: 0.13em 0.1em 0 0; font-style: italic; }
.vr-article-body h3 { font: 400 2rem/1.05 var(--vr-serif); margin: 2em 0 0.7em; }
.vr-article-end { margin-top: 50px; padding-top: 16px; border-top: 1px solid var(--vr-rule); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--vr-sans); font-weight: 800; }

/* ============ Editorial desk (dark) ============ */
.vr-editorial { background: var(--vr-dark); color: var(--vr-white); }
.vr-editorial .vr-section-head { border-color: var(--vr-dark-rule); }
.vr-feature-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; margin-top: 40px; border-top: 1px solid var(--vr-dark-rule); }
.vr-feature-main { padding: 34px 42px 34px 0; border-right: 1px solid var(--vr-dark-rule); }
.vr-feature-side { display: grid; grid-template-rows: 1fr 1fr; }
.vr-feature-side article { padding: 34px 0 34px 42px; border-bottom: 1px solid var(--vr-dark-rule); }
.vr-feature-side article:last-child { border-bottom: 0; }
.vr-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.71rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vr-accent); }
.vr-label::before { content: ""; width: 8px; height: 8px; background: currentColor; border-radius: 50%; }
.vr-feature-grid h3 { font: 400 clamp(2.3rem, 5.2vw, 6.2rem)/0.91 var(--vr-serif); letter-spacing: -0.045em; margin: 58px 0 22px; text-transform: uppercase; }
.vr-feature-grid h3 em { display: block; font-style: italic; color: var(--vr-accent); }
.vr-feature-grid p { max-width: 660px; color: #c7c6be; margin: 0; }
.vr-feature-side h3 { font-size: clamp(1.7rem, 2.7vw, 3rem); margin: 40px 0 15px; }
.vr-availability { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--vr-dark-rule); font-size: 0.77rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }

/* ============ Status ladder ============ */
.vr-switcher { display: flex; gap: 0; margin-top: 38px; border: 1px solid var(--vr-rule); width: max-content; max-width: 100%; }
.vr-switcher button { border: 0; background: transparent; color: var(--vr-ink); padding: 12px 22px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; cursor: pointer; }
.vr-switcher button[aria-selected="true"] { background: var(--vr-ink); color: var(--vr-paper); }
.vr-ladder { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(30px, 7vw, 100px); align-items: start; margin-top: 52px; }
.vr-ladder-mark { aspect-ratio: 4/5; background: var(--vr-ink); color: var(--vr-paper); padding: 32px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.vr-ladder-mark::after { content: ""; position: absolute; right: -35%; bottom: -18%; width: 92%; aspect-ratio: 1; border: 2px solid var(--vr-accent); transform: rotate(28deg); }
.vr-ladder-mark strong { font: italic 400 clamp(3.4rem, 8vw, 8rem)/0.8 var(--vr-serif); letter-spacing: -0.07em; position: relative; z-index: 1; }
.vr-ladder-mark small { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; max-width: 170px; position: relative; z-index: 1; }
.vr-ladder-copy h3 { font: 400 clamp(2.2rem, 4vw, 4.5rem)/1 var(--vr-serif); margin: 0 0 22px; }
.vr-ladder-copy p { max-width: 680px; font-size: 1.1rem; color: var(--vr-muted); }
.vr-criteria { margin: 44px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--vr-rule); }
.vr-criteria li { display: grid; grid-template-columns: 50px 1fr; gap: 18px; padding: 19px 0; border-bottom: 1px solid var(--vr-soft-rule); align-items: start; }
.vr-criteria b { font: italic 1.15rem var(--vr-serif); }
.vr-criteria span { font-size: 0.92rem; }

/* ============ Brand Studio ============ */
.vr-studio { background: var(--vr-paper2); }
.vr-package-list { margin-top: 40px; border-top: 1px solid var(--vr-rule); }
.vr-package-list details { border-bottom: 1px solid var(--vr-rule); }
.vr-package-list summary { list-style: none; display: grid; grid-template-columns: 110px 1fr auto; gap: 24px; align-items: center; padding: 28px 0; cursor: pointer; }
.vr-package-list summary::-webkit-details-marker { display: none; }
.vr-tier { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.vr-package-list summary h3 { margin: 0; font: 400 clamp(1.9rem, 4vw, 4.4rem)/1 var(--vr-serif); text-transform: uppercase; }
.vr-price { font: italic 1.2rem var(--vr-serif); white-space: nowrap; }
.vr-detail-body { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 24px; padding: 0 0 32px; color: var(--vr-muted); }
.vr-detail-body ul { margin: 0; padding-left: 18px; }
.vr-detail-body p { margin: 0; }
.vr-commercial-note { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; margin-top: 45px; padding: 25px 0; border-block: 1px solid var(--vr-rule); }
.vr-commercial-note strong { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; }
.vr-commercial-note p { margin: 0; font: italic 1.1rem/1.45 var(--vr-serif); }

/* ============ Contact / founding cohort ============ */
.vr-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; background: var(--vr-accent); color: var(--vr-ink); align-items: end; }
.vr-contact h2 { margin: 0; font: 400 clamp(3.6rem, 8vw, 9rem)/0.81 var(--vr-serif); letter-spacing: -0.06em; text-transform: uppercase; }
.vr-contact h2 em { display: block; font-style: italic; }
.vr-contact-copy { max-width: 520px; justify-self: end; }
.vr-contact-copy p { font-size: 1.1rem; margin: 0 0 28px; }
.vr-contact-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.vr-status { min-height: 24px; margin-top: 15px; font-size: 0.78rem; font-weight: 700; }

/* ============ Newsletter band ============ */
.vr-newsletter { background: var(--vr-dark); color: var(--vr-white); }
.vr-newsletter .vr-section-head { border-color: var(--vr-dark-rule); }
.vr-newsletter-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 44px; }
.vr-newsletter-inner h3 { font: 400 clamp(1.9rem, 3.6vw, 3rem)/1 var(--vr-serif); margin: 0 0 14px; text-transform: uppercase; }
.vr-newsletter-inner p { color: #c7c6be; margin: 0; }
.vr-newsletter-form { display: flex; gap: 0; border: 1px solid var(--vr-dark-rule); }
.vr-newsletter-form input[type="email"] { flex: 1; background: transparent; border: 0; color: var(--vr-white); padding: 18px 22px; font-family: var(--vr-sans); font-size: 15px; min-width: 0; }
.vr-newsletter-form input[type="email"]::placeholder { color: #8f8e86; }
.vr-newsletter-form input[type="email"]:focus { outline: 1px solid var(--vr-accent); }
.vr-newsletter-form button { background: var(--vr-accent); color: var(--vr-ink); border: 0; padding: 0 32px; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.vr-newsletter-note { font-size: 0.78rem; color: #8f8e86; margin-top: 14px; }

/* ============ Footer ============ */
.vr-site-footer { padding: 26px clamp(20px, 5vw, 80px); display: flex; justify-content: space-between; gap: 25px; flex-wrap: wrap; background: var(--vr-dark); color: #cccac2; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
.vr-site-footer a:hover { color: var(--vr-accent); }
.vr-footer-links { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }

/* ============ Inner pages: cards, articles ============ */
.vr-page-head { padding: 88px clamp(20px, 5vw, 80px) 56px; border-bottom: 1px solid var(--vr-rule); }
.vr-page-head .vr-wrap { padding: 0; }
.vr-page-head h1 { font: 400 clamp(2.4rem, 6vw, 4.6rem)/0.95 var(--vr-serif); letter-spacing: -0.04em; text-transform: uppercase; margin: 14px 0 0; }
.vr-archive-desc { color: var(--vr-muted); max-width: 640px; margin-top: 14px; }
.vr-grid { display: grid; gap: 0; border-top: 1px solid var(--vr-rule); margin-top: 44px; }
.vr-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vr-grid--2 { grid-template-columns: repeat(2, 1fr); }
.vr-card { padding: 32px 32px 34px 0; border-right: 1px solid var(--vr-rule); border-bottom: 1px solid var(--vr-rule); display: flex; flex-direction: column; align-items: flex-start; min-height: 380px; }
.vr-card:nth-child(3n) { border-right: 0; }
.vr-card:not(:nth-child(3n+1)) { padding-left: 32px; }
.vr-card-media { width: 100%; aspect-ratio: 16/10; overflow: hidden; background: var(--vr-paper2); margin-bottom: 24px; }
.vr-card-media img { width: 100%; height: 100%; object-fit: cover; }
.vr-card-media--ph { display: flex; align-items: center; justify-content: center; }
.vr-card-media--ph span { font-family: var(--vr-serif); font-size: 4rem; color: rgba(16, 17, 15, 0.14); font-style: italic; }
.vr-card-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.vr-card-kicker { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--vr-muted); margin: 0 0 14px; }
.vr-card-title { font: 400 clamp(1.6rem, 2.6vw, 2.6rem)/0.95 var(--vr-serif); letter-spacing: -0.03em; text-transform: uppercase; margin: 0 0 16px; }
.vr-card-title a:hover { color: var(--vr-muted); }
.vr-card-excerpt { color: var(--vr-muted); margin: 0 0 20px; flex: 1; }
.vr-card-meta { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.vr-pagination { margin-top: 56px; display: flex; gap: 12px; flex-wrap: wrap; }
.vr-pagination .page-numbers { border: 1px solid var(--vr-rule); padding: 12px 20px; font-size: 0.8rem; font-weight: 700; }
.vr-pagination .page-numbers.current { background: var(--vr-ink); color: var(--vr-paper); border-color: var(--vr-ink); }

.vr-article { max-width: 780px; margin: 0 auto; padding: 80px 28px 96px; }
.vr-article-head { text-align: left; margin-bottom: 48px; border-bottom: 1px solid var(--vr-rule); padding-bottom: 32px; }
.vr-article-title { font: 400 clamp(2.6rem, 6vw, 4.6rem)/0.92 var(--vr-serif); letter-spacing: -0.05em; text-transform: uppercase; margin: 18px 0 22px; }
.vr-byline { color: var(--vr-muted); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; }
.vr-byline a { border-bottom: 1px solid var(--vr-ink); }
.vr-article-media { margin: 0 0 48px; }
.vr-article-media img { width: 100%; }
.vr-entry-content { font-size: 1.12rem; line-height: 1.8; }
.vr-entry-content > p:first-of-type::first-letter { font-family: var(--vr-serif); font-size: 4.6em; float: left; line-height: 0.82; padding: 6px 14px 0 0; font-style: italic; }
.vr-entry-content h2, .vr-entry-content h3 { font-family: var(--vr-serif); margin-top: 2em; }
.vr-entry-content blockquote { margin: 2.2em 0; padding: 8px 0 8px 32px; border-left: 3px solid var(--vr-accent); font-family: var(--vr-serif); font-size: 1.5rem; font-style: italic; line-height: 1.45; }
.vr-entry-content a { border-bottom: 1px solid var(--vr-ink); }
.vr-page-body { max-width: 780px; padding: 64px 28px 96px; margin: 0 auto; font-size: 1.08rem; line-height: 1.75; }
.vr-tags { margin: 56px 0 0; padding-top: 28px; border-top: 1px solid var(--vr-rule); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--vr-muted); }
.vr-tags a { margin-right: 14px; border-bottom: 1px solid var(--vr-ink); }
.vr-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 48px; border-top: 1px solid var(--vr-rule); }
.vr-post-nav a { padding: 28px 28px 28px 0; display: block; border-right: 1px solid var(--vr-rule); }
.vr-post-nav a:last-child { border-right: 0; padding-left: 28px; text-align: right; }
.vr-post-nav a:hover { background: var(--vr-paper2); }
.vr-nav-label { display: block; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800; margin-bottom: 10px; }
.vr-nav-title { font-family: var(--vr-serif); font-size: 1.25rem; }

.vr-search-form { display: flex; border: 1px solid var(--vr-rule); max-width: 520px; margin-top: 28px; }
.vr-search-form input[type="search"] { flex: 1; background: transparent; border: 0; color: var(--vr-ink); padding: 16px 20px; font-size: 15px; min-width: 0; font-family: var(--vr-sans); }
.vr-search-form input[type="search"]:focus { outline: 2px solid var(--vr-accent); }
.vr-search-form button { background: var(--vr-ink); color: var(--vr-paper); border: 0; padding: 0 28px; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }

.vr-404 { text-align: center; padding: 120px 28px; }
.vr-404 h1 { font: 400 clamp(4rem, 12vw, 9rem)/0.9 var(--vr-serif); margin: 0 0 20px; }
.vr-404 h1 span { font-style: italic; background: var(--vr-accent); padding: 0 0.1em; }

/* Comments */
.vr-comments { max-width: 780px; margin: 0 auto; padding: 0 28px 96px; }
.vr-comments h2, .vr-comments h3 { font-family: var(--vr-serif); font-size: 1.8rem; }
.comment-list { list-style: none; margin: 0 0 48px; padding: 0; }
.comment-list .comment { border: 1px solid var(--vr-rule); padding: 28px; margin-bottom: 20px; background: var(--vr-white); }
.comment-author { font-weight: 700; }
.comment-metadata { font-size: 0.72rem; color: var(--vr-muted); letter-spacing: 0.1em; text-transform: uppercase; margin: 6px 0 14px; }
.comment-reply-link { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; border-bottom: 1px solid var(--vr-ink); }
.comment-form label { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--vr-muted); margin: 18px 0 8px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%; background: var(--vr-white); border: 1px solid var(--vr-rule); color: var(--vr-ink);
  padding: 14px 18px; font-family: var(--vr-sans); font-size: 15px;
}
.comment-form input:focus, .comment-form textarea:focus { outline: 2px solid var(--vr-accent); }
.comment-form .submit { margin-top: 20px; }

/* ============ Responsive ============ */
@media (max-width: 1024px) {
  .vr-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .vr-card:nth-child(3n) { border-right: 1px solid var(--vr-rule); }
  .vr-card:nth-child(2n) { border-right: 0; }
  .vr-card:not(:nth-child(3n+1)) { padding-left: 0; }
  .vr-card:nth-child(2n) { padding-left: 32px; }
  .vr-feature-grid { grid-template-columns: 1fr; }
  .vr-feature-main { padding: 30px 0; border-right: 0; border-bottom: 1px solid var(--vr-dark-rule); }
  .vr-feature-side article { padding: 30px 0; }
  .vr-newsletter-inner { grid-template-columns: 1fr; }
  .vr-ladder { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .vr-mast { min-height: 0; padding: 18px 18px 24px; }
  .vr-mast::after { display: none; }
  .vr-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--vr-dark); border-bottom: 1px solid var(--vr-dark-rule); padding: 12px 24px 24px; z-index: 50; }
  .vr-nav.is-open { display: block; }
  .vr-nav ul { flex-direction: column; gap: 4px; align-items: stretch; }
  .vr-nav ul li a { display: block; padding: 12px 0; border-bottom: 1px solid var(--vr-dark-rule); }
  .vr-menu-toggle { display: inline-block; }
  .vr-hero { grid-template-columns: 1fr; padding: 74px 0 58px; align-items: start; }
  .vr-hero h1 { font-size: clamp(3.5rem, 21vw, 7.2rem); }
  .vr-dek { max-width: 300px; }
  .vr-mast-foot { align-items: flex-start; flex-direction: column; }
  .vr-section { padding: 70px 20px; }
  .vr-section-head { grid-template-columns: 1fr; gap: 10px; }
  .vr-manifesto, .vr-ladder, .vr-contact { grid-template-columns: 1fr; }
  .vr-principles { grid-template-columns: 1fr; }
  .vr-story-grid { grid-template-columns: 1fr; }
  .vr-story-card, .vr-story-card:not(:first-child) { padding: 30px 0; min-height: 340px; border-right: 0; border-bottom: 1px solid var(--vr-rule); }
  .vr-story-card:last-child { border-bottom: 0; }
  .vr-story-card h3, .vr-story-card:not(:first-child) h3 { font-size: clamp(2.2rem, 12vw, 4rem); margin-top: 42px; }
  .vr-ladder-mark { aspect-ratio: 5/4; }
  .vr-switcher { width: 100%; }
  .vr-switcher button { flex: 1; padding-inline: 10px; }
  .vr-criteria li { grid-template-columns: 38px 1fr; }
  .vr-package-list summary { grid-template-columns: 60px 1fr; gap: 12px; }
  .vr-price { grid-column: 2; }
  .vr-detail-body { grid-template-columns: 1fr; padding-left: 72px; }
  .vr-commercial-note { grid-template-columns: 1fr; gap: 12px; }
  .vr-contact { gap: 42px; }
  .vr-contact h2 { font-size: clamp(4rem, 20vw, 7rem); }
  .vr-contact-copy { justify-self: start; }
  .vr-grid--3, .vr-grid--2 { grid-template-columns: 1fr; }
  .vr-card { border-right: 0; padding-left: 0 !important; }
  .vr-post-nav { grid-template-columns: 1fr; }
  .vr-post-nav a { border-right: 0; border-bottom: 1px solid var(--vr-rule); padding: 24px 0; }
  .vr-post-nav a:last-child { text-align: left; padding-left: 0; }
  .vr-newsletter-form { flex-direction: column; }
  .vr-newsletter-form button { padding: 18px; }
}

/* ============================================================
   TECH YARDE LAYER — masthead brand, catalog skin, WP markup
   ============================================================ */
.ty-brandlink { display: inline-flex; align-items: center; gap: 0.85rem; color: inherit; }
.ty-logo { width: 46px; height: 46px; border-radius: 10px; border: 2px solid var(--vr-paper); object-fit: cover; }
.ty-catalog-intro { max-width: 46rem; color: var(--vr-muted); font-size: 1.05rem; margin-bottom: 0.5rem; }

/* Catalog machinery (markup + hooks unchanged; skin only) */
.ty-search { display: flex; align-items: center; gap: 0.75rem; border: 2px solid var(--vr-ink); background: #FFFDF8; padding: 0.9rem 1.1rem; margin: 1.75rem 0 0.5rem; max-width: 44rem; }
.ty-search svg { flex: none; }
.ty-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; width: 100%; color: var(--vr-ink); }
.ty-search input::placeholder { color: #9A968C; }
.ty-tabs { display: flex; gap: 0; margin: 1.4rem 0 1.1rem; border-bottom: 1px solid var(--vr-rule); max-width: 44rem; }
.ty-tab { background: none; border: 0; font: inherit; font-size: 1.05rem; font-weight: 700; color: var(--vr-muted); padding: 0.6rem 1.6rem 0.9rem; cursor: pointer; position: relative; }
.ty-tab.active { color: var(--vr-ink); }
.ty-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 5px; background: var(--vr-accent); }
.ty-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.4rem 0 0.5rem; }
.pill { border: 1.5px solid var(--vr-rule); background: transparent; border-radius: 999px; padding: 0.55rem 1.1rem; font-size: 0.88rem; font-weight: 600; color: var(--vr-muted); cursor: pointer; font-family: inherit; }
.pill:hover { border-color: var(--vr-ink); color: var(--vr-ink); }
.pill.active { background: var(--vr-ink); border-color: var(--vr-ink); color: var(--vr-paper); }

.tool-list { margin-top: 0.5rem; }
.tool-card { display: grid; grid-template-columns: 44px 62px 1fr 30px; gap: 0.9rem; align-items: start; padding: 1.4rem 0; border-top: 1px solid var(--vr-rule); }
.tool-card:last-of-type { border-bottom: 1px solid var(--vr-rule); }
.tool-num { color: var(--vr-muted); font-size: 0.9rem; font-weight: 700; padding-top: 0.35rem; }
.tool-mono { width: 56px; height: 56px; background: var(--vr-accent); border: 2px solid var(--vr-ink); color: var(--vr-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem; letter-spacing: 0.02em; }
.tool-name { font-family: var(--vr-serif); font-size: 1.45rem; font-weight: 700; line-height: 1.15; color: var(--vr-ink); }
a:hover .tool-name { color: var(--vr-accent-ink); }
.cat-tag { display: inline-block; border: 1px solid var(--vr-rule); color: var(--vr-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.25rem 0.55rem; margin-left: 0.6rem; vertical-align: 4px; }
.tool-tagline { color: var(--vr-muted); font-size: 0.95rem; margin: 0.4rem 0 0.5rem; }
.tool-price { font-size: 0.95rem; margin: 0 0 0.75rem; }
.tool-price .from { font-weight: 700; }
.tool-price .sep { color: var(--vr-muted); margin: 0 0.35rem; }
.tool-price .plan { color: var(--vr-muted); }
.aff { display: inline-block; font-weight: 700; font-size: 0.82rem; }
.aff.verified { color: #1C7A3D; }
.aff.reported { color: #8A6D00; }
.aff.closed { color: var(--vr-muted); }
.aff.recheck { color: #B3401E; }
.tool-actions { display: flex; gap: 0.6rem; }
.mini-btn { border: 1.5px solid var(--vr-ink); background: transparent; padding: 0.5rem 1rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; font-family: inherit; color: var(--vr-ink); }
.mini-btn:hover { background: var(--vr-ink); color: var(--vr-paper); }
.mini-btn.saved { background: var(--vr-ink); color: var(--vr-paper); }
.tool-arrow { font-size: 1.4rem; color: var(--vr-ink); padding-top: 0.15rem; }
.tool-arrow:hover { color: var(--vr-accent); }
.tool-empty { padding: 2.5rem 0; color: var(--vr-muted); display: none; }

.ty-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 2.2rem 0 0.5rem; }
.ty-note { border-top: 2px solid var(--vr-ink); padding-top: 1rem; color: var(--vr-muted); display: grid; gap: 0.4rem; font-size: 0.95rem; }
.ty-note strong { color: var(--vr-ink); }
.ty-note .n { font-family: var(--vr-serif); font-size: 1.7rem; font-style: italic; color: var(--vr-accent-ink); }

/* Promise + What-we-do grids (current live copy) */
.ty-audience { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--vr-ink); border-left: 1px solid var(--vr-rule-soft); margin-top: 2.5rem; }
.ty-audience article { padding: clamp(1.4rem, 3vw, 2.4rem); border-right: 1px solid var(--vr-rule-soft); border-bottom: 1px solid var(--vr-rule-soft); }
.ty-audience article > span { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vr-accent-ink); }
.ty-audience h3 { font-family: var(--vr-serif); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.05; margin: 0.6rem 0 0.7rem; font-weight: 600; }
.ty-audience p { color: var(--vr-muted); }
.ty-do-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.ty-do-grid article { border: 1px solid rgba(241, 238, 232, 0.28); padding: 1.6rem; }
.ty-do-grid h3 { font-family: var(--vr-serif); font-size: 1.45rem; font-weight: 600; margin-bottom: 0.6rem; }
.ty-do-grid p { color: var(--vr-dark-muted); }
.ty-do-close { max-width: 52rem; color: var(--vr-dark-muted); font-size: 1.05rem; }
.ty-quote { border-left: 6px solid var(--vr-accent); padding: 0.4rem 0 0.4rem 1.6rem; max-width: 52rem; }
.ty-quote blockquote { font-family: var(--vr-serif); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 600; line-height: 1.25; margin: 0.5rem 0 0.8rem; }
.ty-quote figcaption { color: var(--vr-muted); font-size: 0.95rem; }
.ty-stars { color: var(--vr-accent); letter-spacing: 0.3em; }

/* Keep the site footer's top edge flush with the new sections */
.ty-front-gold .ty-footer { margin-top: 0; }

@media (max-width: 1007px) {
  .ty-notes, .ty-do-grid { grid-template-columns: 1fr; }
  .ty-audience { grid-template-columns: 1fr; }
  .tool-card { grid-template-columns: 34px 52px 1fr 24px; gap: 0.6rem; }
  .tool-mono { width: 48px; height: 48px; font-size: 1rem; }
}

/* Hero mast-foot stats (matches the approved preview markup) */
.ty-stats { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.ty-stats span { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: #D9D7D0; }
.ty-stats b { display: block; font: 400 1.9rem/1 var(--vr-serif); color: #FFF; }
@media (max-width: 760px) { .ty-stats { gap: 18px; } }

/* Masthead composition fix (2026-10-03, per Collins's screenshot):
   on tall viewports the hero row stretched, stranding the dek mid-air
   while the headline pinned to the bottom. Cap the masthead height,
   rest the dek on the same baseline as the headline, and clear the
   old theme's border off the stats strip. */
@media (min-width: 1008px) {
  .vr-mast { min-height: min(94svh, 880px); }
}
.vr-dek { align-self: end; padding-bottom: 0.4rem; }
.ty-stats { border: 0; margin: 0; }

/* Stats strip: out-specify the old theme's .ty-stats border (load-order proof) */
.vr-mast-foot .ty-stats { border: 0; margin: 0; outline: 0; }

/* Marquee in the first viewport (Collins 2026-10-05): the masthead no
   longer forces a near-full-screen height, the headline scale and hero
   spacing are tightened, so the gold ticker shows without scrolling. */
@media (min-width: 1008px) {
  .vr-mast { min-height: 0; padding-top: 16px; padding-bottom: 22px; }
  .vr-topline { padding-bottom: 14px; }
  .vr-hero { padding: clamp(36px, 6vh, 72px) 0 26px; }
  .vr-hero h1 { font-size: clamp(4rem, 7.8vw, 8.5rem); }
  .vr-mast-foot { padding-top: 14px; }
}
@media (max-width: 1007px) {
  .vr-hero { padding: 52px 0 40px; }
}