@font-face{font-family:Bricolage;src:url(../fonts/bricolage-var-sub.woff2) format("woff2");font-weight:300 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:Dela;src:url(../fonts/dela-gothic-sub.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:Shrikhand;src:url(../fonts/shrikhand-sub.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrumentserif-italic-sub.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
:root{--blue:#1f4bff;--coral:#ff4f3a;--yellow:#ffd23f;--violet:#7a3cff;--pink:#ff8fcf;--paper:#fff6e6;--ink:#121a3a;--rx:0deg;--ry:0deg;color-scheme:light;scroll-behavior:smooth}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
body{font-family:Bricolage,Arial,sans-serif;color:var(--ink);background-color:var(--paper);background-image:radial-gradient(rgba(18,26,58,.2) 1px,transparent 1.3px);background-size:14px 14px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--yellow)}
.skip{position:fixed;z-index:50;top:10px;left:10px;padding:12px;background:var(--yellow);border:3px solid var(--ink);font-weight:800;transform:translateY(-200%)}
.skip:focus{transform:none}
.wrap{width:min(1240px,calc(100% - 48px));margin:0 auto}

/* nav */
.nav{position:absolute;z-index:10;inset:0 0 auto;height:84px}
.nav .wrap{height:100%;display:flex;align-items:center;gap:20px}
.logo{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;letter-spacing:-.04em;min-height:44px}
.logo svg{width:34px;height:34px}
.soon-pill{margin-left:auto;padding:7px 12px;border:2px solid var(--ink);background:var(--paper);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;transform:rotate(-2deg)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:3px solid var(--ink);color:var(--ink);font-weight:800;transition:transform .12s,box-shadow .12s}
.btn:hover,.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)!important}
.btn-nav{min-height:46px;padding:0 18px;background:var(--coral);font-size:12px;text-transform:uppercase;letter-spacing:.04em;box-shadow:5px 5px 0 var(--ink)}
.btn-nav:after{content:"";width:7px;height:7px;margin-left:10px;background:var(--yellow);border:1px solid var(--ink)}

/* hero */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(100svh,940px);padding:150px 0 120px}
.hero:before{content:"";position:absolute;z-index:-2;right:-8%;top:9%;width:62%;height:80%;background:var(--blue);border:5px solid var(--ink);transform:skewY(-7deg)}
.hero:after{content:"";position:absolute;z-index:4;left:0;right:0;bottom:0;height:42px;border-top:4px solid var(--ink);background:repeating-linear-gradient(135deg,var(--yellow) 0 12px,var(--ink) 12px 24px);background-size:34px 34px;animation:stripe 1.6s linear infinite}
.pitch{position:absolute;z-index:-1;width:min(90vw,1180px);right:-30%;top:16%;transform:perspective(900px) rotateY(-16deg) rotateX(7deg) skewY(-4deg);opacity:.85;fill:none;stroke:var(--paper);stroke-width:4}
.flood{position:absolute;z-index:-1;top:-1%;width:330px;height:310px;background:radial-gradient(circle at 50% 0,var(--yellow) 1.6px,transparent 2px);background-size:7px 7px;clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);pointer-events:none;animation:flicker 7s steps(2,end) infinite}
.flood:before{content:"";position:absolute;top:4px;left:50%;width:38px;height:28px;transform:translateX(-50%);border:4px solid var(--ink);background:var(--paper)}
.flood.l{left:56%;transform:rotate(23deg)}
.flood.r{right:2%;transform:rotate(-23deg);animation-delay:-3s}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"head board" "copy board";column-gap:40px;align-items:start}
.hero-head{grid-area:head;position:relative;z-index:3}
.hero-copy{grid-area:copy;position:relative;z-index:3}
.eyebrow{display:flex;align-items:center;gap:11px;margin:0;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.eyebrow:before,.live i{content:"";display:inline-block;width:10px;height:10px;background:var(--coral);border:2px solid var(--ink)}
h1{margin:30px 0 0;font-weight:400;line-height:.9}
.n1{display:block;font-family:Dela,Bricolage,sans-serif;font-size:clamp(46px,8vw,128px);letter-spacing:-.025em;line-height:.95;white-space:nowrap;color:var(--coral);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:6px 6px 0 var(--yellow),7px 7px 0 var(--ink)}
.n2{position:relative;display:inline-block;margin:22px 0 0 clamp(10px,7vw,110px);padding:6px 22px 14px;font-family:Shrikhand,Bricolage,serif;font-size:clamp(42px,5.4vw,88px);line-height:1;color:var(--ink);background:var(--yellow);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);text-shadow:3px 3px 0 var(--pink);transform:rotate(-4deg)}
.n2 small{position:absolute;left:calc(100% + 18px);bottom:-26px;display:grid;place-items:center;width:84px;height:84px;border:3px solid var(--ink);border-radius:50%;background:var(--coral);font:800 11px/1.1 Bricolage,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-shadow:none;transform:rotate(9deg);animation:bob 3.2s ease-in-out infinite}
.lead{max-width:36ch;margin:56px 0 28px;font-size:clamp(16px,1.35vw,19px);line-height:1.5;font-weight:700}
.btns{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.btn-main{min-height:62px;padding:0 26px;background:var(--coral);font-size:18px;box-shadow:6px 6px 0 var(--ink)}
.arrow{margin-left:12px;font-size:22px;transition:transform .25s}
.btn-main:hover .arrow{transform:translateX(6px)}
.btn-ghost{min-height:50px;padding:0 18px;background:var(--yellow);font-size:13px;letter-spacing:.04em;text-transform:uppercase;box-shadow:5px 5px 0 var(--ink)}
.fan-badge{display:grid;place-items:center;align-content:center;width:126px;height:126px;margin:0;padding:14px;text-align:center;background:var(--pink);border:3px solid var(--ink);border-radius:50%;box-shadow:4px 4px 0 var(--ink);transform:rotate(-8deg)}
.fan-badge strong{font:26px/1 Dela,sans-serif}
.fan-badge span{margin-top:4px;font-size:10px;line-height:1.15;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

/* matchday ticket */
.board{grid-area:board;position:relative;z-index:2;justify-self:end;width:min(100%,430px);margin-top:40px;padding:12px;background:var(--pink);border:5px solid var(--ink);box-shadow:10px 10px 0 var(--ink);transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) rotate(3deg);transition:transform .2s ease-out}
.board:before{content:"";position:absolute;inset:0;background:radial-gradient(var(--violet) 1.4px,transparent 1.6px);background-size:7px 7px;opacity:.6;pointer-events:none}
.board-top{position:relative;display:flex;justify-content:space-between;padding:5px 7px 12px;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.live{display:flex;align-items:center;gap:7px}
.live i{animation:blink 1.4s steps(2,end) infinite}
.score{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:13px 10px 15px;background:var(--paper);border-top:3px dashed var(--ink);border-bottom:3px dashed var(--ink)}
.side{display:flex;flex-direction:column;gap:6px}
.side:last-child{text-align:right}
.side span{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.side b{font-size:clamp(16px,1.7vw,23px);letter-spacing:-.05em}
.vs,.board-msg{font-family:"Instrument Serif",serif;font-style:italic}
.vs{font-size:22px}
.board-msg{position:relative;padding:8px 6px;font-size:15px}
.photo{position:relative;margin:0;aspect-ratio:4/4.3;overflow:hidden;background:var(--violet);border:3px solid var(--ink)}
.photo picture,.photo img{display:block;width:100%;height:100%}
.photo img{object-fit:cover;object-position:50% 22%}
.photo:before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(18,26,58,.82));pointer-events:none}
.photo:after{content:"";position:absolute;z-index:2;inset:10px;border:3px solid var(--paper);pointer-events:none}
.tagpill{position:absolute;z-index:3;top:20px;left:20px;padding:5px 9px;background:var(--yellow);border:3px solid var(--ink);font:italic 15px "Instrument Serif",serif;transform:rotate(-4deg)}
.photo figcaption{position:absolute;z-index:3;left:22px;right:22px;bottom:20px;color:var(--paper)}
.photo figcaption b{display:block;font:24px/1.05 Shrikhand,serif;text-shadow:2px 2px 0 var(--ink)}
.photo figcaption small{display:block;margin-top:4px;font-size:12px;font-weight:700}

/* scarf banner */
.scarf-banner{position:relative;z-index:2;overflow:hidden;height:62px;border-bottom:4px solid var(--ink);background:repeating-linear-gradient(90deg,var(--coral) 0 110px,var(--ink) 110px 220px,var(--blue) 220px 330px)}
.scarf-track{display:flex;width:max-content;height:100%;align-items:center;animation:marquee 26s linear infinite}
.scarf-track span{padding:0 18px;white-space:nowrap;color:var(--paper);font:clamp(17px,2.4vw,26px) Dela,sans-serif;text-shadow:2px 2px 0 var(--ink)}
.scarf-track b{padding:0 12px;color:var(--yellow)}

/* sticker album */
.album{width:min(1240px,calc(100% - 48px));margin:0 auto;padding:80px 0 90px}
.album-heading{position:relative;margin-bottom:34px}
.album-heading h2{margin:14px 0 0;font:clamp(40px,7vw,92px)/.98 Dela,sans-serif;letter-spacing:-.02em;color:var(--paper);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink)}
.album-heading h2 span{color:var(--coral)}
.album-note{position:absolute;right:0;bottom:8px;margin:0;padding:9px 13px;border:2px solid var(--ink);background:var(--yellow);font-size:12px;font-weight:800;transform:rotate(3deg)}
.sticker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 24px;padding:10px}
.social-sticker{--tile:var(--blue);--tile-ink:var(--paper);--tilt:0deg;position:relative;display:block;aspect-ratio:1.4;min-height:200px;perspective:900px;transform:rotate(var(--tilt));transition:transform .18s}
.social-sticker:hover{transform:rotate(0deg) translateY(-4px)}
.sticker-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.social-sticker:hover .sticker-inner,.social-sticker:focus-visible .sticker-inner,.social-sticker.is-flipped .sticker-inner{transform:rotateY(180deg)}
.sticker-front,.sticker-back{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:18px 20px;background:var(--tile);color:var(--tile-ink);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.sticker-front:after,.sticker-back:after{content:"";position:absolute;inset:8px;border:1px dashed currentColor;opacity:.55;pointer-events:none}
.sticker-back{transform:rotateY(180deg);background:var(--paper);color:var(--ink);background-image:radial-gradient(rgba(18,26,58,.18) 1px,transparent 1.3px);background-size:9px 9px}
.sticker-number{position:absolute;top:17px;left:20px;font-size:10px;font-weight:800;letter-spacing:.13em}
.social-name{font:clamp(24px,2.6vw,36px)/1 Dela,sans-serif;letter-spacing:-.02em}
.social-handle{margin-top:8px;font:clamp(15px,1.4vw,19px) Shrikhand,serif}
.sticker-open{position:absolute;right:20px;bottom:17px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid currentColor}
.sticker-back strong{margin-top:18px;font:clamp(26px,3vw,40px)/1 Dela,sans-serif}
.front-count{margin-top:10px;padding:3px 8px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--tile-ink);color:var(--tile);border-radius:999px;position:relative;z-index:1}
.count-label{margin-top:6px;font-size:13px;font-weight:800}
.peel{position:absolute;z-index:3;top:0;right:0;width:40px;height:40px;background:linear-gradient(225deg,var(--paper) 0 49%,var(--ink) 50% 53%,transparent 54%);transform-origin:top right;transition:transform .2s;pointer-events:none}
.social-sticker:hover .peel,.social-sticker.is-flipped .peel{transform:scale(1.3)}
.sticker-tiktok{--tile:var(--ink);--tile-ink:var(--yellow);--tilt:-2deg}
.sticker-instagram{--tile:var(--pink);--tile-ink:var(--ink);--tilt:1.5deg}
.sticker-youtube{--tile:var(--coral);--tile-ink:var(--ink);--tilt:-1deg}
.sticker-facebook{--tile:var(--blue);--tile-ink:var(--paper);--tilt:1.5deg}
.sticker-threads{--tile:var(--violet);--tile-ink:var(--paper);--tilt:-2deg}
.sticker-linkedin{--tile:var(--yellow);--tile-ink:var(--ink);--tilt:2deg}

