/* mobile-motion.css — let the table story actually scroll on a phone.
   Loaded last. Phones only; desktop is untouched.

   Why: site.js used to force `still` on any viewport under 790px tall, and
   readability-finish.css carried the matching half of that decision -

     @media(max-height:790px){
       .table-stage{position:relative!important;top:0!important}
       .motion-ready .table-story{height:auto}
     }

   - which un-sticks the stage and collapses the story to its content height.
   With the JS gate gone the reader can turn motion on, but the CSS half
   still applied, so storyDistance came out as

     max(1, 838 - 760 - 78) = 1

   and all four scenes played out inside a single pixel of scroll. That is
   the "way too fast" - there was no scroll distance left to spend.

   This restores the pin and the distance, and sizes the stage to actually
   fit the viewport rather than forcing a 760px minimum into ~620px of room. */

@media (max-width: 740px) {

  .motion-ready .table-stage {
    position: sticky !important;
    top: var(--head) !important;
    /* The -66px is the author's own allowance for the fixed mobile dock; it
       was being overridden by min-height:700px, which pushed .stage-bottom -
       and with it the motion toggle - underneath the dock. An unreachable
       toggle is the same defect as a disabled one. */
    height: calc(100svh - var(--head) - 66px);
    min-height: 0;
  }

  .motion-ready .table-story { height: 445svh; }

  /* The dish fills the room between the copy and the dock, and never exceeds
     it. One rule, every phone.

     The room is real and measurable: dock top, minus where the copy ends, minus
     a gap. Measured per scene across nine phone sizes, the copy ends 307px down
     the stage on a short screen and 314px on a tall one (the heading trim only
     applies below 760px), so 320 clears the worst of them. The dock is 65px,
     except at 305 wide where "Find us" wraps to two lines and it is 88 - hence
     the narrow override below.

     Everything before this either bled the dish past the bottom of the stage,
     which .table-stage's overflow:hidden then cut off flat while leaving empty
     paper underneath, or sized it off a constant that had nothing to do with the
     space. Anthony circled exactly that: a straight cut across the fries with a
     gap below it. The dish is now the size of the gap.

     .table-world gets the same height as the rig so the rig, centred in it,
     starts at the world's top edge - no overflow in either direction, nothing
     for the stage to clip. site.js still writes the rig's height inline each
     frame to flatten it into the spread, which is why width carries the size. */
  .motion-ready .table-rig,
  .motion-ready .table-world {
    height: min(94vw, calc(100svh - var(--head) - 396px - var(--room-extra, 0px)));
  }
  .motion-ready .table-rig {
    width: min(94vw, calc(100svh - var(--head) - 396px - var(--room-extra, 0px)));
  }
  .motion-ready .table-world { top: calc(320px + var(--copy-extra, 0px)); }

  /* The dock is 65px tall until "Find us" wraps to two lines, which measurement
     puts between 305 and 315 - at 305 it is 88px, at 315 it is already 65. So
     this is 310, not the 380 the other narrow-screen rules use; at 380 it was
     costing 360- and 384-wide phones 23px of dish they actually had. */
  @media (max-width: 310px) {
    .motion-ready .table-rig,
    .motion-ready .table-world {
      height: min(94vw, calc(100svh - var(--head) - 419px - var(--room-extra, 0px)));
    }
    .motion-ready .table-rig {
      width: min(94vw, calc(100svh - var(--head) - 419px - var(--room-extra, 0px)));
    }
  }

  /* The chapter row and the stage fade both go, at every mobile height. The row
     has nowhere to live that does not cost the photograph, and scrolling already
     drives the story. The fade - .photo-ready .table-stage::after, 88px of
     gradient - exists to settle the table into the page on a tall static stage;
     pinned, it lands on the dish and washes the food out. Reduced-motion readers
     keep both: they get .still, where none of this applies. */
  .motion-ready .stage-bottom { display: none; }
  .photo-ready.motion-ready .table-stage::after { display: none; }

  /* Narrow screens need the same heading trim at ANY height, not just short
     ones. At 305 wide the .story-copy grid is minmax(0,1fr) 116px and
     readability-finish.css sets the heading 53px; above 760px tall the trim
     below did not apply and the heading ran into the standfirst - measured
     overlapping it by 11x21px on the spread scene, in BOTH motion states. */
  @media (max-width: 380px) {
    .table-stage .table-copy .story-copy h1,
    .table-stage .table-copy .story-copy h2 {
      font-size: 44px !important;
      line-height: 1.02;
    }
  }

@media (max-height: 760px) {
  /* type-floor.css and readability-finish.css both set this with !important, and
       they load before this file, so an unflagged declaration here loses. Match
       the house pattern rather than trying to out-specify it. The max(1rem, ...)
       floor those files apply is about small text; 44px clears it comfortably. */
    /* h1 alone covered scene 01 only. Scenes 02-04 are h2, and they are the
       scenes where the dish crossed the call to action - measured at 384x660,
       scene 01's heading came back 44px while scene 02's was still 58px, which
       is 26px of the band the table needed. Same rule, both tags. */
    .table-stage .table-copy .story-copy h1,
    .table-stage .table-copy .story-copy h2 {
      font-size: 44px !important;
      line-height: 1.02;
    }
    .table-stage .table-copy .story-copy .eyebrow { margin-bottom: 9px; }
    .table-stage .table-copy .story-copy .text-button { margin-top: 4px; }


  }

  /* The static view keeps the fallback sizing it was designed with. */
  
}

/* Reduced motion no longer swaps in a static stage: the table follows the scroll for everyone,
   without the easing, the entrance fades or the parallax. Text scaling: site.js measures how far
   the chapter copy and the dock overflow their design sizes and sets --copy-extra / --room-extra
   on the stage (0 at 100%); the dish credit rejoins the flow when the copy is scaled. */
@media (max-width: 740px) {
  .copy-scaled .story-copy .dish-credit { position: static; grid-column: 1 / -1; text-align: left; max-width: none; margin-top: 6px; }
  /* Separators travel with their phrase, so a wrap never strands a lone star; no trailing star. */
  .welcome-strip i { display: none; }
  .welcome-strip i + span::before { content: "\2733"; display: inline-block; font-size: .8em; color: #e4b396; margin: 0 .7em 0 .15em; vertical-align: .06em; }
  .welcome-strip span:nth-of-type(3) { display: none; }
  .welcome-strip { gap: 8px 0; }
}
@media (max-width: 420px) { .welcome-strip { font-size: 18px; } }
/* Narrow dock: keep every label on one line so the three actions stay level. */
@media (max-width: 330px) {
  .mobile-dock > a, .mobile-dock > button { white-space: nowrap; gap: 8px; padding: 8px 9px; font-size: 10px; }
  .mobile-dock span { font-size: 15px; }
}
@media (max-width: 380px) { .welcome-strip i + span::before { display: none; } }
/* The "Pull up a chair" stamp sat on the phone number on phones; it now follows the number in flow. */
@media (max-width: 740px) {
  .visit-stamp { position: static; display: inline-flex; margin: 26px 0 0 8px; transform: rotate(-12deg); }
}