:root{--m:min(calc(100vw / 393), calc(100svh / 852));--heading:Author,sans-serif;--bg:#090909;--fg:#f5f5f5;--muted:#9a9a9f;--accent:#22c7e8}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font-family:Poppins,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* NAV */
.nav{position:absolute;inset:0 0 auto 0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:calc(20*var(--m)) calc(20*var(--m))}
.logo{font:700 calc(26*var(--m)) var(--heading);letter-spacing:.05em}
.links,.social{display:none}
.burger{background:none;border:0;display:flex;flex-direction:column;gap:calc(7*var(--m));align-items:flex-end;cursor:pointer;padding:calc(4*var(--m))}
.burger span{height:calc(2*var(--m));background:var(--fg);width:calc(20*var(--m))}
.burger span:nth-child(2){width:calc(14*var(--m))}
.burger span:nth-child(3){width:calc(20*var(--m))}

/* HERO — mobile first. Designed at iPhone 16 (393x852); everything scales from --m so it fits any phone */
.hero{position:relative;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
  padding:calc(62*var(--m)) max(calc(20*var(--m)),calc((100vw - 353*var(--m)) / 2)) calc(22*var(--m))}
.eyebrow{display:block;position:relative;z-index:3;order:3;align-self:center;margin-top:calc(-82*var(--m));text-align:center;white-space:nowrap;
  font:600 calc(10*var(--m)) Poppins,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
h1{order:1}.portrait{order:2}.tagline{order:4}.stats{order:5}.seen{order:6}
h1{position:relative;z-index:1;font-family:var(--heading);font-weight:700;font-size:calc(72.7*var(--m));line-height:.85;text-transform:uppercase;text-align:center;letter-spacing:-.03em}
h1 span{display:block}
h1 i{display:block;width:fit-content;margin-inline:auto;font-style:normal}
h1 i{position:relative}
h1 span:first-child i:first-child::before{content:"\201C";font-family:Fraunces,serif;font-weight:700;font-size:.8em;position:absolute;right:100%;margin-right:.14em;color:rgba(245,245,245,.2)}
h1 span:last-child i:last-child::after{content:"\201D";font-family:Fraunces,serif;font-weight:700;font-size:.8em;position:absolute;left:100%;margin-left:.14em;color:rgba(245,245,245,.2)}
.portrait{position:relative;left:2%;z-index:2;display:block;width:calc(393*var(--m));align-self:center;margin:calc(-54*var(--m)) 0 0;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 80%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 80%,transparent 100%)}
.tagline{position:relative;z-index:3;align-self:center;margin-top:calc(8*var(--m));padding:calc(9*var(--m)) calc(18*var(--m));border-radius:calc(10*var(--m));
  background:rgba(0,0,0,.35);backdrop-filter:blur(6px);font-size:calc(9*var(--m));font-weight:600;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.stats{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:calc(12*var(--m));margin-top:calc(26*var(--m))}
.stats>div{text-align:center}
.stats dd{margin-inline:auto}
.stats dt{font:700 calc(19*var(--m)) var(--heading);letter-spacing:.01em}
.stats dd{font-size:calc(8.5*var(--m));letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:calc(2*var(--m));max-width:calc(70*var(--m))}
.seen{position:relative;z-index:3;margin-top:calc(22*var(--m));text-align:center}
.seen p{font-size:calc(9.5*var(--m));letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:calc(16*var(--m))}
.logos{display:flex;flex-direction:column;align-items:center;gap:calc(20*var(--m))}
.seen ul{display:flex;align-items:center;justify-content:center;gap:calc(24*var(--m))}
.seen li{white-space:nowrap}
.seen img{display:block;width:auto;filter:brightness(0) invert(1);opacity:.7}
.ted{height:calc(18*var(--m))}.ys{height:calc(15*var(--m))}.et{height:calc(15*var(--m))}.bs{height:calc(13*var(--m))}


/* GRAIN — behind the headline and photo */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.08;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.1 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;background-size:220px 220px}


/* BACKLIGHT — soft glow behind the head and shoulders */
.hero::after{content:"";position:absolute;z-index:0;pointer-events:none;left:50%;top:38%;transform:translate(-50%,-50%);width:calc(510*var(--m));height:calc(510*var(--m));
  background:radial-gradient(circle,rgba(255,255,255,.11) 0%,rgba(255,255,255,.045) 35%,transparent 65%)}

/* DESKTOP — designed at 1280x720; every size scales from --u so proportions hold on any desktop screen */
@media (min-width:900px){
  :root{--u:min(calc(100vw / 1280), calc(100vh / 720))}
  .nav{padding:calc(20*var(--u)) calc(44*var(--u))}
  .logo{font-size:calc(28*var(--u))}
  .burger{display:none}
  .links{display:flex;gap:calc(26*var(--u));position:absolute;left:50%;transform:translateX(-50%)}
  .links a{font-size:calc(10.5*var(--u));font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#d6d6d8;transition:color .2s}
  .links a:hover{color:var(--accent)}
  .social{display:flex;gap:calc(14*var(--u))}
  .social svg{width:calc(18*var(--u));height:calc(18*var(--u));fill:#8d8d92;transition:fill .2s}
  .social a:hover svg{fill:var(--accent)}

  .hero{display:block;height:100vh;min-height:0;padding:0}
  .hero::after{top:auto;transform:translateX(-50%);width:calc(900*var(--u));height:calc(900*var(--u));bottom:calc(-420*var(--u))}
  .eyebrow{display:block;position:absolute;z-index:3;bottom:calc(60*var(--u));left:50%;transform:translateX(-50%);white-space:nowrap;text-align:center;
    font:600 calc(12*var(--u)) Poppins,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
  h1{position:absolute;top:calc(100% - 586*var(--u));left:0;right:0;font-size:calc(156*var(--u));line-height:.72;letter-spacing:-.035em}
  h1 span{display:block}
  h1 i{display:inline}
  .portrait{position:absolute;left:50%;bottom:calc(-64.8*var(--u));transform:translateX(-50%);width:calc(504*var(--u));margin:0}
  .tagline{position:absolute;left:50%;bottom:calc(34*var(--u));transform:translateX(-50%);margin:0;background:none;backdrop-filter:none;padding:0;font-size:calc(11*var(--u));letter-spacing:.25em}
  .stats{position:absolute;left:calc(44*var(--u));bottom:calc(34*var(--u));margin:0;grid-template-columns:repeat(2,auto);gap:calc(14*var(--u)) calc(36*var(--u));justify-content:start}
  .stats>div{text-align:left}
  .stats dd{margin-inline:0}
  .stats dt{font-size:calc(22*var(--u))}
  .stats dd{font-size:calc(9*var(--u));max-width:none;margin-top:calc(2*var(--u))}
  .seen{position:absolute;right:calc(44*var(--u));bottom:calc(34*var(--u));margin:0;text-align:right}
  .seen p{font-size:calc(9.5*var(--u));margin-bottom:calc(24*var(--u))}
  .logos{flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:calc(24*var(--u))}
  .seen ul{display:flex;align-items:center;justify-content:flex-end;gap:calc(24*var(--u))}
  .ted{height:calc(15*var(--u))}.ys{height:calc(15*var(--u))}.et{height:calc(12*var(--u))}.bs{height:calc(14*var(--u))}
}