/* Product films: a page-local extension of the shared monochrome theme. */
.product-showcase { padding: 35px 0 110px; color: var(--color-ice-highlight); }
.showcase-intro { padding: 40px 0 65px; border-top: 1px solid var(--color-glass-edge); }
.showcase-kicker, .showcase-label, .showcase-scroll, .film-nav, .showcase-motion, .reference-hint { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 400; letter-spacing: .065em; }
.showcase-kicker { display: flex; align-items: center; gap: 12px; color: var(--color-moon-mist); }
.showcase-dot, .film-live { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.showcase-edition { margin-left: auto; }
.showcase-intro h2 { margin: 40px 0 32px; font-size: clamp(52px, 7.8vw, 106px); font-weight: 400; letter-spacing: -.075em; line-height: 1.02; }
.showcase-intro h2 em { font-style: normal; color: var(--color-fog-veil); }
.showcase-intro-bottom { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.showcase-intro-bottom p { font-size: 14px; line-height: 1.8; color: var(--color-moon-mist); }
.showcase-scroll { display: flex; gap: 25px; align-items: center; padding-bottom: 6px; }
.showcase-scroll > span:last-child { font-size: 26px; }
.showcase-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 56px; align-items: start; }
.showcase-sidebar { align-self: stretch; }
.showcase-sidebar-inner { position: sticky; top: 130px; padding-top: 28px; }
.showcase-label { color: var(--color-fog-veil); text-transform: uppercase; }
.film-nav { display: grid; gap: 5px; margin-top: 25px; }
.film-nav a { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--color-glass-edge); color: var(--color-fog-veil); transition: color .25s, padding .25s; letter-spacing: 0; font-size: 11px; }
.film-nav a > span:first-child { font-size: 9px; }
.film-nav a:hover, .film-nav a[aria-current] { color: var(--color-ice-highlight); padding-left: 8px; }
.film-nav-arrow { margin-left: auto; opacity: 0; transition: opacity .25s; }
.film-nav a:hover .film-nav-arrow, .film-nav a[aria-current] .film-nav-arrow { opacity: 1; }
.showcase-sidebar-note { margin: 62px 0 28px; }
.showcase-orbit { display: block; width: fit-content; font-size: 42px; font-weight: 400; line-height: 1; margin-bottom: 22px; transform: rotate(var(--orbit-turn, 0deg)); }
.showcase-sidebar-note p { color: var(--color-fog-veil); font-size: 12px; line-height: 1.8; }
.showcase-motion { border: 1px solid var(--color-glass-edge); border-radius: 30px; background: transparent; color: var(--color-moon-mist); padding: 11px 14px; cursor: pointer; }
.showcase-motion:hover { background: var(--surface-frost-5); }
.product-film { padding: 28px 0 65px; border-top: 1px solid var(--color-glass-edge); scroll-margin-top: 12px; }
.film-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.film-heading h3 { font-size: clamp(32px, 4.1vw, 56px); font-weight: 400; letter-spacing: -.06em; margin-top: 12px; }
.film-heading-mark { font-size: 36px; font-weight: 400; color: var(--color-fog-veil); }
.film-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.film-pair figure { min-width: 0; margin: 0; }
.film-pair figcaption { display: flex; justify-content: space-between; align-items: center; height: 32px; margin-bottom: 10px; color: var(--color-moon-mist); }
.reference-link, .film-screen { display: block; position: relative; aspect-ratio: 1536 / 2752; background: #141414; overflow: hidden; border-radius: 4px; }
.reference-link img, .film-screen video { display: block; width: 100%; height: 100%; object-fit: contain; }
.reference-link img { transition: filter .5s; }
.reference-hint { position: absolute; bottom: 14px; left: 50%; transform: translate(-50%, 8px); opacity: 0; white-space: nowrap; padding: 12px 15px; border: 1px solid #ffffff40; background: #0a0a0ae8; color: #fff; border-radius: 30px; transition: opacity .3s, transform .3s; }
.reference-link:hover .reference-hint, .reference-link:focus-visible .reference-hint { transform: translate(-50%, 0); opacity: 1; }
.reference-link:hover img { filter: brightness(.88); }
.film-result { padding-top: 38px; }
.showcase-enhanced .film-result { translate: 0 var(--film-offset, 0px); }
.film-live { opacity: .35; transition: opacity .3s; }
.film-result.is-playing .film-live { opacity: 1; box-shadow: 0 0 0 4px var(--surface-frost-5); }
.film-footnote { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 28px; margin-top: 15px; }
.film-footnote h4 { font-size: 17px; font-weight: 400; letter-spacing: -.025em; }
.film-footnote p { font-size: 12px; color: var(--color-fog-veil); line-height: 1.8; }
.showcase-outro { margin-top: 65px; padding: 35px 0; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-block: 1px solid var(--color-glass-edge); }
.showcase-outro > p { font-size: clamp(22px, 2.5vw, 32px); letter-spacing: -.04em; }
.showcase-outro .text-link { font-size: 12px; }
.reference-dialog { position: fixed; inset: 0; margin: auto; width: min(650px, calc(100% - 30px)); max-height: 90dvh; padding: 0; overflow: auto; color: var(--color-ice-highlight); background: var(--color-midnight-canvas); border: 1px solid var(--color-glass-edge); border-radius: 6px; }
.reference-dialog::backdrop { background: #000c; backdrop-filter: blur(10px); }
.reference-dialog-bar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 20px; background: var(--color-midnight-canvas); }
.reference-dialog-bar h3 { font-size: 17px; font-weight: 400; }
.reference-close { background: transparent; color: inherit; border: 1px solid var(--color-glass-edge); padding: 10px 14px; border-radius: 24px; cursor: pointer; }
.reference-dialog > img { display: block; width: 100%; height: auto; }
html.reference-open { overflow: hidden; }
.showcase-paused .film-result { translate: none; }
@media (min-width: 801px) {
  .film-pair { max-width: clamp(440px, calc(110svh - 220px), 780px); margin-left: auto; }
}
@media (max-width: 1100px) {
  .showcase-layout { grid-template-columns: 165px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 800px) {
  .showcase-layout { display: block; }
  .showcase-sidebar-inner { position: static; padding: 0 0 30px; }
  .showcase-sidebar-inner > .showcase-label, .showcase-sidebar-note { display: none; }
  .film-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 18px; }
  .film-nav a { gap: 8px; }
  .film-nav-arrow { display: none; }
  .film-nav a:hover, .film-nav a[aria-current] { padding-left: 0; }
  .showcase-motion { padding: 9px 12px; }
}
@media (max-width: 560px) {
  .product-showcase { padding-bottom: 75px; }
  .showcase-intro { padding-bottom: 35px; }
  .showcase-kicker { font-size: 8px; gap: 8px; }
  .showcase-intro h2 { font-size: clamp(42px, 11.5vw, 64px); margin-top: 30px; }
  .showcase-intro-bottom { display: block; }
  .showcase-intro-bottom p { font-size: 12px; }
  .showcase-scroll { width: fit-content; margin-top: 22px; font-size: 9px; }
  .film-nav { gap: 3px 18px; }
  .product-film { padding-bottom: 42px; }
  .film-heading { margin-bottom: 18px; }
  .film-pair { gap: 12px; }
  .film-pair .showcase-label { font-size: 8px; letter-spacing: 0; }
  .film-result { padding-top: 25px; }
  .film-footnote { grid-template-columns: 1fr; gap: 12px; padding-top: 20px; }
  .film-footnote p { max-width: 42ch; }
  .reference-hint { bottom: 8px; padding: 8px; font-size: 8px; opacity: 1; transform: translate(-50%, 0); }
  .showcase-outro { align-items: start; flex-direction: column; margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-enhanced .film-result { translate: none; }
  .showcase-orbit { transform: none; }
  .product-showcase *, .product-showcase *::before, .product-showcase *::after { transition: none !important; animation: none !important; }
}

/* Keep the expanded collection accessible on shorter desktop screens. */
@media (min-width: 801px) {
  .showcase-sidebar-inner { max-height: calc(100dvh - 145px); overflow-y: auto; scrollbar-width: thin; padding-right: 8px; }
  .film-nav { gap: 0; margin-top: 16px; }
  .film-nav a { padding-block: 10px; }
  .showcase-sidebar-note { margin: 24px 0 20px; }
}
.product-film-landscape .reference-link { aspect-ratio: 16 / 9; }
.avatar-showcase { display: grid; grid-template-columns: 1fr minmax(260px, 420px); gap: clamp(30px, 6vw, 90px); align-items: center; margin-top: 45px; padding-top: 45px; border-top: 1px solid var(--color-glass-edge); }
.avatar-copy h3 { margin: 20px 0 24px; font-size: clamp(30px, 4vw, 52px); line-height: 1.12; font-weight: 400; letter-spacing: -.045em; }
.avatar-copy > p:not(.showcase-label) { max-width: 46ch; font-size: 14px; line-height: 1.8; color: var(--color-fog-veil); }
.avatar-copy .text-link { display: inline-block; margin-top: 28px; font-size: 12px; }
.avatar-film { margin: 0; padding: 0; }
.showcase-enhanced .avatar-film { translate: none; }
.avatar-film figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.avatar-film .film-screen { aspect-ratio: 9 / 16; }
@media (max-width: 800px) {
  .avatar-showcase { grid-template-columns: 1fr; }
  .avatar-film { width: min(100%, 420px); justify-self: center; }
}