@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Fugaz+One&display=swap');
:root{--ink:#17223b;--paper:#f8f5e9;--sky:#79d7fa;--yellow:#ffdc3f;--red:#ff4d5d}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Baloo 2",sans-serif}.top{min-height:72px;padding:0 clamp(16px,4vw,58px);display:flex;align-items:center;gap:25px;border-bottom:2px solid rgba(23,34,59,.12);background:white}.brand{display:flex;align-items:center;color:var(--ink);text-decoration:none;font:400 22px "Fugaz One",sans-serif;letter-spacing:-.05em}.brand strong{color:var(--red)}.mark{display:grid;place-items:center;width:38px;height:38px;margin-right:8px;border:3px solid var(--ink);border-radius:12px;background:var(--yellow);box-shadow:3px 3px 0 var(--red);transform:rotate(-8deg)}.top nav{display:flex;gap:8px;margin-left:auto}.top nav a{padding:8px 11px;border-radius:999px;color:#677084;text-decoration:none;font-weight:800;font-size:13px}.top nav a:hover{background:var(--ink);color:white}.hero{padding:70px clamp(20px,7vw,110px) 62px;background:var(--sky);border-bottom:6px solid var(--ink);background-image:radial-gradient(circle at 18px 18px,rgba(255,255,255,.22) 0 3px,transparent 4px);background-size:36px 36px}.crumbs{font-size:13px;font-weight:800}.crumbs a{color:var(--ink)}h1{max-width:900px;margin:22px 0 10px;font:400 clamp(47px,8vw,96px)/.9 "Fugaz One",sans-serif;letter-spacing:-.06em}.hero p{max-width:700px;margin:0;color:#315d7b;font-size:18px;font-weight:700;line-height:1.5}.content{padding:50px clamp(14px,4vw,64px) 85px}.content-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.content-head h2{margin:0;font:400 clamp(27px,4vw,45px) "Fugaz One",sans-serif}.count{padding:7px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--yellow);font-weight:900}.grid{display:grid;grid-template-columns:repeat(8,1fr);gap:14px}.card{color:var(--ink);text-decoration:none}.art{position:relative;display:grid;place-items:center;aspect-ratio:1;border:3px solid var(--ink);border-radius:18px;background:linear-gradient(145deg,var(--c1),var(--c2));box-shadow:0 5px 0 var(--ink);font-size:clamp(34px,5vw,63px);transition:.15s}.art:after{content:"PLAY";position:absolute;bottom:7px;left:50%;transform:translateX(-50%);padding:3px 9px;border-radius:999px;background:var(--ink);color:white;font:400 9px "Fugaz One",sans-serif;opacity:0}.card:hover .art{transform:translateY(-4px);box-shadow:0 9px 0 var(--ink)}.card:hover .art:after{opacity:1}.card h3{margin:10px 3px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.card small{margin-left:3px;color:#858c99;font-weight:700}.copy{max-width:850px;margin:65px auto 0}.copy h2{font:400 32px "Fugaz One",sans-serif}.copy p{color:#606a7b;font-size:17px;line-height:1.65}.copy a{color:#124bc0;font-weight:800}footer{padding:36px clamp(20px,5vw,70px);display:flex;align-items:center;gap:25px;background:var(--ink);color:white}footer strong{font:400 24px "Fugaz One",sans-serif;color:var(--yellow)}footer a{color:white}footer p{margin-left:auto;color:#bac4d2}@media(max-width:1000px){.grid{grid-template-columns:repeat(6,1fr)}}@media(max-width:700px){.top nav{display:none}.grid{grid-template-columns:repeat(3,1fr);gap:10px}.hero{padding:48px 20px}.content{padding:38px 10px}.card h3{font-size:12px}.card small{display:none}.copy{padding:0 8px}.top{padding:0 12px}footer{align-items:flex-start;flex-direction:column}footer p{margin:0}}
.brand-logo{display:block;width:142px;height:auto}.footer-logo{width:145px;height:auto;filter:drop-shadow(0 3px 0 rgba(0,0,0,.15))}@media(max-width:700px){.brand-logo{width:122px}.footer-logo{width:150px}}
.top>nav{min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none}.top>nav::-webkit-scrollbar{display:none}.crumbs{display:flex;align-items:center;gap:8px}.related{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 24px}.related a{padding:9px 13px;border:2px solid var(--ink);border-radius:999px;background:white;color:var(--ink);text-decoration:none;box-shadow:0 3px 0 var(--ink)}.related a:hover{background:var(--yellow);transform:translateY(-2px)}.copy h3{margin:28px 0 8px;font:400 20px "Fugaz One",sans-serif}.about-copy{padding-top:15px}.about-copy .copy{margin-top:35px}@media(max-width:1100px){.top{align-items:flex-start;flex-direction:column;padding-top:14px;padding-bottom:12px}.top>nav{width:100%;margin-left:0}.top>nav a:first-child{padding-left:0}}@media(max-width:700px){.top>nav{display:flex}.top>nav a{font-size:12px}.related{gap:7px}.related a{font-size:13px}}
.card{perspective:750px}.art{transform-style:preserve-3d}.art:before{content:"3D";position:absolute;right:7px;top:7px;z-index:3;padding:3px 7px;border:2px solid rgba(255,255,255,.8);border-radius:7px;background:rgba(11,22,43,.76);color:#fff;font:400 9px "Fugaz One",sans-serif;letter-spacing:.08em;box-shadow:0 3px 8px rgba(0,0,0,.3)}.card:hover .art{transform:translateY(-6px) rotateX(7deg) rotateY(-4deg);box-shadow:0 11px 0 var(--ink),0 20px 30px rgba(23,34,59,.22)}.art>span{text-shadow:0 1px 0 rgba(255,255,255,.65),0 5px 0 rgba(27,38,64,.28),0 12px 18px rgba(0,0,0,.32)}
