/* =====================================================================
   MPBA  |  Daylight, second pass
   Under the Lights kept its bones and moved onto paper. Reading happens
   on warm off-white at 18px with black-level text; the night arena is
   held back for the photography, the finals band, the call to action and
   the footer. The six pole hairlines still appear twice a page and
   nowhere else.
   ===================================================================== */

:root{
  --paper:#F8F5EE;
  --paper2:#FFFFFF;
  --paper3:#EFEAE0;
  /* The ink scale used to be biased green, left over from the pine theme.
     Against a plum accent that reads as a second, competing hue. These are
     the same values rotated onto the purple side of neutral. */
  --ink:#191320;
  --ink2:#433A4A;
  --ink3:#5C5364;
  --arena:#1A0919;      /* the mark's purple taken almost to black */
  --arena2:#26102A;
  --chalk:#F4F0F4;
  --dust:#A9A0A8;
  /* MPBA's own colours, read off the association mark. Purple carries the
     wordmark and does the most work; the blue is the horse; the rust is the
     ASSOCIATION line and is decorative only, being too light to set text in. */
  --sod:#802D7B;        /* purple. 7.5:1 on cream, 8.1:1 with white on it */
  --sod-ink:#6D2669;    /* the same purple a shade down, for small text */
  --sod-lt:#D9A8D5;     /* lifted for dark grounds, 9.6:1 on the plum */
  --rib:#2767A5;        /* blue, the second voice */
  --rib-lt:#8FC0E8;
  --rust:#C25E44;       /* warm accent. Never set text in it on cream. */
  --rust-ink:#A5503A;   /* when it must carry text, 5.1:1 */

  /* Champagne. The money colour, and the only place a third hue is allowed.
     It is decorative at --gilt: 2.2:1 on cream, so it is never given small
     text there. --gilt-ink is the same colour dropped until it clears AA
     (4.6:1 on paper) for the rare label that has to be set in it. On the
     dark arena grounds --gilt is the one that reads. */
  --gilt:#C6A15B;
  --gilt-ink:#7A5C1C;
  --gilt-tint:#F6EEDF;
  --gilt-hair:rgba(138,106,34,.34);

  /* Depth. Two shadows, layered, never one flat drop. The second is the
     contact shadow and is what stops a card looking pasted on. */
  --lift-1:0 1px 2px rgba(25,19,32,.05), 0 2px 10px -4px rgba(25,19,32,.10);
  --lift-2:0 2px 4px rgba(25,19,32,.06), 0 12px 28px -12px rgba(25,19,32,.20);
  --lift-3:0 4px 8px rgba(25,19,32,.07), 0 26px 50px -20px rgba(25,19,32,.28);
  --line:rgba(25,19,32,.14);
  --line2:rgba(25,19,32,.26);
  --hair:rgba(25,19,32,.09);
  --hairD:rgba(242,239,231,.16);
  --bigs:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --wrap:1220px;

  /* Motion. Two durations and one curve carry the whole site. */
  --t-tap:170ms;    /* answering the cursor */
  --t-move:520ms;   /* something arriving */
  --t-slow:900ms;   /* the hero, once */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
/* The hidden attribute has to beat any display rule, or an element the
   JavaScript hides stays on screen. The division headings under the
   standings tabs were doing exactly that: the tab said Open 1D and so did
   a heading right underneath it. */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--sod-ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
a:hover{color:var(--ink);text-decoration-color:var(--sod)}
button{font:inherit}
:focus-visible{outline:3px solid var(--sod-ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px;width:100%}
@media (min-width:820px){.wrap{padding:0 34px}}

/* ------------------------------------------------------------- type */
/* 900 belongs to the hero and page heads. Section titles sit one weight
   down, which reads as composed rather than shouted and lets the hero
   actually be the loudest thing on the page. */
h1,h2{font-family:var(--bigs);text-transform:uppercase;
  line-height:.92;margin:0;text-wrap:balance;color:var(--ink)}
h1{font-weight:900;letter-spacing:.015em}
h2{font-weight:800;letter-spacing:.028em}
h3,h4{font-family:var(--body);font-weight:600;letter-spacing:-.005em;margin:0;
  line-height:1.35;color:var(--ink)}
h1{font-size:clamp(34px,5.2vw,60px)}
h2{font-size:clamp(28px,3.5vw,44px)}
h3{font-size:20px}
h4{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);font-weight:700}
p{margin:0 0 1.1rem}
p:last-child{margin-bottom:0}
strong{font-weight:700;color:var(--ink)}
em{font-style:normal;color:var(--sod-ink)}
small{display:block;font-size:15px;color:var(--ink3);font-weight:400;
  letter-spacing:0;text-transform:none;line-height:1.5}

.eyebrow{font-size:13.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink3);font-weight:700;margin:0 0 .8rem}
.lede{font-size:clamp(19px,1.7vw,21px);line-height:1.65;color:var(--ink2);max-width:60ch}
.help{font-size:15.5px;color:var(--ink3);line-height:1.6}
.center{text-align:center}
.maxw{max-width:66ch}
.mt0{margin-top:0}
.mb0{margin-bottom:0}
.hide{display:none!important}

.stripe{width:44px;height:3px;background:var(--sod);margin:1.1rem 0 1.4rem;border-radius:2px}
.center .stripe,.stripe.center{margin-left:auto;margin-right:auto}

/* ----------------------------------------------------------- header */
/* The header floats on the photograph rather than sitting on it as a cream
   slab with a hard seam. It only becomes a solid bar once you have scrolled
   past the picture, which is also the moment it needs to be readable. */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--t-move) var(--ease),border-color var(--t-move) var(--ease),
             box-shadow var(--t-move) var(--ease)}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,6,18,.55) 0%,rgba(18,6,18,.18) 62%,rgba(18,6,18,0) 100%);
  opacity:1;transition:opacity var(--t-move) var(--ease)}
.hdr.is-stuck{background:rgba(248,245,238,.96);backdrop-filter:blur(12px);
  border-bottom-color:var(--line);box-shadow:0 14px 30px -26px rgba(22,33,28,.8)}
.hdr.is-stuck::before{opacity:0}

.brand{transform-origin:left center;transition:transform var(--t-move) var(--ease)}
.hdr.is-stuck .brand{transform:scale(.88)}
/* Two marks, one for each ground. Only ever one is visible. */
.brand img{display:block;width:118px;transition:opacity var(--t-move) var(--ease)}
.brand .brand__dark{position:absolute;top:0;left:0;opacity:0}
.brand{position:relative}
.hdr.is-stuck .brand__light{opacity:0}
.hdr.is-stuck .brand__dark{opacity:1}
.hdr__bar{display:flex;align-items:center;gap:18px;padding-top:14px;padding-bottom:14px}
.brand{display:block;flex:none;text-decoration:none}
.brand img{width:118px}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{font-size:13.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:var(--chalk);white-space:nowrap;text-decoration:none;
  text-shadow:0 1px 12px rgba(18,6,18,.8);
  position:relative;transition:color var(--t-tap) var(--ease)}
.hdr.is-stuck .nav a:not(.btn){color:var(--ink2);text-shadow:none}
.nav a::after{background:var(--sod-lt)}
.hdr.is-stuck .nav a::after{background:var(--sod)}
.nav a:not(.btn):hover{color:#fff}
.hdr.is-stuck .nav a:not(.btn):hover{color:var(--ink)}
/* only the plain links carry the underline gap; a button keeps its own padding */
.nav a:not(.btn){padding-bottom:3px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--sod);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-tap) var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav a.btn::after{display:none}
.nav .btn{margin-left:0}
.nav a.btn{color:#fff;text-decoration:none;text-shadow:none}
.hdr.is-stuck .nav a.btn{color:#fff}
.nav a.btn:hover{color:#fff}
.nav a.btn--ghost{color:var(--ink)}
.burger{display:none;margin-left:auto;background:transparent;
  border:1.5px solid rgba(244,240,244,.55);border-radius:4px;
  color:var(--chalk);padding:10px 12px;line-height:0;cursor:pointer;
  transition:background var(--t-tap) var(--ease),border-color var(--t-tap) var(--ease),
             color var(--t-tap) var(--ease)}
.burger:hover{background:rgba(244,240,244,.14);border-color:var(--chalk)}
.hdr.is-stuck .burger{background:var(--paper2);border-color:var(--line2);color:var(--ink)}
.hdr.is-stuck .burger:hover{background:var(--paper3)}
.burger svg{display:block}

@media (max-width:1080px){
  .burger{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;margin:0;display:none;flex-direction:column;
    align-items:stretch;gap:0;background:var(--paper);border-bottom:2px solid var(--line2);
    padding:8px 22px 26px;max-height:calc(100vh - 100%);
    max-height:calc(100dvh - 100%);overflow-y:auto;
    box-shadow:0 18px 30px -22px rgba(22,33,28,.45)}
  .nav.is-open{display:flex}
  .nav a{padding:17px 2px;border-bottom:1px solid var(--line);font-size:15px;letter-spacing:.12em}
  .nav .btn{margin:14px 0 0;text-align:center;padding:16px 20px;font-size:13px}
  .nav .btn + .btn{margin-top:10px}

  /* The drawer is a cream panel, so the links go back to dark ink whether or
     not the bar itself is still floating on the photograph. Without this they
     stayed white-on-white and the whole menu disappeared. */
  .hdr .nav a:not(.btn),
  .hdr:not(.is-stuck) .nav a:not(.btn){color:var(--ink2);text-shadow:none}
  .hdr .nav a:not(.btn):hover,
  .hdr:not(.is-stuck) .nav a:not(.btn):hover{color:var(--ink)}
  .hdr .nav a::after{background:var(--sod)}
  /* The floating-header rule for this button is four classes deep and sits
     later in the file, so beating it needs the drawer's own class as well. */
  .hdr:not(.is-stuck) .nav.is-open .btn--ghost,
  .hdr.is-stuck .nav.is-open .btn--ghost{
    color:var(--ink);border-color:var(--line2);text-shadow:none;background:transparent}
  .hdr:not(.is-stuck) .nav.is-open .btn--ghost:hover,
  .hdr.is-stuck .nav.is-open .btn--ghost:hover{
    background:var(--paper3);border-color:var(--ink);color:var(--ink)}
}

/* ------------------------------------------------------------- hero */
.hero{position:relative;overflow:hidden;background:var(--arena);
  display:flex;align-items:flex-end;min-height:min(78vw,560px)}
.hero__media{position:absolute;inset:0;z-index:1;background:var(--arena)}
/* Slides stack in the same box. Only opacity and transform move, so a
   crossfade costs nothing and nothing reflows. Shared by every slideshow. */
[data-slides]{overflow:hidden}   /* position belongs to each box, not here */
[data-slides] .sl{position:absolute;inset:0;opacity:0;
  transition:opacity 1400ms cubic-bezier(.4,0,.2,1)}
[data-slides] .sl.on{opacity:1}
[data-slides] img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.045) translate3d(0,0,0);will-change:transform}
[data-slides] .sl.on img{transform:scale(1.11) translate3d(var(--dx,0),var(--dy,0),0);
  transition:transform 8600ms linear}
[data-slides] .sl:nth-child(1){--dx:-1.4%;--dy:-0.8%}
[data-slides] .sl:nth-child(2){--dx:1.6%;--dy:0.6%}
[data-slides] .sl:nth-child(3){--dx:-1.1%;--dy:1.0%}
[data-slides] .sl:nth-child(4){--dx:1.3%;--dy:-1.1%}
[data-slides] .sl:nth-child(5){--dx:-0.9%;--dy:-1.3%}
.hero__media img{filter:saturate(.98) contrast(1.04) brightness(.94)}
/* the video layer, on top of the slideshow, under the scrim */
.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.98) contrast(1.04) brightness(.94);
  opacity:0;transition:opacity 900ms var(--ease);pointer-events:none}
.hero__vid.on{opacity:1}

/* a scrim down the left so the headline reads over any frame */
.hero__media::after{content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(100deg,rgba(16,5,16,.92) 0%,rgba(16,5,16,.78) 26%,rgba(16,5,16,.42) 48%,rgba(16,5,16,.06) 72%),
    linear-gradient(180deg,rgba(16,5,16,.72) 0%,rgba(16,5,16,.30) 22%,rgba(16,5,16,.34) 60%,rgba(16,5,16,.90) 100%)}
/* The hero is a stack of four things, and each one needs room to be its own
   thing. Before this they ran together into a single block of shouting. */
.hero__inner{position:relative;z-index:4;padding-top:96px;padding-bottom:76px;
  max-width:min(100%,760px)}
@media (min-width:820px){.hero__inner{padding-top:120px;padding-bottom:96px}}

.hero .eyebrow{color:var(--sod-lt);font-size:13px;letter-spacing:.22em;font-weight:700;
  margin:0 0 1.5rem;text-shadow:0 1px 14px rgba(18,6,18,.9)}
.hero h1{font-size:clamp(42px,6.4vw,78px);line-height:.98;letter-spacing:.005em;
  max-width:13ch;color:var(--chalk);margin:0 0 1.5rem;
  text-shadow:0 3px 30px rgba(18,6,18,.6)}
.hero h1 em{color:var(--sod-lt)}
.hero__sub{max-width:40ch;color:var(--chalk);font-size:clamp(18px,1.5vw,21px);
  line-height:1.6;margin:0;text-shadow:0 1px 18px rgba(18,6,18,.85)}
.hero__sub strong{color:#fff}
.hero .btn-row{margin-top:2.6rem}

/* One quiet line of substance under the buttons. Not a counter, not a
   widget, just three facts sitting on the photograph. */
.herofacts{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:.55rem 1.6rem;
  align-items:baseline;color:var(--chalk);font-size:14.5px;letter-spacing:.02em;
  text-shadow:0 1px 16px rgba(18,6,18,.9)}
.herofacts b{font-family:var(--bigs);font-weight:800;font-size:20px;letter-spacing:.02em;
  color:var(--sod-lt);margin-right:.45rem}
.herofacts span{display:inline-flex;align-items:baseline;white-space:nowrap}

/* --------------------------------------------------- page headers */
.phead{position:relative;overflow:hidden;background:var(--arena);
  display:flex;align-items:flex-end;min-height:min(54vw,340px)}
.phead__media{position:absolute;inset:0;z-index:1}
.phead__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.98) contrast(1.03) brightness(.9)}
.phead__media::after{content:"";position:absolute;inset:0;z-index:2;
  /* The top stop carries the nav, which floats over this photograph. It was
     .62, which measured 4.52:1 against the brightest pixel behind it on the
     results page: a pass, but by two hundredths, and a margin that thin is
     not a margin. Deepened only at the very top, so the picture itself is
     no darker where anyone is looking at it. */
  background:linear-gradient(180deg,rgba(18,6,18,.76) 0%,rgba(18,6,18,.30) 38%,rgba(18,6,18,.90) 100%)}
.phead__inner{position:relative;z-index:4;padding-top:104px;padding-bottom:52px}
.phead h1{max-width:17ch;color:var(--chalk);text-shadow:0 2px 22px rgba(11,25,19,.8)}
.phead .eyebrow{color:var(--sod-lt);letter-spacing:.26em;margin-bottom:1.1rem;
  text-shadow:0 1px 14px rgba(18,6,18,.9)}
.phead h1{margin-bottom:1.1rem}
.phead p{max-width:56ch;color:var(--chalk);font-size:18.5px;
  text-shadow:0 1px 16px rgba(11,25,19,.9)}

