/* Rad Knight - skate zine x medieval manuscript */
:root{
  --ink:#16091f;
  --violet:#2a1150;
  --violet-2:#4a2590;
  --pink:#ff2e7e;
  --yellow:#ffd83a;
  --paper:#f6eddc;
  --white:#fff;
  --bd:3px solid var(--ink);
  --sh:6px 6px 0 var(--ink);
  --display:"Bowlby One",Impact,"Arial Black",sans-serif;
  --body:"Archivo",system-ui,sans-serif;
  --black:"UnifrakturCook",serif;
  --wrap:min(1180px,100% - 32px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--ink);font:500 17px/1.5 var(--body);overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--yellow);padding:8px 14px;border:var(--bd)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* ---------- shared bits ---------- */
.dots{background-image:radial-gradient(rgba(22,9,31,.16) 1.3px,transparent 1.5px);background-size:11px 11px}
.dots-light{background-image:radial-gradient(rgba(255,255,255,.09) 1.3px,transparent 1.5px);background-size:11px 11px}
.kicker{font:700 1.5rem/1 var(--black);margin:0 0 .35rem;letter-spacing:.01em}
.h2{font:400 clamp(2.4rem,7vw,5.4rem)/.92 var(--display);text-transform:uppercase;margin:0;letter-spacing:-.01em}
.lede{font-size:clamp(1.05rem,2.2vw,1.25rem);max-width:34ch;margin:1rem 0 0;font-weight:600}
.label{font:800 .78rem/1 var(--body);font-stretch:75%;text-transform:uppercase;letter-spacing:.08em}
.sticker{display:inline-block;background:var(--yellow);color:var(--ink);border:var(--bd);border-radius:999px;padding:.45em 1em;font:800 .8rem/1 var(--body);font-stretch:80%;text-transform:uppercase;letter-spacing:.06em;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.zig{position:relative}
.zig::before{content:"";position:absolute;left:0;right:0;top:-15px;height:16px;z-index:2;
  background:conic-gradient(from 135deg at 50% 0,var(--zig) 90deg,transparent 0) 0 0/24px 16px repeat-x}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;text-decoration:none;border:var(--bd);border-radius:14px;font:400 1.15rem/1 var(--display);text-transform:uppercase;padding:1rem 1.4rem;box-shadow:var(--sh);transition:transform .12s ease,box-shadow .12s ease;cursor:pointer}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.btn svg{width:1.4em;height:1.4em;flex:none}
.btn-steam{background:var(--yellow);color:var(--ink)}
.btn-big{font-size:clamp(1.3rem,3.4vw,1.9rem);padding:1.15rem 1.8rem;border-width:4px;box-shadow:8px 8px 0 var(--ink)}
.btn-ghost{background:var(--white);color:var(--ink)}
.btn-pink{background:var(--pink);color:var(--white)}
.btn-ink{background:var(--ink);color:var(--yellow);border-color:var(--ink)}

