/* assets/video-page.css
   Shared, cached-once stylesheet for every auto-generated /youtube/<slug>/
   and /instagram/<slug>/ page. Deliberately much simpler than index.html's
   full "manuscript" theme (no custom cursor, no canvas/3D, no clip-path
   artwork) - this file has to stay small and boring because it ships on
   every one of what may become hundreds of pages. It reuses the same colour
   palette and fonts so it still reads as the same site. */

:root {
  --paper: #e8d9c8;
  --charcoal: #1a1512;
  --ink: #0d0b0a;
  --gold: #b8803a;
  --gold-2: #d4a74e;
  --muted: #8b7860;
  --display: "Cormorant Garamond", Georgia, serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--charcoal); color: var(--paper); }
body { font-family: var(--body); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
main { flex: 1; }

.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.5rem; border-bottom: 1px solid rgba(180, 130, 50, .2);
}
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.brand img { border-radius: 50%; }
.site-header nav { display: flex; flex-wrap: wrap; gap: .3rem; }
.site-header nav a { padding: .5rem .8rem; border-radius: 4px; font-size: .9rem; }
.site-header nav a:hover, .site-header nav a:focus-visible { background: rgba(232, 217, 200, .08); color: var(--gold-2); }

.video-page { width: min(760px, 100%); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: .75rem; }
.crumbs a:hover { color: var(--gold-2); }
h1 { font-family: var(--display); font-size: 2.2rem; line-height: 1.15; font-weight: 700; margin-bottom: .4rem; }
h2 { font-family: var(--display); font-size: 1.5rem; margin-bottom: 1rem; }
.meta { color: var(--muted); font-size: .9rem; margin-bottom: 1.5rem; }

.video-shell {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 8px; overflow: hidden; background: #000; margin-bottom: 1.25rem;
}
.video-shell.is-vertical { aspect-ratio: 9 / 16; max-width: 400px; margin-inline: auto; }
.video-shell iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-shell .embed-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-shell.is-facade { cursor: pointer; }
.play-badge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: #fff; background: rgba(0, 0, 0, .25); transition: background .2s;
}
.video-shell.is-facade:hover .play-badge, .video-shell.is-facade:focus-visible .play-badge { background: rgba(0, 0, 0, .1); }
.video-shell:not(.is-facade) .play-badge { display: none; }

.btn { display: inline-block; padding: .7rem 1.2rem; border: 1px solid var(--gold); border-radius: 4px; font-weight: 700; margin-bottom: 1.75rem; }
.btn:hover, .btn:focus-visible { background: var(--gold); color: var(--ink); }

.caption { color: #d8cab3; font-size: 1.02rem; }
.caption p { margin-bottom: 1rem; }
.caption p:last-child { margin-bottom: 0; }

.related { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(180, 130, 50, .2); }
.related-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.related-grid.is-vertical { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.related-grid img { border-radius: 6px; margin-bottom: .4rem; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.related-grid.is-vertical img { aspect-ratio: 9 / 16; }
.related-grid span { font-size: .85rem; display: block; line-height: 1.3; }
.related-grid a:hover span, .related-grid a:focus-visible span { color: var(--gold-2); }

.site-footer { padding: 1.5rem; text-align: center; color: var(--muted); font-size: .85rem; border-top: 1px solid rgba(180, 130, 50, .15); }
.site-footer a:hover { color: var(--gold-2); }

:is(a, [tabindex]):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 600px) {
  h1 { font-size: 1.7rem; }
  .video-page { padding: 1.75rem 1rem 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0s !important; }
}