/* VMRC site stylesheet. Hand-written, no build step: edit this file directly.
   Specification: docs/design-brief.md. Colour values are defined in loop/contrast.py; change a
   colour there first (loop/check.sh fails if this file disagrees with it), and use only the
   foreground/background pairings listed there.

   Contents: 1 tokens  2 base  3 utilities  4 focus  5 header  6 primary menu  7 search form
   8 title band and breadcrumb  9 bands and body content (9c search results)  10 buttons  11 footer  12 motion  13 print
   Breakpoints (em, so they follow the reader's font size): 40em, 60em, 75em. */

/* 1. Tokens ------------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --c-white: #FFFFFF;
  --c-ink: #1B2A36;
  --c-ink-soft: #465866;
  --c-navy-900: #12324D;
  --c-navy-700: #1D4E79;
  --c-blue-600: #1A6496;
  --c-blue-400: #52A5D7;
  --c-blue-200: #B9DBEF;
  --c-seafoam-300: #88D6C9;
  --c-teal-700: #0E6B5E;
  --c-tint: #EEF5F9;
  --c-tint-seafoam: #E3F4F1;
  --c-line: #C3D1DB;
  --c-control: #5F7483;
  --c-focus: #FFBF47;
  --c-alert-info-bg: #DCEEF8;
  --c-alert-warning-bg: #FFF0C2;
  --c-alert-warning-ink: #3D2C00;
  --c-alert-urgent-bg: #9B1C1C;

  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-text);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Headings grow with the viewport between 20rem (320px) and 75rem (1200px). */
  --fs-h1: clamp(2rem, 1.727rem + 1.364vw, 2.75rem);
  --fs-h2: clamp(1.625rem, 1.489rem + 0.682vw, 2rem);
  --fs-h3: clamp(1.375rem, 1.33rem + 0.227vw, 1.5rem);
  --fs-h4: clamp(1.125rem, 1.08rem + 0.227vw, 1.25rem);
  --fs-lead: clamp(1.25rem, 1.205rem + 0.227vw, 1.375rem);
  --fs-body: 1.125rem;
  --fs-small: 1rem;
  --fs-nav: 1.125rem;

  --container: 75rem;
  --measure: 70ch;
  --gutter: 1rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --radius: 0.375rem;
  --band-pad: var(--space-6);
  --target: 2.75rem; /* 44px: smallest height of anything a reader clicks or taps */
}
@media (min-width: 40em) { :root { --gutter: 1.5rem; } }
@media (min-width: 60em) { :root { --gutter: 2rem; --band-pad: var(--space-7); --fs-nav: 1.0625rem; } }

/* 2. Base --------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-wrap: break-word;
}
main { display: block; }
main:focus, main:focus-visible { outline: none; box-shadow: none; } /* main takes focus only from the skip link; it is not a control */
img, svg, video { max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0 0 var(--space-3); color: var(--c-navy-700); font-family: var(--font-heading); font-weight: 700; }
h1 { font-size: var(--fs-h1); line-height: 1.15; }
h2 { font-size: var(--fs-h2); line-height: 1.2; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }
p, ul, ol, dl, blockquote, figure, table { margin: 0 0 1em; }
a { color: var(--c-blue-600); text-decoration: underline; text-decoration-thickness: 0.0625em; text-underline-offset: 0.15em; transition: color 0.15s, text-decoration-thickness 0.15s; }
a:visited, a:hover { color: var(--c-navy-700); }
a:hover { text-decoration-thickness: 0.1875em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 1em; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--space-5) 0; }
[hidden] { display: none !important; }

/* 3. Utilities ---------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.icon { flex: none; width: 1.25em; height: 1.25em; }
.icon--external { width: 0.85em; height: 0.85em; margin-left: 0.3em; vertical-align: baseline; }
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: var(--measure); }

.skip-link {
  position: absolute; top: 0; left: 0; z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--c-white); color: var(--c-navy-700); font-weight: 700;
  transform: translateY(-120%);
}
.skip-link:visited { color: var(--c-navy-700); }
.skip-link:focus { transform: none; }

/* 4. Focus (brief 7.1): navy line with amber on both sides; amber alone on navy surfaces ---- */
:focus-visible { outline: 3px solid var(--c-navy-900); outline-offset: 2px; box-shadow: 0 0 0 8px var(--c-focus); }
.site-header :focus-visible,
.site-footer :focus-visible,
.hero__panel :focus-visible { outline-color: var(--c-focus); box-shadow: none; }
.site-header .header-toggle[aria-expanded="true"]:focus-visible { box-shadow: inset 0 0 0 3px var(--c-navy-900); }
.site-header .search-form__input:focus-visible { outline-color: var(--c-focus); outline-offset: 0; box-shadow: inset 0 0 0 2px var(--c-navy-900); }

/* 4b. Sitewide alert (brief 7.2): a band above the header, in the page flow. The partial outputs
   nothing while the alert is off, so there is no empty state to style. Every colour pairing here is
   listed in loop/contrast.py. */
