:root {
  --ink: #2a241c;
  --accent: #d8b15a;
  --shadow: rgba(0, 0, 0, 0.35);
  --font-serif: "EB Garamond", Garamond, serif;

  /* Manual position controls */
  --logo-top: 4%;        /* moves the entire block */
  --logo-left: 4%;
  --text-offset-x: 85px; /* ← px is better than % here */
  --text-offset-y: 370px;
}

body {
  background: var(--ink);
  font-family: var(--font-serif);
  color: var(--ink);
  height: 100vh;
  overflow: hidden;
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url("map-background.png") center center / cover no-repeat;
}

/* UPPER-LEFT LOGO + TEXT */
.overlay {
  position: absolute;
  top: var(--logo-top);
  left: var(--logo-left);
  text-align: left;
  animation: overlayIn 900ms ease both;
}

/* Logo */
.logo {
  width: clamp(240px, 32vw, 380px);
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 8px var(--shadow));
  animation: logoIn 900ms ease 50ms both;
}

.textblock {
  position: absolute;
  top: var(--text-offset-y);
  left: var(--text-offset-x);
  animation: textIn 900ms ease 200ms both;
  white-space: nowrap;       /* prevents early wrapping */
  max-width: none;           /* removes implicit width restriction */
  width: auto;               /* ensures natural width */
}

.title {
  font-size: clamp(1.8rem, 3.2vw, 3.0rem);
  color: #3c2e17;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  font-weight: 600;
  margin-top: 0.8rem;
}

/* Subtitle */
.subtitle {
  font-size: clamp(1rem, 2vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: #594320;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  margin-top: 0.2rem;
}

/* Animations */
@keyframes overlayIn {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes logoIn {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes textIn {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Responsive adjustments */
@media (max-width: 800px) {
  :root {
    --logo-top: 2%;
    --logo-left: 3%;
    --text-offset-x: 0px;
    --text-offset-y: 80px;
  }
  .logo { width: clamp(180px, 40vw, 280px); }
}