/* ==========================================================================
   0. Self-hosted fonts - WT Garton Plain (Weekend Type, licensed)
   Medium is mapped to weight 400 so it replaces Courier Prime's regular;
   Bold covers the existing 700 rules; Medium Italic covers <em>.
   ========================================================================== */
@font-face {
  font-family: "WT Garton Plain";
  src: url("fonts/WTGartonPlain-Medium.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "WT Garton Plain";
  src: url("fonts/WTGartonPlain-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "WT Garton Plain";
  src: url("fonts/WTGartonPlain-MediumItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   1. Global CSS Reset & Setup
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Nothing may scroll the page sideways (the door's box hangs ~47px past the
     right edge). clip - unlike hidden - doesn't create a scroll container, so
     the sticky hero keeps working; older browsers fall back to body's hidden */
  overflow-x: clip;
}

body {
  background-color: #eae7e2;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden; /* older browsers */
  overflow-x: clip;   /* modern browsers - hidden would make body a scroll box
                         once html sets overflow, and break the sticky hero */
}

/* ==========================================================================
   2. Main Canvas & Layout Containers
   ========================================================================== */
.limo-canvas {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

/* index-4: sticky hero. The character page stays pinned while the white
   sign-up section scrolls up over it like a sheet (clean edge, no fade).
   --hero-stick is set by script-4.js: 0 normally, or negative when the hero
   is taller than the window (small phones) so its bottom can still be seen
   before it pins. Characters still showing above the sheet can be hovered as
   normal (the sheet itself blocks the mouse from covered ones); a character
   the sheet fully covers is reset to its static image, and the hero stops
   rendering (pausing every animation) once it is completely covered - see
   script-4.js */
.limo-canvas {
  position: sticky;
  top: var(--hero-stick, 0px);
  z-index: 0;
}

.signup-section {
  position: relative;
  z-index: 1; /* above the pinned hero; its white background is fully opaque */
}

body.hero-covered .limo-canvas {
  visibility: hidden; /* not painted, so the animated images stop running */
}

.intro-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30vw;
  /* Scales the text container box relative to screen size */
  max-width: 420px;
  min-width: 280px;
  /* Prevents text box from getting too narrow */
  text-align: center;
  line-height: 1;
  color: #1b263d;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  /* Controls the vertical space between the heading and subline - adjust to taste */
}

/* Main heading text ("LIMO.LAND") - sized independently of the container
   so it can scale separately from the smaller hover-instruction subtext */
.intro-text p {
  font-family: "kodai-latin", sans-serif;
  /* TODO: confirm exact name/weight in Adobe Fonts kit CSS */
  font-size: clamp(120px, 12vw, 260px);
  /* Floor and ceiling keep it balanced against the surrounding character artwork and prevent the old hard cliff at the 1600px breakpoint */
  /* Fluid typography text size scales with screen size */
  line-height: 1;
}

/* Trademark symbol next to the "LIMO.LAND" heading */
.trademark {
  font-family: "WT Garton Plain", sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1vw, 28px);
  /* Matches the heading's floor/ceiling approach so it stays proportionate instead of vanishing at small sizes */
  /* Slightly smaller than the subline (1.25vw) */
  vertical-align: baseline;
  /* Sits on the baseline rather than raised like a superscript */
  margin-left: -0.2em;
  /* Keeps it close to the wording */
}

/* NEW: Style rules for your instruction line */
.hover-instruction {
  font-family: "WT Garton Plain", sans-serif;
  /* Simple typewriter-style font */
  font-weight: 400;
  margin-top: -0.25vw;
  /* Pulls subline closer to heading, offsetting font leading - adjust to taste */
  font-size: clamp(24px, 1.10vw, 28px);
  /* Bounds raised to stay visually balanced against the surrounding character artwork; ceiling still keeps it from outgrowing the box and wrapping */
  /* Slightly smaller than main text for hierarchy */
  color: #1b263d;
  font-style: normal;
  /* Makes it instantly recognizable as a helper/instruction hint */
  letter-spacing: 0.03em;
}

/* ==========================================================================
   3. Core Layering Rules (Structural Isolation Fix)
   ========================================================================== */
.character-container {
  position: absolute;
  z-index: 0;
  /* Forces every character to create its own stacking context uniformly, so overlapping hover zones stack by DOM order (not by which one happens to use "transform") */
}

/* The invisible mouse interactive pane MUST block everything else */
.hover-trigger-zone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  cursor: default; /* no hand cursor over the characters - the animation itself is the feedback */
}

/* The wrapper that safely bundles the visuals below the mouse tracker */
.graphic-layers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Base image scaling properties */
.graphic-layers img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Visual Opacity Defaults */
.static-img {
  z-index: 3;
  opacity: 1;
}

.gif-img {
  z-index: 2;
  opacity: 0;
}

.extra-overlay-img {
  z-index: 4;
  opacity: 0;
}

/* ==========================================================================
   4. Fluid Scattered Coordinates (Responsive Layout Rules)
   ========================================================================== */

/* 
   By sizing items in 'vw' (Viewport Width), 15vw means exactly 
   "15% of the total screen width". This makes the items auto-shrink 
   on smaller screens and expand beautifully on larger ones.
*/

.ch1 {
  top: 10%;
  left: 12%;
  width: 15vw;
  height: 15vw;
  min-width: min(275px, 19.10vw);
  /* Safeguard: ensures art doesn't shrink into nothing */
  min-height: min(275px, 19.10vw);
}

/* Full desktop layout only: Tommy scaled down (was 18vw / 300px floor, now 5%
   smaller). Kept out of the base .ch1 rule because its min-width/min-height
   also set Tommy's size in the stacked mobile layout */
@media (min-width: 769px) and (hover: hover) {
  .ch1 {
    width: 15.1vw;
    height: 15.1vw;
    min-width: min(275px, 19.10vw);
    min-height: min(275px, 19.10vw);
  }
}

.character-container.ch2 {
  z-index: 1;
  /* Wins hover priority over ch5's larger box wherever the two overlap, since ch2's box is tightly matched to its actual visible art */
}

.ch2 {
  top: 20%;
  left: 60%;
  width: 3.2vw;
  height: 5.4vw;
  /* Matches window-static.png's actual aspect ratio (200x337) so the hover zone doesn't extend into blank letterboxed space */
  min-width: min(133px, 9.24vw);
  min-height: min(225px, 15.62vw);
}

.ch4 {
  bottom: 12%;
  left: 30%;
  transform: translateX(-50%);
  width: 11vw;
  height: 11vw;
  min-width: min(550px, 38.19vw);
  min-height: min(228px, 15.83vw);
}

.ch5 {
  top: 10%;
  left: 80%;
  transform: translateX(-50%);
  /* 5% larger than the original 12.1vw / 5.02vw / 600px. Desktop only in
     practice - ch5 is hidden in the mobile layout */
  /* Width = height x 0.803 to match statue-static.png (805x1002) so the box
     (and hover area) has no empty strips at the sides. To resize, change
     height and min-height, then multiply each by 0.803 for the widths */
  width: 10.71vw;
  height: 5.53vw;
  min-width: min(548px, 38.06vw);
  /* 5% larger than 522 / 650 */
  min-height: min(683px, 47.4vw);
}

/* Hover area covers only the statue art, which starts ~22% in from the
   image's left edge - keeps the trigger clear of the window (ch2) */
.ch5 .hover-trigger-zone {
  left: 22%;
  width: 78%;
}

.ch6 {
  top: 40%;
  left: 18%;
  transform: translateX(-50%);
  width: 12.1vw;
  height: 5.02vw;
  min-width: min(400px, 27.78vw);
  min-height: min(400px, 27.78vw);
}

.ch7 {
  top: 72%;
  left: 50%;
  transform: translateX(-50%);
  /* 3% smaller than 12.1vw / 5.02vw / 250px */
  width: 11.74vw;
  height: 4.87vw;
  min-width: min(243px, 16.88vw);
  min-height: min(243px, 16.88vw);
}

.ch8 {
  top: 65%;
  left: 60%;
  transform: translateX(-50%);
  /* 3% smaller than 10vw / 4vw / 190px */
  width: 9.7vw;
  height: 3.88vw;
  min-width: min(184px, 12.78vw);
  min-height: min(184px, 12.78vw);
}

.ch9 {
  top: 27%;
  left: 30%;
  transform: translateX(-50%);
  /* Height = width x 1.17 to match rabbit-static-3.png (308x360, portrait) -
     the image scales to fit the box, so the height is what limits its size.
     To resize, change width and min-width, then multiply each by 1.17 for
     height and min-height */
  width: 10vw;
  height: 10vw;
  min-width: min(150px, 10.42vw);
  min-height: min(150px, 10.42vw);
}

.ch10 {
  top: 8%;
  left: 40%;
  transform: translateX(-50%);
  /* Height = width x 2.5 to match speedreader-static.png (319x799, tall) -
     the image scales to fit the box, so a box the wrong shape limits its size.
     To resize, change width and min-width, then multiply each by 2.5 for
     height and min-height */
  width: 9.5vw;
  height: 23vw;
  min-width: min(115px, 7.99vw);
  min-height: min(285px, 19.79vw);
}

.ch11 {
  top: 60%;
  left: 85%;
  transform: translateX(-50%);
  /* Height = width x 2.5 to match speedreader-static.png (319x799, tall) -
     the image scales to fit the box, so a box the wrong shape limits its size.
     To resize, change width and min-width, then multiply each by 2.5 for
     height and min-height */
  width: 32vw;
  height: 18vw;
  min-width: min(240px, 16.67vw);
  min-height: min(300px, 20.83vw);
}

/* Mobile-only nudge to scroll to the sign-up section - hidden by default so
   it doesn't sit in the middle of the desktop absolute-positioned layout */
.scroll-prompt {
  display: none;
}

/* Desktop-only clickable prompt, bottom-centre of the canvas, that smooth-scrolls
   down to the sign-up section - unlike .intro-text this needs pointer-events
   re-enabled since it must actually be clickable */
.desktop-scroll-prompt {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "WT Garton Plain", sans-serif;
  font-size: 16px;
  color: #1b263d;
  text-decoration: none;
  letter-spacing: 0.03em;
  opacity: 0.7;
  pointer-events: auto;
  z-index: 10;
}

/* Desktop-only hint at the top-centre of the canvas - matches the scroll
   prompt's type, but isn't a link so it ignores the mouse */
.desktop-hover-prompt {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "WT Garton Plain", sans-serif;
  font-size: 16px;
  color: #1b263d;
  letter-spacing: 0.03em;
  opacity: 0.7;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

.desktop-scroll-prompt:hover {
  opacity: 1;
  text-decoration: underline;
}


/* ==========================================================================
   4b. Desktop stage - full-screen design locked, scales down as one
   ==========================================================================
   The hero is a stage with the proportions of the full-screen design window
   (2466x1293), sized to fit the browser window and centred. At that full-screen
   size everything is exactly as originally designed. Smaller windows scale the
   same composition down, so it keeps its arrangement - but each character stops
   shrinking at 80% of its full-screen pixel size so they never get too small.
   Below a 1728px-wide stage (16" MacBook Pro full screen) that 80% floor itself
   scales down too, so smaller laptops get an exact miniature of the 1728 layout.
   Each size reads: max(proportional, min(80% floor, floor scaled from 1728)).
   cqw = % of the stage width (1cqw = 24.66px at full screen). Positions are the
   original top/left %s above, now measured against the stage.
   Wrapped in @supports so browsers without container queries (pre-2022/23)
   skip it entirely and get the original layout rather than half of this. */
@supports (container-type: size) {
  @media (min-width: 769px) and (hover: hover) {
    .limo-canvas {
      width: min(100vw, calc(100vh * 2466 / 1293));
      height: 100vh;
      /* fills the window - full screen is exactly 2466x1293; on
                      laptops (proportionally taller) it adds vertical spacing
                      instead of leaving the sign-up section showing below */
      min-height: 0;
      margin: 0 auto;
      container-type: size;
    }

    .intro-text {
      width: max(17.032cqw, min(280px, 16.204cqw));
      max-width: none;
      min-width: 0;
    }

    .intro-text p {
      font-size: max(10.543cqw, 120px);
    }

    .trademark {
      font-size: max(1.000cqw, 14px);
    }

    .hover-instruction {
      font-size: max(1.100cqw, min(24px, 1.389cqw));
      margin-top: -0.250cqw;
      white-space: nowrap;
    }

    /* full-screen size as stage %, floored at 80% of that size (floor scales below 1728) */
    .ch1 {
      /* Tommy: 372x372 at full screen */
      width: max(15.100cqw, min(298px, 17.239cqw));
      height: max(15.100cqw, min(298px, 17.239cqw));
      min-width: 0;
      min-height: 0;
    }

    .ch2 {
      /* window: 133x225 at full screen */
      width: max(5.393cqw, min(106px, 6.157cqw));
      height: max(9.124cqw, min(180px, 10.417cqw));
      min-width: 0;
      min-height: 0;
    }

    .ch4 {
      /* weights: 550x271 at full screen */
      width: max(22.303cqw, min(440px, 25.463cqw));
      height: max(11.000cqw, min(217px, 12.558cqw));
      min-width: 0;
      min-height: 0;
    }

    .ch5 {
      /* statue: 548x683 at full screen (5% larger than the original 522x650) */
      width: max(22.226cqw, min(439px, 25.375cqw));
      height: max(27.676cqw, min(546px, 31.598cqw));
      min-width: 0;
      min-height: 0;
    }

    .ch6 {
      /* pigeons: 400x400 at full screen */
      width: max(16.221cqw, min(320px, 18.519cqw));
      height: max(16.221cqw, min(320px, 18.519cqw));
      min-width: 0;
      min-height: 0;
    }

    .ch7 {
      /* rabbit 1: 290x243 at full screen */
      width: max(11.740cqw, min(232px, 13.403cqw));
      height: max(9.854cqw, min(194px, 11.250cqw));
      min-width: 0;
      min-height: 0;
    }

    .ch8 {
      /* rabbit 2: 239x184 at full screen */
      width: max(9.699cqw, min(191px, 11.074cqw));
      height: max(7.461cqw, min(147px, 8.519cqw));
      min-width: 0;
      min-height: 0;
    }

    .ch9 {
      /* rabbit 3: 247x247 at full screen */
      width: max(10.000cqw, min(197px, 11.416cqw));
      height: max(10.000cqw, min(197px, 11.416cqw));
      min-width: 0;
      min-height: 0;
    }

    .ch10 {
      /* speedreader: 234x567 at full screen */
      width: max(9.500cqw, min(187px, 10.846cqw));
      height: max(23.000cqw, min(454px, 26.258cqw));
      min-width: 0;
      min-height: 0;
    }

    .ch11 {
      /* door: 789x444 at full screen */
      width: max(32.000cqw, min(631px, 36.533cqw));
      height: max(18.000cqw, min(355px, 20.550cqw));
      min-width: 0;
      min-height: 0;
    }

    /* Below full screen the 80% floors make the characters relatively larger, so
     a few need small nudges to stay clear of each other and the text. Only
     applies while the stage is narrower than 1973px (where the floors kick in),
     so the full-screen layout above is untouched. */
    @container (max-width: 1972px) {
      .ch2 {
        top: 17.5%;
      }

      /* window: was 20% - clears the LIMO.LAND title */
      .ch7 {
        top: 70%;
      }

      /* rabbit 1: was 72% - clears the scroll link */
      .ch8 {
        left: 60.7%;
      }

      /* rabbit 2: was 60% - clears rabbit 1 */
      .ch9 {
        left: 31.1%;
      }

      /* rabbit 3: was 30% - pops up clear of Tommy */
    }
  }
}

/* end @supports - older browsers without container queries keep the
     original fixed-size layout defined above */

/* ==========================================================================
   5. Cursor Ripple Trail Effect
   ========================================================================== */

.cursor-ripple {
  position: fixed;
  /* Keeps it aligned relative to the screen view frame */
  top: 0;
  left: 0;
  width: 30px;
  /* The tiny starting diameter */
  height: 30px;
  background-color: rgba(101, 101, 101, 0.1);
  /* Solid dark gray with 40% in */
  /*background-color: transparent; /* No backfill color */
  /*border: 1.5px solid rgba(26, 26, 26, 0.45); /* Soft, clear dark gray line */
  border-radius: 50%;
  /* Makes it a perfect circle */
  pointer-events: none;
  /* Crucial: ensures the dots never block your character hovers! */
  z-index: 9999;
  /* Forces the trail to sit on top of everything else on screen */
  transform: translate(-50%, -50%);
  /* Centers the expanding circle directly on your cursor tip */

  /* 
     This creates the expanding and fading transition.
     0.6s is how long the ripple takes to completely vanish.
     ease-out means it bursts fast at first and slows down near the end.
  */
  transition: width 0.60s ease-out, height 0.60s ease-out, opacity 0.60s ease-out;
  opacity: 1;
}

/* The expanding, vanishing destination state added by JavaScript */
.cursor-ripple.expand {
  width: 120px;
  /* The final size the ring expands out to */
  height: 120px;
  opacity: 0;
  /* Completely fades away */
}


/* ==========================================================================
   6. Mobile Optimization (The Layout & Interaction Fix)
   ========================================================================== */
@media (max-width: 768px),
(hover: none) {

  /* Orderly vertical layout flow */
  .limo-canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    /* iOS/Android: 100vh includes the area behind the browser toolbars, which
       could hide the scroll prompt - svh is the visible height (Safari 15.4+);
       older browsers ignore it and keep 100vh */
    min-height: 100svh;
    padding: 20px 20px 50px;
    gap: 40px;
    overflow-y: auto;
  }

  /* Mobile shows Tommy (ch1) only - every other character, including any added
     later, is hidden. The :not() selector carries two classes' worth of
     specificity, so it beats .character-container's display:block !important
     rule below even though that one appears later */
  .character-container:not(.ch1) {
    display: none !important;
  }

  /* ch1 auto-plays its animation on a loop on mobile instead of waiting for a
     tap - !important needed since script.js's touch handlers set these via
     inline style, which would otherwise win over a plain CSS rule */
  .ch1 .static-img {
    opacity: 0 !important;
  }

  .ch1 .gif-img {
    opacity: 1 !important;
  }

  .desktop-scroll-prompt,
  .desktop-hover-prompt,
  .signup-section .back-to-top {
    /* .signup-section prefix: the .back-to-top rule appears later in the file */
    display: none;
  }

  .scroll-prompt {
    display: block;
    font-family: "WT Garton Plain", sans-serif;
    font-size: 15px;
    color: #1b263d;
    text-align: center;
    opacity: 0.7;
    margin-top: 40px;
  }



  .intro-text {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 450px;
    margin-bottom: 10px;
  }

  .intro-text p {
    font-size: 150px !important;
  }



  .hover-instruction {
    font-size: 19px !important;
  }

  /* Tommy ~13% larger on mobile (base .ch1 min size is 300px), capped to the
     screen width minus the canvas's 20px side padding for narrower phones */
  .ch1 {
    min-width: min(340px, calc(100vw - 40px));
    min-height: min(340px, calc(100vw - 40px));
  }

  .trademark {
    font-size: 12px !important;
  }

  /* Forced absolute stacking context for EACH isolated mobile grid item block */
  .character-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    transform: none !important;
    width: 160px !important;
    height: 160px !important;
    display: block !important;
  }

  /* 
     THE ULTIMATE MOBILE TRICK:
     We force the invisible hit zone to use z-index: 999 and explicitly 
     assign an invisible background color. Without background-color, 
     iOS Safari considers the element 'hollow' and lets taps bypass it.
  */
  .hover-trigger-zone {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999 !important;
    /* Floats above everything else */
    background-color: rgba(0, 0, 0, 0) !important;
    /* Invisible but physically solid to fingers */
    cursor: default !important;

    /* Tells Safari to process finger taps instantly without wait delays */
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
  }

  .graphic-layers {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    /* Safely tucked underneath the trigger zone */
  }
}

/* Narrow desktop windows (mouse, not touch) get the stacked mobile layout but
   are usually much taller than a phone, which left a large empty band below
   the character - centre the stack vertically instead. Phones unaffected */
@media (max-width: 768px) and (hover: hover) {
  .limo-canvas {
    justify-content: center;
  }
}

/* ==========================================================================
   7. Sign-up Section (below the main canvas)
   ========================================================================== */
.signup-section {
  background-color: #ffffff; /* index-4: white section, navy text */
  padding: 80px 24px 120px;
}

.signup-content {
  max-width: 820px;
  margin: 0 auto;
  text-align: center; /* headlines, body copy and footnote all centred */
}

/* Large screens: the body text reaches its full 18px from ~1640px wide, and at
   820px the column left 6 one-word last lines (widows). 740px clears them.
   Laptops keep 820px, where the smaller text already wraps cleanly */
@media (min-width: 1600px) {
  .signup-content {
    max-width: 740px;
  }
}

.signup-headline {
  /* Special Gothic Condensed One (Google Fonts, loaded in index-2.html) - a
     single-weight display face, so weight stays 400 (no faux bold) */
  font-family: "Special Gothic Condensed One", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 4vw, 28px);
  line-height: 1.2;
  color: #1b263d;
  margin-bottom: 18px;
}

