/* Round 2: director polish on H3 (mast) and H7 (dc, shared by H8). */

/* ================= H3 · mast =================
   One grid for the whole frame: a gutter track, six columns, a gutter track. The nav links, the six facts and
   the two tile seams all land on its lines, so the frame reads as one composed sheet, not stacked rows. */
.mast {
  --mast-gap: var(--sp-stack-md);
  --mast-cols: calc(var(--lay-gutter) - var(--mast-gap)) repeat(6, minmax(0, 1fr)) calc(var(--lay-gutter) - var(--mast-gap));
  display: grid;
  grid-template-rows: auto auto auto minmax(calc(var(--sp-section) * 1.6), 1fr);
}

.mast__nav {
  grid-template-columns: var(--mast-cols);
  column-gap: var(--mast-gap);
  padding-inline: 0;
}

.mast__nav > :first-child {
  grid-column: 2;
}

.mast__nav .lab-nav__links {
  display: contents;
}

.mast__nav .lab-nav__links li:nth-child(1) { grid-column: 3; }
.mast__nav .lab-nav__links li:nth-child(2) { grid-column: 4; }
.mast__nav .lab-nav__links li:nth-child(3) { grid-column: 5; }
.mast__nav .lab-nav__links li:nth-child(4) { grid-column: 6; }
.mast__nav .lab-nav__links li:nth-child(5) { grid-column: 7; justify-self: end; }

/* Six columns hold five links: Attend becomes the ticket block in the last column, and the separate
   "Hear it first" block steps out (the sign-up lives on the Attend page and in the footer). */
.mast__nav .lab-nav__links li:nth-child(5) a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ctl-xl);
  padding: var(--sp-inset-md) calc(var(--sp-inset-md) * 2);
  background: var(--primary);
  color: var(--primary-foreground);
}

.mast__nav > .btn {
  display: none;
}

/* The name: the first line set flush gutter to gutter (lab.js fits --fit), the second line leaving a hole
   that the theme fills, its left edge on column five and its last line on the title's baseline. */
.mast__head {
  position: relative;
  padding: var(--sp-stack-lg) var(--lay-gutter) 0;
}

.mast__title {
  font-size: var(--fit, var(--type-poster));
  line-height: 0.86;
  color: var(--foreground);
}

.mast__line {
  display: block;
  width: fit-content;
  white-space: nowrap;
}

.mast__theme {
  position: absolute;
  bottom: 0;
  /* Column five, or further right if the title's last line runs past it: never touching the name. */
  left: max(
    calc(var(--lay-gutter) + (100% - var(--lay-gutter) * 2 + var(--mast-gap)) / 6 * 4),
    calc(var(--line-end, 0vw) + var(--sp-stack-lg))
  );
  right: var(--lay-gutter);
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--text-h2--line-height);
  text-wrap: balance;
}

.mast__theme span {
  display: block;
  margin-bottom: var(--sp-stack-xs);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

/* Facts: a display key over a sans line, one per column, so the row has a figure and a ground. */
.mast__facts {
  display: grid;
  grid-template-columns: var(--mast-cols);
  column-gap: var(--mast-gap);
  row-gap: var(--sp-stack-lg);
  padding-block: var(--sp-stack-lg) calc(var(--sp-stack-lg) * 1.1);
}

.mast__facts > div:first-child {
  grid-column-start: 2;
}

.mast__facts dt {
  margin-bottom: var(--sp-stack-xs);
  font-family: var(--font-display);
  font-size: var(--type-lead);
  line-height: var(--text-h3--line-height);
}

.mast__facts dd {
  max-width: 22ch;
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

/* Tiles on the same grid: the paper gap between them is the brand's only divider; the outer two bleed. */
.mast__tiles {
  display: grid;
  grid-template-columns: var(--mast-cols);
  column-gap: var(--mast-gap);
}

.mast-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: clip;
  text-decoration-line: none;
}

.mast-tile--photo {
  grid-column: 1 / 5;
}

.mast-tile--end {
  grid-column: 6 / 9;
}

.mast-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 100%;
  transition: transform var(--duration-considered) var(--ease-standard);
}

.mast-tile--end img {
  object-position: center 60%;
}

.mast-tile:hover img {
  transform: scale(1.03);
}

.mast-tile--figure {
  grid-column: 5;
  padding: var(--tile-pad);
  background: var(--primary);
  color: var(--primary-foreground);
}

.mast-tile__figure {
  font-family: var(--font-display);
  font-size: var(--type-title);
  line-height: 1;
}

.mast-tile__label {
  color: var(--palette-rose-tint);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

.mast-tile--figure:hover .mast-tile__label {
  text-decoration-line: underline;
  text-decoration-thickness: var(--stroke-hairline);
}

@media (max-width: 1099px) {
  .mast__nav {
    grid-template-columns: auto 1fr auto;
    padding-inline: var(--lay-gutter);
  }

  .mast__nav > :first-child,
  .mast__nav .lab-nav__links li:nth-child(n) {
    grid-column: auto;
  }

  .mast__nav .lab-nav__links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--sp-inset-lg);
    grid-column: 2 / 4;
  }

  .mast__facts {
    grid-template-columns: calc(var(--lay-gutter) - var(--mast-gap)) repeat(3, minmax(0, 1fr)) calc(var(--lay-gutter) - var(--mast-gap));
  }

  .mast__facts > div:nth-child(4) {
    grid-column-start: 2;
  }

  .mast__theme {
    position: static;
    left: auto;
    right: auto;
    max-width: var(--ms-sm);
    margin-top: var(--sp-stack-lg);
  }
}

@media (max-width: 899px) {
  .mast__nav {
    grid-template-columns: 1fr auto;
  }

  .mast__nav > .btn {
    display: inline-flex;
  }

  .mast__nav .lab-nav__links {
    display: none;
  }

  .mast__facts {
    grid-template-columns: calc(var(--lay-gutter) - var(--mast-gap)) repeat(2, minmax(0, 1fr)) calc(var(--lay-gutter) - var(--mast-gap));
  }

  .mast__facts > div:nth-child(n) {
    grid-column-start: auto;
  }

  .mast__facts > div:nth-child(odd) {
    grid-column-start: 2;
  }

  .mast__tiles {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: calc(var(--sp-section) * 2) auto;
  }

  .mast-tile--photo {
    grid-column: 1 / -1;
  }

  .mast-tile--figure,
  .mast-tile--end {
    grid-column: auto;
    min-height: calc(var(--sp-section) * 1.6);
  }
}

/* ================= H7 / H8 · dc =================
   Readability first: nothing overlaps the words. The cascade steps down the left, "momentum / towards /
   progress" make a ragged column, and the card fills the open space beside those three lines, exactly three
   lines tall. "for all" lands on the card's left edge below it, so the card is held by the type, not laid on it.
   The ticket sits off the card's right edge, clear of both. */
.dc {
  --dc-lead: 0.94;
}

/* Words and card are sized from the stage (container units), not the viewport: the stage stops at --lay-wide,
   so viewport-sized words outgrew their slot beside the card on wide screens. */
.dc__stage {
  --dc-size: 7.7cqi;
  --dc-line: calc(var(--dc-size) * var(--dc-lead));
  --dc-card-x: 47%;
  container-type: inline-size;
}

.dc__words {
  font-size: var(--dc-size);
  line-height: var(--dc-lead);
}

.dc__words > span:nth-child(1) { margin-inline-start: 20%; }
.dc__words > span:nth-child(2) { margin-inline-start: 32%; }
.dc__words > span:nth-child(3) { margin-inline-start: 2%; }
.dc__words > span:nth-child(4) { margin-inline-start: 11%; }
.dc__words > span:nth-child(5) { margin-inline-start: 5%; }
.dc__words > span:nth-child(6) { margin-inline-start: var(--dc-card-x); }

.dc__card {
  top: calc(var(--dc-line) * 2 + var(--dc-size) * 0.12);
  left: var(--dc-card-x);
  width: 30cqi;
  height: calc(var(--dc-line) * 3 - var(--dc-size) * 0.12);
  aspect-ratio: auto;
  gap: var(--sp-stack-sm);
  padding: var(--sp-inset-lg);
  transform: none;
}

.dc__card-title {
  font-size: calc(var(--type-heading) * 0.82);
  line-height: var(--text-h2--line-height);
}

.dc__card p:not(.dc__card-title) {
  max-width: 34ch;
}

.dc__card a:not(.btn) {
  text-underline-offset: 0.3em;
}

.dc__ticket {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
  transform: translateX(calc(100% + var(--sp-stack-md)));
}

.dc__ticket.btn {
  background: var(--ink);
  color: var(--ticket-ink);
}

.dc__corner--br {
  display: grid;
  justify-items: end;
}

.dc__corner--br span,
.dc__est {
  color: var(--quiet);
}

.dc__corner--br b {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 1;
  color: var(--ink);
}

/* Below 1280 the card's copy no longer fits the three-line slot: it follows the cascade, in the flow. */
@media (max-width: 1279px) {
  .dc {
    place-items: start;
    padding-block: calc(var(--sp-section) * 1.2) calc(var(--sp-section) * 1.6);
  }

  .dc__words {
    font-size: clamp(var(--text-h2), 9vw, var(--text-display));
  }

  .dc__words > span:nth-child(n) {
    margin-inline-start: 0;
    white-space: normal;
  }

  .dc__words > span:nth-child(2n) {
    margin-inline-start: 14%;
  }

  .dc__card {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, var(--ms-sm));
    height: auto;
    margin-top: var(--sp-stack-lg);
    margin-inline-start: 14%;
  }

  .dc__ticket {
    position: static;
    align-self: start;
    margin-top: var(--sp-stack-sm);
    transform: none;
  }

  .dc__corner--tr,
  .dc__corner--br {
    display: none;
  }
}

@media (max-width: 599px) {
  .dc__words {
    font-size: 12vw;
  }

  .dc__card {
    margin-inline-start: 0;
  }
}