/* ==========================================================================
   Postcode Pizza — UI kit
   Section 08 of the style guide: square corners, 2px rules, 44px min targets.
   Every component reads its ground from the surface tokens in base.css, so
   the same markup works on semolina, char, ember or ovenred unchanged.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   One primary button per view. No rounded corners, no gradients, no left
   icons. A right-pointing arrow is the only permitted glyph.
   -------------------------------------------------------------------------- */

.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--pp-btn-h, var(--pp-control-md));
  padding-block: 0;
  padding-inline: var(--pp-btn-px, 26px);
  border: var(--pp-rule-solid) solid transparent;
  border-radius: var(--pp-radius);
  font-family: var(--pp-font-ui);
  font-size: var(--pp-btn-fs, 16px);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--pp-dur-fast) var(--pp-ease),
    border-color var(--pp-dur-fast) var(--pp-ease),
    color var(--pp-dur-fast) var(--pp-ease);
}

.pp-btn__arrow { font-size: 1.05em; line-height: 1; }

.pp-btn:disabled,
.pp-btn[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--pp-crust);
  border-color: var(--pp-crust);
  color: var(--pp-stone);
}

/* Sizes — 60 / 48 / 44, per the kit. */
.pp-btn--lg { --pp-btn-h: var(--pp-control-lg); --pp-btn-fs: 17px; --pp-btn-px: 34px; }
.pp-btn--md { --pp-btn-h: var(--pp-control-md); --pp-btn-fs: 16px; --pp-btn-px: 26px; }
.pp-btn--sm { --pp-btn-h: var(--pp-control-sm); --pp-btn-fs: 15px; --pp-btn-px: 22px; }

.pp-btn--block { display: flex; width: 100%; }

/* Primary — the action colour. */
.pp-btn--primary {
  background: var(--pp-ovenred);
  border-color: var(--pp-ovenred);
  color: var(--pp-semolina);
}

.pp-btn--primary:hover {
  background: color-mix(in srgb, var(--pp-ovenred) 86%, var(--pp-char));
  border-color: color-mix(in srgb, var(--pp-ovenred) 86%, var(--pp-char));
  color: var(--pp-semolina);
}

.pp-btn--primary:active {
  background: color-mix(in srgb, var(--pp-ovenred) 72%, var(--pp-char));
  border-color: color-mix(in srgb, var(--pp-ovenred) 72%, var(--pp-char));
}

/* Secondary — outline in the surface's own ink. */
.pp-btn--secondary {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.pp-btn--secondary:hover {
  background: var(--pp-contrast-bg);
  border-color: var(--pp-contrast-bg);
  color: var(--pp-contrast-fg);
}

/* Contrast — flips against whatever ground it sits on. */
.pp-btn--contrast {
  background: var(--pp-contrast-bg);
  border-color: var(--pp-contrast-bg);
  color: var(--pp-contrast-fg);
}

.pp-btn--contrast:hover {
  background: var(--pp-ovenred);
  border-color: var(--pp-ovenred);
  color: var(--pp-semolina);
}

/* Text link — the arrow carries it. */
.pp-btn--link {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pp-surface-accent);
}

.pp-btn--link:hover { color: var(--pp-ember); }

/* --------------------------------------------------------------------------
   Eyebrow — Space Mono stamp above a heading
   -------------------------------------------------------------------------- */

.pp-eyebrow {
  font-family: var(--pp-font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: normal;
  text-transform: uppercase;
  color: var(--pp-surface-accent);
}

.pp-eyebrow--lead { font-size: 12px; letter-spacing: 0.22em; }
.pp-eyebrow--quiet { color: var(--pp-surface-meta); }

/* --------------------------------------------------------------------------
   Wordmark — pin + two-line Anton lockup
   Clear space on all four sides equals the cap height of PIZZA.
   -------------------------------------------------------------------------- */

.pp-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-wordmark-gap, 10px);
  color: inherit;
}

.pp-wordmark__pin {
  height: var(--pp-wordmark-pin, 36px);
  width: auto;
  flex: none;
}

.pp-wordmark__type {
  font-family: var(--pp-font-display);
  font-size: var(--pp-wordmark-fs, 17px);
  line-height: 0.88;
  letter-spacing: 0;
  text-transform: uppercase;
}

.pp-wordmark__pizza { color: var(--pp-ovenred); }

.pp-on-char .pp-wordmark__pizza { color: var(--pp-ovenred); }

.pp-wordmark--sm { --pp-wordmark-pin: 28px; --pp-wordmark-fs: 14px; --pp-wordmark-gap: 8px; }
.pp-wordmark--md { --pp-wordmark-pin: 36px; --pp-wordmark-fs: 17px; --pp-wordmark-gap: 10px; }
.pp-wordmark--lg { --pp-wordmark-pin: 44px; --pp-wordmark-fs: 19px; --pp-wordmark-gap: 14px; }
.pp-wordmark--xl { --pp-wordmark-pin: 96px; --pp-wordmark-fs: 44px; --pp-wordmark-gap: 24px; }