.signup-body {
  font-family: "WT Garton Plain", sans-serif;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.6;
  color: #1b263d;
  margin-bottom: 32px;
}

/* Links within the sign-up copy (e.g. Form Play) - same navy type, subtle
   underline, fuller on hover */
.signup-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(27, 38, 61, 0.4);
}

.signup-link:hover {
  text-decoration-color: currentColor;
}

/* Underlined emphasis in the sign-up copy (not a link) - same thin line and
   spacing as .signup-link, but solid navy */
.signup-underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Extra space between the last paragraph ("...straight away.") and the
   email field - doubles the usual 32px paragraph gap to 64px */
#mc_embed_shell {
  padding-top: 32px; /* padding, not margin - margins would merge with the
                        paragraph's own 32px instead of adding to it */
}

/* Thin rule separating the text sections in the sign-up area */
.signup-divider {
  border: 0;
  border-top: 1px solid #1b263d;
  margin: 8px 0 40px;
}

.signup-fineprint {
  font-family: "WT Garton Plain", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #1b263d;
  opacity: 0.7;
  margin-top: 40px;
}

/* "Back to top" link at the very bottom of the page - same type as the
   "Scroll down" prompt, in navy on the white section. Hidden on mobile */
.back-to-top {
  display: block;
  width: fit-content;
  margin: 80px auto 0;
  font-family: "WT Garton Plain", sans-serif;
  font-size: 15px;
  color: #1b263d;
  text-decoration: none;
  letter-spacing: 0.03em;
  opacity: 0.7;
}

.back-to-top:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Overrides for Mailchimp's own embed stylesheet, so the form sits
   correctly on the white section instead of Mailchimp's default
   white-box styling */
#mc_embed_signup {
  background: transparent !important;
  clear: left;
  font-family: "WT Garton Plain", sans-serif;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

#mc_embed_signup .indicates-required {
  color: #1b263d;
  font-family: "WT Garton Plain", sans-serif;
  display: block;
  text-align: left;
  margin-bottom: 16px;
}

#mc_embed_signup label {
  color: #1b263d;
  font-family: "WT Garton Plain", sans-serif;
  margin-bottom: 8px;
}

#mc_embed_signup .mc-field-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  /* Mailchimp sets this group to 96% width but left-aligned, which pulled the
     email box slightly left of the centred button */
}

#mc_embed_signup input[type="email"] {
  background: transparent;
  border: 1px solid #1b263d;
  color: #1b263d;
  font-family: "WT Garton Plain", sans-serif;
  font-size: 16px;
  padding: 12px 16px;
  width: 100%;
  max-width: 400px;
  border-radius: 0;
}

#mc_embed_signup input[type="email"]::placeholder {
  color: rgba(27, 38, 61, 0.5);
}

#mc_embed_signup .signup-submit-row {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

#mc_embed_signup input.button {
  -webkit-appearance: none;
  appearance: none;
  background-color: #1b263d;
  color: #ffffff;
  font-family: "WT Garton Plain", sans-serif;
  font-weight: 700;
  font-size: 20px;
  height: auto;
  /* Mailchimp's own stylesheet sets a fixed height:32px, which clipped this larger text */
  line-height: 1.3;
  border: none;
  padding: 16px 40px;
  border-radius: 0;
  cursor: pointer;
}