.site-alert { background: var(--c-alert-info-bg); color: var(--c-ink); font-size: var(--fs-small); line-height: 1.45; }
.site-alert__inner { display: flex; align-items: flex-start; gap: var(--space-2); padding-block: 0.75rem; }
.site-alert__icon { width: 1.5rem; height: 1.5rem; margin-top: -0.02em; }
.site-alert__text { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.site-alert__label { font-weight: 700; }
.site-alert a { color: var(--c-blue-600); font-weight: 700; }
.site-alert a:visited, .site-alert a:hover { color: var(--c-ink); }
.site-alert--warning { background: var(--c-alert-warning-bg); color: var(--c-alert-warning-ink); }
.site-alert--urgent { background: var(--c-alert-urgent-bg); color: var(--c-white); }
.site-alert--warning a, .site-alert--warning a:visited, .site-alert--warning a:hover,
.site-alert--urgent a, .site-alert--urgent a:visited, .site-alert--urgent a:hover { color: inherit; }
.site-alert--urgent :focus-visible { outline-color: var(--c-white); box-shadow: none; }
@media (min-width: 60em) { .site-alert__inner { justify-content: center; } }

/* 5. Header (brief 7.3) ------------------------------------------------------------------- */
.site-header { background: var(--c-navy-900); color: var(--c-white); }
.site-header__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding-block: var(--space-3); }
.site-logo { display: block; flex: none; margin-right: auto; padding: var(--space-1) 0; }
.site-logo img { display: block; height: 2.75rem; width: auto; }
.site-header__toggles { display: none; gap: var(--space-2); }
.header-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--target); padding: 0 0.75rem;
  background: transparent; color: var(--c-white);
  border: 2px solid var(--c-blue-200); border-radius: var(--radius);
  font-size: var(--fs-small); font-weight: 600;
}
.header-toggle[aria-expanded="true"] { background: var(--c-white); color: var(--c-navy-900); border-color: var(--c-white); }
.site-header__search { flex: 1 1 100%; }

/* Below 60em, when scripts run, the search field and the menu are panels opened by the two buttons.
   Without scripts both are simply visible, stacked. */
@media (max-width: 59.99em) {
  .js .site-header__toggles { display: flex; }
  .js .site-header [data-panel]:not(.is-open) { display: none; }
}
/* Below 24em (320 to 383px: most phones) the logo and both buttons fit one row only without the icons
   and at a smaller logo size. */
@media (max-width: 23.99em) {
  .site-logo img { height: 2.5rem; }
  .header-toggle { padding: 0 var(--space-2); }
  .header-toggle .icon { display: none; }
}
@media (min-width: 60em) {
  .site-logo img { height: 4rem; }
  .site-header__search { flex: 0 1 26rem; }
}

/* 6. Primary menu (brief 7.4): link plus disclosure button -------------------------------- */
.primary-nav { border-top: 1px solid var(--c-navy-700); font-size: var(--fs-nav); line-height: 1.3; }
.menu, .submenu { list-style: none; margin: 0; padding: 0; }
.menu__item { display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid var(--c-navy-700); }
.menu__link {
  flex: 1 1 0; display: flex; align-items: center; min-height: var(--target);
  padding: var(--space-2) 0; color: var(--c-white); font-weight: 600; text-decoration: none;
  border-left: 0 solid var(--c-seafoam-300);
}
.menu__link:visited { color: var(--c-white); }
.menu__link:hover { color: var(--c-white); text-decoration: underline; text-decoration-thickness: 0.125em; }
.menu__item--current > .menu__link { border-left-width: 4px; padding-left: var(--space-2); }
.menu__toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--target); min-height: var(--target); padding: 0;
  background: transparent; color: var(--c-white); border: 0; border-radius: var(--radius);
}
.menu__toggle .icon { width: 1rem; height: 1rem; transition: transform 0.15s; }
.menu__toggle[aria-expanded="true"] { background: var(--c-navy-700); }
.menu__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.submenu { flex: 1 1 100%; background: var(--c-navy-700); margin-inline: calc(-1 * var(--gutter)); padding: var(--space-2) var(--gutter); }
.submenu a { display: flex; align-items: center; min-height: var(--target); padding: var(--space-2) 0; color: var(--c-white); font-weight: 400; text-decoration: none; }
.submenu a:visited { color: var(--c-white); }
.submenu a:hover { color: var(--c-white); text-decoration: underline; }
.submenu a[aria-current] { font-weight: 700; }
/* With scripts a submenu is shown only while its button says it is open. */
.js .menu__toggle[aria-expanded="false"] + .submenu { display: none; }

@media (min-width: 60em) {
  /* The seven labels need about 61rem at this size, so the row may wrap to a second line on
     narrower desktops instead of shrinking the text. */
  .menu { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); margin-left: calc(-1 * var(--space-2)); }
  .menu__item { position: relative; flex-wrap: nowrap; border-bottom: 0; }
  .menu__link { flex: none; padding: var(--space-2) var(--space-1) var(--space-2) var(--space-2); border-left: 0; border-bottom: 4px solid transparent; border-top: 4px solid transparent; }
  .menu__item--current > .menu__link { border-left-width: 0; border-bottom-color: var(--c-seafoam-300); }
  .menu__toggle { width: 2rem; }
  .submenu {
    position: absolute; top: 100%; left: 0; z-index: 50;
    min-width: 16rem; max-width: min(24rem, 90vw); margin: 0; padding: var(--space-2) 0;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 0.3);
  }
  /* site.js adds this class when a panel would run past the right edge of the window. */
  .submenu--right { left: auto; right: 0; }
  .submenu a { padding: var(--space-2) var(--space-3); }
  /* Without scripts there is no way to open a submenu on a wide screen; each top-level link
     leads to its section page instead. */
  html:not(.js) .submenu { display: none; }
}

