/*
  Sitewide base styles: reset, typography defaults, and the structural
  canvas rule from CLAUDE.md. Load tokens.css before this file, every
  color/font/spacing value below reads from a var(--...) defined there.

  Structural rule, every page, every breakpoint (CLAUDE.md):
  content sits in a fixed-width canvas, centered. On screens wider than
  that canvas, the extra space shows the background color only, content
  never stretches to fill it. Only the header's bottom border and the
  footer's top border run edge-to-edge to the browser's edge, as page
  chrome. Every other divider line stays inside the fixed-width column.

  How that is built here: .site-header and .site-footer are full width
  elements with one bordered edge each. Everything inside them, and the
  page's <main>, is wrapped in .site-canvas, which is what actually
  centers content and caps it at --canvas-width. A new page template
  should wrap its own content in .site-canvas (or a section that itself
  uses it) for the same reason: any divider inside a page must stay
  inside that wrapper, never full width.
*/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-body);
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.5;
}

h1,
h2,
h3,
h4 {
  color: var(--color-title);
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* The fixed-width, centered canvas. Reused on every page: wrap page
   content in this class (or nest sections that use it) rather than
   inventing a new max-width value elsewhere. */
.site-canvas {
  max-width: var(--canvas-width);
  margin-inline: auto;
  padding-inline: var(--canvas-padding);
}

/* Page chrome: header and footer stay full width so their one border
   can run edge-to-edge to the browser's edge. Their content still sits
   in .site-canvas, see header.njk / footer.njk. */
.site-header {
  border-bottom: 1px solid var(--color-line);
}

.site-footer {
  border-top: 1px solid var(--color-line);
}

/* ==========================================================================
   Reusable text utilities

   Both of these come from the token set (--font-label, --font-pullquote)
   and are used across multiple page types (section numbers/eyebrow
   labels, pull-quotes in case pages), not just this placeholder page,
   so they live here rather than being redefined per page.
   ========================================================================== */

/* Small mono-spaced label, e.g. section eyebrows like "CASES" or "01". */
.eyebrow {
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* The site's one serif moment, used for pull-quotes only. */
.pullquote {
  font-family: var(--font-pullquote);
  font-style: italic;
  font-size: 22px;
  color: var(--color-title);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
}

.site-header__wordmark {
  font-weight: 700;
  color: var(--color-title);
}

.site-nav {
  display: flex;
  gap: 32px;
  font-size: 15px;
}

.site-nav a {
  color: var(--color-title);
}

/* Current-page link, see the aria-current logic in header.njk. */
.site-nav a[aria-current="page"] {
  color: var(--color-accent);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer__inner {
  padding-block: 48px 32px;
}

/* Quote+email column on the left, icon row to its right, same row.
   Matches reference/screenshots/homepage.png: the icons sit beside
   the email, not stacked below it. align-items: flex-end puts the
   (shorter) icon row's bottom edge level with the email's, since the
   email visually anchors that row in the reference. */
.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 24px;
}

.site-footer__quote {
  font-family: var(--font-pullquote);
  font-style: italic;
  font-size: 20px;
  color: var(--color-muted);
  margin: 0;
}

.site-footer__email {
  display: block;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  color: var(--color-title);
  line-height: 1.15;
  /* Measured against reference/screenshots/homepage.png: the email
     is indented right of the quote's left edge, not flush with it,
     and sits close beneath it, not with a generous gap. margin-left
     is the indent, margin-top is that tight gap. Both are read off
     the reference image, not guessed, but treat as provisional like
     --canvas-padding: worth rechecking once the first real page
     (EIF) is built and compared side by side. */
  margin: 6px 0 0 120px;
  /* Reserve space before footer-email.js fills this in, so the layout
     doesn't jump once the address appears. */
  min-height: 1.2em;
}

.site-footer__icons {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.footer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-line);
  color: var(--color-title);
  font-family: var(--font-label);
  font-size: 12px;
}

.site-footer__meta {
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--color-muted);
  margin: 0;
}

/* Below the 768px breakpoint, stack header and footer content instead
   of the desktop's side-by-side layout. */
@media (max-width: 767px) {
  .site-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .site-nav {
    gap: 20px;
  }

  .site-footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  /* The desktop indent (see .site-footer__email above) doesn't fit a
     narrow viewport: at 375px it pushes the address past the edge.
     There's no mobile reference screenshot for this footer to match,
     so drop the indent and keep only the tight top spacing. */
  .site-footer__email {
    margin-left: 0;
  }
}