/* ---------- top bar ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px max(16px,calc((100% - 1180px)/2));background:var(--ink);border-bottom:3px solid var(--yellow);transform:translateY(-110%);transition:transform .25s ease}
.bar.on{transform:none}
.bar img{height:38px;width:auto}
.bar nav{display:flex;gap:22px}
.bar nav a{color:var(--paper);text-decoration:none;font:800 .8rem/1 var(--body);font-stretch:80%;text-transform:uppercase;letter-spacing:.08em}
.bar nav a:hover{color:var(--yellow)}
.bar .btn{font-size:.9rem;padding:.6rem .9rem;box-shadow:3px 3px 0 var(--pink);border-color:var(--yellow);border-radius:10px}
.bar .btn:hover{box-shadow:5px 5px 0 var(--pink)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(100svh,980px);display:grid;place-items:center;text-align:center;color:var(--paper);overflow:hidden;isolation:isolate;padding:56px 0 84px}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;filter:saturate(1.2)}
.hero-tint{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(ellipse at 50% 45%,rgba(42,17,80,.62),rgba(22,9,31,.55) 75%),
  linear-gradient(180deg,rgba(22,9,31,.25),rgba(22,9,31,.7))}
.hero-tint::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,46,126,.22) 1.3px,transparent 1.6px);background-size:9px 9px;mix-blend-mode:screen}
.hero-inner{width:var(--wrap);display:flex;flex-direction:column;align-items:center}
.hero .tagline{margin:0 0 .3rem;color:var(--yellow);font-size:clamp(.8rem,1.6vw,1rem)}
.hero h1{margin:0;line-height:0}
.hero .logo{width:min(92vw,calc(42svh * 1.55),760px);height:auto;filter:drop-shadow(0 10px 0 rgba(0,0,0,.45)) drop-shadow(0 0 60px rgba(255,216,58,.18))}
.hook{font:400 clamp(2rem,6.2vw,4rem)/.95 var(--display);text-transform:uppercase;margin:.3rem 0 0;color:var(--white);text-shadow:4px 4px 0 var(--pink)}
.hook em{font-style:normal;color:var(--yellow)}
.hero .sub{font-size:clamp(1.02rem,2.2vw,1.22rem);font-weight:600;max-width:40ch;margin:.9rem auto 1.4rem;color:var(--paper)}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center}
.fine{margin:1.1rem 0 0;font:700 .8rem/1.4 var(--body);font-stretch:85%;text-transform:uppercase;letter-spacing:.08em;color:rgba(246,237,220,.75)}
.hero .stk{position:absolute;z-index:1}
.stk-1{left:6%;top:22%;transform:rotate(-9deg)}
.stk-2{right:7%;top:18%;transform:rotate(7deg);background:var(--pink)!important;color:var(--white)}
.stk-3{left:9%;bottom:20%;transform:rotate(5deg);background:var(--white)!important}
.hero .rider{position:absolute;right:2%;bottom:4%;width:clamp(150px,15vw,230px);z-index:1;filter:drop-shadow(5px 6px 0 rgba(0,0,0,.5))}
.scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font:800 .72rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:rgba(246,237,220,.7);text-decoration:none}

/* ---------- ticker ---------- */
.ticker{background:var(--yellow);border-block:4px solid var(--ink);overflow:hidden;white-space:nowrap;position:relative;z-index:3}
.ticker-track{display:inline-flex;animation:tick 28s linear infinite;padding:.7rem 0}
.ticker span{font:400 clamp(1.1rem,2.6vw,1.6rem)/1 var(--display);text-transform:uppercase;padding-right:1.4rem}
.ticker b{color:var(--pink);font-weight:400;padding-right:1.4rem}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- trailer ---------- */
.trailer{background:var(--pink);padding:clamp(56px,9vw,110px) 0;--zig:var(--pink)}
.trailer .head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(26px,4vw,44px);color:var(--ink)}
.trailer .h2{color:var(--white);text-shadow:5px 5px 0 var(--ink)}
.trailer .lede{margin:0;max-width:30ch}
.frame{position:relative;border:5px solid var(--ink);border-radius:18px;box-shadow:12px 12px 0 var(--ink);background:var(--ink);transform:rotate(-1deg);overflow:hidden}
.frame::before,.frame::after{content:"";position:absolute;width:120px;height:30px;background:rgba(255,248,214,.82);z-index:3;border:2px solid rgba(22,9,31,.25)}
.frame::before{left:-26px;top:16px;transform:rotate(-38deg)}
.frame::after{right:-26px;bottom:16px;transform:rotate(-38deg)}
.video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--ink)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{position:absolute;inset:0;border:0;padding:0;margin:0;cursor:pointer;background:none;display:block;width:100%}
.play img{width:100%;height:100%;object-fit:cover}
.play::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(22,9,31,.6),transparent 55%)}
.play-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:clamp(78px,11vw,128px);aspect-ratio:1;border-radius:50%;background:var(--yellow);border:5px solid var(--ink);box-shadow:6px 6px 0 var(--ink);display:grid;place-items:center;transition:transform .15s ease}
.play:hover .play-btn{transform:translate(-50%,-50%) scale(1.07) rotate(-4deg)}
.play-btn svg{width:42%;margin-left:8%}
.play-tag{position:absolute;left:18px;bottom:16px;z-index:2;color:var(--white);font:400 clamp(1rem,2.4vw,1.5rem)/1 var(--display);text-transform:uppercase;text-align:left}
.trailer .after{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:center;margin-top:clamp(34px,5vw,52px)}
.trailer .after a.text{font-weight:800;color:var(--ink)}

