/* ==========================================================================
   FlavorDraft — the iPhone Duo showcase (loaded after site.css, on /duo-showcase/ only)

   One page for the App Store featuring nomination's supplemental materials: the
   homepage hero's own line, centred, and the iPhone Duo film beneath it across
   most of the page, on the site's paper. The film plays in the browser's own
   player, laid on the page like a print: the film's paper is a shade of the
   page's, so only a cut edge and a short contact shadow mark the frame, and the
   player's controls are the only chrome. Nothing else is on the page: no card
   under the film, no second call to action, and nothing moves but the film.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · The words, centred
   -------------------------------------------------------------------------- */

.showcase__intro {
  padding-top: clamp(3rem, 7vw, 6rem);
  text-align: center;
}

/* The hero's "Made for iPhone Duo." (home.css), set as this page's headline:
   the serif, plain weight, a step larger. */
.showcase__title {
  margin-top: var(--s4);
  font-family: var(--serif);
  font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.014em;
  color: var(--ink);
  text-wrap: balance;
}

.showcase__intro .lead {
  margin-top: var(--s5);
  margin-inline: auto;
  max-width: 32em;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   2 · The film, in the browser's player, whole at every width
   -------------------------------------------------------------------------- */

.showcase__film {
  margin: clamp(2rem, 4.5vw, 3.5rem) auto 0;
}

.showcase__frame {
  margin-inline: auto;
}

/* Most of the page's width, centred, from a desktop up. */
@media (min-width: 62em) {
  .showcase__frame {
    width: 85%;
  }
}

/* The player: the film's own paper behind it (#FAF2E6 in every frame, a shade
   off the page's cream) until the poster paints, so no box flashes; the page's
   cut edge and contact shadow, as its loose paper has; its 16:9 reserved before
   anything loads, so nothing shifts. Its native controls draw over it. */
.showcase__player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #faf2e6;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 0 0 0.5px rgba(140, 115, 79, 0.2), 0 1px 2px rgba(var(--shadow-rgb), 0.1),
    0 10px 20px -14px rgba(var(--shadow-rgb), 0.24);
}

.showcase__player:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

@media (max-width: 39.99em) {
  .showcase__player {
    border-radius: var(--r-sm);
  }
}

/* One line under the film, set like a plate's caption in a cookbook. */
.showcase__line {
  margin-top: clamp(1rem, 2.2vw, 1.75rem);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.5;
  text-align: center;
  color: var(--ink-quiet);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   3 · The one way on: a plain link, as the hero's "See what's new"
   -------------------------------------------------------------------------- */

.showcase__back {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-inline: var(--gutter);
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
  text-align: center;
}

.showcase__back a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--ink) 25%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.showcase__back a:hover {
  color: var(--red);
  text-decoration-color: currentColor;
}