:root { --mint:#62CE8E; --cy:#52EEEE; --sand:#d8c39a; --bg:#070b09; --line:#1f2e26; --rust:#b0705c; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:#e9efe9; font-family:'Figtree', system-ui, sans-serif; font-size:18px;
  background:
    repeating-radial-gradient(ellipse at 20% 30%, transparent 0 26px, rgba(98,206,142,.06) 26px 27px),
    repeating-radial-gradient(ellipse at 85% 80%, transparent 0 34px, rgba(82,238,238,.05) 34px 35px), var(--bg); }
a { color:inherit; }

/* hero */
.hero { max-width:1180px; margin:0 auto; padding:64px 28px 30px; display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; }
.kicker { font-family:'JetBrains Mono', monospace; color:var(--mint); letter-spacing:3px; font-size:16px; }
h1 { font-family:'Rye', serif; font-weight:400; font-size:80px; line-height:.95; margin:10px 0 6px; color:var(--sand); }
h2 { font-family:'Rye', serif; font-weight:400; font-size:44px; margin:0; color:var(--cy); }
.when { font-size:30px; font-weight:800; margin:26px 0 10px; }
ul.facts { list-style:none; padding:0; margin:0; font-size:21px; line-height:1.75; }
.venue { margin-top:14px; font-size:20px; color:#b7c6bd; }
.venue a { text-decoration:none; } .venue a:first-child { color:#fff; font-weight:800; }
.venue a:hover { color:var(--cy); }
.buttons { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.buttons a { text-decoration:none; color:#e9efe9; border:1px solid #3c5a4a; padding:12px 22px; border-radius:6px; font-weight:600; font-size:18px; }
.buttons a.go { background:var(--mint); color:#04140b; border-color:var(--mint); }
.buttons a:hover { border-color:var(--cy); color:var(--cy); }
.buttons a.go:hover { background:var(--cy); color:#04140b; }
.countdown { font-family:'JetBrains Mono', monospace; color:var(--sand); font-size:17px; margin-top:16px; }

/* repeal day: mini wanted poster + rolled-out full poster */
.facts-row { display:flex; align-items:center; gap:34px; flex-wrap:wrap; }
.wanted-mini { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; width:150px; padding:18px 10px 12px; cursor:pointer;
  font-family:'Special Elite', Courier, monospace; color:#2b1d12; border:0; transform:rotate(-4deg); transition:transform .25s, box-shadow .25s;
  background:radial-gradient(ellipse at 30% 20%, #f3e8cf 0%, #e9dcc0 45%, #c9b386 100%);
  box-shadow:0 10px 22px rgba(0,0,0,.55), inset 0 0 22px rgba(110,70,20,.35);
  clip-path:polygon(0 2%, 8% 0, 40% 2%, 72% 0, 100% 2%, 98% 40%, 100% 75%, 97% 100%, 60% 98%, 25% 100%, 2% 98%, 0 60%); }
.wanted-mini:hover, .wanted-mini:focus-visible { transform:rotate(0) scale(1.06); outline:none; }
.wanted-mini .nail { position:absolute; top:6px; left:50%; width:9px; height:9px; margin-left:-4px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #bbb, #333); }
.wanted-mini .wm-w { font-family:'Rye', serif; font-size:30px; line-height:1; letter-spacing:1px; }
.wanted-mini .wm-r { font-family:'Rye', serif; font-size:15px; color:#8e1b12; border-top:2px solid #2b1d12; border-bottom:2px solid #2b1d12; padding:2px 6px; margin-top:4px; }
.wanted-mini .wm-d { font-size:14px; margin-top:4px; }
.wanted-mini .wm-c { font-size:12px; font-style:italic; opacity:.75; margin-top:4px; }

dialog.wanted { padding:0; border:0; background:transparent; overflow:visible; max-width:none; max-height:none; }
dialog.wanted::backdrop { background:rgba(3,6,4,.8); backdrop-filter:blur(3px); }
dialog.wanted[open]::backdrop { animation:fade .3s ease-out; }
@keyframes fade { from { opacity:0; } }
.poster { position:relative; width:min(620px, calc(100vw - 28px)); max-height:calc(100vh - 40px); overflow-y:auto; overscroll-behavior:contain;
  padding:44px 46px 34px; box-sizing:border-box; text-align:center; color:#2b1d12; font-family:'Special Elite', Courier, monospace; font-size:18px; line-height:1.55;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='.12'/></svg>"),
    radial-gradient(ellipse at 30% 15%, #f5ead1 0%, #e9dcc0 45%, #cdb98f 100%);
  box-shadow:0 30px 70px rgba(0,0,0,.7), inset 0 0 90px rgba(110,70,20,.4); border-radius:3px; }
.poster .nail { position:absolute; top:14px; width:15px; height:15px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #bbb, #333); }
.poster .nail.l { left:18px; } .poster .nail.r { right:18px; }
.poster .x { position:absolute; top:6px; right:40px; background:none; border:0; color:#5a4430; font-size:34px; line-height:1; cursor:pointer; }
.poster .x:hover { color:#8e1b12; }
.poster hr { border:0; border-top:3px double #2b1d12; margin:16px 0; }
.wp-head { font-family:'Rye', serif; font-size:104px; line-height:.9; letter-spacing:4px; margin-top:4px; }
.wp-sub { font-family:'Rye', serif; font-size:20px; letter-spacing:8px; margin-top:6px; }
.wp-name { font-family:'Smokum', 'Rye', serif; font-size:52px; line-height:1.05; color:#8e1b12; }
.wp-alias { font-size:16px; margin-top:6px; font-style:italic; }
.poster .stamp { display:inline-block; margin:14px 0 2px; font-family:'Rye', serif; font-size:30px; letter-spacing:4px; color:#a3271a; border:4px double #a3271a;
  padding:2px 16px; transform:rotate(-5deg); opacity:.78; mix-blend-mode:multiply; pointer-events:none; }
.poster h4 { font-family:'Rye', serif; font-weight:400; font-size:24px; margin:20px 0 6px; }
.poster h4::before, .poster h4::after { content:"\2605"; font-size:14px; color:#8e1b12; margin:0 10px; vertical-align:middle; }
.poster p { margin:0 0 10px; }
.poster ul { text-align:left; margin:0 auto; padding-left:22px; max-width:500px; }
.poster li { margin:6px 0; }
.poster b { font-weight:400; color:#8e1b12; }
.wp-reward { font-family:'Rye', serif; font-size:56px; line-height:1; margin-top:6px; }
.wp-rew { font-size:20px; }
.holster { margin-top:14px; font-family:'Rye', serif; font-size:20px; color:#e9dcc0; background:#2b1d12; border:2px solid #2b1d12; padding:10px 24px; cursor:pointer; }
.holster:hover { background:#8e1b12; border-color:#8e1b12; }
.wp-fine { font-size:13px; opacity:.7; margin-top:16px; }
.roll { position:absolute; top:0; left:50%; width:min(644px, calc(100vw - 4px)); height:30px; margin-left:calc(min(644px, calc(100vw - 4px)) / -2);
  border-radius:15px; opacity:0; pointer-events:none;
  background:linear-gradient(180deg, #8a6e44 0%, #e9dcc0 30%, #f5ead1 45%, #c9b386 70%, #6b5232 100%); box-shadow:0 8px 16px rgba(0,0,0,.5); }
@media (max-width:600px) {
  .poster { padding:40px 20px 26px; font-size:17px; } .wp-head { font-size:54px; letter-spacing:2px; } .wp-sub { font-size:16px; letter-spacing:5px; } .wp-name { font-size:36px; }
  .poster .stamp { font-size:24px; }
  .facts-row { gap:18px; } .wanted-mini { width:140px; } .wanted-mini .wm-w { font-size:25px; }
}
.badge { position:relative; aspect-ratio:1; border-radius:50%; border:2px dashed #3c5a4a; display:flex; align-items:center; justify-content:center; }
.badge img { width:60%; filter:drop-shadow(0 0 22px rgba(98,206,142,.35)); }
.badge .ring { position:absolute; inset:0; animation:spin 50s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.badge text { font-family:'JetBrains Mono', monospace; font-size:7.2px; letter-spacing:1px; fill:var(--mint); }

/* switchback trail */
.head { text-align:center; margin:60px 0 10px; padding:0 20px; }
.head h3 { font-family:'Rye', serif; font-weight:400; font-size:44px; margin:0; color:var(--sand); }
.head p { color:#9fb0a6; margin:6px 0 0; font-size:19px; }
.trail { position:relative; max-width:1040px; margin:0 auto; padding:30px 24px 40px; }
.trail svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.row { position:relative; display:grid; grid-template-columns:1fr 90px 1fr; align-items:center; margin:0 0 34px; }
.pin { grid-column:2; justify-self:center; width:48px; height:48px; border-radius:50%; background:var(--bg); border:3px solid var(--sand); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--sand); z-index:1; }
.row.L .pin { transform:translateX(70px); } .row.R .pin { transform:translateX(-70px); }
.card { display:flex; gap:16px; align-items:center; background:rgba(13,20,16,.92); border:1px solid var(--line); border-radius:10px; padding:12px; transition:border-color .2s, transform .2s; }
.card:hover { border-color:var(--mint); transform:translateY(-3px); }
.row.L .card { grid-column:1; grid-row:1; }
.row.R .card { grid-column:3; grid-row:1; flex-direction:row-reverse; text-align:right; }
.thumb { width:210px; flex:none; aspect-ratio:2/1; background-size:cover; background-position:center; border-radius:6px; display:block; }
.yr { font-family:'JetBrains Mono', monospace; font-size:15px; color:var(--mint); }
.nm { display:block; font-family:'Rye', serif; font-size:23px; margin-top:2px; line-height:1.1; text-decoration:none; }
.nm:hover { color:var(--cy); }
.ct { font-size:16px; color:#90a196; }
.note { font-size:16px; color:var(--sand); font-style:italic; margin-top:6px; }
.pics { display:inline-block; margin-top:8px; font-size:16px; color:var(--cy); text-decoration:none; border-bottom:1px dashed rgba(82,238,238,.5); }
.pics:hover { color:#fff; }
.detour .pin { border-style:dashed; color:var(--rust); border-color:var(--rust); }
.detour .thumb { filter:grayscale(1) brightness(.55); }
.detour .nm { color:#b49686; text-decoration:line-through; }
.finale { text-align:center; margin-top:10px; position:relative; }
.finale .pin { width:76px; height:76px; margin:0 auto; font-size:36px; background:var(--mint); border-color:var(--mint); position:relative;
  box-shadow:0 0 0 10px rgba(98,206,142,.16), 0 0 40px rgba(98,206,142,.7); animation:pulse 2.4s infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 16px rgba(98,206,142,.05), 0 0 50px rgba(98,206,142,.9); } }
.finale .k { font-family:'JetBrains Mono', monospace; color:var(--mint); letter-spacing:3px; margin-top:20px; font-size:16px; }
.finale .nm { font-size:42px; color:var(--cy); }
.finale .ct { font-size:18px; }
.finale .go { display:inline-block; margin-top:16px; background:var(--mint); color:#04140b; text-decoration:none; font-weight:800; font-size:20px; padding:12px 28px; border-radius:6px; }
.finale .go:hover { background:var(--cy); }

/* sponsors + footer */
.sponsors { max-width:900px; margin:60px auto 0; padding:0 24px; text-align:center; }
.sponsors h4 { font-family:'JetBrains Mono', monospace; color:var(--mint); letter-spacing:3px; font-weight:400; margin:0 0 12px; font-size:16px; }
.sponsors .row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0; }
.sponsors .row span, .sponsors .row a { border:1px dashed #2f463a; border-radius:6px; padding:20px 6px; color:#5d7a69; font-size:16px; text-decoration:none; }
.sponsors .row a { border-style:solid; color:#e9efe9; font-weight:600; }
.sponsors p a, footer a { color:var(--cy); font-size:17px; }
footer { text-align:center; margin:40px 0 60px; padding:0 20px; color:#5d7a69; }

@media (max-width:860px) {
  .hero { grid-template-columns:1fr; padding-top:40px; } .badge { max-width:260px; margin:0 auto; grid-row:1; }
  h1 { font-size:54px; } h2 { font-size:34px; }
  .row { grid-template-columns:60px 1fr; } .pin { grid-column:1 !important; transform:none !important; }
  .row.L .card, .row.R .card { grid-column:2; flex-direction:column; text-align:left; align-items:stretch; } .thumb { width:100%; }
}

/* trail cards open the brochure */
a.card { color:inherit; text-decoration:none; cursor:pointer; }
a.card > span:last-child, a.card .yr, a.card .nm, a.card .ct, a.card .note { display:block; }
a.card .pics { display:inline-block; }
a.card:hover .nm { color:var(--cy); }
a.card:focus-visible { outline:2px solid var(--cy); outline-offset:3px; }

/* teaser for rodeos further down the trail */
.soon { text-align:center; margin-top:40px; opacity:.75; }
.soon .pin { width:56px; height:56px; margin:0 auto; border-style:dashed; font-family:'Rye', serif; font-size:26px; }
.soon .k { font-family:'JetBrains Mono', monospace; color:var(--sand); letter-spacing:3px; margin-top:14px; font-size:15px; }
.soon .nm { font-size:28px; color:var(--sand); }

/* hall of fame link under the trail */
.hof-link { display:block; max-width:560px; margin:56px auto 0; padding:18px 24px; text-align:center; text-decoration:none; border-radius:8px;
  font-family:'Rye', serif; font-size:30px; color:#f3d98d; background:linear-gradient(180deg, #4b2f1b, #2f1d10); border:2px solid #6d5220;
  box-shadow:0 12px 26px rgba(0,0,0,.5), inset 0 0 0 1px rgba(217,178,92,.3); transition:transform .2s; }
.hof-link:hover { transform:translateY(-3px); color:#fff1c4; }
.hof-link span { font-size:26px; }
.hof-link small { display:block; font-family:'Figtree', sans-serif; font-size:16px; color:#cdb88a; margin-top:6px; }

/* past-rodeo brochure modal */
dialog.brochure { width:min(1040px, calc(100vw - 32px)); max-height:calc(100vh - 40px); padding:0; border-radius:14px; overflow:hidden;
  color:#e9efe9; background:#0b120e; border:1px solid #3c5a4a; box-shadow:0 40px 120px rgba(0,0,0,.8), 0 0 0 6px rgba(98,206,142,.06); }
dialog.brochure::backdrop { background:rgba(3,6,4,.72); backdrop-filter:blur(6px) saturate(.6); }
dialog.brochure[open] { animation:pop .25s ease-out; }
.bro-body { max-height:calc(100vh - 40px); overflow-y:auto; overscroll-behavior:contain; }
.bro-hero { background:#000; border-bottom:1px solid #1f2e26; }
.bro-hero img { display:block; width:100%; max-height:58vh; object-fit:contain; }
.bro-hero.dead img { filter:grayscale(.6); }
.bro-text { padding:26px 40px 34px; }
.bro-text .k { font-family:'JetBrains Mono', monospace; color:var(--mint); letter-spacing:3px; font-size:15px; }
.bro-text h2 { font-family:'Rye', serif; font-weight:400; font-size:48px; line-height:1.05; margin:6px 0 8px; color:var(--sand); }
.bro-text .when { font-size:21px; font-weight:800; }
.bro-text .where { font-size:18px; color:#b7c6bd; margin-top:6px; }
.bro-text .blurb { font-size:19px; line-height:1.55; color:#d6e2da; margin:16px 0 0; max-width:780px; }
.bro-text .chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.bro-text .chips span { font-size:16px; padding:6px 13px; border-radius:20px; background:rgba(98,206,142,.1); border:1px solid #2f463a; }
.bro-text h4 { font-family:'Rye', serif; font-weight:400; font-size:24px; color:var(--sand); margin:28px 0 10px; }
.lineup { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 26px; }
.lineup li { border-left:3px solid var(--mint); padding:2px 0 2px 12px; }
.lineup b { display:block; font-size:17px; color:#fff; }
.lineup span { display:block; font-size:16px; color:#b7c6bd; font-style:italic; line-height:1.4; }
.bro-sp { display:flex; flex-wrap:wrap; gap:10px; }
.bro-sp a { text-decoration:none; color:#2b1a09; font-weight:700; font-size:16px; padding:7px 14px; border-radius:4px; background:linear-gradient(180deg, #f3d98d, #c99c45); }
.bro-sp a:hover { background:#fff1c4; }
.bro-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.bro-links a { text-decoration:none; color:#e9efe9; border:1px solid #3c5a4a; padding:11px 20px; border-radius:6px; font-weight:600; font-size:17px; }
.bro-links a.go { background:var(--mint); color:#04140b; border-color:var(--mint); }
.bro-links a:hover { border-color:var(--cy); }
dialog.brochure .x { position:absolute; top:10px; right:12px; z-index:2; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.6); color:#fff; font-size:30px; line-height:1; }
dialog.brochure .nav { position:absolute; top:30vh; z-index:2; width:46px; height:64px; border:0; cursor:pointer; border-radius:8px;
  background:rgba(0,0,0,.55); color:#fff; font-size:40px; line-height:1; }
dialog.brochure .nav.prev { left:10px; } dialog.brochure .nav.next { right:10px; }
dialog.brochure .x:hover, dialog.brochure .nav:hover { background:var(--mint); color:#04140b; }
@media (max-width:700px) {
  .bro-text { padding:20px 20px 26px; } .bro-text h2 { font-size:34px; } .lineup { grid-template-columns:1fr; }
  dialog.brochure .nav { top:18vh; width:38px; height:52px; font-size:32px; }
  .hof-link { margin:44px 16px 0; font-size:24px; }
}
@keyframes pop { from { opacity:0; transform:translateY(12px) scale(.98); } }
dialog.brochure button:focus:not(:focus-visible) { outline:none; }