/* =========================================================================
   KEELE STRATEGY - DESIGN SYSTEM
   Editorial, calm, high-contrast. Think GOV.UK's clarity crossed with an
   Apple newsroom feature: large type, generous whitespace, almost no
   decoration. Colour is reserved almost entirely for theme labels, so it
   carries real meaning instead of being purely aesthetic.
   ========================================================================= */

:root {
  /* ---- Colour: a restrained editorial palette ---- */
  --ink: #17181C;
  --ink-soft: #43454C;
  --paper: #FBFAF7;
  --paper-raised: #FFFFFF;
  --line: #E3E0D8;
  --line-strong: #C9C5B8;
  --brand: #16233F;         /* deep academic navy - primary */
  --brand-tint: #E9ECF2;
  --accent: #B9762E;        /* warm ochre - calls to action, small accents */
  --accent-ink: #7A4E1D;
  --keele-yellow: #EBCD2E;  /* accent in keele.ac.uk icons */
  --keele-navy: #271E3D;    /* logo and icon navy */
  --focus: #1857B8;

  /* ---- Type scale ---- */
  /* Microsite decision (Oct 2026): sans-serif throughout - headings, sub-titles, quotes and figures -
     to keep the strategy site bold and modern. (Was the keele.ac.uk Palatino stack:
     Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif.) */
  --font-display: Arial, Helvetica, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;
  --font-outline: "Arial Black", "Arial Bold", Arial, Helvetica, sans-serif; /* VI headline face, used as outline only */

  --step--1: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  --step-3:  clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  --step-4:  clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem);
  --step-5:  clamp(3rem, 2.1rem + 3.8vw, 4.8rem);

  --space-1: 0.5rem;
  --space-2: 0.85rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;

  --content-max: clamp(38rem, 68vw, 64rem);
  --wide-max: 82rem;
  --radius: 10px;

  /* ---- Motion (19 October 2026) ----
     One set of values for the whole site, taken from the approved homepage
     (css/home.css, js/home.js). See docs/motion.md for the three rules:
     arrive (one movement per page), travel (the diagonal, only when you
     change page), read (nothing moves unless the reader makes it). */
  --ease-out: cubic-bezier(.2, .7, .2, 1);    /* arrivals: the homepage lockup and titles */
  --ease-scene: cubic-bezier(.45, 0, .55, 1); /* scene changes: the homepage wipes (ease-in-out) */
  --dur-ui: 200ms;        /* hovers, focus, small state changes */
  --dur-content: 500ms;   /* content appearing: photographs, panels */
  --dur-arrive: 900ms;    /* a page title arriving */
  --dur-travel: 700ms;    /* moving from one page to the next */
  --rise: 16px;           /* how far arriving text travels */
  --lift: 46px;           /* how far leaving text travels (homepage copy exits) */
  /* No overshoot or bounce anywhere. */
}

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
  color: var(--ink);
}
h1 { font-size: var(--step-5); font-weight: 500; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-family: var(--font-body); font-weight: 700; }

/* ---- Outline display titles (VI): heavy Arial, uppercase, stroke only.
   Page titles (every h1, chapter/priority banners) and the home section
   headings. Stroke colour follows `color` via --outline-colour; set the
   fill transparent only where text-stroke is supported, and fall back to
   solid text in Windows high-contrast (forced colours) mode. */
h1, .outline-title {
  --outline-colour: var(--brand);
  color: var(--outline-colour);
  font-family: var(--font-outline);
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
}
@supports (-webkit-text-stroke: 1px black) {
  h1, .outline-title {
    color: transparent;
    -webkit-text-stroke: max(1.25px, 0.024em) var(--outline-colour);
  }
}
@media (forced-colors: active) {
  h1, .outline-title { color: CanvasText; -webkit-text-stroke: 0; }
}
h2.outline-title { font-size: var(--step-3); line-height: 1.02; }

p { margin: 0 0 var(--space-3); max-width: 78ch; }
p.lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 55ch; }

