/* ==========================================================================
   JH Stat — jhstat.co.uk
   Main stylesheet
   Plain CSS. No frameworks, no build step.

   Contents
   1.  Custom properties (design tokens)
   2.  Reset and base elements
   3.  Accessibility helpers
   4.  Layout utilities
   5.  Typography
   6.  Buttons
   7.  Header and navigation
   8.  Hero
   9.  Cards, grids and panels
   10. Lists, tags and badges
   11. Publications
   12. Timeline / experience
   13. Forms
   14. Call to action band
   15. Footer
   16. Page-specific helpers (404, blog, privacy)
   17. Animations
   18. Responsive breakpoints
   19. Print styles
   ========================================================================== */


/* ==========================================================================
   1. Custom properties (design tokens)
   ========================================================================== */

:root {
  /* Brand colours — dark navy primary, teal/blue accent */
  --navy-900: #0a1a2f;
  --navy-800: #0f2440;
  --navy-700: #16314f;
  --navy-600: #1e3f63;
  --navy-500: #2c5480;

  --accent-700: #0b5d68;
  --accent-600: #0e7c8b;
  --accent-500: #128a9b;   /* primary accent (teal) */
  --accent-400: #1aa3b5;
  --accent-300: #7fd0da;
  --accent-100: #e3f4f6;

  --blue-600: #1f5fa8;
  --blue-100: #e8f0fa;

  /* Neutrals */
  --white: #ffffff;
  --grey-50: #f8fafb;
  --grey-100: #f1f4f7;
  --grey-200: #e4e9ef;
  --grey-300: #cfd7e0;
  --grey-400: #9aa7b5;
  --grey-500: #6b7885;
  --grey-600: #4d5a63;
  --grey-700: #333d47;
  --grey-800: #1f272f;

  /* Semantic tokens */
  --colour-text: #1f272f;
  --colour-text-muted: #4d5a63;
  --colour-heading: var(--navy-900);
  --colour-link: var(--accent-600);
  --colour-link-hover: var(--accent-700);
  --colour-bg: var(--white);
  --colour-bg-alt: var(--grey-50);
  --colour-border: var(--grey-200);
  --colour-border-strong: var(--grey-300);

  /* Typography */
  --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-serif: Georgia, "Times New Roman", Times, serif;

  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.9062rem;   /* ~14.5px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.0625rem;   /* 17px */
  --fs-lg: 1.1875rem;   /* 19px */
  --fs-xl: 1.375rem;    /* 22px */
  --fs-2xl: 1.75rem;    /* 28px */
  --fs-3xl: 2.125rem;   /* 34px */
  --fs-4xl: 2.75rem;    /* 44px */

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;

  /* Structure */
  --container: 1160px;
  --container-narrow: 820px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(10, 26, 47, 0.05);
  --shadow: 0 2px 8px rgba(10, 26, 47, 0.07);
  --shadow-md: 0 6px 20px rgba(10, 26, 47, 0.09);
  --shadow-lg: 0 14px 40px rgba(10, 26, 47, 0.12);

  --header-height: 74px;
  --transition: 180ms ease;
}


/* ==========================================================================
   2. Reset and base elements
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--colour-text);
  background-color: var(--colour-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--colour-border);
  margin: var(--space-7) 0;
}

/* Wraps a wide table so it scrolls within its own container rather than forcing
   the whole page to scroll sideways on a narrow screen. */
.table-scroll {
  overflow-x: auto;
  margin: var(--space-7) 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  vertical-align: top;
}

th {
  color: var(--colour-heading);
  font-weight: 600;
}

code,
kbd,
samp {
  font-family: "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.92em;
  background: var(--grey-100);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--accent-500);
  background: var(--grey-50);
  color: var(--colour-text-muted);
  font-style: italic;
}


/* ==========================================================================
   3. Accessibility helpers
   ========================================================================== */

/* Visible skip link for keyboard users */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 999;
  background: var(--navy-900);
  color: var(--white);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition);
}

.skip-link:focus {
  top: 0;
}

/* Strong, consistent keyboard focus states across the site */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Fallback for browsers without :focus-visible */
a:focus,
button:focus {
  outline-color: var(--accent-500);
}

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


/* ==========================================================================
   4. Layout utilities
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

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

.section {
  padding-block: var(--space-10);
}

.section--tight {
  padding-block: var(--space-8);
}

.section--alt {
  background: var(--colour-bg-alt);
  border-block: 1px solid var(--colour-border);
}

.section--navy {
  background: var(--navy-900);
  color: #dbe4ee;
}

.section--navy h2,
.section--navy h3 {
  color: var(--white);
}

.section-head {
  max-width: 760px;
  margin-bottom: var(--space-7);
}

.section-head--centred {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin-bottom: var(--space-3);
}

.section--navy .eyebrow {
  color: var(--accent-300);
}

.lead {
  font-size: var(--fs-lg);
  color: var(--colour-text-muted);
  line-height: 1.6;
}

.section--navy .lead {
  color: #c3d0dd;
}

.text-centre {
  text-align: center;
}

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-6 { margin-bottom: var(--space-6); }


/* ==========================================================================
   5. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  color: var(--colour-heading);
  font-weight: 700;
  line-height: 1.22;
  margin: 0 0 var(--space-4);
  letter-spacing: -0.015em;
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); text-transform: uppercase; letter-spacing: 0.06em; }

p {
  margin: 0 0 var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--colour-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--transition);
}

a:hover {
  color: var(--colour-link-hover);
  text-decoration-thickness: 2px;
}

strong {
  font-weight: 700;
  color: var(--colour-heading);
}

.section--navy strong {
  color: var(--white);
}

small,
.small {
  font-size: var(--fs-sm);
  color: var(--colour-text-muted);
}


/* ==========================================================================
   6. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--accent-600);
  border-color: var(--accent-600);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--accent-700);
  border-color: var(--accent-700);
  color: var(--white);
  box-shadow: var(--shadow);
}

.btn--secondary {
  background: var(--white);
  border-color: var(--navy-800);
  color: var(--navy-800);
}

.btn--secondary:hover {
  background: var(--navy-800);
  color: var(--white);
}

.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
  color: var(--white);
}

.btn--light {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy-900);
}

.btn--light:hover {
  background: var(--accent-100);
  border-color: var(--accent-100);
  color: var(--navy-900);
}

.btn--small {
  font-size: var(--fs-sm);
  padding: 0.55rem 1.05rem;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.btn-group--centred {
  justify-content: center;
}

/* Simple inline "read more" style link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.link-arrow::after {
  content: "\2192";
  transition: transform var(--transition);
}

.link-arrow:hover {
  border-bottom-color: currentColor;
}

.link-arrow:hover::after {
  transform: translateX(3px);
}


/* ==========================================================================
   7. Header and navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--colour-border);
  backdrop-filter: saturate(180%) blur(6px);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-height);
}

/* Brand / logo */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--navy-900);
  flex-shrink: 0;
}

.brand:hover {
  color: var(--navy-900);
  text-decoration: none;
}

.brand__mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand__name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand__strap {
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--grey-500);
  font-weight: 600;
}

/* Navigation */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: block;
  padding: 0.5rem 0.7rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy-800);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border-bottom: 2px solid transparent;
  transition: color var(--transition), background-color var(--transition),
    border-color var(--transition);
}

.nav__link:hover {
  color: var(--accent-600);
  background: var(--grey-100);
  text-decoration: none;
}

.nav__link[aria-current="page"] {
  color: var(--accent-700);
  border-bottom-color: var(--accent-500);
}

.nav__cta {
  margin-left: var(--space-3);
}

/* Mobile menu toggle button */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 46px;
  height: 42px;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--navy-900);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}


/* ==========================================================================
   8. Hero
   ========================================================================== */

.hero {
  position: relative;
  background: var(--navy-900);
  /* Very subtle depth only — no heavy gradients */
  background-image: linear-gradient(160deg, #0a1a2f 0%, #102842 62%, #123246 100%);
  color: #dfe8f1;
  padding-block: var(--space-11) var(--space-10);
  overflow: hidden;
}

/* Faint grid motif — evokes data without using stock imagery */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-9);
  align-items: center;
}

.hero__brandline {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-300);
  margin-bottom: var(--space-4);
}

.hero h1 {
  color: var(--white);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  margin-bottom: var(--space-5);
  /* Wide enough for the full positioning statement without wrapping into a
     narrow column; still short enough to keep a strong ragged edge. */
  max-width: 22ch;
}

.hero__text {
  font-size: var(--fs-lg);
  color: #c6d4e2;
  max-width: 56ch;
  margin-bottom: var(--space-6);
}

.hero__person {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: var(--space-6);
}

/* Circular headshot beside the founder's name in the hero */
.hero__avatar {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 12%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: var(--navy-700);
}

.hero__person-name {
  font-weight: 700;
  color: var(--white);
  font-size: var(--fs-md);
  margin: 0;
}

.hero__person-role {
  margin: 0;
  font-size: var(--fs-sm);
  color: #a9bccd;
}

/* Card of headline facts beside the hero copy */
.hero__panel {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.hero__panel h2 {
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent-300);
  margin-bottom: var(--space-5);
}

.hero__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.hero__facts li {
  display: grid;
  gap: 0.15rem;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hero__facts li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.hero__facts b {
  color: var(--white);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.hero__facts span {
  font-size: var(--fs-sm);
  color: #a9bccd;
}

/* Compact hero used on interior pages */
.page-hero {
  background: var(--navy-900);
  background-image: linear-gradient(160deg, #0a1a2f 0%, #12304c 100%);
  color: #dfe8f1;
  padding-block: var(--space-9);
}

.page-hero h1 {
  color: var(--white);
  margin-bottom: var(--space-4);
}

.page-hero p {
  font-size: var(--fs-lg);
  color: #c6d4e2;
  max-width: 68ch;
  margin: 0;
}

/* Breadcrumb */
.breadcrumb {
  font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
  color: #9fb3c6;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.4rem;
  color: rgba(255, 255, 255, 0.35);
}

.breadcrumb a {
  color: var(--accent-300);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--white);
  text-decoration: underline;
}


/* ==========================================================================
   9. Cards, grids and panels
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--space-5);
}

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

.grid--split {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.grid--sidebar {
  grid-template-columns: 1.7fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.card {
  background: var(--white);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition),
    border-color var(--transition);
  height: 100%;
}

.card--hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--accent-300);
}

.card h3 {
  margin-bottom: var(--space-3);
}

.card p:last-child {
  margin-bottom: 0;
}

.card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-100);
  color: var(--accent-700);
  font-weight: 800;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
}

/* Simple inline SVG icon holder */
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  background: var(--accent-100);
  color: var(--accent-700);
  margin-bottom: var(--space-4);
}

.card__icon svg {
  width: 24px;
  height: 24px;
}

.card--accent {
  border-top: 4px solid var(--accent-500);
}

.card--navy {
  background: var(--navy-800);
  border-color: var(--navy-700);
  color: #cdd9e5;
}

.card--navy h3 {
  color: var(--white);
}

/* Panel: lighter alternative to a card */
.panel {
  background: var(--grey-50);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  padding: var(--space-5);
}

.panel--note {
  border-left: 4px solid var(--accent-500);
  background: var(--accent-100);
  border-color: var(--accent-300);
}

.panel--placeholder {
  border: 1px dashed var(--colour-border-strong);
  background: var(--grey-50);
}

.panel--placeholder .placeholder-flag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-600);
  background: var(--grey-200);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.5rem;
  margin-bottom: var(--space-3);
}

/* Statistic strip */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.stats__item {
  text-align: center;
  padding: var(--space-5) var(--space-4);
  background: var(--white);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
}

.stats__value {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--navy-900);
  line-height: 1.1;
}

.stats__label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--colour-text-muted);
  margin-top: var(--space-2);
}

/* Portrait placeholder (about page) */
.portrait {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  border: 1px solid var(--colour-border);
  background: var(--grey-100);
  object-fit: cover;
  object-position: 50% 20%;
  box-shadow: var(--shadow);
}

.portrait-frame {
  display: grid;
  gap: var(--space-4);
}

.portrait-frame figcaption {
  font-size: var(--fs-sm);
  color: var(--colour-text-muted);
  max-width: 320px;
}


/* ==========================================================================
   10. Lists, tags and badges
   ========================================================================== */

/* Tick list */
.tick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.tick-list li {
  position: relative;
  padding-left: 1.7rem;
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--accent-500);
  border-bottom: 2px solid var(--accent-500);
  transform: rotate(-45deg);
}

.section--navy .tick-list li::before {
  border-color: var(--accent-300);
}

