/* Creative Space Studio — project story pages (/work/<slug>/)
 *
 * Extends assets/css/site.css; load BOTH, site.css first.
 * site.css owns the design tokens, reset, header, nav/menu/burger, footer chrome,
 * .wrap, .eyebrow, .muted, .reveal and the WhatsApp FAB. Nothing here redeclares them.
 *
 * The story hero is deliberately NOT called .hero: site.css already has a .hero for the
 * home page which desaturates its background image, and the two are different components
 * that merely shared a name. This one is .story-hero.
 */

/* hero */
.story-hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.story-hero .bg{position:absolute;inset:0;transform:scale(1.05);animation:story-kb 18s ease-out forwards}
@keyframes story-kb{to{transform:scale(1)}}
.story-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,16,12,.28) 0%,rgba(20,16,12,.05) 38%,rgba(20,16,12,.72) 100%)}
.story-hero .inner{position:relative;z-index:2;padding-bottom:8vh}
.story-hero h1{font-size:clamp(64px,11vw,150px);margin:.1em 0 .05em;letter-spacing:.01em}
.story-hero .tag{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(20px,2.4vw,30px);opacity:.94}
.meta{display:flex;flex-wrap:wrap;gap:26px;margin-top:26px;font-family:Inter;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase}
.meta span{position:relative;padding-right:26px}
.meta span:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;
  border-radius:50%;background:var(--sand);transform:translateY(-50%)}
.scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;opacity:.8}

/* overview band */
.overview{background:var(--teal);color:#F3EEE4;text-align:center;padding:120px 0}
.overview .eyebrow{color:var(--sand)}
.overview p{font-family:"Cormorant Garamond",serif;font-size:clamp(24px,3vw,38px);
  line-height:1.35;max-width:900px;margin:26px auto 0;font-weight:400}

/* chapters */
section.chapters{padding:120px 0 40px}
.lead{max-width:760px}
.lead h2{font-size:clamp(34px,5vw,60px)}
.chapter{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:78px 0}
.chapter .txt .num{font-family:"Cormorant Garamond",serif;font-size:56px;color:var(--sand);line-height:1;display:block;margin-bottom:8px}
.chapter h3{font-size:clamp(30px,3.4vw,44px);margin:.1em 0 .5em}
.chapter .figure{aspect-ratio:4/3;overflow:hidden;box-shadow:0 30px 60px -30px rgba(30,20,10,.45)}
.chapter.rev .txt{order:2}
.cap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:12px}

.fullbleed{height:78vh;min-height:520px;margin:40px 0;overflow:hidden}
.fullbleed img{transition:transform 1.4s ease}

/* film */
.film{background:var(--ink);color:#EFE8DB;padding:120px 0;text-align:center}
.film .eyebrow{color:var(--sand)}
.film h2{font-size:clamp(34px,5vw,60px);margin:.2em 0 .1em}
.film p{max-width:620px;margin:0 auto 44px;color:#c9c0b3}
.videobox{position:relative;max-width:1000px;margin:0 auto;aspect-ratio:16/9;
  overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.videobox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.videobox .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
.videobox .veil{position:absolute;inset:0;background:rgba(20,16,12,.22);pointer-events:none}
.videobox .playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:92px;height:92px;border-radius:50%;border:0;cursor:pointer;color:#fff;font-size:24px;
  background:rgba(22,76,72,.92);display:flex;align-items:center;justify-content:center;transition:.3s}
.videobox .playbtn:hover{transform:translate(-50%,-50%) scale(1.08);background:var(--teal-deep)}

/* gallery */
.gallery{padding:120px 0}
.gallery .head{text-align:center;margin-bottom:56px}
.gallery h2{font-size:clamp(34px,5vw,60px)}
.cols{column-count:3;column-gap:16px}
.cols img{width:100%;height:auto;margin-bottom:16px;break-inside:avoid}

/* closing */
.closing{background:var(--ivory-2);padding:130px 0;text-align:center}
.closing .outcome{max-width:760px;margin:0 auto 50px;font-size:19px}
.quote{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:400;
  font-size:clamp(30px,4.4vw,54px);line-height:1.25;max-width:960px;margin:0 auto}
.cta{display:inline-block;margin-top:54px;background:var(--teal);color:#fff;
  padding:18px 44px;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.cta:hover{background:var(--teal-deep)}
.signoff{margin-top:40px;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:22px;color:var(--muted)}

/* story footer — simpler than the site-wide footer.site */
footer.story{background:var(--ink);color:#B9B0A3;padding:60px 0;font-size:14px}
footer.story .nav{align-items:flex-start}
footer.story a:hover{color:#fff}
footer.story .brand img{width:auto;height:42px;object-fit:contain;filter:brightness(0) invert(1);opacity:.9}

@media(max-width:1024px){
  .chapter{gap:44px;padding:60px 0}
  .overview{padding:92px 0}
  section.chapters{padding:92px 0 28px}
  .film,.gallery,.closing{padding:92px 0}
}
@media(max-width:820px){
  .chapter{grid-template-columns:1fr;gap:22px;padding:44px 0}
  .chapter.rev .txt{order:0}
  .chapter .figure{aspect-ratio:16/11}
  .chapter .num{font-size:46px}
  .cols{column-count:2}
  .story-hero{height:90vh}
  .fullbleed{height:54vh;min-height:320px;margin:24px 0}
  .overview{padding:66px 0}
  .overview p{font-size:24px}
  section.chapters{padding:64px 0 12px}
  .film,.gallery,.closing{padding:64px 0}
}
@media(max-width:480px){
  /* Story pages are image-led, so on a phone they buy the photography back some room:
     tighter gutters and a slimmer header than the rest of the site. Deliberately
     divergent from site.css — not drift. */
  .wrap{padding:0 18px}
  header.site{padding:16px 0}

  .story-hero{height:88vh;min-height:560px}
  .story-hero h1{font-size:21vw}
  .story-hero .tag{font-size:18px}
  .story-hero .meta{gap:12px;margin-top:20px;font-size:11px}
  .meta span{padding-right:16px}
  .meta span:not(:last-child)::after{width:4px;height:4px}
  .cols{column-count:1}
  .videobox .playbtn{width:68px;height:68px;font-size:18px}
  .closing .quote{font-size:31px}
  .cta{display:block;text-align:center}
}