a { color: var(--brand); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:not(.button):not(.card):not(.chip):not(.nav-link):not(.tab):not(.menu-link):not(.priority-card):not(.theme-card):not(.stage-next):not(.site-title):not(.ref-link) { text-decoration: underline; }
a:hover { color: var(--focus); }

ul, ol { padding-left: 1.3em; margin: 0 0 var(--space-3); }
li { margin-bottom: 0.4em; }

/* ---- Focus states: visible everywhere, never suppressed ---- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
a, button { cursor: pointer; }

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: 0.8em 1.2em;
  z-index: 1000;
  border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* Speed (20 Oct): the header and each chapter's content are written by
   js/main.js after the first paint. Hold the header's height, and keep a
   chapter page out of sight until its content is in, so nothing jumps as it
   arrives (Cumulative Layout Shift was 1.0 on phones). */
html:not(.page-home) #site-header:empty { height: var(--bar-h); }
#main:has(#chapter-main:empty) { visibility: hidden; }

/* Nothing in the content area should ever scroll sideways (e.g. the
   chapter-progress tooltips at the right edge). clip, not hidden: it
   doesn't create a scroll container, so sticky elements keep working. */
main { overflow-x: clip; }

/* ---- Layout helpers ---- */
.wrap { max-width: var(--wide-max); margin: 0 auto; padding: 0 var(--space-4); }
.prose { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-4); }
@media (max-width: 640px) {
  .wrap, .prose { padding: 0 var(--space-3); }
}

.stack > * + * { margin-top: var(--space-4); }

/* ---- Notice banner (was the "Development site" draft banner) ----
   Only rendered when SITE_NOTICE in js/main.js is non-empty. */
.draft-banner {
  background: var(--brand);
  color: #EDE7D9;
  font-size: var(--step--1);
  text-align: center;
  padding: 0.55em 1em;
  letter-spacing: 0.01em;
}
.draft-banner strong { color: #fff; }

/* ---- Header / nav ----
   Sticky and solid (no frosted glass - it went muddy over dark bands and let
   the page show through), with the Keele University logo (desktop and
   stacked mobile versions from keele.ac.uk). #site-header is only a mount
   point for the JS-built banner + header, so it is display:contents -
   otherwise it would be the sticky header's containing block and the
   header would scroll away with it.
   The sticky .site-header keeps a fixed footprint; the visible .header-bar
   inside it shortens once you scroll (.is-condensed, set in main.js), so
   the page never shifts. Where scroll-driven animations are supported a
   soft shadow fades in and a hairline tracks reading progress. */
:root {
  --bar-h: 76px; --bar-h-condensed: 56px;
  --logo-h: 44px; --logo-h-condensed: 32px;
}
@media (max-width: 640px) {
  :root { --bar-h: 64px; --bar-h-condensed: 52px; --logo-h: 42px; --logo-h-condensed: 34px; }
}
#site-header { display: contents; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--bar-h);
  pointer-events: none; /* the strip below a condensed bar lets clicks through */
}
.header-bar {
  position: relative;
  height: var(--bar-h);
  pointer-events: auto;
  background: var(--header-bg, var(--paper));
  border-bottom: 1px solid rgba(23,24,28,0.08);
  transition: height 0.28s var(--ease-out);
}
.site-header.is-condensed .header-bar { height: var(--bar-h-condensed); }
.header-bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left center; pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .header-bar { animation: header-lift linear both; animation-timeline: scroll(root); animation-range: 0 80px; }
    .header-bar::after { animation: header-progress linear both; animation-timeline: scroll(root); }
  }
}
@keyframes header-lift { to { box-shadow: 0 10px 30px -18px rgba(22,35,63,0.45); } }
@keyframes header-progress { to { transform: scaleX(1); } }
/* Three fixed columns (logo | nav | actions), not space-between: the logo
   shrinks when the bar condenses, and with space-between that pulled
   "Read the strategy" sideways. Equal outer columns keep the nav centred
   and still. */
.header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  height: 100%;
  padding: 0 var(--space-4);
  max-width: var(--wide-max);
  margin: 0 auto;
  gap: var(--space-3);
}
.site-title { display: flex; align-items: center; flex: none; justify-self: start; text-decoration: none; border-radius: 4px; }
.site-title picture { display: block; }
.site-logo { display: block; height: var(--logo-h); width: auto; transition: height 0.28s var(--ease-out); }   /* settles with the bar as it condenses (docs/motion.md: ease-out, no bounce) */
.site-header.is-condensed .site-logo { height: var(--logo-h-condensed); }
@media (prefers-reduced-motion: reduce) { .header-bar, .site-logo { transition: none; } }