/* 7. Search form (brief 7.5) --------------------------------------------------------------- */
.search-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.search-form__label { font-size: var(--fs-small); font-weight: 600; }
.search-form__row { display: flex; flex: 1 1 12rem; min-width: 0; }
.search-form__input {
  flex: 1 1 auto; min-width: 0; width: 100%; min-height: var(--target); padding: 0 0.75rem;
  background: var(--c-white); color: var(--c-ink);
  border: 2px solid var(--c-control); border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
  font-size: var(--fs-body);
}
.search-form__button {
  flex: none; min-height: var(--target); padding: 0 var(--space-3);
  background: var(--c-blue-600); color: var(--c-white);
  border: 2px solid var(--c-blue-600); border-radius: 0 var(--radius) var(--radius) 0; font-weight: 600;
}
.search-form__button:hover { background: var(--c-navy-700); border-color: var(--c-navy-700); }
.site-header .search-form__input { border-color: var(--c-white); }
.site-header .search-form__button { border-color: var(--c-white); }
@media (max-width: 59.99em) {
  /* The header button that opens this panel already says "Search"; the label stays for screen readers. */
  .site-header .search-form__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
@media (min-width: 60em) { .site-header .search-form__row { min-width: 16rem; } }
.search-form--large { max-width: 40rem; margin-bottom: var(--space-5); }
.search-form--large .search-form__label { flex: 1 1 100%; font-size: var(--fs-body); }
.search-form--large .search-form__input, .search-form--large .search-form__button { min-height: 3.25rem; }

/* 8. Title band and breadcrumb (brief 7.6) ------------------------------------------------- */
.title-band { background: var(--c-tint); padding-block: var(--space-4) var(--space-5); }
.title-band h1 { margin-bottom: 0; }
.title-band .lead { margin: var(--space-3) 0 0; }
/* Section photograph beside the title (brief 7.6, task B1a3): drawn from 60em only, filling the
   right of the band from top to bottom; the text keeps the left 55% so it is never on the photo. */
.title-band__media { display: none; }
@media (min-width: 60em) {
  .title-band--photo { position: relative; display: flex; align-items: center; min-height: 17rem; }
  .title-band--photo .title-band__text { max-width: 55%; }
  .title-band--photo .title-band__media { display: block; position: absolute; inset: 0 0 0 auto; width: 42%; }
  .title-band__media img { width: 100%; height: 100%; object-fit: cover; }
}
.breadcrumb { margin-bottom: var(--space-3); font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-soft); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.breadcrumb li { display: flex; align-items: center; min-width: 0; }
.breadcrumb li + li::before { content: "/"; margin-inline: var(--space-2); color: var(--c-ink-soft); }
/* anywhere, not break-word: a long word ("ADVISORY COMMITTEES/BOARDS", "Recreational") must not hold its box wider than the screen at 200% text on a phone (task B2f1) */
.breadcrumb a { display: inline-block; padding-block: var(--space-2); overflow-wrap: anywhere; }

/* 9. Bands and body content (brief 7.12) --------------------------------------------------- */
.band { padding-block: var(--band-pad); }
.band--tint { background: var(--c-tint); }
.prose > * { max-width: var(--measure); }
.prose > :last-child { margin-bottom: 0; }
.prose h2, .prose h3, .prose h4 { margin-top: 1.5em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li { margin-bottom: 0.4em; }
.prose blockquote { margin-inline: 0; padding-left: var(--space-3); border-left: 4px solid var(--c-blue-400); color: var(--c-ink-soft); }
.prose img { height: auto; }
.prose figure { margin-inline: 0; }
.prose figcaption { font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-soft); }
@media (min-width: 40em) { .prose figure.float-right, .prose img.float-right { float: right; max-width: 45%; margin: 0 0 var(--space-3) var(--space-4); } }
/* Links to other organisations' sites: the icon is decoration; the words "(external site)" are in the markup. */
.prose a.is-external::after {
  content: ""; display: inline-block; width: 0.75em; height: 0.75em; margin-left: 0.25em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3H3v10h10v-3M9 3h4v4M13 3 7 9' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3H3v10h10v-3M9 3h4v4M13 3 7 9' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Tables: the wrapper is added by the "prose" modifier and scrolls sideways on small screens. */
.prose > .table-scroll { max-width: 100%; }
/* position: relative makes the wrapper the containing block of absolutely positioned descendants
   (the hidden "opens in a new tab" text of .visually-hidden), which otherwise escape the scrolling
   box and widen the page (found in task B1b3 on /forms). */
.table-scroll { overflow-x: auto; margin-bottom: 1em; position: relative; }
.table-scroll table { margin: 0; }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-body); }
caption { padding-bottom: var(--space-2); text-align: left; font-weight: 700; color: var(--c-navy-700); }
th, td { padding: var(--space-2) var(--space-3); border: 1px solid var(--c-line); text-align: left; vertical-align: top; }
th { background: var(--c-tint); color: var(--c-ink); }
/* "Tables on phones: one block per row" (task B2e). The "prose" modifier marks simple tables
   (.table-stackable, data-label on each data cell after the first); a page whose editor chose the
   option has .tables-stack on <main>. Below 40em each row is a block: its first cell in bold, then
   each other cell after its column name (the name is drawn by CSS and hidden from screen readers,
   which hear the column header through the explicit table roles). The first cell of the header row
   stays visible above the blocks (on the license fees page it names the first group, on the
   recreational licence page it explains "SW" and "FW"); the other column names are only in the
   labels. A row that is one cell across the table is drawn as a group heading. */
@media (max-width: 39.99em) {
  .tables-stack .table-stackable, .tables-stack .table-stackable :is(thead, tbody, tfoot, tr, th, td) { display: block; width: 100%; }
  .tables-stack .table-stackable tr { border: 1px solid var(--c-line); border-top-width: 0; padding: var(--space-2) var(--space-3); }
  .tables-stack .table-stackable tr:first-child { border-top-width: 1px; }
  .tables-stack .table-stackable :is(th, td) { border: 0; padding: var(--space-1) 0; min-width: 0; }
  .tables-stack .table-stackable :is(th, td)[data-empty] { display: none; }
  .tables-stack .table-stackable tr:not(.table-stackable__head, .table-stackable__group) > :first-child { font-weight: 700; background: none; }
  .tables-stack .table-stackable :is(.table-stackable__head, .table-stackable__group) { background: var(--c-tint); }
  .tables-stack .table-stackable .table-stackable__head > :not(:first-child) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tables-stack .table-stackable td[data-label]::before { content: attr(data-label) ": "; content: attr(data-label) ": " / ""; color: var(--c-ink-soft); font-weight: 700; }
  .tables-stack .table-stackable td[data-label] > p:first-child { display: inline; }
}
.callout { padding: var(--space-3) var(--space-4); background: var(--c-tint-seafoam); border-left: 4px solid var(--c-teal-700); }
.callout > :last-child { margin-bottom: 0; }
.back-to-top { padding-block: var(--space-3); text-align: right; }
.back-to-top a { display: inline-block; padding-block: var(--space-2); }

/* Parts under a page's text (task 11; fieldset "blocks"): more text, pictures, questions that open. */
.prose li > p, .prose td > p, .prose th > p { margin-bottom: 0.4em; }
.prose li > p:last-child, .prose td > p:last-child, .prose th > p:last-child { margin-bottom: 0; }
.prose + .prose, .prose + .picture, .picture + .prose, .prose + .disclosure, .disclosure + .prose, .picture + .disclosure, .disclosure + .picture { margin-top: var(--space-4); }
.picture { margin: 0 0 var(--space-3); max-width: var(--measure); }
.picture__img { display: block; height: auto; border-radius: var(--radius); }
.picture a { display: inline-block; }
.picture--small { max-width: 11.25rem; }
.picture--medium { max-width: 30rem; }
/* A picture beside the next text (task B1a5; picture "placement" left or right): from 40em it floats
   and the next text part flows round it, as the legacy pages float portraits beside biographies. It
   stands above the text on a phone. A right-hand picture stays at the right edge of the text column
   (the measure), not of the page. Headings, rules and tables in the text, the next picture and any
   other part start below it, and the band contains it. So does a paragraph that opens in bold in the
   text beside it (the board page: the next member's name must not sit beside the last portrait). */
@media (min-width: 40em) {
  .picture--beside { max-width: min(40%, 16rem); margin-bottom: var(--space-3); }
  .picture--beside.picture--small { max-width: min(40%, 11.25rem); }
  .picture--left { float: left; margin-right: var(--space-5); }
  .picture--right { float: right; margin-left: var(--space-5); margin-right: max(0px, calc(100% - var(--measure))); }
  .picture--beside + .prose { margin-top: 0; }
  .picture, .prose ~ :not(.prose), .prose :is(h2, h3, h4, hr, table) { clear: both; }
  .picture--beside + .prose p:has(> strong:first-child) { clear: both; }
  .band > .container { display: flow-root; }
}
.disclosure { max-width: var(--measure); border-top: 1px solid var(--c-line); }
.disclosure:last-of-type { border-bottom: 1px solid var(--c-line); }
.disclosure + .disclosure { margin-top: 0; }
.disclosure > summary { padding: var(--space-3) var(--space-2); font-weight: 700; color: var(--c-navy-700); cursor: pointer; }
.disclosure > summary:hover { background: var(--c-tint); }
.disclosure > .prose { padding: 0 var(--space-2) var(--space-3) var(--space-4); }

/* People (task B1a1; block "people"): portrait cards in a grid, two on a phone, up to six on a wide
   screen. Each card is a subgrid of three rows (heading, picture, name and title), so the pictures of
   one row line up even when a card heading wraps. Portraits are cut to 4:5 from the top. */
* + .people, .people + * { margin-top: var(--space-5); }
.people > h2 { margin-bottom: var(--space-4); }
.people__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 0 var(--space-4); }
@media (min-width: 40em) { .people__list { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0 var(--space-5); } }
.person { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-2); align-content: start; margin-bottom: var(--space-5); max-width: 15rem; }
.person__group { grid-row: 1; align-self: end; margin: 0; font-size: 1.125rem; line-height: 1.3; }
.person__img { grid-row: 2; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; background: var(--c-tint); }
.person__name, .person__role { margin: 0; line-height: 1.35; }
.person__text { grid-row: 3; }
.person__name { font-weight: 700; }
.person__role { margin-top: var(--space-1); font-size: var(--fs-small); color: var(--c-ink-soft); }

/* 9b. Interior page parts (task 8): sections under the text, link lists, fact lists, pagination. */
.page-section { margin-top: var(--space-6); }
.container > .page-section:first-child { margin-top: 0; }
.page-section > h2 { margin-top: 0; }
.prose + .link-list, .facts + .prose, .callout + .prose { margin-top: var(--space-4); }
.link-list { list-style: none; margin: 0; padding: 0; max-width: var(--measure); border-bottom: 1px solid var(--c-line); }
.link-list li { border-top: 1px solid var(--c-line); }
.link-list a { display: block; padding-block: 0.625rem; line-height: 1.4; overflow-wrap: anywhere; }
.link-list--plain { margin-top: var(--space-4); }
.facts { margin: 0 0 var(--space-4); max-width: var(--measure); }
.facts > div { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); padding-block: var(--space-2); border-top: 1px solid var(--c-line); }
.facts > div:last-child { border-bottom: 1px solid var(--c-line); }
.facts dt { flex: 0 0 10rem; font-weight: 700; color: var(--c-ink-soft); }
.facts dd { flex: 1 1 14rem; margin: 0; min-width: 0; }
.archive-notice { max-width: var(--measure); }
.pagination ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; }
.pagination a { display: inline-block; padding-block: var(--space-2); }

/* 9c. Search results (task 10; brief 7.5 and 7.13). A found word is marked by weight as well as by
   colour (ink on the seafoam tint, a pairing listed in loop/contrast.py). */
