/* Shared chrome for every page on the site - see CLAUDE.md.
   The landing page and each module link this first, then their own
   stylesheet, so page-specific rules and palettes override what is here.
   Anything common to more than one page belongs in this file, not copied
   into each of them. */

:root {
  --chrome: #111820;
  --letterbox: #0b1116;
  --accent: #ff7a2f;
  --wordmark-ink: #f4f7f9;
  --wordmark-muted: #93a3b1;
  /* Width cap for the page. Tied to viewport height so the page keeps a
     sensible shape, and so ultrawide screens get margins instead of
     stretching content out to the left and right edges. */
  --frame-width: calc(100vh * 16 / 9);
}

* { box-sizing: border-box; }

/* The page fills the viewport height and is capped in width, centred, with
   the area outside it in --letterbox. Scrolling happens inside the page, so
   the header stays put. Height is never capped: the page always fills the
   viewport vertically, whatever its width. */
html {
  height: 100%;
  background: var(--letterbox);
}

body {
  margin: 0 auto;
  width: min(100%, var(--frame-width));
  height: 100%;
  min-width: 320px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header bar: fixed 56px, one thin line, no controls. */
.topbar {
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 clamp(16px, 3vw, 36px);
  background: var(--chrome);
  color: var(--wordmark-ink);
  border-bottom: 3px solid var(--accent);
}

.wordmark {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--wordmark-muted);
}
.wordmark-site { color: var(--wordmark-ink); font-weight: 600; }
a.wordmark-site { text-decoration: none; }
a.wordmark-site:hover { color: var(--accent); }