[id] { scroll-margin-top:100px; }
.media-hero,.media-grid { display:grid; gap:22px; }
.media-grid { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.media-hero { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; padding:24px; background:#222629; border:1px solid #555; border-radius:26px; }
.media-hero .media-lead { grid-row:span 2; }
.media-hero > *,.media-grid > * { min-width:0; }
.media-followup { margin-top:22px; }
.holodeck-figure { min-width:0; overflow:hidden; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:20px; }
.holodeck-open { display:block; position:relative; width:100%; padding:0; border:0; background:#f8f8f8; color:var(--ink); cursor:zoom-in; }
.holodeck-open img { display:block; width:100%; height:auto; }
.holodeck-video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:#000; }
.holodeck-open::after { content:"↗"; display:grid; place-items:center; position:absolute; right:12px; bottom:12px; width:38px; height:38px; color:#000; background:#fff; border:1px solid #ccc; border-radius:50%; font:700 1.1rem var(--ui); }
.holodeck-open:hover::after { background:var(--accent); color:#fff; border-color:var(--accent); }
.holodeck-open:focus-visible { outline:3px solid var(--accent); outline-offset:-5px; }
.holodeck-figure figcaption { padding:clamp(18px,2.1vw,26px); }
.holodeck-figure .label { display:block; color:var(--accent); font-size:.65rem; line-height:1.7; letter-spacing:.12em; }
.holodeck-figure h3 { margin-top:10px; color:var(--ink); font-size:clamp(1.25rem,1.8vw,1.7rem); font-weight:750; line-height:1.18; letter-spacing:-.025em; text-wrap:balance; }
.holodeck-figure figcaption p { max-width:66ch; margin-top:12px; color:var(--muted); font-size:.96rem; line-height:1.6; }
.media-sequence .holodeck-open img { min-height:160px; object-fit:contain; }
.media-panel { min-width:0; display:grid; gap:20px; padding:22px; background:#202427; border:1px solid #555; border-radius:24px; }
.media-panel-heading { padding:4px 2px 8px; }
.media-panel-heading .label { display:block; font-size:.69rem; }
.media-panel-heading h3 { max-width:20ch; margin-top:16px; color:#fff; font-size:clamp(1.6rem,2.4vw,2.2rem); letter-spacing:-.03em; line-height:1.12; }
.asset-needed { min-width:0; display:flex; flex-direction:column; justify-content:center; gap:18px; min-height:230px; padding:30px; background:#f7f6fa; border:1px dashed #aaa3c2; border-radius:20px; }
.asset-needed .label { display:block; font-size:.65rem; line-height:1.7; letter-spacing:.1em; }
.asset-needed h3 { max-width:28ch; color:var(--ink); font-size:clamp(1.35rem,2.1vw,1.9rem); letter-spacing:-.025em; line-height:1.18; }
.asset-needed p { max-width:60ch; color:var(--muted); font-size:.95rem; line-height:1.6; }
.provenance-flow .asset-needed { padding:24px; }
.holodeck-viewer { width:min(1500px,96vw); max-width:96vw; max-height:94vh; max-height:94dvh; overflow:auto; margin:auto; padding:14px 18px 18px; color:#fff; background:var(--section-dark); border:1px solid #555; border-radius:18px; }
.holodeck-viewer::backdrop { background:rgba(10,12,14,.9); }
.holodeck-viewer-toolbar { display:flex; justify-content:flex-end; gap:10px; position:sticky; top:-14px; z-index:1; padding:0 0 12px; background:var(--section-dark); }
.holodeck-viewer-toolbar button { min-height:44px; padding:8px 17px; color:#fff; background:transparent; border:1px solid #888; border-radius:999px; font:600 .85rem var(--ui); cursor:pointer; }
.holodeck-viewer-toolbar button:hover { background:#303437; }
.holodeck-viewer button:focus-visible,.holodeck-viewer-canvas:focus-visible { outline:3px solid #a99eff; outline-offset:2px; }
.holodeck-viewer-canvas { max-height:70vh; max-height:70dvh; overflow:auto; border-radius:8px; background:#fff; }
.holodeck-viewer img { display:block; width:100%; height:auto; max-height:70vh; max-height:70dvh; object-fit:contain; }
.holodeck-viewer.is-zoomed img { width:auto; max-width:none; height:auto; max-height:none; }
.holodeck-viewer-caption { max-width:1000px; margin:16px auto 0; color:#ccc; font-size:.88rem; line-height:1.55; }
@media(max-width:900px) {
  .media-hero { grid-template-columns:minmax(0,1fr); }
  .media-hero .media-lead { grid-row:auto; }
  .media-grid { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:600px) {
  .media-hero { padding:14px; gap:18px; }
  .media-panel { padding:14px; gap:18px; }
  .media-grid { gap:18px; }
  .asset-needed { min-height:200px; padding:24px; }
  .holodeck-viewer { padding:12px 10px 16px; }
  .holodeck-viewer-toolbar { top:-12px; }
  .holodeck-viewer-caption { padding-inline:6px; font-size:.8rem; }
}