/* Studio template; the game site owns its separate stylesheet. */
:root{color-scheme:dark;--bg:#000;--ink:#f5f4ee;--muted:#a5acb2;--cyan:#40cee9;--line:#282c30}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:4px}
a:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
main{width:min(920px,calc(100% - 48px));margin:auto}
header{padding:64px 0 48px;text-align:center}
.studio-header{padding:80px 0 56px}
.wordmark{display:inline-block;color:var(--cyan);font-family:'Arial Black',Impact,Arial,sans-serif;font-weight:900;font-style:italic;font-size:clamp(24px,5.5vw,62px);line-height:1.15;letter-spacing:-.045em;text-decoration:none;text-shadow:0 2px 0 #147f99}
.studio-tagline{margin:20px 0 0;color:var(--muted);font-size:16px}
hr{border:0;border-top:1px solid var(--line);margin:0}
.feature{text-align:center;padding:28px 0 56px}
.section-heading{text-align:left;font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0 0 24px;color:var(--muted)}
.game-link{display:block;width:fit-content;max-width:100%;margin:auto;text-decoration:none}
.game-logo{display:block;width:min(440px,100%);height:auto;margin:auto;transition:transform .2s ease}
.game-title{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:22px}
.game-title h2{font-size:25px;line-height:1.3;letter-spacing:-.025em;margin:0}
.status-tag{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--cyan);border:1px solid #215560;background:#07171b;border-radius:999px;padding:4px 10px;white-space:nowrap}
.game-link:hover h2{color:var(--cyan)}
.game-link:hover .game-logo{transform:translateY(-3px)}
p{color:var(--muted)}
.feature>p{margin:12px auto 0;font-size:15px}
/* The game tile: Boops & Baps key art with its logo and one call to action. */
main{width:min(1180px,calc(100% - 48px))}
.game-tile{margin:0 0 56px}
.game-tile a{position:relative;display:flex;align-items:center;min-height:min(62vw,620px);border-radius:22px;overflow:hidden;text-decoration:none;background:#e6601c url(/boops-and-baps/assets/hero.jpg) 72% center/cover no-repeat;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.game-tile a::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.45) 40%,rgba(0,0,0,0) 66%);transition:opacity .25s ease}
.tile-copy{position:relative;padding:48px clamp(24px,5vw,64px);max-width:560px}
.eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.game-tile h1{margin:8px 0 0}
.game-tile .game-logo{width:min(440px,100%);margin:0 0 0 -10px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}
.tile-line{margin:4px 0 0;font-family:'Arial Black',Impact,Arial,sans-serif;font-size:clamp(22px,2.8vw,32px);line-height:1.15;color:var(--ink)}
.tile-sub{margin:10px 0 0;color:var(--ink);opacity:.9}
.tile-btn{display:inline-block;margin-top:26px;background:#e6601c;color:#fff;font-family:'Arial Black',Impact,Arial,sans-serif;padding:14px 24px;border-radius:999px;box-shadow:0 6px 0 #9c3a09;transition:transform .15s ease}
.game-tile a:hover .tile-btn{transform:translateY(-2px)}
.game-tile a:hover .game-logo{transform:translateY(-3px)}
@media(max-width:760px){.game-tile a{min-height:auto;background:#140d09 url(/boops-and-baps/assets/hero.jpg) 82% 0/auto 300px no-repeat}.game-tile a::before{background:linear-gradient(180deg,rgba(20,13,9,.1) 0,rgba(20,13,9,.2) 170px,#140d09 300px)}.tile-copy{padding:200px 22px 30px}}
/* About page. */
.about{max-width:680px;margin:0 auto;padding:8px 0 72px}
.about h1{font-family:'Arial Black',Impact,Arial,sans-serif;font-size:clamp(34px,6vw,52px);letter-spacing:-.03em;line-height:1.1;margin:0}
.about p{font-size:clamp(17px,2vw,20px);line-height:1.6;color:var(--ink);margin:16px 0 0}.about a{color:var(--cyan)}
footer{border-top:1px solid var(--line);padding:24px 0 32px;display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--muted);font-size:12px}
footer nav{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:20px}
footer a{text-decoration:none}footer a:hover{color:var(--ink)}
.legal{max-width:700px;margin:0 auto;padding:24px 0 64px}
.legal h1{font-size:36px;line-height:1.2}.legal h2{font-size:20px;margin-top:32px}.legal p{margin:12px 0}.back{font-size:14px;color:var(--cyan)}
@media(max-width:520px){main{width:calc(100% - 36px)}header,.studio-header{padding:48px 0 36px}.studio-tagline{font-size:14px;margin-top:16px}.feature{padding:24px 0 40px}.section-heading{margin-bottom:18px}.game-title{gap:10px;margin-top:18px}.game-title h2{font-size:22px}footer{flex-direction:column;gap:14px}footer nav{gap:16px}}
@media(prefers-reduced-motion:reduce){.game-logo,.tile-btn{transition:none}.game-link:hover .game-logo,.game-tile a:hover .game-logo,.game-tile a:hover .tile-btn{transform:none}}

/* Legal pages follow the same restrained hierarchy as the studio homepage. */
.legal{max-width:680px}.legal h1{font-size:clamp(30px,5vw,38px);letter-spacing:-.035em;margin:24px 0 12px}.legal h2{font-size:19px;line-height:1.4;margin:30px 0 10px}.legal h1+p{font-size:12px;padding-bottom:20px;border-bottom:1px solid var(--line)}.back{text-decoration:none}.back:hover{text-decoration:underline}