/* ==========================================================================
   components.css — the reusable component library
   Inspect this file before inventing a new component. Almost every layout in
   the site can be assembled from what is already here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */

.button {
  --button-fg: var(--colour-on-primary);
  --button-bg: var(--colour-primary);
  --button-border: var(--colour-primary);

  display: inline-flex;
  gap: var(--space-2xs);
  align-items: center;
  justify-content: center;
  padding: 0.9375rem 1.75rem;
  font-family: var(--font-navigation);
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--button-fg);
  text-align: center;
  background-color: var(--button-bg);
  border: var(--border-width) solid var(--button-border);
  border-radius: var(--control-radius);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing),
    border-color var(--duration-fast) var(--easing),
    color var(--duration-fast) var(--easing);
}

.button:hover {
  --button-bg: var(--colour-primary-hover);
  --button-border: var(--colour-primary-hover);
}

.button--secondary {
  --button-fg: var(--colour-text);
  --button-bg: transparent;
  --button-border: var(--colour-border-strong);
}

.button--secondary:hover {
  --button-fg: var(--colour-text);
  --button-bg: transparent;
  --button-border: var(--colour-text);
}

.button--accent {
  --button-bg: var(--colour-accent);
  --button-border: var(--colour-accent);
  --button-fg: var(--colour-on-accent);
}

.button--accent:hover {
  --button-bg: var(--colour-accent-hover);
  --button-border: var(--colour-accent-hover);
}

.button--large {
  padding: 1.125rem 2.25rem;
  font-size: 1.0625rem;
}

.button--block {
  inline-size: 100%;
}

.button[aria-disabled='true'],
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Text link with animated rule — the default editorial call to action
   -------------------------------------------------------------------------- */

.link {
  display: inline-flex;
  gap: var(--space-2xs);
  align-items: center;
  padding-block-end: 0.35em;
  font-family: var(--font-navigation);
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  color: var(--colour-text);
  background-image: linear-gradient(currentcolor, currentcolor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: color var(--duration-fast) var(--easing),
    background-size var(--duration) var(--easing);
}

.link:hover {
  color: var(--colour-accent);
  background-size: 100% 1px;
}

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

.link--arrow:hover::after {
  transform: translateX(0.28em);
}

.link--reveal {
  background-position: 0 100%;
  background-size: 0 1px;
}

.link--reveal:hover {
  background-size: 100% 1px;
}

.link--quiet {
  color: var(--colour-text-muted);
}

/* --------------------------------------------------------------------------
   Media and figures
   -------------------------------------------------------------------------- */

.media {
  position: relative;
  overflow: hidden;
  background-color: var(--colour-background-alt);
  border-radius: var(--media-radius);
}

.media > img,
.media > svg,
.media > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.media--zoom > img,
.media--zoom > svg {
  transition: transform var(--duration-slow) var(--easing-emphasis);
}

.media--zoom:hover > img,
.media--zoom:hover > svg,
a:hover .media--zoom > img,
a:hover .media--zoom > svg {
  transform: scale(1.035);
}

.media__scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim);
  pointer-events: none;
}

.media__caption,
.figure__caption {
  margin-block-start: var(--space-xs);
  font-family: var(--font-navigation);
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--colour-text-muted);
}

.figure {
  margin: 0;
}

/*
  Offset media: the image breaks out of its column and overlaps the adjacent
  content, giving pages an architectural, layered quality.
*/
.media--offset {
  margin-block-start: clamp(-6rem, -6vw, -2rem);
}

.media--inset {
  margin-inline-start: clamp(1rem, 6vw, 6rem);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/*
  A column, bottom-aligned: the hero content sits above the meta line, and both
  are pushed to the foot of the frame. Without an explicit direction the two
  in-flow containers become side-by-side columns and the meta line is pushed out
  of the frame, where overflow: hidden silently removes it.
*/
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: min(88vh, 54rem);
  padding-block: var(--space-3xl) var(--space-2xl);
  overflow: hidden;
  color: var(--colour-text-inverse);
  background-color: var(--colour-surface-inverse);
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/*
  Cover, never fit. Pinning the media to the frame rather than sizing it in
  percentages means it does not depend on .hero__media resolving a height, and
  max-*-size: none overrides the 100% cap the reset places on every replaced
  element. object-fit then crops the surplus axis, so a 16:9 video still fills a
  portrait hero instead of letterboxing under it.
*/
.hero__media img,
.hero__media svg,
.hero__media video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  max-block-size: none;
  object-fit: cover;
  object-position: center;
}

.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim);
}

.hero__inner {
  position: relative;
  z-index: var(--z-base);
  inline-size: 100%;
}

.hero__eyebrow {
  color: rgb(255 255 255 / 78%);
}

.hero__title {
  max-inline-size: 16ch;
  color: inherit;
}

.hero__lead {
  max-inline-size: 44ch;
  margin-block-start: var(--space-lg);
  color: rgb(255 255 255 / 82%);
}

.hero__actions {
  margin-block-start: clamp(2rem, 4vw, 3rem);
}

.hero__actions .button--secondary {
  --button-fg: #fff;
  --button-border: rgb(255 255 255 / 45%);
}

.hero__actions .button--secondary:hover {
  --button-fg: var(--colour-text);
  --button-bg: #fff;
  --button-border: #fff;
}

/*
  A meta strip pinned to the base of the hero. It is a sibling of .hero__inner,
  not a child, so it needs its own stacking context — .hero__media is absolutely
  positioned and would otherwise paint over it.
*/
.hero__footer {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  margin-block-start: clamp(3rem, 7vw, 6rem);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid rgb(255 255 255 / 22%);
  font-family: var(--font-navigation);
  font-size: var(--size-small);
  color: rgb(255 255 255 / 72%);
}

/* Light editorial hero used where a photographic hero would be too heavy. */
.hero--editorial {
  min-block-size: auto;
  padding-block: clamp(4rem, 9vw, 8rem) 0;
  color: var(--colour-text);
  background-color: var(--colour-background);
}

.hero--editorial .hero__title,
.hero--editorial .hero__lead {
  color: var(--colour-text);
}

.hero--editorial .hero__lead {
  color: var(--colour-text-muted);
}

/*
  Document hero — legal notices, the 404 and the style guide. These pages carry
  no imagery, and a hero with no media has nothing dark behind the inverse
  palette, so they keep the light ground and opt out of the remap in
  variables.css. Give one of them a hero image and it can drop the modifier.
*/
.hero--document {
  color: var(--colour-text);
  background-color: var(--colour-background);
  border-block-end: var(--rule-width) solid var(--colour-border);
}

.hero--document .hero__eyebrow {
  color: var(--colour-accent);
}

.hero--document .hero__title {
  max-inline-size: 20ch;
}

.hero--document .hero__lead {
  color: var(--colour-text-muted);
}

.hero--document .legal-meta {
  border-block-start-color: var(--colour-border);
  color: var(--colour-text-muted);
}

.hero--document .hero__actions .button--secondary {
  --button-fg: var(--colour-text);
  --button-border: var(--colour-border-strong);
}

.hero--document .hero__actions .button--secondary:hover {
  --button-fg: var(--colour-on-primary);
  --button-bg: var(--colour-primary);
  --button-border: var(--colour-primary);
}

/* --------------------------------------------------------------------------
   Page hero — the standard opening block for interior pages
   -------------------------------------------------------------------------- */

.page-hero {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5.5rem);
  border-block-end: var(--rule-width) solid var(--colour-border);
}

.page-hero__grid {
  display: grid;
  gap: var(--space-lg) var(--grid-gap);
  align-items: end;
}

.page-hero__title {
  max-inline-size: 17ch;
}

.page-hero__lead {
  max-inline-size: 44ch;
  color: var(--colour-text-muted);
}