#mc_embed_signup input.button:hover {
  background-color: #2d3a57;
  /* Mailchimp's own stylesheet sets background-color:#222 on hover - overriding explicitly */
  color: #ffffff;
  opacity: 0.85;
}

#mc_embed_signup .response {
  color: #1b263d;
  font-family: "WT Garton Plain", sans-serif;
}

/* "Thank you for subscribing" / error messages: Mailchimp's stylesheet makes
   them bold, floats them left at 80% width - centre them in regular weight */
#mc_embed_signup div.response {
  float: none;
  width: 100%;
  margin: 16px 0 0;
  padding: 0 0 20px; /* space between the message and the button below it */
  text-align: center;
  font-weight: 400;
}

#mc_embed_signup #mce-success-response {
  color: #1b263d;
  /* Mailchimp's own stylesheet sets color:#529214 (green) here specifically, which beats the .response rule above on specificity */
}

#mc_embed_signup #mce-error-response {
  color: #b3470f; /* darker orange - readable on white */
}

@media (max-width: 768px) {
  .signup-section {
    padding: 60px 20px;
  }

  /* Match the email box width: Mailchimp sizes the button to its unwrapped
     text, which made it wider than the field on phones. 96% mirrors
     Mailchimp's .mc-field-group width, and the email input's 400px cap */
  #mc_embed_signup input.button {
    width: 96%;
    max-width: 400px;
    margin: 0 0 10px;
    padding: 16px 20px;
    white-space: normal;
  }
}
/* ==========================================================================
   index-4: "Keep me in the loop" button + LIMO.LAND sign-up pop-up
   The pop-up copies the Mailchimp pop-up's measured design: 40% black page dim,
   850x600 pale panel (237,242,234 @ 97%), 220px logo, WT Garton Plain 16px copy,
   320px white field/checkbox boxes, 320x59 black "SIGN ME UP" button, 20px
   blue (#354EFF) bar along the bottom
   ========================================================================== */
