/* Novra Foods house documents — clean letterhead.
 *
 * Composes on css/system.css: every colour and both families come from the
 * tokens there, and the self-hosted Libre Caslon @font-face rules live there
 * too. Load system.css BEFORE this file. DESIGN.md: never redeclare a token
 * and never hard-code a hex outside css/system.css.
 */

:root {
  color-scheme: only light;
  /* Document-local aliases onto system tokens — one value, one source. */
  --rule: var(--linen-deep);
}

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

html {
  margin: 0;
  padding: 0;
  background: var(--paper);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* thin brand edge */
.doc-topbar {
  height: 4px;
  width: 100%;
  background: var(--navy);
}

.doc-shell {
  width: min(40rem, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 2.75rem 0 4.5rem;
}

/* —— letterhead —— */
.doc-letterhead {
  text-align: center;
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--rule);
}

.doc-mark {
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1.15rem;
}

.doc-mark img {
  display: block;
  width: 100%;
  height: 100%;
}

.doc-kicker {
  margin: 0 0 0.65rem;
  font-family: var(--font-text);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone-light);
}

.doc-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 2.65rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

.doc-sub {
  margin: 0 0 0.85rem;
  font-family: var(--font-text);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--stone);
}

.doc-meta {
  margin: 0;
  font-family: var(--font-text);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone-light);
}

.doc-note {
  margin: -0.5rem 0 1.75rem;
  text-align: center;
  font-family: var(--font-text);
  font-style: italic;
  font-size: 0.86rem;
  color: var(--stone-light);
}

/* —— lead + warn —— */
.doc-lead {
  margin: 0 0 1.5rem;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.warn {
  margin: 0 0 2rem;
  padding: 1.15rem 1.2rem 1.05rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--navy);
}

.warn p {
  margin: 0 0 0.7rem;
  font-size: 0.98rem;
  color: var(--ink-soft);
}

.warn p:last-child { margin-bottom: 0; }

.warn strong {
  font-weight: 700;
  color: var(--ink);
}

/* —— toc —— */
.toc-label {
  margin: 0 0 0.6rem;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}

.toc {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  columns: 1;
  column-gap: 2rem;
}

@media (min-width: 560px) {
  .toc.two-col { columns: 2; }
}

.toc li {
  break-inside: avoid;
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  color: var(--stone);
}

.toc a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.toc a:hover {
  color: var(--navy);
  border-bottom-color: var(--navy);
}

/* —— articles —— */
h2.article {
  margin: 2.5rem 0 0.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

h2.article:first-of-type {
  margin-top: 0.5rem;
  padding-top: 0;
  border-top: 0;
}

.art-no {
  display: block;
  margin: 0 0 0.35rem;
  font-family: var(--font-text);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}

p, li {
  margin: 0 0 0.9rem;
  color: var(--stone);
}

ul {
  margin: 0 0 1.1rem;
  padding-left: 1.2rem;
}

li { margin-bottom: 0.45rem; }

strong {
  font-weight: 700;
  color: var(--ink);
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { color: var(--navy); }

/* —— closing —— */
.execution {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--navy);
}

.execution h3 {
  margin: 0 0 0.85rem;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}

.execution p {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: var(--stone);
}

.execution-grid {
  display: grid;
  gap: 0.55rem 1rem;
  margin: 1.15rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--rule);
}

@media (min-width: 520px) {
  .execution-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.execution-grid > div {
  display: grid;
  gap: 0.15rem;
}

.execution-grid .lab {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone-light);
}

.execution-grid .val {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.version-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.15rem;
  font-size: 0.9rem;
}

.version-table th,
.version-table td {
  text-align: left;
  padding: 0.4rem 0.35rem;
  border-bottom: 1px solid var(--rule);
  color: var(--stone);
  font-weight: 400;
  vertical-align: top;
}

.version-table th {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}

.nav-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  align-items: center;
  margin-top: 2.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
  color: var(--stone);
}

.nav-foot a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.nav-foot a:hover { color: var(--navy); }

.fine {
  margin: 0.85rem 0 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone-light);
}

@media print {
  .doc-topbar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  a { text-decoration: none; }
  body { font-size: 11pt; }
  .doc-shell { width: 100%; padding: 0; }
}

/* Shared house treatment for not-found and retired-path pages. */
.status-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  overflow-x: hidden;
}

.status-shell {
  width: min(28rem, 100%);
}

.status-page .kicker {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-light);
}

.status-page h1 {
  margin: 0.6rem 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 400;
  line-height: 1.2;
}