.primary-nav { display: flex; align-items: center; justify-self: center; gap: var(--space-3); }
.nav-list { list-style: none; display: flex; gap: var(--space-2); margin: 0; padding: 0; align-items: center; position: relative; }
.nav-item { position: relative; display: flex; align-items: center; margin: 0; } /* flex + no margin: nothing pushing the link off-centre */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  height: 2.5rem;
  padding: 0 0.85em;
  line-height: 1;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
  transition: background-color 0.18s ease, color 0.18s ease;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.15em; right: 0.15em; bottom: 0.12em;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}
.nav-item:hover > .nav-link,
.nav-item.open > .nav-link,
.nav-link:hover { color: var(--brand); background: rgba(22,35,63,0.06); }
.nav-link::after { display: none; } /* pill hover replaces the underline */
.nav-item:hover > .nav-link::after,
.nav-item:focus-within > .nav-link::after,
.nav-item.open > .nav-link::after { transform: scaleX(1); }
.nav-caret { width: 0.7em; height: 0.7em; flex: none; transition: transform 0.2s ease; }
.nav-item:hover > .nav-link .nav-caret,
.nav-item:focus-within > .nav-link .nav-caret,
.nav-item.open > .nav-link .nav-caret { transform: rotate(180deg); }

.dropdown-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(23,24,28,0.14);
  min-width: 264px;
  padding: 0.4rem;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
/* invisible bridge so the pointer can cross the gap without the menu closing */
.dropdown-panel::before {
  content: "";
  position: absolute;
  top: -10px; left: 0; right: 0;
  height: 10px;
}
.nav-item.open > .dropdown-panel,
.nav-item:focus-within > .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover > .dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dropdown-panel { transition: none; }
  .nav-link::after, .nav-caret { transition: none; }
}
.dropdown-panel a {
  display: block;
  padding: 0.6em 0.7em;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--step--1);
}
.dropdown-panel a:hover { background: var(--brand-tint); }
.dropdown-panel .panel-sep { border: 0; border-top: 1px solid var(--line); margin: 0.35rem 0.7em; }
.dropdown-panel .panel-note { font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); padding: 0.5em 0.7em 0.2em; }

.header-actions { display: flex; align-items: center; justify-self: end; gap: 0.6rem; }
.icon-button {
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  height: 2.5rem;
  padding: 0 0.9em;
  line-height: 1;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.ui-icon { width: 1.05em; height: 1.05em; flex: none; }
.icon-button:hover { border-color: var(--brand); color: var(--brand); }

.menu-toggle { display: none; }

@media (max-width: 900px) {
  .primary-nav .nav-list { display: none; }
  .menu-toggle {
    display: inline-flex;
    background: none;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
  }
  .primary-nav.mobile-open .nav-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--paper-raised);
    border-bottom: 1px solid var(--line);
    padding: 0.6rem var(--space-3) 1rem;
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  }
  .primary-nav.mobile-open .nav-item { width: 100%; flex-direction: column; align-items: stretch; }
  .primary-nav.mobile-open .nav-link { justify-content: flex-start; padding: 0 0.5rem; }
  .primary-nav.mobile-open .dropdown-panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding-left: 0.5rem; }
  .primary-nav.mobile-open .dropdown-panel::before { display: none; }
}

/* Small phones: keep the header on one line (icons keep their labels for
   screen readers via the visually-hidden text) */
@media (max-width: 420px) {
  .header-inner { padding: 0 var(--space-3); gap: var(--space-1); }
  .header-actions .icon-button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---- Buttons ---- */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1.4em;
  border-radius: 8px;
  font-weight: 700;
  font-size: var(--step--1);
  text-decoration: none;
  border: 2px solid transparent;
}
.button-primary { background: var(--brand); color: #fff; }
.button-primary:hover { background: #0E1830; color: #fff; }

/* ---- Page hero + eyebrow ---- */
.hero {
  padding: var(--space-6) 0 var(--space-5);
  border-bottom: 1px solid var(--line);
}
.hero h1 { max-width: 16ch; }
.hero .lede { margin-top: var(--space-3); }
.eyebrow {
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--accent-ink);
  margin-bottom: var(--space-2);
}

/* ---- Section rhythm ---- */
.section { padding: var(--space-5) 0; }
.section-border-top { border-top: 1px solid var(--line); }
.section-head { max-width: 42rem; margin-bottom: var(--space-4); }

/* ---- Priority card grid (themes index, parked) ---- */
.priority-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 900px) { .priority-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .priority-grid { grid-template-columns: 1fr; } }

.priority-card {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-3) calc(var(--space-3) + 1.6rem);
  background: var(--paper-raised);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.priority-card::after {
  content: "→"; position: absolute; left: var(--space-3); bottom: var(--space-3);
  color: var(--accent-ink); font-weight: 700; line-height: 1;
  transition: transform 220ms ease;
}
.priority-card:hover, .priority-card:focus-visible {
  border-color: var(--line-strong); color: var(--ink);
  box-shadow: 0 14px 30px -18px rgba(22,35,63,0.35);
  transform: translateY(-2px);
}
.priority-card:hover::after, .priority-card:focus-visible::after { transform: translateX(4px); }
.priority-card:hover h3, .priority-card:focus-visible h3 { color: var(--brand); }
.priority-card .num { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink-soft); }
.priority-card h3 { font-size: var(--step-1); font-family: var(--font-display); font-weight: 600; margin: 0.35em 0 0.4em; transition: color 220ms ease; }
.priority-card p { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 0; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .priority-card:hover, .priority-card:focus-visible { transform: none; } }

/* ---- Theme chips / labels ---- */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5em; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.75em;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none !important;
  border: 1px solid transparent;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.chip:hover { filter: brightness(0.97); text-decoration: none; }

.design-note {
  background: #FBF6EA;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: var(--space-3);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.design-note strong { color: var(--ink); }

/* ---- Editorial photography ----------------------------------------------
   One lead photo per section (16:9) plus an optional gallery of tiles.
   Fades gently into view on scroll (opacity only - the photograph doesn't
   travel; the reader is reading, so nothing moves under them); respects prefers-reduced-motion via
   the global rule above, which collapses the transition to near-instant
   while keeping the same final, fully-visible state. */
.editorial-image, .editorial-gallery {
  margin: var(--space-5) 0;
}
.fade-in-image {
  opacity: 0;
  transition: opacity var(--dur-content) var(--ease-out);
}
.fade-in-image.is-visible { opacity: 1; }
.editorial-image-frame, .gallery-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: #0E1830;
}
.editorial-image-frame { aspect-ratio: 16 / 9; }
.editorial-image-frame img, .gallery-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.editorial-image figcaption, .editorial-gallery figcaption, .hero-photo figcaption {
  margin-top: 0.7em;
  font-size: var(--step--1);
  color: var(--ink-soft);
  max-width: 78ch;
}
.photo-credit { white-space: nowrap; }
.photo-credit::before { content: "· "; }
figcaption > .photo-credit:first-child::before { content: ""; }
.photo-credit-lines { display: block; white-space: normal; }
.photo-credit-lines::before, .stage-credit .photo-credit.photo-credit-lines::before { content: ""; }

/* Gallery: a 6-track grid so 2, 3, 4 and 5 photos all fill their rows.
   2 or 4 photos sit two-up; 3 sit three-up; 5 sit two-up then three-up. */
.gallery-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }
.gallery-tile { grid-column: span 3; aspect-ratio: 3 / 2; }
.g-3 .gallery-tile,
.g-5 .gallery-tile:nth-child(n+3),
.g-6 .gallery-tile { grid-column: span 2; aspect-ratio: 4 / 3; }
@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: var(--space-1); }
  .gallery-tile, .g-3 .gallery-tile, .g-5 .gallery-tile:nth-child(n+3), .g-6 .gallery-tile { grid-column: span 1; aspect-ratio: 4 / 3; }
  .g-3 .gallery-tile:first-child, .g-5 .gallery-tile:first-child { grid-column: span 2; aspect-ratio: 3 / 2; }
}

/* ---- Current-page nav highlighting ---- */
.dropdown-panel a[aria-current="page"] {
  background: var(--brand-tint);
  color: var(--brand);
  font-weight: 700;
}

