@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root {
  --night: #10244d;
  --ink: #17233c;
  --paper: #fffaf0;
  --red: #b83a32;
  --home02-top: 35.46875%;
  --home03-top: 40.625%;
  --gold: #f4c778;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'DM Sans', 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 18px; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.site-header {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  min-height: 6rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.25rem, 5vw, 5.5rem);
  color: #fff;
}
.wordmark { display: grid; gap: .2rem; font: 600 1.05rem/1.05 var(--serif); text-decoration: none; }
.wordmark__kicker, .eyebrow, .section-label, .hero__caption { font: 700 .875rem/1.4 var(--sans); letter-spacing: .11em; text-transform: uppercase; }
.wordmark__kicker { color: var(--gold); }
.site-nav { display: flex; align-items: center; gap: clamp(1.5rem, 3.2vw, 3.25rem); }
.site-nav a { font-size: 1rem; font-weight: 600; text-decoration: none; }
.site-nav a:hover { color: var(--gold); }
.site-nav a:last-child { display: inline-flex; min-height: 2.8rem; align-items: center; gap: 1.4rem; padding: 0 1.1rem; border: 1px solid rgb(255 255 255 / 55%); }
.menu-toggle { display: none; }

.hero { position: relative; min-height: min(1000px, 100svh); overflow: hidden; background: var(--night); isolation: isolate; }
.hero__scene { position: absolute; top: 0; left: 50%; width: max(100vw, calc(100svh * .96)); aspect-ratio: 4916 / 5120; transform: translateX(-50%); }
.hero__slice { position: absolute; left: 0; display: block; width: 100%; height: auto; }
.hero__slice--one { top: 0; }
.hero__slice--two { top: var(--home02-top); }
.hero__slice--three { top: var(--home03-top); }
.door-sign-form { position: absolute; top: calc(var(--home02-top) + 20px); left: calc(20% + 75px); display: flex; width: max(150px, calc(39% - 330px)); height: 3.2%; gap: 1%; }
.door-sign-form input { min-width: 0; flex: 1; padding: 0 2%; border: 2px solid #6f401f; border-radius: 2px; color: #342216; background: #fff4d8; font: 600 clamp(14px, 1.2vw, 18px) var(--sans); }
.door-sign-form button { position: relative; width: calc(22% + 30px); overflow: hidden; border: 2px solid #6f401f; border-radius: 2px; color: #fff6df; background: #a63c2b; font: 700 clamp(14px, 1.1vw, 16px) var(--sans); cursor: pointer; }
.door-sign-form button::after { position: absolute; z-index: 0; top: -60%; bottom: -60%; left: 0; width: 45%; background: linear-gradient(90deg, transparent, rgb(255 246 217 / 92%), transparent); content: ''; pointer-events: none; animation: enter-shine 2.4s ease-in-out infinite; }
.door-sign-form button span { position: relative; z-index: 1; }
.door-sign-form__status { position: absolute; top: 110%; left: 0; color: #fff; font-size: 14px; text-shadow: 0 1px 3px #17233c; }
.parents-sign { position: absolute; top: var(--home03-top); left: 75%; display: block; width: 25%; height: 6%; background: transparent; cursor: pointer; }
.parents-sign:focus-visible { outline: 3px solid var(--gold); outline-offset: -5px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.coming-soon { position: fixed; width: min(38rem, calc(100% - 2rem)); aspect-ratio: 617 / 464; padding: 4.5rem 4rem; border: 0; color: var(--ink); background: url('../images/Dialog.png') center / 100% 100% no-repeat; text-align: center; }
.coming-soon::backdrop { background: rgb(10 19 39 / 65%); }
.coming-soon p { margin: 0; font: 600 2rem var(--serif); }
.coming-soon__close { position: absolute; top: .5rem; right: .6rem; width: 2rem; height: 2rem; border: 0; color: var(--ink); background: transparent; font-size: 1.5rem; cursor: pointer; }
@keyframes enter-shine { 0%, 15% { transform: translateX(-180%) skewX(-20deg); } 75%, 100% { transform: translateX(360%) skewX(-20deg); } }
.north-pole__backdrop { position: absolute; z-index: -2; inset: 0; background-image: url('public/images/01-WebsiteHome.png'); background-position: center 45%; background-size: cover; }
.north-pole__shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgb(9 24 55 / 78%), rgb(12 30 65 / 46%) 45%, rgb(12 30 65 / 5%)), linear-gradient(0deg, rgb(9 24 55 / 25%), transparent 28%); }
.eyebrow { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.5rem; }
.eyebrow > span { color: var(--gold); font-size: 1rem; }
h1, h2 { margin: 0; font-family: var(--serif); font-weight: 600; letter-spacing: 0; }
h1 em, h2 em { color: var(--gold); font-weight: 500; }

.story { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); padding: clamp(5rem, 11vw, 10rem) max(1.5rem, calc((100% - 1120px) / 2)); overflow: hidden; background: var(--paper); }
.story__portrait { width: 100%; margin: 0; }
.story__portrait img { display: block; width: 100%; height: auto; }
.section-label { display: flex; align-items: flex-start; gap: .75rem; padding-top: .5rem; color: #6a7180; font-size: .875rem; white-space: nowrap; }
.section-label span { color: var(--red); }
.story__copy { position: relative; z-index: 1; max-width: 650px; }
.eyebrow--red { color: var(--red); }
.story h2, .book h2 { font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: 1.02; }
.story h2 em, .book h2 em { color: var(--red); }
.story__copy > p:not(.eyebrow), .north-pole__copy > p:not(.eyebrow), .book > p:not(.eyebrow) { max-width: 36rem; margin: 1.6rem 0 1.8rem; color: #586173; font-size: 18px; line-height: 1.7; }
.text-link { display: inline-flex; align-items: center; gap: 1rem; padding-bottom: .4rem; border-bottom: 1px solid currentColor; color: var(--red); font-size: 1rem; font-weight: 700; text-decoration: none; }
.text-link--light { color: #f3d28e; }

.north-pole { position: relative; display: grid; min-height: 580px; align-items: center; overflow: hidden; color: #fff; background: var(--night); isolation: isolate; }
.north-pole__backdrop { background-position: center 45%; }
.north-pole__shade { background: linear-gradient(90deg, rgb(11 27 59 / 86%), rgb(11 27 59 / 65%) 44%, rgb(11 27 59 / 8%)); }
.north-pole__copy { width: min(100% - 3rem, 1120px); margin: 0 auto; padding: 6rem 0; }
.eyebrow--gold { color: #f3d28e; }
.north-pole h2 { font-size: clamp(3.3rem, 7vw, 6.25rem); line-height: .97; }
.north-pole__copy > p:not(.eyebrow) { max-width: 27rem; color: rgb(255 255 255 / 83%); }

.book { display: grid; min-height: 560px; justify-items: center; align-content: center; padding: 5rem 1.5rem; overflow: hidden; text-align: center; background-color: #f8edda; background-image: radial-gradient(ellipse at 50% 108%, rgb(205 151 88 / 17%), transparent 58%), radial-gradient(circle at 1px 1px, rgb(184 58 50 / 9%) 1px, transparent 0); background-size: auto, 21px 21px; }
.book .eyebrow { justify-content: center; margin-bottom: 1.2rem; }
.book > p:not(.eyebrow) { max-width: 30rem; margin: 1.3rem 0 1.7rem; }
.book__link { display: inline-flex; min-height: 3.25rem; align-items: center; gap: 1.5rem; padding: 0 1.25rem; color: #fff; background: var(--red); font-size: 1rem; font-weight: 700; text-decoration: none; }
.site-footer { display: flex; min-height: 6rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem clamp(1.25rem, 5vw, 5.5rem); color: #fff; background: var(--night); font-size: .875rem; }
.site-footer > a:first-child { font: 1rem var(--serif); text-decoration: none; }
.site-footer > span { color: rgb(255 255 255 / 66%); }
.back-to-top { display: grid; width: 2.5rem; aspect-ratio: 1; place-items: center; border: 1px solid rgb(255 255 255 / 42%); border-radius: 50%; text-decoration: none; }

@media (max-width: 700px) {
  .site-header { min-height: 5.5rem; padding: 1rem 1.25rem; }
  .wordmark { font-size: 1rem; }
  .menu-toggle { z-index: 2; display: inline-flex; min-height: 2.8rem; align-items: center; gap: .7rem; padding: 0 .8rem; border: 1px solid rgb(255 255 255 / 55%); color: #fff; background: rgb(16 36 77 / 35%); font: 600 1rem var(--sans); }
  .menu-icon { display: grid; gap: 4px; }
  .menu-icon i { display: block; width: 15px; height: 1px; background: currentColor; transition: transform 180ms ease; }
  .menu-toggle[aria-expanded='true'] .menu-icon i:first-child { transform: translateY(2.5px) rotate(45deg); }
  .menu-toggle[aria-expanded='true'] .menu-icon i:last-child { transform: translateY(-2.5px) rotate(-45deg); }
  .site-nav { position: absolute; top: calc(100% - .25rem); right: 1.25rem; left: 1.25rem; display: none; align-items: stretch; gap: 0; padding: .5rem 1rem; background: var(--night); box-shadow: 0 12px 30px rgb(0 0 0 / 22%); }
  .site-nav.is-open { display: grid; }
  .site-nav a { padding: 1rem 0; }
  .site-nav a:last-child { min-height: 2.8rem; justify-content: space-between; margin: .35rem 0 .6rem; padding: 0 .75rem; }
  .hero { min-height: 0; aspect-ratio: 0.672109375; }
  .hero__scene { left: 50%; width: 142.857143%; transform: translateX(-50%); }
  .door-sign-form { left: calc(20% + 15px); width: max(280px, calc(39% - 200px)); height: max(5%, 28px); }
  .door-sign-form button { width: calc(22% + 23.4px); }
  .door-sign-form input, .door-sign-form button { font-size: 14px; }
  .coming-soon p { font-size: 1.4rem; }
  .story { grid-template-columns: 1fr; gap: 2.5rem; padding: 5rem 1.5rem; }
  .story__portrait img { width: auto; max-width: 100%; max-height: 200px; margin-inline: auto; }
  .story__copy { padding-bottom: 3rem; }
  .story h2, .book h2 { font-size: clamp(2.8rem, 12vw, 4.5rem); }
  .north-pole { min-height: 580px; }
  .north-pole__backdrop { background-position: 51% center; }
  .north-pole__shade { background: linear-gradient(0deg, rgb(11 27 59 / 89%), rgb(11 27 59 / 61%) 60%, rgb(11 27 59 / 10%)); }
  .north-pole__copy { width: calc(100% - 3rem); align-self: end; padding: 4rem 0; }
  .north-pole h2 { font-size: clamp(3.4rem, 14vw, 5rem); }
  .site-footer { flex-wrap: wrap; padding: 1.25rem; }
  .site-footer > span { order: 1; width: calc(100% - 3.5rem); }
}

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