/* ---------------------------------------------------------- sections */
.section{padding:64px 0}
@media (min-width:820px){.section{padding:88px 0}}
.section--tight{padding:46px 0}
.section--alt{background:var(--paper3);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* The dark bands carry a wide, very low-contrast mesh so the ground is not
   one flat colour behind a photograph, plus the same grain as the rest of the
   page. Both are decorative and both sit behind everything. */
.section--dark{background:var(--arena);color:var(--chalk);position:relative;isolation:isolate;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--chalk)}
.section--dark p{color:var(--chalk)}
.section--dark .eyebrow,.section--dark .help,.section--dark small{color:var(--dust)}
.section--dark a{color:var(--sod-lt)}
.section--dark strong{color:#fff}
/* A component that brings its own light surface keeps its own ink, even when
   the band around it is dark. Without this the section's text colour leaks in
   and paints chalk on white. */
.section--dark .step,.section--dark .step h3,.section--dark .doclink,
.section--dark .tiercard,.section--dark .tiercard h3,.section--dark .formcard,
.section--dark .formcard label,.section--dark .ctile,.section--dark .ctile b,
.section--dark table,.section--dark tbody td,.section--dark .tag{color:var(--ink)}
.section--dark .step p,.section--dark .ctile span,.section--dark .tierquote,
.section--dark .doclink small,.section--dark thead th{color:var(--ink2)}
.section--dark .step::before,.section--dark .doclink__ico{color:var(--sod-ink)}
.section--dark a.btn{color:#fff}
.section--dark a.btn:hover{color:#fff}

.shead{max-width:66ch;margin-bottom:2.6rem}
.shead p{color:var(--ink2)}
.shead__row{margin-top:1.5rem}
.center .shead,.shead.center{margin-left:auto;margin-right:auto}

.evgroup__head{display:flex;align-items:baseline;gap:16px;
  padding:0 0 12px;margin:2.8rem 0 1.4rem;border-bottom:2px solid var(--line2)}
.evgroup__head:first-child{margin-top:0}
.evgroup__head h2{font-size:clamp(24px,2.6vw,32px)}

/* ------------------------------------------------------------- grid */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr 1fr}
@media (min-width:620px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.stack{display:grid;gap:22px}

/* ------------------------------------------------------------ cards */
.card{background:var(--paper2);border:1px solid var(--hair);padding:28px 26px 30px;
  box-shadow:var(--lift-1);
  transition:transform var(--t-tap) var(--ease),box-shadow var(--t-tap) var(--ease),
             border-color var(--t-tap) var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--lift-2);border-color:var(--line)}
.section--alt .card{background:var(--paper2)}
.section--dark .card{background:var(--arena2);border-color:var(--hairD)}
.card h3{margin-bottom:.6rem}
.card p{color:var(--ink2);font-size:17px;line-height:1.65}
.card p:last-child{margin-bottom:0}
/* A flat card is a heading and a paragraph, not a box. It has to stay flat
   inside a tinted or dark section too: .section--alt .card is a two-class
   selector, so it was outweighing this one and repainting these white while
   they still had no padding at all. */
.card--flat,
.section--alt .card--flat,
.section--dark .card--flat{background:transparent;border:0;padding:0;box-shadow:none}
.card--flat:hover{transform:none;box-shadow:none}
/* With no padding of its own, the first and last child's margins would
   collapse straight through the card and make the spacing between them
   uneven. The grid gap sets the rhythm instead. */
.card--flat > :first-child{margin-top:0}
.card--flat > :last-child{margin-bottom:0}

/* ----------------------------------------------------------- events */
.ev{display:grid;grid-template-columns:1fr;gap:0;background:var(--paper2);
  border:1px solid var(--line);margin-bottom:18px;overflow:hidden;
  transition:transform var(--t-tap) var(--ease),border-color var(--t-tap) var(--ease),
             box-shadow var(--t-tap) var(--ease)}
.ev:hover{border-color:var(--line2);box-shadow:0 14px 30px -20px rgba(22,33,28,.5);
  transform:translateY(-3px)}
@media (min-width:700px){
  .ev{grid-template-columns:210px 132px 1fr auto;align-items:center;gap:0 22px;margin-bottom:16px}
}
.ev__img{position:relative;background:var(--paper2);align-self:stretch;min-height:150px;
  border-bottom:1px solid var(--line);display:grid;place-items:center;padding:20px 24px}
.ev__img img{position:static;width:100%;height:100%;max-height:104px;object-fit:contain}
@media (min-width:700px){
  .ev__img{min-height:148px;border-bottom:0;border-right:1px solid var(--line);padding:18px 20px}
  .ev__img img{max-height:110px}
}
.ev__date{font-family:var(--bigs);text-transform:uppercase;line-height:.95;
  display:flex;flex-direction:column;gap:2px;padding:20px 22px 0}
@media (min-width:700px){.ev__date{padding:0 0 0 22px}}
.ev__date span{font-size:13px;letter-spacing:.16em;color:var(--sod-ink);font-weight:700}
.ev__date b{font-size:33px;font-weight:900;color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.ev__date i{font-size:13px;letter-spacing:.14em;color:var(--ink3);font-style:normal;font-weight:700}
.ev__body{padding:10px 22px 0}
@media (min-width:700px){.ev__body{padding:18px 0}}
.ev__body h3{font-size:20px;margin-bottom:.35rem}
.ev__meta{font-size:16px;color:var(--ink2);margin:0 0 .7rem}
.ev__tags{display:flex;flex-wrap:wrap;gap:7px}
.ev__cta{padding:16px 22px 22px}
@media (min-width:700px){.ev__cta{padding:0 22px 0 0}}
.ev--past{background:var(--paper3)}
.ev--past .ev__date b{color:var(--ink3)}
.ev--past .ev__date span{color:var(--ink3)}
.ev--past .ev__body h3{color:var(--ink2)}
.ev--past .ev__img{background:var(--paper3)}
.ev--past .ev__img img{filter:grayscale(1);opacity:.55}
.ev--past:hover{transform:none;box-shadow:none;border-color:var(--line)}

/* -------------------------------------------------------------- tags */
.tag{display:inline-block;font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:var(--ink2);background:var(--paper3);border:1px solid var(--line);
  padding:6px 10px;white-space:nowrap}
.tag--gold{color:var(--gilt-ink);background:var(--gilt-tint);border-color:var(--gilt-hair)}
.tag--dark{color:var(--ink);background:var(--paper3)}
.tag--pole{color:var(--sod-ink);background:#F3E8F2;border-color:rgba(109,38,105,.30)}

/* ----------------------------------------------------------- buttons */
/* Softer than the hard rectangles these were: a small radius, a lighter
   border and a touch less shout in the letterspacing. */
.btn{display:inline-block;background:var(--sod);color:#fff;border:1.5px solid var(--sod);
  border-radius:4px;
  padding:15px 30px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;cursor:pointer;text-align:center;text-decoration:none;
  transition:transform var(--t-tap) var(--ease),background var(--t-tap) var(--ease),
             border-color var(--t-tap) var(--ease),box-shadow var(--t-tap) var(--ease)}
.btn:hover{background:var(--sod-ink);border-color:var(--sod-ink);color:#fff;text-decoration:none;
  transform:translateY(-2px);box-shadow:0 12px 22px -14px rgba(26,9,25,.7)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:11px 18px;font-size:13.5px}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn--ghost:hover{background:var(--paper3);border-color:var(--ink);color:var(--ink)}
/* Submit Points is the second action in the header and was disappearing in
   both states: a 55% border over a busy photograph, and then white text on
   cream once the bar went solid, because the fix that kept the filled Join
   button's label white caught this one too. It needs to read as a button in
   both grounds while staying clearly behind Join in the pecking order, so it
   takes the blue from the horse in the mark rather than a second purple. */
/* A translucent chip cannot control its own background: over a bright frame
   it measured 3.15:1 and vanished. A solid white chip carries its own ground,
   so it reads the same on any photograph and on the cream bar, and the blue
   from the horse in the mark keeps it clearly second to the purple Join. */
.hdr .nav a.btn--ghost,
.hdr.is-stuck .nav a.btn--ghost{background:#fff;border-color:var(--rib);
  color:var(--rib);text-shadow:none;box-shadow:0 2px 10px -6px rgba(18,6,18,.5)}
.hdr .nav a.btn--ghost:hover,
.hdr.is-stuck .nav a.btn--ghost:hover{background:var(--rib);border-color:var(--rib);color:#fff}
.btn--outline-light,.btn--light{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}
.btn--outline-light:hover,.btn--light:hover{background:#fff;border-color:#fff;color:var(--ink)}
/* On a dark ground a deep fill sinks into the photograph, so the solid
   button there uses the lifted tint with dark text instead. */
.hero .btn:not(.btn--light):not(.btn--ghost):not(.btn--outline-light),
.cta .btn:not(.btn--light):not(.btn--ghost):not(.btn--outline-light),
.spot .btn:not(.btn--light):not(.btn--ghost):not(.btn--outline-light),
.section--dark .btn:not(.btn--light):not(.btn--ghost):not(.btn--outline-light){
  background:var(--sod);border-color:var(--sod);color:#fff}
.hero .btn:not(.btn--light):not(.btn--ghost):not(.btn--outline-light):hover,
.cta .btn:not(.btn--light):not(.btn--ghost):not(.btn--outline-light):hover,
.spot .btn:not(.btn--light):not(.btn--ghost):not(.btn--outline-light):hover,
.section--dark .btn:not(.btn--light):not(.btn--ghost):not(.btn--outline-light):hover{
  background:#9A3C94;border-color:#9A3C94;color:#fff}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6rem}
.btn-row.center,.center .btn-row{justify-content:center}

/* --------------------------------------------------------- photo band */
.photoband{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:620px){.photoband{grid-template-columns:repeat(3,1fr)}}
.photoband figure{margin:0;position:relative;overflow:hidden;background:var(--paper3)}
.photoband img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .5s}
.photoband figure:hover img{transform:scale(1.04)}
.photoband figcaption{padding:10px 2px 0;font-size:14.5px;color:var(--ink3);line-height:1.45}

/* a wide strip of the season, edge to edge */
.gstrip{display:grid;gap:3px;grid-template-columns:repeat(3,1fr);background:var(--line)}
@media (min-width:760px){.gstrip{grid-template-columns:repeat(6,1fr)}}
.gstrip img{aspect-ratio:1/1;object-fit:cover;width:100%;transition:filter .3s,transform .5s;
  filter:saturate(.94)}
.gstrip a{display:block;overflow:hidden;line-height:0}
.gstrip a:hover img{filter:saturate(1.05);transform:scale(1.05)}

/* ------------------------------------------------------------ tables */
/* Grid and flex children will not shrink below their own content unless
   told to, so on a 320px phone one long email address or a four-column
   table pushed the whole page sideways. These let them shrink; the table
   still gets its own sideways scroller, which is the intended behaviour. */
.grid > *, .stack > *{min-width:0}
.ctile{min-width:0}
.ctile span, .ctile b{overflow-wrap:anywhere}

.tablewrap{min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);background:var(--paper2)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
thead th{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);
  font-weight:700;text-align:left;padding:14px 14px 12px;white-space:nowrap;
  border-bottom:2px solid var(--line2);background:var(--paper3)}
thead th:last-child{text-align:right}
tbody td{padding:16px 14px;border-bottom:1px solid var(--line);font-size:18px;
  color:var(--ink);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody td:last-child{text-align:right;font-family:var(--bigs);font-weight:800;
  font-size:32px;line-height:1;letter-spacing:.01em}
tbody tr{transition:background var(--t-tap) var(--ease);position:relative}
tbody tr:hover{background:#FBF7EF}
tbody td{position:relative}
tbody tr:hover td::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--sod);animation:mpba-wipe 280ms var(--ease) forwards}
@keyframes mpba-wipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
tbody tr:hover td::after{transform-origin:left}
[data-standings] > div:nth-child(n+4) tbody tr:hover td::after{background:var(--rib)}
tbody tr:first-child{background:#EAF4EF}
td.rank{width:58px;font-family:var(--bigs);font-weight:800;font-size:30px;line-height:1;
  color:var(--ink3);text-align:center}
tbody tr:first-child td.rank{color:var(--sod-ink)}
[data-standings] > div:nth-child(n+4) tbody tr:first-child td.rank{color:var(--rib)}
[data-standings] > div:nth-child(n+4) tbody tr:first-child{background:#F4F0FA}
tbody td:nth-child(3){font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3);font-weight:700;width:74px}

/* --------------------------------------------------------- spotlight */
.spot{position:relative;background:var(--arena);color:var(--chalk);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spot__grid{display:grid;gap:0}
@media (min-width:900px){.spot__grid{grid-template-columns:1.05fr .95fr;align-items:stretch}}
/* Sized by ratio so it scales with the screen instead of being cropped to a
   fixed height, and stretched to the text column once they sit side by side. */
.spot__media{position:relative;aspect-ratio:16/10;min-height:0}
@media (min-width:900px){.spot__media{aspect-ratio:auto;min-height:100%}}
.spot__media img{filter:saturate(.94) contrast(1.03) brightness(.9)}
.spot__media .sl.on img{transition-duration:12000ms}   /* slower than the hero */
.spot__body{padding:48px 22px 52px}
@media (min-width:900px){.spot__body{padding:70px 46px}}
.spot__body h2,.spot__body h3{color:var(--chalk)}
.spot__body .eyebrow{color:var(--sod-lt)}
.spot__body p{color:var(--chalk)}
.spot__body strong{color:#fff}
.spot__stats{display:grid;gap:1px;background:var(--hairD);margin-top:2rem}
@media (min-width:560px){.spot__stats{grid-template-columns:1fr 1fr}}
.spot__stats > div{background:var(--arena);padding:20px}
.spot__stats b{display:block;font-family:var(--bigs);font-weight:800;font-size:36px;
  line-height:1;letter-spacing:.01em;margin-bottom:6px;color:var(--sod-lt)}
.spot__stats span{font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dust);font-weight:700}

/* ------------------------------------------------------------ tiles */
.ctile{display:flex;gap:16px;align-items:flex-start;background:var(--paper2);
  border:1px solid var(--line);padding:24px 22px 26px;
  transition:transform var(--t-tap) var(--ease),border-color var(--t-tap) var(--ease)}
.ctile:hover{border-color:var(--line2);transform:translateY(-2px)}
.ctile__ico{flex:none;width:44px;height:44px;display:grid;place-items:center;
  background:var(--gilt-tint);border:1px solid var(--gilt-hair);color:var(--gilt-ink)}
.ctile b{display:block;font-size:18px;font-weight:700;margin-bottom:3px}
.ctile span{font-size:16px;color:var(--ink2);line-height:1.6}

/* ------------------------------------------------------------ steps */
.steps{display:grid;gap:20px;counter-reset:mpba-step}
@media (min-width:620px){.steps{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}}
.step{background:var(--paper2);border:1px solid var(--line);border-top:4px solid var(--sod);
  padding:26px 24px 28px;counter-increment:mpba-step;
  transition:transform var(--t-tap) var(--ease),box-shadow var(--t-tap) var(--ease)}
.step:hover{transform:translateY(-3px);box-shadow:0 16px 30px -22px rgba(22,33,28,.55)}
.step::before{content:counter(mpba-step);display:block;
  font-family:var(--bigs);font-weight:900;font-size:34px;line-height:1;
  color:var(--sod-ink);margin-bottom:10px}
.step h3{margin-bottom:.5rem}
.step p{color:var(--ink2);font-size:16.5px;margin-bottom:0}

/* ------------------------------------------------------------- list */
.slist{list-style:none;margin:0;padding:0;display:grid;gap:0}
.slist li{padding:15px 0 15px 30px;border-bottom:1px solid var(--line);position:relative;
  color:var(--ink2);font-size:17.5px;line-height:1.6}
.slist li::before{content:"";position:absolute;left:2px;top:26px;width:14px;height:3px;
  background:var(--sod)}
.slist--wide{grid-template-columns:1fr;column-gap:36px}
@media (min-width:620px){.slist--wide{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.slist--wide{grid-template-columns:repeat(3,1fr)}}

/* ------------------------------------------------------------- forms */
.formcard{background:var(--paper2);border:1px solid var(--line);padding:28px 24px 32px}
@media (min-width:760px){.formcard{padding:40px 38px 44px}}
.form{display:grid;gap:20px}
.form label{display:block;font-size:13.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink2);font-weight:700;margin-bottom:8px}
.form input,.form select,.form textarea{
  width:100%;background:var(--paper2);color:var(--ink);border:2px solid var(--line2);
  padding:15px 15px;font-family:var(--body);font-size:18px;border-radius:0;
  transition:border-color .16s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--sod-ink)}
.form textarea{min-height:150px;resize:vertical}
.form select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink2) 50%),linear-gradient(135deg,var(--ink2) 50%,transparent 50%);
  background-position:calc(100% - 21px) 52%,calc(100% - 14px) 52%;
  background-size:7px 7px,7px 7px;background-repeat:no-repeat;padding-right:42px}
.form__row{display:grid;gap:20px}
@media (min-width:620px){.form__row{grid-template-columns:1fr 1fr}
  .form__row--csz{grid-template-columns:2fr 1fr 1fr}}
.form .btn{justify-self:start;margin-top:8px}
.formnote{border-left:4px solid var(--sod);background:var(--paper3);padding:22px 24px}
.formnote p{font-size:17px;line-height:1.68;color:var(--ink2)}
.formnote p:last-child{margin-bottom:0}
.section--dark .formnote{background:var(--arena2);border-left-color:var(--sod)}
.section--dark .formnote p{color:var(--chalk)}

/* --------------------------------------------------------- doc links */
.doclink{display:flex;align-items:center;gap:16px;background:var(--paper2);
  border:1px solid var(--line);padding:20px;color:var(--ink);text-decoration:none;
  transition:transform var(--t-tap) var(--ease),border-color var(--t-tap) var(--ease),
             background var(--t-tap) var(--ease)}
.doclink:hover{border-color:var(--sod-ink);background:#FDFBF6;color:var(--ink);
  transform:translateY(-2px)}
.doclink__ico{flex:none;font-family:var(--body);font-weight:700;font-size:13px;
  letter-spacing:.1em;color:var(--gilt-ink);background:var(--gilt-tint);
  border:1px solid var(--gilt-hair);padding:8px 10px;line-height:1}
.doclink > span:last-child{font-weight:700;font-size:17.5px}
.doclink small{margin-top:3px;font-weight:400}
/* A completed show is a record, not a download. It sits in the same row of
   cards but must not invite a click that leads nowhere. */
.doclink--static{cursor:default}
.doclink--static:hover{border-color:var(--line);background:var(--paper2);transform:none}
.doclink--static .doclink__ico{color:var(--ink2);background:var(--paper3);
  border-color:rgba(22,33,28,.18)}

/* ---------------------------------------------------------- sponsors */
.sponsor-tier{margin-top:2.8rem}
.sponsor-tier__head{display:flex;align-items:baseline;gap:14px;
  padding-bottom:12px;margin-bottom:1.4rem;border-bottom:2px solid var(--line2)}
.tiercard{background:var(--paper2);border:1px solid var(--line);
  border-top:4px solid var(--line2);padding:28px 24px 30px;display:flex;flex-direction:column}
.tiercard--top{border-top-color:var(--sod)}
.tierprice{font-family:var(--bigs);font-weight:900;font-size:46px;line-height:1;
  letter-spacing:.01em;margin:.4rem 0 .15rem;color:var(--ink)}
.tierunit{font-size:13.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink3);font-weight:700}
.tierquote{font-size:16.5px;color:var(--ink2);line-height:1.65;margin-top:1rem}

/* ----------------------------------------------------------- gallery */
.gal{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media (min-width:760px){.gal{grid-template-columns:repeat(3,1fr)}}
.gal figure{margin:0;position:relative;overflow:hidden;background:var(--paper3)}
.gal img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .5s,filter .3s}
.gal figure:hover img{transform:scale(1.04)}

/* --------------------------------------------------------------- cta */
.cta{position:relative;background:var(--arena);color:var(--chalk);padding:70px 0}
.cta__inner{max-width:58ch;margin:0 auto;text-align:center}
.cta h2{margin-bottom:1.1rem;color:var(--chalk)}
.cta p{color:var(--chalk);font-size:19px}

/* ------------------------------------------------------------ footer */
.ftr{background:var(--arena);color:var(--chalk);border-top:4px solid var(--sod);
  padding:56px 0 0;font-size:17px}
.ftr__top{display:grid;gap:36px;padding-bottom:44px}
@media (min-width:760px){.ftr__top{grid-template-columns:1.4fr 1fr 1fr;gap:46px}}
.ftr p{color:var(--dust);line-height:1.68;font-size:16.5px}
/* These are h2 for screen readers now; they must still look like the small
   column headings they always were, not like page titles. */
.ftr h2{font-family:var(--body);font-size:20px;font-weight:600;letter-spacing:-.005em;
  margin:0 0 1.1rem;color:var(--chalk);text-transform:none}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:.7rem;color:var(--dust)}
.ftr a{color:var(--chalk);text-decoration:none}
.ftr a:hover{color:var(--sod-lt);text-decoration:underline}
.brand--ftr{margin-bottom:1.2rem;display:block}
.brand--ftr img{width:140px}
.ftr__bot{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;
  padding-top:22px;padding-bottom:30px;border-top:1px solid var(--hairD);
  font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dust)}
.ftr__bot a{color:var(--dust)}

/* =====================================================================
   The reveal.
   Nothing here hides anything on its own. The hidden state exists only
   under html.js-reveal, which a script in the head adds, and only when
   IntersectionObserver is present and reduced motion is off. If that
   script does not run, or the engine that clears the state never
   reports for duty, the page is simply visible.
   ===================================================================== */
.js-reveal [data-rv]{opacity:0;transform:translateY(14px);will-change:transform,opacity}
.js-reveal [data-rv].is-in{opacity:1;transform:none;
  transition:opacity var(--t-move) var(--ease),transform var(--t-move) var(--ease);
  transition-delay:var(--d,0ms)}
/* the hero arrives once, slower and from a little further */
.js-reveal [data-enter]{opacity:0;transform:translateY(18px)}
.js-reveal [data-enter].is-in{opacity:1;transform:none;
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);
  transition-delay:var(--d,0ms)}

/* =====================================================================
   The floor. Whatever the script decides, this wins.
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-reveal [data-rv],.js-reveal [data-enter]{opacity:1!important;transform:none!important}
  [data-slides] .sl{transition:none!important}
  [data-slides] img{transform:scale(1.02)!important;transition:none!important}
  .ev:hover,.card:hover,.step:hover,.ctile:hover,.doclink:hover,.btn:hover{transform:none!important}
}

/* =====================================================================
   SECOND PASS  |  depth, grain, champagne, the leaderboard
   Everything below was added in v38. Kept together at the end so the
   original sheet stays readable and so anything here can be lifted out
   in one piece if it turns out to be a mistake.
   ===================================================================== */

/* ---------------------------------------------------------- grain */
/* One 120x120 tile of monochrome noise as a data URI, tiled and held at
   very low opacity. It stops large flat areas of cream and near-black
   from banding on cheap panels, and it is the cheapest thing on the page
   that makes a screen look like a material. Decorative and inert. */
.grain::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section--dark.grain::after{opacity:.06;mix-blend-mode:overlay}

/* the mesh behind the dark bands: two very wide, very soft plum washes */
.section--dark::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 80% at 12% 0%,rgba(128,45,123,.30) 0%,rgba(128,45,123,0) 62%),
    radial-gradient(52% 70% at 88% 100%,rgba(39,103,165,.22) 0%,rgba(39,103,165,0) 60%);
}

/* ------------------------------------------------- champagne marks */
/* The money colour earns its place by being rare. It marks added money,
   payouts and year-end awards, and nothing else. */
.gilt{color:var(--gilt-ink)}
.section--dark .gilt{color:var(--gilt)}
.giltrule{border:0;height:1px;background:linear-gradient(90deg,
  var(--gilt-hair) 0%,var(--gilt) 18%,var(--gilt) 82%,var(--gilt-hair) 100%);
  opacity:.75;margin:0}

/* A money figure set as display type. Used where the number IS the
   subject of the block, never as a row of metrics under a headline. */
.figure{font-family:var(--bigs);font-weight:900;line-height:.86;
  font-size:clamp(54px,9vw,120px);letter-spacing:.005em;
  font-variant-numeric:tabular-nums;color:var(--gilt-ink);margin:0}
.section--dark .figure{color:var(--gilt)}
.figure__note{font-size:15.5px;color:var(--ink3);margin:.7rem 0 0;max-width:46ch}
.section--dark .figure__note{color:var(--dust)}

/* ----------------------------------------------------- leaderboard */
.lb{display:flex;flex-direction:column;gap:2px;margin:0 0 1.2rem}
.lb__row{
  display:grid;grid-template-columns:44px 1fr auto;align-items:center;
  gap:0 14px;padding:11px 14px;position:relative;background:var(--paper2);
  border:1px solid var(--hair);min-width:0;
}
.lb__row + .lb__row{margin-top:-1px}
.lb__row--me{border-color:var(--sod);box-shadow:inset 0 0 0 1px var(--sod);z-index:1}
.lb__medal{
  width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  font-family:var(--bigs);font-weight:800;font-size:17px;line-height:1;
  background:var(--paper3);color:var(--ink2);border:1px solid var(--hair);
  font-variant-numeric:tabular-nums;
}
.lb__row:nth-child(1) .lb__medal{background:var(--gilt-tint);color:var(--gilt-ink);border-color:var(--gilt)}
.lb__row:nth-child(2) .lb__medal{background:#EDEAF0;color:var(--ink2);border-color:#C9C2CE}
/* The bronze medallion measured 4.43:1, just under AA, because --rust-ink
   was picked to work on plain cream and this tint is warmer and darker.
   A deeper brown on the same tint reads as bronze either way. */
.lb__row:nth-child(3) .lb__medal{background:#F2E4DA;color:#8A3D28;border-color:#D8B9A6}
.lb__name{font-weight:600;min-width:0;overflow-wrap:anywhere}
.lb__state{color:var(--ink3);font-size:14px;font-weight:400;margin-left:.45rem}
.lb__pts{font-family:var(--bigs);font-weight:800;font-size:25px;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
/* The bar is drawn under the row, not beside it, so nothing reflows. It sits
   on a faint full-width track: without one it just looked like a rule between
   two rows, and a bar you cannot see the end of says nothing about
   proportion. */
.lb__row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--sunk,var(--paper3));opacity:.85}
.lb__bar{position:absolute;left:0;bottom:0;height:4px;background:var(--sod);
  width:0;z-index:1;transition:width 900ms var(--ease)}
.lb--1d .lb__bar{background:var(--sod)}
.lb--2d .lb__bar{background:var(--rib)}
.lb--3d .lb__bar{background:var(--rust)}
.lb__gap{font-size:13.5px;color:var(--ink3);grid-column:2 / -1;margin-top:2px}
@media (prefers-reduced-motion:reduce){.lb__bar{transition:none}}

/* --------------------------------------------------- sponsor ribbon */
.ribbon{overflow:hidden;position:relative;padding:18px 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ribbon__track{display:flex;gap:2.6rem;width:max-content;
  animation:ribbon 64s linear infinite}
.ribbon:hover .ribbon__track,.ribbon:focus-within .ribbon__track{animation-play-state:paused}
.ribbon span{white-space:nowrap;font-size:15.5px;font-weight:600;color:var(--ink2)}
.ribbon span::after{content:"";display:inline-block;width:5px;height:5px;
  border-radius:50%;background:var(--gilt);margin-left:2.6rem;vertical-align:.25em}
@keyframes ribbon{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .ribbon__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}

/* ------------------------------------------------ standings explorer */
.explorer{max-width:760px;margin:2rem auto 0}
.explorer__bar{display:flex;gap:.6rem;align-items:stretch}
.explorer__bar input{
  flex:1;min-width:0;font:inherit;font-size:17px;padding:14px 16px;
  background:rgba(255,255,255,.07);color:var(--chalk);
  border:1px solid rgba(244,240,244,.28);border-radius:2px;
}
.explorer__bar input::placeholder{color:rgba(244,240,244,.55)}
.explorer__bar input:focus{outline:3px solid var(--sod-lt);outline-offset:2px;
  background:rgba(255,255,255,.12)}
.explorer__bar .btn{flex:none}
.explorer__stamp{min-height:1.2em;margin:.55rem 0 0;font-size:13px;color:var(--dust)}
.explorer__out{margin-top:1.2rem;min-height:84px}
.explorer__out .help{color:var(--dust)}
.explorer__out[aria-busy=true]{opacity:.55}

.xr{background:rgba(255,255,255,.05);border:1px solid var(--hairD);
  padding:18px 20px 14px;margin-bottom:.9rem}
.xr__name{font-size:21px;font-weight:700;color:var(--chalk);margin:0 0 .7rem}
.xr__state{font-size:14px;font-weight:400;color:var(--dust);margin-left:.4rem}
.xr__row{display:grid;grid-template-columns:auto auto 1fr;gap:.25rem .9rem;
  align-items:baseline;padding:.55rem 0;border-top:1px solid var(--hairD)}
.xr__div{font-size:14.5px;color:var(--dust);letter-spacing:.04em;
  text-transform:uppercase;font-weight:600;white-space:nowrap}
.xr__rank{font-family:var(--bigs);font-weight:800;font-size:18px;color:var(--sod-lt);
  font-variant-numeric:tabular-nums}
.xr__pts{font-family:var(--bigs);font-weight:800;font-size:26px;color:var(--chalk);
  font-variant-numeric:tabular-nums;justify-self:end}
.xr__pts small{font-family:var(--body);font-weight:500;font-size:12px;
  color:var(--dust);margin-left:.3rem}
.xr__track{grid-column:1 / -1;height:4px;background:rgba(244,240,244,.14);overflow:hidden}
.xr__track i{display:block;height:100%;background:var(--sod-lt);
  transition:width 800ms var(--ease)}
.xr--2d .xr__track i,.lb--2d .xr__track i{background:var(--rib-lt)}
.xr--3d .xr__track i,.lb--3d .xr__track i{background:var(--rust)}
.xr__gap{grid-column:1 / -1;font-size:13px;color:var(--dust)}
@media (prefers-reduced-motion:reduce){.xr__track i{transition:none}}
@media (max-width:520px){
  .explorer__bar{flex-wrap:wrap}
  .explorer__bar .btn{width:100%}
  .xr__row{grid-template-columns:1fr auto}
}

/* ------------------------------------------------ points calculator */
.calc{display:grid;grid-template-columns:1fr auto;gap:1.4rem 2.4rem;
  align-items:center;background:var(--paper2);border:1px solid var(--hair);
  box-shadow:var(--lift-1);padding:26px 28px;max-width:820px}
.calc__inputs{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.calc .field{display:flex;flex-direction:column;gap:.3rem}
.calc .field label{font-size:14px;font-weight:600;color:var(--ink2)}
.calc .field input[type=number]{font:inherit;font-size:19px;padding:10px 12px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  border-radius:2px;width:100%;max-width:190px;font-variant-numeric:tabular-nums}
.calc .field--check{flex-direction:row;align-items:center;gap:.55rem}
.calc .field--check input{width:20px;height:20px;accent-color:var(--sod)}
.calc .field--check label{font-weight:500}
.calc__out{text-align:center;padding-left:2rem;border-left:1px solid var(--hair);
  min-width:170px}
.calc__num{font-family:var(--bigs);font-weight:900;font-size:clamp(56px,10vw,88px);
  line-height:.9;margin:0;color:var(--sod);font-variant-numeric:tabular-nums}
.calc__lab{margin:.2rem 0 0;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink3);font-weight:700}
.calc__work{grid-column:1 / -1;margin:0;font-size:15px;color:var(--ink2);
  border-top:1px solid var(--hair);padding-top:1rem}
@media (max-width:640px){
  .calc{grid-template-columns:1fr}
  .calc__out{padding-left:0;border-left:0;border-top:1px solid var(--hair);
    padding-top:1.1rem;text-align:left}
}

/* --------------------------------------------------- results panels */
.rshow{border:1px solid var(--hair);background:var(--paper2);
  box-shadow:var(--lift-1);margin-bottom:.6rem}
.rshow > summary{display:grid;grid-template-columns:auto 1fr auto;gap:0 16px;
  align-items:center;padding:16px 18px;cursor:pointer;list-style:none}
.rshow > summary::-webkit-details-marker{display:none}
.rshow > summary:focus-visible{outline:3px solid var(--sod-ink);outline-offset:-3px}
.rshow__date{font-family:var(--bigs);font-weight:800;font-size:16px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--sod-ink);
  white-space:nowrap;min-width:92px}
.rshow__name{font-weight:700;font-size:17.5px;min-width:0;overflow-wrap:anywhere}
.rshow__name small{display:block;font-weight:400;font-size:14.5px;color:var(--ink3);
  margin-top:2px}
.rshow__more{width:11px;height:11px;border-right:2px solid var(--ink3);
  border-bottom:2px solid var(--ink3);transform:rotate(45deg);
  transition:transform var(--t-tap) var(--ease);flex:none;margin-right:4px}
.rshow[open] .rshow__more{transform:rotate(225deg)}
.rshow__body{padding:0 18px 18px;border-top:1px solid var(--hair)}
.rshow__body .help{margin-top:1rem}
.rshow__body table{margin-top:.8rem}
@media (prefers-reduced-motion:reduce){.rshow__more{transition:none}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------- gallery viewer */
.lbx{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;
  width:100%;height:100%;overflow:hidden}
.lbx::backdrop{background:rgba(12,5,12,.92)}
.lbx[open]{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  justify-items:center;gap:0 12px;padding:24px}
.lbx__img{max-width:100%;max-height:86vh;width:auto;object-fit:contain;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.lbx__close{position:absolute;top:14px;right:18px;z-index:2;
  background:rgba(255,255,255,.12);color:var(--chalk);border:1px solid rgba(244,240,244,.3);
  font-size:26px;line-height:1;width:44px;height:44px;cursor:pointer;border-radius:2px}
.lbx__nav{width:52px;height:52px;flex:none;cursor:pointer;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(244,240,244,.28);position:relative}
.lbx__nav::before{content:"";position:absolute;inset:0;margin:auto;width:12px;height:12px;
  border-top:2px solid var(--chalk);border-right:2px solid var(--chalk)}
.lbx__nav--prev::before{transform:translateX(3px) rotate(-135deg)}
.lbx__nav--next::before{transform:translateX(-3px) rotate(45deg)}
.lbx__close:hover,.lbx__nav:hover{background:rgba(255,255,255,.22)}
.lbx__close:focus-visible,.lbx__nav:focus-visible{outline:3px solid var(--sod-lt);outline-offset:2px}
.lbx__count{position:absolute;bottom:18px;left:0;right:0;text-align:center;
  color:var(--dust);font-size:14px;margin:0;letter-spacing:.06em}
@media (max-width:640px){
  .lbx[open]{grid-template-columns:1fr;padding:12px}
  .lbx__nav{position:absolute;bottom:52px;width:46px;height:46px}
  .lbx__nav--prev{left:16px} .lbx__nav--next{right:16px}
  .lbx__img{max-height:74vh}
}

/* --------------------------------------------------------- tour map */
.tmap{display:grid;grid-template-columns:1.55fr 1fr;gap:1.6rem;align-items:start;
  background:var(--paper2);border:1px solid var(--hair);box-shadow:var(--lift-1);
  padding:20px;margin-bottom:2.4rem}
.tmap__svg{width:100%;height:auto;max-width:100%;display:block;overflow:hidden}
.tmap__state{fill:var(--paper3);stroke:var(--line);stroke-width:1.1;stroke-linejoin:round}
.tmap__stop{cursor:pointer}
.tmap__stop:focus{outline:none}
.tmap__halo{fill:var(--sod);opacity:0;transition:opacity var(--t-tap) var(--ease)}
.tmap__dot{fill:var(--sod);stroke:var(--paper2);stroke-width:2;
  transition:fill var(--t-tap) var(--ease)}
.tmap__stop:hover .tmap__halo,
.tmap__stop:focus-visible .tmap__halo,
.tmap__stop.is-on .tmap__halo{opacity:.22}
.tmap__stop.is-on .tmap__dot{fill:var(--gilt-ink)}
.tmap__stop:focus-visible .tmap__dot{stroke:var(--sod-ink);stroke-width:3}
.tmap__panel{min-height:150px;border-left:1px solid var(--hair);padding-left:1.4rem}
.tmap__panel h3{font-size:19px;margin:0 0 .6rem}
.tmap__list{list-style:none;margin:0;padding:0}
.tmap__list li{padding:.5rem 0;border-top:1px solid var(--hair);font-size:15.5px}
.tmap__list b{display:block;font-weight:600}
.tmap__list span{color:var(--ink3);font-size:14px}
@media (max-width:820px){
  .tmap{grid-template-columns:1fr;gap:1rem}
  .tmap__panel{border-left:0;border-top:1px solid var(--hair);padding-left:0;padding-top:1rem;
    min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .tmap__halo,.tmap__dot{transition:none}
}

/* --------------------------------------------------------- countdown */
.countdown{margin-top:2.4rem}
.countdown__lab{font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dust);margin:0 0 .8rem;font-weight:700}
.countdown__row{display:flex;justify-content:center;gap:1.6rem;flex-wrap:wrap}
.countdown__row span{display:flex;flex-direction:column;align-items:center;min-width:64px}
.countdown__row b{font-family:var(--bigs);font-weight:800;font-size:clamp(34px,5vw,50px);
  line-height:1;color:var(--chalk);font-variant-numeric:tabular-nums}
.countdown__row i{font-style:normal;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dust);margin-top:.35rem;font-weight:600}

/* ------------------------------------------------------ division tabs */
.divtabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.6rem;
  border-bottom:1px solid var(--line);padding-bottom:.9rem}
.divtabs__tab{
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  padding:.5rem .95rem;border:1px solid var(--hair);border-radius:2px;
  background:var(--paper2);color:var(--ink2);
  transition:background var(--t-tap) var(--ease),color var(--t-tap) var(--ease),
             border-color var(--t-tap) var(--ease);
}
.divtabs__tab:hover{border-color:var(--line2);color:var(--ink)}
.divtabs__tab.is-on{background:var(--sod);border-color:var(--sod);color:#fff}
.divtabs__tab:focus-visible{outline:3px solid var(--sod-ink);outline-offset:2px}
@media (max-width:520px){
  .divtabs{gap:.35rem}
  .divtabs__tab{font-size:14px;padding:.45rem .7rem;flex:1 1 auto;text-align:center}
}
@media (prefers-reduced-motion:reduce){.divtabs__tab{transition:none}}

/* --------------------------------------------------------- month bar */
.monthbar{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;
  margin:0 0 2rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.monthbar__chip{
  font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  padding:.42rem .85rem;border:1px solid var(--hair);border-radius:2px;
  background:var(--paper2);color:var(--ink2);
  transition:background var(--t-tap) var(--ease),color var(--t-tap) var(--ease),
             border-color var(--t-tap) var(--ease);
}
.monthbar__chip:hover{border-color:var(--line2);color:var(--ink)}
.monthbar__chip.is-on{background:var(--rib);border-color:var(--rib);color:#fff}
.monthbar__chip:focus-visible{outline:3px solid var(--sod-ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.monthbar__chip{transition:none}}

/* ---------------------------------------------------- back to top */
.totop{
  position:fixed;right:18px;bottom:18px;z-index:55;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:var(--sod);border:1px solid var(--sod-ink);
  box-shadow:var(--lift-2);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--t-tap) var(--ease),transform var(--t-tap) var(--ease),
             visibility var(--t-tap);
}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop span{position:absolute;inset:0;margin:auto;width:12px;height:12px;
  border-top:2.5px solid #fff;border-left:2.5px solid #fff;
  transform:translateY(3px) rotate(45deg)}
.totop:hover{background:var(--sod-ink)}
.totop:focus-visible{outline:3px solid var(--sod-ink);outline-offset:3px;
  opacity:1;visibility:visible;transform:none}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}
@media print{.totop{display:none}}

/* ==================================================================
   COMPRESSION PASS
   The standings page ran to fourteen screens on a phone before the
   division tabs; these are the rest. Nothing is removed, only tightened:
   the same content in less height, so scanning a page takes a scroll or
   two rather than ten.
   ================================================================== */

@media (max-width:699px){
  /* An event card stacked its logo, date, title, venue, tags and button in
     six full-width rows, 508 to 590px each, ten of them on the shows page.
     The logo and the date sit side by side now and the logo is a third of
     the height, which halves the card without dropping anything from it. */
  .ev{grid-template-columns:104px 1fr;grid-template-areas:"img body" "cta cta";
    align-items:start;gap:0 14px;padding:14px;margin-bottom:12px}
  .ev__img{grid-area:img;min-height:0;border-bottom:0;padding:0;align-self:start}
  .ev__img img{max-height:70px}
  .ev__date{grid-area:img;align-self:end;padding-top:8px;text-align:center}
  .ev__body{grid-area:body;padding:0}
  .ev__body h3{font-size:18px;line-height:1.28}
  .ev__meta{font-size:14.5px;margin:.25rem 0 .4rem}
  .ev__tags{gap:.3rem}
  .ev__cta{grid-area:cta;padding:12px 0 0;margin-top:10px;
    border-top:1px solid var(--hair)}
  .ev__cta .btn{width:100%;text-align:center}

  /* 64px of air above and below every section is generous on a desktop and
     simply a lot of scrolling on a phone. */
  .section{padding-block:42px}
  .section--tight{padding-block:30px}
  .phead__inner{padding-top:88px;padding-bottom:38px}
  .shead{margin-bottom:1.1rem}
  .card{padding:20px 18px 22px}
  .gstrip{display:none}          /* six thumbnails to the gallery, twice over */
}

/* The same six-photo strip appears above the footer on every page. One row
   of three is plenty on a small tablet. */
@media (min-width:700px) and (max-width:900px){
  .gstrip{grid-template-columns:repeat(3,1fr)}
}

/* ------------------------------------------------------- skip link */
/* Eight links sit in the header of every page. Without this, somebody
   navigating by keyboard tabs through all eight before reaching the page
   itself, on every page, every time. Off-screen until focused. */
.skiplink{
  position:absolute;left:12px;top:-64px;z-index:100;
  background:var(--sod);color:#fff;text-decoration:none;font-weight:600;
  padding:.7rem 1.1rem;border-radius:0 0 3px 3px;
  transition:top var(--t-tap) var(--ease);
}
.skiplink:focus{top:0;color:#fff;outline:3px solid var(--chalk);outline-offset:-3px}
#main:focus{outline:none}
@media (prefers-reduced-motion:reduce){.skiplink{transition:none}}

/* ===================================================================
   THE NOTICE
   One strip, below the hero so it is clear of the fixed header, in the
   association's own colours rather than a browser-yellow warning bar.
   It is not an alert: most of what goes here is good news about a date.
   =================================================================== */
.notice{background:var(--plum,#5B2340);color:#FBF7F0}
.notice__in{display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap;
  padding-top:1rem;padding-bottom:1rem}
.notice__tag{flex:none;font-family:var(--font-ui,inherit);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.notice__txt{margin:0;flex:1 1 20ch;min-width:0;line-height:1.5}
.notice a{color:#FBF7F0;text-decoration:underline;text-underline-offset:3px}
.notice a:hover{text-decoration-thickness:2px}
@media (max-width:699px){
  .notice__in{gap:.35rem;padding-top:.9rem;padding-bottom:.9rem}
  .notice__txt{flex-basis:100%}
}

/* ===================================================================
   SPONSOR SHOW PICKER
   Ten shows, ticked rather than typed, so a sponsor who wants one show
   says so unambiguously and the office can count sponsors per show
   later. Two columns where there is room, one on a phone.
   =================================================================== */
.showpick{border:0;margin:0;padding:0;min-width:0}
.showpick legend{padding:0;font-family:var(--font-ui,inherit);font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3,inherit);
  font-weight:600;margin-bottom:.35rem}
.showpick .help{margin:0 0 .7rem}
/* One column. The two-column version keyed off viewport width, but this sits
   inside a narrow form card at every viewport, so names like "Prospector
   Challenge Finals & Black Hills Classic Pole Bending" wrapped to six lines
   in a 230px track. One column keeps every show on one or two lines. */
.showpick__grid{display:grid;gap:.1rem;grid-template-columns:1fr}
/* .form label sets uppercase and letter-spacing for field labels, and it wins
   on specificity, so a show name rendered as a label came out shouting. These
   are sentences, not field labels. */
/* 44px is the smallest comfortable touch target; a one-line row is 38 without
   it, which is a miss on a phone at an arena with gloves on. */
.form .showpick__item,
.showpick .showpick__item{display:flex;gap:.6rem;
  padding:.5rem .55rem;border-radius:5px;cursor:pointer;line-height:1.35;
  margin:0;font-size:1rem;font-weight:400;text-transform:none;letter-spacing:0;
  color:inherit;min-height:44px;align-items:center}
.showpick__item span{text-transform:none;letter-spacing:0;font-weight:400}
.showpick__item:hover{background:rgba(0,0,0,.035)}
.showpick__item input{flex:none;margin:0;width:1.05rem;height:1.05rem;
  accent-color:var(--plum,#5B2340);cursor:pointer}
.showpick__item:focus-within{outline:2px solid var(--plum,#5B2340);outline-offset:1px}
.showpick__when{display:inline;margin-left:.45rem;font-size:.85em;opacity:.7;text-transform:none;letter-spacing:0}
.form .showpick legend,.showpick legend{font-size:13.5px}
.showpick__other{margin-top:.9rem}
@media (prefers-color-scheme:dark){
  .showpick__item:hover{background:rgba(255,255,255,.06)}
}

/* =====================================================================
   PHOTOGRAPHY, SECOND PASS
   The pictures all come from one photographer but across a whole season:
   an outdoor February morning sits next to a lit arena in October. At full
   strength, dropped into a grid, they read as a scrapbook — six unrelated
   snapshots pasted down. Three things fix that, and they are all here.
   One grade, so the set shares a colour. A soft edge, so no picture is a
   cut-out rectangle lying on flat cream. And a fade wherever a photograph
   meets a band of something else.
   ===================================================================== */

:root{
  /* One grade for every photograph on the site. Saturation comes down so a
     winter sky and an arena's sodium light stop fighting each other; the
     small sepia pulls both onto the warm axis the paper already sits on.
     This is not a sepia tone, it is a common denominator. */
  --grade:saturate(.9) contrast(1.05) sepia(.07);
  --grade-dark:saturate(.88) contrast(1.06) sepia(.07) brightness(.92);

  --r-img:12px;

  /* A photograph gets its own shadow. The card shadow is too tight and too
     near for something this size; this one is wider and weaker, so the
     picture sits on the page instead of hovering above it. */
  --lift-img:0 1px 2px rgba(25,19,32,.05), 0 18px 34px -22px rgba(25,19,32,.34);
  --lift-img-2:0 2px 6px rgba(25,19,32,.07), 0 28px 50px -24px rgba(25,19,32,.42);

  --t-img:640ms;   /* a picture moves slower than a button */
}

/* ------------------------------------------------ one grade, everywhere */
.hero__media img,.hero__vid,.phead__media img{filter:var(--grade-dark)}
.gal img,.photoband img,.gstrip img{filter:var(--grade)}

/* --------------------------------------------- the picture is the box */
/* The radius and the shadow belong to <picture>, not <figure>, so that a
   caption underneath stays outside the frame and the zoom still clips. */
.gal picture,.photoband picture{
  display:block;overflow:hidden;border-radius:var(--r-img);
  background:var(--paper3);box-shadow:var(--lift-img);
  transition:box-shadow var(--t-move) var(--ease),transform var(--t-move) var(--ease);
}
.gal figure,.photoband figure{overflow:visible;background:none}
.gal img,.photoband img{
  transition:transform var(--t-img) var(--ease),filter var(--t-img) var(--ease);
}
.gal figure:hover picture,.photoband figure:hover picture{
  box-shadow:var(--lift-img-2);transform:translateY(-3px);
}
.gal figure:hover img,.photoband figure:hover img{transform:scale(1.045)}
.gal{gap:20px}
@media (min-width:760px){.gal{gap:24px}}
.photoband{gap:20px}
.photoband figcaption{padding-top:14px}

/* ---------------------------------------------------- the season strip */
/* It was a contact sheet: six squares with grey gutters showing between
   them, cut hard against the cream above and the dark band below. Gutters
   gone, and the strip now emerges from the page and dissolves into the
   call to action instead of being pasted between them. */
.gstrip{gap:0;background:transparent;position:relative;isolation:isolate}
.gstrip img{transition:transform var(--t-img) var(--ease),filter var(--t-img) var(--ease)}
.gstrip a:hover img{transform:scale(1.06);filter:var(--grade) brightness(1.07)}
.gstrip::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,var(--paper) 0%,rgba(248,245,238,0) 15%),
    linear-gradient(0deg,var(--arena) 0%,rgba(26,9,25,0) 24%);
}

/* ------------------------------------------------- the seams themselves */
/* Two cream sections used to meet on a one-pixel line. A line is a seam.
   This is the same change of colour made over 40px instead. */
.section--alt{border-top:0;border-bottom:0;position:relative;isolation:isolate}
.section--alt::before,.section--alt::after{
  content:"";position:absolute;left:0;right:0;height:40px;z-index:-1;pointer-events:none}
.section--alt::before{top:0;background:linear-gradient(180deg,var(--paper),rgba(239,234,224,0))}
.section--alt::after{bottom:0;background:linear-gradient(0deg,var(--paper),rgba(239,234,224,0))}

/* On a dark band that grey hairline reads as grime. Taken off, and the top
   of the band lifted a little so it arrives with some depth rather than as
   a flat wall dropped on the page.

   The lift rides on the mesh gradient, not on a pseudo-element of its own:
   both ::before and ::after are already spoken for on a dark band (the mesh
   and the grain), and taking one of them would quietly delete a texture. */
.section--dark{border-top:0;border-bottom:0}
.section--dark::before{
  background:
    linear-gradient(180deg,rgba(60,26,66,.55) 0%,rgba(38,16,42,0) 130px),
    radial-gradient(60% 80% at 12% 0%,rgba(128,45,123,.30) 0%,rgba(128,45,123,0) 62%),
    radial-gradient(52% 70% at 88% 100%,rgba(39,103,165,.22) 0%,rgba(39,103,165,0) 60%);
}
/* The call to action has no mesh of its own, so it gets the same lift
   directly. It is the band the season strip dissolves into. */
.cta{isolation:isolate}
.cta::before{
  content:"";position:absolute;left:0;right:0;top:0;height:130px;z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(60,26,66,.55),rgba(38,16,42,0))}

/* ------------------------------------------- where the photograph ends */
/* Tried and rejected: a cream fade across the bottom of the hero and the
   page headers. Over a scrimmed photograph a 40px ramp to cream does not
   read as a soft join, it reads as a milky bar laid across the picture.
   A full-bleed photograph meeting the page squarely is a deliberate edge,
   not a hard one, so the scrim carries it down to near-black and the page
   starts. What is left instead is the last of the photograph, deepened a
   little so the meeting is between two settled colours rather than between
   a bright arena floor and cream. */
.hero__media::after,.phead__media::after{
  background-image:
    linear-gradient(180deg,rgba(18,6,18,0) 72%,rgba(18,6,18,.55) 100%),
    var(--scrim);
}
.hero__media{--scrim:
  linear-gradient(100deg,rgba(16,5,16,.92) 0%,rgba(16,5,16,.78) 26%,rgba(16,5,16,.42) 48%,rgba(16,5,16,.06) 72%),
  linear-gradient(180deg,rgba(16,5,16,.72) 0%,rgba(16,5,16,.30) 22%,rgba(16,5,16,.34) 60%,rgba(16,5,16,.90) 100%)}
.phead__media{--scrim:
  linear-gradient(180deg,rgba(18,6,18,.76) 0%,rgba(18,6,18,.30) 38%,rgba(18,6,18,.90) 100%)}

@media (prefers-reduced-motion:reduce){
  .gal picture,.photoband picture,.gal img,.photoband img,.gstrip img{transition:none}
  .gal figure:hover picture,.photoband figure:hover picture{transform:none}
  .gal figure:hover img,.photoband figure:hover img,.gstrip a:hover img{transform:none}
}

/* ===================================================================
   EVERY RUN BEHIND A TOTAL
   A rider asked where the old per-event points list had gone. The
   explorer rows are buttons now, and open to show the runs the total is
   made of. Styled to sit inside the dark band the explorer lives in.
   =================================================================== */
.xr__row--open{
  width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--hairD);
  font:inherit;color:inherit;cursor:pointer;
  transition:background var(--t-tap) var(--ease);
  border-radius:6px;
}
.xr__row--open:hover{background:rgba(244,240,244,.06)}
.xr__row--open:focus-visible{outline:2px solid var(--sod-lt);outline-offset:2px}
.xr__more{
  grid-column:1/-1;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dust);margin-top:.2rem;
}
.xr__row--open[aria-expanded="true"] .xr__more::after{content:" \25B4"}
.xr__row--open[aria-expanded="false"] .xr__more::after{content:" \25BE"}
.xr__runs{padding:.2rem 0 1rem}
.xr__runs .help{color:var(--dust)}
/* The page's ordinary tables are built for cream: a light header, a tinted
   first row, a cream hover and a 32px last column. All of that lands on top
   of a dark band as dark-on-dark. Every one of those rules is turned off
   here by name rather than hoped away, and the selectors carry .xr__runs so
   they beat the .section--dark overrides further up the file. */
.xr__runs table.runs{width:100%;border-collapse:collapse;font-size:15.5px;
  background:transparent}
.xr__runs table.runs th,
.section--dark .xr__runs table.runs th{
  text-align:left;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dust);font-weight:700;padding:.45rem .6rem;white-space:nowrap;
  border-bottom:1px solid var(--hairD);background:transparent}
.xr__runs table.runs th:last-child{text-align:right}
.xr__runs table.runs td,
.section--dark .xr__runs table.runs td,
.section--dark .xr__runs table.runs tbody td{
  padding:.5rem .6rem;border-bottom:1px solid var(--hairD);vertical-align:middle;
  font-size:15.5px;color:var(--chalk);background:transparent}
/* the two that were painting a light ground behind dark text */
.xr__runs table.runs tbody tr,
.xr__runs table.runs tbody tr:first-child{background:transparent}
.xr__runs table.runs tbody tr:hover{background:rgba(244,240,244,.06)}
.xr__runs table.runs tbody tr:hover td::after{display:none;content:none;animation:none}
/* the last column is a points figure, not a headline */
.xr__runs table.runs tbody td:last-child,
.section--dark .xr__runs table.runs tbody td:last-child{
  font-family:var(--body);font-weight:400;font-size:15.5px;line-height:inherit;
  letter-spacing:0;text-align:right}
.xr__runs table.runs td:nth-child(3),.xr__runs table.runs td:nth-child(4),
.xr__runs table.runs td:nth-child(5),.xr__runs table.runs th:nth-child(3),
.xr__runs table.runs th:nth-child(4),.xr__runs table.runs th:nth-child(5){
  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.xr__runs table.runs tbody td:last-child b{font-weight:700;color:#fff}
.xr__runs table.runs tfoot td,
.section--dark .xr__runs table.runs tfoot td{
  border-top:2px solid var(--hairD);border-bottom:0;padding-top:.6rem;
  font-size:14px;color:var(--dust);background:transparent;
  font-family:var(--body);font-weight:400;letter-spacing:0}
.xr__runs table.runs tfoot td b{color:var(--chalk);font-size:17px;font-weight:700}
.xr__runs .tag--gold{
  background:var(--gilt-tint);color:var(--gilt-ink);border-color:var(--gilt-hair);
  font-size:11px;padding:.05em .4em}
/* A five column table does not fit a phone, so the two columns that are
   only context get folded away rather than squeezed. */
@media (max-width:560px){
  table.runs th:nth-child(4),table.runs td:nth-child(4){display:none}
  table.runs{font-size:14.5px}
  table.runs th,table.runs td{padding:.45rem .35rem}
}

/* ===================================================================
   THE POINTS SEARCH, MADE READABLE
   Everything in this block sits on the dark band, where small grey type
   is the first thing to go. The sizes here are all a step up from where
   they were, the greys are lifted off --dust, and nothing is allowed to
   run up against the edge of its own card: the run table gets its own
   inset so the date on the left and the points on the right both have
   room to breathe.
   =================================================================== */

/* the search box itself */
.explorer{max-width:820px}
.explorer__bar input{font-size:18px;padding:15px 18px;border-radius:8px}
.explorer__stamp{font-size:14px;color:rgba(244,240,244,.72);margin-top:.7rem}
.explorer__out{margin-top:1.4rem}
.explorer__out .help{font-size:16.5px;line-height:1.6;color:rgba(244,240,244,.78);
  max-width:56ch}

/* the rider card */
.xr{padding:24px 26px 20px;border-radius:12px;margin-bottom:1.1rem}
.xr__name{font-size:23px;margin-bottom:.9rem;letter-spacing:.005em}
.xr__state{font-size:15px;color:rgba(244,240,244,.72)}

/* the division row */
.xr__row,.xr__row--open{padding:.8rem .2rem;gap:.35rem 1rem}
.xr__div{font-size:15.5px;color:rgba(244,240,244,.78);letter-spacing:.06em}
.xr__rank{font-size:19px}
.xr__pts{font-size:28px}
.xr__pts small{font-size:13px;color:rgba(244,240,244,.72)}
.xr__gap{font-size:14.5px;color:rgba(244,240,244,.76);margin-top:.15rem}
.xr__more{font-size:13.5px;color:rgba(244,240,244,.72);margin-top:.45rem;
  letter-spacing:.09em}

/* the run table, inset from the card so nothing touches an edge */
.xr__runs{
  margin:.2rem .2rem 1rem;padding:.3rem 1.1rem 1rem;
  background:rgba(0,0,0,.18);border:1px solid var(--hairD);border-radius:10px;
}
.xr__runs .help{font-size:15.5px;padding:.7rem 0}
.xr__runs table.runs th,
.section--dark .xr__runs table.runs th{
  font-size:13px;letter-spacing:.11em;padding:.85rem .7rem .6rem;
  color:rgba(244,240,244,.72)}
.xr__runs table.runs td,
.section--dark .xr__runs table.runs td,
.section--dark .xr__runs table.runs tbody td{
  font-size:16.5px;line-height:1.5;padding:.7rem .7rem}
.xr__runs table.runs tbody td:last-child,
.section--dark .xr__runs table.runs tbody td:last-child{font-size:17px;font-weight:600}
/* the outer columns get the extra room, so the date is not against the
   left border and the points are not against the right one */
.xr__runs table.runs th:first-child,.xr__runs table.runs td:first-child{padding-left:.35rem}
.xr__runs table.runs th:last-child,.xr__runs table.runs td:last-child{padding-right:.35rem}
.xr__runs table.runs tfoot td,
.section--dark .xr__runs table.runs tfoot td{font-size:15px;padding-top:.85rem}
.xr__runs table.runs tfoot td b{font-size:18px}
.xr__runs .tag--gold{font-size:11.5px;padding:.12em .5em;letter-spacing:.06em}

@media (max-width:560px){
  .xr{padding:20px 18px 16px}
  .xr__runs{margin-inline:0;padding:.3rem .9rem .9rem}

  /* Five columns in 390px means a date broken across two lines and a show
     name broken across four. So below this width it stops being a table:
     each run becomes its own small card, the date and the show sit on the
     first line, and the three numbers sit on the second with their own
     labels. Nothing wraps that should not. */
  .xr__runs table.runs,
  .xr__runs table.runs tbody,
  .xr__runs table.runs tr,
  .xr__runs table.runs td{display:block;width:auto}
  .xr__runs table.runs thead{position:absolute;width:1px;height:1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .xr__runs table.runs tbody tr,
  .section--dark .xr__runs table.runs tbody tr{
    padding:.85rem 0;border-bottom:1px solid var(--hairD)}
  .xr__runs table.runs tbody tr:last-child{border-bottom:0}

  /* line one: when it happened and where */
  .xr__runs table.runs td[data-l="Date"],
  .section--dark .xr__runs table.runs td[data-l="Date"]{
    padding:0;border:0;font-size:14px;letter-spacing:.04em;
    color:rgba(244,240,244,.72);white-space:nowrap}
  .xr__runs table.runs td[data-l="Show"],
  .section--dark .xr__runs table.runs td[data-l="Show"]{
    padding:.15rem 0 .5rem;border:0;font-size:17px;line-height:1.35;
    color:var(--chalk);text-align:left}

  /* line two: the three numbers, each saying what it is */
  .xr__runs table.runs td[data-l="Place"],
  .xr__runs table.runs td[data-l="In class"],
  .xr__runs table.runs td[data-l="Points"],
  .section--dark .xr__runs table.runs td[data-l="Place"],
  .section--dark .xr__runs table.runs td[data-l="In class"],
  .section--dark .xr__runs table.runs td[data-l="Points"]{
    display:inline-block;padding:0;border:0;text-align:left;
    font-size:16px;margin-right:1.4rem}
  /* Floated right, the points dropped onto a line of their own and read as
     if they belonged to the next run. All three simply sit in a row. */
  .xr__runs table.runs td[data-l="Points"],
  .section--dark .xr__runs table.runs td[data-l="Points"]{margin-right:0}
  .xr__runs table.runs tbody td[data-l]::before{
    content:attr(data-l) " ";
    font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
    color:rgba(244,240,244,.62);margin-right:.35rem}
  .xr__runs table.runs tbody td[data-l="Date"]::before,
  .xr__runs table.runs tbody td[data-l="Show"]::before{content:none}
  .xr__runs table.runs tbody td[data-l="Points"] b{font-size:19px;font-weight:700}

  /* the total line */
  .xr__runs table.runs tfoot,
  .xr__runs table.runs tfoot tr,
  .xr__runs table.runs tfoot td{display:block}
  .section--dark .xr__runs table.runs tfoot td{
    border:0;padding:.3rem 0 0;font-size:14.5px}
  .xr__runs table.runs tfoot tr{
    border-top:2px solid var(--hairD);margin-top:.6rem;padding-top:.7rem;
    display:flex;justify-content:space-between;align-items:baseline}
  .xr__runs table.runs tfoot td b{font-size:19px}
}