/* ---------- rules (how it plays) ---------- */
.rules{background:var(--paper);padding:clamp(60px,9vw,120px) 0;--zig:var(--paper)}
.rules .head{text-align:center;margin-bottom:clamp(30px,5vw,56px)}
.rules .lede{margin-inline:auto}
.rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3.4vw,40px)}
.rule{background:var(--white);border:var(--bd);border-radius:18px;box-shadow:var(--sh);padding:12px 12px 20px;position:relative}
.rule:nth-child(odd){transform:rotate(-.8deg)}
.rule:nth-child(even){transform:rotate(.8deg)}
.rule video{width:100%;aspect-ratio:16/9;object-fit:cover;border:var(--bd);border-radius:10px;background:var(--ink)}
.rule .num{position:absolute;top:-18px;left:-14px;width:54px;height:54px;border-radius:50%;background:var(--yellow);border:var(--bd);box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center;font:400 1.15rem/1 var(--display);z-index:2}
.rule h3{font:400 clamp(1.5rem,3.4vw,2.3rem)/1 var(--display);text-transform:uppercase;margin:16px 6px 6px}
.rule h3 span{color:var(--pink)}
.rule p{margin:0 6px;font-weight:600;font-size:1.02rem}

/* ---------- worlds ---------- */
.worlds{background:var(--violet);color:var(--paper);padding:clamp(60px,9vw,120px) 0;--zig:var(--violet);overflow-x:clip}
.worlds .head{display:grid;grid-template-columns:1fr auto;gap:20px 40px;align-items:end;margin-bottom:clamp(36px,6vw,64px)}
.worlds .kicker{color:var(--yellow)}
.worlds .h2{color:var(--white)}
.worlds .h2 em{font-style:normal;color:var(--yellow)}
.worlds .lede{margin:0;color:var(--paper);max-width:32ch}
.route{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);padding-top:10px}
.route-line{position:absolute;left:4%;right:4%;top:46%;height:8px;z-index:0;background:repeating-linear-gradient(90deg,var(--yellow) 0 22px,transparent 22px 36px);border-radius:4px}
.stop{position:relative;z-index:1;background:var(--paper);color:var(--ink);border:var(--bd);border-radius:14px;padding:10px 10px 16px;box-shadow:6px 6px 0 #0c0512}
.stop:nth-child(2){transform:rotate(-2deg) translateY(10px)}
.stop:nth-child(3){transform:rotate(1.5deg) translateY(-8px)}
.stop:nth-child(4){transform:rotate(-1deg) translateY(14px)}
.stop:nth-child(5){transform:rotate(2deg) translateY(-4px)}
.stop img{width:100%;aspect-ratio:4/3;object-fit:cover;border:var(--bd);border-radius:8px;filter:brightness(1.25) saturate(1.15)}
.stop .no{position:absolute;top:-16px;right:-10px;background:var(--pink);color:var(--white);border:var(--bd);border-radius:999px;padding:.4em .75em;font:400 .95rem/1 var(--display);box-shadow:3px 3px 0 var(--ink)}
.stop h3{font:400 clamp(1.35rem,2.4vw,1.8rem)/1 var(--display);text-transform:uppercase;margin:12px 4px 4px}
.stop p{margin:0 4px;font-size:.95rem;font-weight:600;line-height:1.4}
.gold{display:flex;gap:16px;align-items:center;justify-content:center;margin:clamp(40px,6vw,64px) auto 0;max-width:720px;background:var(--ink);border:3px solid var(--yellow);border-radius:16px;padding:16px 22px;font-weight:700;color:var(--paper)}
.gold b{color:var(--yellow)}
.gold .coin{flex:none;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff4b0,var(--yellow) 45%,#c58d08);border:3px solid var(--ink);box-shadow:0 0 0 3px var(--yellow)}

/* ---------- bestiary ---------- */
.bestiary{background:var(--ink);color:var(--paper);padding:clamp(60px,9vw,120px) 0;--zig:var(--ink)}
.bestiary .head{text-align:center;margin-bottom:clamp(36px,6vw,64px)}
.bestiary .kicker{color:var(--pink)}
.bestiary .h2{color:var(--yellow)}
.bestiary .lede{margin-inline:auto;color:var(--paper)}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,28px)}
.card{position:relative;background:var(--paper);color:var(--ink);border:4px solid var(--ink);outline:3px solid var(--paper);border-radius:16px;padding:0 0 16px;display:flex;flex-direction:column;transition:transform .18s ease}
.card:nth-child(3n+1){transform:rotate(-1.4deg)}
.card:nth-child(3n+2){transform:rotate(1deg)}
.card:nth-child(3n){transform:rotate(-.4deg)}
.card:hover{transform:rotate(0) translateY(-6px) scale(1.02);z-index:2}
.card .top{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:var(--bd);background:var(--c,var(--violet-2));color:var(--white);border-radius:11px 11px 0 0}
.card .top .label{font-size:.72rem}
.card .stage{height:200px;display:grid;place-items:end center;padding:14px 10px 6px;background:radial-gradient(circle at 50% 70%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),var(--paper)}
.card.dots .stage{background-color:transparent}
.card h3{font:400 1.35rem/1 var(--display);text-transform:uppercase;margin:12px 14px 6px}
.card p{margin:0 14px;font-size:.95rem;font-weight:600;line-height:1.38}
.card .where{margin:12px 14px 0;align-self:flex-start;font-size:.7rem;padding:.4em .8em;box-shadow:2px 2px 0 var(--ink)}
.card.boss{grid-column:span 2;grid-row:span 2;background:var(--yellow)}
.card.boss h3{font-size:clamp(1.6rem,3vw,2.4rem)}
.card.boss p{font-size:1.05rem}
.card.boss .stage{height:auto;flex:1;min-height:260px;place-items:center;background:radial-gradient(circle at 50% 65%,rgba(255,255,255,.75),transparent 70%)}
.card.boss .top{background:var(--pink)}
.card.mystery{background:var(--violet-2);color:var(--paper)}
.card.mystery .stage{background:radial-gradient(circle at 50% 60%,rgba(255,216,58,.35),transparent 65%)}
.card.mystery .q{font:400 7rem/1 var(--display);color:var(--ink);text-shadow:4px 4px 0 var(--yellow);align-self:center}
.card.mystery a{color:var(--yellow);font-weight:800}
.stamp{position:absolute;right:16px;top:58px;font:400 1.3rem/1 var(--display);color:var(--pink);border:4px solid var(--pink);border-radius:10px;padding:.25em .55em;transform:rotate(12deg);background:rgba(255,255,255,.6)}