/* ---- Chapter / long-form reading page ---- */
.chapter-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--step--1);
  color: var(--ink-soft);
  padding: 0.8em 0;
  border-bottom: 1px solid var(--line);
}
.chapter-progress { display: flex; gap: 2px; align-items: center; }
.chapter-progress a,
.chapter-progress span.active {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  text-decoration: none;
}
.chapter-progress a::before,
.chapter-progress span.active::before {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
}
.chapter-progress a:hover::before { background: var(--ink-soft); }
.chapter-progress a:hover { background: var(--brand-tint); }
.chapter-progress a:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.chapter-progress span.active::before { background: var(--brand); }

/* Small screens: the tooltips below are positioned outside the row and
   pushed the page wider than the viewport (sideways scroll on phones).
   Touch devices have no hover, and each segment keeps its aria-label,
   so the tooltips are simply switched off here. */
@media (max-width: 700px) {
  .chapter-nav { gap: 0.75em; }
  .chapter-progress { min-width: 0; }
  .chapter-progress [data-label]::after { display: none; }
}

/* Hover / focus tooltip on each progress segment - the section name, taken
   from the same data-label the nav already carries (no separate list). */
.chapter-progress a,
.chapter-progress span.active { position: relative; }
.chapter-progress [data-label]::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--brand);
  color: #fff;
  font-size: var(--step--1);
  line-height: 1.2;
  white-space: nowrap;
  padding: 0.35em 0.6em;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 20;
}
.chapter-progress a:hover[data-label]::after,
.chapter-progress a:focus-visible[data-label]::after,
.chapter-progress span.active:hover[data-label]::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .chapter-progress [data-label]::after { transition: opacity 0.12s ease; transform: translateX(-50%); }
}

