:root { color-scheme: light; --blue:#2458ea; --ink:#15233c; --muted:#536078; --ice:#edf3ff; --line:#dce4f1; --white:#fff; font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:2rem; }
body { margin:0; background:var(--white); color:var(--ink); font-size:1rem; line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:.25em; }
a:hover { color:var(--blue); }
a:focus-visible { outline:3px solid var(--blue); outline-offset:6px; border-radius:3px; }
img { max-width:100%; display:block; }
button,a { -webkit-tap-highlight-color:transparent; }
.wrap { width:min(1184px,calc(100% - 96px)); margin-inline:auto; }
.skip-link { position:absolute; left:1rem; top:-100px; background:var(--white); padding:1rem; z-index:10; }
.skip-link:focus { top:1rem; }
.header { min-height:112px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-size:1.5rem; font-weight:800; letter-spacing:-.06em; }
.brand img { width:39px; height:39px; }
.nav { display:flex; align-items:center; gap:2.25rem; }
.nav a { font-size:.9375rem; font-weight:600; text-decoration:none; padding:.7rem 0; }
.nav a[aria-current="page"] { color:var(--blue); }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { line-height:1.1; }
.hero { display:grid; grid-template-columns:1.25fr 1fr; gap:3rem; align-items:center; padding:64px 0 88px; }
.hero h1 { font-size:clamp(4.4rem,7.5vw,7.2rem); letter-spacing:-.075em; line-height:.98; color:var(--blue); font-weight:800; margin:0 0 2rem; }
.hero h1 span { display:block; }
.hero-copy { max-width:460px; min-width:0; }
.hero-copy .statement { font-size:1.25rem; font-weight:600; margin-bottom:.45rem; }
.hero-copy .description { color:var(--muted); font-size:1.0625rem; max-width:390px; margin-bottom:1.65rem; }
.button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding:.8rem 1.5rem; background:var(--blue); color:white; text-decoration:none; border-radius:9px; font-weight:700; font-size:.9375rem; transition:background .18s; }
.button:hover { background:#1744c4; color:white; }
.hero-brand { aspect-ratio:1; position:relative; display:grid; place-items:center; background:var(--ice); border-radius:50% 50% 22% 50%; }
.hero-brand img { width:65%; height:65%; transform:rotate(-9deg); }
.hero-brand::after { content:""; position:absolute; bottom:13%; left:8%; width:16%; height:8px; background:var(--blue); border-radius:8px; transform:rotate(-38deg); }
.games { padding:64px 0 72px; border-top:1px solid var(--line); }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; margin-bottom:28px; }
.section-heading h2 { font-size:2.5rem; letter-spacing:-.05em; margin-bottom:0; }
.section-heading p { margin-bottom:0; color:var(--muted); }
.game-card { display:grid; grid-template-columns:1.35fr 1fr; background:#f5f8fd; border-radius:24px; overflow:hidden; }
.game-art { display:block; background:#e8f0fc; overflow:hidden; }
.game-art img { width:100%; height:100%; min-height:330px; object-fit:cover; }
.game-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:42px; }
.badge { color:#455a7f; background:#e6ecf7; border-radius:6px; padding:.28rem .7rem; font-size:.875rem; font-weight:600; display:inline-block; }
.game-copy h3 { font-size:2.4rem; letter-spacing:-.05em; margin:1.25rem 0 1rem; }
.game-copy p { color:var(--muted); margin-bottom:1.5rem; max-width:330px; }
.text-link { font-weight:700; text-decoration-thickness:1.5px; }
.contact-strip { padding:58px 0 70px; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.contact-strip h2 { font-size:2.4rem; letter-spacing:-.05em; margin-bottom:.6rem; }
.contact-strip p { color:var(--muted); margin:0; }
.email { font-size:1.125rem; font-weight:650; color:var(--blue); overflow-wrap:anywhere; }
.footer { border-top:1px solid var(--line); padding:26px 0; display:flex; align-items:center; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.875rem; }
.footer p { margin:0; }
.footer nav { display:flex; gap:1.5rem; }
.footer a { text-decoration:none; padding:.5rem 0; }
.page-main { min-height:calc(100vh - 202px); padding:52px 0 96px; }
.back { display:inline-block; color:var(--muted); font-size:.9375rem; margin-bottom:34px; }
.page-title { font-size:clamp(3rem,6vw,5rem); letter-spacing:-.065em; margin-bottom:1.4rem; }
.lead { color:var(--muted); font-size:1.2rem; max-width:620px; }
.game-intro { display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; margin-bottom:38px; }
.game-intro .badge { margin-top:16px; flex-shrink:0; }
.game-intro p { margin-bottom:0; }
.game-stage { display:grid; grid-template-columns:1.2fr 1fr; border-radius:24px; background:#f5f8fd; overflow:hidden; }
.game-stage img { width:100%; height:100%; object-fit:cover; }
.availability { padding:44px; align-self:center; }
.availability h2 { font-size:2rem; letter-spacing:-.045em; }
.availability p { color:var(--muted); }
.art-caption { color:var(--muted); font-size:.875rem; margin:12px 0 0; }
.game-details { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding-top:52px; }
.game-details h2 { font-size:1.5rem; letter-spacing:-.035em; }
.game-details p { color:var(--muted); max-width:470px; }
.prose { max-width:740px; }
.prose h2 { font-size:1.5rem; letter-spacing:-.03em; margin:2.3rem 0 .8rem; }
.prose p { color:var(--muted); }
.prose .updated { font-size:.9375rem; }
.contact-page { max-width:780px; padding:60px 0 100px; }
.contact-page .page-title { max-width:600px; }
.contact-page .email { display:inline-block; font-size:clamp(1.35rem,3.8vw,2.6rem); margin:24px 0 30px; letter-spacing:-.04em; }
.contact-note { max-width:540px; color:var(--muted); }
@media (min-width:1500px) { .hero { padding-block:90px 110px; } }
@media (max-width:900px) { .wrap { width:calc(100% - 48px); } .hero { gap:2rem; } .hero h1 { font-size:5rem; } .game-copy,.availability { padding:28px; } .game-copy h3 { font-size:2rem; } .contact-strip { align-items:flex-start; flex-direction:column; gap:1.25rem; } .game-details { gap:32px; } }
@media (max-width:600px) { .wrap { width:calc(100% - 40px); } .header { min-height:88px; gap:1rem; } .brand { font-size:1.3rem; gap:7px; } .brand img { width:32px; height:32px; } .nav { gap:1.1rem; } .nav a { font-size:.875rem; } .hero { padding:36px 0 48px; grid-template-columns:1fr; gap:36px; } .hero h1 { font-size:clamp(4.2rem,18vw,6rem); margin-bottom:1.6rem; } .hero-brand { width:78%; justify-self:center; } .section-heading { display:block; } .section-heading h2 { font-size:2.1rem; margin-bottom:12px; } .games { padding:40px 0; } .game-card,.game-stage { grid-template-columns:1fr; } .game-art img { min-height:0; aspect-ratio:3/2; } .game-copy { padding:30px 26px 34px; } .contact-strip { padding:32px 0 48px; } .contact-strip h2 { font-size:2rem; } .footer { flex-wrap:wrap; padding:24px 0; } .page-main { padding:32px 0 64px; } .page-title { font-size:3rem; } .game-intro { flex-direction:column; gap:12px; } .game-intro .badge { margin:0; } .game-details { grid-template-columns:1fr; gap:16px; padding-top:36px; } .contact-page { padding:30px 0 55px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }