/* portfolio.css — site-level additions for the personal portfolio.
 * The base files (components.css) are read-only base layers and stay untouched;
 * everything portfolio-specific that is reused across 2+ pages is promoted HERE
 * instead (same promotion rule as the base system). Brand-chrome blocks (the
 * masthead, the type discipline) are the only per-client divergence in this file.
 * Load order: tokens.contract.css → tokens.skipton.css → components.css → THIS FILE.
 * Only semantic tokens — no raw values except where noted (::backdrop, see note).
 */

/* ---------- Accessibility globals ---------- */

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 100;
  background: var(--color-bg-inverse);
  color: var(--color-fg-on-inverse-strong);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: 14px 20px;
  transition: top 160ms ease;
}
.skip-link:focus-visible { top: 12px; outline-offset: 0; }

/* ---------- Prose rhythm (base zeroes p margins) ---------- */

.max-prose p + p { margin-top: var(--spacing-md); }

/* ---------- Shared accent underline (used on every page) ---------- */

.hl {
  border-bottom: 0.12em solid var(--color-accent);
  padding-bottom: 0.02em;
  white-space: nowrap;
}

/* ---------- Cards with a thumbnail (work grid) ---------- */

.card.has-thumb { padding: 0; overflow: hidden; }
.card.has-thumb .card-body { padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl); }
.card-thumb { margin: 0; }
/* Thumbs are authored at exactly 800×500 (mounted product shots) — never re-crop them */
.card-thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid var(--color-border);
}
.card-link:hover .card-thumb img { opacity: 0.94; }

.card-kicker {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-bottom: var(--spacing-sm);
}
.card-foot {
  margin-top: var(--spacing-md);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* ---------- Cards: Skipton keeps the hairline ----------
   The chassis dropped the card outline for an earlier client; Skipton restores it.
   Hairlines, not shadows, separate white cards on the cream ground. The components.css default already ships
   1px solid --color-border, so this block only records the divergence. Hover keeps
   the border-strong lift. */
.card { border: 1px solid var(--color-border); }
.decision-card { border: 1px solid var(--color-border); }

/* Work grid: five cards spaced evenly — three across the top, two across the bottom */
.work-grid { grid-template-columns: repeat(6, 1fr); }
.work-grid > .card { grid-column: span 2; }
.work-grid > .card:nth-child(n+4) { grid-column: span 3; }

/* Two columns on small screens, prose trimmed — titles do the work */
@media (max-width: 900px) {
  .work-grid { grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
  .work-grid > .card,
  .work-grid > .card:nth-child(n+4) { grid-column: span 1; }
  .work-grid > .card:nth-child(5) { grid-column: 1 / -1; }
  .work-grid .card.has-thumb .card-body,
  .work-grid .card { padding: var(--spacing-md); }
  .work-grid .card.has-thumb { padding: 0; }
  .work-grid .card p { display: none; }
  .work-grid .card-foot { margin-top: var(--spacing-sm); font-size: 13px; }
  .work-grid .h3 { font-size: 19px; }
  .work-grid .card-kicker { font-size: 10.5px; letter-spacing: 0.1em; }
}
@media (max-width: 380px) {
  .work-grid { grid-template-columns: 1fr; }
}

/* ---------- Lineup rows as links (prototype index) ---------- */

a.lineup-item { color: inherit; }
.lineup-item.linked { grid-template-columns: 46px 1fr auto; }
.lineup-item .go {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-fg-muted);
  transform: translateX(0);
  transition: transform 200ms ease, color 200ms ease;
  align-self: center;
}
a.lineup-item:hover .lineup-title,
a.lineup-item:focus-visible .lineup-title { color: var(--color-accent); }
a.lineup-item:hover .go,
a.lineup-item:focus-visible .go { color: var(--color-accent); transform: translateX(4px); }
@media (max-width: 600px) {
  .lineup-item.linked { grid-template-columns: 36px 1fr auto; }
}

/* ---------- Case-study organisms (shared by all case pages) ---------- */

.crumb {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  padding: 10px 12px 10px 0;
  transition: color 160ms ease;
}
.crumb:hover { color: var(--color-accent); }

.cs-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); }
@media (max-width: 860px) { .cs-meta { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); } }
.cs-meta .cell { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-md); }
.cs-meta .n { font-family: var(--font-display); font-size: 22px; }
.cs-meta .l { color: var(--color-fg-muted); font-size: 13.5px; margin-top: 2px; }

.cs-h {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin: var(--spacing-xl) 0 var(--spacing-sm);
  scroll-margin-top: 90px; /* land below the sticky header on jump */
}

/* On this page — jump chips */
.cs-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--spacing-md);
}
.cs-jump a {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 11px 16px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color 160ms ease, color 160ms ease;
}
.cs-jump a:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Figures — click to zoom */
.cs-fig { margin: var(--spacing-lg) 0; }
.cs-fig img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-border);
}
.cs-fig a.fig-zoom { display: block; cursor: zoom-in; }
.cs-fig figcaption {
  font-size: 13.5px;
  color: var(--color-fg-muted);
  margin-top: var(--spacing-sm);
  line-height: 1.5;
}
/* tap-to-enlarge affordance — outline chip, same language as the nav chip */
.fig-hint {
  display: inline-block;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10.5px;
  color: var(--color-fg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  margin-left: 4px;
  white-space: nowrap;
  transition: border-color 160ms ease, color 160ms ease;
}
.fig-zoom:hover .fig-hint {
  border-color: var(--color-border-strong);
  color: var(--color-fg);
}

/* Design decisions — accordions (summary = the claim, body = the reasoning) */
.cs-acc { display: grid; gap: 10px; margin-top: var(--spacing-md); }
.cs-acc details {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  transition: border-color 160ms ease;
}
.cs-acc details:hover, .cs-acc details[open] { border-color: var(--color-border-strong); }
.cs-acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-fg);
}
.cs-acc summary::-webkit-details-marker { display: none; }
.cs-acc summary:hover { color: var(--color-accent); }
.cs-acc summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.cs-acc .mark { position: relative; flex: 0 0 auto; width: 14px; height: 14px; }
.cs-acc .mark::before, .cs-acc .mark::after {
  content: "";
  position: absolute;
  background: var(--color-accent);
  transition: transform 200ms ease;
}
.cs-acc .mark::before { top: 6px; left: 0; width: 14px; height: 2px; }
.cs-acc .mark::after  { top: 0; left: 6px; width: 2px; height: 14px; }
.cs-acc details[open] .mark::after { transform: scaleY(0); }
.cs-acc .acc-body { padding: 0 18px 18px; }
.cs-acc .acc-body p { color: var(--color-fg-muted); font-size: 16px; line-height: 1.6; }

/* ---------- Lightbox (native dialog, opened by portfolio.js) ---------- */

.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
}
.lightbox::backdrop {
  /* raw rgba: ::backdrop cannot reliably read custom properties (deep-ocean @ 88%) */
  background: rgba(38, 70, 83, 0.88);
}
.lightbox img {
  display: block;
  max-width: min(1800px, 94vw);
  max-height: 86dvh;
  width: auto;
  height: auto;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}
.lightbox-close {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-fg);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: var(--color-accent); color: var(--color-accent-fg); }

/* ---------- Mobile compaction (the scroll budget) ---------- */

@media (max-width: 640px) {
  .section { padding: var(--spacing-2xl) 0; }
  .section-sm { padding: var(--spacing-xl) 0; }
  .page-hero { padding: var(--spacing-2xl) 0 var(--spacing-xl); }
  .page-hero h1 { margin-bottom: 24px; }
  .hero-eyebrow { margin-bottom: 24px; }
  .hero-sub { margin-bottom: 28px; }
  .section-label { margin-bottom: var(--spacing-lg); }
  .grid { gap: var(--spacing-md); }
  .feature-headline { margin-bottom: var(--spacing-xl); }

  /* hero stats: side by side instead of stacked */
  .hero-side { flex-direction: row; gap: var(--spacing-lg); }
  .hero-stat { flex: 1; }
  .hero-stat .value { font-size: 24px; }
}

