/* ==========================================================================
   UVision Initiative — Design System
   Custom 3-color scheme:
     #0171a1  brand primary   (clinical blue)
     #f8f8f6  brand secondary (neutral off-white canvas)
     #fcb600  brand accent    (UV yellow)

   Contrast policy: #fcb600 is 1.67:1 on #f8f8f6 and therefore NEVER carries
   text on a light surface. It is used structurally (fills, rules, markers)
   and as text only on the deep surface #04212b, where it measures 9.4:1.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* User-supplied palette ------------------------------------------------ */
  --user-color-1: #0171a1;
  --user-color-2: #f8f8f6;
  --user-color-3: #fcb600;

  --color-brand-primary: var(--user-color-1);
  --color-brand-secondary: var(--user-color-2);
  --color-brand-accent: var(--user-color-3);

  /* Derived surfaces ----------------------------------------------------- */
  --surface-base: var(--color-brand-secondary);
  --surface-raised: #ffffff;
  --surface-sunk: #f0f0ed;
  --surface-deep: #04212b;
  --surface-deep-alt: #062c39;

  /* Blue ramp ------------------------------------------------------------ */
  --blue-900: #023245;
  --blue-700: #015a80;
  --blue-600: var(--color-brand-primary);
  --blue-100: rgba(1, 113, 161, 0.09);
  --blue-200: rgba(1, 113, 161, 0.22);

  /* Text ----------------------------------------------------------------- */
  --text-primary: #0a1c24;            /* 16.5:1 on --surface-base */
  --text-muted: #4a5b63;              /*  6.5:1 on --surface-base */
  --text-faint: #627178;              /*  4.8:1 on --surface-base */
  --text-on-blue: #ffffff;            /*  5.4:1 on --blue-600     */
  --text-on-deep: #dce7ec;            /* 13.8:1 on --surface-deep */
  --text-on-deep-muted: #9db3bd;      /*  7.2:1 on --surface-deep */

  /* Structure ------------------------------------------------------------ */
  --hairline: rgba(10, 28, 36, 0.13);
  --hairline-strong: rgba(10, 28, 36, 0.28);
  --hairline-deep: rgba(220, 231, 236, 0.16);
  --hairline-deep-strong: rgba(220, 231, 236, 0.34);

  /* UV Index scale — WHO global solar UV index conventional colours.
     Note the Moderate band is the organisation's own accent yellow. */
  --uv-low: #3d8b5f;
  --uv-moderate: var(--color-brand-accent);
  --uv-high: #dd7326;
  --uv-very-high: #c8402f;
  --uv-extreme: #7451b8;

  /* Typography ----------------------------------------------------------- */
  --font-serif: "Newsreader", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Plus Jakarta Sans", "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Metrics -------------------------------------------------------------- */
  --wrap: 74rem;
  --wrap-narrow: 46rem;
  /* Width of the right-hand hero rail. The logo and the spec list below it
     both use this, so their left edges line up. */
  --hero-rail: 21rem;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --section-y: clamp(4rem, 8.5vw, 7.25rem);
  --radius-sm: 2px;
  --radius-md: 4px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--color-brand-primary); text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }

::selection {
  background: var(--color-brand-accent);
  color: var(--text-primary);
}

:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-brand-primary);
  color: var(--text-on-blue);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Typography scale
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 5.8vw, 4.75rem); }
h2 { font-size: clamp(1.9rem, 3.9vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.6rem); line-height: 1.2; }
h4 { font-size: 1.125rem; line-height: 1.3; }

p { text-wrap: pretty; }

.lede {
  font-size: clamp(1.0625rem, 0.98rem + 0.5vw, 1.3125rem);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 42ch;
}
.lede--wide { max-width: 60ch; }

.prose p + p { margin-top: 1.15em; }
.prose { color: var(--text-muted); max-width: 62ch; }
.prose strong { color: var(--text-primary); font-weight: 600; }

.serif-accent { font-family: var(--font-serif); font-style: italic; }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.75rem, 5vw, 4.25rem); }
.section--ruled { border-top: 1px solid var(--hairline); }

/* Grid and flex children default to min-width:auto, which lets wide content
   (tables, long tokens) push the whole document wider than the viewport.
   Every track child in this system is allowed to shrink instead. */
.split > *,
.hero-grid > *,
.pillars > *,
.steps > *,
.facts > *,
.index-item > *,
.footer-grid > *,
.person > * { min-width: 0; }

/* Asymmetric two-column: label rail + content. Deliberately not equal. */
.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4.5rem);
}
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }
  .split--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stack-sm > * + * { margin-top: 0.75rem; }
.stack > * + * { margin-top: 1.5rem; }
.stack-lg > * + * { margin-top: 2.5rem; }

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

/* --------------------------------------------------------------------------
   5. Eyebrow / badge / rule — the recurring structural marks
   -------------------------------------------------------------------------- */

/* Section headings now carry themselves. Sections are separated by the
   hairline rules and whitespace rather than a repeated kicker label. */
.section-head {
  max-width: 46rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.section-head .lede { margin-top: 0.9rem; }
.section-head--wide { max-width: none; }

/* Rectangular badge — never a mono pill. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--blue-200);
  background: var(--blue-100);
  color: var(--blue-700);
  padding: 0.3rem 0.6rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
}
.badge--accent {
  border-color: rgba(10, 28, 36, 0.18);
  background: var(--color-brand-accent);
  color: var(--text-primary);
}
.badge--deep {
  border-color: var(--hairline-deep-strong);
  background: transparent;
  color: var(--color-brand-accent);
}
.badge--quiet {
  border-color: var(--hairline-strong);
  background: transparent;
  color: var(--text-muted);
}

.rule { height: 1px; background: var(--hairline); border: 0; }
.rule--accent { height: 3px; width: 3.5rem; background: var(--color-brand-accent); }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.8rem 1.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn svg { width: 1rem; height: 1rem; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--color-brand-primary); color: var(--text-on-blue); }
.btn--primary:hover { background: var(--blue-900); }

/* Ink on yellow = 9.9:1 */
.btn--accent { background: var(--color-brand-accent); color: var(--text-primary); }
.btn--accent:hover { background: #e6a600; }

.btn--outline {
  border-color: var(--hairline-strong);
  color: var(--text-primary);
  background: transparent;
}
.btn--outline:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }

.btn--on-deep { border-color: var(--hairline-deep-strong); color: var(--text-on-deep); background: transparent; }
.btn--on-deep:hover { border-color: var(--color-brand-accent); color: var(--color-brand-accent); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Inline text link with a yellow underline that grows on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-brand-primary);
  padding-bottom: 0.2rem;
  background-image: linear-gradient(var(--color-brand-accent), var(--color-brand-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 1.75rem 2px;
  transition: background-size 0.25s var(--ease);
}
.link-arrow:hover { background-size: 100% 2px; }
.link-arrow svg { width: 0.9rem; height: 0.9rem; }
.link-arrow--deep { color: var(--color-brand-accent); }

/* --------------------------------------------------------------------------
   7. Navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--surface-base) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--hairline);
  transition: border-color 0.2s var(--ease);
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--hairline-strong); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--text-primary);
  flex: none;
}
/* The logo artwork is drawn on #f8f8f6, the same colour as the canvas, so it
   needs no blend mode. multiply would multiply that background against itself
   and render a visible grey box. The header uses the emblem only, with the
   wordmark set in type beside it so it stays legible at nav size. */
.brand-logo {
  height: 2.9rem;
  width: auto;
}
@media (max-width: 61.99rem) { .brand-logo { height: 2.5rem; } }

.brand-mark { width: 1.75rem; height: 1.75rem; color: var(--color-brand-primary); }
.brand-name {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}
.brand-name span { color: var(--color-brand-primary); }

.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.9rem);
}
.nav-menu a {
  position: relative;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-block: 0.4rem;
  transition: color 0.16s var(--ease);
  white-space: nowrap;
}
.nav-menu a:hover { color: var(--color-brand-primary); }

/* Active state is a yellow bar — structural, not text-coloured. */
.nav-menu a[aria-current="page"] { color: var(--text-primary); }
.nav-menu a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.15rem;
  height: 2px;
  background: var(--color-brand-accent);
}

.nav-menu .nav-cta {
  background: var(--color-brand-primary);
  color: var(--text-on-blue);
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
}
.nav-menu .nav-cta:hover { background: var(--blue-900); color: var(--text-on-blue); }
.nav-menu .nav-cta[aria-current="page"] { color: var(--text-on-blue); }
.nav-menu .nav-cta[aria-current="page"]::after {
  left: 0.9rem; right: 0.9rem; bottom: 0.35rem;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  background: none;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform 0.22s var(--ease), opacity 0.18s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 61.99rem) {
  .nav-toggle { display: flex; }
  .nav-menu {
    position: fixed;
    inset: 5rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface-base);
    border-bottom: 1px solid var(--hairline-strong);
    padding: 0.5rem var(--gutter) 1.75rem;
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    transform: translateY(-0.5rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  }
  .nav-menu[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-menu a {
    padding: 1rem 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--hairline);
  }
  .nav-menu a[aria-current="page"]::after { bottom: -1px; height: 2px; }
  .nav-menu .nav-cta {
    margin-top: 1.25rem;
    text-align: center;
    border-bottom: 0;
    padding: 0.95rem 1.1rem;
  }
  .nav-menu .nav-cta[aria-current="page"]::after { display: none; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); }

/* The headline runs the full measure of the page rather than sharing a track
   with the aside — at display sizes a narrow column forces breaks in the
   middle of a phrase. */
.hero-head { margin-bottom: clamp(2rem, 4.5vw, 3.25rem); }

/* Headline with the logo lockup alongside it */
.hero-head--split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 64rem) {
  .hero-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, var(--hero-rail)); }
}
.hero-logo {
  width: 100%;
  max-width: var(--hero-rail);
  height: auto;
  justify-self: end;
}
/* A hero with no side column shouldn't stack its own bottom padding on top of
   the next section's top padding. */
.hero-head:last-child { margin-bottom: 0; }
.hero:has(.hero-head:last-child) { padding-bottom: clamp(1rem, 2vw, 1.75rem); }

.hero-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 64rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.hero h1 { margin-block: 1.25rem 0; }
.hero h1 em {
  font-style: normal;
  color: var(--color-brand-primary);
  /* Yellow as a baseline stripe behind ink — never yellow text on light. */
  background-image: linear-gradient(var(--color-brand-accent), var(--color-brand-accent));
  background-repeat: no-repeat;
  /* Sits low, like a highlighter underline, so the stripe mostly clears the
     x-height. Where blue does overlap yellow it measures 3.05:1 — above the
     3:1 AA threshold for large text, and h1 is never below 41px. */
  background-position: 0 94%;
  background-size: 100% 0.22em;
  padding-inline: 0.08em;
}

.hero-aside {
  border-top: 2px solid var(--text-primary);
  padding-top: 1.5rem;
}
/* Sit in the same rail as the logo above, flush to the right edge, so the
   labels start level with the logo instead of reaching further left.
   An auto margin here would cancel the grid item's stretch and shrink the
   block to its content width, so alignment is done with justify-self. */
@media (min-width: 64rem) {
  .hero-aside {
    width: 100%;
    max-width: var(--hero-rail);
    justify-self: end;
  }
}

/* Big serif figure used for the founding date etc. — real data, not a fake KPI */
/* Label left, value flush right, so the value tracks the rule above it
   instead of leaving dead space at the end of the row. */
.figure-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--hairline);
}
.figure-line dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex: none;
}
.figure-line dd {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  text-align: right;
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   9. Deep band (full-bleed dark section)
   -------------------------------------------------------------------------- */

.band {
  background: var(--surface-deep);
  color: var(--text-on-deep);
  padding-block: var(--section-y);
}
.band h2, .band h3 { color: #ffffff; }
.band .prose { color: var(--text-on-deep-muted); }
.band .lede { color: var(--text-on-deep); }
.band .rule { background: var(--hairline-deep); }

/* Yellow IS legible here: 9.4:1 */
.band .accent-text { color: var(--color-brand-accent); }

.band-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: #ffffff;
  border-left: 3px solid var(--color-brand-accent);
  padding-left: clamp(1.25rem, 3vw, 2rem);
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   10. Index list — numbered hairline rows, the anti-card workhorse
   -------------------------------------------------------------------------- */

.index-list { border-top: 1px solid var(--hairline-strong); }

.index-item {
  display: grid;
  gap: 0.5rem 2rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--hairline);
  transition: background-color 0.2s var(--ease);
}
@media (min-width: 48rem) {
  .index-item { grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr); align-items: start; }
  /* Rows that are just a numbered title get the full measure instead of being
     squeezed into the narrow title column. */
  .index-item:not(:has(p)) { grid-template-columns: 3.5rem minmax(0, 1fr); }
}
.index-num {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  color: var(--color-brand-primary);
  padding-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.index-item h3 { letter-spacing: -0.012em; }
.index-item p { color: var(--text-muted); max-width: 56ch; }

.index-list--deep { border-top-color: var(--hairline-deep-strong); }
.index-list--deep .index-item { border-bottom-color: var(--hairline-deep); }
.index-list--deep .index-num { color: var(--color-brand-accent); }
.index-list--deep p { color: var(--text-on-deep-muted); }

/* --------------------------------------------------------------------------
   11. Pillar grid — dividers, not boxes
   -------------------------------------------------------------------------- */

.pillars {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline-strong);
}
@media (min-width: 46rem) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .pillars--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pillar {
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 46rem) {
  .pillar { padding-inline: clamp(1.5rem, 3vw, 2.5rem); }
  /* Every item in the left column sits flush left and carries the single
     divider; every item in the right column sits flush right. Keying off
     :first-child only aligned the top-left cell and indented the rest. */
  .pillars > .pillar:nth-child(odd) {
    padding-left: 0;
    border-right: 1px solid var(--hairline);
  }
  .pillars > .pillar:nth-child(even) { padding-right: 0; }
}

.pillar-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-brand-primary);
  margin-bottom: 0.9rem;
}
.pillar h3 { font-size: 1.25rem; margin-bottom: 0; }
.pillar p { color: var(--text-muted); font-size: 0.9375rem; margin-top: 0.5rem; }

/* Plain bulleted list. The rules between items read as a table and made the
   block look heavier than it is. */
.pillar ul {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}
.pillar li {
  font-size: 0.9375rem;
  color: var(--text-muted);
  padding-left: 1.1rem;
  position: relative;
}
.pillar li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  background: var(--color-brand-accent);
}

.pillars--deep { border-top-color: var(--hairline-deep-strong); }
.pillars--deep .pillar { border-bottom-color: var(--hairline-deep); border-right-color: var(--hairline-deep); }
.pillars--deep .pillar-icon { color: var(--color-brand-accent); }
.pillars--deep p, .pillars--deep li { color: var(--text-on-deep-muted); }
.pillars--deep li { border-top-color: var(--hairline-deep); }

/* --------------------------------------------------------------------------
   12. Data table — real semantic tables, no fake dashboards
   -------------------------------------------------------------------------- */

/* min-width:0 lets this shrink inside its grid track so the table scrolls
   within its own box instead of widening the page. */
.table-scroll { overflow-x: auto; min-width: 0; -webkit-overflow-scrolling: touch; }

.data-table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.data-table caption {
  text-align: left;
  font-size: 0.75rem;
  color: var(--text-faint);
  padding-bottom: 1rem;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: 0.95rem 1rem 0.95rem 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.data-table thead th {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: 0.75rem;
}
.data-table tbody tr:last-child td { border-bottom: 1px solid var(--hairline-strong); }
.data-table td:first-child { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.data-table td:last-child { color: var(--text-muted); padding-right: 0; }

.uv-swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  white-space: nowrap;
}
/* Band colours as classes rather than inline style attributes, so the CSP can
   forbid 'unsafe-inline' in style-src. */
.uv-swatch--low { --swatch: var(--uv-low); }
.uv-swatch--moderate { --swatch: var(--uv-moderate); }
.uv-swatch--high { --swatch: var(--uv-high); }
.uv-swatch--very-high { --swatch: var(--uv-very-high); }
.uv-swatch--extreme { --swatch: var(--uv-extreme); }

/* Small layout utilities that used to be inline styles */
.measure-60 { max-width: 60ch; }
.nowrap { white-space: nowrap; }
.field-pair {
  display: grid;
  gap: 0 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.uv-swatch::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  border-radius: 1px;
  background: var(--swatch, var(--color-brand-primary));
  outline: 1px solid rgba(10, 28, 36, 0.18);
  outline-offset: -1px;
}

/* --------------------------------------------------------------------------
   13. Fact strip
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline-deep-strong);
}
@media (min-width: 52rem) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fact {
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--hairline-deep);
}
@media (min-width: 52rem) {
  .fact { padding-inline: clamp(1.25rem, 2.5vw, 2rem); border-right: 1px solid var(--hairline-deep); }
  .fact:first-child { padding-left: 0; }
  .fact:last-child { border-right: 0; padding-right: 0; }
}
.fact-key {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  /* Safe default: blue reads at 5.09:1 should a fact strip ever sit on the
     light canvas. Yellow is opted into only on the deep surface below. */
  color: var(--color-brand-primary);
  display: block;
  margin-bottom: 0.75rem;
}
.band .fact-key { color: var(--color-brand-accent); } /* 9.4:1 on --surface-deep */
.fact p { color: var(--text-on-deep-muted); font-size: 0.9375rem; }
.fact cite {
  display: block;
  margin-top: 0.6rem;
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(220, 231, 236, 0.55);
}

