/* Vataguess — site styles
 *
 * Colour comes entirely from /brand/tokens.css, and only ever through role
 * tokens. There are no literal colour values in this file; tools/site/
 * verify_site.py fails if one appears.
 *
 * Layout is a left rail of small technical labels against a wide editorial
 * column. Hierarchy is carried by scale and space rather than by cards,
 * borders or grids — see docs/DESIGN.md.
 */

:root {
  /* The body is set in the same family as the wordmark, so the page reads as
     an extension of the mark rather than a different voice next to it. */
  --font-serif: "Times New Roman", "Liberation Serif", "Nimbus Roman", Times, serif;
  /* Technical register: statuses, labels, metadata. Archival, not corporate. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Type scale. Absolute sizes, because the previous relative scheme drifted
     small: body sat at 17px in a 640px column, which read as caption text on
     a page this tall. */
  --size-body: 1.125rem;    /* 18px */
  --size-small: 0.8125rem;  /* 13px — actions, progressions */
  --size-label: 0.6875rem;  /* 11px — editorial metadata, never smaller */
  --size-lead: 1.375rem;    /* 22px */

  --measure: 43rem;      /* editorial column, ~688px */
  --rail: 9rem;          /* label rail */
  --gutter: clamp(1.5rem, 5vw, 5rem);
  --step: clamp(3.25rem, 5vw, 5.25rem);   /* vertical rhythm between bands */
}

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

body {
  margin: 0;
  background: var(--vg-field);
  color: var(--vg-text);
  font-family: var(--font-serif);
  font-size: var(--size-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gutter);
  top: 1rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--vg-surface);
  color: var(--vg-text-emphasis);
  font-family: var(--font-mono);
  font-size: var(--size-small);
}

/* ---- masthead ---------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: calc(var(--rail) + var(--measure) + 8rem);
  margin: 0 auto;
  padding: 2.25rem var(--gutter) 0;
}
.masthead__home { display: block; line-height: 0; }
.masthead__home img { width: 150px; }
.masthead nav ul {
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.masthead nav a {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vg-text-secondary);
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid transparent;
}
.masthead nav a:hover,
.masthead nav a[aria-current="page"] {
  color: var(--vg-text-emphasis);
  border-bottom-color: var(--vg-rule);
}

/* Home has no masthead wordmark — the hero is the wordmark. Push the nav
   right so it does not float alone on the left. */
.masthead--home { justify-content: flex-end; }

/* ---- shared ------------------------------------------------------------ */

main {
  max-width: calc(var(--rail) + var(--measure) + 8rem);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.statement {
  font-size: clamp(1.35rem, 1rem + 1.9vw, 2.1rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--vg-text-emphasis);
  max-width: 24ch;
  margin: 0 0 2rem;
  text-wrap: balance;
}

.action {
  font-family: var(--font-mono);
  font-size: var(--size-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vg-text-emphasis);
  text-decoration: none;
  border-bottom: 1px solid var(--vg-rule);
  padding-bottom: 0.3rem;
  transition: border-color 120ms linear;
}
.action:hover { border-bottom-color: var(--vg-text-emphasis); }

/* ---- hero -------------------------------------------------------------- */

.hero { padding: clamp(3.5rem, 9vw, 7rem) 0 var(--step); }

.hero__mark { margin: 0 0 clamp(2.5rem, 5vw, 3.75rem); line-height: 0; }
.hero__mark img {
  /* Never below the 240px floor at which chrome stops reading as metal on a
     dark field — see docs/WORDMARK.md. */
  width: clamp(255px, 46vw, 565px);
}

.hero__primary {
  font-size: clamp(1.6rem, 1.05rem + 2.6vw, 2.9rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--vg-text-emphasis);
  max-width: 23ch;
  margin: 0 0 1.75rem;
  text-wrap: balance;
}

.hero__secondary {
  max-width: var(--measure);
  color: var(--vg-text-secondary);
  margin: 0 0 2.75rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- bands ------------------------------------------------------------- */

.band {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, var(--measure));
  gap: 0 4rem;
  padding: clamp(2.5rem, 3.2vw, 3.5rem) 0 var(--step);
  border-top: 1px solid var(--vg-rule);
}

.band__label {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  font-weight: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vg-text-secondary);
  margin: 0.5rem 0 0;
}

.band__body > :first-child { margin-top: 0; }
.band__body > :last-child { margin-bottom: 0; }
.band__body p { margin: 0 0 1.4rem; }

