/* 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); }

/* ---- content this site did not write ------------------------------------------------ */
/* A cited piece is a contributor's own markdown and may emit any markup it likes. The policy
   in _headers stops it bringing code — no script, no stylesheet of its own, not even a style
   attribute — which leaves this stylesheet as the only one. So the markup is not a problem to
   be sanitised; it is a problem to be STYLED, and these rules are how our styling reaches in.
   Nothing here is a security control. The security control is the policy. */

/* One header size holds inside a letter too, whatever level the author reached for. A piece
   cannot make itself louder than the page it is published on. */
.cited h1, .cited h2, .cited h3,
.cited h4, .cited h5, .cited h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--header);
  line-height: var(--leading-snug);
  margin: var(--space-6) 0 var(--space-2);
  text-wrap: pretty;
}

/* Nothing escapes the measure or the column. */
.cited { max-width: 100%; overflow-wrap: break-word; }
.cited p, .cited li { max-width: var(--measure-body); }
.cited img, .cited svg, .cited video { max-width: 100%; height: auto; }
.cited pre { overflow-x: auto; max-width: 100%; }

/* Tables and blockquotes are the two things prose actually reaches for. Give them a shape
   rather than leaving them to the browser's defaults. */
.cited table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.cited th, .cited td { border-bottom: var(--rule) solid var(--paper-edge); padding: var(--space-2) var(--space-4); text-align: left; }
.cited blockquote {
  margin: var(--space-5) 0;
  padding-left: var(--space-5);
  border-left: 4px solid var(--ink);
  max-width: var(--measure-body);
}

/* Elements that only make sense as someone else's furniture. The policy already stops them
   doing anything; this stops them taking up room. */
.cited iframe, .cited object, .cited embed, .cited form { display: none; }