/* The Creative Collective: masterclass sales page. Tokens, buttons, HUD and footer come from ../styles.css */
.course{--paper:#F6F1E8;--paper-ink:#20272A;--pen:#E0592A}

/* ---------- hero: the script page ---------- */
.c-hero{position:relative;background:radial-gradient(ellipse 70% 60% at 78% 45%,rgba(255,115,61,.12),transparent 70%),var(--slate)}
.c-hero-pin{min-height:100svh;display:flex;align-items:center;padding-block:calc(var(--hud-h) + 40px) 60px;overflow:hidden}
.c-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,90px);align-items:center}
.c-title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(76px,10.6vw,196px);line-height:.84}
.c-title .line{display:block;overflow:hidden;padding-bottom:.02em}
.c-title .line > span{display:block}
.c-title em{font-style:normal;color:var(--ember)}
.c-lede{margin-top:clamp(24px,3vw,40px);font-size:clamp(19px,1.55vw,23px);line-height:1.45;font-weight:300;color:var(--ink-2);max-width:44ch}
.c-lede em{color:var(--projection)}
.c-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.c-open{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--haze)}
.c-open strong{color:var(--projection);font-weight:500}
.c-dot{width:7px;height:7px;border-radius:50%;background:var(--ember);animation:rec 1.6s infinite}
.c-count{color:var(--ember);font-variant-numeric:tabular-nums}

.script{position:relative;justify-self:center;width:min(100%,520px);aspect-ratio:8.5/11;perspective:1400px}
.script-sheet{position:absolute;inset:0;background:var(--paper);color:var(--paper-ink);padding:9% 10% 9% 14%;font-family:var(--mono);font-size:clamp(10.5px,1.02vw,14px);line-height:1.6;box-shadow:0 40px 80px -30px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.04);transform-origin:50% 100%;will-change:transform}
.script-sheet::before{content:"";position:absolute;left:5.5%;top:6%;bottom:6%;width:0;border-left:2px dotted rgba(32,39,42,.18)}
.script-back{z-index:-1;transform:rotate(4deg) translate(4%,1%);background:#E9E2D6}
.script-back2{z-index:-2;transform:rotate(-5deg) translate(-3%,2%);background:#DDD5C7}
.sp-no{position:absolute;right:8%;top:5%;color:rgba(32,39,42,.55)}
.sp-slug{font-weight:500;margin-bottom:1.2em}
.sp-act{margin-bottom:1.2em}
.sp-char{margin-left:38%;margin-bottom:0}
.sp-dia{margin:0 16% 1.2em 20%}
.sp-type{background:linear-gradient(var(--paper-ink),var(--paper-ink)) 0 100%/0 0 no-repeat}
.script .sp-type{color:transparent;background-clip:text;-webkit-background-clip:text;background-image:linear-gradient(90deg,var(--paper-ink) var(--t,0%),rgba(32,39,42,.08) var(--t,0%));background-size:100% 100%}
.sp-mark{position:absolute;fill:none;stroke:var(--pen);stroke-width:3;stroke-linecap:round;overflow:visible}
.sp-mark path{stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.sp-dia{position:relative}
.sp-under{left:-2%;bottom:-.35em;width:104%;height:.6em}
.sp-circle{left:-12%;top:-45%;width:124%;height:190%}
.sp-note{position:absolute;font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.5vw,21px);line-height:1.1;color:var(--pen);opacity:0;white-space:nowrap}
.sp-note-1{left:104%;top:-.4em;transform:rotate(-8deg)}
.sp-note-2{left:-8%;top:calc(100% + 1.2em);transform:rotate(-3deg)}

/* ---------- room ---------- */
.room{position:relative;background:var(--deep);padding-block:clamp(110px,16vh,190px);overflow:hidden;isolation:isolate}
.room-media{position:absolute;inset:0;z-index:-1;clip-path:inset(18% 12% 18% 12%)}
.room-img{position:absolute;inset:-10% 0;width:100%;height:120%;max-width:none;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.42)}
.room-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--deep) 0%,rgba(21,26,28,.55) 30%,rgba(21,26,28,.7) 70%,var(--deep) 100%)}
.room-title{max-width:15ch}
.room-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(48px,6vw,90px);border-top:1px solid var(--line)}
.stat{padding-top:24px;display:grid;gap:8px}
.stat-n{font-family:var(--display);font-size:clamp(90px,12vw,210px);line-height:.8;color:var(--ember);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.08em}
.stat-n i{font-style:normal;font-size:.28em;color:var(--projection);letter-spacing:.04em}
.stat-l{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);max-width:26ch}
.room-body{margin-top:clamp(40px,5vw,64px);font-size:clamp(19px,1.5vw,22px)}

