@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400..900;1,400..900&family=Space+Grotesk:wght@400;500;700&display=swap');

/* ==========================================================================
   THOMAS GARDEA - FALL MINI PHOTOSHOOTS
   Component: fallminis/main  ->  [tg_component id="fallminis/main"]

   The backdrop in the studio section is a cloth solver drawn on the GPU by
   script.js, not by CSS, and the motes behind the picker are a particle
   swarm on a second canvas. Nothing in this file shades, folds or moves
   either - the only rules that touch the canvases are size and position. The stage's
   own background is a standin for before the first frame, for JavaScript
   off, and for a browser with no WebGL.

   SCOPING RULE - every selector starts with #tg-fallminis. Nothing may
   touch *, html, body, bare img/a/h1-h6 or ::selection at global scope:
   global CSS from a component once made the WordPress header menu
   unclickable. Tokens live on #tg-fallminis rather than :root for the same
   reason - they cannot collide with the theme's own variables.

   The page background is NOT set here. It is an inline <style> at the top
   of index.html, on purpose: an inline block comes after the theme's
   stylesheets in document order, which is the only reason it wins.

   Prefix: fm-   Root: #tg-fallminis
   ========================================================================== */

#tg-fallminis {

  /* ---- ground & ink ---- */
  --bg:        #12100d;
  --bg-2:      #1a1713;
  --bg-3:      #221d17;
  --paper:     #F3ECE1;   /* 15.8:1 on --bg */
  --muted:     #BCAF9C;   /* 8.7:1 */
  --dim:       #94886F;   /* 5.4:1 */
  --line:      rgba(243, 236, 225, 0.13);
  --line-2:    rgba(243, 236, 225, 0.28);

  /* ---- ember accent ---- */
  --amber:     #E4762B;   /* 6.3:1 */
  --rust:      #B2412A;
  --gold:      #E8B23A;   /* 10.1:1 */

  /* ---- type ---- */
  --disp: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ui:   "Space Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* ---- spacing, 8px base ---- */
  --s1: 8px;  --s2: 16px;  --s3: 24px;  --s4: 40px;  --s5: 64px;  --s6: 104px;

  /* ---- page edges: the same side cushion and width as the header,
     footer and every other TG page ---- */
  --fm-gut: clamp(16px, 3vw, 40px);
  --fm-max: 1400px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* How far the story has risen over the hero, 0 to 1. script.js writes
     it; the hero's exit is a formula of it. */
  --hp: 0;

  /* The room the site header takes at the top of the screen (72px bar,
     plus the WordPress toolbar when logged in). Anything that pins itself
     to the screen starts below this, not under the bar. If the header's
     height changes in components/global/header/style.css, change it here. */
  --fm-head: calc(72px + var(--wp-admin--admin-bar--height, 0px));

  position: relative;
  z-index: 1;
  background: var(--bg);
  color: var(--paper);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

#tg-fallminis *,
#tg-fallminis *::before,
#tg-fallminis *::after { box-sizing: border-box; }

#tg-fallminis a { color: inherit; text-decoration: none; }
#tg-fallminis ul { list-style: none; margin: 0; padding: 0; }
#tg-fallminis p { margin: 0; }
#tg-fallminis dl, #tg-fallminis dd { margin: 0; }

/* Layout rules below out-specify the browser's own [hidden] styling. */
#tg-fallminis [hidden] { display: none !important; }

#tg-fallminis .fm-sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Film grain, same texture the other pages use. */
#tg-fallminis::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 0.93  0 0 0 0 0.85  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#tg-fallminis :focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}


/* ==========================================================================
   SHARED
   ========================================================================== */

#tg-fallminis .fm-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim);
}
/* A kicker that is also the section's heading: looks like the others. */
#tg-fallminis .fm-kicker-h {
  margin: 0; padding: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: inherit;
}

#tg-fallminis .fm-h2 {
  font-family: var(--disp);
  font-weight: 900; font-style: italic;
  font-size: clamp(38px, 6.4vw, 84px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: var(--s2) 0 0;
}

#tg-fallminis .fm-sub {
  margin-top: var(--s2);
  max-width: 44ch;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--muted);
}

#tg-fallminis .fm-head { margin-bottom: var(--s4); }

#tg-fallminis .fm-fine {
  margin-top: var(--s4);
  font-size: 13px;
  color: var(--dim);
  max-width: 52ch;
}

/* ---- buttons. Flat. They are buttons. --------------------------------- */

#tg-fallminis .fm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px;
  padding: 0 var(--s4);
  border: 1px solid var(--paper);
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  font-family: var(--ui);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
#tg-fallminis .fm-btn-solid { background: var(--paper); color: var(--bg); }
#tg-fallminis .fm-btn-line  { border-color: var(--line-2); }
#tg-fallminis .fm-btn:hover,
#tg-fallminis .fm-btn:focus-visible {
  background: var(--amber); border-color: var(--amber); color: var(--bg);
}

/* ---- reveal ----------------------------------------------------------- */

#tg-fallminis .fm-reveal,
#tg-fallminis .fm-in {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
#tg-fallminis .fm-reveal.is-on,
#tg-fallminis .fm-in.is-on { opacity: 1; transform: none; }


/* ==========================================================================
   01 - HERO
   ========================================================================== */

/* The hero stays pinned while the story rises over it. Everything after
   it is opaque, so once covered it is simply behind the page; script.js
   also hides it then so it stops painting. */
#tg-fallminis .fm-hero {
  position: sticky; top: var(--fm-head);
  z-index: 0;
  /* Header + hero fill exactly one screen. On a computer the words start
     a tenth of the screen below the header: not tight against it, not
     floating in the middle. On a phone they are centred (see RESPONSIVE). */
  min-height: calc(100vh - var(--fm-head)); min-height: calc(100svh - var(--fm-head));
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(48px, 10vh, 104px) var(--fm-gut) var(--s4);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 118%, rgba(228, 118, 43, 0.28) 0%, rgba(228, 118, 43, 0) 62%),
    radial-gradient(90% 60% at 12% 0%, rgba(178, 65, 42, 0.20) 0%, rgba(178, 65, 42, 0) 60%),
    var(--bg);
}

#tg-fallminis .fm-spot {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(340px circle at var(--sx, 50%) var(--sy, 50%),
              rgba(255, 148, 72, 0.16), transparent 70%);
  transition: opacity 0.6s var(--ease);
}
#tg-fallminis .fm-hero:hover .fm-spot { opacity: 1; }

#tg-fallminis .fm-hero-inner {
  position: relative; z-index: 3;
  max-width: var(--fm-max); margin: 0 auto; width: 100%;
  /* As the story rises, the words come toward you and dissolve. */
  transform-origin: 50% 55%;
  transform: translate3d(0, calc(var(--hp) * -8vh), 0) scale(calc(1 + var(--hp) * 0.22));
  opacity: calc(1 - var(--hp) * 1.5);
  filter: blur(calc(var(--hp) * 10px));
}
#tg-fallminis .fm-hero.is-covered { visibility: hidden; }

/* The print beside the words. Lined up with the right edge of the words'
   column, centred top to bottom, and sized by the screen's height so it
   never reaches the title. It fades back as the story rises, like the
   words do. The tilt is on the print, the entrance on the layer above. */
#tg-fallminis .fm-hero-photo {
  position: absolute; z-index: 1;
  top: 50%;
  right: max(var(--fm-gut), calc((100% - var(--fm-max)) / 2));
  width: min(32vw, 46vh, 440px);
  pointer-events: none;
  transform: translate3d(0, calc(-50% + var(--hp) * -6vh), 0);
  opacity: calc(1 - var(--hp) * 1.2);
}
/* As you scroll, the print swivels away on its upright like a photo
   turned in the hand, and a band of gloss slides across it the way light
   catches a Polaroid. --sw follows the scroll (it is --hp, or 0 while
   motion is paused), so it moves only when you do. */