/* ---------- Nav emphasis: the system map is the exhibit ----------
   Styled as an outlined pill: same metrics as a nav CTA, colours set by the
   header context (the masthead block below recolours it for the dark band). */

.nav-links a[href="/system-map.html"] {
  opacity: 1;
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  padding: 9px 15px; /* 10px 16px minus the border, matching .nav-cta metrics */
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.nav-links a[href="/system-map.html"]:hover {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-fg);
}
/* on the page itself, stand down: read like the rest of the nav (amber active underline) */
.nav-links a[href="/system-map.html"].active,
.nav-links a[href="/system-map.html"].active:hover {
  background: transparent;
  border: 0;
  color: inherit;
  font-family: var(--font-body);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0.04em;
  padding: 6px 0;
}

/* mirror override: components.css pairs the accent fill with --color-fg on the
   nav CTA; text on an accent fill is --color-accent-fg (mint needs white) */
.nav-cta:hover,
.site-header.on-ocean .nav-cta { color: var(--color-accent-fg); }

/* ---------- Wrapper-page chrome (home/about/404) ----------
   Four static pages, hand-authored header/footer (no client.config.js + site.js):
   an <img> logo would need a hardcoded fill colour, breaking S1 (contract tokens
   only), so the wordmark is text, coloured via `color: inherit` from .nav-logo.
   No nav-toggle/hamburger either — five links simply wrap on narrow screens. */

.nav-logo.wordmark {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.2;
}
.nav-logo.wordmark .word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.01em;
  margin-left: 0;
}
.nav-logo.wordmark .tag {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--color-fg-muted);
}
@media (max-width: 640px) {
  .nav-logo.wordmark .tag { display: none; }
}

/* ---------- Skipton masthead — dark band, white wordmark + nav ----------
   The wrapper-page chrome wears Skipton's navy (#003B66, 86 uses in the clientlib
   stylesheet: hover states and dark bands). This is the one brand-chrome block that
   diverges per client: the chassis ran a light band with near-black nav because white
   text fails AA on a bright band (~2.5:1); Skipton is the inverse, a dark band
   carrying white nav at 11.55:1. It uses the INVERSE contract tokens only, so the
   pack (--color-bg-inverse -> #003B66) drives it with
   zero edits to the contract or components.css (S1). Logo is text / inline SVG via
   currentColor. */
.nav-logo.wordmark .logo-lockup {
  height: 32px;
  width: auto;
  display: block;
}
.site-header {
  background: var(--color-bg-inverse);
  border-bottom: 0;
  color: var(--color-fg-on-inverse-strong);
  backdrop-filter: none;
}
.site-header .nav-links a { color: var(--color-fg-on-inverse); opacity: 0.86; }
.site-header .nav-links a:hover,
.site-header .nav-links a.active { opacity: 1; color: var(--color-fg-on-inverse-strong); }
.site-header .nav-links a.active::after { background: var(--color-fg-on-inverse-strong); }
.site-header .nav-logo.wordmark .tag { color: var(--color-fg-on-inverse-muted); }
/* system-map link: a hairline-outlined pill reads on the dark band (an accent-outlined
   pill would be teal on teal). White text, hairline outline, filling to a faint wash. */
.site-header .nav-links a[href="/system-map.html"] {
  border-color: var(--color-on-dark-border);
  color: var(--color-fg-on-inverse-strong);
}
.site-header .nav-links a[href="/system-map.html"]:hover {
  border-color: var(--color-fg-on-inverse-strong);
  background: var(--color-inverse-wash);
  color: var(--color-fg-on-inverse-strong);
}

/* ---------- Skipton type discipline — display + headings at 700, body at 400 ----------
   Skipton runs one face (Roboto) and uses weight for hierarchy: headings at 700 stand
   in for the licensed Turret 1853 display face, body copy at 400. components.css (a
   read-only base mirror) sets display, h1-h3 and body copy to weight 500, which is
   neither. The discipline is resolved HERE in the brand layer so the base stays
   untouched (S4). 700 is the ceiling in the chrome. */
.display, .h1, .h2, .h3, .page-hero h1 { font-weight: 700; }
.hero-sub, .lede, .block-body, .lead, p { font-weight: 400 !important; }

/* ---------- Skipton pill buttons ----------
   skipton.co.uk runs 9999rem on every button. Bound here, not through --radius-sm,
   because that token also shapes toggles, chips and code tags that stay 4px. */
.btn { border-radius: 9999px; }

.nav-row.wrap { flex-wrap: wrap; row-gap: var(--spacing-sm); }
@media (max-width: 640px) {
  /* stack the masthead: logo on its own row, links wrap below within the container */
  .nav-row.wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
  .nav-links.wrap {
    flex-wrap: wrap;
    width: 100%;               /* fill the column so links wrap within the container */
    justify-content: flex-start;
    gap: 10px 18px;
    font-size: 13px;
  }
}

/* No footer-grid/columns on these pages — just the two legal lines, so the
   generous site-footer top padding (sized for a full grid) is trimmed. */
.site-footer.slim { padding: var(--spacing-2xl) 0; }

/* ---------- Text selection ---------- */
/* The read-only base mirror pairs the accent fill with --color-fg (dark ink on a
   dark teal highlight = unreadable when text is selected). Override to a readable,
   on-brand pair: the pressed teal fill + white ink at 15.06:1, legible on white and
   on the dark band. */
::selection { background: var(--color-accent-active); color: var(--color-accent-fg); }
::-moz-selection { background: var(--color-accent-active); color: var(--color-accent-fg); }

/* ---------- Back to top (injected by portfolio.js) ---------- */

.to-top {
  /* Colours flip via .on-dark (portfolio.js adds it when the button floats over the
     dark band): a teal chip on light sections, a white chip on dark ones, so the
     arrow always reads. --tt-fill / --tt-ink carry the current pair. */
  --tt-fill: var(--color-accent);               /* teal */
  --tt-fill-hov: var(--color-accent-hover);
  --tt-ink: var(--color-accent-fg);             /* white */
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--tt-ink);
  border-radius: var(--radius-sm);
  background: var(--tt-fill);
  color: var(--tt-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease,
              background 160ms ease, color 160ms ease, border-color 160ms ease;
  z-index: 40;
}
.to-top.on-dark {
  --tt-fill: var(--color-fg-on-inverse-strong); /* white/paper */
  --tt-fill-hov: var(--color-bg-surface);
  --tt-ink: var(--color-accent);                /* teal */
}
.to-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.to-top:hover { background: var(--tt-fill-hov); }
.to-top:focus-visible { outline: 2px solid var(--color-border-strong); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; transform: none; }
}

/* ---------- Platform screengrab gallery (Library page) ----------
   "I build products, not just emails." A numbered card grid of the platform's
   platform UI, opening the recoloured lightbox below. Proportionate: it supports
   the email-designer story, it does not replace it. Captioned as product UI. */

.grabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}
.grab {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.grab:hover { transform: translateY(-2px); border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.grab-figure { position: relative; margin: 0; background: var(--color-bg-inverse); }
.grab-figure img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--color-border); }
.grab-num {
  position: absolute;
  top: 10px; left: 10px;
  min-width: 28px; height: 28px;
  padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent);
  color: var(--color-accent-fg);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
}
.grab-cap {
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
}
.grab-cap .t { font-family: var(--font-display); font-size: 15px; color: var(--color-fg); display: block; margin-bottom: 4px; }
.grab-cap .d { font-size: 13.5px; line-height: 1.5; color: var(--color-fg-muted); }
.grab-zoom {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-top: 10px;
  display: inline-block;
}

/* ---------- Gallery lightbox (native <dialog>) ----------
   Same behaviour as the saulera results popup, recoloured to Skipton: the navy
   surface as scrim and controls, Roboto, the pack's radius, prev/next, an NN / NN
   counter and a close. */

