/* Source-specific ratios are scoped here; existing Poto spacing/type/radii stay intact. */
.archive-section { --archive-black: #000; --archive-muted: #808080; background: var(--archive-black); color: var(--poto-paper); font-family: 'Poto Reference Variable', Arial, sans-serif; scroll-margin-top: 0; }
.archive-header-layer { position: sticky; top: 0; height: 0; z-index: 7; }
.archive-collage-sequence { position: relative; }
.archive-stage { position: relative; min-height: 100svh; padding-top: calc(var(--poto-control-height) + var(--poto-space-xl) * 2); overflow: clip; isolation: isolate; background: var(--archive-black); }
.archive-header { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: var(--poto-space-lg); padding: var(--poto-space-xl); }
.archive-header img { display: block; width: auto; height: calc(var(--poto-control-height) * .66); }
.archive-header a { display: flex; align-items: center; min-height: var(--poto-control-height); font-size: .875rem; text-decoration: none; text-underline-offset: var(--poto-space-xs); }
.archive-header nav a:is(:hover, :focus-visible) { text-decoration: underline; }
.archive-collage { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: var(--poto-space-lg); align-items: start; }
.archive-media { position: relative; margin: 0; overflow: hidden; border-radius: var(--poto-card-radius); background: var(--archive-black); }
.archive-media :is(img,video) { display: block; width: 100%; height: 100%; object-fit: cover; }
.archive-watch img { object-position: 50% 50%; }
.archive-phone img { object-position: 50% 50%; }
.archive-upright img { object-position: 50% 60%; }
.archive-speaker video { object-fit: contain; }
#aicowork .archive-phone img { object-fit: contain; }
.archive-studio img, .archive-product-ui img { object-fit: contain; }
.archive-merch img { object-position: 50% 68%; }
.archive-watch { grid-column: 1; grid-row: 1 / span 2; margin-top: var(--poto-space-xxl); aspect-ratio: 778 / 1000; }
.archive-phone { grid-column: 2; grid-row: 1; aspect-ratio: 16 / 9; }
.archive-upright { grid-column: 2; grid-row: 2; aspect-ratio: 778 / 750; }
.archive-speaker { grid-column: 3; grid-row: 1 / span 2; margin-top: calc(var(--poto-space-xxl) * 2); aspect-ratio: 778 / 1000; }
.archive-lower-left { grid-column: 1; grid-row: 3; aspect-ratio: 16 / 9; }
.archive-lower-right { grid-column: 3; grid-row: 3; aspect-ratio: 16 / 9; }
.archive-copy { position: relative; z-index: 3; width: min(88%, 44rem); margin: var(--poto-space-xxl) auto; text-align: center; }
.archive-statement { margin: 0; font-size: clamp(2.25rem, 3.55vw, 4rem); font-weight: 600; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
.archive-description { max-width: 60ch; margin: var(--poto-space-lg) auto 0; font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.archive-line { display: block; }
.archive-word { display: inline-block; }
.archive-description-desktop { display: none; }
.archive-collage-sequence.is-enhanced { height: calc(100svh + var(--archive-scroll)); }
.archive-collage-sequence.is-enhanced + .archive-collage-sequence.is-enhanced { margin-top: -100svh; }
.is-enhanced .archive-stage { position: sticky; top: 0; height: 100svh; padding-top: 0; }
.is-enhanced .archive-collage { position: absolute; inset: 0; display: block; }
.is-enhanced .archive-media { position: absolute; margin: 0; transform-origin: 0 0; }
.is-enhanced .archive-phone { z-index: 1; }
.is-enhanced .archive-copy { position: absolute; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); }
.is-enhanced .archive-stage::after { content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: var(--archive-scrim-opacity, 0); background: linear-gradient(180deg, transparent 15%, rgb(0 0 0 / .78) 42%, rgb(0 0 0 / .9) 65%, transparent 90%); }
.archive-collage-sequence:not(.is-enhanced) .archive-stage { display: flex; flex-direction: column; padding: var(--poto-space-xxl) var(--poto-space-xl); }
.archive-collage-sequence:not(.is-enhanced) .archive-copy { order: -1; }
@media (max-width: 700px) {
  .archive-header { padding: var(--poto-space-lg); }
  .archive-header img { height: calc(var(--poto-control-height) * .5); }
  .archive-header a { font-size: .8125rem; }
  .archive-stage { padding-top: calc(var(--poto-control-height) + var(--poto-space-lg) * 2); }
  .archive-collage { gap: var(--poto-space-sm); }
  .archive-statement { font-size: clamp(1.75rem, 7.6vw, 3rem); }
  .archive-description { margin-top: var(--poto-space-md); font-size: .875rem; }
  .archive-collage-sequence:not(.is-enhanced) .archive-stage { padding-inline: var(--poto-space-lg); }
  .archive-collage-sequence:not(.is-enhanced) .archive-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-collage-sequence:not(.is-enhanced) .archive-media { grid-column: auto; grid-row: auto; margin-top: 0; }
  .archive-collage-sequence:not(.is-enhanced) .archive-phone { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .archive-collage-sequence.is-enhanced { height: auto; }
  .is-enhanced .archive-stage { position: relative; height: auto; }
  .archive-collage-sequence.is-enhanced + .archive-collage-sequence.is-enhanced { margin-top: 0; }
}

/* Main desktop Venus: the approved staggered layout, with hover-led films. */
@media (min-width: 701px) {
  .poto-main #venus .archive-description-original { display: inline; }
  .poto-main #venus .archive-description-desktop { display: none; }
  .poto-main :is(#venus, #aicowork).is-desktop-showcase.is-enhanced .archive-collage { z-index: 1; }
  .poto-main :is(#venus, #aicowork).is-desktop-showcase.is-enhanced .archive-media { top: 0; left: 0; }
  .poto-main :is(#venus, #aicowork).is-desktop-showcase.is-enhanced .archive-upright img { object-position: 50% 70%; }
  .poto-main :is(#venus, #aicowork).is-desktop-showcase.is-enhanced .archive-media::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: var(--archive-black); opacity: max(var(--archive-entry-cover, 0), var(--archive-focus-cover, 0));
    transition: opacity var(--poto-fast) var(--poto-ease);
  }
  .poto-main :is(#venus, #aicowork).is-desktop-showcase.is-enhanced.has-media-focus .archive-media:not(.is-media-focused) { --archive-focus-cover: .22; }
  .poto-main :is(#venus, #aicowork).is-desktop-showcase.is-enhanced .archive-copy {
    width: min(88%, 72rem); pointer-events: none;
  }
  .poto-main :is(#venus, #aicowork).is-desktop-showcase.is-enhanced .archive-statement {
    font-size: clamp(2.25rem, min(3.55vw, 7.6svh), 4rem);
  }
  .poto-main :is(#venus, #aicowork).is-desktop-showcase.is-enhanced .archive-stage::after {
    background: radial-gradient(ellipse 60% 32% at 50% 50%, rgb(0 0 0 / .88) 0%, rgb(0 0 0 / .7) 42%, rgb(0 0 0 / .3) 65%, transparent 90%);
  }
  .poto-main :is(#venus, #aicowork).is-desktop-showcase.is-enhanced [data-playback-hint]::before {
    content: attr(data-playback-hint); position: absolute; z-index: 2;
    /* Counter the artwork scale so all playback labels retain the same screen size and inset. */
    bottom: calc((100% - 100% / var(--archive-media-scale, 1)) / 2 + var(--poto-space-md) / var(--archive-media-scale, 1));
    left: calc((100% - 100% / var(--archive-media-scale, 1)) / 2 + var(--poto-space-md) / var(--archive-media-scale, 1));
    transform: scale(calc(1 / var(--archive-media-scale, 1))); transform-origin: bottom left;
    padding: var(--poto-space-xs) var(--poto-space-sm);
    font-size: .75rem; line-height: 1.5; color: var(--poto-paper);
    background: rgb(0 0 0 / .72); pointer-events: none;
    transition: opacity var(--poto-fast) var(--poto-ease);
  }
  .poto-main :is(#venus, #aicowork).is-desktop-showcase.is-enhanced [data-playback-hint]:is(:hover, :focus-visible)::before { opacity: 0; }
  .poto-main :is(#venus, #aicowork).is-desktop-showcase.is-enhanced [data-playback-hint]:focus-visible {
    outline: calc(var(--poto-space-xs) / 2) solid var(--poto-paper);
    outline-offset: calc(var(--poto-space-xs) / -2);
  }
  /* Reduced/no-JS keeps the original three-column gallery in natural flow. */
  .poto-main #venus:not(.is-enhanced) .archive-stage {
    padding-top: calc(var(--poto-control-height) + var(--poto-space-xl) * 2);
  }
  .poto-main #venus:not(.is-enhanced) .archive-copy { width: min(88%, 72rem); }
}

/* Desktop-only full film; retain the existing still for narrow layouts. */
.archive-media .archive-desktop-video { display: none; object-fit: contain; }
@media (min-width: 701px) {
  .poto-main #venus :is(.archive-watch, .archive-upright, .archive-speaker, .archive-product-ui, .archive-merch) .archive-desktop-video { display: block; }
  .poto-main #venus :is(.archive-watch, .archive-upright, .archive-product-ui, .archive-merch) > img { display: none; }
}

@media (min-width: 701px) {
  .poto-main #venus .archive-speaker .archive-mobile-video { display: none; }
}

/* Keep enlarged poster artwork inside its own slot, so its black canvas cannot
   obscure adjacent films during the scroll choreography. */
@media (min-width: 701px) {
  .poto-main :is(#venus, #aicowork).is-desktop-showcase.is-enhanced :is(.archive-watch, .archive-speaker) .archive-desktop-video {
    transform: scale(1.3);
    transform-origin: center;
  }
}

@media (min-width: 701px) {
  .poto-main #venus .archive-phone .archive-desktop-video { display: block; }
  .poto-main #venus .archive-phone > img { display: none; }
  .poto-main #venus .archive-product-ui { aspect-ratio: 4 / 3; }
  .poto-main #venus .archive-product-ui .archive-desktop-video {
    object-fit: cover; object-position: center;
  }
}

/* Clip the actual website surface, including letterboxed media, to the card. */
.poto-main :is(#venus,#aicowork) .archive-phone {
  border-radius:var(--poto-card-radius); overflow:hidden;
  clip-path:inset(0 round var(--poto-card-radius));
}
.poto-main :is(#venus,#aicowork) .archive-phone :is(img,video) {
  object-fit:cover; border-radius:inherit;
}