/* sprite sheets: one row of frames, stepped */
.sprite{height:var(--sz,170px);aspect-ratio:var(--w) / var(--h);overflow:hidden;flex:none}
.sprite img{height:100%;width:calc(100% * var(--f));max-width:none;animation:play var(--d,1.4s) steps(var(--f)) infinite}
.sprite.still img{animation:bob 2.4s ease-in-out infinite;width:100%}
@keyframes play{to{transform:translateX(-100%)}}
@keyframes bob{50%{transform:translateY(-8px)}}

/* ---------- creators ---------- */
.creators{background:var(--yellow);padding:clamp(60px,9vw,110px) 0;--zig:var(--yellow)}
.creators .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
.creators .h2{color:var(--ink)}
.creators .h2 span{color:var(--pink)}
.creators .lede{max-width:40ch}
.creators .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.share-card{background:var(--white);border:4px solid var(--ink);border-radius:18px;box-shadow:10px 10px 0 var(--ink);padding:22px;transform:rotate(1.5deg)}
.share-card h3{font:400 1.5rem/1.02 var(--display);text-transform:uppercase;margin:0 0 8px}
.share-card p{margin:0 0 16px;font-weight:600}
.share-card .btn{width:100%}
.share-card .ok{display:block;min-height:1.4em;margin-top:10px;font-weight:800;color:var(--pink);text-align:center}

/* ---------- crew ---------- */
.crew{background:var(--paper);padding:clamp(60px,9vw,110px) 0;--zig:var(--paper)}
.crew .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px;margin-bottom:clamp(30px,5vw,50px)}
.crew .lede{margin:0;max-width:36ch}
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,32px)}
.person{background:var(--white);border:var(--bd);border-radius:16px;box-shadow:var(--sh);padding:22px 22px 24px}
.person:nth-child(2){transform:rotate(1deg)}
.person:nth-child(3){transform:rotate(-1deg)}
.person .role{display:inline-block;margin-bottom:12px}
.person:nth-child(1) .role{background:var(--yellow)}
.person:nth-child(2) .role{background:var(--pink);color:var(--white)}
.person:nth-child(3) .role{background:var(--violet-2);color:var(--white)}
.person h3{font:400 clamp(1.7rem,3.2vw,2.4rem)/1 var(--display);text-transform:uppercase;margin:0 0 8px}
.person p{margin:0;font-weight:600}

/* ---------- final ---------- */
.final{position:relative;background:var(--violet);color:var(--paper);padding:clamp(70px,10vw,130px) 0;overflow-x:clip;--zig:var(--violet)}
.final .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,5vw,60px);align-items:center}
.final .sprite{--sz:clamp(220px,32vw,400px);margin-inline:auto;filter:drop-shadow(8px 10px 0 rgba(0,0,0,.45))}
.final .kicker{color:var(--yellow)}
.final .h2{color:var(--white);text-shadow:5px 5px 0 var(--pink)}
.final .lede{color:var(--paper)}
.final .acts{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:28px}
.final .yt{font-weight:800;color:var(--yellow)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(246,237,220,.75);padding:34px 0 110px;font-size:.92rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center;justify-content:space-between}
footer img{height:44px;width:auto}
footer .about{display:block;border-bottom:1px solid rgba(246,237,220,.15);padding-bottom:22px;margin-bottom:22px}
footer .about h2{margin:0 0 8px;color:var(--yellow)}
footer .about p{margin:0;max-width:78ch;line-height:1.6}
footer nav{display:flex;flex-wrap:wrap;gap:18px}
footer a{color:var(--paper);font-weight:700;text-decoration:none}
footer a:hover{color:var(--yellow)}

/* ---------- mobile sticky ---------- */
.dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:none;transform:translateY(140%);transition:transform .25s ease}
.dock.on{transform:none}
.dock .btn{width:100%;font-size:1.1rem;padding:.95rem 1rem}

/* ---------- responsive ---------- */
@media (max-width:1240px){.hero .rider{display:none}}
@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card.boss{grid-row:span 1}
  .route{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .route-line{display:none}
  .creators .grid,.final .grid{grid-template-columns:1fr}
  .final .grid{text-align:center}
  .final .acts{justify-content:center}
  .final .lede{margin-inline:auto}
  .bar nav{display:none}
  .hero .stk,.hero .rider{display:none}
}
@media (max-width:720px){
  body{font-size:16px}
  .rule-grid,.people{grid-template-columns:1fr}
  .worlds .head{grid-template-columns:1fr}
  .card .stage{height:150px}
  .sprite{--sz:130px}
  .card.boss .stage{height:200px}
  .card.boss .sprite{--sz:180px}
  .card h3{font-size:1.1rem}
  .card p{font-size:.88rem}
  .dock{display:block}
  .bar{display:none}
  .frame::before,.frame::after{width:80px;height:22px}
  .hero{padding-top:48px}
}
@media (max-width:440px){
  .cards{gap:14px}
  .card .top .label:last-child{display:none}
  .route{grid-template-columns:1fr}
  .gold{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-track,.sprite img{animation:none!important}
  .btn,.card,.bar,.dock{transition:none}
}