/* /creative-practice — project-led editorial portfolio
   The interface is intentionally quiet. Scale, pacing and the work provide
   the visual system. Scoped to body.cp so no other page changes. */

body.cp{
  --cp-bg:#f3f1eb;
  --cp-fg:#0d0d0d;
  --cp-muted:#68645e;
  --cp-line:rgba(13,13,13,.18);
  --cp-dark:#090909;
  --cp-light:#f4f1ea;
  --cp-margin:clamp(20px,3.2vw,60px);
  --cp-gap:clamp(10px,1.25vw,22px);
  --cp-max:1800px;
  --cp-ease:cubic-bezier(.16,1,.3,1);
  background:var(--cp-bg);
  color:var(--cp-fg);
}
body.cp ::selection{background:var(--cp-fg);color:var(--cp-bg)}
body.cp .brand i{color:currentColor}
body.cp .nav a[aria-current="page"]{color:var(--cp-fg)}
body.cp .site-head{border-bottom:0;background:rgba(243,241,235,.94)}
body.cp .site-head .inner{max-width:var(--cp-max);padding-inline:var(--cp-margin)}
body.cp .site-foot{background:var(--cp-dark);color:#fff}
body.cp a:focus-visible,body.cp button:focus-visible{outline:2px solid currentColor;outline-offset:4px}

.cp-main{display:block;overflow:hidden}
.cp-kicker{margin:0;font-size:10px;font-weight:650;line-height:1.3;letter-spacing:.18em;text-transform:uppercase;color:var(--cp-muted)}
.cp-link{display:inline-flex;align-items:center;gap:8px;width:max-content;margin-top:clamp(22px,2.5vw,36px);
  padding-bottom:5px;border-bottom:1px solid currentColor;color:inherit;font-size:11px;font-weight:650;
  letter-spacing:.13em;text-transform:uppercase;transition:opacity .3s ease}
.cp-link:hover{opacity:.52}
.cp-link--light{color:var(--cp-light)}

/* Hero — static by choice. Motion arrives as the first film, avoiding
   duplicated storytelling and an autoplay tax on the opening viewport. */
.cp-hero{position:relative;min-height:calc(100svh - var(--nav-h));max-height:1100px;background:#151515;color:#fff}
.cp-hero-media,.cp-hero-media picture,.cp-hero-media img{position:absolute;inset:0;width:100%;height:100%}
.cp-hero-media img{object-fit:cover;object-position:50% 46%}
.cp-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.05) 42%,rgba(0,0,0,.72))}
.cp-hero-copy{position:absolute;z-index:1;left:var(--cp-margin);right:var(--cp-margin);bottom:clamp(74px,9vh,116px);max-width:1150px}
.cp-hero-copy .cp-kicker{color:rgba(255,255,255,.72);margin-bottom:clamp(16px,2vw,28px)}
.cp-hero h1{margin:0;font-size:clamp(48px,7.8vw,142px);font-weight:420;line-height:.86;letter-spacing:-.062em;text-wrap:balance}
.cp-hero-copy>p:last-child{margin:clamp(22px,2.4vw,36px) 0 0;max-width:46ch;font-size:clamp(15px,1.35vw,21px);line-height:1.4;color:rgba(255,255,255,.82)}
.cp-scroll{position:absolute;z-index:2;right:var(--cp-margin);bottom:clamp(24px,3vw,44px);color:#fff;font-size:10px;font-weight:650;letter-spacing:.17em;text-transform:uppercase}

/* Positioning statement */
.cp-intro{max-width:var(--cp-max);margin:auto;padding:clamp(90px,11vw,190px) var(--cp-margin) clamp(110px,14vw,230px);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--cp-gap)}
.cp-intro>.cp-kicker{grid-column:1/span 3}
.cp-intro h2{grid-column:4/-1;margin:0;max-width:17ch;font-size:clamp(38px,5.6vw,98px);font-weight:430;line-height:.98;letter-spacing:-.052em}
.cp-intro>p:not(.cp-kicker){grid-column:7/span 5;margin:clamp(30px,4vw,64px) 0 0;max-width:43ch;font-size:clamp(16px,1.35vw,21px);line-height:1.5;color:var(--cp-muted)}
.cp-practice-index{grid-column:1/-1;margin:clamp(72px,9vw,140px) 0 0;padding-top:16px;border-top:1px solid var(--cp-line);
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;list-style:none}
.cp-practice-index li{font-size:11px;letter-spacing:.06em;color:var(--cp-muted)}

