/* Home page scenes. Order follows the page. */

/* ---------- 0. the MG doorway ---------- */
.doorway{
  position:fixed;inset:0;z-index:100;
  background:var(--night);color:var(--stone);
  display:grid;place-items:center;
  will-change:opacity;   /* its fade-out on the first touch stays on the compositor */
}
.doorway-window{
  position:absolute;inset:0;
  background:var(--img) center/cover no-repeat;
  -webkit-mask:url("../img/brand/mg-mark.svg") no-repeat;
  mask:url("../img/brand/mg-mark.svg") no-repeat;
  -webkit-mask-size:var(--mw,40vw) auto;mask-size:var(--mw,40vw) auto;
  -webkit-mask-position:var(--mx,30vw) var(--my,30vh);mask-position:var(--mx,30vw) var(--my,30vh);
  opacity:0;
}
/* a fine film grain over the hero photograph, so it reads as a photograph and
   not a render; the doorway gets the same grain, since it hands over to the
   hero mid-shot */
.doorway-window::after,.hero-scene::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../img/grain.png") 0 0/200px 200px repeat;
  mix-blend-mode:overlay;opacity:var(--grain,.14);
}
.doorway-caption{
  position:absolute;left:0;right:0;bottom:clamp(40px,11vh,110px);
  display:grid;justify-items:center;gap:14px;text-align:center;
}
.doorway-caption p{ overflow:hidden; }
.doorway-word{ display:block; }
.doorway-rule{ width:min(220px,50vw);height:1px;background:rgba(244,239,231,.2);overflow:hidden; }
.doorway-rule i{ display:block;height:100%;background:var(--peach);transform-origin:0 50%;transform:scaleX(0); }
html.intro-done .doorway{ display:none; }

/* ---------- 1. hero ---------- */
/* 190vh: 90vh of scroll carries the whole hero (see hero() in js/home.js) */
.hero{ position:relative;height:190vh; }
.hero-stage{ position:sticky;top:0;height:100svh;overflow:hidden; }
.hero-scene{ position:absolute;inset:0; }
.hero-scene::after{ z-index:3; }   /* over the tuk-tuk (3, earlier in source), under the meta (4) */
.hero-plate,.hero-tuk{ position:absolute;inset:0;will-change:transform; }
.hero-master{ position:absolute;inset:0; }
.hero-plate img,.hero-plate video,.hero-tuk img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:34% 62%;
}
.hero-plate video{ opacity:0;transition:opacity 1.2s var(--ease-out); }
.hero-plate video.is-playing{ opacity:1; }
.hero-tuk{ z-index:3;pointer-events:none; }
/* the monogram is the title: the MG at the foot of the photograph, with the name
   and one line beside it, on the pale paving. They leave with the page as the
   scroll starts, while the photograph stays where it is (hero() in js/home.js) */
/* a slight haze of paper where the words sit (the foot of the photograph here, the
   top on phones); it clears as they leave */
.hero-haze{
  position:absolute;z-index:2;left:0;right:0;bottom:0;height:44vh;pointer-events:none;
  background:linear-gradient(to top,rgba(244,239,231,.44),rgba(244,239,231,.2) 46%,rgba(244,239,231,0));
}
.hero-lift{ position:absolute;inset:0;z-index:2;pointer-events:none; }
.hero-word{
  position:absolute;z-index:0;right:var(--gutter);bottom:clamp(26px,4.2vh,52px);
  color:var(--ink);pointer-events:auto;will-change:transform,opacity;
}
.hero-word-in{ display:grid;grid-template-columns:auto auto;align-items:end;column-gap:clamp(22px,2.6vw,48px); }
/* The tuk-tuk is in front of the words, so they must stay on the paving to its right
   or they vanish behind it. Whenever the window is narrower than 16:9 the photograph
   is cropped from the sides, and the tuk-tuk's right edge at the foot of the screen
   sits 34vw + 23.06vh from the left (object-position 34%; the edge is 47% of the way
   across the picture, which is 1.774 times the screen's height wide). --clear is the
   room left beside it, less the gutter and a little air; the MG never asks for more. */
.hero-word{ --clear:calc(66vw - 23.06vh - var(--gutter) - 24px); }
.hero-mgbox{ grid-column:2;grid-row:1;width:clamp(200px,min(27vw,calc(var(--clear) - 15.5rem - 2.6vw)),540px);transform-origin:0 0;will-change:transform; }
.hero-mg{ display:block;width:100%;height:auto;fill:currentColor; }
.hero-say{ position:relative;grid-column:1;grid-row:1;display:grid;justify-items:end;text-align:right;gap:12px;padding-bottom:.2vw; }
.hero-name{ font:600 .8125rem/1.2 var(--f-text);letter-spacing:.26em;margin-right:-.26em;text-transform:uppercase; }
.hero-sub{ font-size:1.0625rem;line-height:1.45;font-weight:500;max-width:25ch;text-wrap:balance; }
.hero-go{
  display:inline-flex;align-items:center;gap:.6em;min-height:44px;margin-block:-8px -12px;
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:inherit;text-decoration:none;
}
.hero-go .arrow{ width:1.3em;height:1.3em;transition:transform var(--t-s) var(--ease-out); }
.hero-go:hover .arrow,.hero-go:focus-visible .arrow{ transform:translateX(4px); }
/* tall or small windows (a third or half of a wide monitor, a tablet on its side, a
   portrait monitor): there is no room for the words beside the MG, so they go under it */
@media (min-width:900px) and (max-aspect-ratio:7/5),(min-width:900px) and (max-width:1199px){
  .hero-word-in{ grid-template-columns:1fr;justify-items:end;row-gap:clamp(14px,1.5vw,26px); }
  .hero-mgbox{ grid-column:1;grid-row:1;width:clamp(150px,min(27vw,var(--clear)),540px); }
  .hero-say{ grid-column:1;grid-row:2;max-width:max(150px,var(--clear));padding-bottom:0; }
}


@media (prefers-reduced-motion:reduce){
  .hero{ height:auto; }
  .hero-stage{ position:relative; }
}

/* desktop: the badge that rises with its ring of venues and grows until it is the
   next ground (phones: the dome in the intro, below) */
.badge{
  position:absolute;z-index:5;left:50%;bottom:0;
  width:min(74vmin,760px);aspect-ratio:1;margin-left:calc(min(74vmin,760px) / -2);
  margin-bottom:calc(min(74vmin,760px) / -2);
  border-radius:50%;background:var(--peach);color:var(--ink);
  transform:translateY(62%) scale(.5);transform-origin:50% 50%;
  display:grid;place-items:center;
}
.badge-ring{ position:absolute;inset:3.5%;width:93%;height:93%;animation:ring-turn 60s linear infinite; }
.badge-ring text{ font-family:var(--f-text);font-weight:600;font-size:13.5px;text-transform:uppercase;fill:var(--ink); }
@keyframes ring-turn{ to{ transform:rotate(360deg); } }
.badge-core{ width:38%;display:grid;justify-items:center;gap:10px; }
.badge-core svg{ width:100%;fill:var(--ink); }
@media (prefers-reduced-motion:reduce){ .badge{ display:none; } .badge-ring{ animation:none; } }

/* ---------- 2. intro ---------- */
/* the MG and heading ride in on the peach dome, so the hand-over never reads as an empty screen */
.intro{ position:relative;overflow-x:clip;padding-top:clamp(64px,11vh,150px); }
/* the dome: a circle (its size set by js/home.js, growing from its top) and the
   straight-sided body below its widest point, both in peach. It is hidden until
   the script has sized it, and never shown without motion */
.intro-dome{ position:absolute;left:50%;top:0;width:0;height:0;visibility:hidden;pointer-events:none; }
.intro.has-dome .intro-dome{ visibility:visible; }
.dome-cap,.dome-body{ position:absolute;left:-500px;top:0;width:1000px;background:var(--peach);transform-origin:50% 0;will-change:transform; }
.dome-cap{ height:1000px;border-radius:50%; }
.dome-body{ height:600vh; }
.intro > .wrap,.intro > .register{ position:relative; }
.intro-mark{
  position:absolute;left:50%;top:6%;width:min(150vw,2200px);
  transform:translateX(-50%);fill:var(--ink);opacity:.07;pointer-events:none;
}
/* desktop keeps the badge's MG, so the intro has none of its own */
@media (min-width:900px){ .intro{ --mgw:0px !important;--mg-gap:0px !important; } .intro-mg,.intro-dome{ display:none; } }
/* The intro rides up over the second half of the hero (--ov), and that overlap is
   see-through: the MG and the heading travel up over the hero on the dome while it is
   still growing, so they arrive with the peach instead of after it. The intro's
   own peach starts where the hero ends. The overlap is sized from the hero's
   scroll (--pin, 90vh here) so the heading enters at --enter of the way through,
   when the dome is wide enough to sit behind it; the MG above it is in the
   overlap too (--mgw is its width, set by js/home.js to the heading's). */
