:root {
  --bg: #101014;
  --surface: #1b191f;
  --text: #f8f4ed;
  --muted: #b9b4bf;
  --purple: #9660f6;
  --deep-purple: #6732c7;
  --pink: #f54898;
  --yellow: #f5d632;
  --teal: #27c4b0;
  --paper: #f5f0e7;
  --line: #38333e;
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --body: "DM Sans", Arial, sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --script: "Caveat", cursive;

  --h1-weight: 700;
  --h1-line-height: 0.98;
  --h1-letter-spacing: normal;
  --h2-size: clamp(3rem, 5.8vw, 5.8rem);
  --h2-weight: 700;
  --h2-line-height: 0.98;
  --h2-letter-spacing: normal;
  --h3-size: 2.6rem;
  --h3-weight: 700;
  --h3-line-height: 0.98;
  --h3-letter-spacing: normal;
  --body-size: 1rem;
  --body-line-height: 1.65;
  --eyebrow-size: 0.75rem;
  --eyebrow-letter-spacing: 0.075em;
  --eyebrow-line-height: 1.6;
  --eyebrow-gap: 0.75rem;
  --mono-tag-size: 0.7rem;
  --mono-tag-letter-spacing: 0.015em;

  --hero-h1-size: clamp(4.6rem, 7.7vw, 7.6rem);
  --hero-h1-weight: 800;
  --hero-h1-line-height: 0.93;
  --hero-h1-letter-spacing: -0.025em;

  --content-max: 80rem;
  --content-width: 90%;
  --section-pad: clamp(4.5rem, 3.5707rem + 4.1304vw, 6.875rem);
  --header-padding-block: clamp(1.1875rem, 0.9674rem + 0.9783vw, 1.75rem);
  --nav-gap: clamp(0.9375rem, 0.6196rem + 1.413vw, 1.75rem);
  --section-heading-margin-bottom: clamp(2.625rem, 2.2337rem + 1.7391vw, 3.625rem);
  --feature-margin-top: clamp(3rem, 2.5842rem + 1.8478vw, 4.0625rem);
  --feature-keller-margin-top: clamp(4.6875rem, 3.8315rem + 3.8043vw, 6.875rem);
  --digital-list-margin-top: clamp(4.0625rem, 3.4511rem + 2.7174vw, 5.625rem);
  --digital-list-gap: clamp(0.875rem, 0.4348rem + 1.9565vw, 2rem);
  --plates-margin-top: clamp(2.8125rem, 2.0788rem + 3.2609vw, 4.6875rem);
  --process-grid-gap: clamp(1.5625rem, 0.8288rem + 3.2609vw, 3.4375rem);
  --proof-grid-gap: clamp(1.875rem, 0.9457rem + 4.1304vw, 4.25rem);
  --hero-padding-top: clamp(3.125rem, 2.6848rem + 1.9565vw, 4.25rem);
  --hero-padding-bottom: clamp(3.125rem, 2.4402rem + 3.0435vw, 4.875rem);

  --header-gap: 1.5rem;
  --hero-gap: 1.875rem;
  --hero-gap-tablet: 1.25rem;
  --hero-gap-mobile: 2.5rem;
  --feature-gap: 3.5rem;
  --feature-gap-tablet: 1.875rem;
  --feature-gap-mobile: 2rem;
  --about-gap: 5.9375rem;
  --about-gap-tablet: 2.8125rem;
  --about-gap-mobile: 3.75rem;
  --plate-padding: 1.75rem 1.625rem;
  --plate-padding-tablet: 1.5rem 1.0625rem;
  --plate-padding-mobile: 1.625rem;
  --plate-padding-small: 1.375rem 1rem;
  --proof-grid-gap-small: 2.8125rem;
  --process-grid-gap-small: 1.875rem;

  --button-padding: 0.9375rem 1.5rem;
  --button-gap: 2.25rem;
  --button-padding-small: 0.6875rem 1.125rem;
  --button-gap-small: 1.125rem;
  --yellow-rule-margin: 1.75rem 0 1.375rem;
  --hero-foot-margin-top: 1.5rem;
  --section-heading-gap: 3rem;
  --digital-list-padding-top: 1.875rem;
  --proof-footer-margin-top: 3.75rem;
  --proof-footer-padding-top: 1.5625rem;
  --proof-footer-gap: 1.25rem;
  --contact-padding-block: 5.3125rem;
  --footer-gap: 1.5625rem;
  --footer-padding-block: 1.875rem;
  --experience-strip-padding-block: 2rem 2.375rem;
  --experience-grid-gap: 0;
  --experience-grid-gap-mobile: 1.75rem 1.5rem;

  --purple-personal: #6732ba;
  --purple-plate: #6636b4;
  --purple-contact: #6631be;
  --near-black-text: #161017;
  --footer-line: #4b4350;
  --logo-height: 2.875rem;
  --logo-height-mobile: 2.25rem;

  --collection-web-bg: #194d58;
  --collection-print-bg: #813655;
  --collection-teal-bg: #137e77;
  --collection-ink: #211a29;
  --collection-muted-ink: #58505e;
  --collection-caption-ink: #402451;
  --collection-jumps-gap: 0.75rem;
  --collection-jumps-margin-top: 2.375rem;
  --index-studies-pad-bottom: 5.625rem;
  --index-project-pad-top: 2.8125rem;
  --index-project-margin-bottom: 2.8125rem;
  --index-picture-pad-block: 3rem 1.875rem;
  --mini-section-pad: 4.6875rem;
  --mini-grid-gap: 3.4375rem;
  --collection-outro-gap: 2.5rem;
  --collection-outro-pad: 5rem;
  --gallery-section-pad: 3.4375rem 4.375rem;
  --gallery-heading-gap: 1.875rem;
  --gallery-heading-margin-bottom: 2rem;
  --gallery-grid-gap: 3.4375rem;
  --archive-source-gap: 1.5625rem;
  --archive-source-pad: 1.5625rem;
  --collection-hero-gap: 3.4375rem;
  --collection-hero-pad-top: 3.75rem;
  --collection-hero-pad-top-mobile: 2.8125rem;
  --index-project-gap: 3.75rem;
  --index-project-gap-tablet: 1.875rem;
  --index-project-gap-mobile: 1.5625rem;
  --index-picture-height: 27.5rem;
  --index-picture-height-tablet: 21.875rem;
  --index-picture-pad-inline: 2.1875rem;
  --index-picture-pad-inline-tablet: 1.25rem;

  --membership-ink: #4e6068;
  --membership-accent: #08757a;
  --community-ink: #4b6065;
  --community-caption-ink: #375c61;

  --pub-red: #a12742;
  --pub-cream: #f3ece0;
  --web-proof-ink: #cab7df;
  --print-ink: #5b4e59;
  --print-accent: #8e203c;
  --connection-ink: #eee1ff;
  --connection-border: #ae82de;
  --connection-note-ink: #f0e4ff;
  --takeaway-accent: #6633ad;
  --londoner-h1-size: clamp(5rem, 9.7vw, 9.7rem);
  --londoner-h1-line-height: 0.95;
  --londoner-h1-letter-spacing: -0.025em;

  --personal-ink: #211928;

  --rp-teal: #27c4b0;
  --rp-ink-muted: #585060;
  --rp-proof-frame: #f4f0e9;
  --rp-responsive-ink: #d3e3e4;

  --lazy-frog-accent: var(--purple);
  --hoshi-accent: var(--pink);
  --visual-ink: #211a29;
  --visual-caption-ink: #605666;
}

@media (max-width: 1050px) {
  :root {
    --hero-h1-size: 6rem;
    --feature-gap: var(--feature-gap-tablet);
    --plate-padding: var(--plate-padding-tablet);
    --about-gap: var(--about-gap-tablet);
    --hero-gap: var(--hero-gap-tablet);
  }
}

@media (max-width: 850px) {
  :root {
    --index-project-gap: var(--index-project-gap-tablet);
    --index-picture-height: var(--index-picture-height-tablet);
    --index-picture-pad-inline: var(--index-picture-pad-inline-tablet);
  }
}

@media (max-width: 780px) {
  :root {
    --hero-h1-size: clamp(4.8rem, 13vw, 7.5rem);
    --hero-gap: var(--hero-gap-mobile);
    --feature-gap: var(--feature-gap-mobile);
    --about-gap: var(--about-gap-mobile);
    --plate-padding: var(--plate-padding-mobile);
    --experience-grid-gap: var(--experience-grid-gap-mobile);
  }
}

@media (max-width: 600px) {
  :root {
    --index-project-gap: var(--index-project-gap-mobile);
    --collection-hero-pad-top: var(--collection-hero-pad-top-mobile);
  }
}

@media (max-width: 480px) {
  :root {
    --proof-grid-gap: var(--proof-grid-gap-small);
    --process-grid-gap: var(--process-grid-gap-small);
    --plate-padding: var(--plate-padding-small);
  }
}