/* Shared project model */
.cp-project{max-width:var(--cp-max);margin:0 auto;padding:clamp(86px,10vw,170px) var(--cp-margin);border-top:1px solid var(--cp-line)}
.cp-project--dark{max-width:none;background:var(--cp-dark);color:var(--cp-light);border-top:0;padding-inline:max(var(--cp-margin),calc((100vw - var(--cp-max))/2 + var(--cp-margin)))}
.cp-project--dark .cp-kicker,.cp-project--dark .cp-project-meta,.cp-project--dark .cp-roles{color:rgba(244,241,234,.58)}
.cp-project-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--cp-gap);align-items:start;margin-bottom:clamp(34px,5vw,86px)}
.cp-project-title{grid-column:1/span 6}
.cp-project-title .cp-kicker{margin-bottom:clamp(12px,1.4vw,20px)}
.cp-project-title h2{margin:0;font-size:clamp(46px,7.2vw,126px);font-weight:420;line-height:.88;letter-spacing:-.06em;text-wrap:balance}
.cp-project-info{grid-column:8/-1;padding-top:clamp(2px,.5vw,8px)}
.cp-project-line{margin:0;max-width:40ch;font-size:clamp(19px,1.8vw,29px);line-height:1.3;letter-spacing:-.025em}
.cp-project-meta{margin:clamp(20px,2.4vw,34px) 0 0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cp-muted)}
.cp-roles{margin:clamp(20px,2.4vw,34px) 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px 18px;color:var(--cp-muted)}
.cp-roles li{font-size:10px;font-weight:650;letter-spacing:.13em;text-transform:uppercase}

