/* NCCV — this publication's own use of the design system.
 *
 * The tokens live in assets/ds/ and are the CONSTELLATION's, mirrored here (see
 * assets/ds/MIRROR.md). This file holds only what is this site's: its components, and the
 * two places it deliberately declines what the design system offers.
 *
 * The engine's stylesheets are not loaded at all. This tier is not a journal — it publishes a
 * handful of hand-arranged pages with its own framing, and this is that framing.
 *
 * DEVIATION 1 — ONE HEADER SIZE. typography.css offers a display scale it calls "deliberately
 * enormous", and this publication does not use it. Prominence expressed typographically is
 * precisely what it is correcting: a month with one letter must not be made to look poorer
 * than a month with five, and no story is promoted by being set larger. So `--header` is a
 * size, not a scale, and every heading takes it.
 *
 * DEVIATION 2 — FEWER LINES. A rule is drawn only where one is meant. A line that separates
 * nothing is decoration, and this page has two: the one under the masthead that says the paper
 * starts here, and the hairlines between items in a list.
 */

:root {
  /* The one header size — the smallest the mock-ups used, now used everywhere. */
  --header: 1.3125rem;
  --eyebrow: var(--mono-caption);
  --measure-body: 64ch;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--mono-body);
  line-height: var(--leading-body);
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
a:focus-visible { outline: var(--rule) solid var(--ink); outline-offset: 3px; }

/* ---- the spire: everything sets from the same left edge ---------------------------- */
.masthead,
.page,
.colophon { padding-inline: var(--gutter); }

.masthead {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-block: var(--space-4);
  border-bottom: var(--rule) solid var(--ink);
}
.wordmark {
  font-family: var(--font-display);
  font-size: var(--header);
  line-height: var(--leading-snug);
}
.eyebrow, .area {
  font-size: var(--eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- the areas, as navigation rather than an index --------------------------------- */
/* A reader who has not chosen an area is still inside the publication. Choosing one is the
   thing they do here, so it sits in the masthead and not in the body of the page. */
.areas { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.area {
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 4px solid transparent;
  margin-bottom: -6px;                 /* sit the rule on the masthead's own line */
}
.area:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--paper-edge); }
.area.here { color: var(--ink); border-bottom-color: var(--ink); }

.page { padding-block: var(--space-6) var(--space-8); }

/* One size at every level. The hierarchy is position and spacing, not scale. */
.page h1, .page h2, .page h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--header);
  line-height: var(--leading-snug);
  margin: 0;
  text-wrap: pretty;
}
.page h1 { margin-bottom: var(--space-2); }
.page h2 { margin-top: var(--space-7); }
.page h3 { margin-top: var(--space-5); }
.page p { margin: 0 0 var(--space-4); max-width: var(--measure-body); color: var(--ink-soft); }
.page > p:first-of-type { color: var(--ink); }

/* An issue list is a list, at every width — a month with one letter is the same object as a
   month with five. */
.page ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.page ul li { padding: var(--space-3) 0; }
.page ul li + li { border-top: var(--rule) solid var(--paper-edge); }
.page em { color: var(--ink-faint); font-style: normal; font-size: var(--mono-small); }

/* ---- the footer is the branding lockup ---------------------------------------------- */
/* The mark, the wordmark set in two lines, and a short row of links — the site mock-up's
   footer. NOT the area journal's rules band: that one names a place and a time, and this tier
   does not know which area a reader means. */
.colophon {
  background: var(--slate);
  color: var(--cream);
  padding: var(--space-6) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.lockup { display: flex; align-items: center; gap: var(--space-4); }
.mark { width: 40px; height: 40px; flex: none; }
.lockup-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-display);
  font-size: var(--header);
  line-height: var(--leading-tight);
  color: var(--cream);
}
.colophon-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: baseline;
  font-size: var(--eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--cream-dim);
}
.colophon-links a:hover { color: var(--cream); }
.colophon-note { color: var(--cream-dim); }

/* The mark trailing a headline, as the mock-up sets it: small, on the baseline, part of the
   sentence rather than an ornament beside it. */
.mark-inline {
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.3em;
  vertical-align: baseline;
}

/* ---- the rules, wherever they are shown --------------------------------------------- */
.rules {
  list-style: none;
  margin: var(--space-4) 0 var(--space-6);
  padding: 0;
  display: grid;
  gap: var(--space-3) var(--space-7);
  counter-reset: rule;
  max-width: var(--measure-body);
}
.rules li {
  display: grid;
  grid-template-columns: 3ch minmax(0, 1fr);
  gap: var(--space-3);
  counter-increment: rule;
}
.rules li::before { content: counter(rule, decimal-leading-zero); color: var(--ink-faint); }

/* The one boxed thing, boxed on purpose. */
.write {
  display: inline-block;
  border: var(--rule) solid var(--ink);
  padding: var(--space-3) var(--space-6);
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
a.write:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
/* No intake address yet, so it is a label rather than a link to nothing. */
.write[aria-disabled] { color: var(--ink-faint); border-color: var(--paper-edge); }