/* ==========================================================================
   Saba Gul — personal scholarly site
   One stylesheet. No frameworks, no external fonts, no third-party assets.
   Light-only by design: pages must print and screenshot identically for the
   evidence record (Part 7 of the strategy document).
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #faf8f4;
  --surface: #efece4;
  --white: #ffffff;
  --deep: #14282f;          /* dark band: footer, top rule */
  --deep-text: #cfd9dd;
  --deep-link: #a7d3de;
  --ink: #0d1116;
  --text: #1f252c;
  --muted: #545d68;
  --line: #d9d4c9;
  --line-strong: #b4ab9c;
  --accent: #0f4c5c;
  --accent-dark: #0a3743;

  /* Three section hues, each ≥5.5:1 on the page background. Teal is the site
     identity (masthead, footer, home); clay carries the toolkit and the
     self-assessment; olive carries the project. --hue is what components read,
     so a body theme class recolors a whole page without touching components. */
  --clay: #8a4632;
  --clay-dark: #6d3626;
  --olive: #45592f;
  --olive-dark: #364724;

  --hue: var(--accent);
  --hue-dark: var(--accent-dark);
  --hue-wash: #eef4f5;

  --tint-teal: #f0f6f7;
  --tint-clay: #fbf4f1;
  --tint-olive: #f4f7ef;

  /* --measure equals --page minus the 3rem of side padding, so text, bands,
     header, and footer all share one left edge and one right edge. */
  --page: 50rem;
  --measure: 47rem;
}

/* --- Reset / base ------------------------------------------------------- */

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

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

/* Flex column so the footer sits at the bottom of the viewport on short pages
   (Contact, 404) instead of floating mid-screen with page background beneath it.
   Disabled in print, where it would interfere with pagination. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Page theming: components read --hue, so one class recolors a page. */
body.theme-toolkit { --hue: var(--clay); --hue-dark: var(--clay-dark); --hue-wash: var(--tint-clay); }
body.theme-project { --hue: var(--olive); --hue-dark: var(--olive-dark); --hue-wash: var(--tint-olive); }

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

h1, h2, h3, h4 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

p { margin: 0 0 1.15rem; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.16em;
}

a:hover { color: var(--accent-dark); }

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

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

blockquote {
  margin: 1.5rem 0;
  padding: 0 0 0 1.25rem;
  border-left: 3px solid var(--hue);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  font-style: italic;
}

/* --- Utilities ---------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--white);
  padding: 0.65rem 1rem;
  z-index: 10;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.eyebrow {
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.lede {
  max-width: 34rem;
  color: var(--muted);
  font-size: 1.22rem;
  line-height: 1.5;
}

.prose { max-width: var(--measure); }

.prose h2 {
  margin: 2.75rem 0 0.9rem;
  font-size: 1.45rem;
}

/* Short accent rule above top-level section headings. */
.prose > h2::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 3px;
  margin-bottom: 0.9rem;
  background: var(--hue);
}

.prose h3 {
  margin: 2rem 0 0.6rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.disclaimer {
  margin-top: 2.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

/* Unfilled content. Search the source for "todo" before launch; see README. */
.todo {
  background: #fdf6e4;
  border-bottom: 1px dotted #b08d4d;
  color: #7a5c22;
  padding: 0 0.2em;
  font-size: 0.95em;
  white-space: nowrap;
}

/* --- Header ------------------------------------------------------------- */

/* Centered title block, the way a journal or monograph opens: name, role in
   italic serif, a short rule, then the nav. The previous version stacked
   everything flush left and closed on a blunt 2px slab. */
.site-header {
  background: var(--bg);
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--line-strong);
}

.site-header__inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 2.7rem 1.5rem 1.15rem;
  text-align: center;
}

.wordmark {
  display: inline-block;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 2.45rem);
  line-height: 1.12;
  letter-spacing: 0.035em;
  text-decoration: none;
}

.wordmark:hover { color: var(--ink); }

.wordmark__role {
  display: block;
  max-width: 32rem;
  margin: 0.6rem auto 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Short centered rule instead of a full-width border: it divides the title
   block from the nav without drawing a box around the header. Sits on .nav so
   it falls between the two, not after both. */
.nav::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: 2px;
  margin: 1.5rem auto 1.25rem;
  background: var(--accent);
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: inline-block;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  color: var(--text);
  font-size: 0.95rem;
  text-decoration: none;
}