/* ---------- errors ---------- */
.errors{background:var(--slate);position:relative}
.errors-pin{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3.5vh,40px);padding-block:calc(var(--hud-h) + 24px) 40px;overflow:hidden}
.errors-head .slate-line{margin-bottom:16px}
.errors-count{color:var(--ink);font-variant-numeric:tabular-nums}
.errors-track{display:flex;gap:clamp(16px,2vw,28px);padding-inline:var(--gutter);will-change:transform}
.err{flex:0 0 min(80vw,860px);display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,48px);align-items:stretch}
.err-no{font-family:var(--display);font-size:clamp(110px,14vw,240px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(243,238,230,.5)}
.err-page{background:var(--paper);color:var(--paper-ink);padding:clamp(26px,3.6vw,52px);min-height:clamp(360px,50vh,520px);display:flex;flex-direction:column;gap:18px;position:relative;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.err-page::before{content:"";position:absolute;left:clamp(12px,1.6vw,22px);top:24px;bottom:24px;border-left:2px dotted rgba(32,39,42,.16)}
.err-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--pen)}
.err h3{font-family:var(--display);font-weight:400;font-size:clamp(52px,6vw,104px);line-height:.88;text-transform:uppercase}
.err-word{position:relative;display:inline}
.err-word i{position:absolute;left:-3%;right:-3%;bottom:.04em;height:.12em;background:var(--ember);transform-origin:0 50%;transform:scaleX(0);z-index:-1;opacity:.9}
.err-word{z-index:0;isolation:isolate}
.err-page > p:not(.err-kicker):not(.err-margin){font-size:clamp(18px,1.45vw,22px);line-height:1.45;color:#4A5357;max-width:46ch}
.err-page em{color:var(--paper-ink)}
.err-margin{margin-top:auto;font-family:var(--serif);font-style:italic;font-size:clamp(22px,2vw,30px);color:var(--pen);transform:rotate(-2deg);transform-origin:0 50%}
.errors-bar{height:2px;margin-inline:var(--gutter);background:var(--line)}
.errors-bar span{display:block;height:100%;background:var(--ember);transform-origin:0 50%;transform:scaleX(.2)}
.errors.is-static .errors-track{flex-direction:column}
.errors.is-static .err{flex:auto}
.errors.is-static .errors-bar{display:none}

/* ---------- teachers ---------- */
.teachers{background:var(--deep);padding-block:clamp(90px,14vh,170px);overflow:hidden}
.teachers-head .display-lg{max-width:13ch}
.teachers-head .lede{margin-top:28px;color:var(--ink-2);max-width:42ch}
.t-reel{margin-block:clamp(48px,7vw,100px);border-block:1px solid var(--line);padding-block:12px;white-space:nowrap;overflow:hidden;transform:rotate(-2deg)}
.t-track{display:inline-flex;will-change:transform}
.t-track span{font-family:var(--display);font-size:clamp(56px,8vw,128px);line-height:1;text-transform:uppercase;padding-inline:.35em;display:inline-flex;align-items:center;gap:.35em}
.t-track span::after{content:"";width:.18em;height:.18em;border-radius:50%;background:var(--ember);margin-left:.35em}
.t-track span.o{color:transparent;-webkit-text-stroke:1.5px rgba(243,238,230,.55)}
.teachers-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px)}
.teacher{margin:0;display:grid;grid-template-columns:.8fr 1fr;gap:clamp(18px,2vw,32px);align-items:end}
.teacher-frame{aspect-ratio:4/5;position:relative;overflow:hidden;border:1px solid var(--line);background:var(--reel)}
.teacher-frame img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.08);transition:filter .8s var(--ease)}
.teacher:hover .teacher-frame img{filter:none}
.teacher figcaption{display:grid;gap:8px}
.teacher strong{font-family:var(--display);font-weight:400;font-size:clamp(36px,3.4vw,56px);text-transform:uppercase;line-height:.95}
.teacher figcaption span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}
.teacher figcaption p{font-size:17px;line-height:1.5;color:var(--ink-2)}
.teacher em{color:var(--projection)}

