/* ==========================================================================
   RJKC — Refaluwasch Journal of Knowledge and Culture
   Shared stylesheet for the DESIGN-ONLY static visual preview.
   --------------------------------------------------------------------------
   This file styles static HTML mockups. It loads no external resources
   (no CDNs, no web fonts, no APIs) and contains no scripts.
   Colour tokens are sampled from the founder-approved primary logo
   (branding-reference/file_00000000868481fd8a7e3477bd4f43f8.png):
     navy / deep-ocean blue  #062951
     warm gold               #ab7837
     teal / ocean blue       #025172
     white                   #ffffff
   These are the preview's own working values, not founder-approved
   production specifications (Decision 22 leaves exact values to brand-system
   development). See README.md.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Core institutional palette (sampled from the approved logo) */
  --navy: #062951;
  --navy-deep: #041c38;
  --navy-soft: #0c3a63;
  --teal: #025172;
  --teal-bright: #0f7ea6;
  --gold: #ab7837;
  --gold-bright: #d9b26a;
  --gold-band: #c9a15c;
  --gold-ink: #7a5320;

  /* Neutrals and surfaces */
  --paper: #ffffff;
  --sand: #f6f3ed;
  --sand-deep: #efe9df;
  --ink: #14202c;
  --muted: #4e5a67;
  --line: #ddd6c9;
  --line-strong: #c3b9a6;

  /* Tints used for soft panels and labels */
  --teal-tint: #e8f2f7;
  --gold-tint: #fdf6e9;
  --navy-tint: #eaeff5;

  /* Links on light / on dark surfaces */
  --link: #025172;
  --link-hover: #013d57;
  --link-on-dark: #9ad6ea;

  /* Type */
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Metrics */
  --wrap: 68rem;
  --wrap-narrow: 46rem;
  --radius: 4px;
  --radius-lg: 8px;
  --shadow: 0 1px 2px rgba(6, 41, 81, 0.06), 0 6px 18px rgba(6, 41, 81, 0.07);

  /* Focus ring */
  --focus: #0f7ea6;
}

/* ---------- 2. Reset and base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--navy);
  line-height: 1.22;
  margin: 0 0 0.6em;
  font-weight: 700;
}

h1 { font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2rem); }
h3 { font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.4rem); }
h4 { font-size: 1.0625rem; font-family: var(--sans); letter-spacing: 0.01em; }

p, ul, ol, dl, blockquote, figure { margin: 0 0 1.1em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.35em; }
li { margin-bottom: 0.4em; }
li:last-child { margin-bottom: 0; }

a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { color: var(--link-hover); }

strong { font-weight: 700; }
abbr { text-decoration: none; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

/* Focus visibility, keyboard first */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- 3. Utilities ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 0.95rem;
  transition: top 0.15s ease-in;
}
.skip-link:focus { top: 0; color: #fff; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 0.6rem;
}
.eyebrow--on-dark { color: var(--gold-bright); }

