/*
 * styles.css — GOAT Parties
 *
 * Rebuilt on 2026-10-02 to look like the old WordPress site (Astra theme and
 * Spectra blocks), without the theme. Values live in tokens.css. Mobile
 * first; the layout widens at 40em and 58em. Three things differ from the
 * old site on purpose (James, 2026-10-02): the GOAT family fonts, a top bar
 * that stays on screen, and a photo header that fills the screen.
 */

/* ------------------------------ Base ------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The top bar stays on screen, so a jump to #somewhere stops below it. */
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  margin: 0;
  background: var(--colour-bg);
  color: var(--colour-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3 {
  margin: 0 0 var(--space-4);
  color: var(--colour-ink);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, var(--text-h1));
}

h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, var(--text-h2));
}

h3 {
  font-size: var(--text-h3);
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--colour-lilac);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--colour-on-lilac);
}

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

.skip-link {
  position: absolute;
  top: -10rem;
  left: var(--space-4);
  z-index: 20;
  padding: var(--space-3) var(--space-4);
  background: var(--colour-white);
  color: var(--colour-ink);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: var(--space-4);
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(50rem + 2 * var(--gutter));
}

.icon {
  width: 2.5rem;
  height: 2.5rem;
  fill: currentColor;
}

.emoji {
  font-style: normal;
}

/* ----------------------------- Buttons ----------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.9375rem 1.875rem;
  border: 1px solid var(--colour-on-lilac);
  border-radius: 1.875rem;
  background: var(--colour-lilac);
  color: var(--colour-on-lilac);
  font: inherit;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--colour-lilac-hover);
}

.button--large {
  min-width: 9.8rem;
  padding: 0.75rem 3.4rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-lead);
}

.button--square {
  border-radius: var(--radius-sm);
}

.button--dark {
  border-color: var(--colour-white);
  background: var(--colour-plum);
  color: var(--colour-white);
}

.button--dark:hover {
  background: var(--colour-night);
}

/* ------------------------------ Header ------------------------------ */

/* The top bar stays at the top of the screen on every page. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--colour-plum);
  background-image: var(--gradient-header);
  color: var(--colour-white);
  transition: box-shadow 200ms ease;
}

.site-header.is-scrolled {
  box-shadow: 0 6px 20px rgb(13 6 20 / 0.28);
}

/* Pages that open with a photo: the bar sits over the photo, clear, and
   turns solid once the page moves (as on the Paul Elsey site). main.js adds
   .is-scrolled and .is-open; without JavaScript it is simply solid.
   The solid colour is a layer underneath that fades in, because a gradient
   cannot be faded directly. It stays fully solid, never see-through, so
   white text on it always passes contrast. */
.site-header--overlay {
  position: fixed;
  inset: 0 0 auto 0;
  background: none;
}

.site-header--overlay::before,
.site-header--overlay::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  transition: opacity 200ms ease;
}

.site-header--overlay::before {
  background: var(--colour-plum);
  background-image: var(--gradient-header);
  opacity: 0;
}

/* While clear, a soft shade keeps the white menu readable on a bright photo. */
.site-header--overlay::after {
  bottom: -1.5rem;
  background: linear-gradient(rgb(13 6 20 / 0.55), rgb(13 6 20 / 0));
  pointer-events: none;
}

.site-header--overlay.is-scrolled::before,
.site-header--overlay.is-open::before,
.no-js .site-header--overlay::before {
  opacity: 1;
}

.site-header--overlay.is-scrolled::after,
.site-header--overlay.is-open::after,
.no-js .site-header--overlay::after {
  opacity: 0;
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-4);
  min-height: var(--header-height);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  /* Full bar height, so the bar keeps its height when the phone menu opens. */
  min-height: var(--header-height);
  color: var(--colour-white);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.55rem + 2.9vw, 1.625rem);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
  text-decoration: none;
}

.logo__mark {
  width: 3rem;
  height: 3rem;
  flex: none;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 3rem;
  min-height: 3rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--colour-white);
  font: inherit;
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  border-radius: 1px;
  background: var(--colour-lilac);
  content: "";
}

.nav-toggle__bars {
  position: relative;
}

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

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

/* Cymraeg / English. In the bar on every page, beside Menu on a phone and
   after the menu on a wide screen, so the other language is one tap away
   (Welsh Language Standards 58 and 59). It goes to the same page in the
   other language. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  margin-left: auto;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--colour-white);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--colour-lilac);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.lang-switch:hover {
  text-decoration-color: var(--colour-white);
}

/* Phones narrower than 33em: the logo, the language link and the menu
   button only fit on one line if the button shows its icon alone. The word
   (Menu / Dewislen) stays for screen readers, and the language link keeps
   its full word, because naming the language is the point of it. */
@media (max-width: 32.99em) {
  .site-header__inner {
    column-gap: var(--space-2);
  }

  .logo {
    gap: var(--space-2);
  }

  .logo__mark {
    width: 2.5rem;
    height: 2.5rem;
  }

  .lang-switch {
    padding-inline: var(--space-1);
    font-size: 1rem;
  }

  .nav-toggle {
    margin-right: calc(-1 * var(--space-2));
    padding-inline: var(--space-3);
  }

  .nav-toggle > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* The narrowest phones: keep the logo and Menu on one line. */
@media (max-width: 22.4em) {
  .site-header__inner {
    column-gap: var(--space-2);
  }

  .logo {
    gap: var(--space-2);
    /* 16px: with the language link beside Menu, the larger name no longer
       fits on a 320px phone. */
    font-size: 1rem;
  }

  .logo__mark {
    width: 2.5rem;
    height: 2.5rem;
  }

  .nav-toggle {
    min-width: 2.75rem;
    margin-right: calc(-1 * var(--space-2));
    padding-inline: var(--space-2);
  }

  .lang-switch {
    padding-inline: 0;
  }
}

/* No JavaScript: there is nothing to open, so show the menu. */
.no-js .nav-toggle {
  display: none;
}

.site-nav {
  flex: 0 0 calc(100% + 2 * var(--gutter));
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--space-2) var(--gutter) var(--space-4);
  background: var(--colour-menu);
  /* The bar is fixed to the screen, so a long menu scrolls inside itself. */
  max-height: calc(100vh - var(--header-height));
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
}

.site-nav[hidden] {
  display: none;
}

.no-js .site-nav[hidden] {
  display: block;
}

.site-nav__list,
.sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: var(--space-2) 0;
  color: var(--colour-white);
  text-decoration: none;
}

.site-nav__link:hover {
  text-decoration: underline;
  text-decoration-color: var(--colour-lilac);
  text-underline-offset: 0.35em;
  text-decoration-thickness: 2px;
}

.site-nav__link[aria-current="page"] {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--colour-lilac);
  text-underline-offset: 0.35em;
  text-decoration-thickness: 2px;
}

.sub-toggle {
  display: none;
  font: inherit;
}

.sub-menu .site-nav__link {
  padding-left: var(--space-5);
}

@media (min-width: 58em) {
  .nav-toggle {
    display: none;
  }

  .site-nav,
  .site-nav[hidden] {
    order: 1;
  }

  .lang-switch {
    order: 2;
    margin-left: 0;
    min-height: var(--header-height);
    padding-inline: var(--space-4) 0;
  }

  .site-nav,
  .site-nav[hidden] {
    display: block;
    flex: 0 1 auto;
    /* auto on the left keeps the menu and Cymraeg together on the right. */
    margin: 0 0 0 auto;
    padding: 0;
    background: none;
    max-height: none;
    overflow: visible;
  }

  .site-nav__list {
    display: flex;
    align-items: stretch;
  }

  .site-nav__list > li {
    position: relative;
    display: flex;
    align-items: center;
  }

  .site-nav__link {
    min-height: var(--header-height);
    padding: 0 var(--space-4);
  }

  .has-sub > .site-nav__link {
    padding-right: var(--space-1);
  }

  .sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 3rem;
    margin-right: var(--space-2);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--colour-white);
    font: inherit;
    cursor: pointer;
  }

  .sub-toggle svg {
    width: 0.75rem;
    height: 0.75rem;
    fill: currentColor;
  }

  .sub-menu {
    position: absolute;
    top: 100%;
    right: 0;
    display: none;
    width: 15rem;
    border: 2px solid var(--colour-lilac);
    background: var(--colour-menu);
    box-shadow: 0 4px 10px -2px rgb(0 0 0 / 0.1);
  }

  .has-sub:hover .sub-menu,
  .has-sub:focus-within .sub-menu,
  .has-sub.is-open .sub-menu {
    display: block;
  }

  .sub-menu .site-nav__link {
    min-height: 3.25rem;
    padding: 0.9rem var(--space-4);
    line-height: 1.45;
  }
}

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

.hero {
  position: relative;
  display: grid;
  place-items: center;
  /* Fills the screen (James, 2026-10-02). svh is the screen with a phone's
     address bar showing, so the photo does not resize when the bar slides
     away; vh is for browsers without svh. It is a minimum: on a short
     screen, or with large text, the hero grows and nothing is cut off. */
  min-height: 100vh;
  min-height: 100svh;
  /* The top bar sits over the photo, so the words start below it. */
  padding: calc(4rem + var(--header-height)) 1.5rem 4rem;
  background: var(--colour-plum);
  color: var(--colour-white);
  text-align: center;
  isolation: isolate;
}

