/* Anvil & Hammer Agency — responsive typography, up to 1366px only.
   The approved phone/tablet/laptop rules are scoped to the media query below.
   Above 1366 CSS viewport pixels, each HTML font-size and line-height uses
   its original value via a var() fallback. No responsive type tokens apply.
   Keep this stylesheet after responsive.css. No JavaScript is required. */

/* Above the cutoff, these label wrappers do not change the original flex
   layout. The existing compact label layout is restored inside the query. */
.field-label { display: contents; }

@media (max-width: 1366px) {
  :root {
    --leading-display: 1.08;
    --leading-heading: 1.12;
    --text-caption: 0.75rem;
    --text-meta: 0.8125rem;
    --text-label: 0.875rem;
    --text-small: clamp(0.875rem, 0.8571rem + 0.0893vw, 0.9375rem);
    --text-body: 1rem;
    --text-body-md: clamp(1rem, 0.9821rem + 0.0893vw, 1.0625rem);
    --text-body-lg: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
    --text-quote: clamp(1.0625rem, 1.0089rem + 0.2679vw, 1.25rem);

    --title-xs: clamp(1.125rem, 1.0536rem + 0.3571vw, 1.375rem);
    --title-sm: clamp(1.25rem, 1.1786rem + 0.3571vw, 1.5rem);
    --title-md: clamp(1.375rem, 1.2679rem + 0.5357vw, 1.75rem);
    --title-card: clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem);
    --title-lg: clamp(1.625rem, 1.4464rem + 0.8929vw, 2.25rem);
    --title-xl: clamp(1.75rem, 1.5357rem + 1.0714vw, 2.5rem);
    --title-project: clamp(1.625rem, 1.375rem + 1.25vw, 2.5rem);

    --heading-sm: clamp(1.5rem, 1.1429rem + 1.7857vw, 2.75rem);
    --heading-md: clamp(1.75rem, 1.1071rem + 3.2143vw, 4rem);
    --heading-lg: clamp(1.875rem, 1.125rem + 3.75vw, 4.5rem);
    --heading-display-sm: clamp(2rem, 1rem + 5vw, 5.5rem);
    --heading-display: clamp(2rem, 0.7143rem + 6.4286vw, 6.5rem);
    --heading-home: clamp(2rem, 0.5714rem + 7.1429vw, 7rem);
    --heading-quote: clamp(1.75rem, 1.25rem + 2.5vw, 3.5rem);
    --number-md: clamp(2rem, 1.7143rem + 1.4286vw, 3rem);
    --number-lg: clamp(2rem, 1.5714rem + 2.1429vw, 3.5rem);
    --number-display: clamp(3rem, 2.1429rem + 4.2857vw, 6rem);
  }

  body {
    font-size: var(--text-body);
    line-height: 1.6;
    overflow-wrap: break-word;
  }

  /* Flex and grid text must be allowed to fit inside its padded container. */
  :where(div, section, article, aside, nav, header, footer, form, fieldset,
         label, p, blockquote, h1, h2, h3, h4, a, span, dl, dt, dd, li) {
    min-width: 0;
  }

  h1, h2, h3, h4, .h2, .pt {
    overflow-wrap: anywhere;
    word-break: normal;
    text-wrap: balance;
  }

  h1 { line-height: 1.04; }
  h2, .h2 { line-height: 1.1; }
  h3, h4 { line-height: 1.2; }
  p, li, dd, label, legend, blockquote { overflow-wrap: break-word; }
  a[href^="mailto:"], a[href^="tel:"] { overflow-wrap: anywhere; }

  .tag, .cred, .wchip {
    max-width: 100%;
    white-space: normal;
    line-height: 1.5;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .tags, div:has(> .tag) { flex-wrap: wrap; }
  .chap .num { max-width: 100%; }
  .cap, .cap2 { max-width: calc(100% - 32px); }

  /* Text fields stay at 16px (with the default browser font setting), including
     tablets. Checkbox and radio geometry is kept separate from text controls. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea {
    min-width: 0;
    max-width: 100%;
    font-size: var(--text-body);
    line-height: 1.5;
  }

  fieldset { min-inline-size: 0; }
  legend { max-width: 100%; line-height: 1.5; }
  label { line-height: 1.5; }
  .field-label { display: block; }
  .chip { line-height: 1.5; padding-top: 10px !important; padding-bottom: 10px !important; }
  .chip input[type="checkbox"], .chip input[type="radio"] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    min-height: 0;
  }
  .dot input { min-height: 0; }
  button, .fbtn { line-height: 1.4; }
  .js-form-error { font-size: var(--text-body) !important; }

  /* Long button labels can wrap without shrinking the tap target. */
  a[style*="min-height"], button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  button > svg, a > svg { flex-shrink: 0; }

  @media (max-width: 640px) {
    /* Uppercase eyebrows need less tracking on compact screens. */
    p[style*="text-transform: uppercase"], .lbl {
      letter-spacing: 0.12em !important;
      line-height: 1.5;
    }
    .qsec > div:first-child { align-items: baseline; }
    .qsec h2 { flex: 1 1 180px; }
    .chap .txt { min-width: 0; }
    blockquote + p[style*="flex: 0 0 auto"] { flex: 0 1 auto !important; }
  }
}