/* ==========================================================================================
   Event Kit: component CSS

   Tokens (colours, fonts, sizes, spacing) live in theme.json and arrive here as
   --wp--preset--* and --wp--custom--* variables. This file never hardcodes a brand value, so
   a style variation can reskin the whole site from theme.json alone.

   Component names follow the Claude Design "Ticket and menu board" page (2026-11-02) so the
   design file and the theme stay in step.

   Contents
     1. Tokens and roles      8. Podium                 15. Print (matted photo)
     2. Base                  9. Cards                  16. Order slip
     3. Header               10. Partners               17. Split hero
     4. Hero and ticket      11. Signup band            18. Pitmasters beside a print
     5. Photo band, winner   12. Footer                 19. Winner band (the one dark band)
     6. Essentials           13. Single posts and pages 20. Cards, photo beside
     7. Menu list (lineup)   14. Ledger (dot leaders)   21. Partners strip, light footer, page head

   Sections 14 to 21 were added 2026-11-10 for Brisket King (Claude Design direction B). They read
   only role variables and theme.json custom values, so every skin gets them and Rib King's
   sections 3 to 13 are untouched.

   Breakpoints: 48em (768px) tablet, 60em (960px) split layouts, 64em (1024px) desktop.
   ========================================================================================== */


/* 1. Tokens and roles
   Short names for theme.json values, plus roles (text, rule, surface) that dark sections
   swap in one place. ----------------------------------------------------------------------- */

:root {
  /* Palette */
  --color-brand-red: var(--wp--preset--color--brand-red);
  --color-gold:      var(--wp--preset--color--gold);
  --color-bark:      var(--wp--preset--color--bark);
  --color-ember:     var(--wp--preset--color--ember);
  --color-ink:       var(--wp--preset--color--ink);
  --color-smoke:     var(--wp--preset--color--smoke);
  --color-paper:     var(--wp--preset--color--paper);
  --color-white:     var(--wp--preset--color--white);

  /* Fonts */
  --font-display: var(--wp--preset--font-family--display);
  --font-ui:      var(--wp--preset--font-family--ui);

  /* Roles on a light background */
  --color-text:       var(--color-ink);
  --color-text-muted: var(--color-smoke);
  --color-rule:       var(--color-ink);
  --color-surface:    var(--color-white);

  /* Roles on a dark background */
  --color-dark-bg:     var(--color-ember);
  --color-dark-bg-alt: var(--color-bark);
  --color-dark-text:   var(--color-paper);
  --color-dark-accent: var(--color-gold);
  --color-dark-rule:   var(--color-bark);

  /* Type */
  --text-s:          var(--wp--preset--font-size--small);
  --text-date:       var(--wp--preset--font-size--date);
  --tracking-ui:     0.04em;
  --leading-display: 0.92;

  /* Lines, targets, widths (theme.json settings.custom) */
  --rule-strong:     var(--wp--custom--rule);
  --rule-perforation: var(--wp--custom--perforation);
  --tap-min:         var(--wp--custom--tap);
  --width-reading:   var(--wp--custom--reading-width);
  --width-slip:      34rem;

  /* Skin-tunable values (theme.json settings.custom; the base theme sets neutral values) */
  --hairline:        var(--wp--custom--hairline) color-mix(in srgb, var(--color-ink) 16%, transparent);
  --leader:          var(--wp--custom--leader) var(--color-text-muted);
  --perforation:     var(--wp--custom--perforation) var(--color-text-muted);
  --tilt:            var(--wp--custom--tilt);
  --stretch-display: var(--wp--custom--stretch-display);
  --stretch-event:   var(--wp--custom--stretch-event);
  --stretch-ui:      var(--wp--custom--stretch-ui);
  --weight-display:  var(--wp--custom--weight-display);

  /* Alternate light surface: a skin that defines a "butcher" colour gets it, others fall back to paper */
  --color-surface-alt: var(--wp--preset--color--butcher, var(--color-paper));
  --text-caption:    0.8125rem;

  /* Spacing (theme.json slugs: "2xs" becomes "2-xs" in the variable name) */
  --space-3xs: var(--wp--preset--spacing--3-xs);
  --space-2xs: var(--wp--preset--spacing--2-xs);
  --space-xs:  var(--wp--preset--spacing--xs);
  --space-s:   var(--wp--preset--spacing--s);
  --space-m:   var(--wp--preset--spacing--m);
  --space-l:   var(--wp--preset--spacing--l);
  --space-xl:  var(--wp--preset--spacing--xl);
}


