/* Lostonvista — Duo Rebalanced */
:root{
  --moss: #3B4A3A;
  --night: #273945;
  --leaf-light: #CFE6C9;
  --leaf-dim: #A8C4A2;
  --glass: rgba(0,0,0,0.25);
  --stroke: rgba(255,255,255,0.18);
}

*{box-sizing:border-box;}
html,body{height:100%; margin:0;}
body{
  font:400 16px/1.6 'Georgia', serif;
  color:var(--leaf-light);
  background: linear-gradient(to right, var(--moss), var(--night));
}

.hero{
  position:relative;
  min-height:100svh;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end; /* anchor text at the bottom regardless of image */
  align-items:center;
  overflow:hidden;
  padding-bottom: 8vh; /* base breathing room for title block */
}

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

.hero-img{
  z-index:0;
  object-position: center;
  transition: object-position .25s ease, transform .25s ease;
}

/* Forest: immersive cover (no bars) */
.hero.is-forest .hero-img{
  object-fit: cover;
  object-position: center center;
}

/* Road: show full image (no crop), subtle gradient fills remaining area */
.hero.is-road .hero-img{
  object-fit: contain;
  object-position: center center;
}

/* Gradient veil to unify scenes */
.veil{
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(59,74,58,0.42), rgba(39,57,69,0.48));
  z-index:1;
  pointer-events:none;
}

/* Top-right socials with breathing room */
.topbar{
  position:absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3.2vw, 32px);
  z-index:2;
}

.social{
  display:flex; gap: clamp(10px, 2.2vw, 22px);
  background: var(--glass);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  backdrop-filter: blur(6px);
}
.social a{
  color: var(--leaf-dim);
  text-decoration: none;
  font-size: 14px; text-transform: uppercase; letter-spacing: .06em;
}
.social a:hover{ color: var(--leaf-light); text-decoration: underline; }

/* Title block always bottom-centered now */
.name{
  position:relative; z-index:2;
  text-align:center;
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}

.name h1{
  margin:0;
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  font-size: clamp(56px, 10vw, 128px);
  color: var(--leaf-light);
  text-transform: lowercase;
}

.name .tag{
  margin-top: .4em;
  font-size: clamp(14px, 2vw, 20px);
  color: var(--leaf-dim);
  font-family: 'Georgia', serif;
}

.foot{
  position:relative; z-index:2;
  padding: 12px;
  font-size: 13px;
  color: var(--leaf-dim);
  text-align:center;
}