.search-note { max-width: var(--measure); color: var(--c-ink-soft); }
.search-results { max-width: var(--measure); }
.search-results > h2 { margin-top: 0; font-size: var(--fs-h3); overflow-wrap: anywhere; }
.search-results__page { margin: 0 0 var(--space-3); color: var(--c-ink-soft); font-size: var(--fs-small); }
.search-results__list { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.search-result { padding-block: var(--space-4); border-top: 1px solid var(--c-line); }
.search-result:last-child { border-bottom: 1px solid var(--c-line); }
.search-result__title { margin: 0 0 var(--space-1); font-size: var(--fs-h4); overflow-wrap: anywhere; }
.search-result__meta { margin: 0 0 var(--space-1); font-size: var(--fs-small); font-weight: 700; color: var(--c-ink-soft); }
.search-result__excerpt { margin: 0; overflow-wrap: anywhere; }
.search-result mark { padding: 0 0.125em; background: var(--c-tint-seafoam); color: var(--c-ink); font-weight: 700; }

/* 9d. Picture quiz (task 11c4; partials/_quiz): one card per picture, the names as large radio
   buttons, the result as a list whose right and wrong answers differ by word as well as colour. */
/* Task 11k. For Sale & Want Ads (partials/_ads): one card per ad, as on the old boards. */
.ad-board { margin-top: var(--space-5); }
.ad-board > h2 { margin: 0 0 var(--space-3); }
.ads { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.ad { margin: 0; padding: var(--space-3); border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-tint); min-width: 0; overflow-wrap: anywhere; }
.ad__kind { margin: 0 0 var(--space-2); font-size: 1.125rem; color: var(--c-navy-700); }
.ad__text { margin: 0; }
.ad__added { margin: var(--space-3) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--c-line); font-weight: 700; }
.quiz { margin-top: var(--space-5); }
.quiz__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.quiz__question { margin: 0; padding: var(--space-3); border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-tint); min-width: 0; }
.quiz__question > legend { padding: 0 var(--space-2); font-weight: 700; color: var(--c-navy-700); }
.quiz__prompt { display: block; font-weight: 400; color: var(--c-ink-soft); font-size: var(--fs-small); }
/* Every picture in the same 2:1 white box (task B1b4): the six photographs differ in height, which
   put the name lists of one row out of line with each other. The whole picture stays visible. */
.quiz__img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; margin: var(--space-2) 0 var(--space-3); border-radius: var(--radius); background: var(--c-white); }
.quiz__options { display: grid; gap: var(--space-1); }
.quiz__option { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target); }
.quiz__option input { width: 1.375rem; height: 1.375rem; margin: 0; flex: none; accent-color: var(--c-navy-700); }
.quiz__option label { flex: 1; padding-block: var(--space-1); cursor: pointer; }
.quiz__actions { margin: var(--space-4) 0; }
.quiz__result:focus { outline: none; }
.quiz__summary { font-weight: 700; }
.quiz__success { padding: var(--space-3) var(--space-4); background: var(--c-tint-seafoam); border-left: 4px solid var(--c-teal-700); font-weight: 700; }
.quiz__marks { padding-left: 0; list-style: none; }
.quiz__mark { padding: var(--space-2) 0; border-bottom: 1px solid var(--c-line); }
.quiz__verdict { font-weight: 700; white-space: nowrap; }
.quiz__mark--right .quiz__verdict { color: var(--c-teal-700); }
.quiz__mark--wrong .quiz__verdict { color: var(--c-alert-urgent-bg); }

/* 10. Buttons ------------------------------------------------------------------------------ */
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--target);
  padding: var(--space-2) var(--space-4); border: 2px solid var(--c-navy-700); border-radius: var(--radius);
  background: var(--c-navy-700); color: var(--c-white); font-weight: 600; line-height: 1.3; text-decoration: none;
}
.button:visited, .button:hover { color: var(--c-white); }
.button:hover { text-decoration: underline; }
.button--cta { background: var(--c-teal-700); border-color: var(--c-teal-700); }
.button--secondary, .button--secondary:visited, .button--secondary:hover { background: var(--c-white); border-color: var(--c-control); color: var(--c-navy-700); }
.site-header .button--cta { border-color: var(--c-white); }

/* 11. Footer (brief 7.11) ------------------------------------------------------------------ */
.site-footer { background: var(--c-navy-900); color: var(--c-white); padding-block: var(--space-6) var(--space-4); font-size: var(--fs-small); line-height: 1.5; }
.site-footer h2 { color: var(--c-white); font-size: var(--fs-h4); line-height: 1.3; margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 2px solid var(--c-seafoam-300); }
.site-footer a, .site-footer a:visited { color: var(--c-blue-200); }
.site-footer a:hover { color: var(--c-white); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.footer-tiles { margin-bottom: var(--space-6); }
.footer-tiles ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.25rem), 1fr)); gap: var(--space-4) var(--space-3); }
.footer-tiles a { display: block; }
.footer-tiles img { display: block; width: 8.25rem; max-width: 100%; height: auto; margin-bottom: var(--space-2); border-radius: var(--radius); }
.footer-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-5) var(--space-5); }
.footer-column li a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target); padding-block: var(--space-2); }
.footer-column li a .icon--external { margin-left: 0; }
.footer-column p { max-width: 34rem; }
.site-logo--footer { margin: 0 0 var(--space-3); width: fit-content; }
.site-logo--footer img, .site-header .site-logo--footer img { height: 4.5rem; width: auto; }
.footer-column--agency h2 { border-bottom: 0; padding-bottom: 0; }
.footer-legal { margin: var(--space-6) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--c-navy-700); color: var(--c-blue-200); }

