/* =====================================================================
   PEWC  |  Pro Elite World Challenge  |  v3
   ---------------------------------------------------------------------
   The brief changed: high end, clean, pristine, and unmistakably of the
   equestrian world. So the championship-broadcast treatment is gone —
   no near-black grounds, no glowing gradients, no color-coded chips,
   no scrolling ticker.

   What replaces it is the language good tack and good horse people
   already use: bone and sand, a Caslon set large and quiet, hairline
   rules instead of boxes, and color spent once a page rather than
   everywhere. The purple and orange are still PEWC's own — taken down
   to aubergine ink and saddle leather, which is where they should have
   been for a discipline that lives outdoors in daylight.
   ===================================================================== */

:root{
  /* ground — warm, paper-like, never white and never gray */
  --bone:#FBF9F4;
  --sand:#F2EDE3;
  --linen:#E4DCCE;
  --shell:#FFFFFF;

  /* ink — warm near-black, and two steps down for secondary text */
  --ink:#1F1B16;
  --ink2:#544D42;
  --ink3:#6E6658;

  /* the two accents, both taken from the mark and taken down */
  --plum:#4C2A61;        /* PEWC purple, deepened. Structure and links. */
  --plum-lt:#7B5590;
  --saddle:#97572F;      /* PEWC orange, muted to tack leather. Sparingly. */

  /* on the one dark ground the site still uses */
  --chalk:#F7F4EE;
  --chalk2:rgba(247,244,238,.74);
  --chalk3:rgba(247,244,238,.50);

  --rule:#D6CCBA;
  --rule2:#948877;
  --ruleD:rgba(247,244,238,.20);

  --display:"Libre Caslon Display",Georgia,"Times New Roman",serif;
  --text:"Libre Caslon Text",Georgia,serif;
  --body:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;

  --wrap:1200px;
  --gut:22px;
  --head-h:70px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --t:220ms;
}
@media(min-width:900px){ :root{ --gut:56px; --head-h:88px; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h) + 24px)}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.72;font-weight:300;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block;height:auto}
a{color:var(--plum);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--plum);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===================================================== type ========== */
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance;text-transform:none}
h1,h2{font-family:var(--display);letter-spacing:-.008em;line-height:1.06;color:var(--ink)}
h1{font-size:clamp(38px,5.4vw,68px)}
h2{font-size:clamp(27px,3.4vw,44px)}
h3{font-family:var(--body);font-weight:500;font-size:clamp(17px,1.6vw,19px);
  letter-spacing:.005em;line-height:1.38}
h4{font-family:var(--body);font-weight:500;font-size:16px}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong,b{font-weight:500;color:var(--ink)}

/* the one label style: letterspaced small caps, never a mono stencil */
.eye{
  font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 22px;line-height:1.7;
}
.eye.dim{color:var(--ink3)}
.eye.chalk{color:var(--chalk3)}

.lede{font-size:clamp(17px,1.5vw,19px);line-height:1.74;color:var(--ink2);
  max-width:56ch;font-weight:300}
.lede b{color:var(--ink);font-weight:500}
.lede.chalk,.sec.dark .lede{color:var(--chalk2)}
.lede.chalk b,.sec.dark .lede b{color:var(--chalk)}
.small{font-size:14.5px}
.num,table.data td,.paylist dd{font-variant-numeric:tabular-nums}

/* a hairline that sits under a heading and does the work a box used to */
.hr{height:1px;background:var(--rule);border:0;margin:0}

/* ===================================================== buttons ======= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;padding:15px 30px;border-radius:0;
  border:1px solid var(--ink);color:var(--ink);background:transparent;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.btn:hover{background:var(--ink);color:var(--bone);text-decoration:none}
.btn.primary{background:var(--plum);border-color:var(--plum);color:var(--bone)}
.btn.primary:hover{background:var(--ink);border-color:var(--ink)}
.btn.pur{background:transparent;border-color:var(--plum);color:var(--plum)}
.btn.pur:hover{background:var(--plum);color:var(--bone)}
.btn.ghost{border-color:var(--rule2);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.btn.onDark{border-color:var(--ruleD);color:var(--chalk)}
.btn.onDark:hover{background:var(--chalk);border-color:var(--chalk);color:var(--ink)}
.btn.sm{padding:11px 20px;font-size:11px;letter-spacing:.14em}
.btns{display:flex;gap:14px;flex-wrap:wrap}

/* a quieter call to action: a word and a rule under it */
.tlink{
  display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  padding-bottom:5px;border-bottom:1px solid var(--rule2);
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.tlink:hover{text-decoration:none;color:var(--plum);border-bottom-color:var(--plum)}
.tlink svg{transition:transform 300ms var(--ease)}
.tlink:hover svg{transform:translateX(4px)}

/* ===================================================== header ======== */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:80;
  border-bottom:1px solid transparent;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease);
}
.site-head.solid{background:rgba(251,249,244,.96);border-bottom-color:var(--rule);
  backdrop-filter:saturate(120%) blur(8px)}
.head-in{display:flex;align-items:center;gap:16px;height:var(--head-h)}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand img{height:34px;width:auto;transition:height var(--t) var(--ease)}
@media(min-width:900px){.brand img{height:42px}}
.site-head.solid .brand img{height:30px}
@media(min-width:900px){.site-head.solid .brand img{height:36px}}

.nav{display:none;margin-left:auto;gap:30px;align-items:center}
@media(min-width:1140px){.nav{display:flex}}
.nav a{
  position:relative;font-size:12px;font-weight:400;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink2);padding:5px 0;
  transition:color var(--t) var(--ease);
}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--plum);transform:scaleX(0);transform-origin:left;
  transition:transform 280ms var(--ease)}
.nav a:hover{color:var(--ink);text-decoration:none}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ink)}

.head-cta{margin-left:auto;display:flex;gap:12px;align-items:center}
@media(min-width:1140px){.head-cta{margin-left:30px}}
.burger{
  width:42px;height:42px;border:1px solid var(--rule2);display:inline-flex;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:border-color var(--t) var(--ease);
}
@media(min-width:1140px){.burger{display:none}}
.burger i{display:block;width:17px;height:1px;background:var(--ink);
  transition:transform 280ms var(--ease),opacity 180ms var(--ease)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mnav{
  position:fixed;inset:0;z-index:70;background:var(--bone);
  padding:calc(var(--head-h) + 30px) var(--gut) 44px;
  display:flex;flex-direction:column;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity 260ms var(--ease),visibility 260ms;
}
.mnav.open{opacity:1;visibility:visible}
@media(min-width:1140px){.mnav{display:none}}
.mnav a{
  font-family:var(--display);font-size:29px;line-height:1.2;color:var(--ink);
  padding:14px 0;border-bottom:1px solid var(--rule);letter-spacing:-.005em;
}
.mnav a:hover{text-decoration:none;color:var(--plum)}
.mnav .mcta{margin-top:32px}

/* ===================================================== hero ========== */
/* Light, open, and sized to what it holds. The photograph is the point;
   until there is one, generous space and the type carry it. */
.hero{
  position:relative;background:var(--bone);
  padding-top:calc(var(--head-h) + 56px);padding-bottom:0;
}
@media(min-width:980px){.hero{padding-top:calc(var(--head-h) + 88px)}}
.hero-in{display:grid;gap:40px}
@media(min-width:980px){
  .hero-in{grid-template-columns:1.15fr .85fr;gap:72px;align-items:start}
}
.hero h1{font-size:clamp(40px,6vw,76px);line-height:1.02}
.hero h1 em{font-style:italic;color:var(--plum)}
.hero .lede{margin:26px 0 34px}
.hero-meta{
  margin:40px 0 0;padding-top:18px;border-top:1px solid var(--rule);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);
}
@media(max-width:700px){.hero-plate{aspect-ratio:4/3}}

/* ===================================================== sections ====== */
.sec{padding-block:72px}
@media(min-width:900px){.sec{padding-block:112px}}
.sec.tight{padding-block:52px}
.sec.alt{background:var(--sand)}
.sec.rule{border-top:1px solid var(--rule)}
.sec.dark{background:var(--ink);color:var(--chalk2)}
.sec.dark h2,.sec.dark h3,.sec.dark h4{color:var(--chalk)}
.sec.plum{background:var(--sand)}          /* the plum band is gone; sand now */
.sec-head{margin:0 0 44px;max-width:64ch}
.sec-head.split{display:grid;gap:20px}
@media(min-width:900px){
  .sec-head.split{grid-template-columns:1fr auto;align-items:end;gap:48px;max-width:none}
}

/* motion, what is left of it: a short fade and a two-pixel lift */
.rv{opacity:0;transform:translateY(10px);
  transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:70ms} .rv-d2{transition-delay:140ms}
.rv-d3{transition-delay:210ms} .rv-d4{transition-delay:280ms}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ===================================================== router ======== */
/* Four tasks, set as a ruled index rather than four dark tiles. */
.router{background:var(--bone);border-top:1px solid var(--rule)}
.router-grid{display:grid}
@media(min-width:760px){.router-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.router-grid{grid-template-columns:repeat(4,1fr)}}
.task{
  position:relative;padding:36px 34px 34px 0;display:flex;flex-direction:column;
  gap:12px;border-bottom:1px solid var(--rule);color:var(--ink);
  transition:background var(--t) var(--ease);
}
@media(min-width:760px){
  .task{border-right:1px solid var(--rule);padding-left:34px}
  .task:nth-child(2n){border-right:0}
}
@media(min-width:1080px){
  .task{border-bottom:0;border-right:1px solid var(--rule)}
  .task:nth-child(2n){border-right:1px solid var(--rule)}
  .task:last-child{border-right:0}
  .task:first-child{padding-left:0}
}
.task:hover{text-decoration:none;background:var(--sand)}
.task .tn{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3)}
.task h3{font-family:var(--display);font-weight:400;font-size:clamp(23px,2.2vw,29px);
  line-height:1.1;letter-spacing:-.008em;color:var(--ink)}
.task p{margin:0;font-size:15px;color:var(--ink2);line-height:1.62}
.task .go{margin-top:auto;padding-top:20px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--plum);display:flex;align-items:center;gap:9px}
.task .go svg{transition:transform 300ms var(--ease)}
.task:hover .go svg{transform:translateX(5px)}

/* ===================================================== divisions ===== */
.divs{border-top:1px solid var(--rule)}
.div-row{
  display:grid;gap:6px 28px;padding:26px 0;align-items:baseline;
  grid-template-columns:1fr auto;border-bottom:1px solid var(--rule);
}
@media(min-width:760px){.div-row{grid-template-columns:210px 1fr auto}}
.div-row b{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.1;
  letter-spacing:-.008em;color:var(--ink)}
.div-row .ds{font-size:15px;color:var(--ink2);grid-column:1/-1;line-height:1.6}
@media(min-width:760px){.div-row .ds{grid-column:auto}}
.fmt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);
  white-space:nowrap}

/* ===================================================== pay list ====== */
.paylist{margin:0;display:grid;grid-template-columns:1fr auto;border-top:1px solid var(--rule)}
.paylist dt{padding:18px 0;border-bottom:1px solid var(--rule);color:var(--ink2);font-size:15px}
.paylist dd{margin:0;padding:18px 0;border-bottom:1px solid var(--rule);text-align:right;
  font-family:var(--display);font-size:26px;line-height:1;color:var(--ink)}
.paylist dd.hot{color:var(--plum)}
.sec.dark .paylist{border-top-color:var(--ruleD)}
.sec.dark .paylist dt{border-bottom-color:var(--ruleD);color:var(--chalk2)}
.sec.dark .paylist dd{border-bottom-color:var(--ruleD);color:var(--chalk)}
.sec.dark .paylist dd.hot{color:var(--chalk)}

