:root {
  --ink: #1A1714;
  --muted: #7A6F64;
  --soft: #5C534A;
  --accent: #9C7450;
  --line: #E4DED6;
  --ground: #fff;
  --ground-2: #F7F5F2;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden; /* single-screen landing, no scrolling */
  background: var(--ground);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.hero__ambient {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(105deg, #3a2a1d 0px, #8a6343 60px, #d9b48a 120px, #f2e2c8 150px, #8a6343 210px, #3a2a1d 280px),
    linear-gradient(180deg, #c99a6c, #4a3424);
  background-blend-mode: multiply;
  background-size: 960px 100%, 100% 100%;
  animation: idLight 18s linear infinite;
}

.hero__video {
  position: absolute;
  inset: 0; /* js/main.js then sizes it to the title's box */
  overflow: hidden;
  pointer-events: none;
}
.hero__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Make a 16:9 YouTube iframe "cover" the hero like object-fit: cover */
.hero__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;      /* 16:9 */
  min-height: 100%;
  min-width: 177.78vh;  /* 16:9 */
  transform: translate(-50%, -50%) scale(1.15); /* hide YouTube chrome at edges */
  border: 0;
}

.hero__mask {
  position: absolute;
  inset: 0;
  background: #fff;
  color: #000;
  mix-blend-mode: screen;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3vw 14vh; /* lift the name a little to leave room for the contact block */
}

.hero__word { margin: 0; line-height: 0; }
/* Title artwork (img/title-*.svg): sized by width, capped by height so it never crowds the contact block */
.hero__title-img {
  display: block;
  width: min(88vw, 1700px, calc(52svh * 3339 / 568));
  height: auto;
}

/* ---------- CONTACT ICONS ---------- */
/* Centered halfway between the title's bottom edge (--title-bottom, set by js/main.js) and the bottom of the screen */
.contact {
  position: absolute;
  left: 0; right: 0;
  top: calc((var(--title-bottom, 70%) + 100%) / 2);
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: clamp(16px, 3vw, 32px);
}
/* Icon-only links: 56px tap target around a 34px icon */
.social { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; }
.social__icon { width: 34px; height: 34px; flex: none; }

/* ---------- FOOTER ---------- */
.hero__info {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(16px, 4vh, 40px);
  z-index: 2;
  padding: 0 clamp(20px, 4vw, 56px);
  text-align: center;
}
.copyright { margin: 0; font-size: 12px; color: var(--muted); }

/* Phones: stack the name on two lines so the letters stay big (more video shows through) */
@media (max-width: 640px) {
  .hero__title-img { width: min(90vw, calc(42svh * 2141 / 1294)); }
  .hero__mask { padding-bottom: 22vh; }
}
/* Short screens: drop the extras so everything still fits without scrolling */
@media (max-height: 640px) {
  .copyright { display: none; }
}

/* ---------- MOTION ---------- */
@keyframes idLight { 0% { background-position: 0 0, 0 0; } 100% { background-position: -960px 0, 640px 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero__ambient { animation: none; }
}