@font-face {
  font-family: "Nacelle";
  src: url("assets/web-assets/fonts/Nacelle-Light.otf") format("opentype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Nacelle";
  src: url("assets/web-assets/fonts/Nacelle-Heavy.otf") format("opentype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Nacelle";
  src: url("assets/web-assets/fonts/Nacelle-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Nacelle";
  src: url("assets/web-assets/fonts/Nacelle-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --text: #111111;
  --muted: #ececec;
  --menu-gap: clamp(24px, 3.4vw, 44px);
  --font-size: clamp(20px, 1.65vw, 27px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --menu-move-duration: 1.05s;
  --content-delay: .84s;
  --reveal-ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { overflow-y: scroll; scrollbar-gutter: stable both-edges; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Albert Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: "Nacelle", sans-serif; font-weight: 700; }
.page { min-height: 100vh; padding: 28px; }

.menu-shell {
  position: fixed;
  left: 0;
  right: 0;
  width: max-content;
  margin-inline: auto;
  top: 50%;
  /* Layout keeps the menu centered while its contents change width. */
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: auto 1px auto;
  align-items: center;
  gap: var(--menu-gap);
  z-index: 10;
  will-change: transform;
  transition: transform var(--menu-move-duration) var(--ease), top var(--menu-move-duration) var(--ease);
  transform-origin: top center;
  white-space: nowrap;
}
body.has-content .menu-shell {
  position: absolute;
  top: 42px;
  transform: translateY(0) scale(.75);
}
.divider { width: 1px; height: 82px; background: var(--text); }
.nav-link {
  position: relative;
  border: 0;
  padding: 8px 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: var(--font-size);
  font-weight: 400;
  line-height: 1.1;
}
.brand {
  font-family: "Nacelle", sans-serif;
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1;
  letter-spacing: -.045em;
  text-align: left;
  text-transform: uppercase;
}
.brand-first { font-weight: 300; }
.brand-last { font-weight: 900; }
.underline-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s var(--ease);
}
.underline-link:hover::after,
.underline-link:focus-visible::after,
.underline-link.is-current::after { transform: scaleX(1); }

.menu-stage {
  position: relative;
  width: var(--menu-panel-width, 330px);
  min-width: 0;
  min-height: 48px;
  transition: width .48s var(--ease);
  transform: translateY(1px);
}

/* Initial measurements and font loading should not animate into position. */
body:not(.menu-ready) .menu-shell,
body:not(.menu-ready) .menu-stage { transition: none; }
.menu-panel {
  position: absolute;
  inset: 0 auto auto 0;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 30px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  will-change: opacity, transform;
  transition: opacity .38s var(--ease), transform .48s var(--ease);
}
.menu-panel.is-active { opacity: 1; pointer-events: auto; transform: translateY(0); }
.menu-panel.is-leaving { opacity: 0; transform: translateY(-12px); }
.menu-panel.swipe-left-enter,
.menu-panel.swipe-left-enter.is-active,
.menu-panel.swipe-left-exit { transform: translateY(0); }
.menu-panel.swipe-left-enter > * { transform: translateX(14px); opacity: 0; }
.menu-panel.swipe-left-enter.is-active > * { transform: translateX(0); opacity: 1; }
.menu-panel.swipe-left-exit > * { transform: translateX(-14px); opacity: 0; }
.menu-panel > * { transition: transform .42s var(--ease), opacity .34s var(--ease); }
.back-button { width: 32px; text-align: left; transition: transform .28s var(--ease); }
.back-button:hover { transform: translateX(-4px); }

.content {
  width: min(900px, calc(100vw - 56px));
  margin: 0 auto;
  padding-top: 176px;
}
.content-page { display: none; opacity: 0; transform: translateY(18px); }
.content-page.is-visible {
  display: block;
  animation: contentIn .9s var(--reveal-ease) var(--page-delay, var(--content-delay)) forwards;
}
@keyframes contentIn { to { opacity: 1; transform: translateY(0); } }

/* PPC case studies mirror the client hierarchy used by Video Production.
   Media placeholders are replaced with the selected ad hooks when supplied. */
.ppc-page { padding-bottom: 8vh; }
.ppc-client-intro {
  grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr);
  align-items: end;
}
.ppc-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
  margin: 0;
  padding: 0 0 4px;
}
.ppc-summary div {
  min-width: 0;
  padding-top: 9px;
  border-top: 1px solid #d9d9d9;
}
.ppc-summary dt {
  margin: 0 0 5px;
  color: #777;
  font-size: 8px;
  letter-spacing: .095em;
  text-transform: uppercase;
}
.ppc-summary dd {
  margin: 0;
  font-size: clamp(18px, 2vw, 27px);
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.ppc-ad-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(34px, 5vw, 58px) 10px;
}
.ppc-ad {
  min-width: 0;
  align-content: start;
}
.ppc-ad-media {
  display: grid;
  width: 100%;
  aspect-ratio: 9 / 16;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dedede;
  background: #f7f7f7;
  color: #888;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ppc-ad-media img,
.ppc-ad-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.ppc-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 10px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #d9d9d9;
}
.ppc-stats div { min-width: 0; }
.ppc-stats dt {
  margin: 0 0 3px;
  color: #777;
  font-size: 8px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.ppc-stats dd {
  margin: 0;
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.15;
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* Compact video-production system: designed to stack many shoots. */
.video-page { padding-bottom: 8vh; }
.shoot-list { display: grid; gap: clamp(46px, 5vw, 72px); }
.shoot {
  scroll-margin-top: 116px;
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .9s var(--reveal-ease), transform 1.05s var(--reveal-ease);
  will-change: opacity, transform;
}
.shoot.is-shoot-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.shoot-header {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.2fr);
  gap: clamp(28px, 4.5vw, 58px);
  align-items: start;
  margin-bottom: 22px;
}
.shoot-heading { display: flex; gap: 16px; align-items: baseline; }
.shoot-index {
  font-size: 11px;
  letter-spacing: .08em;
  color: #777;
  transform: translateY(-2px);
}
.shoot-heading :is(h1, h2) {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: .98;
  font-weight: 400;
  letter-spacing: -.035em;
}
.shoot-copy p {
  margin: 0;
  max-width: 610px;
  font-size: clamp(12px, .95vw, 14px);
  line-height: 1.48;
  color: #303030;
}
.shoot-tags {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 11px;
  margin-top: 12px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .095em;
  color: #777;
}
.role-label {
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.client-roles .role-label { margin-right: 11px; }

.shoot-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.shoot-gallery-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.shoot-gallery-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shoot-gallery-mixed { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; }
.shoot-gallery-mixed > .shot-third { grid-column: span 2; }
.shoot-gallery-mixed > .shot-half {
  grid-column: span 3;
  align-self: stretch;
  aspect-ratio: auto;
}
.shoot-portrait-row {
  grid-column: span 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.shoot-portrait-row .shot { width: 100%; height: auto; }
.shot { margin: 0; overflow: hidden; background: #f2f2f2; aspect-ratio: 16 / 9; }
.shot-vertical { aspect-ratio: 9 / 16; }
.shot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.018);
  transition: transform 1.15s var(--reveal-ease);
}
.shot.is-revealed img { transform: scale(1); }
.shot-edge-crop img { transform: scale(1.03); }
.shot-edge-crop.is-revealed img { transform: scale(1.012); }

/* A video-only shoot uses one restrained 16:9 player instead of a stills grid. */
.shoot-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  background: #f7f7f7;
  color: #8a8a8a;
  cursor: pointer;
}

.shoot-video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #000;
}

.shoot-video-label {
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.shoot-video-play {
  font-size: 18px;
  transform: translateX(1px);
  transition: transform .35s var(--ease);
}
.shoot-video:hover .shoot-video-play,
.shoot-video:focus-visible .shoot-video-play { transform: translateX(1px) scale(1.08); }

/* Scroll-linked-feeling reveal: each item only begins once it reaches the
   viewport, so a fast scroll reveals quickly and a slow scroll reveals slowly. */
.reveal-item {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .72s var(--reveal-ease), transform .86s var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-item.is-revealed { opacity: 1; transform: translate3d(0, 0, 0); }

.placeholder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.placeholder-card,
.placeholder-wide { border: 1px solid #d8d8d8; background: #fafafa; color: #777; }
.placeholder-card { aspect-ratio: 9 / 16; display: grid; place-items: center; }
.placeholder-wide { aspect-ratio: 16 / 9; display: grid; place-items: center; }
.text-block { max-width: 650px; margin: 8vh auto 0; }
.text-block h1 { font-size: clamp(36px, 5vw, 72px); font-weight: 700; margin: 0 0 22px; }
.text-block p { font-size: 20px; line-height: 1.6; }

@media (max-width: 760px) {
  .page { padding: 20px; }
  .menu-shell {
    width: calc(100vw - 40px);
    grid-template-columns: 1fr;
    gap: 18px;
    white-space: normal;
  }
  .divider { width: 100%; height: 1px; }
  .menu-stage { min-width: 0; width: 100%; min-height: 44px; transform: none; }
  .menu-panel { max-width: 100%; gap: 22px; flex-wrap: wrap; }
  body.has-content .menu-shell { top: 28px; transform: translateY(0) scale(.82); }
  .content { width: calc(100vw - 40px); padding-top: 178px; }
  .shoot-list { gap: 46px; }
  .shoot-header { grid-template-columns: 1fr; gap: 18px; margin-bottom: 18px; }
  .shoot-heading { gap: 10px; }
  .shoot-copy p { max-width: none; }
  .shoot-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .shoot-gallery.shoot-gallery-mixed { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .shoot-gallery-mixed > .shot:not(.shot-vertical) {
    width: 100%;
    height: auto;
    grid-column: span 3;
    aspect-ratio: 16 / 9;
    order: 0;
  }
  .shoot-portrait-row { display: contents; }
  .shoot-portrait-row .shot { width: 100%; height: auto; grid-column: span 2; order: 1; }
  .placeholder-grid { grid-template-columns: 1fr; }
  .ppc-ad-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 7px; }
  .ppc-client-intro { grid-template-columns: 1fr; }
  .ppc-summary { gap: 16px 14px; }
  .ppc-stats { gap: 10px 6px; margin-top: 10px; padding-top: 9px; }
  .ppc-stats dd { font-size: 11px; }
}

@media (max-width: 520px) {
  .shoot-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .shoot-heading :is(h1, h2) { font-size: 22px; }
  .shoot-copy p { font-size: 12px; line-height: 1.42; }
}

@media (max-width: 390px) {
  .ppc-ad-grid { grid-template-columns: 1fr; gap: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .shoot, .reveal-item { opacity: 1; transform: none; }
}


/* Neutral image placeholders for shoots awaiting screengrabs. */
.shot-placeholder {
  display: grid;
  place-items: center;
  border: 1px solid #e5e5e5;
  background: #f7f7f7;
  color: #a0a0a0;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Floating return-to-top control: only appears once the header has scrolled away. */
.portfolio-scroll-return {
  position: fixed;
  right: 30px;
  bottom: 28px;
  z-index: 20;
  width: 32px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--font-size);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.portfolio-scroll-return.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.portfolio-scroll-return span {
  display: block;
  transition: transform .28s var(--ease);
}
.portfolio-scroll-return:hover span { transform: translateY(-4px); }

@media (max-width: 760px) {
  .portfolio-scroll-return { right: 20px; bottom: 20px; }
}

/* Client-level hierarchy for Taima. The reel acts as the overview, with the
   individual productions reading as sub-projects beneath it. */
.client-intro {
  display: grid;
  grid-template-columns: minmax(220px, .68fr) minmax(0, 1.32fr);
  gap: clamp(34px, 5vw, 70px);
  align-items: end;
  margin-bottom: clamp(44px, 6vw, 74px);
}
.client-meta { padding-bottom: 4px; }
.client-kicker,
.shoots-label {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #777;
}
.client-meta h1 {
  margin: 7px 0 16px;
  font-size: clamp(42px, 5.4vw, 68px);
  line-height: .9;
  font-weight: 400;
  letter-spacing: -.05em;
}
.client-meta p {
  margin: 0;
  max-width: 350px;
  font-size: clamp(12px, .95vw, 14px);
  line-height: 1.5;
  color: #303030;
}
.client-roles {
  margin-top: 14px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .095em;
  color: #777;
}
.client-reel-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  background: #f7f7f7;
  color: #8a8a8a;
}
.client-reel-label {
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.client-reel-play {
  font-size: 18px;
  transform: translateX(1px);
  transition: transform .35s var(--ease);
}
.client-reel-frame:hover .client-reel-play { transform: translateX(1px) scale(1.08); }
.shoots-label {
  margin-bottom: 22px;
  padding-top: 2px;
}

@media (max-width: 760px) {
  .client-intro { grid-template-columns: 1fr; gap: 24px; margin-bottom: 44px; }
  .client-meta h1 { font-size: 46px; }
  .client-meta p { max-width: none; }
}


/* Client-to-client case-study navigation. */
.client-case { width: 100%; }
.client-case[hidden] { display: none !important; }
.client-case.client-leave-next { animation: clientLeaveNext .48s var(--ease) forwards; }
.client-case.client-enter-next { animation: clientEnterNext .62s var(--ease) forwards; }
.client-case.client-leave-prev { animation: clientLeavePrev .48s var(--ease) forwards; }
.client-case.client-enter-prev { animation: clientEnterPrev .62s var(--ease) forwards; }

@keyframes clientLeaveNext {
  to { opacity: 0; transform: translate3d(-42px, 0, 0); }
}
@keyframes clientEnterNext {
  from { opacity: 0; transform: translate3d(42px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes clientLeavePrev {
  to { opacity: 0; transform: translate3d(42px, 0, 0); }
}
@keyframes clientEnterPrev {
  from { opacity: 0; transform: translate3d(-42px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Client navigation stays visible while the active case study scrolls.
   Because each control lives inside its client-case, only the active client's
   available direction is shown. */
.client-switch[hidden] { display: none !important; }
.client-switch {
  position: fixed;
  top: 50%;
  z-index: 24;
  display: flex;
  margin: 0;
  padding: 0;
  border: 0;
  transform: translateY(-50%);
}
.client-switch-next {
  right: clamp(22px, 3vw, 48px);
  justify-content: flex-end;
}
.client-switch-prev {
  left: clamp(22px, 3vw, 48px);
  justify-content: flex-start;
}
.client-switch-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  padding: 10px 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 400;
  line-height: 1.1;
  white-space: nowrap;
}
.client-switch-arrow {
  display: inline-block;
  transition: transform .3s var(--ease);
}
.client-switch-next .client-switch-button:hover .client-switch-arrow { transform: translateX(5px); }
.client-switch-prev .client-switch-button:hover .client-switch-arrow { transform: translateX(-5px); }

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .client-switch-next { --client-nudge: 5px; }
  .client-switch-next:not([hidden]) .client-switch-button {
    animation: clientNavReminder 5s ease-in-out 5s infinite;
  }
}

/* A brief outward nudge, followed by a rest for the remainder of each cycle. */
@keyframes clientNavReminder {
  0%, 11.2%, 100% { transform: translateX(0); }
  4.2% { transform: translateX(var(--client-nudge)); }
  7.7% { transform: translateX(calc(var(--client-nudge) * -.2)); }
}

@media (max-width: 900px) {
  .client-switch {
    top: auto;
    bottom: 28px;
    transform: none;
  }
  .client-switch-next { right: 22px; }
  .client-switch-prev { left: 22px; }
  .client-switch-button { font-size: 13px; }

  /* Keep the return-to-top control clear of bottom client navigation. */
  .portfolio-scroll-return { bottom: 78px; }
}

@media (max-width: 760px) {
  body::after {
    content: "";
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 19;
    height: 220px;
    background: linear-gradient(
      to top,
      #fff 0px,
      #fff 30px,
      rgba(255, 255, 255, .96) 60px,
      rgba(255, 255, 255, .84) 85px,
      rgba(255, 255, 255, .65) 110px,
      rgba(255, 255, 255, .42) 140px,
      rgba(255, 255, 255, .2) 170px,
      rgba(255, 255, 255, .05) 200px,
      rgba(255, 255, 255, 0) 220px
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--ease);
  }

  body.has-client-navigation::after,
  body.has-scroll-return::after { opacity: 1; }

  .client-switch { bottom: 21px; }
  .client-switch-button { font-size: 16px; }

  .portfolio-scroll-return {
    right: auto;
    left: 50%;
    bottom: 18px;
    margin-left: -16px;
  }
}

/* Shared layouts for video and YouTube projects awaiting media. */
.youtube-page { padding-bottom: max(110px, 8vh); }
.video-page { padding-bottom: max(110px, 8vh); }
.client-intro-text { grid-template-columns: 1fr; }
.client-intro-text .client-meta p { max-width: 560px; }
.media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 16 / 9;
  border: 1px solid #e5e5e5;
  background: #f7f7f7;
  color: #777;
  padding: 18px;
  text-align: center;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.media-placeholder small { font-size: 8px; color: #999; }
.media-portrait { aspect-ratio: 9 / 16; }
.media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.media-placeholder + .media-grid { margin-top: 6px; }
.media-stack { display: grid; gap: 18px; }
.shoot-video iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Allow the additional work category to fit without overlapping the brand. */
@media (min-width: 761px) {
  .menu-panel[data-panel="work"] { gap: 24px; }
}
@media (max-width: 760px) {
  .menu-panel[data-panel="work"] { gap: 12px; }
  .menu-panel[data-panel="work"] .nav-link { font-size: clamp(14px, 3.5vw, 20px); }
  .menu-panel[data-panel="work"] .back-button { width: 22px; }
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-grid-reels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .media-placeholder { padding: 10px; font-size: 9px; }
}

.shoot-video.shoot-video-portrait { aspect-ratio: 9 / 16; }

.shoot-video mux-player {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  --media-object-fit: contain;
  --pip-button: none;
}

/* Keep white controls legible instead of using the white accent as a hover fill. */
.shoot-video mux-player::part(button),
.shoot-video mux-player::part(time display) {
  --media-control-hover-background: rgb(255 255 255 / .16);
  --media-focus-box-shadow: inset 0 0 0 2px #fff;
}

/* The theme clears the volume background on hover; retain its black backing. */
.shoot-video mux-player::part(volume range) {
  --media-control-background: #000;
  --media-control-hover-background: #000;
  background: #000;
}

/* A bare play icon keeps the poster visible without a circular backdrop. */
.shoot-video mux-player::part(center play button) {
  --media-control-background: transparent;
  --media-control-hover-background: transparent;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #fff;
  filter: drop-shadow(0 1px 4px rgb(0 0 0 / .6));
}

.shoot-video mux-player::part(center play button):hover {
  background: transparent;
}

.shoot-copy p.copy-align-right {
  text-align: right;
  margin-left: auto;
}

/* Keep these short descriptions beside their titles at every screen width. */
.shoot-header.shoot-header-inline {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: baseline;
  column-gap: clamp(16px, 4vw, 58px);
}
.shoot-header-inline > * { min-width: 0; }