/* ===================================================== steps ========= */
.steps{display:grid;border-top:1px solid var(--rule)}
@media(min-width:880px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{padding:34px 0;border-bottom:1px solid var(--rule)}
@media(min-width:880px){
  .step{padding:36px 40px 40px;border-bottom:0;border-right:1px solid var(--rule)}
  .step:first-child{padding-left:0} .step:last-child{border-right:0;padding-right:0}
}
.step .n{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 16px}
.step h3{margin:0 0 12px;font-family:var(--display);font-weight:400;font-size:21px;
  line-height:1.24}
.step p{margin:0;font-size:15px;color:var(--ink2)}
.sec.dark .step{border-color:var(--ruleD)}
.sec.dark .step p{color:var(--chalk2)}

/* ===================================================== tables ======== */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;min-width:560px;font-size:15px}
table.data th{
  text-align:left;font-weight:500;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink3);padding:0 14px 14px 0;
  border-bottom:1px solid var(--ink);white-space:nowrap;
}
table.data td{padding:16px 14px 16px 0;border-bottom:1px solid var(--rule);
  vertical-align:baseline;color:var(--ink2)}
table.data th.r,table.data td.r{text-align:right;padding-right:0}
table.data th:last-child,table.data td:last-child{padding-right:0}
table.data td.nm{font-weight:400;color:var(--ink)}
table.data td.mn0{color:var(--ink3);font-size:14px}
table.data td.rk{font-family:var(--display);color:var(--plum);font-size:19px}
table.data td b{font-family:var(--display);font-weight:400;font-size:19px;color:var(--ink)}
.sec.dark table.data th{color:var(--chalk3);border-bottom-color:var(--ruleD)}
.sec.dark table.data td{border-bottom-color:var(--ruleD);color:var(--chalk2)}
.sec.dark table.data td.nm,.sec.dark table.data td b{color:var(--chalk)}
.tnote{margin:22px 0 0;font-size:13px;color:var(--ink3);line-height:1.7;max-width:62ch}
.sec.dark .tnote{color:var(--chalk3)}

/* ===================================================== layout bits === */
.cols{display:grid;gap:40px}
@media(min-width:840px){.cols.two{grid-template-columns:1fr 1fr;gap:64px}}
@media(min-width:840px){.cols.side{grid-template-columns:1.3fr .7fr;gap:72px;align-items:start}}

/* boxes become ruled blocks. No shadows, no fills, no rounded corners. */
.box{border:0;border-top:1px solid var(--ink);padding:22px 0 0;background:transparent}
.box + .box{margin-top:40px}
.box.fill{background:transparent;border-top-color:var(--rule2)}
.box.hotline{border-top-color:var(--plum)}
.box.purline{border-top-color:var(--plum)}
.box h3{margin:0 0 14px;font-family:var(--display);font-weight:400;font-size:21px;
  line-height:1.24}
.box p{font-size:15px;color:var(--ink2)}
.sec.dark .box{border-top-color:var(--ruleD)}
.sec.dark .box p{color:var(--chalk2)}

ul.marks{margin:0;padding:0;list-style:none;display:grid;gap:0}
ul.marks li{padding:14px 0;border-bottom:1px solid var(--rule);color:var(--ink2);
  font-size:15px;line-height:1.6}
ul.marks li:first-child{padding-top:0}
ul.marks li b{color:var(--ink);font-weight:500}
.sec.dark ul.marks li{border-bottom-color:var(--ruleD);color:var(--chalk2)}
.sec.dark ul.marks li b{color:var(--chalk)}

.kv{display:grid;border-top:1px solid var(--ink)}
.kv div{display:grid;grid-template-columns:1fr auto;gap:8px 24px;padding:17px 0;
  border-bottom:1px solid var(--rule);align-items:baseline}
.kv dt,.kv .k{color:var(--ink2);font-size:15px;margin:0}
.kv dd,.kv .v{margin:0;text-align:right;font-weight:400;font-size:16px;color:var(--ink);
  font-variant-numeric:tabular-nums}

/* the side panel, now a ruled list rather than a floating card */
.panel{border-top:1px solid var(--ink)}
.panel > h2,.panel > h3{
  margin:0;padding:0 0 16px;background:transparent;color:var(--ink3);
  font-family:var(--body);font-size:10.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;
}
.ev{display:grid;grid-template-columns:76px 1fr;gap:4px 18px;padding:18px 0;
  border-top:1px solid var(--rule);align-items:baseline}
.ev .d{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);
  font-variant-numeric:tabular-nums;line-height:1.5}
.ev .d s{text-decoration:none;display:block}
.ev .t{font-size:16px;font-weight:400;color:var(--ink);line-height:1.34;
  font-family:var(--display)}
.ev .t s{text-decoration:none;display:block;font-family:var(--body);font-weight:300;
  font-size:13.5px;color:var(--ink2);margin-top:5px}
.panel-foot{padding:22px 0 0;border-top:1px solid var(--rule)}
.sec.dark .panel,.sec.dark .ev,.sec.dark .panel-foot{border-color:var(--ruleD)}
.sec.dark .ev .t{color:var(--chalk)}
.sec.dark .ev .t s,.sec.dark .ev .d{color:var(--chalk3)}

/* ===================================================== forms ========= */
.form{display:grid;gap:26px}
.frow{display:grid;gap:22px}
@media(min-width:640px){.frow.c2{grid-template-columns:1fr 1fr}.frow.c3{grid-template-columns:repeat(3,1fr)}}
.field{display:grid;gap:9px}
.field label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink3);font-weight:500}
.field .hint{font-size:13px;color:var(--ink3);line-height:1.5}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;font-family:var(--body);font-size:16px;font-weight:300;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule2);
  border-radius:0;padding:10px 0;transition:border-color var(--t) var(--ease);
}
input:focus,select:focus,textarea:focus{border-bottom-color:var(--plum);outline:none}
textarea{min-height:120px;resize:vertical;line-height:1.7}
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% - 11px) 55%,calc(100% - 6px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:28px}
.note{font-size:13.5px;color:var(--ink2);line-height:1.65}
.msg{padding:18px 0;border-top:1px solid var(--ink);font-size:15px;display:none}
.msg.show{display:block}
.msg.ok{color:var(--ink);border-top-color:var(--plum)}
.msg.err{color:var(--saddle);border-top-color:var(--saddle)}

/* ===================================================== checkout ====== */
.step-block{border:0;margin:0 0 52px;padding:0}
.step-block legend{
  display:flex;align-items:baseline;gap:16px;padding:0;margin:0 0 26px;
  width:100%;font-family:var(--display);font-weight:400;
  font-size:clamp(22px,2.4vw,28px);line-height:1.2;color:var(--ink);
}
.step-block legend .sn{font-family:var(--body);font-size:11px;letter-spacing:.2em;
  color:var(--ink3);font-weight:500}
.warn{
  font-size:14.5px;line-height:1.62;color:var(--ink2);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:14px 0;margin:0 0 26px;
}
.warn b{color:var(--ink);font-weight:500}

.picks{display:grid;gap:0;border-top:1px solid var(--rule)}
@media(min-width:560px){.picks{grid-template-columns:1fr 1fr;column-gap:28px}}
.pick{position:relative;display:block;cursor:pointer;border-bottom:1px solid var(--rule)}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick-in{
  display:grid;gap:4px;padding:18px 0;height:100%;
  transition:opacity var(--t) var(--ease);
}
.pick-in b{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.2;
  color:var(--ink2);transition:color var(--t) var(--ease)}
.pick-in s{text-decoration:none;font-size:13.5px;color:var(--ink3);line-height:1.5}
.pick-in em{font-style:normal;font-size:14px;color:var(--ink3);margin-top:4px;
  font-variant-numeric:tabular-nums}
.pick:hover .pick-in b{color:var(--ink)}
.pick input:checked + .pick-in b{color:var(--plum)}
.pick input:checked + .pick-in em{color:var(--plum)}
.pick input:checked + .pick-in::after{
  content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--plum);
}
.pick input:focus-visible + .pick-in{outline:2px solid var(--plum);outline-offset:4px}

.field label .opt{text-transform:none;letter-spacing:0;font-size:12.5px;
  color:var(--ink3);font-weight:300;margin-left:7px}
.more{margin-top:24px;border-top:1px solid var(--rule);padding-top:18px}
.more summary{cursor:pointer;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink3)}
.more summary:hover{color:var(--ink)}

.total{border-top:1px solid var(--ink);margin:0 0 34px}
.total div{display:flex;justify-content:space-between;gap:20px;padding:15px 0;
  border-bottom:1px solid var(--rule)}
.total .tl{color:var(--ink2);font-size:15px}
.total .tv{font-variant-numeric:tabular-nums;font-size:16px;color:var(--ink)}
.total .grand{border-bottom:0;padding-top:20px}
.total .grand .tl{color:var(--ink)}
.total .grand .tv{font-family:var(--display);font-size:30px;line-height:1}

#card-container{border-bottom:1px solid var(--rule2);padding:6px 0;min-height:50px}
#card-container.sq-focus{border-bottom-color:var(--plum)}
.secure{margin:18px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);line-height:1.8}

.done{border-top:1px solid var(--ink)}
.done-top{background:transparent;color:var(--ink);padding:30px 0 26px}
.done-top h2{margin:0 0 14px}
.done-top p{margin:0;color:var(--ink2);font-size:16px}
.done-num{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding:26px 0;border-top:1px solid var(--rule)}
.done-num .lab{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3)}
.done-num .val{font-family:var(--display);font-size:clamp(40px,6vw,58px);line-height:1;
  color:var(--plum)}
.done-body{padding:26px 0 0;border-top:1px solid var(--rule)}
.done-body p{font-size:15.5px;color:var(--ink2)}

/* ===================================================== sponsors ====== */
.sponsor-grid{display:grid;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
@media(min-width:640px){.sponsor-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.sponsor-grid{grid-template-columns:repeat(5,1fr)}}
.sponsor-grid .sp{background:transparent;display:grid;place-items:center;
  padding:34px 20px;min-height:128px;text-align:center;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sponsor-grid .sp span{font-size:11px;color:var(--ink3);letter-spacing:.16em;
  text-transform:uppercase}

/* ===================================================== page head ===== */
.phead{
  position:relative;background:var(--bone);border-bottom:1px solid var(--rule);
  padding-top:calc(var(--head-h) + 54px);padding-bottom:56px;
}
@media(min-width:900px){.phead{padding-top:calc(var(--head-h) + 86px);padding-bottom:76px}}
.phead h1{font-size:clamp(38px,5.2vw,64px)}
.phead h1 em{font-style:italic;color:var(--plum)}
.phead .lede{margin-top:26px}
.phead-mark{display:none}

/* a slot where real photography drops in */
.media-slot{
  position:relative;background:var(--sand);border:0;aspect-ratio:3/2;
  display:grid;place-items:center;overflow:hidden;
}
.media-slot span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink3);text-align:center;padding:20px}

/* ===================================================== footer ======== */
.site-foot{background:var(--bone);border-top:1px solid var(--ink);color:var(--ink2);
  padding-block:64px 36px;font-size:14.5px}
.foot-grid{display:grid;gap:44px}
@media(min-width:880px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:48px}}
.site-foot h4{font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 20px}
.site-foot a{color:var(--ink2);display:inline-block;transition:color var(--t) var(--ease)}
.site-foot a:hover{color:var(--plum);text-decoration:none}
.site-foot .fmark{height:42px;width:auto;margin-bottom:22px;color:var(--ink)}
.foot-bar{margin-top:52px;padding-top:24px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.foot-bar a{color:var(--ink3);font-size:11px}

/* ===================================================== utility ======= */
.center{text-align:center}
.mt0{margin-top:0} .mb0{margin-bottom:0}
/* chips were a color-coding system the new direction does not want */
.chip{display:inline;padding:0;background:none!important;color:inherit;
  font-family:inherit;font-size:inherit;letter-spacing:inherit}
.ticker{display:none}

/* ---- header fits on one line at every width it is shown ------------- */
.nav{gap:24px}
.nav a{white-space:nowrap;font-size:11.5px;letter-spacing:.1em}
@media(min-width:1280px){.nav{gap:30px}.nav a{font-size:12px}}
.btn{white-space:nowrap}
.head-cta .btn.sm{padding:11px 18px}
@media(max-width:700px){.hero-plate .mark{max-height:38%;max-width:62%}}

/* ---- the plate is a frame for a photograph, not a logo billboard ---- */
.hero-plate{aspect-ratio:2.6/1;background:var(--sand)}
@media(max-width:700px){.hero-plate{aspect-ratio:4/3}}
@media(max-width:700px){.hero-plate .mark{max-height:26%;max-width:44%}}

/* =====================================================================
   LEGIBILITY
   ---------------------------------------------------------------------
   This site is read by people in their sixties and seventies on phones
   in barn light. The design above stays; what changes here is the floor
   underneath it.

   Three things were genuinely wrong, not merely small:
     - the secondary gray failed AA on both grounds at 3.19 and 2.88,
       and it was carrying nearly every label on the site
     - form fields were drawn with a 1.64:1 underline, which is close to
       invisible — on the page where somebody types a card number
     - the labels were 10.5px, uppercase, at .24em tracking, which is
       the worst combination there is for an aging eye

   Every size below is up, every tracking is down, and nothing new was
   added to the palette.
   ===================================================================== */

body{font-size:18.5px;font-weight:400;line-height:1.7}
.lede{font-size:clamp(18px,1.6vw,20.5px);font-weight:400;line-height:1.72}
.small{font-size:16px}

/* labels: bigger, less tracked, and a gray that can actually be read */
.eye{font-size:12.5px;letter-spacing:.14em;color:var(--ink2)}
.hero-meta{font-size:13px;letter-spacing:.12em;color:var(--ink2)}
.task .tn,.step .n,.panel > h2,.panel > h3,.done-num .lab,
.site-foot h4,.media-slot span,.hero-plate .cap{
  font-size:12.5px;letter-spacing:.12em;color:var(--ink2);
}
.foot-bar,.foot-bar a{font-size:13px;letter-spacing:.08em}
.sponsor-grid .sp span{font-size:13px;letter-spacing:.1em}
.secure{font-size:13px;letter-spacing:.08em;line-height:1.7}

/* anything that was 15px of running copy */
.task p,.step p,.div-row .ds,.box p,ul.marks li,.kv dt,.kv .k{font-size:16.5px}
.kv dd,.kv .v{font-size:17.5px}
.fmt{font-size:13px;letter-spacing:.1em;color:var(--ink2)}
.tnote{font-size:15px;color:var(--ink2)}
.note{font-size:15.5px}
.warn{font-size:16.5px}
.done-body p,.done-top p{font-size:17px}
.msg{font-size:17px}

/* navigation and buttons: readable, and a bigger target to hit */
.nav a{font-size:13px;letter-spacing:.07em;padding:9px 0}
@media(min-width:1280px){.nav a{font-size:13.5px}}
.btn{font-size:13.5px;letter-spacing:.09em;padding:16px 30px}
.btn.sm{font-size:12.5px;letter-spacing:.08em;padding:12px 20px}
.tlink{font-size:13.5px;letter-spacing:.09em;padding-bottom:7px}
.more summary{font-size:13px;letter-spacing:.12em}

/* tables carry the standings, so they get the most room */
table.data{font-size:16.5px}
table.data th{font-size:12.5px;letter-spacing:.1em;color:var(--ink2);padding-bottom:13px}
table.data td{padding:18px 16px 18px 0}
table.data td.mn0{font-size:15.5px}
table.data td.rk,table.data td b{font-size:21px}

/* the "next up" list */
.ev .d{font-size:13.5px;letter-spacing:.06em;color:var(--ink2)}
.ev .t{font-size:17.5px}
.ev .t s{font-size:15px;margin-top:6px}

/* ---------------------------------------------------------------------
   FORM FIELDS
   An underline alone is elegant and, at 1.64:1, unusable. These are now
   real boxes on a paler ground so it is obvious where to type — which
   matters most on the one page that asks for a card.
   --------------------------------------------------------------------- */
.field label{font-size:13px;letter-spacing:.12em;color:var(--ink2)}
.field .hint{font-size:15px;color:var(--ink2);line-height:1.55}
.field label .opt{font-size:14px;color:var(--ink2)}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  font-size:17.5px;font-weight:400;background:#FFFDF8;
  border:1px solid var(--rule2);padding:14px 14px;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--plum);box-shadow:0 0 0 3px rgba(76,42,97,.16);outline:none;
}
select{background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;padding-right:40px}
#card-container{border:1px solid var(--rule2);background:#FFFDF8;padding:10px 14px;min-height:56px}
#card-container.sq-focus{border-color:var(--plum);box-shadow:0 0 0 3px rgba(76,42,97,.16)}

/* the division picker: a checked choice should be unmistakable */
.pick-in{padding:20px 0}
.pick-in b{font-size:23px}
.pick-in s{font-size:15px;color:var(--ink2)}
.pick-in em{font-size:16.5px;color:var(--ink2)}
.pick input:checked + .pick-in b,.pick input:checked + .pick-in em{color:var(--plum)}
.pick input:checked + .pick-in::after{height:2px}
.step-block legend .sn{font-size:13px;letter-spacing:.12em;color:var(--ink2)}
.total .tl,.total .tv{font-size:17.5px}

/* ---------------------------------------------------------------------
   Links in running text carry an underline, not just a color — color
   alone is the first thing to go with age, and the first thing a color
   -blind reader never had.
   --------------------------------------------------------------------- */
.lede a,.box p a,.step p a,p a,ul.marks li a,.tnote a,td a{
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.site-foot a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;color:var(--ink)}
.site-foot{font-size:16px;color:var(--ink2)}

/* a focus ring you cannot miss */
:focus-visible{outline:3px solid var(--plum);outline-offset:3px}

/* the site never shrinks below comfortable on a phone */
@media(max-width:700px){
  body{font-size:18px}
  .lede{font-size:18px}
  table.data{font-size:16px}
}
/* the router's call to action was missed by the pass above */
.task .go{font-size:13px;letter-spacing:.1em}
/* footer link columns stack one per line, whatever the link display is */
.site-foot .fl{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.site-foot .fl a,.site-foot .fl span{display:block;width:fit-content}
.site-foot .fl span a{display:inline}

/* =====================================================================
   PEWC BRANDING
   ---------------------------------------------------------------------
   The mark is a horse's head drawn as flowing mane strokes, and in PEWC's
   own artwork those strokes are picked out in purple, orange and blue
   over a silver body. That is the brand — not a logo in a corner, a set
   of sweeps.

   So the sweeps were separated out of their own color artwork into
   vector and are reused here as rules, flourishes and watermarks. The
   colors below are lifted from that artwork exactly, and are used for
   graphics and emphasis only: text keeps the darker plum, because these
   three are too light to read at body size.
   ===================================================================== */

:root{
  --pw-purple:#92278F;
  --pw-orange:#F1592A;
  --pw-blue:#0F75BC;
  --pw-silver:#D1D2D4;
}

/* ---- paper grain. Barely there, but it stops the ground reading flat. */
body{
  background-color:var(--bone);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
.sec.alt{
  background-color:var(--sand);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n2)' opacity='.06'/%3E%3C/svg%3E");
}

/* ---- text a step heavier throughout -------------------------------- */
body{font-weight:400}
.lede{font-weight:400}
p,li,td,dd,dt{font-weight:400}
.eye{font-weight:600;color:var(--pw-purple);letter-spacing:.16em}
.eye.dim{color:var(--ink2)}
.field label,.task .tn,.step .n,.site-foot h4,.panel > h2,.panel > h3,
table.data th,.done-num .lab{font-weight:600}
.nav a{font-weight:500}
.btn{font-weight:600}
h3{font-weight:600}
strong,b,.lede b{font-weight:600}

/* ---- the mane rule: a divider drawn from the mark's own strokes ----- */
.mane{
  display:block;width:100%;max-width:340px;height:auto;margin:0 0 30px;
  opacity:.95;
}
.mane.center{margin-inline:auto}
.sec-head .mane{max-width:230px;margin-bottom:22px}

/* a flourish anchored to the top-right of a band, bleeding off the edge */
.flourish{
  position:absolute;pointer-events:none;opacity:.14;width:min(620px,52%);
  right:-6%;top:-8%;
}
.sec,.phead{position:relative;overflow:hidden}
.sec > .wrap,.phead > .wrap{position:relative;z-index:2}

/* ---- color, spent where it means something ------------------------ */
/* the four divisions each carry one of the mark's colors */
.div-row{border-left:0;padding-left:0;position:relative}
.div-row::before{
  content:"";position:absolute;left:0;top:26px;bottom:26px;width:3px;background:var(--rule2);
}
.div-row{padding-left:22px}
.div-row:nth-child(1)::before{background:var(--pw-purple)}
.div-row:nth-child(2)::before{background:var(--pw-orange)}
.div-row:nth-child(3)::before{background:var(--pw-blue)}
.div-row:nth-child(4)::before{background:var(--ink2)}

/* money reads as money */
.paylist dd.hot{color:var(--pw-orange)}
.total .grand .tv{color:var(--pw-purple)}
.done-num .val{color:var(--pw-purple)}
table.data td.rk{color:var(--pw-purple)}

/* the step numbers get the mark's colors in sequence */
.step:nth-child(1) .n{color:var(--pw-purple)}
.step:nth-child(2) .n{color:var(--pw-orange)}
.step:nth-child(3) .n{color:var(--pw-blue)}

/* the task cards take a colored top edge on hover, in order */
.task::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--pw-purple);transform:scaleX(0);transform-origin:left;
  transition:transform 320ms var(--ease);
}
.task:nth-child(2)::before{background:var(--pw-orange)}
.task:nth-child(3)::before{background:var(--pw-blue)}
.task:nth-child(4)::before{background:var(--ink)}
.task:hover::before{transform:scaleX(1)}
.task .go{color:var(--pw-purple);font-weight:600}
.task:nth-child(2) .go{color:var(--pw-orange)}
.task:nth-child(3) .go{color:var(--pw-blue)}
.task:nth-child(4) .go{color:var(--ink)}
@media(max-width:700px){.hero-plate{aspect-ratio:3/2}}
@media(max-width:700px){.hero-plate .mark{max-height:58%;max-width:78%}}

/* ---- wayfinding: every page says where it sits --------------------- */
.where{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 20px;
}
.where a{color:var(--ink3);text-decoration:none}
.where a:hover{color:var(--pw-purple);text-decoration:underline;text-underline-offset:3px}
.where span{color:var(--pw-purple)}

/* a plain "what next" line at the end of a section */
.next{
  display:flex;gap:26px;flex-wrap:wrap;align-items:center;
  margin-top:40px;padding-top:24px;border-top:2px solid var(--ink);
}
.next .nl{font-size:12.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3)}
@media(max-width:700px){.hero-plate .mark{max-height:52%;max-width:72%}}

/* ---- the sweeps, now drawn rather than traced ---------------------- */
.mane{width:100%;max-width:280px;height:auto;margin:0 0 26px;opacity:1}
.sec-head .mane{max-width:230px;margin-bottom:20px}
.flourish{
  position:absolute;pointer-events:none;opacity:.16;
  width:min(760px,60%);right:-8%;top:8%;height:auto;
}
.phead .flourish{top:auto;bottom:-4%;right:-10%;opacity:.13;width:min(680px,58%)}
@media(max-width:820px){.flourish{display:none}}

/* ---------------------------------------------------------------------
   Two color sets, and they are not interchangeable.

   --pw-* are the mark's own colors, straight off PEWC's artwork. They
   are for GRAPHICS: the sweeps, the mark, the division bars, a hover edge.

   --pt-* are the same hues darkened until they clear 4.5:1 on both
   grounds. They are for TEXT. The bright orange measures 2.90 against
   bone — fine as a 3px bar, unreadable as a label, and it was being used
   as both.
   --------------------------------------------------------------------- */
:root{
  --pt-purple:#92278F;   /* 6.86 on bone — already clears */
  --pt-orange:#B83E16;   /* 5.34 on bone, from #F1592A */
  --pt-blue:#0A5184;     /* 7.91 on bone, from #0F75BC */
}
.eye{color:var(--pt-purple)}
.step:nth-child(1) .n{color:var(--pt-purple)}
.step:nth-child(2) .n{color:var(--pt-orange)}
.step:nth-child(3) .n{color:var(--pt-blue)}
.task .go{color:var(--pt-purple)}
.task:nth-child(2) .go{color:var(--pt-orange)}
.task:nth-child(3) .go{color:var(--pt-blue)}
.task:nth-child(4) .go{color:var(--ink)}
.paylist dd.hot{color:var(--pt-orange)}
.total .grand .tv,.done-num .val,table.data td.rk{color:var(--pt-purple)}
.where span{color:var(--pt-purple)}
/* the bars, edges and sweeps keep the true brand colors */
.div-row:nth-child(1)::before{background:var(--pw-purple)}
.div-row:nth-child(2)::before{background:var(--pw-orange)}
.div-row:nth-child(3)::before{background:var(--pw-blue)}

/* =====================================================================
   v9 — BRAND, AT SIZE
   ---------------------------------------------------------------------
   The note back was "very clean but too bland", and v8 answered it with
   a purple eyebrow and some hairline bars. That was the wrong scale of
   answer. Three things change here.

   COLOR gets one real field instead of twenty accents. The plate under
   the hero — which had been a beige rectangle apologising for the
   photograph that isn't shot yet — becomes a deep plum band carrying the
   mark at full size with the mane sweeping in behind it. One band on the
   page. It is the thing you see, and it is unmistakably PEWC.

   LINE WORK is now drawn rather than traced. PEWC's mark is a horse made
   of flowing strokes that swell in the middle and come to a point at each
   end; a stroked path cannot taper, so each sweep is a filled polygon
   walked along a bezier with a rising and falling half-width. Same hand
   as the logo, at a size you can actually see.

   WEIGHT finally works. Jost is variable and was pinned, so every 600 on
   this site rendered at 400 (see fonts.css). With the axis open the type
   can carry emphasis, and the sizes below assume it does.
   ===================================================================== */

:root{
  --plum-deep:#38203F;   /* the one color field. #FFF on it: 12.9:1 */
  --plum-deep2:#2C1932;
}
@media(max-width:700px){
  .hero-plate{min-height:230px}
  .hero-plate > img.mark{max-height:58%;max-width:80%}
  .hero-plate .pl-sweep{width:86%;left:-14%;bottom:-30%;opacity:.38}
}

/* ---------------------------------------------------------------------
   The season in numbers. Four figures that are all defensible from
   PEWC's own database, sitting directly under the plate so the page
   says something concrete before it asks for anything.
   --------------------------------------------------------------------- */
.figs{background:var(--bone);border-bottom:1px solid var(--rule);
  padding-block:clamp(38px,5vw,60px)}
.fig-grid{list-style:none;margin:0;padding:0;display:grid;gap:34px 26px;
  grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.fig-grid{grid-template-columns:repeat(4,1fr);gap:0}}
.fig{position:relative;padding-inline:0;min-width:0}
@media(min-width:900px){
  .fig{padding-inline:30px}
  .fig:first-child{padding-left:0}
  .fig + .fig{border-left:1px solid var(--rule)}
}
.fig b{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(38px,4.6vw,58px);line-height:1;letter-spacing:-.02em;
  color:var(--plum);margin-bottom:12px;
}
.fig:nth-child(2) b{color:var(--pt-blue)}
.fig:nth-child(3) b{color:var(--pt-orange)}
.fig:nth-child(4) b{color:var(--ink)}
.fig span{display:block;font-size:15.5px;line-height:1.5;font-weight:500;
  color:var(--ink2);overflow-wrap:break-word}

/* ---------------------------------------------------------------------
   The ribbon divider: the mane, full width, between major bands.
   --------------------------------------------------------------------- */
.ribbon{
  overflow:hidden;line-height:0;background:var(--bone);
  padding-block:clamp(26px,3.4vw,46px);
}
.ribbon img{width:100%;min-width:900px;height:auto;margin-inline:auto;opacity:.9}
@media(max-width:700px){.ribbon img{min-width:680px}}

/* the short rule under a section eyebrow — bigger, and three colors */
.mane{width:100%;max-width:230px;height:auto;margin:0 0 20px;opacity:1}
.sec-head .mane{max-width:200px;margin-bottom:18px}

/* the big corner sweep bleeding off a band */
.flourish{
  position:absolute;pointer-events:none;opacity:.20;
  width:min(680px,52%);right:-9%;top:-6%;height:auto;transform:scaleY(-1);
}
.phead .flourish{top:auto;bottom:-14%;right:-11%;opacity:.17;
  width:min(620px,50%);transform:none}
@media(max-width:900px){.flourish{opacity:.12;width:min(460px,72%)}}

/* ---------------------------------------------------------------------
   Weight. With the axis open these finally do something.
   --------------------------------------------------------------------- */
body{font-weight:400}
.lede{font-weight:450;color:var(--ink)}
.lede b{font-weight:650}
h3{font-weight:600;letter-spacing:-.005em}
.eye{font-weight:650;letter-spacing:.15em}
.nav a{font-weight:500}
.btn{font-weight:650;letter-spacing:.08em}
.tlink,.task .go,.where{font-weight:650}
table.data th,.field label,.step .n,.task .tn,.site-foot h4,
.panel > h2,.panel > h3,.done-num .lab,.fig span{font-weight:600}
strong,b,td b,dd.hot{font-weight:650}
.ev .t{font-weight:500}
.hero-meta{font-weight:550}

/* headlines a step up, now that there is something around them */
.hero h1{font-size:clamp(42px,6.4vw,82px)}
h2{font-size:clamp(29px,3.7vw,48px)}

/* ---------------------------------------------------------------------
   Nothing overflows its box. Long rider names, long arena names and
   long German-length words all wrap rather than run out of the card.
   --------------------------------------------------------------------- */
.task,.fig,.step,.box,.panel,.ev,.div-row,.cols > *{min-width:0}
.task h3,.task p,.step p,.box p,.ev .t,.ev .t s,.fig span,.panel h2{
  overflow-wrap:break-word;word-break:normal;
}
.task p,.step p{hyphens:auto}
table.data td.nm{overflow-wrap:break-word}

/* ---------------------------------------------------------------------
   The reveal must never be able to leave the page blank. If the observer
   does not run — script blocked, an old browser, a crawler — everything
   is visible. .js-rv is set by main.js only once it is ready to observe.
   --------------------------------------------------------------------- */
.rv{opacity:1;transform:none}
html.js-rv .rv{opacity:0;transform:translateY(10px)}
html.js-rv .rv.in{opacity:1;transform:none}

/* ---------------------------------------------------------------------
   v9 fixes found in review.

   1. The rank column is `.r` (right aligned), and `.r` sets padding-right
      to 0 so figures line up on the last column's edge. On the FIRST
      column that rule ran the rank straight into the rider's name —
      "1Rider name". Only the last column wants a flush right edge.
   2. The corner sweep was crossing the Finals payout figures. A graphic
      may sit behind type only if the type stays obviously readable;
      that one did not, so it moves up and out of the text column.
   --------------------------------------------------------------------- */
table.data th:first-child,table.data td:first-child{padding-right:20px}
table.data th.r:last-child,table.data td.r:last-child{padding-right:0}
table.data td.rk{min-width:2ch}

.flourish{opacity:.14;top:-18%;right:-13%;width:min(560px,42%)}
@media(max-width:1100px){.flourish{opacity:.10}}
@media(max-width:820px){.flourish{display:none}}
.phead .flourish{display:block;top:auto;bottom:-20%;right:-12%;opacity:.15;
  width:min(520px,44%)}
@media(max-width:820px){.phead .flourish{display:none}}

/* the caption sits under the mark on a phone, not across it */
@media(max-width:700px){
  .hero-plate{padding-bottom:34px}
  .hero-plate > img.mark{max-height:54%}
  .hero-plate .cap{bottom:12px;font-size:11px;letter-spacing:.14em}
}

/* =====================================================================
   v10 — PHOTOGRAPHY, AND NO SCAFFOLDING LEFT ON THE BUILDING
   ---------------------------------------------------------------------
   The plate holds a real frame now. It is composed rather than simply
   filled: the photograph takes the right of the band and fades into the
   plum on its left edge, so the picture can be shown at a size the file
   actually supports instead of being stretched across 1440px and going
   soft. The mane sweeps in underneath it.

   The empty states below matter more than they look. Three lists on this
   site are filled by the office — posted standings, the forms, the
   sponsor board — and every one of them used to ship with convincing
   rows of href="#". A rider who taps Download and gets nothing concludes
   the site is broken. Each list now ships empty with its own sentence,
   shown by CSS while the list has no children and gone the moment the
   office uploads anything.
   ===================================================================== */

/* ------------------------------------------------------- the hero plate */
.hero-plate{
  margin:clamp(48px,6vw,84px) 0 0;padding:0;
  display:block;min-height:0;aspect-ratio:auto;
}
@media(min-width:980px){
  .hero-plate{min-height:clamp(320px,31vw,440px)}
  .hero-plate picture{position:absolute;inset:0 0 0 auto;width:62%;z-index:2}
  /* the photograph dissolves into the plum rather than butting against it */
  .hero-plate picture{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 100%);
  }
  .hero-plate .pl-sweep{left:-4%;bottom:-26%;width:min(680px,54%);opacity:.5;z-index:1}
}
@media(max-width:979px){
  .hero-plate picture{position:relative;z-index:2;width:100%}
  .hero-plate .shot{aspect-ratio:16/10}
  .hero-plate .pl-sweep{width:88%;left:-12%;bottom:-16%;opacity:.34}
}

/* ------------------------------------------- photographs inside a column */
.shot-frame{margin:0;overflow:hidden;background:var(--linen);border:1px solid var(--rule)}
.shot-frame img{display:block;width:100%;height:auto}

/* ------------------------------------------------ how points work, home */
.howto{list-style:none;margin:0;padding:0;counter-reset:h}
.howto li{
  counter-increment:h;position:relative;padding:22px 0 22px 54px;
  border-bottom:1px solid var(--rule);font-size:16.5px;line-height:1.6;
}
.howto li:first-child{border-top:1px solid var(--rule)}
.howto li::before{
  content:counter(h,decimal-leading-zero);position:absolute;left:0;top:23px;
  font-family:var(--display);font-size:21px;line-height:1;color:var(--pt-purple);
}
.howto li:nth-child(2)::before{color:var(--pt-orange)}
.howto li:nth-child(3)::before{color:var(--pt-blue)}

/* --------------------------------------------------------- empty states */
[data-empty]:empty{display:block;border-top:1px solid var(--rule)}
[data-empty]:empty::before{
  content:attr(data-empty);display:block;padding:26px 0 0;max-width:62ch;
  font-size:16.5px;line-height:1.65;color:var(--ink2);
}
.sponsor-grid:empty{border-left:0}
.sponsor-grid .sp img{max-width:78%;max-height:64px;width:auto;object-fit:contain}

/* the header lockup, now in color, needs a touch more room to read */
.brand img{height:clamp(38px,4.4vw,52px);width:auto}
.site-foot .fmark{height:56px;width:auto;margin-bottom:18px}

/* ---------------------------------------------------------------------
   The plate's photograph was being cropped by its own container: 62% of
   1440 against a 440px band is 2.03:1, while the frame is 1.78:1, so
   cover ate the horse's feet and the top of the rider. Taller band,
   and the crop holds the whole animal.
   --------------------------------------------------------------------- */
@media(min-width:980px){
  .hero-plate{min-height:clamp(360px,35vw,505px)}
  .hero-plate .shot{object-position:56% 46%}
}

/* The credit sits over arena dirt, which is light. It gets its own scrim
   so it is legible on any frame that ever goes in this plate. */
.plate-cap{
  right:0;bottom:0;padding:26px 16px 10px 34px;
  background:linear-gradient(300deg,rgba(20,10,24,.72) 0%,rgba(20,10,24,.42) 52%,transparent 100%);
  color:rgba(255,255,255,.82);
}

/* ---------------------------------------------------------------------
   The sister marks. PEWC Finals and the PEWC Foundation are the same
   horse in different inks, so they get room to be seen on their own
   pages rather than being shrunk to a badge.
   --------------------------------------------------------------------- */
.phead .sister{
  width:auto;height:clamp(76px,9vw,118px);margin:0 0 22px;
  position:relative;z-index:2;
}
.shot-frame figcaption{
  padding:12px 2px 0;font-size:14.5px;color:var(--ink2);line-height:1.5;
  border:0;background:none;
}
.shot-frame{border:0}
.shot-frame picture{display:block;border:1px solid var(--rule);overflow:hidden;background:var(--linen)}

/* =====================================================================
   v11 — SOFTER SEAMS
   ---------------------------------------------------------------------
   Every section change on this site was announced twice: a hairline rule
   AND a step from bone to sand, both landing on the same pixel row. Read
   top to bottom the page came across as a stack of separate cards rather
   than one document, and the hairlines drew the eye to the joins instead
   of the content.

   So the rules come out and the color steps become ramps. An alternate
   band now starts at bone, reaches sand about a tenth of the way down,
   holds, and returns to bone before it ends — the grounds still change,
   but nowhere is there an edge to catch on. The paper grain rides on top
   of the ramp rather than being replaced by it.

   The two places a hard edge is doing real work keep theirs: the plum
   plate, which is a deliberate block of color, and the footer, which
   should read as the end of the document rather than another section.
   Both are softened rather than removed.
   ===================================================================== */

/* the grain, declared once so both grounds can reuse it */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");
}

/* ---- alternate bands dissolve in and out instead of stepping -------- */
.sec.alt{
  background-color:transparent;
  background-image:var(--grain),
    linear-gradient(180deg,
      var(--bone) 0%, var(--sand) 11%, var(--sand) 89%, var(--bone) 100%);
  background-repeat:repeat,no-repeat;
  background-size:180px 180px,100% 100%;
}
.figs,.router,.ribbon{background-color:transparent;background-image:none}

/* ---- the hairlines between sections come out --------------------- */
.sec.rule,.router,.figs,.phead{border-top:0;border-bottom:0}
/* a rule inside a section is structure and stays: table heads, the
   division list, the "where next" line, footer columns. Only the seams
   between whole sections are going. */

/* the air the rules were standing in for */
.figs{padding-block:clamp(46px,6vw,76px)}
.router{padding-block:clamp(6px,1vw,14px) 0}
.phead{padding-bottom:clamp(58px,6vw,84px)}

/* ---- the page head hands off to the first section ------------------ */
.phead::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:80px;
  background:linear-gradient(180deg,transparent,var(--sand));
  opacity:.5;pointer-events:none;z-index:1;
}

/* ---- the plum plate keeps its block of color, loses its two edges -- */
.hero-plate::before,.hero-plate::after{
  content:"";position:absolute;left:0;right:0;height:26px;z-index:4;
  pointer-events:none;
}

/* ---- the footer: a shading, not a black line ----------------------- */
.site-foot{
  border-top:0;
  background-color:transparent;
  background-image:var(--grain),
    linear-gradient(180deg,var(--bone) 0%,var(--sand) 34%,var(--sand) 100%);
  background-repeat:repeat,no-repeat;
  background-size:180px 180px,100% 100%;
  padding-block:clamp(72px,8vw,104px) 36px;
}
.foot-bar{border-top:1px solid var(--rule2)}

/* The plate's softened edges belong to the plum, not to the photograph —
   above z-index 2 they laid a haze across the top of the frame. */
.hero-plate::before,.hero-plate::after{z-index:1}

/* The "where next" line was a 2px black rule — the heaviest mark on any
   page, and it sat right where the eye should be moving on, not stopping. */
.next{border-top:1px solid var(--rule);padding-top:26px}

/* =====================================================================
   v12 — THE PHOTOGRAPH STOPS HAVING EDGES
   ---------------------------------------------------------------------
   The plate was fading the frame on one side only. Its left edge melted
   into the plum, and then the top, bottom and right were cut off dead
   straight — three hard lines around a picture whose whole job is to sit
   inside the page rather than on top of it.

   So the frame is now feathered on all four sides, and the band it sits
   in gives up its own two edges into the cream. Nothing about the
   composition changes; there is simply nowhere left where one thing
   stops and the next starts on a single pixel row.

   Feathering four sides means intersecting four gradients, which needs
   mask-composite. Everything current has it, under one spelling or the
   other, and anything that does not falls back to the single left-hand
   fade rather than to a hard rectangle.
   ===================================================================== */

