/* Creative Value Monitor · shared site frame
   One background, frame, header, nav, footer, focus style and skip link for every page.
   Linked last on every page, after the page's own styles, so these values win. */

:root {
  --frame: 1120px;
  --gutter: 48px;
  --site-navy: #082546;
  --site-cream: #E8E8D1;
  --site-slate: #546285;
  --site-line: rgba(8,37,70,.16);
  --site-live: #1F9D55;
}
@media (max-width: 620px) { :root { --gutter: 32px; } }

/* Background: flat cream with a fine grid, on every page */
body {
  background: #E8E8D1;
  background-image: linear-gradient(rgba(8,37,70,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(8,37,70,.035) 1px, transparent 1px);
  background-size: 32px 32px;
  background-attachment: scroll;
}
body::before { content: none; display: none; }
/* The Lookup tool's header sits inside its already-framed page wrapper */
.wrap > .bar { width: 100%; }

/* Frame: the header, nav and footer sit in the same place on every page */
.nav, .top, .site > footer, body > .foot {
  width: min(var(--frame), calc(100% - var(--gutter)));
  margin-left: auto;
  margin-right: auto;
}
.site > main { flex: 1 0 auto; display: flex; flex-direction: column; }
/* Editorial pages: every container uses the frame; text and figures keep a 920px column at its left edge */
:root { --max: var(--frame); }
.site .shell > *:not(.hero) { max-width: 920px; }

/* Header */
.nav, .top, .bar {
  min-height: 84px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
@media (max-width: 620px) {
  .nav, .top, .bar { flex-wrap: wrap; row-gap: 12px; padding: 18px 0; min-height: 0; }
}

/* Brand: one logotype */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 600 13px "IBM Plex Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--site-navy);
  text-decoration: none;
  white-space: nowrap;
}
.mark, .brand-mark { display: grid; grid-template-columns: repeat(3, 8px); gap: 4px; flex: none; }
.mark i, .brand-mark i { width: 8px; height: 8px; border-radius: 50%; }

/* Nav: one button style, 40px tall */
.snav, .nav-links, .nav-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.snav a, .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  font: 600 11px "IBM Plex Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--site-navy);
  text-decoration: none;
  border: 1px solid var(--site-navy);
  border-radius: 0;
  background: rgba(232,232,209,.54);
  transition: background .2s, color .2s;
}
.snav a:hover, .snav a.cur, .nav-link:hover, .nav-link.is-current { background: var(--site-navy); color: var(--site-cream); }
@media (max-width: 620px) { .snav a, .nav-link { padding: 0 10px; letter-spacing: .06em; } }

/* Footer: one footer */
.site > footer, body > .foot {
  margin-top: auto;
  padding: 32px 0 38px;
  border-top: 1px solid var(--site-line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font: 500 12px "IBM Plex Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--site-slate);
}
.site > footer a, body > .foot a { color: inherit; text-decoration: underline; text-decoration-color: rgba(84,98,133,.45); text-underline-offset: 3px; }
.site > footer a:hover, body > .foot a:hover { color: var(--site-navy); text-decoration-color: currentColor; }
@media (max-width: 620px) { .site > footer, body > .foot { flex-direction: column; gap: 8px; } }

/* Focus: one clear ring everywhere (cream on navy panels) */
:focus-visible { outline: 2px solid var(--site-navy); outline-offset: 2px; box-shadow: none; }
/* Navy panels: homepage Lookup band; Lookup tool result hero, sample records and plans */
.lookup :focus-visible, .up :focus-visible, .hero-band :focus-visible, .wrap .hero :focus-visible, .db :focus-visible { outline-color: var(--site-cream); }
/* Fields that sit inside a framed row show the ring on the row */
label.search input:focus-visible, form.row input:focus-visible, div.field input:focus-visible, .newsletter-row input:focus-visible { outline: none; }
label.search:focus-within, form.row:focus-within, div.field:focus-within, .newsletter-row:focus-within { outline: 2px solid var(--site-navy); outline-offset: 2px; box-shadow: none; }

/* Skip link */
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 14px; background: var(--site-navy); color: var(--site-cream);
  font: 600 12px "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Placeholders: slate, readable on white and on cream */
::placeholder { color: #546285 !important; opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }