/* Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V4 */
/* Hallmark · genre: editorial · macrostructure: Long Document · theme: Atelier · enrichment: E8 verified game artwork · nav: N6 · footer: Ft6 · contrast: pass (40–41) · slop: pass (42–45) · responsive: pass (34, 49–57) */
@import url("../../tokens.css");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Newsreader:opsz,wght@6..72,500;6..72,700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap");

:root { --banner-h: 0rem; --nav-h: 6.5rem; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; overflow-x: clip; scroll-behavior: smooth; }
body { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.7; }
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.wrap { width: min(100% - 2rem, 76rem); margin-inline: auto; }
.eyebrow, .mono { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.eyebrow { color: var(--color-accent-deep); }
.site-nav { position: fixed; inset: 0 0 auto; z-index: 20; transition: transform var(--dur-slow) var(--ease-out); }
.site-nav.is-compact { transform: translateY(calc(var(--banner-h) * -1)); }
.site-nav.is-dismissed { transform: none; }
.nav-banner { height: var(--banner-h); background: var(--color-accent-deep); color: var(--color-white); display: flex; align-items: center; }
.nav-banner__inner { min-width: 0; display: flex; justify-content: center; align-items: center; gap: var(--space-3); }
.nav-banner p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0; font-size: var(--text-sm); }
.nav-banner a { border-bottom: var(--rule-hairline) solid currentColor; }
.nav-dismiss { appearance: none; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: var(--text-lg); line-height: 1; }
.nav-bar { min-height: var(--nav-h); border-bottom: 4px double var(--color-line); background: color-mix(in oklch, var(--color-paper) 94%, transparent); backdrop-filter: blur(14px); }
.mast-line { margin: 0; padding-top: var(--space-2); color: var(--color-ink-soft); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
.nav-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding-block: var(--space-2); }
.brand { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-weight: 900; }
.brand img { width: 2rem; height: 2rem; object-fit: cover; border-radius: var(--radius-sm); }
.brand span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nav-links { display: flex; justify-content: center; align-items: center; gap: var(--space-5); padding-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 700; }
.nav-links a:hover { color: var(--color-accent-deep); }
.nav-actions { display: flex; justify-content: end; align-items: center; gap: var(--space-2); }
.menu-button { display: none; appearance: none; border: var(--rule-hairline) solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-paper); padding: var(--space-2) var(--space-3); font-weight: 700; cursor: pointer; }
.mobile-panel { display: none; }
.button, .download-button { display: inline-flex; min-height: var(--space-12); align-items: center; justify-content: center; gap: var(--space-2); border: var(--rule-hairline) solid var(--color-ink); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-weight: 900; white-space: nowrap; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); }
.button:hover { transform: translateY(-2px); }
.button:active, .download-button:active { transform: translateY(1px); }
.button--plain { border-color: var(--color-white); color: var(--color-white); background: color-mix(in oklch, var(--color-night) 70%, transparent); }
.download-button { position: relative; overflow: hidden; border-color: var(--color-accent-deep); background: var(--color-accent-deep); color: var(--color-accent-ink); }
.download-button::after { content: ""; position: absolute; inset: -70% auto -70% -35%; width: 24%; background: color-mix(in oklch, var(--color-white) 70%, transparent); transform: translateX(-150%) rotate(18deg); animation: sweep 3.2s var(--ease-in-out) infinite; }
.download-button:hover { transform: translateY(-2px); }
@keyframes sweep { 0%, 38% { transform: translateX(-150%) rotate(18deg); } 70%, 100% { transform: translateX(600%) rotate(18deg); } }
.button:disabled, .download-button:disabled, .tabs button:disabled, .menu-button:disabled, .nav-dismiss:disabled { cursor: not-allowed; opacity: 0.55; }
.hero { position: relative; min-height: min(52rem, 100svh); display: grid; align-items: end; isolation: isolate; padding: calc(var(--banner-h) + var(--nav-h) + var(--space-16)) 0 var(--space-16); overflow: clip; background: var(--color-night); color: var(--color-white); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in oklch, var(--color-night) 94%, transparent), color-mix(in oklch, var(--color-night) 58%, transparent) 56%, color-mix(in oklch, var(--color-night) 15%, transparent)); }
.hero img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero-content { max-width: 46rem; }
.hero h1 { max-width: 11ch; margin: var(--space-4) 0 0; font-family: var(--font-display); font-size: var(--text-4xl); font-style: normal; line-height: 0.96; letter-spacing: -0.045em; overflow-wrap: anywhere; }
.hero h1 span { color: var(--color-accent-soft); font-family: var(--font-body); font-size: clamp(1.2rem, 2vw, 1.8rem); letter-spacing: 0; }
.hero-lede { max-width: 42rem; margin: var(--space-6) 0 0; font-size: var(--text-lg); line-height: 1.75; color: color-mix(in oklch, var(--color-white) 88%, var(--color-paper)); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.evidence-line { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.evidence-line span { border-left: 2px solid var(--color-accent); padding: var(--space-1) var(--space-3); background: color-mix(in oklch, var(--color-night) 62%, transparent); font-size: var(--text-sm); }
.info-panel { position: relative; z-index: 2; margin-top: calc(var(--space-8) * -1); }
.info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--rule-hairline) solid var(--color-line); background: var(--color-paper); box-shadow: var(--shadow-soft); }
.info-grid div { min-width: 0; padding: var(--space-5); border-right: var(--rule-hairline) solid var(--color-line); }
.info-grid div:last-child { border-right: 0; }
.info-grid dt { color: var(--color-ink-soft); font-size: var(--text-sm); }
.info-grid dd { margin: var(--space-1) 0 0; font-size: var(--text-lg); font-weight: 900; overflow-wrap: anywhere; }
.paper-section { padding: var(--space-24) 0; }
.paper-section--tint { background: var(--color-paper-2); }
.document { max-width: 64ch; margin-inline: auto; font-size: var(--text-lg); line-height: 1.9; }
.document h2, .section-heading h2 { font-family: var(--font-display); font-style: normal; font-size: var(--text-3xl); line-height: 1.05; letter-spacing: -0.025em; }
.document h2 { margin: var(--space-12) 0 var(--space-4); }
.document p { margin: var(--space-5) 0; }
.document figure { margin: var(--space-10) 0; }
.document figure img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.document figcaption, .fineprint { color: var(--color-ink-soft); font-size: var(--text-sm); }
.section-heading { max-width: 44rem; margin-bottom: var(--space-10); }
.section-heading p { margin: var(--space-3) 0 0; color: var(--color-ink-soft); }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.feature { min-width: 0; border-top: 3px solid var(--color-ink); padding: var(--space-6) 0; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.feature:hover { transform: translateY(-4px); }
.feature span { color: var(--color-accent-deep); font-family: var(--font-body); font-weight: 900; }
.feature h3 { margin: var(--space-3) 0; font-size: var(--text-xl); line-height: 1.3; }
.feature p { margin: 0; color: var(--color-ink-soft); }
.gallery-preview { display: grid; grid-template-columns: 1.35fr minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.gallery-preview figure, .gallery-grid figure { margin: 0; min-width: 0; overflow: hidden; background: var(--color-night); }
.gallery-preview figure:first-child { grid-row: span 2; }
.gallery-preview img, .gallery-grid img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.gallery-preview figure { aspect-ratio: 16 / 10; }
.gallery-preview figure:first-child { aspect-ratio: auto; }
.gallery-preview figure:hover img, .gallery-grid figure:hover img { transform: scale(1.035); }
.download-band { padding: var(--space-16) 0; background: var(--color-night); color: var(--color-white); }
.download-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.download-band h2 { max-width: 16ch; margin: 0; font-family: var(--font-display); font-style: normal; font-size: var(--text-3xl); line-height: 1.05; }
.timeline { border-top: var(--rule-hairline) solid var(--color-line); }
.timeline details { border-bottom: var(--rule-hairline) solid var(--color-line); padding: var(--space-5) 0; }
.timeline summary { display: flex; justify-content: space-between; gap: var(--space-4); cursor: pointer; list-style: none; font-weight: 900; }
.timeline summary::-webkit-details-marker { display: none; }
.timeline summary::after { content: "+"; color: var(--color-accent-deep); font-size: var(--text-xl); line-height: 1; }
.timeline details[open] summary::after { content: "−"; }
.timeline p { max-width: 65ch; margin: var(--space-3) 0 0; color: var(--color-ink-soft); }
.fit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.fit-card { min-width: 0; border: var(--rule-hairline) solid var(--color-line); padding: var(--space-6); background: var(--color-paper); }
.fit-card b { font-size: var(--text-xl); }
.fit-card p { margin: var(--space-3) 0 0; color: var(--color-ink-soft); }
.faq { max-width: 56rem; margin-inline: auto; }
.faq-item { border-top: var(--rule-hairline) solid var(--color-line); }
.faq-item:last-child { border-bottom: var(--rule-hairline) solid var(--color-line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; cursor: pointer; font-weight: 900; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--color-accent-deep); font-size: var(--text-xl); }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0 0 var(--space-5); color: var(--color-ink-soft); }
.final-cta { padding: var(--space-24) 0; background: var(--color-accent-soft); }
.final-cta .wrap { max-width: 58rem; }
.final-cta h2 { max-width: 12ch; margin: 0; font-family: var(--font-display); font-style: normal; font-size: var(--text-4xl); line-height: 0.98; }
.final-cta p { max-width: 48ch; font-size: var(--text-lg); }
.foot-letter { padding: var(--space-20) 0 var(--space-12); background: var(--color-night); color: var(--color-white); }
.foot-letter__close { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.3; }
.foot-letter__close span { font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; }
.footer-grid { display: grid; grid-template-columns: 1.2fr minmax(0, 1fr); gap: var(--space-12); margin-top: var(--space-12); padding-top: var(--space-8); border-top: var(--rule-hairline) solid color-mix(in oklch, var(--color-white) 35%, transparent); }
.footer-grid p { color: color-mix(in oklch, var(--color-white) 70%, transparent); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-content: start; }
.footer-links a { border-bottom: var(--rule-hairline) solid color-mix(in oklch, var(--color-white) 38%, transparent); white-space: nowrap; }
.page-head { padding: calc(var(--banner-h) + var(--nav-h) + var(--space-20)) 0 var(--space-12); background: var(--color-night); color: var(--color-white); }
.page-head h1 { max-width: 14ch; margin: var(--space-4) 0 0; font-family: var(--font-display); font-style: normal; font-size: var(--text-4xl); line-height: 1; overflow-wrap: anywhere; }
.page-head p { max-width: 56ch; margin-bottom: 0; color: color-mix(in oklch, var(--color-white) 80%, transparent); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.tabs button { appearance: none; border: var(--rule-hairline) solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-paper); padding: var(--space-2) var(--space-4); font-weight: 700; cursor: pointer; white-space: nowrap; }
.tabs button:hover, .tabs button[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.gallery-grid figure { aspect-ratio: 16 / 11; }
.lightbox { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--space-8); background: color-mix(in oklch, var(--color-night) 93%, transparent); }
.lightbox-frame { position: relative; width: min(100%, 72rem); }
.lightbox img { width: 100%; max-height: 76svh; object-fit: contain; }
.lightbox figcaption { margin-top: var(--space-3); color: var(--color-white); text-align: center; }
.lightbox button { position: absolute; appearance: none; border: var(--rule-hairline) solid color-mix(in oklch, var(--color-white) 55%, transparent); border-radius: var(--radius-sm); background: var(--color-night); color: var(--color-white); cursor: pointer; min-width: 2.75rem; min-height: 2.75rem; }
.lightbox [data-close-lightbox] { top: var(--space-3); right: var(--space-3); }
.lightbox [data-lightbox-prev] { top: 50%; left: var(--space-3); transform: translateY(-50%); }
.lightbox [data-lightbox-next] { top: 50%; right: var(--space-3); transform: translateY(-50%); }
.platform-grid, .requirements-grid, .guide-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.platform-card, .requirements-card, .guide-card { min-width: 0; border: var(--rule-hairline) solid var(--color-line); background: var(--color-paper); padding: var(--space-6); }
.platform-card--recommended { border-top: 4px solid var(--color-accent); }
.platform-card h2, .requirements-card h2, .guide-card h2 { margin: 0; font-family: var(--font-display); font-style: normal; font-size: var(--text-2xl); line-height: 1.1; }
.platform-card p, .guide-card p { color: var(--color-ink-soft); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); counter-reset: steps; }
.step { counter-increment: steps; border-top: 3px solid var(--color-ink); padding-top: var(--space-4); }
.step::before { content: "0" counter(steps); font-family: var(--font-body); font-weight: 900; color: var(--color-accent-deep); }
.step h3 { margin: var(--space-2) 0; font-size: var(--text-lg); }
.requirements-card dl { margin: var(--space-5) 0 0; }
.requirements-card div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--rule-hairline) solid var(--color-line); }
.requirements-card dt { color: var(--color-ink-soft); }
.requirements-card dd { margin: 0; font-weight: 700; }
.notice { border-left: 4px solid var(--color-accent); padding: var(--space-5); background: var(--color-accent-soft); }
.toc { border-left: 2px solid var(--color-accent); padding: var(--space-4) var(--space-5); }
.toc a { display: block; padding: var(--space-1) 0; font-weight: 700; }
.toc a:hover { color: var(--color-accent-deep); }
.article-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.article-list a { display: block; border-top: 2px solid var(--color-ink); padding: var(--space-4) 0; font-weight: 900; }
.article-list a span { display: block; margin-top: var(--space-2); color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: 400; }
.article-list a:hover { color: var(--color-accent-deep); }
.article { max-width: 66ch; margin-inline: auto; }
.article h2 { margin-top: var(--space-12); font-family: var(--font-display); font-style: normal; font-size: var(--text-3xl); line-height: 1.1; }
.article table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; }
.article th, .article td { border-bottom: var(--rule-hairline) solid var(--color-line); padding: var(--space-3); text-align: left; vertical-align: top; }
.article th { color: var(--color-ink-soft); font-size: var(--text-sm); }
.article ol, .article ul { padding-left: var(--space-6); }
.article li + li { margin-top: var(--space-2); }
.article nav { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-10); }
.article nav a { border-bottom: var(--rule-hairline) solid var(--color-accent-deep); font-weight: 700; }
@media (max-width: 60rem) {
  .nav-links { display: none; }
  .nav-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .menu-button { display: inline-flex; }
  .mobile-panel { display: none; border-bottom: var(--rule-hairline) solid var(--color-line); background: var(--color-paper); padding: var(--space-3) var(--space-4) var(--space-4); }
  .mobile-panel.is-open { display: grid; gap: var(--space-2); }
  .mobile-panel a { padding: var(--space-2) 0; font-weight: 700; }
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-grid div:nth-child(2) { border-right: 0; }
  .info-grid div:nth-child(-n+2) { border-bottom: var(--rule-hairline) solid var(--color-line); }
  .gallery-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-preview figure:first-child { grid-row: span 1; }
  .gallery-preview figure:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
  .download-band .wrap { align-items: start; flex-direction: column; }
  .fit-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@media (max-width: 40rem) {
  :root { --banner-h: 0rem; --nav-h: 5.5rem; }
  .wrap { width: min(100% - 1.5rem, 76rem); }
  .nav-banner p { font-size: var(--text-xs); }
  .brand span { max-width: 13rem; }
  .hero { min-height: 43rem; align-items: end; padding-bottom: var(--space-10); }
  .hero::before { background: linear-gradient(180deg, color-mix(in oklch, var(--color-night) 34%, transparent), color-mix(in oklch, var(--color-night) 96%, transparent) 83%); }
  .hero h1 { font-size: clamp(2.7rem, 14vw, 4rem); }
  .hero-lede { font-size: var(--text-base); }
  .hero-actions, .hero-actions .button, .hero-actions .download-button { width: 100%; }
  .info-panel { margin-top: 0; }
  .info-grid { grid-template-columns: minmax(0, 1fr); }
  .info-grid div, .info-grid div:nth-child(2) { border-right: 0; border-bottom: var(--rule-hairline) solid var(--color-line); }
  .info-grid div:last-child { border-bottom: 0; }
  .paper-section { padding: var(--space-16) 0; }
  .document { font-size: var(--text-base); }
  .feature-grid, .platform-grid, .requirements-grid, .guide-cards, .article-list { grid-template-columns: minmax(0, 1fr); }
  .gallery-preview, .gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .gallery-preview figure:first-child { grid-column: span 1; }
  .gallery-preview figure { aspect-ratio: 16 / 10; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .lightbox { padding: var(--space-3); }
  .lightbox [data-lightbox-prev] { left: 0; }
  .lightbox [data-lightbox-next] { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 150ms !important; }
}