html, body {
    font-family: "Manrope", Arial, sans-serif;
    font-size: 16px;   /* ~16px base */
    line-height: 1.45;
    margin: 0;
    color: #1a1a1a;
  }

  /* Headings use Cormorant, like Larken */
  h1, h2, h3, h4, h5, h6 {
    font-family: "Cormorant", "Times New Roman", Times, serif;
    font-weight: 600;       /* closest to Larken’s 600 */
    line-height: 1.2;
    margin: 0.6em 0 0.4em;  /* tighter vertical spacing */
  }

  /* Heading scale (matching uni h3 jump but adjusted spacing) */
  h1 { font-size: 3.2rem; line-height: 1.2; }  /* ~60px */
  h2 { font-size: 2rem;   line-height: 1.3; }  /* ~32px */
  h3 { font-size: 2.75rem;line-height: 1.3; }  /* ~44px */
  h4 { font-size: 2.2rem; line-height: 1.25; } /* ~35px */
  h5 { font-size: 1.25rem;line-height: 1.3; }  /* ~20px */
  h6 { font-size: 1.1rem; line-height: 1.3; }  /* ~18px */

  /* Optional “intro/lead” text */
  .intro {
    font-family: "Manrope", Arial, sans-serif;
    margin: 0.5em 0 1em;
  }


/* Breadcrumbs */
.breadcrumbs__list {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;

  font-family: "Manrope", Arial, sans-serif;
  font-size: 1rem;    /* ~16px base, grows to ~18px at ≥65em */
  line-height: 1.4;
  color: #555;
  gap: 0.25rem;
}

.breadcrumbs__list li {
  display: flex;
  align-items: center;
}

.breadcrumbs__list li + li::before {
  content: "›";       /* use a text chevron instead of SVG */
  margin: 0 0.5rem;
  color: #c59a00;     /* UoB gold */
}

.breadcrumbs__link {
  color: #0d0d0d;       /* nearly black */
  font-weight: 700;     /* bold */
  text-decoration: none;
  border-bottom: 2px solid transparent; /* invisible underline by default */
  display: inline-block;
  line-height: 1.4;
}

.breadcrumbs__link:hover {
  border-bottom-color: #0d0d0d; /* gold underline on hover */
  text-decoration: none;        /* prevent default underline */
}


/* === Step-down layout with distinct text/header widths === */
:root {
  /* Large-screen fixed measures  */
  --text-max-lg: 90ch;
  --head-max-lg: 130ch;

  /* Step-down measures */
  --text-max-md: 80ch;
  --head-max-md: 110ch;

  --text-max-sm: 60ch;
  --head-max-sm: 90ch;

  --text-max-xs: 52ch;
  --head-max-xs: 78ch;

  /* Gutters (left/right padding on the container) */
  --gutter-max: 3rem;      /* comfy on desktop */
  --gutter-min: 0.75rem;   /* minimum before width/size step */
  --gutter-tiny: 0.5rem;   /* ultra-small phones */

  /* Base font sizes */
  --font-sm: 16px;
  --font-md: 17px;
  --font-lg: 18px;
}

/* Make sections container-like; mobile-first baseline */
.headersection,
.textsection,
.breadcrumbs__list {
  box-sizing: border-box;
  width: auto;
  margin: 0 auto;
  padding-inline: clamp(var(--gutter-min), 0vw, var(--gutter-max));
      max-width: none;            /* let it span the container width */
}

.breadcrumbs__list {
  justify-content: flex-start;            /* ensure items are left-justified */
}


/* --- Large screens (≥ 75rem ≈ 1200px): fixed widths + comfy gutters --- */
@media (min-width: 79rem) {
  html { font-size: var(--font-lg); }
  .textsection    { max-width: var(--text-max-lg); }
  .headersection  { max-width: var(--head-max-lg); }
  .breadcrumbs__list { max-width: var(--head-max-lg); }
  .headersection,
  .textsection,
  .breadcrumbs__list { padding-inline: var(--gutter-max); }
  .intro { font-size: 1.2rem; line-height: 1.5; }
}

/* --- Mid screens (48rem–75rem ≈ 768–1200px):
       Keep widths fixed; gutters compress toward the minimum. --- */
@media (min-width: 48rem) and (max-width: 78.999rem) {
  html { font-size: var(--font-md); }
  .textsection    { max-width: var(--text-max-lg); }
  .headersection  { max-width: var(--head-max-lg); }
  .breadcrumbs__list { max-width: var(--head-max-lg); }
  .intro { font-size: 1.1rem; }

}

/* --- Small screens (< 48rem ≈ < 768px):
       Drop font size and reduce both widths one step. --- */
@media (max-width: 47.999rem) {
  html { font-size: var(--font-sm); }
  .textsection    { max-width: var(--text-max-sm); }
  .headersection  { max-width: var(--head-max-sm); }
  .breadcrumbs__list { max-width: var(--text-max-sm); }
  .headersection,
  .textsection,
  .breadcrumbs__list { padding-inline: var(--gutter-min); }
}

/* --- Tiny phones (< 28rem ≈ < 448px):
       Narrowest widths and very tight gutters. --- */
@media (max-width: 27.999rem) {
  .textsection    { max-width: var(--text-max-xs); }
  .headersection  { max-width: var(--head-max-xs); }
  .breadcrumbs__list { max-width: var(--head-max-xs); }
  .headersection,
  .textsection,
  .breadcrumbs__list { padding-inline: var(--gutter-tiny); }
}

/* Safety: prevent horizontal overflow from wide children */
img, video, iframe, table { max-width: 100%; height: auto; }