@media (prefers-reduced-motion:no-preference){
  .intro{
    --pin:90vh;--enter:.18;--pad:clamp(24px,3vh,40px);
    --ov:calc(var(--pin) * (1 - var(--enter)) + var(--pad) + var(--mgw) * .5828 + var(--mg-gap));
    margin-top:calc(var(--ov) * -1);padding-top:var(--pad);
    background:linear-gradient(to bottom,transparent var(--ov),var(--bg) 0);
  }
}
.intro-statement{ position:relative;max-width:18ch;margin-inline:auto;text-align:center; }
/* the MG sits on the heading, as wide as its longest line (js/home.js measures it;
   the fallback is close), growing from its foot so the gap to the words never moves */
.intro{ --mgw:min(84vw,1000px);--mg-gap:clamp(18px,3vh,32px); }
.intro-mg{ position:relative;display:block;width:var(--mgw);height:auto;margin:0 auto var(--mg-gap);fill:var(--ink);transform-origin:50% 100%;will-change:transform; }
/* one centred column under the heading: the group's former name and mark (for
   everyone who still knows it by that), then the gift voucher */
.heritage{ position:relative;display:grid;justify-items:center;gap:14px;margin-top:clamp(40px,6vh,72px);text-align:center;color:var(--fg-soft); }
.heritage img{ width:clamp(120px,10vw,160px);height:auto; }
.heritage span{ font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;line-height:1.6;text-transform:uppercase;font-stretch:88%; }
.intro-gift{ position:relative;max-width:38ch;margin:clamp(40px,6vh,72px) auto 0;text-align:center; }

.register{ position:relative;margin-top:clamp(72px,12vh,140px);border-block:1px solid var(--line);overflow:hidden; }
.marquee-track{ display:flex;width:max-content; }
.marquee-list{ display:flex;flex:none; }
.marquee-list li{ display:flex;align-items:baseline;gap:.5em;padding:clamp(18px,2.6vw,30px) clamp(22px,3vw,44px);white-space:nowrap; }
.marquee-list .name{ font-family:var(--f-display);font-weight:var(--dw);font-stretch:var(--dst);text-transform:uppercase;font-size:calc(clamp(1.8rem,3.4vw,3.2rem) * var(--ds));line-height:1; }
.marquee-list .where{ font-size:var(--fs-small);color:var(--fg-soft); }
.marquee-list li::after{ content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;margin-left:clamp(22px,3vw,44px);align-self:center; }
@media (prefers-reduced-motion:no-preference){
  .marquee-track{ animation:marquee 46s linear infinite; }
  .register:hover .marquee-track{ animation-play-state:paused; }
}
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .marquee-track{ width:auto; }
  .marquee-list{ flex:1 1 auto;flex-wrap:wrap; }
  .marquee-list[aria-hidden]{ display:none; }
}

/* ---------- 3. along the water ---------- */
.run{ position:relative;overflow:hidden; }
.run-head{ padding:calc(var(--header-h) + clamp(12px,3vh,40px)) var(--gutter) clamp(8px,2vh,24px); }
.run-title{ display:flex;flex-wrap:wrap;gap:0 .32em;font-size:calc(clamp(2.6rem,5.6vw,6.25rem) * var(--ds)); }
.run-title span{ display:block;white-space:nowrap; }
.run-title .script{ color:var(--peach); }
.run-track{ position:relative;display:flex;gap:clamp(28px,4vw,72px);padding:0 var(--gutter) clamp(72px,12vh,120px);width:max-content; }
.run-line{ position:absolute;left:0;top:clamp(0px,1vh,12px);width:100%;height:110px;overflow:visible;pointer-events:none; }
.run-line path{ fill:none;stroke:var(--peach);stroke-width:1.4;opacity:.8; }
.run-vline{ display:none; }
.run::after{ content:"";position:absolute;inset:0;z-index:6;background:var(--night);opacity:var(--dim,0);pointer-events:none; }
/* the Banana Wharf chapter arrives as a card over the pinned run (desktop, motion on; set by script) */
.chapter.is-overlay{
  z-index:2;margin-top:-100vh;border-radius:28px 28px 0 0;
  box-shadow:0 -34px 70px -24px rgba(6,14,26,.6);
}
.stop{ position:relative;width:clamp(280px,25vw,420px);padding-top:clamp(64px,9vh,90px);flex:none; }
.stop:nth-child(odd){ padding-top:clamp(84px,13vh,130px); }
.stop-pin{ position:absolute;top:clamp(28px,4.5vh,46px);left:0;display:flex;align-items:center;gap:12px; }
.stop-pin i{ width:11px;height:11px;border-radius:50%;background:var(--peach);box-shadow:0 0 0 6px rgba(240,174,139,.18); }
.stop .frame{ height:clamp(200px,34vh,360px); }
.stop:nth-child(3n+1) .frame{ height:clamp(220px,38vh,400px); }
.stop-text{ margin-top:18px; }
.stop-text p{ font-size:var(--fs-small);line-height:1.5; }
.stop-text h3{ margin-bottom:6px; }
.stop-text p{ color:var(--fg-soft); }
.stop-links{ display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px; }
.run-end{ width:clamp(260px,24vw,380px);align-self:center;flex:none; }
/* while pinned the run owns the whole screen, so a tall window (half a 4K
   monitor) never shows empty ground under the cards */
@media (min-width:900px){
  .run{ min-height:100vh;display:flex;flex-direction:column;justify-content:center; }
}
/* laptop-height screens: the pinned run cannot scroll down, so the photos give
   up height and the whole card (copy and booking links) stays above the fold */
@media (min-width:900px) and (max-height:960px){
  .run-head{ padding-top:calc(var(--header-h) + clamp(4px,1.2vh,16px));padding-bottom:clamp(4px,1vh,12px); }
  .run-title{ font-size:calc(clamp(2.2rem,4.4vw,4.4rem) * var(--ds)); }
  .run-track{ padding-bottom:clamp(28px,5vh,56px); }
  .stop{ padding-top:clamp(48px,7vh,68px); }
  .stop:nth-child(odd){ padding-top:clamp(60px,10vh,96px); }
  .stop-pin{ top:clamp(20px,3vh,34px); }
  .stop .frame{ height:clamp(150px,25vh,250px); }
  .stop:nth-child(3n+1) .frame{ height:clamp(160px,28vh,280px); }
  .stop-text{ margin-top:14px; }
}
@media (min-width:900px) and (min-height:1400px){
  .stop{ width:clamp(280px,25vw,520px); }
  .stop .frame{ height:clamp(200px,28vh,560px); }
  .stop:nth-child(3n+1) .frame{ height:clamp(220px,31vh,620px); }
}

/* ---------- 4. chapters ---------- */
/* clip, not hidden: hidden makes each chapter a scroll container, which stops
   anything sticky inside it (Ocean Village's block) from sticking */
.chapter{ position:relative;overflow:hidden;overflow:clip; }
.chapter-head{ display:grid;gap:18px;margin-bottom:clamp(40px,7vh,80px); }
.chapter-head .script{ color:var(--accent); }
.chapter-facts{ display:grid;gap:8px;margin-top:18px; }
.chapter-facts li{ display:flex;gap:12px;align-items:baseline; }
.chapter-facts li::before{ content:"";width:18px;height:1px;background:currentColor;opacity:.6;flex:none;transform:translateY(-.3em); }
.chapter-links{ display:flex;flex-wrap:wrap;gap:12px;margin-top:28px; }

/* Banana Wharf: the marina moves behind, the drinks float in front.
   The photograph is 1800px wide, so the stage keeps close to its proportions
   and it is never enlarged much past its own size */
.bw-stage{ position:relative;height:min(110vh,60vw);min-height:440px;margin-inline:calc(var(--gutter) * -1); }
.bw-stage .frame{ position:absolute;inset:0;overflow:hidden; }
.bw-stage .frame picture{ position:absolute;inset:-6% 0;display:block; }
.bw-stage .frame img{ width:100%;height:100%;object-fit:cover;object-position:50% 60%; }
.bw-drinks{
  position:absolute;z-index:3;right:6vw;bottom:-6%;width:clamp(220px,30vw,520px);
  filter:drop-shadow(0 30px 40px rgba(10,22,38,.35));
}
/* the heritage: the archive photograph large, the story beside it */
.bw-story{ position:relative;z-index:2;display:grid;gap:clamp(28px,4vw,72px);margin-top:clamp(72px,12vh,150px); }
@media (min-width:900px){ .bw-story{ grid-template-columns:7fr 5fr;align-items:end; } }
.bw-archive .frame{ aspect-ratio:4/3; }
.bw-archive img{ filter:grayscale(1) contrast(1.08); }
.bw-archive figcaption{ margin-top:12px;font-size:var(--fs-small);color:var(--fg-soft); }
.bw-statement{ font-size:clamp(1.55rem,1rem + 1.5vw,2.6rem);line-height:1.3;letter-spacing:-.012em;font-weight:450;max-width:21ch; }
.bw-coda{ margin-top:clamp(14px,2vh,24px);font-size:calc(clamp(2.4rem,1.6rem + 2.8vw,4.6rem) * var(--ss));line-height:1;color:var(--accent);transform:rotate(-4deg);transform-origin:0 50%; }
@media (min-width:900px){ .bw-story-text{ padding-bottom:clamp(8px,2vh,28px); } }

/* the two marinas: unequal on purpose. Ocean Village is the photograph above,
   so its block is words; Port Hamble is the aerial */
.bw-places{ display:grid;gap:clamp(56px,8vw,96px);margin-top:clamp(96px,16vh,200px); }
@media (min-width:900px){
  .bw-places{ grid-template-columns:repeat(12,1fr);column-gap:clamp(20px,2.4vw,40px);align-items:start; }
  /* Ocean Village rides alongside while Port Hamble's aerial and text scroll past */
  .bw-place--ov{ grid-column:1 / span 4;align-self:start;position:sticky;top:clamp(90px,22vh,280px);margin-top:clamp(40px,12vh,160px); }
  .bw-place--ph{ grid-column:6 / span 7; }
}
.bw-place p{ max-width:40ch; }
.bw-place h3{ margin-bottom:16px; }
.bw-place-text{ margin-top:clamp(22px,3vh,34px); }
.bw-rating{ display:flex;align-items:baseline;gap:14px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--fg-soft); }
.bw-rating-n{ font-family:var(--f-display);font-weight:var(--dw);font-stretch:var(--dst);font-size:calc(clamp(2.8rem,1.8rem + 2.6vw,4.8rem) * var(--ds));line-height:.8;color:var(--fg); }
.bw-place .btn{ margin-top:26px; }
.hamble{ position:relative; }
.hamble .frame{ aspect-ratio:3/2; }
.bw-both{ display:grid;gap:14px;margin-top:clamp(88px,13vh,160px);padding-top:28px;border-top:1px solid var(--line); }
@media (min-width:900px){ .bw-both{ grid-template-columns:1fr auto;align-items:end; } }
.bw-both .lead{ max-width:44ch; }
.bw-note{ font-size:var(--fs-small);color:var(--fg-soft); }

.hotspot{ position:absolute;z-index:4;left:var(--x);top:var(--y); }
.hotspot button{ position:relative;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;display:grid;place-items:center; }
.hotspot button::before{ content:"";width:14px;height:14px;border-radius:50%;background:var(--stone);box-shadow:0 2px 10px rgba(10,22,38,.4); }
.hotspot button::after{ content:"";position:absolute;inset:15px;border-radius:50%;border:1.5px solid var(--stone); }
@media (prefers-reduced-motion:no-preference){
  .hotspot button::after{ animation:pulse 2.4s var(--ease-in) infinite; }
  .hotspot:nth-of-type(2) button::after{ animation-delay:.8s; }
}
@keyframes pulse{ from{ transform:scale(.6);opacity:1; } to{ transform:scale(2.2);opacity:0; } }
.hotspot-note{
  position:absolute;left:18px;top:18px;width:max-content;max-width:min(260px,70vw);
  padding:12px 14px;background:var(--stone);color:var(--ink);border-radius:3px;
  font-size:var(--fs-small);line-height:1.4;box-shadow:0 14px 30px -14px rgba(10,22,38,.6);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity var(--t-s) var(--ease-out),transform var(--t-s) var(--ease-out);
}
.hotspot.is-open .hotspot-note,.hotspot:hover .hotspot-note,.hotspot button:focus-visible+.hotspot-note{ opacity:1;transform:none; }
.hotspot[data-flip] .hotspot-note{ left:auto;right:18px; }

