@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,900&family=Archivo:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root {
  --paper: #f5ecdc;
  --paper-card: #fbf5e9;
  --paper-deep: #eee1c9;
  --paper-edge: #d9c8a6;
  --ink: #26313f;
  --ink-mute: #556172;
  --survey-blue: #33679f;
  --oxide: #b3402a;
  --hairline: #26313f22;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Archivo', sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, monospace;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 90rem 60rem at 110% -20%, #d8c9ab55, transparent 60%),
    radial-gradient(ellipse 70rem 50rem at -20% 115%, #d8c9ab44, transparent 60%),
    repeating-radial-gradient(ellipse 120rem 80rem at 85% -30%, transparent 0 5.9rem, #26313f09 5.9rem 6rem),
    repeating-radial-gradient(ellipse 100rem 70rem at -15% 120%, transparent 0 7.4rem, #26313f08 7.4rem 7.5rem);
  background-attachment: fixed;
}

a { color: var(--survey-blue); }
code, pre { font-family: var(--mono); }

/* Fleet: retain the data visualization, replace the generic dark scaffold shell. */
body:has(#treemap) { display: block; color: var(--ink); background-color: var(--paper); }
body:has(#treemap) .topbar {
  position: static; max-width: 75rem; margin: 0 auto; padding: 2rem 1rem 1rem;
  color: var(--ink); background: transparent; border-bottom: 3px double var(--ink);
  backdrop-filter: none;
}
body:has(#treemap) .brand-mark { border-radius: 0; background: var(--oxide); box-shadow: 5px 5px 0 var(--paper-edge); }
body:has(#treemap) .brand h1 { font: 900 1.35rem var(--serif); color: var(--ink); }
body:has(#treemap) .btn { border-radius: 0; font-family: var(--sans); }
body:has(#treemap) .btn-ghost { color: var(--ink); border-color: var(--ink); background: transparent; }
body:has(#treemap) .btn-primary { color: var(--paper); background: var(--ink); border: 1px solid var(--ink); box-shadow: none; }
body:has(#treemap) .btn-primary:hover { background: var(--survey-blue); border-color: var(--survey-blue); }
body:has(#treemap) #landing { padding: 2.2rem 1.5rem 4rem; }
body:has(#treemap) .shell { width: min(62rem, 100%); }
body:has(#treemap) .hero {
  color: var(--ink); background: var(--paper-card); border: 1px solid var(--paper-edge);
  border-radius: 0; box-shadow: 5px 5px 0 var(--paper-edge); padding: 2rem;
}
body:has(#treemap) .hero::before { display: none; }
body:has(#treemap) .tag {
  color: var(--oxide); background: transparent; border: 0; border-radius: 0; padding: 0;
  font: 600 .72rem var(--mono); letter-spacing: .24em; text-transform: uppercase;
}
body:has(#treemap) .hero h2 { color: var(--ink); font: 900 clamp(2.2rem, 6vw, 3.8rem)/1.04 var(--serif); }
body:has(#treemap) .hero p { color: var(--ink-mute); }
body:has(#treemap) .features { gap: 1.5rem; }
body:has(#treemap) .feature {
  color: var(--ink); background: transparent; border: 0; border-top: 1px solid var(--ink);
  border-radius: 0; box-shadow: none; padding: 1rem 0;
}
body:has(#treemap) .feature h3 { font-family: var(--serif); font-size: 1.15rem; }
body:has(#treemap) .feature p { color: var(--ink-mute); }
body:has(#treemap) #app { padding: 2rem 0 4rem; }
body:has(#treemap) .dashboard {
  max-width: 75rem !important; color: var(--ink); background: transparent; border: 0;
  border-radius: 0; box-shadow: none;
}
body:has(#treemap) .dashboard h2 { font: 900 clamp(2rem, 5vw, 3.4rem) var(--serif); }
body:has(#treemap) #tm-totals,
body:has(#treemap) .methodology,
body:has(#treemap) #tm-status,
body:has(#treemap) label { color: var(--ink-mute) !important; }
body:has(#treemap) .methodology summary { color: var(--survey-blue); font-family: var(--mono); }
body:has(#treemap) #tm-source {
  color: var(--ink) !important; background: var(--paper-card) !important;
  border: 1px solid var(--ink) !important; border-radius: 0 !important; font-family: var(--mono);
}
body:has(#treemap) #treemap {
  background: var(--paper-card) !important; border: 1px solid var(--ink) !important;
  border-radius: 0 !important; box-shadow: 5px 5px 0 var(--paper-edge);
}
body:has(#treemap) #tm-tip { background: var(--ink) !important; color: var(--paper) !important; border-radius: 0 !important; }

/* Rendered agent guide: same editorial sheet as the survey pages. */
body:has(#content) { padding: 0 1.5rem 4rem; }
body:has(#content) main { max-width: 62rem; padding: 3.5rem 0; background: transparent; border: 0; }
body:has(#content) .top { padding-bottom: 1.4rem; border-bottom: 3px double var(--ink); }
body:has(#content) h1 { font: 900 clamp(2.2rem, 6vw, 4rem) var(--serif); color: var(--ink); }
body:has(#content) article { color: var(--ink); line-height: 1.6; }
body:has(#content) article h1,
body:has(#content) article h2,
body:has(#content) article h3 { font-family: var(--serif); }
body:has(#content) code { background: #26313f10; color: var(--ink); border-radius: 0; }
body:has(#content) pre { background: var(--ink); color: var(--paper); border-radius: 0; padding: 1rem; overflow-x: auto; }
body:has(#content) pre code { background: transparent; color: inherit; }

/* Repository evidence already shares the palette; align its type and paper texture. */
body:has(#app.status) { font-family: var(--sans); }
body:has(#app.status) h1,
body:has(#app.status) h2 { font-family: var(--serif); }