/* Display type, the logo and the type scale, from the store's brand data
   (src/stores.mjs themeCss): the font tokens in style.css's :root
   (--font-body, --font-display, --font-accent), plus --font-mono,
   --display-weight and --display-tracking. Loaded after style.css and
   site.css. */
:root {
  /* The logo's paint roles (src/brand-logo.mjs): reversed in the footer. */
  --logo-primary: var(--ink);
  --logo-on: var(--white);
  --logo-accent: var(--accent);
  --logo-secondary: var(--muted);
}
h1,
h2,
.hero h1,
.product-copy h1,
.page-heading h1,
.section-head h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 500);
  letter-spacing: var(--display-tracking, -0.045em);
}
h3,
.tile-details h3,
.industry-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight-small, 600);
  letter-spacing: -0.01em;
}
.hero h1 em {
  font-family: var(--font-accent);
  font-weight: 400;
  letter-spacing: -0.02em;
}
/* A calmer scale: pages are titled, not shouted. */
h1 {
  font-size: clamp(32px, 3.4vw, 50px);
  line-height: 1.08;
}
h2 {
  font-size: clamp(24px, 2.4vw, 32px);
}
.hero h1 {
  font-size: clamp(44px, 5vw, 76px);
  line-height: 1.02;
}
.product-copy h1 {
  font-size: clamp(32px, 3.2vw, 46px);
}
/* Specs and slugs, where a store sets a mono face. */
.spec-list dd {
  font-family: var(--font-mono, inherit);
}

/* The drawn logo (brand.logo); the type mark and wordmark otherwise. */
.brand-logo {
  display: block;
  line-height: 0;
}
.brand-logo svg {
  display: block;
  height: 44px;
  width: auto;
  max-width: 260px;
}
.site-footer {
  --logo-primary: var(--paper);
  --logo-on: var(--ink);
  --logo-secondary: var(--accent);
}
.footer-brand .brand-logo svg {
  height: 40px;
}
@media (max-width: 720px) {
  .brand-logo svg {
    width: min(46vw, 180px);
    height: auto;
  }
  .hero h1 {
    font-size: 46px;
  }
  /* On a phone the picture comes first, under the header. */
  .hero-art {
    order: -1;
    min-height: 300px;
  }
  .hero-art .hero-cards {
    margin: 0;
    width: 100%;
  }
}