.nav a:hover {
  border-bottom-color: var(--line-strong);
  color: var(--accent);
}

.nav a[aria-current="page"] {
  border-bottom-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* --- Main --------------------------------------------------------------- */

main {
  flex: 1 0 auto;      /* pushes the footer to the bottom on short pages */
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 3.75rem 1.5rem 4.75rem;
}

.page-head {
  max-width: var(--measure);
  margin-bottom: 2.75rem;
}

.page-head h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
}

.hero {
  max-width: var(--measure);
  margin-bottom: 3.25rem;
}

.hero h1 {
  margin: 0 0 1.1rem;
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  line-height: 1.14;
}

.hero__intro {
  margin-top: 1.85rem;
  font-size: 1.125rem;
}

/* --- Cards -------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.15rem;
  margin: 0 0 3.75rem;
  padding: 0;
  list-style: none;
}

/* Each card carries its own hue: teal for research, clay for the toolkit, olive
   for the project — the same hues those sections use on their own pages. */
.card {
  display: flex;
  flex-direction: column;
  background: var(--card-tint, var(--white));
  border: 1px solid var(--line);
  border-top: 3px solid var(--card-hue, var(--accent));
  padding: 1.4rem 1.4rem 1.35rem;
}

.card--research { --card-hue: var(--accent); --card-tint: var(--tint-teal); }
.card--toolkit  { --card-hue: var(--clay);   --card-tint: var(--tint-clay); }
.card--project  { --card-hue: var(--olive);  --card-tint: var(--tint-olive); }

.card__icon {
  display: block;
  width: 2.3rem;
  height: 2.3rem;
  margin-bottom: 1rem;
  color: var(--card-hue, var(--accent));
}

.card h2 {
  margin: 0 0 0.6rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--card-hue, var(--accent));
}

.card p {
  flex: 1 1 auto;
  margin: 0 0 1.15rem;
  font-size: 0.99rem;
}

.arrow {
  color: var(--card-hue, var(--hue));
  font-size: 0.93rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--line-strong);
  padding-bottom: 1px;
}

.arrow:hover { border-bottom-color: var(--card-hue, var(--hue)); }

/* --- Updates ------------------------------------------------------------ */

/* Full container width so its right edge lines up with the card row above. */
.updates {
  border-top: 2px solid var(--line-strong);
  padding-top: 1.6rem;
}

.updates h2 {
  margin: 0 0 1.1rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}

.updates ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.updates li {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
  font-size: 1rem;
}

.updates li:first-child { border-top: 0; }

.updates__date {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding-top: 0.2rem;
}

@media (max-width: 34rem) {
  .updates li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
}

/* --- Publications ------------------------------------------------------- */

.pub {
  max-width: var(--measure);
  border-top: 2px solid var(--line-strong);
  padding: 2.25rem 0 0.5rem;
}

.pub:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.pub h2 {
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
  line-height: 1.3;
}

.pub__meta {
  margin: 0 0 1rem;
  color: var(--hue);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.pub__links {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.pub__links li { margin-bottom: 0.35rem; }

.cite {
  margin: 0 0 0.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border-left: 3px solid var(--line-strong);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.cite strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--hue);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* --- Breadcrumb, scope block -------------------------------------------- */

.breadcrumb {
  margin: -1.25rem 0 1.75rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.scope {
  margin: 2rem 0;
  padding: 1.1rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-size: 0.95rem;
}

.scope h3 {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hue);
}

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

.sa-scp-note {
  font-size: 0.95rem;
  color: var(--muted);
}

.note--warn { border-left-color: #b08d4d; }

/* --- Self-assessment instrument ----------------------------------------- */

.sa {
  max-width: var(--measure);
  margin: 2.75rem 0 0;
  padding: 0;
  border: 0;
}

.sa fieldset {
  margin: 0 0 2.25rem;
  padding: 0;
  border: 0;
}

.sa legend {
  padding: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.3rem;
}

.sa-domain__q {
  margin: 0.5rem 0 1rem;
  color: var(--muted);
  font-size: 0.97rem;
}

.sa-record {
  padding: 1.25rem 1.4rem !important;
  background: var(--white);
  border: 1px solid var(--line-strong) !important;
  border-top: 3px solid var(--hue) !important;
}

.sa-record legend {
  margin-left: -0.35rem;
  padding: 0 0.35rem;
  font-size: 0.75rem;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hue);
}

.sa-record__grid {
  display: grid;
  gap: 0.85rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-top: 0.6rem;
}

.sa-record label {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sa-record input {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.45rem 0.55rem;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
}

.sa-record input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Print-only twin of each record field. On screen the input itself is the
   field; the twin exists because print cannot show a scrolled input in full.
   See @media print at the foot of this file. */
.sa-record__print { display: none; }

.sa-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--line-strong);
}

.sa-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  border-bottom: 1px solid var(--line);
}