/* 2. Base ---------------------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
}

p, li, dd {
  text-wrap: pretty;
}

a {
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 3px solid var(--color-text);
  outline-offset: 3px;
}

::selection {
  background: var(--color-gold);
  color: var(--color-ink);
}

.wp-block-image img:not([style*="aspect-ratio"]) {
  height: auto;
}

/* Header, main and footer sit flush; sections bring their own padding. */
.wp-site-blocks > * + * {
  margin-block-start: 0;
}

/* Small uppercase label above a heading */
.kicker,
.kicker p {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
  color: var(--color-text-muted);
}

/* Section heads: reading width, left-aligned inside a constrained (centred) layout */
.section-head {
  max-width: var(--width-reading);
}

.is-layout-constrained > .section-head,
.is-layout-constrained > .menu-list,
.is-layout-constrained > .section-foot {
  margin-left: 0 !important; /* beats core's auto margins on constrained children */
}

.section-head .section-head__link {
  font-family: var(--font-ui);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.section {
  padding-block: var(--wp--preset--spacing--section);
}

.section--ruled {
  border-top: var(--rule-strong) solid var(--color-rule);
}

/* Dark sections: swap the roles, and every component inside follows. */
.site-footer,
.essentials,
.signup,
.section--band {
  --color-text:       var(--color-dark-text);
  --color-text-muted: var(--color-dark-text);
  --color-rule:       var(--color-dark-rule);
  --color-surface:    transparent;
}

:is(.site-footer, .essentials, .signup, .section--band) a {
  color: var(--color-dark-text);
}

:is(.site-footer, .essentials, .signup, .section--band) a:hover {
  color: var(--color-dark-accent);
}

:is(.site-footer, .essentials, .signup, .section--band) .kicker {
  color: var(--color-dark-accent);
}

:is(.site-footer, .essentials, .signup, .section--band) :focus-visible {
  outline-color: var(--color-dark-accent);
}

/* Buttons (base look is in theme.json styles.elements.button) */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 48px;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--color-text);
  border-color: currentColor;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--color-text);
  color: var(--color-paper);
}

.btn-lg .wp-block-button__link {
  min-height: 56px;
  font-size: 1.125rem;
}

.btn-block,
.btn-block .wp-block-button__link {
  width: 100%;
  justify-content: space-between;
}

/* Image cropping helpers (core/image with aspectRatio already crops; these set the focus) */
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.focus-top img   { object-position: 50% 22%; }
.focus-upper img { object-position: 50% 35%; }


/* 3. Header -------------------------------------------------------------------------------- */

.site-header {
  background: var(--color-paper);
}

.site-header__bar {
  min-height: 64px;
}

.site-header .wp-block-site-logo img {
  height: 40px;
  width: auto;
}

.site-header .wp-block-navigation {
  font-size: 1rem;
}

.site-header .wp-block-navigation a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
}

.site-header .wp-block-button__link {
  min-height: var(--tap-min);
  padding-inline: var(--space-s);
}

@media (min-width: 64em) {
  .site-header .wp-block-site-logo img {
    height: 48px;
  }
}

/* Phone menu (the navigation overlay): items left-aligned with a gutter, not pushed right */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open {
  padding-left: var(--wp--preset--spacing--gutter);
  padding-right: var(--wp--preset--spacing--gutter);
}


/* 4. Hero and ticket ----------------------------------------------------------------------- */

.hero {
  padding-block: var(--space-m) var(--space-l);
}

.hero .hero__wordmark img {
  width: 100%;
  max-width: 640px;
  height: auto;
}

.hero__lead {
  max-width: var(--width-reading);
  font-size: var(--wp--preset--font-size--lead);
}

.hero__credits {
  font-size: var(--text-s);
  color: var(--color-text-muted);
}

@media (min-width: 64em) {
  .hero {
    padding-top: var(--space-xl);
  }
}

/* The intro is two paragraphs. On desktop they read as one; on phones the ticket sits between
   them: logo, first part of the intro, ticket, rest of the intro, credits. Pure reordering with
   display: contents, so the text stays in reading order for search engines and screen readers. */
@media (min-width: 782px) {
  .hero__lead--a,
  .hero__lead--b {
    display: inline;
  }

  .hero__lead--a::after {
    content: " ";
  }
}

@media (max-width: 781px) {
  .hero__grid {
    flex-direction: column;
    gap: var(--space-m);
  }

  .hero__grid > .hero__intro {
    display: contents;
  }

  .hero__grid > *,
  .hero__intro > * {
    flex-basis: auto !important;
    width: 100%;
    margin-block: 0;
  }

  .hero__wordmark       { order: 1; }
  .hero__lead--a        { order: 2; }
  .hero__grid > .hero__ticket { order: 3; }
  .hero__lead--b        { order: 4; }
  .hero__credits        { order: 5; }
}

/* The ticket: main part on top, perforated stub below */
.ticket {
  background: var(--color-surface);
  border: var(--rule-strong) solid var(--color-rule);
}

.ticket__main {
  padding: var(--space-m);
}

.ticket__date {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-date);
  line-height: var(--leading-display);
  text-transform: uppercase;
}

.ticket__place {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.35;
}

.ticket__stub {
  padding: var(--space-m);
  border-top: var(--rule-perforation) var(--color-rule);
}

.ticket__price {
  font-family: var(--font-ui);
  font-weight: 600;
}

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


/* 5. Photo band and winner feature ---------------------------------------------------------- */

/* Winner feature: headline, one photo, a link to the recap. Sits under the hero between events. */
.winner-feature {
  margin-block: var(--space-l);
}

.winner-feature__title {
  max-width: 22ch;
  margin-left: 0 !important; /* left-aligned like section heads, not centred by the constrained layout */
  margin-bottom: var(--space-s);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
}

.winner-feature__link {
  margin-top: var(--space-s);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.125rem;
}

@media (max-width: 47.99em) {
  .winner-feature .wp-block-image {
    margin-inline: calc(-1 * var(--wp--preset--spacing--gutter));
  }
}

.photo-band {
  margin-block: var(--space-l);
}

/* Phones: bleed past the page gutter to the screen edge */
@media (max-width: 47.99em) {
  .photo-band,
  .photo-band.alignfull {
    margin-inline: calc(-1 * var(--wp--preset--spacing--gutter));
  }
}


/* 6. Essentials scoreboard (dark): 2 x 2 on phones, 4 across from tablet ------------------- */

.essentials {
  background: var(--color-dark-bg);
  color: var(--color-dark-text);
}

.essentials__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

/* Grid cells line up at the top: drop the block-gap margin core adds to every cell after the first */
.essentials__list > * {
  margin-block: 0;
}

.essentials__item {
  display: grid;
  gap: var(--space-3xs);
  align-content: start;
  padding: var(--space-m) var(--space-s);
}

.essentials__item:nth-child(n+3) {
  border-top: var(--rule-strong) solid var(--color-dark-bg-alt);
}

.essentials__item:nth-child(odd) {
  border-right: var(--rule-strong) solid var(--color-dark-bg-alt);
}

.essentials__dt {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
  color: var(--color-dark-accent);
}

.essentials__dd {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.essentials__small {
  font-size: var(--text-s);
  line-height: 1.4;
}

@media (min-width: 48em) {
  .essentials__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .essentials__item {
    border-top: 0 !important; /* undo the 2 x 2 row rule */
    border-right: var(--rule-strong) solid var(--color-dark-bg-alt);
    padding: var(--space-l) var(--space-m);
  }

  .essentials__item:last-child {
    border-right: 0;
  }

  .essentials__dd {
    font-size: 2.25rem;
  }
}


/* 7. Menu list (lineup): name, leader dots, detail. One column on phones, two from tablet. */

ul.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: var(--rule-strong) solid var(--color-rule);
  columns: 1;
  column-gap: var(--space-xl);
}

ul.menu-list li {
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  min-height: var(--tap-min);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--color-rule);
}

ul.menu-list li strong {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.3125rem; /* 10% up from 1.1875rem, Melvin 2026-11-03 */
  line-height: 1.2;
}

/* The leader dots fill the space after the name */
ul.menu-list li strong::after {
  content: "";
  flex: 1;
  min-width: var(--space-s);
  border-bottom: 2px dotted var(--color-text-muted);
  transform: translateY(-0.3em);
}

ul.menu-list li em {
  font-style: normal;
  font-size: var(--text-s);
  color: var(--color-text-muted);
  text-align: right;
}

@media (min-width: 48em) {
  ul.menu-list {
    columns: 2;
  }
}


/* 8. Podium -------------------------------------------------------------------------------- */

.podium__body {
  border-top: var(--rule-strong) solid var(--color-rule);
  padding-top: var(--space-s);
}

.podium__award {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--subheading); /* h3 size: one step below the section h2 */
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
  color: var(--color-brand-red);
}

.podium__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  text-transform: uppercase;
}

.podium__item--first .podium__name {
  font-size: 2.75rem;
}

.podium__meta {
  font-size: var(--text-s);
  color: var(--color-text-muted);
}

.podium__item img {
  object-fit: cover;
}


/* 9. Cards (query loop). The whole card is the click target via the title link's ::after. */

.card-grid .wp-block-post-template {
  gap: var(--space-l);
}

.card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  background: var(--color-surface);
  border: var(--rule-strong) solid var(--color-rule);
}

.card .wp-block-post-featured-image {
  margin: 0;
  background: var(--color-dark-bg-alt); /* shows while the image loads, or if there is none */
}

.card .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__body {
  padding: var(--space-s) var(--space-s) var(--space-m);
}

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

.card__meta .wp-block-post-terms a {
  text-decoration: none;
  color: var(--color-text-muted);
}

.card__title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--subheading);
  line-height: 1.2;
  text-transform: none;
}

.card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card:hover .card__title a {
  color: var(--color-brand-red);
  text-decoration: underline;
}

/* Keyboard focus outlines the whole card instead of the hidden title link */
.card:focus-within {
  outline: 3px solid var(--color-text);
  outline-offset: 3px;
}

.card:focus-within :focus-visible {
  outline: none;
}


/* 10. Partners: lead tiers in boxed tiles, supporting tier as a plain logo row ------------- */

.partner-tiers {
  border-top: var(--rule-strong) solid var(--color-rule);
}

.partner-tier {
  padding-block: var(--space-m);
  border-bottom: var(--rule-strong) solid var(--color-rule);
}

.partner-tier__label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
  color: var(--color-text-muted);
}

.partner-tier__logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
}

.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6.5rem;
  margin: 0;
  padding: var(--space-m);
  background: var(--color-surface);
  border: var(--rule-strong) solid var(--color-rule);
}

/* Single tone: every logo rendered near-black, whatever its own colours */
.partner-logo img {
  max-height: 64px;
  width: auto;
  filter: grayscale(1) brightness(0.25);
}

.partner-logo .logo-text {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
}

.partner-tier--support .partner-tier__logos {
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-s) var(--space-m);
}

.partner-tier--support .partner-logo {
  min-height: 4rem;
  padding: 0;
  justify-content: flex-start;
  background: transparent;
  border: 0;
}

.partner-tier--support .partner-logo img {
  max-height: 36px;
}

@media (min-width: 48em) {
  .partner-logo {
    min-height: 8rem;
  }
}

/* Desktop: tier label on the left, logos on the right */
@media (min-width: 64em) {
  .partner-tier {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: var(--space-xl);
    align-items: center;
    padding-block: var(--space-l);
  }
}


/* 11. Signup band (dark) ------------------------------------------------------------------- */

.signup {
  background: var(--color-dark-bg-alt);
  color: var(--color-dark-text);
}

.signup iframe {
  width: 100%;
  max-width: var(--width-reading);
  border: 0;
}

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


/* 12. Footer (dark) ------------------------------------------------------------------------ */

.site-footer {
  background: var(--color-dark-bg);
  color: var(--color-dark-text);
  padding-block: var(--space-xl) var(--space-l);
}

.site-footer__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  text-transform: uppercase;
}

.site-footer h2,
.site-footer h3 {
  margin-bottom: var(--space-2xs);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
  color: var(--color-dark-accent);
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.site-footer__legal {
  margin-top: var(--space-xl);
  padding-top: var(--space-s);
  border-top: var(--rule-strong) solid var(--color-dark-bg-alt);
  font-size: var(--text-s);
}

@media (min-width: 48em) {
  .site-footer__name {
    font-size: 3rem;
  }
}


/* Instagram feed (Smash Balloon). The section supplies the heading and follow link, so the
   plugin's own header and buttons stay hidden even if the feed settings turn them back on. */
.section-instagram #sb_instagram {
  padding-bottom: 0 !important;
}

.section-instagram .sb_instagram_header,
.section-instagram #sbi_load {
  display: none !important;
}

/* Embedded forms: tall enough that the form never scrolls inside its own frame */
.signup iframe {
  overflow: hidden;
}

.apply-form {
  display: block;
  height: 1150px; /* Airtable application form, measured at column width */
}

@media (max-width: 47.99em) {
  .apply-form {
    height: 1350px; /* fields stack on phones */
  }
}


/* 13. Single posts and pages --------------------------------------------------------------- */

.entry-header {
  padding-block: var(--space-xl) var(--space-l);
}

/* Inner pages read at article width; the home page uses full sections instead. */
body:not(.home) .entry-content {
  max-width: var(--width-reading);
}

.entry-content > .alignwide,
.entry-content > .alignfull {
  max-width: none;
}

.entry-content img {
  height: auto;
}

.entry-meta {
  font-size: var(--text-s);
}

.entry-meta .wp-block-post-terms a {
  text-decoration: none;
}


/* 14. Ledger: label, dot leader, value. The one pattern for every label-and-value row (prices on
   the order slip, years on the roll of champions, results in a recap). Three markups work:
   dl > div > dt + dd (shortcodes, HTML blocks), ol/ul > li > .ledger__key + .ledger__value
   (shortcodes), and a list block whose items are <strong>key</strong><em>value</em> (editable). */

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

.ledger div,
.ledger li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2xs);
  padding: var(--space-2xs) 0;
  margin: 0;
}

.ledger dt,
.ledger__key,
.ledger li > strong {
  display: flex;
  flex: 1 0 auto;
  align-items: baseline;
  gap: var(--space-2xs);
  font-weight: 400;
}

.ledger dt::after,
.ledger__key::after,
.ledger li > strong::after {
  content: "";
  flex: 1;
  min-width: var(--space-s);
  border-bottom: var(--leader);
  transform: translateY(-0.25em);
}

