/* ==========================================================================
   Veranda — design tokens
   --------------------------------------------------------------------------
   The palette is sampled from the real venue: the sage-green mural wall, the
   black linocut outlines, the rust hatching on Mona Lisa's dress, the burgundy
   table, the gold painted frame and the warm marble wall behind it.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- colour */
  --c-ink: #16150f;          /* deep espresso — the site's ground            */
  --c-ink-2: #211e17;        /* raised ink surfaces                          */
  --c-ink-3: #302b21;        /* hairlines and borders on ink                 */
  --c-ink-4: #4a4234;        /* muted ink text                               */

  --c-mint: #9db185;         /* the mural wall                               */
  --c-mint-deep: #778b5d;
  --c-mint-pale: #c2cfae;

  --c-cream: #f3ebda;        /* the painted face and hands                   */
  --c-paper: #e4d7bb;        /* aged paper                                   */
  --c-paper-deep: #cbb68d;

  --c-rust: #c0562a;         /* the hatched folds of the dress               */
  --c-rust-deep: #97401d;
  --c-burgundy: #7e3427;     /* the table and the rope border                */
  --c-gold: #b29553;         /* the ornate painted frame                     */
  --c-olive: #5e7b3a;        /* the courtyard greenery                       */
  --c-marble: #efe9dc;       /* the wall the mural is painted on             */

  /* Semantic — dark ("courtyard at dusk") is the default surface. */
  --bg: var(--c-ink);
  --bg-raised: var(--c-ink-2);
  --fg: var(--c-cream);
  --fg-muted: #b3a893;
  --fg-faint: #7d7461;
  --rule: var(--c-ink-3);
  --accent: var(--c-rust);
  --accent-soft: var(--c-gold);

  /* Light "paper" sections invert these via .section--paper / .section--mint */
  --paper-fg: #2a2519;
  --paper-fg-muted: #6b6047;
  --paper-rule: #c3b189;

  --focus: var(--c-mint);

  /* ------------------------------------------------------------ typography */
  --ff-display: 'Alegreya', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --ff-body: 'Manrope', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* A fluid scale. The two extremes are the 320px and 1600px viewports. */
  --fs-50:  0.75rem;
  --fs-100: 0.8125rem;
  --fs-200: 0.9375rem;
  --fs-300: 1.0625rem;
  --fs-400: clamp(1.0625rem, 0.25vw + 1rem, 1.1875rem);
  --fs-500: clamp(1.25rem, 0.7vw + 1.05rem, 1.6rem);
  --fs-600: clamp(1.6rem, 1.6vw + 1.1rem, 2.4rem);
  --fs-700: clamp(2.1rem, 3vw + 1.15rem, 3.6rem);
  --fs-800: clamp(2.6rem, 5.2vw + 0.9rem, 5.6rem);
  --fs-900: clamp(3rem, 8vw + 0.4rem, 8.5rem);

  --lh-tight: 1.02;
  --lh-snug: 1.14;
  --lh-body: 1.62;

  --tracking-wide: 0.14em;
  --tracking-wider: 0.2em;

  /* --------------------------------------------------------------- spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /** Vertical rhythm between full-bleed sections. */
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --section-y-tight: clamp(3rem, 6vw, 6rem);

  /* -------------------------------------------------------------- layout */
  --container: 76rem;
  --container-wide: 88rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.15rem, 4vw, 3rem);

  --header-h: 4.5rem;
  /* The header also carries a 1px bottom border at all times (transparent
     until it sticks, so sticking never changes its height and nothing jumps).
     Sections that slide underneath it must offset by the border too. */
  --header-total: calc(var(--header-h) + 1px);
  --header-offset: 6.5rem;

  /* --------------------------------------------------------------- shape */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 12px;
  --r-pill: 999px;

  --border-hair: 1px solid var(--rule);

  /* -------------------------------------------------------------- shadow */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.28);
  --shadow-md: 0 10px 30px -12px rgb(0 0 0 / 0.55);
  --shadow-lg: 0 30px 70px -28px rgb(0 0 0 / 0.75);
  --shadow-frame:
    0 0 0 1px rgb(0 0 0 / 0.35),
    0 24px 60px -24px rgb(0 0 0 / 0.7);

  /* -------------------------------------------------------------- motion */
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 640ms;
  --ease: cubic-bezier(0.32, 0.72, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ------------------------------------------------------------ textures */
  /* Grain is generated in-browser, so it costs bytes rather than a request. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* A hand-painted rope twist, used on mural-style frames. */
  --rope: repeating-linear-gradient(
    -45deg,
    var(--c-burgundy) 0 5px,
    #9c4a37 5px 9px,
    var(--c-burgundy) 9px 13px
  );

  --z-header: 60;
  --z-drawer: 80;
  --z-lightbox: 100;
  --z-skip: 120;
}

/* The one place a media query touches a token: mobile gets a shorter header. */
@media (max-width: 47.9375em) {
  :root {
    --header-h: 3.9rem;
    --header-offset: 5.25rem;
  }
}

/* Users who ask for less motion get the tokens neutralised at the source. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}