/* V12 — the media display shares the scale and rhythm of the five project rows. */
#collections-root { min-width:0; }
.home-media-section { position:relative; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:4.5%; padding:110px 6.5%; min-height:760px; border-bottom:1px solid var(--line); scroll-margin-top:0; }
.home-media-copy { opacity:1!important; transform:none!important; }
.home-media-copy .project-description { font-size:13px; }
.home-media-tabs { display:flex; gap:24px; margin-top:32px; width:max-content; max-width:100%; border-bottom:1px solid var(--line); }
.home-media-tab { position:relative; display:flex; align-items:center; gap:10px; padding:12px 0; font-family:inherit; font-size:13px; font-weight:500; line-height:1.5; color:var(--muted); background:none; white-space:nowrap; }
.home-media-tab:after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.home-media-tab[aria-selected="true"] { color:var(--ink); }
.home-media-tab[aria-selected="true"]:after { transform:scaleX(1); }
.home-media-tab>span { font:10px/1 var(--mono); color:var(--muted); }
.home-media-instruction { margin:20px 0 0; color:var(--muted); font-size:12px; line-height:1.85; }
.home-media-touch-instruction,.home-media-reduced-instruction { display:none; }
.home-media-content { min-width:0; }
.home-media-panel[hidden] { display:none; }
.home-media-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 20px; }
.home-media-piece { min-width:0; }
.home-media-preview,.home-media-image { display:block; position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; padding:0; border:0; border-radius:2px; background:var(--surface); text-align:left; isolation:isolate; }
.home-media-preview>img,.home-media-image>img,.home-media-preview>video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.home-media-preview>img,.home-media-image>img { transition:transform .6s cubic-bezier(.16,1,.3,1); }
.home-media-preview>video { opacity:0; pointer-events:none; }
.home-media-preview.is-playing>video { opacity:1; }
.home-media-duration { position:absolute; right:10px; top:10px; padding:5px 6px; color:#fff; background:#0d1114a6; font:10px/1 var(--mono); letter-spacing:.4px; pointer-events:none; }
.home-media-preview-cue { position:absolute; left:11px; bottom:11px; display:flex; align-items:center; gap:8px; padding:7px 10px; background:#0d1114b8; color:#fff; font-size:12px; line-height:1.3; pointer-events:none; }
.home-media-play-icon { width:10px; font-size:10px; line-height:1; text-align:center; }
.home-media-preview.is-playing .home-media-preview-cue { background:#0d1114d9; }
.home-media-preview:is(:hover,:focus-visible)>img,.home-media-image:is(:hover,:focus-visible)>img { transform:scale(1.025); }
.home-media-preview.is-playing>img { transform:none; }
.home-media-image-cue { position:absolute; right:11px; bottom:11px; display:grid; place-items:center; width:34px; height:34px; color:#fff; background:#0d1114b8; font-size:21px; opacity:0; transform:translateY(5px); transition:opacity .2s,transform .3s; }
.home-media-image:is(:hover,:focus-visible) .home-media-image-cue { opacity:1; transform:none; }
.home-media-caption { display:flex; gap:9px; justify-content:space-between; align-items:flex-start; padding-top:12px; }
.home-media-caption>div { min-width:0; }
.home-media-caption h3 { margin:0; font-size:14px; font-weight:500; line-height:1.5; color:var(--ink); }
.home-media-caption p { margin:4px 0 0; font-size:12px; line-height:1.5; color:var(--muted); }
.home-media-detail { display:inline-flex; gap:5px; align-items:center; flex-shrink:0; padding:2px 0; font-size:12px; line-height:1.6; color:var(--muted); background:none; white-space:nowrap; }
.home-media-detail>span:last-child { display:inline-block; font-size:15px; transition:transform .3s; }
.home-media-detail:is(:hover,:focus-visible) { color:var(--accent); }
.home-media-detail:is(:hover,:focus-visible)>span:last-child { transform:translate(2px,-2px); }
.home-music-player { display:grid; grid-template-columns:54px minmax(98px,auto) minmax(180px,1fr) auto; align-items:center; gap:14px; border-top:1px solid var(--line); padding-top:22px; margin-top:26px; scroll-margin-top:35px; }
.home-music-cover { display:block; width:54px; height:54px; object-fit:cover; border-radius:2px; }
.home-music-copy { min-width:0; }
.home-music-copy>span { color:var(--muted); font:9px/1.4 var(--mono); letter-spacing:.6px; white-space:nowrap; }
.home-music-copy h3 { margin:5px 0 0; font-weight:500; color:var(--ink); font-size:15px; line-height:1.4; white-space:nowrap; }
.home-music-player audio { display:block; width:100%; min-width:0; height:36px; color-scheme:light; }
html[data-theme="dark"] .home-music-player audio { color-scheme:dark; }
.home-media-status { margin:0; font-size:12px; line-height:1.65; color:var(--muted); }
.home-media-status:not(:empty) { margin-top:12px; }
.home-media-section :is(button,audio):focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
@media(min-width:1600px) { .home-media-section { padding-left:max(6.5%,calc((100vw - 1450px)/2)); padding-right:max(6.5%,calc((100vw - 1450px)/2)); } }
@media(max-width:1100px) {
  .home-media-section { gap:3%; padding-left:6%; padding-right:4%; min-height:690px; }
  .home-media-grid { gap:24px 16px; }
  .home-media-caption { gap:6px; }
  .home-media-caption h3 { font-size:13px; }
  .home-media-caption .home-media-detail>span:first-child { display:none; }
  .home-music-player { grid-template-columns:46px 1fr auto; gap:12px; }
  .home-music-cover { width:46px; height:46px; }
  .home-music-player audio { grid-column:1 / -1; grid-row:2; }
}
@media(max-width:760px) {
  .home-media-section { grid-template-columns:1fr; align-items:stretch; gap:32px; min-height:0; padding:66px 7% 54px; }
  .home-media-copy .project-description { font-size:13px; }
  .home-media-tabs { margin-top:24px; }
  .home-media-instruction { margin-top:15px; }
  .home-media-grid { gap:24px 14px; }
  .home-media-preview,.home-media-image { aspect-ratio:16/11; }
  .home-media-caption h3 { font-size:14px; }
  .home-media-caption { padding-top:10px; }
  .home-media-caption p { font-size:12px; }
  .home-media-caption .home-media-detail { padding-top:0; }
  .home-media-caption .home-media-detail>span:first-child { display:none; }
  .home-media-duration { top:7px; right:7px; padding:4px 5px; font-size:9px; }
  .home-media-preview-cue { left:7px; bottom:7px; gap:6px; padding:6px 8px; }
  .home-media-preview.is-playing:not(.is-pinned) .home-media-cue-text { font-size:11px; }
  .home-music-player { margin-top:25px; padding-top:20px; grid-template-columns:48px 1fr auto; gap:12px; }
  .home-music-cover { width:48px; height:48px; }
  .home-music-player audio { height:40px; }
  .home-music-copy>span { font-size:10px; }
  .home-music-copy h3 { font-size:16px; }
}
@media(hover:none), (pointer:coarse) { .home-media-hover-instruction { display:none; } .home-media-touch-instruction { display:inline; } }
@media(prefers-reduced-motion:reduce) {
  .home-media-hover-instruction,.home-media-touch-instruction { display:none; }
  .home-media-reduced-instruction { display:inline; }
  .home-media-section *, .home-media-section *:before, .home-media-section *:after { transition:none!important; }
  .home-media-preview>img,.home-media-image>img { transform:none!important; }
}