/* --------------------------------------------------------------------------
   Ticker — the live announcement bar
   Never more than one live indicator on screen.
   -------------------------------------------------------------------------- */

.pp-ticker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px var(--pp-gutter);
  text-align: center;
}

.pp-ticker__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pp-flame);
}

.pp-ticker__text {
  font-family: var(--pp-font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */

.pp-siteheader {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: var(--pp-header-h, 80px);
  padding-inline: var(--pp-gutter);
}

.pp-siteheader--light {
  --pp-header-h: 72px;
  border-bottom: var(--pp-rule-solid) solid var(--pp-char);
}

/* Nav is centred on the header itself, not on the space left between the
   wordmark and the actions — those two differ in width, so flexing it into
   the gap would sit it visibly off-centre. Taking it out of flow also lets
   the actions keep their auto margin unconditionally. */
.pp-siteheader__nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 28px;
}

.pp-siteheader__link {
  font-family: var(--pp-font-ui);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  padding-block: 4px;
  border-bottom: var(--pp-rule-solid) solid transparent;
}

.pp-siteheader__link:hover { color: var(--pp-ovenred); }

.pp-siteheader__link--current {
  color: var(--pp-ovenred);
  border-bottom-color: var(--pp-ovenred);
}

.pp-siteheader__actions {
  display: flex;
  align-items: center;
  gap: var(--pp-space-3);
  margin-left: auto;
}

/* The signed-out account entry. A line of copy rather than a bare avatar,
   because "sign in" only applies to households already on a round — and it
   must not read as an alternative to the primary ask beside it. */
.pp-siteheader__signin {
  font-family: var(--pp-font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--pp-surface-meta);
  text-underline-offset: 3px;
}

.pp-siteheader__signin:hover { color: var(--pp-ovenred); }

.pp-siteheader__aside {
  font-family: var(--pp-font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pp-surface-meta);
}

/* --------------------------------------------------------------------------
   Account button
   Full pills are permitted on avatars only — this is the one round thing.
   -------------------------------------------------------------------------- */

.pp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--pp-control-sm);
  height: var(--pp-control-sm);
  border: var(--pp-rule-solid) solid currentColor;
  border-radius: 50%;
  color: inherit;
  transition:
    background-color var(--pp-dur-fast) var(--pp-ease),
    color var(--pp-dur-fast) var(--pp-ease);
}

.pp-avatar:hover {
  background: var(--pp-contrast-bg);
  color: var(--pp-contrast-fg);
}

.pp-avatar__glyph { width: 22px; height: 22px; }

.pp-avatar__initials {
  font-family: var(--pp-font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Narrow-screen menu — a <details> disclosure, no JavaScript
   -------------------------------------------------------------------------- */

.pp-menu { display: none; position: relative; }

.pp-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pp-control-sm);
  height: var(--pp-control-sm);
  border: var(--pp-rule-solid) solid currentColor;
  cursor: pointer;
  list-style: none;
}

.pp-menu__toggle::-webkit-details-marker { display: none; }

/* Three rules, matching the 2px rule weight used everywhere else. */
.pp-menu__bars,
.pp-menu__bars::before,
.pp-menu__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.pp-menu__bars { position: relative; }

.pp-menu__bars::before,
.pp-menu__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.pp-menu__bars::before { top: -6px; }
.pp-menu__bars::after  { top: 6px; }

.pp-menu[open] .pp-menu__toggle {
  background: var(--pp-contrast-bg);
  color: var(--pp-contrast-fg);
}

.pp-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  background: var(--pp-paper);
  border: var(--pp-rule-solid) solid var(--pp-char);
  box-shadow: var(--pp-shadow-lift);
}

.pp-menu__link {
  padding: 14px 18px;
  border-bottom: var(--pp-rule-hair) solid var(--pp-crust);
  font-family: var(--pp-font-ui);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-char);
}

/* The sign-in entry sits under the navigation proper — same target size, less
   voice, because it is for people who are already customers. */
.pp-menu__link--quiet {
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--pp-stone);
}

.pp-menu__link:last-child { border-bottom: 0; }

.pp-menu__link:hover {
  background: var(--pp-char);
  color: var(--pp-semolina);
}

@media (max-width: 899px) {
  .pp-siteheader { gap: 16px; }
  .pp-siteheader__nav { display: none; }
  .pp-siteheader__aside { display: none; }
  .pp-siteheader__signin { display: none; }
  .pp-menu { display: block; }
}

@media (max-width: 519px) {
  .pp-siteheader__actions { gap: var(--pp-space-2); }
  .pp-siteheader__actions .pp-btn { --pp-btn-px: 14px; --pp-btn-fs: 13px; }
}

/* --------------------------------------------------------------------------
   Site footer
   -------------------------------------------------------------------------- */

.pp-sitefooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 44px var(--pp-gutter);
}

.pp-sitefooter__claim {
  font-family: var(--pp-font-data);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pp-ash);
}

.pp-sitefooter__domain {
  font-family: var(--pp-font-data);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pp-stone);
}

/* A privacy policy has to be reachable from every page, not only from the form
   that links to it. Quiet, but underlined so it reads as a link. */
.pp-sitefooter__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pp-sitefooter__link:hover,
.pp-sitefooter__link:focus-visible {
  color: var(--pp-semolina);
}

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */

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

.pp-field__label {
  font-family: var(--pp-font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pp-input,
.pp-select {
  width: 100%;
  min-width: 0;
  min-height: var(--pp-control-md);
  padding: 12px;
  background: var(--pp-semolina);
  color: var(--pp-char);
  border: var(--pp-rule-solid) solid var(--pp-char);
  border-radius: var(--pp-radius);
  font-family: var(--pp-font-body);
  font-size: var(--pp-body-s);
  outline: none;
  transition: border-color var(--pp-dur-fast) var(--pp-ease);
}

.pp-input::placeholder { color: var(--pp-stone); }

.pp-input:focus,
.pp-select:focus {
  border-color: var(--pp-ovenred);
  outline: none;
}

.pp-select {
  appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--pp-char) 50%),
                    linear-gradient(135deg, var(--pp-char) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.pp-input--invalid,
.pp-select--invalid { border-color: var(--pp-scorch); }

.pp-input--valid { border-color: var(--pp-basil); }

.pp-field__error {
  font-size: var(--pp-body-s);
  line-height: 1.4;
  color: var(--pp-scorch);
}

/* The postcode field itself — Anton, the primary entry point of the site. */
.pp-postcode-input {
  flex: 1;
  min-width: 0;
  min-height: 62px;
  padding: 12px 16px;
  background: var(--pp-semolina);
  color: var(--pp-char);
  border: var(--pp-rule-solid) solid var(--pp-char);
  border-radius: var(--pp-radius);
  font-family: var(--pp-font-display);
  font-size: 30px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  outline: none;
  transition: border-color var(--pp-dur-fast) var(--pp-ease);
}

.pp-postcode-input::placeholder { color: var(--pp-stone); }
.pp-postcode-input:focus { border-color: var(--pp-ovenred); }

/* A field and its button welded together — no gap, shared 2px rule. */
.pp-inputgroup { display: flex; gap: 0; }
.pp-inputgroup > .pp-btn { min-height: auto; align-self: stretch; }

/* The same field away from the street-check card — a second ask further down a
   page, with nothing but its own error line under it. */
.pp-postcode-prompt {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-2);
}

/* --------------------------------------------------------------------------
   Street check — the postcode entry card
   -------------------------------------------------------------------------- */

/* The card carries its own ground, so it has to reset the surface tokens too —
   dropped onto an ovenred or char band it would otherwise inherit semolina
   text onto its own paper. */
.pp-check {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-3);
  padding: var(--pp-space-4);
  background: var(--pp-paper);
  color: var(--pp-char);
  border: var(--pp-rule-solid) solid var(--pp-char);
  --pp-surface-body: var(--pp-ink);
  --pp-surface-meta: var(--pp-stone);
  --pp-surface-rule: var(--pp-crust);
  --pp-surface-accent: var(--pp-ovenred);
  --pp-surface-track: var(--pp-crust-deep);
  --pp-contrast-bg: var(--pp-char);
  --pp-contrast-fg: var(--pp-semolina);
}

.pp-check__title {
  font-family: var(--pp-font-ui);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pp-check__hint {
  font-family: var(--pp-font-data);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pp-stone);
}

.pp-check__body {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-3);
}

.pp-check__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 560px) {
  .pp-check__grid { grid-template-columns: minmax(0, 1fr); }
  .pp-inputgroup { flex-wrap: wrap; }
  .pp-inputgroup > .pp-btn { width: 100%; min-height: var(--pp-control-md); }
}

.pp-check__heading {
  font-family: var(--pp-font-ui);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pp-check__copy {
  font-size: 16px;
  line-height: 1.55;
  color: var(--pp-ink);
}

/* --------------------------------------------------------------------------
   Notice — confirmed / error states
   Basil is for confirmation only. Scorch is for errors and sold out.
   -------------------------------------------------------------------------- */

.pp-notice {
  padding: 16px 18px;
  font-size: 16px;
  line-height: 1.5;
  background: var(--pp-basil);
  color: var(--pp-paper);
}

.pp-notice--error { background: var(--pp-scorch); }

.pp-notice__title {
  font-family: var(--pp-font-ui);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pp-notice__copy {
  margin-top: var(--pp-space-1);
  font-size: var(--pp-body-s);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Progress — households counting towards a pitch
   -------------------------------------------------------------------------- */

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

.pp-progress__labels {
  display: flex;
  justify-content: space-between;
  gap: var(--pp-space-3);
  font-family: var(--pp-font-data);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pp-surface-meta);
}

.pp-progress__count { color: var(--pp-ovenred); }

.pp-progress__track {
  height: 22px;
  background: var(--pp-surface-track);
  border: var(--pp-rule-solid) solid var(--pp-char);
}

.pp-progress__fill {
  height: 100%;
  background: var(--pp-ovenred);
}

/* --------------------------------------------------------------------------
   Leaderboard — the waiting list, in public
   -------------------------------------------------------------------------- */

.pp-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pp-leaderboard__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 150px 130px;
  gap: 20px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: var(--pp-rule-hair) solid var(--pp-surface-rule);
}

.pp-leaderboard__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.pp-leaderboard__postcode {
  font-family: var(--pp-font-display);
  font-size: 26px;
  /* Anton's natural leading sets the row rhythm here — pinning this to 1
     collapses each row by 13px and the whole band with it. */
  line-height: normal;
  text-transform: uppercase;
}

.pp-leaderboard__track {
  height: 18px;
  background: var(--pp-surface-track);
}

.pp-leaderboard__fill { height: 100%; background: var(--pp-ovenred); }
.pp-leaderboard__fill--live  { background: var(--pp-basil); }
.pp-leaderboard__fill--close { background: var(--pp-ember); }

.pp-leaderboard__status,
.pp-leaderboard__count {
  font-family: var(--pp-font-data);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pp-surface-body);
}

.pp-leaderboard__count { text-align: right; letter-spacing: 0; }

.pp-leaderboard__row--live .pp-leaderboard__postcode { color: var(--pp-basil); }
.pp-leaderboard__row--live .pp-leaderboard__status   { color: var(--pp-basil-light); }
.pp-leaderboard__row--close .pp-leaderboard__status  { color: var(--pp-flame); }

@media (max-width: 767px) {
  .pp-leaderboard__row {
    grid-template-columns: 90px minmax(0, 1fr);
    grid-template-areas:
      "postcode track"
      "status   count";
    gap: 10px 16px;
  }
  .pp-leaderboard__postcode { grid-area: postcode; }
  .pp-leaderboard__track    { grid-area: track; }
  .pp-leaderboard__status   { grid-area: status; }
  .pp-leaderboard__count    { grid-area: count; }
}

/* --------------------------------------------------------------------------
   Timeline — steps on a night, stops on a round
   -------------------------------------------------------------------------- */

.pp-timeline { border-top: var(--pp-rule-hair) solid var(--pp-surface-rule); }

.pp-timeline__row {
  display: flex;
  gap: 18px;
  padding: 16px 0;
  border-bottom: var(--pp-rule-hair) solid var(--pp-surface-rule);
}

.pp-timeline__row:last-child { border-bottom: 0; }

.pp-timeline__time {
  flex: none;
  width: 62px;
  font-family: var(--pp-font-data);
  font-size: 12px;
  letter-spacing: 0.1em;
  /* Not uppercased — these read as durations, so "+90s" and "+4min" keep
     their unit case. */
  color: var(--pp-ovenred);
  font-variant-numeric: tabular-nums;
}

.pp-timeline__text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--pp-surface-body);
}

/* --------------------------------------------------------------------------
   Offer band — the subscription call to action
   The percentage may be set this large only here, and the terms always sit
   underneath it, never in a footnote.
   -------------------------------------------------------------------------- */

.pp-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-space-5);
  flex-wrap: wrap;
  padding: 68px var(--pp-gutter);
}

.pp-offer__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 54ch;
}

.pp-offer__title {
  font-family: var(--pp-font-display);
  font-size: 54px;
  line-height: 0.9;
  text-transform: uppercase;
}

.pp-offer__terms {
  font-size: var(--pp-body-m);
  line-height: 1.6;
  color: var(--pp-surface-body);
}

@media (max-width: 767px) {
  .pp-offer { padding-block: var(--pp-space-5); }
  .pp-offer__title { font-size: 36px; }
}

/* --------------------------------------------------------------------------
   Figure — a photograph in a fixed frame
   -------------------------------------------------------------------------- */

.pp-figure {
  position: relative;
  width: 100%;
  height: var(--pp-figure-h, 440px);
  min-height: var(--pp-figure-min, auto);
  background: var(--pp-void);
  overflow: hidden;
}