.ledger dd,
.ledger__value,
.ledger li > em {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ledger__note {
  flex-basis: 100%;
  text-align: right;
  color: var(--color-text-muted);
  font-size: var(--text-s);
}

/* Roll of champions: the year is the key, set in the UI face */
.ledger--roll .ledger__key {
  font-family: var(--font-ui);
  font-stretch: var(--stretch-ui);
  font-weight: var(--weight-display);
  font-size: 1.25rem;
}

.ledger--roll .is-off .ledger__value {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Two columns from tablet; a row never splits across columns */
.ledger--columns {
  columns: 1;
  column-gap: var(--wp--preset--spacing--2-xl);
}

.ledger--columns > * {
  break-inside: avoid;
}

@media (min-width: 48em) {
  .ledger--columns {
    columns: 2;
  }
}


/* 15. Print: a photo in a white mat with a hairline and an italic caption. Tilt modifiers apply
   from 960px only, and only when the skin sets a tilt (the base theme's tilt is 0deg). */

.print,
.wp-block-image.print {
  margin: 0;
  padding: var(--space-2xs);
  background: var(--color-surface);
  border: var(--hairline);
}

.print img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.print--4x3 img {
  aspect-ratio: 4 / 3;
}

.print figcaption,
.print .wp-element-caption {
  margin: var(--space-3xs) var(--space-3xs) 0;
  font-size: var(--text-caption);
  font-style: italic;
  line-height: 1.6;
  text-align: left;
  color: var(--color-text-muted);
}

.section--band .print {
  border: 0;
}

@media (min-width: 60em) {
  .print--tilt-right {
    transform: rotate(var(--tilt));
  }

  .print--tilt-left {
    transform: rotate(calc(var(--tilt) * -0.8));
  }
}


/* 16. Order slip: a white slip centred on the alternate surface, perforated top and bottom, holding
   the slip ledger, a note and one full-width button. */

.section--alt {
  background: var(--color-surface-alt);
}

.section .slip {
  max-width: var(--width-slip);
  margin-inline: auto;
  padding: var(--space-l) var(--space-m);
  background: var(--color-surface);
  border-top: var(--perforation);
  border-bottom: var(--perforation);
}

.slip__title {
  margin-bottom: var(--space-s);
  font-size: 2rem;
}

.slip__note {
  margin-block: var(--space-s);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}


/* 17. Split hero: logo, hidden H1, event line, lead and actions on the left; one matted print on the
   right. One column on phones, 5/6 from 960px. */

.hero__split {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}

.hero__split > * {
  margin-block: 0;
}

.hero__logo img {
  width: 7.5rem;
  height: auto;
}

.hero__event {
  max-width: 20ch;
  margin-top: var(--space-m);
  font-family: var(--font-display);
  font-stretch: var(--stretch-event);
  font-weight: var(--weight-display);
  font-size: var(--text-date);
  line-height: 1.02;
}

.hero--split .hero__lead {
  max-width: 36rem;
  margin-top: var(--space-s);
}

.hero__actions {
  margin-top: var(--space-l);
  gap: var(--space-xs) !important; /* two buttons side by side on a 390px screen */
}

.hero--split .print img {
  aspect-ratio: 4 / 3;
  object-position: 45% 50%;
}

@media (min-width: 60em) {
  .hero__split {
    grid-template-columns: 5fr 6fr;
    gap: var(--wp--preset--spacing--2-xl);
  }

  .hero__logo img {
    width: 9rem;
  }
}

/* A bold text link that meets the tap target */
.text-link,
.text-link a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-weight: 700;
  text-decoration: underline;
}


/* 18. Pitmasters beside a print: section head, then a print on the left and a ruled list of
   text-only pitmaster cards on the right. */

.pitmasters__grid {
  display: grid;
  gap: var(--space-l);
}

.pitmasters__grid > * {
  margin-block: 0;
}

.pitmasters__list {
  border-top: var(--rule-strong) solid var(--color-rule);
}

.pitmaster {
  padding: var(--space-s) 0;
  border-bottom: var(--hairline);
}

.pitmaster > * {
  margin-block: 0;
}

.pitmaster__name {
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.pitmaster__credits {
  margin-top: var(--space-3xs);
  color: var(--color-text-muted);
}

@media (min-width: 60em) {
  .pitmasters__grid {
    grid-template-columns: 5fr 6fr;
    column-gap: var(--wp--preset--spacing--2-xl);
    align-items: start;
  }
}


/* 19. Winner band: the page's one dark band (roles swapped in section 2), the champion's name
   large, the print tilted left and on the right from 960px. */

.section--band {
  background: var(--color-dark-bg-alt);
  color: var(--color-dark-text);
}

.winner-band__grid {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}

.winner-band__grid > * {
  margin-block: 0;
}

.winner-band__year {
  font-weight: 700;
}

.winner-band__title {
  margin-top: var(--space-2xs);
  font-size: clamp(3rem, 10vw, 5rem);
}

.winner-band__who {
  margin-bottom: var(--space-s);
  font-size: 1.125rem;
}

.winner-band__also {
  margin-top: var(--space-m);
  max-width: 24rem;
}

.winner-band__also li > em {
  font-size: 1.25rem;
}

@media (min-width: 60em) {
  .winner-band__grid {
    grid-template-columns: 5fr 6fr;
    gap: var(--wp--preset--spacing--2-xl);
  }

  .winner-band__grid .print {
    order: 2;
  }
}


/* 20. Cards with the photo beside the text (query loop). Thumbnail left in a thin mat, meta, title
   and excerpt right, a hairline under each. 112px square on phones, 256px at 4:3 from tablet. */

.updates__list .wp-block-post-template {
  display: grid;
  gap: var(--space-m);
  max-width: 56rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-beside {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-s);
  align-items: start;
  padding-bottom: var(--space-m);
  border-bottom: var(--hairline);
}

.card-beside > * {
  margin-block: 0;
}

/* A post with no featured image still keeps its text in the second column */
.card-beside .wp-block-post-featured-image {
  grid-column: 1;
}

.card-beside__body {
  grid-column: 2;
}

.card-beside:not(:has(.wp-block-post-featured-image)) .card-beside__body {
  grid-column: 1 / -1;
}

.card-beside .wp-block-post-featured-image {
  margin: 0;
  padding: var(--space-3xs);
  background: var(--color-surface);
  border: var(--hairline);
}

.card-beside .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.card-beside__meta {
  font-size: var(--text-s);
  color: var(--color-text-muted);
}

.card-beside__meta a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  text-decoration: underline;
}

.card-beside__title {
  margin: var(--space-3xs) 0 var(--space-2xs);
  font-size: clamp(1.375rem, 3.5vw, 1.875rem);
}

.card-beside__title a {
  display: inline-block;
  min-height: var(--tap-min);
  color: var(--color-text);
  text-decoration: none;
}

.card-beside__title a:hover {
  text-decoration: underline;
}

@media (min-width: 48em) {
  .card-beside {
    grid-template-columns: 16rem 1fr;
    gap: var(--space-l);
  }

  .card-beside .wp-block-post-featured-image img {
    aspect-ratio: 4 / 3;
  }
}


/* 21. Partners strip, light footer, page head ---------------------------------------------- */

/* Partners as one wrapping strip of greyscale logos, 40px tall, never full colour */
.partners--strip {
  color: var(--color-text-muted);
}

.partners--strip .partners__title {
  font-size: 1.5rem;
  color: var(--color-text);
}

.partners__strip {
  margin-top: var(--space-m);
  gap: var(--space-s) var(--space-xl) !important;
}

.partners__strip > * {
  margin: 0;
}

/* Also outranks the general .wp-block-image img:not([style*="aspect-ratio"]) rule in section 2,
   which otherwise sets height: auto and lets a logo fill the strip (fixed 0.4.2) */
.partners__logo img,
.wp-block-image.partners__logo img:not([style*="aspect-ratio"]) {
  height: 2.5rem;
  width: auto;
  filter: grayscale(1);
  opacity: 0.75;
}

.partners__logo .logo-text {
  font-family: var(--font-ui);
  font-stretch: var(--stretch-ui);
  font-weight: 700;
  font-size: 1.25rem;
}

/* Light footer and signup: back to the light roles on the alternate surface, with a strong top rule */
.site-footer.site-footer--light,
.signup.signup--light {
  --color-text:       var(--color-ink);
  --color-text-muted: var(--color-smoke);
  --color-rule:       var(--color-ink);
  --color-surface:    var(--color-white);
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-top: var(--rule-strong) solid var(--color-rule);
}

:is(.site-footer--light, .signup--light) a {
  color: var(--color-text);
}

:is(.site-footer--light, .signup--light) a:hover {
  color: var(--color-brand-red);
}

:is(.site-footer--light, .signup--light) :focus-visible {
  outline-color: var(--color-text);
}

.site-footer--light .site-footer__logo img {
  width: 5.5rem;
  height: auto;
}

.site-footer--light .site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer--light .site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-weight: 600;
}

