/* ============================================================
   UNFO · PROJECT case-study — section styles
   (reuses nav/footer/cursor/btn/reveal from cinematic.css)
   ============================================================ */

/* reusable film grain */
.filmgrain { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: calc(0.15 * var(--accent-amt)); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px; animation: grain 0.6s steps(4) infinite; }
.no-anim .filmgrain { animation: none; }

/* ============================================================
   HERO
   ============================================================ */
.phero { position: relative; min-height: 94svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.phero__media { position: absolute; inset: 0; z-index: 0; }
.phero__media video, .phero__media image-slot { width: 100%; height: 100%; object-fit: cover; display: block; }
.phero__scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, var(--void) 2%, rgba(5,0,0,0.2) 45%, rgba(5,0,0,0.5) 100%); }
.phero__inner { position: relative; z-index: 5; padding: 0 clamp(1.5rem,4vw,3.2rem) clamp(2.5rem,5vw,4rem); width: 100%; }
.phero__cat { margin-bottom: clamp(1rem,2vw,1.6rem); }
.phero__title { font-family: var(--display); font-weight: 800; font-size: clamp(3.4rem,14vw,15rem); line-height: 0.86; letter-spacing: -0.045em; text-transform: uppercase; }
.phero__title .ln { display: block; overflow: hidden; }
.phero__title .ln > span { display: block; }
.phero__lede { max-width: 40ch; color: var(--ink-dim); font-size: var(--fs-sub); margin-top: clamp(1.2rem,2.5vw,2rem); }
.phero__cue { position: absolute; bottom: 1.6rem; right: clamp(1.5rem,4vw,3.2rem); z-index: 5; display: flex; align-items: center; gap: 0.6rem; font-family: var(--body); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.phero__cue .ln { width: 40px; height: 1px; background: var(--ink-faint); position: relative; overflow: hidden; }
.phero__cue .ln::after { content: ""; position: absolute; inset: 0; left: -100%; background: var(--red); animation: cue 2.4s var(--ease-cine) infinite; }

/* back link pinned below nav */
.pback { position: fixed; top: clamp(0.9rem,1.4vw,1.5rem); left: 50%; transform: translateX(-50%); z-index: 1001; display: none; }

/* ============================================================
   META BAR
   ============================================================ */
.pmeta { border-bottom: 1px solid var(--line-soft); }
.pmeta .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem,3vw,3rem); padding-block: clamp(2.5rem,4vw,3.5rem); }
.pmeta__item { display: flex; flex-direction: column; gap: 0.5rem; border-top: 2px solid var(--red); padding-top: 1rem; }
.pmeta__k { font-family: var(--body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.pmeta__v { font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem,1.8vw,1.6rem); letter-spacing: -0.01em; }

/* ============================================================
   OVERVIEW
   ============================================================ */
.poview .wrap { display: grid; grid-template-columns: 0.32fr 1fr; gap: clamp(1.5rem,4vw,5rem); }
.poview__k { align-self: start; }
.poview__body { font-family: var(--display); font-weight: 500; font-size: clamp(1.6rem,3.4vw,3.2rem); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.poview__body .word { display: inline-block; transition: opacity 0.5s var(--ease-out); }
.anim .poview__body .word { opacity: 0.18; }

/* ============================================================
   CHAPTERS (alternating media + text)
   ============================================================ */
.chapter { padding: clamp(3rem,6vw,6rem) 0; }
.chapter .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.chapter:nth-child(even) .chapter__media { order: 2; }
.chapter__media { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; background: var(--surface-2); }
.chapter__media video, .chapter__media image-slot { width: 100%; height: 100%; object-fit: cover; display: block; }
.chapter__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(5,0,0,0.4), transparent 60%); pointer-events: none; }
.chapter__txt { display: flex; flex-direction: column; gap: clamp(0.9rem,1.8vw,1.4rem); }
.chapter__n { font-family: var(--body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.2em; color: var(--red); }
.chapter__k { font-family: var(--body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }
.chapter__t { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem,3.6vw,3.4rem); line-height: 0.96; letter-spacing: -0.03em; }
.chapter__d { color: var(--ink-dim); font-size: var(--fs-body); max-width: 42ch; }

/* ============================================================
   GALLERY
   ============================================================ */
.pgallery { padding: clamp(2rem,4vw,4rem) 0 clamp(4rem,7vw,7rem); }
.pgallery__head { margin-bottom: clamp(1.5rem,3vw,2.5rem); }
.pgallery__big { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; background: var(--surface-2); margin-bottom: clamp(0.8rem,1.4vw,1.4rem); }
.pgallery__big video, .pgallery__big image-slot { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgallery__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.8rem,1.4vw,1.4rem); }
.pgallery__cell { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; background: var(--surface-2); }
.pgallery__cell video, .pgallery__cell image-slot { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   RESULTS
   ============================================================ */
.presults { border-block: 1px solid var(--line-soft); background: var(--surface); }
.presults .wrap { padding-block: clamp(4rem,7vw,7rem); }
.presults__t { font-family: var(--display); font-weight: 800; font-size: clamp(2rem,4.4vw,4rem); letter-spacing: -0.035em; margin-bottom: clamp(2rem,4vw,3.4rem); }
.presults__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,3vw,3rem); }
.presult { border-top: 2px solid var(--red); padding-top: 1.2rem; }
.presult__v { font-family: var(--display); font-weight: 800; font-size: clamp(2.8rem,6vw,5.5rem); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.presult__l { font-family: var(--body); font-size: 0.92rem; color: var(--ink-dim); margin-top: 0.7rem; max-width: 22ch; }

/* ============================================================
   QUOTE
   ============================================================ */
.pquote { text-align: center; }
.pquote .wrap { max-width: 1100px; }
.pquote__q { font-family: var(--display); font-weight: 500; font-size: clamp(1.8rem,4.2vw,3.8rem); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.pquote__q::before { content: "“"; color: var(--red); } .pquote__q::after { content: "”"; color: var(--red); }
.pquote__who { margin-top: clamp(1.5rem,3vw,2.5rem); display: flex; flex-direction: column; gap: 0.2rem; align-items: center; }
.pquote__nm { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.pquote__rl { font-family: var(--body); font-size: 0.85rem; color: var(--ink-dim); }

/* ============================================================
   NEXT PROJECT
   ============================================================ */
.pnext { position: relative; min-height: 70svh; display: grid; align-items: center; overflow: hidden; border-top: 1px solid var(--line-soft); cursor: pointer; }
.pnext__media { position: absolute; inset: 0; z-index: 0; }
.pnext__media video, .pnext__media image-slot { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--ease-cine); }
.pnext:hover .pnext__media video, .pnext:hover .pnext__media image-slot { transform: scale(1.05); }
.pnext__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,0,0,0.85), rgba(5,0,0,0.45)); }
.pnext__inner { position: relative; z-index: 3; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding: clamp(3rem,6vw,5rem) clamp(1.5rem,4vw,3rem); }
.pnext__k { font-family: var(--body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); }
.pnext__t { font-family: var(--display); font-weight: 800; font-size: clamp(3rem,9vw,8rem); line-height: 0.9; letter-spacing: -0.04em; text-transform: uppercase; }
.pnext__c { font-family: var(--body); font-size: 0.92rem; color: var(--ink-dim); }
.pnext__cta { margin-top: 1.2rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .pmeta .wrap { grid-template-columns: 1fr 1fr; }
  .poview .wrap { grid-template-columns: 1fr; }
  .chapter .wrap { grid-template-columns: 1fr; gap: 1.5rem; }
  .chapter:nth-child(even) .chapter__media { order: 0; }
  .pgallery__row { grid-template-columns: 1fr; }
  .presults__grid { grid-template-columns: 1fr; gap: 1.6rem; }
}