/* Plain bullet list with tighter spacing */
.list-tight {
  margin: 0;
  padding-left: 1.2rem;
}

.list-tight li {
  margin-bottom: var(--space-2);
}

/* Two-column list on wide screens */
.list-columns {
  columns: 2;
  column-gap: var(--space-7);
}

/* Tags */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy-700);
  background: var(--blue-100);
  border: 1px solid #d2e0f1;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
}

.tag--accent {
  color: var(--accent-700);
  background: var(--accent-100);
  border-color: #c3e6eb;
}

.badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--navy-800);
  color: var(--white);
}

.badge--muted {
  background: var(--grey-200);
  color: var(--grey-700);
}

/* Definition-style list used for credentials */
.deflist {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.deflist div {
  display: grid;
  gap: 0.15rem;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--colour-border);
}

.deflist div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.deflist dt {
  font-weight: 700;
  color: var(--colour-heading);
}

.deflist dd {
  margin: 0;
  color: var(--colour-text-muted);
  font-size: var(--fs-base);
}

/* Logo / affiliation strip placeholder */
.audience-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.audience-list li {
  background: var(--white);
  border: 1px solid var(--colour-border);
  border-left: 3px solid var(--accent-500);
  border-radius: var(--radius);
  padding: var(--space-4);
  font-weight: 600;
  color: var(--navy-800);
  box-shadow: var(--shadow-sm);
}


/* ==========================================================================
   11. Publications
   ========================================================================== */

.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--navy-800);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), color var(--transition),
    box-shadow var(--transition);
}

.profile-links a:hover {
  border-color: var(--accent-500);
  color: var(--accent-700);
  box-shadow: var(--shadow);
}

.pub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

.pub {
  background: var(--white);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--accent-500);
}

/* Year and publication-type labels sit on one wrapping row above the title. */
.pub__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.pub__year {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-700);
  background: var(--accent-100);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.55rem;
  margin-bottom: var(--space-3);
}

/* Inside a .pub__badges row the row itself owns the spacing. */
.pub__badges .pub__year {
  margin-bottom: 0;
}

.pub__type {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-600);
  background: var(--grey-100);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.55rem;
}

.pub__title {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-2);
}

/* The title is the primary link to the published record; keep it looking like a
   heading until hovered or focused so the list stays readable at a glance. */
.pub__title a {
  color: inherit;
  text-decoration: none;
}

.pub__title a:hover,
.pub__title a:focus-visible {
  color: var(--colour-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pub__authors {
  font-size: var(--fs-base);
  color: var(--colour-text-muted);
  margin-bottom: var(--space-2);
}

/* Marks Jamal Hossain within an author list without altering the printed text. */
.pub__me {
  color: var(--colour-text);
  font-weight: 700;
}

.pub__meta {
  font-size: var(--fs-sm);
  color: var(--grey-600);
  font-style: italic;
  margin-bottom: var(--space-3);
}

.pub__desc {
  font-size: var(--fs-base);
  margin-bottom: var(--space-3);
}

.pub__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* DOIs are long, unbreakable-looking strings; let them wrap rather than force
   the page to scroll sideways on a narrow screen. */
.pub__links a {
  overflow-wrap: anywhere;
}

/* Filter buttons (progressive enhancement — see js/script.js) */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.filter-btn {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--colour-border-strong);
  background: var(--white);
  color: var(--navy-800);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition);
}

.filter-btn:hover {
  border-color: var(--accent-500);
  color: var(--accent-700);
}

.filter-btn[aria-pressed="true"] {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--white);
}


/* Numbered research-interest list (research.html). Uses a CSS counter so the
   numbering stays correct if items are added or reordered. */
.interest-list {
  list-style: none;
  counter-reset: interest;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

.interest-list > li {
  counter-increment: interest;
  position: relative;
  background: var(--white);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--accent-500);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-6) var(--space-5) calc(var(--space-6) + 2.6rem);
}

.interest-list > li::before {
  content: counter(interest);
  position: absolute;
  left: var(--space-6);
  top: var(--space-5);
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-700);
  background: var(--accent-100);
  border-radius: 50%;
}

.interest-list h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--space-2);
}

.interest-list p {
  margin-bottom: 0;
  color: var(--colour-text-muted);
}

