/**
 * site.css — layout, chrome, and page structure.
 *
 * Tokens live in tokens.css; the component vocabulary lives in
 * components.css. This file is what is left: the masthead, the
 * hierarchy overlay, page heads, prose blocks and the footer.
 */

/**
 * site.css — Sovereignty Foundation
 *
 * The design system is lifted from the governance page: centred page
 * heads, a serif reading column set justified at a long leading, mono
 * meta labels, and full-bleed hairline rules doing all the structural
 * work. Nothing here is decorative.
 *
 * Two things are deliberately parameterised so they can be dialled
 * without touching component CSS:
 *
 *   ACCENT — set data-accent on <html> to change the site's key.
 *            brass (default) · petrol · oxblood · slate · forest · ink
 *
 *   SCALE  — the display sizes are tokens. The governance page runs
 *            large; --display-lg is the single value to turn down.
 */



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

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }

/* ══ Shared primitives ═══════════════════════════════════════════ */

.rule { border-top: 1px solid var(--rule); }

.wide { width: 100%; max-width: var(--w-wide); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.read { width: 100%; max-width: var(--w-read); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* Mono meta label — the recurring small-caps voice. */
.meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.meta-wide { letter-spacing: 0.2em; }

/* Sans eyebrow, slightly warmer than the mono meta. */
.eyebrow {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Bordered chip — the "Ratified" treatment. */
.chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 2px 8px;
  display: inline-block;
}

/* ══ Header ══════════════════════════════════════════════════════
   Nav splits left and right around the centred mark, exactly as the
   live header does — but the mark is now a plain circle.          */

.masthead { background: var(--paper); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 60; }

.masthead-inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.nav-group { display: flex; align-items: center; gap: 22px; flex: 1; }
.nav-group.left  { justify-content: flex-end; }
.nav-group.right { justify-content: flex-start; }

.nav-link {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-muted);
  transition: color 0.18s ease;
}
.nav-link:hover { color: var(--ink-strong); }
.nav-link.is-active { color: var(--ink-strong); border-bottom: 1px solid var(--ink-strong); padding-bottom: 1px; }

/* ── The mark button ──────────────────────────────────────────────
   A plain circle holding the Sov section mark. Hairline stroke,
   transparent ground. No rim, no gradient, no enamel, no shadow.  */

.mark-btn {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--ink-strong);
  background: transparent;
  color: var(--ink-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* The mark is the brand vector, inheriting ink via currentColor. */
.mark-btn .sov-mark {
  width: 25px;
  height: 25px;
  display: block;
  background-color: currentColor;
  -webkit-mask: url("/static/img/mark.svg") center / contain no-repeat;
  mask: url("/static/img/mark.svg") center / contain no-repeat;
}

.mark-btn:hover,
.mark-btn[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.mark-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* ══ Hierarchy overlay ═══════════════════════════════════════════ */

.hierarchy {
  position: fixed; inset: 0; z-index: 100;
  background: #ffffff;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s;
}
.hierarchy[data-open="true"] { opacity: 1; visibility: visible; }

.hierarchy-bar {
  position: sticky; top: 0;
  background: #ffffff;
  border-bottom: 1px solid var(--rule);
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--pad-x);
}

.hierarchy-close {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-muted); background: none; border: none; cursor: pointer; padding: 6px 0;
  transition: color 0.18s ease;
}
.hierarchy-close:hover { color: var(--accent); }

.hierarchy-body { max-width: var(--w-wide); margin: 0 auto; padding: 46px var(--pad-x) 90px; }

.hierarchy-lede {
  font-family: var(--serif);
  font-size: var(--prose);
  line-height: var(--prose-lead);
  color: var(--ink);
  max-width: var(--w-read);
  margin-bottom: 46px;
}

.hierarchy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 34px 26px; }

.hierarchy-col h3 {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-strong);
  padding-bottom: 9px; margin-bottom: 11px;
  border-bottom: 1px solid var(--ink-strong);
}

.hierarchy-col ul { list-style: none; }

.hierarchy-col a {
  display: block; padding: 4px 0;
  font-family: var(--sans);
  font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--ink);
  transition: color 0.15s ease;
}
.hierarchy-col a:hover { color: var(--accent); }
.hierarchy-col .is-live { color: var(--ink-strong); font-weight: 500; }
.hierarchy-col .tag { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; color: var(--accent); margin-left: 0.5em; }

/* ══ Page head — the governance pattern ══════════════════════════ */

.page-head {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 56px var(--pad-x) 48px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

.breadcrumb { font-family: var(--sans); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 24px; }
.breadcrumb a { transition: color 0.18s ease; }
.breadcrumb a:hover { color: var(--ink-muted); }
.breadcrumb .sep { margin: 0 8px; }
.breadcrumb .here { color: var(--ink-strong); }

.page-head .eyebrow { margin-bottom: 20px; }

.page-head h1 {
  font-family: var(--serif);
  font-size: var(--display-lg);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink-strong);
  margin-bottom: 20px;
  max-width: 18ch;
}

.page-head h1 em { font-style: italic; color: var(--accent); }

.page-head .standfirst {
  font-family: var(--serif);
  font-size: var(--standfirst);
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-muted);
  margin-bottom: 28px;
  /* A tagline is read in one glance, so its lines should be of even
     length rather than filled to the measure and leaving two words
     stranded on the last one. Purely typographic: browsers without it
     fall back to ordinary wrapping. */
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

.head-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 32px; }

/* ══ Prose ═══════════════════════════════════════════════════════ */

.prose-block { max-width: var(--w-read); margin: 0 auto; padding: 44px var(--pad-x) 56px; display: flex; flex-direction: column; gap: 24px; }