/* 11b. Home page (brief 7.7 to 7.9) ---------------------------------------------------------- */
/* Hero: one static feature. The navy panel holds the h1, the first featured link and its button;
   the photograph sits under the panel on small screens and beside it from 60em. Nothing moves. */
.hero { background: var(--c-navy-900); color: var(--c-white); }
.hero__inner { display: flex; flex-direction: column; padding-inline: 0; }
.hero__panel { padding: var(--space-5) var(--gutter); }
.hero__panel h1 { margin: 0 0 var(--space-3); color: var(--c-white); }
.hero__feature { margin: 0 0 var(--space-3); font-size: var(--fs-lead); line-height: 1.4; max-width: 34ch; overflow-wrap: anywhere; }
.hero__action { margin: 0; }
.hero__panel .button--cta { border-color: var(--c-white); }
.hero__media { background: var(--c-navy-700); }
/* Below 60em the photograph is a strip, so the featured links and the tiles stay near the first screen. */
.hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 14rem; object-fit: cover; }
@media (min-width: 60em) {
  .hero__inner { flex-direction: row; align-items: stretch; padding-inline: var(--gutter); }
  .hero { position: relative; }
  .hero__inner { min-height: 20rem; }
  .hero__panel { flex: 0 0 42%; display: flex; flex-direction: column; justify-content: center; padding: var(--space-5) var(--space-5) var(--space-5) 0; }
  /* The photograph fills whatever height the panel needs, at least 20rem (the brief caps the hero at about 26rem).
     Task D1: it runs from the panel's right edge to the right edge of the window, as the section photograph
     in the title band does (.title-band--photo), instead of stopping at the container on wide screens.
     left = the container's left gutter edge + 42% of the container's content width. */
  .hero__media { position: absolute; top: 0; bottom: 0; right: 0; min-width: 0; background: none;
    left: calc(max(0px, (100% - var(--container)) / 2) + var(--gutter) + 0.42 * (min(100%, var(--container)) - 2 * var(--gutter))); }
  .hero__media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
  /* Task D1: the tiles band follows the tinted strip of featured links directly, so it opens with less space,
     which brings the tile photographs into the first screen of a 1366x768 laptop. */
  .featured + .band { padding-top: var(--space-6); }
}
/* The other featured links: a row of buttons under the hero (the legacy carousel's other slides). */
.featured { padding-block: var(--space-4); background: var(--c-tint); border-bottom: 1px solid var(--c-line); }
.featured__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: 0; padding: 0; }
.featured__list li { display: flex; min-width: 0; }
.featured__list .button { text-align: left; justify-content: flex-start; font-size: var(--fs-small); overflow-wrap: anywhere; }
@media (max-width: 39.99em) { .featured__list li, .featured__list .button { width: 100%; } }

/* Task tiles (brief 7.8): one column, two from 40em, three from 60em. */
.tiles { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: 0; padding: 0; }
@media (min-width: 40em) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
.tile { position: relative; display: flex; flex-direction: column; background: var(--c-white); border: 1px solid var(--c-line); border-top: 4px solid var(--c-blue-400); border-radius: var(--radius); overflow: hidden; }
.tile__image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--c-tint); }
.tile__body { padding: var(--space-3) var(--space-4) var(--space-4); }
.tile__title { margin: 0 0 var(--space-2); font-size: var(--fs-h3); overflow-wrap: anywhere; }
.tile__title a { display: inline-block; padding-block: var(--space-1); }
/* The heading link also covers the photograph, so the picture is clickable without a second link. */
.tile__image + .tile__body .tile__title a::after { content: ""; position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 3 / 2; }
.tile__links { list-style: none; margin: 0; padding: 0; }
.tile__links li { border-top: 1px solid var(--c-line); }
.tiles--links .tile__body { padding: var(--space-3) var(--space-4); }
.tiles--links .tile__title { margin: 0; font-size: var(--fs-h4); }
/* A tile with no photograph or link list: the heading link covers the whole tile. */
.tiles--links .tile__title a::after { content: ""; position: absolute; inset: 0; }
.tile__links a { display: block; padding-block: 0.625rem; line-height: 1.4; overflow-wrap: anywhere; }

/* News lists (brief 7.9): date, optional headline, text, links to documents. */
.news-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; max-width: var(--measure); }
.news-list > li { padding-block: var(--space-4); border-top: 1px solid var(--c-line); }
.news-list > li:last-child { border-bottom: 1px solid var(--c-line); }
.news-item__date { margin: 0 0 var(--space-1); font-size: var(--fs-small); font-weight: 700; color: var(--c-ink-soft); }
.news-item__title { margin: 0 0 var(--space-2); font-size: var(--fs-h4); }
.news-item__body > :last-child { margin-bottom: 0; }
.news-item__body { overflow-wrap: anywhere; }
.news-item__links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin: var(--space-2) 0 0; padding: 0; }
.news-item__links a { display: inline-block; padding-block: var(--space-2); font-weight: 600; }
.news-item--full .news-item__date { font-size: var(--fs-body); }
.news-more { margin: 0; }
/* Home page: the news items as cards in a grid from 40em, so the list does not run one narrow
   column beside empty space (B1a). Reading order is the source order, row by row. */
