@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

:root { --paper: #f4f0e7; --ink: #20201d; --muted: #73716b; --line: #d9d4c8; --coral: #d65f62; --sage: #769678; --yellow: #f2c96b; --blue: #a9c8cd; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'DM Sans', sans-serif; }
a { color: inherit; text-decoration: none; }
.site-shell { max-width: 1320px; margin: auto; padding: 0 5vw; overflow: hidden; }
.topbar { height: 92px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 700; letter-spacing: -.02em; }
.brand em { color: var(--muted); font-style: normal; font-weight: 400; }
.brand-mark { display: flex; align-items: flex-end; gap: 3px; width: 24px; height: 24px; }
.brand-mark i { display: block; width: 6px; border-radius: 4px 4px 2px 2px; background: var(--coral); }
.brand-mark i:first-child { height: 13px; transform: rotate(-12deg); }
.brand-mark i:nth-child(2) { height: 21px; background: var(--sage); }
.brand-mark i:last-child { height: 17px; background: var(--yellow); transform: rotate(10deg); }
.nav { display: flex; align-items: center; gap: 32px; font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.nav a:not(.nav-play) { color: var(--muted); }
.nav a:hover, .text-link:hover { color: var(--coral); }
.nav-play { padding: 12px 16px; border: 1px solid var(--ink); border-radius: 100px; }
.nav-play span, .text-link span { font-size: 16px; margin-left: 7px; }
.menu-toggle, .mobile-nav { display: none; }
.hero { min-height: 690px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 6vw; padding: 90px 4vw 100px; }
.eyebrow { margin: 0 0 24px; color: var(--muted); font: 11px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow span { display: inline-block; width: 24px; height: 1px; margin: 0 9px 3px 0; background: var(--coral); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: 'Fraunces', serif; font-weight: 700; letter-spacing: -.045em; }
h1 { max-width: 560px; margin-bottom: 26px; font-size: clamp(54px, 7vw, 104px); line-height: .92; }
h1 em, h2 em { color: var(--coral); font-style: normal; }
.hero-intro { max-width: 425px; margin-bottom: 36px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.button { display: inline-flex; align-items: center; gap: 42px; padding: 15px 19px; border-radius: 4px; font-size: 13px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease; }
.button-dark { color: var(--paper); background: var(--ink); box-shadow: 4px 4px 0 var(--coral); }
.button:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--coral); }
.hero-art { position: relative; min-height: 510px; }
.hero-card { position: absolute; width: min(285px, 45%); padding: 10px; background: #fffdf9; box-shadow: 0 18px 40px rgba(39, 36, 29, .12); }
.hero-card img { display: block; width: 100%; height: auto; }
.hero-card-back { top: 18px; right: 9%; transform: rotate(7deg); }
.hero-card-front { top: 94px; left: 11%; transform: rotate(-7deg); }
.scribble { position: absolute; z-index: 2; color: var(--coral); font: 700 12px 'DM Mono', monospace; letter-spacing: .08em; line-height: 1.3; }
.scribble-one { top: 3px; left: 4%; transform: rotate(-15deg); }
.hero-sticker { position: absolute; z-index: 3; right: 0; bottom: 39px; width: 132px; height: 132px; display: flex; flex-direction: column; justify-content: center; padding: 22px; border-radius: 50%; background: var(--yellow); font: 11px 'DM Mono', monospace; line-height: 1.3; transform: rotate(9deg); }
.hero-sticker strong { font-family: 'Fraunces', serif; font-size: 19px; line-height: .9; }
.hero-sticker span { align-self: flex-end; font-size: 21px; }
.games-section { padding: 90px 4vw 130px; border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: end; gap: 30px; margin-bottom: 58px; }
.section-heading .eyebrow { align-self: start; }
h2 { margin-bottom: 0; font-size: clamp(42px, 5vw, 68px); line-height: .95; }
.section-heading > p:last-child { max-width: 270px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.game-card { position: relative; display: grid; grid-template-columns: 1fr .78fr; min-height: 390px; overflow: hidden; padding: 38px 0 0 38px; border-radius: 3px; }
.pebblian-card { background: var(--blue); }
.anagram-card { background: #e8b0a4; }
.game-info { position: relative; z-index: 2; padding: 2px 10px 35px 0; }
.game-label { margin-bottom: 24px; font: 11px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; }
.dot-coral { background: var(--coral); }.dot-sage { background: var(--sage); }
h3 { margin-bottom: 15px; font-size: 47px; }
.game-info p { max-width: 205px; min-height: 68px; color: rgba(32, 32, 29, .72); font-size: 14px; line-height: 1.55; }
.text-link { display: inline-block; margin-top: 13px; border-bottom: 1px solid currentColor; font: 700 12px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .03em; }
.screenshot-wrap { align-self: end; width: 100%; height: 320px; padding: 9px 9px 0; overflow: hidden; background: rgba(255,255,255,.28); border-radius: 8px 0 0 0; box-shadow: -10px -10px 0 rgba(255,255,255,.16); }
.screenshot-wrap img { display: block; width: 100%; height: auto; border-radius: 3px 3px 0 0; box-shadow: 0 5px 15px rgba(32,32,29,.1); }
.screenshot-pebblian { transform: rotate(2deg) translate(10px, 35px); }.screenshot-anagram { transform: rotate(-2deg) translate(10px, 35px); }
.about-section { display: grid; grid-template-columns: .55fr 1fr 1fr; gap: 6vw; align-items: start; padding: 100px 4vw 130px; border-top: 1px solid var(--line); }
.about-number { color: var(--coral); font: 12px 'DM Mono', monospace; }
.about-section h2 { font-size: clamp(40px, 4.3vw, 62px); }
.about-copy { max-width: 300px; margin: 49px 0 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.footer { display: flex; align-items: center; justify-content: space-between; padding: 28px 0 34px; border-top: 1px solid var(--line); color: var(--muted); font: 11px 'DM Mono', monospace; }
.footer .brand { color: var(--ink); font-family: 'DM Sans', sans-serif; }.back-top { color: var(--ink); font-size: 19px; }
@media (max-width: 760px) {
  .site-shell { padding: 0 20px; }
  .topbar { height: 74px; }.nav { display: none; }.menu-toggle { display: block; padding: 10px 0; border: 0; background: none; color: var(--ink); font: 11px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
  .mobile-nav { display: flex; flex-direction: column; gap: 19px; padding: 20px 0 22px; border-bottom: 1px solid var(--line); font: 11px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }.mobile-nav[hidden] { display: none; }
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 46px; min-height: 0; padding: 72px 4vw 84px; }.hero-art { min-height: 420px; }.hero-card { width: 48%; }.hero-card-back { right: 3%; }.hero-card-front { left: 7%; top: 75px; }.hero-sticker { right: 1%; bottom: 19px; width: 106px; height: 106px; padding: 17px; }.hero-sticker strong { font-size: 16px; }
  .games-section { padding: 72px 4vw 85px; }.section-heading { display: block; margin-bottom: 38px; }.section-heading h2 { margin-bottom: 25px; }.game-grid { grid-template-columns: 1fr; gap: 20px; }.game-card { min-height: 350px; padding: 28px 0 0 27px; }.game-info p { max-width: 185px; }.screenshot-wrap { height: 290px; }
  .about-section { grid-template-columns: 1fr; gap: 22px; padding: 75px 4vw 85px; }.about-number { order: 0; }.about-copy { margin: 3px 0 0; }.footer { flex-wrap: wrap; gap: 18px; }.footer p { order: 3; width: 100%; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }