/* Interface tokens derived here rather than in the brand stylesheet, which is a
   retained canonical derivative and stays byte-for-byte. */
:root {
  /* The brand's secondary ink is a neutral grey. On white and on paper it reads
     as ink; on the celeste field it reads as washed out, because grey on a
     coloured ground always does. This is the same secondary weight taken as a
     darker shade of celeste itself rather than a neutral, so it belongs to the
     surface it sits on. 5.5:1 on celeste. */
  --fg-2-on-sky: #495c6e;

  /* One measure for running text. DM Sans draws a wide zero, so its `ch` runs
     about half again wider than its average character in running text: the 68ch
     this file used to carry rendered as 102 characters a line, not 68. This
     value was set by counting characters on the rendered page, and holds at any
     size because `ch` scales with the font. 47ch is about 70 characters. */
  --measure: 47ch;
}

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

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--pp-blue) var(--pp-sky-100);
}

body {
  margin: 0;
  min-width: 280px;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

::selection {
  background: var(--pp-navy);
  color: var(--pp-white);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 3px solid var(--pp-blue);
  outline-offset: 4px;
  border-radius: var(--r-1);
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--pp-white);
  box-shadow: var(--shadow-2);
  color: var(--pp-navy);
  font-weight: 750;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid rgba(44, 45, 45, 0.16);
  background: var(--pp-sky);
}

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

.brand-link {
  flex: 0 0 auto;
}

.brand-link img {
  width: 154px;
  margin: var(--sp-4);
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  background: var(--pp-navy);
  color: var(--pp-white);
}

.site-nav a[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--pp-blue-300);
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 540px;
  overflow: hidden;
  background: var(--pp-sky);
}

.hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("brand/assets/pattern-airy-blue.jpg") center / cover no-repeat;
  content: "";
  opacity: 0.17;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  align-items: center;
  gap: var(--sp-8);
  min-height: 540px;
  padding-block: var(--sp-9);
}

.hero-copy {
  max-width: 800px;
}

.hero h1 {
  max-width: 18ch;
  margin: 0 0 var(--sp-5);
  font-size: clamp(46px, 6.3vw, 76px);
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 0.94;
  text-wrap: balance;
}

.hero .pp-lead {
  margin: 0;
  font-size: clamp(18px, 2vw, 23px);
}

.hero-mark {
  width: min(220px, 72%);
  margin-left: auto;
  opacity: 0.54;
  transform: rotate(5deg);
}

.hero-method {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 340px;
  padding-left: var(--sp-6);
  border-left: 1px solid rgba(44, 45, 45, 0.24);
}

.hero-method p {
  max-width: 31ch;
  margin: var(--sp-6) 0 0;
  color: var(--fg-2-on-sky);
  font-size: 17px;
}

.page-intro {
  display: flex;
  align-items: center;
  min-height: 390px;
  overflow: hidden;
}

.page-intro h1 {
  max-width: 16ch;
  margin: 0 0 var(--sp-5);
  font-size: clamp(42px, 5.2vw, 64px);
  font-weight: 820;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}

.page-intro .pp-lead {
  max-width: 62ch;
  margin: 0;
  font-size: clamp(18px, 1.9vw, 22px);
}

.page-intro--academy {
  background: var(--pp-sky);
}

.page-intro.page-intro--academy {
  min-height: 0;
}

.academy-opening,
.season-opening,
.enquiries-opening {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  align-items: center;
  gap: var(--sp-9);
  padding-block: var(--sp-8);
}

/* Ian, 2026-08-14: "Questionable use of space." This was a one-column grid set to
   0.72fr, so a fifth of the band was declared and then left empty, and the opening
   read as a narrow block adrift in a wide sky field. The locator was buried under
   the lead where it competed with it; as a right-hand dateline it fills the column
   the grid was already reserving. */
.academy-opening {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.28fr);
  align-items: end;
  padding-block: var(--sp-9);
}

.page-intro--season {
  background: var(--pp-navy);
  color: var(--pp-white);
}

.page-intro--season h1,
.page-intro--season .pp-lead {
  color: var(--pp-white);
}

.page-intro--season .pp-lead {
  color: rgba(255, 255, 255, 0.76);
}

.promotion-lockup {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-6) 0;
  border-top: 2px solid var(--pp-blue-300);
  border-bottom: 2px solid var(--pp-blue-300);
}

.promotion-lockup strong {
  color: var(--pp-white);
  font-size: clamp(44px, 6vw, 72px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.promotion-lockup span {
  color: var(--pp-blue-300);
  font-size: 18px;
  font-weight: 750;
}

.page-intro--enquiries {
  min-height: 340px;
  background: var(--pp-paper);
  border-bottom: 1px solid var(--pp-line-strong);
}

.enquiry-status {
  max-width: 34ch;
  margin: 0;
  padding: var(--sp-6);
  background: var(--pp-sky);
  font-size: 18px;
  font-weight: 700;
}

.first-year {
  padding-block: var(--sp-9);
  background: var(--pp-white);
}

/* Ian, 2026-08-14: "can we shop presentation styles here? Also we can add a lot
   more marks/milestones?" The chronology went from two milestones to four, which is
   every one this repository can evidence, and that alone broke the old layout: a
   one-line heading in a 0.66fr column beside a four-row list left most of the left
   column empty, which is the same dead-space fault he named on the academy page.
   The heading sits above now and the year runs across the width, so the space is
   used and the band no longer mirrors the one under it. This is one presentation
   and not the last word; the alternatives he asked to see are the next pass. */
.first-year-layout {
  display: block;
}

/* This heading states a fact now rather than naming the section, so it is a
   sentence and wants to read as one. At the old display size in the old narrow
   column it broke as "The / academy / is in its first / full year." */
.first-year .section-intro h2 {
  max-width: 26ch;
  margin-bottom: var(--sp-8);
  font-size: clamp(30px, 3.2vw, 42px);
  text-wrap: balance;
}

.section-intro.section-intro--stacked {
  display: block;
  margin: 0;
}

.section-intro.section-intro--stacked h2 {
  margin-bottom: var(--sp-5);
}

/* A stacked intro that carries a paragraph sits directly on whatever follows it,
   which put the pathway matrix's column headings against the sentence explaining
   them. */
.section-intro.section-intro--stacked p {
  max-width: var(--measure);
  margin-bottom: var(--sp-7);
}

.yearline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--pp-blue);
  list-style: none;
}

/* Date over event, not date beside it. The third column held a sentence restating
   the label next to it ("Academy operations" / "The first full operating year
   began"), which is the text-for-its-own-sake Ian named on 2026-08-14. */
.yearline li {
  padding: var(--sp-5) var(--sp-5) var(--sp-6) 0;
  border-right: 1px solid var(--pp-line-strong);
}

.yearline li:last-child {
  border-right: 0;
}

.yearline li + li {
  padding-left: var(--sp-5);
}

.yearline time {
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--pp-blue-600);
  font-size: var(--fs-small);
  font-weight: 800;
}

.yearline strong {
  line-height: 1.3;
}

.at-a-glance-layout > h2 {
  max-width: 12ch;
  margin: 0 0 var(--sp-7);
  font-size: clamp(34px, 5vw, 60px);
  letter-spacing: -0.035em;
  line-height: 1;
}

/* Ian, 2026-08-14, on this band and the chronology above it: "This and the previous
   section aren't too different.? Also I have not been happy with statements like:
   '3rd of 8. Promoted'." Both notes are the same fault. The band was a second
   label-over-figure list stacked under the first, so the page repeated a device
   instead of changing register, and leading on the placing made a mid-table finish
   the headline rather than the promotion it earned. It is a statement now, not a
   list, and the placing supports it from underneath.

   The old .at-a-glance definition list went with it. It has no other caller: the
   only markup that used it was the block this replaced. */