.lead {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.28rem);
  line-height: 1.6;
  color: var(--muted);
}
.lead--on-dark { color: #dce6ef; }

.section { padding-block: clamp(2.25rem, 5vw, 3.75rem); }
.section--sand { background: var(--sand); }
.section--paper { background: var(--paper); }
.section--navy { background: var(--navy); color: #e7eef5; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--tight { padding-block: clamp(1.5rem, 3vw, 2.25rem); }

.section__head { max-width: var(--wrap-narrow); margin-bottom: 2rem; }
.section__head--wide { max-width: 54rem; }

.rule-gold {
  width: 4.5rem;
  height: 3px;
  border: 0;
  background: var(--gold);
  margin: 0 0 1.4rem;
}
.rule-gold--on-dark { background: var(--gold-bright); }
.rule-gold--center { margin-inline: auto; }

/* ---------- 4. Preview notice band ---------- */
.preview-notice {
  background: var(--gold-band);
  color: var(--navy-deep);
  text-align: center;
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.35;
  border-bottom: 1px solid #a8823f;
}
.preview-notice__full { display: none; }
@media (min-width: 48rem) {
  .preview-notice__short { display: none; }
  .preview-notice__full { display: inline; }
}

/* ---------- 5. Header and navigation ---------- */
.site-header {
  background: var(--paper);
  border-bottom: 3px solid var(--gold);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 0.9rem;
  max-width: 76rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: inherit;
  flex: 0 1 auto;
}
.brand-mark {
  width: clamp(64px, 9vw, 96px);
  height: auto;
  display: block;
  flex: none;
}
.brand-text { display: block; }
.brand-name {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.18rem);
  line-height: 1.2;
  max-width: 26ch;
}
.brand-abbr {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-top: 0.25rem;
}

.site-nav { flex: 1 1 100%; }
@media (min-width: 78rem) {
  .site-nav { flex: 0 1 auto; }
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.1rem;
  border-top: 1px solid var(--line);
  padding-top: 0.5rem;
}
@media (min-width: 78rem) {
  .site-nav ul { border-top: 0; padding-top: 0; }
}
.site-nav li { margin: 0; }
.site-nav a {
  display: block;
  padding: 0.5rem 0.62rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-radius: var(--radius);
  border-bottom: 3px solid transparent;
}
.site-nav a:hover {
  background: var(--navy-tint);
  color: var(--navy);
}
.site-nav a[aria-current="page"] {
  color: var(--gold-ink);
  border-bottom-color: var(--gold);
}
.site-nav a[aria-current="page"]::after {
  content: " (current page)";
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* ---------- 5b. Mobile navigation disclosure (zero JavaScript) ----------
   Below 78rem the primary navigation collapses into a <details>/<summary>
   disclosure. At >= 78rem the summary is hidden and the list renders inline
   exactly as before. No script is involved: opening and closing the panel is
   native browser behaviour, operable by keyboard and pointer alike. */
.nav-toggle { display: block; }

.nav-toggle > summary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-width: 8.5rem;
  padding: 0.5rem 0.85rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--paper);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;
}
.nav-toggle > summary::-webkit-details-marker { display: none; }
.nav-toggle > summary::marker { content: ""; }
.nav-toggle > summary::after {
  content: "\25BE";
  font-size: 0.9em;
  line-height: 1;
  color: var(--navy);
}
.nav-toggle[open] > summary::after { content: "\25B4"; }
.nav-toggle > summary:hover {
  background: var(--navy-tint);
  border-color: var(--navy);
}
.nav-toggle[open] > summary { margin-bottom: 0.5rem; }
/* The link list is a SIBLING of <details>, never a child of it. A closed
   <details> suppresses its non-summary children at the rendering level — such
   children keep their computed styles but are not painted, cannot be hit-tested
   and cannot take focus — and no author rule can override that. Keeping the list
   outside <details> means the mobile disclosure is driven by CSS alone, and the
   eight links stay a real, painted, keyboard-focusable inline row on desktop. */
.nav-toggle:not([open]) ~ .nav-list { display: none; }
.nav-toggle[open] ~ .nav-list { display: flex; }

@media (min-width: 78rem) {
  /* Desktop (78rem = 1248px): the disclosure control is removed from the layout
     and the link list is shown regardless of the control's open state. */
  .nav-toggle { display: none; }
  .nav-list { display: flex !important; }
}

/* ---------- 6. Hero (home) ---------- */
.hero {
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-soft) 58%, var(--teal) 140%);
  color: #eaf1f7;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--navy-deep);
}
.hero__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}
.hero h1 { color: #fff; margin-bottom: 0.5rem; }
/* Slightly larger homepage hero title for a clearer hierarchy above the lead.
   Same serif face, same palette — only the size step differs. */
.hero__title { font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.35rem); }
.hero__mark {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(0.75rem, 2vw, 1.35rem);
  box-shadow: 0 10px 30px rgba(4, 28, 56, 0.35);
  justify-self: center;
  max-width: 22rem;
}
.hero__mark img { display: block; width: 100%; }
.hero__caption {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  margin: 0.7rem 0 0;
  line-height: 1.45;
}

