/*
Theme Name: That Game Studio
Theme URI: https://thatgamestudio.com/
Author: That Game Studio
Description: Lightweight theme for That Game Studio. Homepage shows the latest 9 posts with content and links.
Version: 1.0.0
Requires at least: 5.6
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: thatgamestudio
*/
:root{--bg:#0d0f14;--card:#161a23;--fg:#e9ecf2;--muted:#9aa3b5;--accent:#39ff88;--accent2:#ff3d7f;--line:#262c3a}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.65 "Space Grotesk",system-ui,sans-serif}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent2)}
img{max-width:100%;height:auto}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.site-header{border-bottom:1px solid var(--line);padding:22px 0}
.site-header .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.site-title{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;margin:0}
.site-title a{color:var(--fg)}.site-title span{color:var(--accent)}
.site-desc{color:var(--muted);margin:0;font-size:.9rem}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px}
.nav a{color:var(--fg);font-weight:500}.nav a:hover{color:var(--accent)}
.hero{padding:64px 0 32px}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;margin:0 0 10px;letter-spacing:-.03em}
.hero p{color:var(--muted);margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px;padding:24px 0 72px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-4px);border-color:var(--accent)}
.card-thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.card-body{padding:22px;display:flex;flex-direction:column;flex:1}
.card h2{font-size:1.3rem;line-height:1.25;margin:0 0 6px}.card h2 a{color:var(--fg)}.card h2 a:hover{color:var(--accent)}
.meta{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.card-content{color:#c9cfdb;font-size:.95rem;flex:1}
.card-content img{border-radius:8px}
.more{margin-top:16px;font-weight:700;display:inline-block}
.single{max-width:760px;margin:0 auto;padding:56px 0 80px}
.single h1{font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin:0 0 10px}
.entry-content{font-size:1.05rem}.entry-content h2,.entry-content h3{margin-top:2em}
.entry-content blockquote{border-left:3px solid var(--accent);margin:1.5em 0;padding-left:18px;color:var(--muted)}
.post-nav{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:48px;padding-top:24px}
.pagination{padding-bottom:60px;text-align:center}.pagination .page-numbers{padding:6px 12px;border:1px solid var(--line);border-radius:6px;margin:0 3px}
.site-footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:.85rem;text-align:center}
.comments-area{margin-top:48px}.comments-area input,.comments-area textarea{width:100%;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:10px}
.comments-area .submit{width:auto;background:var(--accent);color:#000;font-weight:700;cursor:pointer}
.screen-reader-text{position:absolute;left:-9999px}
.alignwide{max-width:1000px}.alignfull{width:100%}.aligncenter{display:block;margin:0 auto}
@media(max-width:600px){.grid{grid-template-columns:1fr}}