.sbs-lightbox {
  border: none;
  padding: 0;
  margin: 0;
  max-width: 100vw;
  max-height: 100dvh;
  width: 100vw;
  height: 100dvh;
  background: transparent;
  overflow: hidden;
}
.sbs-lightbox::backdrop {
  /* raw rgba: ::backdrop cannot reliably read custom properties (#0F172A @ 93%) */
  background: rgba(15, 23, 42, 0.93);
}
.sbs-lb-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: 64px 76px;
}
.sbs-lb-figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sbs-lb-figure img {
  display: block;
  max-width: min(1400px, 90vw);
  max-height: 78dvh;
  width: auto; height: auto;
  border: 1px solid color-mix(in srgb, var(--color-white) 16%, transparent);
  border-radius: var(--radius-sm);
  background: var(--color-bg-inverse);
}
.sbs-lb-cap {
  color: var(--color-fg-on-inverse);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  max-width: 60ch;
}
.sbs-lb-cap b { font-family: var(--font-display); font-weight: 700; }
.sbs-lb-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-white) 28%, transparent);
  background: color-mix(in srgb, var(--color-bg-inverse) 60%, transparent);
  color: var(--color-fg-on-inverse);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 160ms ease, border-color 160ms ease;
}
.sbs-lb-btn:hover { background: color-mix(in srgb, var(--color-accent) 90%, transparent); border-color: var(--color-fg-on-inverse); }
.sbs-lb-prev { left: 16px; }
.sbs-lb-next { right: 16px; }
.sbs-lb-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--color-white) 28%, transparent);
  background: color-mix(in srgb, var(--color-bg-inverse) 60%, transparent);
  color: var(--color-fg-on-inverse);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.sbs-lb-close:hover { background: color-mix(in srgb, var(--color-accent) 90%, transparent); border-color: var(--color-fg-on-inverse); }
.sbs-lb-counter {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  color: var(--color-fg-on-inverse);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.12em;
  background: color-mix(in srgb, var(--color-bg-inverse) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-white) 22%, transparent);
  border-radius: 999px;
  padding: 6px 14px;
}
.sbs-lightbox :focus-visible { outline: 3px solid var(--color-fg-on-inverse); outline-offset: 2px; }
@media (max-width: 640px) {
  .sbs-lb-stage { padding: 56px 12px 64px; }
  .sbs-lb-btn { width: 44px; height: 44px; font-size: 20px; }
  .sbs-lb-prev { left: 6px; } .sbs-lb-next { right: 6px; }
}

/* ---------- dark-band section number (A1) ----------
   components.css paints .section-label .num on the feature band with --color-accent.
   In the Skipton pack that is #0062A8, which is 1.82:1 on the band's #003B66 and
   fails AA. Skipton's yellow is the highlight on the dark surface, so the brand token
   takes it here: #FEC639 on #003B66 is 7.35:1. The mirror stays
   byte-identical (S4); the divergence lives in this file. */
.feature-band .section-label .num { color: var(--color-brand); }

/* ---------- Page-hero title = exhibit title (2026-09-20, per Linards) ----------
   Home and About h1 carry the same size and weight as .ex-title on the exhibit pages
   (--type-h1, 400). Line-height 1.15 here and on .ex-title so the pair reads the same.
   Overrides the 700 set in the type-discipline block above; same specificity, later wins. */
.page-hero h1 {
  font-weight: 400;
  font-size: var(--type-h1);
  line-height: 1.15;
}

/* ---------- Phone tap targets (2026-09-20) ----------
   Masthead links measured 33px tall and in-copy links 19px at 375px. Pad them to a
   44px minimum hit area without moving the text. */
@media (max-width: 640px) {
  .nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 4px; }
  .how-item a, .footer-disclaimer a, .footer-col a, .lead a, .ex-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
  .ex-topbar .all { min-height: 44px; display: inline-flex; align-items: center; }
}