.hero__image {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--container);
  /* The photo is bright in the middle. A soft shadow keeps white text
     readable without changing the picture. */
  text-shadow: 0 1px 14px rgb(43 11 63 / 0.6), 0 0 2px rgb(43 11 63 / 0.5);
}

.hero__inner .button {
  text-shadow: none;
}

.hero__eyebrow {
  margin: 0 0 var(--space-5);
  font-weight: 600;
  letter-spacing: 0.125em;
  line-height: 1;
  text-transform: uppercase;
}

.hero__title {
  margin: 0;
  color: var(--colour-white);
}

.hero__text {
  max-width: 52.5rem;
  margin: var(--space-5) auto 0;
}

@media (min-width: 58em) {
  .hero {
    padding-inline: 2.5rem;
  }
}

/* ----------------------------- Sections ----------------------------- */

.section {
  padding: var(--space-7) 0;
}

.section--tight {
  padding: var(--space-6) 0;
}

.section--plum {
  background: var(--colour-plum);
  color: var(--colour-white);
}

.section--night {
  background: var(--colour-night);
  color: var(--colour-white);
}

.section--night-2 {
  background: var(--colour-night-2);
  color: var(--colour-white);
}

.section--pale {
  background: var(--colour-pale);
}

.section--lilac {
  background: var(--colour-lilac);
  color: var(--colour-on-lilac);
}

.section--plum h2,
.section--night h2,
.section--night-2 h2 {
  color: var(--colour-white);
}

.section--lilac h2,
.section--lilac p {
  color: var(--colour-on-lilac);
}

.centre {
  text-align: center;
}

.lead {
  font-size: var(--text-lead);
}

.display {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, var(--text-display));
}

.page-title {
  padding-top: var(--space-7);
}

.page-title h1 {
  margin: 0;
}

.rule {
  width: 6.25rem;
  height: 2px;
  margin: var(--space-6) auto;
  border: 0;
  background: var(--colour-line);
}

.rule--lilac {
  width: 100%;
  background: var(--colour-lilac);
}

.rule--violet {
  margin-inline: 0;
  background: var(--colour-violet);
}

.strong-line {
  font-weight: 700;
}

/* Feature strip: four icons with a heading and a line each. */
.features {
  display: grid;
  gap: var(--space-6) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-3);
  text-align: center;
}

.feature .icon {
  color: var(--colour-plum);
}

.section--plum .feature .icon,
.section--night .feature .icon {
  color: var(--colour-lilac);
}

.feature h2,
.feature h3 {
  margin: 0;
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, var(--text-h2));
}

.feature p {
  margin: 0;
}

.section--plum .feature h2,
.section--plum .feature h3,
.section--night .feature h2,
.section--night .feature h3 {
  color: var(--colour-white);
}

@media (min-width: 40em) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 58em) {
  .features {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Coloured words in the kids' party list. */
.hl {
  font-weight: 600;
}

.hl--pink { color: var(--hl-pink); }
.hl--gold { color: var(--hl-gold); }
.hl--green { color: var(--hl-green); }
.hl--purple { color: var(--hl-purple); }
.hl--cyan { color: var(--hl-cyan); }
.hl--yellow { color: var(--hl-yellow); }
.hl--blue { color: var(--hl-blue); }

/* Photos. Every photo has rounded corners; .photo--round is the circle
   used on the booking page. */
.photo {
  margin: 0 0 var(--space-5);
}

.photo img {
  width: 100%;
  border-radius: var(--radius-photo);
  object-fit: cover;
}

.photo--round {
  max-width: 33.75rem;
  margin-inline: auto;
}

.photo--round img {
  aspect-ratio: 1;
  border-radius: 50%;
}

.photo--wide {
  max-width: 64rem;
  margin-inline: auto;
}

/* Two columns from tablet up: text and a photo, or two lists. */
.split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.split--top {
  align-items: start;
}

@media (min-width: 52em) {
  .split {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7);
  }

  .split--photo-wide {
    grid-template-columns: 3fr 2fr;
  }
}

.ticks {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.ticks li {
  position: relative;
  padding-left: 1.6rem;
}

.ticks li::before {
  position: absolute;
  left: 0;
  content: "\2714";
}

.panel {
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--colour-pale-2);
}

.panel h3 {
  margin-top: var(--space-6);
}

.panel > :last-child {
  margin-bottom: 0;
}

@media (min-width: 52em) {
  .panel {
    padding: var(--space-7);
  }
}

/* The SimplyBook booking form on the booking page. js/booking.js fills
   .booking-widget; until then it holds a plain link to SimplyBook. */
.booking-widget {
  display: grid;
  border-radius: var(--radius-md);
  background: var(--colour-pale);
}

.booking-widget.is-loading,
.booking-widget.is-loaded {
  min-height: 38rem;   /* holds the space so the page does not jump */
}

.booking-widget.is-loaded {
  display: block;
  overflow: hidden;
  background: #f7f7f7;  /* the form's own background */
}

.booking-widget iframe {
  display: block;
  width: 100%;
  border: 0;
}

.booking-widget__fallback,
.booking-widget__status {
  place-self: center;
  margin: 0;
  padding: var(--space-6) var(--space-5);
  text-align: center;
}

.booking-widget__help {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
}

/* Call to action block. */
.cta {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}

.cta h2,
.cta p {
  margin: 0;
}

.cta .button {
  margin-top: var(--space-3);
}

/* Reviews. */
.stars {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-5);
  color: var(--colour-star);
}

.stars .icon {
  width: 1.1rem;
  height: 1.1rem;
}

.reviews__lead {
  margin-bottom: var(--space-5);
  color: var(--colour-ink);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.4;
}

.review {
  margin: var(--space-7) 0 0;
  padding: 0 0 0 var(--space-5);
  border-left: 4px solid var(--colour-lilac);
  font-size: 1.1rem;
  text-align: left;
}

.review p {
  margin-bottom: var(--space-4);
}

.review cite {
  color: var(--colour-ink);
  font-style: normal;
  font-weight: 600;
}

/* Equipment list on the silent disco page. */
.kit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.kit li {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
}

.kit .icon {
  color: var(--colour-violet);
}

.kit-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  color: var(--colour-violet);
}

.kit-label .icon {
  width: 1rem;
  height: 1rem;
}

@media (min-width: 40em) {
  .kit {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Numbered-style steps on the karaoke page. */
.steps p {
  margin-bottom: var(--space-5);
}

/* ------------------------------- Forms ------------------------------- */

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

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

@media (min-width: 40em) {
  .form__pair {
    grid-template-columns: repeat(2, 1fr);
  }
}

.form__label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--colour-ink);
  font-size: var(--text-sm);
}

.form__input {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3);
  border: 1px solid var(--colour-night);
  border-radius: var(--radius-sm);
  background: var(--colour-white);
  color: var(--colour-ink);
  font: inherit;
}

textarea.form__input {
  min-height: 9rem;
  resize: vertical;
}

.form__consent {
  margin: 0;
  font-size: var(--text-sm);
}

.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form .button {
  justify-self: start;
}

.form__status {
  margin: 0;
  min-height: 1.65em;
}

.form__status[data-state="error"] {
  color: var(--colour-error);
  font-weight: 600;
}

.form-done {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--colour-white);
}

.form-done__title {
  margin-bottom: var(--space-3);
}

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

.prose a,
.text-link {
  color: var(--colour-ink);
  text-decoration-color: var(--colour-lilac);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* ------------------------------ Footer ------------------------------ */

.site-footer {
  padding: var(--space-7) 0 var(--space-5);
  border-top: 1px solid var(--colour-text);
  background: var(--colour-plum);
  color: var(--colour-white);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-7);
}

.site-footer__brand {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}

.site-footer__brand img {
  width: 9.25rem;
  height: 9.25rem;
}

.site-footer__name {
  margin: 0;
  color: var(--colour-lilac);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
}

.site-footer__brand p:last-child {
  max-width: 23rem;
  margin: 0;
}

.site-footer__nav ul,
.contact-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__nav a,
.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  color: var(--colour-pale);
  text-decoration: none;
}

.site-footer__nav a:hover,
.contact-list a:hover {
  text-decoration: underline;
  text-decoration-color: var(--colour-lilac);
  text-underline-offset: 0.3em;
}

.contact-list .icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--colour-lilac);
}

.site-footer__contact {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--space-4);
}

.site-footer__contact .rule {
  margin: var(--space-2) 0;
}

.site-footer__legal {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgb(255 255 255 / 0.2);
  font-size: var(--text-sm);
}

.site-footer__legal p {
  margin: 0;
}

@media (min-width: 52em) {
  .site-footer__inner {
    grid-template-columns: repeat(3, 1fr);
  }

  .site-footer__nav,
  .site-footer__contact {
    justify-self: center;
  }
}

/* The credit. brand/BRAND_GUIDELINES.md §8: copied from template/. */
a.credit {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--space-3);
  min-height: 2.75rem;
  color: var(--colour-pale-2);
  text-decoration: none;
}

a.credit:hover,
a.credit:focus-visible {
  color: var(--colour-white);
}

.credit__mark {
  display: block;
  width: 26px;
  height: 26px;
}

.credit__text {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

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

  .site-header,
  .site-header--overlay::before,
  .site-header--overlay::after {
    transition: none;
  }
}

/* Longer text sections (SEO job, 2026-10-21): spacing for h3 inside .prose,
   and the lead paragraph under a plain page title. */
.prose h3 {
  margin-top: var(--space-5);
}

.page-title .lead {
  margin-top: var(--space-4);
}