/* ============================================================
   Campaigns — DESKTOP ONLY (min-width 769px)

   Ported from the Campaigns section of vishal-portfolio.bvishal994.workers.dev
   (its section 4) at Vishal's request, 2026-09-26. It replaces .s3 on
   desktop; the phone keeps .s3.

   Three vertical 9:16 films edge to edge, 480px each at 1440. The
   reference's lede and paragraph above them were removed at Vishal's
   request the same day. The first two are
   Péndulo and Raffeta USA; the third is still to come, a <video> showing
   the reference's placeholder frame as its poster until a source is added.

   Changes from the reference: the heading is Campaigns' own (.s3__heading),
   kept at Vishal's request, not the arrow and "Campaigns & Art Direction";
   the ground and type follow the theme; everything is scoped under .scam.
   Péndulo flips on hover to his back design (.scam__back, from
   ~/Downloads/pendulo flip.svg), which links to pendulo.html. The change is
   drawn on .scam__slices by js/scam-flip.js: uneven vertical strips slide
   left one after another, as on snp.agency. The canvas shows only while
   moving; at rest it is the live <video> or the back.
   ============================================================ */

.scam { display: none; }

@media (min-width: 769px) {

  .s3 { display: none; }

  .scam {
    display: block;
    position: relative;
    padding-top: calc(106.5px * var(--k));
    background: var(--c-bg);
    color: var(--c-ink);
    font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* .s3__heading: PP Editorial New Ultralight Italic 82/82, centred, scaled
     by --k like the artboard. 106.5 design px below the section top, as
     Brand Identities' heading is (lowered from .s3's 50.5 in two steps, Vishal). */
  .scam__title {
    margin: 0;
    font-family: 'PP Editorial New', Georgia, serif;
    font-style: italic;
    font-weight: 200;
    font-size: calc(82px * var(--k));
    line-height: 1;
    text-align: center;
    color: var(--c-ink);
    white-space: nowrap;
  }

  /* One line under the heading (Vishal, 2026-09-26): Helvetica Neue 14/19,
     uppercase, at 75% of the ink, as the reference sets its captions. 18
     design px under the heading, then 48.5 to the content. */
  .scam__sub {
    margin: calc(18px * var(--k)) 0 0;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0.004em;
    text-align: center;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--c-ink) 75%, transparent);
  }

  /* Subtitle to films: the same 48.5 design px as Brand Identities'
     subtitle to its first card. */
  .scam__reels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: calc(48.5px * var(--k));
  }

  .scam__reel {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 480 / 853;
    object-fit: cover;
    background: #1c1c1c;
  }

  .scam__frame {
    position: relative;
    overflow: hidden;
  }

  /* The back stays in the tab order while hidden, so a keyboard focus
     flips the frame (js/scam-flip.js listens for focusin). */
  .scam__back {
    position: absolute;
    inset: 0;
    display: block;
    background: #fff;
    opacity: 0;
    pointer-events: none;
  }
  .scam__back img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .scam__frame.is-back .scam__back {
    opacity: 1;
    pointer-events: auto;
  }
  .scam__back:focus-visible {
    outline: 2px solid #0A0000;
    outline-offset: -6px;
  }

  .scam__slices {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    pointer-events: none;
  }
  .scam__frame.is-moving .scam__slices { visibility: visible; }

  /* No strips under reduced motion: a short fade instead. */
  @media (prefers-reduced-motion: reduce) {
    .scam__back { transition: opacity .2s ease; }
  }

  .scam .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}