@layer components {
  /* Three full-bleed panels sharing the first screen. The split IS the
     homepage — but real content follows below, which is what keeps this from
     being a doorway page. */
  .panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    min-height: min(86svh, 56rem);
    border-block: 1px solid var(--rule);
  }

  .panel {
    position: relative; overflow: clip;
    container-type: inline-size;
    /* A grid item defaults to min-width:auto, so a long unbreakable word like
       COMMERCIAL can push the track wider than the viewport. */
    min-width: 0;
    display: grid; align-content: end;
    padding: var(--gutter);
    border-inline-end: 1px solid var(--rule);
    isolation: isolate;
  }
  .panel:last-child { border-inline-end: 0; }

  .panel__media { position: absolute; inset: 0; z-index: -1; }
  .panel__poster, .panel__loop {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(1) contrast(1.15) brightness(.5);
    transition: filter .5s var(--ease-world), scale .6s var(--ease-world);
  }
  .panel__loop { position: absolute; inset: 0; opacity: 0; transition: opacity .4s linear; }
  .panel__loop.is-playing { opacity: 1; }

  .panel:hover .panel__poster, .panel:focus-visible .panel__poster,
  .panel:hover .panel__loop,   .panel:focus-visible .panel__loop {
    filter: grayscale(0) contrast(1.05) brightness(.78);
    scale: 1.03;
  }

  .panel__body { display: grid; gap: .5rem; }
  .panel__name {
    font-family: var(--font-display);
    font-weight: var(--display-wght);
    /* Condensed here regardless of world: the longest label, COMMERCIAL, has
       to fit a third of the viewport. cqw sizes against the panel, not the
       window — with vw it overflowed the column and then the page. */
    font-variation-settings: 'wdth' 88;
    font-size: clamp(1.5rem, 10cqw, 3.25rem);
    overflow-wrap: anywhere;   /* last resort before it can widen the column */
    line-height: .92;
    letter-spacing: var(--display-tracking);
    text-transform: uppercase;
  }
  /* Reserve two lines whatever the tagline's length, so the world names sit
     on a shared baseline across the three panels instead of stepping. */
  .panel__tagline {
    color: var(--ink-quiet); font-size: .9375rem; max-width: 28ch;
    min-height: 2lh;
  }

  /* The accent marks the panel you are about to enter, rather than sitting
     on all three at rest. */
  .panel::after {
    content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 3px;
    background: var(--accent); scale: 0 1; transform-origin: left;
    transition: scale .45s var(--ease-world);
  }
  .panel:hover::after, .panel:focus-visible::after { scale: 1 1; }

  .panel__badge {
    position: absolute; top: .75rem; right: .75rem;
    background: var(--accent); color: var(--sf-chalk);
    font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
    padding: .2rem .45rem;
  }

  @media (max-width: 60rem) {
    .panels { grid-template-columns: 1fr; min-height: 0; }
    .panel { min-height: 48svh; border-inline-end: 0; border-block-end: 1px solid var(--rule); }
  }
}