/* footer */
.foot{background:var(--yellow);border-top:5px solid var(--ink)}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:84px;font-size:13px;font-weight:800}
.foot a{display:inline-flex;align-items:center;min-height:44px;border-bottom:2px solid var(--ink)}

@keyframes stripe{to{background-position:68px 0}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes flicker{0%,100%{opacity:.95}48%{opacity:.75}50%{opacity:.9}73%{opacity:.8}}
@keyframes bob{50%{transform:rotate(14deg) translateY(-5px)}}
@keyframes blink{50%{opacity:.25}}

@media(hover:none){
  .social-sticker:not(.is-flipped):hover .sticker-inner{transform:none}
  .social-sticker:not(.is-flipped):hover .peel{transform:none}
  .social-sticker:hover{transform:rotate(var(--tilt))}
}

/* tablet and phone */
@media(max-width:860px){
  .wrap,.album{width:calc(100% - 36px)}
  .nav{height:72px}
  .soon-pill{display:none}
  .btn-nav{margin-left:auto}
  .hero{min-height:0;padding:104px 0 96px}
  .hero:before{right:-30%;top:33%;width:120%;height:46%}
  .pitch{width:170vw;right:-60%;top:36%}
  .flood{width:220px;height:230px}
  .flood.l{left:auto;right:30%;top:24%}
  .flood.r{right:-14%;top:24%}
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"head" "board" "copy";row-gap:0}
  h1{margin-top:22px}
  .n1{font-size:clamp(40px,13.4vw,92px);-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--yellow),5px 5px 0 var(--ink)}
  .n2{font-size:clamp(36px,11vw,72px);margin:16px 0 0 4vw}
  .n2 small{left:auto;right:-14px;bottom:-56px;width:72px;height:72px;font-size:10px}
  .board{justify-self:center;width:min(92%,420px);margin:76px 0 0}
  .hero-copy{margin-top:46px}
  .lead{max-width:none;margin:0 0 24px;padding:16px 18px;background:var(--paper);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);font-size:17px}
  .btns{display:grid;grid-template-columns:1fr auto;gap:18px 14px;align-items:center}
  .btn-main{grid-column:1/-1;min-height:66px;font-size:20px}
  .btn-ghost{min-height:56px;font-size:13px}
  .fan-badge{width:112px;height:112px;justify-self:end}
  .fan-badge strong{font-size:23px}
  .album{padding:60px 0 64px}
  .album-note{position:static;display:inline-block;margin-top:16px}
  .sticker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;padding:6px 4px}
  .social-sticker{aspect-ratio:1.05;min-height:150px}
  .sticker-front,.sticker-back{padding:14px;box-shadow:4px 4px 0 var(--ink)}
  .sticker-number{top:13px;left:14px;font-size:8px}
  .sticker-open{right:14px;bottom:12px;font-size:10px}
  .social-name{font-size:clamp(19px,5.6vw,30px)}
  .social-handle{font-size:clamp(12px,3.6vw,17px);word-break:break-word}
  .front-count{margin-top:6px;padding:2px 6px;font-size:10px}
  .foot .wrap{min-height:72px;font-size:12px}
}
@media(max-width:380px){
  .btns{grid-template-columns:1fr}
  .fan-badge{justify-self:center}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  :root{scroll-behavior:auto}
  .board{transform:rotate(3deg)}
}

.h1-sub{max-width:34ch;margin:26px 0 0;font-size:clamp(15px,1.4vw,18px);font-weight:700;line-height:1.35}