/* ══════════════════════════════════════════════════════════════
   ABOUT — production notes. Builds on main.css.
   ══════════════════════════════════════════════════════════════ */
.page-about{overflow-x:hidden}
.bar__nav a.on{color:#fff}
.bar__nav a.on::after{left:0;right:0}
.menu__inner a.on{color:var(--pink);opacity:1}

/* ─────────── MASTHEAD ───────────
   Not the home hero and not the call sheet: a slate leaning on
   the top-left of the page, with the notes typed beside it. */
.pnotes{position:relative;overflow:hidden;
  padding:clamp(128px,19vh,196px) var(--pad) clamp(52px,8vh,96px)}
.pnotes::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(56% 48% at 88% 6%,rgba(139,43,226,.22),transparent 66%),
             radial-gradient(48% 44% at 0% 86%,rgba(224,0,124,.14),transparent 70%)}
.pnotes__prop{position:absolute;right:-14vw;top:8%;width:min(58vw,720px);opacity:.34;pointer-events:none;
  filter:blur(1px) drop-shadow(0 40px 90px rgba(139,43,226,.4));
  animation:driftAbout 20s ease-in-out infinite}
@keyframes driftAbout{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4%) rotate(3deg)}}
.pnotes__inner{position:relative;z-index:3;max-width:1180px}

/* the clapperboard: hinged arm over a striped body, CSS only */
.clap{position:relative;width:clamp(132px,15vw,206px);height:clamp(52px,6vw,80px);
  margin-bottom:clamp(26px,4vh,42px)}
.clap__arm,.clap__body{position:absolute;left:0;right:0;border-radius:3px;
  background:repeating-linear-gradient(66deg,#fff 0 16px,#0b0410 16px 32px)}
.clap__arm{top:0;height:32%;transform-origin:left bottom;
  background:repeating-linear-gradient(66deg,#fff 0 16px,#0b0410 16px 32px);
  animation:clapshut 5.5s var(--ease) infinite}
.clap__body{bottom:0;height:52%;
  background:repeating-linear-gradient(66deg,#fff 0 16px,#0b0410 16px 32px);opacity:.86}
@keyframes clapshut{
  0%,64%{transform:rotate(0)}
  72%{transform:rotate(-22deg)}
  80%,100%{transform:rotate(0)}
}
@media(prefers-reduced-motion:reduce){.clap__arm{animation:none}}

.pnotes__title{font-family:var(--display);line-height:1.02;letter-spacing:-.025em;
  margin:clamp(22px,3.6vh,40px) 0 clamp(20px,3vh,34px);
  font-size:min(clamp(32px,6.2vw,92px),13.5vh)}
.pnotes__thin{display:block;font-weight:100;color:rgba(255,255,255,.72)}
.pnotes__bold{display:block;font-weight:700}
.pnotes__bold em{font-family:var(--body);font-weight:900;font-style:italic;
  background:linear-gradient(100deg,var(--pink),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
/* entrance, mirroring the call sheet's */
.pnotes__title > span{opacity:0;transform:translateY(18px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.pnotes__title > span.in{opacity:1;transform:none}
html:not(.js) .pnotes__title > span{opacity:1;transform:none}

.pnotes__lead{max-width:62ch;font-size:clamp(14px,1.55vw,19px);line-height:1.8;color:rgba(255,255,255,.82)}

/* spec strip — the technical block on a production note */
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:clamp(34px,5vh,58px);border-top:1px solid var(--hair)}
.specs__cell{padding:clamp(16px,2.2vh,22px) clamp(16px,2vw,26px) clamp(16px,2.2vh,22px) 0;
  border-bottom:1px solid var(--hair)}
.specs__cell + .specs__cell{box-shadow:inset 1px 0 0 var(--hair);padding-left:clamp(16px,2vw,26px)}
.specs dt{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-bottom:9px}
.specs dd{font-size:clamp(12.5px,1.3vw,15px);color:rgba(255,255,255,.9);line-height:1.55}
.specs dd i{font-style:normal;color:var(--pink)}
@media(max-width:980px){.specs{grid-template-columns:repeat(2,1fr)}
  .specs__cell:nth-child(odd){box-shadow:none;padding-left:0}}
@media(max-width:560px){.specs{grid-template-columns:1fr}
  .specs__cell{box-shadow:none!important;padding-left:0!important}}

.pnotes__cue{display:inline-flex;align-items:center;gap:14px;margin-top:clamp(24px,3.6vh,38px);
  font-size:9.5px;letter-spacing:.26em;color:var(--mute);transition:color .3s}
.pnotes__cue:hover{color:#fff}
.pnotes__cueline{width:46px;height:1px;background:var(--pink);transform-origin:left;
  animation:sweep 2s var(--ease) infinite}

/* ─────────── LOGLINE ─────────── */
.logline{max-width:min(20ch,1100px);margin:0 auto;text-align:center;
  font-family:var(--display);font-weight:100;letter-spacing:-.015em;
  font-size:clamp(24px,4.6vw,62px);line-height:1.22}
.logline .pink{font-weight:700}

/* ─────────── STATS ─────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:980px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.stats{grid-template-columns:1fr}}
.stat{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--hair);border-radius:18px;
  padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:12px;
  transition:box-shadow .4s,transform .4s var(--ease)}
.stat:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,30,142,.45)}
.stat__n{font-family:var(--display);font-weight:700;line-height:.9;letter-spacing:-.03em;
  font-size:clamp(52px,7.4vw,104px);
  background:linear-gradient(120deg,#fff 30%,rgba(255,255,255,.55));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat:hover .stat__n{background:linear-gradient(100deg,var(--pink),var(--violet));
  -webkit-background-clip:text;background-clip:text}
.stat__label{font-size:clamp(12px,1.3vw,14.5px);color:var(--mute);margin-top:auto;line-height:1.6}

/* ─────────── SHOOTING SCHEDULE ─────────── */
.sched{list-style:none;max-width:1080px;margin:0 auto;position:relative}
.sched::before{content:'';position:absolute;left:clamp(24px,3.4vw,44px);top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,transparent,var(--hair) 8%,var(--hair) 92%,transparent)}
@media(max-width:760px){.sched::before{display:none}}
.sched__row{position:relative;display:grid;
  grid-template-columns:clamp(56px,7vw,92px) 1fr;gap:clamp(18px,3vw,44px);
  padding:clamp(24px,3.6vh,38px) 0;border-bottom:1px solid var(--hair)}
.sched__row:last-of-type{border-bottom:0}
.sched__n{position:relative;z-index:2;font-size:10px;letter-spacing:.24em;color:var(--pink);
  padding-top:.55em}
.sched__n::before{content:'';position:absolute;left:clamp(22px,3.3vw,42px);top:.5em;
  width:7px;height:7px;border-radius:50%;background:var(--ink);
  box-shadow:0 0 0 1px var(--hair);transition:background .4s,box-shadow .4s}
@media(max-width:760px){.sched__n::before{display:none}}
.sched__row.in .sched__n::before{background:var(--pink);box-shadow:0 0 0 4px rgba(255,30,142,.18)}
.sched__body h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(23px,3.4vw,46px);margin-bottom:12px}
.sched__body p{max-width:62ch;color:var(--mute);font-size:clamp(13px,1.4vw,16px);line-height:1.8}
.sched__row--now .sched__body h3{color:var(--pink)}
.sched__foot{text-align:center;margin-top:clamp(40px,6vh,72px);
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.14;
  font-size:clamp(22px,4vw,54px)}

/* ─────────── DEPARTMENTS ─────────── */
.depts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:980px){.depts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.depts{grid-template-columns:1fr}}
.dept{position:relative;isolation:isolate;overflow:hidden;
  background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--hair);border-radius:18px;
  padding:clamp(24px,2.8vw,36px);min-height:clamp(190px,22vh,240px);
  display:flex;flex-direction:column;gap:10px;
  transition:box-shadow .4s,transform .4s var(--ease)}
.dept::before{content:'';position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s;
  background:linear-gradient(150deg,rgba(255,30,142,.14),rgba(139,43,226,.06))}
.dept:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,30,142,.45)}
.dept:hover::before{opacity:1}
.dept__no{font-size:10px;letter-spacing:.24em;color:var(--mute);transition:color .3s}
.dept:hover .dept__no{color:var(--pink)}
.dept h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1;
  font-size:clamp(20px,2.3vw,31px)}
.dept__do{font-size:clamp(12px,1.25vw,14px);color:rgba(255,255,255,.86)}
.dept__note{font-size:clamp(11.5px,1.2vw,13.5px);color:var(--mute);line-height:1.65;margin-top:auto}

/* the pipeline reuses main.css, but there is no SVG beam layer on this
   page — so the text arrows have to come back */
.crew__pipe--about em{opacity:1}

.depts__roof{text-align:center;font-size:clamp(13px,1.6vw,18px);color:rgba(255,255,255,.9)}

/* ─────────── HOUSE RULES ─────────── */
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
  margin-bottom:clamp(40px,6vh,72px)}
@media(max-width:820px){.rules{grid-template-columns:1fr}}
.rule{border-radius:18px;box-shadow:inset 0 0 0 1px var(--hair);background:var(--ink-2);
  padding:clamp(24px,2.8vw,36px);display:grid;gap:7px;
  transition:box-shadow .4s,transform .4s var(--ease)}
.rule:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(255,30,142,.45)}
.rule__x,.rule__y{font-size:9.5px;letter-spacing:.26em}
.rule__x{color:rgba(255,255,255,.34)}
.rule__y{color:var(--pink);margin-top:14px}
.rule__dead{font-family:var(--display);font-weight:100;font-size:clamp(17px,2.1vw,27px);
  color:rgba(255,255,255,.36);text-decoration:line-through;
  text-decoration-color:rgba(255,30,142,.6)}
