/* LepuStudio v1.1 — static, responsive website */
:root {
  --ink:#1b252e; --ink-muted:#667581; --accent:#7e9db3; --accent-strong:#3e6885;
  --dark:#151b22; --dark-soft:#202b36; --paper:#f8fafb; --line:#e3e8eb;
  --width:1140px; --radius:15px;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:#fff; color:var(--ink); font-family:Inter, -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; line-height:1.75; -webkit-font-smoothing:antialiased; }
main { flex:1 0 auto; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible { outline:3px solid #8ec6e8; outline-offset:4px; }
button { font:inherit; }
.container { width:min(calc(100% - 64px), var(--width)); margin-inline:auto; }
.site-header { height:82px; position:relative; z-index:10; background:var(--dark); color:#f7f9fa; }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:100%; gap:28px; }
.brand { display:flex; align-items:center; flex-shrink:0; width:200px; }
.brand img { width:100%; height:auto; }
.nav-list { display:flex; gap:34px; align-items:center; margin:0; padding:0; list-style:none; }
.nav-list a { color:#e2e6ea; font-size:13px; font-weight:650; letter-spacing:.04em; padding:12px 0; transition:color .2s; }
.nav-list a:hover, .nav-list a[aria-current="page"] { color:#a8c5d9; }
.menu-toggle { display:none; border:1px solid #546270; background:transparent; color:white; width:43px; height:43px; border-radius:9px; cursor:pointer; align-items:center; justify-content:center; }
.menu-toggle svg { width:21px; height:21px; }
.hero { min-height:555px; background:#161d25; color:white; position:relative; overflow:hidden; }
/* The hero artwork shares the same centered 1140px container as the Game grid. */
.hero-inner { position:relative; isolation:isolate; min-height:555px; display:flex; align-items:center; padding-block:72px; }
.hero-art { position:absolute; z-index:-2; inset:0 0 0 34%; background:url('../images/komorebi-hero.webp') center 51% / cover no-repeat; }
.hero-inner::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(270deg,#161d25 0%,rgba(22,29,37,0) 6%),linear-gradient(90deg,#161d25 0%,#161d25 24%,rgba(22,29,37,.96) 35%,rgba(22,29,37,.52) 52%,rgba(22,29,37,.02) 78%),linear-gradient(0deg,rgba(12,17,23,.20),transparent 40%); }
.hero-content { position:relative; max-width:620px; }
.eyebrow { margin:0 0 18px; color:#a8c6d9; font-size:11px; font-weight:750; letter-spacing:.18em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
.hero h1 { font-size:clamp(37px,4.4vw,59px); letter-spacing:-.045em; line-height:1.43; margin:0 0 21px; font-weight:780; }
.hero h1 span { color:#a9c8dc; }
.hero p.intro { max-width:490px; color:#d4dde3; font-size:15px; line-height:2.05; margin-bottom:29px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:14px; border-radius:9px; font-size:13px; font-weight:750; padding:12px 21px; transition:transform .2s,background .2s,border-color .2s; }
.button:hover { transform:translateY(-2px); }
.button svg,.text-link svg,.card-link svg { width:16px; height:16px; flex-shrink:0; }
.button-light { background:#f3f6f8; color:#1b2730; }
.button-light:hover { background:#dfeaf0; }
.button-outline { border:1px solid #889ba9; color:#233846; background:transparent; }
.button-outline:hover { background:#fff; }
.section { padding:91px 0; }
.section-soft { background:var(--paper); }
.section-title-row { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:29px; }
.section-title { font-size:36px; font-weight:780; line-height:1.25; letter-spacing:-.045em; margin:0 0 7px; }
.section-lead { color:var(--ink-muted); font-size:14px; margin:0; }
.text-link { display:inline-flex; align-items:center; gap:9px; color:var(--accent-strong); font-weight:700; font-size:13px; white-space:nowrap; }
.text-link:hover,.card-link:hover { color:#183d58; }
.game-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; }
.game-card { min-width:0; }
.game-card-link { display:block; border-radius:var(--radius); }
.game-image-wrap { position:relative; overflow:hidden; border-radius:var(--radius); aspect-ratio:16 / 9; background:#cfdbe0; box-shadow:0 9px 25px rgba(25,43,55,.07); }
.game-image-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.game-card-link:hover .game-image-wrap img { transform:scale(1.05); }
.game-image-wrap::after { content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.14); border-radius:inherit; pointer-events:none; }
.game-card-body { padding:17px 2px 2px; }
.game-tag { font-size:11px; font-weight:720; letter-spacing:.055em; color:#718695; margin:0 0 4px; }
.game-card h3 { font-size:19px; font-weight:770; line-height:1.5; letter-spacing:-.03em; margin:0 0 5px; }
.game-description { color:#677580; font-size:13px; line-height:1.85; margin:0 0 13px; }
.card-link { display:inline-flex; align-items:center; gap:6px; color:#4e7590; font-size:12px; font-weight:730; }
.about-strip { background:#eaf0f4; overflow:hidden; }
.about-layout { display:block; }
.about-copy { max-width:760px; }
.about-copy p { color:#51606d; font-size:14px; line-height:2.2; margin:0 0 26px; }
.news-row { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.news-row p { margin:0; color:#697680; font-size:14px; }
.site-footer { flex-shrink:0; background:#151b22; color:#aab4bd; text-align:center; padding:29px 16px; font-size:12px; letter-spacing:.01em; }
.page-intro { padding:73px 0 48px; background:var(--paper); }
.page-intro .eyebrow { color:#65849a; margin-bottom:12px; }
.page-intro h1 { font-size:clamp(36px,4.8vw,55px); line-height:1.35; letter-spacing:-.05em; margin:0 0 12px; }
.page-intro p:last-child { color:#647480; font-size:14px; margin-bottom:0; }
.page-section { padding:56px 0 106px; }
.page-section .game-grid { row-gap:48px; }
.crumb { color:#8ca1ae; font-size:12px; margin-bottom:25px; }
.crumb a:hover { color:#f6f8fa; }
.detail-top { background:#151b22; color:white; padding:35px 0 60px; }
.detail-top h1 { font-size:clamp(35px,5vw,56px); letter-spacing:-.05em; line-height:1.3; margin:0 0 10px; }
.detail-top .genre { color:#b5c5cf; font-size:13px; margin-bottom:27px; }
.detail-cover { border-radius:18px; overflow:hidden; aspect-ratio:16 / 9; background:#273744; }
.detail-cover img { width:100%; height:100%; object-fit:cover; }
.reveal-section { background:#f8fafb; padding:91px 0 108px; }
.reveal-card { max-width:760px; margin:auto; text-align:center; background:#fff; border:1px solid #e5ebef; border-radius:23px; padding:70px 44px; box-shadow:0 18px 55px rgba(24,43,58,.04); }
.reveal-card h2 { font-size:clamp(26px,4vw,42px); line-height:1.5; letter-spacing:-.055em; margin:0; }
.article-width { max-width:810px; }
.article-width h2 { font-size:24px; letter-spacing:-.03em; margin:0 0 17px; }
.article-width p { font-size:15px; line-height:2.2; color:#556571; margin-bottom:20px; }
.empty-state { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:55px 10px; color:#657582; font-size:14px; }
.contact-panel { background:#eef3f6; padding:38px; border-radius:16px; }
.contact-panel h2 { font-size:21px; margin:0 0 10px; }
.contact-panel p { font-size:14px; line-height:2; color:#5b6b77; margin:0; }
@media (max-width: 820px) {
 .container { width:min(calc(100% - 42px),var(--width)); }
 .site-header { height:70px; }
 .brand { width:169px; }
 .nav-list { gap:20px; }
 .nav-list a { font-size:12px; }
 .hero,.hero-inner { min-height:510px; }
 .hero-art { left:27%; }
 .hero-inner::before { background:linear-gradient(270deg,#161d25 0%,rgba(22,29,37,0) 6%),linear-gradient(90deg,#161d25 0%,rgba(22,29,37,.95) 32%,rgba(22,29,37,.45) 70%,rgba(22,29,37,.10)); }
 .hero-content { max-width:530px; }
 .section { padding:70px 0; }
 .game-grid { gap:17px; }
 .game-card h3 { font-size:16px; }
}
@media (max-width: 650px) {
 .container { width:calc(100% - 36px); }
 .site-header { height:68px; }
 .brand { width:165px; }
 .menu-toggle { display:inline-flex; }
 .site-nav { display:none; position:absolute; top:68px; left:0; right:0; background:#1c252e; border-top:1px solid #354451; box-shadow:0 12px 24px rgba(0,0,0,.22); }
 .site-nav.open { display:block; }
 .nav-list { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:9px 18px 15px; }
 .nav-list a { display:block; padding:13px 10px; font-size:14px; }
 .hero,.hero-inner { min-height:570px; }
 .hero-inner { align-items:flex-end; padding-block:67px 50px; }
 .hero-art { inset:0 calc((100% - 100vw)/2); background-position:57% center; }
 .hero-inner::before { inset:0 calc((100% - 100vw)/2); background:linear-gradient(0deg,#151b22 0%,rgba(21,27,34,.98) 12%,rgba(21,27,34,.80) 38%,rgba(21,27,34,.12) 78%),linear-gradient(90deg,rgba(21,27,34,.4),transparent); }
 .hero h1 { font-size:clamp(33px,8vw,43px); }
 .hero p.intro { font-size:13px; max-width:380px; }
 .section { padding:64px 0; }
 .section-title { font-size:30px; }
 .section-title-row { align-items:flex-start; gap:10px; flex-direction:column; margin-bottom:24px; }
 .game-grid { grid-template-columns:1fr; gap:35px; }
 .game-card h3 { font-size:19px; }
 .game-card-body { padding-top:12px; }
 .news-row { flex-direction:column; align-items:flex-start; gap:12px; }
 .page-intro { padding:57px 0 39px; }
 .page-section { padding:45px 0 76px; }
 .detail-top { padding:24px 0 43px; }
 .detail-cover { border-radius:12px; }
 .reveal-section { padding:48px 0 75px; }
 .reveal-card { padding:47px 21px; border-radius:15px; }
 .contact-panel { padding:25px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }