/* 本地模板：主要顏色在 :root；版面跟隨原有 A2.3 press kit。
   全部字型均存放於 assets/，毋須網絡。 */

@font-face {
  font-family:Atkinson;
  src:url('assets/AtkinsonHyperlegible-Regular.ttf') format('truetype');
  font-display:swap
}

@font-face {
  font-family:Silkscreen;
  src:url('assets/Silkscreen-Regular.ttf') format('truetype');
  font-display:swap
}

:root {
  --paper:#f5efdc;
  --ink:#252a29;
  --muted:#586255;
  --line:#c5c3ac;
  --yellow:#edc34d;
  --sage:#e4e5d4;
  --focus:#156e77
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:25px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:18px/1.5 Atkinson,Arial,sans-serif;
  overflow-x:clip
}

a {
  color:inherit;
  text-underline-offset:.22em
}

a:focus-visible,button:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:5px
}

.wrap {
  max-width:1240px;
  margin-inline:auto;
  width:auto;
  padding-inline:44px
}

.skip {
  position:absolute;
  left:20px;
  top:-70px;
  background:var(--yellow);
  padding:12px;
  z-index:5
}

.skip:focus {
  top:10px
}

.masthead {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:88px;
  border-bottom:2px solid var(--ink);
  gap:20px
}

.mast-tools {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:14px 22px
}

.langs {
  display:flex;
  flex-wrap:wrap;
  gap:6px
}

.langs button {
  font:13px/1 Atkinson,Arial,sans-serif;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--ink);
  padding:7px 8px;
  cursor:pointer
}

.langs button[aria-pressed="true"] {
  background:var(--yellow)
}

.trailer {
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  margin:8px 0 22px;
  background:#171717;
  border:1px solid var(--line)
}

.trailer iframe {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0
}

.brand {
  font-family:Silkscreen,monospace;
  text-decoration:none;
  font-size:22px
}

.brand span {
  font-family:Atkinson,sans-serif;
  font-size:14px;
  letter-spacing:.12em
}

.masthead nav {
  display:flex;
  gap:28px;
  font-size:16px
}

.masthead nav a {
  text-decoration:none
}

.masthead nav a:hover {
  text-decoration:underline
}

.key-art {
  margin-top:24px;
  margin-bottom:0
}

.key-art img {
  width:100%;
  height:auto;
  display:block
}

.intro {
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(260px,.75fr);
  gap:80px;
  padding-top:46px;
  padding-bottom:70px
}

.eyebrow {
  font:14px/1.5 Silkscreen,monospace;
  color:var(--muted);
  margin:0 0 22px
}

h1,h2,h3 {
  font-weight:400;
  line-height:1.02;
  margin:0 0 24px;
  letter-spacing:-.045em
}

h1 {
  font-size:clamp(42px,5.1vw,70px)
}

h2 {
  font-size:clamp(34px,4vw,54px)
}

h3 {
  font-size:27px
}

p {
  margin:0 0 20px;
  max-width:min(720px, 100%);
  overflow-wrap:break-word
}

.lead {
  font-size:24px;
  line-height:1.35
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px 22px;
  min-height:56px;
  font-size:17px;
  background:var(--yellow);
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  text-decoration:none;
  transition:transform .12s,box-shadow .12s;
  margin-top:12px
}

.button:hover {
  transform:translateY(-2px);
  box-shadow:3px 5px 0 var(--ink)
}

.button:active {
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--ink)
}

.button.secondary {
  background:transparent
}

.fact-sheet {
  padding-top:44px
}

.fact-sheet h2 {
  font:18px/1.4 Silkscreen,monospace;
  letter-spacing:0;
  padding-bottom:16px;
  border-bottom:2px solid var(--ink);
  margin-bottom:0
}

dl {
  margin:0
}

dl div {
  display:grid;
  grid-template-columns:94px 1fr;
  gap:18px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  font-size:16px
}

dt {
  color:var(--muted)
}

dd {
  margin:0
}

.section {
  border-top:2px solid var(--ink);
  padding-top:36px;
  padding-bottom:62px
}

.section>p:not(.eyebrow) {
  font-size:21px
}

footer {
  border-top:2px solid var(--ink);
  padding-block:26px 40px;
  display:flex;
  justify-content:space-between;
  font-size:14px;
  color:var(--muted)
}

@media(max-width:760px) {
  .wrap {
    width:auto;
    padding-inline:18px
  }
  .masthead {
    min-height:76px;
    flex-wrap:wrap;
    padding-block:18px;
    gap:14px
  }
  .masthead nav {
    gap:22px
  }
  .brand {
    font-size:20px
  }
  .intro {
    grid-template-columns:1fr;
    gap:24px;
    padding-top:32px;
    padding-bottom:45px
  }
  .fact-sheet {
    padding-top:12px
  }
  .lead {
    font-size:22px
  }
  .key-art {
    margin-top:18px
  }
  .section {
    padding-bottom:42px
  }
  footer {
    gap:20px;
    flex-wrap:wrap
  }
  .button {
    max-width:100%
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}

.download-note {
  font-size:14px;
  color:var(--muted);
  margin:15px 0 0
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:36px;
  margin-top:38px;
  margin-bottom:40px
}

.steps p {
  font-size:18px
}

.step-number {
  display:block;
  color:var(--muted);
  font:18px/1.4 Silkscreen,monospace;
  margin-bottom:18px
}

.steps h3 {
  line-height:1.14;
  letter-spacing:-.025em
}

.gameplay-feature {
  margin:0
}

.gameplay-feature img {
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line)
}

figcaption {
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
  margin-top:12px
}

.gameplay-feature figcaption {
  display:flex;
  justify-content:space-between;
  gap:18px
}

.demo-section {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:74px
}

.demo-numbers {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-content:center
}

.demo-numbers div {
  display:flex;
  flex-direction:column-reverse;
  gap:0;
  border:0;
  padding:0
}

.demo-numbers dd {
  font:72px/1.25 Silkscreen,monospace
}

.demo-numbers dt {
  font-size:16px
}

.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px
}

.section-heading h2 {
  margin-bottom:0
}

.text-link {
  font-size:16px
}

.media-note {
  font-size:16px!important;
  margin:24px 0 26px
}

.screenshots {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px
}

.screenshots figure {
  margin:0
}

.screenshots img {
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line);
  transition:opacity .15s
}

.screenshots a:hover img {
  opacity:.88
}

.asset-grid {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:72px;
  align-items:center;
  margin-top:32px
}

.logo-preview {
  padding:20px 36px;
  background:#fff9e8;
  border:1px solid var(--line);
  margin-bottom:16px
}

.logo-preview img {
  width:100%;
  height:auto;
  display:block
}

.asset-links>a {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none
}

.asset-links>a:hover {
  background:var(--sage)
}

.asset-links>a:first-child {
  border-top:2px solid var(--ink)
}

.asset-links>a span:last-child {
  font-size:14px;
  white-space:nowrap
}

.asset-credit {
  font-size:14px;
  color:var(--muted);
  margin:18px 0 0
}

strong {
  font-weight:700
}

@media(max-width:760px) {
  .steps {
    grid-template-columns:1fr;
    gap:20px
  }
  .step-number {
    margin-bottom:10px
  }
  .demo-section {
    grid-template-columns:1fr;
    gap:18px
  }
  .demo-numbers {
    gap:18px;
    margin-bottom:8px
  }
  .demo-numbers dd {
    font-size:56px
  }
  .screenshots {
    grid-template-columns:1fr;
    gap:25px
  }
  .section-heading {
    align-items:start;
    flex-direction:column;
    gap:20px
  }
  .gameplay-feature figcaption {
    display:block
  }
  .gameplay-feature figcaption a {
    display:block;
    margin-top:7px
  }
  .asset-grid {
    grid-template-columns:1fr;
    gap:28px
  }
  .logo-preview {
    max-width:460px
  }
  .asset-links>a {
    min-height:64px
  }
  .intro p {
    max-width:100%
  }
}

@media print {
  body {
    background:white;
    color:black;
    font-size:12pt
  }
  .wrap {
    width:100%;
    max-width:none
  }
  .masthead nav,.button,.screenshots,.gameplay-feature,.asset-grid,.download-note,.skip {
    display:none
  }
  .key-art {
    max-width:165mm
  }
  .intro {
    grid-template-columns:1.4fr 1fr;
    gap:10mm;
    padding-block:8mm
  }
  .fact-sheet {
    padding-top:0
  }
  h1 {
    font-size:28pt
  }
  h2 {
    font-size:20pt
  }
  .lead {
    font-size:14pt
  }
  .steps {
    gap:7mm;
    margin:5mm 0
  }
  .steps p,p,.section>p:not(.eyebrow) {
    font-size:11pt
  }
  .steps h3 {
    font-size:15pt
  }
  .section {
    padding-block:5mm
  }
  .demo-section {
    gap:7mm
  }
  .demo-numbers dd {
    font-size:28pt
  }
  .eyebrow {
    font-size:9pt;
    margin-bottom:3mm
  }
  #media,section[aria-labelledby="assets-title"] {
    display:none
  }
  footer {
    font-size:9pt;
    padding-block:4mm
  }
}

.masthead nav {
  align-items:center
}

.masthead .nav-download {
  background:var(--yellow);
  border:1px solid var(--ink);
  padding:9px 13px;
  white-space:nowrap
}

.masthead .nav-download:hover {
  background:#f6d573;
  text-decoration:none
}

@media(max-width:520px) {
  .masthead nav {
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:12px 16px;
    width:100%;
    font-size:14px
  }
  .masthead .nav-download {
    padding:8px 10px
  }
}

/* Optional contact section: enabled by uncommenting the HTML block. */
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.fact-sheet dd,
#contact a {
  overflow-wrap: anywhere;
}

img { max-width: 100%; height: auto; }