:root {
  --winter-gold: #ffdf94;
}

body {
  background:
    radial-gradient(ellipse at 96% 8rem, #eaf0ff, transparent 34rem),
    radial-gradient(ellipse at 0 28rem, #e8f4ff, transparent 36rem),
    var(--night);
}

.site-header:has(.guide-header) {
  background: linear-gradient(106deg, #091534, #173267 64%, #0c214b);
}

.guide-header.header-inner {
  border-color: #6f91c880;
  background: #11264f;
  box-shadow: inset 0 1px #c5ddff25, 0 2px 14px #050e27a6;
}

.guide-header .brand { color: #f3f8ff; }
.guide-header .brand-star {
  color: var(--winter-gold);
  background: radial-gradient(circle, #4b4369, #203161 68%);
  box-shadow: 0 0 12px #ffdf9440, inset 0 0 1px 1px #fce8ae60;
}

.guide-header .language-menu > summary {
  border-color: #6284bd;
  background: #192e58;
  color: #f3f8ff;
}

.guide-menu > summary {
  border: 1px solid #e6cd86;
  background: #27477c;
  color: #fff;
}

.guide-header :is(.brand, summary):focus-visible {
  outline-color: var(--winter-gold);
}

.hero {
  background: linear-gradient(127deg, #091633, #1d3066 68%, #163763);
  box-shadow: 0 11px 48px #223e7350;
}

.panorama::after {
  background:
    linear-gradient(90deg, #081534eb, #101b46cf 27%, #101e4459 52%, transparent 76%),
    linear-gradient(0deg, #0c183db3, transparent 30%),
    radial-gradient(ellipse at 77% -10%, #c5dcff62, transparent 54%);
}

[dir="rtl"] .panorama::after {
  background:
    linear-gradient(270deg, #081534ed, #101b46d4 27%, #101e4459 52%, transparent 76%),
    linear-gradient(0deg, #0c183db3, transparent 30%);
}

.hero h1 {
  color: #fff;
  text-shadow: 0 3px 5px #060d29, 0 0 28px #0c1d48a1;
  overflow-wrap: anywhere;
}

.hero .eyebrow {
  color: var(--winter-gold);
  letter-spacing: .2em;
}

.hero-dates {
  border-color: #ffdf9492;
  background: #101d42e5;
}

.hero .button-primary {
  border-color: #fce5a8;
  background: #deeaff;
}

.hero .button-primary:hover { background: #fff; }
.hero .button-secondary { background: #162b56db; }
.hero .button-secondary:hover { background: #2b4675; }

.festival-garland { top: .15rem; }
.garland-strand {
  border-bottom-color: #1a2e50;
  box-shadow: 0 3px 4px -3px #e9d6a9;
}
.garland-strand i {
  width: 6px;
  height: 9px;
  box-shadow: 0 0 6px 2px var(--bulb), 0 0 19px 5px color-mix(in srgb, var(--bulb) 57%, transparent);
}

.hero-snow { z-index: 0; }
.hero-snow span {
  background-image:
    radial-gradient(1.5px 1.5px at 18px 74px, #fff 90%, transparent),
    radial-gradient(1px 1px at 53px 122px, #e1eeff 88%, transparent),
    radial-gradient(2px 2px at 87px 6px, #fff 92%, transparent),
    radial-gradient(1px 1px at 118px 97px, #fff5d5 92%, transparent),
    radial-gradient(2px 2px at 155px 58px, #e9f1ff 90%, transparent),
    radial-gradient(1px 1px at 197px 169px, #fff 92%, transparent),
    radial-gradient(1.5px 1.5px at 231px 32px, #fff 88%, transparent),
    radial-gradient(2.5px 2.5px at 283px 151px, #e7f1ff 89%, transparent);
}

.winter-stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.winter-stars span {
  position: absolute;
  inset: var(--star-y) auto auto var(--star-x);
  width: var(--star-size);
  height: var(--star-size);
  filter: drop-shadow(0 0 8px #ffd789);
  opacity: .68;
}

.winter-stars span::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #ffecb5;
  clip-path: polygon(50% 0, 59% 40%, 100% 50%, 59% 60%, 50% 100%, 41% 60%, 0 50%, 41% 40%);
}

[dir="rtl"] .winter-stars { transform: scaleX(-1); }

.hero .motion-toggle {
  left: auto;
  right: auto;
  inset-inline-start: max(1rem, calc((100vw - 1200px) / 2));
  min-height: 44px;
  max-inline-size: calc(100% - 2rem);
  color: #f3f8ff;
  border-color: #7597d1;
  background: #101d40f2;
  text-align: start;
}

.gallery-aftermovie {
  border-color: #c2d6f6;
  background: linear-gradient(122deg, #e1edff, #f4f8ff 64%, #e0eafe);
  box-shadow: 0 18px 45px #233e7319;
}

.gallery-aftermovie .aftermovie-copy h2::after,
.guide-start .section-heading h2::after {
  content: "";
  display: block;
  inline-size: 4.4rem;
  block-size: .23rem;
  margin-block-start: .48rem;
  border-radius: 1rem;
  background: linear-gradient(90deg, #456eac 0 71%, #bf8d3b 71%);
}

.vimeo-placeholder,
.guide-topics a {
  background: linear-gradient(136deg, #fff, #edf4ff);
}

.guide-topics .topic-icon {
  color: var(--winter-gold);
  background: #203d74;
}

.guide-topics a:hover,
.guide-topics a:focus-visible {
  border-color: #6389c4;
  background: #e7f1ff;
  box-shadow: 0 12px 26px #263f7524;
}

.guide-page > .guide-page-title,
.guide-page > .content-section > .section-heading {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.3rem, 4.2vw, 3.25rem);
  margin-block-end: clamp(1.1rem, 3vw, 1.9rem);
  border: 1px solid #b3cdf7;
  border-radius: 1.2rem;
  background:
    radial-gradient(1.5px 1.5px at 56% 26%, #ffdf94 95%, transparent),
    radial-gradient(2px 2px at 81% 36%, #fdf7dd 95%, transparent),
    radial-gradient(1px 1px at 89% 28%, #bcd8ff 95%, transparent),
    radial-gradient(1px 1px at 94% 48%, #fff 95%, transparent),
    radial-gradient(1px 1px at 67% 63%, #d8e5ff 95%, transparent),
    radial-gradient(ellipse at 100% 0, #41659a, transparent 63%),
    linear-gradient(118deg, #0b1939, #1b3b73);
  box-shadow: 0 12px 30px #20396e2e;
}

.guide-page > .guide-page-title::after,
.guide-page > .content-section > .section-heading::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -2rem -9.5rem auto;
  width: 23rem;
  height: 16rem;
  border: 1px solid #d7e8ff38;
  border-radius: 50%;
  box-shadow: 0 0 0 .8rem #b2ceff1a, 0 0 0 2rem #d7e8ff0c;
  transform: rotate(-16deg);
  pointer-events: none;
}

.guide-page :is(.guide-page-title, .section-heading) h1 {
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 12px #0a1c42;
}

.guide-page :is(.guide-page-title, .section-heading) p { color: #e7f1ff; }
.guide-page .walk-origin-link { color: var(--winter-gold); }
.guide-page .walk-origin-link:focus-visible { outline-color: var(--winter-gold); }

.site-footer {
  border-block-start: 2px solid #c5d9f6;
  background: linear-gradient(108deg, #e2eeff, #edf5ff 65%, #e4edff);
}

@media (max-width: 740px) {
  .hero { background: #0e1c40; }
  .hero .panorama::after,
  [dir="rtl"] .hero .panorama::after {
    background: linear-gradient(0deg, #0e1c40 4%, #111f49ad 31%, transparent 72%);
  }
  .hero-content { padding-block-end: 4.4rem; }
  .winter-stars { inset-block-end: 35%; }
  .guide-page > .guide-page-title::after,
  .guide-page > .content-section > .section-heading::after { opacity: .6; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero.motion-ready .winter-stars span {
    animation: winter-stars 8s ease-in-out infinite;
    animation-delay: var(--star-delay);
  }
  .hero.motion-paused .winter-stars span { animation-play-state: paused; }

  @keyframes winter-stars {
    0%, 100% { opacity: .42; transform: scale(.78); }
    46% { opacity: 1; transform: scale(1.2); }
  }
}