@media (max-width: 560px) {
  .interest-list > li {
    padding: var(--space-5);
    padding-top: calc(var(--space-5) + 2.4rem);
  }

  .interest-list > li::before {
    left: var(--space-5);
    top: var(--space-4);
  }
}


/* ==========================================================================
   12. Timeline / experience
   ========================================================================== */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-6);
  border-left: 2px solid var(--colour-border);
  display: grid;
  gap: var(--space-6);
}

.timeline > li {
  position: relative;
}

.timeline > li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-6) - 7px);
  top: 0.45em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-500);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 1px var(--accent-500);
}

.timeline__period {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-700);
  letter-spacing: 0.03em;
  margin-bottom: var(--space-1);
}

.timeline h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--space-2);
}

.timeline p {
  color: var(--colour-text-muted);
  font-size: var(--fs-base);
}


/* ==========================================================================
   13. Forms
   ========================================================================== */

.form {
  display: grid;
  gap: var(--space-5);
  background: var(--white);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field label {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--colour-heading);
}

.field .hint {
  font-size: var(--fs-xs);
  color: var(--grey-600);
  font-weight: 400;
}

.field .req {
  color: #a4262c;
  font-weight: 700;
}

/* Confirmation shown after the enquiry form hands a draft to the visitor's
   email application. Hidden until the handler fills it in. */
.form__status {
  border-left: 4px solid var(--accent-500);
  background: var(--accent-100);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  color: var(--colour-text);
}

.form__status[hidden] {
  display: none;
}

/* Without JavaScript the submit button cannot build the mailto: draft, so it
   is hidden and the direct-email fallback is shown in its place. */
.form__nojs {
  display: none;
}

html:not(.js) .form__nojs {
  display: block;
}

html:not(.js) .form__submit {
  display: none;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
select,
textarea {
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--colour-text);
  background: var(--white);
  border: 1px solid var(--colour-border-strong);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--grey-400);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(18, 138, 155, 0.16);
}

textarea {
  min-height: 150px;
  resize: vertical;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234d5a63' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px;
  padding-right: 2.4rem;
}

fieldset {
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin: 0;
}

legend {
  font-weight: 700;
  color: var(--colour-heading);
  padding-inline: var(--space-2);
}


/* ==========================================================================
   14. Call to action band
   ========================================================================== */

.cta {
  background: var(--navy-900);
  background-image: linear-gradient(160deg, #0a1a2f 0%, #123246 100%);
  color: #dbe6f0;
  padding-block: var(--space-9);
  text-align: center;
}

.cta h2 {
  color: var(--white);
  margin-bottom: var(--space-4);
}

.cta p {
  font-size: var(--fs-lg);
  color: #c3d0dd;
  max-width: 62ch;
  margin-inline: auto;
}


/* ==========================================================================
   15. Footer
   ========================================================================== */

.site-footer {
  background: var(--navy-900);
  color: #a9bccd;
  font-size: var(--fs-sm);
  padding-block: var(--space-8) var(--space-5);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--space-7);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer h2,
.site-footer h3 {
  color: var(--white);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: var(--space-4);
}

.footer-brand .brand__name {
  color: var(--white);
  font-size: 1.2rem;
}

.footer-brand p {
  max-width: 42ch;
  margin-top: var(--space-4);
  line-height: 1.6;
}

/* Independence disclaimer: present on every page, but deliberately quieter than
   the surrounding footer text. */
.footer-independence {
  font-size: var(--fs-sm);
  font-style: italic;
  opacity: 0.75;
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.site-footer a {
  color: #c3d0dd;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--white);
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-5);
  font-size: var(--fs-xs);
  color: #8ea3b6;
}

.footer-bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}


/* ==========================================================================
   16. Page-specific helpers
   ========================================================================== */

/* --- Blog --- */
.post-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--white);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition: box-shadow var(--transition), transform var(--transition);
}

.post-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--grey-600);
}

.post-card h3 {
  font-size: var(--fs-lg);
  margin: 0;
}

.post-card p {
  color: var(--colour-text-muted);
  font-size: var(--fs-base);
  margin: 0;
}

.post-card__footer {
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--grey-600);
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-list li {
  background: var(--white);
  border: 1px solid var(--colour-border-strong);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy-800);
}

/* --- 404 --- */
.error-page {
  padding-block: var(--space-11);
  text-align: center;
}

.error-code {
  font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 800;
  line-height: 1;
  color: var(--accent-100);
  letter-spacing: -0.04em;
  margin-bottom: var(--space-4);
}

/* --- Long-form text pages (privacy) --- */
.prose h2 {
  font-size: var(--fs-xl);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--colour-border);
}

.prose h2:first-of-type {
  margin-top: var(--space-6);
}

.prose h3 {
  font-size: var(--fs-md);
  margin-top: var(--space-6);
}

.prose ul,
.prose ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.3rem;
}

.prose li {
  margin-bottom: var(--space-2);
}

/* Table of contents */
.toc {
  background: var(--grey-50);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  padding: var(--space-5);
}

.toc h2 {
  font-size: var(--fs-base);
  margin: 0 0 var(--space-3);
  border: 0;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.toc ol {
  margin: 0;
  padding-left: 1.2rem;
  font-size: var(--fs-sm);
}

.toc li {
  margin-bottom: var(--space-2);
}

/* Accordion (details/summary) — no JavaScript required */
.accordion {
  display: grid;
  gap: var(--space-3);
}

.accordion details {
  background: var(--white);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.accordion summary {
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  font-weight: 700;
  color: var(--colour-heading);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--accent-600);
  flex-shrink: 0;
}

.accordion details[open] summary::after {
  content: "\2013";
}

.accordion summary:hover {
  background: var(--grey-50);
}

.accordion .accordion__body {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--colour-text-muted);
}


/* ==========================================================================
   17. Animations (subtle, and disabled when reduced motion is requested)
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease, transform 520ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* If JavaScript is unavailable, content must still be visible.
   script.js adds .js to <html>; without it the elements stay fully visible. */
html:not(.js) .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}


/* ==========================================================================
   18. Responsive breakpoints
   ========================================================================== */

@media (max-width: 1080px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

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

@media (max-width: 960px) {
  :root {
    --fs-3xl: 1.85rem;
    --fs-4xl: 2.25rem;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .hero h1 { max-width: none; }

  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--split,
  .grid--sidebar {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  /* --- Mobile navigation --- */
  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--colour-border);
    box-shadow: var(--shadow-md);
    padding: var(--space-4) var(--space-5) var(--space-6);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }

  .nav.is-open {
    display: flex;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .nav__link {
    padding: 0.85rem 0.5rem;
    font-size: var(--fs-md);
    border-bottom: 1px solid var(--colour-border);
    border-radius: 0;
  }

  .nav__link[aria-current="page"] {
    border-bottom-color: var(--accent-500);
  }

  .nav__cta {
    margin: var(--space-5) 0 0;
    width: 100%;
  }

  .site-header {
    position: sticky;
  }

  .header-inner {
    position: relative;
  }
}

@media (max-width: 700px) {
  :root {
    --space-10: 3.5rem;
    --space-11: 4rem;
  }

  body { font-size: var(--fs-base); }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

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

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

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

  .list-columns { columns: 1; }

  .btn { width: 100%; }
  .btn-group { flex-direction: column; }
  .profile-links a { width: 100%; justify-content: center; }

  .brand__strap { display: none; }

  .card,
  .post-card,
  .form { padding: var(--space-5); }

  .pub { padding: var(--space-5); }
}

@media (max-width: 420px) {
  .brand__name { font-size: 1.1rem; }
  .container { padding-inline: var(--space-4); }
}


/* ==========================================================================
   19. Print styles
   ========================================================================== */

@media print {
  :root {
    --colour-text: #000;
    --colour-heading: #000;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.4;
  }

  .site-header,
  .site-footer,
  .nav,
  .nav-toggle,
  .skip-link,
  .btn,
  .btn-group,
  .cta,
  .filter-bar,
  .breadcrumb {
    display: none !important;
  }

  .hero,
  .page-hero,
  .section--navy {
    background: #fff !important;
    color: #000 !important;
    padding-block: 0.5cm;
  }

  .hero::after { display: none; }

  .hero h1,
  .page-hero h1,
  .hero__text,
  .page-hero p,
  .section--navy h2,
  .section--navy h3,
  .section--navy .lead {
    color: #000 !important;
  }

  .card,
  .panel,
  .pub,
  .post-card,
  .form {
    border: 1px solid #999;
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

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

  /* Show destination of external links when printed */
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  h1, h2, h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  .section {
    padding-block: 0.6cm;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}