:root{--navy:#263B70;--sky:#C6D4FF;--ink:#10191E;--paper:#F5F4F0;--text:#28313A;--muted:#5B6578;--pale:#E8EDFA;--accent:#263B70;--on-accent:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font:18px/1.55 "Source Serif 4",Georgia,serif;
  background-image:radial-gradient(rgba(16,25,30,.05) 1px,transparent 1px);background-size:4px 4px}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
a{color:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.kicker{font:600 12px "IBM Plex Mono",monospace;letter-spacing:2px;text-transform:uppercase;color:var(--navy)}

/* masthead */
.masthead{border-bottom:4px double var(--ink);padding:18px 0 10px;text-align:center}
.meta{display:flex;justify-content:space-between;gap:10px;font:600 12px "IBM Plex Mono",monospace;letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:8px}
.title{display:block;text-decoration:none;font:400 clamp(60px,13vw,150px)/.85 Anton,Impact,sans-serif;color:var(--navy);margin:14px 0 4px;text-transform:uppercase}
.masthead.small .title{font-size:clamp(44px,8vw,84px)}
.tagline{font-style:italic;font-size:20px;margin:0}
.sections{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;font:600 12px "IBM Plex Mono",monospace;letter-spacing:1.5px;text-transform:uppercase;padding:10px 0 0}
.sections a{text-decoration:none}.sections a:hover{color:var(--navy);text-decoration:underline}

/* front */
.front{display:grid;grid-template-columns:1.1fr 1fr;border-bottom:1px solid var(--ink)}
.col{padding:30px 28px}.col+.col{border-left:1px solid var(--ink)}
h1{font:400 clamp(46px,6.4vw,84px)/.92 Anton,Impact,sans-serif;text-transform:uppercase;color:var(--ink);margin:12px 0 18px}
h1 span{color:var(--navy)}
.dek{font-size:21px;margin:0 0 26px;max-width:540px}

/* scoreboard */
.board{background:var(--ink);border:6px solid #2A343B;box-shadow:inset 0 0 0 2px #000;padding:18px 20px;color:var(--sky);font-family:DotGothic16,monospace;position:relative}
.board .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 0}
.board .row+.row{border-top:1px dashed #33414B}
.board .lbl{font-size:15px;letter-spacing:2px;color:#8FA2C8}
.board .num{font-size:52px;line-height:1;letter-spacing:4px;text-shadow:0 0 8px rgba(198,212,255,.6)}
.board .num.hot{color:#fff}.board .num.sm{font-size:26px}
.bulbs{position:absolute;top:-4px;left:12px;right:12px;display:flex;justify-content:space-between}
.bulbs i{width:6px;height:6px;border-radius:50%;background:var(--sky);box-shadow:0 0 6px var(--sky);animation:blink 1.4s infinite}
.bulbs i:nth-child(odd){animation-delay:.7s}
@keyframes blink{50%{opacity:.25}}

/* ticket signup */
.ticket{display:grid;grid-template-columns:1fr 92px;margin-top:28px;filter:drop-shadow(0 8px 0 rgba(16,25,30,.12));transform:rotate(-1deg)}
.t-main{background:var(--sky);padding:18px 20px;border-radius:10px 0 0 10px}
.t-stub{background:var(--navy);color:#fff;border-radius:0 10px 10px 0;border-left:3px dashed var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;font:400 26px/1 Anton,Impact,sans-serif;text-transform:uppercase}
.t-stub small{font:600 9px "IBM Plex Mono",monospace;letter-spacing:1.5px;margin:6px 0}
.t-head{display:flex;justify-content:space-between;font:600 11px "IBM Plex Mono",monospace;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy)}
.t-title{font:400 30px/1 Anton,Impact,sans-serif;text-transform:uppercase;color:var(--ink);margin:8px 0 12px}
.t-form{display:flex;gap:8px}
.t-form input{flex:1;min-width:0;border:2px solid var(--ink);background:var(--paper);font:16px "IBM Plex Mono",monospace;padding:10px}
.t-form button,.t-btn{border:0;background:var(--ink);color:#fff;font:400 18px Anton,Impact,sans-serif;letter-spacing:1px;text-transform:uppercase;padding:10px 16px;cursor:pointer;text-decoration:none;display:inline-block}
.t-form button:hover,.t-btn:hover{background:var(--navy)}
.t-fine{font:11px "IBM Plex Mono",monospace;margin-top:10px;color:var(--navy)}

/* trading card */
.cardwrap{perspective:1200px;display:flex;flex-direction:column;align-items:center;margin-top:10px}
.card{width:300px;height:420px;position:relative;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1);cursor:pointer;transform:rotate(2deg);border:0;padding:0;background:none;font:inherit;color:inherit;text-align:left}
.card.flip{transform:rotateY(180deg) rotate(-2deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;padding:12px;background:linear-gradient(135deg,#dfe7ff,#fff 40%,var(--sky) 60%,#fff);box-shadow:0 18px 40px rgba(16,25,30,.25)}
.face .in{height:100%;border:3px solid var(--accent);border-radius:8px;background:var(--accent);color:var(--on-accent);display:flex;flex-direction:column;overflow:hidden}
.c-top{display:flex;justify-content:space-between;font:600 10px "IBM Plex Mono",monospace;letter-spacing:1.5px;padding:10px 12px}
.c-art{flex:1;margin:0 10px;background:repeating-linear-gradient(115deg,rgba(255,255,255,.10) 0 10px,transparent 10px 20px);display:grid;place-items:center;position:relative;border:2px solid rgba(255,255,255,.55)}
.c-art b{font:400 112px/1 Anton,Impact,sans-serif;opacity:.9}
.c-art .sport{position:absolute;bottom:8px;left:8px;background:var(--paper);color:var(--ink);font:600 10px "IBM Plex Mono",monospace;letter-spacing:1px;padding:3px 7px;text-transform:uppercase}
.c-name{padding:12px;background:var(--paper);color:var(--ink);margin:10px;border-radius:2px}
.c-name h3{font:400 22px/1.05 Anton,Impact,sans-serif;text-transform:uppercase;margin:0 0 4px}
.c-name p{font:600 11px "IBM Plex Mono",monospace;letter-spacing:1px;margin:0;color:var(--navy);text-transform:uppercase}
.back{transform:rotateY(180deg)}
.back .in{background:var(--paper);color:var(--ink);padding:16px;font-size:13px;line-height:1.4}
.back h4{font:400 22px Anton,Impact,sans-serif;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.stats{width:100%;border-collapse:collapse;font:12px "IBM Plex Mono",monospace;margin-bottom:10px}
.stats td{border-bottom:1px solid var(--ink);padding:5px 0}.stats td+td{text-align:right;font-weight:600}
.back p{margin:0 0 8px}
.hint{font:600 11px "IBM Plex Mono",monospace;letter-spacing:1px;color:var(--muted);margin-top:14px}

/* sections */
section{padding:56px 0;border-bottom:1px solid var(--ink)}
.sechead{display:flex;justify-content:space-between;align-items:end;border-bottom:3px solid var(--ink);padding-bottom:8px;margin-bottom:10px;gap:12px;flex-wrap:wrap}
h2{font:400 clamp(36px,5vw,60px)/.95 Anton,Impact,sans-serif;text-transform:uppercase;color:var(--ink);margin:0}
.sechead span{font:600 12px "IBM Plex Mono",monospace;letter-spacing:1.5px;text-transform:uppercase}
.lineup{list-style:none;margin:0;padding:0}
.lineup li{display:grid;grid-template-columns:70px 1fr auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(16,25,30,.25)}
.lineup .no{font:400 44px/1 Anton,Impact,sans-serif;color:var(--c,var(--navy));text-align:center}
.lineup .pos{font:600 11px "IBM Plex Mono",monospace;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy)}
.lineup .role{font:600 20px/1.25 "Source Serif 4",Georgia,serif}
.lineup .role a{text-decoration:none}.lineup .role a:hover{text-decoration:underline}
.lineup .co{font:600 12px "IBM Plex Mono",monospace;letter-spacing:1px;text-transform:uppercase}
.lineup .lead{font:600 12px "IBM Plex Mono",monospace;color:var(--muted);white-space:nowrap}
.lineup li.star .no{background:var(--accent);color:var(--on-accent);border-radius:50%;width:58px;height:58px;display:grid;place-items:center;font-size:30px}
.box{width:100%;border-collapse:collapse;font:15px "IBM Plex Mono",monospace}
.box th{text-align:left;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;border-bottom:2px solid var(--ink);padding:8px 6px}
.box td{border-bottom:1px solid rgba(16,25,30,.25);padding:10px 6px}
.box td.n{text-align:right;font-weight:600;font-size:20px}
.box tr.final td{background:var(--ink);color:#fff;border:0}.box tr.final td.n{color:var(--sky);font-size:28px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.inbox p{margin:0 0 14px}
.inbox b{font:400 22px Anton,Impact,sans-serif;text-transform:uppercase;color:var(--navy);display:block}
.stubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:18px}
.stub{display:grid;grid-template-columns:70px 1fr;background:#fff;text-decoration:none;border:2px solid var(--ink);transition:transform .15s}
.stub:hover{transform:translateY(-3px) rotate(-.6deg)}
.stub .g{background:var(--c,var(--ink));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font:400 36px Anton,Impact,sans-serif;border-right:3px dashed var(--paper)}
.stub .g small{font:600 9px "IBM Plex Mono",monospace;letter-spacing:1.5px}
.stub div+div{padding:12px 14px}
.stub h3{font:600 17px/1.25 "Source Serif 4",Georgia,serif;margin:0 0 6px}
.stub p{margin:0;font:600 11px "IBM Plex Mono",monospace;letter-spacing:1px;text-transform:uppercase;color:var(--navy)}
.stub.next{border-style:dashed;background:transparent}.stub.next .g{background:var(--sky);color:var(--navy)}

/* edition article */
.article{max-width:760px;margin:0 auto}
.article .intro{font-size:21px}
.role-block{border-top:3px solid var(--ink);padding:22px 0}
.role-block .co{font:600 12px "IBM Plex Mono",monospace;letter-spacing:1.5px;text-transform:uppercase;color:var(--c,var(--navy))}
.role-block h3{font:400 32px/1.05 Anton,Impact,sans-serif;text-transform:uppercase;color:var(--ink);margin:6px 0 10px}
.pill{display:inline-block;background:var(--c,var(--navy));color:#fff;font:600 11px "IBM Plex Mono",monospace;letter-spacing:1px;text-transform:uppercase;padding:4px 9px;margin-bottom:12px}
.loc{font:600 12px "IBM Plex Mono",monospace;color:var(--muted);margin-left:8px}
.why{border-left:6px solid var(--c,var(--navy));background:#fff;padding:12px 16px;margin:14px 0}
.go{font:400 20px Anton,Impact,sans-serif;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:3px solid var(--c,var(--navy))}
.go:hover{color:var(--c,var(--navy))}
.quick{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px 0;border-bottom:1px solid rgba(16,25,30,.25)}
.company{display:grid;grid-template-columns:1fr 1.2fr;background:var(--navy);color:#fff;margin:26px 0}
.company .l{background:var(--paper);color:var(--ink);margin:18px;padding:22px}
.company .l h3{font:400 40px/1 Anton,Impact,sans-serif;text-transform:uppercase;margin:8px 0}
.company .r{padding:26px 26px 26px 8px}.company .r a{color:var(--sky)}
.company .r b{color:var(--sky)}
.community{background:var(--pale);padding:26px;margin:26px 0}
.closing{background:var(--ink);color:#fff;padding:26px}
.closing h2{color:#fff}
footer{padding:26px 0 40px;font:600 12px "IBM Plex Mono",monospace;letter-spacing:1px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;text-transform:uppercase}

@media(max-width:880px){
  .front,.two,.company{grid-template-columns:1fr}
  .col+.col{border-left:0;border-top:1px solid var(--ink)}
  .meta span:nth-child(2){display:none}
  .lineup li{grid-template-columns:52px 1fr}.lineup .lead{display:none}
  .lineup .no{font-size:34px}
  .board .num{font-size:40px}
  .company .r{padding:0 22px 22px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.stats.big{font-size:15px;margin-top:6px}.stats.big td{padding:11px 0}
.back-cta{font:400 20px Anton,Impact,sans-serif;text-transform:uppercase;color:var(--accent);margin-top:14px!important}
.c-art b{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;color:var(--on-accent)}