.pp-figure__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pp-figure-pos, center);
}

/* Awaiting a real shot — section 06 slots. */
.pp-figure--empty {
  display: grid;
  place-items: center;
  padding: var(--pp-space-4);
  border: var(--pp-rule-route) dashed var(--pp-ovenred);
  background: var(--pp-char);
}

.pp-figure__brief {
  font-family: var(--pp-font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--pp-ash);
}

/* A caption plate on the photograph. Square and level — the guide rules out
   tilting anything. */
.pp-figure__label {
  position: absolute;
  left: var(--pp-space-4);
  bottom: var(--pp-space-4);
  max-width: calc(100% - var(--pp-space-6));
  padding: 10px 13px;
  background: var(--pp-semolina);
  color: var(--pp-char);
  border: var(--pp-rule-solid) solid var(--pp-char);
  font-family: var(--pp-font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Status pill
   Square corners, 1px border, 12% tinted fill. Live states get a dot.
   -------------------------------------------------------------------------- */

.pp-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-space-2);
  padding: 5px 10px;
  border: var(--pp-rule-hair) solid var(--pp-pill-tone, var(--pp-stone));
  background: color-mix(in srgb, var(--pp-pill-tone, var(--pp-stone)) 12%, transparent);
  color: var(--pp-pill-tone, var(--pp-stone));
  font-family: var(--pp-font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pp-pill--live      { --pp-pill-tone: var(--pp-ovenred); }
.pp-pill--booked    { --pp-pill-tone: var(--pp-basil); }
.pp-pill--soldout   { --pp-pill-tone: var(--pp-scorch); }

.pp-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   Timer block — the brand's signature device
   Split label + digits, 2px border, monospace, always zero-padded.
   -------------------------------------------------------------------------- */

.pp-timer {
  display: inline-flex;
  align-items: stretch;
  border: var(--pp-rule-solid) solid currentColor;
}

.pp-timer__label,
.pp-timer__digits {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  font-family: var(--pp-font-data);
  font-weight: 700;
  text-transform: uppercase;
}

.pp-timer__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  border-right: var(--pp-rule-solid) solid currentColor;
}

.pp-timer__digits {
  font-size: 20px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Media hero — photography under a scrim
   -------------------------------------------------------------------------- */

.pp-mediahero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--pp-mediahero-min, 780px);
  overflow: hidden;
  border-bottom: var(--pp-rule-solid) solid var(--pp-char);
}

.pp-mediahero__media { position: absolute; inset: 0; }

.pp-mediahero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The scrim is what keeps display type at AAA over any photograph. */
.pp-mediahero__media::after {
  content: "";
  position: absolute;
  inset: 0;
}

.pp-mediahero--side .pp-mediahero__media::after {
  background:
    linear-gradient(90deg, rgba(22, 19, 15, 0.97) 0%, rgba(22, 19, 15, 0.82) 40%, rgba(22, 19, 15, 0.12) 80%),
    linear-gradient(0deg, rgba(22, 19, 15, 0.8), transparent 45%);
}

.pp-mediahero--base .pp-mediahero__media::after {
  background: linear-gradient(0deg, rgba(22, 19, 15, 0.96) 0%, rgba(22, 19, 15, 0.7) 55%, rgba(22, 19, 15, 0.2) 100%);
}

.pp-mediahero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pp-space-4);
  padding: var(--pp-space-7) var(--pp-gutter);
}

@media (max-width: 767px) {
  .pp-mediahero { --pp-mediahero-min: 620px; }
  .pp-mediahero--side .pp-mediahero__media::after {
    background: linear-gradient(0deg, rgba(22, 19, 15, 0.96) 0%, rgba(22, 19, 15, 0.74) 62%, rgba(22, 19, 15, 0.24) 100%);
  }
  .pp-mediahero__inner { padding-block: var(--pp-space-6); }
}

/* --------------------------------------------------------------------------
   Fact strip — hard numbers in a row
   -------------------------------------------------------------------------- */

.pp-facts {
  display: grid;
  grid-template-columns: repeat(var(--pp-facts-columns, 3), minmax(0, 1fr));
  border-top: var(--pp-rule-solid) solid var(--pp-surface-rule);
}

.pp-facts__item {
  padding: var(--pp-space-4) var(--pp-space-4);
  border-right: var(--pp-rule-hair) solid var(--pp-surface-rule);
}

.pp-facts__item:last-child { border-right: 0; }

.pp-facts__figure {
  font-family: var(--pp-font-display);
  font-size: 33px;
  line-height: 0.9;
  text-transform: uppercase;
}

.pp-facts--flame .pp-facts__figure { color: var(--pp-flame); }
.pp-facts--char  .pp-facts__figure { color: var(--pp-char); }