/* Guiding principles strip (priority pages) - links to their full wording in the Introduction */
.principles-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 0.9em;
  margin: 0 0 var(--space-4); padding: 0.6em 0.9em;
  border: 1px solid var(--line); border-radius: 8px; background: var(--brand-tint);
  text-decoration: none; color: var(--ink-soft); font-size: var(--step--1);
}
.principles-strip:hover { border-color: var(--brand); }
.principles-strip-label { font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.principles-strip-names { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; font-weight: 700; color: var(--ink); }
.principles-strip .sep { color: var(--line-strong); }

.chapter-footer-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.chapter-link { text-decoration: none; color: var(--ink); max-width: 45%; }
.chapter-link .dir { font-size: var(--step--1); color: var(--ink-soft); font-weight: 700; }
.chapter-link .title { display:block; font-family: var(--font-display); font-size: var(--step-1); margin-top: 0.2em; }
.chapter-link.next { text-align: right; margin-left: auto; }

/* ---- Theme page ---- */
.theme-hero { padding: var(--space-5) 0 var(--space-4); border-bottom: 1px solid var(--line); }
.theme-hero .theme-pill { display:inline-flex; align-items:center; gap:0.5em; padding: 0.4em 1em; border-radius: 999px; font-weight: 700; font-size: var(--step--1); margin-bottom: var(--space-3); }

.thread-diagram {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding: var(--space-3);
  background: var(--paper-raised);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.thread-node {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 0.6em 0.9em;
  font-size: var(--step--1);
  font-weight: 600;
  background: var(--paper);
}
.thread-arrow { align-self: center; color: var(--ink-soft); }

.theme-commitment-list { margin-top: var(--space-4); }
.grouped-priority { margin-bottom: var(--space-4); }
.grouped-priority h3 { font-size: var(--step-0); font-family: var(--font-body); color: var(--ink-soft); border-bottom: 1px solid var(--line); padding-bottom: 0.5em; margin-bottom: var(--space-2); }

.commitment-row {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}
.commitment-row:hover .commitment-row-title { color: var(--brand); text-decoration: underline; }
.commitment-row-title { font-family: var(--font-display); font-size: var(--step-1); display:block; margin-bottom: 0.3em; color: var(--ink); }
.commitment-row p { color: var(--ink-soft); margin-bottom: 0.6em; font-size: var(--step--1); }

/* ---- Search ---- */
.search-overlay {
  position: fixed; inset: 0; background: rgba(23,24,28,0.5);
  display: none; align-items: flex-start; justify-content: center;
  padding: 8vh 1rem 1rem; z-index: 200;
}
.search-overlay.open { display: flex; }
.search-panel {
  background: var(--paper-raised);
  border-radius: 14px;
  width: 100%; max-width: 640px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
  max-height: 78vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.search-input-row { display:flex; align-items:center; gap: 0.6em; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.search-input-row input {
  flex: 1; border: none; outline: none; font-size: var(--step-1);
  font-family: var(--font-body); background: transparent; color: var(--ink);
}
.search-input-row .close-search { background:none; border:1px solid var(--line-strong); border-radius: 6px; padding: 0.3em 0.6em; font-size: 0.8rem; }
.search-results { overflow-y: auto; padding: 0.5rem; }
.search-result {
  display: block; padding: 0.8em 0.8em; border-radius: 8px; text-decoration: none; color: var(--ink);
}
.search-result:hover, .search-result.active { background: var(--brand-tint); }
.search-result .sr-type { font-size: 0.8rem; font-weight: 700; color: var(--accent-ink); }
.search-result .sr-title { font-family: var(--font-display); font-size: var(--step-0); display:block; margin: 0.15em 0; }
.search-result .sr-snippet { font-size: var(--step--1); color: var(--ink-soft); }
.search-empty { padding: 2rem 1rem; text-align: center; color: var(--ink-soft); font-size: var(--step--1); }
.search-hint { padding: 0.6rem 1.2rem; font-size: 0.75rem; color: var(--ink-soft); border-top: 1px solid var(--line); }
kbd { background: var(--brand-tint); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0.1em 0.4em; font-size: 0.75em; font-family: var(--font-body); }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--line); padding: var(--space-5) 0 var(--space-4); margin-top: var(--space-5); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-4); }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-3); } }
.footer-grid h4, .footer-grid .footer-heading { font-weight: 700; font-size: var(--step-0); color: var(--ink-soft); font-family: var(--font-body); }
.footer-grid ul { list-style:none; padding:0; margin:0; }
.footer-grid a { color: var(--ink); text-decoration: none; font-size: var(--step--1); }
.footer-grid a:hover { text-decoration: underline; }
.footer-grid .footer-heading a { font-size: inherit; color: inherit; }
.footer-note { font-size: var(--step--1); color: var(--ink-soft); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.footer-more { margin-top: var(--space-2); font-size: var(--step--1); }
.footer-legal { list-style: none; padding: var(--space-4) 0 0; margin: var(--space-4) 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.footer-legal a,
.footer-cookie-settings { color: inherit; font: inherit; font-size: var(--step--1); text-decoration: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.footer-legal a:hover,
.footer-cookie-settings:hover { text-decoration: underline; }
.footer-legal a:focus-visible,
.footer-cookie-settings:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---- Small utility ---- */
.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;
}
.text-muted { color: var(--ink-soft); }
.mt-0 { margin-top: 0; }

/* ---- Password gate ----
   Everything else on the page is hidden via html.locked while this is
   showing (see the inline script at the top of <head> on every page,
   and js/auth.js which builds this panel and handles the unlock). */
html.locked #site-header,
html.locked #site-footer,
html.locked main {
  display: none !important;
}
#auth-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}
.auth-panel {
  max-width: 26rem;
  width: 100%;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-4);
  text-align: left;
  box-shadow: 0 24px 60px rgba(23,24,28,0.08);
}
.auth-panel h1 { font-size: var(--step-2); margin-bottom: 0.4em; }
.auth-panel .eyebrow { margin-bottom: var(--space-2); }
.auth-panel #auth-form {
  display: flex;
  gap: 0.6rem;
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.auth-panel input[type="password"] {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.75em 1em;
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  font-size: var(--step-0);
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
}
.auth-panel input[type="password"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.auth-panel .button { flex: none; }
.auth-error { color: #A02B2B; font-size: var(--step--1); font-weight: 600; margin: 0.8em 0 0; min-height: 1.2em; }

/* =========================================================================
   VARIANT C - long-form narrative + synced reference panel
   A continuous read down the main column; a sticky "On this page" panel
   alongside it lists every section with a one-line summary, highlights
   the section currently in view, and jumps to any section on click.
   ========================================================================= */

:root { --header-offset: 5.25rem; }

.chapter-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: var(--space-5);
  align-items: start;
  padding-top: var(--space-4);
  padding-bottom: var(--space-5);
}
@media (max-width: 960px) {
  .chapter-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .chapter-reference { order: -1; }
}

.chapter-main { min-width: 0; }

.long-section { padding-top: var(--space-4); scroll-margin-top: var(--header-offset); }
.long-section:first-of-type { padding-top: 0; }
.long-section h3 { margin-bottom: 0.6em; }
.long-section p:last-child { margin-bottom: 0; }

.pull-quote {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--accent);
  background: var(--brand-tint);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.pull-quote p { font-family: var(--font-display); font-size: var(--step-1); font-style: italic; margin-bottom: 0.5em; max-width: 48ch; }
.pull-quote cite { font-style: normal; font-size: var(--step--1); color: var(--ink-soft); }

.commitments-block { padding-top: var(--space-4); scroll-margin-top: var(--header-offset); border-top: 1px solid var(--line); margin-top: var(--space-4); }
.commitments-block > h2 { margin-bottom: 0.3em; }

.commitment-block {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: var(--header-offset);
}
.commitment-block:first-of-type { border-top: none; }
.commitment-kicker-row { display: flex; align-items: baseline; gap: 0.6em; flex-wrap: wrap; margin-bottom: 0.2em; }
.commitment-kicker-row .obj-num { font-family: var(--font-display); color: var(--accent-ink); font-size: var(--step-1); }
.commitment-block h3 { margin: 0 0 0.4em; font-size: var(--step-2); }
.commitment-block .intro { color: var(--ink-soft); font-size: var(--step-0); }
.commitment-block ul.we-will { margin: 0.8em 0 1em; padding-left: 1.2em; }
.commitment-block ul.we-will li { margin-bottom: 0.5em; }
.commitment-block ul.we-will li::marker { color: var(--accent); }

.measures-block { padding-top: var(--space-4); scroll-margin-top: var(--header-offset); border-top: 1px solid var(--line); margin-top: var(--space-4); }
.measures-block ul { padding-left: 1.2em; }
.measures-block li { margin-bottom: 0.6em; }

/* ---- Reference panel ---- */
.chapter-reference {
  position: sticky;
  top: var(--header-offset);
  max-height: calc(100vh - var(--header-offset) - var(--space-4));
  overflow-y: auto;
  padding: 0.2rem 0 var(--space-3);
}
@media (max-width: 960px) {
  .chapter-reference {
    position: static; max-height: none; overflow-y: visible; min-width: 0; /* grid item: let the strip scroll instead of widening the page */
    padding: var(--space-3); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius);
  }
}
.reference-heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.4em;
}
.reference-list { list-style: none; margin: 0; padding: 0; }
.reference-list li { margin: 0; }
.reference-list a {
  display: block;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.9rem;
  padding: 0.38em 0.6em 0.38em 0.85em;
  border-left: 2px solid var(--line);
  line-height: 1.35;
  transition: color 0.15s ease, border-color 0.15s ease;
}
/* Titles only, regular weight, no underlines: a quiet list you can scan.
   The current section is the one thing that stands out. */
