/* ==========================================================================
   Phase — Creative Direction (services/creative-direction)
   The flow system (css/flow.css) in the poster theme (css/home.css supplies
   the palette, the sticker hero, the manifesto and the close; js/home.js
   drives them). The story: the hero's black disc swells into a black page
   where the manifesto lights up and a white beam carries the eye into the
   prism — one idea in, six disciplines out in the poster palette — then
   the page returns to paper for the brands, the process, the track record
   and the close. Prism + beam motion: js/creative-direction.js.
   ========================================================================== */

body.cd-page{--hm-ground:#0a0a0a}

/* ==========================================================================
   HERO
   ========================================================================== */
.cd-page .hm-sun{--s:clamp(250px,28vw,480px);left:64%;top:53%}
.cd-page .hm-hero h1{font-size:clamp(3.4rem,11.5vw,11.5rem);letter-spacing:-.055em}
/* the disc is as black as the type: the copy blends in difference mode,
   ink on the paper and white wherever it crosses the disc */
.cd-page .hm-hero__copy{mix-blend-mode:difference;color:#fff}
.cd-page .hm-hero__label{color:rgba(255,255,255,.6)}
.cd-page .hm-hero__sub{color:rgba(255,255,255,.72)}

/* ==========================================================================
   MANIFESTO + PRISM — one black page
   ========================================================================== */
.cd-page .hm-manifesto,
.cd-prism{
  color:#fff;
  --fl-ink:#fff;
  --fl-faint:rgba(255,255,255,.55);
  --fl-dim:rgba(255,255,255,.72);
  --fl-line-2:rgba(255,255,255,.2);
}
/* the black runs on into the prism, so the hem moves to the prism's foot */
.cd-page .hm-manifesto::after{display:none}
.cd-page .hm-manifesto{padding-bottom:clamp(150px,16vw,240px)}
.cd-page .hm-manifesto .fl-lit-accent .fl-w,
.cd-page .hm-manifesto .fl-lit-accent:not(:has(.fl-w)){
  background:var(--fl-spectrum);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.cd-lit-glow{text-shadow:0 0 28px rgba(255,255,255,.3)}

/* the single white beam that leaves the manifesto and leads into the prism */
.cd-lead{position:absolute;left:0;right:0;bottom:clamp(40px,6vw,80px);height:2px;pointer-events:none}
.cd-lead span{
  display:block;
  width:46%;
  height:100%;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff);
  box-shadow:0 0 18px 2px rgba(255,255,255,.5);
  transform-origin:left;
}
.js .cd-lead span{transform:scaleX(0)}

.cd-prism{position:relative;height:330vh;background:#0a0a0a;overflow-x:clip}
/* scalloped hem where the black page meets the paper */
.cd-prism::after{
  content:"";
  position:absolute;
  left:0;right:0;
  top:100%;
  z-index:1;
  height:28px;
  background:radial-gradient(circle at 50% 0,#0a0a0a 27px,transparent 28px) 0 0/56px 28px repeat-x;
  pointer-events:none;
}
.cd-prism__stage{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  overflow:hidden;
}
.cd-prism__stage::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(40% 50% at 47% 55%,rgba(255,255,255,.05),transparent 70%),
    radial-gradient(40% 70% at 90% 50%,rgba(249,177,210,.08),transparent 70%);
}
.cd-prism__head{z-index:2;padding-top:calc(var(--fl-nav) + 24px)}
.cd-prism__head .fl-h2{max-width:12ch}
.cd-prism__head .fl-lede{max-width:38ch}
/* sized to the screen's height and sat on its foot, so the last discipline
   (06) clears the bottom edge on wide, short screens too */
.cd-prism__scene{
  position:absolute;
  left:50%;
  bottom:calc(4svh + 30px);
  width:min(100vw,150svh);
  aspect-ratio:16/9;
  transform:translateX(-50%);
}
.cd-prism__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cd-inner-fan{mix-blend-mode:screen}
.cd-prism__in-label{
  position:absolute;
  left:5%;
  top:66%;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:1rem;
  font-weight:600;
}
.cd-prism__in-label span{font-family:var(--fl-mono);font-size:.66rem;letter-spacing:.2em;color:var(--fl-faint);font-weight:500}

.cd-spectrum li{
  position:absolute;
  left:74.6%;
  top:var(--y);
  width:24.5%;
  transform:translateY(-50%);
  padding:2px 0 2px 16px;
  border-left:2px solid var(--c);
}
.cd-spectrum li::before{
  content:"";
  position:absolute;
  left:-2px;top:0;bottom:0;
  width:2px;
  box-shadow:0 0 14px 1px var(--c);
}
.cd-spectrum__n{font-family:var(--fl-mono);font-size:.66rem;letter-spacing:.16em;color:var(--c)}
.cd-spectrum h3{margin-top:2px;font-size:clamp(.98rem,1.35vw,1.28rem);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.cd-spectrum p{margin-top:3px;font-size:clamp(.78rem,.95vw,.92rem);line-height:1.45;color:var(--fl-dim)}

/* ==========================================================================
   BRANDS · PROCESS · TRACK RECORD — back on paper
   ========================================================================== */
.cd-brands{background:var(--fl-bg)}
.cd-brands .fl-run__stage{padding-top:clamp(120px,12vw,170px)}
.fl-panel__decor{position:absolute;top:-14%;right:-8%;width:50%;opacity:.14;transform:rotate(-8deg);z-index:0;pointer-events:none}

.cd-proof{padding:clamp(80px,9vw,130px) 0 clamp(110px,12vw,180px);background:var(--fl-bg-2)}
.cd-rail{margin:clamp(40px,5vw,70px) 0 clamp(80px,9vw,120px)}
.cd-rail__y{display:block;margin-bottom:8px;font-family:var(--fl-mono);font-size:.9rem;letter-spacing:.06em;color:var(--fl-ink)}
.cd-rail p{font-size:.92rem;line-height:1.5;color:var(--fl-dim)}
.cd-proof .fl-quote{margin-top:clamp(70px,8vw,110px)}
.cd-page .ab-story{background:var(--fl-bg-2)}

.cd-cta .fl-cta__title{max-width:12ch}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  /* prism: scene on top, disciplines as a list below — no sticky stage */
  .cd-prism{height:auto}
  .cd-prism__stage{position:relative;height:auto;overflow:visible;padding-bottom:clamp(110px,16vw,150px)}
  .cd-prism__head{padding-top:clamp(80px,12vw,120px)}
  .cd-prism__scene{position:relative;left:auto;top:auto;bottom:auto;transform:none;width:100%;aspect-ratio:auto;margin:24px 0 8px}
  /* the SVG gets its own box here (JS crops its viewBox to the prism) so the
     discipline list below can flow instead of sitting on top of it */
  .cd-prism__svg{position:relative;inset:auto;height:auto;aspect-ratio:900/700}
  .cd-prism__in-label{left:4%;top:calc(100vw * 700 / 900 * .72);font-size:.82rem}
  .cd-spectrum{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:26px 22px;padding:0 clamp(20px,3.4vw,48px)}
  .cd-spectrum li{position:relative;left:auto;top:auto;width:auto;transform:none}
}
@media (max-width:640px){
  .cd-spectrum{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .cd-prism{height:auto}
  .cd-prism__stage{position:relative;height:auto;min-height:100svh}
}