/* The approved street photograph, now the opening scene on every device. */
#top .hero-bg { object-fit: cover !important; object-position: 50% 72% !important; }
#top .hero-copy { z-index: 10; opacity: 1; }
#top .hero-copy h1 { color: inherit; }
#top .hero-copy em { color: inherit; }
#top .hero-copy p { color: inherit; }
#top .hero-logo { transition: opacity .7s ease; }
#top .holiday-notice {
  top: calc(100svh - 180px); bottom: auto; z-index: 12;
}
.crossing-next {
  position: absolute; z-index: 12; left: 6vw;
  top: calc(100svh - 54px); min-height: 44px;
  display: inline-flex; align-items: center; gap: 24px;
  font-size: 11px; letter-spacing: .16em; color: #fff;
  transition: gap .25s ease;
}
.crossing-next:hover { gap: 32px; }
.crossing-next:focus-visible { outline: 2px solid #e5c280; outline-offset: 4px; }
.crossing-next span { font-size: 21px; }
html.boundary-blend #top .crossing-next { pointer-events: auto !important; }
.crossing-dots { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 7; pointer-events: none !important; }
html.crossing-pending #top::after {
  content: ''; position: absolute; inset: 0; z-index: 7; background: #faf9f6; pointer-events: none;
}
html:is(.crossing-pending,.crossing-ink) #top .hero-copy {
  color: #292625; opacity: 1; text-shadow: 0 0 5px #faf9f6, 0 2px 18px #faf9f6;
}
html:is(.crossing-pending,.crossing-ink) #top .hero-copy small { color: #6d5024; }
html:is(.crossing-pending,.crossing-ink) #top .hero-logo { opacity: 0 !important; }
html:is(.crossing-pending,.crossing-ink) .site-header { background: linear-gradient(#faf9f6dd,transparent); }
html:is(.crossing-pending,.crossing-ink) .site-header nav a,
html:is(.crossing-pending,.crossing-ink) .crossing-next { color: #292625; }
html.crossing-photo #top .hero-copy { transition: color .55s ease; }
@media (max-width:700px) {
  #top .hero-copy, #top .hero-copy.reveal.in {
    top: max(128px, 15svh) !important; bottom: auto !important;
    left: 5vw !important; width: 67vw !important; max-width: 67vw !important;
  }
  #top .hero-copy h1 { font-size: clamp(32px, 8.2vw, 57px); line-height: 1.18; }
  #top .hero-copy small { display: block; max-width: 60vw; font-size: 8px; line-height: 1.8; letter-spacing: .16em; }
  #top .hero-copy p { font-size: 11px; line-height: 1.85; max-width: 60vw; }
  #top .hero-logo {
    top: max(108px, 12svh) !important; left: auto !important; right: 5vw !important;
    height: 22svh !important; max-width: 20vw !important; width: auto !important;
    object-fit: contain; transform: none !important;
  }
  #top .holiday-notice { top: calc(100svh - 160px); left: 5vw; right: 5vw; }
  .crossing-next { left: 5vw; top: calc(100svh - 62px); }
}
@media (min-width:701px) and (max-height:600px) {
  #top .hero-copy, #top .hero-copy.reveal.in { top: 80px; }
  #top .hero-copy h1 { font-size: 46px; }
  #top .hero-copy p { font-size: 12px; margin-top: 8px; }
  #top .hero-logo { top: 72px !important; height: 42svh !important; }
  #top .holiday-notice { top: calc(100svh - 134px); }
}
@media (prefers-reduced-motion:reduce) {
  .crossing-dots, html.crossing-pending #top::after { display: none; }
}