/* Styles for the hero landing page only (index.html). Kept separate from
   styles.css since it uses a different dark, full-bleed hero layout with
   no nav or back-link. */

@font-face {
  font-family: 'DS Lato Black Skew';
  src: url('fonts/DS-Lato-Black-Skew-15.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: dark;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  background: #000000;
}

body {
  height: 100vh;
  height: 100dvh;
}

.hero {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  background-image: url('images/Doors_Closed_4J2A9074.jpg');
  background-size: cover;
  background-position: center bottom;
  color: inherit;
  text-decoration: none;
  outline-offset: -4px;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.55) 20%,
    rgba(0, 0, 0, 0.15) 42%,
    rgba(0, 0, 0, 0) 60%
  );
  pointer-events: none;
}

.hero-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3vh;
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 2vw 2vw;
  padding: 0 6vw;
}

.title {
  flex: 0 0 auto;
  font-family: 'DS Lato Black Skew', 'Lato Black', sans-serif;
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  color: #e3241e;
  font-size: clamp(1.8rem, min(3vw + 1.25rem, 9vh), 6rem);
  line-height: 1.08;
  white-space: nowrap;
}

.subtitle {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Lato', 'Arial', sans-serif;
  font-style: italic;
  font-weight: 400;
  color: #ffffff;
  font-size: clamp(0.95rem, min(1.35vw, 4vh), 2.6rem);
  line-height: 1.4;
  padding-bottom: 0.4em;
}

@media (max-width: 900px) {
  .hero-text {
    bottom: 1.5vh;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1vh;
  }

  .title,
  .subtitle {
    flex: 0 0 auto;
    max-width: 100%;
  }

  .title {
    font-size: clamp(2rem, min(9vw, 16vh), 3rem);
  }

  .subtitle {
    font-size: clamp(0.75rem, min(3vw, 6vh), 1rem);
  }
}