#tg-fallminis .fm-hero-print {
  position: relative;
  padding: clamp(8px, 0.8vw, 12px);
  background: var(--paper);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.35);
  transform: perspective(1100px)
             rotateY(calc(var(--sw, 0) * -34deg))
             rotateX(calc(var(--sw, 0) * 7deg))
             rotate(calc(2.5deg - var(--sw, 0) * 4deg));
}
#tg-fallminis .fm-hero-print::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg,
      rgba(255, 255, 255, 0) 32%,
      rgba(255, 255, 255, 0.10) 40%,
      rgba(255, 255, 255, 0.55) 45%,
      rgba(255, 255, 255, 0.12) 50%,
      rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 45%);
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: calc(8% + var(--sw, 0) * 130%) 0, 0 0;
  mix-blend-mode: screen;
}
#tg-fallminis .fm-hero-print img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2 / 3; object-fit: cover;
}
/* Written on the print's bottom edge, like a label on a photo. */
#tg-fallminis .fm-hero-cap {
  margin: clamp(8px, 0.8vw, 12px) 0 2px;
  font-family: var(--ui); font-weight: 600;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center;
  color: var(--bg);
}
@media (max-width: 900px) {
  #tg-fallminis .fm-hero-photo { display: none; }
}

#tg-fallminis .fm-title {
  font-family: var(--disp);
  font-weight: 900; font-style: italic;
  font-size: clamp(58px, 14vw, 208px);
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin: var(--s3) 0 0;
  perspective: 900px;
}
#tg-fallminis .fm-split { display: block; }
#tg-fallminis .fm-title-accent {
  color: transparent;
  background: linear-gradient(96deg, var(--gold) 0%, var(--amber) 42%, var(--rust) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
#tg-fallminis .fm-ch {
  display: inline-block;
  transform-origin: 50% 100%;
  transform: rotateX(-92deg) translate3d(0, 0.4em, 0);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s linear;
}
#tg-fallminis .fm-title.is-on .fm-ch { transform: none; opacity: 1; }
#tg-fallminis .fm-ch:hover {
  transform: translate3d(0, -0.06em, 40px) rotate(-3deg);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#tg-fallminis .fm-lede {
  margin-top: var(--s2);
  max-width: 40ch;
  font-size: clamp(17px, 2vw, 21px);
  color: var(--muted);
  transition-delay: 0.5s;
}

#tg-fallminis .fm-price {
  margin-top: var(--s3);
  font-family: var(--disp);
  font-weight: 900; font-style: italic;
  font-size: clamp(52px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--amber);
  transition-delay: 0.62s;
}
#tg-fallminis .fm-price-cur { font-size: 0.46em; vertical-align: 0.42em; }

#tg-fallminis .fm-cta-row {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s3);
  transition-delay: 0.74s;
}

/* ---- 3D leaf field ----------------------------------------------------- */

#tg-fallminis .fm-leaves {
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  perspective: 700px;
  perspective-origin: 50% 40%;
  /* The leaf field rushes past as the hero gives way. */
  transform-origin: 50% 40%;
  transform: scale(calc(1 + var(--hp) * 0.6));
  opacity: calc(1 - var(--hp) * 0.9);
}
#tg-fallminis .fm-leaf {
  position: absolute;
  top: -14vh;
  width: var(--size, 26px); height: var(--size, 26px);
  opacity: 0;
  transform-style: preserve-3d;
  animation: fm-fall var(--dur, 15s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
#tg-fallminis .fm-leaf svg { width: 100%; height: 100%; display: block; }
@keyframes fm-fall {
  0%   { opacity: 0; transform: translate3d(0, 0, var(--z, 0px)) rotate3d(1, 1, 0.4, 0deg); }
  8%   { opacity: var(--op, 0.7); }
  50%  { transform: translate3d(var(--drift, 60px), 58vh, calc(var(--z, 0px) + 90px)) rotate3d(1, 1, 0.4, 380deg); }
  92%  { opacity: var(--op, 0.7); }
  100% { opacity: 0; transform: translate3d(calc(var(--drift, 60px) * -0.6), 118vh, var(--z, 0px)) rotate3d(1, 1, 0.4, 760deg); }
}


/* ==========================================================================
   01b - HOW IT GOES. The scroll story.

   script.js writes these on the section as you scroll:
     --p          0..1 across the whole story
     --t1..--t6   0..1 inside each of the six scenes
     --v1..--v6   0..1, how visible each scene's text is
     --flash      0..1, the camera flash
   and sets data-scene="1".."6". Everything below is a formula of those.
   The studio is six rendered shots (.fm-set3d), two layers each, from
   design/fallminis-3d. The rules further down for the old flat drawing
   (.fm-set-inner, .fm-l-*, .fm-family...) now style nothing visible.

   Without .is-live (JavaScript off, reduced motion) the six steps stack
   as ordinary text under one still drawing.
   ========================================================================== */

#tg-fallminis .fm-story {
  --p: 0;
  --t1: 0; --t2: 0; --t3: 0; --t4: 0; --t5: 0; --t6: 0;
  --v1: 1; --v2: 0; --v3: 0; --v4: 0; --v5: 0; --v6: 0;
  --flash: 0;
  /* The studio lights. Off while the story is still rising over the
     hero, up once it has settled. script.js drives it. */
  --lights: 1;
  position: relative;
  z-index: 1;
  background: var(--bg-2);
}
/* The still version shows a finished session: everyone in, TV full. */
#tg-fallminis .fm-story:not(.is-live) { --t1: 1; --t2: 1; --t3: 1; --t4: 1; }

/* Four scenes, a little over a screen of scrolling each, plus the
   screen the pinned stage itself takes up. */
#tg-fallminis .fm-story.is-live .fm-story-track { height: 560vh; }
#tg-fallminis .fm-story-stage { position: relative; }
#tg-fallminis .fm-story.is-live .fm-story-stage {
  position: sticky; top: var(--fm-head);
  height: calc(100vh - var(--fm-head)); height: calc(100svh - var(--fm-head));
  overflow: hidden;
}
/* While the lights are off the top of the studio melts into the dark
   the hero left behind, so the two never meet at a hard line. */
#tg-fallminis .fm-story.is-live .fm-story-stage::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 55%;
  z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(18, 16, 13, 0.7) 35%, rgba(18, 16, 13, 0) 100%);
  opacity: calc(1 - var(--lights));
}
#tg-fallminis .fm-story.is-live .fm-story-copy { opacity: var(--lights); }

/* Inside the drawing: a dark sheet over everything but the doorway. */
#tg-fallminis .fm-dark { opacity: calc((1 - var(--lights)) * 0.94); pointer-events: none; }
#tg-fallminis .fm-door-light { opacity: calc(1 - var(--lights)); pointer-events: none; }

/* ---- the words --------------------------------------------------------- */

#tg-fallminis .fm-story-copy {
  position: relative; z-index: 2;
  padding: var(--s5) var(--fm-gut);
  /* On a wide screen the words start where the other sections' content does. */
  padding-left: max(var(--fm-gut), calc((100% - var(--fm-max)) / 2));
}
#tg-fallminis .fm-story.is-live .fm-story-copy {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 42%;
  display: flex; flex-direction: column;
  padding-right: var(--s3);
}
#tg-fallminis .fm-story-kicker { flex: none; }

#tg-fallminis .fm-rail {
  display: none;
  gap: 6px;
  margin: var(--s2) 0 0; padding: 0;
  list-style: none;
}
#tg-fallminis .fm-story.is-live .fm-rail { display: flex; }
#tg-fallminis .fm-rail li {
  width: 28px; height: 2px;
  background: var(--line-2);
  transition: background 0.4s var(--ease);
}
#tg-fallminis .fm-story[data-scene="1"] .fm-rail li:nth-child(-n+1),
#tg-fallminis .fm-story[data-scene="2"] .fm-rail li:nth-child(-n+2),
#tg-fallminis .fm-story[data-scene="3"] .fm-rail li:nth-child(-n+3),
#tg-fallminis .fm-story[data-scene="4"] .fm-rail li:nth-child(-n+4),
#tg-fallminis .fm-story[data-scene="5"] .fm-rail li:nth-child(-n+5),
#tg-fallminis .fm-story[data-scene="6"] .fm-rail li:nth-child(-n+6) { background: var(--amber); }

#tg-fallminis .fm-story.is-live .fm-steps { position: relative; flex: 1; min-height: 0; }

#tg-fallminis .fm-step { max-width: 46ch; }
#tg-fallminis .fm-story:not(.is-live) .fm-step { margin-top: var(--s4); }
#tg-fallminis .fm-step[data-step="1"] { --v: var(--v1); }
#tg-fallminis .fm-step[data-step="2"] { --v: var(--v2); }
#tg-fallminis .fm-step[data-step="3"] { --v: var(--v3); }
#tg-fallminis .fm-step[data-step="4"] { --v: var(--v4); }
#tg-fallminis .fm-step[data-step="5"] { --v: var(--v5); }
#tg-fallminis .fm-step[data-step="6"] { --v: var(--v6); }
#tg-fallminis .fm-story.is-live .fm-step {
  position: absolute; left: 0; right: 0; top: 50%;
  opacity: var(--v);
  transform: translateY(calc(-50% + (1 - var(--v)) * 28px));
  pointer-events: none;
}
#tg-fallminis .fm-story.is-live .fm-step.is-on { pointer-events: auto; }

#tg-fallminis .fm-step-h {
  font-family: var(--disp);
  font-weight: 900; font-style: italic;
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: var(--s2) 0 0;
}
#tg-fallminis .fm-step-p {
  margin-top: var(--s2);
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--muted);
}
#tg-fallminis .fm-step-stat {
  margin-top: var(--s3);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dim);
}
#tg-fallminis .fm-step-stat b {
  display: inline-block; min-width: 2ch;
  font-family: var(--disp); font-weight: 900; font-style: italic;
  font-size: 30px; line-height: 1;
  letter-spacing: -0.03em;
  color: var(--amber);
  margin-right: 6px;
  vertical-align: -3px;
  font-variant-numeric: tabular-nums;
}
/* The two buttons that stay put for the whole story. */
#tg-fallminis .fm-story-cta {
  position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s4);
}
#tg-fallminis .fm-story.is-live .fm-story-cta { flex: none; margin-top: 0; padding-bottom: var(--s2); }

/* ---- the drawing ------------------------------------------------------- */

#tg-fallminis .fm-set3d {
  position: relative;
  display: block;
  width: 100%; height: 56vh;
  overflow: hidden;
  background: var(--bg-2);
}
#tg-fallminis .fm-story.is-live .fm-set3d {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 60%; height: 100%;
  /* The picture's left edge fades into the dark behind the words. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
/* The old flat drawing: kept for its <defs>, shown nowhere. */
#tg-fallminis .fm-set-retired {
  position: absolute; left: 0; top: 0;
  width: 0; height: 0;
  overflow: hidden;
}

/* One rendered shot per scene, stacked. The shot for the current scene
   fades in over the last one. Each image is drawn a little larger than
   the stage (inset -4%) so the sideways slide never shows an edge. */
#tg-fallminis .fm-shot {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
#tg-fallminis .fm-shot img {
  position: absolute;
  left: -4%; top: -4%;
  width: 108%; height: 108%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 55%;
  will-change: transform;
}
/* The still version (JavaScript off, reduced motion) shows scene 2. */
#tg-fallminis .fm-story:not(.is-live) .fm-shot[data-shot="2"],
#tg-fallminis .fm-story[data-scene="1"] .fm-shot[data-shot="1"],
#tg-fallminis .fm-story[data-scene="2"] .fm-shot[data-shot="2"],
#tg-fallminis .fm-story[data-scene="3"] .fm-shot[data-shot="3"],
#tg-fallminis .fm-story[data-scene="4"] .fm-shot[data-shot="4"],
#tg-fallminis .fm-story[data-scene="5"] .fm-shot[data-shot="5"],
#tg-fallminis .fm-story[data-scene="6"] .fm-shot[data-shot="6"] { opacity: 1; }

/* Parallax. Inside each scene --tt runs 0 to 1 as you scroll; the room
   slides 1.5% of its width and the people 4%, the same way, so the people
   seem nearer. Both push in slowly. At the middle of a scene the two
   layers line up exactly, so the shadows sit under the feet. */
#tg-fallminis .fm-shot[data-shot="1"] { --tt: var(--t1); }
#tg-fallminis .fm-shot[data-shot="2"] { --tt: var(--t2); }
#tg-fallminis .fm-shot[data-shot="3"] { --tt: var(--t3); }
#tg-fallminis .fm-shot[data-shot="4"] { --tt: var(--t4); }
#tg-fallminis .fm-shot[data-shot="5"] { --tt: var(--t5); }
#tg-fallminis .fm-shot[data-shot="6"] { --tt: var(--t6); }
#tg-fallminis .fm-story.is-live .fm-shot-back {
  transform: translate3d(calc((0.5 - var(--tt)) * 1.5%), 0, 0) scale(calc(1 + var(--tt) * 0.03));
}
#tg-fallminis .fm-story.is-live .fm-shot-front {
  transform: translate3d(calc((0.5 - var(--tt)) * 4%), 0, 0) scale(calc(1 + var(--tt) * 0.03));
}
/* Scene 3's TV. Ten pictures of the same room, one per TV screen, stacked
   in order; each fades in over the last as --t3 passes its point. The
   photos fill the TV two at a time, then the five picks land at 0.50,
   0.59, 0.68, 0.77 and 0.86 - the same points script.js counts them at.
   The still version (--t3 at 1) shows the last one: five picked. */
#tg-fallminis .fm-tv { --at: -1; opacity: clamp(0, calc((var(--tt) - var(--at)) * 30), 1); }
#tg-fallminis .fm-tv:nth-child(2) { --at: 0.08; }
#tg-fallminis .fm-tv:nth-child(3) { --at: 0.16; }
#tg-fallminis .fm-tv:nth-child(4) { --at: 0.24; }
#tg-fallminis .fm-tv:nth-child(5) { --at: 0.32; }
#tg-fallminis .fm-tv:nth-child(6) { --at: 0.50; }
#tg-fallminis .fm-tv:nth-child(7) { --at: 0.59; }
#tg-fallminis .fm-tv:nth-child(8) { --at: 0.68; }
#tg-fallminis .fm-tv:nth-child(9) { --at: 0.77; }
#tg-fallminis .fm-tv:nth-child(10) { --at: 0.86; }

/* The real prints, in the last scene (Printed in minutes). The 3D shot
   shows first; then each print starts small at the printer (--x0/--y0,
   set once for the whole stage) and travels to its own --x/--y, growing
   and settling into its tilt. --k is its own progress, staggered by --j,
   so they come out one after another and the last has landed by about
   nine tenths of the way through; --e is the same eased so they land
   softly. They stay put once landed. */
#tg-fallminis .fm-prints-out {
  --x0: 76%; --y0: 50%;
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
#tg-fallminis .fm-story:not(.is-live) .fm-prints-out { display: none; }
#tg-fallminis .fm-photo {
  --k: clamp(0, calc((var(--t4) - 0.15 - var(--j) * 0.08) * 2.6), 1);
  --e: calc(var(--k) * (2 - var(--k)));
  --w: clamp(170px, 21vw, 320px);
  position: absolute;
  left: calc(var(--x0) + (var(--x) - var(--x0)) * var(--e));
  top:  calc(var(--y0) + (var(--y) - var(--y0)) * var(--e));
  width: var(--w);
  aspect-ratio: 4 / 5;
  margin: 0;
  /* The white border of the print, sized from the print itself. A
     percentage here would measure the whole stage instead. */
  padding: calc(var(--w) * 0.04) calc(var(--w) * 0.04) calc(var(--w) * 0.1);
  background: #F7F2EA;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
  opacity: clamp(0, calc(var(--k) * 4), 1);
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--r) * var(--e) + (1 - var(--e)) * -28deg))
    scale(calc(0.1 + 0.9 * var(--e)));
  will-change: transform, left, top;
}
#tg-fallminis .fm-photo img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Where each print lands (percent of the stage) and its tilt. */
#tg-fallminis .fm-photo:nth-child(1) { --x: 44%; --y: 14%; --r: -9deg; }
#tg-fallminis .fm-photo:nth-child(2) { --x: 63%; --y: 8%;  --r: 6deg; }
#tg-fallminis .fm-photo:nth-child(3) { --x: 80%; --y: 22%; --r: -4deg; }
#tg-fallminis .fm-photo:nth-child(4) { --x: 52%; --y: 52%; --r: 5deg; }
#tg-fallminis .fm-photo:nth-child(5) { --x: 70%; --y: 46%; --r: -7deg; }
#tg-fallminis .fm-photo:nth-child(6) { --x: 41%; --y: 48%; --r: 8deg; }

/* The camera flash in scene 2, over the whole studio. */
#tg-fallminis .fm-story.is-live .fm-set3d::after {
  content: "";
  position: absolute; inset: 0;
  background: #FFF6E8;
  opacity: calc(var(--flash) * 0.45);
  pointer-events: none;
}
/* Soft edge where the drawing meets the words. */
#tg-fallminis .fm-story.is-live .fm-story-stage::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 30%; width: 24%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--bg-2) 0%, rgba(26, 23, 19, 0) 100%);
}

/* The view pushes in on the TV for scenes 3 and 4. The origin is the
   centre of the TV; the translate moves that point to the right of centre. */
#tg-fallminis .fm-set-inner {
  transform-box: view-box;
  transform-origin: 885px 170px;
  transition: transform 1.2s var(--ease);
}
#tg-fallminis .fm-story[data-scene="3"] .fm-set-inner,
#tg-fallminis .fm-story[data-scene="4"] .fm-set-inner { transform: translate(-265px, 200px) scale(2); }

/* Parallax. Three depths, three speeds. */
#tg-fallminis .fm-l-wall  { transform: translateY(calc(var(--p) * -30px)); }
#tg-fallminis .fm-l-floor { transform: translateY(calc(var(--p) * -70px)); }
#tg-fallminis .fm-l-fore  { transform: translateY(calc(var(--p) * -170px)); fill: var(--rust); opacity: 0.55; }

/* People. */
#tg-fallminis .fm-fig { fill: var(--paper); transition: transform 0.9s var(--ease); }
#tg-fallminis .fm-fig .fm-bob { transform-box: fill-box; }
#tg-fallminis .fm-shadow { fill: #000; opacity: 0.35; }

/* The dog sits for the photo and stays sat while everyone watches the TV. */
#tg-fallminis .fm-dog-stand, #tg-fallminis .fm-dog-sit { transition: opacity 0.35s var(--ease); }
#tg-fallminis .fm-dog-sit { opacity: 0; }
#tg-fallminis .fm-story[data-scene="2"] .fm-dog-sit,
#tg-fallminis .fm-story[data-scene="3"] .fm-dog-sit,
#tg-fallminis .fm-story[data-scene="4"] .fm-dog-sit { opacity: 1; }
#tg-fallminis .fm-story[data-scene="2"] .fm-dog-stand,
#tg-fallminis .fm-story[data-scene="3"] .fm-dog-stand,
#tg-fallminis .fm-story[data-scene="4"] .fm-dog-stand { opacity: 0; }

/* Scene 1: the family walks in through the door and stops on the paper.
   Scroll-driven here, so no transition; it gets one from scene 2 on. */
#tg-fallminis .fm-family {
  transform: translateX(calc(-420px + 780px * clamp(0, calc(var(--t1) / 0.65), 1)));
}
#tg-fallminis .fm-story:not([data-scene="1"]) .fm-family { transition: transform 1s var(--ease); }
#tg-fallminis .fm-story[data-scene="2"] .fm-family { transform: translateX(360px); }
#tg-fallminis .fm-story[data-scene="3"] .fm-family,
#tg-fallminis .fm-story[data-scene="4"] .fm-family { transform: translateX(520px); }
#tg-fallminis .fm-story[data-scene="5"] .fm-family,
#tg-fallminis .fm-story[data-scene="6"] .fm-family { transform: translateX(400px); }

#tg-fallminis .fm-story.is-walking .fm-family .fm-bob {
  animation: fm-walk 0.42s ease-in-out var(--d, 0s) infinite alternate;
}
@keyframes fm-walk {
  from { transform: translateY(0); }
  to   { transform: translateY(-9px); }
}

/* Scene 2: the adults lean in over the kid, the dog sits, Thomas shoots. */
#tg-fallminis .fm-story[data-scene="2"] .fm-adult1 { transform: translateX(10px); }
#tg-fallminis .fm-story[data-scene="2"] .fm-adult2 { transform: translateX(-10px); }
#tg-fallminis .fm-story[data-scene="2"] .fm-dog    { transform: translateX(-14px); }

#tg-fallminis .fm-photog { transform: translateX(1300px); transition: transform 1.1s var(--ease); }
/* Scene 2: he walks in from the right over the first stretch of the
   scene, camera on its strap, then raises it. Scroll-driven, so no
   transition here. */
#tg-fallminis .fm-story[data-scene="2"] .fm-photog {
  transform: translateX(calc(1300px - 470px * clamp(0, calc(var(--t2) / 0.22), 1)));
  transition: none;
}
#tg-fallminis .fm-story[data-scene="3"] .fm-photog,
#tg-fallminis .fm-story[data-scene="4"] .fm-photog { transform: translateX(760px); }
#tg-fallminis .fm-story[data-scene="5"] .fm-photog,
#tg-fallminis .fm-story[data-scene="6"] .fm-photog { transform: translateX(305px); }

/* What Thomas is doing: walking in, shooting, pointing at the TV, handing
   over prints. In scene 2 the walk-to-shoot swap follows the scroll. */
#tg-fallminis .fm-ph { opacity: 0; transition: opacity 0.35s var(--ease); transform-box: fill-box; }
#tg-fallminis .fm-story[data-scene="1"] .fm-ph-walk,
#tg-fallminis .fm-story:not(.is-live) .fm-ph-shoot { opacity: 1; }
#tg-fallminis .fm-story[data-scene="2"] .fm-ph-walk  { opacity: clamp(0, calc((0.3 - var(--t2)) * 14), 1); transition: none; }
#tg-fallminis .fm-story[data-scene="2"] .fm-ph-shoot { opacity: clamp(0, calc((var(--t2) - 0.25) * 14), 1); transition: none; }
#tg-fallminis .fm-story.is-photog-walking .fm-ph-walk {
  animation: fm-walk 0.42s ease-in-out infinite alternate;
}
#tg-fallminis .fm-story[data-scene="3"] .fm-ph-point,
#tg-fallminis .fm-story[data-scene="4"] .fm-ph-point { opacity: 1; }
#tg-fallminis .fm-story[data-scene="5"] .fm-ph-hand,
#tg-fallminis .fm-story[data-scene="6"] .fm-ph-hand { opacity: 1; }

/* The flash: a pop at the lens, plus the faintest lift over the studio. */
#tg-fallminis .fm-burst { opacity: var(--flash); pointer-events: none; }
#tg-fallminis .fm-flash { opacity: calc(var(--flash) * 0.1); pointer-events: none; }

/* The TV. Shots land on it during scene 2, one per beat. */
#tg-fallminis .fm-tv-glow { opacity: 0; transition: opacity 1s var(--ease); }
#tg-fallminis .fm-screen  { transition: fill 1s var(--ease); }
#tg-fallminis .fm-story[data-scene="2"] .fm-tv-glow,
#tg-fallminis .fm-story[data-scene="3"] .fm-tv-glow,
#tg-fallminis .fm-story[data-scene="4"] .fm-tv-glow,
#tg-fallminis .fm-story:not(.is-live) .fm-tv-glow { opacity: 1; }
#tg-fallminis .fm-story[data-scene="2"] .fm-screen,
#tg-fallminis .fm-story[data-scene="3"] .fm-screen,
#tg-fallminis .fm-story[data-scene="4"] .fm-screen,
#tg-fallminis .fm-story:not(.is-live) .fm-screen { fill: #2a231c; }

#tg-fallminis .fm-thumb {
  --show: clamp(0, calc((var(--t2) - 0.32 - var(--k) * 0.04) * 12), 1);
  transform-box: fill-box; transform-origin: center;
  opacity: var(--show);
  transform: scale(calc(0.5 + 0.5 * var(--show)));
}
/* Scene 3: they keep refreshing while we look. */
#tg-fallminis .fm-story[data-scene="3"] .fm-thumb {
  animation: fm-refresh 2.6s ease-in-out calc(var(--k) * 0.17s) infinite;
}
@keyframes fm-refresh {
  0%, 100% { transform: scale(1); }
  6%       { transform: scale(0.82); }
  14%      { transform: scale(1); }
}
/* Scene 4: the ones not picked fade back. */
#tg-fallminis .fm-thumb:not(.is-pick) { opacity: calc(var(--show) * (1 - var(--t4) * 0.75)); }

#tg-fallminis .fm-heart {
  --on: clamp(0, calc((var(--t4) - 0.1 - var(--j) * 0.07) * 12), 1);
  fill: var(--amber);
  transform-box: fill-box; transform-origin: center;
  opacity: var(--on);
  transform: scale(calc(0.2 + 0.8 * var(--on)));
}

