/* Canberra Python — site styles
   Palette is authored in OKLCH (as in the design), with sRGB hex fallbacks
   for browsers without OKLCH support. */

:root {
  --bg: #f9f7f1;
  --surface: #fdfcf9;
  --ink: #1a160b;
  --ink-soft: #231f14;
  --ink-soft-alt: #251e0e;
  --ink-hover: #3b3423;
  --muted: #443617;
  --mono-muted: #595240;
  --eyebrow: #5b4315;
  --border: #dcd7c9;
  --yellow: #f5d240;
  --yellow-pale: #fcf2cd;
  --yellow-hover: #ddb62c;
  --ochre: #795200;
  --ochre-dark: #462d00;
  --footer-border: #d8d1bb;
  --footer-rule: #d1cab5;

  --pad-x: clamp(20px, 4vw, 56px);
  --section-y: clamp(32px, 5vw, 72px);
  --card-pad: clamp(24px, 3vw, 40px);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@supports (color: oklch(0.5 0.1 90)) {
  :root {
    --bg: oklch(0.975 0.008 90);
    --surface: oklch(0.99 0.004 90);
    --ink: oklch(0.2 0.02 90);
    --ink-soft: oklch(0.24 0.02 88);
    --ink-soft-alt: oklch(0.24 0.03 88);
    --ink-hover: oklch(0.32 0.025 88);
    --muted: oklch(0.34 0.05 85);
    --mono-muted: oklch(0.44 0.03 88);
    --eyebrow: oklch(0.4 0.07 80);
    --border: oklch(0.88 0.02 90);
    --yellow: oklch(0.87 0.16 95);
    --yellow-pale: oklch(0.96 0.05 95);
    --yellow-hover: oklch(0.79 0.15 92);
    --ochre: oklch(0.47 0.1 78);
    --ochre-dark: oklch(0.32 0.07 78);
    --footer-border: oklch(0.86 0.03 92);
    --footer-rule: oklch(0.84 0.03 92);
  }
}

* { box-sizing: border-box; }

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

body {
  font-family: Commissioner, Helvetica, Arial, sans-serif;
  color: var(--ink);
  overflow-x: hidden;
}

a { color: var(--ochre); text-decoration: none; }
a:hover { color: var(--ochre-dark); }

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

img { max-width: 100%; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--surface);
  padding: 12px 20px;
  z-index: 10;
}
.skip-link:focus {
  left: 0;
  color: var(--surface);
}

/* ---------- Shared pieces ---------- */

.eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ochre);
}

.btn {
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--yellow);
  color: var(--ink);
}
.btn:hover {
  background: var(--yellow-hover);
  color: var(--ink);
}
.btn--ink {
  background: var(--ink);
  color: var(--surface);
}
.btn--ink:hover {
  background: var(--ink-hover);
  color: var(--surface);
}
.btn .arrow {
  margin-left: 12px;
  font-size: 20px;
  line-height: 1;
}
/* A leading icon, mirroring the trailing .arrow on the other side of the label. */
.btn i {
  margin-right: 10px;
  font-size: 0.95em;
}

/* Every section and card heading shares one scale, so both pages read at a
   single level whichever block a heading sits in. The leading margin clears an
   .eyebrow where one sits above it; headings that open a block reset it. */
.section-head h2,
.sponsors-head h2,
.events-title,
.contact-copy h2 {
  margin: 12px 0 0;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.sponsors-head h2,
.events-title { margin-top: 0; }

.media {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

/* Two-column split used by the hero and the "Speak" section.
   Per the design, the image shrinks alongside the copy rather than
   stacking underneath at narrow widths. */
.split {
  padding: var(--section-y) var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 64px);
  align-items: center;
}

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

.site-header {
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  padding: 18px var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  flex: 0 0 auto;
}
.wordmark:hover { color: inherit; }
.wordmark img {
  height: 40px;
  width: auto;
  display: block;
}
.wordmark span {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
}
.site-nav a { color: var(--ink); }
.site-nav a:hover { color: var(--ochre); }

.site-nav .nav-slack {
  color: var(--ochre);
  font-weight: 600;
  box-shadow: inset 0 -8px 0 var(--yellow);
}
.site-nav .nav-slack:hover { color: var(--ink); }

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

.hero {
  background: var(--yellow);
  color: var(--ink);
  padding: clamp(40px, 7vw, 96px) var(--pad-x) clamp(56px, 8vw, 110px);
}

.hero-kicker {
  margin: 0 0 clamp(10px, 1.2vw, 14px);
  font-family: var(--mono);
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--eyebrow);
}

/* The headline breaks explicitly after each comma. Sizing against the
   column width (rather than the viewport) keeps the longest line on one
   line at every width, so the three-line shape never collapses. */
.hero-copy {
  container-type: inline-size;
}

.hero h1 {
  margin: 0;
  font-size: min(76px, 14.6cqw);
  line-height: 0.94;
  font-weight: 700;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.hero-points {
  margin: clamp(20px, 2.6vw, 28px) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.35;
  color: var(--ink-soft-alt);
}
.hero-points li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 400;
}
.hero-points i {
  width: 1.2em;
  font-size: 0.9em;
  color: var(--ink);
}

/* ---------- Events ---------- */

.events {
  padding: var(--section-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
}

.events-title { margin-bottom: clamp(8px, 1vw, 12px); }

.event-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 6px solid var(--yellow);
  padding: var(--card-pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}
.event-card .event-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.event-card .btn { margin-left: auto; }

.event-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--mono);
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.25;
  color: var(--ink-soft);
}
.event-lines span {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Previous event: the card fades out top-to-bottom, with the archive
   link layered above it at full strength. */
.event-past {
  position: relative;
}
.event-past .event-card {
  border-top-color: var(--border);
  --fade: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0, 0, 0, 0.85) 18%,
    rgba(0, 0, 0, 0.28) 34%,
    rgba(0, 0, 0, 0.1) 52%,
    transparent 72%
  );
  -webkit-mask-image: var(--fade);
  mask-image: var(--fade);
}
/* Reserves room so the overlaid link never sits on top of the text. */
.event-past .btn-slot {
  width: 190px;
  height: 44px;
  flex: 0 0 auto;
}
.event-past .btn {
  position: absolute;
  right: var(--card-pad);
  top: 50%;
  transform: translateY(-50%);
}

/* ---------- Speak ---------- */

.speak {
  background: var(--yellow);
}

.speak-copy {
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.speak-copy:hover { color: var(--ochre-dark); }

.speak-title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.speak-title i {
  font-size: 0.85em;
  color: var(--ink);
}

.speak-sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.speak-copy .btn {
  align-self: flex-start;
  margin-top: 10px;
}

/* ---------- Sponsors ---------- */

.sponsors {
  background: var(--bg);
  padding: var(--section-y) var(--pad-x);
}

.sponsors-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* A wrapping row rather than an auto-fit grid: with only a couple of
   sponsors, grid columns stretch to half the viewport and the logos spread
   out with them. Here each sponsor is a fixed-width cell and the row keeps
   its logos together, centred, whatever the screen width. */
.sponsor-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 3vw, 44px);
}
.sponsor {
  flex: 0 1 240px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
/* The logo box is bounded on both axes, so a logo never scales past its
   intended size on a wide screen; a wide or a tall logo shrinks to fit
   inside the box instead of setting its own size. */
.sponsor-logo {
  width: 100%;
  height: clamp(62.4px, 6vw, 76.8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9.6px;
}
.sponsor-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.sponsor-tier {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ochre);
}

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

.site-footer {
  background: var(--yellow);
  color: var(--ink);
  border-top: 1px solid var(--footer-border);
  padding: clamp(36px, 5vw, 72px) var(--pad-x) clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 48px);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: center;
  justify-content: space-between;
}
.footer-top > img {
  height: 44px;
  width: auto;
  display: block;
}

.social {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  margin-left: auto;
}
.social a {
  width: 44px;
  height: 44px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.social a:hover { color: var(--ochre); }
.social i { font-size: 28px; }

.acknowledgements {
  border-top: 1px solid var(--ochre);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mono-muted);
  line-height: 1.6;
}
.acknowledgements > div {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.acknowledgements img {
  width: 40px;
  height: auto;
  flex: 0 0 auto;
  display: block;
}

/* ---------- Prospectus page ---------- */

/* The hero headline is nowrap and sized against its column (see .hero h1);
   this page's longest line is "Sponsorship", so it needs its own ratio. */
.hero--prospectus h1 { font-size: min(72px, 18.6cqw); }

.section {
  padding: var(--section-y) var(--pad-x);
}
.section--surface {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* The alternating bands use a pale tint, leaving the full-strength yellow to
   the hero, footer, buttons and card accents. */
.section--yellow { background: var(--yellow-pale); }

.section-head {
  margin-bottom: clamp(24px, 3vw, 36px);
}
.section-head .lead {
  margin: 14px 0 0;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- Prospectus: prose ---------- */

.prose-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 56px);
}
.prose h3 {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.prose p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.prose p:last-child { margin-bottom: 0; }

/* Bulleted list inside prose copy — matches .prose p's type scale, with the
   ochre marker used by the other prospectus lists. */
.prose-list {
  margin: 0 0 14px;
  padding: 0 0 0 1.1em;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.prose-list li { padding-left: 0.25em; }
.prose-list li::marker { color: var(--ochre); }
.prose-list:last-child { margin-bottom: 0; }

/* ---------- Prospectus: stats ---------- */

/* Four cards stepping 1 -> 2 -> 4 columns. auto-fit would pass through
   three, leaving a lone card stranded on a second row. Breakpoints are set
   where the cards reach their intended minimum width. */
.stat-grid {
  margin-top: clamp(28px, 3.5vw, 44px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2vw, 20px);
}
@media (min-width: 460px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 6px solid var(--yellow);
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stat b {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ochre);
}

/* ---------- Prospectus: talk topics ---------- */

.topic-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.topic-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* The intro copy already separates the list from what precedes it. */
.topic-list li:first-child { border-top: 0; }

/* The default rule colour is tuned for the pale sections and washes out on
   the yellow band, so there it picks up the icon colour instead. */
.section--yellow .topic-list li { border-top-color: var(--ochre); }
/* Same on the tier table: the grey rules and the yellow header rule both
   disappear against the yellow band. */
.section--yellow .tier-table th,
.section--yellow .tier-table td,
.section--yellow .tier-table tbody tr:first-child th,
.section--yellow .tier-table tbody tr:first-child td { border-top-color: var(--ochre); }

/* Column layouts for .topic-list. Both stack to one column when narrow, and
   drop the rule above whichever items form the first row.
   --cols-13:  one or three columns, never two.
   --cols-123: one, then two, then three as the width allows. */
.topic-list--cols-13,
.topic-list--cols-123 { display: grid; column-gap: clamp(20px, 3vw, 48px); }

@media (min-width: 800px) {
  .topic-list--cols-13 { grid-template-columns: repeat(3, 1fr); }
  .topic-list--cols-13 li:nth-child(-n + 3) { border-top: 0; }
}

@media (min-width: 600px) {
  .topic-list--cols-123 { grid-template-columns: repeat(2, 1fr); }
  .topic-list--cols-123 li:nth-child(-n + 2) { border-top: 0; }
}
@media (min-width: 1000px) {
  .topic-list--cols-123 { grid-template-columns: repeat(3, 1fr); }
  .topic-list--cols-123 li:nth-child(-n + 3) { border-top: 0; }
}
.topic-list i {
  flex: 0 0 auto;
  margin-top: 0.2em;
  color: var(--ochre);
}

/* ---------- Prospectus: tiers ---------- */

/* The table can outgrow a narrow screen, so it scrolls inside its own box
   rather than forcing the page to scroll sideways. */
.table-scroll { overflow-x: auto; }

/* Styled as a list rather than a card: no panel or outer border, just a rule
   between rows, matching .topic-list. */
.tier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}
.tier-table th,
.tier-table td {
  padding: 14px clamp(12px, 1.6vw, 24px);
  vertical-align: baseline;
  border-top: 1px solid var(--border);
}
/* The row labels read as a list down the left; the tier columns are centred
   under their headings. Equal padding keeps that centring true. */
.tier-table th:first-child,
.tier-table td:first-child {
  padding-left: 0;
  text-align: left;
}
.tier-table th:not(:first-child),
.tier-table td:not(:first-child) { text-align: center; }

/* The tier names head the columns, so they carry the most weight here. */
.tier-table thead th {
  padding-top: 0;
  border-top: 0;
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
/* The rule under the header row is the accent this section keeps now that the
   panel is gone. It is the first body row's top border, the header having none. */
.tier-table tbody tr:first-child th,
.tier-table tbody tr:first-child td {
  border-top: 3px solid var(--yellow);
}

.tier-table tbody th {
  font-weight: 400;
  color: var(--ink-soft);
}
.tier-table td { color: var(--ink-soft); }
/* Only the figure carries the weight, not the words around it. */
.tier-price-row b { color: var(--ink); }
.tier-table i {
  font-size: 1.05em;
  color: var(--ochre);
}

.table-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted);
  text-align: right;
}

/* Visible to screen readers only — gives the tick and cross cells a label. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Prospectus: sponsorship categories ---------- */

/* Same 1 -> 2 -> 4 progression as .stat-grid; these cards carry more copy,
   so they need more room before each step. */
.cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2vw, 20px);
}
@media (min-width: 560px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Three cards: one column or three, so a row is never left short. */
.cat-grid--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) {
  .cat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Icon and title share the first row, like .platform-card h2; the description
   spans both columns underneath. */
.cat {
  /* The accent bar is drawn as a background rather than a thick border: where
     a 6px border meets the 1px sides, the mitred join tapers into a visible
     wedge at each end, which shows plainly in a dark colour. */
  background: linear-gradient(var(--yellow) 0 5px, var(--surface) 5px);
  border: 1px solid var(--border);
  border-top-color: var(--yellow);
  padding: clamp(20px, 2.4vw, 28px);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px 14px;
}
.cat span { grid-column: 1 / -1; }
.cat i {
  font-size: 24px;
  color: var(--ochre);
}
.cat b {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.cat span {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- Prospectus: get in touch ---------- */

.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 6px solid var(--yellow);
  padding: var(--card-pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 32px;
}
.contact-copy { max-width: 54ch; }
.contact-copy p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* The address spelled out in the card copy, for anyone not using the button.
   Mono runs large beside Commissioner, so it is stepped down to match, and
   takes the ochre of the other mono labels to lift it out of the muted
   paragraph. */
.contact-email {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--ochre);
}

/* A .contact-card sitting under the stat grid, with a brand mark beside its
   heading. */
.platform-card { margin-top: clamp(28px, 3.5vw, 44px); }
/* .contact-copy p overrides .eyebrow's colour, so restore it on any card that
   carries one, matching the mono labels on the stat cards. */
.contact-copy .eyebrow { color: var(--ochre); }
.platform-card h2 {
  display: flex;
  align-items: center;
  gap: 14px;
}
.platform-card h2 i {
  font-size: 0.85em;
  color: var(--ink);
}

/* A .contact-card carrying a single figure rather than buttons; the figure
   takes the place the actions occupy on the contact card. */
/* The figure and the copy read as one sentence, so they sit together at the
   start of the row rather than pushed apart like the contact card's actions. */
/* The card sits beside the photo, which matches its height. */
.fact-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(200px, 30%, 340px);
  gap: clamp(16px, 2.5vw, 32px);
  align-items: stretch;
}

/* Label, figure and statement read as one stack. */
.fact-card {
  display: grid;
  align-content: center;
  row-gap: 6px;
}

.fact-figure {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(52px, 6vw, 64px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.fact-card h2 {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* The photo is clamped to the card's height: out of flow, its 16:10 ratio no
   longer sets the row height, so the card does, and the photo fills and crops. */
.media--fill {
  position: relative;
  min-height: clamp(150px, 17vw, 210px);
}
.media--fill img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

/* Narrow: the photo drops below the card rather than squeezing beside it, and
   with no card height to match it goes back to its own proportions. */
@media (max-width: 640px) {
  .fact-split { grid-template-columns: minmax(0, 1fr); }
  .media--fill {
    position: static;
    min-height: 0;
  }
  .media--fill img {
    position: static;
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

/* Only the emphasised words carry the weight here. The label sits tight above
   the heading so the copy stack stays within the height of the figure. */
.fact-card h2 { font-weight: 400; margin-top: 4px; }
.fact-card h2 b { font-weight: 700; }
.fact-card .eyebrow { line-height: 1; }
/* The 54ch cap on .contact-copy is sized for the contact card's paragraph. On
   the fact card it wraps the heading, pushing the label above the figure; on
   the platform card it narrows the copy well short of the card. */
.fact-card .contact-copy,
.platform-card .contact-copy { max-width: none; }

.btn--outline {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ink);
  color: var(--ink);
}
.btn--outline:hover {
  background: var(--ink);
  color: var(--surface);
}

/* ---------- Prospectus: previous sponsors ---------- */

/* Past sponsors sit under the current ones at lower weight: half opacity,
   resolving to full on hover. They are not links, so nothing is hidden
   behind the hover — it only restores emphasis. */
.sponsors-past {
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--ochre);
}
.sponsors-past h3 {
  margin: 0 0 clamp(20px, 2.5vw, 28px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mono-muted);
  font-weight: 400;
}

.sponsor-grid--past {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.sponsor-grid--past .sponsor-logo {
  max-width: 204px;
  aspect-ratio: 2 / 1;
}
.sponsor-grid--past .sponsor {
  opacity: 0.5;
  transition: opacity 160ms ease;
}
.sponsor-grid--past .sponsor:hover {
  opacity: 1;
}
/* Without hover there is no way to restore them, so lift the floor a little
   rather than leaving touch users with a permanently faded row. */
@media (hover: none) {
  .sponsor-grid--past .sponsor { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .sponsor-grid--past .sponsor { transition: none; }
}