/* =========================================================
   SOLETHU EDITORS — public site
   Chapters 01–08, credits, and the door into The Suite.
   Requires css/tokens.css to be loaded first.
   ========================================================= */

/* ---------- CH01 cold open ---------- */
#open{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--black);position:relative;overflow:hidden}
#hero{position:absolute;inset:0;background:url('../assets/hero.jpg');background-size:cover;background-position:center;opacity:0;transition:opacity 2.4s ease}
#open.lit #hero{opacity:.5}
#openline{position:relative;font-weight:300;text-align:center;padding:0 6vw;z-index:2}
#openline .word{font-size:clamp(30px,5.4vw,56px);color:#F2EEE7;opacity:0;transition:opacity 1.3s ease}
#openline .word.in{opacity:1}
#openline .idsub{display:block;margin-top:34px;color:#8F8A82;opacity:0;transition:opacity 1.6s ease}
#openline .idsub.in{opacity:1}

/* ---------- timeline nav ---------- */
#tl{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:clamp(16px,3.2vw,34px);
padding:16px 0 18px;font-family:var(--machine);font-size:11px;letter-spacing:.2em;color:var(--pencil);
background:linear-gradient(transparent, rgba(250,250,248,.92) 40%);z-index:40;opacity:0;pointer-events:none;transition:opacity .5s steps(2,end)}
#tl.on{opacity:1;pointer-events:auto}
#tl.hide{opacity:0;pointer-events:none}
#tl span{cursor:pointer;position:relative;padding-top:10px}
#tl span::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:1px;height:6px;background:var(--hairline)}
#tl span.on{color:var(--ink)}
#tl span.on::before{background:var(--ink);height:9px}
#tl span.locked{color:#C9C6BF;cursor:default}
#tl.dark{background:linear-gradient(transparent, rgba(5,5,5,.9) 40%);color:#59554F}
#tl.dark span.on{color:var(--studio-ink)}
#tl.dark span.on::before{background:var(--studio-ink)}
#tl.dark span.locked{color:#2E2C2A}

/* ---------- CH02 story architect ---------- */
#architect .intro{font-weight:300;font-size:clamp(18px,2vw,20px);color:var(--pencil);max-width:560px;margin-bottom:64px}
#architect .closeline{font-weight:300;font-style:italic;font-size:clamp(20px,2.6vw,26px);line-height:1.55;margin-top:56px;max-width:600px}

/* ---------- CH03 manifesto / editorial philosophy ---------- */
.beat{min-height:88vh;display:flex;align-items:center;justify-content:center;position:relative}
.aph{font-weight:300;text-align:center;font-size:clamp(23px,3.4vw,34px);line-height:1.5;padding:0 10vw;max-width:900px;
-webkit-user-select:none;user-select:none;cursor:default;transition:opacity .12s steps(1,end)}
.aph strong{font-weight:400}
.note{position:absolute;left:4%;top:50%;transform:translateY(-50%);width:24%;max-width:250px;
font-style:italic;font-weight:300;font-size:14px;line-height:1.55;color:var(--pencil);
border-left:1px solid var(--hairline);padding-left:13px;opacity:0;transition:opacity .12s steps(1,end);pointer-events:none}
.beat.held .note{opacity:1}
.beat.held .aph{opacity:.32}
@media(max-width:760px){.note{position:static;transform:none;width:auto;max-width:420px;margin:26px auto 0;text-align:left}
.beat{flex-direction:column}}

/* ---------- CH04 about ---------- */
.tlband{width:100%;height:120px;object-fit:cover;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.takes{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:56px 0 8px}
.take{position:relative;cursor:default;background:#EFEDE8}
.take img{width:100%;aspect-ratio:1/1;object-fit:cover}
.take .lab{display:block;text-align:center;padding:9px 0 0}
.take.circled{cursor:pointer}
.take.circled .lab{color:var(--ink);font-weight:500}
.take.circled svg{position:absolute;top:-5%;left:-5%;width:110%;height:110%;pointer-events:none}
.take.silent{cursor:default}
.takeopen{border-left:1px solid var(--ink);padding:6px 0 6px 22px;margin:40px 0 0;display:none}
.takeopen.on{display:block}
.takeopen .m{display:block;margin-bottom:12px}
.takeopen p{font-size:18px;font-weight:300}
.aboutclose{margin-top:70px;font-weight:300;font-size:clamp(20px,2.6vw,26px);line-height:1.55}
@media(max-width:640px){.takes{grid-template-columns:repeat(5,1fr);gap:6px}.take .lab{font-size:8px;letter-spacing:.08em}}

/* ---------- CH05 selected work ---------- */
#work .intro{font-weight:300;font-size:clamp(18px,2vw,20px);color:var(--pencil);max-width:560px;margin-bottom:8px}
#work .row .t{font-size:20px}
#work .transitline{margin-top:56px;font-weight:300;font-style:italic;font-size:clamp(19px,2.2vw,22px);color:var(--pencil)}

/* ---------- CH06 the screening ---------- */
#screening{position:relative;background:var(--black);color:var(--studio-ink);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:0 26px}
#screening .slatewrap{position:absolute;top:0;left:0;right:0;padding-top:110px}
#screening .slate{border-top-color:#2A2826;color:#59554F}
#run{font-family:var(--machine);font-size:13px;letter-spacing:.42em;text-transform:uppercase;color:var(--studio-ink);
background:none;border:1px solid #2E2C2A;padding:16px 34px 16px 44px;cursor:pointer}
#run:hover{border-color:#59554F}
#proj{position:fixed;inset:0;background:var(--black);z-index:80;display:none;align-items:center;justify-content:center;text-align:center}
#proj.on{display:flex}
#proj .lead{font-family:var(--voice);font-weight:300;font-size:clamp(60px,12vw,130px);color:#F2EEE7}
#proj .hslate{font-family:var(--machine);font-size:clamp(11px,1.6vw,14px);letter-spacing:.2em;text-transform:uppercase;line-height:2.5;color:var(--studio-ink)}
#proj .hslate b{color:#F2EEE7;font-weight:500;font-size:1.25em}
#proj video{max-width:92vw;max-height:80vh}
#after{display:none;text-align:center}
#after.on{display:block}
#after .line{font-style:italic;font-weight:300;font-size:clamp(20px,2.8vw,28px);color:#CFC9BF}
#after .sub{display:block;margin-top:26px;color:#59554F}

/* ---------- CH07 working together ---------- */
#together .intro{font-weight:300;font-size:clamp(18px,2vw,20px);color:var(--pencil);max-width:560px;margin-bottom:8px}
#together .row .meta{color:var(--pencil)}
#together .closeline{margin-top:56px;font-weight:300;font-style:italic;font-size:clamp(19px,2.2vw,22px);color:var(--pencil)}

/* ---------- CH08 contact ---------- */
#contact p{font-weight:300;margin-bottom:1.6em}

/* ---------- credits ---------- */
#credits{background:var(--black);text-align:center;padding:24vh 26px 0}
#credits img{margin:0 auto 9vh;width:120px;opacity:.9;filter:none}
#credits .m{display:block;color:#59554F;margin-bottom:9px}
.crow{font-weight:300;font-size:18px;color:#B9B3A9;margin-bottom:48px}
.endcard{font-style:italic;font-weight:300;font-size:clamp(23px,3.2vw,32px);color:#F2EEE7;margin-top:8vh}
#pmark a{color:#6E6A64;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
#pmark a:hover{color:#B9B3A9;border-color:#59554F}
#tail{height:40vh;background:var(--black)}

/* ---------- the door — the threshold into The Suite ---------- */
#door{background:var(--black);color:var(--studio-ink);text-align:center;padding:18vh 26px 22vh}
#door .sslate{color:#6E675C}
#door .sslate span{color:#6E675C}
#door .doortitle{font-weight:300;font-size:clamp(32px,4.6vw,50px);line-height:1.15;color:#F2EEE7;margin-bottom:30px}
#door .doortitle em{font-style:italic}
#door .doorlede{font-weight:300;font-size:clamp(17px,2vw,19px);color:#B9B3A9;max-width:520px;margin:0 auto 54px}
.doorcta{display:inline-block;font-family:var(--machine);font-size:13px;letter-spacing:.3em;text-transform:uppercase;
  color:#F2EEE7;text-decoration:none;border:1px solid #3A3733;padding:18px 40px;background:none;cursor:pointer;transition:border-color .25s ease,background .25s ease}
.doorcta:hover{border-color:#8F8A82;background:rgba(255,255,255,.02)}
.doorcats{display:flex;flex-direction:column;align-items:center;gap:26px}
.doorenter{font-family:var(--machine);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8F8A82;
  text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.doorenter:hover{color:#F2EEE7;border-color:#8F8A82}

/* ---------- request access modal ---------- */
#ramodal{position:fixed;inset:0;background:rgba(5,5,5,.86);z-index:85;display:none;align-items:center;justify-content:center;padding:26px}
#ramodal.on{display:flex}
#rainner{position:relative;background:var(--black);border:1px solid #3A3733;max-width:480px;width:100%;max-height:88vh;overflow-y:auto;padding:48px 40px}
#rainner .m{display:block;margin-bottom:16px;color:#8F8A82}
#raclose{position:absolute;top:16px;right:16px;background:none;border:none;color:#8F8A82;font-size:22px;line-height:1;cursor:pointer;padding:6px}
#raclose:hover{color:#F2EEE7}
.ralede{font-weight:300;font-size:16px;line-height:1.55;color:#B9B3A9;margin-bottom:32px}
#raform label{display:block;font-family:var(--machine);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8F8A82;margin-bottom:18px}
#raform .opt{text-transform:none;letter-spacing:0;font-style:italic}
#raform input,#raform select,#raform textarea{display:block;width:100%;margin-top:8px;background:none;border:none;border-bottom:1px solid #3A3733;
  color:#F2EEE7;font-family:var(--voice);font-size:16px;padding:8px 0;font-weight:300}
#raform input:focus,#raform select:focus,#raform textarea:focus{outline:none;border-color:#8F8A82}
#raform select{color:#F2EEE7}
#raform select option{background:var(--black)}
#raform textarea{resize:vertical;line-height:1.5}
#rasubmit{margin-top:10px;font-family:var(--machine);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--black);
  background:#F2EEE7;border:none;padding:14px 30px;cursor:pointer;transition:opacity .2s ease}
#rasubmit:hover{opacity:.85}
#rasubmit:disabled{opacity:.5;cursor:default}
#rastate{margin-top:22px;font-weight:300;font-size:15px;line-height:1.5;color:#B9B3A9}
#rastate:empty{display:none}
#rastate a{color:#F2EEE7}

@media (prefers-reduced-motion:reduce){#cut,#tl{transition:none}}