/* Scene 5: prints rise out of the printer, the phone lights up. */
#tg-fallminis .fm-print {
  --rise: clamp(0, calc((var(--t5) - 0.12 - var(--j) * 0.14) * 4), 1);
  transform-box: fill-box; transform-origin: 50% 100%;
  opacity: clamp(0, calc(var(--rise) * 8), 1);
  transform: translate(calc(var(--j) * 6px), calc(var(--rise) * -30px)) rotate(calc(var(--j) * -5deg));
}
#tg-fallminis .fm-print-led { fill: var(--dim); }
#tg-fallminis .fm-story[data-scene="5"] .fm-print-led {
  fill: var(--amber);
  animation: fm-blink 0.7s steps(2, end) infinite;
}
@keyframes fm-blink { to { opacity: 0.3; } }

#tg-fallminis .fm-phone {
  --in: clamp(0, calc(var(--t5) * 4 - 0.5), 1);
  opacity: var(--in);
  transform: translate(110px, calc(90px + (1 - var(--in)) * 40px));
}
/* The TV goes dark once we are done with it. */
#tg-fallminis .fm-thumbs, #tg-fallminis .fm-hearts { transition: opacity 0.8s var(--ease); }
#tg-fallminis .fm-story[data-scene="5"] .fm-thumbs,
#tg-fallminis .fm-story[data-scene="5"] .fm-hearts,
#tg-fallminis .fm-story[data-scene="6"] .fm-thumbs,
#tg-fallminis .fm-story[data-scene="6"] .fm-hearts { opacity: 0; }
#tg-fallminis .fm-notif {
  --on: clamp(0, calc((var(--t5) - 0.45) * 8), 1);
  opacity: var(--on);
  transform: translateY(calc((1 - var(--on)) * -14px));
}
#tg-fallminis .fm-link {
  --on: clamp(0, calc((var(--t5) - 0.6) * 8), 1);
  opacity: var(--on);
  transform: translateY(calc((1 - var(--on)) * 10px));
}
#tg-fallminis .fm-mini { opacity: clamp(0, calc((var(--t5) - 0.72) * 6), 1); }
#tg-fallminis .fm-notif-t1 { font-family: var(--ui); font-weight: 700; font-size: 16px; fill: var(--bg); }
#tg-fallminis .fm-notif-t2 { font-family: var(--ui); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--bg); }

/* ==========================================================================
   02 - THE STUDIO. Backdrop, day, time and details, all in one section.

   Left column: the stage, exactly as tall as the booking card beside it
   and scrolling with it, so the backdrop and the form stay side by side.
   (It used to stick to the screen while the steps scrolled past; once the
   card fit on one screen that only made the stage slide against the form.)
   To line it up with the card and not the heading above the card, the
   panel steps out of the way (display: contents) and its heading, card and
   call line sit in the grid themselves.
   Right column: the four steps. Behind both: the swarm canvas. On a phone
   it is one column, stage first.

   The stage's gradient is what you see before the solver's first frame and
   if JavaScript never runs. script.js swaps it for a lit wall once it is
   drawing.
   ========================================================================== */

/* Buttons that jump to a section land it below the header, not under it. */
#tg-fallminis #fm-story,
#tg-fallminis #fm-studio,
#tg-fallminis #fm-book { scroll-margin-top: var(--fm-head); }

#tg-fallminis .fm-studio {
  position: relative;
  padding: var(--s5) var(--fm-gut);
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}

#tg-fallminis .fm-swarm {
  position: absolute; inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

#tg-fallminis .fm-studio-grid {
  position: relative; z-index: 1;
  max-width: var(--fm-max); margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 1fr);
  grid-template-areas:
    ".     head"
    "stage card"
    ".     ask";
  gap: 0 clamp(28px, 3.5vw, 56px);
  align-items: start;
}

/* ---- the stage ---------------------------------------------------------- */

#tg-fallminis .fm-stage-col {
  grid-area: stage;
  align-self: stretch;
  display: flex;
}

#tg-fallminis .fm-stage {
  position: relative;
  width: 100%;
  min-height: 440px;
  background: var(--fm-fallback, linear-gradient(168deg, #C2461F 0%, #8E2C16 48%, #3A150C 100%));
  overflow: hidden;
  transition: background 0.6s var(--ease);
}
/* A lit wall behind the paper, once the solver is drawing. */
#tg-fallminis .fm-stage.is-live {
  background:
    radial-gradient(70% 55% at 50% 28%, #1e1913 0%, #0d0b09 100%);
}

/* No WebGL, so no cloth. The stage shows the chosen backdrop flat instead of
   leaving a hole where the studio should be. */
#tg-fallminis .fm-stage.is-flat { background-size: cover; background-position: center; }
#tg-fallminis .fm-stage.is-flat .fm-cloth { display: none; }
#tg-fallminis .fm-stage.is-flat .fm-bar { display: none; }

/* The bar the backdrop hangs from. The solver moves it, so it still lifts
   and settles when you change backdrop. */
#tg-fallminis .fm-bar {
  position: absolute;
  top: 0;
  height: 9px;
  pointer-events: none;
  background: #26211b;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
}

/* Laid over the stage, not in its flow. A canvas in the flow is as tall as
   the pixels drawn on it, and the solver draws at the screen's pixel
   density - so on a scaled display, or after any resize, the canvas held
   the stage open taller than the booking card beside it. */
#tg-fallminis .fm-cloth {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  /* The solver grabs with a pointer; say so. */
  cursor: grab;
  touch-action: pan-y;
}
#tg-fallminis .fm-cloth:active { cursor: grabbing; }

/* The name plate: what is hanging, and when. */
#tg-fallminis .fm-plate {
  position: absolute; left: 18px; bottom: 18px;
  z-index: 2;
  max-width: calc(100% - 36px);
  padding: 12px 16px;
  border: 1px solid var(--line-2);
  background: rgba(18, 16, 13, 0.84);
  pointer-events: none;
}
#tg-fallminis .fm-plate b {
  display: block;
  font-family: var(--disp);
  font-weight: 900; font-style: italic;
  font-size: 20px; line-height: 1;
  letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--paper);
}
#tg-fallminis .fm-plate span {
  display: block; margin-top: 6px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
#tg-fallminis .fm-plate.is-swap b { animation: fm-swap 0.55s var(--ease); }
@keyframes fm-swap {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

#tg-fallminis .fm-grab {
  position: absolute; right: 18px; bottom: 18px;
  padding: 8px 16px;
  border: 1px solid var(--line-2);
  background: rgba(18, 16, 13, 0.84);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--paper);
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
#tg-fallminis .fm-grab.is-gone { opacity: 0; }

/* ---- the panel: one booking ticket ------------------------------------

   Redesigned October 20, 2026. Thomas: the old version did not look like a
   form and ran about 1,600px tall, so you scrolled to see it all. Now the
   four steps sit in one bordered card that fits beside the stage on a
   laptop screen: each step's number and name on the left, its choices on
   the right, the fields as real boxes with labels above, and the bottom of
   the card a stub with the total and the button.

   The old scroll-driven rail (.fm-track) is still in the markup and
   script.js still writes --rail; it is hidden because the card is short
   enough that a progress line has nothing to measure. The step numbers
   still fill in ember as each step is done. */

/* min-width: 0 matters. Without it the day strip, which never wraps, sets
   the column's minimum width to the full length of the strip. */
#tg-fallminis .fm-panel { display: contents; }
#tg-fallminis .fm-panel > .fm-head { grid-area: head; min-width: 0; }
#tg-fallminis .fm-panel > .fm-steps-col { grid-area: card; min-width: 0; }
#tg-fallminis .fm-panel > .fm-ask { grid-area: ask; min-width: 0; }
#tg-fallminis .fm-panel .fm-head { margin-bottom: var(--s2); }
#tg-fallminis .fm-panel .fm-h2 { font-size: clamp(28px, 2.8vw, 40px); }
#tg-fallminis .fm-panel .fm-sub { margin-top: 6px; }

#tg-fallminis .fm-steps-col {
  --rail: 0;
  position: relative;
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--amber);
  background: rgba(18, 16, 13, 0.82);
}
#tg-fallminis .fm-track { display: none; }

/* Each step: number and name side by side in a left-hand column, the
   choices to the right. */
#tg-fallminis .fm-stepblock {
  position: relative;
  min-height: 66px;
  padding: 16px 22px 16px 168px;
  border-bottom: 1px solid var(--line);
}
#tg-fallminis .fm-stepblock-book { border-bottom: 0; }

