/* ==========================================================================
   PVILCA — redesign design system
   Ported from the Claude design build. The design computed every responsive
   value in JS; here those become custom properties driven by media queries so
   the pages render correctly with JS disabled.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face { font-family: "PlayfairDisplay"; src: url("../fonts/PlayfairDisplay-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PlayfairDisplay"; src: url("../fonts/PlayfairDisplay-Bold.woff2") format("woff2");    font-weight: 700; font-style: normal; font-display: swap; }

/* One variable file covers the whole 300–900 range the site uses (27 KB). */
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Ink */
  --ink:        #16181a;
  --ink-body:   #3d413e;
  --ink-soft:   #4c504d;
  --ink-muted:  #7d817d;
  --ink-faint:  #b4b7b2;

  /* Surfaces */
  --bg:         #ffffff;
  --bg-warm:    #f4f5f1;
  --bg-warm-2:  #eeefeb;
  --line:       #c9cbc6;
  --line-soft:  #e0e2dd;
  --line-faint: #eeefeb;

  /* Brand */
  --green:        #3f9c35;
  --green-bright: #4ca23b;
  --green-pale:   #8fd07f;
  --green-dark:   #348029;
  --red:          #ee2b24;
  --red-dark:     #d8221c;

  /* Dark chrome */
  --dark:        #16181a;
  --dark-line:   #2c2f31;
  --dark-text:   #e4e6e2;
  --dark-link:   #d5d7d3;
  --dark-muted:  #9ca0a1;
  --dark-label:  #6d7173;

  /* Type */
  --sans:    "Figtree", Helvetica, Arial, sans-serif;
  --display: "PlayfairDisplay", Georgia, serif;

  /* Rhythm — desktop defaults, overridden below */
  --pad-x:  60px;
  --bar-h:  80px;
  --mark:   28px;
  --nav-gap: 38px;
  --util-gap: 22px;
  --tickets-gap: 14px;
  --tickets-pad: 13px 20px;
  --h1: 48px;
  --h2: 34px;
  --measure: 1020px;

  /* Angled-band geometry. `drop` is the diagonal's rise across the viewport;
     the design used round(vw * 0.083) with a 320px floor. */
  --drop: max(27px, 8.3vw);
  --band: 44px;
  --hero-img-h: 600px;
}

@media (max-width: 1179px) { :root { --nav-gap: 26px; } }

@media (max-width: 999px) {
  :root {
    --pad-x: 36px;
    --band: 34px;
    --hero-img-h: 505px;
    --h1: 38px;
    --h2: 28px;
  }
}

@media (max-width: 639px) {
  :root {
    --pad-x: 22px;
    --bar-h: 66px;
    --mark: 23px;
    --util-gap: 10px;
    --tickets-gap: 0px;
    --tickets-pad: 13px 14px;
    --band: 26px;
    --hero-img-h: 430px;
    --h1: 30px;
    --h2: 24px;
  }
}

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

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

/* The site header is sticky, so a jump to any #anchor would otherwise land
   with the target tucked underneath it. Set on the scrolling element, this
   covers every in-page link at once — jump links, the skip link, and deep
   links people arrive on — and follows --bar-h down to 66px on small screens. */
html { scroll-padding-top: calc(var(--bar-h) + 24px); }

body {
  font-family: var(--sans);
  font-weight: 400;
  /* Figtree sets a touch narrow; a hair of tracking evens the colour. */
  letter-spacing: 0.005em;
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--green); }

img { max-width: 100%; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; margin: 0; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--green);
  color: #fff;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.skip-link:focus { left: 0; color: #fff; }

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

/* Unknown elements default to display:inline. Declared before the elements
   upgrade so layout is right from first paint. */
pvil-header, pvil-footer { display: block; }

/* The sticky lives on the wrapper, not the <header> inside it. A sticky element
   can only travel within its parent's box, and <pvil-header> is exactly as tall
   as the header — so sticking the inner element pins it for 0px and it scrolls
   away. The wrapper is a direct child of <body>, so it sticks for the page.
   (The drawer inside is position:fixed; sticky doesn't trap fixed descendants.) */
pvil-header {
  position: sticky;
  top: 0;
  z-index: 60;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--bar-h);
  padding: 0 var(--pad-x);
  background: var(--dark);
  border-bottom: 1px solid var(--dark-line);
}

.site-header.light {
  background: var(--bg);
  border-bottom-color: #e6e7e3;
}

.wordmark {
  font-family: var(--display);
  font-size: var(--mark);
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex: none;
  color: #fff;
}
.wordmark:hover { color: var(--green-pale); }
.site-header.light .wordmark { color: var(--ink); }
.site-header.light .wordmark:hover { color: var(--green); }

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  font-size: 15px;
  letter-spacing: 0.01em;
}

.main-nav a {
  color: var(--dark-text);
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--green-pale);
  border-bottom-color: var(--green-pale);
}
.main-nav a[aria-current="page"] { font-weight: 600; }

.site-header.light .main-nav a { color: var(--ink); }
.site-header.light .main-nav a:hover,
.site-header.light .main-nav a[aria-current="page"] {
  color: var(--green);
  border-bottom-color: var(--green);
}

.header-actions { display: flex; align-items: center; gap: var(--util-gap); }

.tickets-button {
  display: inline-flex;
  align-items: center;
  gap: var(--tickets-gap);
  padding: var(--tickets-pad);
  min-height: 44px;
  background: var(--green-bright);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  flex: none;
}
.tickets-button:hover { background: var(--green-pale); color: var(--ink); }
.site-header.light .tickets-button { background: var(--green); color: #fff; }
.site-header.light .tickets-button:hover { background: var(--green-dark); color: #fff; }

/* Small circled arrow used on ticket + CTA buttons */
.arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid rgba(22, 24, 26, 0.6);
  font-size: 9px;
  line-height: 1;
}
.site-header.light .arrow { border-color: rgba(255, 255, 255, 0.85); }
@media (max-width: 639px) { .tickets-button .arrow { display: none; } }

.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #3a3e40;
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.menu-button span { display: block; width: 18px; height: 1.5px; background: #fff; }
.site-header.light .menu-button { border-color: #d8dad6; background: var(--bg); }
.site-header.light .menu-button span { background: var(--ink); }

@media (max-width: 999px) {
  .main-nav { display: none; }
  .menu-button { display: inline-flex; }
}

/* --- Mobile drawer -------------------------------------------------------- */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(22, 24, 26, 0.55);
}
.menu-overlay[hidden] { display: none; }

.menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 84vw);
  background: var(--bg);
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.menu-panel a {
  color: var(--ink);
  font-size: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-faint);
}
.menu-panel a:last-of-type { border-bottom: none; }
.menu-panel a[aria-current="page"] { color: var(--green); font-weight: 600; }

.menu-close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 12px;
}

.menu-footnote {
  margin-top: auto;
  padding-top: 24px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-weight: 600;
}

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

/* The hero is an image panel whose bottom edge is cut on a diagonal, with a
   red band running underneath along the same angle. */

.hero {
  position: relative;
  height: calc(var(--hero-img-h) + var(--band));
  background: var(--bg);

  /* The stripe is inset from the left, and its diagonal has to start exactly
     where the photo's cut edge crosses that inset. Those two numbers are one
     number: --stripe-drop is always 1 minus --stripe-left. Change one, change
     both, or the stripe stops meeting the photo. */
  --stripe-left: 15%;
  --stripe-drop: 0.85;
}

.hero.medium {
  --hero-img-h: 500px;
  --stripe-left: 12%;
  --stripe-drop: 0.88;
}
.hero.short { --hero-img-h: 430px; }
@media (max-width: 999px) {
  .hero.medium { --hero-img-h: 450px; }
  .hero.short  { --hero-img-h: 380px; }
}
@media (max-width: 639px) {
  .hero.medium { --hero-img-h: 385px; }
  .hero.short  { --hero-img-h: 320px; }
}

.hero-stripe {
  position: absolute;
  left: var(--stripe-left);
  right: 0;
  top: 0;
  height: 100%;
  background: var(--red);
  /* Runs parallel to the image's cut edge, offset down by --band. */
  clip-path: polygon(
    0 calc(var(--hero-img-h) - var(--drop) * var(--stripe-drop)),
    100% var(--hero-img-h),
    100% calc(var(--hero-img-h) + var(--band)),
    0 calc(var(--hero-img-h) - var(--drop) * var(--stripe-drop) + var(--band))
  );
}

.hero-image {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--hero-img-h);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% var(--hero-img-h), 0 calc(var(--hero-img-h) - var(--drop)));
}

.hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
}

/* Left-to-right darkening so the headline stays legible over any photo. */
.hero-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 22, 24, 0.55) 0%, rgba(20, 22, 24, 0.22) 55%, rgba(20, 22, 24, 0.05) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Angled scrim along the bottom, echoing the cut. */
.hero-image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 340px;
  background: rgba(24, 26, 28, 0.40);
  clip-path: polygon(0 26%, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 1;
}
.hero.medium .hero-image::after,
.hero.short .hero-image::after {
  height: 300px;
  background: rgba(24, 26, 28, 0.43);
  clip-path: polygon(0 29%, 100% 0, 100% 100%, 0 100%);
}

.hero-caption {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: calc(var(--drop) * 0.75 + 62px);
  max-width: 620px;
  z-index: 2;
  pointer-events: none;
}
.hero-caption a { pointer-events: auto; }

.hero-caption h1 {
  font-size: var(--h1);
  line-height: 1.16;
  color: #fff;
  margin: 0 0 14px 0;
  text-wrap: pretty;
}
.hero-caption h2 {
  font-size: var(--h2);
  line-height: 1.3;
  color: #fff;
  margin: 0;
}
.hero-caption p {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
}

/* --- Angled divider between sections -------------------------------------- */

.angled-divider {
  position: relative;
  height: calc(26px + var(--drop) + var(--band));
  background: var(--bg-warm-2);
}
.angled-divider::before,
.angled-divider::after { content: ""; position: absolute; inset: 0; }
.angled-divider::before {
  background: var(--bg);
  clip-path: polygon(0 0, 100% 0, 100% calc(26px + var(--drop)), 0 26px);
}
.angled-divider::after {
  background: var(--green-bright);
  clip-path: polygon(
    0 26px,
    100% calc(26px + var(--drop)),
    100% calc(26px + var(--drop) + var(--band)),
    0 calc(26px + var(--band))
  );
}
/* Variant that lands on the plain white background instead of warm grey. */
.angled-divider.on-white { background: var(--bg); }

/* --- Sections & type ------------------------------------------------------ */

.section { padding: 72px var(--pad-x) 88px; background: var(--bg); }
.section.shaded   { background: var(--bg-warm); }
.section.shaded-deep { background: var(--bg-warm-2); }
.section.tight-top  { padding-top: 30px; }
.section.no-top  { padding-top: 0; }

.container { max-width: var(--measure); margin: 0 auto; }
/* Flush to the page gutter, so it lines up with the wordmark and hero caption
   instead of floating centred. */
.container.flush { max-width: var(--measure); margin: 0; }
.container.narrow { max-width: 820px; margin: 0; }

/* Small caps label above a heading. `.on-dark` is the version set over a photo. */
.kicker {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  margin: 0 0 26px 0;
}

/* Smaller, quieter variant used above a section heading. */
.section-heading .kicker,
.centered .kicker,
.featured-label .kicker,
.contact-details .kicker,
.ring-facts .kicker,
.at-a-glance .kicker {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.kicker.on-dark {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 16px;
}

/* --- Section typography ---------------------------------------------------
   Headings and copy are styled by element, so the markup stays plain. Add a
   class only where one block needs to differ from its neighbours. */

:where(.section) h2 {
  font-size: var(--h2);
  line-height: 1.34;
  margin: 0 0 34px 0;
  max-width: 620px;
  text-wrap: pretty;
}
:where(.section) h3 {
  font-size: 28px;
  line-height: 1.3;
  margin: 0 0 26px 0;
  text-wrap: pretty;
}
:where(.section) p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink-body);
  max-width: 700px;
  margin: 0 0 24px 0;
  text-wrap: pretty;
}
:where(.section) p:last-child { margin-bottom: 0; }
:where(.section) p a { color: var(--green); text-decoration: underline; }

/* Opening paragraph, a step up in size from body copy. */
.lede { font-size: 19px; line-height: 1.75; color: var(--ink); }

.rule { height: 1px; background: #c6c8c3; margin: 0 auto 60px; }

.centered { text-align: center; }
.centered .kicker { margin-bottom: 16px; }
.centered h2 { max-width: none; }

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

.button {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding: 18px 26px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
  background: var(--green);
  color: #fff;
}
.button:hover { background: var(--green-dark); color: #fff; }
.button .arrow { border-color: rgba(255, 255, 255, 0.85); width: 18px; height: 18px; }

.button.outline {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  padding: 18px 30px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
  white-space: nowrap;
}
.button.outline:hover { border-color: var(--green); color: var(--green); }

.button-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* --- Callout block -------------------------------------------------------- */

.callout {
  border: 1px solid var(--line);
  padding: 52px 54px;
}
@media (max-width: 999px) { .callout { padding: 44px 36px; } }
@media (max-width: 639px) { .callout { padding: 34px 26px; } }

.accent-bar {
  border-left: 4px solid var(--green-bright);
  padding-left: 34px;
}

/* --- Two-column story grid ------------------------------------------------ */

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 60px;
  align-items: center;
}
.two-column.top { align-items: start; gap: 40px 60px; }
@media (max-width: 819px) { .two-column { grid-template-columns: minmax(0, 1fr); } }

.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: var(--ink);
  margin-bottom: 16px;
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.caption {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}
.caption strong { font-weight: 600; color: var(--ink); }

.event-detail { display: flex; flex-direction: column; gap: 8px; }
.event-date { font-family: var(--display); font-size: 26px; margin: 0; }
.event-detail p { font-size: 17px; line-height: 1.6; color: var(--ink-body); margin: 0; }
.event-detail p + p { margin-top: 6px; }

/* --- Inductee / category lists -------------------------------------------- */

.inductee-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px 44px;
}
@media (max-width: 879px) { .inductee-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .inductee-columns { grid-template-columns: minmax(0, 1fr); gap: 44px 0; } }

/* Masonry-ish variant for the Hall of Honor, where category sizes vary wildly */
.inductee-lists { columns: 3; column-gap: 44px; }
@media (max-width: 879px) { .inductee-lists { columns: 2; } }
@media (max-width: 559px) { .inductee-lists { columns: 1; column-gap: 0; } }
.inductee-lists .inductee-category { break-inside: avoid; margin: 0 0 36px 0; }

.inductee-category { border-left: 3px solid var(--green-bright); padding-left: 18px; }
.inductee-category h3 { font-size: 23px; line-height: normal; margin: 0 0 20px 0; }

.inductee-category ul,
.name-list,
.all-time-team {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-size: 16px;
  color: var(--ink-soft);
}
.name-list.indented { padding-left: 21px; }
.inductee-category li { text-wrap: pretty; }

.name { color: var(--ink); }
a.name { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
a.name:hover { color: var(--green); text-decoration-color: var(--green); }
.detail { color: var(--ink-muted); }

.hovernote { color: var(--ink-muted); cursor: help; }

.footnote { font-size: 14px; color: var(--ink-muted); margin: 40px 0 0 0; }

/* --- Year switcher -------------------------------------------------------- */

.class-years {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
}

.class-year {
  font-family: inherit;
  cursor: pointer;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
}
.class-year:hover { color: var(--green); }
.class-year[aria-selected="true"] {
  font-weight: 700;
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
/* Years with no roster yet — still clickable, the panel explains the gap. */
.class-year.empty { color: var(--ink-faint); }
.empty[aria-selected="true"] { color: #fff; }

.missing-class {
  border: 1px solid var(--line);
  padding: 48px 40px;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.missing-class h3 { font-size: 24px; margin: 0 0 14px 0; }
.missing-class p { font-size: 16px; line-height: 1.75; color: var(--ink-soft); margin: 0; }
.missing-class a { color: var(--green); text-decoration: underline; }

/* --- Section tabs (History hub) ------------------------------------------- */

.section-tabs {
  /* Sticks directly beneath the site header so the current section stays
     visible while reading a long panel. */
  position: sticky;
  top: var(--bar-h);
  z-index: 50;
  background: var(--bg);
  /* Balanced around the labels: 24 above, 16 from .section-tab below. */
  padding: 24px var(--pad-x) 0;
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
}
@media (max-width: 639px) { .section-tabs { padding-top: 16px; } }
.section-tabs-inner { display: flex; gap: 34px; min-width: max-content; }

.section-tab {
  display: inline-block;
  padding: 0 0 16px 0;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.section-tab:hover { color: var(--ink); }
.section-tab[aria-selected="true"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--green);
}

.tab-panel[hidden] { display: none; }

/* Sections stacked inside one History tab read as a single article, not as
   separate page bands, so they sit tighter than the site's base rhythm. */
.tab-panel > .section { padding-top: 48px; padding-bottom: 56px; }
.tab-panel > .section:first-child { padding-top: 40px; }

/* --- Figures -------------------------------------------------------------- */

.figure { margin: 0; }
.figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
.figure-frame { overflow: hidden; background: var(--bg-warm-2); }
.figure figcaption {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin-top: 10px;
}
.figure.portrait .figure-frame { height: 300px; }
.figure.wide .figure-frame { height: 420px; }
@media (max-width: 639px) {
  .wide .figure-frame { height: 260px; }
  .portrait .figure-frame { height: 240px; }
}

/* The director portraits are tall studio photographs — around 3:4 — and a
   fixed 300px height made their frames wider than they are tall. `cover` then
   filled the width and took the overflow off both ends, which on a
   head-and-shoulders portrait means cropping through the forehead. Give these
   frames the photographs' own shape instead, and bias the little crop that
   remains towards the bottom so it never reaches a face. */
.portrait-row .figure.portrait .figure-frame { height: auto; aspect-ratio: 3 / 4; }
.portrait-row .figure.portrait img { object-position: 50% 20%; }

/* A small archival scan shown at close to its own size. The Patterson photo is
   a 243x169 halftone and the only copy that survives; stretched to a column
   width it was enlarged two and a half times and then cropped through the top
   of his head. Matching the frame to the source's proportions crops nothing,
   and the width cap keeps the grain from being magnified any further than it
   has to be. */
.figure.snapshot .figure-frame { width: min(100%, 360px); aspect-ratio: 243 / 169; }

.portrait-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.district-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 879px) {
  .portrait-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .district-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .portrait-row, .district-grid { grid-template-columns: minmax(0, 1fr); }
  /* One per row on a phone — without a cap a 3:4 frame runs the full column
     width and the portrait ends up taller than the screen. */
  .portrait-row .figure.portrait { max-width: 320px; margin-left: auto; margin-right: auto; }
}

/* --- Milestones ----------------------------------------------------------- */

.milestone {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 4px 34px;
  padding: 22px 0;
  border-top: 1px solid var(--line-soft);
}
.milestone:first-child { border-top: 2px solid var(--ink); }
.milestone-date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--green);
  padding-top: 4px;
}
.milestone p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--ink-body); text-wrap: pretty; }
@media (max-width: 639px) { .milestone { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* --- Profiles (schools, coaches) ------------------------------------------ */

.profile { padding: 34px 0; border-top: 1px solid var(--line-soft); }
.profile:first-of-type { border-top: none; }
.profile-location {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin: -14px 0 20px 0;
}
.profile h3 { margin-bottom: 8px; }

.profile.with-photo {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
/* Specificity has to match .profile.with-photo above, or the stack never wins. */
@media (max-width: 639px) { .profile.with-photo { grid-template-columns: minmax(0, 1fr); } }

/* --- Records tables ------------------------------------------------------- */

.sport-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.sport-tab {
  font-family: inherit;
  cursor: pointer;
  padding: 13px 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
}
.sport-tab:hover { border-color: var(--green); color: var(--green); }
.sport-tab[aria-selected="true"] {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.championship-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 34px; }
@media (max-width: 999px) { .championship-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .championship-list { grid-template-columns: minmax(0, 1fr); } }

.championship-year > h3 {
  font-family: var(--display);
  font-size: 26px;
  margin: 0 0 14px 0;
}
.score-table { margin-bottom: 18px; border: 1px solid var(--line-soft); }
.division {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  padding: 8px 12px;
  background: var(--bg-warm-2);
}
.score-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-top: 1px solid var(--line-faint);
  background: var(--bg);
  box-shadow: inset 3px 0 0 transparent;
}
.score-row.winner { background: #f1f7ef; box-shadow: inset 3px 0 0 var(--green-bright); }
.score-row.no-place { grid-template-columns: 0 minmax(0, 1fr) auto; }
.score-table .place { font-size: 12px; font-weight: 700; color: var(--ink-faint); }
.score-table .score-row.winner .place { color: var(--green); }
.score-table .team { font-size: 14px; line-height: 1.3; color: var(--ink); }
.score-table .score-row.winner .team { font-weight: 700; }
.score-table .coach { display: block; font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
.score-table .score {
  font-family: var(--display);
  font-size: 19px;
  line-height: 1;
  color: var(--ink-faint);
}
.score-table .score-row.winner .score { color: var(--ink); font-weight: 700; }

.notes { list-style: none; margin: 0 0 44px 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.notes li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-body);
  border-left: 3px solid var(--green-bright);
  padding-left: 18px;
  text-wrap: pretty;
}

/* Position/roster lists with a leading abbreviation (all-time team) */
.all-time-team li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.all-time-team li > span:first-child {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

.hall-of-famers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 879px) { .hall-of-famers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .hall-of-famers { grid-template-columns: minmax(0, 1fr); } }
.famer-name { font-family: var(--display); font-size: 21px; margin-bottom: 6px; }
.famer-detail { font-size: 14px; color: var(--ink-muted); line-height: 1.5; }

/* --- Carousel ------------------------------------------------------------- */

pvil-carousel { display: block; }

.carousel-viewport { overflow: hidden; background: var(--bg-warm); }
.carousel-track { display: flex; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); }

.slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  height: 440px;
  margin: 0;
  overflow: hidden;
  background: var(--dark);
}
/* `contain`, not `cover`: the banquet sets are largely portrait photographs
   (31 of the 44 from 2026), and filling a landscape slide with one crops away
   two thirds of it — faces included. Letterboxing on a dark ground shows the
   whole frame. */
.slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 999px) { .slide { height: 330px; } }
@media (max-width: 639px) { .slide { height: 240px; } }

.carousel-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin-top: 16px;
}
.slide-caption { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.carousel-controls { display: flex; align-items: center; gap: 14px; }
/* Position readout and scrub bar. Both are fixed width whatever the set size,
   which one-dot-per-photo was not. */
.carousel-count {
  font-size: 13px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.carousel-index { color: var(--ink); font-weight: 600; }

.carousel-scrub {
  -webkit-appearance: none;
  appearance: none;
  width: 200px;
  max-width: 42vw;
  height: 16px;            /* a comfortable hit area around a 4px track */
  background: none;
  cursor: pointer;
}
.carousel-scrub::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(to right,
    var(--green) 0 var(--pct, 0%), #dcded9 var(--pct, 0%) 100%);
}
.carousel-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 12px;
  margin-top: -4px;
  background: var(--green);
  border: none;
}
.carousel-scrub::-moz-range-track { height: 4px; background: #dcded9; }
.carousel-scrub::-moz-range-progress { height: 4px; background: var(--green); }
.carousel-scrub::-moz-range-thumb {
  width: 26px;
  height: 12px;
  border: none;
  border-radius: 0;
  background: var(--green);
}
.carousel-scrub:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

.carousel-button {
  font-family: inherit;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
}
.carousel-button:hover { border-color: var(--green); color: var(--green); }

/* Play / pause. One control rather than a prev/next pair: the scrub bar
   already covers stepping and jumping, so this only has to answer "is it
   running?". The icon is drawn in CSS so there is no asset to keep in sync. */
.carousel-play { display: flex; align-items: center; justify-content: center; }

.carousel-play-icon {
  display: block;
  width: 0;
  height: 0;
  margin-left: 3px;                       /* optical centring of the triangle */
  border-left: 13px solid currentColor;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.carousel-play.is-playing .carousel-play-icon {
  box-sizing: border-box;
  width: 13px;
  height: 15px;
  margin-left: 0;
  border: none;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}

/* --- Card grid (deadlines, ad pricing) ------------------------------------ */

/* Hairline separators come from the grid gap showing the background through. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  background: #dcded9;
}
@media (max-width: 879px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .card-grid { grid-template-columns: minmax(0, 1fr); } }

.card { background: var(--bg); padding: 28px 24px; }
.card.dark { background: var(--ink); }
.card-title { font-family: var(--display); font-size: 26px; margin-bottom: 8px; }
.card-price { font-family: var(--display); font-size: 34px; margin-bottom: 14px; }
.card.dark .card-title,
.card.dark .card-price { color: #fff; }
.card-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--green);
  margin-bottom: 14px;
}
.card-label.red { color: var(--red); }
.card-label.muted { color: var(--ink-muted); }
.card.dark .card-label { color: var(--dark-muted); }
.card p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.card p a { color: var(--green); text-decoration: underline; }
.card.dark p { color: var(--dark-link); }

/* --- Thumbnail strip ------------------------------------------------------ */

.thumbnail-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 559px) { .thumbnail-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.thumbnail-row a, .thumbnail-row figure { margin: 0; display: block; height: 170px; overflow: hidden; background: var(--bg-warm); }
.thumbnail-row img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 639px) { .thumbnail-row a, .thumbnail-row figure { height: 120px; } }

/* --- Numbered steps ------------------------------------------------------- */

.steps {
  margin: 0 0 30px 0;
  padding: 0 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-body);
}
.steps a { color: var(--green); text-decoration: underline; }
.steps strong { font-weight: 600; }

/* --- Media grid (Gallery) ------------------------------------------------- */

.section-heading {
  border-top: 1px solid #c6c8c3;
  padding-top: 26px;
  margin-bottom: 34px;
}
.section-heading .kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.section-heading h2 { font-size: 30px; line-height: normal; margin: 0; max-width: none; }

.media-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 46px 40px;
}
@media (max-width: 400px) { .media-list { grid-template-columns: minmax(0, 1fr); } }

.media-item { display: flex; flex-direction: column; gap: 14px; }

.media-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #101214;
  overflow: hidden;
}
.media-frame iframe,
.media-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-frame.light { background: #ededea; }

/* Text-only cards for posts and podcasts with no embeddable player */
.media-quote {
  aspect-ratio: 16 / 9;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 28px;
}
.media-quote q, .quote-text {
  font-family: var(--display);
  font-size: 22px;
  color: #fff;
  line-height: 1.35;
  text-wrap: pretty;
  quotes: none;
}
.quote-source { font-size: 13px; color: var(--dark-muted); margin-top: 14px; }
.media-quote.light {
  background: var(--bg-warm);
  border: 1px solid var(--line-soft);
}
.media-quote.light .quote-text { font-size: 24px; color: var(--ink); line-height: 1.3; }
.media-quote.light .quote-source { color: var(--ink-muted); font-size: 14px; margin-top: 12px; }

.media-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--green);
}
.media-item h3 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
  text-wrap: pretty;
}
.media-item p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 0; text-wrap: pretty; }

.text-link {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
  border-bottom: 1px solid var(--green);
  padding-bottom: 4px;
}
.text-link:hover { color: var(--green); }

.jump-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.jump-links a {
  border: 1px solid var(--line);
  padding: 13px 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.jump-links a:hover { border-color: var(--green); color: var(--green); }

.feature-heading {
  border-left: 3px solid var(--green-bright);
  padding-left: 22px;
}
.feature-heading h2 {
  font-size: 30px;
  line-height: 1.25;
  margin: 0 0 8px 0;
  max-width: 780px;
  text-wrap: pretty;
}
.feature-heading .source { font-size: 13px; color: var(--ink-muted); letter-spacing: 0.04em; margin-bottom: 22px; }

/* --- Purpose pillars / goals (About) -------------------------------------- */

.purpose-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px 44px;
  border-top: 1px solid #c6c8c3;
  padding-top: 44px;
}
@media (max-width: 699px) { .purpose-list { grid-template-columns: minmax(0, 1fr); } }

.purpose { border-left: 3px solid var(--green-bright); padding-left: 20px; }
.purpose-number {
  font-family: var(--display);
  font-size: 34px;
  color: var(--green-bright);
  line-height: 1;
  margin-bottom: 16px;
}
.purpose h3 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 12px 0;
  text-wrap: pretty;
}
.purpose p { font-size: 16px; line-height: 1.75; color: var(--ink-soft); margin: 0; text-wrap: pretty; }

.goal-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 44px; }
@media (max-width: 699px) { .goal-list { grid-template-columns: minmax(0, 1fr); } }
.goal-list h3 { font-size: 26px; line-height: 1.3; margin: 0 0 14px 0; text-wrap: pretty; }
.goal-list p { font-size: 16px; line-height: 1.8; color: var(--ink-body); margin: 0; text-wrap: pretty; }

/* --- People grid (board, staff) ------------------------------------------- */

.staff-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, 148px);
  gap: 34px 26px;
  justify-content: start;
}
@media (max-width: 419px) { .staff-list { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } }

.staff-member { display: flex; flex-direction: column; gap: 10px; }
.staff-photo { width: 100%; aspect-ratio: 3 / 4; background: #ededea; overflow: hidden; }

/* A seat with no photo to show. Drawn rather than shipped as an image file so
   it stays sharp at any size and needs no artwork to maintain. */
.staff-photo.vacant {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-soft);
  background: var(--bg-warm);
}
.staff-photo.vacant::after {
  content: "Photo not available";
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-align: center;
  max-width: 9ch;
}
.staff-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.staff-name { font-size: 15px; font-weight: 600; line-height: 1.35; }
.staff-role { font-size: 13px; color: var(--ink-soft); margin-top: 5px; line-height: 1.4; }
.staff-location { font-size: 12px; color: var(--ink-muted); margin-top: 3px; letter-spacing: 0.03em; }

/* --- Contact + forms ------------------------------------------------------ */

.contact-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 44px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 44px;
}
@media (max-width: 699px) { .contact-details { grid-template-columns: minmax(0, 1fr); } }
.contact-value { font-size: 17px; line-height: 1.7; color: var(--ink); display: block; }
a.contact-value:hover { color: var(--green); }

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 46px 60px;
  align-items: start;
}
@media (max-width: 819px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } }

.contact-form { display: flex; flex-direction: column; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--ink-soft); }

.contact-form input,
.contact-form textarea {
  font-family: inherit;
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 14px 16px;
  font-size: 16px;
  color: var(--ink);
  min-height: 48px;
  transition: border-color 0.15s ease;
  width: 100%;
}
.contact-form textarea { line-height: 1.6; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--green); }

.contact-form button { font-family: inherit; cursor: pointer; }
.contact-form button.button { border: none; }
.contact-form button.button.outline { background: var(--bg); }

.form-error { font-size: 14px; color: #b4342c; margin: 0; }
.form-success { font-size: 14px; color: var(--green); margin: 0; }
.form-error[hidden], .form-success[hidden] { display: none; }

/* --- Support: sponsors, rings, members ------------------------------------ */

.sponsor-levels { columns: 2; column-gap: 54px; }
@media (max-width: 619px) { .sponsor-levels { columns: 1; } }
.sponsor-levels .inductee-category { break-inside: avoid; margin: 0 0 44px 0; }

.sponsor-link { color: var(--ink); border-bottom: 1px solid #cfe0c8; }
.sponsor-link:hover { color: var(--green); border-bottom-color: var(--green); }

.ring-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  margin: 30px 0 34px 0;
}

.ring-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; }
.ring { display: flex; flex-direction: column; gap: 14px; }
.ring-photo {
  width: 100%;
  aspect-ratio: 350 / 200;
  background: var(--bg);
  padding: 10px;
}
.ring-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ring-name { font-size: 17px; font-weight: 600; }

/* Recipient roll — many short names, so flow them into narrow columns. */
.recipient-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 4;
  column-gap: 40px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.recipient-list li { break-inside: avoid; margin-bottom: 11px; }
@media (max-width: 879px) { .recipient-list { columns: 3; } }
@media (max-width: 559px) { .recipient-list { columns: 2; } }

/* Lifetime members are grouped by year; JS balances the year blocks across
   real grid columns so a single year is never split by a column break. */
.lifetime-members { display: grid; gap: 0 44px; align-items: start; }
.lifetime-column { display: flex; flex-direction: column; gap: 34px; min-width: 0; }
.lifetime-column ul { gap: 11px; font-size: 15px; line-height: 1.45; }

/* --- Colour CTA tiles ----------------------------------------------------- */

/* auto-fit, not a fixed 2-up: when a ticket tile is hidden the survivor
   spans the full width instead of leaving a gap. */
.promo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width: 639px) { .promo-row { grid-template-columns: minmax(0, 1fr); } }

.promo {
  position: relative;
  overflow: hidden;
  padding: 62px 54px;
  min-height: 230px;
  display: block;
  background: var(--green-bright);
  color: #fff;
}
.promo:hover { background: #43912f; color: #fff; }
.promo.red { background: var(--red); }
.promo.red:hover { background: var(--red-dark); }

/* Faint vertical pinstripes */
.promo::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 26px);
}
.promo > * { position: relative; }
.promo .kicker {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 14px;
}
.promo h3 { font-size: 30px; margin: 0 0 34px 0; color: #fff; }
.promo-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #fff;
}
.promo-action .arrow {
  width: 16px;
  height: 16px;
  border: none;
  background: #fff;
  color: var(--green-bright);
  font-size: 12px;
}
.promo.red .promo-action .arrow { color: var(--red); }
@media (max-width: 639px) { .promo { padding: 44px 30px; } }

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

.site-footer { background: var(--dark); padding: 60px var(--pad-x) 32px; }

.footer-columns {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 34px 60px;
  align-items: flex-start;
  justify-content: space-between;
}

.footer-brand { display: flex; flex-direction: column; gap: 12px; max-width: 320px; }
.footer-wordmark { font-family: var(--display); font-size: 26px; letter-spacing: 0.06em; color: #fff; }
.footer-brand p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--dark-muted); }

.footer-column { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.footer-column a { color: var(--dark-link); }
.footer-column a:hover { color: var(--green-pale); }

.footer-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--dark-label);
}

.footer-legal {
  max-width: var(--measure);
  margin: 46px auto 0;
  border-top: 1px solid var(--dark-line);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--dark-muted);
  letter-spacing: 0.03em;
}

/* --- Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Page sections
   Each <section> is named for what it holds; its vertical rhythm lives here
   rather than in a style attribute, so the markup stays readable.
   ========================================================================== */

/* --- Home ----------------------------------------------------------------- */

.banquet-preview { padding-top: 22px; }
.collecting      { padding-bottom: 80px; }
.support-promos  { padding-bottom: 76px; }
.latest-class .rule { max-width: var(--measure); }
.latest-class .centered { margin-bottom: 40px; }
.latest-class h2 { font-size: 32px; }
/* Named for the home page, not for `.story` — that belongs to the news
   archive's article block further down this file, and sharing the name meant
   its 780px measure was capping this full-width section. */
.story-preview p { margin-bottom: 40px; }

/* --- Hall of Honor -------------------------------------------------------- */

.honor-roll    { padding: 60px var(--pad-x) 32px; }
.class-picker  { padding: 16px var(--pad-x) 32px; }
.class-listing { padding: 24px var(--pad-x) 32px; }
.class-listing .centered { margin-bottom: 34px; }
.class-listing h2 { font-size: 32px; }

/* Heading that sits above the year buttons — sans, not the display face. */
.class-picker h2 {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  margin-bottom: 18px;
}

/* --- Honor Banquet -------------------------------------------------------- */

.banquet-intro  { padding: 60px var(--pad-x) 24px; }
.schedule       { padding: 40px var(--pad-x) 64px; }
.deadlines      { padding: 60px var(--pad-x) 68px; }
.banquet-photos { padding: 64px var(--pad-x) 32px; }
.program-book   { padding: 64px var(--pad-x) 70px; }
.ticket-promos  { padding: 64px var(--pad-x) 76px; }

.banquet-intro h2,
.deadlines h2,
.program-book h2 { line-height: 1.3; }
.deadlines h2 { margin-bottom: 40px; }
.program-book h2 { max-width: 660px; }
.program-book .card-grid { margin-bottom: 40px; }
.banquet-photos .section-heading { margin-bottom: 28px; }

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

.gallery-intro { padding: 60px var(--pad-x) 36px; }
.featured      { padding: 0 var(--pad-x) 16px; }
.media-section { padding: 52px var(--pad-x) 16px; }
.photo-archive { padding: 52px var(--pad-x) 24px; }

.featured .media-frame { max-width: 900px; margin-top: 4px; }
.photo-set { margin-bottom: 44px; }
.photo-set:last-child { margin-bottom: 0; }
.photo-set h3 { font-size: 23px; margin-bottom: 18px; }

/* --- About ---------------------------------------------------------------- */

.purpose-intro   { padding: 60px var(--pad-x) 36px; }
.purpose-pillars { padding: 8px var(--pad-x) 24px; }
.goals           { padding: 52px var(--pad-x) 58px; margin-top: 44px; }
.leadership      { padding: 58px var(--pad-x) 16px; }
#staff.leadership { padding: 50px var(--pad-x) 24px; }
.get-in-touch    { padding: 60px var(--pad-x) 68px; }
.goals .kicker   { margin-bottom: 30px; }
.get-in-touch h3 { max-width: 620px; }

/* --- Contact -------------------------------------------------------------- */

.contact-intro { padding: 60px var(--pad-x) 24px; }
.contact-main  { padding: 32px var(--pad-x) 32px; }
.contact-main h2 {
  font-size: 30px;
  line-height: 1.25;
  margin: 12px 0 18px 0;
  max-width: none;
}

/* --- Support -------------------------------------------------------------- */

.ways-to-give   { padding: 60px var(--pad-x) 32px; }
.sponsors       { padding: 32px var(--pad-x) 16px; }
.ring-section   { padding: 52px var(--pad-x) 58px; margin-top: 36px; }
.recipients     { padding: 52px var(--pad-x) 16px; }
.lifetime       { padding: 56px var(--pad-x) 24px; }

.ring-section h2 { font-size: 32px; margin: 0 0 24px 0; max-width: none; }
.ring-section p  { max-width: 760px; }
.lifetime p      { max-width: 760px; }
.lifetime .button { margin-bottom: 50px; }
.recipients .section-heading {
  margin-bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: baseline;
  justify-content: space-between;
}
.recipient-count { font-size: 13px; color: var(--ink-muted); letter-spacing: 0.04em; }

/* --- Closing call-to-action ----------------------------------------------
   Same shape on four pages: shaded band, heading, paragraph, buttons. */

.nominate,
.submit-media,
.join,
.become-sponsor { padding: 56px var(--pad-x) 64px; margin-top: 40px; }
.become-sponsor { margin-top: 40px; }

/* --- Shared refinements --------------------------------------------------- */

/* Wider measures used by the media and leadership grids. */
.container.wide { max-width: 1080px; }
.container.text { max-width: 900px; }

/* Hero captions on the shorter interior heroes get a little more room. */
.hero.short .hero-caption { max-width: 640px; }

.section-heading { margin-bottom: 34px; }

/* Where a section's container is already narrow, copy fills it. */
.honor-roll p,
.gallery-intro p,
.purpose-intro p,
.ways-to-give p,
.banquet-intro p,
.contact-main p { max-width: none; }

/* Closing call-to-action bands share their inner rhythm too. */
.nominate p,
.submit-media p,
.join p,
.become-sponsor p { margin-bottom: 32px; }

.caption a { color: var(--green); text-decoration: underline; }
.contact-value { word-break: break-word; }

/* --- Honor Banquet detail ------------------------------------------------- */

.at-a-glance { display: flex; flex-direction: column; gap: 20px; }
.at-a-glance .kicker { margin-bottom: 20px; }
.ring-facts .kicker { margin-bottom: 8px; }
.at-a-glance .card-title { font-size: 22px; margin-bottom: 4px; }
.glance-row {
  border-top: 1px solid var(--line-soft);
  padding-top: 20px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-body);
}
.glance-time { font-size: 16px; color: var(--ink-soft); }

.banquet-intro .two-column { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.banquet-intro h2 { max-width: none; }
.banquet-intro .callout { padding: 38px 34px; }

.schedule .kicker { margin-bottom: 32px; }
.schedule .card-title { font-size: 22px; margin-bottom: 6px; }
.schedule .milestone p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--ink-body); max-width: none; }
.schedule .milestone:last-child { border-bottom: 1px solid var(--line-soft); }

.deadlines .kicker,
.program-book .kicker,
.banquet-photos .kicker { margin-bottom: 14px; }

.program-book p { max-width: 720px; }
.program-book .lede { margin-bottom: 46px; }
.program-book .card { padding: 30px 26px; }
.program-book .callout { background: var(--bg); padding: 38px 34px; }
.program-book .callout h3 { font-size: 24px; margin: 0 0 22px 0; }

.banquet-photos h2 { margin: 0; }
.banquet-photos .caption { margin-top: 20px; }

.ticket-promos .promo { padding: 56px 48px; min-height: 220px; }
.ticket-promos .promo h3 { margin-bottom: 30px; }
.ticket-promos .caption { margin-top: 24px; max-width: 700px; }

/* --- Support detail ------------------------------------------------------- */


.ring-facts .card-price { margin-bottom: 0; }
.fact-value { font-size: 16px; line-height: 1.65; color: var(--ink-body); }
.fact-value.narrow { max-width: 240px; }

/* --- Home detail ---------------------------------------------------------- */

.welcome .button { margin-top: 22px; }
.banquet-preview h2 { line-height: 1.25; max-width: 700px; }
.banquet-preview .two-column { margin-bottom: 40px; }
.story-hero { background: var(--bg-warm); }
.story-hero .hero-caption { max-width: 560px; }
.collecting p { max-width: 720px; }
.collecting p:last-of-type { margin-bottom: 38px; }
.latest-class .all-classes { margin-top: 44px; }

/* --- About detail --------------------------------------------------------- */

.get-in-touch .kicker { margin-bottom: 22px; }
.get-in-touch .accent-bar { border-left-width: 3px; padding-left: 26px; }
.get-in-touch .button { gap: 26px; }
.get-in-touch .button .arrow { border-color: currentColor; }

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

.featured-label {
  border-top: 1px solid #c6c8c3;
  padding-top: 26px;
  margin-bottom: 28px;
}


/* The Facebook embed is a fixed-width portrait player; centre it in the frame. */
.media-frame iframe.portrait-embed {
  width: 267px;
  left: 50%;
  transform: translateX(-50%);
}

/* --- Fidelity restorations after the naming pass -------------------------- */

.leadership .section-heading,
.sponsors .section-heading { margin-bottom: 38px; }

/* The History hero headline is long; keep its original measure. */
.history-hero .hero-caption { max-width: 620px; }

.banquet-intro .two-column { max-width: 900px; }
.at-a-glance > .glance-row:first-child { border-top: none; padding-top: 0; }

/* Closing-CTA headings hold a measure; other h3s size to their container. */
.nominate h3,
.submit-media h3,
.join h3,
.collecting h3,
.become-sponsor h3 { max-width: 640px; }

/* District columns and the notes list sit tighter than inductee rosters. */
.district-grid .name-list { gap: 11px; }
.milestone .name-list { gap: 10px; margin-top: 10px; font-size: 16px; }

/* --- Measure exemptions ---------------------------------------------------
   The prose measure on :where(.section) p suits running copy. Text inside a
   component already has a box to fill, so it opts out. */

.card p,
.media-item p,
.purpose p,
.goal-list p,
.event-detail p,
.staff-member p,
.missing-class p,
.promo p,
.figure p,
.caption,
.form-error,
.form-success { max-width: none; }

/* Small UI text keeps natural leading rather than the prose 1.8. */
.form-error,
.form-success { line-height: normal; }
.class-picker h2 { line-height: normal; }

/* The welcome copy runs slightly wider than other intros. */
.welcome .container { max-width: 900px; }
.get-in-touch p { margin-bottom: 32px; }

