/* SM Show Steers — static site. Palette: red, white, black. */
@font-face{font-family:"Oswald";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/oswald-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Oswald";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/oswald-latin-700-normal.woff2") format("woff2")}

:root{
  --red:#aa0606;          /* brand red (from the original site) */
  --red-dark:#790404;
  --red-bright:#e02a27;   /* red used for text on black, for contrast */
  --black:#0b0b0b;
  --ink:#141414;
  --white:#fff;
  --paper:#f4f2f0;
  --line:#2a2a2a;
  --head-h:72px;
  --display:"Oswald","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --max:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--white)}
img{max-width:100%;height:auto;display:block}
a{color:var(--red)}
a:hover{color:var(--black)}
:focus-visible{outline:3px solid var(--red-bright);outline-offset:3px}
.wrap{width:min(var(--max),100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--white);color:var(--black);padding:.6rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--black);border-bottom:3px solid var(--red);height:var(--head-h)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:100%}
.brand{display:flex;align-items:center;gap:.9rem;text-decoration:none}
.brand img{height:54px;width:auto}
.brand span{font-family:var(--display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--white);font-size:1.15rem;line-height:1}
.nav{display:flex;gap:.25rem}
.nav a{font-family:var(--display);font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--white);padding:.5rem .9rem;font-size:1rem;border-bottom:3px solid transparent;margin-bottom:-3px}
.nav a:hover{color:var(--red-bright)}
.nav a[aria-current="page"]{border-bottom-color:var(--red-bright)}
@media (max-width:520px){.brand span{display:none}}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font-family:var(--display);font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:.85rem 1.7rem;border:2px solid var(--red);background:var(--red);color:var(--white);transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--white);color:var(--red);border-color:var(--white)}
.btn.ghost{background:transparent;border-color:var(--white);color:var(--white)}
.btn.ghost:hover{background:var(--white);color:var(--black)}
.btn.dark{background:var(--black);border-color:var(--black)}
.btn.dark:hover{background:var(--red);border-color:var(--red);color:var(--white)}

/* ---------- Home: hero ---------- */
.hero{position:relative;background:var(--black) url("../../images/site/hero-2024-bw.webp") center center/cover no-repeat;color:var(--white);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.8) 28%,rgba(0,0,0,.34) 50%,rgba(0,0,0,.28) 100%)}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:2rem;align-items:center;min-height:min(78vh,720px);padding-block:3.5rem}
.eyebrow{font-family:var(--display);font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--red-bright);font-size:.95rem;margin:0 0 .6rem}
.hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:.02em;margin:0;font-size:clamp(3.2rem,9vw,7rem)}
.hero h1 em{font-style:normal;color:var(--red-bright)}
.hero .sub{font-size:1.2rem;max-width:34ch;margin:1.2rem 0 2rem;color:#e8e8e8}
.hero .actions{display:flex;flex-wrap:wrap;gap:.8rem}
.hero .mark{justify-self:center}
.hero .mark img{width:auto;height:clamp(240px,42vh,420px);filter:drop-shadow(0 12px 28px rgba(0,0,0,.65))}
.hero::after{content:"";display:block;height:10px;background:linear-gradient(90deg,var(--red) 0 66%,var(--white) 66% 76%,var(--black) 76%)}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;text-align:left;min-height:0;padding-block:2.5rem}
  .hero .mark{order:-1;justify-self:start}
  .hero .mark img{height:200px}
  .hero::before{background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.85))}
}

/* ---------- Home: facts band ---------- */
.band{background:var(--red);color:var(--white)}
.band ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.band li{font-family:var(--display);font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:1.05rem .75rem;font-size:1.05rem;border-left:1px solid rgba(255,255,255,.35)}
.band li:first-child{border-left:0}
@media (max-width:640px){.band ul{grid-template-columns:1fr}.band li{border-left:0;border-top:1px solid rgba(255,255,255,.35);padding:.7rem}.band li:first-child{border-top:0}}

