/* v0.9 — TRACY BONHAM. Distinct from Clara: 5-scene editorial choreography. */
body[data-page="music"] #view.music-cine-tracy .music-project-head {
  padding-top:calc(var(--head-h) + 8px);
  padding-bottom:12px;
  border-bottom:0;
}
#view.music-cine-tracy .music-back{margin-bottom:7px}
#view.music-cine-tracy .music-kicker{margin:0 0 2px}
#view.music-cine-tracy .music-project-head h1{font-size:clamp(24px,2.1vw,31px);margin-bottom:3px}
#view.music-cine-tracy .music-project-meta{margin-bottom:0}
.tracy-cinema {width:100%;max-width:1750px;padding:0 var(--gut);margin:0 auto;}
.tracy-stage {
  position:relative;
  height:min(66svh,710px);
  min-height:320px;
  isolation:isolate;
  overflow:hidden;
  background:#fff;
}
.tracy-frame {
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(22px,3.1vw,52px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .55s ease, visibility 0s .55s;
}
.tracy-frame.active {opacity:1;visibility:visible;pointer-events:auto;transition:opacity .75s ease;}
.tracy-photo {margin:0;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(15px) scale(.99);
  transition:opacity .83s ease,transform 1.03s cubic-bezier(.22,.61,.36,1);
}
.tracy-frame.active .tracy-photo{opacity:1;transform:none}
.tracy-frame.active.duo .tracy-photo:nth-child(2){transition-delay:.16s}
.tracy-frame.active.triptych .tracy-photo:nth-child(2){transition-delay:.13s}
.tracy-frame.active.triptych .tracy-photo:nth-child(3){transition-delay:.30s}
.tracy-photo-button{width:100%;height:100%;display:flex;align-items:center;justify-content:center;cursor:zoom-in;}
.tracy-photo img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.tracy-frame.solo .tracy-photo {height:96%;width:min(86%,900px);}
.tracy-frame.solo.opening .tracy-photo{height:98%}
.tracy-frame.solo.swing .tracy-photo{height:94%;transform:translateX(-14px) scale(.99);}
.tracy-frame.solo.swing.active .tracy-photo{transform:none}
.tracy-frame.solo.closing .tracy-photo{height:96%;transform:translateX(12px) scale(.99);}
.tracy-frame.solo.closing.active .tracy-photo{transform:none}
.tracy-frame.duo .tracy-photo {width:min(43%,690px);height:93%}
.tracy-frame.duo .tracy-photo:nth-child(1){transform:translateX(-18px)}
.tracy-frame.duo .tracy-photo:nth-child(2){transform:translateX(18px)}
.tracy-frame.duo.active .tracy-photo{transform:none}
/* The T is precisely two photos on top + one centered below. */
.tracy-frame.triptych {
  width:min(100%,760px);
  left:50%;right:auto;transform:translateX(-50%);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,58fr) minmax(0,42fr);
  column-gap:clamp(18px,2.3vw,36px);row-gap:clamp(8px,1.2svh,16px);
  place-items:center;
  padding:3px 0;
}
.tracy-frame.triptych .tracy-photo{width:100%;height:100%}
.tracy-frame.triptych .tracy-photo:nth-child(3){grid-column:1/-1;justify-self:center;width:min(100%,380px)}
.tracy-controls{padding:12px 0 16px;border-top:1px solid #e4e4e1;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font:500 12px/1.4 var(--sans);color:#393936;}
.tracy-info{white-space:nowrap;letter-spacing:.015em}
.tracy-transport{display:flex;align-items:center;gap:clamp(12px,1.5vw,23px)}
.tracy-transport button{padding:9px 3px;font:500 12px/1.2 var(--sans);letter-spacing:.035em;white-space:nowrap}
.tracy-transport button:hover{opacity:.55}
.tracy-transport .tracy-arrow{font-size:22px;line-height:1}
.tracy-count{min-width:55px;text-align:center;white-space:nowrap;font:400 13px/1.3 var(--mono)}
.tracy-transport button[aria-pressed="true"]{text-decoration:underline;text-underline-offset:5px}
#view.music-cine-tracy .music-project-next{margin-top:22px}
@media (max-width:760px){
  #view.music-cine-tracy .music-project-head{padding-left:clamp(14px,4vw,22px);padding-right:clamp(14px,4vw,22px)}
  .tracy-cinema{padding:0 clamp(14px,4vw,22px)}
  .tracy-stage{height:min(58svh,540px);min-height:280px}
  .tracy-frame{gap:12px}
  .tracy-frame.duo .tracy-photo{width:calc(50% - 6px);height:82%}
  .tracy-frame.solo .tracy-photo{width:94%;height:96%}
  .tracy-frame.triptych{width:100%;column-gap:10px;row-gap:7px;grid-template-rows:minmax(0,57fr) minmax(0,43fr)}
  .tracy-frame.triptych .tracy-photo:nth-child(3){width:min(64%,240px)}
  .tracy-controls{flex-wrap:wrap;align-items:flex-start;gap:2px 12px}
  .tracy-info{width:100%}
  .tracy-transport{width:100%;justify-content:space-between;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  .tracy-frame,.tracy-photo,.tracy-frame.active .tracy-photo{transition:none!important;transform:none!important}
  .tracy-frame.triptych{transform:translateX(-50%)!important}
}


/* v0.9a — Desktop art-direction correction, Tracy only.
   The 2-photo scene uses the visible image widths instead of oversized
   empty flex cells. The old T scene was too small on wide screens;
   present those three full-frame portraits together as a strong horizontal
   composition instead. Small-screen sequence remains unchanged. */
@media (min-width: 1100px) {
  .tracy-frame.duo { gap:clamp(30px,3.8vw,56px); }
  .tracy-frame.duo .tracy-photo {
    flex:0 1 auto;
    width:auto;
    height:93%;
    aspect-ratio:0.82;
  }
  .tracy-frame.duo .tracy-photo img {width:100%;height:100%;object-fit:contain;}

  .tracy-frame.triptych {
    left:0;
    right:0;
    width:100%;
    transform:none;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:clamp(24px,2.2vw,34px);
    padding:0;
  }
  .tracy-frame.triptych .tracy-photo {
    width:auto;
    flex:0 1 auto;
    aspect-ratio:.82;
  }
  .tracy-frame.triptych .tracy-photo:nth-child(1) {height:80%;}
  .tracy-frame.triptych .tracy-photo:nth-child(2) {height:88%;}
  .tracy-frame.triptych .tracy-photo:nth-child(3) {
    grid-column:auto;
    justify-self:auto;
    width:auto;
    height:82%;
  }
  .tracy-frame.triptych .tracy-photo img {width:100%;height:100%;object-fit:contain;}
}
@media (min-width:1100px) and (prefers-reduced-motion:reduce){
  .tracy-frame.triptych {transform:none!important;}
}


/* v0.9b — Tracy, scene 4 only. The previously left smiling portrait
   becomes the large center anchor. Other two photos frame it as smaller
   companions. Original images, timings and all other scenes untouched. */
@media (min-width:1100px) {
  .tracy-frame.triptych .tracy-photo:nth-child(1) {
    order:2;
    height:min(100%,42vw);
  }
  .tracy-frame.triptych .tracy-photo:nth-child(2) {
    order:1;
    height:min(74%,30vw);
  }
  .tracy-frame.triptych .tracy-photo:nth-child(3) {
    order:3;
    height:min(74%,30vw);
  }
}


/* v0.9d — TRACY FINAL SPACING (title block only; photographs, scenes, controls untouched).
   Desktop/tablet: +10px air between the wordmark and the story title block
   (v0.9c had +25px, v0.9b +0; the extra 15px pushed stage and controls too far down),
   plus calmer, even spacing between back link, rubric, title and sub-line. */
@media (min-width: 761px) {
  body[data-page="music"] #view.music-cine-tracy .music-project-head { padding-top:calc(var(--head-h) + 18px); }
  #view.music-cine-tracy .music-back { margin-bottom:11px; }
  #view.music-cine-tracy .music-kicker { margin:0 0 4px; }
  #view.music-cine-tracy .music-project-head h1 { margin-bottom:5px; }
}

/* v0.9h — Tracy story header only: name subordinate to photographer wordmark. */
@media (min-width:761px) {
  #view.music-cine-tracy .music-project-head h1 {font-size:clamp(22px,1.7vw,25px);}
}

/* v0.9i — Tracy story header only: clearer typographic hierarchy.
   Wordmark stays dominant; story name ~12% smaller (24.5px -> 21.5px at 1440px);
   rubric ARTIST PORTRAITS ~18% smaller (13px -> 10.7px), lighter weight and colour. */
@media (min-width:761px) {
  #view.music-cine-tracy .music-project-head h1 {font-size:clamp(19px,1.49vw,22px);}
  #view.music-cine-tracy .music-kicker {font-size:10.7px;font-weight:400;color:#77776f;letter-spacing:.06em;}
}