:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body { background: #153955; }

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #153955;
}

.scene {
  position: absolute;
  inset: -12px;
  z-index: -2;
  pointer-events: none;
}

.scene__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene__layer { will-change: transform; }

.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(6, 25, 44, .38) 0%, rgba(6, 25, 44, .18) 45%, transparent 80%),
              linear-gradient(0deg, rgba(5, 20, 31, .48) 0%, transparent 32%);
}

.content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(2rem, 5.2vw, 5.5rem) clamp(1.5rem, 5.5vw, 6rem) clamp(2rem, 5vw, 5rem);
  color: #fff;
  text-shadow: 0 2px 16px rgba(4, 22, 38, .35);
}

.identity { width: fit-content; max-width: 100%; }

h1 {
  margin: 0;
  font-family: Impact, 'Arial Narrow', 'Helvetica Neue', sans-serif;
  font-size: clamp(5rem, 14vw, 13rem);
  font-stretch: condensed;
  font-weight: 900;
  letter-spacing: .035em;
  line-height: .93;
}

.rule {
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 1.7vw, 1.6rem);
  width: min(100%, 42rem);
  margin: clamp(1.2rem, 2.3vw, 2.3rem) auto .7rem;
  color: #db302d;
  text-shadow: none;
}

.rule span { height: 2px; flex: 1; background: currentColor; }
.rule svg { width: clamp(1.7rem, 3.1vw, 2.8rem); height: auto; fill: currentColor; }

.name {
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: .23em;
}

.place { margin-top: clamp(2.5rem, 8vh, 6rem); text-transform: uppercase; }
.place p { margin: 0; }
.place__headline { font-size: clamp(1.3rem, 2.8vw, 2.6rem); font-weight: 700; letter-spacing: .18em; }
.place__detail { margin-top: .55rem !important; font-size: clamp(.9rem, 1.65vw, 1.55rem); font-weight: 700; letter-spacing: .15em; color: #f4e7d7; }

.grid { margin: auto 0 0; text-transform: uppercase; font-weight: 700; letter-spacing: .14em; font-size: clamp(1rem, 1.8vw, 1.6rem); }
.grid strong { color: #f0d8b7; font-size: 1.2em; letter-spacing: .09em; }

.motion-controls { position: absolute; right: 1.3rem; bottom: 1.5rem; max-width: 12rem; text-align: right; }
.motion-button { border: 1px solid #ffffff60; border-radius: 2rem; padding: .65rem .9rem; background: #102c40cc; color: #fff; font: inherit; font-size: .8rem; cursor: pointer; }
.motion-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.motion-button:disabled { opacity: .6; }
.motion-status { margin: .4rem 0 0; font-size: .75rem; line-height: 1.4; }
.motion-status:empty { display: none; }

@media (max-width: 650px) {
  .hero__shade { background: linear-gradient(180deg, rgba(4, 23, 43, .5), rgba(4, 23, 43, .16) 55%, rgba(4, 23, 43, .55)); }
  .content { padding: 2rem 1.3rem 2rem; }
  h1 { font-size: clamp(3.4rem, 17vw, 7rem); }
  .rule { margin-top: 1.2rem; }
  .name { font-size: clamp(.85rem, 3.4vw, 1.3rem); letter-spacing: .19em; }
  .place { margin-top: 3.5rem; }
  .place__headline { font-size: clamp(1.15rem, 5vw, 1.6rem); line-height: 1.25; }
  .place__detail { font-size: .8rem; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .scene__layer { will-change: auto; }
}