/* ---------- Font ---------- */
@font-face {
  font-family: "BillaMount";
  src: url("BillaMount-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base / Reset ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root{
  --cream: #f5f3ee;
  --ink: #1f1f1f;
  --muted: rgba(31,31,31,0.70);
  --rule: rgba(31,31,31,0.14);
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--cream);
  color: var(--ink);
}

/* ---------- HERO (moving banner) ---------- */
.hero{
  position: relative;
  min-height: 92vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0b0f14;
}

.hero__bg{
  position: absolute;
  inset: 0;
  background-image: url("./hero.png");
  background-repeat: no-repeat;
  background-size: 120% auto;
  background-position: 50% 50%;
  animation: driftLeft 35s linear infinite;
}

.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.20) 0%,
    rgba(0,0,0,0.10) 40%,
    rgba(0,0,0,0.00) 65%,
    rgba(245,243,238,0.75) 90%,
    rgba(245,243,238,1) 100%
  );
}

.hero__content{
  position: relative;
  z-index: 1;
  width: min(1100px, 92vw);
  padding: 64px 18px;
  text-align: center;
}

.hero__kicker{
  font-size: 14px;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0 0 120px;
}

.hero__names{
  font-family: "BillaMount", serif;
  font-weight: 400;
  font-size: clamp(48px, 5.2vw, 82px);
  line-height: 1.05;
  margin: 0 0 18px;
  color: rgba(255,255,255,0.98);
  letter-spacing: 2px;
  text-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

.hero__names .amp{
  margin: 0 10px;
}
.hero__meta{
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin: 80px 0 70px;   /* more space above + below */
}

.hero__nav{
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

.hero__nav a{
  color: rgba(255,255,255,0.95);
  text-decoration: none;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  transition: transform 120ms ease, background 120ms ease;
}

.hero__nav a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.16);
}

/* ---------- Sections ---------- */
.section{
  width: 100%;
  padding: 120px 0;      /* BIG spacing */
  background: var(--cream);
}

.container{
  width: min(1100px, 92vw);
  margin: 0 auto;
}

.container--narrow{
  width: min(900px, 92vw);
}

.center{
  text-align: center;
}

.kicker{
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--muted);
}

.title{
  margin: 0 0 18px;
  font-size: 42px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.lead{
  margin: 0 auto;
  max-width: 760px;
  font-size: 17px;
  line-height: 1.9;
  color: var(--muted);
}

/* Big section headline like "The Details" */
.headline{
  margin: 0 0 70px;
  text-align: center;
  font-size: 46px;
  font-weight: 650;
  letter-spacing: -0.4px;
}

.headline--big{
  font-size: 56px;
  margin-bottom: 70px;
}

/* Cards = the clean 2/3 column blocks */
.cards{
  display: grid;
  gap: 70px;
  align-items: start;
  text-align: center;
}

.cards--3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cards--2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card{
  padding-top: 6px;
}

.card__label{
  margin: 0 0 22px;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}

.card__text{
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
}

/* Responsive: stack columns on small screens */
@media (max-width: 860px){
  .section{ padding: 90px 0; }
  .headline{ font-size: 40px; margin-bottom: 55px; }
  .headline--big{ font-size: 44px; }
  .title{ font-size: 36px; }

  .cards--3,
  .cards--2{
    grid-template-columns: 1fr;
    gap: 46px;
  }
}

/* ---------- Animation ---------- */
.hero{
  position: relative;
  min-height: 130vh;          /* makes it extend scroll */
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0b0f14;
}

@media (max-width: 860px){
  .hero{ min-height: 105vh; }
}

.hero__bg{
  position: absolute;
  inset: 0;
  background-image: url("./hero.png");
  background-repeat: no-repeat;

  /* cinematic fill */
  background-size: cover;
  background-position: 50% 55%;

  /* subtle depth so drift doesn't show edges */
  transform: scale(1.08);

  /* animation */
  animation: driftLeft 20s linear infinite;
}

/* moody overlay (still shows the art) */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.30) 0%,
      rgba(0,0,0,0.12) 45%,
      rgba(0,0,0,0.00) 70%,
      rgba(245,243,238,0.85) 100%
    );
}

/* Updated drift that works with cover */
@keyframes driftLeft{
  from { background-position: 65% 55%; }
  to   { background-position: 35% 55%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  .hero__bg{ animation: none; transform: none; }
}