/* Page header band (interior pages) */
.page-head {
  background: var(--navy);
  color: #e7eef5;
  padding-block: clamp(1.9rem, 4vw, 3rem);
  border-bottom: 4px solid var(--gold);
}
.page-head h1 { color: #fff; margin-bottom: 0.5rem; }
.page-head__meta {
  font-size: 0.85rem;
  color: var(--gold-bright);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.85rem;
}
.page-head .lead { max-width: 52rem; }

/* ---------- 7. Buttons and calls to action ---------- */
.btn {
  display: inline-block;
  padding: 0.7rem 1.35rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.96rem;
  text-decoration: none;
  border: 2px solid transparent;
  line-height: 1.3;
}
.btn--primary {
  background: var(--gold);
  color: #22160a;
  border-color: var(--gold);
}
.btn--primary:hover { background: var(--gold-bright); color: #1b1206; border-color: var(--gold-bright); }
.btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.65);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }
.btn--outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn--outline:hover { background: var(--navy-tint); color: var(--navy); }
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* ---------- 8. Non-operational (illustrative) controls ---------- */
/*
   Every control that would be interactive in a real build is rendered as a
   deliberately inert mock: dashed outline, muted surface, and an explicit
   label. Nothing here submits, searches, or authenticates.
*/
.mock {
  position: relative;
  border: 2px dashed var(--line-strong);
  background: repeating-linear-gradient(
    135deg,
    var(--sand) 0 10px,
    #fbf9f5 10px 20px
  );
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin: 0 0 1.2rem;
  cursor: not-allowed;
}
.mock__tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-deep);
  background: var(--gold-bright);
  border-radius: 2px;
  padding: 0.18rem 0.5rem;
  margin-bottom: 0.7rem;
}
.mock__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.mock__field {
  display: block;
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 0.98rem;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  pointer-events: none;
}
.mock__button {
  display: inline-block;
  padding: 0.65rem 1.3rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: #6b6255;
  background: var(--sand-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  pointer-events: none;
}
.mock__note {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.8rem 0 0;
}
.mock-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
}
.mock-row .mock__field { flex: 1 1 14rem; }

/* Inline "non-functional" chip used in navigation-like lists */
.chip-nonfunctional {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-deep);
  background: var(--gold-tint);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  margin-left: 0.4rem;
  white-space: nowrap;
}

/* ---------- 9. Placeholders ---------- */
/*
   Clearly labelled illustrative placeholders for content that has not yet
   been approved. Warm-gold dashed underline, italic, never presented as fact.
*/
.placeholder {
  color: var(--gold-ink);
  font-style: italic;
  border-bottom: 2px dashed var(--gold);
  padding-bottom: 1px;
  background: var(--gold-tint);
}
.placeholder--block {
  display: block;
  padding: 0.9rem 1rem;
  border: 2px dashed var(--gold);
  border-radius: var(--radius);
  background: var(--gold-tint);
  font-style: italic;
  color: var(--gold-ink);
  text-align: center;
  margin: 0 0 1.2rem;
}
.placeholder--block strong { font-style: normal; color: var(--navy); }

/* ---------- 10. Cards and grids ---------- */
.grid {
  display: grid;
  gap: 1.35rem;
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow);
}
.card--plain { border-top-color: var(--teal); }
.card--quiet { border-top-color: var(--line-strong); box-shadow: none; }
.card h3 { margin-bottom: 0.5rem; }
.card h3 a { text-decoration: none; color: var(--navy); }
.card h3 a:hover { color: var(--teal); text-decoration: underline; }
.card p { font-size: 0.97rem; color: var(--muted); }
.card ul { font-size: 0.97rem; color: var(--muted); }
.card__kicker {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 0.45rem;
}
.card__meta {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.9rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

/* Feature list with gold markers */
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.85rem;
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.62rem;
  height: 0.62rem;
  background: var(--gold);
  border-radius: 50%;
}
.feature-list--on-dark li::before { background: var(--gold-bright); }

/* Value blocks */
.value {
  border-left: 4px solid var(--teal);
  padding: 0.15rem 0 0.15rem 1.1rem;
  margin-bottom: 1.35rem;
}
.value h3 { margin-bottom: 0.3rem; font-size: 1.12rem; }
.value p { margin: 0; font-size: 0.97rem; color: var(--muted); }
.value--gold { border-left-color: var(--gold); }