.signup-open {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  margin: 64px auto 0;
  background-color: #1b263d;
  color: #ffffff;
  font-family: "WT Garton Plain", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  border: none;
  border-radius: 0;
  padding: 16px 40px;
  cursor: pointer;
}

.signup-open:hover {
  background-color: #2d3a57;
}

.limo-modal {
  position: fixed;
  inset: 0;
  z-index: 10000; /* above the hero, the white section and the cursor ripples */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.limo-modal[hidden] {
  display: none;
}

.limo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.limo-modal__panel {
  position: relative;
  width: min(850px, 100%);
  min-height: min(600px, calc(100svh - 40px));
  max-height: calc(100svh - 40px);
  overflow-y: auto;
  background: rgba(237, 242, 234, 0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 25px 80px; /* bottom leaves room for the blue bar */
  text-align: center;
  color: #000;
  font-family: "WT Garton Plain", sans-serif;
}

.limo-modal__close {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.limo-modal__logo {
  display: block;
  width: 220px;
  height: auto;
  margin: 0 auto;
}

.limo-modal__step {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.limo-modal__step[hidden] {
  display: none;
}

.limo-modal__copy {
  max-width: 450px;
  margin: 64px auto 0;
  font-size: 16px;
  line-height: 1.25;
  text-wrap: balance;
}

.limo-modal__heading {
  margin: 54px 0 0;
  font-family: "Special Gothic Condensed One", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: 37px;
  line-height: 1.1;
  text-transform: uppercase;
}

.limo-modal__heading + .limo-modal__copy {
  margin-top: 14px;
}

/* Mailchimp form inside the pop-up - overrides the old lower-form styles */
.limo-modal #mc_embed_shell {
  padding-top: 0;
  width: 100%;
}

.limo-modal #mc_embed_signup {
  max-width: 320px;
  margin: 20px auto 0;
  background: transparent !important;
}

.limo-modal #mc_embed_signup form {
  padding: 0; /* Mailchimp's stylesheet adds side spacing that narrowed the boxes */
  margin: 0;
  width: 100%;
  text-align: center;
}

.limo-modal #mc_embed_signup .mc-field-group {
  width: 100%;
  min-height: 0;
  padding: 0;
  display: block;
}