.rule__live{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(18px,2.2vw,29px);line-height:1.15}

.traits--about{margin:0}

/* ─────────── THE FOUNDERS ───────────
   The portraits are background-removed cut-outs, so the card has to
   supply the set: a violet key light behind the head, a pink floor
   glow at the feet, and a scrim that dissolves the crop at the bottom
   instead of slicing the figure off with a hard edge. */
.founders{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.founders{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.founders{grid-template-columns:1fr;max-width:340px;margin-inline:auto}}

.founder{display:flex;flex-direction:column}
.founder__frame{position:relative;isolation:isolate;overflow:hidden;
  aspect-ratio:4/5;border-radius:18px;
  background:radial-gradient(58% 44% at 50% 24%,rgba(139,43,226,.30),transparent 72%),
             radial-gradient(84% 38% at 50% 104%,rgba(255,30,142,.24),transparent 74%),
             linear-gradient(180deg,#0f0721,#080312 62%,#05020b);
  transition:transform .45s var(--ease)}
.founder:hover .founder__frame{transform:translateY(-4px)}
/* the hairline rides on top of the figure, so it survives the cut-out */
.founder__frame::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow .45s}
.founder:hover .founder__frame::after{box-shadow:inset 0 0 0 1px rgba(255,30,142,.5)}

/* fallback plate — outlined initials, dropped the moment a photo is there,
   otherwise it would read straight through the transparent cut-out */
.founder__plate{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(52px,7vw,96px);color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.34)}
.founder__frame:has(.founder__img) .founder__plate{display:none}

/* cover + top align: the figure fills the card width and is cropped at
   the waist, which the scrim below then fades out */
.founder__img{position:absolute;inset:0;z-index:2;width:100%;height:100%;
  object-fit:cover;object-position:50% 0%;
  /* --s / --x / --y are set per photo in the markup: each cut-out is framed
     differently, so they normalise head size, head height and centring
     across the three cards. Origin is top-centre so scaling never shifts
     the head down. */
  --s:1;--x:0%;--y:0%;transform-origin:50% 0%;
  transform:translate(var(--x),var(--y)) scale(var(--s));
  filter:grayscale(1) contrast(1.04) brightness(.96);
  transition:filter .55s var(--ease),transform .7s var(--ease)}
.founder:hover .founder__img{filter:none;
  transform:translate(var(--x),var(--y)) scale(calc(var(--s) * 1.04))}

.founder__perf{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(6,2,12,.55) 80%,rgba(5,2,11,.96) 100%)}
.founder__perf::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s;
  background:linear-gradient(150deg,rgba(255,30,142,.18),rgba(139,43,226,.10))}
.founder:hover .founder__perf::before{opacity:1}

.founder__no{position:absolute;z-index:4;left:clamp(14px,1.7vw,20px);bottom:clamp(12px,1.6vw,18px);
  font-size:10px;letter-spacing:.24em;color:rgba(255,255,255,.78);transition:color .3s}
.founder:hover .founder__no{color:var(--pink)}

.founder__name{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(20px,2.3vw,30px);margin-top:clamp(16px,2.2vh,22px)}
.founder__role{margin-top:8px;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--pink)}

@media(prefers-reduced-motion:reduce){
  .founder:hover .founder__frame,.founder:hover .founder__img{transform:none}
}

/* ─────────── RESPONSIVE ─────────── */
@media(max-width:760px){
  .pnotes__prop{opacity:.16;right:-32vw;width:96vw}
  .sched__row{grid-template-columns:1fr;gap:10px}
  .sched__n{padding-top:0}
  .logline{max-width:none}
}