:root {
	--color-bg: #f1efe8;
	--color-surface: #faf9f5;
	--color-text: #171713;
	--color-muted: #6e6c63;
	--color-brand: #e74a2b;
	--color-brand-dark: #b72f18;
	--color-accent: #b7c6a3;
	--color-dark: #171915;
	--color-border: #cbc8bd;
	--color-light-border: rgba(255, 255, 255, 0.22);
	--font-main: "Noto Sans TC", sans-serif;
	--container-wide: 1480px;
	--container-main: 1240px;
	--header-height: 82px;
	--radius-small: 4px;
	--radius-medium: 12px;
	--shadow-soft: 0 24px 70px rgba(20, 20, 15, 0.13);
	--transition-fast: 220ms ease;
	--transition-main: 600ms cubic-bezier(0.22, 0.8, 0.28, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; overflow-x: hidden; background: var(--color-bg); color: var(--color-text); font-family: var(--font-main); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
body.is-menu-open { overflow: hidden; }

img { display: block; width: 100%; max-width: 100%; }

a { color: inherit; text-decoration: none; }

ul { margin: 0; padding: 0; list-style: none; }

p { margin: 0; }

h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.15; }

figure { margin: 0; }

button { font: inherit; }

.skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 10px 16px; transform: translateY(-180%); background: var(--color-text); color: #fff; transition: transform var(--transition-fast); }
.skip-link:focus { transform: translateY(0); }

.container-main { width: min(calc(100% - 64px), var(--container-main)); margin: 0 auto; }
.container-wide { width: min(calc(100% - 40px), var(--container-wide)); margin: 0 auto; }

.text-link { display: inline-flex; align-items: center; gap: 12px; width: fit-content; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-size: 0.94rem; font-weight: 700; letter-spacing: 0.05em; transition: gap var(--transition-fast), color var(--transition-fast); }
.text-link::after { content: "↗"; font-size: 0.92em; }
.text-link:hover, .text-link:focus-visible { gap: 18px; color: var(--color-brand); }

.section-label { display: flex; align-items: center; gap: 12px; color: var(--color-muted); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.section-label::before { content: ""; width: 30px; height: 2px; background: currentColor; }
.section-title {max-width: 850px;font-size: clamp(2.4rem, 5.2vw, 4rem);letter-spacing: -0.055em;}

.reveal-line { position: relative; overflow: hidden; }
.reveal-line > span { display: block; transform: translateY(110%); transition: transform 900ms cubic-bezier(0.22, 0.8, 0.28, 1); }
.is-visible .reveal-line > span, .reveal-line.is-visible > span { transform: translateY(0); }

.media-reveal { overflow: hidden; }
.media-reveal img { transform: scale(1.08); clip-path: inset(0 0 100% 0); transition: clip-path 950ms cubic-bezier(0.22, 0.8, 0.28, 1), transform 1400ms cubic-bezier(0.22, 0.8, 0.28, 1); }
.media-reveal.is-visible img, .is-visible .media-reveal img { transform: scale(1); clip-path: inset(0); }

.line-reveal { position: relative; }
.line-reveal::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; transform: scaleX(0); transform-origin: left; background: currentColor; transition: transform 800ms cubic-bezier(0.22, 0.8, 0.28, 1); }
.line-reveal.is-visible::after, .is-visible .line-reveal::after { transform: scaleX(1); }

/* header */
header { position: sticky; top: 0; z-index: 100; height: var(--header-height); background: rgba(241, 239, 232, 0.96); border-bottom: 1px solid transparent; transition: height var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
header.is-scrolled { height: 68px; border-color: var(--color-border); box-shadow: 0 8px 28px rgba(23, 23, 19, 0.06); }
header .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: min(calc(100% - 64px), var(--container-wide)); height: 100%; margin: 0 auto; }
header .brand-link { display: inline-flex; align-items: center; gap: 13px; width: fit-content; }
header h1 { display: flex; align-items: baseline; gap: 9px; font-size: 1rem; letter-spacing: -0.02em; }
header .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; background: var(--color-brand); color: #fff; font-size: 0.83rem; font-weight: 900; line-height: 1; transform: rotate(-3deg); transition: transform var(--transition-fast); }
header .brand-link:hover .brand-mark { transform: rotate(4deg); }
header .brand-name-en { color: var(--color-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; }
header .desktop-nav { display: flex; align-items: center; gap: 32px; }
header .desktop-nav a { position: relative; color: var(--color-muted); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; transition: color var(--transition-fast); }
header .desktop-nav a::after { content: ""; position: absolute; right: 0; bottom: -10px; left: 0; height: 2px; transform: scaleX(0); transform-origin: right; background: var(--color-brand); transition: transform var(--transition-fast); }
header .desktop-nav a:hover, header .desktop-nav a:focus-visible { color: var(--color-text); }
header .desktop-nav a:hover::after, header .desktop-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
header .header-action { justify-self: end; display: inline-flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--color-text); font-size: 0.82rem; font-weight: 800; }
header .header-action::after { content: "↗"; }
header .menu-toggle { display: none; justify-self: end; position: relative; width: 42px; height: 42px; border: 1px solid var(--color-border); }
header .menu-toggle span { position: absolute; left: 11px; width: 18px; height: 1px; background: var(--color-text); transition: transform var(--transition-fast), top var(--transition-fast); }
header .menu-toggle span:first-child { top: 16px; }
header .menu-toggle span:last-child { top: 24px; }
header .menu-toggle.is-active span:first-child { top: 20px; transform: rotate(45deg); }
header .menu-toggle.is-active span:last-child { top: 20px; transform: rotate(-45deg); }
header .mobile-nav { position: fixed; inset: var(--header-height) 0 0; display: none; padding: 36px 32px; background: var(--color-dark); color: #fff; }
header .mobile-nav.is-active { display: flex; flex-direction: column; }
header .mobile-nav a { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-bottom: 1px solid var(--color-light-border); font-size: 1.4rem; font-weight: 700; }
header .mobile-nav a::after { content: "↗"; color: var(--color-brand); font-size: 0.8em; }

/* hero */
#hero-section { position: relative; min-height: calc(100vh - var(--header-height)); padding: 58px 0 40px; overflow: hidden; }
#hero-section .hero-header { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr); align-items: end; gap: 70px; width: min(calc(100% - 64px), var(--container-main)); margin: 0 auto 48px; }
#hero-section .hero-kicker { margin-bottom: 24px; color: var(--color-brand); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.15em; }
#hero-section .hero-title { max-width: 970px; font-size: clamp(4rem, 8.6vw, 9.2rem); letter-spacing: -0.075em; line-height: 1.1; }
#hero-section .hero-title .hero-title-outline { color: var(--color-bg); text-shadow: 2px 0 0 var(--color-text), -2px 0 0 var(--color-text), 0 2px 0 var(--color-text), 0 -2px 0 var(--color-text), 2px 2px 0 var(--color-text), -2px -2px 0 var(--color-text), 2px -2px 0 var(--color-text), -2px 2px 0 var(--color-text); }
#hero-section .hero-intro { padding-bottom: 12px; }
#hero-section .hero-intro p { margin-bottom: 28px; color: var(--color-muted); font-size: clamp(1rem, 1.3vw, 1.2rem); }
#hero-section .hero-stage { position: relative; width: min(calc(100% - 40px), var(--container-wide)); height: clamp(430px, 51vw, 710px); margin: 0 auto; }
#hero-section .hero-main-figure { position: absolute; inset: 0 16% 0 0; overflow: hidden; background: var(--color-dark); }
#hero-section .hero-main-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; filter: saturate(0.78) contrast(1.05); }
#hero-section .hero-main-figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(15, 16, 13, 0.05) 46%, rgba(15, 16, 13, 0.42) 100% ); }
#hero-section .hero-side-figure { position: absolute; right: 0; bottom: -1px; z-index: 2; width: 29%; height: 62%; border: 12px solid var(--color-bg); overflow: hidden; box-shadow: var(--shadow-soft); }
#hero-section .hero-side-figure img { height: 100%; object-fit: cover; object-position: center; filter: saturate(0.85); }
#hero-section .hero-caption { position: absolute; z-index: 3; top: 34px; right: 4%; display: flex; flex-direction: column; width: min(270px, 24vw); padding: 22px; background: var(--color-brand); color: #fff; transform: rotate(1.5deg); }
#hero-section .hero-caption strong { margin-bottom: 24px; font-size: 1.2rem; line-height: 1.35; }
#hero-section .hero-caption span { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em; opacity: 0.84; }
#hero-section .hero-index { position: absolute; bottom: 24px; left: 24px; z-index: 3; display: flex; align-items: center; gap: 18px; padding: 13px 17px; background: var(--color-surface); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; }
#hero-section .hero-index::before { content: ""; width: 42px; height: 2px; background: var(--color-brand); }

/* selected-games */
#selected-games { padding: 145px 0 120px; }
#selected-games .selected-header { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 70px; align-items: start; margin-bottom: 80px; }
#selected-games .selected-header-copy { max-width: 470px; padding-top: 10px; }
#selected-games .selected-header-copy p { margin-top: 25px; color: var(--color-muted); font-size: 1.06rem; }
#selected-games .selected-list { border-top: 1px solid var(--color-border); }
#selected-games .selected-item { display: grid; grid-template-columns: 110px minmax(0, 1fr) 260px 70px; gap: 28px; align-items: center; min-height: 154px; border-bottom: 1px solid var(--color-border); transition: background var(--transition-fast), padding var(--transition-fast); }
#selected-games .selected-item:hover { padding-right: 20px; padding-left: 20px; background: var(--color-surface); }
#selected-games .selected-status { color: var(--color-brand); font-size: 0.76rem; font-weight: 900; letter-spacing: 0.1em; }
#selected-games .selected-title { font-size: clamp(1.5rem, 2.8vw, 3rem); letter-spacing: -0.04em; }
#selected-games .selected-meta { color: var(--color-muted); font-size: 0.87rem; line-height: 1.7; }
#selected-games .selected-arrow { display: grid; place-items: center; width: 48px; height: 48px; justify-self: end; border: 1px solid var(--color-border); font-size: 1.1rem; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
#selected-games .selected-item:hover .selected-arrow { transform: translate(4px, -4px); background: var(--color-text); color: #fff; }
#selected-games .selected-preview { display: grid; grid-template-columns: 1.55fr 0.8fr; gap: 18px; margin-top: 18px; }
#selected-games .selected-preview-main { aspect-ratio: 16 / 8; overflow: hidden; }
#selected-games .selected-preview-main img { height: 100%; object-fit: cover; object-position: center; transition: transform 900ms cubic-bezier(0.22, 0.8, 0.28, 1); }
#selected-games .selected-preview-main:hover img { transform: scale(1.025); }
#selected-games .selected-preview-note { display: flex; flex-direction: column; justify-content: space-between; padding: 28px; background: var(--color-accent); }
#selected-games .selected-preview-note strong { max-width: 260px; font-size: clamp(1.3rem, 2.2vw, 2.25rem); line-height: 1.25; }
#selected-games .selected-preview-note span { color: rgba(23, 23, 19, 0.68); font-size: 0.77rem; font-weight: 800; letter-spacing: 0.08em; }

/* world */
#world-building { position: relative; min-height: 830px; padding: 130px 0; overflow: hidden; background: var(--color-dark); color: #fff; }
#world-building .world-background { position: absolute; inset: 0; }
#world-building .world-background img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; opacity: 0.45; filter: saturate(0.68) contrast(1.12); transform: scale(1.04); transition: transform 1800ms cubic-bezier(0.22, 0.8, 0.28, 1); }
#world-building.is-visible .world-background img { transform: scale(1); }
#world-building .world-background::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(15, 16, 13, 0.92) 0%, rgba(15, 16, 13, 0.58) 49%, rgba(15, 16, 13, 0.22) 100% ); }
#world-building .world-content { position: relative; z-index: 2; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 120px; align-items: end; min-height: 570px; }
#world-building .section-label { margin-bottom: 30px; color: var(--color-accent); }
#world-building .world-title { max-width: 900px; font-size: clamp(3.4rem, 7.5vw, 6rem); letter-spacing: -0.065em; line-height: 0.94; }
#world-building .world-title em { color: var(--color-brand); font-style: normal; }
#world-building .world-notes { align-self: end; padding-left: 32px; border-left: 1px solid var(--color-light-border); }
#world-building .world-notes p { margin-bottom: 38px; color: rgba(255, 255, 255, 0.74); font-size: 1.05rem; }
#world-building .world-detail-list { border-top: 1px solid var(--color-light-border); }
#world-building .world-detail-item { display: grid; grid-template-columns: 90px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--color-light-border); }
#world-building .world-detail-item span { color: var(--color-accent); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; }
#world-building .world-detail-item strong { font-size: 0.9rem; font-weight: 600; }

/* development */
#development-method { padding: 145px 0; background: var(--color-surface); }
#development-method .method-layout { display: grid; grid-template-columns: minmax(310px, 0.72fr) minmax(0, 1.28fr); gap: 100px; align-items: start; }
#development-method .method-intro { position: sticky; top: 110px; }
#development-method .section-label { margin-bottom: 28px; }
#development-method .method-title { margin-bottom: 32px; font-size: clamp(2.8rem, 5vw, 5.4rem); letter-spacing: -0.055em; }
#development-method .method-intro p { max-width: 480px; margin-bottom: 34px; color: var(--color-muted); font-size: 1.04rem; }
#development-method .method-list { border-top: 1px solid var(--color-border); }
#development-method .method-item { display: grid; grid-template-columns: 52px 1fr; gap: 24px; padding: 34px 0 38px; border-bottom: 1px solid var(--color-border); }
#development-method .method-symbol { color: var(--color-brand); font-size: 1rem; font-weight: 900; }
#development-method .method-item h3 { margin-bottom: 13px; font-size: clamp(1.35rem, 2.3vw, 2.15rem); letter-spacing: -0.035em; }
#development-method .method-item p { max-width: 650px; color: var(--color-muted); }
#development-method .method-media { position: relative; margin-top: 48px; margin-left: 76px; }
#development-method .method-media figure { aspect-ratio: 16 / 10; overflow: hidden; }
#development-method .method-media img { height: 100%; object-fit: cover; object-position: center; }
#development-method .method-media figcaption { position: absolute; right: -22px; bottom: -28px; max-width: 250px; padding: 20px 22px; background: var(--color-brand); color: #fff; font-size: 0.8rem; font-weight: 600; line-height: 1.65; }

/* publishing */
#publishing-support { padding: 145px 0 130px; }
#publishing-support .publishing-header { display: grid; grid-template-columns: 0.65fr 1.35fr; gap: 80px; align-items: end; margin-bottom: 76px; }
#publishing-support .publishing-header-copy { max-width: 690px; }
#publishing-support .publishing-header-copy p { max-width: 550px; margin-top: 26px; color: var(--color-muted); font-size: 1.05rem; }
#publishing-support .publishing-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 20px; }
#publishing-support .publishing-media { position: relative; min-height: 650px; overflow: hidden; }
#publishing-support .publishing-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.76); transition: transform 1000ms cubic-bezier(0.22, 0.8, 0.28, 1); }
#publishing-support .publishing-media:hover img { transform: scale(1.025); }
#publishing-support .publishing-media-text { position: absolute; right: 24px; bottom: 24px; left: 24px; display: flex; justify-content: space-between; gap: 30px; align-items: end; padding: 28px; background: rgba(250, 249, 245, 0.94); }
#publishing-support .publishing-media-text strong { max-width: 370px; font-size: clamp(1.35rem, 2.3vw, 2.25rem); line-height: 1.3; }
#publishing-support .publishing-media-text span { color: var(--color-muted); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; white-space: nowrap; }
#publishing-support .publishing-list { display: flex; flex-direction: column; background: var(--color-dark); color: #fff; }
#publishing-support .publishing-item { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: space-between; min-height: 158px; padding: 30px 34px; border-bottom: 1px solid var(--color-light-border); overflow: hidden; }
#publishing-support .publishing-item:last-child { border-bottom: 0; }
#publishing-support .publishing-item::before { content: ""; position: absolute; inset: 0; transform: translateX(-101%); background: var(--color-brand); transition: transform 480ms cubic-bezier(0.22, 0.8, 0.28, 1); }
#publishing-support .publishing-item:hover::before { transform: translateX(0); }
#publishing-support .publishing-item-header, #publishing-support .publishing-item p { position: relative; z-index: 1; }
#publishing-support .publishing-item-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
#publishing-support .publishing-item h3 { font-size: 1.25rem; }
#publishing-support .publishing-item-header span { color: var(--color-accent); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; }
#publishing-support .publishing-item:hover .publishing-item-header span { color: #fff; }
#publishing-support .publishing-item p { color: rgba(255, 255, 255, 0.65); font-size: 0.88rem; }
#publishing-support .publishing-item:hover p { color: rgba(255, 255, 255, 0.88); }

/* studio */
#studio-notes { padding: 130px 0 155px; border-top: 1px solid var(--color-border); }
#studio-notes .notes-header { display: flex; justify-content: space-between; gap: 50px; align-items: end; margin-bottom: 56px; }
#studio-notes .notes-title { margin-top: 24px; font-size: clamp(2.5rem, 5vw, 5.4rem); letter-spacing: -0.055em; }
#studio-notes .notes-header p { max-width: 420px; padding-bottom: 8px; color: var(--color-muted); }
#studio-notes .notes-grid { display: grid; grid-template-columns: 1.18fr 0.82fr; grid-template-rows: auto auto; gap: 20px; }
#studio-notes .notes-item { position: relative; overflow: hidden; }
#studio-notes .notes-item:first-child { grid-row: span 2; min-height: 720px; }
#studio-notes .notes-item:nth-child(2), #studio-notes .notes-item:nth-child(3) { min-height: 350px; }
#studio-notes .notes-item img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82); transition: transform 900ms cubic-bezier(0.22, 0.8, 0.28, 1), filter 500ms ease; }
#studio-notes .notes-item:hover img { transform: scale(1.035); filter: saturate(1); }
#studio-notes .notes-item::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(0deg, rgba(12, 13, 11, 0.86), transparent); }
#studio-notes .notes-content { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: 32px; color: #fff; }
#studio-notes .notes-meta { display: flex; gap: 14px; margin-bottom: 12px; color: var(--color-accent); font-size: 0.73rem; font-weight: 800; letter-spacing: 0.08em; }
#studio-notes .notes-content h3 { max-width: 540px; font-size: clamp(1.45rem, 2.6vw, 2.8rem); letter-spacing: -0.035em; }
#studio-notes .notes-item:nth-child(2) .notes-content h3, #studio-notes .notes-item:nth-child(3) .notes-content h3 { font-size: clamp(1.2rem, 1.8vw, 1.8rem); }

/* next-world */
#next-world { padding: 0 0 40px; }
#next-world .next-layout { position: relative; display: grid; grid-template-columns: 1.2fr 0.8fr; min-height: 530px; overflow: hidden; background: var(--color-brand); color: #fff; }
#next-world .next-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 72px; }
#next-world .next-label { font-size: 0.78rem; font-weight: 900; letter-spacing: 0.14em; }
#next-world .next-title { max-width: 760px; font-size: clamp(3rem, 6.4vw, 5rem); }
#next-world .next-actions { display: flex; align-items: center; gap: 30px; }
#next-world .next-action-main { display: inline-flex; align-items: center; justify-content: space-between; gap: 46px; min-width: 260px; padding: 17px 20px; background: #fff; color: var(--color-text); font-weight: 800; transition: transform var(--transition-fast), background var(--transition-fast); }
#next-world .next-action-main::after { content: "↗"; }
#next-world .next-action-main:hover, #next-world .next-action-main:focus-visible { transform: translateY(-4px); background: var(--color-accent); }
#next-world .next-action-sub { border-bottom: 1px solid rgba(255, 255, 255, 0.75); font-size: 0.86rem; font-weight: 700; }
#next-world .next-media { position: relative; overflow: hidden; }
#next-world .next-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: multiply; filter: grayscale(0.25) contrast(1.08); opacity: 0.76; transition: transform 1200ms cubic-bezier(0.22, 0.8, 0.28, 1); }
#next-world .next-layout:hover .next-media img { transform: scale(1.04); }
#next-world .next-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-brand) 0%, transparent 50%); }

/* footer */
footer { padding: 54px 0 38px; background: var(--color-dark); color: #fff; }
footer .footer-main { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 90px; padding-bottom: 65px; }
footer .footer-brand { max-width: 620px; }
footer .footer-logo { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 26px; }
footer .footer-logo-mark { display: grid; place-items: center; width: 42px; height: 42px; background: var(--color-brand); font-size: 0.9rem; font-weight: 900; transform: rotate(-3deg); }
footer .footer-logo strong { font-size: 1.05rem; }
footer .footer-logo span { margin-left: 5px; color: rgba(255, 255, 255, 0.46); font-size: 0.75rem; letter-spacing: 0.09em; }
footer .footer-brand p { max-width: 560px; color: rgba(255, 255, 255, 0.57); font-size: 0.95rem; }
footer .footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 50px; align-content: start; }
footer .footer-nav a { padding: 13px 0; border-bottom: 1px solid var(--color-light-border); color: rgba(255, 255, 255, 0.78); font-size: 0.86rem; font-weight: 600; transition: color var(--transition-fast), padding-left var(--transition-fast); }
footer .footer-nav a:hover, footer .footer-nav a:focus-visible { padding-left: 8px; color: var(--color-accent); }
footer .footer-bottom { display: flex; justify-content: space-between; gap: 30px; padding-top: 26px; border-top: 1px solid var(--color-light-border); color: rgba(255, 255, 255, 0.38); font-size: 0.72rem; letter-spacing: 0.05em; }
footer .footer-bottom-links { display: flex; gap: 24px; }
footer .footer-bottom-links a { transition: color var(--transition-fast); }
footer .footer-bottom-links a:hover, footer .footer-bottom-links a:focus-visible { color: #fff; }

@media (max-width: 1280px) {
	:root { --container-main: 1100px; }
	#hero-section .hero-header { gap: 45px; }
	#hero-section .hero-title { font-size: clamp(4rem, 8.4vw, 7.5rem); }
	#selected-games .selected-item { grid-template-columns: 90px minmax(0, 1fr) 230px 60px; }
	#world-building .world-content { gap: 70px; }
	#development-method .method-layout { gap: 70px; }
	#publishing-support .publishing-media { min-height: 610px; }
	#next-world .next-content { padding: 58px; }
}
@media (max-width: 960px) {
	:root { --header-height: 72px; }
	.container-main { width: min(calc(100% - 48px), var(--container-main)); }
	header .header-inner { grid-template-columns: 1fr auto; width: calc(100% - 48px); }
	header .desktop-nav, header .header-action { display: none; }
	header .menu-toggle { display: block; }
	#hero-section { padding-top: 45px; }
	#hero-section .hero-header { grid-template-columns: 1fr; gap: 32px; margin-bottom: 38px; }
	#hero-section .hero-intro { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; max-width: 680px; }
	#hero-section .hero-intro p { margin-bottom: 0; }
	#hero-section .hero-stage { height: 620px; }
	#hero-section .hero-main-figure { inset: 0 9% 0 0; }
	#hero-section .hero-side-figure { width: 39%; height: 48%; border-width: 9px; }
	#hero-section .hero-caption { right: 1%; width: 235px; }
	#selected-games { padding: 115px 0 100px; }
	#selected-games .selected-header { grid-template-columns: 1fr; gap: 28px; margin-bottom: 55px; }
	#selected-games .selected-header-copy { max-width: 650px; }
	#selected-games .selected-item { grid-template-columns: 90px minmax(0, 1fr) 56px; min-height: 135px; }
	#selected-games .selected-meta { display: none; }
	#selected-games .selected-preview { grid-template-columns: 1fr; }
	#selected-games .selected-preview-note { min-height: 230px; }
	#world-building { min-height: auto; padding: 110px 0; }
	#world-building .world-content { grid-template-columns: 1fr; min-height: 650px; }
	#world-building .world-notes { max-width: 550px; margin-left: auto; }
	#development-method { padding: 115px 0; }
	#development-method .method-layout { grid-template-columns: 1fr; gap: 65px; }
	#development-method .method-intro { position: static; display: grid; grid-template-columns: 1fr 0.8fr; gap: 45px; }
	#development-method .method-intro .text-link { align-self: end; }
	#development-method .method-media { margin-left: 40px; }
	#publishing-support { padding: 115px 0 105px; }
	#publishing-support .publishing-header { grid-template-columns: 1fr; gap: 25px; }
	#publishing-support .publishing-layout { grid-template-columns: 1fr; }
	#publishing-support .publishing-media { min-height: 570px; }
	#publishing-support .publishing-list { display: grid; grid-template-columns: 1fr 1fr; }
	#publishing-support .publishing-item { min-height: 190px; border-right: 1px solid var(--color-light-border); }
	#studio-notes { padding: 105px 0 125px; }
	#studio-notes .notes-header { display: block; }
	#studio-notes .notes-header p { margin-top: 24px; }
	#studio-notes .notes-grid { grid-template-columns: 1fr 1fr; }
	#studio-notes .notes-item:first-child { grid-column: span 2; grid-row: auto; min-height: 560px; }
	#studio-notes .notes-item:nth-child(2), #studio-notes .notes-item:nth-child(3) { min-height: 350px; }
	#next-world .next-layout { grid-template-columns: 1fr; }
	#next-world .next-content { min-height: 500px; }
	#next-world .next-media { position: absolute; inset: 0 0 0 42%; }
	#next-world .next-media::after { background: linear-gradient( 90deg, var(--color-brand) 5%, rgba(231, 74, 43, 0.7) 48%, transparent 100% ); }
	footer .footer-main { gap: 50px; }
}
@media (max-width: 768px) {
	.container-main { width: calc(100% - 36px); }
	.container-wide { width: calc(100% - 20px); }
	.section-title { font-size: clamp(2.55rem, 11vw, 4.7rem); }
	header .header-inner { width: calc(100% - 36px); }
	header .brand-name-en { display: none; }
	#hero-section { min-height: auto; padding: 35px 0 20px; }
	#hero-section .hero-header { width: calc(100% - 36px); }
	#hero-section .hero-kicker { margin-bottom: 15px; }
	#hero-section .hero-title { font-size: clamp(3.5rem, 17vw, 6.8rem); }
	#hero-section .hero-intro { display: block; }
	#hero-section .hero-intro p { margin-bottom: 24px; }
	#hero-section .hero-stage { height: 560px; }
	#hero-section .hero-main-figure { inset: 0 0 105px 0; }
	#hero-section .hero-side-figure { right: 16px; width: 46%; height: 42%; border-width: 7px; }
	#hero-section .hero-caption { top: auto; right: auto; bottom: 0; left: 16px; width: 46%; padding: 17px; transform: rotate(-1deg); }
	#hero-section .hero-caption strong { margin-bottom: 14px; font-size: 1rem; }
	#hero-section .hero-index { top: 18px; bottom: auto; left: 18px; }
	#selected-games { padding: 95px 0 82px; }
	#selected-games .selected-header { margin-bottom: 42px; }
	#selected-games .selected-item { grid-template-columns: minmax(0, 1fr) 50px; gap: 16px; min-height: auto; padding: 25px 0; }
	#selected-games .selected-item:hover { padding-right: 0; padding-left: 0; }
	#selected-games .selected-status { grid-column: 1 / -1; }
	#selected-games .selected-title { font-size: clamp(1.45rem, 7vw, 2.25rem); }
	#selected-games .selected-preview-main { aspect-ratio: 4 / 3; }
	#selected-games .selected-preview-note { min-height: 205px; padding: 24px; }
	#world-building { padding: 90px 0; }
	#world-building .world-content { min-height: 620px; gap: 80px; }
	#world-building .world-background::after { background: linear-gradient( 180deg, rgba(15, 16, 13, 0.83) 0%, rgba(15, 16, 13, 0.44) 45%, rgba(15, 16, 13, 0.92) 100% ); }
	#world-building .world-title { font-size: clamp(3.2rem, 15vw, 6.2rem); }
	#world-building .world-notes { margin-left: 0; padding-left: 20px; }
	#development-method { padding: 95px 0; }
	#development-method .method-intro { display: block; }
	#development-method .method-title { font-size: clamp(2.8rem, 13vw, 5rem); }
	#development-method .method-item { grid-template-columns: 34px 1fr; gap: 14px; padding: 28px 0; }
	#development-method .method-media { margin-top: 34px; margin-left: 0; padding-bottom: 48px; }
	#development-method .method-media figure { aspect-ratio: 4 / 3; }
	#development-method .method-media figcaption { right: 12px; bottom: 0; max-width: 220px; }
	#publishing-support { padding: 95px 0 85px; }
	#publishing-support .publishing-header { margin-bottom: 50px; }
	#publishing-support .publishing-media { min-height: 520px; }
	#publishing-support .publishing-media-text { right: 14px; bottom: 14px; left: 14px; display: block; padding: 22px; }
	#publishing-support .publishing-media-text span { display: block; margin-top: 15px; }
	#publishing-support .publishing-list { grid-template-columns: 1fr; }
	#publishing-support .publishing-item { min-height: 170px; border-right: 0; }
	#studio-notes { padding: 90px 0 105px; }
	#studio-notes .notes-grid { display: block; }
	#studio-notes .notes-item:first-child, #studio-notes .notes-item:nth-child(2), #studio-notes .notes-item:nth-child(3) { min-height: 440px; margin-bottom: 16px; }
	#studio-notes .notes-item:last-child { margin-bottom: 0; }
	#studio-notes .notes-content { padding: 24px; }
	#next-world .next-layout { min-height: 590px; }
	#next-world .next-content { min-height: 590px; padding: 44px 28px; }
	#next-world .next-title { font-size: clamp(3rem, 14vw, 5.6rem); }
	#next-world .next-actions { flex-direction: column; align-items: flex-start; gap: 18px; }
	#next-world .next-media { inset: 0 0 0 20%; }
	#next-world .next-media::after { background: linear-gradient( 90deg, var(--color-brand) 2%, rgba(231, 74, 43, 0.82) 64%, rgba(231, 74, 43, 0.25) 100% ); }
	footer .footer-main { grid-template-columns: 1fr; gap: 50px; }
	footer .footer-bottom { flex-direction: column; gap: 15px; }
}
@media (max-width: 500px) {
	:root { --header-height: 66px; }
	body { font-size: 15px; }
	.container-main { width: calc(100% - 28px); }
	.container-wide { width: calc(100% - 12px); }
	header .header-inner { width: calc(100% - 28px); }
	header .brand-mark { width: 31px; height: 31px; }
	header h1 { font-size: 0.92rem; }
	header .mobile-nav { padding: 26px 20px; }
	header .mobile-nav a { padding: 18px 0; font-size: 1.2rem; }
	#hero-section .hero-header { width: calc(100% - 28px); }
	#hero-section .hero-title { font-size: clamp(3.15rem, 17.5vw, 5.2rem); line-height: 0.95; }
	#hero-section .hero-stage { height: 490px; }
	#hero-section .hero-main-figure { bottom: 90px; }
	#hero-section .hero-side-figure { right: 10px; width: 48%; height: 37%; }
	#hero-section .hero-caption { left: 10px; width: 49%; padding: 14px; }
	#hero-section .hero-caption strong { font-size: 0.9rem; }
	#hero-section .hero-caption span { font-size: 0.65rem; }
	#hero-section .hero-index { top: 12px; left: 12px; padding: 10px 12px; font-size: 0.66rem; }
	#selected-games { padding: 78px 0 70px; }
	#selected-games .selected-preview-note { min-height: 180px; }
	#selected-games .selected-preview-note strong { font-size: 1.25rem; }
	#world-building { padding: 75px 0; }
	#world-building .world-content { min-height: 590px; gap: 68px; }
	#world-building .world-title { font-size: clamp(3rem, 15.5vw, 4.6rem); }
	#world-building .world-detail-item { grid-template-columns: 74px 1fr; gap: 12px; }
	#development-method { padding: 78px 0; }
	#development-method .method-title { font-size: clamp(2.65rem, 13.5vw, 4.2rem); }
	#development-method .method-media figcaption { right: 8px; max-width: 195px; padding: 16px; font-size: 0.72rem; }
	#publishing-support { padding: 78px 0 70px; }
	#publishing-support .publishing-media { min-height: 470px; }
	#publishing-support .publishing-item { padding: 26px; }
	#studio-notes { padding: 75px 0 88px; }
	#studio-notes .notes-title { font-size: clamp(2.55rem, 13vw, 4rem); }
	#studio-notes .notes-item:first-child, #studio-notes .notes-item:nth-child(2), #studio-notes .notes-item:nth-child(3) { min-height: 380px; }
	#next-world .next-content { padding: 38px 22px; }
	#next-world .next-action-main { width: 100%; min-width: 0; }
	footer { padding-top: 44px; }
	footer .footer-main { padding-bottom: 48px; }
	footer .footer-nav { grid-template-columns: 1fr; gap: 0; }
	footer .footer-bottom-links { flex-wrap: wrap; gap: 14px 20px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; }
	.reveal-line > span, .media-reveal img, #world-building .world-background img { transform: none; clip-path: none; }
}