:root {
  color-scheme: dark;
  --paper:#0a1318; --ink:#f3efe5; --muted:#b5c4c8; --rust:#e0c094;
  --gold:#dfbd87; --jade:#a5d2bb; --line:#69848746; --soft:#16262d;
  --white:#f3efe5; --panel:#101e24da; --gutter:clamp(22px,4.6vw,72px);
}
body {
  min-height:100vh;
  background:radial-gradient(ellipse at 78% 4%, #29444d 0, transparent 46%), linear-gradient(165deg,#182932,#0a1318 58%);
  background-attachment:fixed;
  color:var(--ink);
}
.archive-atmosphere { position:fixed; inset:0; z-index:-2; background-size:cover; background-position:center top; opacity:.18; pointer-events:none; }
.wrap { width:min(1400px,calc(100% - clamp(28px,6vw,100px))); }
header.wrap { padding-inline:var(--gutter); background:#0d191ee8; border:1px solid var(--line); border-top:0; }
.top { min-height:85px; border:0; }
.brand { color:var(--ink); letter-spacing:.23em; font:600 18px/1.15 var(--sans); }
.nav { font-size:13px; font-weight:500; gap:clamp(16px,2.8vw,38px); }
.nav a:hover,.nav a[aria-current=page] { color:var(--jade); }
.category-dropdown { background:#14242b; border-color:var(--line); }
.category-dropdown a { border-color:var(--line); }
.eyebrow { color:var(--gold); font-size:10px; letter-spacing:.19em; margin-bottom:14px; }
h1,h2,h3 { text-wrap:balance; }
h1 { font-size:clamp(58px,8vw,122px); }
h2 { font-size:clamp(37px,4.4vw,63px); }
p { color:var(--muted); }
main>.wrap, main>div.wrap { background:var(--panel); padding-inline:var(--gutter); }
main>.wrap.section { padding-block:clamp(40px,5vw,72px); border-bottom:1px solid var(--line); }
main>.wrap.page-intro { padding-top:60px; }
.section-head { align-items:end; margin-bottom:30px; }
.section-head h2 { font-size:clamp(36px,4.6vw,58px); line-height:1.06; }
.section-head .eyebrow { margin-bottom:8px; color:var(--gold); }
.textlink { color:var(--jade); border-color:#a5d2bb7a; font-weight:600; }
.textlink:hover { color:var(--ink); border-color:var(--ink); }
.button { background:#ddc198; border-color:#ddc198; color:#132026; font-weight:700; border-radius:3px; }
.button:hover { background:#fae0b9; border-color:#fae0b9; color:#132026; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline-color:#f2d49f; }
.cinema {
  --scene-base:#14272d; --scene-fade:#08161a;
  isolation:isolate; position:relative; overflow:hidden;
  background:radial-gradient(at 85% 10%,var(--scene-base),var(--scene-fade) 78%);
  border-bottom:1px solid #ccad7266;
}
main>.cinema { background:radial-gradient(at 85% 10%,var(--scene-base),var(--scene-fade) 78%); }
.cinema[data-tone="moon"] { --scene-base:#31456e; --scene-fade:#0b1328; }
.cinema[data-tone="dusk"] { --scene-base:#694344; --scene-fade:#261929; }
.cinema[data-tone="ember"] { --scene-base:#58402e; --scene-fade:#231b18; }
.cinema[data-tone="grove"] { --scene-base:#294c37; --scene-fade:#101d17; }
.cinema::before { content:""; position:absolute; inset:14px; border:1px solid #f8e7ba34; z-index:2; pointer-events:none; }
.cinema::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,var(--scene-fade) 0%,#09161bd9 31%,#09161b22 76%),linear-gradient(0deg,#0b171be8 0%,transparent 53%);
}
.cinema .scene-image { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.home-cinema { display:flex; flex-direction:column; justify-content:space-between; min-height:clamp(550px,47vw,725px); padding-block:clamp(42px,6.8vw,105px) clamp(28px,3.4vw,54px); gap:55px; }
.home-cinema .scene-image { object-position:center 46%; }
.home-intro h1 { margin:0 0 15px; line-height:.92; letter-spacing:-.058em; }
.home-intro>p:not(.eyebrow) { font-size:clamp(15px,1.6vw,20px); margin-bottom:22px; color:#d1dce0; }
.home-spotlight { display:flex; justify-content:space-between; align-items:end; gap:24px; padding:24px clamp(17px,2.6vw,36px); border:1px solid #b7c6bf55; background:linear-gradient(100deg,#0d2129ee,#152931c9); }
.home-spotlight h2 { margin:10px 0 5px; font-size:clamp(31px,4vw,59px); }
.home-spotlight p { margin:0; font-size:13px; }
.release-pill { display:inline-flex; align-items:center; gap:8px; color:#d3f0df; background:#19382dd9; border:1px solid #85bc9f65; border-radius:30px; padding:4px 11px; font-size:11px; font-weight:700; }
.release-pill>span { height:6px; width:6px; border-radius:50%; background:#a0e2b9; }
.cinema-copy { position:relative; max-width:660px; }
.cinema-copy h1 { font-size:clamp(52px,7.6vw,107px); margin-bottom:22px; }
.cinema-copy .game-summary { max-width:490px; font-size:clamp(15px,1.8vw,19px); color:#e2e9e6; }
.cinema-copy .storefront-actions { margin-top:22px; }
.flagship-cinema,.legacy-cinema,.studio-cinema,.index-cinema { display:flex; align-items:center; justify-content:space-between; gap:32px; min-height:clamp(430px,44vw,650px); padding-block:clamp(45px,7vw,105px); }
.flagship-cinema .cinema-copy { max-width:590px; }
.flagship-cinema .scene-image { object-position:58% center; }
.flagship-cinema .cinema-copy h1 { max-width:11ch; text-wrap:wrap; }
.legacy-cinema .cinema-copy h1 { font-size:clamp(46px,6.6vw,92px); }
.legacy-cinema .scene-image { object-position:65% center; }
.legacy-cinema .cinema-copy { max-width:580px; }
.cinema-poster { margin:0; flex:0 0 min(23%,252px); }
.cinema-poster img { width:100%; display:block; border:1px solid #f1d59f70; box-shadow:0 18px 48px #0009; }
.back-link { display:inline-block; margin-bottom:24px; font-size:12px; color:var(--jade); }
.release-note { margin:16px 0 0; font-size:13px; }
.genre-pills { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 24px; }
.genre-pills span { border:1px solid #aec2be57; background:#0a161bc0; color:#dce8e4; border-radius:2px; padding:4px 9px; font-size:11px; }
.index-cinema { min-height:330px; align-items:end; }
.index-cinema h1,.studio-cinema h1 { margin-bottom:0; }
.studio-cinema { min-height:370px; }
.studio-cinema .cinema-copy p:last-child { margin:18px 0 0; }
.studio-cinema .studio-logo { width:clamp(120px,20vw,275px); padding:12px; background:#d9e2e9; border:1px solid #f3d6a8; box-shadow:0 14px 50px #0006; }
.studio-cinema .studio-mark { margin:0; }
.flagship-strip .release-pill { margin-bottom:15px; }
.flagship-strip .feature-link { margin-top:18px; }
.feature-story { gap:clamp(24px,4vw,58px); }
.feature-story .feature-art { clip-path:none; border:1px solid var(--line); }
.visual-shelf { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.visual-tile { min-height:clamp(230px,27vw,360px); display:flex; align-items:end; border:1px solid var(--line); }
.visual-tile::before { inset:9px; }
.visual-tile::after { background:linear-gradient(0deg,#0a141af5 2%,#0a141a8c 49%,#0a141a0d 82%); }
.visual-tile .scene-image { transition:transform .35s ease; }
.visual-tile:hover .scene-image { transform:scale(1.035); }
.visual-tile:hover { border-color:var(--gold); }
.tile-index { position:absolute; top:17px; right:21px; color:#f6ead8; background:#08151eb3; padding:2px 8px; font:500 12px/1.65 var(--sans); }
.visual-tile-copy { padding:clamp(20px,3vw,38px); }
.visual-tile-copy h3 { font-size:clamp(30px,3.7vw,51px); margin:0 0 10px; }
.visual-tile-copy .eyebrow { margin-bottom:8px; }
.tile-action { color:var(--jade); font-size:12px; font-weight:600; }
.category-portals { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.category-portal { min-height:clamp(174px,18vw,245px); clip-path:none; border:1px solid var(--line); }
.category-portal:hover { border-color:var(--gold); }
.portal-shade { background:linear-gradient(0deg,#0a171cf7 0%,#0a171c22 82%); }
.portal-title { bottom:17px; left:17px; right:17px; font-size:clamp(23px,2.8vw,39px); gap:8px; }
.portal-title>span { color:var(--jade); font-size:17px; }
.work-grid.selected-books { grid-template-columns:repeat(3,minmax(0,1fr)); }
.selected-books .cover { aspect-ratio:3/4; }
.selected-books .cover img { object-position:center top; }
.work-card .cover,.cover { background:#203139; box-shadow:0 8px 28px #0004; border:1px solid var(--line); }
.cover .placeholder { border-color:#9cb9ae57; }
.work-card .meta { color:var(--gold); }
.single-art { background:linear-gradient(140deg,#3a5357,#16272e); }
.single-art:after { border-color:#c9b78c74; }
.feature-grid article { border-top:1px solid var(--gold); background:#20363d5c; padding:22px; }
.feature-grid article h3 { margin-bottom:10px; }
.media-grid img { border:1px solid var(--line); box-shadow:none; }
.media-grid button { color:var(--ink); }
.media-grid button span { color:var(--muted); }
.media-grid button:hover span { color:var(--jade); }
.game-gallery .character-gallery figure { background:radial-gradient(at 50% 20%,#3c5b59,#14242b 80%); border:1px solid var(--line); }
.character-gallery figcaption { color:var(--ink); }
.featured-trailer { width:100%; max-height:660px; background:#070d10; display:block; }
.detail-crumb { padding-top:32px; }
.footer { background:#0b171ceb; border-top:1px solid var(--line); color:var(--muted); }
.footer .studio-mark { margin:0; }
dialog { color:var(--ink); background:#101e24; }
dialog::backdrop { background:#060e14da; }
@media(max-width:1050px) {
  .category-portals { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-spotlight { align-items:start; flex-direction:column; }
}
@media(max-width:760px) {
  :root { --gutter:22px; }
  .wrap { width:calc(100% - 24px); }
  .top { min-height:68px; padding:17px 0; }
  .nav { gap:0; }
  .category-dropdown { background:transparent; }
  .cinema::before { inset:7px; }
  .cinema::after { background:linear-gradient(0deg,var(--scene-fade) 12%,#0b171bc4 49%,#0b171b24 100%),linear-gradient(90deg,#0b171b94,transparent); }
  .home-cinema { min-height:530px; gap:36px; padding-top:45px; }
  .home-intro h1 { font-size:82px; }
  .home-intro>p:not(.eyebrow) { margin-bottom:14px; }
  .home-spotlight { padding:16px; gap:15px; }
  .home-spotlight h2 { font-size:36px; }
  .flagship-cinema,.legacy-cinema,.studio-cinema,.index-cinema { min-height:405px; align-items:end; padding-block:100px 38px; }
  .flagship-cinema { min-height:490px; }
  .cinema-copy h1,.legacy-cinema .cinema-copy h1 { font-size:clamp(43px,10vw,66px); }
  .cinema-poster { display:none; }
  .studio-cinema { flex-wrap:wrap; }
  .studio-cinema .studio-logo { width:138px; }
  .index-cinema { min-height:245px; }
  .visual-shelf { gap:13px; }
  .visual-tile { min-height:225px; }
  .visual-tile-copy { padding:16px; }
  .visual-tile-copy h3 { font-size:29px; }
  .tile-index { top:13px; right:13px; }
  .category-portal { min-height:165px; }
  .portal-title { font-size:25px; left:12px; right:12px; bottom:12px; }
  .work-grid.selected-books { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .selected-books .cover { aspect-ratio:2/3; }
  .section-head { align-items:start; gap:12px; }
}
@media(max-width:480px) {
  .visual-shelf { grid-template-columns:1fr; }
  .visual-tile { min-height:235px; }
  .category-portals { gap:10px; }
  .portal-title { font-size:22px; }
  .home-intro h1 { font-size:72px; }
  .home-spotlight .storefront-actions { display:grid; width:100%; grid-template-columns:1fr; }
  .home-spotlight .storefront-action { width:100%; justify-content:space-between; }
}
@media(prefers-reduced-motion:reduce) {
  .visual-tile .scene-image { transition:none; }
  .visual-tile:hover .scene-image { transform:none; }
}

/* Keep longer category labels readable on narrow phones. */
@media(max-width:390px) {
  .category-portals { grid-template-columns:1fr; }
  .category-portal { min-height:150px; }
}