/* ============================================================
   Continental7 — Selected Work
   Palette matches continental7.com:
   ink #111827 · white #ffffff · off-white #f9fafb
   grays #6b7280 / #9ca3af / #d1d5db / #e5e7eb · dark line #1f2937
   Display: Bebas Neue · Body: Inter
   ============================================================ */

:root {
  /* One side padding everywhere: breathing room only, no dead space */
  --pad: clamp(1.25rem, 3vw, 3.5rem);
  --ink: #111827;
  --ink-soft: #1f2937;
  --white: #ffffff;
  --offwhite: #f9fafb;
  --gray: #6b7280;
  --gray-light: #9ca3af;
  --line: #e5e7eb;
  --line-dark: #374151;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--white);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.hero-title,
.section-title,
.audit-title,
.contact-title,
.wordmark {
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.01em;
}

/* ============ Header ============ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 1rem var(--pad);
}

.wordmark {
  font-size: 1.35rem;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  gap: 1.75rem;
}

.site-nav a,
.header-link {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray);
  transition: color 0.2s ease;
}

.site-nav a:hover,
.header-link:hover {
  color: var(--ink);
}

@media (max-width: 640px) {
  .site-nav {
    display: none;
  }
}

/* ============ Hero ============ */

.hero {
  padding: clamp(3rem, 6vw, 5.5rem) var(--pad) clamp(2.5rem, 6vw, 4rem);
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.hero-kicker {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gray);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.hero-title {
  font-size: clamp(4rem, 14vw, 11rem);
  text-transform: uppercase;
  color: var(--ink);
}

.hero-sub {
  font-size: clamp(0.7rem, 1.7vw, 1rem);
  color: var(--gray);
  white-space: nowrap;
  margin: clamp(1.75rem, 4vw, 2.75rem) auto 0;
}

@media (max-width: 560px) {
  .hero-sub {
    white-space: normal;
    font-size: 0.9rem;
    max-width: 26em;
    margin-left: auto;
    margin-right: auto;
  }
}

.hero-index {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.hero-index a {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.2s ease;
}

.hero-index a:hover {
  color: var(--gray);
}

.hero-index a:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.9em;
  margin-left: 1.5rem;
  background: var(--line);
}

.index-num {
  display: inline-block;
  margin-right: 0.6em;
  color: var(--gray-light);
  font-weight: 500;
}

@media (max-width: 560px) {
  .hero-index a:not(:last-child)::after {
    display: none;
  }
}

/* ============ Work sections ============ */

.work-section {
  padding: clamp(3.5rem, 8vw, 6rem) var(--pad) 0;
}

.section-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-num {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-light);
}

.section-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  text-transform: uppercase;
}

.section-note {
  font-size: 0.85rem;
  color: var(--gray);
  margin-left: auto;
}

/* ============ Sub-row head (vertical scroller label) ============ */

.subrow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: clamp(2rem, 4vw, 3rem) 0 1.25rem;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}

.subrow-head .section-note {
  margin-left: 0;
}

/* ============ Featured scroller ============ */

.scroller-nav {
  display: flex;
  gap: 0.5rem;
  align-self: center;
}

.scroll-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.scroll-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

@media (max-width: 640px) {
  .scroller-nav {
    display: none; /* swipe on mobile */
  }
}

.scroller {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: 0.75rem;
  scrollbar-width: none; /* Firefox */
}

.scroller::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.scroller > .card {
  /* Exactly 3 full cards per view on desktop, no cropped card */
  flex: 0 0 calc((100% - 3rem) / 3);
  scroll-snap-align: start;
}

@media (max-width: 1000px) {
  .scroller > .card {
    flex-basis: calc((100% - 1.5rem) / 2); /* exactly 2 per view on tablet */
  }
}

@media (max-width: 640px) {
  .scroller > .card {
    flex-basis: 80vw; /* one card at a time, next one peeking */
  }
}

/* ============ See more ============ */

.see-more {
  display: block;
  margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
  padding: 0.8rem 2.4rem;
  border: 1px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.see-more:hover {
  background: var(--ink);
  color: var(--white);
}

/* Button label swaps when the archive is open */
.see-more .see-more-close {
  display: none;
}

.see-more[aria-expanded="true"] .see-more-open {
  display: none;
}

.see-more[aria-expanded="true"] .see-more-close {
  display: inline;
}

/* ============ Archive (revealed by See more) ============ */

.archive {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.archive.revealing {
  animation: archive-in 0.45s ease both;
}

@keyframes archive-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.archive-group {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.archive-cat {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gray);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.7rem;
  margin-bottom: 1.75rem;
}

/* ============ Card grid (archive) ============ */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 1.5rem;
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1500px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============ Cards ============ */

.card-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 1.1rem;
  letter-spacing: -0.01em;
}

.card-meta {
  font-size: 0.85rem;
  color: var(--gray);
  margin-top: 0.3rem;
}

/* ============ Video embeds (self-hosted, native player) ============ */

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
  cursor: pointer;
}

.video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ink);
}

/* Inline YouTube player: the iframe itself never receives clicks,
   only our own controls do, so nothing of YouTube's UI is reachable */
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

/* Vertical (9:16) and portrait (3:4) videos: the frame matches the
   video shape exactly and fills its card. Card width is controlled
   by the containers below, so there is no dead space around them. */
.video-embed.vertical {
  aspect-ratio: 9 / 16;
}

.video-embed.portrait {
  aspect-ratio: 3 / 4;
}

/* Dedicated vertical scroller: its own row, its own sizing, so vertical
   cards are never squeezed into a 16:9-shaped slot. Tighter gap, exactly
   4 full cards per view on desktop, sized generously. */
.scroller.vertical-row {
  gap: 0.9rem;
}

.scroller.vertical-row > .card {
  /* Exactly 4 cards span the row, flush left and right, with the same
     0.9rem gap between every card */
  flex: 0 0 calc((100% - 2.7rem) / 4);
}

@media (max-width: 1000px) {
  .scroller.vertical-row > .card {
    flex-basis: calc((100% - 1.8rem) / 3); /* exactly 3 across on tablet */
  }
}

@media (max-width: 640px) {
  .scroller.vertical-row > .card {
    flex-basis: calc((100% - 0.9rem) / 2); /* exactly 2 across on mobile */
  }
}

/* Archive grid for vertical / portrait cuts: cards sized to match the
   vertical scroller above (same clamp), so See more looks consistent */
.card-grid.tall {
  /* Same geometry as the vertical row above: 4 / 3 / 2 across with the
     same 0.9rem gap, so See more cards match the visible shelf exactly.
     align-items: start so a shorter 3:4 portrait card sitting next to a
     taller 9:16 vertical card doesn't stretch to match it. */
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 0.9rem;
  align-items: start;
}

@media (max-width: 1000px) {
  .card-grid.tall {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .card-grid.tall {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Center play / pause: the one main control */
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  pointer-events: none; /* clicks fall through to the embed, one handler */
  transition: transform 0.2s ease, opacity 0.25s ease;
}

.video-embed:hover .video-play {
  transform: translate(-50%, -50%) scale(1.08);
}

.video-play svg {
  margin-left: 3px;
}

/* While playing, the center button disappears completely. No
   hover-reveal here on purpose: on touch devices tapping "sticks" the
   :hover state (there's no mouse to leave), so a hover-based reveal
   left the button visibly stuck on screen after every tap. */
.video-embed.playing .video-play {
  opacity: 0;
  pointer-events: none;
}

/* ============ Link-out cards (YouTube link only, nothing stored) ============
   For videos we only have a link to, not a file: shows the YouTube
   thumbnail (hotlinked, not downloaded) and opens the real video on
   YouTube in a new tab. No video ever loads on this site, so nothing
   is stored and no YouTube player/branding ever renders here. */
.yt-embed {
  display: block;
}

.yt-badge {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.72);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.yt-embed:hover .yt-badge {
  opacity: 1;
  transform: translateY(0);
}

.yt-embed:hover .video-play {
  transform: translate(-50%, -50%) scale(1.08);
}

/* ============ Custom video controls ============ */

.video-controls {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.vc-btn {
  position: absolute;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.72);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.2s ease, transform 0.2s ease;
}

.vc-btn:hover {
  background: var(--ink);
  transform: scale(1.06);
}

/* Sound: top right. Expand: bottom right. */
.vc-mute {
  top: 0.75rem;
  right: 0.75rem;
}

.vc-fs {
  bottom: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
}

/* Full screen: our own controls stay on top of the fullscreened card,
   the video fills the screen without cropping (letterboxed on black
   for vertical/portrait clips), and the frame itself goes edge to edge. */
.video-embed:fullscreen,
.video-embed.is-fullscreen {
  aspect-ratio: auto;
  width: 100vw;
  height: 100vh;
  background: #000;
}

.video-embed:fullscreen .video-el,
.video-embed.is-fullscreen .video-el {
  object-fit: contain;
}

.video-embed:-webkit-full-screen,
.video-embed.is-fullscreen {
  width: 100vw;
  height: 100vh;
}

.video-embed:fullscreen .video-controls,
.video-embed.is-fullscreen .video-controls {
  z-index: 5;
}

/* Fullscreen keeps the same corners, just further from the edges */
.video-embed:fullscreen .vc-mute,
.video-embed.is-fullscreen .vc-mute {
  top: 1.5rem;
  right: 1.5rem;
}

.video-embed:fullscreen .vc-fs,
.video-embed.is-fullscreen .vc-fs {
  bottom: 1.5rem;
  right: 1.5rem;
}

.video-embed:fullscreen .vc-progress,
.video-embed.is-fullscreen .vc-progress {
  height: 7px;
}

/* Our own timeline: slim bar along the bottom edge, click to seek */
.vc-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  pointer-events: auto;
}

.vc-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--white);
}

/* ============ GEO audit cards ============ */

.audit-card {
  display: block;
}

.audit-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  overflow: hidden;
  transition: background 0.25s ease;
}

.audit-card:hover .audit-cover {
  background: var(--ink-soft);
}

.audit-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gray-light);
  margin-bottom: 0.75rem;
}

.audit-title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  text-transform: uppercase;
}

.audit-open {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-light);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease, color 0.2s ease;
}

.audit-card:hover .audit-open {
  opacity: 1;
  transform: translateY(0);
  color: var(--white);
}

/* ============ Contact + footer ============ */

.contact {
  background: var(--ink);
  color: var(--white);
  text-align: center;
  margin-top: clamp(4rem, 10vw, 7rem);
  padding: clamp(4rem, 9vw, 7rem) var(--pad) 0;
}

.contact-kicker {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gray-light);
  margin-bottom: 1.25rem;
}

.contact-title {
  display: block;
  font-size: clamp(3.5rem, 12vw, 9rem);
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.contact-title:hover {
  color: var(--gray-light);
}

.contact-email {
  display: inline-block;
  margin-top: 1.75rem;
  font-size: 0.95rem;
  color: var(--gray-light);
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 0.2rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.contact-email:hover {
  color: var(--white);
  border-color: var(--white);
}

.site-footer {
  margin-top: clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--ink-soft);
  padding: 2rem 0 2.5rem;
  font-size: 0.85rem;
  color: var(--gray-light);
}

.footer-links {
  margin-top: 0.4rem;
  font-size: 0.8rem;
}

.footer-links a {
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--white);
}

.footer-sep {
  margin: 0 0.6rem;
}

/* ============ Reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .scroller {
    scroll-behavior: auto;
  }
  .archive.revealing {
    animation: none;
  }
  .video-play,
  .audit-open {
    transition: none;
  }
}

/* ============================================================
   Reel viewer — Instagram style full screen vertical feed
   Opens when a vertical / portrait card is tapped. One reel fills
   the screen, swipe up or down snaps to the next one. Built for
   touch first: 100dvh so mobile browser chrome never crops it,
   and scroll chaining is contained so the page behind never moves.
   ============================================================ */

.reel-viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
}

.reel-viewer[hidden] {
  display: none;
}

/* Page behind is frozen while the feed is open */
body.reel-open {
  overflow: hidden;
}

.reel-track {
  height: 100vh;
  height: 100dvh; /* survives the mobile address bar showing / hiding */
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Without this the browser re-anchors the feed as each video loads,
     which silently drifts the viewer onto a different reel */
  overflow-anchor: none;
}

.reel-track::-webkit-scrollbar {
  display: none;
}

.reel-slide {
  position: relative;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: center;
  scroll-snap-stop: always; /* one swipe moves exactly one reel */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* With 70+ reels in the feed, rendering every offscreen slide is what
   actually makes swiping feel heavy, not the video itself. JS adds this
   class only to slides more than one away from the current reel (the
   same distance loadAround already uses to unload video sources), so
   the browser can skip layout/paint for the bulk of the feed. It is
   deliberately never applied to the current slide or its neighbours:
   marking an actively-playing video's container as "skipped" is what
   suspended playback on the very first reel in testing. */
.reel-slide.offscreen {
  content-visibility: auto;
  contain-intrinsic-size: 100vw 100dvh;
}

/* Video fills the whole screen, like Instagram. Vertical clips are
   already screen shaped so nothing meaningful is lost; cover beats
   letterboxing because black bars shrink the picture and kill impact. */
.reel-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* Caption sits over the picture, kept light so it never boxes the
   video in: small type, short gradient, and it fades while playing. */
.reel-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3rem 1.1rem 1.6rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  color: var(--white);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* While a reel plays the caption steps back so the picture leads */
.reel-slide:not(.paused) .reel-caption {
  opacity: 0;
}

.reel-slide:not(.paused):hover .reel-caption {
  opacity: 1;
}

.reel-title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.reel-meta {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Hairline progress at the very bottom edge, out of the way */
.reel-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
}

.reel-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--white);
}

/* Big play badge, shown only while a reel is paused */
.reel-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.reel-slide.paused .reel-play {
  opacity: 1;
}

.reel-play svg {
  margin-left: 4px;
}

/* Close and sound sit above the feed, thumb friendly on mobile */
.reel-close,
.reel-sound {
  position: absolute;
  z-index: 3;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.reel-close:hover,
.reel-sound:hover {
  background: rgba(0, 0, 0, 0.75);
}

.reel-close {
  top: max(1rem, env(safe-area-inset-top));
  left: 1rem;
}

.reel-sound {
  top: max(1rem, env(safe-area-inset-top));
  right: 1rem;
}

/* Swipe hint, fades out after the first move */
.reel-hint {
  position: absolute;
  left: 50%;
  bottom: 6.5rem;
  transform: translateX(-50%);
  z-index: 3;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--white);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.reel-viewer.moved .reel-hint {
  opacity: 0;
}

/* Desktop: a tall reel that uses the full screen height rather than a
   small centred box, so the video still lands with impact on a laptop. */
@media (min-width: 700px) {
  .reel-slide video {
    width: auto;
    height: 100%;
    max-width: 100vw;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 12px;
  }

  .reel-caption,
  .reel-progress {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(calc(100dvh * 9 / 16), 100vw);
  }

  .reel-caption {
    border-radius: 0 0 12px 12px;
  }

  .reel-progress {
    border-radius: 0 0 12px 12px;
    overflow: hidden;
  }
}

/* Wide, short windows (landscape laptop): don't let the reel overflow */
@media (min-width: 700px) and (max-height: 700px) {
  .reel-slide video {
    height: 92%;
  }

  .reel-caption,
  .reel-progress {
    width: min(calc(100dvh * 0.92 * 9 / 16), 100vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reel-track {
    scroll-behavior: auto;
  }
  .reel-play,
  .reel-hint {
    transition: none;
  }
}