/* Mustang Group: the home page on phones (and tablets held upright), under 900px.
   Loaded with media="(max-width: 899px)", after css/home.css.

   The phone is laid out as its own layer, not the desktop squeezed: the same
   story in the same order, about half the scroll, one move per section, and
   every venue's three phone jobs (book, call, directions) within a thumb's
   reach. Scroll stays native on touch; sideways content is a real swipe with
   scroll-snap, never a pinned sideways scene. */

:root{ --section:clamp(64px,10vh,96px); }
.chapter-head{ gap:12px;margin-bottom:28px; }

/* ---------- 0-1. doorway and hero: the word in the sky, a shorter hold ---------- */
.doorway-window{ background-image:url("../img/hero/portrait-1080.webp")!important; }
@media (prefers-reduced-motion:no-preference){ .hero{ height:170vh; } }
.hero-tuk{ display:none; }
.hero-plate img,.hero-plate video{ object-position:33% 60%; }
.hero-master img{ object-position:50% 100%; }
/* tablets crop the portrait photo from the sides less and the top more, which
   put the word over dark glass; anchor to the top so it sits on the white floor */
@media (min-aspect-ratio:9/16){ .hero-master img{ object-position:50% 0%; } }
/* the MG and its line sit at the top, where the photograph pales a little to paper
   so they read over the building */
.hero-word{ top:calc(var(--header-h) + 1.2vh);bottom:auto;left:var(--gutter);right:var(--gutter); }
/* the haze runs from the very top, behind the header, down past the line, then clears */
.hero-haze{
  top:0;bottom:auto;height:calc(var(--header-h) + 46vh);
  background:linear-gradient(to bottom,rgba(244,239,231,.6) 0,rgba(244,239,231,.6) 60%,rgba(244,239,231,0));
}
.hero-word-in{ grid-template-columns:1fr;row-gap:16px; }
.hero-mgbox{ grid-column:1;grid-row:1;width:min(62vw,300px); }
.hero-say{ grid-column:1;grid-row:2;justify-items:start;text-align:left;gap:8px; }
/* the header already carries the name beside it */
.hero-name{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }
.hero-sub{ font-size:1rem;max-width:none; }
.hero-go{ display:none; }
/* the big MG becomes the header's MG as the scroll starts (hero() in js/home.js): it
   shrinks into the header's own slot while the name slides aside for it, so the two
   must match exactly when they swap: same ink, no glow */
.header[data-on="photo"]:not(.is-solid) .brand svg{ filter:none; }
.header[data-on="photo"]{ --h-fg:var(--ink); }

.badge{ display:none; }

/* ---------- 2. intro: the MG and heading ride up on the dome ---------- */
.intro{ padding-top:36px; }
/* the hero scrolls 70vh here; see the see-through overlap in css/home.css */
/* the heading comes in just after the circle has risen, so the MG above it peeks up
   inside the circle as it rises */
@media (prefers-reduced-motion:no-preference){ .intro{ --pin:70vh;--enter:.38;--pad:36px; } }
.heritage{ margin-top:36px; }
.intro-gift{ margin-top:36px; }
.register{ margin-top:56px; }

