:root{
  --ink:#1c1530; --ink2:#2a2047; --paper:#f8f1e4; --paper2:#efe4cf; --card:#fffaf0;
  --gold:#c9963b; --gold2:#e8c27a; --plum:#6b2d5c; --teal:#1f5f5b; --rust:#b4532a;
  --text:#2b2333; --muted:#6c6276;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:Inter,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--text);background:var(--paper);line-height:1.6;font-size:16px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.1;margin:0}
a{color:inherit}
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.5rem;padding:.7rem 1.5rem;background:rgba(28,21,48,.92);backdrop-filter:blur(8px);color:var(--paper)}
.brand{font-family:var(--serif);font-size:1.4rem;font-weight:700;text-decoration:none;letter-spacing:.1em}
.brand span{color:var(--gold2)}
.links{display:flex;gap:1.1rem;overflow-x:auto;scrollbar-width:none;font-size:.85rem}
.links a{text-decoration:none;opacity:.8;white-space:nowrap}.links a:hover{opacity:1;color:var(--gold2)}
.hero{position:relative;min-height:min(92vh,880px);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--paper);overflow:hidden;
  background:radial-gradient(ellipse at 20% 10%,#4a2a63 0%,transparent 55%),radial-gradient(ellipse at 85% 90%,#1f5f5b 0%,transparent 50%),linear-gradient(160deg,#1c1530,#2a1a3d 60%,#141022)}
.stars{position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 70% 20%,#fff9 50%,transparent 51%),radial-gradient(1.2px 1.2px at 40% 80%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 85% 60%,#fff7 50%,transparent 51%),radial-gradient(1.4px 1.4px at 10% 70%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 55% 50%,#fff6 50%,transparent 51%);background-size:300px 300px;animation:drift 80s linear infinite;opacity:.8}
@keyframes drift{to{background-position:300px 600px}}
.hero-inner{position:relative;max-width:860px;padding:4rem 1.5rem}
.eyebrow{text-transform:uppercase;letter-spacing:.25em;font-size:.72rem;color:var(--gold2);margin:0 0 1.5rem}
.hero h1{font-size:clamp(3rem,9vw,6.5rem);font-weight:700;letter-spacing:-.01em}
.hero h1 em{font-style:italic;color:var(--gold2);font-weight:500}
.logline{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.75rem);font-style:italic;margin:1.8rem auto 1.2rem;max-width:720px;color:#f3e6cc}
.premise{max-width:680px;margin:0 auto;opacity:.85;font-size:1rem}
.route{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:2.2rem 0 1rem;font-family:var(--serif);font-size:1.1rem;flex-wrap:wrap}
.route i{display:block;width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--gold2),transparent);position:relative}
.route i:after{content:"✈";position:absolute;top:-.75rem;left:0;font-style:normal;font-size:.8rem;color:var(--gold2);animation:fly 3s ease-in-out infinite}
@keyframes fly{0%{left:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:36px;opacity:0}}
.disclaimer{font-size:.78rem;opacity:.6;margin-top:1.5rem}
.section{padding:5rem 1.5rem;max-width:1200px;margin:0 auto}
.section.alt{max-width:none;background:var(--paper2)}
.section.alt>*{max-width:1200px;margin-left:auto;margin-right:auto}
.section.ink{max-width:none;background:linear-gradient(160deg,var(--ink),#3b1f4f);color:var(--paper);text-align:center}
.head{text-align:center;margin-bottom:2.8rem}
.head .num{display:inline-block;font-family:var(--serif);color:var(--gold);font-size:1.1rem;letter-spacing:.2em;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);padding:.1rem .8rem;margin-bottom:.8rem}
.head h2{font-size:clamp(2.2rem,5vw,3.4rem)}
.head p{color:var(--muted);max-width:640px;margin:.8rem auto 0}
.ink .head p{color:#d8cde6}
.grid{display:grid;gap:1.4rem}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.cast{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.themes{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.settings{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid.questions{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--card);border-radius:16px;padding:1.6rem;box-shadow:0 1px 2px #0000000d,0 10px 30px -12px #3a1f4a33;border:1px solid #e9dcc3;transition:transform .35s ease,box-shadow .35s ease;position:relative;overflow:hidden}
.card:hover{transform:translateY(-4px);box-shadow:0 2px 4px #0000000d,0 20px 40px -14px #3a1f4a55}
.dir{border-top:5px solid var(--c)}
.dir .tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:var(--c);font-weight:600}
.dir h3{font-size:1.9rem;margin:.4rem 0 .8rem}
.dir .ll{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--ink2);margin:0 0 .8rem}
.dir p{margin:.5rem 0;font-size:.95rem}
.dir .comps{font-size:.8rem;color:var(--muted)}
.avatar{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:1.5rem;font-weight:700;color:#fff;background:var(--c);margin-bottom:.9rem}
.cast h3{font-size:1.6rem}
.role{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--rust);font-weight:600;margin:.2rem 0 .7rem}
.cast p{font-size:.93rem;margin:.4rem 0}
.want{font-size:.85rem;color:var(--muted);border-left:3px solid var(--gold);padding-left:.7rem;margin-top:.8rem}
.inspired{font-size:.75rem;color:var(--teal);margin-top:.8rem;font-style:italic}
.theme .icon{font-size:1.8rem}
.theme h3{font-size:1.45rem;margin:.4rem 0}
.theme p{font-size:.92rem;margin:0}
.sub{text-align:center;font-size:1.8rem;margin:3rem 0 1.2rem}
.motifs{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.motif{background:var(--ink);color:var(--paper);padding:.55rem 1rem;border-radius:999px;font-size:.88rem;cursor:default;transition:background .3s}
.motif:hover{background:var(--plum)}
.motif small{display:block;font-size:.72rem;opacity:.7;max-width:240px}
.progress{display:flex;align-items:center;gap:1rem;max-width:520px!important;margin:0 auto 2.5rem!important}
.bar{flex:1;height:8px;background:#d9c9aa;border-radius:9px;overflow:hidden}
.bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--rust));transition:width .6s}
#progText{font-size:.85rem;color:var(--muted);white-space:nowrap}
.act{margin-bottom:3rem}
.act-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.act-head h3{font-size:2.1rem;color:var(--plum)}
.act-head span{color:var(--muted);font-size:.95rem}
.track{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.2rem;padding-top:1.4rem}
.track:before{content:"";position:absolute;top:.45rem;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--plum),var(--teal))}
.ch{cursor:pointer;padding:1.3rem 1.3rem 1.1rem}
.ch:before{content:"";position:absolute;top:0;left:1.3rem;width:14px;height:14px;border-radius:50%;background:var(--paper2);border:3px solid var(--gold);transform:translateY(-50%)}
.track .ch{overflow:visible}
.ch .n{font-family:var(--serif);font-size:.9rem;color:var(--gold);font-weight:700;letter-spacing:.1em}
.ch h4{font-size:1.35rem;margin:.25rem 0 .5rem}
.ch p{font-size:.88rem;margin:0}
.ch .yr{font-size:.72rem;color:var(--muted);margin-top:.6rem;display:block}
.ch.done{background:#f1f7f2;border-color:#9cc3a7}
.ch.done:after{content:"✓ drafted";position:absolute;top:.8rem;right:1rem;font-size:.7rem;color:var(--teal);font-weight:600}
.setting{padding:0}
.setting .top{height:110px;display:flex;align-items:flex-end;padding:1rem 1.3rem;color:#fff;background:var(--g)}
.setting .top h3{font-size:1.7rem}
.setting .body{padding:1rem 1.3rem 1.3rem}
.setting .coords{font-size:.72rem;letter-spacing:.1em;opacity:.85}
.badge{display:inline-block;font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;padding:.15rem .55rem;border-radius:99px;font-weight:600;margin-bottom:.5rem}
.badge.sure{background:#dcefe6;color:#1f5f5b}.badge.maybe{background:#f6e2cf;color:#9a4520}
.setting p{font-size:.9rem;margin:.3rem 0}
.scenes{list-style:none;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem}
.scenes li{counter-increment:s;background:var(--card);border-radius:12px;padding:1rem 1.2rem 1rem 3.4rem;position:relative;border:1px solid #e9dcc3;font-size:.94rem}
.scenes li:before{content:counter(s,decimal-leading-zero);position:absolute;left:1rem;top:.9rem;font-family:var(--serif);font-weight:700;color:var(--gold);font-size:1.2rem}
.scenes li b{font-family:var(--serif);font-size:1.15rem;display:block;color:var(--ink2)}
.q{border-left:4px solid var(--c,var(--plum))}
.q .cat{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--c,var(--plum));font-weight:600}
.q ul{margin:.6rem 0 0;padding-left:1.1rem;font-size:.92rem}
.q li{margin:.35rem 0}
.quote{max-width:820px;margin:0 auto 3rem;min-height:190px;transition:opacity .6s}
.quote blockquote{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.3rem);font-style:italic;margin:0;line-height:1.3}
.quote blockquote:before{content:"“";color:var(--gold2)}.quote blockquote:after{content:"”";color:var(--gold2)}
.quote figcaption{margin-top:1rem;color:var(--gold2);font-size:.9rem;letter-spacing:.05em}
.quote.fade{opacity:0}
.btn{font:600 .95rem var(--sans);border:0;border-radius:999px;padding:.85rem 1.6rem;background:linear-gradient(135deg,var(--gold),var(--rust));color:#fff;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 8px 20px -8px #b4532a99}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--plum);border:1.5px solid var(--plum);box-shadow:none}
.spark-out{font-family:var(--serif);font-size:1.45rem;max-width:720px;margin:1.4rem auto 0;min-height:4rem;color:#f3e6cc}
.spark-out.pop{animation:pop .5s ease}
@keyframes pop{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
.notebook{display:grid;grid-template-columns:minmax(280px,1fr) 1.4fr;gap:1.6rem}
@media(max-width:820px){.notebook{grid-template-columns:1fr}}
#noteForm{background:var(--card);padding:1.4rem;border-radius:16px;border:1px solid #e9dcc3;display:flex;flex-direction:column;gap:.7rem;align-self:start;position:sticky;top:4.5rem}
#noteForm input,#noteForm select,#noteForm textarea{font:inherit;padding:.7rem .85rem;border:1px solid #d9c9aa;border-radius:10px;background:#fff;color:var(--text)}
#noteForm textarea{resize:vertical;font-family:var(--serif);font-size:1.1rem}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
#noteCount{font-size:.8rem;color:var(--muted)}
.notes-list{display:grid;gap:.9rem;align-content:start}
.note{background:#fffdf6;border-radius:12px;padding:1rem 1.2rem;border:1px solid #eadfc8;box-shadow:0 6px 18px -12px #3a1f4a44;animation:pop .4s}
.note .meta{display:flex;justify-content:space-between;font-size:.74rem;color:var(--muted);gap:.5rem}
.note h4{font-size:1.25rem;margin:.2rem 0}
.note p{white-space:pre-wrap;margin:.3rem 0 0;font-family:var(--serif);font-size:1.08rem}
.note .del{background:none;border:0;color:var(--rust);cursor:pointer;font-size:.75rem}
.empty{color:var(--muted);font-style:italic;text-align:center;padding:2rem;border:2px dashed #d9c9aa;border-radius:12px}
.foot{text-align:center;padding:2.5rem 1rem;background:var(--ink);color:#cfc3dd;font-size:.9rem}
.foot .small{font-size:.75rem;opacity:.6}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
@media(max-width:600px){.nav{padding:.6rem 1rem;gap:1rem}.section{padding:3.5rem 1rem}.scenes{grid-template-columns:1fr}}