.limo-modal #mc_embed_signup input.limo-modal__field {
  display: block;
  width: 100%;
  max-width: none;
  height: 54px;
  margin: 0;
  padding: 0 15px;
  text-indent: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;
  color: #000;
  font-family: "WT Garton Plain", sans-serif;
  font-size: 16px;
}

.limo-modal #mc_embed_signup input.limo-modal__field:focus {
  outline: none;
  border-color: #000; /* quiet black focus border instead of the browser's blue ring */
}

.limo-modal #mc_embed_signup input.limo-modal__field::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

.limo-modal__check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  margin-top: 10px;
  padding: 0 15px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.limo-modal__check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.limo-modal__box {
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  display: grid;
  place-items: center;
}

.limo-modal__check input:checked + .limo-modal__box {
  background: #000;
  border-color: #000;
}

.limo-modal__check input:checked + .limo-modal__box::after {
  content: "";
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

.limo-modal__check input:focus-visible + .limo-modal__box {
  outline: 2px solid #354eff;
  outline-offset: 2px;
}

.limo-modal__submit,
.limo-modal #mc_embed_signup input.limo-modal__submit {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  max-width: 320px;
  height: 59px;
  margin: 10px auto 0;
  padding: 0;
  background: #000;
  color: #fff;
  border: 0;
  border-radius: 0;
  font-family: "WT Garton Plain", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.limo-modal__step[data-step="done"] .limo-modal__submit {
  margin-top: 24px;
}

.limo-modal__submit:hover,
.limo-modal #mc_embed_signup input.limo-modal__submit:hover {
  background: #222;
  color: #fff;
  opacity: 1;
}

