/* ========================================================
   Brings the older pages (videos, design archive, case study,
   web) onto the v2 type system without rewriting their inline
   CSS. They already run on --display / --body / --accent /
   --mono, so remapping those swaps the faces everywhere.

   Load AFTER the page's own <style>.
   ======================================================== */
:root {
  --display: 'Archivo', 'Arial Narrow', Arial, sans-serif !important;
  --body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif !important;
  --accent: 'Archivo', Arial, sans-serif !important;   /* the handwritten accent is retired */
  --mono: 'Archivo Narrow', 'Arial Narrow', sans-serif !important;  /* labels, not code */
}
body { font-size: 17px; -webkit-font-smoothing: antialiased; }

/* statements go wide, like the rest of the site */
.hero h1, .section-head h2, .contact h2, .cta-panel h2, .stat-board .headline {
  font-stretch: 112%; letter-spacing: -0.035em !important; font-variation-settings: normal !important;
}
/* emphasis was a rotated handwritten word; now it's just color */
.hero h1 em, .section-head h2 em, .contact h2 em, .cta-panel h2 em, .stat-board .headline .swing,
.case-card p em, .case-card ul li em, .stat-cell .num-suffix, h3 em, .vp-title, .skill-card h4 {
  font-family: var(--display) !important; font-style: normal !important; transform: none !important;
  letter-spacing: -0.01em !important; font-size: 1em !important;
}

/* labels set in narrow caps read better at a size you can actually see */
.section-head .head-note, .tag, .case-tag, .vp-badge, .chart-title, .stat-cell .desc, .metric-pill .k, footer { font-size: max(12.5px, 1em); }

/* no bubbles, no background video: the wallpaper is a still sky */
.bubble-field, .bubble { display: none !important; }

/* window chrome uses Vista's own face */
.vw-title, .vw-menubar a, .vw-btn { font-family: 'Segoe UI', 'Source Sans 3', system-ui, sans-serif !important; }
.vw-title { font-size: 12.5px !important; }
.vw-menubar a { font-size: 14px !important; }

/* ---------- the paper ground (the full-bleed blue sky is retired) ----------
   These pages were drawn as white type on blue. On paper, headlines and
   labels become ink; anything that sits ON a photo keeps its white. */
:root { --page-bg: #f3f2ee !important; }
html, body { background: #f3f2ee !important; }
body::before, .bg-video-wrap, .bg-video-wrap::after { display: none !important; }
.hero h1, .hero .tagline, .hero .tagline strong, .section-head h2, .section-head .head-note,
.vc-title, .video-card.short .vc-title, footer, footer a, .tl-divider {
  color: #0b2538 !important; text-shadow: none !important;
}
.hero .tagline, .section-head .head-note { color: #3d5a6f !important; }
.hero h1 em, .section-head h2 em, .contact h2 em, .cta-panel h2 em { color: #0a6e9c !important; text-shadow: none !important; }
.section-head { border-bottom-color: rgba(11,37,56,0.15) !important; }
.tl-divider::before, .tl-divider::after { background: rgba(11,37,56,0.15) !important; }
.browser-preview { color: rgba(11,37,56,0.55) !important; }
/* glass cards were tuned for blue behind them; on paper they want a real edge */
.case-card, .stat-board, .tl-item, .skill-card, .project-card, .contact, .cta-panel, .video-card .vc-media, .gallery-item, .site-card {
  box-shadow: 0 1px 2px rgba(11,37,56,0.06), 0 14px 34px -22px rgba(11,37,56,0.4) !important;
  border-color: rgba(11,37,56,0.1) !important;
}
.vw-window { box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), inset 0 0 0 1px rgba(78,192,224,0.22), 0 10px 28px rgba(11,37,56,0.16) !important; }

/* the old highlighter underline under hero emphasis: retired with the sky */
.hero h1 em::after { display: none !important; }

/* ---------- phones and touch (Oct 2026 QA pass) ---------- */
@media (pointer: coarse) {
  .vw-titlebar { height: 38px !important; }
  .vw-titleblock { min-height: 38px; }
  .vw-menubar { height: 50px !important; }
  .vw-menubar a { min-height: 44px; }
  .vw-controls .vw-btn:not(.close) { display: none !important; }
}
/* a 12px floor for badges and captions that were drawn at 10 to 11px */
.vc-badge, .thumb-label, .gi-label, .sale-label, .d-num, .site-num, .site-tag, .chart-title, .metric-pill .k,
.stat-cell .desc, .case-tag, .tag, .visit-counter, .vp-badge { font-size: 12px !important; }
/* the archive hangs two pieces per row on phones instead of one (a 45,000px scroll) */
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .gallery-item .gi-label { font-size: 12px !important; }
}
.browser-url, .browser-url a, .browser-url span, .vc-hint, .vc-media span { font-size: 12px !important; }
/* inline "Click to play" hints: readable size and contrast */
[style*="font-size:10px"] { font-size: 12px !important; }
[style*="rgba(255,255,255,0.4)"] { color: rgba(255,255,255,0.78) !important; }