@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&display=swap');

:root { --black:#111; --white:#fff; --grey:#6b6b6b; --line:#e6e6e6; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Jost',sans-serif; font-weight:300; color:var(--black); background:var(--white); line-height:1.7; }
a { color:inherit; }

/* Skip link: hidden until someone presses Tab */
body > a:first-child { position:absolute; left:-9999px; }
body > a:first-child:focus { left:16px; top:16px; background:var(--black); color:var(--white); padding:8px 16px; z-index:10; }

/* Header bar */
header { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:20px 6vw; background:var(--white); border-bottom:1px solid var(--line); }
header p { font-weight:500; letter-spacing:.35em; }
nav a { margin-left:28px; text-decoration:none; font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; }

/* Every chapter */
section { max-width:720px; margin:0 auto; padding:120px 6vw; text-align:center; scroll-margin-top:70px; }
h1, h2 { font-weight:400; letter-spacing:.08em; text-transform:uppercase; margin-bottom:24px; }
h1 { font-size:clamp(2rem,6vw,4rem); line-height:1.15; }
h2 { font-size:clamp(1.4rem,3vw,2rem); }
section p { color:var(--grey); font-size:1.1rem; }

/* Opening screen (hero) */
main > section:first-child { max-width:none; min-height:90vh; display:flex; flex-direction:column; justify-content:center; align-items:center; background:var(--black); color:var(--white); }
main > section:first-child p { color:#ccc; }

/* Button */
#contact a { display:inline-block; margin-top:32px; padding:14px 40px; border:1px solid var(--black); text-decoration:none; text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; }
#contact a:hover { background:var(--black); color:var(--white); }

/* Footer */
footer { border-top:1px solid var(--line); padding:40px 6vw; text-align:center; font-size:.8rem; color:var(--grey); }

/* Phones */
@media (max-width:600px) {
  header { flex-direction:column; gap:12px; }
  nav a { margin:0 10px; }
  section { padding:80px 6vw; }
}
/* Photo behind the opening, darkened so the text stays readable */
main > section:first-child {
  background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)), url("hero.jpg") center / cover no-repeat;
}

/* Small label above the opening heading */
.eyebrow { font-size:.8rem; letter-spacing:.4em; text-transform:uppercase; margin-bottom:16px; }

/* Email sign-up */
#join form { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:32px; }
#join label { position:absolute; left:-9999px; }
#join input { font:inherit; padding:14px 18px; min-width:260px; border:1px solid var(--black); }
#join button { font:inherit; font-size:.8rem; padding:14px 40px; background:var(--black); color:var(--white); border:1px solid var(--black); text-transform:uppercase; letter-spacing:.2em; cursor:pointer; }
#join button:hover { background:var(--white); color:var(--black); }

/* Curtain film: full-width section below the opening */
.film { position:relative; max-width:none; width:100%; padding:0; aspect-ratio:16/9; max-height:90vh; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#000; }
.film-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ZAVIO looks like a shadow behind the silk */
.film-word { position:relative; z-index:1; margin:0; font-size:clamp(2.5rem,8vw,6rem); font-weight:400; letter-spacing:.35em; color:rgba(25,18,10,.82); mix-blend-mode:multiply; opacity:0; }
.film.playing .film-word { animation:zavio-reveal 2.5s ease-out 6s both; }

@keyframes zavio-reveal {
  from { opacity:0; filter:blur(14px); }
  to   { opacity:1; filter:blur(0); }
}

/* People who turn off motion in their settings see ZAVIO right away */
@media (prefers-reduced-motion: reduce) {
  .film-word { opacity:1; }
  .film.playing .film-word { animation:none; }
}