:root { --night:#161515; --charcoal:#282624; --bone:#e5d8c2; --ember:#e05a1b; --gold:#b78542; --plum:#4d354f; }
* { box-sizing:border-box; } body { min-width:320px; margin:0; color:var(--bone); background:var(--night); font:15px "DM Mono",monospace; } .grain { position:fixed; z-index:10; inset:0; opacity:.17; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); } main { max-width:1320px; margin:0 auto; padding:9vw 6vw 7vw; } header { max-width:700px; margin-bottom:70px; } .eyebrow { margin:0 0 20px; color:var(--gold); font-size:12px; letter-spacing:.12em; text-transform:uppercase; } .eyebrow span { display:inline-block; width:4px; height:4px; margin:0 9px 2px; border-radius:50%; background:var(--ember); } h1 { margin:0; font:clamp(72px,11vw,154px)/.76 Rye,serif; letter-spacing:-.065em; text-transform:uppercase; } h1 em { color:var(--ember); font-family:Creepster,cursive; font-style:normal; letter-spacing:0; } h1 small { display:inline-block; margin-left:17px; color:var(--gold); font:clamp(22px,3vw,42px)/1 "DM Mono",monospace; letter-spacing:.1em; vertical-align:top; } .intro { max-width:395px; margin:28px 0 0; line-height:1.7; }
:root { --night:#161515; --charcoal:#282624; --bone:#e5d8c2; --ember:#e05a1b; --gold:#b78542; --plum:#4d354f; }
* { box-sizing:border-box; } body { min-width:320px; margin:0; color:var(--bone); background:var(--night); font:15px "DM Mono",monospace; } .grain { position:fixed; z-index:10; inset:0; opacity:.17; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); } .site-nav { display:flex; justify-content:space-between; align-items:center; gap:25px; max-width:1320px; margin:0 auto; padding:24px 6vw; border-bottom:1px solid rgba(229,216,194,.18); text-transform:uppercase; } .nav-brand { color:var(--bone); font:22px Rye,serif; letter-spacing:-.05em; text-decoration:none; white-space:nowrap; } .site-nav div { display:flex; gap:25px; } .site-nav div a { padding:7px 1px 5px; color:var(--bone); border-bottom:2px solid transparent; font-size:13px; font-weight:500; letter-spacing:.08em; text-decoration:none; } .site-nav div a:hover,.site-nav div a:focus-visible { color:var(--ember); border-bottom-color:var(--ember); } main { max-width:1320px; margin:0 auto; padding:9vw 6vw 7vw; } header { max-width:700px; margin-bottom:70px; } .eyebrow { margin:0 0 20px; color:var(--gold); font-size:12px; letter-spacing:.12em; text-transform:uppercase; } .eyebrow span { display:inline-block; width:4px; height:4px; margin:0 9px 2px; border-radius:50%; background:var(--ember); } h1 { margin:0; font:clamp(72px,11vw,154px)/.76 Rye,serif; letter-spacing:-.065em; text-transform:uppercase; } h1 em { color:var(--ember); font-family:Creepster,cursive; font-style:normal; letter-spacing:0; } h1 small { display:inline-block; margin-left:17px; color:var(--gold); font:clamp(22px,3vw,42px)/1 "DM Mono",monospace; letter-spacing:.1em; vertical-align:top; } .intro { max-width:395px; margin:28px 0 0; line-height:1.7; }
.portal { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .portal-card { position:relative; display:flex; aspect-ratio:1 / 1.08; flex-direction:column; justify-content:space-between; overflow:hidden; padding:23px; color:var(--bone); text-decoration:none; border:1px solid rgba(229,216,194,.32); background:var(--charcoal); } .portal-card::before { content:""; position:absolute; width:150%; height:150%; top:-80%; right:-65%; border-radius:50%; border:1px solid currentColor; opacity:.16; } .portal-card::after { content:""; position:absolute; inset:10px; border:1px solid rgba(229,216,194,.18); pointer-events:none; } .run-card { color:#f3d9ab; background:#42251f; } .run-card:hover { background:#5c2a1e; transform:translateY(-5px) rotate(-.6deg); box-shadow:11px 13px 0 rgba(0,0,0,.4); } .ride-card { color:#dfcce9; background:var(--plum); } .map-card { color:#d4d9bc; background:#273734; } .card-number { position:relative; z-index:1; color:var(--ember); font-size:12px; letter-spacing:.12em; } .portal-icon { position:relative; z-index:1; align-self:center; width:clamp(66px,8vw,110px); height:clamp(66px,8vw,110px); margin-top:auto; fill:none; stroke:var(--ember); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; } .ride-card .portal-icon { stroke:#c39dd2; } .map-card .portal-icon { stroke:#b6b985; } .card-title { position:relative; z-index:1; margin-top:auto; font:clamp(28px,3.3vw,48px)/.85 Rye,serif; letter-spacing:-.06em; text-transform:uppercase; } .card-action { position:relative; z-index:1; margin-top:17px; color:var(--gold); font-size:11px; letter-spacing:.08em; text-transform:uppercase; } .card-action b { font-size:17px; } article .card-action { color:rgba(229,216,194,.58); }
.portal { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .portal-card { position:relative; display:flex; aspect-ratio:1 / 1.08; flex-direction:column; justify-content:space-between; overflow:hidden; padding:23px; color:var(--bone); text-decoration:none; border:1px solid rgba(229,216,194,.32); background:var(--charcoal); } .portal-card::before { content:""; position:absolute; width:150%; height:150%; top:-80%; right:-65%; border-radius:50%; border:1px solid currentColor; opacity:.16; } .portal-card::after { content:""; position:absolute; inset:10px; border:1px solid rgba(229,216,194,.18); pointer-events:none; } .run-card { color:#f3d9ab; background:#42251f; } .run-card:hover { background:#5c2a1e; transform:translateY(-5px) rotate(-.6deg); box-shadow:11px 13px 0 rgba(0,0,0,.4); } .ride-card { color:#dfcce9; background:var(--plum); } .map-card { color:#d4d9bc; background:#273734; } .card-number { position:relative; z-index:1; color:var(--ember); font-size:12px; letter-spacing:.12em; } .portal-icon { position:relative; z-index:1; align-self:center; margin-top:auto; color:var(--ember); font-family:"Material Symbols Outlined"; font-size:clamp(66px,8vw,110px); font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 48; line-height:1; } .ride-card .portal-icon { color:#c39dd2; } .map-card .portal-icon { color:#b6b985; } .card-title { position:relative; z-index:1; margin-top:auto; font:clamp(28px,3.3vw,48px)/.85 Rye,serif; letter-spacing:-.06em; text-transform:uppercase; } .card-action { position:relative; z-index:1; margin-top:17px; color:var(--gold); font-size:11px; letter-spacing:.08em; text-transform:uppercase; } .card-action b { font-size:17px; } article .card-action { color:rgba(229,216,194,.58); }
.portal { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .portal-card { position:relative; display:flex; aspect-ratio:1 / 1.08; flex-direction:column; justify-content:space-between; overflow:hidden; padding:23px; color:var(--bone); text-decoration:none; border:1px solid rgba(229,216,194,.32); background:var(--charcoal); } .portal-card::before { content:""; position:absolute; width:150%; height:150%; top:-80%; right:-65%; border-radius:50%; border:1px solid currentColor; opacity:.16; } .portal-card::after { content:""; position:absolute; inset:10px; border:1px solid rgba(229,216,194,.18); pointer-events:none; } .run-card { color:#f3d9ab; background:#42251f; } .run-card:hover { background:#5c2a1e; transform:translateY(-5px) rotate(-.6deg); box-shadow:11px 13px 0 rgba(0,0,0,.4); } .ride-card { color:#dfcce9; background:var(--plum); } .map-card { color:#d4d9bc; background:#273734; } .card-number { position:relative; z-index:1; color:var(--ember); font-size:12px; letter-spacing:.12em; } .portal-icon { position:relative; z-index:1; align-self:center; margin-top:auto; color:var(--ember); font-family:"Material Symbols Outlined"; font-size:clamp(66px,8vw,110px); font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 48; line-height:1; } .ride-card .portal-icon { color:#c39dd2; } .map-card .portal-icon { color:#b6b985; } .card-title { position:relative; z-index:1; margin-top:auto; font:clamp(28px,3.3vw,48px)/.85 Rye,serif; letter-spacing:-.06em; text-transform:uppercase; } .card-action { position:relative; z-index:1; margin-top:17px; color:var(--gold); font-size:11px; letter-spacing:.08em; text-transform:uppercase; } .card-action b { font-size:17px; } article .card-action { color:rgba(229,216,194,.58); } .card-links { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:7px 15px; margin-top:17px; } .card-links a { color:#d4d9bc; font-size:11px; letter-spacing:.06em; text-decoration:none; text-transform:uppercase; } .card-links a:hover { color:var(--ember); } .card-links b { font-size:16px; }
.portal { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .portal-card { position:relative; display:flex; aspect-ratio:1 / 1.08; flex-direction:column; justify-content:space-between; overflow:hidden; padding:23px; color:var(--bone); text-decoration:none; border:1px solid rgba(229,216,194,.32); background:var(--charcoal); } .portal-card::before { content:""; position:absolute; width:150%; height:150%; top:-80%; right:-65%; border-radius:50%; border:1px solid currentColor; opacity:.16; } .portal-card::after { content:""; position:absolute; inset:10px; border:1px solid rgba(229,216,194,.18); pointer-events:none; } .run-card { color:#f3d9ab; background:#42251f; } .run-card:hover { background:#5c2a1e; transform:translateY(-5px) rotate(-.6deg); box-shadow:11px 13px 0 rgba(0,0,0,.4); } .ride-card { color:#dfcce9; background:var(--plum); } .map-card { color:#d4d9bc; background:#273734; } .card-number { position:relative; z-index:1; color:var(--ember); font-size:12px; letter-spacing:.12em; } .portal-icon { position:relative; z-index:1; align-self:center; margin-top:auto; color:var(--ember); font-family:"Material Symbols Outlined"; font-size:clamp(66px,8vw,110px); font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 48; line-height:1; } .ride-card .portal-icon { color:#c39dd2; } .map-card .portal-icon { color:#b6b985; } .card-title { position:relative; z-index:1; margin-top:auto; font:clamp(28px,3.3vw,48px)/.85 Rye,serif; letter-spacing:-.06em; text-transform:uppercase; } .card-action { position:relative; z-index:1; margin-top:17px; color:var(--gold); font-size:11px; letter-spacing:.08em; text-transform:uppercase; } .card-action b { font-size:17px; } article .card-action { color:rgba(229,216,194,.58); } .card-links { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:7px 15px; margin-top:17px; } .card-links a { color:#d4d9bc; font-size:11px; letter-spacing:.06em; text-decoration:none; text-transform:uppercase; } .card-links a:hover { color:var(--ember); } .card-links b { font-size:16px; } .map-preview { margin-top:78px; padding:25px; border:1px solid rgba(229,216,194,.26); background:#201e1c; } .map-preview-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:25px; } .map-preview .eyebrow { margin-bottom:11px; } .map-preview h2 { margin:0; font:clamp(44px,6vw,80px)/.78 Rye,serif; letter-spacing:-.06em; text-transform:uppercase; } .map-preview h2 em { color:var(--ember); font-family:Creepster,cursive; font-style:normal; letter-spacing:0; } .map-preview-heading a { padding:14px 16px; color:var(--night); background:var(--gold); font-size:12px; font-weight:500; letter-spacing:.07em; text-decoration:none; text-transform:uppercase; white-space:nowrap; } .map-preview-heading a b { font-size:17px; } .map-preview iframe { display:block; width:100%; height:560px; border:0; filter:grayscale(1) brightness(.55) contrast(1.22) sepia(.15) hue-rotate(340deg); }

@media (max-width:760px) { .map-preview { margin-top:50px; padding:14px; } .map-preview-heading { display:block; margin-bottom:18px; } .map-preview-heading a { display:inline-block; margin-top:19px; font-size:11px; } .map-preview iframe { height:430px; } }

/* Shared hover treatment for every portal destination. */
.portal-card:hover { transform:translateY(-5px) rotate(-.6deg); box-shadow:11px 13px 0 rgba(0,0,0,.4); }
.ride-card:hover { background:#5d3c64; }
.map-card:hover { background:#354744; }

.contest-card { color:#f0d1ad; background:#513128; }
.contest-card .portal-icon { color:#e0a24a; }
.contest-card:hover { background:#673522; }
.contest-preview { display:grid; grid-template-columns:1fr 1fr; gap:50px; margin-top:78px; padding:40px; border:1px solid rgba(229,216,194,.26); background:#36211c; }
.contest-preview .eyebrow { grid-column:1 / -1; margin:0; }
.contest-preview h2 { margin:0; font:clamp(46px,6vw,82px)/.78 Rye,serif; letter-spacing:-.06em; text-transform:uppercase; }
.contest-preview h2 em { color:var(--ember); font-family:Creepster,cursive; font-style:normal; letter-spacing:0; }
.contest-preview > p:last-child { max-width:410px; margin:0; align-self:end; line-height:1.7; }
.contest-preview .contest-disclaimer { grid-column:1 / -1; max-width:none; margin:12px 0 0; padding-top:18px; border-top:1px solid rgba(229,216,194,.22); color:#d5b78f; font-size:12px; }
.contest-preview > p:not(.contest-disclaimer) { max-width:410px; margin:0; align-self:end; line-height:1.7; }
.contest-dates { display:grid; grid-column:2; grid-template-columns:repeat(2,1fr); margin-top:22px; border-top:1px solid rgba(229,216,194,.28); border-bottom:1px solid rgba(229,216,194,.28); padding:13px 0; }
.contest-dates div { padding-left:14px; border-left:1px solid rgba(229,216,194,.28); }
.contest-dates div:first-child { padding-left:0; border-left:0; }
.contest-dates span { display:block; margin-bottom:6px; color:var(--gold); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.contest-dates b { font:14px Rye,serif; font-weight:400; }
.contest-categories { display:grid; grid-column:1 / -1; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:8px; }
.contest-categories div { padding:20px; border:1px solid rgba(229,216,194,.27); background:rgba(20,19,19,.28); }
.contest-categories span { display:block; margin-bottom:12px; color:var(--gold); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.contest-categories b { font:clamp(23px,3vw,38px)/.86 Rye,serif; font-weight:400; letter-spacing:-.05em; text-transform:uppercase; }

@media (max-width:760px) { .contest-dates { margin-top:22px; } .contest-categories { grid-template-columns:1fr; margin-top:18px; } }

@media (max-width:760px) { .site-nav { display:block; padding:20px 25px 17px; } .site-nav div { gap:17px; margin-top:13px; } .nav-brand { font-size:19px; } .site-nav div a { font-size:11px; } }

@media (max-width:760px) { .contest-preview { display:block; margin-top:50px; padding:27px 20px; } .contest-preview h2 { margin:18px 0 26px; } }
footer { display:flex; justify-content:space-between; gap:20px; padding:28px 6vw; border-top:1px solid rgba(229,216,194,.18); color:#b9aa95; font-size:12px; text-transform:uppercase; letter-spacing:.08em; } footer p { margin:0; } footer a { color:var(--bone); text-decoration:none; } footer a:hover { color:var(--ember); }
@media (max-width:760px) { main { padding:76px 25px 58px; } header { margin-bottom:44px; } .eyebrow { font-size:10px; } .intro { font-size:13px; } .portal { grid-template-columns:1fr; gap:14px; } .portal-card { min-height:265px; aspect-ratio:1.35 / 1; padding:20px; } .card-title { font-size:37px; } footer { display:block; padding:25px; font-size:10px; } footer a { display:block; margin-top:15px; font-size:12px; } }