.prose {
  font-family: var(--serif);
  font-size: var(--prose);
  font-weight: 400;
  line-height: var(--prose-lead);
  color: var(--ink);
  text-align: justify;
  hyphens: auto;
}

.prose strong { font-weight: 600; color: var(--ink-strong); }
.prose em { font-style: italic; }

.prose a, .inline-link {
  color: var(--ink-strong);
  border-bottom: 1px solid var(--ink-faint);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.prose a:hover, .inline-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Inset panel — the "Principle of Irreversibility" treatment. */
.panel {
  background: var(--paper-sunk);
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 8px;
}

/* ══ Section title — serif italic, centred, short rule ═══════════ */

.section-block { max-width: var(--w-wide); margin: 0 auto; padding: 44px var(--pad-x) 64px; display: flex; flex-direction: column; align-items: center; gap: 44px; }

.section-title { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }

.section-title h2 {
  font-family: var(--serif);
  font-size: var(--section-lg);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-strong);
  text-align: center;
}

.section-title hr { width: 80px; border: none; border-top: 1px solid var(--rule); }

.group { width: 100%; display: flex; flex-direction: column; gap: 18px; }
.group > .meta { text-align: center; }

/* ══ Bordered card grid ══════════════════════════════════════════ */

.card-grid { display: grid; grid-template-columns: 1fr; border: 1px solid var(--rule); }

@media (min-width: 640px) { .card-grid.two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .card-grid.three { grid-template-columns: repeat(3, 1fr); } }

.card { padding: 26px 28px 28px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 9px; }

a.card { transition: background 0.18s ease; }
a.card:hover { background: var(--paper-sunk); }
a.card:hover .card-title { color: var(--accent); }

.card-title { font-family: var(--serif); font-size: 1.16rem; font-weight: 500; color: var(--ink-strong); line-height: 1.3; transition: color 0.18s ease; }
.card-meta  { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.card-body  { font-family: var(--serif); font-size: 0.95rem; line-height: 1.72; color: var(--ink); }

/* ══ Definition rows — publications, standards ═══════════════════ */

.rows { width: 100%; border-top: 1px solid var(--rule); }

.row { display: grid; grid-template-columns: 210px 1fr auto; gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); }
a.row:hover .row-title { color: var(--accent); }

.row-id    { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.row-title { display: block; font-family: var(--serif); font-size: 1.05rem; color: var(--ink-strong); transition: color 0.18s ease; }
.row-sub   { display: block; font-family: var(--serif); font-size: 0.92rem; font-style: italic; color: var(--ink-muted); margin-top: 3px; }
.row-date  { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--ink-muted); white-space: nowrap; }

/* ══ Lifecycle chain ═════════════════════════════════════════════ */

.chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.chain span, .chain a { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-strong); }
.chain a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.chain a:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }
.chain .sep { color: var(--ink-faint); }

/* ══ Actions ═════════════════════════════════════════════════════ */

.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; }

.action {
  font-family: var(--sans);
  font-size: 11px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-strong);
  border-bottom: 1px solid var(--ink-strong);
  padding-bottom: 3px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.action:hover { color: var(--accent); border-bottom-color: var(--accent); }

.action-quiet { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--rule); padding-bottom: 3px; transition: color 0.18s ease, border-color 0.18s ease; }
.action-quiet:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ══ Closing statement ═══════════════════════════════════════════ */

.statement { font-family: var(--serif); font-size: var(--section-lg); font-weight: 400; line-height: 1.34; color: var(--ink-strong); text-align: center; }
.statement span { display: block; }
.statement span + span { font-style: italic; color: var(--accent); }

/* ══ Footer ══════════════════════════════════════════════════════ */

.site-footer { margin-top: auto; border-top: 1px solid var(--rule); padding: 48px 0 40px; }

.footer-grid { max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--pad-x); display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 32px 26px; }

.footer-col p { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-strong); margin-bottom: 12px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.footer-col a { font-family: var(--sans); font-size: 11px; letter-spacing: 0.04em; color: var(--ink); transition: color 0.18s ease; }
.footer-col a:hover { color: var(--accent); }

.footer-base { max-width: var(--w-wide); margin: 36px auto 0; padding: 20px var(--pad-x) 0; border-top: 1px solid var(--rule); }
.footer-base p { font-family: var(--sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); text-align: center; }

/* ══ Draft marker — staging only ════════════════════════════════ */


/* ══ Responsive ══════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .row { grid-template-columns: 1fr; gap: 5px; }
  .row-date { grid-row: 1; justify-self: start; }
}

@media (max-width: 760px) {
  :root { --display-lg: var(--display-sm); --section-lg: var(--section-sm); --standfirst: var(--standfirst-sm); }
  .masthead-inner { height: 62px; gap: 12px; }
  .nav-group { display: none; }
  .page-head { padding: 40px var(--pad-x) 36px; }
  .card { padding: 22px 22px 24px; }
  .card-grid.two, .card-grid.three { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }


/* ══ Depth ═══════════════════════════════════════════════════════
   Applied sparingly: the page head sits on a warm tint so the
   first screen is not pure white, and sections alternate ground
   rather than relying on hairlines alone. */

/* The page head stays on paper. A tint here reads as a highlight on
   the masthead block, which is not what the tint is for. */

section.is-sunk,
.section-block.is-sunk { background: var(--paper-sunk); }
section.is-sunk + .rule { border-top-color: var(--rule); }

.section-inner, .section-block, .prose-block { position: relative; }

/* Section headings carry a mono numeral in the brief's manner. */
.section-title h2 .sec-num { color: var(--accent-pale); }