/* moviestripes design system - "light gallery".
   Warm paper like the light poster theme, ink-black type, the posters are the only strong colour.
   Fonts are self-hosted (no third-party requests): Mulish for text, Fraunces for headings, both SIL OFL. */

@font-face { font-family: "Mulish"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/Mulish-Regular.3da231d1a62a.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/Mulish-Medium.b88db3293651.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/Mulish-SemiBold.88f32d5a6d6e.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/Mulish-Bold.ec7246eb3e49.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 300 600; font-style: normal; font-display: swap;
  src: url("../fonts/Fraunces-VF.c3d148b66f9b.woff2") format("woff2"); }

:root {
  /* colour: paper, surfaces, ink */
  --bg: #f4f1ea;          /* poster light paper */
  --bg-deep: #ebe6da;     /* bands, footer */
  --surface: #fbf9f4;     /* cards */
  --surface-2: #ffffff;   /* inputs */
  --wall: #e4ded0;        /* gallery wall behind posters */
  --ink: #22201e;
  --ink-2: #4a463f;       /* secondary text, 8:1 on bg */
  --mute: #6b655b;        /* tertiary text, >= 4.9:1 on bg and surface */
  --line: #ddd7cb;
  --line-strong: #bfb8a9;
  --accent: #9a3b1d;      /* one restrained accent: terracotta from the poster palette, 6:1 on bg */
  --accent-soft: #f0ddd3;
  --ok: #2f6b3f;
  --ok-soft: #e1eddc;
  --warn: #7a5410;
  --warn-soft: #f4e8c8;
  --err: #a12a1f;
  --focus: var(--ink);

  /* brand stripes (the logo mark and dividers) */
  --stripe-1: #c2491d; --stripe-2: #8d7048; --stripe-3: #5b5e63; --stripe-4: #b8a982; --stripe-5: #3e3b37;

  /* type */
  --font-sans: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.4rem, 1.2rem + .8vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-3xl: clamp(2.15rem, 1.6rem + 2.4vw, 3.5rem);
  --fs-display: clamp(2.6rem, 1.7rem + 4.2vw, 5.1rem);
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  /* spacing (4px base) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem;
  --s-7: 3rem; --s-8: 4.5rem; --s-9: clamp(4rem, 3rem + 5vw, 8rem);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --maxw: 1240px;
  --maxw-narrow: 760px;
  --header-h: 68px;

  /* shape */
  --r-sm: 6px; --r: 12px; --r-lg: 22px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(34 32 30 / .06), 0 1px 1px rgb(34 32 30 / .04);
  --shadow: 0 1px 2px rgb(34 32 30 / .05), 0 8px 24px -6px rgb(34 32 30 / .12);
  --shadow-lg: 0 2px 4px rgb(34 32 30 / .05), 0 24px 48px -12px rgb(34 32 30 / .22);
  --shadow-poster: 0 1px 1px rgb(34 32 30 / .12), 0 6px 14px rgb(34 32 30 / .12), 0 22px 44px -10px rgb(34 32 30 / .35);
  --ease: cubic-bezier(.22, .61, .36, 1);
}