/* GRRC design register v2 (S271, ratified 2026-07-17): austere, warm paper,
   Charcoal ink + two-tier Mahogany accent + decorative Harvest Gold,
   WCAG 2.2 AA (all ratios computed, not eyeballed), meaning = color + icon + word,
   no client JS.
   TWO-TIER ACCENT RULE: --accent (#703D07, 8.77:1) for ANYTHING read as text or a
   link; --accent-graphic (#B84D00, 5.05:1) for LARGE GRAPHICS ONLY (the mark) —
   it fails AA at text scale. --gold is decorative only (top stripe, dark-surface
   ring): 2.55:1 on paper by design. */

:root {
  --paper: #FEFDFD;
  --ink: #2B2B2B;
  --ink-2: #6B6560;        /* 5.66:1 on paper */
  --rule: #DCD5CC;         /* hairline, decorative */
  --accent: #703D07;       /* text-safe Mahogany — links, CTA, text-scale accent; 8.77:1 */
  --accent-deep: #4C2905;  /* hover; 12.71:1 */
  --accent-graphic: #B84D00; /* LARGE GRAPHIC ONLY — the mark; never text or links */
  --gold: #CC9900;         /* decorative only */
  --box: #FBF8F5;          /* integrity box; unified with --mono-bg (D271-4) */
  --mono-bg: #FBF8F5;
  --mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* A3 amendment: the gold stripe moved from <body> to .header-bar so it stays put
     under the sticky header instead of scrolling away. Same 3px, same token, same
     full-bleed position at rest. */
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

::selection { background: #F2E4CF; }

/* ---- chrome ---- */

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: #fff; /* 8.90:1 on accent */
  padding: 0.5rem 1rem;
}
.skip:focus { left: 0; z-index: 10; }

/* A3 (owner-ruled 2026-07-22): sticky header, pure CSS. Full-bleed wrapper so page
   content cannot scroll through beside the 46rem measure. */
.header-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-top: 3px solid var(--gold);   /* moved off <body> */
  border-bottom: 1px solid var(--rule); /* moved off .site-header */
}

/* Anchor targets clear the sticky header instead of landing underneath it. */
[id] { scroll-margin-top: 6rem; }

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;  /* S276 WS2: tightened so wordmark + 5 nav items + the Verify
                            button hold ONE row at the ratified 46rem measure, with
                            ~22px of measured slack rather than a hairline fit */
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.15rem 1.25rem 1rem;  /* A3: trimmed from 1.6/1.15 — a sticky header pays
                                     its height on every screen, not just the first */
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 750;
  font-size: 1.32rem;
  letter-spacing: 0.085em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark img { display: block; }
.wordmark:hover { color: var(--accent); }

.site-header nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.95rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.9rem;
}
.site-header nav a:hover { color: var(--accent); text-decoration: underline; }
.site-header nav a .ext { font-size: 0.85em; }
.site-header nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* ---- S276 WS2: persistent Verify button + CSS-only mobile collapse (cell 8 / F1) ----
   No client-side script anywhere: the collapse is an empty <details> acting as a pure
   CSS disclosure switch, revealing its sibling nav via `.nav-toggle[open] ~ .site-nav`.
   Overriding a closed <details>'s own subtree is not reliable across engines, which is
   why the nav sits OUTSIDE it. The Verify button is never inside the collapse. */

.verify-btn {
  margin-left: auto;
  display: inline-block;
  background: var(--accent);
  color: #fff;                 /* 8.90:1 on --accent */
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 3px;
  white-space: nowrap;
}
.verify-btn:hover { background: var(--accent-deep); color: #fff; text-decoration: none; }

.nav-toggle { display: none; }   /* wide viewports: nav shows unconditionally */
.nav-toggle > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.3rem 0.65rem;
}
.nav-toggle > summary::-webkit-details-marker { display: none; }
.nav-toggle > summary::after { content: " +"; }
.nav-toggle[open] > summary::after { content: " \2212"; }
.nav-toggle > summary:hover { color: var(--accent); border-color: var(--accent); }

/* Breakpoint is the header measure itself (46rem): below it the one-row header cannot
   hold, so the nav collapses rather than wrapping in a narrow in-between band. */