/* --------------------------------------------------------------------------
   14. People
   -------------------------------------------------------------------------- */

/* Bio and portrait side by side, alternating sides down the page. */
.person {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
@media (min-width: 56rem) {
  .person { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); }
  /* Even entries put the portrait first, matching the source layout. */
  .person:nth-of-type(even) { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); }
  .person:nth-of-type(even) .person-bio { order: 2; }
  .person:nth-of-type(even) .person-figure { order: 1; }
}
.person:first-of-type { border-top: 1px solid var(--hairline-strong); }
.person:last-of-type { border-bottom: 0; }

.person-figure { margin: 0; position: sticky; top: 6rem; }
@media (max-width: 55.99rem) { .person-figure { position: static; } }

.person-figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: 6px;
  background: var(--surface-sunk);
}
.person-figure figcaption {
  margin-top: 0.85rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--text-primary);
}
.person-figure figcaption span {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-primary);
}

.person-name { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 0.35rem; }
.person-role {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.person-bio { color: var(--text-muted); max-width: 68ch; }
.person-bio p + p { margin-top: 1.1em; }
.person-bio strong { color: var(--text-primary); font-weight: 600; }

/* Hobbies read as a normal sentence, not a row of chips. */
.hobbies-line {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.9375rem;
  color: var(--text-muted);
}
.hobbies-line b {
  font-weight: 600;
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   14b. Photo gallery
   -------------------------------------------------------------------------- */

.gallery {
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}
@media (min-width: 48rem) {
  .gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gallery figure { margin: 0; }
.gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface-sunk);
}
.gallery figcaption {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   15. Steps
   -------------------------------------------------------------------------- */

.steps { display: grid; gap: 0; counter-reset: step; border-top: 1px solid var(--hairline-strong); }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.step {
  counter-increment: step;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 56rem) {
  .step { padding-inline: clamp(1.25rem, 2.5vw, 2rem); border-right: 1px solid var(--hairline); }
  .step:first-child { padding-left: 0; }
  .step:last-child { border-right: 0; padding-right: 0; }
}
.step::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  color: var(--color-brand-primary);
  margin-bottom: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--color-brand-accent);
  width: 2.25rem;
}
.step h3 { font-size: 1.1875rem; margin-bottom: 0.5rem; }
.step p { color: var(--text-muted); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */

.field { display: block; margin-bottom: 1.25rem; }
.field > span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.field .req { color: var(--color-brand-primary); }

.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  font-size: 0.9375rem;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 3px var(--blue-100);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--uv-very-high); }

.field-error {
  display: none;
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  color: var(--uv-very-high);
}
.field-error[data-visible="true"] { display: block; }

.form-note { font-size: 0.8125rem; color: var(--text-faint); margin-top: 1rem; }

.form-status {
  display: none;
  margin-top: 1.25rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-brand-accent);
  background: var(--surface-sunk);
  font-size: 0.9375rem;
}
.form-status[data-visible="true"] { display: block; }

/* --------------------------------------------------------------------------
   17. Contact rows
   -------------------------------------------------------------------------- */

.contact-list { border-top: 1px solid var(--hairline-strong); }
.contact-row {
  display: grid;
  gap: 0.35rem 2rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
@media (min-width: 40rem) { .contact-row { grid-template-columns: 9rem minmax(0, 1fr); } }
.contact-row dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.contact-row dd { font-size: 1.0625rem; margin: 0; }
.contact-row a { border-bottom: 2px solid var(--color-brand-accent); padding-bottom: 1px; }

.copy-btn {
  margin-left: 0.6rem;
  background: none;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.45rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  vertical-align: middle;
}
.copy-btn:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }

/* --------------------------------------------------------------------------
   18. Callout / CTA band
   -------------------------------------------------------------------------- */

.cta-band { border-top: 1px solid var(--hairline-strong); padding-block: var(--section-y); }
.cta-band h2 { max-width: 18ch; }