.home-promotion {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-6) 0 0;
  border-top: 2px solid var(--pp-navy);
}

.home-promotion strong {
  font-size: clamp(40px, 5.5vw, 66px);
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.home-promotion span {
  max-width: 34ch;
  color: var(--fg-2);
  font-size: 18px;
  font-weight: 500;
}

.season-overview-note {
  max-width: 48ch;
  margin: var(--sp-5) 0 var(--sp-6);
  color: var(--fg-2);
}

/* The season lockup was sized for the bare numeral it used to hold. It now leads on
   the promotion, which is a phrase, so it cannot keep display-numeral sizing. */
.promotion-lockup--statement strong {
  font-size: clamp(28px, 3.6vw, 48px);
  letter-spacing: -0.03em;
  line-height: 1.02;
}

/* Ian, 2026-08-14: "make it about safety and the purpose of the site rather than
   this doomer approach." The boundary sentence is unchanged and still bound to the
   served photographs by promise_defect. What changed is that it now follows the
   reason the site exists instead of standing alone as a warning. */
.safeguarding-purpose {
  margin: 0 0 var(--sp-5);
}

.academy-opening > .academy-location {
  margin: 0;
  text-align: right;
}

.section-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: end;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}

.section-intro h2,
.section-heading {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-wrap: balance;
}

.section-intro p {
  max-width: var(--measure);
  margin: 0;
  color: var(--fg-2);
  font-size: 19px;
}

.season-overview,
.values-section,
.pathway-explainer,
.season-records,
.audience-section {
  padding-block: var(--sp-9);
  background: var(--pp-white);
}

.season-overview {
  border-top: 1px solid var(--pp-line-strong);
  background: var(--pp-paper);
}

.safeguarding-band {
  padding-block: var(--sp-9);
  background: var(--pp-navy);
  color: var(--pp-white);
}

.safeguarding-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--sp-9);
  align-items: start;
}

.safeguarding-layout p {
  max-width: var(--measure);
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
}

.audience-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: var(--sp-9);
}

.values-section {
  background: var(--pp-sky);
}

/* Ian, 2026-08-14: "We can shop how to present this?" Seven cells never divide into
   a four-wide grid, and the old rule pushed the second row over by one column of
   eight, which is exactly half a cell. A half-cell offset does not read as centring,
   it reads as a broken grid, which is how it looked on screen. Twelve columns
   divides both ways, so every row can end flush.

   Ian, 2026-08-14, having seen the four presentations: "Lets keep what we have for
   the values. If we can polish it up, better." So this stays a ruled grid of seven
   cells and the repairs are made inside it.

   The seams were doubled. Every cell drew its own 1px navy border and the grid also
   opened a 1px gap, so an interior seam was navy/sky/navy at 3px while the outer
   edge was a single 1px. The rules now come from one place: the list paints navy and
   the cells sit on it, so every seam and the frame are the same single hairline.

   The second row is 6/3/3, not 4/4/4. Every cell in this grid is now either three
   columns or six, and the one double-width cell is the one holding the longest
   value. That is a ratio with a reason behind it. Three cells of four gave the
   second row a width 1.33x the first, which is near-equal without being equal, and
   that reads as a mistake rather than a decision. */
.values-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  container-type: inline-size;
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: var(--pp-navy);
  list-style: none;
}

/* The words were 24px labels parked in the top-left corner of 104px boxes, filling
   between 7% and 16% of the cell they sat in. Seven near-empty rectangles with
   hairline rules is a blank form, which is what it looked like. The value is the
   content of this band, not a label on it, so it is set at display weight and sized
   to carry the cell.

   The type, the cell height and the padding are all measured in cqw, against the
   list rather than the viewport, and that is the whole trick. A first attempt sized
   them in vw and it fell apart between the breakpoints: the word tracks the viewport
   while the cell tracks the shell, and the shell stops growing at 1180px, so at
   768px and 899px the cells were 362px wide holding a 28px word and the band was
   back to filling 10%. Sweeping it found that; reading the rule did not. Tied to the
   container the proportion holds at every width by construction, and the sweep
   reports 21% to 54% across sixteen of them.

   The 44px is a guard, not the working ceiling. .site-shell caps at 1180px, so the
   container caps with it and 3.6cqw tops out at 42px on the widest screen; the
   min() only starts doing anything if that shell is ever widened past 1222px. The
   coefficient itself is set by the longest word in a three-column cell: Teamwork
   measures 193px at 42px against 246px of cell, and the sweep prints that slack at
   every width so it cannot quietly go to zero. */
.values-list li {
  display: flex;
  align-items: center;
  grid-column: span 3;
  min-height: min(108px, 9.4cqw);
  padding: min(var(--sp-5), 2.1cqw);
  background: var(--pp-white);
  font-size: min(44px, 3.6cqw);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
}

/* Carried by the markup, not by nth-child. The wide cell belongs to the longest
   value wherever the brand manual's order happens to put it; keying it to position 5
   would silently mis-size the grid if that order ever changed. */
.values-list li.values-list__wide {
  grid-column: span 6;
}

.academy-location {
  margin: var(--sp-5) 0 0;
  color: var(--pp-blue-600);
  font-size: var(--fs-small);
  font-weight: 800;
}

.section-intro--sticky {
  position: sticky;
  top: var(--sp-6);
  display: block;
  margin: 0;
}

.section-intro--sticky h2 {
  margin-bottom: var(--sp-5);
}

.season-records {
  background: var(--pp-paper);
}

.competition-story {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: var(--sp-8);
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--pp-line-strong);
}

.competition-story:last-child {
  border-bottom: 1px solid var(--pp-line-strong);
}

/* Promoted from h3 to h2 when "The records." was removed. That heading named the
   section without adding to it, and taking it out would otherwise have left the
   two side headings one level below a heading that no longer exists. */
.competition-story-heading h2 {
  max-width: 18ch;
  margin: 0 0 var(--sp-4);
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.competition-story-heading p {
  max-width: 40ch;
  margin: 0;
  color: var(--fg-2);
}

.form-strip {
  display: grid;
  align-self: start;
  min-height: 112px;
  margin: 0;
}

.form-strip--senior {
  grid-template-columns: 6fr 2fr 4fr;
}

.form-strip--u15 {
  grid-template-columns: 3fr 2fr 6fr;
}

.form-segment {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2);
  min-width: 86px;
  padding: var(--sp-5) var(--sp-4);
}

.form-segment--win {
  background: var(--pp-blue-600);
  color: var(--pp-white);
}

.form-segment--draw {
  background: var(--pp-sky);
  color: var(--pp-navy);
}

.form-segment--loss {
  background: var(--pp-line);
  color: var(--pp-navy);
}

.form-segment dt {
  font-size: var(--fs-small);
  font-weight: 750;
}

.form-segment dd {
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  line-height: 1;
}

.season-details {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0;
}

.competition-story--senior .season-details {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.season-details div {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--pp-line-strong);
}

.season-details dt {
  color: var(--fg-2);
  font-size: var(--fs-small);
}

.season-details dd {
  margin: var(--sp-1) 0 0;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* The source note had grown three overlapping blocks, one of them setting white
   text left over from a navy band this page no longer has. Nothing rendered
   white, because a more specific rule happened to sit above it, but the next
   note placed outside a competition story would have arrived invisible. */
.record-source-note {
  grid-column: 1 / -1;
  max-width: var(--measure);
  margin: 0;
}

.competition-story .record-source-note {
  grid-column: 2;
  margin-top: var(--sp-4);
  color: var(--fg-2);
  font-size: 15px;
}

.results-section {
  padding-block: var(--sp-9);
  background: var(--pp-sky-100);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--pp-line-strong);
  box-shadow: var(--shadow-1);
}

.table-wrap--plain {
  border: 0;
  box-shadow: none;
}

.results-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: var(--pp-white);
}

.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;
}

.results-table th,
.results-table td {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--pp-line);
  text-align: left;
}

.results-table th {
  background: var(--pp-navy);
  color: var(--pp-white);
  font-size: var(--fs-small);
}

.results-table td:last-child {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  white-space: nowrap;
}

/* The pathway is a matrix, not a list: five ages against the two things the
   curriculum sets for each of them. It was five dense paragraphs, each opening by
   naming its own focus, because there was nowhere else for that word to live. A
   column heading says "On the pitch" and "Off the pitch" once, and the prose
   underneath gets to be about the child instead of about its own structure.

   A real table, because five ages by two tracks is real table data. The text
   alternative is then the markup itself rather than a description bolted on beside
   a picture of a diagram. */
.pathway-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--pp-white);
  text-align: left;
}

.pathway-table thead th {
  padding: 0 var(--sp-5) var(--sp-3);
  border-bottom: 2px solid var(--pp-navy);
  color: var(--pp-navy);
  font-size: var(--fs-small);
  font-weight: 800;
}

.pathway-table tbody th,
.pathway-table tbody td {
  padding: var(--sp-6) var(--sp-5);
  border-bottom: 1px solid var(--pp-line);
  vertical-align: baseline;
}

.pathway-table thead th:first-child,
.pathway-table tbody th {
  padding-left: 0;
}

.pathway-table tbody th {
  width: 24%;
  font-weight: 400;
}

.pathway-table tbody td {
  max-width: 46ch;
}

/* The character track is banded rather than coloured. Tinting the type would have
   put a whole column at the accent's contrast floor for no gain; the band separates
   the two readings and leaves both at full ink. */
.pathway-table th:last-child,
.pathway-table td:last-child {
  background: var(--pp-sky-100);
}

.pathway-focus {
  display: block;
  color: var(--pp-navy);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.pathway-age {
  display: block;
  margin-top: var(--sp-2);
  color: var(--pp-blue-600);
  font-size: var(--fs-small);
  font-weight: 700;
}

.pathway-note {
  display: block;
  max-width: 24ch;
  margin-top: var(--sp-3);
  color: var(--fg-2);
  font-size: 14px;
}

.result-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--pp-sky);
  font-size: 13px;
}

td[data-outcome="win"] .result-badge {
  background: var(--pp-blue-600);
  color: var(--pp-white);
}

td[data-outcome="loss"] .result-badge {
  background: var(--pp-line);
  color: var(--pp-navy);
}

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

.audience-list li {
  display: grid;
  grid-template-columns: minmax(150px, 0.55fr) minmax(0, 1.45fr);
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--pp-line-strong);
}

.audience-list li:last-child {
  border-bottom: 1px solid var(--pp-line-strong);
}

.audience-list strong {
  font-size: 20px;
}

.audience-list span {
  color: var(--fg-2);
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--sp-5);
  border-bottom: 2px solid var(--pp-blue);
  color: var(--pp-navy);
  font-weight: 800;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.text-link:hover {
  border-color: var(--pp-navy);
  color: var(--pp-blue-600);
}

.text-link--light {
  border-color: var(--pp-blue-300);
  color: var(--pp-white);
}

.text-link--light:hover {
  border-color: var(--pp-white);
  color: var(--pp-blue-300);
}

.site-footer {
  padding-block: var(--sp-7);
  border-top: 1px solid rgba(255, 255, 255, 0.38);
  background: var(--pp-navy);
  color: rgba(255, 255, 255, 0.76);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.footer-wordmark {
  width: 142px;
}

.footer-inner p {
  max-width: 54ch;
  margin: 0;
  font-size: var(--fs-small);
  text-align: right;
}

/* The seal is a second logo, so it sits with the wordmark rather than next to
   the tagline. Its ring spells out the same words the tagline does, and at
   footer size that ring is texture rather than text; placing the two together
   made the line read as a caption for a badge nobody can read. */
.footer-mark {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.footer-seal {
  flex: none;
  width: 54px;
  height: auto;
}

@media (max-width: 900px) {
  .header-inner,
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
    padding-block: var(--sp-4);
  }

  .site-nav {
    width: 100%;
  }

  .site-nav ul {
    width: 100%;
    flex-wrap: wrap;
  }

  .site-nav li {
    flex: 1 1 calc(50% - var(--sp-2));
  }

  .site-nav a {
    justify-content: center;
    width: 100%;
    padding-inline: var(--sp-2);
  }

  .hero-inner,
  .section-intro,
  .safeguarding-layout,
  .audience-layout,
  .academy-opening,
  .season-opening,
  .enquiries-opening,
  .first-year-layout,
  .competition-story {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }

  .hero,
  .hero-inner {
    min-height: 520px;
  }

  .hero-mark {
    width: 170px;
  }

  .hero-method {
    min-height: 0;
    padding: var(--sp-5) 0 0;
    border-top: 1px solid rgba(44, 45, 45, 0.24);
    border-left: 0;
  }

  .page-intro {
    min-height: 360px;
  }

  .academy-opening,
  .season-opening,
  .enquiries-opening {
    gap: var(--sp-6);
  }

  .promotion-lockup,
  .enquiry-status {
    max-width: 520px;
  }

  /* Four across needs the desktop measure. Below it the cells divide, and the rule
     that separated them has to turn with them or it reads as a stray vertical. */
  .yearline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .yearline li,
  .yearline li:last-child,
  .yearline li + li {
    padding: var(--sp-5) var(--sp-5) var(--sp-5) 0;
    border-right: 0;
    border-bottom: 1px solid var(--pp-line-strong);
  }

  .academy-opening > .academy-location {
    text-align: left;
  }

  .competition-story .record-source-note,
  .season-details {
    grid-column: 1;
  }

  .section-intro--sticky {
    position: static;
  }

  .footer-inner p {
    text-align: left;
  }
}

@media (max-width: 680px) {
  /* The shell used to narrow its gutter to 12px here, which put running text
     12px off the edge of a phone on every page. The desktop inset is 20px and
     there is nothing on a narrow screen that needs the extra 16px: the results
     table stops scrolling sideways and becomes a stack of cards at this width.
     One inset for every viewport. */

  .hero h1 {
    font-size: clamp(40px, 12vw, 52px);
  }

  .hero-inner,
  .page-intro,
  .first-year,
  .season-overview,
  .pathway-explainer,
  .safeguarding-band,
  .season-records,
  .results-section,
  .audience-section {
    padding-block: var(--sp-8);
  }

  .hero,
  .hero-inner {
    min-height: 470px;
  }

  .page-intro {
    min-height: 310px;
  }

  .page-intro h1 {
    font-size: clamp(38px, 11vw, 48px);
  }

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

  /* Two up, and the long value takes the whole row rather than the half it cannot
     fit. Seven values over four rows of two leaves no empty track, and that matters
     more than it looks here: the rules are painted by the list showing through
     behind the cells, which is what makes every seam and the frame one hairline
     instead of the doubled 3px seam this band used to draw. An unfilled track does
     not read as blank space, it paints as a solid navy block. check_values_band.mjs
     --falsify is that exact mistake and it has to go red.

     Two across doubles the cell width, so the coefficients roughly double with it.
     The 34px ceiling is not arithmetic, it is the section heading: that heading
     bottoms out at 34px on its own clamp while these cells are still 300px wide, so
     a value sized purely to fill its cell overtakes the heading that introduces it.
     An earlier pass reflowed to two-up at 900px and did exactly that, printing the
     values at 60px under a 45px heading. Filling the cell is not worth inverting
     the page. */
  .values-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .values-list li {
    grid-column: span 1;
    min-height: min(84px, 15cqw);
    padding: min(var(--sp-4), 3.6cqw);
    font-size: min(34px, 7.2cqw);
  }

  .values-list li.values-list__wide {
    grid-column: span 2;
  }

  .audience-list li {
    grid-template-columns: 1fr;
  }

  .form-strip--senior {
    grid-template-columns: 6fr 2fr 4fr;
  }

  .form-strip--u15 {
    grid-template-columns: 3fr 2fr 6fr;
  }

  .form-segment {
    align-items: flex-start;
    flex-direction: column;
    min-width: 0;
    padding: var(--sp-4) var(--sp-3);
  }

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

  .table-wrap {
    overflow: visible;
    border: 0;
    box-shadow: none;
  }

  .results-table,
  .results-table tbody,
  .results-table tr,
  .results-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .results-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .results-table tbody {
    display: grid;
    gap: var(--sp-4);
  }

  .results-table tr {
    display: grid;
    grid-template-areas:
      "date result"
      "opponent opponent"
      "venue venue";
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-3) var(--sp-4);
    padding: var(--sp-5);
    border-top: 2px solid var(--pp-navy);
    background: var(--pp-white);
  }

  .results-table td {
    padding: 0;
    border: 0;
    font-size: 16px;
  }

  .results-table td:nth-child(1) {
    grid-area: date;
    font-weight: 800;
  }

  .results-table td:nth-child(2) {
    grid-area: opponent;
    font-size: 18px;
    font-weight: 800;
  }

  .results-table td:nth-child(3) {
    grid-area: venue;
    color: var(--fg-2);
  }

  .results-table td:nth-child(4) {
    grid-area: result;
    align-self: start;
    width: auto;
  }

  .results-table td:nth-child(2)::before,
  .results-table td:nth-child(3)::before {
    display: block;
    margin-bottom: var(--sp-1);
    color: var(--fg-2);
    content: attr(data-label);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .record-source-note {
    font-size: 15px;
  }


  /* Three columns will not fit a phone, so each stage becomes one block: the
     stage, then its two tracks, each naming its own track because the column
     heading it belonged to is no longer beside it. */
  .pathway-table,
  .pathway-table tbody,
  .pathway-table tr,
  .pathway-table th,
  .pathway-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .pathway-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pathway-table tbody tr {
    padding-block: var(--sp-6);
    border-bottom: 1px solid var(--pp-line);
  }

  /* The desktop stage column is 24% of the table. That percentage carried into
     the stacked layout, because `.pathway-table tbody th` outranks the
     `display: block; width: 100%` rule above no matter which media query it
     sits in, so every stage was being read inside an 88px box: the ages broke
     as "Under-15 / and Under- / 17" and the Under-11 note ran four lines deep.
     Reset the width at the same specificity that set it. */
  .pathway-table tbody th,
  .pathway-table tbody td {
    max-width: none;
    width: auto;
    padding: 0;
    border: 0;
  }

  .pathway-table tbody td {
    margin-top: var(--sp-4);
  }

  .pathway-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--sp-1);
    color: var(--pp-blue-600);
    font-size: 13px;
    font-weight: 800;
  }

  .pathway-table tbody td:last-child {
    padding: var(--sp-4);
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.site-photo {
  margin: 0;
  background: var(--pp-navy);
}

.site-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Ian, 2026-08-14: "isn't this text too large? for a subscript?" Measured, it was
   14px against 16px body, so only one step down, and light type on navy reads
   optically larger and heavier than the same size in navy on sky. It was sitting
   level with body copy instead of under it. Step the size down and take the tint
   back, which is the part that was doing the damage. */
.site-photo figcaption {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding-block: var(--sp-3);
  color: var(--pp-sky);
  opacity: 0.78;
  font-size: 13px;
  letter-spacing: 0.02em;
}