.page-hero--inverse {
  color: var(--colour-text-inverse);
  background-color: var(--colour-surface-inverse);
  border-block-end: 0;
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.breadcrumbs {
  padding-block: var(--space-md);
  font-family: var(--font-navigation);
  font-size: var(--size-small);
  color: var(--colour-text-muted);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs__item {
  display: flex;
  gap: var(--space-2xs);
  align-items: center;
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: '/';
  color: var(--colour-border-strong);
}

.breadcrumbs a {
  color: var(--colour-text-muted);
  transition: color var(--duration-fast) var(--easing);
}

.breadcrumbs a:hover {
  color: var(--colour-accent);
}

.breadcrumbs [aria-current='page'] {
  color: var(--colour-text);
}

/* --------------------------------------------------------------------------
   Card — the editorial base card. No drop shadow, no heavy radius.
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  block-size: 100%;
  background-color: transparent;
  border-radius: var(--card-radius);
}

.card__media {
  margin-block-end: var(--space-xs);
}

.card__eyebrow {
  margin-block-end: 0;
}

.card__title {
  font-size: var(--size-h4);
}

.card__text {
  color: var(--colour-text-muted);
}

.card__footer {
  margin-block-start: auto;
  padding-block-start: var(--space-md);
}

/* Whole-card link target without nesting interactive elements. */
.card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.card--linked:hover .card__title {
  color: var(--colour-accent);
}

.card__title {
  transition: color var(--duration-fast) var(--easing);
}

/* Ruled card variant used inside .editorial-grid. */
.card--ruled {
  gap: var(--space-md);
}

.card--ruled .card__index {
  font-family: var(--font-navigation);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  color: var(--colour-accent);
}

/* Numbered feature used for process and capability lists. */
.feature {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: auto 1fr;
  align-items: start;
}

.feature__number {
  font-family: var(--font-heading);
  font-size: var(--size-h4);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.2;
  color: var(--colour-accent);
}

.feature__title {
  font-size: var(--size-h4);
}

.feature__text {
  margin-block-start: var(--space-2xs);
  color: var(--colour-text-muted);
}

/* --------------------------------------------------------------------------
   Case study card — image-led, overlapping caption
   -------------------------------------------------------------------------- */

.case-study {
  position: relative;
  display: grid;
  gap: var(--grid-gap);
  align-items: center;
}

.case-study__media {
  aspect-ratio: 4 / 3;
}

.case-study__title {
  max-inline-size: 22ch;
  margin-block: var(--space-2xs) var(--space-sm);
}

.case-study__result {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-width) solid var(--colour-border);
}

.case-study__result-item {
  min-inline-size: 7rem;
}

.case-study__result-value {
  font-family: var(--font-heading);
  font-size: var(--size-h3);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}

.case-study__result-label {
  margin-block-start: var(--space-3xs);
  font-family: var(--font-navigation);
  font-size: var(--size-small);
  color: var(--colour-text-muted);
}

/* --------------------------------------------------------------------------
   Article, news and social cards
   -------------------------------------------------------------------------- */

.article-card {
  position: relative;
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

.article-card__media {
  aspect-ratio: 3 / 2;
}

.article-card__category {
  font-family: var(--font-navigation);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--colour-accent);
}

.article-card__title {
  font-size: var(--size-h4);
  transition: color var(--duration-fast) var(--easing);
}

.article-card:hover .article-card__title {
  color: var(--colour-accent);
}

.article-card__summary {
  color: var(--colour-text-muted);
}

.article-card__meta {
  font-family: var(--font-navigation);
  font-size: var(--size-small);
  color: var(--colour-text-muted);
}

/* Horizontal listing row used on index pages with many entries. */
.article-row {
  position: relative;
  display: grid;
  gap: var(--space-md) var(--grid-gap);
  align-items: start;
  padding-block: var(--space-xl);
  border-block-start: var(--rule-width) solid var(--colour-border);
}

.article-row:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

.article-row:last-child {
  padding-block-end: 0;
}

.article-row__title {
  font-size: var(--size-h3);
  max-inline-size: 28ch;
  transition: color var(--duration-fast) var(--easing);
}

.article-row:hover .article-row__title {
  color: var(--colour-accent);
}

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  block-size: 100%;
}

.news-card__source {
  display: inline-flex;
  gap: var(--space-2xs);
  align-items: center;
  font-family: var(--font-navigation);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

.news-card__title {
  font-size: var(--size-h4);
  transition: color var(--duration-fast) var(--easing);
}

.news-card:hover .news-card__title {
  color: var(--colour-accent);
}

.social-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  block-size: 100%;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: var(--border-width) solid var(--colour-border);
  border-radius: var(--card-radius);
  transition: border-color var(--duration-fast) var(--easing);
}

.social-card:hover {
  border-color: var(--colour-border-strong);
}

.social-card__platform {
  display: flex;
  gap: var(--space-2xs);
  align-items: center;
  font-family: var(--font-navigation);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

.social-card__platform img,
.social-card__platform svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.social-card__body {
  color: var(--colour-text);
}

.social-card__footer {
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Tag / pill — used only for taxonomy, never as a button
   -------------------------------------------------------------------------- */

.tag {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  font-family: var(--font-navigation);
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
  border: var(--border-width) solid var(--colour-border);
  border-radius: var(--control-radius);
}

a.tag:hover {
  color: var(--colour-text);
  border-color: var(--colour-border-strong);
}

.tag--accent {
  color: var(--colour-accent);
  border-color: color-mix(in srgb, var(--colour-accent) 40%, transparent);
}

/* --------------------------------------------------------------------------
   Statistics
   -------------------------------------------------------------------------- */

.statistics {
  display: grid;
  gap: 0;
  border-block-start: var(--rule-width) solid var(--colour-border);
}

.statistic {
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  padding-inline-end: var(--space-md);
  border-block-end: var(--rule-width) solid var(--colour-border);
}

.statistic__value {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4.5vw, 3.75rem);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  letter-spacing: -0.035em;
}

.statistic__label {
  margin-block-start: var(--space-xs);
  max-inline-size: 24ch;
  font-family: var(--font-navigation);
  font-size: var(--size-small);
  color: var(--colour-text-muted);
}

/* --------------------------------------------------------------------------
   Accreditations
   -------------------------------------------------------------------------- */

.accreditations {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 2vw, 2rem);
  flex-wrap: nowrap;
  width: 100%;
  border-block-end: var(--rule-width) solid var(--colour-border);
}

.accreditation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  padding-block: clamp(1.25rem, 2vw, 2rem);
  padding-inline-end: 0;
}

.accreditation img {
  width: 100%;
  height: auto;
  max-height: 64px;
  object-fit: contain;
}

.accreditation__logo {
  display: block;
  width: auto;
  height: 64px;
  max-width: 180px;
  object-fit: contain;
  object-position: left center;
  margin-block-end: var(--space-md);
}

/* --------------------------------------------------------------------------
   Testimonial
   -------------------------------------------------------------------------- */

.testimonial {
  display: grid;
  gap: var(--grid-gap);
  align-items: center;
}

.testimonial__media {
  aspect-ratio: 4 / 5;
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gallery {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
   Accordion
   -------------------------------------------------------------------------- */

.accordion {
  border-block-start: var(--rule-width) solid var(--colour-border);
}

.accordion__item {
  border-block-end: var(--rule-width) solid var(--colour-border);
}

.accordion__trigger {
  display: flex;
  gap: var(--space-md);
  align-items: baseline;
  justify-content: space-between;
  inline-size: 100%;
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: var(--font-heading);
  font-size: var(--size-h4);
  line-height: 1.3;
  text-align: start;
  color: var(--colour-text);
  transition: color var(--duration-fast) var(--easing);
}

.accordion__trigger:hover {
  color: var(--colour-accent);
}

.accordion__icon {
  position: relative;
  flex: none;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  margin-block-start: 0.35em;
}

.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background-color: currentcolor;
  transition: transform var(--duration) var(--easing);
}

.accordion__icon::after {
  transform: rotate(90deg);
}

.accordion__trigger[aria-expanded='true'] .accordion__icon::after {
  transform: rotate(0deg);
}

.accordion__panel {
  padding-block-end: clamp(1.25rem, 2.5vw, 1.75rem);
  max-inline-size: var(--reading-width);
  color: var(--colour-text-muted);
}

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */

.timeline {
  display: grid;
  gap: 0;
  border-block-start: var(--rule-width) solid var(--colour-border);
}

.timeline__item {
  display: grid;
  gap: var(--space-xs) var(--grid-gap);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-block-end: var(--rule-width) solid var(--colour-border);
}

.timeline__year {
  font-family: var(--font-heading);
  font-size: var(--size-h3);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  color: var(--colour-text-muted);
}

.timeline__body {
  max-inline-size: 52ch;
}

/* --------------------------------------------------------------------------
   Call to action
   -------------------------------------------------------------------------- */

.cta {
  padding-block: clamp(4rem, 8vw, 7.5rem);
}

.cta__inner {
  display: grid;
  gap: var(--space-lg) var(--grid-gap);
  align-items: end;
}

.cta__title {
  max-inline-size: 15ch;
}

.cta__text {
  max-inline-size: 42ch;
  color: var(--colour-text-muted);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: center;
  justify-content: center;
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-lg);
  border-block-start: var(--rule-width) solid var(--colour-border);
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-navigation);
  font-size: var(--size-small);
  color: var(--colour-text-muted);
  border: var(--border-width) solid transparent;
  border-radius: var(--control-radius);
  transition: color var(--duration-fast) var(--easing),
    border-color var(--duration-fast) var(--easing);
}

.pagination__link:hover {
  color: var(--colour-text);
  border-color: var(--colour-border);
}

.pagination__link[aria-current='page'] {
  color: var(--colour-text);
  border-color: var(--colour-text);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--space-2xl);
}

.table {
  inline-size: 100%;
  font-size: var(--size-small);
  text-align: start;
  border-block-start: calc(var(--rule-width)*2) solid var(--colour-border-strong);
}

.table th,
.table td {
  padding: var(--space-xs) var(--space-md) var(--space-xs) 0;
  vertical-align: top;
  border-block-end: var(--rule-width) solid var(--colour-border);
}

.table th {
  font-family: var(--font-navigation);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  text-align: start;
  color: var(--colour-text-muted);
  white-space: nowrap;
}

.table td {
  color: var(--colour-text);
}

/* --------------------------------------------------------------------------
   Notes and warnings (used heavily in technical articles)
   -------------------------------------------------------------------------- */

.note {
  padding: var(--space-md) var(--space-lg);
  border-inline-start: 2px solid var(--colour-accent);
  background-color: var(--colour-background-alt);
  font-size: var(--size-small);
  line-height: 1.65;
}

.note--alt {
  border-inline-start: 2px solid var(--colour-border-strong);
  background-color: var(--colour-background);
}
.note--alt .note__label {
  color: var(--colour-accent);
}

.note__label {
  display: block;
  margin-block-end: var(--space-3xs);
  font-family: var(--font-navigation);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--colour-accent);
}

.note--warning {
  border-inline-start-color: var(--colour-warning);
}

.note--warning .note__label {
  color: var(--colour-warning);
}

.note--demo {
  border-inline-start-color: var(--colour-accent);
}


/* --------------------------------------------------------------------------
   Code
   -------------------------------------------------------------------------- */

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

:not(pre) > code {
  padding: 0.12em 0.34em;
  color: var(--colour-text);
  background-color: var(--colour-background-alt);
  border: var(--border-width) solid var(--colour-border);
  border-radius: var(--control-radius);
  word-break: break-word;
}

.code-block {
  position: relative;
  margin-block: var(--space-lg);
  background-color: #0e1319;
  border-radius: var(--card-radius);
  overflow: hidden;
}

.code-block__header {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem var(--space-md);
  border-block-end: 1px solid rgb(255 255 255 / 10%);
}

.code-block__label {
  font-family: var(--font-navigation);
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(246 243 238 / 62%);
}

.code-block__copy {
  padding: 0.3rem 0.7rem;
  font-family: var(--font-navigation);
  font-size: 0.75rem;
  color: rgb(246 243 238 / 78%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: var(--control-radius);
  transition: color var(--duration-fast) var(--easing),
    border-color var(--duration-fast) var(--easing);
}

.code-block__copy:hover {
  color: #fff;
  border-color: rgb(255 255 255 / 45%);
}

.code-block__copy:focus-visible {
  outline-color: #fff;
}

.code-block pre {
  margin: 0;
  padding: var(--space-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.65;
  color: #dbe3ea;
  tab-size: 2;
}

.code-block pre code {
  padding: 0;
  background: none;
  border: 0;
}

/* --------------------------------------------------------------------------
   Article layout — the technical documentation experience
   -------------------------------------------------------------------------- */

.article-header {
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
  border-block-end: var(--rule-width) solid var(--colour-border);
}

.article-header__category {
  color: var(--colour-accent);
}

.article-header__title {
  max-inline-size: 20ch;
}

.article-header__summary {
  max-inline-size: 52ch;
  margin-block-start: var(--space-lg);
  color: var(--colour-text-muted);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  margin-block-start: clamp(2rem, 4vw, 3rem);
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-width) solid var(--colour-border);
}

.article-meta__item {
  min-inline-size: 6rem;
}

.article-meta__label {
  display: block;
  font-family: var(--font-navigation);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

.article-meta__value {
  display: block;
  margin-block-start: var(--space-3xs);
  font-family: var(--font-navigation);
  font-size: var(--size-small);
}

/*
  The explicit minmax(0, 1fr) is required. Without it the single implicit column
  sizes to max-content, and .article-body's 44rem reading measure then forces the
  page wider than a narrow viewport. Columns are added in responsive.css.
*/
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.article-body {
  max-inline-size: var(--reading-width);
  font-size: 1.0625rem;
}

.article-body > * + * {
  margin-block-start: var(--space-md);
}

.article-body h2 {
  margin-block-start: clamp(2.75rem, 5vw, 4rem);
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-width) solid var(--colour-border);
  font-size: var(--size-h3);
}

.article-body h3 {
  margin-block-start: var(--space-xl);
  font-size: var(--size-h4);
}

.article-body ul,
.article-body ol {
  padding-inline-start: 1.35em;
}

.article-body li + li {
  margin-block-start: var(--space-2xs);
}

.article-body figure {
  margin-block: var(--space-lg);
}

.article-body blockquote {
  margin-block: var(--space-lg);
  padding-inline-start: var(--space-md);
  border-inline-start: 2px solid var(--colour-accent);
  font-family: var(--font-heading);
  font-size: var(--size-h4);
  font-style: italic;
  line-height: 1.35;
}

.article-body a {
  color: var(--colour-text);
  text-decoration: underline;
  text-decoration-color: var(--colour-accent);
  text-underline-offset: 0.2em;
}

.article-body a:hover {
  color: var(--colour-accent);
}

/* Table of contents rail */
.article-toc {
  font-family: var(--font-navigation);
  font-size: var(--size-small);
}

.article-toc__heading {
  padding-block-end: var(--space-xs);
  margin-block-end: var(--space-sm);
  border-block-end: var(--rule-width) solid var(--colour-border);
  font-family: var(--font-navigation);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

.article-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-toc__list li + li {
  margin-block-start: var(--space-2xs);
}

.article-toc__list li[data-level='3'] {
  padding-inline-start: var(--space-md);
}

.article-toc a {
  display: block;
  padding-block: 0.15rem;
  color: var(--colour-text-muted);
  transition: color var(--duration-fast) var(--easing);
}

.article-toc a:hover,
.article-toc a.is-active {
  color: var(--colour-text);
}

.article-toc a.is-active {
  font-weight: var(--weight-medium);
}

/* Previous / next navigation */
.article-nav {
  display: grid;
  gap: 0;
  border-block: var(--rule-width) solid var(--colour-border);
}

.article-nav__link {
  display: block;
  padding-block: var(--space-lg);
  padding-inline-end: var(--space-md);
}

.article-nav__direction {
  font-family: var(--font-navigation);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

.article-nav__title {
  margin-block-start: var(--space-2xs);
  font-family: var(--font-heading);
  font-size: var(--size-h4);
  transition: color var(--duration-fast) var(--easing);
}

.article-nav__link:hover .article-nav__title {
  color: var(--colour-accent);
}

.article-nav__link--next {
  text-align: end;
  padding-inline: var(--space-md) 0;
}

/* --------------------------------------------------------------------------
   Cookie preferences and banner
   -------------------------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-overlay);
  padding: var(--space-md) 0;
  color: var(--colour-text-inverse);
  background-color: var(--colour-surface-inverse);
  border-block-start: 1px solid var(--colour-border-inverse);
}

.cookie-banner__inner {
  display: grid;
  gap: var(--space-md);
  align-items: center;
}

.cookie-banner__text {
  max-inline-size: 60ch;
  font-size: var(--size-small);
  color: rgb(246 243 238 / 82%);
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.cookie-banner .button--secondary {
  --button-fg: #fff;
  --button-border: rgb(255 255 255 / 40%);
}

.cookie-dialog {
  inline-size: min(42rem, calc(100vw - 2rem));
  max-block-size: min(85vh, 50rem);
  padding: 0;
  color: var(--colour-text);
  background-color: var(--colour-surface);
  border: var(--border-width) solid var(--colour-border-strong);
  border-radius: var(--card-radius);
}

.cookie-dialog::backdrop {
  background-color: rgb(10 14 18 / 55%);
}

.cookie-dialog__header,
.cookie-dialog__footer {
  padding: var(--space-lg) clamp(1.5rem, 4vw, 2.5rem);
}

.cookie-dialog__header {
  border-block-end: var(--rule-width) solid var(--colour-border);
}

.cookie-dialog__body {
  padding: var(--space-md) clamp(1.5rem, 4vw, 2.5rem);
  overflow-y: auto;
}

.cookie-dialog__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  justify-content: flex-end;
  border-block-start: var(--rule-width) solid var(--colour-border);
}

.cookie-option {
  display: grid;
  gap: var(--space-2xs) var(--space-md);
  grid-template-columns: 1fr auto;
  padding-block: var(--space-md);
  border-block-end: var(--rule-width) solid var(--colour-border);
}

.cookie-option:last-child {
  border-block-end: 0;
}

.cookie-option__name {
  font-family: var(--font-heading);
  font-size: var(--size-h4);
}

.cookie-option__description {
  grid-column: 1 / -1;
  font-size: var(--size-small);
  color: var(--colour-text-muted);
}

/* Accessible switch built on a native checkbox. */
.switch {
  display: inline-flex;
  gap: var(--space-2xs);
  align-items: center;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
}

.switch__track {
  position: relative;
  flex: none;
  inline-size: 2.75rem;
  block-size: 1.5rem;
  background-color: var(--colour-border-strong);
  border-radius: 1rem;
  transition: background-color var(--duration-fast) var(--easing);
}

.switch__track::after {
  content: '';
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  background-color: #fff;
  border-radius: 50%;
  transition: transform var(--duration-fast) var(--easing);
}

.switch input:checked + .switch__track {
  background-color: var(--colour-success);
}

.switch input:checked + .switch__track::after {
  transform: translateX(1.25rem);
}

.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--colour-focus);
  outline-offset: 3px;
}

.switch input:disabled + .switch__track {
  opacity: 0.55;
  cursor: not-allowed;
}

.switch__label {
  font-family: var(--font-navigation);
  font-size: var(--size-small);
  color: var(--colour-text-muted);
}

/* --------------------------------------------------------------------------
   Style guide helpers
   -------------------------------------------------------------------------- */

.swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.swatch__chip {
  block-size: 5.5rem;
  border: var(--border-width) solid var(--colour-border);
  border-radius: var(--card-radius);
}

.swatch__name {
  font-family: var(--font-navigation);
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
}

.swatch__value {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--colour-text-muted);
}

.spec {
  padding: var(--space-lg);
  border: var(--border-width) dashed var(--colour-border-strong);
  border-radius: var(--card-radius);
}

.spec dl {
  margin: 0;
}

.spec dt {
  padding-block-start: var(--space-sm);
  font-family: var(--font-navigation);
  font-size: var(--size-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
  border-block-start: var(--rule-width) solid var(--colour-border);
}

.spec dt:first-of-type {
  padding-block-start: 0;
  border-block-start: 0;
}

.spec dd {
  margin: 0;
  padding-block: var(--space-3xs) var(--space-sm);
}

.spec dd:last-child {
  padding-block-end: 0;
}