.cp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--cp-gap);align-items:start}
.cp-media{margin:0;position:relative;overflow:hidden;background:rgba(13,13,13,.045)}
.cp-project--dark .cp-media{background:#141414}
.cp-media picture,.cp-media img{display:block;width:100%}
.cp-media img{height:auto;aspect-ratio:var(--ar,auto);object-fit:var(--fit,cover);object-position:var(--pos,50% 50%);transition:transform .55s var(--cp-ease)}
.cp-media:hover img{transform:scale(1.012)}

/* Film player */
.cp-film{cursor:pointer;background:#050505}
.cp-film .film-btn{position:absolute;inset:0;display:grid;place-items:center;width:100%;border:0;background:transparent;color:#fff}
.cp-film .disc{display:grid;place-items:center;width:clamp(58px,5vw,88px);height:clamp(58px,5vw,88px);border-radius:50%;
  background:rgba(5,5,5,.5);backdrop-filter:blur(7px);transition:transform .35s var(--cp-ease),background .35s ease}
.cp-film .disc::after{content:"";width:0;height:0;margin-left:5px;border-left:15px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.cp-film .film-btn:hover .disc{transform:scale(1.05);background:rgba(5,5,5,.72)}
.cp-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#000}

/* Heart: a character bible translated into editorial pacing. */
.cp-heart-lead{grid-column:1/-1}
.cp-heart-human{grid-column:1/span 6;margin-top:var(--cp-gap)}
.cp-heart-robot{grid-column:7/-1;margin-top:var(--cp-gap)}
.cp-heart-world{grid-column:1/span 7;margin-top:clamp(54px,8vw,140px)}
.cp-heart-tech{grid-column:8/-1;margin-top:clamp(130px,18vw,300px);display:grid;gap:var(--cp-gap)}
.cp-heart-detail,.cp-heart-body{width:100%}

/* Alien is the single flagship motion break. */
.cp-project--alien{padding-block:clamp(90px,10vw,160px)}
.cp-alien-film{width:100%;aspect-ratio:16/9}
.cp-alien-film img{height:100%}
.cp-alien-still{width:min(72vw,1160px);margin:clamp(24px,4vw,70px) 0 0 auto}

/* Commercial work is a sequence of independent projects, not cards. */
.cp-project--commercial{padding-bottom:clamp(100px,14vw,230px)}
.cp-tahina-lead{grid-column:1/-1}
.cp-tahina-detail{grid-column:8/-1;margin-top:clamp(24px,4vw,70px)}
.cp-subproject{margin-top:clamp(110px,16vw,270px)}
.cp-subproject .cp-project-head{margin-bottom:clamp(28px,4vw,68px)}
.cp-lazeez-grid>.cp-media:first-child{grid-column:1/span 6}
.cp-lazeez-grid>.cp-media:last-child{grid-column:7/-1;margin-top:clamp(80px,8vw,150px)}
.cp-subproject--film{margin-top:clamp(130px,17vw,290px)}
.cp-next-film{width:100%;aspect-ratio:16/9}
.cp-next-film img{height:100%}

/* Robot Image Architect: wardrobe, public behaviour, cast and one world study. */
.cp-project--robot .cp-project-title h2{max-width:8ch}
.cp-robot-lead{grid-column:1/span 7}
.cp-robot-side{grid-column:9/-1;margin-top:clamp(130px,14vw,240px)}
.cp-robot-wide{grid-column:1/span 9;margin-top:clamp(70px,10vw,170px)}
.cp-robot-world{grid-column:10/-1;margin-top:clamp(150px,18vw,310px)}

/* Accelerator proves creative output + system + teaching. */
.cp-acc-community{grid-column:1/-1}
.cp-acc-pipeline{grid-column:1/-1;margin-top:clamp(16px,2vw,32px)}
.cp-acc-reference{grid-column:1/span 8;margin-top:clamp(60px,8vw,130px)}
.cp-standard{grid-column:9/-1;margin-top:clamp(60px,8vw,130px);padding-top:2px}
.cp-standard h3{margin:16px 0 0;font-size:clamp(34px,4vw,66px);font-weight:430;letter-spacing:-.045em;line-height:1}
.cp-standard ul{margin:clamp(26px,3vw,46px) 0 0;padding:0;list-style:none;border-top:1px solid rgba(244,241,234,.25)}
.cp-standard li{padding:13px 0;border-bottom:1px solid rgba(244,241,234,.25);font-size:12px;color:rgba(244,241,234,.78)}
.cp-interviews{margin-top:clamp(70px,9vw,150px);border-top:1px solid rgba(244,241,234,.25)}
.cp-interviews a{display:grid;grid-template-columns:2fr 5fr auto;gap:20px;align-items:baseline;padding:clamp(20px,2vw,30px) 0;border-bottom:1px solid rgba(244,241,234,.25);color:inherit}
.cp-interviews a span{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,241,234,.55)}
.cp-interviews a strong{font-size:clamp(17px,1.7vw,25px);font-weight:430;letter-spacing:-.025em}
.cp-interviews a i{font-style:normal;color:rgba(244,241,234,.6)}

/* The award gets one substantial appearance, then recognition stays compact. */
.cp-tommy-film{width:min(100%,1260px);margin:0 auto;aspect-ratio:16/9}
.cp-tommy-film img{height:100%;object-fit:contain;background:#050505}
.cp-recognition{max-width:1180px;margin:0 auto;padding:clamp(100px,13vw,210px) var(--cp-margin);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--cp-gap)}
.cp-recognition header{grid-column:1/span 4}
.cp-recognition h2{margin:18px 0 0;font-size:clamp(36px,4.4vw,70px);font-weight:430;line-height:.95;letter-spacing:-.05em}
.cp-recognition>ul{grid-column:5/-1;margin:0;padding:0;list-style:none;border-top:1px solid var(--cp-line)}
.cp-recognition li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;padding:clamp(16px,1.6vw,24px) 0;border-bottom:1px solid var(--cp-line);align-items:baseline}
.cp-recognition strong{font-size:clamp(15px,1.35vw,19px);font-weight:480;letter-spacing:-.015em}
.cp-recognition li span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cp-muted);text-align:right}
.cp-press{grid-column:5/-1;margin:clamp(24px,3vw,40px) 0 0;color:var(--cp-muted);font-size:13px;line-height:1.6}

/* Closing */
.cp-cta{max-width:var(--cp-max);margin:0 auto;padding:clamp(120px,17vw,280px) var(--cp-margin);border-top:1px solid var(--cp-line)}
.cp-cta h2{margin:clamp(24px,3vw,48px) 0 0;max-width:12ch;font-size:clamp(58px,10vw,166px);font-weight:420;line-height:.84;letter-spacing:-.065em}
.cp-cta>p:not(.cp-kicker){margin:clamp(30px,4vw,62px) 0 0;font-size:clamp(14px,1.25vw,19px);color:var(--cp-muted)}

@media (max-width:1024px){
  .cp-intro h2{grid-column:4/-1}
  .cp-intro>p:not(.cp-kicker){grid-column:5/span 7}
  .cp-project-title{grid-column:1/span 7}
  .cp-project-info{grid-column:8/-1}
  .cp-heart-tech{margin-top:clamp(80px,11vw,160px)}
  .cp-robot-side{grid-column:8/-1}
}

@media (max-width:760px){
  body.cp{--cp-margin:18px;--cp-gap:10px}
  body.cp .site-head{background:var(--cp-bg)}
  .cp-hero{min-height:calc(88svh - var(--nav-h));max-height:none}
  .cp-hero-media img{object-position:50% 32%}
  .cp-hero h1{max-width:100%;font-size:clamp(36px,10.35vw,46px);line-height:.92;letter-spacing:-.052em}
  .cp-hero-copy{bottom:78px}
  .cp-hero-copy>p:last-child{max-width:31ch;font-size:14px;line-height:1.38}
  .cp-scroll{left:var(--cp-margin);right:auto;bottom:26px}
  .cp-intro{padding-block:84px 110px}
  .cp-intro>.cp-kicker,.cp-intro h2,.cp-intro>p:not(.cp-kicker),.cp-practice-index{grid-column:1/-1}
  .cp-intro h2{margin-top:28px;font-size:clamp(36px,10.5vw,54px)}
  .cp-intro>p:not(.cp-kicker){margin-top:28px}
  .cp-practice-index{margin-top:60px;grid-template-columns:1fr 1fr;row-gap:14px}
  .cp-practice-index li:last-child{grid-column:1/-1}

  .cp-project{padding-block:80px;padding-inline:var(--cp-margin)}
  .cp-project--dark{padding-inline:var(--cp-margin)}
  .cp-project-head{display:block;margin-bottom:32px}
  .cp-project-info{padding-top:28px}
  .cp-project-title h2{font-size:clamp(46px,15vw,70px)}
  .cp-project-line{font-size:20px}
  .cp-roles{gap:7px 13px}

  .cp-heart-lead,.cp-heart-human,.cp-heart-robot,.cp-heart-world,.cp-heart-tech,
  .cp-tahina-lead,.cp-tahina-detail,.cp-lazeez-grid>.cp-media:first-child,
  .cp-lazeez-grid>.cp-media:last-child,.cp-robot-lead,.cp-robot-side,.cp-robot-wide,.cp-robot-world,
  .cp-acc-community,.cp-acc-pipeline,.cp-acc-reference,.cp-standard{grid-column:1/-1}
  .cp-heart-human,.cp-heart-robot{margin-top:0}
  .cp-heart-world{margin-top:50px}
  .cp-heart-tech{margin-top:20px;gap:10px}
  .cp-heart-detail img,.cp-heart-body img{aspect-ratio:4/3;object-fit:contain}
  .cp-heart-lead{width:100vw;margin-left:calc(-1 * var(--cp-margin))}
  .cp-heart-lead img{aspect-ratio:4/3;object-fit:cover;object-position:50% 50%}
  .cp-heart-human img,.cp-heart-robot img{aspect-ratio:3/4}

  .cp-alien-film,.cp-next-film{width:100vw;margin-left:calc(-1 * var(--cp-margin))}
  .cp-alien-still{width:100%;margin-top:18px}
  .cp-alien-still img{aspect-ratio:16/9}
  .cp-tahina-lead{width:100vw;margin-left:calc(-1 * var(--cp-margin))}
  .cp-tahina-detail{margin-top:18px}
  .cp-subproject{margin-top:110px}
  .cp-lazeez-grid>.cp-media:last-child{margin-top:10px}
  .cp-subproject--film{margin-top:120px}

  .cp-robot-side,.cp-robot-wide,.cp-robot-world{margin-top:10px}
  .cp-robot-lead img,.cp-robot-side img,.cp-robot-world img{aspect-ratio:3/4}
  .cp-robot-wide img{aspect-ratio:16/9}
  .cp-acc-pipeline{margin-top:10px}
  .cp-acc-pipeline img,.cp-acc-reference img{aspect-ratio:16/9}
  .cp-acc-reference{margin-top:48px}
  .cp-standard{margin-top:46px}
  .cp-interviews a{grid-template-columns:1fr auto;row-gap:8px}
  .cp-interviews a strong{grid-column:1/span 1;grid-row:2}
  .cp-interviews a i{grid-column:2;grid-row:1/span 2}

  .cp-tommy-film{width:100vw;margin-left:calc(-1 * var(--cp-margin))}
  .cp-recognition{display:block;padding-block:90px 120px}
  .cp-recognition>ul{margin-top:44px}
  .cp-recognition li{grid-template-columns:1fr;gap:6px}
  .cp-recognition li span{text-align:left}
  .cp-press{margin-top:28px}
  .cp-cta{padding-block:110px 140px}
  .cp-cta h2{font-size:clamp(58px,20vw,88px)}
}

@media (prefers-reduced-motion:reduce){
  .cp-media img,.cp-link,.cp-film .disc{transition:none!important}
  .cp-media:hover img{transform:none}
}

@media (pointer:coarse){
  .cp-link{padding-block:10px}
  .cp-interviews a{min-height:64px}
}