.site-footer--light .site-footer__line,
.site-footer--light .site-footer__legal {
  color: var(--color-text-muted);
}

.site-footer--light .site-footer__legal {
  margin-top: var(--space-l);
  padding-top: var(--space-s);
  border-top: var(--hairline);
  font-size: var(--text-s);
}

/* Signup copy at reading width, left-aligned */
.signup--reading .signup__inner > * {
  max-width: var(--width-reading);
  margin-left: 0 !important;
}

/* Inner pages: H1 and an intro, finished with a hairline. Replaces the hero below the header. */
.page-head {
  padding: var(--space-xl) 0 var(--space-l);
  border-bottom: var(--hairline);
}

.page-head p {
  max-width: var(--width-reading);
  margin-top: var(--space-xs);
  font-size: 1.125rem;
}


/* 22. Winners and Pitmasters pages: a year-jump nav (wrapping row on mobile, sticky column from
   60em) beside one section per year. Markup comes from [winners_page] or the Pitmasters page
   blocks (01_Working/brisketking-kit/tools/build-pitmasters.py). */

/* These two pages read wider than an article: the nav column plus the reading width */
body:not(.home) .entry-content:has(> .winners, > .pitmasters-page) {
  max-width: calc(var(--width-reading) + 10rem + var(--space-xl));
}

.year-jump ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-m);
}

.year-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-ui);
  font-stretch: var(--stretch-ui);
  font-weight: var(--weight-display);
  text-decoration: none;
}

.year-jump a:hover,
.year-jump a:focus-visible {
  text-decoration: underline;
}

.winners-year {
  padding: var(--space-l) 0;
  border-top: var(--rule-strong) solid var(--color-rule);
  scroll-margin-top: var(--space-m);
}

.winners-year > *,
.pitmasters-page__body > * {
  margin-block: 0;
}

.winners-year h2 {
  font-size: clamp(2.5rem, 8vw, 3.5rem);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

/* Winner photo (0.4.2): a small print beside the year and note, stacked on phones */
.winners-year__head {
  display: grid;
  gap: var(--space-m);
  margin-bottom: var(--space-s);
}

.winners-year__head > div > * {
  margin-block: 0;
}

.winners-year__head h2 {
  margin-bottom: var(--space-xs);
}

.winners-year__photo {
  max-width: 17.5rem;
}

@media (min-width: 48em) {
  .winners-year__head {
    grid-template-columns: minmax(0, 1fr) 17.5rem;
    gap: var(--space-l);
    align-items: start;
  }
}

.winners-year__note {
  color: var(--color-text-muted);
  margin-bottom: var(--space-s);
}

.winners-year .ledger + .text-link,
.winners-year .pitmasters__list + .text-link {
  margin-top: var(--space-s);
}

.pitmasters__also {
  margin-top: var(--space-m);
  margin-bottom: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--text-s);
}

.pitmasters__letter {
  margin-top: var(--space-m);
  font-size: 1.25rem;
  color: var(--color-text-muted);
}

.pitmasters-year .pitmaster__name {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
}

@media (min-width: 48em) {
  .pitmasters-year .pitmasters__list {
    columns: 2;
    column-gap: var(--space-xl);
  }

  .pitmasters-year .pitmaster {
    break-inside: avoid;
  }
}

@media (min-width: 60em) {
  .winners,
  .pitmasters-page {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: var(--space-xl);
    align-items: start;
  }

  .year-jump {
    position: sticky;
    top: var(--space-m);
  }

  .year-jump ul {
    flex-direction: column;
  }
}