.pp-facts__caption {
  margin-top: var(--pp-space-2);
  font-family: var(--pp-font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--pp-surface-body);
}

@media (max-width: 767px) {
  .pp-facts { grid-template-columns: minmax(0, 1fr); }
  .pp-facts__item {
    border-right: 0;
    border-bottom: var(--pp-rule-hair) solid var(--pp-surface-rule);
  }
  .pp-facts__item:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Step — one numbered stage of a process
   -------------------------------------------------------------------------- */

.pp-step {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  border-top: var(--pp-rule-solid) solid var(--pp-surface-rule);
}

.pp-step__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--pp-space-3);
  padding: var(--pp-space-7) var(--pp-gutter);
  border-right: var(--pp-rule-solid) solid var(--pp-surface-rule);
}

/* Square, per the guide — the reference's circles are the one thing the
   system does not do. */
.pp-step__number {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: var(--pp-space-2);
  background: var(--pp-contrast-bg);
  color: var(--pp-contrast-fg);
  font-family: var(--pp-font-data);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.pp-step__title {
  font-family: var(--pp-font-display);
  font-size: clamp(44px, 5vw, 76px);
  line-height: 0.9;
  letter-spacing: var(--pp-display-track);
  text-transform: uppercase;
  text-wrap: balance;
}

.pp-step__body {
  max-width: 52ch;
  font-size: var(--pp-body-l);
  line-height: 1.5;
  color: var(--pp-surface-body);
}

.pp-step__note {
  max-width: 52ch;
  padding: var(--pp-space-3) var(--pp-space-3);
  border-left: 6px solid var(--pp-surface-accent);
  background: color-mix(in srgb, currentColor 8%, transparent);
  font-size: var(--pp-body-m);
  line-height: 1.5;
}

.pp-step__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: var(--pp-space-6) var(--pp-gutter);
}

/* A step with no visual: one column, and the copy loses the divider it was
   only drawing to separate itself from the panel. */
.pp-step--full { grid-template-columns: minmax(0, 1fr); }
.pp-step--full .pp-step__copy { border-right: 0; }

/* The numbered actions inside a step. The "1 //" index is the same data-stamp
   device as the step number itself, so the list reads as part of the system
   rather than as a default ordered list. */
.pp-step__list {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-2);
  max-width: 52ch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-step__list-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--pp-space-3);
  align-items: baseline;
  font-size: var(--pp-body-l);
  line-height: 1.5;
  color: var(--pp-surface-body);
}

.pp-step__list-index {
  font-family: var(--pp-font-data);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--pp-surface-accent);
}

.pp-step__outro {
  max-width: 52ch;
  font-size: var(--pp-body-l);
  line-height: 1.5;
  font-weight: 700;
  color: var(--pp-surface-body);
}

@media (max-width: 999px) {
  .pp-step { grid-template-columns: minmax(0, 1fr); }
  .pp-step__copy {
    border-right: 0;
    border-bottom: var(--pp-rule-solid) solid var(--pp-surface-rule);
    padding-block: var(--pp-space-6);
  }
  .pp-step__visual { padding-block: var(--pp-space-6); }
}

/* --------------------------------------------------------------------------
   Docket — a bordered object that physically lifts off the page
   Shadows are only for things that lift: dockets, sheets, sticky bars.
   -------------------------------------------------------------------------- */

.pp-docket {
  width: min(100%, var(--pp-docket-w, 660px));
  background: var(--pp-semolina);
  color: var(--pp-char);
  border: var(--pp-rule-solid) solid var(--pp-char);
  box-shadow: 12px 12px 0 var(--pp-docket-shadow, var(--pp-char));
}

.pp-docket__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-space-3);
  flex-wrap: wrap;
  padding: var(--pp-space-4);
  border-bottom: var(--pp-rule-solid) solid var(--pp-char);
}

.pp-docket__title {
  font-family: var(--pp-font-display);
  font-size: 26px;
  line-height: 0.95;
  text-transform: uppercase;
}

.pp-docket__body {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-3);
  padding: var(--pp-space-4);
}

@media (max-width: 519px) {
  .pp-docket { box-shadow: 8px 8px 0 var(--pp-docket-shadow, var(--pp-char)); }
}

/* --------------------------------------------------------------------------
   Unlock card — a street's progress towards its own round
   -------------------------------------------------------------------------- */

.pp-unlock {
  width: min(100%, 660px);
  background: var(--pp-semolina);
  color: var(--pp-char);
  border: var(--pp-rule-solid) solid var(--pp-char);
  /* Dockets lift; this is one. */
  box-shadow: 12px 12px 0 var(--pp-char);
}

.pp-unlock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-space-3);
  flex-wrap: wrap;
  padding: var(--pp-space-4);
  border-bottom: var(--pp-rule-solid) solid var(--pp-char);
}

