/*
 * One Ticket's display type, on every marketing page: published by the
 * copy at /m/type.css, linked after /m/fixes.css (transform T9). The
 * product pages' headings (huge Instrument Serif, one italic word in the
 * brand gradient, a mono eyebrow) carried to the other pages: /pricing
 * (pricing.css), the blog, its posts and the own pages (blog.css), and
 * live's own pages (features, templates, the Eventbrite fee calculator:
 * their h1.big, h2.big, .eyebrow and .gt, below). products.css reads the
 * fonts and sizes from here.
 * Contrast on #f8f8fa and #fff: ink #0b0b0f 19:1, eyebrow #5a5a66 6.5:1;
 * the gradient words #5b4fe0 > #8b4fdc > #c23b86, 4.5:1 or more along
 * their whole length (the blog's stops: AA even below heading size).
 */

/*
 * Fallbacks sized to the web fonts (measured in Chromium: the same words'
 * width, and the fonts' ascent and descent), so the page doesn't move when
 * Google's fonts swap in (display=swap): Georgia drawn at Instrument
 * Serif's size (its italic apart), Arial at Figtree's. No download: local
 * fonts only
 */
@font-face {
  font-family: 'Instrument Serif Fallback';
  font-style: normal;
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 75.74%;
  ascent-override: 130.71%;
  descent-override: 40.93%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Instrument Serif Fallback';
  font-style: italic;
  src:
    local('Georgia Italic'), local('Georgia-Italic'),
    local('Times New Roman Italic');
  size-adjust: 79.21%;
  ascent-override: 124.98%;
  descent-override: 39.13%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Figtree Fallback';
  font-weight: 100 500;
  src: local('Arial'), local('Helvetica');
  size-adjust: 100.75%;
  ascent-override: 94.29%;
  descent-override: 24.81%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Figtree Fallback';
  font-weight: 600 900;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold');
  size-adjust: 95.78%;
  ascent-override: 99.18%;
  descent-override: 26.1%;
  line-gap-override: 0%;
}

:root {
  --ot-serif:
    'Instrument Serif', 'Instrument Serif Fallback', Georgia, 'Times New Roman',
    serif;
  --ot-sans:
    'Figtree', 'Figtree Fallback', system-ui, -apple-system, sans-serif;
  --ot-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  /* a page's one headline, and a section's title */
  --ot-display: clamp(54px, 9.2vw, 120px);
  --ot-h2: clamp(42px, 6.4vw, 84px);
  /* a long headline in a reading column (a post, an own page) */
  --ot-title: clamp(42px, 6.4vw, 84px);
  --ot-tracking: -0.015em;
  --ot-grad-text: linear-gradient(90deg, #5b4fe0, #8b4fdc 55%, #c23b86);
  /* on an ink ground */
  --ot-grad-night: linear-gradient(90deg, #9d95ff, #c4a1ff 55%, #ff9cc8);
}

/* ------------------------------------------- the gradient word, anywhere
   Italic, as the product pages' (.pp-gx); inline so a long phrase wraps,
   each line drawn whole; room right and below for the italic's overhang
   and descenders (background-clip:text paints only the box) */
html body .gt,
html body .bl-acc {
  display: inline;
  padding: 0 0.06em 0.06em 0;
  background: var(--ot-grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #5b4fe0 !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-style: italic;
}

/* --------------------------------- live's own pages (features, templates,
   the Eventbrite fee calculator): their serif, at the product pages' size */
html body {
  --serif: var(--ot-serif);
}
html body h1.big {
  font-size: var(--ot-display);
  line-height: 0.95;
  letter-spacing: var(--ot-tracking);
}
html body h2.big {
  font-size: var(--ot-h2);
  line-height: 1;
  letter-spacing: var(--ot-tracking);
}
/* the eyebrow grey, as the product pages' (fixes.css had made it indigo) */
html body :is(.on-paper, .on-night) .eyebrow,
html body .eyebrow {
  color: var(--faint, #5a5a66) !important;
  font-weight: 500;
}