.status-page p {
  max-width: 28rem;
  margin-right: auto;
  margin-left: auto;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Scoped to the shell, not the page. `.status-page a` and `.mast-nav a` have
 * identical specificity and this rule comes later in the file, so the broader
 * form coloured the ported mast navy on /gone while the byte-identical mast on
 * /404 stayed ink. Why: docs/DECISIONS.md#status-mast */
.status-shell a { color: var(--navy); }

/* The brand edge on a status page is fixed to the top of the viewport, because
 * .status-page centres its own child in a full-height grid and an in-flow bar
 * would be centred with it. Carried as a class rather than a style attribute:
 * `style-src-attr 'unsafe-inline'` would permit the attribute, but the reason
 * api/join.js's page had to be rebuilt at all was styling that lived in the
 * markup instead of in a stylesheet. */
.status-topbar {
  position: fixed;
  top: 0;
  left: 0;
}

/* Trailing "back to the house" link on the status and endpoint pages. */
.status-back {
  margin-top: 2rem;
}


/* House redesign: larger document typography and shared navigation rhythm. */
.doc-shell { width: min(49rem, calc(100% - 2.5rem)); padding-top:4rem; }
.doc-title { font-size:clamp(2.8rem,5vw,4rem); line-height:1.07; }
.doc-kicker,.doc-meta,.doc-note { font-size:.8rem; }
.doc-sub { font-family:var(--font-ui); font-size:1rem; }
.doc-letterhead { padding-bottom:2rem; margin-bottom:2rem; }
.doc-mark { width:3.5rem; height:3.5rem; }
.doc-lead { font-size:1.15rem; }
@media (max-width:600px) { .doc-shell { padding-top:2.5rem; } }

/* ── the mast, the skip link and the status room ───────────────────────────
 * Carried over with gone.html from redesign/house so a visitor who lands on
 * one of the ten retired paths can reach the house, legal and privacy without
 * guessing an address. Every value is a token from css/system.css.
 * Why: docs/DECISIONS.md#status-mast
 *
 * These rules are LAST in the file on purpose, after the .status-page block
 * they narrow: a media query adds no specificity and neither does source
 * order at equal weight, so a plain rule placed above the one it overrides
 * does nothing while looking correct.
 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-s);
  z-index: 10;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: var(--space-s) var(--space-m);
  font-size: var(--t-annot);
  line-height: var(--lh-small);
  letter-spacing: var(--track-annot);
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus-visible { left: var(--margin); }

#doc:focus { outline: 2px solid var(--ink); outline-offset: 3px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.mast {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s) var(--gutter);
  padding: var(--space-m) var(--margin) var(--space-s);
  color: var(--ink);
  /* Explicit, because a status page centres its text and below 720px the
   * index stacks into a full-width list, which ragged the mast items. */
  text-align: left;
}

.mast-mark {
  font-family: var(--font-display);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  letter-spacing: var(--track-annot);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}

.mast-mark:hover { border-bottom-color: var(--ink); }

.mast-index { color: var(--ink); }
.mast-index > summary {
  display: none;
  font-size: var(--t-annot);
  line-height: var(--lh-small);
  letter-spacing: var(--track-annot);
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}

.mast-nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  margin: 0;
  padding: 0;
}

.mast-nav li { margin: 0; color: var(--ink); }

.mast-nav a {
  font-size: var(--t-annot);
  line-height: var(--lh-small);
  letter-spacing: var(--track-annot);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}

.mast-nav a:hover { border-bottom-color: var(--ink); }

/* A column rather than the centred grid .status-page draws, so the statement
 * can sit in whatever height the mast and the notices line leave over.
 * `margin-block: auto` does that without counting siblings. The endpoint pages
 * api/join.js and api/unsubscribe.js render do NOT carry this class and are
 * unaffected. */
.status-room {
  display: flex;
  flex-direction: column;
  place-items: stretch;
  padding: 0;
}

.status-room .status-shell {
  width: min(var(--measure), calc(100% - 2 * var(--margin)));
  margin-inline: auto;
  margin-block: auto;
  padding: var(--space-l) 0;
}

.status-foot {
  padding: var(--space-m) var(--margin) var(--space-l);
  text-align: center;
}

/* Two classes, deliberately: `.status-page p` is (0,1,1) and would otherwise
 * hold the notices line to the narrow measure and wrap it onto two lines. */
.status-foot .status-foot-line {
  max-width: none;
  margin: 0;
  font-size: var(--t-annot);
  line-height: var(--lh-small);
  letter-spacing: var(--track-annot);
  text-transform: uppercase;
  color: var(--stone-light);
  text-wrap: balance;
}

@media (max-width: 720px) {
  .mast {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
  }
  .mast-index > summary { display: none; }
  .mast-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-m);
    margin-top: var(--space-s);
  }
}