/* Kusnir Brick & Chimney (demo, identity A). The only file with hex colors.
   Palette named for the truck: door paint, chalk lettering, drop shade. */

@font-face {
  font-family: 'Ultra';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ultra-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ultra';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ultra-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* truck palette (brief §2) */
  --door: #24394A;        /* slate-blue paint */
  --letter: #F4F5F1;      /* chalk-white lettering: 10.9:1 on door */
  --shade: #C8372D;       /* signal-red drop shade; primary button: letter on shade 4.75:1 */
  --paper: #EEF0EE;       /* page background */
  --ink: #1B2833;         /* body text: 13.1:1 on paper */
  --line: #C3CAC8;        /* rules and frames (decorative, 1.45:1) */
  /* derived shades (measured) */
  --ink-2: #465663;       /* secondary text: 6.6:1 on paper, 6.1:1 on paper-2 */
  --paper-2: #E3E7E5;     /* alternate section background; ink on it 12.0:1 */
  --letter-2: #C9D3D9;    /* secondary text on the door: 7.9:1 */
  --shade-2: #A82C23;     /* hover/pressed shade; letter on it 6.3:1 */
  --slot-frame: #6F7D87;  /* dashed slot frames: 3.7:1 on paper */
  --ring: var(--ink);     /* focus ring follows the surface; .door sets it to --letter */

  /* 8-point spacing rhythm */
  --s-1: 0.25rem;   /* 4px */
  --s-2: 0.5rem;    /* 8px */
  --s-3: 0.75rem;   /* 12px */
  --s-4: 1rem;      /* 16px */
  --s-6: 1.5rem;    /* 24px */
  --s-8: 2rem;      /* 32px */
  --s-12: 3rem;     /* 48px */
  --s-16: 4rem;     /* 64px */
  --s-24: 6rem;     /* 96px */

  /* fluid type ramp, 320px -> 1440px viewport (phone size -> desktop size) */
  --step--1: clamp(0.9375rem, 0.9196rem + 0.08929vw, 1rem);     /* 15 -> 16px  captions, footer */
  --step-0:  clamp(1.125rem, 1.089rem + 0.1786vw, 1.25rem);      /* 18 -> 20px  body, buttons */
  --step-1:  clamp(1.35rem, 1.289rem + 0.3036vw, 1.5625rem);     /* 21.6 -> 25px  lead paragraph */
  --step-2:  clamp(1.619rem, 1.523rem + 0.4777vw, 1.953rem);     /* 26 -> 31px  h3 */
  --step-3:  clamp(1.944rem, 1.803rem + 0.7054vw, 2.438rem);     /* 31 -> 39px  h2, lockup trade line */
  --step-4:  clamp(2.331rem, 2.126rem + 1.027vw, 3.05rem);       /* 37 -> 49px  lockup phone number */
  --step-5:  clamp(2.8rem, 2.064rem + 3.679vw, 5.375rem);        /* 45 -> 86px  business name */

  --radius: 0.125rem;     /* 2px, on everything that has a radius */
  --gutter: var(--s-4);
  --measure: 65ch;
  --container: 72rem;
}
@media (min-width: 60rem) {
  :root { --gutter: var(--s-8); }
}