/* base.css — shared tokens, reset, header and footer (all pages). */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


/* Content width (2026-11-03): one measure for header, page and footer so
   the rules align. 780px stops the page feeling phone-sized on a desktop
   monitor while keeping the address field a sensible length. Insights
   overrides it back to 680px for comfortable prose line length. */
:root { --measure: 780px; }

html, body {
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout ── */
.page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Header lockup (2026-09-15). Logo sits LEFT of a stacked wordmark and
   tagline, so the mark absorbs the vertical space the second line needs.
   Two lines of brand for roughly the height of one, which reclaims the
   dead band that used to sit above the fold. */
header {
  padding: 1.1rem 2rem;
  border-bottom: 2px solid rgb(205, 227, 234);
  background: var(--white);
}

.header-inner {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.header-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}
.header-home { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; }
.header-back { font-size: 0.8rem; color: var(--ink-soft); text-decoration: none; display: inline-block; white-space: nowrap; }
.header-back:hover { color: var(--ink); }

.wordmark {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.wordmark-dot {
  display: none;
}

.tagline {
  font-size: 0.7rem;
  color: var(--ink-soft);
  margin-top: 0.1rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
}


/* Footer */
footer {
  padding: 0.9rem 2rem;
  border-top: 1px solid var(--border);
  background: var(--white);
}

.footer-inner {
  max-width: var(--measure);
  margin: 0 auto;
  text-align: center;
}

.footer-line {
  font-size: 0.75rem;
  color: var(--ink-faint);
  line-height: 1.6;
  margin: 0 0 0.2rem;
}
.footer-line-strong { color: var(--ink-soft); margin-bottom: 0; }
.footer-line a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }


/* ── Phase 1: survey-report tokens (2026-10-27) ──
   Appended last so it overrides the earlier :root and type rules. */
:root {
  --ink:        #111111;
  --ink-soft:   #5f5f5f;
  --ink-faint:  #b5b5b5;
  --paper:      #ffffff;
  --white:      #ffffff;
  --accent:     #2f6b3a;
  --accent-lt:  #eef3ef;
  --warn:       #b3261e;
  --warn-lt:    #fbeeed;
  --caution:    #9a6b00;
  --caution-lt: #fbf5e6;
  --border:     #d9d9d9;
  --radius:     2px;
  --font-sans:  'IBM Plex Sans', system-ui, sans-serif;
  --font-serif: var(--font-sans);
  --font-mono:  'IBM Plex Mono', ui-monospace, monospace;
}

header { border-bottom: 1px solid var(--ink); }

/* Discreet Insights link, bottom-left (2026-10-18). Sits outside the
   centred footer copy, Google-style; drops above it on narrow screens. */
footer { position: relative; }
.footer-links { position: absolute; left: 2rem; bottom: 0.9rem; font-size: 0.75rem; }
.footer-links a { color: var(--ink-soft); text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 760px) {
  .footer-links { position: static; text-align: center; margin-bottom: 0.4rem; }
}

/* Survey-report header type, shared by every page (2026-10-27 restyle). */
.wordmark { font-weight: 600; letter-spacing: -0.01em; }
.tagline { text-transform: none; letter-spacing: 0; }