/* Tigris — design tokens (the ONE place for palette, type, spacing, motion).
   Light site: dark appears only inside imagery. One vivid accent, used sparingly.
   Contrast (WCAG 2.x, checked by docs/qa-check.js):
     --ink on --bg 16.9:1 · --ink-2 on --bg 9.6:1 · --muted on --bg-soft 5.4:1
     --accent on --bg 5.2:1 · --accent on --bg-soft 4.7:1 · --on-accent on --accent 5.2:1
     v13 (client v6 B.2): ONE continuous warm canvas — --bg = the warm beige that was --bg-soft; the pink event-band surface token is DELETED
     (every former use = the canvas). On the canvas: --ink 15.9:1 · --muted 5.4:1 · --accent 4.7:1 (all AA, measured by qa-check.js).
     v14: header, burger panel and footer are WHITE (--header-bg / --footer-bg): --ink 17.3:1 · --ink-2 11.0:1 · --muted 5.9:1 · --accent 5.2:1 on white. */

:root {
  /* palette */
  --bg: #f6f4f1;            /* v13: THE page canvas (warm light beige) — every section, the event band, the header, the footer */
  --bg-soft: #f6f4f1;       /* = the canvas (v13: no alternating section colour); still the hover tint on white cards/dropdown */
  --bg-tint: #efebe5;       /* deeper tint: placeholders, page heads without photo */
  --surface-card: #ffffff;  /* card / tile surface (also the pad colour of non-square album covers) */
  --ink: #1b1a1f;           /* text (near-black, not #000) */
  --ink-2: #3d3b42;         /* secondary text */
  --muted: #66626b;         /* captions, meta */
  --line: rgba(27, 26, 31, .12);
  --line-strong: rgba(27, 26, 31, .24);
  --accent: #d4145a;        /* "stage magenta" — CTAs, ticket buttons, active states only */
  --accent-strong: #ad0f49; /* hover/pressed */
  --on-accent: #ffffff;
  --focus: #d4145a;
  /* v14: header + footer = pure white blocks on the beige canvas (separated by --border-strong hairlines) */
  --header-bg: #ffffff;                       /* header at rest (and the mobile burger panel) */
  --header-bg-scrolled: rgba(255, 255, 255, .95); /* sticky header after scroll: white ~95 % + the existing blur */
  --footer-bg: #ffffff;                       /* footer */
  /* past events (ruling C): the IMAGE is muted, text stays AA (checked by qa-check.js) */
  --past-filter: grayscale(.85) opacity(.55);
  --past-ink: #5b5760;      /* past tile / card title: 6.7:1 on --surface-card */
  --badge-bg: #ebe7e1;      /* „Įvyko“ pill */
  --badge-ink: #3d3b42;     /* = --ink-2; 9.0:1 on --badge-bg */
  --badge-soon-bg: #fbe3ec; /* „Bilietai netrukus“ pill */
  --badge-soon-ink: #a10e45;/* 6.0:1 on --badge-soon-bg */

  /* type */
  --font-head: "Montserrat", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body: "Lato", "Helvetica Neue", Arial, system-ui, sans-serif;
  --fs-body: clamp(16px, .45vw + 13.5px, 20px);
  /* ONE type scale for titles (owner review round 2). The page title = the approved home intro heading;
     every page header (h1) uses it, every section title is one step below, the lead sits close under the title. */
  --fs-page-title: clamp(1.5rem, 3.1vw, 4.7rem);          /* h1 of every page: 24px @390 · 45px @1440 · 75px @2560 */
  --fs-section-title: clamp(1.35rem, 2vw + .2rem, 3.3rem); /* section h2 (.display): 22px @390 · 32px @1440 · 54px @2560 */
  --fs-lead: clamp(1.1rem, .55vw + .9rem, 1.55rem);        /* lead line under a title: 18px @390 · 22px @1440 · 25px @2560 */
  --fs-h3: clamp(1.2rem, 1vw + .8rem, 1.9rem);             /* card titles, small headings */
  --fs-stat: clamp(1.75rem, 2.2vw + .2rem, 3.4rem);        /* numbers (stats), timeline years: below the section title */
  --fs-contact: clamp(20px, .3vw + 16.5px, 24px);          /* contact values on /kontaktai */
  --title-gap: .6em;                                        /* lead under a title: gap in em of the lead */
  /* captioned cards (round 3, bilietai.lt-style): image box + caption BELOW; also the home city tiles */
  --fs-caption: clamp(16px, .1vw + 14.6px, 17px);           /* card / tile name: Montserrat 400, 16–17px */
  --fs-caption-meta: clamp(13px, .1vw + 12px, 14.5px);      /* optional 2nd line (muted): date · time, venue, year / place */
  --caption-pad: .75em;                                     /* image → caption */
  --grid-gap: clamp(12px, 1.4vw, 32px);                     /* captioned cards + city tiles: one gap */
  --fill-max-h: clamp(220px, 32vw, 640px);                  /* grid-fill rule C.4: image box cap of a stretched / single item */
  --fs-label: .74rem;
  --track-head: -.015em;    /* large headings: presence from size + tracking, not weight */
  --track-label: .2em;      /* small eyebrow labels only (uppercase) */

  /* spacing — full page width; gutters scale up to a 27" 5K screen */
  --pad: clamp(16px, 4.2vw, 168px);
  --gap: clamp(16px, 1.8vw, 44px);
  --section-y: clamp(56px, 7vw, 176px);
  --radius: 6px;            /* small UI things only: placeholders, badges */
  --radius-media: 20px;     /* EVERY image box: page-head photos, galleries, strip, director, map, slideshow, cards (16px on phones, below) */
  --radius-tile: 16px;      /* city tiles, mobile menu panel */
  --radius-card: var(--radius-media); /* the one card system: services, albums, events (= the media radius) */
  --radius-banner: var(--radius-media); /* tour slideshow (= the media radius) */
  /* header lockup (C.1, client v5): the footer's logo + tagline — logo larger than v10 (46–70px), tagline smaller than the
     footer's (body size) with a tighter gap. ≥ 1280px (the burger breakpoint, C.1) the lockup compresses on scroll (html.is-compact: smaller logo, tagline faded). */
  --logo-h-full: clamp(60px, 4.4vw, 104px);   /* 60 @1280–1360 · 63 @1440 · 104 @2560 */
  --logo-h-compact: clamp(46px, 3vw, 72px);
  --logo-h: var(--logo-h-full);
  --tagline-fs: clamp(12px, .25vw + 9.5px, 15px); /* 12.7 @1280 · 13.1 @1440 · 15 @2560 (footer: 16–20) */
  --tagline-gap: 3px;                          /* logo → tagline (footer: ≈ 1.2em) */
  --header-pad-y: clamp(10px, .75vw, 20px);
  --header-h-full: calc(var(--logo-h-full) + var(--tagline-gap) + var(--tagline-fs) * 1.3 + 2 * var(--header-pad-y));
  --header-h-compact: calc(var(--logo-h-compact) + 1.4 * var(--header-pad-y));
  --header-h: var(--header-h-full);            /* current header height (html.is-compact → compact) */
  --border-strong: rgba(27, 26, 31, .28);      /* C.2: the visible hairline under the header (2.0:1 on white) */

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .2s;
  --t-med: .45s;
  --ease-slide: cubic-bezier(.22, .61, .36, 1); /* tour carousel: horizontal slide */
  --t-slide: .6s;
  --shadow-soft: 0 1px 2px rgba(27, 26, 31, .05), 0 8px 24px -14px rgba(27, 26, 31, .22);  /* resting: cards, tiles */
  --shadow-lift: 0 18px 40px -18px rgba(27, 26, 31, .38);                                   /* hover */
  --shadow-banner: 0 2px 6px rgba(27, 26, 31, .05), 0 28px 60px -30px rgba(27, 26, 31, .45); /* slideshow on the event band */
}
@media (max-width: 767.98px) { :root { --radius-media: 16px; } }
/* phones/tablets (< 1280px, burger — C.1 raised the breakpoint from 1024). v17 (owner 2026-11-05 18:21): the lockup is CENTRED on the
   page and ~17% bigger — logo 44 → 52px (+18%), tagline 12 → 14px (+17%, 340px wide: one line in the 357px content width at 390,
   under the burger row), padding 10 → 12px (header 82.6 → 98.2px, same proportions). Below 375px the 14px tagline no longer fits
   one line (328px content at 360) → only the tagline is hidden there (owner rule) and the bar = logo + padding (76px). */
@media (max-width: 1279.98px) { :root { --logo-h-full: 52px; --tagline-fs: 14px; --header-pad-y: 12px; } }
@media (max-width: 374.98px) { :root { --header-h-full: calc(var(--logo-h-full) + 2 * var(--header-pad-y)); } }
@media (min-width: 1280px) { html.is-compact { --logo-h: var(--logo-h-compact); --header-h: var(--header-h-compact); } }