/* ==========================================================================
   MASKED HANMA · program.css — shared layout for the program pages (Bulk, Cut)
   Theme colours live in bulk.css / cut.css.
   ========================================================================== */

/* ---------- program hero ---------- */
.phero {
  position: relative;
  overflow: clip;
  isolation: isolate;
  background: var(--hero-bg, var(--bg));
  border-bottom: var(--bw) solid var(--line);
}
.phero__inner {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  min-height: clamp(600px, calc(90vh - var(--header-h)), 860px);
  padding-block: 56px 88px;
  pointer-events: none;
}
.phero__copy { width: min(52%, 640px); pointer-events: auto; }
.phero__eyebrow { display: inline-block; padding: 6px 10px; margin-bottom: 20px; background: var(--fg); color: var(--bg); }
.phero__title { display: grid; gap: 0.18em; }
.phero__big {
  display: block;
  font-size: clamp(4.6rem, 1rem + 10.5vw, 11.5rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0.05em 0.05em 0 var(--big-shadow, var(--ink));
  animation: slam 0.7s cubic-bezier(0.2, 0.9, 0.25, 1) both;
  transform-origin: 0 80%;
}
.phero__sub {
  display: block;
  font-size: clamp(1.5rem, 0.9rem + 2.4vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
}
.phero__lead { margin-top: 26px; max-width: 36ch; font-weight: 500; }
.phero .btn-row { margin-top: 30px; }

.phero__art { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.phero__fig {
  position: absolute;
  bottom: 0;
  right: max(2vw, calc((100vw - var(--max)) / 2 + 20px));
  z-index: 3;
  height: 92%;
  width: auto;
  max-width: none;
  animation: rise 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) both 0.1s;
}
.phero__kanji {
  position: absolute;
  top: 2%;
  right: 0.5%;
  z-index: 1;
  writing-mode: vertical-rl;
  font-family: var(--f-brush);
  font-size: clamp(8rem, 3rem + 15vw, 21rem);
  line-height: 0.85;
  color: var(--kanji, var(--accent));
}

/* ---------- gallery (duotone -> colour on hover) ---------- */
.gallery {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto auto;
  gap: var(--gap);
}
.g { margin: 0; }
.g--tall { grid-row: span 2; }
.g img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2); transition: filter 0.45s ease; }
.g::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--duo, var(--accent));
  mix-blend-mode: var(--duo-blend, multiply);
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.g--tall { aspect-ratio: 4 / 5; }
.g:not(.g--tall) { min-height: 240px; }
.g figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 5px 10px;
  background: var(--fg);
  color: var(--bg);
  font-stretch: 75%;
  font-weight: 800;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gallery--five { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); }
.gallery--five .g:not(.g--tall) { aspect-ratio: 3 / 4; min-height: 0; }
.gallery--five .g--tall { aspect-ratio: auto; }
.gallery__sfx { top: -30px; right: 6%; }

/* ---------- cross-link CTA ---------- */
.cross {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: var(--bw) solid var(--line);
  background: var(--cross-bg, var(--accent));
  color: var(--cross-fg, var(--accent-fg));
}
.cross__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  padding-block: clamp(80px, 11vw, 160px);
}
.cross__title { font-size: clamp(2.4rem, 1rem + 5.4vw, 5.8rem); line-height: 0.92; text-transform: uppercase; }
.cross__title span { display: block; color: var(--cross-em, var(--bg)); }
.cross .btn-row { justify-content: flex-end; }
.cross__kanji {
  position: absolute;
  right: -0.08em;
  top: 50%;
  z-index: -1;
  transform: translateY(-50%);
  font-family: var(--f-brush);
  font-size: clamp(10rem, 30vw, 28rem);
  line-height: 0.8;
  opacity: 0.16;
  white-space: nowrap;
}

.sec--alt { background: var(--alt-bg, var(--panel)); border-block: var(--bw) solid var(--line); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  /* mobile hero: title -> figure -> text -> buttons */
  .phero { display: flex; flex-direction: column; }
  .phero__inner, .phero__copy { display: contents; pointer-events: auto; }
  .phero__eyebrow { order: 1; align-self: flex-start; margin: 26px var(--gutter) 14px; }
  .phero__title { order: 2; padding-inline: var(--gutter); }
  .phero__big { font-size: clamp(4.6rem, 23vw, 9rem); }
  .phero__sub { font-size: clamp(1.4rem, 6.4vw, 2.4rem); }
  .phero__art {
    order: 3;
    position: relative;
    inset: auto;
    height: min(118vw, 640px);
    margin-top: 22px;
    border-top: var(--bw) solid var(--line);
    border-bottom: var(--bw) solid var(--line);
  }
  .phero__lead { order: 4; margin: 26px var(--gutter) 0; max-width: 40ch; font-size: 1.125rem; }
  .phero__copy .btn-row { order: 5; margin: 24px var(--gutter) 40px; }
  .phero__fig { right: 50%; transform: translateX(50%); animation: none; height: 94%; }
  .phero__kanji { font-size: clamp(7rem, 32vw, 12rem); }

  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g--tall { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 5; }
  .g:not(.g--tall) { aspect-ratio: 3 / 4; min-height: 0; }
  .gallery--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery--five .g--tall { aspect-ratio: 4 / 5; }
  .cross__inner { grid-template-columns: minmax(0, 1fr); }
  .cross .btn-row { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .phero__copy .btn-row .btn { flex: 1 1 100%; }
  .phero .bubble { font-size: 0.8rem; padding: 0.85em 1.1em; max-width: 58%; }
  .g figcaption { left: 8px; bottom: 8px; padding: 4px 8px; }
  .cross .btn-row .btn { flex: 1 1 100%; }
  .cross__kanji { font-size: 12rem; }
}
@media (hover: hover) {
  .g:hover img { filter: none; }
  .g:hover::after { opacity: 0; }
}

/* phase position within the whole block (bulk = 12 weeks, cut = 10 weeks) */
.phase__bar i.b1 { left: 0; width: 25%; }
.phase__bar i.b2 { left: 25%; width: 41.67%; }
.phase__bar i.b3 { left: 66.67%; width: 25%; }
.phase__bar i.b4 { left: 91.67%; width: 8.33%; }
.phase__bar i.c1 { left: 0; width: 20%; }
.phase__bar i.c2 { left: 20%; width: 50%; }
.phase__bar i.c3 { left: 70%; width: 10%; }
.phase__bar i.c4 { left: 80%; width: 20%; }