/* tagzil.com. Light only: the public kit has no dark theme. The colour tokens are the light
   values of the brand's tokens.css, copied by hand; Gabarito is self-hosted here and nowhere
   else, and carries the display type only. Body text is the system stack. */
@font-face {
  font-family: "Gabarito";
  src: url("/fonts/gabarito-latin.woff") format("woff");
  font-weight: 400 900;
  font-display: swap;
}
:root {
  --tz-primary: #3E446B;
  --tz-onPrimary: #FFFFFF;
  --tz-surface: #F8F9FE;
  --tz-onSurface: #1B1C1F;
  --tz-surfaceContainerLow: #F2F3F8;
  --tz-onSurfaceVariant: #444750;
  --tz-outline: #747681;
  --tz-outlineVariant: #C3C6D1;
  --tz-font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Sinhala", "Noto Sans Tamil", sans-serif;
  --tz-font-display: "Gabarito", var(--tz-font-text);
  --tz-radius-md: 12px;
  --tz-space-4: 16px;
  --tz-space-6: 24px;
  --tz-space-8: 32px;
  --tz-space-12: 48px;
  --tz-tap: 44px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--tz-surface); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--tz-surface);
  color: var(--tz-onSurface);
  font-family: var(--tz-font-text);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

/* the header: the wordmark alone until the site's links exist; 56 tall with the mark at 22, 64 and 26 from 840 */
.site-header { height: 56px; display: flex; align-items: center; padding: 0 var(--tz-space-4); }
.site-header a { display: inline-flex; align-items: center; min-height: var(--tz-tap); }
.site-header img { display: block; height: 22px; width: auto; }

/* the page: one column capped at 600 through medium, a 640 text column from 840 */
.page { flex: 1; width: 100%; max-width: 600px; margin: 0 auto; padding: var(--tz-space-8) var(--tz-space-4) var(--tz-space-12); }
.page h1 { font-family: var(--tz-font-display); font-weight: 600; font-size: 36px; line-height: 44px; letter-spacing: 0; margin: 0 0 var(--tz-space-4); }
.page h2 { font-family: var(--tz-font-display); font-weight: 600; font-size: 28px; line-height: 36px; margin: var(--tz-space-8) 0 var(--tz-space-4); }
.page p { margin: 0 0 var(--tz-space-4); color: var(--tz-onSurfaceVariant); }
.page h1 + p { font-size: 18px; line-height: 28px; }
.page a { color: var(--tz-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }

@media (min-width: 600px) {
  .site-header { padding: 0 var(--tz-space-6); }
  .page { padding: var(--tz-space-12) var(--tz-space-6) 64px; }
}
@media (min-width: 840px) {
  .site-header { height: 64px; padding: 0 64px; }
  .site-header img { height: 26px; }
  .page { max-width: 1440px; padding: 64px 64px 96px; }
  .page > * { max-width: 640px; }
  .page h1 { font-size: 45px; line-height: 52px; }
}