/* The occasion pages and the occasion index.
   Direction A (docs/design/DIRECTION.md): the indigo night, brass as a
   material, the gilt spent once on the hero, Bodoni only at 28px and above.
   Everything here leans on the tokens in site.css and adds nothing global:
   every rule is scoped to a section class this lane owns. */

/* ---------------------------------------------------------------- the hero */

.occ-hero .split { align-items: center; }
.occ-hero .occ-hero-words { max-width: 34em; }
.occ-hero .stage .mat img { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------- the story */

.occ-story .two { gap: 48px; align-items: start; }

.story-lines p {
  margin: 0 0 10px;
  font: 500 21px/1.45 var(--sans);
  color: var(--champagne);
  max-width: 26ch;
}
.story-lines p.note { margin-top: 20px; font: 400 15px/1.5 var(--sans); color: var(--caption); max-width: 46ch; }

/* ------------------------------------------------------- the prize section */

.prize-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: start;
}

.prize-live { margin: 0; }

/* the ceremony's own gilded frame, with the picture laid into the window cut
   in it; the four percentages come from the ceremony's frame.json, which is
   the same rectangle the game itself fills */
.prize-frame { position: relative; }
.prize-frame .prize-gilt {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}
.prize-frame .prize-clip {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  width: var(--fw);
  height: var(--fh);
  display: block;
  overflow: hidden;
  background: var(--night-deep);
}
.prize-frame .prize-clip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prize-live figcaption {
  margin-top: 14px;
  font: 400 14px/1.5 var(--sans);
  color: var(--caption);
  max-width: 44ch;
}

.prize-words h3 { margin: 0 0 16px; }
.prize-words h3 + * { margin-top: 0; }

.prize-list { list-style: none; margin: 0 0 40px; padding: 0; }
.prize-list li {
  padding: 14px 0;
  border-top: 1px solid var(--hair-soft);
}
.prize-list li:first-child { border-top: 1px solid var(--hair); }
.prize-list li b { display: block; font: 600 16px/1.3 var(--sans); color: var(--champagne); }
.prize-list li span { display: block; margin-top: 4px; font-size: 16px; color: var(--muted); }

.occ-closing {
  margin: 0 0 28px;
  padding: 4px 0 4px 20px;
  border-left: 1px solid var(--brass);
}
.occ-closing p { margin: 0 0 6px; font-size: 17px; color: var(--muted); }
.occ-closing p b { color: var(--champagne); font-weight: 600; }

.prize-words .note { max-width: 48ch; }

/* --------------------------------------------------------- the gift card */

/* two keylined pictures of the game's own screen, closed and opened, the
   same family as the cast figures; the picture sits in a <picture> so the
   WebP can fall back to PNG, and .keyed only fills a direct child */
.occ-gift .intro { max-width: 68ch; }
.gift-pair { margin-top: 40px; gap: 32px; }
.gift-shot { margin: 0; min-width: 0; }
.gift-shot .keyed > picture { display: block; width: 100%; height: 100%; }
.gift-shot .keyed picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  border: 0;
}
.gift-shot figcaption { max-width: 44ch; }

/* ------------------------------------------------------------- the reels */

/* not three equal columns: the first world is given the room, the other two
   stand beside it and the three captions sit on one line */
.reels {
  display: grid;
  grid-template-columns: 1.34fr 1fr 1fr;
  gap: 20px;
  align-items: end;
}
.reel-figure { margin: 0; min-width: 0; }
.reel-caption {
  margin-top: 12px;
  font: 600 15px/1.3 var(--sans);
  color: var(--champagne);
}

/* --------------------------------------------------------- the plan lines */

.plan-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.plan-lines li {
  display: grid;
  grid-template-columns: 12em 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--hair-soft);
}
.plan-lines li.pick {
  padding: 22px 20px;
  margin: 0 -20px;
  border: 1px solid var(--brass);
  border-radius: var(--r-button);
  background: rgba(192, 164, 92, .06);
}
.plan-lines .pname { font: 600 17px/1.35 var(--sans); color: var(--champagne); }
.plan-lines .pname .sug { display: block; margin-top: 4px; font: 600 14px/1.3 var(--sans); color: var(--brass-2); }
.plan-lines .pline { font-size: 16px; color: var(--muted); }
.plan-lines .price {
  font: 600 28px/1 var(--display);
  color: var(--champagne);
  font-variant-numeric: lining-nums tabular-nums;
  text-align: right;
}

/* ------------------------------------------- the card grids on these pages */

/* .small-card and its spans are the shared component from site.css; the spans
   need to be blocks for the name and the line to sit under the picture. Kept
   scoped to this lane's two sections rather than added to site.css, which is
   owned by nobody in this run (noted in the handover). */
.occ-index .cards .small-card,
.occ-others .cards .small-card { display: block; }
.occ-index .cards .small-card .keyed,
.occ-others .cards .small-card .keyed { display: block; }
.occ-index .cards .small-card .name,
.occ-others .cards .small-card .name { display: block; }
.occ-index .cards .small-card .line {
  display: block;
  margin-top: 4px;
  font: 400 14px/1.4 var(--sans);
  color: var(--caption);
}

/* --------------------------------------------------------------- narrower */

@media (max-width: 1080px) {
  .prize-grid { grid-template-columns: 1fr; gap: 40px; }
  .occ-story .two { gap: 32px; }
  .plan-lines li { grid-template-columns: 10em 1fr auto; gap: 16px; }
}

@media (max-width: 860px) {
  .story-lines p { font-size: 19px; max-width: none; }
  .reels { grid-template-columns: 1fr; gap: 24px; }
  .plan-lines li { grid-template-columns: 1fr auto; row-gap: 6px; }
  .plan-lines .pline { grid-column: 1 / -1; }
  .plan-lines li.pick { margin: 0; padding: 20px 16px; }
  .prize-live figcaption { max-width: none; }
  /* site.css drops .cards to two columns on a phone, but .cols-4 pins four:
     four occasion cards across 390px is unreadable */
  .occ-others .cards.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}