/* ---------- inside ---------- */
.inside{background:var(--slate);padding-block:clamp(90px,14vh,170px);border-top:1px solid var(--line)}
.inside-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,110px);align-items:start}
.inside-copy{display:grid;gap:26px;position:sticky;top:calc(var(--hud-h) + 40px)}
.inside-list{list-style:none;margin:0;padding:0;display:grid}
.inside-list li{padding:14px 0 14px 34px;border-bottom:1px solid var(--line);position:relative;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.inside-list li::before{content:"";position:absolute;left:0;top:50%;width:18px;height:1.5px;background:var(--ember)}
.beats{list-style:none;margin:0;padding:0 0 0 34px;position:relative;display:grid;gap:clamp(26px,3.6vw,44px)}
.beats-line{position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--line)}
.beats-line span{position:absolute;inset:0;background:var(--ember);transform-origin:50% 0;transform:scaleY(0)}
.beats li{display:grid;grid-template-columns:72px 1fr;gap:18px;position:relative;opacity:.35;transition:opacity .4s}
.beats li.on{opacity:1}
.beats li::before{content:"";position:absolute;left:-34px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--slate);border:2px solid var(--ember);transition:background .3s}
.beats li.on::before{background:var(--ember)}
.b-tc{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--ember);padding-top:4px;font-variant-numeric:tabular-nums}
.beats h3{font-family:var(--display);font-weight:400;font-size:clamp(34px,3.2vw,52px);line-height:.92;text-transform:uppercase}
.beats p{font-size:17px;line-height:1.45;color:var(--ink-2);margin-top:6px}
.beats em{color:var(--projection)}

/* ---------- for you ---------- */
.foryou{background:var(--projection);color:var(--slate);padding-block:clamp(90px,13vh,160px)}
.foryou .slate-line{color:#5B6468}
.foryou .slate-line b{color:var(--ember-deep)}
.foryou .slate-line i{background:rgba(34,42,45,.2)}
.foryou-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,100px);align-items:start}
.foryou-big{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.2vw,68px);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.foryou-big .w{opacity:.18}
.foryou-list{list-style:none;margin:0;padding:0;display:grid}
.foryou-list li{padding:24px 0;border-bottom:1.5px solid rgba(34,42,45,.2);display:grid;gap:6px}
.foryou-list li:first-child{border-top:1.5px solid rgba(34,42,45,.2)}
.foryou-list h3{font-family:var(--display);font-weight:400;font-size:clamp(40px,3.8vw,64px);line-height:.9;text-transform:uppercase}
.foryou-list p{font-size:18px;line-height:1.45;color:#4A5357}

/* ---------- enroll ---------- */
.enroll{background:var(--ember);color:var(--slate);padding-block:clamp(90px,13vh,160px);position:relative;overflow:hidden}
.enroll .slate-line{color:rgba(34,42,45,.75)}
.enroll .slate-line b{color:var(--slate)}
.enroll .slate-line i{background:rgba(34,42,45,.3)}
.enroll-date{display:flex;align-items:flex-end;gap:.05em;font-family:var(--display);text-transform:uppercase;line-height:.78;transform-origin:0 100%}
.ed-m{font-size:clamp(80px,13vw,240px)}
.ed-d{font-size:clamp(170px,30vw,560px);font-variant-numeric:tabular-nums}
.enroll-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,100px);margin-top:clamp(36px,5vw,64px);padding-top:clamp(28px,3vw,40px);border-top:1.5px solid rgba(34,42,45,.35);align-items:start}
.enroll-title{font-family:var(--display);font-weight:400;font-size:clamp(48px,5.4vw,92px);line-height:.9;text-transform:uppercase}
.enroll-title em{font-style:normal;color:var(--projection)}
.enroll .body{color:rgba(34,42,45,.85);margin-top:20px}
.enroll .body em{color:var(--slate)}
.enroll-count{margin-top:22px;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.enroll-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
.enroll .field label{color:rgba(34,42,45,.8)}
.enroll .field input{background:rgba(243,238,230,.92);color:var(--slate);border-color:transparent}
.enroll .field input::placeholder{color:#7C8487}
.enroll .field input:focus{border-color:var(--slate)}
.field-full{grid-column:1/-1}
.enroll-form .btn{grid-column:1/-1;justify-self:start;--bg:var(--slate);--fg:var(--projection);--hover:var(--deep)}
.enroll-form .btn:hover{color:var(--projection)}
.enroll .form-status{color:var(--slate)}

/* ---------- faq ---------- */
.faq{background:var(--deep);padding-block:clamp(90px,13vh,160px)}
.faq-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,6vw,100px);align-items:start}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:first-child{border-top:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:24px 0;font-family:var(--display);font-size:clamp(28px,2.6vw,42px);line-height:1;text-transform:uppercase}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-family:var(--mono);font-size:22px;color:var(--ember);transition:transform .35s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover{color:var(--ember)}
.faq-list details p{padding:0 0 26px;color:var(--ink-2);font-size:18px;line-height:1.5;max-width:56ch}
.faq-list a{color:var(--ember)}
.faq-list em{color:var(--projection)}

.c-end .end-card{margin-top:0}
.c-end-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .teachers-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .c-hero-grid,.inside-grid,.foryou-grid,.enroll-grid,.faq-grid{grid-template-columns:1fr}
  .script{width:min(100%,440px)}
  .inside-copy{position:static}
  .room-stats{grid-template-columns:1fr}
  .err{grid-template-columns:1fr;flex-basis:86vw;gap:0}
  .err-no{font-size:90px;margin-bottom:-.12em;position:relative;z-index:1}
  .enroll-form{grid-template-columns:1fr}
}
@media (max-width:560px){
  .teacher{grid-template-columns:1fr}
  .c-ctas .btn{width:100%}
  .beats li{grid-template-columns:1fr;gap:4px}
}
.sp-dia + .sp-act{margin-top:2.6em}
html{overflow-x:clip}

/* ---------- contact sheet (Oct 22 stills) ---------- */
.sheet{background:var(--deep);padding-block:clamp(70px,10vh,120px);overflow:hidden}
.sheet-head .slate-line{margin-bottom:28px}
.sheet-strip{display:flex;gap:clamp(12px,1.6vw,22px);padding-inline:var(--gutter);will-change:transform;width:max-content}
.still{margin:0;flex:0 0 auto;display:grid;gap:10px;background:#0E1213;padding:12px 12px 14px;border:1px solid var(--line);overflow:hidden}
.still img{display:block;height:clamp(240px,38vw,460px);width:auto;max-width:none;filter:contrast(1.04)}
.still figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--haze)}
.still:nth-child(odd){transform:translateY(18px)}