.pp-unlock__postcode {
  font-family: var(--pp-font-display);
  font-size: 26px;
  line-height: 0.95;
  text-transform: uppercase;
}

.pp-unlock__body {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-3);
  padding: var(--pp-space-4);
}

.pp-unlock__count {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pp-space-4);
}

.pp-unlock__figure {
  font-family: var(--pp-font-display);
  font-size: 72px;
  line-height: 0.8;
  letter-spacing: var(--pp-display-track);
}

.pp-unlock__needed {
  max-width: 22ch;
  font-family: var(--pp-font-data);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
  text-transform: uppercase;
  color: var(--pp-stone);
}

.pp-unlock__track {
  height: 22px;
  background: var(--pp-paper);
  border: var(--pp-rule-solid) solid var(--pp-char);
}

.pp-unlock__fill { height: 100%; background: var(--pp-ovenred); }

.pp-unlock__houses {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 7px;
}

.pp-unlock__house {
  height: 32px;
  background: var(--pp-char);
  opacity: 0.14;
  clip-path: polygon(50% 0, 100% 35%, 88% 35%, 88% 100%, 12% 100%, 12% 35%, 0 35%);
}

.pp-unlock__house--on { background: var(--pp-ovenred); opacity: 1; }

@media (max-width: 519px) {
  .pp-unlock { box-shadow: 8px 8px 0 var(--pp-char); }
  .pp-unlock__figure { font-size: 54px; }
  .pp-unlock__count { flex-direction: column; align-items: flex-start; }
  .pp-unlock__needed { text-align: left; }
}

/* --------------------------------------------------------------------------
   Slot picker — available, selected, nearly gone, sold out
   Radio-driven, so selection costs no JavaScript.
   -------------------------------------------------------------------------- */

.pp-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.pp-slot {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-1);
  padding: 14px 12px;
  border: var(--pp-rule-solid) solid var(--pp-char);
  background: transparent;
  color: var(--pp-char);
  cursor: pointer;
  transition:
    background-color var(--pp-dur-base) var(--pp-ease),
    color var(--pp-dur-base) var(--pp-ease);
}

.pp-slot__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pp-slot__day,
.pp-slot__status {
  font-family: var(--pp-font-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pp-slot__day { color: var(--pp-stone); }

.pp-slot__time {
  font-family: var(--pp-font-data);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.pp-slot:hover { background: var(--pp-crust-deep); }

.pp-slot:has(.pp-slot__input:checked) {
  background: var(--pp-ovenred);
  border-color: var(--pp-ovenred);
  color: var(--pp-semolina);
}

.pp-slot:has(.pp-slot__input:checked) .pp-slot__day,
.pp-slot:has(.pp-slot__input:checked) .pp-slot__status { color: var(--pp-semolina); }

.pp-slot:has(.pp-slot__input:focus-visible) {
  outline: var(--pp-rule-solid) solid var(--pp-ovenred);
  outline-offset: 2px;
}

/* Nearly gone — flame carries the warning, never red on red. */
.pp-slot--low .pp-slot__status { color: var(--pp-ember); }

/* Past and unavailable states go neutral. */
.pp-slot--sold-out {
  cursor: not-allowed;
  border-color: var(--pp-crust);
  color: var(--pp-stone);
}

.pp-slot--sold-out:hover { background: transparent; }
.pp-slot--sold-out .pp-slot__day,
.pp-slot--sold-out .pp-slot__status { color: var(--pp-stone); }

/* --------------------------------------------------------------------------
   Route line — 3px dashed ovenred, horizontal or vertical, never curved
   -------------------------------------------------------------------------- */

.pp-route {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
}

.pp-route::before {
  content: "";
  position: absolute;
  top: 13px;
  right: 10%;
  left: 10%;
  border-top: var(--pp-rule-route) dashed var(--pp-ovenred);
}

.pp-route__stop {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pp-space-1);
  text-align: center;
}

.pp-route__dot {
  width: 28px;
  height: 28px;
  margin-bottom: var(--pp-space-2);
  border: var(--pp-rule-route) solid var(--pp-ovenred);
  background: var(--pp-char);
}

.pp-route__stop--active .pp-route__dot { background: var(--pp-ovenred); }

.pp-route__label {
  font-family: var(--pp-font-display);
  font-size: 19px;
  line-height: 1;
  text-transform: uppercase;
}

.pp-route__meta {
  font-family: var(--pp-font-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pp-surface-body);
}

.pp-route--vertical {
  grid-auto-flow: row;
  grid-auto-columns: auto;
}

.pp-route--vertical::before {
  top: 14px;
  bottom: 14px;
  left: 13px;
  right: auto;
  border-top: 0;
  border-left: var(--pp-rule-route) dashed var(--pp-ovenred);
}

.pp-route--vertical .pp-route__stop {
  flex-direction: row;
  align-items: center;
  gap: var(--pp-space-3);
  text-align: left;
}

.pp-route--vertical .pp-route__dot { margin-bottom: 0; flex: none; }

@media (max-width: 599px) {
  .pp-route__meta { display: none; }
  .pp-route__label { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   FAQ — plain answers
   -------------------------------------------------------------------------- */

.pp-faq { border-top: var(--pp-rule-solid) solid var(--pp-surface-rule); }

.pp-faq__item { border-bottom: var(--pp-rule-solid) solid var(--pp-surface-rule); }

.pp-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-space-4);
  padding: var(--pp-space-4) 0;
  font-family: var(--pp-font-ui);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.pp-faq__question::-webkit-details-marker { display: none; }

.pp-faq__question::after {
  content: "+";
  flex: none;
  font-family: var(--pp-font-data);
  font-size: 24px;
  line-height: 1;
  color: var(--pp-ovenred);
}

.pp-faq__item[open] .pp-faq__question::after { content: "–"; }

.pp-faq__answer {
  max-width: 70ch;
  padding: 0 var(--pp-space-5) var(--pp-space-4) 0;
  font-size: var(--pp-body-m);
  line-height: 1.6;
  color: var(--pp-surface-body);
}

/* --------------------------------------------------------------------------
   Page header — the opening band of an inner page
   -------------------------------------------------------------------------- */

.pp-pagehead {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-3);
  /* Opens the page, so it sits closer to what follows than a section break. */
  padding-bottom: var(--pp-space-5);
}

.pp-pagehead .pp-eyebrow { margin-bottom: var(--pp-space-1); }

/* --------------------------------------------------------------------------
   Stub — a page that exists but hasn't been designed yet
   -------------------------------------------------------------------------- */

.pp-stub {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-3);
  padding: var(--pp-space-5);
  border: var(--pp-rule-route) dashed var(--pp-ovenred);
}

.pp-stub__notes {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-2);
  max-width: 70ch;
}