@media (max-width: 45.99em) {
  /* A3 compact mobile variant (owner-approved 2026-07-22): spacing only, no type
     change. At 375px (iPhone SE / 8) the header content needed 378px and wrapped to
     two rows — 18% of a 667 viewport, permanently occupied by a sticky header. These
     two reclaim 17.6px and restore the ratified single-row lockup. */
  /* S276 header-wrap fix (owner-ruled 2026-07-22, after a real-device defect).
     DIAGNOSED CAUSE: the header had no headroom for TEXT SCALING. Width was the only
     variable ever tested; Android system font size and Chrome's accessibility "Text
     scaling" both multiply computed font sizes, and the row needed 132 + 228*scale px
     — so a 412px viewport wrapped above only ~123%. Fix per owner steer: the Verify
     button gets smaller, the MENU control slightly bigger, and the row chrome tightens.
     Mobile only: the ratified desktop header is untouched. */
  .site-header { gap: 0.75rem 0.4rem; padding: 1.15rem 0.7rem 1rem; }
  .wordmark { font-size: 1.15rem; }   /* 98px -> 90px, mobile only */
  .nav-toggle { display: block; }
  .nav-toggle > summary { font-size: 0.82rem; padding: 0.32rem 0.6rem; }
  .verify-btn { order: 1; font-size: 0.76rem; padding: 0.38rem 0.6rem; }
  .site-nav { order: 2; flex-basis: 100%; display: none; }
  .nav-toggle[open] ~ .site-nav { display: block; }
  .site-header nav ul { flex-direction: column; gap: 0.6rem; padding-bottom: 0.35rem; }
  /* S276 WS3 (owner-approved): lift the nav-link tap targets off the 18.7px text box.
     They already conformed to WCAG 2.2 SC 2.5.8 via the spacing exception; this makes
     them pass on their own size. Mobile only — desktop is untouched. */
  .site-nav a { padding: 0.25rem 0; }
}

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;  /* A2: was 2.4rem / 4rem */
}

.site-footer {
  border-top: 1px solid var(--rule);
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  color: var(--ink-2);
  font-size: 0.9rem;
}
.site-footer p { margin: 0.4rem 0; }
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--accent); }

/* ---- type ---- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0.002em;
  margin: 1.6em 0 0.5em;  /* A2: was 2.3em — the dominant source of desktop airiness */
  text-wrap: balance;
}
h1 { font-size: 2.05rem; margin-top: 0.55em; }
h2 { font-size: 1.42rem; }
h3 { font-size: 1.14rem; }
h4 { font-size: 1rem; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--accent-deep); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 0.5rem;
}

hr, .rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2rem 0;
}

/* ---- vendored document rendering ---- */

code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--mono-bg);
  padding: 0.08em 0.3em;
  border-radius: 3px;
}

pre {
  background: var(--mono-bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.9rem 1rem;
  overflow-x: auto;
  line-height: 1.5;
}
pre code { background: none; padding: 0; font-size: 0.82rem; }

blockquote {
  margin: 1.2rem 0;
  padding: 0.1rem 0 0.1rem 1.1rem;
  border-left: 3px solid var(--rule);
  color: var(--ink-2);
}

.table-wrap { overflow-x: auto; margin: 1.2rem 0; }
table { border-collapse: collapse; font-size: 0.92rem; min-width: 100%; }
th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.45rem 0.9rem 0.45rem 0;
  border-bottom: 1px solid var(--rule);
}
th { font-weight: 650; }
thead th { border-bottom: 2px solid var(--ink-2); }

/* ---- integrity strip (the signature element) ---- */

.integrity {
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--accent); /* 8.41:1 on the box */
  background: var(--box);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
  margin: 0.7rem 0;
  overflow-wrap: anywhere;
}
.integrity a { color: var(--accent); font-size: 1em; }
.integrity a:hover { color: var(--accent-deep); }
.integrity code, .iv1 figcaption code { background: none; padding: 0; font-size: 1em; }
.integrity .digest, .iv1 .digest { color: var(--ink-2); } /* 5.43:1 on the box */
.integrity-word { font-weight: 650; letter-spacing: 0.04em; }
.seal-icon { margin-right: 0.4rem; vertical-align: -0.08em; color: var(--accent); }

/* ---- the (iv-1) span, set off ---- */

/* A4 — the pinned (iv-1) statement reads as a deliberate extract of record: a set
   panel with the S271 double-rule signature top and bottom, hairline sides, and the
   integrity-box ground. STYLING ONLY — the span's bytes and the figcaption text are
   untouched, and check-iv1 / check-span-render prove that on every build. */
.iv1 {
  margin: 1.5rem 0;
  background: var(--box);
  border: 1px solid var(--rule);
  border-top: 3px double var(--accent);
  border-bottom: 3px double var(--accent);
  border-radius: 3px;
  padding: 1.25rem 1.4rem 1.05rem;
}
.iv1 blockquote {
  border: 0;
  margin: 0;
  padding: 0 0.25rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.7;
}
.iv1 figcaption {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--accent);
  overflow-wrap: anywhere;
}
.iv1 figcaption a { color: var(--accent); }

