/**
 * 1440px fluid frame — DESKTOP ONLY.
 * Mobile/tablet: normal 100% layout with px type (readable, not vw-scaled).
 * Desktop: 1 design px = min(100vw, 1440px) / 1440 so zoom stays proportional.
 */

:root {
  --cz-dw: 1440;
  --cz-frame: 100%;
  --u: 1px;
  --cz-page-max: 100%;
  --cz-header-h: 58px;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-hero: 32px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-16: 64px;
  --cz-radius: 12px;
}

@media (min-width: 1024px) {
  :root {
    --cz-frame: min(100vw, 1440px);
    --u: calc(var(--cz-frame) / 1440);
    --cz-page-max: 1440px;
    --cz-header-h: calc(72 * var(--u));

    --fs-xs: calc(11 * var(--u));
    --fs-sm: calc(13 * var(--u));
    --fs-md: calc(16 * var(--u));
    --fs-lg: calc(20 * var(--u));
    --fs-xl: calc(28 * var(--u));
    --fs-2xl: calc(40 * var(--u));
    --fs-hero: calc(52 * var(--u));

    --sp-1: calc(4 * var(--u));
    --sp-2: calc(8 * var(--u));
    --sp-3: calc(12 * var(--u));
    --sp-4: calc(16 * var(--u));
    --sp-5: calc(24 * var(--u));
    --sp-6: calc(32 * var(--u));
    --sp-8: calc(48 * var(--u));
    --sp-10: calc(64 * var(--u));
    --sp-16: calc(96 * var(--u));
    --cz-radius: calc(12 * var(--u));
  }
}

.cz-site--fluid {
  width: 100%;
  max-width: 100%;
}

.cz-wrap {
  width: 100%;
  max-width: var(--cz-page-max, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

.cz-header__inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .cz-wrap,
  .cz-header__inner {
    max-width: 1440px;
    padding-left: calc(24 * var(--u));
    padding-right: calc(24 * var(--u));
  }

  /* Header bar is full-width fluid; inner stays 1440 */
  .cz-header {
    width: 100%;
    max-width: none;
    left: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
  }
}

.cz-site--admin {
  width: 100%;
  max-width: 100%;
}