/* heroTest1: a 1440 × 826 design frame, positioned to match the mockup exactly.
       On other screens the whole frame scales to fit (see the script at the bottom). */
    :root { --k: .857; --cx: 749px; }
    html, body { background: var(--paper); overflow-x: clip; }
    .t-frame { position: relative; width: 1440px; height: 826px; margin: 0 auto; overflow: clip; }
    .t-frame > * { position: absolute; }

    /* Header: the site's own full-size header, laid over the frame's top edge and aligned to the page grid
       (same size and position as on the other pages; it no longer scales with the frame).
       Sticky, like the header on the other pages (styles.css); the negative margin keeps it over the frame. */
    .t-header { position: sticky; top: calc(var(--header-bar) - var(--header-h)); z-index: 60; margin-bottom: calc(-1 * var(--header-h)); }

    /* Centre stack, centred on x = 749. */
    /* Centred with transform: the site's entrance animation owns the `translate` property. */
    .t-center { left: var(--cx); transform: translateX(-50%); }
    .t-intro { top: 157px; transform: translateX(-50%) scale(var(--k)); transform-origin: 50% 0; white-space: nowrap; }
    .t-frame h1 {
      top: 150px; /* the headline sits above the deck and the cube, so it can run wide */
      margin: 0;
      max-width: none;
      font-size: 104px;
      line-height: .99;
      letter-spacing: -.047em;
      white-space: nowrap;
      text-align: center;
    }
    /* "Hi," is a small lead-in line above the question. */
    .t-frame h1 .t-hi { display: block; font-size: .42em; line-height: 1.25; letter-spacing: -.03em; }
    .t-sub {
      top: var(--sub-top, 421px);
      width: var(--sub-width, 470px);
      margin: 0;
      font-size: var(--sub-size, 17px);
      line-height: var(--sub-lh, 1.65);
      color: var(--text-lead);
      text-align: center;
    }
    /* The button sits straight under the headline (the intro line and description were removed). */
    .t-actions { top: 338px; margin: 0; gap: 24px; flex-wrap: nowrap; transform: translateX(-50%); }
    .t-actions .button-blue { padding: 20px 28px 16px; font-size: 16px; }
    .t-actions .text-link { margin-top: 4px; white-space: nowrap; }

    /* Music deck, left. The root spans the frame so the caption can sit anywhere. */
    .t-frame .t-deckroot { inset: 0; width: auto; height: auto; top: 0; right: 0; transform: none; pointer-events: none; }
    .t-frame .t-deckroot .stage {
      position: absolute;
      margin: 0;
      width: 690px;
      height: 690px;
      left: var(--deck-left, -128.2px);
      top: var(--deck-top, 175.6px);
      transform-origin: 345px 345px;
      transform: scale(var(--deck-s, .726)) rotate(15deg);
    }
    .t-frame .t-deckroot .artist-card, .t-frame .t-deckroot .deck-box { pointer-events: auto; }

    /* Captions: handwritten note plus arrow, at 85.7%. */
    .t-note {
      width: max-content;
      font-family: var(--display);
      font-style: italic;
      font-size: 16px;
      line-height: 1.35;
      color: #6f7686;
      transform: scale(var(--k));
      transform-origin: 0 0;
    }
    /* Arrows: a curve ending in an upward arrowhead, pointing from each caption to its object. */
    .t-arrow { fill: none; stroke: #a3b0c8; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; pointer-events: none; }
    .t-arrow-deck { left: 363px; top: 636px; width: 22px; height: 36px; }
    .t-arrow-cube { left: 1142px; top: 660px; width: 31px; height: 50px; }
    .t-frame .t-deckroot .playback-status.t-note {
      position: absolute;
      left: var(--dn-left, 394px);
      top: var(--dn-top, 647px);
      max-width: 230px;
      min-height: 0;
      padding: 0;
      margin: 0;
      text-align: left;
      font-size: 16px;
      color: #6f7686;
    }
    .t-cube-note { left: var(--cn-left, 955px); top: var(--cn-top, 697px); transform: scale(.886); }

    /* Cube, right. */
    .t-cube { left: var(--cube-left, 1067px); top: var(--cube-top, 368px); width: var(--cube-size, 335px); height: var(--cube-size, 335px); }
    .t-cube .object-canvas { width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }

    /* Bottom bar: the site's default bar at full size. Three columns keep "Scroll to explore" exactly centred. */
    .t-frame .t-bottom { left: 32px; right: 32px; bottom: 22px; top: auto; width: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
    .t-bottom > :first-child { justify-self: start; }
    .t-bottom > :last-child { justify-self: end; }

    /* ---------- Phones and small tablets: a stacked layout instead of the scaled frame ---------- */
    @media (max-width: 900px) {
      .t-frame {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas: "intro" "title" "sub" "actions" "deck" "cube" "bottom";
      }
      .t-frame > * { position: relative; left: auto; top: auto; }
      .t-header { margin-bottom: 0; }
      .t-center { justify-self: center; transform: none; text-align: center; }
      .t-intro { grid-area: intro; transform: none; margin-top: 8px; }
      .t-frame h1 { grid-area: title; top: auto; margin: 16px 0 12px; font-size: clamp(44px, 12.6vw, 76px); white-space: normal; }
      .t-sub { grid-area: sub; top: auto; width: min(100% - 40px, 380px); font-size: 16px; line-height: 1.6; }
      .t-actions { grid-area: actions; top: auto; width: calc(100% - 32px); margin-top: 22px; transform: none; flex-wrap: wrap; justify-content: center; gap: 16px 24px; }
      .t-actions .button-blue { padding: 19px 26px 15px; font-size: 16px; }

      /* Deck and cube side by side as one centred pair, captions under each.
         --ds: deck scale (60% of the width-fitted --ps); --cs: cube size; --off: deck centre offset from the page centre.
         The deck footprint is 548 × 618 stage px; its centre sits 33.2 px right of the stage's transform origin. */
      .t-frame { --ds: calc(var(--ps, .65) * .6); --cs: clamp(100px, 33vw, 150px); --off: calc((-12px - var(--cs)) / 2); }
      .t-frame .t-deckroot { grid-area: deck; position: relative; inset: auto; width: 100%; height: calc(618px * var(--ds) + 62px); margin-top: 30px; }
      .t-frame .t-deckroot .stage {
        left: calc(50% + var(--off) - 33.2px * var(--ds) - 345px);
        top: calc(301.1px * var(--ds) - 345px);
        transform: scale(var(--ds)) rotate(15deg);
      }
      /* Names read from the top of each card, so their start is never hidden under the next card. */
      .t-frame .t-deckroot .vertical-name { transform: none; font-size: 15px; letter-spacing: .3px; }
      .t-frame .t-deckroot .playback-status.t-note { left: calc(50% + var(--off) - 274px * var(--ds) + 28px); top: auto; bottom: 4px; width: auto; max-width: 150px; font-size: 14px; transform: none; }
      .t-frame .t-deckroot .playback-status.t-note::before { content: ''; position: absolute; right: calc(100% + 8px); bottom: 14px; width: 20px; height: 34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 36' fill='none' stroke='%23a3b0c8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 34C12 30 6.5 21 6.5 2'/%3E%3Cpath d='M6.5 2 1.5 8.5M6.5 2 12 8'/%3E%3C/svg%3E") no-repeat center / contain; }

      .t-cube { grid-area: deck; justify-self: center; align-self: end; left: auto; top: auto; width: var(--cs); height: var(--cs); margin: 0 0 58px 0; transform: translateX(calc(274px * var(--ds) + 6px)); z-index: 2; }
      .t-cube-note { grid-area: deck; justify-self: center; align-self: end; left: auto; top: auto; width: 112px; margin: 0 0 4px 0; font-size: 14px; text-align: right; transform: translateX(calc(274px * var(--ds) + 6px + var(--cs) / 2 - 86px)); }
      .t-cube-note::after { content: ''; position: absolute; left: calc(100% + 8px); bottom: 14px; width: 22px; height: 36px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 50' fill='none' stroke='%23a3b0c8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 47C13 43 23 31 23.5 3'/%3E%3Cpath d='M23.5 3 17 11M23.5 3 30 10.5'/%3E%3C/svg%3E") no-repeat center / contain; }
      .t-arrow { display: none; }

      .t-frame .t-bottom { grid-area: bottom; position: relative; left: auto; right: auto; bottom: auto; width: calc(100% - 32px); justify-self: center; margin-top: 30px; padding-bottom: 22px; }
    }
    /* Phones: the site's default phone bar, location left and "Scroll to explore" right (the tagline hides at this size). */
    @media (max-width: 760px) { .t-frame .t-bottom { display: flex; justify-content: space-between; } }