/* ---- page chrome for document pages ---- */

.doc-provenance { margin-bottom: 1.6rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--rule); }
.doc-provenance .eyebrow { margin-bottom: 0.2rem; }

.page-note {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 0.7rem 1rem;
  margin: 0 0 1.8rem;
  font-size: 0.92rem;
  color: var(--ink-2);
}
.page-note em { font-style: normal; }
.page-note .note-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

.frame { margin: 0 0 1.8rem; }
.frame p { margin: 0.5rem 0; }

/* ---- home ---- */

.hero { padding: 0.9rem 0 0.25rem; } /* A2: was 1.4rem / 0.5rem */
.hero h1 {
  font-size: clamp(2.1rem, 4.2vw + 1rem, 2.7rem);
  letter-spacing: -0.004em;
  line-height: 1.12;
  margin: 0.35em 0 0.45em;
}
.hero .lead { font-size: 1.16rem; line-height: 1.62; max-width: 40rem; }
.hero .cta { font-weight: 600; font-size: 1.05rem; margin-top: 1.1rem; }
.hero .disclosure { color: var(--ink-2); font-size: 0.95rem; max-width: 40rem; }

.record-list { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.record-list li { padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.record-list a {
  font-weight: 650;
  font-size: 1.07rem;
  text-decoration: none;
}
.record-list a:hover { text-decoration: underline; }
.record-list p { margin: 0.3rem 0; }
.record-list .about { color: var(--ink-2); font-size: 0.95rem; }
/* referent links inside a record-list strip: strip scale, not title scale
   (fixes the v1 collision where .record-list a's title size hit these links) */
.record-list .integrity a { text-decoration: underline; font-weight: 400; font-size: 1em; }

/* ---- S267 WS2: footer links, registry entry, draft banner ---- */

.footer-links a { color: var(--ink-2); }
.footer-links a:hover { color: var(--accent); }

/* S276: registry rendered as a table (owner ruling H) */
.registry-table { font-size: 0.88rem; }
.registry-table th, .registry-table td { padding: 0.5rem 0.9rem 0.5rem 0; vertical-align: top; }
.registry-table code {
  font-size: 0.76rem;
  background: none;
  padding: 0;
  overflow-wrap: anywhere;
}

.registry-entry dl { margin: 1.2rem 0; }
.registry-entry dt { font-weight: 650; margin-top: 0.8rem; }
.registry-entry dd { margin: 0.15rem 0 0; overflow-wrap: anywhere; }

.draft-banner {
  border: 2px solid var(--ink);
  padding: 0.8rem 1rem;
  margin: 0 0 1.8rem;
}
.draft-banner p { margin: 0.25rem 0 0; font-size: 0.95rem; }
.draft-banner .note-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

/* ---- S276 WS3: diagrams (D3, D2, D4) ----
   The concept sources carried stand-in font stacks and literal hex; both are bound to
   the v2 tokens here so the diagrams cannot drift from the register. Palette rules
   bind: --accent-graphic is used for large graphic elements only, never text-scale;
   --gold stays decorative. Every diagram label sits on --ink, --ink-2 or --accent. */

.diagram { display: block; width: 100%; height: auto; margin: 1.25rem 0; } /* A2: was 1.7rem */
.diagram text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.diagram .d-serif { font-family: var(--serif); }
.diagram .d-ink { fill: var(--ink); }
.diagram .d-ink2 { fill: var(--ink-2); }
.diagram .d-accent { fill: var(--accent); }
.diagram .d-paper { fill: var(--paper); }
.diagram .d-box { fill: var(--box); }
.diagram .d-gold { fill: var(--gold); }
.diagram .d-fill-graphic { fill: var(--accent-graphic); }
.diagram .d-stroke-ink { stroke: var(--ink); }
.diagram .d-stroke-rule { stroke: var(--rule); }
.diagram .d-stroke-graphic { stroke: var(--accent-graphic); }

/* Each concept draws its own paper panel, gold stripe and hairline border. The owner
   ruled keep-or-shed by walking a three-option comparison on 2026-07-22: OPTION 2,
   ALL FRAMED. The shed state is kept as the default so the frame is explicit at each
   call site rather than implicit, and so the comparison remains one class away. */
.diagram .d-frame { display: none; }
.diagram.framed .d-frame { display: block; }

/* ---- S276 WS3: front-page sections ---- */

/* Item-9 (owner-ruled 2026-07-22): the eyebrow's first line — the spelled-out
   expansion — is DROPPED. The hero paragraph now carries the full expansion in the
   reading path under the gate (a) scope ruling, so the eyebrow was repeating it
   within one screen and costing two wrapped lines on a phone. What remains states
   the institution's CATEGORY, which the paragraph does not. Name once, category once. */
.hero .eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.8rem;
}

.hero .audience { font-size: 1.02rem; color: var(--ink-2); max-width: 40rem; }

.more { margin-top: 0.9rem; font-weight: 600; }

.benefit-cards {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
}
.benefit-cards li {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.9rem 1rem 1rem;
}
.benefit-cards h3 { margin: 0 0 0.35rem; font-size: 1.02rem; }
.benefit-cards p { margin: 0; font-size: 0.95rem; color: var(--ink-2); }

.record-compact { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.record-compact li { padding: 0.6rem 0; border-top: 1px solid var(--rule); }
.record-compact .rec-name {
  display: block;
  font-weight: 650;
  text-decoration: none;
}
.record-compact .rec-name:hover { text-decoration: underline; }
.record-compact .digest,
.record-compact .rec-meta {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--ink-2);
  background: none;
  padding: 0;
  overflow-wrap: anywhere;
}
.record-compact .rec-meta a { color: var(--accent); font-size: 1em; }

/* ---- S276: SIL (Source Info Line) — ratified 2026-07-22 ----
   Metadata about a document, never the substance of one (D-FENCE-1). CSS-only
   <details>/<summary>, no script. Fixed vocabulary: Source · Status · Authorship.
   Default collapsed; the summary carries a plain-language gloss, never the technical
   content. Accepted cost, on the record: collapsed content is hidden from assistive
   technology and, in some browsers, from in-page find — which is exactly why
   check-span-render forbids pinned governance content from ever living in one. */

.sil-group { margin-top: 2rem; }
.sil { border-top: 1px solid var(--rule); }
.sil > summary {
  cursor: pointer;
  list-style: none;
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0.6rem 0;
}
.sil > summary::-webkit-details-marker { display: none; }
.sil > summary::after { content: " +"; float: right; }
.sil[open] > summary::after { content: " \2212"; }
.sil > summary:hover { color: var(--accent); }
.sil-body {
  background: var(--box);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.8rem 1rem;
  margin: 0 0 1rem;
  font-size: 0.92rem;
}
.sil-body > :first-child { margin-top: 0; }
.sil-body > :last-child { margin-bottom: 0; }
.sil-body .integrity { margin-bottom: 0; }
/* A SIL placed inline in the document flow rather than in the foot group — used where
   the note's own wording depends on sitting beside what it describes. */
.sil-inline { margin: 1.4rem 0 0; }
.sil-inline + .iv1 { margin-top: 0.9rem; }

/* C1 treatment — the vendored "End of …" line stays (byte-frozen) but reads as a
   quiet end-rule rather than a closing announcement. */
/* C1 treatment, ratified 2026-07-22 as a standing pattern for BOTH document pages.
   Prominence minimized to the floor the fences allow: the line stays legible and
   findable by a reader checking the document is complete, and recedes for everyone
   else. It is NOT collapsible — see the SIL assessment in the DaB addendum: both
   "End of…" lines carry substance, not metadata. */
.doc-end {
  margin-top: 2.4rem;          /* more air above = reads as a boundary, not a paragraph */
  padding-top: 0.45rem;        /* tight to the rule */
  border-top: 1px solid var(--rule);
  color: var(--ink-2);         /* 5.66:1 on paper — AA at this size */
  font-size: 0.76rem;
  line-height: 1.5;
}
.doc-end p { margin: 0; }
.doc-end em { font-style: normal; }
/* the inline-code chip (e.g. HH-161) would be a visual spike in a line meant to
   recede — strip its ground so the whole line reads at one weight */
.doc-end code { background: none; padding: 0; font-size: 1em; }

/* Short "what this page is for" list — novice-first framing above the substrate. */
.page-points { margin: 0.7rem 0 0; padding-left: 1.1rem; color: var(--ink-2); }
.page-points li { margin: 0.25rem 0; }

/* ---- print ---- */

@media print {
  .site-header nav, .skip, .nav-toggle, .verify-btn { display: none; }
  /* A3: the sticky wrapper must not repeat or float on paper. */
  .header-bar { position: static; border-top: 0; }
  body { background: #fff; color: #000; }
  main { max-width: none; padding: 0; }
}