:root {
  --ink: #101b20;
  --ink-soft: #38505a;
  --paper: #f7f8f5;
  --blue: #cce5ee;
  --blue-deep: #7db6c6;
  --line: #b8c8ca;
  --signal: #7f3326;
  --on-air: #d8432c;
  --serif: "Newsreader", Georgia, serif;
  --display: "Outfit", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --shell-max: 1400px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--serif); }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
.shell { width: min(var(--shell-max), calc(100% - 48px)); margin: 0 auto; }
.site-head { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--ink); }
.brand { text-decoration: none; font: 700 25px/1 var(--display); letter-spacing: -.045em; }
.brand-mark { color: var(--signal); }
.site-nav { display: flex; align-items: center; gap: 20px; font: 600 14px/1.2 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.site-nav a { min-height: 44px; display: grid; place-items: center; text-decoration: none; }
.site-nav a:hover { color: var(--signal); }

/* Gradiva Radyo: the on-air strip above the header and the nav link. */
.radyo-bar { display: block; background: var(--ink); color: var(--paper); text-decoration: none; }
.radyo-bar-in { min-height: 44px; display: flex; align-items: center; gap: 14px; font: 500 14px/1.2 var(--display); }
.radyo-on-air { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--blue); }
.radyo-bar strong { font-weight: 600; letter-spacing: -.01em; }
.radyo-bar-copy { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.radyo-bar-cta { margin-left: auto; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 2px solid var(--on-air); }
.radyo-bar:hover .radyo-bar-cta { color: var(--blue); }
.radyo-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--on-air); animation: radyo-pulse 1.8s ease-in-out infinite; }
.site-nav .nav-radyo, .gv-nav .nav-radyo { display: inline-flex; align-items: center; gap: 7px; color: var(--signal); }
@keyframes radyo-pulse { 50% { opacity: .35; } }
.eyebrow { font: 600 14px/1.1 var(--display); text-transform: uppercase; letter-spacing: .08em; }
.eyebrow { color: var(--signal); }
.site-foot { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; padding: 32px 0; font: 500 14px/1.5 var(--display); }
.site-foot p { margin: 0; max-width: 390px; }
.site-foot a { display: block; margin-bottom: 7px; text-decoration: none; }
.site-foot a:hover { color: var(--signal); }
.fine-print { padding: 16px 0 28px; border-top: 1px solid var(--line); font: 500 12px/1.4 var(--display); color: var(--ink-soft); }

