:root{
  --ink:#0b0f1a;
  --ink-2:#0e1422;
  --parchment:#ece6d6;
  --muted:#a79f8b;
  --faint:#6f6a5c;
  --ochre:#c8a24a;
  --ochre-bright:#e0bd63;
  --thread:#cfe3ea;
  --hair:rgba(236,230,214,.14);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100dvh;
  color:var(--parchment);
  background:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* the painted hero, dimmed to dusk */
.art{
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(11,15,26,.15) 0%, rgba(11,15,26,.72) 55%, rgba(8,10,18,.96) 100%),
    url("hero.jpg") center 30% / cover no-repeat;
  filter:saturate(.92) brightness(.72) contrast(1.02);
}
#mist{position:fixed; inset:0; z-index:-2; width:100%; height:100%; opacity:.5; mix-blend-mode:screen}
.vignette{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(80% 60% at 50% 42%, transparent 0%, rgba(4,6,12,.55) 100%);
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
}

.stage{
  position:relative; z-index:2;
  min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:clamp(24px,6vw,72px) clamp(20px,6vw,48px) 120px;
  gap:clamp(10px,1.6vw,18px);
}

.kicker{
  margin:0; font-family:var(--sans); font-weight:500;
  letter-spacing:.42em; text-transform:uppercase; font-size:.72rem;
  color:var(--ochre);
}
.wordmark{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(3rem,13vw,7.5rem); line-height:.98;
  letter-spacing:.005em; color:var(--parchment);
  text-shadow:0 2px 40px rgba(0,0,0,.6);
}
.wordmark .oo{color:var(--ochre-bright); font-style:italic; letter-spacing:-.01em}
.strap{
  margin:.1em 0 0; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.05rem,3.4vw,1.6rem); color:var(--thread); opacity:.92;
}
.note{
  margin:.5em auto 0; max-width:40ch;
  font-size:clamp(.95rem,2.6vw,1.08rem); line-height:1.65; color:var(--muted);
}
.badge{
  margin:1.1em 0 0; padding:.4em 1em; border:1px solid var(--hair); border-radius:999px;
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--ochre);
  background:rgba(200,162,74,.06);
}

.strip{
  margin:1.6em 0 0; display:flex; gap:clamp(8px,1.6vw,16px);
  width:min(720px,92vw);
}
.strip img{
  width:33.33%; height:auto; aspect-ratio:3/2; object-fit:cover;
  border:1px solid var(--hair); border-radius:6px;
  filter:saturate(.9) brightness(.85);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  transition:transform .5s ease, filter .5s ease;
}
.strip img:hover{transform:translateY(-4px); filter:saturate(1) brightness(1)}

.thread{
  margin-top:2.2em; text-decoration:none;
  font-size:1.15rem; color:var(--ochre); opacity:.6;
  transition:opacity .3s ease, transform .3s ease;
}
.thread:hover{opacity:1; transform:rotate(45deg)}

.foot{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px clamp(16px,5vw,40px); font-size:.72rem; color:var(--faint);
}
.foot-hint{opacity:.8}

/* reveal */
.reveal{opacity:0; transform:translateY(14px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1)}
body.ready .reveal{opacity:1; transform:none}
.d0{transition-delay:.05s}.d1{transition-delay:.18s}.d2{transition-delay:.34s}
.d3{transition-delay:.5s}.d4{transition-delay:.66s}.d5{transition-delay:.82s}
.d6{transition-delay:1s}.d7{transition-delay:1.15s}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  #mist{display:none}
  .strip img{transition:none}
}
@media (max-width:560px){
  .foot-hint{display:none}
  .strip img:nth-child(3){display:none}
  .strip img:nth-child(1),.strip img:nth-child(2){width:50%}
}