@layer components {
  /* ==========================================================================
     PROJECT PANELS — artboards 4, 5 and 6 (panels 4-9)

     Each project is two panels: a title half and an artwork half. They share
     one structure, so this file serves all six rather than three near-identical
     stylesheets.

     The artwork is a COMPOSITE. Artboards 4-6 are collages of 21-29 overlapping
     product shots; rebuilding those as separate positioned elements would be
     dozens of requests, heavier to load, and no more faithful than one image.
     The text is the only thing that stays live text.

     Per-project positions vary, so each panel passes its own coordinates as
     inline custom properties (--y, --w) rather than getting its own class.

     Ink offsets, measured from real Satoshi metrics:
         46px / lh43    -> 4.0
         18px / lh18    -> 2.0
         56.6px / lh53  -> 4.62  (the project numeral)
     ========================================================================== */

  /* Two different kinds of artwork here.

     .pj-bg — the artboard-4/5/6 collages. These are full-bleed: the PSD art
     fills the entire artboard edge to edge, so it has to keep filling the
     entire panel edge to edge at every window shape, cropping instead of
     gapping. It sits on .panel__inner directly (NOT on .stage — the stage's
     own width-fit scale is sized to fit the window without cropping, which
     is the wrong job for a background that must never show a seam) and is
     positioned/sized independently of the design-pixel coordinate system.
     Text keeps using the untouched, already-verified .stage positions —
     the two layers are deliberately decoupled, not locked together, because
     a single shared scale can satisfy "background never gaps" or "text
     never crops" but not both at every aspect ratio. See panels.css. */
  .pj-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* .pj-art — artwork that ISN'T full-bleed: it's sized to a specific spot
     on the artboard (the Content Creation photo grid, the Contact
     placeholder), so it stays part of the .stage coordinate space like any
     other positioned element, filling only the stage's own box. */
  .pj-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  .pj-num,
  .pj-title,
  .pj-bio {
    position: absolute;
    margin: 0;
    left: calc(var(--x, 115) * var(--u));
    top:  calc(var(--y) * var(--u));
  }

  /* The project numeral. Helvetica-Bold in the PSD, mapped to Satoshi Black. */
  .pj-num {
    font-size: calc(56.6 * var(--u));
    line-height: calc(53 / 56.6);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-tight);
  }

  .pj-title {
    font-size: calc(46 * var(--u));
    line-height: calc(43 / 46);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-tight);
    white-space: nowrap;
  }

  /* Caption under an image. 28px Black; ink offset 3.08 (the 30px Black on the
     contact panel measures 3.3, scaled to 28). Fades when the carousel below
     it changes the centered slide — see webcarousel.js. */
  .pj-caption {
    position: absolute;
    margin: 0;
    left: calc(var(--x) * var(--u));
    top:  calc(var(--y) * var(--u));
    font-size: calc(28 * var(--u));
    line-height: 1;
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-tight);
    white-space: nowrap;
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  .pj-caption[data-fading] { opacity: 0; }

  /* ==========================================================================
     WORLD WIDE WEB CAROUSEL — artboard 7's three laptops (PSD Layer 81 /
     copy / copy 2 at x -566/465/1496, y383, 996x555 each, spaced 1031
     center-to-center = a 35px gap). Six slides loop through that same 3-up
     peek layout; the .pj-caption above tracks whichever slide is centered.

     Native scroll-snap does the centering math and gives touch/trackpad
     dragging for free — webcarousel.js only adds mouse click-drag (which
     the browser has no native gesture for) and the loop illusion via
     cloned slides at each end. touch-action:pan-y keeps a vertical touch
     gesture free to fall through to the page's own scroll. */
  .wc-carousel {
    position: absolute;
    left: 0;
    top: calc(383 * var(--u));
    width: 100%;
    height: calc(555 * var(--u));
  }

  .wc-track {
    list-style: none;
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: calc(35 * var(--u));
    padding-inline: calc(462 * var(--u));
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
    touch-action: pan-y;
  }
  .wc-track::-webkit-scrollbar { display: none; }
  .wc-track[data-dragging] { cursor: grabbing; scroll-snap-type: none; }

  .wc-slide {
    flex: none;
    width: calc(996 * var(--u));
    height: calc(555 * var(--u));
    scroll-snap-align: center;
  }
  .wc-slide img {
    display: block;
    width: 100%;
    height: 100%;
    /* contain, not cover — the slide asset is trimmed tight to the laptop's
       own silhouette on a transparent background, so it should sit centered
       at its real proportions rather than being stretched or cropped to
       force-fill a box shaped like the old untrimmed screenshot. */
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
  }

  .pj-bio {
    width: calc(var(--w) * var(--u));
    font-size: calc(18 * var(--u));
    line-height: 1;
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-body);
  }
  .pj-bio p + p { margin-block-start: calc(36 * var(--u)); }

  /* --- tablet and mobile ---------------------------------------------------
     A 16:9 collage cannot carry a portrait screen, so the panel becomes the
     text followed by the artwork at its natural width. The composition still
     reads; it just stops being the full screen.
     ------------------------------------------------------------------------ */
  @media (max-width: 1023px) {
    /* Portrait screens cannot crop a 16:9 collage without losing most of it,
       so the artwork rejoins the flow at its natural width, after the text. */
    .panel--project .panel__inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: clamp(20px, 4vw, 36px);
    }

    .panel--project .pj-art,
    .panel--project .pj-bg {
      order: 1;
      position: static;
      inset: auto;
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    .panel--project .stage {
      height: auto;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: clamp(20px, 4vw, 36px);
      padding-inline: var(--inset-x);
      padding-block: calc(var(--safe-y) + var(--nav-tri-h)) var(--safe-y);
    }

    .panel--project .stage > * {
      position: static;
      inset: auto;
      left: auto;
      top: auto;
      width: auto;
    }

    /* Overrides the generic `width: auto` above — the carousel needs to
       stay exactly viewport-wide for its own internal scroll/snap/drag to
       clip correctly. Order after that rule matters: same specificity.
       The slide itself stops following --u too: at mobile widths that
       scales the whole 3-up desktop composition down to a postage stamp,
       same reason .pj-title switches to clamp() below instead of --u. */
    .panel--project .wc-carousel {
      order: 1;
      width: 100%;
      height: auto;
    }
    .panel--project .wc-track {
      gap: 16px;
      padding-inline: calc((100% - min(560px, 78vw)) / 2);
    }
    .panel--project .wc-slide {
      width: min(560px, 78vw);
      height: auto;
      aspect-ratio: 996 / 555;
    }

    .pj-num {
      font-size: clamp(30px, 6vw, 44px);
      line-height: 1;
    }

    .pj-title {
      font-size: clamp(28px, 5vw, 40px);
      line-height: 1.05;
      white-space: normal;
    }

    .pj-caption { font-size: var(--fs-18); }

    .pj-bio {
      font-size: var(--fs-18);
      line-height: 1.45;
      max-width: 62ch;
    }
    .pj-bio p + p { margin-block-start: 1.45em; }

  }
}