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

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


html, body {
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  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: 680px;
  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: 680px;
  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; }