/* =========================================================================
   project.css — a single project page:
   first screen (name | film | year), details grid, gallery,
   and the next-project teaser with its fly-up transition.
   Driven by js/components/project/*.
   ========================================================================= */

/* ---------- first screen ---------- */
.p-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:clamp(24px,4vw,64px);align-items:center;min-height:calc(100vh - 150px);margin-top:-30px}
.p-name{margin:0;font-size:clamp(28px,2.6vw,46px);line-height:1.05;max-width:12ch}
.p-year{margin:0;justify-self:end;text-align:right;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(28px,2.6vw,46px);line-height:1.05;white-space:nowrap}
.p-media{position:relative;height:min(calc(100vh - 170px),920px);aspect-ratio:9/16;max-width:100%;background:var(--block);overflow:hidden;box-shadow:0 40px 80px -40px rgba(30,60,120,.45)}
.p-media video,.p-media .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
.p-media .ph{background-size:cover;background-position:center}
/* a film plays on black — no poster, no grey block while it loads */
.p-media.is-film{background:#000}
/* a horizontal film: a 16:9 frame as wide as fits between the name and the year */
.p-media.is-wide{height:auto;aspect-ratio:16/9;width:min(52vw,calc((100vh - 200px) * 16 / 9),1000px)}
.p-media.is-wide video{object-fit:contain}

/* episodes: two films side by side in the centre column, each captioned; started by a click */
.p-media.is-episodes{aspect-ratio:auto;height:auto;width:auto;max-width:none;background:none;box-shadow:none;overflow:visible;
  display:flex;gap:clamp(14px,1.6vw,24px)}
.ep{margin:0;display:grid;gap:14px;justify-items:center}
.ep-screen{position:relative;height:min(calc(100vh - 230px),820px);aspect-ratio:9/16;background:#000;overflow:hidden;box-shadow:0 40px 80px -40px rgba(30,60,120,.45)}
.ep-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}
.ep-play{position:absolute;left:50%;top:50%;z-index:2;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:#fff;color:#111;
  display:grid;place-items:center;box-shadow:0 14px 40px -12px rgba(0,0,0,.55);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ep-play svg{width:24px;height:24px;margin-left:3px}
.ep-play:hover{transform:scale(1.08)}
.ep.playing .ep-play,.p-media.playing .ep-play{display:none}
.ep figcaption{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(19px,1.6vw,26px);line-height:1;color:#fff}

/* ---------- details: category | role | info ---------- */
.p-grid{display:grid;grid-template-columns:1fr 1fr 2.4fr;gap:clamp(24px,4vw,64px);margin-top:clamp(80px,14vh,160px)}
.p-grid dl{margin:0;display:grid;gap:10px;align-content:start}
.p-grid dd{margin:0;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(19px,1.5vw,23px);line-height:1.25}
.p-info{min-width:0}
.p-info p{font-family:var(--ui);font-size:clamp(16px,1.25vw,19px);line-height:1.65;margin:0 0 22px;max-width:60ch}
.p-info .eyebrow{margin-right:1.2em}
.p-info .p-link{border-bottom:1px solid currentColor;transition:opacity .3s}
.p-info .p-link:hover{opacity:.7}

/* ---------- gallery: rows of 2–3 images (grey blocks for projects without images yet) ---------- */
.p-gallery{--gap:clamp(4px,.6vw,9px);display:grid;gap:var(--gap);margin-top:clamp(70px,10vh,120px)}
.pg-row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap)}
.pg-row img,.pg-row video,.pg-ph{display:block;width:100%;aspect-ratio:1196/1671;object-fit:cover;background:var(--block);box-shadow:0 30px 60px -36px rgba(30,60,120,.45)}
/* a row of wide images (character sheets): same two-card row, landscape shape */
.pg-row.is-wide img{aspect-ratio:2000/1129}
/* a full film in the gallery: whole 9:16 frame, cover + play button (same button as the episodes) */
.pg-film{position:relative;aspect-ratio:9/16;background:#000;overflow:hidden;box-shadow:0 30px 60px -36px rgba(30,60,120,.45)}
.pg-row .pg-film video{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;box-shadow:none}
.pg-film.playing .ep-play{display:none}
/* a title strip: the full grid width, long and low (6:1), centred in equal air above and below */
.pg-row img.pg-strip{aspect-ratio:6/1}
.pg-row:has(.pg-strip){margin-block:clamp(28px,4vw,56px)}
.pg-row:has(.pg-strip):first-child{margin-top:0}
/* a row of square images: same two-card row, square shape */
.pg-row.is-square img{aspect-ratio:1}
/* a two-image row spans the full width too, so its images are larger and close the grid's edges */

/* ---------- next-project teaser ---------- */
.p-next{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:clamp(24px,4vw,64px);align-items:start;margin-top:clamp(140px,22vh,260px);margin-bottom:-120px}
.pn-name{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(28px,2.6vw,46px);line-height:1.05;max-width:12ch;padding-top:4px}
/* the top of the next poster peeks up from the bottom edge */
.pn-media{display:block;width:calc(min(100vh - 170px,920px) * 9 / 16);max-width:70vw;height:46vh;background:var(--block) top center/cover no-repeat;box-shadow:0 40px 80px -40px rgba(30,60,120,.45);transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s;filter:brightness(.85)}
.p-next:hover .pn-media{transform:translateY(-14px);filter:brightness(1)}
.pn-right{justify-self:end;display:grid;justify-items:end;gap:18px;text-align:right;padding-top:4px}
.pn-link{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(28px,2.6vw,46px);line-height:1.05;white-space:nowrap}
.pn-link span,.pn-back span{display:inline-block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.pn-link:hover span{transform:translateX(6px)}
.pn-back{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);transition:color .3s}
.pn-back:hover{color:var(--ink)}
.pn-back b{font-family:var(--display);font-style:italic;font-weight:500;font-size:16px;letter-spacing:0;text-transform:none}
.pn-back:hover span{transform:translateX(-5px)}

/* ---------- next-project transition: the page fades, the teaser poster flies into the next hero ---------- */
#pg-project .page-in{transition:opacity .45s ease}
#pg-project.flipping .page-in{opacity:0}
.flip{position:fixed;z-index:40;pointer-events:none;background:var(--block) top center/cover no-repeat;box-shadow:0 40px 80px -40px rgba(30,60,120,.45)}

@media (max-width:900px){
  .p-top{grid-template-columns:1fr auto;row-gap:28px;min-height:0;margin-top:0;align-items:end}
  .p-media{grid-column:1/-1;grid-row:2;height:auto;width:min(420px,100%);justify-self:center}
  .p-media.is-wide{width:100%}
  .p-media.is-episodes{width:100%;min-width:0;justify-content:center}
  .ep{flex:1 1 0;min-width:0;max-width:340px}   /* min-width:0 — don't let the videos' own size widen the page */
  .ep-screen{height:auto;width:100%}
  .ep-play{width:48px;height:48px;margin:-24px 0 0 -24px}
  .ep-play svg{width:18px;height:18px}
  .p-year{grid-column:2;grid-row:1}
  .p-grid{grid-template-columns:1fr 1fr}
  .p-info{grid-column:1/-1}
  .p-next{grid-template-columns:1fr auto;row-gap:24px}
  .pn-media{grid-column:1/-1;grid-row:2;justify-self:center;width:min(420px,100%);height:38vh}
}
/* phones: the rows keep the same composition as on desktop (three small / two big, strips full width),
   so pairs, synced clips and wide/square rows stay together — just a tighter gap and smaller play buttons */
@media (max-width:600px){
  .p-gallery{--gap:4px}
  .pg-row:has(.pg-strip){margin-block:22px}
  .pg-row:has(.pg-strip):first-child{margin-top:0}
  .pg-film .ep-play{width:38px;height:38px;margin:-19px 0 0 -19px}
  .pg-row[data-cols="3"] .pg-film .ep-play{width:30px;height:30px;margin:-15px 0 0 -15px}
  .pg-film .ep-play svg{width:14px;height:14px;margin-left:2px}
}