@import url("../fonts/fonts.css");
:root{
  --ink:#1d2430; --slate:#2b3442; --slate-2:#3a4556; --mist:#c9d1dc; --paper:#f6f2ec; --paper-2:#efe8de;
  --dawn-1:#f6b48a; --dawn-2:#f08a6c; --dawn-3:#c96b86; --gold:#e8b15a; --pulse:#ff7a59;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:.005em}
h2{font-size:clamp(2.2rem,4.4vw,3.3rem);margin-bottom:.4em}
.eyebrow{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--dawn-3);margin-bottom:14px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
section{padding:110px 0}
.lede{font-size:1.2rem;color:var(--slate-2);max-width:62ch}

/* nav */
.nav{position:absolute;top:0;left:0;right:0;z-index:10}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:24px;padding-bottom:24px}
.brand{font-family:var(--serif);font-size:1.4rem;color:#fff;text-decoration:none;letter-spacing:.08em;display:flex;align-items:center;gap:10px}
.brand svg{width:34px;height:14px}
.nav ul{list-style:none;display:flex;gap:28px}
.nav a.l{color:rgba(255,255,255,.85);text-decoration:none;font-size:.88rem;letter-spacing:.04em}
.nav a.l:hover{color:#fff}

/* hero */
.hero{position:relative;min-height:100vh;color:#fff;display:flex;align-items:center;overflow:hidden;padding:120px 0 90px;
  background:
   linear-gradient(180deg, rgba(246,170,120,.78) 0%, rgba(232,130,120,.55) 22%, rgba(150,90,130,.5) 42%, rgba(29,36,48,.86) 70%, #1d2430 100%),
   url("../img/grand-central.jpg") center/cover no-repeat;}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 10%, rgba(255,214,170,.45), transparent 55%);pointer-events:none}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:center}
