/* ============================================================ */
/* JUN ARAKI (SPACE 002) — scoped styles, not loaded on any      */
/* other page. Extends the existing style.css system (tokens,    */
/* Poppins/Lora, .feature/.essay/.full-bleed/.detail-page/       */
/* .final-page) rather than replacing it. Only the components    */
/* YARD E3 has no equivalent for are defined here.                */
/* ============================================================ */

/* ===== PAGE 3 / 12 — PORTRAIT (extends .detail-page) ===== */
.portrait-page{ max-width:760px; padding-top:110px; padding-bottom:80px; }
@media (max-width:720px){ .portrait-page{ padding-top:76px; padding-bottom:54px; } }
.portrait-page .detail-foot{ border-top:none; padding-top:0; margin-top:22px; justify-content:center; gap:10px; }
.portrait-page .cap-title{ font-weight:500; }
.portrait-page .cap-sub{ color:var(--grey); }

/* ===== PAGE 5 / 9 — STUDIO & GALLERY (extend .feature) ===== */
.studio-page .feature-body,
.gallery-page .feature-body{ max-width:640px; margin-bottom:56px; }
.studio-page .feature-body p,
.gallery-page .feature-body p{ font-size:16px; line-height:1.85; color:#151515; margin-bottom:20px; }

.studio-images{
  display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:start;
}
@media (max-width:720px){ .studio-images{ grid-template-columns:1fr; gap:16px; } }
.studio-images .img-frame{ overflow:hidden; }
.studio-images .img-frame img{ width:100%; height:100%; object-fit:cover; }
.studio-images .wide .img-frame{ aspect-ratio:4/3; }
.studio-images .detail .img-frame{ aspect-ratio:1/1; }

.gallery-images{
  display:grid; grid-template-columns:1.6fr 1fr; grid-template-rows:auto auto; gap:20px;
}
.gallery-images .primary{ grid-row:1 / 3; }
.gallery-images .primary .img-frame{ aspect-ratio:3/4; overflow:hidden; }
.gallery-images .primary .img-frame img{ width:100%; height:100%; object-fit:cover; }
/* secondary images keep their own natural aspect ratio — no forced crop */
.gallery-images .secondary .img-frame img{ width:100%; height:auto; display:block; }
@media (max-width:720px){
  .gallery-images{ grid-template-columns:1fr; grid-template-rows:auto; }
  .gallery-images .primary{ grid-row:auto; }
}

/* Print safety: never let a section (portrait images especially) split
   mid-block across a physical page boundary. */
main > section{ break-inside: avoid; }

/* ===== PAGE 8 — TOKYO/NIGHT (contained, uncropped, captioned — matches
   the approved PDF's plain editorial-photo treatment, not a dark full-bleed
   spread) ===== */
.night-images{
  display:grid; grid-template-columns:1.6fr 1fr; gap:24px; align-items:start;
  max-width:1100px; margin:0 auto; padding:90px 32px;
}
.night-images .img-frame{ aspect-ratio:1/1; overflow:hidden; }
.night-images .img-frame img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:720px){ .night-images{ grid-template-columns:1fr; gap:20px; padding:60px 20px; } }

/* Small caption line under editorial image groups (studio / gallery / night) */
.img-cap{
  margin-top:10px; font-family:'Poppins', sans-serif; font-weight:500; font-size:10.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--grey);
}

/* ===== PAGE 6 / 10 — SELECTED WORKS (two density variants) ===== */
.selected-works{ max-width:1100px; margin:0 auto; padding:90px 32px; }
@media (max-width:720px){ .selected-works{ padding:60px 20px; } }
.selected-works .feature-head{ margin-bottom:48px; }

.works-grid{ display:grid; gap:28px; }
.works-grid figure{ margin:0; }
.works-grid img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; }
.works-grid figcaption{
  margin-top:14px; font-family:'Poppins', sans-serif; font-weight:500; font-size:13px; letter-spacing:0.02em;
}

/* Variant A — dominant/asymmetric (page 6, 4 works) */
.works-grid.dominant{
  grid-template-columns:repeat(6, 1fr);
}
.works-grid.dominant li:nth-child(1){ grid-column:span 4; grid-row:span 2; }
.works-grid.dominant li:nth-child(2){ grid-column:span 2; }
.works-grid.dominant li:nth-child(3){ grid-column:span 2; }
.works-grid.dominant li:nth-child(4){ grid-column:span 2; align-self:end; }
@media (max-width:720px){
  .works-grid.dominant{ grid-template-columns:1fr; gap:20px; }
  .works-grid.dominant li{ grid-column:auto !important; grid-row:auto !important; }
}

/* Variant B — dense catalogue/contact-sheet (page 10, 7 works) */
.works-grid.catalogue{ grid-template-columns:repeat(4, 1fr); gap:20px; }
.works-grid.catalogue figcaption{ font-size:12px; color:var(--grey); font-weight:500; }
@media (max-width:720px){ .works-grid.catalogue{ grid-template-columns:repeat(2, 1fr); gap:16px; } }

.works-grid li{ list-style:none; }

/* ===== PAGE 8 — INTERVIEW ===== */
.interview-page{ max-width:720px; margin:0 auto; padding:90px 32px; }
@media (max-width:720px){ .interview-page{ padding:60px 20px; } }
.interview-page .feature-head{ margin-bottom:48px; }
.qa-pair{ margin-bottom:34px; }
.qa-pair .who{
  font-family:'Poppins', sans-serif; font-weight:600; font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--grey); margin-bottom:8px;
}
.qa-pair.araki .who{ color:var(--ink); }
.qa-pair p{ font-size:16px; line-height:1.75; color:#151515; }
.qa-pair.araki p{ font-family:'Lora', serif; font-style:italic; }

/* ===== PAGE 11 — COMMERCIAL LIST (extends .feature) ===== */
.commercial-list{
  display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:36px; padding-top:26px;
  border-top:1px solid var(--hair); list-style:none;
}
.commercial-list li{
  font-family:'Poppins', sans-serif; font-weight:500; font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--grey);
}

/* ===== PAGE 13 — END PAGE credits (extends .final-page) ===== */
.final-mid{ max-width:640px; }
.final-credits{
  display:flex; flex-direction:column; gap:6px; margin-top:22px;
}
.final-credits span{
  font-family:'Poppins', sans-serif; font-size:10.5px; letter-spacing:0.1em; color:var(--grey);
  white-space:nowrap;
}
.final-credits span b{ color:var(--ink); font-weight:600; letter-spacing:0.14em; text-transform:uppercase; margin-right:8px; }
@media (max-width:720px){
  .final-mid{ max-width:100%; }
  .final-credits span{ white-space:normal; }
}