:root {
  color-scheme: dark;
  --ink: #19160f;
  --night: #0b1814;
  --forest: #14251e;
  --forest-soft: #21372a;
  --timber: #473729;
  --timber-deep: #2b241b;
  --gold: #c9aa62;
  --gold-bright: #ead18d;
  --parchment: #ead9ad;
  --parchment-deep: #cfb979;
  --cream: #f4e8c3;
  --moss: #849467;
  --rust: #8b4f36;
  --border: #856d3d;
  --shadow: 0 12px 32px rgb(4 10 8 / 38%);
  --pixel-border: 2px solid var(--border);
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body { margin: 0; min-width: 280px; color: var(--cream); background: var(--forest); overflow-x: hidden; }
button, a { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
.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: 100; left: 1rem; top: 1rem; transform: translateY(-160%);
  padding: .8rem 1rem; color: var(--ink); background: var(--gold-bright); border: 2px solid var(--ink);
}
.skip-link:focus { transform: none; }

.site-header {
  position: absolute; z-index: 20; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  margin: auto; padding: 1.25rem clamp(1rem, 8vw, 9rem);
}
.brand { width: clamp(170px, 19vw, 250px); }
.brand img, footer img { filter: drop-shadow(0 3px 0 rgb(0 0 0 / 38%)); }
nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.8rem); }
nav a { color: var(--cream); text-decoration: none; font-weight: 700; text-shadow: 0 2px 3px var(--ink); }
nav a:hover, nav a:focus-visible { color: var(--gold-bright); }
.music-control { display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .25rem .45rem; color: var(--cream); background: rgb(28 25 18 / 76%); border: 1px solid rgb(201 170 98 / 60%); box-shadow: 0 3px 0 rgb(0 0 0 / 28%); }
.music-toggle { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; padding: 0; color: var(--cream); background: var(--timber); border: 1px solid var(--gold); font-size: 1.1rem; }
.music-toggle:hover, .music-toggle:focus-visible, .music-toggle.is-playing { color: var(--gold-bright); background: #594431; }
.music-toggle.is-playing { box-shadow: inset 0 -3px var(--gold); }
.music-volume { display: flex; align-items: center; gap: .4rem; color: var(--cream); font: 700 .75rem/1 system-ui, sans-serif; text-shadow: 0 2px 3px var(--ink); }
.music-volume input { width: clamp(64px, 7vw, 96px); height: 28px; margin: 0; accent-color: var(--gold-bright); cursor: pointer; }

.hero {
  position: relative; min-height: min(920px, 100svh); isolation: isolate;
  display: grid; align-items: center; padding: 8rem clamp(1rem, 8vw, 9rem) 6rem;
  background-image:
    linear-gradient(90deg, rgb(7 19 15 / 92%) 0%, rgb(10 23 17 / 69%) 42%, rgb(10 22 17 / 12%) 72%),
    linear-gradient(0deg, var(--forest) 0%, transparent 28%);
  background-size: cover; image-rendering: pixelated;
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("assets/village-spring.png") center / cover no-repeat; image-rendering: pixelated; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 9rem; z-index: -1; background: linear-gradient(transparent, var(--forest)); }
.hero-copy { position: relative; z-index: 2; max-width: 690px; }
.eyebrow { margin: 0 0 .9rem; color: var(--gold-bright); font: 700 .8rem/1.2 system-ui, sans-serif; letter-spacing: .19em; text-transform: uppercase; }
h1, h2, h3, p { text-wrap: balance; }
h1 { margin: 0; font-size: clamp(3rem, 7vw, 6.75rem); line-height: .93; letter-spacing: -.045em; text-shadow: 0 5px 0 var(--ink), 0 12px 30px rgb(0 0 0 / 60%); }
.hero-intro { max-width: 610px; margin: 1.7rem 0 0; color: #f5e9c9; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.65; text-shadow: 0 2px 4px var(--ink); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.play-button, .dialog-return {
  min-height: 50px; padding: .9rem 1.45rem; border: 2px solid #f0d892; outline: 2px solid var(--timber-deep); outline-offset: -5px;
  color: var(--ink); background: linear-gradient(#ead18d, #c5a456); box-shadow: 0 5px 0 #513d24, var(--shadow); font-weight: 800;
}
.play-button:hover, .play-button:focus-visible, .dialog-return:hover, .dialog-return:focus-visible { background: #f2dea0; transform: translateY(-1px); }
.play-button:active, .dialog-return:active { transform: translateY(2px); box-shadow: 0 2px 0 #513d24; }
.play-button--small { min-height: 44px; padding: .6rem 1.1rem; }
.play-icon { margin-right: .4rem; font-size: .75em; }
.text-link { color: var(--cream); font-weight: 700; text-decoration-color: var(--gold); text-underline-offset: .35rem; }
.text-link:hover, .text-link:focus-visible { color: var(--gold-bright); }
.hero-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.cloud { position: absolute; display: block; width: 110px; height: 18px; opacity: .18; background: #d9dfc0; box-shadow: 20px -12px #d9dfc0, 52px -5px #d9dfc0; animation: drift 42s linear infinite; }
.cloud--one { top: 24%; left: 56%; }
.cloud--two { top: 42%; left: 84%; transform: scale(.7); animation-duration: 55s; animation-delay: -26s; }
.mote { position: absolute; width: 4px; height: 4px; background: var(--gold-bright); box-shadow: 0 0 7px var(--gold-bright); animation: float 6s ease-in-out infinite; }
.mote--one { left: 72%; top: 55%; }
.mote--two { left: 86%; top: 68%; animation-delay: -2s; }
.mote--three { left: 64%; top: 73%; animation-delay: -4s; }
@keyframes drift { to { transform: translateX(-75vw); } }
@keyframes float { 50% { transform: translateY(-18px); opacity: .35; } }

.parchment { color: var(--timber-deep); background-color: var(--parchment); background-image: linear-gradient(rgb(255 255 255 / 8%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 8%) 1px, transparent 1px); background-size: 8px 8px; }
.intro { padding: clamp(4.5rem, 9vw, 8rem) clamp(1rem, 7vw, 7rem); text-align: center; }
.intro .eyebrow { color: #705032; }
.ornament { display: flex; align-items: center; justify-content: center; gap: .7rem; max-width: 270px; margin: 0 auto 2rem; color: #8f6a36; }
.ornament span { flex: 1; height: 2px; background: currentColor; box-shadow: 0 4px rgb(143 106 54 / 25%); }
.intro h2, .seasons h2, .window-copy h2, .night-callout h2, .final-callout h2 { margin: 0; font-size: clamp(2.25rem, 5vw, 4.4rem); line-height: 1.03; }
.section-lead { max-width: 760px; margin: 1.2rem auto 3.5rem; font-size: 1.15rem; line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2rem); max-width: 1180px; margin: auto; }
.feature-card { padding: 2rem 1.5rem; border: 2px solid #a88850; box-shadow: inset 0 0 0 5px rgb(255 247 216 / 24%), 7px 8px 0 rgb(72 50 29 / 14%); background: rgb(255 248 221 / 25%); }
.feature-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 1rem; color: var(--parchment); background: var(--timber); border: 3px double var(--gold); font: 700 1.8rem/1 Georgia, serif; }
.feature-card h3 { margin: 0 0 .7rem; font-size: 1.4rem; }
.feature-card p { margin: 0; line-height: 1.6; }

.village-window { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .65fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; padding: clamp(3rem, 5vw, 5rem) clamp(1rem, 6vw, 6rem); background: var(--forest); }
.window-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; padding: 8px; background: #261f17; border: 4px solid #8b713e; box-shadow: var(--shadow); }
.window-frame::before, .window-frame::after { content: ""; position: absolute; background: #b3914e; }
.window-frame::before { inset: -9px 8% auto; height: 5px; }
.window-frame::after { inset: auto 8% -9px; height: 5px; }
.window-frame img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: cover; object-position: center; image-rendering: pixelated; }
.window-copy p:last-child, .night-copy p:last-child, .seasons-heading p:last-child { color: #d4d9bd; line-height: 1.7; font-size: 1.06rem; }

.seasons { padding: clamp(4rem, 8vw, 8rem) 0; color: var(--timber-deep); background: #d8c48d; }
.seasons-heading { max-width: 780px; margin: 0 auto 3rem; padding: 0 1rem; text-align: center; }
.seasons .eyebrow { color: #76553a; }
.seasons-heading p:last-child { color: #493d2b; }
.season-strip { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border-block: 5px solid #725838; }
.season-strip figure { position: relative; min-height: 280px; margin: 0; overflow: hidden; border-right: 2px solid #725838; }
.season-strip figure:last-child { border: 0; }
.season-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; transition: transform .5s ease; }
.season-strip figure:hover img { transform: scale(1.04); }
.season-strip figcaption { position: absolute; inset: auto .8rem .8rem; padding: .55rem .7rem; color: var(--cream); background: rgb(32 27 18 / 86%); border-bottom: 2px solid var(--gold); font-weight: 800; }

.night-callout { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); min-height: 650px; background: #071510; }
.night-copy { align-self: center; padding: clamp(3rem, 7vw, 7rem); }
.night-image { min-height: 520px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 15%); }
.night-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; image-rendering: pixelated; }

.final-callout { padding: clamp(5rem, 11vw, 10rem) 1rem; text-align: center; background-color: #213329; background-image: radial-gradient(circle at 50% 35%, rgb(207 185 121 / 12%), transparent 32%), linear-gradient(135deg, rgb(0 0 0 / 10%) 25%, transparent 25% 50%, rgb(0 0 0 / 10%) 50% 75%, transparent 75%); background-size: auto, 12px 12px; }
.final-callout p:not(.eyebrow) { margin: 1rem auto 1.8rem; color: #d1d8bd; font-size: 1.08rem; }
.platform-support { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem .85rem; margin: 2.2rem auto 0; color: var(--gold-bright); font: 800 .78rem/1.3 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.platform-support b { color: var(--rust); font-size: .55rem; }
.final-callout .platform-note { margin: .65rem auto 0; color: #b9c3ac; font-size: .88rem; }
.final-emblem { position: relative; width: 64px; height: 72px; margin: 0 auto 1.5rem; }
.final-emblem span { position: absolute; left: 18px; top: 22px; width: 28px; height: 38px; background: #a45136; border: 5px solid #4b2c20; }
.final-emblem i { position: absolute; left: 26px; top: 32px; width: 12px; height: 19px; background: var(--gold-bright); }
.final-emblem b { position: absolute; left: 14px; top: 7px; width: 36px; height: 18px; border-top: 9px dotted #e9c858; }

footer { display: grid; justify-items: center; gap: .65rem; padding: 3rem 1rem; color: #aab49b; background: #0a1411; border-top: 2px solid #59482e; text-align: center; }
footer img { width: 160px; opacity: .85; }
footer p { margin: 0; }
.development-note { max-width: 36rem; color: #c4ccb5; font-size: .9rem; line-height: 1.5; }
.copyright { font-size: .82rem; opacity: .7; }

.gate-dialog { max-width: min(560px, calc(100% - 2rem)); padding: 0; color: var(--timber-deep); background: transparent; border: 0; }
.gate-dialog::backdrop { background: rgb(4 11 8 / 83%); backdrop-filter: blur(3px); }
.dialog-frame { position: relative; padding: clamp(2.1rem, 7vw, 4rem); text-align: center; background: var(--parchment); border: 4px solid #9b7b40; outline: 4px solid #34291d; outline-offset: -10px; box-shadow: 0 20px 60px rgb(0 0 0 / 68%); }
.dialog-frame::before { content: ""; position: absolute; inset: 11px; pointer-events: none; border: 1px solid rgb(82 59 30 / 38%); }
.dialog-frame .eyebrow { color: #775235; }
.dialog-frame h2 { margin: 0; font-size: clamp(2rem, 8vw, 3.25rem); }
.dialog-frame p:not(.eyebrow) { margin: 1rem auto 1.8rem; max-width: 390px; line-height: 1.65; font-size: 1.08rem; }
.dialog-close { position: absolute; z-index: 2; right: 1rem; top: 1rem; width: 44px; height: 44px; color: var(--cream); background: var(--timber); border: var(--pixel-border); font-size: 1.5rem; }
.gate-icon { display: flex; justify-content: center; align-items: end; height: 66px; margin: 0 auto 1.2rem; }
.gate-tower { width: 24px; height: 50px; background: #897a5c; border: 3px solid #493b2b; box-shadow: inset 0 7px #b4a37c; }
.gate-door { width: 34px; height: 42px; background: #493224; border: 3px solid #493b2b; border-radius: 16px 16px 0 0; }

:focus-visible { outline: 3px solid #fff0b6; outline-offset: 4px; }

@media (max-width: 900px) {
  .site-header { gap: 1rem; padding-inline: clamp(1rem, 4vw, 4rem); }
  nav a { display: none; }
  .music-volume span { display: none; }
  .music-volume input { width: 64px; }
  .hero { min-height: 760px; }
  .feature-grid { grid-template-columns: 1fr; max-width: 620px; }
  .feature-card { display: grid; grid-template-columns: 52px 1fr; column-gap: 1rem; text-align: left; }
  .feature-icon { grid-row: 1 / 3; }
  .village-window, .night-callout { grid-template-columns: 1fr; }
  .window-copy { grid-row: 1; }
  .night-image { min-height: 430px; mask-image: linear-gradient(0deg, black 75%, transparent); }
  .season-strip { grid-template-columns: repeat(2, 1fr); }
  .season-strip figure { min-height: 240px; border-bottom: 2px solid #725838; }
}

@media (max-width: 560px) {
  .site-header { gap: .45rem; padding: max(1rem, env(safe-area-inset-top)) .8rem 0; }
  .brand { width: 120px; }
  nav { gap: .4rem; }
  .music-control { gap: .2rem; padding: .15rem .25rem; }
  .music-toggle { width: 38px; height: 38px; }
  .music-volume input { width: 46px; }
  .play-button--small { min-height: 44px; padding-inline: .9rem; }
  .hero { min-height: 720px; align-items: end; padding: 7rem 1.15rem 7rem; background-image: linear-gradient(0deg, rgb(7 19 15 / 97%) 0%, rgb(7 19 15 / 74%) 47%, rgb(7 19 15 / 25%) 85%); }
  h1 { font-size: clamp(2.65rem, 14vw, 4rem); }
  .hero-intro { font-size: 1.03rem; line-height: 1.55; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .play-button { width: 100%; }
  .text-link { text-align: center; padding: .75rem; }
  .intro, .village-window, .night-copy { padding-inline: 1.15rem; }
  .feature-card { grid-template-columns: 44px 1fr; padding: 1.4rem 1.15rem; }
  .feature-icon { width: 44px; height: 44px; font-size: 1.45rem; }
  .window-frame { padding: 5px; border-width: 3px; }
  .season-strip { grid-template-columns: 1fr 1fr; }
  .season-strip figure { min-height: 185px; }
  .season-strip figcaption { inset: auto .5rem .5rem; }
  .night-callout { min-height: auto; }
  .night-image { min-height: 310px; }
  .dialog-frame { padding-top: 3.5rem; }
}

@media (max-width: 340px) {
  .brand { width: 105px; }
  .play-button--small { padding-inline: .65rem; }
  .hero { padding-inline: .85rem; }
  .season-strip { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cloud, .mote { display: none; }
}