#tg-fallminis .fm-stepblock-n {
  position: absolute; left: 22px; top: 16px;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
              color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
#tg-fallminis .fm-stepblock.is-done .fm-stepblock-n {
  background: var(--amber); border-color: var(--amber); color: var(--bg);
  box-shadow: 0 0 0 4px rgba(228, 118, 43, 0.16);
}

#tg-fallminis .fm-stepblock-t {
  position: absolute; left: 58px; top: 20px;
  width: 100px;
  margin: 0;
  font-family: var(--disp);
  font-weight: 900; font-style: italic;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: -0.01em; text-transform: uppercase;
}

/* ---- step 1: the backdrops. Small hung sheets. ------------------------ */

#tg-fallminis .fm-sheets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 12px 10px;
}
#tg-fallminis .fm-sheet {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--ui);
  font-size: 10px; font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em; text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transform: translate3d(0, 20px, 0);
  transition: transform 0.8s var(--ease), color 0.3s var(--ease), opacity 0.8s var(--ease);
  opacity: 0;
}
#tg-fallminis .fm-sheets.is-in .fm-sheet { opacity: 1; transform: none; }
#tg-fallminis .fm-sheet:hover { color: var(--paper); }
#tg-fallminis .fm-sheet[aria-checked="true"] { color: var(--paper); }

#tg-fallminis .fm-sheet-face {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover; background-position: center;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
/* The clip at the top, so it reads as a hung sheet. */
#tg-fallminis .fm-sheet-face::after {
  content: "";
  position: absolute; left: 50%; top: 0;
  width: 36%; height: 4px;
  transform: translateX(-50%);
  background: #26211b;
}
#tg-fallminis .fm-sheet[aria-checked="true"] .fm-sheet-face {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--amber), 0 12px 24px rgba(0, 0, 0, 0.5);
  transform: translateY(-3px);
}
#tg-fallminis .fm-sheet-name {
  display: block; margin-top: 8px;
  overflow-wrap: break-word;
}

/* ---- step 2: the days. A strip you slide sideways. -------------------- */

#tg-fallminis .fm-daysrow {
  display: flex; gap: 8px;
  margin: -4px 0 -8px;
  padding: 4px 2px 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
  cursor: grab;
}
#tg-fallminis .fm-daysrow::-webkit-scrollbar { display: none; }
#tg-fallminis .fm-daysrow.is-dragging { cursor: grabbing; scroll-snap-type: none; }
#tg-fallminis .fm-daysrow:not(:has(*)) { display: none; }
#tg-fallminis .fm-loading { font-size: 13px; color: var(--muted); }

#tg-fallminis .fm-day {
  flex: 0 0 auto;
  min-width: 78px;
  scroll-snap-align: start;
  padding: 10px 12px 9px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--paper);
  font-family: var(--ui);
  text-align: left;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease),
              transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
              opacity 0.8s var(--ease);
}
#tg-fallminis .fm-day:hover { background: var(--bg-3); border-color: var(--paper); }
#tg-fallminis .fm-day[aria-checked="true"] {
  border-color: var(--amber);
  background: var(--bg-3);
  box-shadow: 0 0 0 1px var(--amber);
}
#tg-fallminis .fm-day-dow {
  display: block;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
#tg-fallminis .fm-day-num {
  display: block; margin-top: 2px;
  font-family: var(--disp); font-weight: 900; font-style: italic;
  font-size: 26px; line-height: 1; letter-spacing: -0.03em;
  transition: color 0.3s var(--ease);
}
#tg-fallminis .fm-day[aria-checked="true"] .fm-day-num { color: var(--amber); }
#tg-fallminis .fm-day-mon {
  display: block; margin-top: 2px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
#tg-fallminis .fm-day-ticks { display: flex; gap: 3px; margin-top: 7px; height: 3px; }
#tg-fallminis .fm-day-ticks i { display: block; width: 7px; height: 3px; background: var(--amber); opacity: 0.85; }
#tg-fallminis .fm-day-left {
  display: block; margin-top: 4px;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--amber);
}
#tg-fallminis .fm-stepblock .fm-fine { font-size: 13px; color: var(--muted); }

/* ---- step 3: the times. They rise in when a day is picked. ------------ */

#tg-fallminis .fm-slots {
  display: flex; flex-wrap: wrap; gap: 8px;
}
#tg-fallminis .fm-slot {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--paper);
  font-family: var(--ui);
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease),
              background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
#tg-fallminis .fm-slot.is-in { opacity: 1; transform: none; }
#tg-fallminis .fm-slot:hover { border-color: var(--paper); }
#tg-fallminis .fm-slot[aria-checked="true"] {
  background: var(--amber); border-color: var(--amber); color: var(--bg); font-weight: 700;
}
#tg-fallminis .fm-slots-hint { font-size: 13px; color: var(--muted); }
#tg-fallminis .fm-slots:not([hidden]) + .fm-slots-hint { margin-top: var(--s1); }

/* ---- step 4: your details. Boxes with their labels above. ------------- */

#tg-fallminis .fm-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 12px;
}
#tg-fallminis .fm-field { min-width: 0; }
#tg-fallminis .fm-field-wide { grid-column: 1 / -1; }

#tg-fallminis .fm-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px; font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
#tg-fallminis .fm-input {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: var(--bg);
  color: var(--paper);
  font-family: var(--ui);
  font-size: 16px;   /* 16px or more, or iPhones zoom in on tap */
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
#tg-fallminis .fm-input:hover { border-color: var(--muted); }
/* Focus: the box turns ember AND its edge doubles in weight, so it does
   not depend on telling two colours apart. */
#tg-fallminis .fm-input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber);
}
#tg-fallminis .fm-input[aria-invalid="true"] { border-color: #FF7A6B; box-shadow: 0 0 0 1px #FF7A6B; }
#tg-fallminis .fm-req { color: var(--amber); }
#tg-fallminis .fm-err { margin-top: 5px; font-size: 12px; color: #FF9A8E; }
#tg-fallminis .fm-err:empty { display: none; }

#tg-fallminis .fm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#tg-fallminis .fm-formerr { margin-top: var(--s1); font-size: 13px; color: #FF9A8E; }
#tg-fallminis .fm-formerr:empty { display: none; }

/* The stub at the bottom of the ticket: the money part. It reaches the
   card's edges, past the step's own padding, with a perforated line across
   the top. Three rows, full width: the price with how it splits beside it,
   the button, and the no-payment line centred under the button.

   Only one big number on purpose. Shown as two figures side by side, the
   $85 and the $35 deposit read like two charges ($120).

   The backdrop-and-day recap (.fm-summary) shows only on phones. On a wider
   screen the name plate on the backdrop beside the card already says it,
   so there it is kept for screen readers only. */
#tg-fallminis .fm-form-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 16px -22px -16px -168px;
  padding: 14px 22px;
  border-top: 1px dashed var(--line-2);
  background: var(--bg-2);
}

#tg-fallminis .fm-summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px;
  min-width: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 721px) {
  #tg-fallminis .fm-summary {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
#tg-fallminis .fm-sum-item { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
#tg-fallminis .fm-sum-item > b {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
#tg-fallminis .fm-sum-item > span { font-size: 14px; line-height: 1.3; }

/* The price and its split on one line. */
#tg-fallminis .fm-cost {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px;
}
#tg-fallminis .fm-cost-total {
  font-family: var(--disp); font-weight: 900; font-style: italic;
  font-size: 44px; line-height: 1; letter-spacing: -0.03em;
  color: var(--amber);
}
#tg-fallminis .fm-cost-split {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  font-size: 15px; line-height: 1.35;
  color: var(--paper);
}

/* The "?" after the split line. The bubble opens above the price so it
   never pushes anything down. */
#tg-fallminis .fm-pay { position: relative; min-width: 0; }
#tg-fallminis .fm-pay-q {
  position: relative;
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
  padding: 0;
  border: 1px solid var(--amber);
  border-radius: 50%;
  background: transparent;
  color: var(--amber);
  font-family: var(--ui); font-size: 11px; font-weight: 700; line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
/* A bigger invisible target for thumbs than the small circle shows. */
#tg-fallminis .fm-pay-q::before { content: ""; position: absolute; inset: -12px; }
#tg-fallminis .fm-pay-q:hover,
#tg-fallminis .fm-pay-q[aria-expanded="true"] { background: var(--amber); color: var(--bg); }
#tg-fallminis .fm-pay-q:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
#tg-fallminis .fm-pay-tip {
  position: absolute; left: 0; bottom: calc(100% + 10px);
  z-index: 3;
  width: max-content; max-width: 280px;
  padding: 12px 14px;
  border: 1px solid var(--amber);
  background: var(--bg-3);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  font-size: 14px; line-height: 1.45;
  color: var(--paper);
}
#tg-fallminis .fm-pay-tip[hidden] { display: none; }

/* The button, and the no-payment line centred under it. */
#tg-fallminis .fm-send { display: flex; flex-direction: column; gap: 8px; }
#tg-fallminis .fm-submit {
  width: 100%;
  padding: 0 var(--s2);
  background: var(--amber); border-color: var(--amber); color: var(--bg);
}
#tg-fallminis .fm-submit:hover,
#tg-fallminis .fm-submit:focus-visible {
  background: var(--paper); border-color: var(--paper); color: var(--bg);
}
#tg-fallminis .fm-submit:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
#tg-fallminis .fm-submit[disabled] { opacity: 0.6; cursor: wait; }
#tg-fallminis .fm-form-note {
  font-size: 12px; line-height: 1.4;
  text-align: center;
  color: var(--muted);
}
#tg-fallminis .fm-lock { margin-right: 5px; vertical-align: -1px; color: var(--amber); }

#tg-fallminis .fm-done .fm-h2 { font-size: clamp(28px, 3vw, 40px); }
#tg-fallminis .fm-done-copy { margin-top: var(--s1); font-size: 15px; color: var(--muted); }

/* Under the card. */
#tg-fallminis .fm-ask {
  margin-top: var(--s2);
  font-size: 15px;
  color: var(--muted);
}
#tg-fallminis .fm-ask a {
  display: inline-block;
  padding: 10px 0;
  font-weight: 700;
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
#tg-fallminis .fm-ask a:hover { color: var(--paper); }



/* ==========================================================================
   03 - LONG STORY SHORT. Four facts, four toys.

   Each tile rises in when it scrolls into view. The tiles themselves do
   not react to the cursor - the toy inside each one is the thing to play
   with, and has its own rules below. Everything
   that moves on its own is a keyframe here; everything you can grab is
   positioned by script.js.
   ========================================================================== */

#tg-fallminis .fm-facts {
  position: relative;
  padding: var(--s6) var(--fm-gut);
  border-top: 1px solid var(--line);
  background: var(--bg);
  overflow: clip;
}
#tg-fallminis .fm-facts > * { max-width: var(--fm-max); margin-left: auto; margin-right: auto; }

#tg-fallminis .fm-toys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}

#tg-fallminis .fm-toy {
  position: relative;
  padding: clamp(20px, 2.6vw, 32px);
  border: 1px solid var(--line);
  background: var(--bg-2);
  transition: border-color 0.4s var(--ease);
  overflow: hidden;
  isolation: isolate;
}
#tg-fallminis .fm-toy:hover { border-color: var(--line-2); }

/* Rise in on arrival, one after another - the same entrance as the rest
   of the page. script.js adds fm-flip (the name is historical). */
#tg-fallminis .fm-toy.fm-flip {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), border-color 0.4s var(--ease);
}
#tg-fallminis .fm-toy.fm-flip.is-on { opacity: 1; transform: none; }
#tg-fallminis .fm-toy:nth-child(2) { transition-delay: 0.08s; }
#tg-fallminis .fm-toy:nth-child(3) { transition-delay: 0.16s; }
#tg-fallminis .fm-toy:nth-child(4) { transition-delay: 0.24s; }
#tg-fallminis .fm-toy.is-on { transition-delay: 0s; }

#tg-fallminis .fm-toy-stage {
  position: relative; z-index: 1;
  height: clamp(200px, 24vw, 280px);
  display: flex; align-items: center; justify-content: center;
}
#tg-fallminis .fm-toy-h {
  position: relative; z-index: 1;
  margin: var(--s2) 0 0;
  font-family: var(--disp);
  font-weight: 900; font-style: italic;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
#tg-fallminis .fm-toy-h b {
  font-weight: inherit;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

/* ---- the stopwatch ------------------------------------------------------ */

#tg-fallminis .fm-watch {
  width: min(100%, 250px); height: 100%;
  cursor: grab;
  /* Up and down still scrolls the page; sideways spins the hand. */
  touch-action: pan-y;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
}
#tg-fallminis .fm-watch.is-held { cursor: grabbing; }
#tg-fallminis .fm-watch-face { fill: var(--bg-3); stroke: var(--line-2); stroke-width: 1; }
#tg-fallminis .fm-watch-ticks line { stroke: var(--dim); stroke-width: 1.5; }
#tg-fallminis .fm-watch-ticks line.is-big { stroke: var(--paper); stroke-width: 2.5; }
#tg-fallminis .fm-watch-arc { fill: rgba(228, 118, 43, 0.22); }
#tg-fallminis .fm-watch-hand {
  stroke: var(--amber); stroke-width: 4; stroke-linecap: round;
  transform-box: view-box; transform-origin: 100px 100px;
}
#tg-fallminis .fm-watch-cap { fill: var(--paper); }
#tg-fallminis .fm-watch-label {
  font-family: var(--ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.3em; fill: var(--dim);
}

/* ---- the prints --------------------------------------------------------- */

#tg-fallminis .fm-tosses {
  touch-action: pan-y;          /* up and down still scrolls the page */
  cursor: grab;
}
#tg-fallminis .fm-toss {
  --w: clamp(96px, 11vw, 132px);
  position: absolute; left: 50%; top: 50%;
  width: var(--w);
  aspect-ratio: 4 / 5;
  margin: calc(var(--w) * -0.625) 0 0 calc(var(--w) * -0.5);
  padding: calc(var(--w) * 0.05) calc(var(--w) * 0.05) calc(var(--w) * 0.14);
  background: #F7F2EA;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(var(--r, 0deg));
  will-change: transform;
  user-select: none; -webkit-user-select: none;
}
#tg-fallminis .fm-toss.is-held { cursor: grabbing; box-shadow: 0 34px 50px rgba(0, 0, 0, 0.6); }
#tg-fallminis .fm-toss img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* Before script.js lays them out: a plain fan. */
#tg-fallminis .fm-toss:nth-child(1) { --x: -70px; --r: -14deg; }
#tg-fallminis .fm-toss:nth-child(2) { --x: -35px; --r: -7deg; }
#tg-fallminis .fm-toss:nth-child(4) { --x: 35px;  --r: 7deg; }
#tg-fallminis .fm-toss:nth-child(5) { --x: 70px;  --r: 14deg; }

/* ---- the flip-book of papers ------------------------------------------- */

#tg-fallminis .fm-riffle {
  perspective: 900px;
  touch-action: pan-y;          /* sideways is the swipe; up and down still scrolls */
  user-select: none; -webkit-user-select: none;
  cursor: grab;
}
#tg-fallminis .fm-riffle-sheet {
  --i: 0;
  --rw: clamp(104px, 12vw, 150px);
  position: absolute; left: 50%; top: 50%;
  width: var(--rw);
  aspect-ratio: 4 / 5;
  margin: calc(var(--rw) * -0.72) 0 0 calc(var(--rw) * -0.5);
  border: 1px solid rgba(0, 0, 0, 0.5);
  background-size: cover; background-position: center;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
  transform-origin: 50% 0;
  /* --dx and --dr are the swipe. Past the fifth card the pile stops
     stepping back, so a long list still reads as one deck. */
  transform: translate3d(calc(min(var(--i), 4) * 9px + var(--dx, 0px)), calc(min(var(--i), 4) * -8px), calc(min(var(--i), 4) * -30px)) rotate(var(--dr, 0deg));
  transition: transform 0.45s var(--ease), opacity 0.4s var(--ease);
  padding: 0; border-radius: 0;
}
/* The clip, as on the picker tiles. */
#tg-fallminis .fm-riffle-sheet::after {
  content: "";
  position: absolute; left: 50%; top: 0;
  width: 36%; height: 5px;
  transform: translateX(-50%);
  background: #26211b;
}
/* The front sheet lifts, swings over the top and drops to the back. */
#tg-fallminis .fm-riffle-sheet.is-held { transition: none; cursor: grabbing; }
#tg-fallminis .fm-riffle-sheet.is-flipping {
  transform: translate3d(0, 0, 40px) rotateX(-160deg);
  opacity: 0;
  z-index: 5;
}
#tg-fallminis .fm-riffle-name {
  position: absolute; left: 50%; bottom: 6px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim);
  pointer-events: none;
  transition: color 0.3s var(--ease);
}

/* ---- the crowd ---------------------------------------------------------- */

#tg-fallminis .fm-crowd {
  width: min(100%, 440px); height: 100%;
  cursor: pointer;
  overflow: visible;
}
#tg-fallminis .fm-crowd-floor { fill: #000; opacity: 0.4; }
/* The drawings take their body colour from here, as they do in the story. */
#tg-fallminis .fm-crowd-fig {
  fill: var(--paper);
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: translateX(-520px);
  transition: transform 1.1s var(--ease) var(--d, 0s);
}
#tg-fallminis .fm-toy.is-on .fm-crowd-fig { transform: none; }
/* Walk in, bobbing; then sway a little forever. */
#tg-fallminis .fm-crowd-fig > image {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: fm-sway 3.2s ease-in-out calc(var(--d, 0s) * 3) infinite;
}
#tg-fallminis .fm-toy.is-on:not(.is-settled) .fm-crowd-fig > image {
  animation: fm-walk 0.38s ease-in-out var(--d, 0s) 3 alternate;
}
@keyframes fm-sway {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}
/* Point at them and they hop, one after another. Tap and the dog sits. */
#tg-fallminis .fm-toy-crowd:hover .fm-crowd-fig > image,
#tg-fallminis .fm-toy-crowd.is-hop .fm-crowd-fig > image {
  animation: fm-hop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0s) 1;
}
@keyframes fm-hop {
  0%   { transform: translateY(0) scaleY(1); }
  25%  { transform: translateY(6px) scaleY(0.92); }
  55%  { transform: translateY(-34px) scaleY(1.06); }
  100% { transform: translateY(0) scaleY(1); }
}
#tg-fallminis .fm-crowd-sit { opacity: 0; transition: opacity 0.3s var(--ease); }
#tg-fallminis .fm-crowd-stand { transition: opacity 0.3s var(--ease); }
#tg-fallminis .fm-toy-crowd.is-sit .fm-crowd-sit { opacity: 1; }
#tg-fallminis .fm-toy-crowd.is-sit .fm-crowd-stand { opacity: 0; }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* The story on a phone: drawing on top, words underneath. */
@media (max-width: 860px) {
  #tg-fallminis .fm-story.is-live .fm-set3d {
    width: 100%; height: 54%; bottom: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  }
  #tg-fallminis .fm-story.is-live .fm-story-stage::after {
    left: 0; width: 100%; top: 40%; bottom: auto; height: 16%;
    background: linear-gradient(180deg, rgba(26, 23, 19, 0) 0%, var(--bg-2) 100%);
  }
  #tg-fallminis .fm-story.is-live .fm-story-copy {
    width: 100%; top: 50%; bottom: 0;
    padding: 0 var(--fm-gut) var(--s3);
  }
  #tg-fallminis .fm-story.is-live .fm-rail { margin-top: 10px; }
  /* Steps hang from the top of their box rather than centring, so a tall
     one (the last, with its two buttons) grows downward into free space. */
  #tg-fallminis .fm-story.is-live .fm-step {
    top: var(--s2);
    transform: translateY(calc((1 - var(--v)) * 20px));
  }
  #tg-fallminis .fm-step-h { font-size: clamp(26px, 7.5vw, 40px); }
  #tg-fallminis .fm-step-p { font-size: 15px; margin-top: 10px; }
  #tg-fallminis .fm-step-stat { margin-top: var(--s2); }

  /* The buttons become a bar along the bottom of the screen. The words
     stop above it. */
  #tg-fallminis .fm-story.is-live .fm-story-copy { padding-bottom: 80px; }
  #tg-fallminis .fm-story.is-live .fm-story-cta {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 4;
    flex-wrap: nowrap; gap: 10px;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: var(--bg-2);
    border-top: 1px solid var(--line);
  }
  #tg-fallminis .fm-story.is-live .fm-story-cta .fm-btn {
    flex: 1 1 0; width: auto;
    min-height: 48px; padding: 0 10px;
    font-size: 12px; letter-spacing: 0.1em;
  }

  /* The prints land over the picture, above the words. */
  #tg-fallminis .fm-prints-out { --x0: 70%; --y0: 30%; }
  #tg-fallminis .fm-photo { --w: 40vw; }
  #tg-fallminis .fm-photo:nth-child(1) { --x: 20%; --y: 9%; }
  #tg-fallminis .fm-photo:nth-child(2) { --x: 64%; --y: 6%; }
  #tg-fallminis .fm-photo:nth-child(3) { --x: 42%; --y: 19%; }
  #tg-fallminis .fm-photo:nth-child(4) { --x: 80%; --y: 22%; }

  /* Blurring the whole hero on every scroll frame is the most expensive
     thing on the page for a phone. It still lifts and fades here. */
  #tg-fallminis .fm-hero-inner { filter: none; }
}

/* The studio on a phone or a narrow window: one column, stage first, at a
   height of its own. */
@media (max-width: 900px) {
  #tg-fallminis .fm-studio-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage" "head" "card" "ask";
  }
  #tg-fallminis .fm-stage-col { display: block; margin-bottom: clamp(28px, 3.5vw, 56px); }
  #tg-fallminis .fm-stage { min-height: 0; height: clamp(320px, 52vh, 480px); }
}

/* The header is shorter on a phone (62px once you start scrolling). */
@media (max-width: 700px) {
  #tg-fallminis { --fm-head: calc(62px + var(--wp-admin--admin-bar--height, 0px)); }
}

@media (max-width: 720px) {
  /* Full height on phones too, so the story rises from below the fold
     rather than sitting half-visible under a short hero. */
  #tg-fallminis .fm-hero {
    min-height: calc(100vh - var(--fm-head)); min-height: calc(100svh - var(--fm-head));
    /* Centred between the header and the bottom of the screen. */
    justify-content: center;
    padding-top: var(--s4);
  }
  #tg-fallminis .fm-btn { width: 100%; }
  #tg-fallminis .fm-story-cta .fm-btn { width: auto; }
  /* The ticket on a phone: each step's number and name sit on one line
     above its choices instead of in a column beside them. */
  #tg-fallminis .fm-stepblock { min-height: 0; padding: 18px; }
  #tg-fallminis .fm-stepblock-n,
  #tg-fallminis .fm-stepblock-t { position: static; display: inline-grid; vertical-align: middle; }
  #tg-fallminis .fm-stepblock-t { width: auto; margin-left: 10px; }
  #tg-fallminis .fm-sheets,
  #tg-fallminis .fm-daysrow,
  #tg-fallminis .fm-slots,
  #tg-fallminis .fm-slots-hint,
  #tg-fallminis .fm-fine,
  #tg-fallminis .fm-form,
  #tg-fallminis .fm-done { margin-top: 14px; }
  #tg-fallminis .fm-fields { grid-template-columns: minmax(0, 1fr); }
  #tg-fallminis .fm-form-foot { grid-template-columns: minmax(0, 1fr); margin: 18px -18px -18px; padding: 16px 18px; }
  #tg-fallminis .fm-plate b { font-size: 16px; }
  #tg-fallminis .fm-toys { grid-template-columns: minmax(0, 1fr); }
  #tg-fallminis .fm-toy-stage { height: 220px; }
}


/* ==========================================================================
   REDUCED MOTION
   The cloth solver reads the same preference and renders one still frame
   instead of running, so the paper is still there - it just does not move.
   The swarm never starts.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  #tg-fallminis *,
  #tg-fallminis *::before,
  #tg-fallminis *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  #tg-fallminis .fm-reveal,
  #tg-fallminis .fm-in,
  #tg-fallminis .fm-ch,
  #tg-fallminis .fm-sheet,
  #tg-fallminis .fm-slot { opacity: 1 !important; transform: none !important; }
  #tg-fallminis .fm-leaves { display: none; }
  #tg-fallminis .fm-swarm { display: none; }
  #tg-fallminis .fm-toy { opacity: 1 !important; transform: none !important; }
  #tg-fallminis .fm-crowd-fig { transform: none !important; }
  #tg-fallminis .fm-crowd-fig > image { animation: none !important; }
  #tg-fallminis .fm-grab { display: none; }
  #tg-fallminis .fm-cloth { cursor: default; }
}