.reference-list a .ref-title { display: block; font-weight: 400; }
.reference-list a:hover { color: var(--ink); border-left-color: var(--line-strong); }
.reference-list a:hover .ref-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.reference-list a.is-active { color: var(--brand); border-left-color: var(--brand); background: none; }
.reference-list a.is-active .ref-title { font-weight: 700; }
.reference-list .ref-group-label {
  font-size: 0.85rem; font-weight: 700;
  color: var(--ink-soft); padding: 1.4em 0 0.45em;
}
.reference-list .ref-group-label:first-child { padding-top: 0; }

/* Phones and tablets: "On this page" is a button that opens the full list
   (it used to be a sideways-scrolling strip, which didn't look scrollable).
   The button is added by js/main.js (initReferenceToggle); without it the
   list simply shows in full.
   The bar sticks under the condensed header as you read (20 Oct), so the
   sections are always one tap away, and it names the section you're in.
   The list opens as a panel over the text rather than pushing it down, and
   scrolls on its own if it's taller than the screen. Short screens (phones
   held sideways, 400% zoom) keep it in place: there a second sticky bar
   would leave too little room to read. */
.reference-toggle { display: none; }
@media (max-width: 960px) {
  .chapter-reference.has-toggle { padding: 0; position: relative; z-index: 90; }
  .chapter-reference.has-toggle .reference-heading { display: none; }
  .reference-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 1em; width: 100%;
    min-height: 3rem; padding: 0.75em 1.1em; margin: 0; border: 0; background: none; cursor: pointer;
    font: 700 1rem/1.3 var(--font-body); color: var(--ink); text-align: left;
  }
  .reference-toggle .ref-label { display: flex; align-items: baseline; min-width: 0; }
  .reference-toggle .ref-name { flex: none; white-space: nowrap; }   /* the section name gives way, never this */
  .reference-toggle .ref-count {
    font-weight: 400; color: var(--ink-soft); margin-left: 0.4em;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .reference-toggle .ref-count.is-current::before { content: "\00B7\00A0" / ""; }
  .reference-toggle svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-ui) var(--ease-out); }
  .reference-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .reference-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
  .chapter-reference.has-toggle .reference-list {
    position: absolute; top: 100%; left: -1px; right: -1px;
    padding: 0.25em 1.1em 1em;
    background: var(--paper-raised); border: 1px solid var(--line); border-top-color: var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 16px 32px -20px rgba(22,35,63,0.5);
    max-height: min(70vh, calc(100vh - var(--bar-h-condensed) - 5rem));
    max-height: min(70dvh, calc(100dvh - var(--bar-h-condensed) - 5rem));
    overflow-y: auto; overscroll-behavior: contain;
  }
  .chapter-reference.is-collapsed .reference-list { display: none; }
}
@media (max-width: 960px) and (min-height: 501px) {
  .chapter-reference.has-toggle { position: sticky; top: var(--bar-h-condensed); transition: box-shadow var(--dur-ui) var(--ease-out); }
  .chapter-reference.has-toggle.is-stuck { box-shadow: 0 10px 24px -18px rgba(22,35,63,0.55); }
  /* Jumping to a section, or tabbing to a link, lands below both bars
     (WCAG 2.4.11): the clearance moves from each target to the page. */
  html:has(.chapter-reference.has-toggle) { scroll-padding-top: calc(var(--bar-h-condensed) + 3rem + 0.5rem); }
  .chapter-layout:has(.chapter-reference.has-toggle) { --header-offset: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .reference-toggle svg { transition: none; } }

/* Anchor targets used elsewhere on the page (theme links, search results) */
[id] { scroll-margin-top: var(--header-offset); }


/* =====================================================================
   STATS GRID - "The open strategy process, by numbers"
   Uses existing design tokens. The new brand palette + the diagonal
   stripe (Debates motif) slot in by overriding --stat-stripe / --stat-
   stripe-alt (and --brand for the numerals) once the colours are agreed.
   ===================================================================== */
.stats-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--space-3);
}
.stat {
  position: relative;
  isolation: isolate;
  padding: var(--space-3);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.stat.is-visible { opacity: 1; transform: none; }
.stat-value, .stat-label { position: relative; z-index: 1; }
.stat-value {
  display: block;
  font-family: var(--font-outline);   /* solid heavy Arial, as the homepage figures */
  font-size: var(--step-4);
  font-weight: 900;
  line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.stat-label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--ink-soft);
}
@media (prefers-reduced-motion: reduce) {
  .stat { opacity: 1; transform: none; transition: none; }
}


/* (The holographic chapter banner was removed on 19 October 2026: chapter
   pages now open with the C2 masthead in css/chapter.css.) */

/* webstage.keele.ac.uk is not registered with OneTrust, so the banner would
   reappear on every page. Hide it there only (class set by an inline script in
   <head>). OneTrust is still loaded; www.keele.ac.uk is unaffected. */
html.ot-host-unregistered #onetrust-consent-sdk,
html.ot-host-unregistered .footer-cookie-settings { display: none !important; }

/* OneTrust's "floating rounded icon" banner is anchored left (left: 80px,
   width: 75%) to leave room for its cookie icon, so it sits off-centre.
   Centre it on tablet/desktop. On mobile OneTrust uses a full-width bottom
   sheet, which is already centred. */
@media (min-width: 641px) {
  #onetrust-banner-sdk.otFloatingRoundedIcon {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}