/* --- Ticket controls ------------------------------------------------------
   Hidden until TICKETS_ON_SALE flips in assets/js/site.js, which adds
   .tickets-on-sale to <html>. Hidden by default on purpose: revealing is
   safe, whereas hiding after paint would flash a live button. */

.tickets-cta { display: none; }
.tickets-on-sale .tickets-cta { display: inline-flex; }
.tickets-on-sale a.promo.tickets-cta { display: block; }

/* ==========================================================================
   Honoree biography
   A compact article, not the angled hero: the portraits are scanned programme
   photos (~180×280) and go soft at full bleed.
   ========================================================================== */

/* Green rather than the near-black used elsewhere: a bio page has no hero, so
   this band sits directly under the site header and two dark bars read as one
   heavy block. --green-dark is the one green that clears 4.5:1 against white,
   which the 12px kicker above the name needs. */
.bio-header {
  background: var(--green-dark);
  padding: 44px var(--pad-x) 40px;
}
.bio-header .kicker.on-dark { color: #fff; }
.bio-header h1 {
  font-size: var(--h2);
  line-height: 1.2;
  color: #fff;
  margin: 0;
  max-width: 20ch;
  text-wrap: pretty;
}
.bio-header .kicker { margin-bottom: 12px; }

.bio-body { padding-top: 56px; }

.bio-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
@media (max-width: 719px) {
  .bio-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .bio-aside { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: start; }
}
@media (max-width: 439px) {
  .bio-aside { grid-template-columns: minmax(0, 1fr); }
}

.bio-photo { background: var(--bg-warm-2); overflow: hidden; margin-bottom: 22px; }
.bio-photo img { display: block; width: 100%; height: auto; }

/* Definition list rather than a bulleted list: these really are label/value. */
.bio-stats { margin: 0; padding: 0; font-size: 14px; line-height: 1.5; }
.bio-stats dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 14px;
}
.bio-stats dt:first-child { margin-top: 0; }
.bio-stats dd { margin: 3px 0 0 0; color: var(--ink); text-wrap: pretty; }

.bio-prose p { font-size: 17px; line-height: 1.8; color: var(--ink-body); margin: 0 0 22px 0; text-wrap: pretty; }
.bio-prose h5 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 32px 0 12px 0;
}
.bio-prose ul { margin: 0 0 22px 20px; padding: 0; font-size: 16px; line-height: 1.7; color: var(--ink-body); }
.bio-prose li { margin-bottom: 6px; }

/* A handful of bios carry coaching-record tables; keep them scrollable so a
   wide one cannot push the page sideways on a phone. */
.bio-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 0 0 22px 0;
  display: block;
  overflow-x: auto;
}
.bio-prose th,
.bio-prose td {
  text-align: left;
  padding: 7px 12px 7px 0;
  border-bottom: 1px solid var(--line-faint);
  white-space: nowrap;
}
.bio-prose th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.bio-back { margin-top: 34px; }

/* --- Newsletters ----------------------------------------------------------
   A grid of PDF covers. The scans are small and their proportions vary issue
   to issue, so the tile holds a fixed shape and the cover sits inside it
   whole — cropping to fill would cut the masthead off. */

.newsletter-intro { padding: 60px var(--pad-x) 30px; }
.newsletter-archive { padding: 40px var(--pad-x) 72px; }

.newsletter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 36px 26px;
}
@media (max-width: 559px) { .newsletter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.newsletter { display: block; color: var(--ink); }
.newsletter-cover {
  aspect-ratio: 3 / 4;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  margin-bottom: 12px;
  transition: border-color 0.2s;
}
.newsletter-cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.newsletter:hover .newsletter-cover { border-color: var(--green); }

.newsletter-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 3px;
}
.newsletter-date { font-size: 15px; line-height: 1.4; }
.newsletter:hover .newsletter-date { color: var(--green); }

/* --- News archive ---------------------------------------------------------
   Stories run one after another down a single column, the way they did on the
   legacy page. They are a closed archive, so this is built to read well rather
   than to be added to. */

.news-intro   { padding: 60px var(--pad-x) 36px; }
.news-archive { padding: 52px var(--pad-x) 64px; }
.news-intro p { max-width: none; }

.story-list { display: flex; flex-direction: column; gap: 52px; }

.story { max-width: 780px; }
.story + .story { border-top: 1px solid var(--line-soft); padding-top: 52px; }
.section.shaded .story + .story { border-top-color: var(--line); }

.story h3 { font-size: 27px; line-height: 1.3; margin: 0 0 10px 0; text-wrap: pretty; }
.story-standfirst {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0 0 22px 0;
}
.story-standfirst + .story-body { margin-top: 0; }

:where(.story-body) p { font-size: 16px; line-height: 1.8; color: var(--ink-body); margin: 0 0 20px 0; }
:where(.story-body) p:last-child { margin-bottom: 0; }
:where(.story-body) a { color: var(--green); text-decoration: underline; }

:where(.story-body) ul { margin: 0 0 22px 20px; padding: 0; list-style: disc; }
:where(.story-body) li { font-size: 16px; line-height: 1.7; color: var(--ink-body); margin-bottom: 9px; }

.story-byline {
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  border-top: 1px solid var(--line-faint);
  padding-top: 16px;
  margin-top: 28px;
}

/* Photo strips. The archive images are scans at their original small sizes, so
   they are shown at up to their intrinsic width rather than stretched. */
.story-media {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 22px;
  margin: 0 0 24px 0;
}
.story-media figure { margin: 0; max-width: 240px; }
.story-media img { max-width: 100%; height: auto; display: block; background: var(--bg-warm); }
.story-media figcaption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-top: 8px;
  text-wrap: pretty;
}
.story-media figcaption a { color: var(--ink-soft); }
/* A video needs more room than a scanned photo, so its figure gets its own cap
   rather than the 240px the stills share. */
.story-media figure:has(> .media-frame) { max-width: 380px; width: 100%; }
.story-media .media-frame { width: 100%; }

.media-note {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-muted);
  margin: -12px 0 24px 0;
}

/* Click-to-play stand-in ---------------------------------------------------
   Used where a provider's player starts itself on load. The embed is only
   inserted on click, so nothing plays until a visitor asks it to. */
.video-facade {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--dark);
  color: var(--dark-text);
  text-align: center;
}
.video-facade:hover { color: #fff; }

.video-facade-play {
  width: 54px;
  height: 54px;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: relative;
}
.video-facade-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-left: 15px solid currentColor;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.video-facade:hover .video-facade-play { border-color: var(--green-pale); color: var(--green-pale); }

.video-facade-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}