.sa-item > label {
  display: grid;
  grid-template-columns: 1.35rem 2.1rem minmax(0, 1fr);
  gap: 0 0.5rem;
  flex: 1 1 22rem;
  padding: 0.85rem 0;
  cursor: pointer;
}

.sa-item input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.28rem 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.sa-item__code {
  color: var(--hue);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding-top: 0.2rem;
}

.sa-item__text { font-size: 1rem; }

.sa-item__scp {
  flex: 0 0 auto;
  padding-bottom: 0.85rem;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.sa-item.is-yes {
  background: rgba(15, 76, 92, 0.045);
  background: color-mix(in srgb, var(--hue) 5%, transparent);
}

.sa-item.is-yes .sa-item__text { color: var(--ink); }

.sa-subtotal {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sa-subtotal strong {
  color: var(--hue);
  font-size: 1rem;
  letter-spacing: 0;
}

/* --- Self-assessment results -------------------------------------------- */

.sa-results {
  max-width: var(--measure);
  margin-top: 1rem;
  padding-top: 2rem;
  border-top: 4px solid var(--hue);
}

.sa-results h2 { margin: 0 0 1.25rem; font-size: 1.6rem; }

.sa-results h3 { margin: 2.25rem 0 1rem; font-size: 1.25rem; }

.sa-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.97rem;
}

.sa-table__caption {
  margin-bottom: 0.9rem;
  color: var(--muted);
  font-size: 0.875rem;
  text-align: left;
}

.sa-table th,
.sa-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.sa-table thead th {
  border-bottom: 2px solid var(--line-strong);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sa-table tbody th { font-family: var(--sans); font-size: 0.97rem; font-weight: 400; }

.sa-table td { width: 5rem; }

.sa-table tfoot th,
.sa-table tfoot td {
  border-top: 2px solid var(--line-strong);
  border-bottom: 0;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 700;
}

.sa-bands {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sa-band {
  padding: 1rem 1.15rem;
  margin-bottom: 0.6rem;
  background: var(--surface);
  border-left: 3px solid var(--line-strong);
  color: var(--muted);
  font-size: 0.95rem;
}

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

.sa-band__head {
  margin-bottom: 0.35rem;
  color: var(--ink);
  font-size: 1rem;
}

.sa-band__score {
  display: inline-block;
  min-width: 4rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.sa-band.is-current {
  background: var(--white);
  border-left-color: var(--hue);
  border-top: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  color: var(--text);
}

.sa-band.is-current .sa-band__score { color: var(--accent); }

.sa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2rem 0 1rem;
}

.btn {
  padding: 0.6rem 1.1rem;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn--quiet {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
  font-weight: 400;
}

.btn--quiet:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); }

/* Running score, JS-only. */
.sa-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--deep);
  border-top: 3px solid var(--hue);
}

.sa-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1rem;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  color: var(--deep-text);
  font-size: 0.9rem;
}

.sa-bar__score {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
}

.sa-bar__band { flex: 1 1 auto; }

.sa-bar__link { color: var(--deep-link); font-size: 0.875rem; }

/* --- Tools -------------------------------------------------------------- */

.tool {
  display: flex;
  gap: 1.35rem;
  max-width: var(--measure);
  border-top: 2px solid var(--line-strong);
  padding: 2rem 0 1.25rem;
}

.tool__num {
  flex: 0 0 auto;
  color: var(--hue);
  font-family: var(--serif);
  font-size: 2.25rem;
  line-height: 1;
  opacity: 0.7;
}

.tool__body { flex: 1 1 auto; }

.tool h2 {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
}

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

/* --- Steps -------------------------------------------------------------- */

.steps {
  max-width: var(--measure);
  margin: 0 0 1.75rem;
  padding-left: 1.35rem;
}

.steps li {
  margin-bottom: 0.6rem;
  padding-left: 0.35rem;
}

.plain-list {
  max-width: var(--measure);
  margin: 0 0 1.5rem;
  padding-left: 1.15rem;
}

.plain-list li {
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
}

/* --- Note / callout ----------------------------------------------------- */

.note {
  max-width: var(--measure);
  margin: 2rem 0 0;
  padding: 1.1rem 1.3rem;
  background: var(--hue-wash);
  border-left: 4px solid var(--hue);
  font-size: 0.97rem;
}

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

/* --- About page --------------------------------------------------------- */

/* Photo sits in the right column on wide screens; on narrow screens the source
   order takes over and it leads the page. */
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12rem;
  gap: 2.5rem;
  align-items: start;
}

.about-layout > .prose { grid-area: 1 / 1; }
.about-layout > .portrait { grid-area: 1 / 2; }

@media (max-width: 48rem) {
  .about-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .about-layout > .prose,
  .about-layout > .portrait { grid-area: auto; }
}

.portrait {
  margin: 0;
  max-width: 12rem;
}

.portrait img {
  display: block;
  width: 100%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

.portrait figcaption {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.credentials {
  margin: 2.25rem 0 0;
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--hue);
  font-size: 0.97rem;
}

.credentials h2 {
  margin: 0 0 0.6rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hue);
}

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

/* --- Contact ------------------------------------------------------------ */

.contact-details {
  max-width: var(--measure);
  margin: 0 0 2rem;
  padding: 1.4rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--hue);
}

.contact-details dl {
  margin: 0;
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 0.55rem 1rem;
  font-size: 1rem;
}

@media (max-width: 34rem) {
  .contact-details dl { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .contact-details dd { margin-bottom: 0.8rem; }
}

.contact-details dt {
  color: var(--hue);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 0.25rem;
}

.contact-details dd { margin: 0; }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  background: var(--deep);
  border-top: 4px solid var(--accent);
}

.site-footer__inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 2.4rem 1.5rem 3rem;
  color: var(--deep-text);
  font-size: 0.85rem;
  line-height: 1.65;
}

.site-footer__meta {
  margin: 0 0 0.9rem;
  color: #f1f4f5;
  font-weight: 500;
}

.site-footer__meta a { color: var(--deep-link); }

.site-footer__meta a:hover { color: #ffffff; }

.site-footer :focus-visible { outline-color: var(--deep-link); }

.site-footer__legal {
  max-width: 52rem;
  margin: 0;
}

/* --- Print (evidence captures, print-to-PDF) ---------------------------- */

@media print {
  /* Margins for the self-assessment only, via a named page. A plain @page rule
     would widen the margins on all seven pages, which reflows them (research
     gained a page); this leaves them on the browser's own defaults. Claimed by
     .sa-page below. */
  @page sa-record {
    margin: 0.65in 0.7in 0.6in;
  }

  :root { --bg: #fff; --surface: #fff; --white: #fff; }

  /* The screen layout makes body a flex column to pin the footer down; in print
     that fights pagination, so it goes back to normal flow. */
  body {
    display: block;
    min-height: 0;
    background: #fff;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  .skip-link,
  .nav { display: none; }

  /* Dark bands would print as slabs of ink. */
  .site-header {
    border-top: 2px solid #333;
    border-bottom: 1px solid #999;
  }

  .site-header__inner { text-align: left; padding-bottom: 0.6rem; }

  .wordmark { font-size: 15pt; letter-spacing: 0.01em; }

  .wordmark__role { margin-left: 0; font-size: 9.5pt; }

  .site-footer {
    background: #fff;
    border-top: 1px solid #999;
  }

  .site-footer__inner,
  .site-footer__meta,
  .site-footer__legal { color: #333; }

  .site-footer__meta a { color: #000; }

  main { padding: 1.5rem 0 0; }

  .card,
  .contact-details,
  .credentials { border-color: #bbb; }

  a { color: #000; text-decoration: underline; }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  .pub,
  .tool,
  .card { break-inside: avoid; }

  .todo { background: none; }

  /* --- Self-assessment: print as the completed record ---------------------

     Everything below is scoped to .sa-page (the body class on
     self-assessment.html) so that turning one page into a paper form leaves the
     other six pages on the generic print rules above.

     The printed artifact is the organization's own record, not a saved web
     page: masthead and running-score bar gone, one document identity line, the
     three record fields as a ruled header block, 30 indicators with
     unmistakable ticks, the achieved score band only, and the scope note,
     source, and attribution as fine print at the foot.
     ----------------------------------------------------------------------- */

  .breadcrumb,
  .sa-bar,
  .sa-actions { display: none; }

  .sa-page {
    page: sa-record;
    font-size: 10.25pt;
    line-height: 1.35;
  }

  /* The record header, the instrument, the score, then the fine print. Source
     order puts the standing guidance up front, which is right on screen and
     wrong on a form; ordering the four blocks is the only change. */
  .sa-page main {
    display: flex;
    flex-direction: column;
    max-width: none;
    padding: 0;
  }

  .sa-page .page-head { order: 1; }
  .sa-page .sa { order: 2; }
  .sa-page .sa-results { order: 3; }
  .sa-page main > .prose { order: 4; }

  /* Site chrome, the browser-only privacy note, and the instructions for
     running the exercise: none of it means anything on a finished record. */
  .sa-page .site-header,
  .sa-page .site-footer,
  .sa-page .note,
  .sa-page .lede,
  .sa-page main > .prose > h2,
  .sa-page .sa-guide { display: none; }

  /* Both remaining absolute links are DOIs whose visible text is already the
     URL, so the generic href-in-parentheses rule would print it twice. */
  .sa-page a[href^="http"]::after { content: none; }

  /* --- Document identity --- */

  .sa-page .page-head {
    max-width: none;
    margin: 0 0 0.14in;
    padding-bottom: 0.05in;
    border-bottom: 1.5pt solid #000;
  }

  .sa-page .page-head h1 {
    margin: 0;
    font-size: 17pt;
  }

  .sa-page .page-head .pub__meta {
    margin: 0.03in 0 0;
    color: #000;
    font-size: 8.5pt;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  /* --- Record header block --- */

  .sa-page .sa {
    max-width: none;
    margin: 0;
  }

  .sa-page .sa-record {
    margin: 0 0 0.22in;
    padding: 0 !important;
    border: 0.75pt solid #000 !important;
    break-inside: avoid;
  }

  .sa-page .sa-record legend {
    margin: 0 0 0 0.1in;
    padding: 0 0.06in;
    color: #000;
    font-size: 7pt;
    letter-spacing: 0.14em;
  }

  /* Widths follow how much each field holds: names and roles need the room,
     and the date column is wide enough that a written-out date does not wrap,
     on A4 as well as Letter. */
  .sa-page .sa-record__grid {
    grid-template-columns: 2.2fr 1.75fr 2.9fr;
    gap: 0;
    margin: 0;
  }

  .sa-page .sa-record label {
    padding: 0.04in 0.11in 0.1in;
    border-left: 0.5pt solid #000;
    color: #000;
    font-size: 7pt;
    letter-spacing: 0.09em;
  }

  .sa-page .sa-record label:first-child { border-left: 0; }

  /* The input is replaced by its twin: same value, but it wraps instead of
     clipping to one line, and it prints as writing on a form rather than as a
     form control. Empty, it leaves a space to complete by hand. */
  .sa-page .sa-record input { display: none; }

  .sa-page .sa-record__print {
    display: block;
    min-height: 0.28in;
    margin-top: 0.02in;
    color: #000;
    font-size: 10.5pt;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
  }

  /* --- Domains and indicators --- */

  /* A domain is read as one thing, and its subtotal has to be attached to the
     five indicators it counts, so the block never splits. Keeping the six
     blocks whole costs no pages: the content runs to 3.2 pages either way. */
  .sa-page .sa-domain {
    margin: 0 0 0.24in;
    break-inside: avoid;
  }

  .sa-page .sa-domain legend {
    font-size: 11.5pt;
    break-after: avoid;
  }

  .sa-page .sa-domain__q {
    margin: 0.02in 0 0.07in;
    color: #333;
    font-size: 9pt;
    break-after: avoid;
  }

  .sa-page .sa-list { border-top: 1pt solid #000; }

  .sa-page .sa-item {
    border-bottom: 0.4pt solid #999;
    break-inside: avoid;
  }

  .sa-page .sa-item > label {
    grid-template-columns: 0.2in 0.33in minmax(0, 1fr);
    gap: 0 0.06in;
    padding: 0.055in 0;
  }

  .sa-page .sa-item.is-yes { background: none; }

  .sa-page .sa-item__code {
    padding-top: 0;
    color: #000;
    font-size: 8.5pt;
  }

  .sa-page .sa-item__text { font-size: 9.8pt; }

  .sa-page .sa-item__scp {
    padding-bottom: 0.055in;
    color: #444;
    font-size: 7.5pt;
  }

  /* A tick drawn with a background colour disappears when the reader prints
     with background graphics off, and again on a mono laser. Draw the box and
     the tick with borders: borders are foreground and always print. */
  .sa-page .sa-item input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 9.5pt;
    height: 9.5pt;
    margin: 1.5pt 0 0;
    padding: 0;
    background: none;
    border: 0.75pt solid #000;
    border-radius: 0;
  }

  .sa-page .sa-item input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 1.4pt;
    top: 0.2pt;
    width: 3pt;
    height: 6.2pt;
    border: solid #000;
    border-width: 0 1.5pt 1.5pt 0;
    transform: rotate(40deg);
  }

  .sa-page .sa-subtotal {
    margin: 0.05in 0 0;
    color: #000;
    font-size: 8pt;
    text-align: right;
  }

  .sa-page .sa-subtotal strong { color: #000; font-size: 10.5pt; }

  /* --- Score --- */

  .sa-page .sa-results {
    max-width: none;
    margin: 0;
    padding-top: 0.14in;
    border-top: 1.5pt solid #000;
  }

  .sa-page .sa-results h2 {
    margin: 0 0 0.1in;
    font-size: 13pt;
  }

  /* The two h3s here inherit different families on screen (one serif, one
     sans); on a form they are both section labels, so make them match. */
  .sa-page .sa-results h3 {
    margin: 0.2in 0 0.07in;
    font-family: var(--sans);
    font-size: 8pt;
    font-weight: 700;
    letter-spacing: 0.09em;
    break-after: avoid;
  }

  .sa-page .sa-table {
    font-size: 9.5pt;
    break-inside: avoid;
  }

  /* The subtotals are the record's payload; the reading advice follows them. */
  .sa-page .sa-table__caption {
    caption-side: bottom;
    margin: 0.07in 0 0;
    color: #333;
    font-size: 8pt;
  }

  .sa-page .sa-table th,
  .sa-page .sa-table td {
    padding: 0.04in 0.08in;
    border-bottom: 0.4pt solid #999;
  }

  .sa-page .sa-table thead th {
    border-bottom: 1pt solid #000;
    color: #000;
    font-size: 7pt;
  }

  .sa-page .sa-table tbody th { font-size: 9.5pt; }

  .sa-page .sa-table tfoot th,
  .sa-page .sa-table tfoot td {
    border-top: 1pt solid #000;
    color: #000;
    font-size: 11.5pt;
  }

  /* Printing all four bands leaves the reader to work out which one is theirs.
     Only the achieved band belongs on the record. The :has() guard keeps the
     hand-scoring path intact: with scripting off nothing carries .is-current,
     and all four bands print, which is what a blank form needs. */
  .sa-page .sa-bands:has(.is-current) .sa-band:not(.is-current) { display: none; }

  .sa-page .sa-band {
    margin: 0 0 0.08in;
    padding: 0.09in 0.12in;
    background: none;
    border: 0.75pt solid #000;
    border-left: 3pt solid #000;
    color: #000;
    font-size: 9.5pt;
    break-inside: avoid;
  }

  .sa-page .sa-band__head { margin-bottom: 0.03in; }

  /* Beats .sa-band.is-current .sa-band__score, which is accent-coloured. */
  .sa-page .sa-band.is-current .sa-band__score { color: #000; }

  /* --- Fine print at the foot --- */

  .sa-page main > .prose {
    max-width: none;
    margin-top: 0.2in;
  }

  .sa-page .sa-scoring,
  .sa-page .sa-scp-note {
    margin: 0 0 0.1in;
    color: #222;
    font-size: 8.5pt;
  }

  .sa-page .scope {
    margin: 0 0 0.1in;
    padding: 0.08in 0.11in;
    border: 0.5pt solid #666;
    color: #000;
    font-size: 8.5pt;
    break-inside: avoid;
  }

  .sa-page .scope h3 {
    margin: 0 0 0.02in;
    color: #000;
    font-size: 7pt;
  }

  .sa-page .cite {
    margin: 0;
    padding: 0.08in 0.11in;
    border: 0.5pt solid #999;
    border-left: 2pt solid #000;
    color: #000;
    font-size: 8.5pt;
    break-inside: avoid;
  }

  .sa-page .cite strong { color: #000; font-size: 7pt; }

  .sa-page .disclaimer {
    margin-top: 0.14in;
    padding-top: 0.08in;
    border-top: 0.5pt solid #999;
    color: #222;
    font-size: 8pt;
  }
}