/* ---------- Sections ---------- */
.section{padding:clamp(3rem,7vw,5.5rem) 0}
.section.dark{background:var(--black);color:var(--white)}
.section.paper{background:var(--paper)}
.section h2{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1;font-size:clamp(2rem,5vw,3.4rem);margin:0 0 .4rem}
.rule{width:84px;height:6px;background:var(--red);margin:.9rem 0 1.6rem;border:0}
.dark .rule{background:var(--red-bright)}
.lede{font-size:1.15rem;max-width:56ch;margin:0 0 1.8rem}

/* highlights mosaic */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:10px}
.mosaic a{position:relative;overflow:hidden;background:var(--black);display:block}
.mosaic a:first-child{grid-column:span 2;grid-row:span 2}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.mosaic a:hover img{transform:scale(1.05)}
.mosaic a::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.mosaic span{position:absolute;left:14px;bottom:10px;z-index:1;font-family:var(--display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--white);font-size:1.05rem}
.mosaic span::before{content:"";display:inline-block;width:26px;height:4px;background:var(--red-bright);vertical-align:middle;margin-right:.6rem}
.center{text-align:center;margin-top:2.2rem}
@media (max-width:820px){.mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}.mosaic a:first-child{grid-column:span 2;grid-row:span 2}}

/* pursuit band (quote on photo) */
.quote{position:relative;color:var(--white);background:var(--black) url("../../images/site/pasture-bw.webp") center/cover no-repeat;isolation:isolate;text-align:center;padding:clamp(4rem,11vw,8rem) 0}
.quote::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.66)}
.quote p{margin:0 auto;max-width:20ch;font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1.02;font-size:clamp(2.2rem,6.5vw,4.6rem);letter-spacing:.02em}
.quote p b{color:var(--red-bright);font-weight:700}
.quote small{display:block;margin-top:1.2rem;font-family:var(--display);letter-spacing:.3em;text-transform:uppercase;font-size:.95rem;color:#ddd}
@media (hover:none),(max-width:820px){.quote{background-attachment:scroll}}

/* contact */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.photo-frame{position:relative;margin:0 0 14px 14px}
.photo-frame::before{content:"";position:absolute;inset:14px -14px -14px 14px;border:6px solid var(--red-bright);z-index:0}
.photo-frame img{position:relative;z-index:1;width:100%}
.contact h2{margin-bottom:0}
.contact address{font-style:normal;font-size:1.15rem;margin:0 0 1.4rem;color:#e6e6e6}
.contact ul{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.7rem}
.contact li{display:flex;align-items:baseline;gap:.9rem;border-bottom:1px solid var(--line);padding-bottom:.7rem}
.contact li span{font-family:var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--red-bright);min-width:5.5rem;font-size:.95rem}
.contact li a{color:var(--white);text-decoration:none;font-family:var(--display);font-weight:500;font-size:1.7rem;letter-spacing:.04em}
.contact li a:hover{color:var(--red-bright)}
@media (max-width:820px){.split{grid-template-columns:1fr}}

/* sponsor */
.sponsor{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2.5rem;justify-content:center;text-align:center}
.sponsor img{width:200px;height:auto}
.sponsor p{margin:0;font-family:var(--display);font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:clamp(1.3rem,3vw,1.9rem);max-width:22ch;text-align:left;line-height:1.15}
.sponsor p b{color:var(--red)}
@media (max-width:640px){.sponsor p{text-align:center}}

/* ---------- Footer ---------- */
.site-footer{background:var(--black);color:#cfcfcf;border-top:6px solid var(--red);padding:2rem 0;font-size:.95rem}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.site-footer img{height:46px;width:auto}
.site-footer nav a{color:var(--white);text-decoration:none;font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;margin-right:1.2rem}
.site-footer nav a:hover{color:var(--red-bright)}
.site-footer p{margin:0}

/* ---------- Winners page ---------- */
.page-head{background:var(--black) url("../../images/site/hero-2024-bw.webp") center center/cover;color:var(--white);position:relative;isolation:isolate;padding:clamp(2.5rem,6vw,4.5rem) 0}
.page-head::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.8) 30%,rgba(0,0,0,.34) 52%,rgba(0,0,0,.28) 100%)}
.page-head h1{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:.95;font-size:clamp(3rem,9vw,6rem);margin:0}
.page-head p{margin:.8rem 0 0;max-width:52ch;color:#e4e4e4;font-size:1.1rem}
.years{position:sticky;top:var(--head-h);z-index:40;background:var(--white);border-bottom:1px solid #ddd;box-shadow:0 4px 14px rgba(0,0,0,.07)}
.years .wrap{display:flex;gap:.4rem;overflow-x:auto;padding-block:.6rem;scrollbar-width:thin}
.years a{flex:none;font-family:var(--display);font-weight:500;letter-spacing:.1em;text-decoration:none;color:var(--black);border:2px solid var(--black);padding:.25rem .85rem;font-size:1.05rem;transition:background .15s,color .15s}
.years a:hover,.years a.on{background:var(--red);border-color:var(--red);color:var(--white)}
.year{padding:clamp(2rem,5vw,3.5rem) 0;scroll-margin-top:calc(var(--head-h) + 58px)}
.year:nth-of-type(even){background:var(--paper)}
.year-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.4rem;border-bottom:4px solid var(--black);padding-bottom:.4rem}
.year-head h2{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,7vw,4.4rem);line-height:1;margin:0;letter-spacing:.02em;color:var(--black)}
.year-head h2::after{content:"";display:inline-block;width:.5em;height:.12em;background:var(--red);margin-left:.35em;vertical-align:.18em}
.year-head span{font-family:var(--display);letter-spacing:.2em;text-transform:uppercase;color:#555;font-size:.95rem}
.grid{column-count:4;column-gap:14px}
@media (max-width:1100px){.grid{column-count:3}}
@media (max-width:760px){.grid{column-count:2;column-gap:10px}}
@media (max-width:420px){.grid{column-count:1}}
.grid figure{margin:0 0 14px;break-inside:avoid;background:var(--white);border:1px solid #d9d9d9}
@media (max-width:760px){.grid figure{margin-bottom:10px}}
.grid a.ph{display:block;background:var(--black);position:relative;cursor:zoom-in}
.grid a.ph img{width:100%;height:auto;transition:opacity .2s}
.grid a.ph:hover img{opacity:.88}
.grid a.ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.grid a.ph:hover::after,.grid a.ph:focus-visible::after{transform:scaleX(1)}
.grid figcaption{padding:.7rem .8rem .8rem;font-size:.9rem;line-height:1.35;color:#333;border-top:3px solid var(--red)}
.grid figcaption strong{display:block;font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.05em;font-size:1rem;color:var(--black);line-height:1.2;margin-bottom:.15rem}
.grid figcaption strong+strong{font-size:.9rem;color:#555}
.grid figcaption span{display:block;margin-top:.05rem}
.grid figcaption span:first-of-type{margin-top:.45rem}

/* ---------- Lightbox ---------- */
dialog.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:var(--white)}
dialog.lb::backdrop{background:rgba(0,0,0,.93)}
.lb-inner{height:100%;display:grid;grid-template-rows:1fr auto;padding:clamp(.5rem,2vw,1.5rem);gap:.8rem}
.lb-stage{display:flex;align-items:center;justify-content:center;min-height:0;position:relative}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 0 0 6px var(--white),0 0 0 10px var(--red)}
.lb-cap{text-align:center;font-size:.95rem;min-height:1.5rem;max-width:70ch;margin:0 auto;color:#eee}
.lb-cap strong{display:block;font-family:var(--display);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:1.1rem}
.lb-cap span{display:block}
.lb button{position:absolute;background:rgba(0,0,0,.6);color:var(--white);border:2px solid var(--white);font-family:var(--display);font-size:1.6rem;line-height:1;width:48px;height:48px;cursor:pointer;display:grid;place-items:center;transition:background .15s}
.lb button:hover{background:var(--red);border-color:var(--red)}
.lb .x{top:12px;right:12px}
.lb .prev{left:12px;top:50%;transform:translateY(-50%)}
.lb .next{right:12px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;top:18px;left:18px;font-family:var(--display);letter-spacing:.15em;color:#ddd}
@media (max-width:600px){.lb .prev,.lb .next{top:auto;bottom:90px;transform:none}}