@media (min-width: 40em) {
  .news-list--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); max-width: none; }
  .news-list--grid > li, .news-list--grid > li:last-child { padding: var(--space-4); background: var(--c-white); border: 1px solid var(--c-line); border-top: 4px solid var(--c-blue-400); border-radius: var(--radius); }
}
@media (min-width: 75em) { .news-list--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 12. Motion (brief section 8) ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* 12b. Forced colours (Windows contrast themes; task B2f3, docs/accessibility.md 2.9) ----------
   The browser replaces every colour with the reader's system colours and drops backgrounds and
   shadows, so what those alone showed needs another sign here. System colour keywords (Canvas,
   CanvasText, LinkText, Highlight ...) are kept as written. Checked by loop/browser.py forced. */
@media (forced-colors: active) {
  /* Transparent borders reserve space for the current-page line; forced colours would draw them. */
  .menu__link { border-top-color: Canvas; border-bottom-color: Canvas; }
  .menu__item--current > .menu__link { border-bottom-color: LinkText; }
  /* An open button showed by its background: mark it with the system highlight. Adjustment is
     switched off for it because the browser otherwise paints a Canvas backplate behind the text,
     which hid HighlightText; every colour here is a system colour, so the theme still decides. */
  .header-toggle[aria-expanded="true"], .menu__toggle[aria-expanded="true"] { forced-color-adjust: none; background-color: Highlight; color: HighlightText; border-color: Highlight; }
  .site-header .header-toggle[aria-expanded="true"]:focus-visible, .site-header .menu__toggle[aria-expanded="true"]:focus-visible { outline-color: CanvasText; box-shadow: none; }
  /* An open submenu lies over the page; its shadow and navy background are gone. */
  .submenu { border: 2px solid CanvasText; }
  @media (max-width: 59.99em) { .submenu { border-width: 0 0 0 2px; } }
  /* The external-link mark is a mask filled with the text colour; forced colours would fill it
     with Canvas, so it vanished. */
  .prose a.is-external::after { background-color: LinkText; }
  .prose a.is-external:visited::after { background-color: VisitedText; }
  /* The alert band lost its colour: lines above and below keep it apart from the header. */
  .site-alert { border-block: 2px solid CanvasText; }
  /* The logo is drawn for the navy header (pale blue and white); keep it on navy so it stays
     readable on a white system background. Images are never recoloured, only their background. */
  .site-logo img { forced-color-adjust: none; background-color: var(--c-navy-900); padding: var(--space-1) var(--space-2); border-radius: var(--radius); box-sizing: content-box; }
}

/* 13. Print -------------------------------------------------------------------------------- */
@media print {
  body { color: #000; background: #fff; font-size: 12pt; }
  .skip-link, #va-branding-bar, .site-alert, .site-header__toggles, .site-header__search, .site-header__cta, .primary-nav,
  .search-form, .back-to-top, .footer-tiles, .hero__media, .tile__image, .news-more, .footer-column:not(.footer-column--agency), .site-footer .site-logo { display: none !important; }
  .site-header, .site-footer, .title-band, .hero, .featured, .band--tint { background: none; color: #000; }
  /* The header logo is drawn for dark backgrounds; print the agency name instead. */
  .site-header .site-logo img, .title-band--photo .title-band__media { display: none; }
  .title-band--photo .title-band__text { max-width: none; }
  .site-header .site-logo::after { content: "Virginia Marine Resources Commission"; color: #000; font-weight: 700; font-size: 14pt; }
  .site-footer h2, .site-footer a, .footer-legal, h1, h2, h3, h4, a { color: #000 !important; }
  .search-result mark { background: none; color: #000; }
  .band, .title-band, .site-footer { padding-block: 0.5cm; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.9em; word-break: break-all; -webkit-mask: none; mask: none; background: none; width: auto; height: auto; display: inline; }
}

/* The Regulations page (task 11e1): the row of category links above the tables, and the tables. */
.filter-nav { margin: var(--space-4) 0 var(--space-3); }
.filter-nav__label { margin: 0 0 var(--space-2); font-size: var(--fs-body); }
.filter-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.filter-nav__list a { display: inline-block; min-height: 44px; padding: var(--space-2) var(--space-3); border: 2px solid var(--c-blue-600); border-radius: var(--radius); font-weight: 700; text-decoration: none; }
.filter-nav__list a:hover { background: var(--c-tint); text-decoration: underline; }
.filter-nav__list a[aria-current="page"] { background: var(--c-blue-600); color: #fff; }
.filter-nav__status { margin-bottom: var(--space-3); }
.regulation-group:target h2 { scroll-margin-top: var(--space-4); }
.regulation-table td:first-child { min-width: 11em; }
.regulation-table td:last-child { white-space: nowrap; }
/* Below 40em a row is a block (task B1b2): number, title, then the date with its column name in
   front (hidden from screen readers, which announce the column header from the table roles). */
@media (max-width: 39.99em) {
  .regulation-table, .regulation-table tbody, .regulation-table tr, .regulation-table td { display: block; width: 100%; }
  .regulation-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .regulation-table tr { border: 1px solid var(--c-line); border-top-width: 0; padding: var(--space-2) var(--space-3); }
  .regulation-table tr:first-child { border-top-width: 1px; }
  .regulation-table td { border: 0; padding: var(--space-1) 0; min-width: 0; }
  .regulation-table td:first-child { min-width: 0; }
  .regulation-table td:first-child > a { font-weight: 700; }
  .regulation-table td:last-child { white-space: normal; }
  .regulation-table td[data-label]:not(:empty)::before { content: attr(data-label) ": "; content: attr(data-label) ": " / ""; color: var(--c-ink-soft); }
}
.regulation-table__repealed { color: var(--c-alert-urgent-bg); font-weight: 700; }

/* Meetings & Notices from 60em (task B1b2): the page's text and link groups (the old calendar
   sidebar) beside the upcoming meetings and the months, instead of below them. */
@media (min-width: 60em) {
  .meetings-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); column-gap: var(--space-7); align-items: start; }
  .meetings-layout__upcoming, .meetings-layout__months { grid-column: 1; }
  .meetings-layout__aside { grid-column: 2; grid-row: 1 / span 2; }
  .meetings-layout__aside h2 { font-size: var(--fs-h3); }
  .meetings-layout__aside > :first-child, .meetings-layout__aside .prose > :first-child { margin-top: 0; }
}
.meetings-layout__upcoming > .page-section:first-child { margin-top: 0; }
/* The same two columns for /news (task B1b3): the months, and the year lists in the right column
   where the old page's sidebar stood. */
@media (min-width: 60em) {
  .side-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); column-gap: var(--space-7); align-items: start; }
  .side-layout__aside h2 { font-size: var(--fs-h3); }
  .side-layout__aside > .page-section:first-child { margin-top: 0; }
  .side-layout--aside-first > .side-layout__aside { grid-column: 2; grid-row: 1; }
  .side-layout--aside-first > .side-layout__main { grid-column: 1; grid-row: 1; }
  .side-layout--aside-first > .side-layout__main > .page-section:first-child { margin-top: 0; }
  .side-layout__aside .prose > :first-child { margin-top: 0; }
}
/* A meeting's day, a second line of its h1 (task B1b2). */
.title-band__sub { display: block; margin-top: var(--space-1); font-size: var(--fs-h3); font-weight: 600; color: var(--c-ink-soft); }
/* A short table (committee members) as wide as the text, not the page (task B1b2). */
.table-scroll--measure { max-width: var(--measure); }

/* The Forms page (task 11e2): the same category links as the Regulations page, and the tables. */
.form-table tbody th { min-width: 12em; background: none; font-weight: 700; }
.form-table__note { margin-top: var(--space-2); font-weight: 400; }
.form-table__text p, .form-table__note p { margin: 0; }
.form-table__text p + p, .form-table__note p + p { margin-top: var(--space-2); }
.form-table__links { margin: 0; padding: 0; list-style: none; }
.form-table__links li + li { margin-top: var(--space-2); }
.form-table__links + .form-table__text { margin-top: var(--space-2); }
/* A code citation ("4VAC20-1180-10", "28.2-302.10") stays on one line instead of breaking at its
   hyphen (task B1b3); the Form column is wide enough for "Adobe (PDF)" on one line. */
.form-table td:last-child a { white-space: nowrap; }
.form-table thead th:nth-child(2) { width: 8em; }
/* Phones and tablets (task B1b3, as the Regulation Index in B1b2): each form is a block, name
   first, then each cell under its column name, instead of a four-column table that scrolls
   sideways (at 768px the Authority column was out of sight). */
@media (max-width: 59.99em) {
  .form-table, .form-table tbody, .form-table tr, .form-table th, .form-table td { display: block; width: 100%; }
  .form-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .form-table tr { border: 1px solid var(--c-line); border-top-width: 0; padding: var(--space-2) var(--space-3); }
  .form-table tbody tr:first-child { border-top-width: 1px; }
  .form-table tbody th, .form-table td { border: 0; padding: var(--space-1) 0; min-width: 0; }
  .form-table td:empty { display: none; }
  .form-table td[data-label]::before { content: attr(data-label); content: attr(data-label) / ""; display: block; font-size: var(--fs-small); font-weight: 700; color: var(--c-ink-soft); }
}

/* The Contact page (task 11f): the three "On this page" links (the filter-nav__list look), the
   staff table and its sort links. A sorted column's heading carries an arrow after its words. */
.page-toc { margin: 0 0 var(--space-4); }
.page-section[id] { scroll-margin-top: var(--space-4); }
.staff-table th a { display: inline-block; min-height: 44px; padding-block: var(--space-2); color: inherit; font-weight: 700; }
/* The arrow is decoration (the link's hidden words say how it is sorted): empty alternative text. */
.staff-table th[aria-sort="ascending"] a::after { content: " \2191"; content: " \2191" / ""; }
.staff-table th[aria-sort="descending"] a::after { content: " \2193"; content: " \2193" / ""; }
.staff-table td:last-child { white-space: nowrap; }
/* Task B1b4. Below 40em the four columns did not fit (the Division column was cut off at 375), so
   each person is a block: name on the first line, division and phone under it. The heading row
   stays visible as a row of sort links ("Click the headers to sort the table" in the staff note);
   the explicit table roles in the template keep the table announced as one. */
@media (max-width: 39.99em) {
  .staff-table, .staff-table thead, .staff-table tbody, .staff-table tr, .staff-table th, .staff-table td { display: block; }
  .staff-table thead tr { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding: 0 var(--space-3); border: 1px solid var(--c-line); background: var(--c-tint); }
  .staff-table thead th { border: 0; padding: 0; background: none; }
  .staff-table tbody tr { display: flex; flex-wrap: wrap; column-gap: 0.3em; border: 1px solid var(--c-line); border-top-width: 0; padding: var(--space-2) var(--space-3); }
  .staff-table td { border: 0; padding: 0; }
  .staff-table td:nth-child(-n+2) { font-weight: 700; }
  .staff-table td:nth-child(n+3) { flex-basis: 100%; }
  .staff-table td:empty { display: none; }
}
/* The offices: two columns from 60em, each office kept whole, instead of one 1,700px column with
   the right half of the screen empty. The main office (Site settings) and its map and hours (the
   first paragraph of the "offices" text) stay together, as do the "Law Enforcement / Field
   Offices:" label and the first field office. Column order is reading order. */
@media (min-width: 60em) {
  .contact-offices { columns: 2; column-gap: var(--space-5); }
  .contact-offices > * { max-width: none; break-inside: avoid; }
  .contact-offices > p:first-child { margin-bottom: 0; }
  .contact-offices > p:first-child, .contact-offices > p:has(> strong:only-child) { break-after: avoid; }
}
@media print {
  .page-toc, .staff-table th a::after { display: none; }
}