/* Consuming V6 — real media shelves, nothing invented for the sake of a card. */
.media-top { padding-bottom:clamp(54px,7vw,90px); }
.media-top h1 { max-width:780px; }
.media-top .page-intro { max-width:680px; }
.media-index { background:#fff; scroll-margin-top:0; }
.media-index-inner { display:flex; align-items:center; gap:clamp(12px,2.8vw,38px); flex-wrap:wrap; padding-block:20px; }
.media-index-label { color:var(--text-muted); text-transform:uppercase; letter-spacing:.12em; font-size:.67rem; font-weight:600; margin-right:8px; }
.media-index a { font-size:.91rem; font-weight:500; text-decoration:none; border-bottom:1px solid transparent; transition:color .2s,border-color .2s; white-space:nowrap; }
.media-index a:hover { color:var(--accent); border-bottom-color:var(--accent); }
.media-index a span { color:#a8a8a8; font-size:.73rem; margin-right:4px; font-variant-numeric:tabular-nums; }
.media-shelf { scroll-margin-top:22px; padding-block:clamp(70px,8.3vw,117px); }
.media-shelf-heading { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-bottom:35px; }
.media-shelf-heading h2,.media-split-heading h2 { margin-top:12px; font-size:clamp(2.3rem,4.4vw,3.7rem); letter-spacing:-.06em; line-height:1.12; }
.media-shelf-heading > p,.media-split-heading > p:not(.page-eyebrow):not(.media-sidenote) { max-width:420px; color:var(--text-secondary); font-size:1.03rem; line-height:1.75; }
.music-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
.music-feature { min-height:328px; border-radius:19px; padding:clamp(24px,3.3vw,38px); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; position:relative; }
.music-feature-song { background:#f1ece6; color:#221d19; }
.music-feature-playlist { background:#252724; color:#f7f6f1; }
.music-feature-top { display:flex; align-items:start; justify-content:space-between; gap:14px; font-size:.7rem; letter-spacing:.12em; font-weight:600; text-transform:uppercase; }
.music-feature-top svg { flex:none; }
.music-feature-info { margin-top:40px; position:relative; z-index:1; }
.music-feature-label { font-size:.8rem; color:#746b62; }
.music-feature-playlist .music-feature-label { color:#c0c3bd; }
.music-feature h3 { max-width:390px; font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.18; letter-spacing:-.05em; margin-top:10px; }
.music-feature-info > p:last-child { margin-top:9px; font-size:.89rem; color:#665f58; }
.music-feature-playlist .music-feature-info > p:last-child { color:#c0c3bd; }
.music-link-state { display:inline-flex; align-items:center; align-self:flex-start; min-height:29px; margin-top:28px; font-size:.79rem; font-weight:500; border-bottom:1px solid currentColor; opacity:.68; }
a.music-link-state { opacity:1; text-decoration:none; transition:transform .2s ease; }
a.music-link-state:hover { transform:translateX(3px); }
.media-status { border:1px solid var(--border); border-radius:19px; padding:clamp(22px,2.5vw,32px); background:#fff; min-width:0; }
.music-feature-grid + .media-status { margin-top:22px; }
.media-status-top { display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:18px; }
.media-status-top h3 { font-size:1.14rem; letter-spacing:-.027em; }
.media-status-top > span { font-size:.77rem; color:var(--text-muted); white-space:nowrap; }
.media-status-tabs { display:flex; align-items:center; gap:5px; padding:4px; border-radius:12px; background:#f5f5f4; width:fit-content; max-width:100%; }
.media-status-tabs button { appearance:none; border:none; border-radius:9px; background:transparent; min-height:38px; padding:7px 15px; color:#6d6d6d; font:500 .86rem/1.25 var(--font); white-space:nowrap; cursor:pointer; transition:background .2s ease,color .2s ease,box-shadow .2s ease; }
.media-status-tabs button[aria-pressed="true"] { background:white; color:var(--text); box-shadow:0 1px 5px rgba(0,0,0,.09); }
.media-status-tabs button:not([aria-pressed="true"]):hover { color:var(--accent); }
.media-status-tabs button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.media-results { margin-top:24px; min-height:102px; }
.media-empty { padding:25px 20px; border:1px dashed #e4e0db; background:#fdfcfb; border-radius:12px; display:flex; align-items:center; gap:19px; }
.media-empty-mark { flex:none; width:40px; height:40px; border-radius:50%; border:1px solid #e8e5e2; display:grid; place-items:center; color:#a9a39d; font-size:1.3rem; line-height:1; }
.media-empty p { color:var(--text-secondary); font-size:.9rem; line-height:1.5; }
.media-empty small { display:block; color:var(--text-muted); font-size:.78rem; margin-top:4px; }
.media-split { display:grid; grid-template-columns:minmax(210px,.74fr) minmax(0,1.26fr); gap:clamp(35px,8vw,110px); align-items:start; }
.media-split-heading > p:not(.page-eyebrow) { margin-top:17px; max-width:350px; }
.media-split-heading > .media-sidenote { margin-top:23px; font-size:.86rem; color:var(--text-muted); }
.media-sidenote strong { color:var(--text); font-weight:600; }
.media-list { display:grid; gap:0; border-top:1px solid var(--border); }
.media-list-entry { display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:15px; border-bottom:1px solid var(--border); padding:18px 0; }
.media-item-art { background:#f3f1ee; display:grid; place-items:center; width:48px; height:58px; border-radius:6px; overflow:hidden; font-size:1.16rem; color:#9e8d80; font-weight:600; }
.media-item-art img { width:100%; height:100%; object-fit:cover; }
.media-item-text h4 { font-size:1.03rem; font-weight:600; margin:0; letter-spacing:-.03em; }
.media-item-text h4 a { text-decoration:none; }
.media-item-text h4 a:hover { color:var(--accent); text-decoration:underline; }
.media-item-text p { color:var(--text-muted); font-size:.84rem; margin-top:5px; line-height:1.5; }
.media-item-text .media-item-note { margin-top:8px; font-size:.9rem; color:var(--text-secondary); }
.ps2-stamp { max-width:350px; background:#1c1f2c; color:#f9f9ff; border-radius:14px; margin-top:33px; padding:24px; min-height:190px; position:relative; overflow:hidden; }
.ps2-stamp > div:first-child { display:flex; flex-direction:column; align-items:flex-start; position:relative; z-index:1; }
.ps2-stamp-label { color:#aab0c5; font-size:.64rem; font-weight:600; letter-spacing:.12em; }
.ps2-stamp strong { font-size:4rem; font-weight:500; letter-spacing:-.13em; line-height:1.2; margin-top:11px; }
.ps2-stamp strong span { color:#ed925e; font-size:.61em; vertical-align:top; }
.ps2-stamp > p { font-size:.82rem; color:#c1c4d0; margin-top:14px; }
.ps2-controller { position:absolute; right:16px; top:17px; color:#b4bad0; display:flex; gap:6px; font-size:1.08rem; }
.lego-stamp { width:126px; height:88px; position:relative; margin-top:27px; transform:rotate(-7deg); }
.lego-body { position:absolute; left:6px; top:24px; height:57px; width:112px; background:#d86a3c; border-radius:6px; box-shadow:0 8px 0 #a94725; }
.lego-stud-row { position:absolute; z-index:1; left:12px; right:12px; top:14px; display:flex; justify-content:space-between; }
.lego-stud-row i { width:17px; height:12px; background:#f28a5c; border:1.5px solid #b95831; border-radius:4px 4px 1px 1px; }
.media-recommend-section { background:#fbf9f6; padding-block:clamp(66px,8.3vw,110px); }
.media-recommend-inner { display:flex; justify-content:space-between; align-items:end; gap:55px; }
.media-recommend-section h2 { font-size:clamp(2.1rem,4.1vw,3.7rem); line-height:1.11; letter-spacing:-.05em; margin-top:15px; }
.media-recommend-section .ending-dot { color:var(--accent); }
.media-recommend-section p:not(.page-eyebrow) { max-width:560px; margin-top:16px; color:var(--text-secondary); font-size:1.03rem; line-height:1.75; }
.media-recommend-action { display:flex; flex-direction:column; align-items:start; gap:10px; flex:none; padding-bottom:2px; }
.media-recommend-action .btn { gap:14px; }
.media-recommend-action > span { color:var(--text-muted); font-size:.77rem; }
@media(max-width:950px){
  .media-split { grid-template-columns:1fr; gap:27px; }
  .media-split-heading > p:not(.page-eyebrow) { max-width:590px; }
  .media-recommend-inner { flex-direction:column; align-items:start; gap:25px; }
}
@media(max-width:650px){
  .media-index-inner { gap:14px 17px; padding-block:22px; }
  .media-index-label { width:100%; }
  .media-shelf-heading { display:block; }
  .media-shelf-heading > p { margin-top:14px; }
  .music-feature-grid { grid-template-columns:1fr; }
  .music-feature { min-height:280px; }
  .media-status-tabs { width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .media-status-tabs button { padding:8px 6px; white-space:normal; font-size:.78rem; }
  .media-results { margin-top:18px; }
  .media-empty { padding:20px 15px; gap:13px; }
  .media-empty p { font-size:.86rem; }
  .media-recommend-action,.media-recommend-action .btn { width:100%; }
}
@media(prefers-reduced-motion:reduce){
  .media-index a,.media-status-tabs button,a.music-link-state { transition:none; }
}