:root { color-scheme: light; --ink: #183c40; --muted: #486164; --teal: #126773; --line: #d4e3e5; font-family: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: #fff; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/assets/fonts/atkinson-next.woff2") format("woff2"); font-display: swap; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; min-width: 280px; font-size: 18px; line-height: 1.6; letter-spacing: 0; }
h1,h2,h3,p,ul,figure { margin-top: 0; }
h1,h2,h3 { line-height: 1.15; }
h1 { font-size: 72px; margin-bottom: 18px; }
h2 { font-size: 36px; margin-bottom: 18px; }
h3 { font-size: 24px; margin-bottom: 12px; }
a { color: var(--teal); text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible,summary:focus-visible { outline: 3px solid #9a4fbe; outline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
.inner { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 10; padding: 10px 18px; background: #fff; }
.skip-link:focus { top: 12px; }
.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.nav-inner,.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 18px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 750; text-decoration: none; color: var(--ink); }
.brand img { width: 44px; height: 44px; border-radius: 8px; flex: none; }
.brand small { display: block; font-size: 13px; font-weight: 500; }
nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
.hero { position: relative; min-height: min(640px, calc(100svh - 155px)); padding-block: 72px; display: flex; align-items: center; background: #d8ece6 url("assets/valley.webp") center / cover; }
.hero::before { content: ""; position: absolute; inset: 0; background: #ffffff80; pointer-events: none; }
.hero-content { position: relative; }
.hero h1 { color: #133b3e; text-shadow: 0 1px 1px #fff; }
.hero .eyebrow { font-size: 15px; }
.hero-line { font-size: 30px; font-weight: 750; line-height: 1.25; margin-bottom: 20px; }
.hero-copy { max-width: 520px; margin-bottom: 24px; }
.hero-content > * { position: relative; z-index: 1; }
.eyebrow { font-size: 14px; font-weight: 750; margin-bottom: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: 8px; background: var(--teal); color: #fff; font-weight: 750; text-decoration: none; }
.button:hover { background: #0d535d; }
.text-link { display: inline-flex; align-items: center; min-height: 48px; font-weight: 750; }
.band { padding-block: 64px; }
.section-heading { max-width: 740px; margin-bottom: 36px; }
.section-heading p { color: var(--muted); }
.section-heading .eyebrow { color: var(--teal); }
.worlds { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; }
.world { border-top: 5px solid; padding-top: 22px; }
.world p { font-size: 17px; color: var(--muted); margin: 0; }
.nature { border-color: #248651; }.fantasy { border-color: #9461b4; }.music { border-color: #2d84bf; }.discovery { border-color: #dd793b; }
.views { background: #f1f7fa; }
.screens { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px; }
.screens figure { margin: 0; min-width: 0; }
.screens img { width: 100%; max-width: 288px; margin-inline: auto; aspect-ratio: 9/16; object-fit: contain; border-radius: 8px; box-shadow: 0 6px 18px #17404418; }
.screens figcaption { text-align: center; font-weight: 750; margin-top: 16px; }
.small-note { font-size: 15px; color: var(--muted); margin-block: 26px 0; }
.parents { background: #fff; }
.parent-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.parent-columns .section-heading { margin-bottom: 0; }
.facts { margin: 0; padding-left: 22px; align-self: center; }
.facts li { padding-block: 10px; border-bottom: 1px solid var(--line); }
.facts li::marker { color: #248651; }
.availability { background: #edf4ef; }
.availability p { max-width: 780px; }
.site-footer { border-top: 1px solid var(--line); background: #fff; }
.site-footer p { font-size: 15px; margin: 0; }
.document { max-width: 800px; padding-block: 56px 72px; }
.document h1 { font-size: 42px; margin-bottom: 16px; overflow-wrap: anywhere; }
.document h2 { font-size: 27px; margin-top: 40px; }
.document h3 { font-size: 22px; margin-top: 26px; }
.document p,.document li { overflow-wrap: anywhere; }
.document li { margin-bottom: 10px; }
.document .intro { font-size: 21px; color: var(--muted); }
.document details { border-block: 1px solid var(--line); padding-block: 12px; }
.document summary { cursor: pointer; font-weight: 750; min-height: 48px; padding-block: 10px; }
.document details > p { margin-top: 16px; }
.back-link { display: inline-flex; min-height: 44px; align-items: center; margin-bottom: 24px; font-size: 16px; }
@media (max-width: 900px) {
  .worlds { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .screens { gap: 20px; }.parent-columns { gap: 32px; }
  .hero { padding-block: 60px; }
}
@media (max-width: 600px) {
  .inner { width: calc(100% - 32px); }.nav-inner { flex-wrap: wrap; gap: 10px; padding-block: 12px; }
  nav { gap: 4px 18px; }.nav-inner nav { width: 100%; }nav a { font-size: 15px; }
  h1 { font-size: 48px; }h2 { font-size: 28px; }h3 { font-size: 22px; }
  .hero { min-height: 0; padding-block: 44px; background-position: 55% center; }
  .hero-line { font-size: 25px; }.hero-copy { font-size: 17px; }
  .hero .eyebrow { font-size: 13px; }
  .actions { gap: 6px 18px; }.button { padding-inline: 18px; }
  .band { padding-block: 44px; }.section-heading { margin-bottom: 28px; }
  .worlds { gap: 28px 18px; }.world p { font-size: 16px; }
  .screens { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .screens img { max-width: 276px; }.parent-columns { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .footer-inner { align-items: flex-start; flex-direction: column; gap: 8px; }
  .document { padding-block: 32px 48px; }.document h1 { font-size: 32px; }.document h2 { font-size: 25px; }
}
@media (max-height: 700px) { .hero { padding-block: 16px; }.hero h1 { font-size: 48px; }.hero-line { font-size: 25px; }.band { padding-block: 32px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }