/* Halloween seasonal layer. Remove this stylesheet to restore the base edition.
   No text, layout, route, control, date logic, or animation is introduced. */
body > header { border-bottom-color: #ca914a; }
.arrival {
  isolation: isolate;
  color: #fff8ec;
  background: radial-gradient(ellipse at 88% 18%, #482744 0, transparent 57%),
              radial-gradient(ellipse at 8% 94%, #4b342b 0, transparent 48%), #13283d;
}
.arrival h1 { color: #fff8ec; }
.arrival h1 em { color: #ffc876; }
.arrival .hero-copy .eyebrow { color: #f1ddbf; }
.arrival .eyebrow .dot { background: #ffc876; }
.arrival .intro { color: #e3dfdf; }
.arrival .crew-welcome p { color: #fff8ec; }
.arrival .arrival-links > .button:not(.secondary) {
  color: #13283d; background: #ffc876; border-color: #ffc876;
}
.arrival .arrival-links > .button:not(.secondary):hover {
  color: #13283d; background: #ffdfa7;
}
.arrival .arrival-links > .button.secondary {
  color: #fff8ec; background: transparent; border-color: #c79563;
}
.arrival .arrival-links > .button.secondary:hover { background: #ffffff14; }
.arrival .arrival-shortcuts { border-color: #a67648; color: #fff0d6; }
.arrival .arrival-shortcuts a:hover,
.arrival .arrival-scroll:hover { color: #ffc876; }
.arrival .arrival-scroll { color: #fff0d6; }
.arrival a:focus-visible { outline-color: #ffc876; }

:root { --halloween-corner: url("assets/halloween-corner-v2.webp"); }

/* Ornaments sit at existing section edges, behind content; no hit areas. */
.arrival::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  width: 160px; height: 160px; z-index: -1;
  background: var(--halloween-corner) left top / contain no-repeat;
  pointer-events: none; opacity: .8;
}
.arrival .crew-welcome { position: relative; }
.arrival .crew-welcome::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: 116px; height: 90px;
  background: url("assets/halloween-pumpkins-v1.webp") center / contain no-repeat;
  pointer-events: none;
}
/* Lower-page echoes are sparse and kept out of photographs and character art. */
#universe, #company, #contact { position: relative; isolation: isolate; }
#universe { background: linear-gradient(130deg, #fff6e7, #f6eff7); }
#company { background: linear-gradient(110deg, #fff6e7, #f5eef5); }
#contact { background: #f7eee1; border-top-color: #d6b083; }
#universe::before, #company::before, #contact::after {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
  background: var(--halloween-corner) left top / contain no-repeat;
}
#universe::before { left: 0; top: 0; width: 115px; height: 115px; opacity: .75; }
#company::before { right: 0; top: 0; width: 110px; height: 110px; transform: scaleX(-1); opacity: .75; }
#contact::after { right: 0; bottom: 0; width: 92px; height: 92px; transform: rotate(180deg); opacity: .75; }

@media (max-width: 640px) {
  .arrival::before { width: 84px; height: 84px; opacity: .65; }
  .arrival .crew-welcome::after { width: 78px; height: 68px; }
  #universe::before, #company::before { width: 70px; height: 70px; }
  #contact::after { width: 55px; height: 55px; }
}
@media (max-width: 359px) {
  .arrival .crew-welcome::after { width: 52px; height: 46px; }
}
@media (forced-colors: active), print {
  .arrival::before, .arrival .crew-welcome::after,
  #universe::before, #company::before, #contact::after { display: none; }
}