/* Gunpowder & Gold — placeholder */
:root {
  --black: #050403;
  --gold: #c9b896;
  --gold-bright: #e6d4b4;
  --gold-dim: #8a7a5e;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--black);
  color: var(--gold);
  font-family: "Iowan Old Style", Palatino, "Palatino Linotype", Palatino Linotype, "Book Antiqua", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: relative;
  min-height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
  background: var(--black);
}

.hero,
.hero picture,
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero img {
  object-fit: cover;
  object-position: center 46%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.smoke {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
}

.smoke span {
  position: absolute;
  left: 52%;
  top: 18%;
  width: min(42vw, 28rem);
  height: min(55vh, 32rem);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(220, 214, 206, 0.16) 0%, rgba(180, 176, 170, 0.05) 42%, transparent 70%);
  filter: blur(28px);
  opacity: 0.45;
  transform: translate(-50%, 0);
  animation: drift-a 22s ease-in-out infinite;
}

.smoke span:nth-child(2) {
  left: 48%;
  top: 8%;
  width: min(28vw, 18rem);
  height: min(40vh, 24rem);
  background:
    radial-gradient(ellipse at 40% 70%, rgba(200, 196, 190, 0.12) 0%, transparent 68%);
  filter: blur(34px);
  animation: drift-b 28s ease-in-out infinite;
  animation-delay: -8s;
  opacity: 0.35;
}

.smoke span:nth-child(3) {
  left: 56%;
  top: 14%;
  width: min(18vw, 12rem);
  height: min(30vh, 18rem);
  background:
    radial-gradient(ellipse at 60% 80%, rgba(230, 228, 224, 0.1) 0%, transparent 65%);
  filter: blur(22px);
  animation: drift-c 19s ease-in-out infinite;
  animation-delay: -14s;
  opacity: 0.3;
}

@keyframes drift-a {
  0%, 100% { transform: translate(-50%, 0) scale(1) rotate(0deg); opacity: 0.28; }
  40% { transform: translate(-46%, -3.5rem) scale(1.12) rotate(6deg); opacity: 0.5; }
  70% { transform: translate(-58%, -2rem) scale(1.05) rotate(-3deg); opacity: 0.36; }
}

@keyframes drift-b {
  0%, 100% { transform: translate(-50%, 0) scale(1.05) rotate(-4deg); opacity: 0.22; }
  50% { transform: translate(-40%, -4rem) scale(1.2) rotate(5deg); opacity: 0.42; }
}

@keyframes drift-c {
  0%, 100% { transform: translate(-50%, 0.5rem) scale(0.95); opacity: 0.18; }
  50% { transform: translate(-60%, -3rem) scale(1.18); opacity: 0.38; }
}

@media (prefers-reduced-motion: reduce) {
  .smoke span {
    animation: none;
    opacity: 0.22;
    transform: translate(-50%, 0);
  }
}

.contact {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  margin: 0;
  padding: 4.5rem 1.25rem 1.6rem;
  text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.18) 45%, transparent 100%);
}

.contact a {
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  font-weight: 400;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.contact a:hover,
.contact a:focus-visible {
  color: var(--gold-bright);
  border-bottom-color: rgba(201, 184, 150, 0.55);
  outline: none;
}

/* 404 */
.message {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 1.25rem 5.5rem;
  text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.2) 42%, transparent 70%);
}

.message p {
  margin: 0 0 1.1rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--gold);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}

.message a {
  color: var(--gold-dim);
  text-decoration: none;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  border-bottom: 1px solid rgba(201, 184, 150, 0.35);
  padding-bottom: 0.15rem;
  transition: color 0.25s ease;
}

.message a:hover,
.message a:focus-visible {
  color: var(--gold-bright);
  outline: none;
}

@media (max-width: 640px) {
  .contact a { font-size: 0.7rem; letter-spacing: 0.16em; }
  .contact { padding-bottom: 1.35rem; }
}

/* Preserve the full approved composition on tall screens instead of cropping the bar. */
@media (max-aspect-ratio: 3/4) {
  .hero img {
    object-fit: contain;
    object-position: center 40%;
  }
}