@charset "UTF-8";

:root {
  color-scheme: light;
  --ink: #28545e;
  --copy: #476570;
  --paper: #fcfefd;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; }
.skip-link { position: absolute; top: 1rem; left: 1rem; z-index: 5; padding: .8rem 1rem; background: white; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
a:focus-visible { outline: 2px solid #28545e; outline-offset: 5px; }
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; min-height: 900px; min-height: max(850px, 100svh); padding: 5.7rem 1.5rem 2rem; overflow: hidden; background: #e5f4f4; text-align: center; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(#effbfa24, #f9fdf81a), url('/assets/aurora-valley.webp') center 55% / cover no-repeat; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 16%; z-index: -1; background: linear-gradient(transparent, var(--paper)); pointer-events: none; }
.sky-light { position: absolute; z-index: -1; inset: -10%; opacity: .45; background: radial-gradient(ellipse at 30% 8%, #dcfaed 0, transparent 45%), radial-gradient(ellipse at 80% 20%, #f4e7f7 0, transparent 40%); animation: aurora-drift 24s ease-in-out infinite alternate; pointer-events: none; }
.hero-copy { position: relative; z-index: 1; }
.opening-star { display: block; color: #657e8e; font-size: 2.2rem; line-height: 1; margin-bottom: 1.3rem; }
h1, h2, .opening-line { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
h1 { margin: 0; font-size: clamp(4.1rem, 8.8vw, 8.1rem); letter-spacing: -.058em; line-height: 1.14; }
.opening-line { margin: 1.8rem auto 0; font-size: clamp(1.2rem, 2.1vw, 1.6rem); line-height: 1.65; letter-spacing: -.01em; }
.aria-place { width: min(330px, 65vw); height: 310px; margin-top: 1.5rem; flex-shrink: 0; display: grid; place-items: center; }
.aria { display: block; width: 100%; height: auto; overflow: visible; animation: aria-float 8s ease-in-out infinite alternate; filter: drop-shadow(0 12px 26px #e6f7fc70); }
.discover { display: grid; place-items: center; width: 44px; height: 44px; margin-top: auto; border-radius: 50%; text-decoration: none; font-size: 1.4rem; }
.discover:hover { background: #ffffff70; }
.valley { position: relative; padding: 6.1rem 1.5rem 7.2rem; text-align: center; scroll-margin-top: 2rem; }
.section-star { display: block; font-size: 1.8rem; color: #7c8f97; line-height: 1; margin-bottom: 1.8rem; }
h2 { margin: 0; font-size: clamp(2.6rem, 4.3vw, 4rem); line-height: 1.12; letter-spacing: -.04em; }
h2 em { font-weight: 400; }
.valley p, .coming-soon p { max-width: 560px; margin: 1.8rem auto 0; color: var(--copy); font-size: 1.08rem; line-height: 1.9; }
.coming-soon { position: relative; isolation: isolate; overflow: hidden; padding: 6.2rem 1.5rem 6rem; text-align: center; background: linear-gradient(180deg, #fcfefd, #edf8f7 65%, #edf7f7); }
.story-light { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 25% 60%, #e2f2f6 0, transparent 60%), radial-gradient(ellipse at 80% 70%, #f2ebf6 0, transparent 60%); }
.coming-soon h2 { font-size: clamp(2.6rem, 4vw, 3.6rem); }
footer { padding: 2rem 1.5rem 2.5rem; text-align: center; background: #edf7f7; }
footer p { margin: 0; color: #536e77; font-size: .8125rem; letter-spacing: .03em; }
@keyframes aurora-drift { from { transform: translate3d(-1%, 0, 0); } to { transform: translate3d(2%, 2%, 0); } }
@keyframes aria-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -8px, 0); } }
@media (min-width: 1600px) { .hero { padding-top: 7rem; } }
@media (max-width: 600px) {
  .hero { min-height: max(760px, 100svh); padding: 4rem 1.1rem 1.5rem; }
  h1 { font-size: clamp(2.65rem, 14vw, 5.3rem); letter-spacing: -.06em; }
  .opening-star { margin-bottom: 1.4rem; font-size: 1.8rem; }
  .opening-line { margin-top: 1.7rem; font-size: 1.21rem; line-height: 1.7; }
  .aria-place { height: 290px; width: 74vw; max-width: 310px; margin-top: 1.5rem; }
  .valley { padding: 4.4rem 1.8rem 5rem; }
  .valley, .coming-soon { padding-inline: min(1.5rem, 6vw); }
  .valley h2, .coming-soon h2 { font-size: clamp(2rem, 8vw + .4rem, 3rem); overflow-wrap: break-word; }
  .valley p, .coming-soon p { font-size: 1rem; line-height: 1.85; }
  .coming-soon { padding-block: 4.5rem 4rem; }
  footer { padding-bottom: 2rem; }
}
@media (max-width: 350px) { .wide-break { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }