/* /play (19 Oct 2026; Joe approved it 18 Oct): "Food, family & memories", a place to play while we smash
   your burger. Three big links out to the STEEP games, one column at every width so each is a full-width
   thumb target on a phone (56px minimum). @layer pages, scoped .sub-play. */
@layer pages {
  .sub-play .play-list { display: grid; gap: .75rem; max-width: 36rem; margin: var(--sp-md) 0 0; padding: 0; list-style: none; }
  .sub-play .play-card {
    display: flex; align-items: center; gap: 1rem; inline-size: 100%; min-height: 56px; padding: 1rem 1.2rem;
    border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--tint); color: var(--ink); text-decoration: none;
  }
  .sub-play .play-card:hover, .sub-play .play-card:focus-visible { border-color: var(--ember); }
  /* STEEP preview (19 Oct 2026): a phone-sized 9:16 loop under the headline, centred and rounded. The
     video's width/height attributes plus aspect-ratio reserve its box before the poster arrives, so it
     shifts nothing. Never taller than ~85% of the screen (48svh wide), so a phone held sideways still sees it
     whole. At 390x844 the game buttons start ~210px below the fold: fitting them above it would need the
     video under ~175px wide, too small to read the questions in it. steep-video.js lays one button over
     the whole video: a small pause mark while it plays, a big play mark while it is paused (reduced motion,
     Save-Data, a refused autoplay). The same rules, smaller, are in loyalty.css for the STEEP card on
     /membership?plan=steep. */
  .sub-play .steep-vid { position: relative; inline-size: min(100%, 360px); inline-size: min(100%, 360px, 48svh); margin: var(--sp-md) auto 0; }
  .sub-play .steep-vid-v { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 9 / 16; border-radius: var(--r-lg); background: var(--tint-2); object-fit: cover; }
  .sub-play .steep-vid-btn { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; padding: 0; border: 0; border-radius: var(--r-lg); background: none; color: var(--paper); cursor: pointer; }
  .sub-play .steep-vid-btn:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; }
  .sub-play .steep-vid-btn svg { position: absolute; fill: currentColor; border-radius: 50%; background: color-mix(in oklab, var(--ink) 62%, transparent); }
  .sub-play .steep-vid-pause { right: .6rem; bottom: .6rem; inline-size: 44px; block-size: 44px; padding: 11px; }
  .sub-play .steep-vid-play { display: none; left: 50%; top: 50%; inline-size: 72px; block-size: 72px; padding: 17px 15px 17px 19px; translate: -50% -50%; }
  .sub-play .steep-vid-btn .steep-vid-play { background: var(--ember); box-shadow: 0 0 0 3px color-mix(in oklab, var(--paper) 75%, transparent); }
  .sub-play .steep-vid.is-paused .steep-vid-play { display: block; }
  .sub-play .steep-vid.is-paused .steep-vid-pause { display: none; }
  .sub-play .play-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .sub-play .play-txt b { font-size: var(--step-1); }
  .sub-play .play-txt span { font-weight: 600; color: var(--muted); }
  .sub-play .play-go { flex: none; margin-left: auto; font-size: 1.4rem; color: var(--ember); }
  /* Go-live block (19 Oct 2026): the crew's free-play code at JOE'S, and STEEP at home from $1.99. */
  .sub-play .play-steep { display: grid; gap: .7rem; max-width: 36rem; margin-top: var(--sp-lg); padding: 1rem 1.2rem; border-left: 3px solid var(--brass); border-radius: var(--r); background: var(--tint-2); }
  .sub-play .play-steep .btn { justify-self: start; }
  .sub-play .play-back { margin-top: var(--sp-lg); }
  .sub-play .play-back a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-underline-offset: 3px; }
  /* Wide screens (23 Oct 2026, Joe: "a lot of negative white space"): the art sat alone in a centred column with the
     copy hard left and both sides empty. Two columns from 56rem: copy and links left, the art beside them (restamped after the edge pinned old bytes). */
  @media (min-width: 56rem) {
    .sub-play .page-head .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); column-gap: var(--sp-xl, 4rem); align-items: start; }
    .sub-play .page-head .wrap > * { grid-column: 1; }
    .sub-play .page-head .steep-vid { grid-column: 2; grid-row: 1 / span 7; margin: 0; inline-size: 100%; }
    /* The headline wraps in the narrower column; the highlight bar reached up into the comma of the line above.
       Start it lower so it hugs the capitals of its own line. */
    .sub-play .page-head h1 .t-hl::before { inset-block: .24em .1em; }
  }
}