/* Mailchimp's error messages ("Please enter a valid email" etc.) */
.limo-modal #mc_embed_signup div.response,
.limo-modal #mc_embed_signup div.mce_inline_error {
  float: none;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  background: none !important;
  color: #b3470f !important;
  font-family: "WT Garton Plain", sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
}

.limo-modal__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px;
  background: #354eff;
}

.limo-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* stop the page scrolling behind the open pop-up */
html.limo-modal-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  .limo-modal__copy { font-size: 13px; }
  .limo-modal__heading { font-size: 35px; }
  .limo-modal__step[data-step="done"] .limo-modal__copy { font-size: 15px; }
}

/* LIMO.LAND logo on the landing page opens the sign-up pop-up (script-4.js).
   .intro-text ignores the mouse so characters behind it stay hoverable - the
   logo itself opts back in */
.intro-text p.logo-signup {
  pointer-events: auto;
  cursor: default; /* clickable, but no hand cursor - kept as a quiet discovery */
}

/* The speedreader's (ch10) tall hover area reaches down over the left of the
   logo - lift the title block above the characters so the logo always gets the
   click (and no hand cursor). .intro-text ignores the mouse apart from the logo
   itself, so the characters stay hoverable everywhere else */
.intro-text {
  z-index: 5;
}

.intro-text p.logo-signup:focus-visible {
  outline: 2px solid #1b263d;
  outline-offset: 6px;
}

/* After someone has opened our pop-up, keep Mailchimp's automatic pop-up and
   its reminder tab out of the way for the rest of the visit (no doubling up) */
html.limo-signup-seen .mcforms-wrapper {
  display: none !important;
}