/* Ennio's: two columns moving against each other */
.ennios-cols{ display:grid;gap:clamp(20px,3vw,40px);align-items:start; }
@media (min-width:900px){ .ennios-cols{ grid-template-columns:1fr 1.25fr 1fr; } }
.ennios-cols .col{ display:grid;gap:clamp(20px,3vw,40px); }
.ennios-cols .frame{ aspect-ratio:4/5; }
.ennios-tower{ position:relative;min-height:clamp(420px,90vh,900px); }
/* the warehouse fills its own column and never more: it is fitted, bottom-anchored,
   so at no window size can it reach the text in the columns either side */
.ennios-tower picture{ position:absolute;inset:0;display:block; }
.ennios-tower img{ width:100%;height:100%;object-fit:contain;object-position:50% 100%; }
.ennios-script{ position:absolute;left:4%;top:8%;z-index:2;color:var(--terracotta); }

/* The Grand: curtains over 1872 */
.grand-stage{ position:relative;height:100svh;overflow:hidden; }
.grand-year{
  position:absolute;inset:0;display:grid;place-items:center;z-index:4;pointer-events:none;
  font-family:var(--f-display);font-weight:var(--dw);font-stretch:var(--dst);font-size:calc(clamp(9rem,40vw,48rem) * var(--ds));line-height:calc(.8 * var(--dlh));
  color:var(--peach);letter-spacing:-.03em;
}
.curtain-l,.curtain-r{ position:absolute;top:0;bottom:0;width:50%;overflow:hidden;z-index:2; }
.curtain-l{ left:0; }
.curtain-r{ right:0; }
.curtain-l img,.curtain-r img{ position:absolute;top:0;height:100%;width:200%;max-width:none;object-fit:cover; }
.curtain-l img{ left:0; }
.curtain-r img{ right:0; }
.grand-copy{ position:relative;z-index:3;display:grid;gap:clamp(32px,5vw,80px); }
@media (min-width:900px){ .grand-copy{ grid-template-columns:1fr 1fr;align-items:start; } }
.grand-copy .frame{ aspect-ratio:3/2; }

/* The Grand and Rubys share one building, so one section's spacing between them, not two */
.rubys{ position:relative;padding-top:calc(var(--section) * .25); }
.rubys-stage{ position:relative;display:grid;gap:clamp(32px,5vw,80px);align-items:center; }
@media (min-width:900px){ .rubys-stage{ grid-template-columns:1fr 1fr; } }
.rubys .frame{ aspect-ratio:4/5; }

/* Grumpy Monkey: two layers of the same photograph, pulled apart */
.gm-stage{ --gh:clamp(460px,66vh,760px);position:relative;height:var(--gh);overflow:hidden;margin-inline:calc(var(--gutter) * -1); }
.gm-bg{ position:absolute;inset:0;overflow:hidden; }
.gm-stage .layer{ position:absolute;inset:-8% 0;height:116%; }
.gm-stage .layer img{ width:100%;height:100%;object-fit:cover;object-position:50% 30%; }
/* the two friends are fitted, never cropped: whole figures standing on the
   bottom edge, the blurred bar filling the width behind them */
.gm-stage .layer--people{ inset:10% 0 -4% 0;height:auto;display:flex;justify-content:center; }
.gm-stage .layer--people picture{ display:block;height:100%; }
.gm-stage .layer--people img{ width:auto;height:100%;max-width:none;object-fit:initial;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%); }
/* desktop: the friends are larger than the photograph behind them, so their
   heads rise out over the ground above, and the stage clips them just under
   the table ledge, which sits at 66% of the cut-out's height:
   height = (stage + rise) / .66, with the heads rising 16% of the stage */
@media (min-width:900px){
  .gm-stage{ overflow:visible;clip-path:inset(-60% 0 0 0); }
  .gm-stage .layer--people{ inset:auto 0 auto 0;top:calc(var(--gh) * -.16);height:calc(var(--gh) * 1.758);z-index:2; }
}
/* the loops only run while they are on screen (js/site.js adds .is-live) */
[data-live]:not(.is-live){ animation-play-state:paused!important; }
.gm-copy{ position:relative;display:grid;gap:32px;margin-top:clamp(48px,8vh,96px); }
@media (min-width:900px){ .gm-copy{ grid-template-columns:1fr 1fr;align-items:end; } }

