/* ===== ELYRA — Editorial Web Kit (Full-Screen + Smooth) ===== */
:root{
  --bg:#050505;
  --bg2:#0b0b0b;
  --text:#f2f2f2;
  --muted:rgba(242,242,242,.72);
  --faint:rgba(242,242,242,.45);
  --hair:rgba(242,242,242,.22);
  --max:960px;
  --radius:18px;
}

*{box-sizing:border-box}

/* GLOBAL RESET — removes desktop top strip + mobile gaps */
html, body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background: var(--bg);
  overflow-x:hidden;
}

/* Optional helper used in your index.html */
.no-scroll-x{overflow-x:hidden}

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: var(--bg); /* Background handled by .bg layer */
}

/* ===== Full-screen Background Layers (Option 4) ===== */
.bg{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  height:100svh; /* mobile Safari fix */
  z-index:-2;

  /* IMPORTANT: make sure you upload /assets/hero.jpg */
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.92)),
    radial-gradient(900px 600px at 20% 10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 600px at 85% 5%, rgba(255,255,255,.06), transparent 55%),
    url("assets/hero.jpg") center/cover no-repeat;

  filter:saturate(.95) contrast(1.05);
  transform:scale(1.02);

  /* subtle fade in */
  animation: slowFade 1.6s ease forwards;
  opacity:0;
}

.vignette{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  height:100svh;
  z-index:-1;
  pointer-events:none;

  background:
    radial-gradient(circle at center, transparent 35%, rgba(0,0,0,.70) 100%);
}

/* ===== General ===== */
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:20px 18px}
.small{font-size:.92rem;color:var(--muted)}
.hair{height:1px;background:var(--hair);width:72px;margin:18px auto}
.center{text-align:center}

/* ===== Nav ===== */
.nav{
  position:sticky;
  top:0;
  z-index:50;

  backdrop-filter: blur(14px);
  background: rgba(0,0,0,.45);
  border-bottom: 1px solid rgba(255,255,255,.08);

  /* Helps on iPhone notch area */
  padding-top: env(safe-area-inset-top);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{
  font-family:"Playfair Display", serif;
  letter-spacing:.18em;
  font-weight:600;
  font-size:1.05rem;
}
.links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.links a{
  font-size:.9rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  padding:10px 8px;
  border-radius:12px;
}
.links a:hover{
  background:rgba(255,255,255,.08);
  color:var(--text);
}

/* ===== HERO — true full screen on mobile + desktop ===== */
.hero{
  /* Full screen visible area */
  min-height: 100dvh;
  min-height: 100svh;

  display:flex;
  align-items:center;
  justify-content:center;

  /* Safe area padding avoids bottom white strip */
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

/* ===== Card ===== */
.card{
  width:100%;
  max-width:720px;

  /* smaller padding on mobile so it feels more full-screen */
  padding: clamp(34px, 5vw, 56px) clamp(18px, 4vw, 28px);

  border-radius: var(--radius);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 70px rgba(0,0,0,.55);

  /* Smooth entrance */
  animation: fadeUp 1.1s ease forwards;
  opacity:0;
}

.h1{
  font-family:"Playfair Display", serif;
  font-size: clamp(3rem, 6vw, 4.6rem);
  letter-spacing:.16em;
  margin:0 0 16px;
}

.lede{
  font-size:1.05rem;
  line-height:1.85;
  color:var(--muted);
  margin:0 auto 22px;
  max-width: 56ch;
}

.tagline{
  font-style:italic;
  letter-spacing:.14em;
  color:var(--faint);
  margin-top:22px;
}

.footer{
  margin-top: 34px;
  font-size:.9rem;
  letter-spacing:.14em;
  color:var(--faint);
}

/* ===== Sections/Pages ===== */
.section{padding: 22px 0 40px}
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.panel{
  grid-column: span 12;
  padding: 20px 18px;
  border-radius: var(--radius);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
}
.panel h2{
  margin:0 0 10px;
  font-family:"Playfair Display", serif;
  letter-spacing:.08em;
}
.panel p{margin:0;color:var(--muted);line-height:1.75}

@media (min-width: 860px){
  .panel.span6{grid-column: span 6;}
  .panel.span4{grid-column: span 4;}
}

/* ===== Buttons ===== */
.btnrow{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:20px;
}
.btn{
  padding: 12px 16px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--text);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.82rem;
}
.btn:hover{background:rgba(255,255,255,.12)}

/* ===== Animations ===== */
@keyframes fadeUp{
  from{transform: translateY(18px);opacity:0}
  to{transform: translateY(0);opacity:1}
}
@keyframes slowFade{
  from{opacity:0}
  to{opacity:1}
}