@media(min-width:980px){
  .hero-plate picture{
    /* fallback: the left-hand fade alone, never a hard box */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);
            mask-image:linear-gradient(90deg,transparent 0,#000 30%);
  }
  @supports ((mask-composite:intersect) or (-webkit-mask-composite:source-in)){
    .hero-plate picture{
      -webkit-mask-image:
        linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 14%,#000 38%),
        linear-gradient(180deg,transparent 0,#000 15%,#000 84%,transparent 100%),
        linear-gradient(270deg,transparent 0,#000 13%);
              mask-image:
        linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 14%,#000 38%),
        linear-gradient(180deg,transparent 0,#000 15%,#000 84%,transparent 100%),
        linear-gradient(270deg,transparent 0,#000 13%);
      -webkit-mask-composite:source-in;
              mask-composite:intersect;
    }
  }
}
@media(max-width:979px){
  .hero-plate picture{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%);
  }
}

/* the band gives up its edges too, over a proper distance this time */
.hero-plate::before,.hero-plate::after{height:clamp(40px,7vw,86px)}

/* with the frame feathered, the credit needs its own footing again */
.plate-cap{
  right:clamp(10px,2vw,26px);bottom:clamp(8px,1.4vw,18px);
  padding:22px 14px 8px 30px;
  background:radial-gradient(120% 220% at 100% 100%,
    rgba(20,10,24,.66) 0%,rgba(20,10,24,.30) 55%,transparent 100%);
}

/* =====================================================================
   v12 — THE MANE AS THE DIVIDER, AND THE MENU BUTTON
   ---------------------------------------------------------------------
   Three things.

   1. The sweeps now sit in every major section join. Used once they were
      decoration; used at every join they are the thread that holds the
      page together, and they answer the hard-line problem better than a
      gradient does — there is something in the gap rather than an
      absence.

   2. The plate's cream edge-fades were sitting UNDER the photograph, so
      once the frame was feathered you looked through its soft edge and
      saw cream where there should have been plum. That is why the top of
      the picture went milky. They move above everything, and the ramp
      now reads cream, then plum, then photograph.

   3. The mobile menu's Join button was inheriting .mnav a — 29px of
      Caslon with zero side padding — so PEWC's only call to action on a
      phone had its label hanging out of both ends of the box.
   ===================================================================== */

/* ---------------------------------------------------- the divider ---- */
.ribbon{
  overflow:hidden;line-height:0;background:transparent;
  padding-block:clamp(22px,3vw,40px);
  position:relative;z-index:1;
}
.ribbon img{
  width:100%;min-width:900px;height:auto;margin-inline:auto;display:block;
  opacity:.85;
}
.ribbon.flip img{transform:scaleX(-1) scaleY(-1)}
@media(max-width:700px){
  .ribbon{padding-block:20px}
  .ribbon img{min-width:640px;opacity:.9}
}
/* the joins carry the sweeps now, so the bands stop announcing themselves
   a second time with a color step as well */
.sec.alt{
  background-image:var(--grain),
    linear-gradient(180deg,
      var(--bone) 0%, var(--sand) 16%, var(--sand) 84%, var(--bone) 100%);
}

/* ---------------------------------------------- the plate, resolved -- */
.hero-plate::before,.hero-plate::after{
  z-index:6;height:clamp(44px,7vw,92px);
}

/* ------------------------------------------- the mobile menu button -- */
.mnav .mcta{margin-top:36px}
.mnav .mcta .btn{
  display:flex;align-items:center;justify-content:center;width:100%;
  font-family:var(--body);font-size:14px;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;line-height:1;padding:20px 28px;
  border-radius:0;
}
.mnav .mcta .btn span{display:block;font:inherit;letter-spacing:inherit}

/* ---------------------------------------------------------------------
   The plate, third attempt, and the right one.

   A full-bleed dark band has a hard top and bottom edge by definition,
   and fading that edge over ninety pixels only washes cream across
   whatever is inside it — which is exactly what it did to the top of
   the photograph.

   So the band stops being a band. The plum is now a wash anchored at
   the left, strongest behind the sweeps and dissolving outward into the
   page on every side. The photograph is feathered into it on the left
   and into the cream on the other three. Nothing has an edge, and
   nothing has a haze laid over it either.
   --------------------------------------------------------------------- */
.hero-plate{
  background-color:transparent;
  background-image:
    radial-gradient(128% 146% at 16% 50%,
      var(--plum-deep2) 0%, var(--plum-deep) 38%,
      rgba(56,32,63,.86) 58%, rgba(56,32,63,.34) 76%, transparent 92%);
  min-height:clamp(330px,34vw,470px);
}
@media(min-width:980px){
  .hero-plate picture{inset:0 0 0 auto;width:64%}
  .hero-plate .pl-sweep{left:-3%;bottom:-20%;width:min(660px,50%);opacity:.42}
}
@media(max-width:979px){
  .hero-plate{
    min-height:0;padding-block:8px 26px;
    background-image:
      radial-gradient(150% 120% at 50% 42%,
        var(--plum-deep2) 0%, var(--plum-deep) 42%,
        rgba(56,32,63,.55) 68%, transparent 88%);
  }
}

/* ---------------------------------------------------------------------
   The plate, resolved: the sweeps carry the edge.

   Feathering a photograph into a cream page on all four sides does not
   read as high end, it reads as a soft-edge effect from 1998 — and over
   a busy, light-toned crowd it just goes hazy. Two earlier attempts here
   proved it twice.

   Jake's own answer was the right one: put the line work in the gap. The
   mane now runs across the top and bottom of the band, straddling the
   boundary, so the picture keeps a confident edge and the join is broken
   up by PEWC's own drawing rather than by a blur. The frame still melts
   into the plum on its left, which was the one fade that was working.
   --------------------------------------------------------------------- */
.hero-plate{
  background-color:var(--plum-deep);
  background-image:linear-gradient(105deg,var(--plum-deep2) 0%,var(--plum-deep) 56%);
  min-height:clamp(330px,34vw,470px);
  margin-top:clamp(56px,7vw,96px);
}

/* the photograph: crisp, except where it meets the plum */
@media(min-width:980px){
  .hero-plate picture{
    inset:0 0 0 auto;width:64%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 10%,#000 34%);
            mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 10%,#000 34%);
    -webkit-mask-composite:source-over;mask-composite:add;
  }
}
@media(max-width:979px){
  .hero-plate picture{
    -webkit-mask-image:none;mask-image:none;
  }
}
@media(max-width:700px){
  .plate-edge{width:max(760px,120%);opacity:.95}
  .plate-edge.top{margin-top:-7%}
  .plate-edge.bot{margin-bottom:-7%}
}

/* The straddling edge images inherited "every img in this plate fills it"
   and stretched across the whole band. The sweeps go back into normal
   flow, immediately above and below the plate, where they introduce and
   close it the same way they divide every other section on the site. */
.plate-edge{display:none}
.ribbon.tight{padding-block:clamp(14px,1.8vw,24px)}
.ribbon.tight img{opacity:.8}
.ribbon.tight{padding-block:clamp(18px,2.4vw,30px)}

/* and a short ramp on each edge — 20px, enough to take the ruled line
   off the boundary, far too little to haze the photograph the way the
   90px version did */
.hero-plate::before,.hero-plate::after{
  display:block;content:"";position:absolute;left:0;right:0;height:20px;
  z-index:6;pointer-events:none;
}

/* =====================================================================
   v13 — ONE HERO
   ---------------------------------------------------------------------
   The page used to open twice: a headline on cream, and then, further
   down, a separate plum band with the photograph in it. Two statements
   where there should be one, and the strongest asset on the site was
   the second thing you met rather than the first.

   Now it is a single band. Plum across the full width, the words held
   on the quiet left half where there is nothing behind them but color,
   and the frame filling the right and dissolving into the ground where
   the two meet. Nothing is laid over the photograph and nothing is read
   against it — the copy has its own half, which is why the words stay
   legible at every width without a scrim.

   "Next up" comes out of the hero. It was competing with the headline
   for the right-hand side, which is where the picture now lives; as a
   strip underneath it reads faster and uses the width.
   ===================================================================== */

.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background-color:var(--plum-deep);
  background-image:linear-gradient(102deg,var(--plum-deep2) 0%,var(--plum-deep) 62%);
  color:#fff;
  padding-top:calc(var(--head-h) + 46px);
  padding-bottom:52px;
  margin-bottom:0;
}
@media(min-width:1000px){
  .hero{
    padding-top:calc(var(--head-h) + 78px);padding-bottom:86px;
    min-height:clamp(560px,64vh,720px);
    display:flex;align-items:center;
  }
}

/* ---- the frame: right half, feathered only where it meets the plum -- */
.hero-media{position:relative;z-index:1;margin-top:34px}
@media(min-width:1000px){
  .hero-media{
    position:absolute;inset:0 0 0 auto;width:56%;margin:0;z-index:1;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 12%,#000 38%);
            mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 12%,#000 38%);
  }
  .hero-media picture{height:100%}
  .hero-media .shot{object-position:58% 44%}
}
@media(max-width:999px){
  .hero-media .shot{aspect-ratio:16/10;object-position:56% 42%}
  .hero-media{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 100%);
  }
}
.hero-credit{
  position:absolute;right:10px;bottom:8px;z-index:3;
  font-size:10.5px;letter-spacing:.14em;font-weight:500;text-transform:uppercase;
  color:rgba(255,255,255,.80);
  padding:20px 10px 6px 26px;
  background:radial-gradient(130% 240% at 100% 100%,
    rgba(18,9,22,.62) 0%,rgba(18,9,22,.26) 58%,transparent 100%);
}

/* ---- the sweeps, behind everything ---------------------------------- */
.hero-sweep{
  position:absolute;z-index:0;left:-5%;bottom:-24%;
  width:min(720px,58%);height:auto;opacity:.34;pointer-events:none;
}
@media(max-width:999px){.hero-sweep{width:96%;left:-16%;bottom:auto;top:34%;opacity:.26}}

/* ---- the words, on their own half ----------------------------------- */
.hero-wrap{position:relative;z-index:2}
.hero-copy{max-width:min(560px,100%)}
@media(min-width:1000px){.hero-copy{max-width:44%;min-width:430px}}
.hero .eye{color:#D8C4E2;font-weight:650}
.hero h1{color:#fff;font-size:clamp(40px,5.6vw,74px);line-height:1.03}
.hero h1 em{font-style:italic;color:#C9AED8}
.hero .lede{color:rgba(255,255,255,.88);margin:24px 0 34px;max-width:46ch}
.hero .lede b{color:#fff;font-weight:650}
.hero-meta{
  color:rgba(255,255,255,.76);margin-top:30px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.22);max-width:22em;
}

/* ---- buttons that work on a dark ground ----------------------------- */
.btn.solid{background:var(--bone);color:var(--ink);border:1px solid var(--bone)}
.btn.solid:hover{background:#fff;border-color:#fff;text-decoration:none}
.btn.solid span{color:var(--ink)}
.btn.outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn.outline:hover{border-color:#fff;background:rgba(255,255,255,.08);text-decoration:none}
.btn.outline span{color:#fff}
.hero :focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---- the header, while it is sitting on the hero -------------------- */
.site-head{transition:background-color var(--t) var(--ease),
  border-color var(--t) var(--ease)}
.site-head.on-dark:not(.solid) .nav a{color:rgba(255,255,255,.86)}
.site-head.on-dark:not(.solid) .nav a:hover,
.site-head.on-dark:not(.solid) .nav a[aria-current]{color:#fff}
.site-head.on-dark:not(.solid) .brand .lg-dark{display:none}
.site-head.on-dark:not(.solid) .brand .lg-light{display:block}
.brand .lg-light{display:none}
.site-head.on-dark:not(.solid) .head-cta .btn.primary{
  background:var(--bone);border-color:var(--bone);
}
.site-head.on-dark:not(.solid) .head-cta .btn.primary span{color:var(--ink)}
.site-head.on-dark:not(.solid) .burger i{background:#fff}

/* ---- Next up, as a strip ------------------------------------------- */
.upnext{padding-block:clamp(34px,4.4vw,56px) clamp(10px,1.6vw,20px)}
.up-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:22px;
}
.up-head h2{font-size:clamp(22px,2.4vw,30px)}
.up-grid{display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:680px){.up-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.up-grid{grid-template-columns:repeat(4,1fr)}}
.up{
  display:block;position:relative;padding:24px 26px 26px 0;min-width:0;
  border-top:1px solid var(--rule);color:var(--ink);text-decoration:none;
  transition:transform var(--t) var(--ease);
}
@media(min-width:680px){
  .up{padding-left:26px;border-left:1px solid var(--rule)}
  .up:first-child,.up:nth-child(3){padding-left:0;border-left:0}
}
@media(min-width:1040px){
  .up:nth-child(3){padding-left:26px;border-left:1px solid var(--rule)}
}
.up::after{
  content:"";position:absolute;left:0;right:26px;top:-1px;height:2px;
  background:var(--pw-purple);transform:scaleX(0);transform-origin:left;
  transition:transform 300ms var(--ease);
}
.up:nth-child(2)::after{background:var(--pw-orange)}
.up:nth-child(3)::after{background:var(--pw-blue)}
.up:nth-child(4)::after{background:var(--ink)}
.up:hover::after{transform:scaleX(1)}
.up:hover{text-decoration:none}
.up-d{
  display:block;font-size:12.5px;font-weight:650;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pt-purple);margin-bottom:12px;
}
.up:nth-child(2) .up-d{color:var(--pt-orange)}
.up:nth-child(3) .up-d{color:var(--pt-blue)}
.up:nth-child(4) .up-d{color:var(--ink2)}
.up-d s{text-decoration:none;color:var(--ink3);margin-left:7px;letter-spacing:.1em}
.up-t{
  display:block;font-family:var(--display);font-size:clamp(19px,1.8vw,23px);
  line-height:1.2;margin-bottom:10px;overflow-wrap:break-word;
}
.up-m,.up-a{display:block;font-size:15px;color:var(--ink2);line-height:1.5}
.up-a{font-weight:600;color:var(--ink)}
.up:hover .up-t{text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px}

/* ---------------------------------------------------------------------
   The navigation was running across the crowd in the photograph —
   "SANCTIONING" onward sat on a busy, light background and stopped being
   readable, which is the one thing this site is not allowed to do.

   So the hero carries a scrim across its top: dark at the header line,
   gone by the time it reaches the headline. The nav always has a ground,
   whatever frame is in the plate, and it costs the picture nothing —
   the top of that frame is empty stand seating.
   --------------------------------------------------------------------- */
.hero::before{
  content:"";position:absolute;left:0;right:0;top:0;z-index:2;
  height:calc(var(--head-h) + 84px);pointer-events:none;
  background:linear-gradient(180deg,
    rgba(23,11,27,.78) 0%,rgba(23,11,27,.52) 46%,transparent 100%);
}
.hero-wrap{z-index:3}
.hero-credit{z-index:4}

/* the sweeps were cutting across the buttons and the division line */
.hero-sweep{opacity:.22;bottom:-34%;left:-8%;width:min(640px,50%)}
@media(max-width:999px){.hero-sweep{opacity:.18}}

/* and the frame's own bottom edge gets the same treatment as its left —
   a short fade, so the picture hands off to the sweeps below it */
@media(min-width:1000px){
  .hero-media{
    -webkit-mask-image:
      linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 12%,#000 38%),
      linear-gradient(0deg,transparent 0,#000 7%);
            mask-image:
      linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 12%,#000 38%),
      linear-gradient(0deg,transparent 0,#000 7%);
    -webkit-mask-composite:source-in;mask-composite:intersect;
  }
}

/* Event titles are different lengths, so the cards were finishing at
   different heights and the added money stopped lining up across the
   row. Pin it to the bottom and the row reads as one line again. */
.up{display:flex;flex-direction:column}
.up-a{margin-top:auto;padding-top:10px}

/* ---------------------------------------------------------------------
   On a phone the two halves stack, and the photograph was landing first
   — which put "Join for 2027" below the fold on the one page whose job
   is to get a rider signed up in two minutes. The words lead; the frame
   follows them.
   --------------------------------------------------------------------- */
@media(max-width:999px){
  .hero{display:flex;flex-direction:column;padding-bottom:0}
  .hero-wrap{order:1}
  .hero-media{order:2;margin-top:38px}
  .hero-sweep{order:0}
  .hero-meta{margin-bottom:4px}
  .hero-media .shot{aspect-ratio:3/2}
  .hero-media{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 100%);
  }
}

/* Measured against the pixels actually painted behind it, the nav's worst
   case was 4.71:1 on "Contact" — passing, but with no headroom, and the
   frame in this plate will be swapped for another one day. A little more
   scrim buys that margin back and costs the picture nothing. */
.hero::before{
  height:calc(var(--head-h) + 108px);
  background:linear-gradient(180deg,
    rgba(23,11,27,.86) 0%,rgba(23,11,27,.66) 38%,rgba(23,11,27,.28) 72%,transparent 100%);
}

/* =====================================================================
   v14 — MOBILE
   ---------------------------------------------------------------------
   Measured across five widths (320 to 430) and ten pages. The layout
   was already sound: no horizontal scroll anywhere, nothing breaking
   out of the viewport, every form field already at 16px so iOS does not
   zoom the page when a rider taps it.

   What was wrong was everything you have to hit with a thumb. Every
   footer link was 22 to 27px tall — fine for a mouse, a coin toss for
   a finger, and this site's readers are largely not twenty-five. Those
   all come up to 44px, which is the smallest target Apple and Google
   both consider reliable.

   The other gap was the call to action. On a phone the header's Join
   button scrolls away and never returns, so the one thing this site
   exists to do vanishes after the first screen. A bar now takes over.
   ===================================================================== */

/* ---- thumbs ---------------------------------------------------------- */
@media(max-width:900px){
  .site-foot .fl a,
  .site-foot .fl span a,
  .foot-bar a,
  .where a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .site-foot .fl{gap:2px}
  .site-foot .fl span{line-height:1.6}
  .where{gap:6px 12px}
  .tlink,.task .go,.up{min-height:44px}
  .tlink{display:inline-flex;align-items:center}
}
/* a tap should feel like it landed, not like a hover that stuck */
a,button,summary,label,.btn{-webkit-tap-highlight-color:rgba(76,42,97,.14)}
@media(hover:none){
  a:hover,.btn:hover{text-decoration:none}
  .btn:active{transform:translateY(1px)}
  .task:active,.up:active{background:var(--sand)}
}

/* ---- notches and home indicators ------------------------------------ */
@supports(padding:max(0px)){
  .wrap{
    padding-left:max(var(--gut),env(safe-area-inset-left));
    padding-right:max(var(--gut),env(safe-area-inset-right));
  }
  .mcta-bar{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .site-foot{padding-bottom:max(36px,env(safe-area-inset-bottom))}
}

/* ---- the sticky call to action -------------------------------------- */
.mcta-bar{display:none}
@media(max-width:860px){
  .mcta-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:flex;align-items:center;gap:14px;
    padding:12px max(16px,env(safe-area-inset-left)) 12px max(16px,env(safe-area-inset-right));
    background:rgba(251,249,244,.97);
    -webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);
    border-top:1px solid var(--rule);
    box-shadow:0 -6px 24px rgba(31,27,22,.07);
    animation:barUp 260ms var(--ease) both;
  }
  .mcta-bar[hidden]{display:none}
  .mcta-bar .btn{flex:1 1 auto;justify-content:center;padding:16px 20px;min-height:52px}
  .mcta-alt{
    flex:0 0 auto;display:inline-flex;align-items:center;min-height:52px;padding:0 4px;
    font-size:13.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
    color:var(--pt-purple);text-decoration:underline;text-underline-offset:4px;
  }
  body.has-bar .site-foot{padding-bottom:104px}
}
@keyframes barUp{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.mcta-bar{animation:none}}

/* ---- tables say they can be swiped ---------------------------------- */
.tscroll{position:relative;-webkit-overflow-scrolling:touch}
@media(max-width:820px){
  .tscroll{
    background:
      linear-gradient(90deg,var(--bone) 34%,rgba(251,249,244,0)) left / 34px 100% no-repeat,
      linear-gradient(270deg,var(--bone) 34%,rgba(251,249,244,0)) right / 34px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%,rgba(31,27,22,.14),transparent) left / 14px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%,rgba(31,27,22,.14),transparent) right / 14px 100% no-repeat;
    background-attachment:local,local,scroll,scroll;
  }
  .sec.alt .tscroll{
    background:
      linear-gradient(90deg,var(--sand) 34%,rgba(242,237,227,0)) left / 34px 100% no-repeat,
      linear-gradient(270deg,var(--sand) 34%,rgba(242,237,227,0)) right / 34px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%,rgba(31,27,22,.14),transparent) left / 14px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%,rgba(31,27,22,.14),transparent) right / 14px 100% no-repeat;
    background-attachment:local,local,scroll,scroll;
  }
  .tscroll + .tnote::before{content:"Swipe the table sideways to see every column. ";font-weight:600}
}

/* ---- the menu on a short screen (a phone turned sideways) ----------- */
.mnav{overscroll-behavior:contain}
@media(max-height:560px) and (max-width:1139px){
  .mnav{padding-top:76px;padding-bottom:28px}
  .mnav a{font-size:20px;padding:11px 0}
  .mnav .mcta{margin-top:20px}
  .mnav .mcta .btn{padding:15px 24px}
}

/* ---- the hero on a phone -------------------------------------------- */
@media(max-width:999px){
  .hero{padding-top:calc(var(--head-h) + 30px)}
  .hero h1{font-size:clamp(35px,10.4vw,52px)}
  .hero .lede{font-size:17.5px;margin:20px 0 30px;max-width:38ch}
  .hero .btns{display:grid;gap:12px}
  .hero .btns .btn{width:100%;justify-content:center;min-height:56px}
  .hero-meta{margin-top:26px;padding-top:18px;font-size:12.5px}
  .hero-media .shot{aspect-ratio:auto}
}
@media(max-width:400px){
  :root{--gut:18px}
  .hero .eye{font-size:11.5px;letter-spacing:.12em}
  .fig b{font-size:clamp(34px,11vw,44px)}
}

/* ---------------------------------------------------------------------
   What is left under 44px is inline links inside sentences — "the
   contact page", "fastenter.com" — and WCAG's target-size rule exempts
   those, because enlarging a word mid-paragraph wrecks the line it sits
   in. Phone numbers and email addresses are different: a rider standing
   in an arena tapping Amber's number is a primary action, and those
   always sit on their own line anyway.
   --------------------------------------------------------------------- */
@media(max-width:900px){
  .box a[href^="tel:"],   .box a[href^="mailto:"],
  .kv a[href^="tel:"],    .kv a[href^="mailto:"],
  .cards a[href^="tel:"], .cards a[href^="mailto:"],
  .site-foot a[href^="tel:"], .site-foot a[href^="mailto:"]{
    display:inline-flex;align-items:center;min-height:44px;
    font-weight:600;
  }
}

/* ---------------------------------------------------------------------
   The scrolled header was 96% opaque with a blur behind it. On a page
   that is cream on cream that does not read as glass, it reads as a
   smudge — "$500 added" ghosting through the logo. Solid.
   --------------------------------------------------------------------- */
.site-head.solid{
  background:var(--bone);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 1px 0 var(--rule),0 6px 20px rgba(31,27,22,.05);
  border-bottom-color:transparent;
}

/* the figures carry hand-set line breaks for the desktop grid; on a
   phone they force a third line and a ragged column */
@media(max-width:700px){
  .fig span br{display:none}
  .fig span{max-width:20ch}
  .up-t br{display:none}
}

/* The figures wrap on their own now, so the phone override that hid
   their line breaks — and welded the words either side of them — goes.
   The measure below keeps the desktop row to two tidy lines. */
@media(max-width:700px){.fig span br{display:inline}}
.fig span{max-width:19ch}
@media(max-width:700px){.fig span{max-width:22ch}}

/* =====================================================================
   v16 — THE FACE
   ---------------------------------------------------------------------
   Two things were burying the rider. The crop started at y86 when her
   helmet starts at y73, so the top of her head was simply gone; and what
   survived sat inside the scrim that keeps the navigation readable.

   The crop is fixed above. The scrim cannot be: the nav occupies y24-65
   and her face lands at y45-104 — the same band. Darkening one darkens
   the other.

   So the photograph starts below the header instead of running under it.
   The nav then sits on plain plum, which is better for it than any
   scrim was (no photograph to fight, at any width, with any future
   frame), the scrim goes entirely, and her face is in clear light. The
   frame's new top edge is feathered so it arrives rather than starts.
   ===================================================================== */

/* no more scrim: there is nothing under the header but color */
.hero::before{display:none}

@media(min-width:1000px){
  .hero{min-height:clamp(560px,42vw,640px)}
  .hero-media{
    inset:calc(var(--head-h) + 16px) 0 0 auto;
    width:57%;
  }
  .hero-media .shot{object-position:56% 46%}
  /* left into the plum as before, and now a short fade at the top edge
     so the panel is not a ruled line across the band */
  .hero-media{
    -webkit-mask-image:
      linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 12%,#000 36%),
      linear-gradient(180deg,transparent 0,#000 9%),
      linear-gradient(0deg,transparent 0,#000 6%);
            mask-image:
      linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 12%,#000 36%),
      linear-gradient(180deg,transparent 0,#000 9%),
      linear-gradient(0deg,transparent 0,#000 6%);
    -webkit-mask-composite:source-in;mask-composite:intersect;
  }
}

/* on a phone the frame already sits below everything; it just gets the
   headroom the new crop gives it */
@media(max-width:999px){
  .hero-media .shot{object-position:52% 36%}
}

/* the credit follows the frame down */
.hero-credit{bottom:6px;right:6px}

/* =====================================================================
   RENEWAL LOOKUP
   ---------------------------------------------------------------------
   Sits above the form because a renewing rider should never start
   typing an address they gave PEWC last year. Two fields, one button,
   and then the form below is already filled.
   ===================================================================== */
.renew{
  border:1px solid var(--rule2);background:var(--sand);
  padding:clamp(22px,3vw,30px);margin-bottom:clamp(30px,4vw,44px);
  position:relative;
}
.renew::before{
  content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;
  background:var(--pw-purple);
}
.renew h2{font-size:clamp(21px,2.2vw,26px);margin-bottom:8px}
.renew > p{font-size:16.5px;color:var(--ink2);margin:0 0 20px;max-width:56ch}
.renew-form{display:grid;gap:16px;align-items:end}
@media(min-width:620px){.renew-form{grid-template-columns:1.4fr 1fr auto}}
.renew-form .field{margin:0;min-width:0}
.renew-form .btn{white-space:nowrap;min-height:54px}
@media(max-width:619px){.renew-form .btn{width:100%;justify-content:center}}
.renew-msg{margin:16px 0 0;font-size:16px;line-height:1.6;color:var(--ink2)}
.renew-msg:empty{display:none}
.renew-msg.ok{color:var(--pt-purple);font-weight:600}
.renew-msg.err{color:var(--pt-orange);font-weight:600}
/* once it has filled the form there is nothing left to do here */
.renew.done .renew-form{display:none}
.renew.done{background:#FFFDF8}
.renew.done::before{background:var(--pt-purple)}

/* a field the lookup filled, so the rider can see what came back */
.form .field.prefilled input,.form .field.prefilled select{
  background:#FBF7FF;border-color:var(--pw-purple);
}
.form .field.prefilled label::after{
  content:" · filled from your membership";
  font-size:11.5px;letter-spacing:.06em;color:var(--pt-purple);text-transform:none;
}

/* the family chooser — "which of you is renewing?" */
.renew-pick{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.renew-pick .btn{min-height:48px}
@media(max-width:560px){.renew-pick{display:grid}.renew-pick .btn{width:100%;justify-content:center}}

/* ---------------------------------------------------------------------
   The figures band carries statements now rather than counts, because a
   count that is right on launch day is wrong by spring and PEWC cannot
   correct it without coming back to us. Words need a different size and
   a tighter measure than "227" did — at the old 58px display size a
   phrase like "Year-end awards" simply broke the row.
   --------------------------------------------------------------------- */
.fig b{
  font-size:clamp(23px,2.5vw,31px);
  line-height:1.12;letter-spacing:-.012em;
  margin-bottom:14px;text-wrap:balance;
}
.fig span{max-width:24ch;font-size:15px}
@media(max-width:700px){
  .fig b{font-size:clamp(21px,5.4vw,26px)}
  .fig span{max-width:26ch;font-size:15px}
}

/* =====================================================================
   v21 — THE PHOTOGRAPHY JOINS THE PAGE
   ---------------------------------------------------------------------
   Two problems, and only one of them was layout.

   The first was palette. This site is a printed thing — cream stock,
   warm grain, Caslon, hairline rules, a plum taken well down — and the
   photographs were full-saturation press frames shot under arena light.
   No amount of feathering an edge fixes that: the mismatch is not the
   shape of the picture, it is the color of it. Every frame now goes
   through one house grade before it reaches the page — saturation to
   just under half, blacks lifted the way ink lifts on uncoated stock, a
   touch of warmth, and a plum cast pushed into the shadows only, so the
   horse keeps its form while the crowd and the dirt drift toward the
   paper.

   The second was composition. A photograph flush to the edge of a color
   band reads as two rectangles stacked. What reads as designed is
   overlap — so the plate sits ON the plum field and hangs past its
   bottom edge into the cream. The mane runs behind it, a hairline keys
   the edge, and a plate mark finishes it the way a printed page would.

   New class names throughout: .hero-plate had collected twenty-odd
   rules across a dozen revisions, ending in a flat display:none, and
   the new composition inherited all of it.
   ===================================================================== */

.hero{overflow:visible;padding-bottom:clamp(58px,7vw,92px)}
@media(min-width:1000px){ .hero{min-height:clamp(600px,44vw,700px)} }

/* ---- the plate ------------------------------------------------------ */
.heroframe{display:block;margin:0;position:relative;z-index:2}
@media(min-width:1000px){
  .heroframe{
    position:absolute;
    top:calc(var(--head-h) + 34px);
    right:0;
    width:54%;
    bottom:calc(-1 * clamp(34px, 4vw, 58px));   /* the overlap */
  }
  .heroshot{
    position:absolute;inset:0;overflow:hidden;
    box-shadow:0 24px 64px -30px rgba(20,10,24,.6);
  }
  .heroshot picture{display:block;width:100%;height:100%}
  .heroshot .shot{width:100%;height:100%;object-fit:cover;object-position:54% 44%}
}
@media(max-width:999px){
  .heroframe{order:2;margin-top:32px}
  .heroshot{position:relative;display:block;overflow:hidden}
  .heroshot .shot{display:block;width:100%;height:auto;object-position:52% 38%}
}
/* The hairline that keys a plate to its ground. Note it must not set
   position — an earlier draft did, and being later in the file it beat
   the position:absolute in the desktop query above at equal specificity,
   which is why the plate stopped short of its own frame. */
.heroshot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(251,249,244,.28);
}

/* ---- the plate mark ------------------------------------------------- */
.heromark{
  margin:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.56);
}
@media(min-width:1000px){
  .heromark{position:absolute;left:0;bottom:calc(100% + 15px)}
}
@media(max-width:999px){
  .heromark{margin:14px 0 0;padding-inline:var(--gut)}
}
.heromark .pm-n{color:#D8C4E2;letter-spacing:.2em}
.heromark .pm-t{color:rgba(255,255,255,.74);letter-spacing:.1em}
.heromark .pm-c{font-weight:500}

/* the sweeps belong behind the plate now */
.hero-sweep{opacity:.26;z-index:0}

/* ---------------------------------------------------------------------
   The plate, as a component.

   Same treatment everywhere: a graded frame, a hairline keying it to
   the ground it sits on, and a plate mark set the way a printed book
   captions an illustration. The mark matters more than it looks — a
   numbered, named plate reads as part of the document; the same picture
   without one reads as filler.
   --------------------------------------------------------------------- */
.plate{margin:0;display:block}
.plate .plate-img{position:relative;overflow:hidden;background:var(--linen)}
.plate .plate-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(31,27,22,.14);
}
.plate img{display:block;width:100%;height:auto}

.pmark{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:13px 0 0;
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  color:var(--ink3);
}
.pmark .pm-n{color:var(--pt-purple);letter-spacing:.2em}
.pmark .pm-t{color:var(--ink2);letter-spacing:.1em}
.pmark .pm-c{font-weight:500;letter-spacing:.1em}

/* a band runs the full measure, between the page head and the content */
.plate.band{
  margin:0 auto clamp(30px,4vw,48px);
  max-width:var(--wrap);padding-inline:var(--gut);
}
.plate.band .plate-img{max-height:clamp(230px,30vw,380px)}
.plate.band img{height:100%;object-fit:cover;object-position:54% 46%}
@media(min-width:900px){
  .plate.band .plate-img{max-height:clamp(260px,26vw,340px)}
}

/* a tall plate sits in a column beside the copy */
.plate.tall{margin-bottom:22px}
.plate.tall .plate-img{aspect-ratio:3/4}
.plate.tall img{height:100%;object-fit:cover;object-position:52% 42%}
@media(max-width:979px){
  .plate.tall .plate-img{aspect-ratio:16/10}
}

/* the page head hands straight into a band, so its own fade comes off */
.phead:has(+ .plate.band)::after{display:none}

/* Each frame has its own subject in its own place — the awards group's
   faces sit high, the running rider's sit just above center — so a
   single blanket object-position was cutting heads off. Measured, not
   guessed: the group runs y189-770 in its source, the rider y484-532. */
.plate.band.f-high img{object-position:50% 26%}
.plate.band.f-mid img{object-position:50% 38%}
.plate.band.f-turn img{object-position:56% 42%}

/* ---------------------------------------------------------------------
   The band was clipping, not cropping.

   max-height on the wrapper with overflow:hidden leaves the image at
   its natural height — 633px inside a 340px box — so object-fit and
   object-position had nothing to act on and the frame was simply cut
   off wherever the box ended. Heads went with it.

   An explicit aspect-ratio on the frame and an absolutely positioned
   image inside it makes cover behave, and the focal points below then
   mean what they say.
   --------------------------------------------------------------------- */
.plate.band .plate-img{
  max-height:none;aspect-ratio:16/5.6;position:relative;
}
@media(max-width:700px){ .plate.band .plate-img{aspect-ratio:16/9} }
.plate.band img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.plate.tall .plate-img{position:relative}
.plate.tall img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* focal points, now that they do something */
.plate.band.f-high img{object-position:50% 34%}
.plate.band.f-mid  img{object-position:50% 30%}
.plate.band.f-turn img{object-position:54% 40%}

/* The band assets are now cut to 2.5:1 at source, around their subject,
   so the frame matches the picture and cover has nothing to crop. The
   focal nudges above are no longer doing any work and are neutral. */
.plate.band .plate-img{aspect-ratio:2.5/1}
@media(max-width:700px){ .plate.band .plate-img{aspect-ratio:2/1} }
.plate.band.f-high img,.plate.band.f-mid img,.plate.band.f-turn img{object-position:50% 50%}
@media(max-width:700px){
  .plate.band.f-high img{object-position:50% 42%}
  .plate.band.f-mid img{object-position:50% 46%}
}

/* ---------------------------------------------------------------------
   "Where do I stand" — the standings lookup
   Verna: "Can we put 'where do I stand' easier to find? Love the set up
   but people don't scroll down far enough." It reuses the renewal box's
   shape so the site keeps one idea of what a lookup looks like, and adds
   a type-ahead list plus a result row per division.
   --------------------------------------------------------------------- */
.stand-look .renew-form{grid-template-columns:1fr}
@media(min-width:620px){.stand-look .renew-form{grid-template-columns:1fr auto}}

/* the type-ahead */
.ac-field{position:relative}
.ac-list{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;
  margin:0;padding:6px;list-style:none;max-height:272px;overflow:auto;
  background:var(--shell);border:1px solid var(--pw-purple);
  box-shadow:0 14px 34px rgba(40,22,48,.16);
}
.ac-list[hidden]{display:none}
.ac-list li{
  padding:11px 12px;cursor:pointer;font-size:16px;line-height:1.3;
  display:flex;align-items:baseline;gap:9px;
}
.ac-list li b{font-weight:600}
.ac-list li .small{color:var(--ink2);letter-spacing:.06em;text-transform:uppercase;font-size:11.5px}
.ac-list li.on,.ac-list li:hover{background:#F4ECF7}

/* one line per division the rider is carrying points in */
.stand-rows{margin-top:20px;border-top:1px solid var(--rule2)}
.stand-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:15px 2px;border-bottom:1px solid var(--rule2);
}
.stand-row p{margin:0}
.sr-rank b{
  font-family:var(--display);font-size:clamp(27px,3.4vw,34px);line-height:1;
  color:var(--pt-purple);font-weight:400;
}
.sr-rank s{
  display:block;text-decoration:none;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink2);margin-top:3px;
}
.sr-cls{font-size:16.5px;font-weight:600}
.sr-cls .small{
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink2);font-weight:500;
}
.sr-pts{font-size:16.5px;font-weight:600;text-align:right;white-space:nowrap}
.sr-pts s{
  display:block;text-decoration:none;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink2);font-weight:500;margin-top:3px;
}
@media(max-width:540px){
  .stand-row{grid-template-columns:auto 1fr;gap:12px}
  .sr-pts{grid-column:2;text-align:left;margin-top:-4px}
}

/* ---------------------------------------------------------------------
   The live side pot banner, and the calendar's own states.
   Past and "on now" are set by the browser, not baked in at build time.
   --------------------------------------------------------------------- */
/* An explicit display beats the hidden attribute, so both the banner and
   the home page cards stayed on screen after being hidden. This is the one
   line that makes hidden mean hidden. */
[hidden]{display:none !important}

.livepot{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:space-between;
  border:1px solid var(--pw-purple);background:#F7F1FA;
  padding:18px clamp(18px,2.4vw,26px);margin:0 0 clamp(26px,3vw,34px);
  position:relative;
}
.livepot::before{
  content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--pt-orange);
}
.livepot p{margin:0;min-width:0}
.livepot p b{
  display:block;font-size:17px;letter-spacing:.01em;margin-bottom:3px;
}
/* scoped to the paragraph on purpose: a bare ".livepot span" also caught
   the span inside the button, which turned its label dark-on-dark */
.livepot p span{display:block;font-size:15px;color:var(--ink2);max-width:62ch}
.livepot .btn{flex:none}
@media(max-width:620px){
  .livepot{gap:14px}
  .livepot .btn{width:100%;justify-content:center}
}

/* a race that has been and gone */
tr.ev-row.past{opacity:.45}
tr.ev-row.past .nm{text-decoration:line-through;text-decoration-thickness:1px}

/* one that is running today */
tr.ev-row.now{background:#F7F1FA}
tr.ev-row.now .nm{font-weight:600}
.onnow{
  display:none;font-style:normal;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--pt-orange);
  padding:2px 7px;margin-left:8px;vertical-align:1px;white-space:nowrap;
}
tr.ev-row.now .onnow{display:inline-block}

/* the same on a home page card */
.up.now{outline:2px solid var(--pw-purple);outline-offset:-2px}
.up.now .up-a{color:var(--pt-purple);font-weight:600}