/* ---------- 5. private hire ---------- */
.hire-collage{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.2vw,16px);margin-bottom:clamp(40px,6vw,80px); }
.hire-collage .frame{ aspect-ratio:4/5; }
@media (min-width:900px){
  .hire-collage{ grid-template-columns:1.5fr 1fr 1fr 1fr;align-items:end; }
  .hire-collage .frame:first-child{ aspect-ratio:4/3; }
  .hire-collage .frame:nth-child(3){ aspect-ratio:3/4; }
}
.hire-split{ display:grid;gap:clamp(40px,6vw,96px); }
@media (min-width:900px){ .hire-split{ grid-template-columns:1fr 1fr; } }
/* one full-height panel per venue, scrolled past like the rest of the page */
.steps{ position:relative; }
/* capped against the width so a tall window (half a 4K monitor) doesn't turn
   each panel into two screens of one photograph */
.step{ position:relative;min-height:min(88svh,58vw);display:grid;background:var(--ink);color:var(--stone);isolation:isolate; }
/* darker at the foot, where the heading sits, lighter over the rest of the photograph */
.step .fill::after{ content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,22,38,.82) 0%,rgba(10,22,38,.46) 34%,rgba(10,22,38,.26) 100%); }
.step-text{ position:relative;z-index:2;align-self:end;padding:0 var(--gutter) clamp(72px,12vh,120px);max-width:760px; }
.step-text .label{ color:var(--peach); }

/* ---------- 6-8. christmas, reviews, news ---------- */
.xmas{ display:grid;gap:clamp(32px,5vw,80px);align-items:center; }
@media (min-width:900px){ .xmas{ grid-template-columns:.9fr 1.1fr; } }
.xmas .frame{ aspect-ratio:4/3; }
.stamp{ display:inline-block;margin-top:20px;padding:8px 12px;border:1px solid var(--line);border-radius:999px; }
.ratings{ display:grid;gap:clamp(24px,4vw,56px); }
@media (min-width:900px){ .ratings{ grid-template-columns:repeat(2,1fr); } }
.rating{ border-top:1px solid var(--line);padding-top:22px; }
.rating .d2{ display:flex;align-items:baseline;gap:.2em; }
.news-list{ display:grid;gap:clamp(40px,5vw,72px); }
@media (min-width:900px){ .news-list{ grid-template-columns:1.3fr 1fr 1fr;align-items:start; } }
.post .frame{ aspect-ratio:4/3;margin-bottom:20px; }
.post:first-child .frame{ aspect-ratio:4/5; }
.post a{ text-decoration:none; }
.post h3{ margin:8px 0 10px; }
.post time{ color:var(--fg-soft); }

/* ---------- 9. the last frame ---------- */
.cta{ position:relative;height:200vh; }
.cta-stage{ position:sticky;top:0;height:100svh; }
.cta-frame{ position:absolute;inset:0;overflow:hidden; }
.cta-frame video,.cta-frame img{ width:100%;height:100%;object-fit:cover; }
.cta-frame::after{ content:"";position:absolute;inset:0;background:rgba(10,22,38,.34); }
.cta-text{ position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:26px;text-align:center;color:var(--stone);padding:var(--gutter); }
/* the links that used to sit in the footer: questions and the office */
.cta-help{ display:flex;flex-wrap:wrap;justify-content:center;gap:0 28px; }
@media (prefers-reduced-motion:reduce){ .cta{ height:auto; } .cta-stage{ position:relative; } }

/* additions: Grumpy Monkey's side column */
.gm-side{ display:grid;gap:24px;justify-items:start; }
.gm-side .frame{ aspect-ratio:16/10;width:100%; }

.post-date{ display:block;margin-top:8px;color:var(--fg-soft);font-size:var(--fs-small); }
/* reduced motion: every scene settles into its finished state, nothing is
   left stacked, clipped or waiting on a scroll-driven move to be reached */
@media (prefers-reduced-motion:reduce){
  .grand-year{ transform:scale(.46); }
}
@media (min-width:900px) and (prefers-reduced-motion:reduce){
  .run-track{ width:auto;flex-wrap:wrap;row-gap:clamp(40px,6vh,72px); }
  .run-line{ display:none; }
}