/* Listing and article pages use the same vocabulary. */
.page-hero { max-width: 1050px; padding: clamp(60px, 10vw, 140px) 0 65px; }
.page-hero h1 { margin: 18px 0; font: 650 clamp(50px, 8vw, 112px)/.9 var(--display); letter-spacing: -.055em; }
.page-hero p { max-width: 640px; margin: 0; font-size: 22px; color: var(--ink-soft); line-height: 1.25; }
.index-list { border-top: 1px solid var(--ink); }
.index-row { display: grid; grid-template-columns: 80px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .9fr); align-items: baseline; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--ink); text-decoration: none; }
.index-row:hover { color: var(--signal); }
.index-row .contact-links { display: grid; gap: 6px; font: 600 15px/1.3 var(--display); }
.index-row .contact-links a { color: var(--ink); text-decoration: none; }
.index-row .contact-links a:hover { color: var(--signal); }
.index-row h2 { margin: 0; font: 600 clamp(28px, 3vw, 44px)/.98 var(--display); letter-spacing: -.04em; }
.index-row p { margin: 0; font-size: 17px; line-height: 1.25; color: var(--ink-soft); }
.index-row span { font: 600 13px/1.2 var(--display); text-transform: uppercase; letter-spacing: .06em; }
.measurement-row .notes-table { grid-column: 2 / 4; grid-row: 2; overflow-x: auto; }
.measurement-row > span:last-child { grid-column: 2; grid-row: 3; }
.notes-table table { width: 100%; min-width: 520px; border-collapse: collapse; font: 500 14px/1.4 var(--display); }
.notes-table th, .notes-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }.notes-table th { color: var(--ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }.notes-table p { margin: 10px 0 0; font-size: 16px; color: var(--ink-soft); }

/* Build renderer contract: class names remain stable in research/article.html. */
.gv-head { width: min(var(--shell-max), calc(100% - 48px)); min-height: 78px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ink); }
.gv-head .brand { text-decoration: none; }
.gv-head .mark { color: var(--signal); }
.gv-head .bn { font: 700 25px/1 var(--display); letter-spacing: -.045em; }
.gv-head small { margin-left: 8px; font: 600 12px/1 var(--display); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
.gv-nav { display: flex; align-items: center; gap: 20px; }
.gv-nav .nav-radyo { min-height: 44px; font: 600 14px/1 var(--display); text-decoration: none; text-transform: uppercase; letter-spacing: .05em; }
.gv-head .back { min-height: 44px; display: grid; place-items: center; font: 600 14px/1 var(--display); text-decoration: none; text-transform: uppercase; letter-spacing: .05em; }
.wrap { width: min(780px, calc(100% - 48px)); margin: 0 auto; padding: 80px 0 110px; }
.wrap .eyebrow { margin-bottom: 18px; }
h1.title { margin: 0 0 18px; font: 650 clamp(48px, 6vw, 84px)/.91 var(--display); letter-spacing: -.055em; }
.subtitle { max-width: 690px; font-size: 23px; line-height: 1.25; color: var(--ink-soft); }
.meta { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 32px; padding: 14px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font: 600 13px/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.verified { margin-top: 22px; padding: 14px 16px; background: var(--blue); border-left: 4px solid var(--signal); font: 500 15px/1.4 var(--display); }
.md { margin-top: 52px; }
.md h2 { margin: 60px 0 16px; font: 600 38px/1 var(--display); letter-spacing: -.04em; }
.md h3 { margin: 34px 0 10px; font: 600 24px/1.1 var(--display); letter-spacing: -.03em; }
.md p, .md li { font-size: 19px; line-height: 1.55; color: var(--ink-soft); }
.md p { margin: 0 0 20px; }
.md strong { color: var(--ink); }
.md a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.md figure { margin: 30px 0; padding: 16px; background: var(--blue); }
.md figure svg { width: 100%; height: auto; display: block; }
.md figcaption { margin-top: 10px; font: 500 13px/1.35 var(--display); color: var(--ink-soft); }
.md blockquote { margin: 30px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--signal); font-size: 24px; line-height: 1.25; }
.md table { width: 100%; margin: 0 0 24px; border-collapse: collapse; font: 500 15px/1.4 var(--display); }
.md th, .md td { padding: 11px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.gv-foot { width: min(var(--shell-max), calc(100% - 48px)); margin: 0 auto; padding: 26px 0 42px; border-top: 1px solid var(--ink); font: 500 13px/1.4 var(--display); color: var(--ink-soft); }

@media (max-width: 760px) {
  .shell, .gv-head, .gv-foot { width: min(100% - 32px, var(--shell-max)); }
  .site-head { min-height: 68px; }
  .site-nav { gap: 12px; }
  .site-nav a:nth-child(3) { display: none; }
  .radyo-bar-copy { display: none; }
  .site-foot { grid-template-columns: 1fr; gap: 20px; }
  .index-row { grid-template-columns: 42px 1fr; gap: 10px 16px; }
  .index-row p { grid-column: 2; }
  .index-row span:last-child { grid-column: 2; margin-top: 8px; }
  .index-row .contact-links { grid-column: 2; margin-top: 8px; }
  .measurement-row .notes-table { grid-column: 2; grid-row: auto; }.measurement-row > span:last-child { grid-column: 2; grid-row: auto; }
  .gv-head .bn small { display: none; }
  .wrap { width: min(100% - 32px, 780px); padding: 52px 0 70px; }
  .md p, .md li { font-size: 17px; }
}

@media (max-width: 520px) {
  .md table { display: block; overflow-x: auto; font-size: 13px; }
  .md table th, .md table td { padding: 8px 3px; }
}

@media (max-width: 460px) {
  .site-head { min-height: auto; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 0 8px; }
  .site-nav { width: 100%; justify-content: space-between; gap: 0; }
  .gv-nav { gap: 14px; }
}

@media (max-width: 400px) {
  .radyo-on-air { font-size: 0; gap: 0; }
  .gv-head small { display: none; }
}

@media (max-width: 380px) {
  .page-hero h1 { font-size: clamp(40px, 13vw, 50px); }
}

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