.callout {
  border-left: 3px solid var(--color-brand-accent);
  padding: 1.25rem 0 1.25rem 1.5rem;
  background: linear-gradient(90deg, rgba(252, 182, 0, 0.09), transparent 60%);
}
.callout p { color: var(--text-muted); font-size: 0.9375rem; }
.callout strong { color: var(--text-primary); }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--surface-deep);
  color: var(--text-on-deep);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.footer-grid { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 56rem) {
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 3rem; }
}
.site-footer .brand { color: #ffffff; }
.site-footer .brand-mark { color: var(--color-brand-accent); }
.site-footer .brand-name span { color: var(--color-brand-accent); }
.footer-tagline {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--text-on-deep-muted);
  max-width: 26ch;
}
.footer-col h2 {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li + li { margin-top: 0.6rem; }
.footer-col a, .footer-col span {
  font-size: 0.9375rem;
  color: var(--text-on-deep-muted);
  transition: color 0.16s var(--ease);
}
.footer-col a:hover { color: var(--color-brand-accent); }

.footer-base {
  border-top: 1px solid var(--hairline-deep);
  padding-block: 1.5rem 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-on-deep-muted);
}

/* --------------------------------------------------------------------------
   20. Motion
   -------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal[data-revealed="true"] {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   21. Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* --------------------------------------------------------------------------
   22. Interactive UV Index meter
   Progressive enhancement: hidden until script.js enables it. The table below
   holds the same information in the server-rendered HTML, so nothing here is
   required for the content to be readable or crawlable.
   -------------------------------------------------------------------------- */

.uv-meter {
  --uv-active: var(--color-brand-primary);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--hairline);
}
.uv-meter[hidden] { display: none; }

.uv-meter-label {
  display: block;
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.uv-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 34rem;
  background: transparent;
  /* Generous vertical padding gives the thumb a comfortable touch target. */
  padding-block: 0.9rem;
  cursor: pointer;
  display: block;
}
.uv-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--uv-low) 0%, var(--uv-low) 18%,
    var(--uv-moderate) 18%, var(--uv-moderate) 45%,
    var(--uv-high) 45%, var(--uv-high) 64%,
    var(--uv-very-high) 64%, var(--uv-very-high) 91%,
    var(--uv-extreme) 91%, var(--uv-extreme) 100%);
}
.uv-range::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--uv-low) 0%, var(--uv-low) 18%,
    var(--uv-moderate) 18%, var(--uv-moderate) 45%,
    var(--uv-high) 45%, var(--uv-high) 64%,
    var(--uv-very-high) 64%, var(--uv-very-high) 91%,
    var(--uv-extreme) 91%, var(--uv-extreme) 100%);
}
.uv-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 3px solid var(--text-primary);
  box-shadow: 0 1px 4px rgba(10, 28, 36, 0.3);
}
.uv-range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 3px solid var(--text-primary);
  box-shadow: 0 1px 4px rgba(10, 28, 36, 0.3);
}
.uv-range:focus-visible { outline: none; }
.uv-range:focus-visible::-webkit-slider-thumb { border-color: var(--color-brand-primary); box-shadow: 0 0 0 4px var(--blue-200); }
.uv-range:focus-visible::-moz-range-thumb { border-color: var(--color-brand-primary); box-shadow: 0 0 0 4px var(--blue-200); }

.uv-ticks {
  display: flex;
  justify-content: space-between;
  max-width: 34rem;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  margin-top: -0.35rem;
}

.uv-readout { margin-top: 1.5rem; }
.uv-readout-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.uv-readout-num {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.uv-readout-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
}
.uv-readout-cat::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 2px;
  background: var(--uv-active);
  outline: 1px solid rgba(10, 28, 36, 0.18);
  outline-offset: -1px;
}
.uv-readout-advice {
  margin-top: 0.6rem;
  color: var(--text-muted);
  max-width: 52ch;
}

/* Matching row in the reference table below */
.data-table tbody tr[data-active="true"] td { background: var(--blue-100); }
.data-table tbody tr[data-active="true"] td:first-child { font-weight: 700; }

/* --------------------------------------------------------------------------
   23. Touch targets (min 48px on coarse pointers)
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  .btn { min-height: 48px; }
  .nav-toggle { width: 48px; height: 48px; }
  .nav-menu a { min-height: 48px; display: flex; align-items: center; }
  .copy-btn { min-height: 36px; padding-inline: 0.7rem; }
  .field input, .field textarea, .field select { min-height: 48px; }
  .footer-col a { display: inline-block; padding-block: 0.35rem; }
}

.form-wrap { max-width: 44rem; }

.text-muted { color: var(--text-muted); }
.mt-sm { margin-top: 0.75rem; }
.mt { margin-top: 1.5rem; }
.mt-lg { margin-top: 2.5rem; }
.mb { margin-bottom: 1.5rem; }