/* Definition-style rows (institutional facts) */
.fact-list { margin: 0; }
.fact-list div {
  display: grid;
  gap: 0.15rem 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 40rem) {
  .fact-list div { grid-template-columns: 15rem minmax(0, 1fr); }
}
.fact-list dt {
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0;
}
.fact-list dd { margin: 0; font-size: 0.99rem; }

/* ---------- 11. Tables (access classes) ---------- */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.94rem;
}
caption {
  caption-side: top;
  text-align: left;
  font-size: 0.85rem;
  color: var(--muted);
  padding: 0.85rem 1rem 0.35rem;
}
th, td {
  text-align: left;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
thead th {
  background: var(--navy);
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
tbody tr:nth-child(even) { background: #faf8f4; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td .cls-num {
  display: inline-block;
  min-width: 1.6rem;
  font-weight: 700;
  color: var(--gold-ink);
}

/* ---------- 12. Notice panels ---------- */
.notice {
  border-left: 5px solid var(--teal);
  background: var(--teal-tint);
  padding: 1.1rem 1.3rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 1.5rem;
}
.notice h3 { margin-bottom: 0.4rem; font-size: 1.08rem; }
.notice p { margin-bottom: 0.6rem; font-size: 0.97rem; }
.notice p:last-child { margin-bottom: 0; }
.notice--gold { border-left-color: var(--gold); background: var(--gold-tint); }
.notice--navy { border-left-color: var(--navy); background: var(--navy-tint); }

/* Status pill */
.status-pill {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
}
.status-pill--gold { background: var(--gold); color: #22160a; }
.status-pill--teal { background: var(--teal); color: #fff; }

/* Quote */
.quote {
  margin: 0 0 1.5rem;
  padding: 0 0 0 1.4rem;
  border-left: 4px solid var(--gold);
}
.quote p {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--navy);
}
.quote footer {
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--muted);
  margin-top: 0.6rem;
}
.quote footer::before { content: "— "; }

/* ---------- 13. Two-column content ---------- */
.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 52rem) {
  .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.panel {
  background: var(--paper);
  /* Text colour is set explicitly: a panel can sit inside a dark or tinted
     section (for example .section--navy), where inheriting the section's light
     foreground on the panel's white surface would be unreadable. */
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow);
}
.panel--sand { background: var(--sand); box-shadow: none; }
.panel h3 { margin-top: 0; color: var(--navy); }
.panel > :last-child { margin-bottom: 0; }

/* ---------- 13b. Governance disclosure (zero JavaScript) ----------
   Collapsible detail for the archival classification vocabulary. It is marked
   open by default, so the full content stays visible without interaction or
   authentication; the disclosure only lets a reader collapse it. */
.detail-disclosure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.detail-disclosure > summary {
  padding: 0.85rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--navy-tint);
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;
}
.detail-disclosure > summary::-webkit-details-marker { display: none; }
.detail-disclosure > summary::marker { content: ""; }
.detail-disclosure > summary::before {
  content: "\25BE";
  display: inline-block;
  font-size: 0.85em;
  margin-right: 0.55rem;
  color: var(--navy);
}
.detail-disclosure[open] > summary::before { content: "\25B4"; }
.detail-disclosure[open] > summary {
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--line);
}
.detail-disclosure > summary:hover { background: #dde6ef; }
.detail-disclosure__body { padding: 1.35rem 1.2rem 0.35rem; }
.detail-disclosure__body > :last-child { margin-bottom: 1.1rem; }
@media (max-width: 40rem) {
  .detail-disclosure__body { padding: 1rem 0.85rem 0.25rem; }
}

/* ---------- 14. Footer ---------- */
.site-footer {
  background: var(--navy-deep);
  color: #cfdbe6;
  padding-block: clamp(2.25rem, 5vw, 3.5rem) 1.75rem;
  border-top: 5px solid var(--gold);
  font-size: 0.94rem;
}
.footer-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 52rem) {
  .footer-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.3fr); }
}
.site-footer h2, .site-footer h3 {
  color: #fff;
  font-size: 0.82rem;
  font-family: var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.site-footer a { color: var(--link-on-dark); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.footer-brand__name {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 0.4rem;
}
.footer-brand__abbr {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 0.85rem;
}
.footer-legal {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.footer-legal p {
  font-size: 0.86rem;
  line-height: 1.6;
  color: #b9c8d6;
  margin-bottom: 0.7rem;
}
.footer-legal strong { color: #fff; }
.footer-legal .footer-notice {
  color: var(--gold-bright);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
}
.footer-meta {
  font-size: 0.8rem;
  color: #93a6b8;
}

/* ---------- 15. Print ---------- */
@media print {
  .preview-notice { border: 2px solid #000; }
  .site-nav a[aria-current="page"] { text-decoration: underline; }
  .mock { background: #fff; }
}

/* ---------- 16. Masthead header, navigation row and runner band -----------
   Implemented in the Stage 1 build 2026-10-31 from the approved A-17d
   design (proposals/A-17d-emblem/, record A-17D-EMBLEM-CORRECTION.md
   §§2, 10 and 11). IMPLEMENTATION ONLY — nothing here is deployed or
   published, and gates A-10, A-11 and A-12 are untouched by it.

   Row 1 is the masthead; row 2 is the primary navigation under a navy/gold
   hairline; the PEOPLE · OCEAN · KNOWLEDGE · FUTURE runner sits immediately
   above the footer on all eight pages.

   THE ARTWORK IS NEVER ALTERED. Both PNGs are placed at their native aspect
   ratios and scaled by width only (width:100%; height:auto), so the
   width/height attributes on each <img> can never override the intrinsic
   2172:585 and 2172:139 proportions. No fixed height, no object-fit, no crop,
   no recolour, no re-encode.
   assets/masthead.png is a byte-identical copy of
   branding/RJKC_letterhead_masthead_DRAFT.png (sha256 5328b6a0…f682f) and
   assets/runner.png of branding/RJKC_bottom_runner_DRAFT.png
   (sha256 b13dfc61…e846d7).
   -------------------------------------------------------------------------- */

/* Header row 1 — the masthead. Below 78rem it is full-bleed; at and above
   78rem it is 90vw, capped at the approved 1296px (the width it already
   takes at a 1440px viewport), so it stops growing on larger screens. */
.masthead-row {
  padding-block: clamp(0.5rem, 1.2vw, 0.9rem);
}
.masthead-brand {
  display: block;
  text-decoration: none;
}
.masthead-brand img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

/* Header row 2 — the navigation, in a row of its own. The hairline is
   full-bleed so it reads as a structural divider, matching the existing
   full-width 3px gold border at the foot of .site-header. */
.nav-row {
  background: var(--paper);
  border-top: 2px solid var(--navy);
  box-shadow: inset 0 1px 0 0 var(--gold);
  padding-block: 0.15rem 0.4rem;
}

/* The navigation is no longer a flex child of the header, so the old
   inline-header flex sizing and the list's own top rule are neutralised.
   Everything else about .site-nav, .nav-toggle and .nav-list is unchanged:
   the zero-JavaScript Menu disclosure still governs below 78rem. */
.site-nav { flex: none; }
.site-nav ul {
  border-top: 0;
  padding-top: 0;
}

/* The runner band, immediately above the footer on all eight pages */
.runner-band {
  padding-block: clamp(1.25rem, 3vw, 2rem);
}
.runner-band img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

:root {
  /* Mobile disclosure bar height. 44px is the minimum touch target; only the
     bar is that tall — the visible pill inside it is ~30px. */
  --nav-bar-h: 44px;

  /* Desktop nav spacing: the eight headings are a centred group with an even
     gap between them. This is the gap between adjacent <a> boxes; each <a>
     carries 0.62rem of side padding, so the visible white between two
     headings is this value + 1.24rem (19.84px). 1rem is the approved 16px. */
  --nav-gap: 1rem;

  /* Desktop navigation heading size, approved at 16px (= 1rem). The 15px
     comparison variant is not shipped. */
  --nav-font-size: 16px;
}

/* ---------- 16a. Below 78rem: full-bleed masthead and the Menu bar -------- */

/* Full-bleed masthead. Below the 78rem (1248px) disclosure breakpoint the
   masthead drops the content-column gutter and spans the full content box.
   This is the only legitimate way to make the name bigger without cropping:
   the image gets MORE width, not less height. Padding is removed from the
   container's .wrap, so the document never exceeds the viewport and no
   horizontal overflow is introduced (no 100vw, no negative margin, no
   clipping). NB: .masthead-row and .wrap are the SAME element
   (<div class="wrap masthead-row">), so this is a compound selector. */
@media (max-width: 77.99rem) {
  .wrap.masthead-row {
    max-width: none;
    padding-inline: 0;
  }
  .masthead-brand {
    max-width: none;
  }
}

/* A slim bar, not a block button: a small SECTIONS signpost at the left edge
   of the content column and a compact pill at the right. The
   <details>/<summary> mechanism is untouched — still zero JavaScript, still
   the native disclosure, and .nav-toggle:not([open]) ~ .nav-list still hides
   the list. Only the summary's appearance and the row's metrics change. */
@media (max-width: 77.99rem) {
  .nav-row {
    padding-block: 0 0.35rem;
  }
  .site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 0.75rem;
    min-height: var(--nav-bar-h);
  }
  /* The label is a visual signpost only — the summary keeps its own
     accessible name ("Menu"), so the button is not renamed for assistive
     technology and nothing is announced twice. */
  .nav-bar__label {
    flex: 1 1 auto;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .nav-toggle {
    flex: 0 0 auto;
  }
  /* The list takes its own line below the bar, full width of the column. */
  .nav-list {
    flex: 0 0 100%;
  }

  /* The summary keeps its full 44px hit area but paints only a ~30px pill:
     the border and fill live on ::before, inset 7px top and bottom, inside a
     stacking context created by `isolation`. If `isolation` were unsupported
     the worst case is that the pill outline is not painted — the control
     still reads as "Menu ⌄" at 0.85rem with a 44px target. */
  .nav-toggle > summary {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    min-height: var(--nav-bar-h);
    padding: 0 0.9rem;
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--navy);
    background: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
  }
  .nav-toggle > summary::before {
    content: "";
    position: absolute;
    inset: 7px 0;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--paper);
    z-index: -1;
  }
  .nav-toggle > summary::after {
    font-size: 0.7em;
  }
  .nav-toggle > summary:hover::before,
  .nav-toggle > summary:focus-visible::before {
    border-color: var(--navy);
    background: var(--navy-tint);
  }
  .nav-toggle[open] > summary::before {
    border-color: var(--navy);
    background: var(--navy-tint);
  }
  .nav-toggle[open] > summary {
    margin-bottom: 0.4rem;
  }
  /* A hairline between the bar and the open panel gives the disclosed list a
     visible top edge now that the control no longer has a heavy box. */
  .nav-toggle[open] ~ .nav-list {
    margin-top: 0.15rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--line);
  }
}

/* ---------- 16b. At and above 78rem: 90vw capped at 1296px, centred row --- */

/* The label belongs to the mobile bar only. At >= 78rem the summary is
   display:none (section 5b) and the eight links render inline. */
@media (min-width: 78rem) {
  .nav-bar__label {
    display: none;
  }
}

/* The masthead leaves the content column so it can be 90vw rather than
   --wrap wide. The classic failure is width:100vw on an element whose parent
   is narrower than the viewport: 100vw counts the scrollbar, the parent does
   not, and the document gains a horizontal scrollbar. This rule uses
   width: min(90vw, 1296px) instead — the min() is not decoration. At every
   viewport below 1440px 90vw is the binding term and the rule is identical
   to the approved 90vw behaviour; at and above 1440px the 1296px cap holds
   the width the Founder approved on the desktop, so the masthead never grows
   out of proportion on a large screen. The box is centred, so the white space
   either side is symmetric.
   MOBILE IS UNTOUCHED: everything here is inside @media (min-width: 78rem).
   Below 1248px the full-bleed masthead of 16a applies. */
@media (min-width: 78rem) {
  .wrap.masthead-row {
    max-width: none;
    padding-inline: 0;
  }
  .masthead-brand {
    width: min(90vw, 1296px);
    max-width: none;
    margin-inline: auto;
  }
}

/* The eight headings as one centred, evenly spaced group, beneath the
   masthead. justify-content: center puts the group's optical centre on the
   column's centre, which is the same centre the masthead is centred on (both
   are symmetric inside the same .wrap), so the group sits under the masthead
   rather than being left-aligned. column-gap is an EVEN gap, not
   space-between: space-between would push the first and last headings to the
   column edges and stretch the seven gaps, which reads as a toolbar rather
   than a masthead's caption.
   Specificity: `.site-nav .nav-list` (0,2,0) beats the base `.site-nav ul`
   (0,1,1) that sets `gap: 0.15rem 0.1rem`, so no !important is needed.
   flex-wrap stays as inherited (`wrap`). The group is ~903px inside a column
   of at least 1008px at this breakpoint, so it cannot wrap; leaving `wrap` in
   place means that if a heading were ever re-worded long enough to overflow,
   it would wrap onto a second centred line instead of causing horizontal
   overflow. Below 78rem nothing here applies: the Menu bar of 16a governs. */
@media (min-width: 78rem) {
  .site-nav .nav-list {
    justify-content: center;
    column-gap: var(--nav-gap);
    row-gap: 0;
  }
  .site-nav a { font-size: var(--nav-font-size); }
}

/* ---------- 16c. The masthead composite, composed from approved pixels -----
   The masthead is not one raster. It is TWO CROPS of two approved files,
   assembled by CSS on the page:
     left  — the emblem, cropped out of assets/logo.png (the Founder-approved
             square logo, sha256 eb397ba4…c64874, untouched)
     right — the wordmark, rules and inscriptions, cropped out of
             assets/masthead.png
   No new image file is created and nothing is re-rendered, traced or
   recoloured: both crops are drawn by the browser from the approved
   originals, so every pixel on screen comes from an approved file. The only
   transformation is a SIZE change — the emblem is downscaled from a 1134px
   ring to the size the masthead slot needs, which is unavoidable. The proa
   and every other emblem element are never redrawn.

   COMPOSITION GEOMETRY (computed from the measured source rectangles, not
   hand-typed; see A-17D-EMBLEM-CORRECTION.md §2.2–§2.3)
     k (logo px -> masthead frame px) : 0.463845
     emblem source rect in logo.png   : x 198..1350, y 26..1104  (1153x1079 px)
     emblem box in frame px           : left 137.36  top 33.36  w 534.81  h 500.49
     emblem box as % of frame         : left 6.3242%  top 5.7028%  w 24.6231%  h 85.5536%
     background-size                  : 133.2177% auto
     background-position              : 51.6971% 5.6893%
     wordmark source rect in masthead : x 689..2171, y 0..584  (1483x585 px)
     wordmark box as % of frame       : left 31.7219%  w 68.2781%  h 100%
     wordmark background-size         : 146.4599% auto ; position 100% 0

   THE WHITE BACKGROUND: neither source has an alpha channel; both carry
   opaque white (logo.png is a JPEG inside a .png name). The crops are placed
   on the header's own #ffffff, and the crop edges fall in empty white, so the
   white simply continues — no mask, no halo, no visible cut edge. The emblem
   crop is also inset inside its own box, so its rectangle is never adjacent
   to the wordmark's rectangle. */
.masthead-composite {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 2172 / 585;
}
.masthead-composite .mc-emblem,
.masthead-composite .mc-word {
  position: absolute;
  background-repeat: no-repeat;
}
.mc-emblem {
  left: 6.3242%;
  top: 5.7028%;
  width: 24.6231%;
  height: 85.5536%;
  background-image: url("logo.png");
  background-size: 133.2177% auto;
  background-position: 51.6971% 5.6893%;
}
.mc-word {
  left: 31.7219%;
  top: 0;
  width: 68.2781%;
  height: 100%;
  background-image: url("masthead.png");
  background-size: 146.4599% auto;
  background-position: 100% 0;
}