/* Cinematic edition: a full-bleed opening and editorial case studies. */
:root {
  --display: "Instrument Serif", Georgia, serif;
  --han: "Noto Serif SC", "Songti SC", SimSun, serif;
  --font: Manrope, "Microsoft YaHei", "PingFang SC", sans-serif;
  --gutter: clamp(20px, 6.35vw, 114px);
  --nav-height: 72px;
  --head: clamp(42px, 5.15vw, 74px);
  --round: 5px;
}
body {
  --ground: #090e10;
  --top: #0c1415;
  --surface: #162022;
  --raised: #202c2a;
  --ink: #f0f0e7;
  --muted: #b9c0b8;
  --accent: #d9efad;
  --accent-ink: #1a2518;
  --line: #48564f;
  --field: #101e1c;
  --glow: 209 239 167;
  --nav: #0a1012d9;
  --stage-ink: #fbf7e9;
  --stage-muted: #e2e1d5;
  --stage-edge: #ffffff50;
  background: var(--ground);
}
body[data-theme="game"] {
  --ground: #101020; --surface: #202134; --raised: #29273e; --field: #18172d;
  --ink: #f5efe9; --muted: #c8c2d7; --accent: #ffdcac; --accent-ink: #322018;
  --line: #555070; --glow: 255 220 172; --nav: #131324d9;
}
body[data-theme="toy"] {
  --ground: #19131b; --surface: #2a1e2d; --raised: #352537; --field: #261c2b;
  --ink: #faefeb; --muted: #d7c6cc; --accent: #f5d6d5; --accent-ink: #442d40;
  --line: #664d65; --glow: 241 175 196; --nav: #201622dc;
  --stage-ink: #372435; --stage-muted: #52404e; --stage-edge: #513c594d;
  color-scheme: dark;
}
body[data-theme="asset"] { --ground:#121014; --surface:#241a21; --nav:#1c171edd; }
body[data-theme="print"] { --ground:#161310; --surface:#2b241e; --nav:#211a14dd; }
.atmosphere {
  opacity: .82;
  background: radial-gradient(ellipse at 16% 36%, #214b3f 0%, transparent 59%),
              radial-gradient(ellipse at 89% 78%, #311c31 0%, transparent 62%);
}
[data-theme="game"] .atmosphere { background: radial-gradient(ellipse at 73% 30%, #323a73, transparent 66%); }
[data-theme="toy"] .atmosphere { background: radial-gradient(ellipse at 23% 65%, #503149, transparent 66%); }
.site-header { position: fixed; inset: 0 0 auto; }
[data-page="home"]:not([data-scrolled="true"]) .site-header,
[data-page="case"]:not([data-scrolled="true"]) .site-header {
  background: transparent; backdrop-filter: none; color: var(--stage-ink);
}
[data-theme="toy"][data-page="home"]:not([data-scrolled="true"]) .site-header,
[data-theme="toy"][data-page="case"]:not([data-scrolled="true"]) .site-header { color: #f9edf1; }
.nav-shell { min-height: var(--nav-height); }
.brand { font-size: 14px; font-weight: 650; gap: 11px; }
.mark { width: 31px; height: 31px; }
.navigation a, .nav-resume, .nav-contact { font-size: 13px; font-weight: 600; }
.nav-right { display: flex; align-items: center; justify-self: end; gap: 18px; }
.nav-contact { display: flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid #ffffff50; border-radius: 30px; }
.nav-contact svg { width: 15px; height: 15px; }
.nav-contact:hover { border-color: var(--accent); color: var(--accent); }
.button { border-radius: 40px; min-height: 47px; padding-inline: 18px; font-weight: 650; }
.button.primary:hover { transform: translateY(-2px); }
.button.secondary { border-color: color-mix(in srgb, currentColor 33%, transparent); }
.button svg { width: 17px; height: 17px; }

.hero { padding: 0; }
.cover {
  height: auto; min-height: max(740px,100svh); border-radius: 0;
  display: grid; grid-template-rows: minmax(0,1fr) auto; align-items: stretch;
}
.cover-art > picture { display: block; }
.cover-art img { object-position: 52% 43%; }
.cover-art--film img { object-position: 27% 43%; filter: saturate(.91); }
.cover-art--game img { object-position: 60% center; filter: saturate(.9); }
.cover-art--game::after { display: none; }
.cover-shade {
  background: linear-gradient(180deg, #05090caa 0%, #060a0b12 19%, transparent 51%, #080e10b0 80%, #090e10 100%),
              linear-gradient(90deg, #080d13a8 0%, #080d1363 33%, transparent 77%);
}
.scene-light {
  position:absolute; z-index:0; inset:-9% 0 27%; pointer-events:none;
  background:radial-gradient(ellipse at 3% 19%,#d9a96a55,transparent 48%);
  mix-blend-mode:screen; opacity:.64;
}
[data-paused="false"] .scene-light { animation: drift-light 10s ease-in-out infinite alternate; }
[data-theme="game"] .scene-light { background:radial-gradient(ellipse at 74% 49%,#517bdc63,transparent 47%); }
[data-theme="toy"] .scene-light { background:radial-gradient(ellipse at 68% 40%,#ffe2db49,transparent 46%); }
@keyframes drift-light {
  from { opacity:.45; transform:translate3d(-1%,0,0); }
  to { opacity:.92; transform:translate3d(1.5%,2%,0); }
}
[data-theme="game"] .cover-shade {
  background: linear-gradient(180deg, #090911cc 0%, #09091120 19%, transparent 46%, #101020b0 78%, #101020 100%),
              linear-gradient(90deg,#080a20cb,#090e2355 44%,transparent 75%);
}
[data-theme="toy"] .cover-shade {
  background: linear-gradient(180deg,#23152dce 0%,#38204116 22%,transparent 54%,#1a13212b 67%,#19131b 100%);
}
.cover-copy {
  align-self: center; margin: 0 auto; padding: clamp(124px, 18svh, 175px) 0 58px;
  width: min(100% - 2 * var(--gutter), 1600px);
}
.hero-discipline { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--stage-muted); letter-spacing: .06em; }
.hero-discipline span { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
[data-theme="toy"] .hero-discipline span { background: #785b76; }
.name-mask { padding: 7px .12em 11px 0; margin: 8px 0 0; }
.name-wordmark,[data-theme="toy"] .name-wordmark {
  color: var(--stage-ink); font: 400 clamp(76px,10.4vw,177px)/.87 var(--display);
  letter-spacing: -.025em; white-space: nowrap;
}
.name-wordmark span,[data-theme="toy"] .name-wordmark span { display: inline-block; }
.name-wordmark span:last-child { font-style: italic; }
.cover-baseline { display: grid; gap: 27px; margin-top: 11px; }
.cover-baseline p { font: 500 clamp(16px,1.65vw,25px)/1.5 var(--han); color: var(--stage-ink); letter-spacing: .08em; }
.hero-actions { gap: 10px; }
.hero-actions .secondary,.case-actions .secondary { background: #0b11178c; color: #f8f4e9; border-color: #ffffff59; }
[data-theme="toy"] .hero-actions .secondary, [data-theme="toy"] .case-actions .secondary { background: #f8e8e5a9; color:#42263b; border-color:#684b6663; }
[data-theme="toy"] .hero-actions .primary,[data-theme="toy"] .case-actions .primary { background: #51344e; color:#fff0ed; border-color:transparent; }
.hero-foot { z-index: 3; display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 30px; }
.world-controls { flex: 1; margin-top: 0; max-width: 770px; }
.world-buttons { gap: clamp(8px,1.1vw,15px); }
.world-button {
  display: grid; grid-template-columns: 1fr auto; gap: 7px; padding: 0;
  border: 1px solid #ffffff2b; border-radius: 7px; background: #1014178f; color: #f5f0e9;
  text-align: left; overflow: hidden;
}
.world-button[aria-pressed="true"] { background: #222b23ee; color: #f8f6eb; border-color: var(--accent); }
[data-theme="game"] .world-button[aria-pressed="true"] { background:#2d2337; }
[data-theme="toy"] .world-button[aria-pressed="true"] { background:#392739; }
.world-thumb { grid-column: 1/-1; width: 100%; border-radius: 0; aspect-ratio: 2.44; }
.world-thumb img { filter: saturate(.85) brightness(.76); transition: filter .32s, transform .58s var(--ease); }
.world-button:hover img,.world-button[aria-pressed="true"] img { filter:none; }
.world-button:hover img { transform: scale(1.04); }
.world-label { display: flex; align-items: center; gap: 9px; padding: 0 0 8px 10px; line-height: 1.25; }
.world-label strong { font-size: 14px; font-weight: 620; }
.world-label > span,.world-button[aria-pressed="true"] .world-label > span { color: #dfecd5; opacity: .85; font-size: 12px; }
.world-button > svg { width: 15px; height: 15px; margin: 0 9px 8px 0; }
.cover-caption { position: static; display: flex; flex-wrap: wrap; justify-content: end; color: #f4f1e6; }
.cover-caption a,.motion-button { background: #10121970; color: inherit; font-size: 12px; border-radius: 5px; }
.motion-button { border-color: #ffffff41; }
[data-theme="toy"] .cover-caption a,[data-theme="toy"] .cover-caption .motion-button { background: #221923ba; color:#fff4f3; }
.cover-art--toy .toy-composite { background: #ead6dc; }
.cover-art--toy .toy-arch { left: 44%; width: 56%; background: radial-gradient(ellipse at 60% 45%, #f7e9e8, #cbaacb 96%); }
.cover-art--toy .toy-composite img,.cover-art--toy .toy-composite > i { margin-left: 11%; }
.cover-art--toy .toy-left,.cover-art--toy .toy-right { height: 37%; bottom: 35%; }
.cover-art--toy .toy-mid { height: 49%; bottom: 32%; }
[data-theme="toy"] .cover-copy { padding-top: max(125px,16svh); }
[data-theme="toy"] .name-wordmark { font-size: clamp(72px,8.25vw,148px); }

.world,.archive { --section-space: clamp(68px,9.2vw,144px); }
.section-head h2,.about h2,.contact h2,.case-brief h2,.figure-copy h2 {
  font: 500 var(--head)/1.17 var(--han);
  letter-spacing: -.055em;
}
.section-head .section-translation {
  font: italic 400 clamp(30px,4.3vw,64px)/.91 var(--display); letter-spacing: -.02em;
  color: var(--accent); white-space: nowrap;
}
.section-index { display: flex; align-items: center; gap: 8px; font: 600 13px/1.5 var(--font); color: var(--muted); margin-bottom: 14px; }
.section-index span { color: var(--accent); font-variant-numeric: tabular-nums; }
.feature-layout { display: grid; grid-template-columns: minmax(0,2.65fr) minmax(0,1fr); gap: clamp(22px,4vw,65px); align-items: start; }
.feature-lead,.feature-side { min-width: 0; }
.feature-image { display: block; position: relative; overflow: hidden; border-radius: 6px; background: var(--surface); }
.feature-image img { width: 100%; height: auto; display: block; }
.feature-image--toy { background: #eee4e9; }
.feature-image .image-arrow {
  position: absolute; right: 16px; bottom: 16px; display: grid; place-items:center;
  width: 48px; height: 48px; border: 1px solid #ffffff66; border-radius: 50%; color: #fff; background: #090e13a6;
}
.image-arrow svg { width: 20px; height: 20px; }
.feature-image:hover .image-arrow { background: var(--accent); color: var(--accent-ink); }
.feature-caption { display: flex; gap: 20px; justify-content: space-between; align-items: start; padding-top: 20px; }
.feature-caption h3 { font: 500 clamp(27px,3.15vw,48px)/1.25 var(--han); letter-spacing: -.06em; }
.feature-caption p { color: var(--muted); max-width: 37em; margin-top: 10px; line-height: 1.65; }
.feature-caption .button { flex-shrink: 0; margin-top: 4px; }
.feature-side { padding-top: 0; }
.feature-side-heading { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; color: var(--muted); font-size: 13px; }
.feature-side-heading svg { width: 14px; height: 14px; }
.feature-side-link { display: block; position:relative; border-radius: 6px; }
.feature-side-media { overflow: hidden; border-radius: 5px; background: var(--surface); }
.feature-side-media > img { width: 100%; height: auto; display: block; }
.feature-side-link strong { display: block; margin: 12px 0 8px; font-size: clamp(16px,1.5vw,21px); font-weight: 630; }
.feature-side .text-link { color: var(--accent); margin-top: 12px; }
.package-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px; background: #3b2d44; }
.package-pair img { width: 100%; height: auto; border-radius: 3px; }
[data-edge] { position: relative; }
[data-edge]::after {
  content: ""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; padding:1px;
  background: var(--edge-paint,none); opacity:0;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .25s ease;
}
[data-edge]:hover::after { opacity:.74; }
.archive-bar { background: #111a1c59; border-block: 1px solid #ffffff1e; padding: 8px 0; border-radius: 0; }
.filters button { border-radius: 24px; }
.archive-grid { column-gap: clamp(14px,2.8vw,44px); row-gap: clamp(32px,4.9vw,75px); }
.project-visual { aspect-ratio: 1.65; border-radius: 5px; }
.project h3 { font: 500 clamp(19px,2.1vw,31px)/1.24 var(--han); letter-spacing: -.05em; }
.project-meta { margin-block: 9px 4px; font-size: 12px; }
.project p { font-size: clamp(14px,1.1vw,16px); }
.project-launch { border-radius: 50%; }
.about { gap: clamp(30px,7vw,111px); }
.about-visual { background: #2a1b22; }
.about-visual img { object-position: 26% center; }
.about-copy .about-lead { font-family: var(--han); line-height: 1.5; margin-top: 19px; }
.experience { gap: 0; }
.experience li { padding-block: 13px; border-bottom: 1px solid #ffffff21; }
.contact { background: #080c1242; border-top: 1px solid #ffffff1b; }
.contact-inner { padding-top: clamp(62px,9vw,145px); }
.contact-email {
  font: 400 clamp(39px,8.3vw,134px)/.98 var(--display); letter-spacing: -.025em;
  margin-block: 37px 25px;
}
.contact-email svg { width: .43em; height: .43em; }
.contact-end { color: var(--muted); }

.case-opening.shell { width: 100%; padding: 0; }
.case-stage { min-height: clamp(570px, 82svh, 920px); border: 0 !important; border-radius: 0; }
.case-stage-top { top: calc(var(--nav-height) + 20px); left: var(--gutter); right: var(--gutter); }
.case-heading { padding: calc(var(--nav-height) + 65px) var(--gutter) clamp(55px,7.6vw,120px); }
.case-heading h1,.case--toy .case-heading h1 {
  font: 500 clamp(43px,6.8vw,106px)/1.15 var(--han); letter-spacing: -.055em;
}
.case--toy .case-heading h1 { font-size: clamp(43px,5.9vw,91px); }
.case-english { font: italic 400 clamp(22px,3.2vw,47px)/1 var(--display); color: var(--stage-muted); }
.case-full-title,.case-desc { line-height:1.6; }
.case--toy .case-stage-art .toy-composite { background: #eddade; }
.case--toy .case-shade {
  background: linear-gradient(180deg,#2e1f35ae 0%,transparent 23%),
              linear-gradient(90deg,#f5e8e5 3%,#f0e2e2e0 25%,#f0e2e22b 60%,transparent);
}
.case--toy .case-stage-top .motion-button { color:#523849; border-color:#734d6666; }
.case-brief { padding-block: clamp(57px,8vw,122px) 0; }
.case-brief h2 { font-size: clamp(32px,3.5vw,52px); }
.case-brief .case-lead { font-size: clamp(18px,1.8vw,27px); }
.case-jump a { border-radius: 26px; }
.proof { margin-top: clamp(62px,9vw,130px); }
.proof .section-head h2 { font-size: clamp(35px,4.65vw,64px); }
.proof-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap: clamp(15px,2.7vw,43px); }
.proof-piece .image-button { aspect-ratio: 1.68; display:grid; place-items:center; background: var(--surface); }
.proof-piece .image-button img { height:100%; width:100%; object-fit:contain; max-height:none; position:absolute; inset:0; }
.proof-piece h3 { font:500 clamp(19px,2.15vw,31px)/1.25 var(--han); margin:15px 0 8px; }
.proof-piece p { color:var(--muted); font-size:clamp(14px,1.2vw,17px); }
.case :is(.case-clips,.gallery-section) h2 { font-size: clamp(36px,4.4vw,65px); }
.clip-visual,.image-button { border-radius: 5px; }
.case .clip-visual:has(img) { background: color-mix(in srgb,var(--surface) 82%,transparent); }
.figure-stage { border-radius: 6px; }
.case-pagination strong { font-family:var(--han); font-weight:500; }
.resume { padding-top: calc(var(--nav-height) + 25px); }
.resume-paper { background: #f4f1e9; color:#242222; border-radius: 5px; }
.resume-paper h1,.resume-paper h2 { font-family: var(--han); font-weight: 500; }
.viewer { border-radius: 7px; }
@media (max-width: 900px) {
  .hero-foot { display: grid; gap: 11px; }
  .world-controls { width:100%; max-width: 680px; }
  .cover-caption { justify-content:start; }
  .cover-copy { padding-bottom: 38px; }
  [data-theme="toy"] .name-wordmark { font-size: clamp(58px,8vw,78px); }
  .feature-layout { grid-template-columns: minmax(0,2.2fr) minmax(0,1fr); gap: 22px; }
}
@media (max-width: 680px) {
  :root { --nav-height: 58px; --gutter: 19px; }
  .nav-right { gap: 10px; }
  .nav-contact { padding: 6px 8px; }
  .nav-contact svg { display: none; }
  .navigation { gap: 12px; }
  .nav-shell { gap: 8px; }
  .mark { width: 23px; height: 23px; }
  .brand { gap: 4px; }
  .cover { min-height: max(660px,100svh); }
  .cover-copy { align-self: end; padding-top: 135px; padding-bottom: 36px; }
  .cover-art img { object-position: 50% 46%; }
  .scene-light { inset:-5% 0 35%; }
  .cover-shade { background: linear-gradient(180deg,#070b10bb,transparent 20%,#090e1022 38%,#090e10a2 64%,#090e10 100%); }
  [data-theme="game"] .cover-shade { background: linear-gradient(180deg,#0b0a1bdd,transparent 18%,transparent 35%,#101020e6 78%,#101020 100%); }
  .name-wordmark,[data-theme="toy"] .name-wordmark { font-size: clamp(54px,13.6vw,86px); line-height: .95; }
  .name-wordmark span,[data-theme="toy"] .name-wordmark span { display: inline-block; }
  .hero-discipline { gap: 6px; font-size: 12px; }
  .name-mask { margin-top: 6px; }
  .cover-baseline { margin-top: 4px; gap: 17px; }
  .cover-baseline p { font-size: 17px; }
  .hero-foot { padding-bottom: 20px; gap: 8px; }
  .world-thumb { aspect-ratio: 1.84; }
  .world-button { grid-template-columns: 1fr; gap: 7px; padding: 0; border-radius: 5px; }
  .world-label { padding: 0 4px 7px 7px; gap: 5px; }
  .world-label strong { font-size: 12px; }
  .world-label > span { display:inline; font-size:10px; }
  .world-button > svg { display:none; }
  .cover-caption { gap: 6px; justify-content:space-between; }
  .cover-caption a,.motion-button { font-size: 11px; min-height: 35px; }
  .cover-art--toy .toy-arch { top: 12%; width: 94%; left: 3%; height: 62%; }
  .cover-art--toy .toy-composite img,.cover-art--toy .toy-composite > i { margin-left: 0; }
  .cover-art--toy .toy-left,.cover-art--toy .toy-right { height: 26%; bottom: 53%; }
  .cover-art--toy .toy-mid { height: 32%; bottom: 50%; }
  .cover-art--toy .toy-composite > i:nth-of-type(1),.cover-art--toy .toy-composite > i:nth-of-type(3) { top: 47%; height: 8%; }
  .cover-art--toy .toy-composite > i:nth-of-type(2) { top: 50%; height: 8%; }
  [data-theme="toy"] .cover-copy { padding-top:135px; }
  .feature-layout { grid-template-columns: 1fr; gap: 26px; }
  .feature-caption { align-items: start; gap: 12px; }
  .feature-caption p { font-size: 14px; }
  .feature-caption .button { padding-inline: 12px; }
  .feature-side { max-width: 100%; }
  .feature-side-heading { padding-bottom: 8px; }
  .feature-side-link { width: 70%; }
  .section-head .section-translation { font-size: 33px; }
  .section-head { gap: 11px; }
  .contact-email { font-size: clamp(31px,9.2vw,63px); }
  .case-stage { min-height: 535px; }
  .case-stage-top { top: calc(var(--nav-height) + 9px); left: var(--gutter); right: var(--gutter); }
  .case-heading { padding-bottom: 42px; }
  .case-heading h1,.case--toy .case-heading h1 { font-size: clamp(42px,10.6vw,64px); }
  .case--toy .case-shade { background: linear-gradient(180deg,#2e1f35ba 0%,transparent 24%,transparent 37%,#f2e4e2a8 64%,#f1e5e3 100%); }
  .case--toy .toy-composite img { bottom: 45%; }
  .case--toy .toy-composite .toy-mid { bottom: 42%; }
  .proof-grid { grid-template-columns:1fr; }
  .proof-piece + .proof-piece { margin-top: 14px; }
}
@media (max-width: 370px) {
  .nav-shell .navigation > a:last-child { display:none; }
  .feature-caption { flex-direction:column; }
  .cover-caption a { font-size: 10.5px; }
  .hero-actions .button { padding-inline: 12px; }
}
@media (max-width: 355px) {
  .nav-shell .navigation > a:first-child { display:none; }
  .nav-shell .navigation > a:nth-child(2) { display:inline-flex; }
}