.pp-stub__note {
  position: relative;
  padding-left: 22px;
  font-size: var(--pp-body-m);
  line-height: 1.55;
  color: var(--pp-surface-body);
}

.pp-stub__note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 2px;
  background: var(--pp-ovenred);
}

/* --------------------------------------------------------------------------
   Postcode plate — one plate per pitch
   The atom of the whole system.
   -------------------------------------------------------------------------- */

.pp-plate {
  display: inline-flex;
  flex-direction: column;
  gap: var(--pp-space-1);
  padding: 12px 16px;
  border: var(--pp-rule-solid) solid currentColor;
}

.pp-plate__postcode {
  font-family: var(--pp-font-display);
  font-size: 32px;
  line-height: 0.9;
  text-transform: uppercase;
}

.pp-plate__when {
  font-family: var(--pp-font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pp-surface-meta);
}

/* --------------------------------------------------------------------------
   Manifesto panel — the photograph, and the claim beside it
   Split with the shot carrying the weight on the left. The copy column is
   deliberately one sentence: anything longer competes with the photograph.
   -------------------------------------------------------------------------- */

.pp-manifesto {
  --pp-split-a: 1.05fr;
  --pp-split-b: 0.95fr;
  border-bottom: var(--pp-rule-solid) solid var(--pp-char);
}

.pp-manifesto__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--pp-space-4);
  padding: clamp(48px, 6vw, 96px) var(--pp-gutter);
}

.pp-manifesto__title {
  max-width: 14ch;
  font-family: var(--pp-font-display);
  font-size: clamp(48px, 6vw, 92px);
  line-height: 0.9;
  letter-spacing: var(--pp-display-track);
  text-transform: uppercase;
}

/* Flame on char — the only approved pairing that can carry this much weight on
   an ovenred panel. A single square field rather than per-line highlights:
   those collide at Anton's 0.9 leading, and the phrase is too long to hug. */
.pp-manifesto__mark {
  display: block;
  margin-top: 0.1em;
  padding: 0.12em 0.16em 0.16em;
  background: var(--pp-char);
  color: var(--pp-flame);
}

/* --------------------------------------------------------------------------
   Repeated postcode prompt
   The same action, placed wherever the argument has just landed. Centred so it
   reads as a break in the page rather than the start of the next section.
   -------------------------------------------------------------------------- */

.pp-checkcta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pp-space-2);
  text-align: center;
}

.pp-checkcta__note {
  font-family: var(--pp-font-data);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pp-surface-meta);
}

/* The caveat under a placeholder count. Data face, quiet — it qualifies the
   number above it without competing with it. */
.pp-check__meta {
  font-family: var(--pp-font-data);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pp-surface-meta);
}