:root {
  color-scheme: light;
  --paper: #ded7bd;
  --text: #29282b;
  --muted: #514d45;
  --accent: #514a57;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 36px; }
body { margin: 0; background: var(--paper) url('/assets/ui/menu-paper.webp') repeat; background-size: 512px 512px; background-blend-mode: multiply; color: var(--text); font: 15px/1.65 var(--sans); }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus, a:focus { outline: none; box-shadow: none; }
button:focus-visible, a:focus-visible { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
button:disabled { cursor: progress; opacity: .6; }
::selection { color: var(--text); background: #514a5726; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 30; left: 20px; top: 12px; transform: translateY(-180%); padding: 10px 18px; background: var(--paper); }
.skip-link:focus { transform: none; }
.site-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px clamp(24px, 5.5vw, 100px); }
.wordmark { display: inline-flex; align-items: center; gap: 12px; letter-spacing: .24em; font: 14px var(--serif); }
.wordmark img { flex: 0 0 auto; width: 44px; height: 44px; }
.footer-brand img { width: 32px; height: 32px; }
.header-links { display: flex; align-items: center; gap: 38px; font-size: 12px; }
.alpha-link { min-height: 44px; display: inline-flex; align-items: center; font: 17px var(--serif); }
.alpha-link:hover { color: #17121c; text-decoration: underline; text-underline-offset: 5px; }
.language-switch { display: flex; align-items: center; gap: 9px; color: var(--muted); }
.language-switch button { min-width: 36px; min-height: 44px; border: 0; padding: 0 5px; background: none; color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.language-switch button[aria-pressed="true"] { color: var(--text); text-decoration: underline; text-underline-offset: 5px; }
.music-toggle { position: absolute; z-index: 2; top: 108px; right: clamp(24px, 5.5vw, 100px); display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 0; border: 0; color: var(--muted); background: transparent; font: 13px var(--serif); }
.music-toggle:hover, .music-toggle[aria-pressed="true"] { color: var(--text); }
.music-toggle .music-waves, .music-toggle[aria-pressed="true"] .music-off { display: none; }
.music-toggle[aria-pressed="true"] .music-waves { display: block; }
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: 750px; min-height: min(920px, max(750px, calc(100svh - 96px))); display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.85fr); gap: clamp(24px, 3vw, 56px); align-items: center; padding: 82px clamp(16px, 3vw, 56px) 130px clamp(28px, 8.3vw, 152px); }
/* The same ambient frame stays below the live scene, with one shared paper mask. */
.hero-artwork { --pointer-x: 56%; --pointer-y: 38%; --swing-x: 0px; --swing-y: 45px; --lantern-angle: 0rad; position: relative; grid-column: 2; grid-row: 1; z-index: 0; width: 100%; height: auto; aspect-ratio: 3 / 2; display: block; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-tap-highlight-color: transparent; }
.hero-picture { position: absolute; inset: 0; pointer-events: none; mask-image: url('/assets/ui/preview-paper-mask.png'), linear-gradient(to right, transparent, #000 11%, #000 89%, transparent), linear-gradient(to bottom, transparent, #000 13%, #000 87%, transparent); mask-size: 100% 100%; mask-repeat: no-repeat; mask-composite: intersect; }
.hero-art, .hero-scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-art { object-fit: fill; }
.hero-scene { opacity: 0; transition: opacity 450ms ease; }
.hero-artwork[data-scene-ready="true"] .hero-scene { opacity: 1; }
.lantern-cursor { position: absolute; z-index: 2; left: var(--pointer-x); top: var(--pointer-y); width: 44px; height: 62px; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity 320ms cubic-bezier(.2, .7, .2, 1); }
.lantern-pointer { position: absolute; z-index: 3; left: var(--pointer-x); top: var(--pointer-y); pointer-events: none; opacity: 0; }
.hero-artwork[data-lantern-active="true"] .lantern-pointer { opacity: calc(1 - var(--lantern-presence, 1)); transition: opacity 100ms ease; }
.lantern-cursor::before { content: ''; position: absolute; width: 140px; height: 140px; left: calc(50% + var(--swing-x)); top: var(--swing-y); transform: translate(-50%, -50%); background: radial-gradient(circle, #ffd48536, #e6a44912 35%, transparent 70%); }
.lantern-svg { display: block; overflow: visible; transform-origin: 50% 0; transform: rotate(var(--lantern-angle)); filter: drop-shadow(0 2px 2px #0005); }
.lantern-flame { transform-box: fill-box; transform-origin: 50% 100%; filter: drop-shadow(0 0 5px #ffb84d); }
.hero-artwork:is([data-lantern-active="true"], [aria-pressed="true"]) .lantern-cursor { opacity: var(--lantern-presence, 1); }
.hero-artwork:is([data-lantern-active="true"], [aria-pressed="true"]) .lantern-flame { animation: lantern-flame 3.7s ease-in-out infinite; }
/* Keep the unlit lantern under the pointer, without flame or emitted glow. */
.hero-artwork[aria-pressed="false"] .lantern-cursor::before,
.hero-artwork[aria-pressed="false"] .lantern-flame { opacity: 0; animation: none; }
.hero-artwork[aria-pressed="false"] .lantern-glass { fill: #514d4540; }
@media (hover: hover) and (pointer: fine) { .hero-artwork { cursor: none; } }
@keyframes lantern-flame { 0%, 100% { opacity: .92; transform: scaleY(1); } 38% { opacity: .84; transform: scale(.94, .9); } 63% { opacity: 1; transform: scale(1.02, 1.04); } }
.hero-content { position: relative; grid-column: 1; grid-row: 1; z-index: 1; width: 570px; max-width: 100%; min-width: 0; }
.eyebrow { margin: 0; color: var(--muted); font: 11px/1.4 var(--serif); letter-spacing: .2em; text-transform: uppercase; }
.release { margin-bottom: 32px; letter-spacing: .16em; }
.release-light { display: none; }
.game-name { margin: 0 0 18px 4px; color: var(--muted); letter-spacing: .48em; font: 12px var(--serif); }
h1 { margin: 0 0 30px; font: 400 clamp(64px, 6.5vw, 112px)/.98 var(--serif); letter-spacing: -.045em; }
h1 em { font-weight: 400; color: var(--accent); }
.hero-lead { white-space: pre-line; margin: 0 0 26px; color: var(--muted); font: 19px/1.65 var(--serif); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; max-width: 100%; padding: 10px 8px; border: 0; border-radius: 0; background: transparent; color: var(--text); box-shadow: none; font: 18px/1.4 var(--serif); text-align: center; overflow-wrap: anywhere; transition: color 160ms ease, background-color 160ms ease; }
.button:hover, .close-button:hover { color: #17121c; background-color: #514a570c; }
.button:active { background-color: #514a571a; }
.watch-button { min-width: 235px; min-height: 120px; padding: 48px 12px 30px; background: url('/assets/ui/menu-rule.png') center bottom 7px / 200px auto no-repeat; font-size: 24px; }
.watch-button::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 90px; height: 45px; background: url('/assets/ui/menu-ornament.png') center / contain no-repeat; }
.watch-button > svg { display: none; }
.hero-note { margin: 22px 0 0; max-width: 350px; color: var(--muted); font-size: 11px; }
.hero-foot { position: absolute; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 25px; bottom: 32px; left: clamp(24px, 5.5vw, 100px); right: clamp(24px, 5.5vw, 100px); color: var(--muted); font: 10px var(--serif); letter-spacing: .1em; text-transform: uppercase; }
.hero-foot a { display: flex; gap: 24px; align-items: center; min-height: 44px; color: var(--text); }
.page-width { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
.world-section { padding: 86px 0 104px; }
.world-intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px 95px; align-items: center; }
.world-intro .eyebrow { grid-column: 1 / -1; }
h2 { margin: 0; font: 400 clamp(34px, 3vw, 48px)/1.17 var(--serif); letter-spacing: -.025em; }
#world-title { white-space: pre-line; }
.world-intro > p:last-child { margin: 0; max-width: 420px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 54px; margin-top: 66px; }
.features article { padding-top: 12px; }
.feature-number { color: var(--muted); font: italic 18px var(--serif); }
h3 { font: 400 25px/1.3 var(--serif); margin: 17px 0 13px; }
.features p { color: var(--muted); font-size: 13px; line-height: 1.85; margin: 0; max-width: 340px; }
.community { display: flex; justify-content: space-between; align-items: center; gap: 54px; padding: 40px 0 70px; }
.community h2 { font-size: 34px; margin-top: 15px; }
.community p:last-child { max-width: 590px; color: var(--muted); font-size: 13px; margin: 16px 0 0; }
.community .button { flex-shrink: 0; }
.social-icon { flex: 0 0 18px; width: 18px; height: 18px; }
.social-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 35px 0 40px; color: var(--muted); font-size: 10px; }
.footer-brand { color: var(--text); font-size: 10px; letter-spacing: .22em; }
.site-footer p { margin: 0; }
.site-footer > a { display: inline-flex; min-height: 44px; align-items: center; }
.site-footer > a:last-child:hover { color: var(--text); }
.gameplay-dialog { position: fixed; width: min(1120px, calc(100% - 48px)); max-height: calc(100svh - 48px); overflow: auto; padding: 24px; color: var(--text); border: 0; background: var(--paper) url('/assets/ui/menu-paper.webp') repeat; background-size: 512px 512px; background-blend-mode: multiply; box-shadow: 0 24px 120px #0006; }
.gameplay-dialog::backdrop { background: #17121cd9; }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; }
.dialog-heading h2 { margin-top: 5px; font-size: 26px; }
.close-button { flex: 0 0 auto; align-self: flex-start; border: 0; padding: 0; color: var(--text); background: transparent; width: 44px; height: 44px; font: 300 32px/1 var(--serif); }
.gameplay-dialog video { display: block; width: 100%; max-height: calc(100svh - 235px); aspect-ratio: 16 / 9; background: #000; }
.video-links { display: flex; justify-content: flex-end; font-size: 12px; padding-top: 13px; }
.video-links a { min-height: 44px; display: inline-flex; align-items: center; color: var(--accent); }
.video-status { margin-bottom: 0; color: var(--accent); font-size: 12px; }
body:has(.gameplay-dialog[open]) { overflow: hidden; }
.newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; padding: 40px 0 70px; }
.newsletter h2 { margin-top: 15px; font-size: 34px; }
.newsletter p { color: var(--muted); font-size: 13px; }
.newsletter form { min-width: 0; }
.newsletter label { font-size: 13px; }
.newsletter-fields { display: flex; gap: 18px; margin-top: 8px; }
.newsletter-fields input { min-width: 0; flex: 1; border: 0; border-bottom: 1px solid #77717b80; border-radius: 0; padding: 12px 4px; background: transparent; color: var(--text); font: 16px var(--sans); }
.newsletter input:focus-visible { outline: none; border-bottom-color: var(--text); box-shadow: 0 1px var(--text); }
.newsletter-consent { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; color: var(--muted); }
.newsletter-consent input { flex-shrink: 0; margin-top: 5px; accent-color: var(--accent); }
.newsletter .newsletter-note { font-size: 11px; }
.newsletter-note a { color: var(--accent); text-decoration: underline; }
.newsletter-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#newsletter-status { min-height: 1.65em; color: var(--accent); margin-bottom: 0; }
@media (max-width: 1100px) {
  .hero { padding-inline: 56px; }
  .hero-actions { gap: 4px 12px; }
  .hero-actions > a { padding-inline: 12px; }
  .world-intro { gap: 24px 40px; }
  .features { gap: 27px; }
  .community { gap: 25px; }
  .community h2 { font-size: 30px; }
}
@media (max-width: 900px) {
  .newsletter { grid-template-columns: 1fr; gap: 24px; }
  .community { align-items: flex-start; flex-direction: column; }
  .social-links { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .site-header { padding: 16px 22px; gap: 8px; }
  .wordmark { gap: 8px; font-size: 11px; letter-spacing: .16em; }
  .wordmark img { width: 36px; height: 36px; }
  .footer-brand img { width: 30px; height: 30px; }
  .header-links { gap: 12px; }
  .alpha-link { font-size: 14px; }
  .language-switch { gap: 0; }
  .language-switch button { min-width: 28px; font-size: 10px; }
  .music-toggle { top: 80px; right: 22px; font-size: 12px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: auto; padding: 64px 28px 22px; overflow: hidden; }
  .hero-content { width: 100%; max-width: none; }
  .hero-artwork { position: relative; order: 2; align-self: center; width: calc(100% + 56px); height: auto; aspect-ratio: 3 / 2; right: auto; top: auto; transform: none; margin-top: 8px; }
  .release { margin-bottom: 26px; font-size: 10px; }
  .game-name { font-size: 10px; margin-left: 2px; margin-bottom: 16px; }
  h1 { font-size: clamp(65px, 16vw, 100px); margin-bottom: 24px; }
  .hero-lead { font-size: 18px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 6px; }
  .hero-actions .button { width: 100%; }
  .hero-actions .watch-button { min-width: 0; }
  .hero-note { font-size: 11px; margin-top: 16px; }
  .hero-foot { position: relative; order: 3; inset: auto; gap: 16px; margin-top: -6px; font-size: 9px; }
  .hero-foot > span { max-width: 150px; line-height: 1.6; }
  .hero-foot a { gap: 10px; flex-shrink: 0; }
  .page-width { width: calc(100% - 56px); }
  .world-section { padding: 52px 0 56px; }
  .world-intro { grid-template-columns: 1fr; gap: 20px; }
  .world-intro > p:last-child { font-size: 13px; margin-top: 3px; }
  h2 { font-size: 34px; }
  .features { grid-template-columns: 1fr; gap: 28px; margin-top: 37px; }
  h3 { margin-top: 12px; font-size: 25px; }
  .features p { max-width: none; }
  .community { display: block; padding: 28px 0 44px; }
  .community h2 { max-width: 300px; font-size: 32px; }
  .social-links { margin-top: 22px; gap: 8px 18px; }
  .site-footer { justify-content: flex-start; flex-wrap: wrap; gap: 12px 20px; padding-block: 26px; }
  .site-footer p { order: 3; width: 100%; }
  .site-footer > a:last-child { margin-left: auto; }
  .gameplay-dialog { width: calc(100% - 24px); max-height: calc(100svh - 24px); padding: 16px; }
  .dialog-heading { gap: 10px; margin-bottom: 15px; }
  .dialog-heading h2 { font-size: 21px; }
  .newsletter { padding: 28px 0 44px; }
  .newsletter-fields { flex-direction: column; gap: 8px; }
  .newsletter h2 { font-size: 32px; }
  .newsletter-fields button { align-self: flex-start; padding-inline: 0; }
}
@media (max-width: 359px) {
  .site-header { padding-inline: 16px; }
  .wordmark { letter-spacing: .08em; gap: 5px; }
  .header-links { gap: 5px; }
  .alpha-link { font-size: 12px; }
  .language-switch button { min-width: 26px; }
  .hero { padding-inline: 22px; }
  h1 { font-size: 62px; }
  .hero-foot { letter-spacing: .05em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .lantern-svg, .lantern-flame { animation: none !important; }
}