@font-face {
  font-family: "Public Sans";
  src: url("assets/fonts/PublicSans-VariableFont_wght.woff2") format("woff2"),
       url("assets/fonts/PublicSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("assets/fonts/PublicSans-Italic-VariableFont_wght.woff2") format("woff2"),
       url("assets/fonts/PublicSans-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --navy: #042f4f;
  --navy-deep: #021d32;
  --ink: #13191f;
  --muted: #52606b;
  --paper: #eef7f0;
  --mist: #dcefe7;
  --sky: #e7f5f9;
  --clay: #f8e6df;
  --line: #d8e0e5;
  --green: #009a57;
  --orange: #b84224;
  --blue: #006f95;
  --red: #b6292b;
  --yellow: #f4c542;
  --white: #ffffff;
  --shadow: 0 12px 30px rgba(2, 29, 50, 0.10);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  scroll-padding-top: 0;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Public Sans", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
}

/* <picture> is only a wrapper for its <img>; make it layout-transparent so the
   existing `.brand img`, `.standards-media img`, `.feature-media img` rules
   apply exactly as before regardless of the picture element. */
picture {
  display: contents;
}

main > section[id] {
  scroll-margin-top: 3.25rem;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(244, 197, 66, 0.9);
  outline-offset: 3px;
}

button,
input {
  font: inherit;
}

.skip-link {
  background: var(--yellow);
  color: var(--ink);
  font-weight: 800;
  left: 1rem;
  padding: 0.7rem 0.9rem;
  position: fixed;
  top: 1rem;
  transform: translateY(-140%);
  z-index: 70;
}

.skip-link:focus {
  transform: translateY(0);
}

.feedback-banner {
  align-items: center;
  background: var(--yellow);
  color: var(--navy-deep);
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  min-height: 46px;
  padding: 0.48rem 1rem;
  position: sticky;
  top: 0;
  z-index: 45;
}

.feedback-banner strong {
  font-weight: 900;
}

.feedback-banner span {
  color: rgba(2, 29, 50, 0.82);
  white-space: nowrap;
}

.feedback-banner .feedback-email {
  color: var(--navy-deep);
  display: inline;
  font-weight: 700;
  white-space: nowrap;
}

.feedback-banner .feedback-email a {
  color: var(--navy-deep);
  text-decoration: underline;
  text-decoration-color: rgba(2, 29, 50, 0.45);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.feedback-banner .feedback-email a:hover,
.feedback-banner .feedback-email a:focus-visible {
  text-decoration-color: var(--navy-deep);
}

.feedback-banner a {
  color: var(--navy-deep);
  font-weight: 800;
  text-decoration-color: rgba(2, 29, 50, 0.45);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  white-space: nowrap;
}

.feedback-banner a:focus-visible {
  outline-color: var(--navy-deep);
}

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

.noscript {
  background: var(--yellow);
  color: var(--navy-deep);
  font-weight: 800;
  margin: 0;
  padding: 1rem 2rem;
  text-align: center;
}

.hero {
  background:
    linear-gradient(180deg, rgba(2, 29, 50, 0.96) 0%, rgba(2, 29, 50, 0.5) 46%, rgba(2, 29, 50, 0.94) 100%),
    url("assets/images/hero.webp") center / cover no-repeat,
    var(--navy-deep);
  color: var(--white);
  isolation: isolate;
  min-height: 500px;
  overflow: hidden;
  position: relative;
  scroll-margin-top: 3rem;
}

.section-bg {
  height: 100%;
  inset: 0;
  object-fit: cover;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.hero::before {
  content: none;
}

.topbar {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1260px;
  padding: 1.15rem 2rem 0;
  position: relative;
  z-index: 3;
}

.brand {
  align-items: center;
  display: flex;
  gap: 1rem;
  text-decoration: none;
}

.brand img {
  height: 52px;
  width: auto;
}

.brand span {
  color: var(--white);
  font-weight: 800;
  padding: 0;
  text-shadow: 0 2px 8px rgba(2, 29, 50, 0.85);
}

.nav-links {
  align-items: center;
  display: flex;
  gap: 0.2rem;
}

.nav-links-label {
  display: none;
}

.nav-backdrop {
  display: none;
}

.nav-links a,
.site-footer .footer-top-link,
.filter-group button,
.letter-filter button,
.search-row button {
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
}

.nav-links a {
  background: var(--navy-deep);
  color: var(--white);
  font-size: 0.86rem;
  min-height: 38px;
  padding: 0.42rem 0.54rem;
  white-space: nowrap;
}

.nav-links .download-link {
  background: var(--red);
  background-color: var(--red);
  border-color: var(--red);
  color: var(--white);
  padding-inline: 0.68rem;
}

.nav-links .download-link:hover,
.nav-links .download-link:focus-visible {
  background: var(--white);
  color: var(--red);
}

.nav-links a:hover,
.nav-links a:focus-visible {
  background: rgba(255, 255, 255, 0.15);
}

/* Keyboard focus must stay visible (WCAG 2.4.7); the background tint alone is
   ~1.6:1 and fails the 3:1 minimum. Restore the standard high-contrast ring. */
.nav-links a:focus-visible {
  outline: 3px solid rgba(244, 197, 66, 0.9);
  outline-offset: 2px;
}

.nav-toggle {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  display: none;
  height: 46px;
  padding: 0;
  width: 46px;
}

.nav-toggle span {
  background: var(--white);
  display: block;
  height: 2px;
  margin: 6px auto;
  width: 22px;
}

.hero-inner {
  margin: 0 auto;
  max-width: 1260px;
  padding: 5.7rem 2rem 4.4rem;
  position: relative;
  width: 100%;
  z-index: 2;
}

.eyebrow {
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0 0 0.7rem;
}

.eyebrow.dark {
  color: var(--blue);
}

.hero h1 {
  color: var(--white);
  display: block;
  font-size: clamp(3rem, 5.9vw, 4.9rem);
  font-weight: 900;
  line-height: 1;
  margin: 0;
  max-width: 820px;
  padding: 0;
  text-shadow: 0 3px 18px rgba(2, 29, 50, 0.92);
  width: auto;
}

.version {
  background: var(--navy-deep);
  border: 1px solid rgba(255, 255, 255, 0.84);
  color: var(--white);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: inherit;
  margin: 1.35rem 0 0;
  padding: 0.25rem 0.85rem;
  text-decoration: none;
}

.version:hover,
.version:focus-visible {
  background: var(--navy);
  border-color: var(--white);
  outline: 3px solid rgba(244, 197, 66, 0.9);
  outline-offset: 2px;
}

/* Changelog modal — reuses the intro-modal shell, with release-note rhythm */
/* Match the intro modal: its lead-in gets margin-top:0 from .welcome-prose,
   so zero the changelog lead-in's default top margin too. */
.changelog-body > :first-child {
  margin-top: 0;
}

.changelog-release {
  margin: 0 0 1.7rem;
}

.changelog-release:last-child {
  margin-bottom: 0;
}

.changelog-release h3 {
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  font-size: 1.35rem;
  margin: 0 0 0.5rem;
  padding-bottom: 0.4rem;
}

.changelog-date {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.changelog-release h4 {
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  margin: 1.05rem 0 0.4rem;
  text-transform: uppercase;
}

.changelog-release ul {
  margin: 0 0 0.4rem;
  padding-left: 1.15rem;
}

.changelog-release li {
  line-height: 1.6;
  margin-bottom: 0.45rem;
}

.changelog-release li:last-child {
  margin-bottom: 0;
}

.hero-copy {
  color: var(--white);
  font-size: 1.15rem;
  max-width: 720px;
  padding: 0;
  text-shadow: 0 2px 10px rgba(2, 29, 50, 0.9);
  width: fit-content;
}

.welcome-prose {
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.52;
}

.welcome-prose p {
  margin: 0 0 0.72rem;
}

.consistency-callout {
  border-left: 4px solid var(--green);
  color: var(--navy);
  margin: 1.2rem 0;
  padding: 0.1rem 0 0.1rem 1.15rem;
}

.consistency-callout strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.intro-modal[hidden] {
  display: none;
}

.intro-modal {
  display: grid;
  left: 0;
  right: 0;
  top: 0;
  /* Size the centring box to the *visible* viewport, not the large (layout)
     viewport. `100vh` includes the area behind the browser's toolbars, which
     pushed the centred panel — and its sticky "View the guide" footer — down
     behind the chrome on phones. `dvh` tracks the visible area per device, so
     the modal fits naturally; `100vh` stays as the fallback for old browsers. */
  height: 100vh;
  height: 100dvh;
  padding: 1.5rem;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  place-items: center;
  position: fixed;
  z-index: 90;
}

.intro-modal-backdrop {
  background: rgba(2, 29, 50, 0.72);
  inset: 0;
  position: absolute;
}

.intro-modal-panel {
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(2, 29, 50, 0.34);
  max-height: min(760px, calc(100vh - 3rem));
  max-height: min(760px, calc(100dvh - 3rem));
  max-width: 820px;
  overflow: auto;
  position: relative;
  width: min(100%, 820px);
}

.intro-modal-head {
  align-items: start;
  background: var(--white);
  border-top: 8px solid var(--green);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.2rem 1.3rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1;
}

.intro-modal-head .eyebrow {
  margin-bottom: 0.3rem;
}

.intro-modal-head h2 {
  color: var(--navy);
  font-size: 1.9rem;
  line-height: 1.1;
  margin: 0;
}

.intro-close {
  align-items: center;
  background: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.6rem;
  font-weight: 800;
  height: 44px;
  justify-content: center;
  line-height: 1;
  width: 44px;
}

.intro-close:hover,
.intro-close:focus-visible {
  background: var(--white);
  color: var(--navy);
  outline: 3px solid rgba(244, 197, 66, 0.9);
}

.intro-modal-body {
  padding: 1.4rem 1.6rem 1.5rem;
}

/* Intro modal — editorial polish: lead-in, comfortable rhythm, proper sign-off */
.intro-modal-body p {
  line-height: 1.62;
  margin-bottom: 0.95rem;
}

.intro-modal-body > p:first-child {
  color: var(--navy);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.42;
  margin-bottom: 0.95rem;
}

.intro-modal-body .consistency-callout {
  margin: 1.5rem 0;
}

.intro-modal-body .signature {
  gap: 0.1rem;
  margin: 0.95rem 0 0;
}

.intro-modal-body .signature span {
  color: var(--navy);
  font-size: 1em;
  font-weight: 700;
}

.intro-modal-body .signature strong {
  color: var(--ink);
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0;
}

.intro-modal-actions {
  background: var(--white);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  padding: 0.9rem 1.25rem 1rem;
  position: sticky;
  bottom: 0;
}

.intro-contents-close {
  background: var(--navy);
  border: 0;
  border-radius: 6px;
  color: var(--white);
  cursor: pointer;
  font-weight: 850;
  min-height: 42px;
  padding: 0.65rem 0.95rem;
}

.intro-contents-close:hover,
.intro-contents-close:focus-visible {
  background: var(--blue);
  outline: 3px solid rgba(244, 197, 66, 0.9);
}

body.modal-open {
  overflow: hidden;
}

.search-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 6px solid var(--green);
  border-radius: 8px;
  box-shadow: var(--shadow);
  color: var(--ink);
  margin: 0 auto;
  max-width: 760px;
  overflow: hidden;
  padding: 0.85rem 1rem 0.95rem;
  position: relative;
  width: 100%;
}

.search-panel > * {
  position: relative;
  z-index: 1;
}

.search-panel > .visually-hidden {
  position: absolute;
}

.search-panel label {
  color: var(--navy);
  display: block;
  font-size: 0.86rem;
  font-weight: 850;
  margin-bottom: 0.25rem;
}

.search-hint {
  color: var(--muted);
  font-size: 0.92rem;
  margin: -0.1rem 0 0.55rem;
}

.search-row {
  align-items: center;
  display: flex;
  gap: 0.65rem;
}

.search-row input {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  flex: 1;
  font-size: 1rem;
  min-height: 52px;
  min-width: 0;
  padding: 0.58rem 0.85rem;
}

.search-row input:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(0, 111, 149, 0.22);
}

.search-row button {
  background: var(--navy);
  color: var(--white);
  cursor: pointer;
  min-height: 44px;
  padding: 0.58rem 0.85rem;
}

.search-row button:disabled {
  display: none;
}

.quick-strip {
  background: var(--paper);
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
  max-width: 1180px;
  padding: 0.75rem 2rem 1.25rem;
  position: relative;
  z-index: 2;
}

.quick-strip article {
  background: var(--white);
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 1rem;
}

.quick-strip article:nth-child(2) {
  border-left-color: var(--blue);
}

.quick-strip article:nth-child(3) {
  border-left-color: var(--blue);
}

.quick-strip span {
  color: var(--navy);
  display: block;
  font-size: 0.84rem;
  font-weight: 900;
}

.quick-strip p {
  margin: 0.45rem 0 0;
}

.search-band {
  background: linear-gradient(180deg, rgba(238, 247, 240, 0) 0, var(--paper) 3rem, var(--paper) 100%);
  margin-top: -3rem;
  padding: 0 2rem 1rem;
  position: relative;
  z-index: 4;
}

.search-band .search-panel {
  max-width: 1180px;
}

.search-results {
  margin: 1rem auto 0;
  max-width: 1180px;
}

.search-results:empty {
  display: none;
}

.search-results-head {
  align-items: center;
  color: var(--navy);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.search-results-head span,
.search-results-empty {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.search-results-empty {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(2, 29, 50, 0.06);
  margin: 0;
  padding: 0.85rem 1rem;
}

.search-result-list {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.search-result-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  display: block;
  padding: 0.85rem 1rem;
  text-align: left;
}

.search-result-card:hover,
.search-result-card:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 10px 25px rgba(2, 29, 50, 0.08);
}

/* Solid, high-contrast focus ring on white (the 0.18-alpha outline was ~1.3:1). */
.search-result-card:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.search-result-card span {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 850;
  margin-bottom: 0.25rem;
}

.search-result-card strong {
  color: var(--navy);
  display: block;
  font-size: 1rem;
}

.search-result-card p {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0.35rem 0 0;
}

.contents-band,
.guide-band,
.appendix-band,
.checklist-band,
.feedback-bottom-band {
  padding: 4.5rem 2rem;
}

.guide-band {
  background: var(--sky);
  padding-top: 3.5rem;
}

.contents-band {
  background:
    linear-gradient(90deg, rgba(238, 247, 240, 0.96) 0%, rgba(238, 247, 240, 0.84) 40%, rgba(238, 247, 240, 0.42) 74%, rgba(4, 47, 79, 0.2) 100%),
    url("assets/images/contents-firefighters.webp") center 28% / cover no-repeat,
    var(--paper);
  border-top: 1px solid rgba(4, 47, 79, 0.08);
  isolation: isolate;
  min-height: 470px;
  overflow: hidden;
  padding-block: 4.4rem;
  position: relative;
}

.contents-band::before {
  content: none;
}

.contents-band > * {
  position: relative;
  z-index: 1;
}

.contents-head p {
  color: var(--muted);
  font-weight: 650;
  margin: 0.45rem 0 0;
  max-width: 580px;
}

.contents-head {
  background: var(--paper);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(2, 29, 50, 0.08);
  margin-inline: auto;
  padding: 0.65rem 0.85rem;
  width: fit-content;
}

.section-head {
  margin: 0 auto 1.8rem;
  max-width: 1180px;
}

.section-head.compact {
  margin-bottom: 0.8rem;
}

.section-head h2,
.appendix-head h2,
.feature-copy h2,
.checklist-copy h2,
.standards-copy h2,
.feedback-panel h2 {
  color: var(--navy);
  font-size: 2.2rem;
  line-height: 1.12;
  margin: 0;
}

.contents-layout {
  display: block;
  margin: 0 auto;
  max-width: 1260px;
}

.contents-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.contents-card {
  background: var(--white);
  border-top: 7px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(2, 29, 50, 0.12);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 132px;
  overflow: hidden;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.contents-card:hover,
.contents-card:focus-visible {
  box-shadow: 0 18px 38px rgba(2, 29, 50, 0.18);
  transform: translateY(-2px);
}

/* Solid, high-contrast focus ring on white (the 0.2-alpha outline was ~1.3:1). */
.contents-card:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.contents-card span {
  color: var(--muted);
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
}

.contents-card strong {
  color: var(--navy);
  display: block;
  font-size: 1.18rem;
  line-height: 1.25;
}

.contents-card small {
  color: var(--muted);
  display: block;
  margin-top: 0.55rem;
}

.standards-band {
  align-items: stretch;
  background: var(--white);
  display: grid;
  grid-template-columns: minmax(640px, 1.15fr) minmax(420px, 0.85fr);
}

.standards-media {
  min-height: 620px;
  order: 2;
  overflow: hidden;
}

.standards-media img {
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  width: 100%;
}

.standards-copy {
  align-self: center;
  order: 1;
  padding: 4rem clamp(2rem, 4vw, 4.5rem);
}

.standards-copy > p:not(.eyebrow) {
  color: var(--ink);
  font-size: 1.04rem;
  max-width: 860px;
}

.standards-alert {
  background: rgba(182, 41, 43, 0.09);
  border: 1px solid rgba(182, 41, 43, 0.22);
  border-left: 6px solid var(--red);
  border-radius: 8px;
  color: var(--navy);
  font-weight: 900;
  margin: 1rem 0;
  max-width: 980px;
  padding: 0.9rem 1rem;
}

.standards-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.1rem 0 1.25rem;
}

.standards-practice {
  display: grid;
  gap: 1.3rem;
  margin: 1.25rem 0 0.4rem;
}

.standards-practice-group h3 {
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0 0 0.6rem;
  text-transform: uppercase;
}

.standards-practice-group ul {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  max-width: 980px;
  padding: 0;
}

.standards-practice-group li {
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.5;
  padding-left: 1.45rem;
  position: relative;
}

.standards-practice-group li::before {
  background: var(--navy);
  border-radius: 50%;
  content: "";
  height: 0.4rem;
  left: 0.15rem;
  position: absolute;
  top: 0.62em;
  width: 0.4rem;
}

.standards-links a,
.feedback-links a {
  background: var(--navy);
  border-radius: 6px;
  color: var(--white);
  font-weight: 850;
  padding: 0.62rem 0.8rem;
  text-decoration: none;
}

.standards-links a:hover,
.standards-links a:focus-visible,
.feedback-links a:hover,
.feedback-links a:focus-visible {
  background: var(--blue);
  outline: 3px solid rgba(244, 197, 66, 0.9);
}

.standards-requirements {
  counter-reset: none;
  display: grid;
  gap: 0.65rem;
  list-style: none;
  margin: 0;
  max-width: 980px;
  padding: 0;
}

.standards-requirements li {
  background: var(--paper);
  border: 1px solid rgba(4, 47, 79, 0.1);
  border-left: 5px solid var(--green);
  border-radius: 8px;
  align-items: center;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  padding: 0.85rem 1rem;
}

.standards-requirements strong {
  align-items: center;
  background: var(--navy);
  border-radius: 6px;
  color: var(--white);
  display: inline-flex;
  font-size: 0.98rem;
  font-weight: 800;
  height: 2.2rem;
  justify-content: center;
  width: 2.2rem;
}

.standards-requirements span {
  color: var(--ink);
}

.standards-requirements a {
  color: var(--navy);
  font-weight: 850;
  text-decoration-color: rgba(0, 111, 149, 0.55);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.feature-band {
  align-items: stretch;
  background: var(--clay);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  min-height: 600px;
}

.feature-media picture,
.feature-media img {
  height: 100%;
  width: 100%;
}

.feature-media img {
  object-fit: cover;
  object-position: 30% center;
}

.feature-copy {
  align-self: center;
  padding: 4rem 2rem;
}

.word-table {
  background: var(--white);
  border-radius: 8px;
  box-shadow: var(--shadow);
  margin-top: 1.5rem;
  overflow: hidden;
}

.word-table header,
.word-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 0.9fr 1.1fr;
}

.word-table header {
  background: var(--orange);
  color: var(--white);
  font-weight: 900;
  padding: 0.75rem 1rem;
}

.word-row {
  border-bottom: 1px solid #f0c5b6;
  padding: 0.62rem 1rem;
}

.word-row:last-child {
  border-bottom: 0;
}

.word-row strong {
  color: var(--navy);
}


.guide-layout {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 320px minmax(0, 1fr);
  margin: 0 auto;
  max-width: 1260px;
}

.guide-layout > * {
  min-width: 0;
}

.guide-side {
  align-self: start;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(4, 47, 79, 0.08);
  border-radius: 8px;
  padding: 1rem;
  position: sticky;
  top: 4.5rem;
}

.side-title {
  color: var(--navy);
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.guide-nav-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0;
  margin: 1rem 0 0.5rem;
}

.guide-nav-label:first-of-type {
  margin-top: 0;
}

.topic-label {
  border-top: 1px solid rgba(4, 47, 79, 0.12);
  padding-top: 1rem;
}

.filter-group {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.filter-group button,
.letter-filter button {
  background: var(--white);
  border-color: var(--line);
  color: var(--navy);
  cursor: pointer;
  min-height: 44px;
  padding: 0.5rem 0.72rem;
}

.letter-filter button {
  min-width: 44px;
}

.filter-group button {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  min-height: 44px;
  min-width: 0;
  text-align: left;
}

.filter-name {
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: anywhere;
}

.filter-count {
  align-items: center;
  background: var(--sky);
  border: 1px solid rgba(4, 47, 79, 0.12);
  border-radius: 999px;
  color: var(--navy);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 850;
  justify-content: center;
  margin-top: 0.05rem;
  min-width: 2rem;
  padding: 0.12rem 0.5rem;
}

.filter-group button.is-active,
.letter-filter button.is-active {
  background: var(--navy);
  border-color: var(--navy);
  border-width: 2px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
  color: var(--white);
}

.filter-group button.is-active .filter-count {
  background: var(--white);
  border-color: rgba(255, 255, 255, 0.45);
}

.side-nav {
  border-left: 3px solid var(--line);
  display: grid;
  gap: 0.15rem;
  max-height: 62vh;
  overflow: auto;
  padding-left: 0.75rem;
}

.side-nav a {
  align-items: center;
  border-radius: 6px;
  color: var(--navy);
  display: flex;
  font-size: 0.88rem;
  min-height: 42px;
  line-height: 1.35;
  padding: 0.42rem 0.5rem;
  text-decoration: none;
}

.side-nav a:hover,
.side-nav a:focus-visible,
.side-nav a.is-active {
  background: rgba(0, 111, 149, 0.12);
  box-shadow: inset 4px 0 0 var(--blue);
}

/* Keyboard focus needs an indicator distinct from hover/active (which share the
   inset bar + tint), so a focused link is not mistaken for the active one. */
.side-nav a:focus-visible {
  outline: 3px solid rgba(244, 197, 66, 0.9);
  outline-offset: -3px;
}

.side-empty {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.4rem 0.5rem;
}

/* Floating "current topic" indicator — only shown on tablet/mobile, where the
   sticky sidebar collapses to the top of the guide and scrolls away. It tracks
   the topic currently in view (scroll-spy) and taps back to the topic picker. */
.topic-pin {
  align-items: center;
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  bottom: 1rem;
  box-shadow: 0 14px 34px rgba(2, 29, 50, 0.32);
  color: var(--white);
  cursor: pointer;
  display: none;
  gap: 0.7rem;
  max-width: calc(100vw - 2rem);
  opacity: 0;
  padding: 0.55rem 0.7rem 0.55rem 0.95rem;
  pointer-events: none;
  position: fixed;
  right: 1rem;
  transform: translateY(0.6rem);
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 42;
}

.topic-pin.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.topic-pin-text {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  text-align: left;
}

.topic-pin-eyebrow {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.topic-pin-name {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-pin-pos {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 0.26rem 0.6rem;
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .topic-pin {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topic-pin {
    transition: opacity 0.22s ease;
    transform: none;
  }
  .topic-pin.is-visible {
    transform: none;
  }
}

.results-line {
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 1rem;
}

.guide-helper {
  color: var(--muted);
  font-weight: 650;
  margin: -0.35rem 0 0.85rem;
  max-width: 720px;
}

.page-stack {
  display: grid;
  gap: 1rem;
}

.page-card {
  --accent: var(--blue);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(4, 47, 79, 0.1);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
  padding: 1.25rem;
  position: relative;
  scroll-margin-top: 3rem;
}

.page-card::after {
  content: none;
}

.page-meta,
.glossary-term span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
}

.page-card h3 {
  color: var(--navy);
  font-size: 1.55rem;
  line-height: 1.22;
  margin: 0.25rem 0 1rem;
  max-width: 760px;
  overflow-wrap: anywhere;
  position: relative;
  z-index: 1;
}

.prose {
  max-width: 820px;
  overflow-wrap: anywhere;
  position: relative;
  z-index: 1;
}

.prose h4 {
  color: var(--accent);
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 1.2rem 0 0.35rem;
}

.term-subsection {
  border-top: 1px solid rgba(4, 47, 79, 0.12);
  margin-top: 1rem;
  padding-top: 1rem;
}

.term-subsection:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.term-subsection h4 {
  margin-top: 0;
}

.prose p {
  margin: 0 0 0.85rem;
}

.prose ul {
  margin: 0.2rem 0 1rem;
  padding-left: 1.25rem;
}

.prose li {
  margin: 0.24rem 0;
}

.question-box {
  background: rgba(244, 197, 66, 0.16);
  border: 1px solid rgba(244, 197, 66, 0.55);
  border-left: 5px solid var(--yellow);
  border-radius: 8px;
  margin: 1rem 0 1.15rem;
  padding: 1rem 1.1rem;
}

.question-box strong {
  color: var(--navy);
  display: block;
  margin-bottom: 0.35rem;
}

.question-box p {
  margin: 0.35rem 0 0;
}

.question-box p:first-of-type {
  color: var(--navy);
  font-weight: 800;
}

.rule-box {
  background: rgba(0, 111, 149, 0.08);
  border: 1px solid rgba(0, 111, 149, 0.18);
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  margin: 1rem 0 1.15rem;
  padding: 1rem 1.1rem;
}

.rule-box strong {
  color: var(--navy);
  display: block;
  margin-bottom: 0.3rem;
}

.rule-box p {
  margin: 0;
}

.rule-box.ampersand-rule,
.rule-box.operational-rule {
  background: rgba(244, 197, 66, 0.13);
  border-color: rgba(244, 197, 66, 0.48);
  border-left-color: var(--yellow);
}

.rule-box.attribution-rule {
  background: rgba(0, 154, 87, 0.1);
  border-color: rgba(0, 154, 87, 0.24);
  border-left-color: var(--green);
}

.hyphen-list {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1rem 0 1.15rem;
}

.hyphen-item {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 111, 149, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 0.15rem 0.7rem;
  grid-template-columns: auto 1fr;
  padding: 0.8rem 0.9rem;
}

.hyphen-item span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hyphen-item strong,
.hyphen-item em {
  color: var(--navy);
  font-style: normal;
}

.hyphen-item em {
  color: var(--red);
  text-decoration: line-through;
  text-decoration-thickness: 0.08em;
}

.reference-list {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0 1.15rem;
}

.reference-item {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(4, 47, 79, 0.1);
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  padding: 0.85rem 1rem;
}

.reference-item span {
  color: var(--blue);
  display: block;
  font-size: 0.82rem;
  font-weight: 900;
  margin-bottom: 0.25rem;
}

.reference-item p {
  margin: 0;
}

.prose .word-list-box {
  background: rgba(0, 111, 149, 0.08);
  border: 1px solid rgba(0, 111, 149, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 0.35rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style-position: inside;
  margin-top: 0.75rem;
  padding: 1rem;
}

.page-titles .prose,
.page-websites-and-email-addresses .prose,
.common-terms-card .prose {
  max-width: none;
}

.page-titles .callout.note {
  background: rgba(0, 111, 149, 0.1);
  border-left-color: var(--blue);
}

/* Common terms topics render like the Conventions cards: clean prose with a
   coloured (here red, from the card accent) sub-heading per topic, separated by
   spacing rather than tinted boxes. The breakdown into topics stays clear via
   the h4 headings, matching the rest of the guide. */
.common-terms-card .term-subsection {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-top: 1.6rem;
  padding: 0;
}

.common-terms-card .term-subsection:first-of-type {
  margin-top: 0;
}

.signature {
  color: var(--navy);
  display: grid;
  gap: 0.1rem;
  margin-top: 1rem;
}

.signature span,
.signature strong {
  font-weight: 850;
}

.callout {
  background: color-mix(in srgb, var(--accent) 12%, #ffffff);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  margin: 1rem 0 1.15rem;
  padding: 1rem 1.1rem;
}

.callout:first-child {
  margin-top: 0;
}

.callout.further-guidance {
  background: var(--white);
  border: 1px solid rgba(0, 111, 149, 0.18);
  border-left: 5px solid var(--blue);
  color: var(--ink);
}

.callout.note {
  background: rgba(0, 111, 149, 0.1);
}

.callout strong {
  color: var(--navy);
  display: block;
  margin-bottom: 0.2rem;
}

.callout p {
  margin: 0;
}

.prose a {
  color: var(--navy);
  font-weight: 800;
  text-decoration-color: rgba(0, 111, 149, 0.55);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.prose a:hover {
  color: var(--blue);
}

/* Don't rely on colour alone for focus (WCAG 2.4.7 / 1.4.1) — keep a ring. */
.prose a:focus-visible {
  color: var(--blue);
  outline: 3px solid rgba(244, 197, 66, 0.9);
  outline-offset: 2px;
}

.inline-word-table {
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, #ffffff);
  border-radius: 8px;
  margin: 1rem 0;
  overflow: hidden;
}

.inline-word-table header,
.inline-word-table .word-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 0.9fr 1.1fr;
}

.inline-word-table header {
  background: var(--accent);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 900;
  padding: 0.65rem 0.85rem;
}

.inline-word-table .word-row {
  border-bottom: 1px solid rgba(4, 47, 79, 0.08);
  padding: 0.58rem 0.85rem;
}

.inline-word-table .word-row:last-child {
  border-bottom: 0;
}

.badge-line {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  font-weight: 850;
  margin: 0.8rem 0 0.35rem;
}

.badge {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.8rem;
  height: 1.6rem;
  justify-content: center;
  min-width: 1.6rem;
  padding: 0 0.55rem;
  position: relative;
}

.badge.correct {
  background: #00683b;
  color: var(--white);
}

.badge.correct::before {
  border: solid currentColor;
  border-width: 0 0.16rem 0.16rem 0;
  content: "";
  height: 0.72rem;
  transform: rotate(45deg) translate(-0.02rem, -0.06rem);
  width: 0.36rem;
}

.badge.incorrect {
  background: var(--red);
  color: var(--white);
}

.badge.incorrect::before,
.badge.incorrect::after {
  background: currentColor;
  content: "";
  height: 0.14rem;
  position: absolute;
  width: 0.82rem;
}

.badge.incorrect::before {
  transform: rotate(45deg);
}

.badge.incorrect::after {
  transform: rotate(-45deg);
}

mark {
  background: rgba(244, 197, 66, 0.55);
  border-radius: 3px;
  color: inherit;
  padding: 0.02rem 0.12rem;
}

.appendix-band {
  background: var(--paper);
}

.appendix-head {
  align-items: start;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(4, 47, 79, 0.08);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(2, 29, 50, 0.08);
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  margin: 0 auto 1.6rem;
  max-width: 1260px;
  padding: 1.25rem;
}

.appendix-head p:not(.eyebrow) {
  color: var(--ink);
  font-size: 1.04rem;
  font-weight: 400;
  margin: 0.8rem 0 0;
  max-width: 680px;
}

.appendix-guidance {
  margin: 1.6rem auto 0;
  max-width: 1260px;
}

.appendix-guidance .callout {
  box-shadow: 0 8px 20px rgba(2, 29, 50, 0.06);
  margin-bottom: 0;
  padding: 0.9rem 1rem;
}

.appendix-guidance .callout strong {
  color: var(--blue);
  font-size: 0.98rem;
  margin-bottom: 0.3rem;
}

.appendix-guidance .callout p {
  color: var(--navy);
  font-size: 0.98rem;
}

.letter-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
  max-width: 560px;
}

.appendix-tools {
  display: grid;
  gap: 0.75rem;
  justify-items: end;
}

.appendix-status {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  text-align: right;
}

.glossary-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 1fr;
  margin: 0 auto;
  max-width: 1260px;
}

.glossary-term {
  background: var(--white);
  border: 1px solid rgba(4, 47, 79, 0.08);
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  box-shadow: none;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr);
  min-height: 0;
  padding: 0.9rem 1rem;
  scroll-margin-top: 3rem;
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.glossary-term.is-highlighted {
  box-shadow: 0 0 0 4px rgba(244, 197, 66, 0.45), 0 16px 30px rgba(2, 29, 50, 0.14);
  transform: translateY(-2px);
}

.glossary-term h3 {
  color: var(--navy);
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0.25rem 0 0;
}

.glossary-term p {
  margin: 0;
}

.glossary-word {
  border-right: 1px solid rgba(4, 47, 79, 0.12);
  padding-right: 0.8rem;
}

.checklist-band {
  background: var(--navy-deep);
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.checklist-band::before {
  background: linear-gradient(90deg, rgba(2, 29, 50, 0.78) 0%, rgba(2, 29, 50, 0.42) 48%, rgba(238, 247, 240, 0.9) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.checklist-bg {
  opacity: 0.48;
}

.checklist-wrap {
  display: grid;
  gap: 2rem;
  grid-template-columns: 0.75fr 1.25fr;
  margin: 0 auto;
  max-width: 1180px;
  position: relative;
  z-index: 1;
}

.checklist-copy h2,
.checklist-copy .eyebrow {
  color: var(--white);
}

.checklist-copy {
  background: transparent;
  border-radius: 0;
  padding: 0;
  text-shadow: 0 2px 10px rgba(2, 29, 50, 0.9);
}

.checklist-copy p {
  max-width: 460px;
}

.checklist-note {
  color: var(--white);
  font-size: 0.94rem;
  font-weight: 700;
}

.checklist {
  display: grid;
  gap: 0.65rem;
}

.check-item {
  align-items: start;
  background: var(--white);
  border-left: 5px solid var(--yellow);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: auto 1fr;
  padding: 0.85rem 1rem;
}

.check-item input {
  accent-color: var(--green);
  height: 1.1rem;
  margin-top: 0.25rem;
  width: 1.1rem;
}

.check-item span {
  font-weight: 500;
}

.clear-checklist {
  align-self: start;
  background: var(--navy-deep);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  color: var(--white);
  cursor: pointer;
  font-weight: 800;
  grid-column: 2;
  justify-self: start;
  padding: 0.65rem 0.95rem;
}

.clear-checklist:hover,
.clear-checklist:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  outline: 3px solid rgba(244, 197, 66, 0.35);
}

.feedback-bottom-band {
  background:
    linear-gradient(90deg, rgba(238, 247, 240, 0.96), rgba(231, 245, 249, 0.94)),
    var(--paper);
  border-top: 1px solid rgba(4, 47, 79, 0.08);
}

.feedback-panel {
  background: var(--white);
  border: 1px solid rgba(4, 47, 79, 0.1);
  border-left: 7px solid var(--green);
  border-radius: 8px;
  box-shadow: var(--shadow);
  margin: 0 auto;
  max-width: 980px;
  padding: 1.5rem;
}

.feedback-panel p:not(.eyebrow) {
  margin: 0.9rem 0 0;
  max-width: 780px;
}

.feedback-panel p a {
  color: var(--navy);
  font-weight: 850;
  text-decoration-color: rgba(0, 111, 149, 0.55);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.feedback-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.site-footer {
  background: var(--navy-deep);
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.3rem 2rem;
}

.site-footer .site-footer-main {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.site-footer div {
  display: grid;
  gap: 0.2rem;
}

.site-footer span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}

.footer-brand-link {
  color: var(--white);
  font-weight: 800;
  text-decoration: none;
}

.footer-brand-link:hover,
.footer-brand-link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.18em;
}

.site-footer .footer-top-link {
  color: var(--white);
  padding: 0.55rem 0.85rem;
}

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  padding-top: 1.1rem;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.85rem;
  text-decoration: none;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
}

@media (max-width: 1080px) {
  .hero h1 {
    font-size: 4.2rem;
  }

  .glossary-grid {
    grid-template-columns: 1fr;
  }

  .contents-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .standards-band {
    grid-template-columns: 1fr;
  }

  .standards-media {
    min-height: 420px;
  }

  .feature-band {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .feature-media img {
    aspect-ratio: 16 / 9;
  }

  .guide-layout {
    grid-template-columns: 1fr;
  }

  .guide-side {
    background: var(--sky);
    border: 0;
    border-radius: 0;
    padding: 0.2rem 0 1.25rem;
    position: static;
  }

  .side-nav {
    border-left: 0;
    display: flex;
    gap: 0.45rem;
    min-width: 0;
    max-height: none;
    overflow-x: auto;
    padding: 0 0 0.45rem;
    width: 100%;
  }

  .side-nav a {
    background: var(--white);
    border: 1px solid var(--line);
    flex: 0 0 auto;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .side-nav a.is-active {
    border-color: var(--blue);
  }

  .filter-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .topbar {
    padding: 0.9rem 1rem 0;
  }

  .nav-toggle {
    display: block;
    position: relative;
    z-index: 47;
  }

  /* The hero is an isolated stacking context with `overflow: hidden`, which
     would otherwise trap the fixed menu and its backdrop below later page
     content. Lift the whole context above the page while the menu is open so
     the backdrop reliably covers — and blocks taps to — everything behind it.
     Switching overflow to visible while open is essential for in-app browsers
     (LinkedIn, iOS WebViews): WebKit clips `position: fixed` descendants to an
     `overflow: hidden` ancestor, which made the backdrop stop short of the page
     below and the menu scroll away with the page instead of staying fixed. */
  body.nav-open .hero {
    overflow: visible;
    z-index: 50;
  }

  /* Full-screen backdrop: closes the menu on tap and blocks taps from
     reaching the page content behind the (fixed) menu panel. */
  .nav-backdrop {
    background: rgba(2, 29, 50, 0.55);
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 40;
  }

  .nav-backdrop.is-open {
    display: block;
  }

  .nav-links {
    background: var(--navy-deep);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(2, 29, 50, 0.4);
    display: none;
    left: 1rem;
    max-height: calc(100vh - 7.6rem);
    max-height: calc(100dvh - 7.6rem);
    overflow-y: auto;
    padding: 0.8rem;
    position: fixed;
    right: 1rem;
    top: 6.7rem;
    z-index: 46;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links.is-open {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-links-label {
    color: rgba(255, 255, 255, 0.62);
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    grid-column: 1 / -1;
    letter-spacing: 0.04em;
    margin: 0.1rem 0 0.1rem;
    text-transform: uppercase;
  }

  .nav-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.7rem 0.7rem;
    text-align: center;
    white-space: normal;
  }

  /* Separate the PDF download from the in-page section links so it is not
     mistaken for (or accidentally tapped instead of) a section button. */
  .nav-links .download-link {
    grid-column: 1 / -1;
    margin-top: 0.55rem;
    padding-block: 0.85rem;
    position: relative;
  }

  .nav-links .download-link::before {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    content: "";
    inset: -0.55rem 0 auto;
    position: absolute;
  }

  body.nav-open {
    overflow: hidden;
  }
}

@media (max-width: 780px) {
  .brand img {
    height: 46px;
  }

  .brand span {
    display: none;
  }

  .hero {
    background-position: 42% center;
    min-height: 0;
  }

  .hero-inner {
    padding: 2.4rem 1rem 1.8rem;
  }

  .hero h1 {
    font-size: 3.05rem;
  }

  .version {
    margin: 1rem 0 0;
    position: static;
    font-size: 0.88rem;
  }

  .hero h1 .wide-line {
    display: none;
  }

  .hero h1 .mobile-line {
    display: block;
  }

  .hero-copy {
    font-size: 1rem;
    line-height: 1.45;
    max-width: calc(100vw - 2rem);
    overflow-wrap: anywhere;
  }

  .search-panel {
    max-width: calc(100vw - 2rem);
    width: calc(100vw - 2rem);
  }

  .search-row {
    align-items: stretch;
    flex-direction: column;
  }

  .quick-strip {
    gap: 0.65rem;
    grid-template-columns: 1fr;
    margin-top: 0;
    padding: 0.25rem 1rem 0.8rem;
  }

  .quick-strip article {
    padding: 0.85rem 1rem;
  }

  .quick-strip p {
    font-size: 0.96rem;
    line-height: 1.48;
  }

  .welcome-prose {
    font-size: 1rem;
  }

  .intro-modal {
    padding: 0.8rem;
  }

  .intro-modal-panel {
    max-height: calc(100vh - 1.6rem);
    max-height: calc(100dvh - 1.6rem);
  }

  .intro-modal-head {
    padding: 1rem;
  }

  .intro-modal-head h2 {
    font-size: 1.55rem;
  }

  .intro-modal-body {
    padding: 1rem;
  }

  .intro-modal-actions {
    padding: 0.8rem 1rem 1rem;
  }

  .intro-contents-close {
    width: 100%;
  }

  .search-band {
    margin-top: -1.35rem;
    padding: 0 1rem 0.65rem;
  }

  .search-result-list {
    grid-template-columns: 1fr;
  }

  .contents-band,
  .guide-band,
  .appendix-band,
  .checklist-band,
  .feedback-bottom-band {
    padding: 3rem 1rem;
  }

  .section-head h2,
  .appendix-head h2,
  .feature-copy h2,
  .checklist-copy h2,
  .standards-copy h2,
  .feedback-panel h2 {
    font-size: 1.7rem;
  }

  .glossary-grid,
  .standards-band,
  .feature-band,
  .checklist-wrap {
    grid-template-columns: 1fr;
  }

  .feedback-banner {
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.92rem;
    justify-content: center;
    line-height: 1.35;
    text-align: center;
  }

  .contents-band {
    background:
      linear-gradient(180deg, rgba(238, 247, 240, 0.98) 0%, rgba(238, 247, 240, 0.78) 46%, rgba(4, 47, 79, 0.22) 100%),
      url("assets/images/contents-firefighters.webp") center 30% / cover no-repeat,
      var(--paper);
    min-height: 470px;
    padding-block: 2.7rem;
  }

  .contents-band::before {
    content: none;
  }

  .contents-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: 0;
    overflow: visible;
    padding: 0;
  }

  .contents-card {
    min-height: 112px;
    padding: 0.85rem;
  }

  .feature-band {
    min-height: 0;
  }

  .standards-media {
    min-height: 0;
    order: 1;
  }

  .standards-media img {
    aspect-ratio: 16 / 10;
  }

  .standards-copy {
    order: 2;
    padding: 2.5rem 1rem;
  }

  .standards-requirements li {
    gap: 0.7rem;
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .feature-media img {
    aspect-ratio: 16 / 10;
  }

  .feature-copy {
    padding: 2.5rem 1rem;
  }

  .word-table header,
  .word-row,
  .inline-word-table header,
  .inline-word-table .word-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .prose .word-list-box {
    grid-template-columns: 1fr;
  }

  .hyphen-list {
    grid-template-columns: 1fr;
  }

  .appendix-head {
    align-items: start;
    flex-direction: column;
  }

  .letter-filter {
    justify-content: flex-start;
  }

  .appendix-tools {
    justify-items: start;
    width: 100%;
  }

  .appendix-status {
    text-align: left;
  }

  .glossary-term {
    grid-template-columns: 1fr;
  }

  .glossary-word {
    border-bottom: 1px solid rgba(4, 47, 79, 0.12);
    border-right: 0;
    padding: 0 0 0.55rem;
  }

  .page-card {
    padding: 1rem;
  }

  .page-card::after {
    font-size: 4.8rem;
  }

  .site-footer .site-footer-main {
    align-items: start;
    flex-direction: column;
  }

  .clear-checklist {
    grid-column: 1;
  }
}

@media (max-width: 430px) {
  .hero h1 {
    font-size: 2.25rem;
  }

  .filter-group {
    grid-template-columns: 1fr;
  }

  .contents-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ── Print: produce a clean, ink-light printout (PORT-01) ─────────────────────
   The interactive site is for screen; the canonical print artefact is the
   downloadable PDF. This keeps an in-browser print legible by dropping the
   chrome (banners, nav, modal, floating controls) and flattening colours. */
@media print {
  .feedback-banner,
  .nav-toggle,
  .nav-backdrop,
  .nav-links,
  .search-band,
  .topic-pin,
  .intro-modal,
  .clear-checklist,
  .skip-link,
  .footer-legal {
    display: none !important;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  .hero,
  .checklist-band {
    background: #fff !important;
    color: #000 !important;
    min-height: 0 !important;
  }

  .hero h1,
  .hero-copy,
  .version,
  h2,
  h3 {
    color: #000 !important;
    text-shadow: none !important;
  }

  .section-bg,
  .checklist-bg {
    display: none !important;
  }

  main,
  .page-card,
  .glossary-term,
  .contents-card {
    box-shadow: none !important;
    break-inside: avoid;
  }

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

/* ── Surface treatment — the shipped "bold" design ───────────────────────────
   Moved here from the former tweaks-overrides.css. That file was a Tweaks-panel
   experiment whose panel no longer exists, so its flat/calm/mono/compact/
   spacious variants were unreachable dead code and have been removed. <html>
   keeps data-surface="bold" as the single, active surface design. */
html[data-surface="bold"] .search-panel,
html[data-surface="bold"] .quick-strip article,
html[data-surface="bold"] .contents-card,
html[data-surface="bold"] .page-card,
html[data-surface="bold"] .glossary-term,
html[data-surface="bold"] .word-table,
html[data-surface="bold"] .appendix-head,
html[data-surface="bold"] .feedback-panel {
  box-shadow: 0 19px 44px rgba(2, 29, 50, 0.19) !important;
  border-radius: 13px;
}
html[data-surface="bold"] .page-card {
  background: #fff;
  border-left-width: 8px;
}
html[data-surface="bold"] .quick-strip article { border-left-width: 8px; }
html[data-surface="bold"] .contents-card { border-top-width: 10px; }