/* Shared font files and type scale. */
main section h2 {
  text-transform: uppercase;
}

@font-face {
  font-family: Gentle;
  src: url('../font/web/Gentle-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: Muchino;
  src: url('../font/web/Muchino-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: IBM Plex Mono;
  src: url('../font/web/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: Muchino;
  src: url('../font/web/Muchino-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* Shared typography. Edit sizes here, including their responsive variants. */

:root {
  /* Font families. */
  --f-display: Gentle, serif;
  --f-body: Muchino, serif;
  --f-data: 'IBM Plex Mono', monospace;

  /* Shared text and heading roles. */
  --t-base: var(--t-body);
  --t-body: clamp(1rem, 1.2vw, 1.125rem);
  --t-h1: 13.6cqi;
  --t-h2-wide: clamp(2.625rem, 5.2vw, 5rem);
  --t-h2: var(--t-h2-wide);
  --t-h3: clamp(1.25rem, 1.8vw, 1.75rem);
  --t-control: 1rem;
  --t-small: 0.875rem;
  --t-fine: 0.8125rem;
  --t-tiny: 0.75rem;
  --t-caption: var(--t-small);
  --t-label: var(--t-small);
  --t-button: var(--t-control);
  --t-language: var(--t-tiny);
  --t-eyebrow: var(--t-label);

  /* Approved composition-specific sizes. */
  --t-intro: clamp(0.9375rem, 1.15vw, 1.125rem);
  --t-price-hero: clamp(1.5rem, 2.3vw, 2.25rem);
  --t-fig-number: clamp(2.125rem, 4.1vw, 4.125rem);
  --t-fig-anchor: min(clamp(5.5rem, 14.5vw, 14.5rem), var(--t-h1));
  --t-fig-unit: clamp(1rem, 1.4vw, 1.375rem);
  --t-fig-anchor-unit: clamp(1.375rem, 2.4vw, 2.5rem);
  --t-breath-title: clamp(2.25rem, 5vw, 5rem);
  --t-year: clamp(1.25rem, 1.4vw, 1.375rem);
  --t-spec-title: var(--t-h2);
  --t-summary: var(--t-h3);
  --t-price-spec: clamp(1.5rem, 2.2vw, 2.125rem);
  --t-gallery-title: var(--t-h2);
  --t-ownership-title: var(--t-h2);
  --t-price-purchase: clamp(1.25rem, 2.7vw, 2.625rem);
  --t-contact: var(--t-body);
  --t-disclaimer: clamp(0.625rem, 0.8vw, 0.75rem);

  /* Navigation and overlays. */
  --t-menu: clamp(1.75rem, min(4.3vw, 6.6svh), 4.25rem);
  --t-menu-meta: var(--t-small);
  --t-menu-button: var(--t-button);
  --t-thanks-title: clamp(2.375rem, 3.7vw, 3.75rem);
  --t-enquiry-title: var(--t-thanks-title);
  --t-input: 1.125rem;
  --t-thanks-body: clamp(1.125rem, 1.5vw, 1.375rem);
  --t-faq-trigger: clamp(0.875rem, 1.1vw, 0.9375rem);
  --t-faq-title: clamp(2rem, 3vw, 2.625rem);
  --t-media-title: clamp(1.75rem, 3vw, 2.625rem);
}

/* Keep responsive typography together, rather than repeating sizes per section. */

@media (max-width:760px), (max-aspect-ratio:5/4), (max-height:600px) {
  :root {
    --t-h1: 14.8cqi;
  }
}

@media (max-height:600px) and (min-width:761px) {
  :root {
    --t-h1: clamp(2.5rem, 8vw, 4rem);
  }
}

@media (min-width: 761px) and (max-width: 1050px) {
  :root {
    --t-fig-number: clamp(2rem, 4.6vw, 2.75rem);
  }
}

@media (max-width: 1000px) and (min-width: 701px) {
  :root {
    --t-menu: clamp(1.75rem, min(4.1vw, 6.5svh), 3.25rem);
  }
}

@media (max-width: 760px) {
  :root {
    --t-h2: clamp(2.375rem, 8.5vw, 3.75rem);
    --t-fig-number: clamp(2.125rem, 10vw, 3rem);
    --t-fig-anchor: min(clamp(4.5rem, 26vw, 7.5rem), var(--t-h1));
    --t-price-purchase: clamp(1.875rem, 7.5vw, 2.625rem);
  }
}

@media (max-width: 700px) {
  :root {
    --t-menu: clamp(1.5rem, min(8.2vw, 5.2svh), 2.5rem);
    --t-media-title: 1.75rem;
  }
}

@media (orientation: portrait) {
  :root {
    --t-breath-title: clamp(2.125rem, 9.5vw, 3.5rem);
  }
}

@media (max-width: 760px), (max-height: 820px) {
  :root {
    --t-enquiry-title: clamp(1.75rem, 3.7vw, 3rem);
    --t-input: var(--t-control);
  }
}

@media (max-width: 760px) {
  :root {
    --t-enquiry-title: 1.75rem;
  }
}

@media (max-height: 480px) {
  :root {
    --t-enquiry-title: 1.75rem;
    --t-media-title: 1.75rem;
  }
}

@media (max-height: 450px) and (min-width: 701px) {
  :root {
    --t-menu: 1.75rem;
  }
}
