/* Shared look for the four audience-view mockups: dry, light, utilitarian.
   The type and colors are identical across views so only structure differs. */
:root {
  --paper: #FBFAF7;
  --panel: #FFFFFF;
  --ink: #1B1B1A;
  --dim: #6B6A66;
  --faint: #9A978F;
  --rule: #DAD7CF;
  --chip: #F0EEE8;
  --link: #1F6F82;
  --mark: #A85A14;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font-family: var(--serif); font-size: 17px; line-height: 1.55; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.line { font-weight: 600; }
.dim { color: var(--dim); }
table.data { border-collapse: collapse; font-family: var(--sans); font-size: 14px; margin: 12px 0; }
table.data th, table.data td { border: 1px solid var(--rule); padding: 4px 10px; text-align: left; }
table.data th { background: var(--chip); font-weight: 600; }
figure { margin: 14px 0; }
figure img { max-width: 100%; border: 1px solid var(--rule); display: block; }
figcaption { font-family: var(--sans); font-size: 13px; color: var(--dim); margin-top: 4px; }

/* The switcher bar every view carries. */
#switch { position: sticky; top: 0; z-index: 50; display: flex; gap: 2px; align-items: center;
  padding: 6px 12px; background: #2B2B29; color: #EDEAE4; font-family: var(--sans); font-size: 13px; }
#switch .who { margin-right: 14px; opacity: 0.7; }
#switch a { color: #EDEAE4; padding: 4px 10px; border-radius: 3px; }
#switch a.on { background: #EDEAE4; color: #2B2B29; }
#switch a:hover { text-decoration: none; background: #44443F; }
#switch a.on:hover { background: #EDEAE4; }
@media (max-width: 640px) { #switch .who { display: none; } }