.hero .kicker{font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:#ffe2cc;font-weight:600}
.hero h1{font-size:clamp(4rem,10vw,8rem);letter-spacing:.02em;margin:.12em 0 .05em;text-shadow:0 6px 40px rgba(0,0,0,.35)}
.hero .sub{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.5rem,2.8vw,2.1rem);color:#ffe9d9}
.hero .tag{margin:26px 0 34px;font-size:1.15rem;max-width:34ch;color:rgba(255,255,255,.92)}
.btns{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-weight:600;font-size:.95rem;text-decoration:none;transition:transform .2s, box-shadow .2s, background .2s;border:1px solid transparent;cursor:pointer;font-family:var(--sans)}
.btn-primary{background:linear-gradient(90deg,var(--dawn-1),var(--dawn-2));color:#1d2430;box-shadow:0 10px 30px rgba(240,138,108,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(240,138,108,.5)}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(4px)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.cover{justify-self:end;width:100%;height:auto;max-width:340px;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);transform:rotate(1.2deg)}
.by{margin-top:18px;font-size:.9rem;color:rgba(255,255,255,.75);letter-spacing:.05em}

/* ECG motif */
.ecg{position:absolute;left:0;right:0;bottom:56px;height:80px;z-index:1;opacity:.55}
.ecg path{fill:none;stroke:var(--pulse);stroke-width:2;stroke-dasharray:2400;stroke-dashoffset:2400;animation:trace 5.5s ease-out forwards;filter:drop-shadow(0 0 6px rgba(255,122,89,.8))}
@keyframes trace{to{stroke-dashoffset:0}}
.divider{display:block;width:100%;height:40px;color:var(--dawn-2);opacity:.6}
.divider path{fill:none;stroke:currentColor;stroke-width:1.5}

/* about */
.about .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:start}
.about p{margin-bottom:1.15em;color:var(--slate)}
.about p.first::first-letter{font-family:var(--serif);font-size:4.2rem;float:left;line-height:.8;padding:6px 10px 0 0;color:var(--dawn-3)}
.pull{font-family:var(--serif);font-size:1.75rem;line-height:1.3;font-style:italic;color:var(--ink);border-left:2px solid var(--dawn-2);padding:4px 0 4px 22px;margin:34px 0}
.figure{border-radius:10px;overflow:hidden;box-shadow:0 20px 50px rgba(29,36,48,.18)}
.figure img{width:100%;height:auto}
figcaption{font-size:.8rem;color:#7a8291;padding:10px 2px 0;letter-spacing:.03em}
.stack{display:grid;gap:26px;position:sticky;top:30px}
.moods{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.moods span{font-size:.8rem;padding:7px 14px;border-radius:999px;background:var(--paper-2);color:var(--slate-2);border:1px solid #e3d9cc}

/* characters */
.chars{background:linear-gradient(180deg,#1d2430,#262f3d);color:#eef1f5}
.chars .eyebrow{color:var(--dawn-1)}
.chars .lede{color:var(--mist)}
.leads{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:54px}
.card{background:#2b3442;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.06);transition:transform .3s, box-shadow .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(0,0,0,.35)}
.card .ph{aspect-ratio:4/5;overflow:hidden;position:relative;background:#222a36}
.card .ph img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.card .ph::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,rgba(43,52,66,.9))}
.card .body{padding:22px 24px 26px}
.card h3{font-size:1.9rem;margin-bottom:6px}
.card .role{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dawn-1);font-weight:600;margin-bottom:12px}
.card p{font-size:.96rem;color:#c7cfda}
.ph.placeholder{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,#4a3f52,#222a36 70%)}
.ph.placeholder .sil{width:46%;opacity:.5}
.ph.placeholder .note{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);z-index:2}
.cast-title{margin:80px 0 24px;font-family:var(--serif);font-size:1.9rem;font-weight:500;color:#fff}
.cast{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.mini{text-align:left}
.mini .ph{aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#222a36}
.mini img{width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:transform .5s}
.mini:hover img{transform:scale(1.04)}
.mini h4{font-family:var(--serif);font-weight:600;font-size:1.2rem;margin-top:10px;color:#fff}
.scenes{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:220px;gap:16px;margin-top:20px}
.scenes figure{position:relative;border-radius:10px;overflow:hidden}
.scenes figure.big{grid-row:span 2}
.scenes img{width:100%;height:100%;object-fit:cover}
.scenes figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));font-size:.8rem;letter-spacing:.06em}

/* series */
.series{background:var(--paper)}
.timeline{position:relative;margin-top:60px;display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.timeline::before{content:"";position:absolute;top:27px;left:4%;right:4%;height:2px;background:linear-gradient(90deg,var(--dawn-2),#d8cfc2 22%,#d8cfc2 70%,transparent)}
.vol{position:relative;text-align:center;padding-top:70px}
.vol .dot{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;background:var(--paper);border:2px solid #cfc4b5}
.vol.now .dot{background:var(--dawn-2);border-color:var(--dawn-2);box-shadow:0 0 0 8px rgba(240,138,108,.18);animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{box-shadow:0 0 0 6px rgba(240,138,108,.18)}20%{box-shadow:0 0 0 12px rgba(240,138,108,.1)}40%{box-shadow:0 0 0 7px rgba(240,138,108,.2)}}
.vol.maybe .dot{border-style:dashed}
.vol .n{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#8a8f99;font-weight:600}
.vol .t{font-family:var(--serif);font-size:1.25rem;margin-top:4px;line-height:1.2}
.vol.now .t{color:var(--dawn-3);font-weight:600}
.vol .s{font-size:.8rem;color:#8a8f99;margin-top:4px}
.series-note{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:40px;color:var(--slate)}

/* author */
.author{background:var(--paper-2)}
.author .grid{display:grid;grid-template-columns:.6fr 1.4fr;gap:60px;align-items:center}
.monogram{aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:4.4rem;color:#fff;background:linear-gradient(140deg,var(--dawn-1),var(--dawn-3) 60%,var(--slate));box-shadow:0 20px 50px rgba(201,107,134,.3);max-width:280px}
.ph-note{display:inline-block;margin-top:14px;font-size:.78rem;color:#9a6a4b;background:#fbe9dc;border:1px dashed #e7b796;padding:6px 12px;border-radius:6px}

/* signup */
.signup{position:relative;color:#fff;text-align:center;overflow:hidden;background:linear-gradient(160deg,#2b3442 0%,#3b3550 45%,#c96b86 85%,#f6b48a 120%)}
.signup h2{color:#fff}
.signup p{color:rgba(255,255,255,.85);max-width:52ch;margin:0 auto}
.form{margin:36px auto 0;display:flex;gap:12px;max-width:520px;flex-wrap:wrap;justify-content:center}
.form input{flex:1 1 260px;padding:15px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:.95rem}
.form input::placeholder{color:rgba(255,255,255,.65)}
.form input:focus{outline:2px solid var(--dawn-1);outline-offset:2px}
.small{font-size:.78rem;margin-top:16px;color:rgba(255,255,255,.65)!important}

footer{background:#161c26;color:#8f98a6;padding:46px 0;font-size:.85rem}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer .brand{font-size:1.2rem}
footer nav{display:flex;gap:22px}
footer a{text-decoration:none}
footer a:hover{color:#fff}

/* responsive */
@media (max-width:980px){
  .hero .wrap,.about .grid,.author .grid,.series-note{grid-template-columns:1fr}
  .cover{justify-self:start;max-width:260px;transform:none}
  .leads{grid-template-columns:1fr 1fr}
  .cast{grid-template-columns:repeat(3,1fr)}
  .stack{position:static}
  .timeline{grid-template-columns:1fr;gap:0}
  .timeline::before{top:0;bottom:0;left:13px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--dawn-2),#d8cfc2 25%,#d8cfc2 80%,transparent)}
  .vol{text-align:left;padding:0 0 26px 48px}
  .vol .dot{top:2px;left:0;transform:none}
  .monogram{max-width:180px;font-size:3rem}
}
@media (max-width:640px){
  body{font-size:16px}
  section{padding:76px 0}
  .wrap{padding:0 20px}
  .nav ul{display:none}
  .hero{min-height:auto;padding:110px 0 130px}
  .ecg{bottom:22px;height:60px}
  .hero .wrap{gap:36px}
  .leads{grid-template-columns:1fr}
  .cast{grid-template-columns:repeat(2,1fr)}
  .scenes{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
  .scenes figure.big{grid-column:span 2;grid-row:span 2}
  .pull{font-size:1.45rem}
  footer .wrap{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.ecg path{stroke-dashoffset:0}}
.disc-note{margin-top:12px;font-size:.78rem!important;color:#9aa4b2!important;border-top:1px solid rgba(255,255,255,.08);padding-top:10px;font-style:italic}
.disc-note a{color:var(--dawn-1)}
.scenes + .scenes{margin-top:16px}
.collage{margin:40px auto 0;max-width:720px;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.collage img{width:100%;height:auto}
.collage figcaption{color:#9aa4b2;text-align:center;padding:12px}
footer .disclaimer{padding:0 0 34px;margin-bottom:34px;border-bottom:1px solid rgba(255,255,255,.08)}
footer .disclaimer .wrap{display:block}
footer .disclaimer h3{font-family:var(--sans);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:#c7cfda;margin-bottom:10px;font-weight:600}
footer .disclaimer p{font-size:.82rem;line-height:1.7;max-width:110ch;color:#8f98a6}