/** Shopify CDN: Minification failed

Line 146:53 Expected ":"
Line 149:16 Expected ":"

**/


/* NOTE: this is a Liquid-compiled CSS asset — do NOT wrap it in the Liquid
   style/endstyle tag pair: that tag emits literal HTML style-element tags
   (and Liquid runs even inside CSS comments), which would invalidate the file. */
:root {
    /* --- Raw brand palette: single source of truth (mirrors Layer 1) --- */
    --lms-brick:        #973123;
    --lms-mahogany:     #3a2018;
    --lms-sage:         #5f8d7a;
    --lms-hunter:       #343a31;
    --lms-parchment:    #fff9ef;
    --lms-cyan:         #8fcdcf;

    --lms-brick-dark:   #6f2417;
    --lms-brick-tint:   #f3e2dc;
    --lms-sage-dark:    #4a7264;
    --lms-sage-tint:    #e4eee9;
    --lms-cyan-tint:    #e6f3f3;
    --lms-parchment-2:  #fdf3e2;
    --lms-parchment-edge: #f3e7d0;

    --lms-ink-900: #2a1610;
    --lms-ink-800: #3a2018;
    --lms-ink-700: #4d2f25;
    --lms-ink-500: #6b5147;
    --lms-ink-400: #8a7568;
    --lms-ink-300: #b3a294;
    --lms-ink-200: #d8cbb9;
    --lms-ink-100: #ece1cf;

    /* --- Semantic aliases (namespaced --lms-* so they never clobber Horizon) --- */
    --lms-bg:             var(--lms-parchment);
    --lms-bg-sunken:      var(--lms-parchment-2);
    --lms-surface-card:   #ffffff; /* warm-white card, distinct from parchment page */
    --lms-surface-raised: var(--lms-parchment);
    --lms-surface-inverse: var(--lms-mahogany);

    --lms-text-strong:   var(--lms-mahogany);
    --lms-text-body:     var(--lms-ink-700);
    --lms-text-muted:    var(--lms-ink-500);
    --lms-text-on-dark:  var(--lms-parchment);
    --lms-text-on-brick: var(--lms-parchment);

    --lms-color-primary:       var(--lms-brick);
    --lms-color-primary-press: var(--lms-brick-dark);
    --lms-color-accent:        var(--lms-sage);
    --lms-color-accent-cyan:   var(--lms-cyan);

    --lms-border-default:  var(--lms-parchment-edge);
    --lms-border-strong:   var(--lms-ink-800);
    --lms-border-hairline: rgba(58, 32, 24, 0.14);

    --lms-focus-ring:    var(--lms-sage);

    --lms-color-success: var(--lms-sage);
    --lms-color-info:    var(--lms-cyan);
    --lms-color-danger:  var(--lms-brick);

    /* --- Typography tokens --- */
    --lms-font-display: "Epilogue", "Work Sans", system-ui, sans-serif;
    --lms-font-mono:    "DM Mono", ui-monospace, "SFMono-Regular", monospace;
    --lms-font-body:    var(--lms-font-mono);
    /* Accent (italic serif, hero accent word). DM Serif Display not yet
       self-hosted — serif fallback renders until the font ships in assets/. */
    --lms-font-accent:  "DM Serif Display", Georgia, serif;

    --lms-fw-mono-light: 300;
    --lms-fw-mono-reg:   400;
    --lms-fw-mono-med:   500;
    --lms-fw-head-reg:   400;
    --lms-fw-head-med:   500;
    --lms-fw-head-semi:  600;
    --lms-fw-head-bold:  700;
    --lms-fw-head-extra-bold: 800;

    --lms-fs-display: 3.5rem;
    --lms-fs-h1:      1.875rem;
    --lms-fs-h2:      1.5625rem;
    --lms-fs-h3:      1.25rem;
    --lms-fs-h4:      1.0625rem;
    --lms-fs-body:    1rem;
    --lms-fs-body-sm: 0.8125rem;
    --lms-fs-eyebrow: 0.75rem;
    --lms-fs-caption: 0.6875rem;

    --lms-lh-tight:   1.1;
    --lms-lh-heading: 1.18;
    --lms-lh-snug:    1.4;
    --lms-lh-body:    1.6;

    --lms-tracking-eyebrow: 0.22em;
    --lms-tracking-wide:    0.06em;
    --lms-tracking-normal:  0;

    /* --- Spacing (4px base) --- */
    --lms-space-1: 4px;  --lms-space-2: 8px;  --lms-space-3: 12px; --lms-space-4: 16px;
    --lms-space-5: 24px; --lms-space-6: 32px; --lms-space-7: 48px; --lms-space-8: 64px;
    --lms-space-9: 96px; --lms-space-10: 128px;

    /* --- Radii (buttons squared — brand decision) --- */
    --lms-radius-xs: 4px; --lms-radius-sm: 8px; --lms-radius-md: 12px;
    --lms-radius-lg: 18px; --lms-radius-xl: 28px;
    --lms-radius-button: 0; --lms-radius-pill: 999px;

    --lms-border-width:        1.5px;
    --lms-border-width-strong: 2px;

    /* --- Shadows (warm mahogany) --- */
    --lms-shadow-xs: 0 1px 2px rgba(58, 32, 24, 0.08);
    --lms-shadow-sm: 0 2px 6px rgba(58, 32, 24, 0.10);
    --lms-shadow-md: 0 6px 18px rgba(58, 32, 24, 0.12);
    --lms-shadow-lg: 0 16px 40px rgba(58, 32, 24, 0.16);
    --lms-shadow-inset: inset 0 1px 0 rgba(255, 249, 239, 0.6);

    /* --- Layout + motion --- */
    --lms-container-max:  1200px;
    --lms-container-text: 660px;
    --lms-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
    --lms-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --lms-dur-fast:  140ms;
    --lms-dur-base:  220ms;
    --lms-dur-slow:  420ms;

    /* --- Fonts: self-hosted (see @font-face below). Override Horizon's
           picker-driven family vars. Graceful fallback stack means pages still
           read well before the WOFF2 files are uploaded. --- */
    --font-heading--family: "Epilogue", "Work Sans", system-ui, sans-serif;
    --font-accent--family: "Epilogue", "Work Sans", system-ui, sans-serif;
    --font-body--family: "DM Mono", ui-monospace, "SFMono-Regular", monospace;
    --font-subheading--family: "DM Mono", ui-monospace, "SFMono-Regular", monospace;

    /* --- Warm-tinted shadows (Horizon's defaults are neutral/black) --- */
    --shadow-button: 0 2px 3px rgba(58, 32, 24, 0.18);
    --shadow-drawer: 0 16px 40px rgba(58, 32, 24, 0.16);
    --shadow-popover: 0 6px 18px rgba(58, 32, 24, 0.12);

    /* --- Type scale: PIN exact brand sizes/leading here. Horizon's
           type_size_* / type_line_height_* selects only allow fixed options
           (…16,20,24,32…) and display-*/heading-* leading — our 30/25/17/15/13
           and 1.18 leading are off-menu, so the editor would snap Layer 1 to
           nearest-legal on first save. These overrides are the source of truth;
           Layer 1 just carries a close legal fallback. --- */
    --font-h1--size: 1.875rem;  --font-h1--line-height: 1.15; /* 30px */
    --font-h2--size: 1.5625rem; --font-h2--line-height: 1.15; /* 25px */
    --font-h3--size: 1.25rem;   --font-h3--line-height: 1.2;  /* 20px */
    --font-h4--size: 1.0625rem; --font-h4--line-height: 1.25; /* 17px */
    --font-h5--size: 0.9375rem; --font-h5--line-height: 1.3;  /* 15px */
    --font-h6--size: 0.8125rem; --font-h6--line-height: 1.3;  /* 13px */

    /* --- Optional: force LMS 1200px container instead of Horizon 'narrow'
           (1440px). Uncomment to enable. (Open question §9 Q3.) --- */
    /* --narrow-page-width: 75rem; */
  }

  /* Signature eyebrow — DM Mono Medium, wide-tracked, uppercase, brick.
     Use as <span class="lms-eyebrow">Now showing</span>. */
  .lms-eyebrow {
    font-family: var(--lms-font-mono);
    font-weight: var(--lms-fw-mono-med);
    font-size: var(--lms-fs-eyebrow);
    line-height: 1.4;
    letter-spacing: var(--lms-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--lms-color-primary);
  }
  .lms-eyebrow--parchment { color: var(--color-foreground, var(--lms-text-on-dark)); }

  /* ---- Buttons (squared, per design system) — shared by lms-* sections ---- */
  .lms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lms-font-mono);
    font-weight: var(--lms-fw-mono-med);
    font-size: 14px;
    letter-spacing: 0.03em;
    text-decoration: none;
    border-radius: var(--lms-radius-button);
    transition: background var(--lms-dur-fast) var(--lms-ease-soft),
                color var(--lms-dur-fast) var(--lms-ease-soft),
                border-color var(--lms-dur-fast) var(--lms-ease-soft);
    cursor: pointer;
    white-space: nowrap;
  }
  .lms-btn--lg { padding: 14px 26px; height: 52px; }
  .lms-btn--md { padding: 11px 22px; height: 44px; }
  .lms-btn--sm { padding: 8px 16px;  height: 36px; font-size: 12px; }
  .lms-btn--primary {
    background: var(--lms-brick);
    color: var(--lms-parchment);
    border: var(--lms-border-width) solid var(--lms-brick);
  }
  .lms-btn--primary:hover {
    background: var(--lms-brick-dark);
    border-color: var(--lms-brick-dark);
    color: var(--lms-parchment);
  }
  .lms-btn--outline {
    background: transparent;
    color: var(--lms-text-strong);
    border: var(--lms-border-width) solid var(--lms-border-strong);
  }
  .lms-btn--outline:hover {
    background: var(--lms-text-strong);
    color: var(--lms-parchment);
    border-color: var(--lms-text-strong);
  }
  .lms-btn--outline-inverse {
    background: transparent;
    color: var(--color-foreground, var(--lms-text-on-dark));
    border: var(--lms-border-width) solid var(--color-foreground, var(--lms-text-on-dark));
  }
  .lms-btn--outline-inverse:hover {
    background: var(--color-foreground, var(--lms-text-on-dark));
    color: var(--color-background, var(--lms-text-strong));
    border-color: var(--color-foreground, var(--lms-text-on-dark));
  }

  /* ---- Badges (format / condition / rare / event audience) ---- */
  .lms-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--lms-font-mono);
    font-weight: var(--lms-fw-mono-med);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: var(--lms-radius-pill);
    border: var(--lms-border-width) solid currentColor;
    line-height: 1.4;
  }
  .lms-badge--brick { color: var(--lms-brick); }
  .lms-badge--sage { color: var(--lms-sage-dark); }
  .lms-badge--muted { color: var(--lms-text-muted); }

  /* ---- Footer nav/utility links: no underline (mockup calls for plain text links) ---- */
  .color-custom-footer_m9NzUG a,
  .color-custom-footer_utilities_jLGE8U a {
    text-decoration: none;
  }

  /* ---- Page-width container for lms-* sections ---- */
  .lms-container {
    max-width: var(--lms-container-max, 1200px);
    margin-inline: auto;
    padding-inline: var(--lms-space-6);
  }
  @media screen and (max-width: 549px) {
    .lms-container { padding-inline: var(--lms-space-4); }
  }

  ::selection {
    background: var(--lms-cyan);
    color: var(--lms-mahogany);
  }

  /* ---- Header — "Join the club" CTA (last nav item styled as a button) ----
     Relies on "Join the club" being the last item in the main-menu link list. */
  header-menu .menu-list__list-item:last-child > a,
  header-menu .menu-list__list-item:last-child > button {
    background: var(--lms-brick);
    color: var(--lms-parchment) !important;
    padding: 8px 18px;
    border-radius: var(--lms-radius-button);
    font-weight: var(--lms-fw-mono-med);
    letter-spacing: 0.03em;
    transition: background var(--lms-dur-fast) var(--lms-ease-soft);
  }
  header-menu .menu-list__list-item:last-child > a:hover,
  header-menu .menu-list__list-item:last-child > button:hover {
    background: var(--lms-brick-dark);
    color: var(--lms-parchment) !important;
  }

  /* ==========================================================================
     SELF-HOSTED FONTS
     Activates automatically once these WOFF2 files are added to assets/:
       epilogue-500.woff2      (headings; brand rule: never > Medium/500)
       epilogue-400.woff2      (optional — add the @font-face if any UI needs it)
       epilogue-600.woff2      (optional)
       dm-mono-300.woff2       (body / light)
       dm-mono-400.woff2       (regular)
       dm-mono-500.woff2       (eyebrow / medium)
     Until then, the fallback stack above (Work Sans / system mono) renders.
     ========================================================================== */
  /* Epilogue variable font (weight axis 100–900): lms sections use weights
     400–800 (fw-head-*), so the variable file replaces static cuts. Horizon
     heading weight stays 500 via the Layer 1 font picker. */
  @font-face {
    font-family: "Epilogue";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("//littlemoviestore.com/cdn/shop/t/8/assets/epilogue-variable.woff2?v=75934258514555670981788272981") format("woff2");
  }
  @font-face {
    font-family: "DM Mono";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("//littlemoviestore.com/cdn/shop/t/8/assets/dm-mono-300.woff2?v=149689651342657556271788272981") format("woff2");
  }
  @font-face {
    font-family: "DM Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("//littlemoviestore.com/cdn/shop/t/8/assets/dm-mono-400.woff2?v=140843121749043706641788272981") format("woff2");
  }
  @font-face {
    font-family: "DM Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("//littlemoviestore.com/cdn/shop/t/8/assets/dm-mono-500.woff2?v=149805218616509820001788272981") format("woff2");
  }