.lede {
  font-size: var(--size-lead);
  line-height: 1.5;
  color: var(--vg-text-emphasis);
}

.focus {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.focus li {
  padding: 0.7rem 0;
  color: var(--vg-text-secondary);
  border-top: 1px solid var(--vg-rule);
}

/* ---- progression ------------------------------------------------------- */

.progression {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  margin: 0 0 2.25rem;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--size-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vg-text-secondary);
}
.progression__step + .progression__step::before {
  content: "→";
  margin-right: 0.9rem;
  color: var(--vg-text-quiet);
}

/* ---- inner pages ------------------------------------------------------- */

.page { padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) 0; }

.page__title {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  font-weight: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vg-text-secondary);
  margin: 0 0 2.5rem;
}

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.5rem; }
.prose__closing {
  max-width: var(--measure);
  margin: 3rem 0 0;
  color: var(--vg-text-quiet);
}

/* ---- domains ----------------------------------------------------------- */

.domains {
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.domain {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 7rem) minmax(0, 1fr);
  gap: 0.4rem 2.5rem;
  align-items: baseline;
  padding: 1.6rem 0;
  border-top: 1px solid var(--vg-rule);
}

.domain__name {
  font-size: 1.25rem;
  font-weight: normal;
  color: var(--vg-text-emphasis);
  margin: 0;
}

.domain__note {
  margin: 0;
  color: var(--vg-text-secondary);
}

/* Documentary, not a pill: a letterspaced mark on a hairline. */
.status {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: 0.16em;
  color: var(--vg-text-quiet);
  white-space: nowrap;
}
.status--active { color: var(--vg-text-emphasis); }
.status--developing { color: var(--vg-text-secondary); }

/* ---- footer ------------------------------------------------------------ */

.foot {
  max-width: calc(var(--rail) + var(--measure) + 8rem);
  margin: 0 auto;
  padding: var(--step) var(--gutter) clamp(3rem, 6vw, 5rem);
}
.page ~ .foot { border-top: 0; }
.foot__line {
  margin: 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--vg-rule);
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.3rem);
  color: var(--vg-text-quiet);
}

/* ---- manifest ---------------------------------------------------------- */

/* A full-width moment, deliberately outside the label rail. This is the one
   place on the site that asks to be felt rather than read for information,
   so it drops the technical register entirely. */
.manifest {
  padding: var(--step) 0;
  border-top: 1px solid var(--vg-rule);
}
.manifest__line {
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.55rem);
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--vg-text-emphasis);
  max-width: 20ch;
  margin: 0 0 2.25rem;
  text-wrap: balance;
}
.manifest__body {
  max-width: 37rem;
  font-size: 1.08em;
  line-height: 1.62;
  margin: 0 0 1.35rem;
}
.manifest__body:last-child { margin-bottom: 0; color: var(--vg-text-secondary); }

/* ---- sub-movements ----------------------------------------------------- */

.sub {
  margin: 2.75rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--vg-rule);
}
.sub__label {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  font-weight: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vg-text-quiet);
  margin: 0 0 0.9rem;
}
.sub p { margin: 0 0 1.1rem; }
.sub p:last-child { margin-bottom: 0; }
.sub .progression { margin: 1.4rem 0; }

/* ---- terms ------------------------------------------------------------- */

.terms { margin: 2rem 0 2.5rem; }
.term {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 0.35rem 2rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--vg-rule);
}
.term dt {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vg-text-secondary);
  padding-top: 0.35em;
}
.term dd { margin: 0; color: var(--vg-text-secondary); }

/* ---- closing ----------------------------------------------------------- */

.closing {
  padding: var(--step) 0 clamp(4rem, 8vw, 7rem);
  border-top: 1px solid var(--vg-rule);
}
.closing__line {
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.55rem);
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--vg-text-emphasis);
  max-width: 18ch;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.closing__note {
  max-width: 37rem;
  margin: 0;
  color: var(--vg-text-quiet);
}

/* ---- narrow ------------------------------------------------------------ */

@media (max-width: 46rem) {
  .term { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .term dt { padding-top: 0; }
  .band {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
  .band__label { margin-top: 0; }
  .domain {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem 1.5rem;
  }
  .domain__note { grid-column: 1 / -1; }
}

/* Motion is rare here by design; honour the preference regardless. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}