/* ---------- 3. the venues: a deck you swipe ---------- */
.run{ padding-bottom:clamp(44px,8vh,72px); }
.run-head{ padding:calc(var(--header-h) + 6px) var(--gutter) 20px; }
.run-title{ display:block;font-size:calc(clamp(2.2rem,9.6vw,3.6rem) * var(--ds)); }
.run-title span{ white-space:normal; }
.run-line,.run-vline,.run-end{ display:none; }
.run-track{
  display:flex;flex-direction:row;align-items:stretch;gap:14px;width:auto;
  padding:0 var(--gutter);scroll-padding-inline:var(--gutter);
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
}
.run-track::-webkit-scrollbar{ display:none; }
.stop,.stop:nth-child(odd),.stop:nth-child(even){
  display:flex;flex-direction:column;flex:0 0 min(80vw,360px);width:auto;padding-top:0;
  scroll-snap-align:start;scroll-snap-stop:always;
}
.stop-pin{ position:static;margin-bottom:12px; }
.stop .frame,.stop:nth-child(3n+1) .frame{ height:auto;aspect-ratio:1/1; }
.stop .frame img{ will-change:transform; }
.stop-text{ flex:1;display:flex;flex-direction:column;margin-top:18px; }
.stop-text h3{ margin-bottom:8px; }
.stop-text p{ max-width:none;font-size:.9375rem; }
.stop-links{ display:none; }
/* the card's actions sit on one baseline across the deck, whatever the text length */
.stop-act{ display:grid;gap:2px;margin-top:auto;padding-top:18px; }
.stop-btns{ display:grid;gap:8px; }
.stop-btns--2{ grid-template-columns:1fr 1fr; }
.stop-btns .btn{ --b-bg:var(--stone);--b-fg:var(--ink);width:100%;min-height:48px;padding:0 .9em; }
.stop-btns .btn--line{ --b-bg:transparent;--b-fg:var(--stone); }
.stop-more,.cta-more{ display:flex;flex-wrap:wrap;gap:0 22px; }
.stop-more a,.cta-more a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-stretch:88%;
  text-decoration:underline;text-decoration-color:var(--peach);text-decoration-thickness:1px;text-underline-offset:.5em;
}
/* the route underneath: Port Hamble to Guildhall Square, one stop per card */
.deck-nav{ margin:24px var(--gutter) 0; }
.deck-line{ position:relative;height:44px;margin-inline:8px; }
.deck-line::before,.deck-fill{ content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px; }
.deck-line::before{ background:var(--line); }
.deck-fill{ background:var(--peach);transform-origin:0 50%;transform:scaleX(0); }
.deck-dot{
  position:absolute;top:0;left:calc(var(--i) * 20%);width:44px;height:44px;margin-left:-22px;
  display:grid;place-items:center;
}
.deck-dot::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1.5px var(--fg-soft);
  transition:transform var(--t-s) var(--ease-out),background-color var(--t-s) var(--ease-out),box-shadow var(--t-s) var(--ease-out);
}
.deck-dot.is-past::before{ background:var(--peach);box-shadow:0 0 0 1.5px var(--peach); }
.deck-dot.is-on::before{ background:var(--peach);box-shadow:0 0 0 7px rgba(240,174,139,.2);transform:scale(1.3); }
.deck-ends{
  display:flex;justify-content:space-between;margin-top:0;
  font-size:var(--fs-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-stretch:88%;color:var(--fg-soft);
}

/* ---------- 4a. Banana Wharf: the story, then the two marinas side by side ---------- */
@media (orientation:portrait){
  .bw-stage{ height:clamp(440px,125vw,720px); }
  .bw-stage .frame img{ object-position:40% 55%; }
}
.bw-story{ margin-top:56px;gap:24px; }
/* the deck above already describes both; here they are a pair to compare and book */
.bw-places{ grid-template-columns:1fr 1fr;gap:14px;margin-top:56px;align-items:stretch; }
.bw-place{ display:flex;flex-direction:column;padding-top:16px;border-top:1px solid var(--line); }
.bw-place--ph .hamble{ display:none; }
.bw-place--ph .bw-place-text{ display:contents; }
.bw-place > p:not(.bw-rating),.bw-place-text > p:not(.bw-rating){ display:none; }
.bw-place h3{ min-height:2em;margin-bottom:16px;font-size:calc(clamp(1.6rem,6.6vw,2.4rem) * var(--ds)); }
.bw-rating{ flex-direction:column;align-items:flex-start;gap:8px;margin-top:0;padding-top:0;border-top:0; }
.bw-rating-n{ font-size:calc(clamp(3rem,13vw,4.2rem) * var(--ds)); }
.bw-place .btn{ width:100%;margin-top:auto;padding:0 1em; }
.bw-rating{ margin-bottom:22px; }
.bw-both{ margin-top:48px; }

/* ---------- 4b. Ennios: the name set huge, the warehouse standing in front of it ---------- */
/* the same move as the hero's MUSTANG behind the tuk-tuk: the roof rises over the
   foot of the letters, and the wall runs off the left edge as it does in the street */
.ennios-head{ position:relative;z-index:1;gap:0;margin-bottom:0; }
.ennios-head h2{ font-size:calc(28vw * var(--ds));line-height:calc(.8 * var(--dlh));letter-spacing:-.025em; }
.ennios-head .script{ order:-1;justify-self:end;margin:0 2vw 2vw 0;font-size:calc(clamp(2.4rem,12vw,3.6rem) * var(--ss));transform:rotate(-6deg);transform-origin:100% 50%; }
.ennios-cols{ grid-template-areas:"tower" "text" "pics";gap:36px; }
.ennios-cols > .col:first-child{ grid-area:pics;grid-template-columns:1fr 1fr;gap:12px; }
.ennios-cols > .col:first-child .frame{ aspect-ratio:3/4; }
.ennios-tower{
  grid-area:tower;position:relative;z-index:2;min-height:0;
  width:min(88vw,470px);aspect-ratio:1755/2400;justify-self:start;
  margin:-4vw 0 0 calc(var(--gutter) * -1);
}
.ennios-cols > .col:last-child{ grid-area:text; }
.ennios-cols > .col:last-child > .frame{ display:none; }
.ennios-cols .chapter-links{ display:grid;grid-template-columns:1fr 1fr; }
.chapter-links .btn{ padding:0 1em; }

/* ---------- 4c. The Grand: the doors, photographed upright, close over 1872 ---------- */
.grand-year{ font-size:calc(clamp(8rem,44vw,16rem) * var(--ds)); }
.grand-copy .frame{ aspect-ratio:4/3; }
.rubys .frame{ aspect-ratio:4/3; }

/* ---------- 4d. Grumpy Monkey: the two friends large, cut just below the shot glasses ---------- */
/* as on Grumpy Monkey's own phone page: the photograph runs wider than the screen.
   The glasses sit at 61% of its height, so the photo is sized from the stage
   height (stage / (1.237 x .64)) and the stage ends just under them */
/* the stage is clipped at the sides and the foot but left open at the top, so the
   heads rise out of the photograph over the red ground above, as on desktop.
   Sized so the crop still lands under the glasses: width = stage x 1.17 / (1.237 x .66) */
.gm-stage{ --gh:min(74vw,480px);height:var(--gh);overflow:visible;clip-path:inset(-60% 0 0 0); }
.gm-stage .layer--people{ inset:-17% 0 auto 0;height:auto;display:block;z-index:2; }
/* the heads rise into the red ground, and stop short of the heading at every width */
.gm-head{ margin-bottom:calc(min(74vw,480px) * .13); }
.gm-stage .layer--people picture{ position:relative;left:50%;display:block;width:max(100%,calc(var(--gh) * 1.433));height:auto;transform:translateX(-50%); }
.gm-stage .layer--people img{ width:100%;height:auto;object-fit:initial;-webkit-mask-image:none;mask-image:none; }

/* ---------- 5. private hire: shorter frames, and the three-venue event as a route ---------- */
.hire-split{ gap:44px; }
.steps{ height:auto;overflow:visible;display:grid;gap:22px;padding:var(--section) var(--gutter); }
.steps-head{ margin-bottom:10px; }
.step{
  position:relative;inset:auto;z-index:auto;isolation:auto;
  display:grid;grid-template-columns:80px 1fr;column-gap:18px;align-items:center;
  min-height:0;background:none;color:inherit;
}
.step .fill{ position:relative;inset:auto;width:80px;aspect-ratio:1;border-radius:50%;overflow:hidden; }
.step .fill::after{ display:none; }
/* a line joins the stops, as on the venue deck */
.step:nth-of-type(-n+2)::after{ content:"";position:absolute;left:40px;top:86px;bottom:-16px;width:1px;background:var(--line); }
.step-text{ padding:0;max-width:none;align-self:center; }
.step-text .d2{ font-size:var(--fs-d3);line-height:calc(.94 * var(--dlh)); }
.step:nth-of-type(3) .step-text{ display:contents; }
.step:nth-of-type(3) .step-text .lead{ grid-column:1 / -1;margin-top:28px!important;font-size:var(--fs-body); }

/* ---------- 6-8. christmas and news ---------- */
.xmas{ gap:28px; }
.xmas .frame{ aspect-ratio:4/3; }
.news-list{
  display:flex;gap:14px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
  scrollbar-width:none;
}
.news-list::-webkit-scrollbar{ display:none; }
.post{ flex:0 0 min(78vw,340px);scroll-snap-align:start; }
.post .frame,.post:first-child .frame{ aspect-ratio:4/3;margin-bottom:16px; }

/* ---------- 9. the last frame: every venue, with its actions, over the water ---------- */
.cta{ height:auto; }
.cta-stage{ position:relative;top:auto;height:auto;min-height:100svh; }
.cta-frame::after{ background:rgba(10,22,38,.58); }
.cta-text{
  position:relative;inset:auto;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:0;text-align:left;
  padding:calc(var(--header-h) + 20px) var(--gutter) calc(36px + env(safe-area-inset-bottom));
}
.cta-text .lead{ margin-top:12px; }
.cta-list{ margin-top:26px;padding-bottom:8px;border-bottom:1px solid rgba(244,239,231,.26); }
.cta-list li{ display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px;padding:12px 0 2px;border-top:1px solid rgba(244,239,231,.26); }
.cta-name{ display:grid;gap:4px; }
.cta-name .name{ font-family:var(--f-display);font-weight:var(--dw);font-stretch:var(--dst);text-transform:uppercase;font-size:calc(1.5rem * var(--ds));line-height:1; }
.cta-name .where{ font-size:var(--fs-small);color:var(--fg-soft); }
.cta-list .btn{ --b-bg:var(--stone);--b-fg:var(--ink);min-height:44px;padding:0 1.4em; }
.cta-more{ grid-column:1 / -1; }
.cta-help{ justify-content:flex-start;margin-top:20px; }

/* ---------- tablets (the phone layout on a wide screen): copy takes more of the width ---------- */
@media (min-width:600px){
  .lead{ max-width:50ch; }
  .hire-split p{ max-width:56ch!important; }
}