/* ============================================
   Design Tokens (legacy - referenced by unmigrated components)
   ============================================ */
:root {
  /* Primitive color tokens */
  --theme-color-celadon-100: #EBF3EF;
  --theme-color-celadon-300: #CEEFE7;
  --theme-color-celadon-400: #87D5C2;
  --theme-color-celadon-500: #409E88;
  --theme-color-eggplant-100: #F1F2F3;
  --theme-color-eggplant-200: #D0D3E3;
  --theme-color-eggplant-400: #7076A1;
  --theme-color-eggplant-900: #33364E;
  --theme-color-ink-900: #2C2D2E;
  --theme-color-lemongrass-100: #F9F9F7;
  --theme-color-goji-500: #C63D11;
  --theme-color-white-100: #FFFFFF;

  /* Primitive font tokens */
  --theme-font-family-primary: 'Martel', 'Source Serif Pro', serif;
  --theme-font-family-secondary: 'Inter', sans-serif;
  --theme-font-family-tertiary: 'Jockey One', sans-serif;

  /* Fluid type scale */
  --theme-font-size-v-8-12: clamp(0.5rem, 0.33vw + 0.42rem, 0.75rem);
  --theme-font-size-v-12-16: clamp(0.75rem, 0.33vw + 0.67rem, 1rem);
  --theme-font-size-v-14-20: clamp(0.88rem, 0.5vw + 0.75rem, 1.25rem);
  --theme-font-size-v-16-24: clamp(1rem, 0.67vw + 0.83rem, 1.5rem);
  --theme-font-size-v-24-32: clamp(1.5rem, 0.67vw + 1.33rem, 2rem);
  --theme-font-size-v-30-36: clamp(1.88rem, 0.50vw + 1.75rem, 2.25rem);
  --theme-font-size-v-36-48: clamp(2.25rem, 1vw + 2rem, 3rem);
  --theme-font-size-v-48-60: clamp(3rem, 1vw + 2.75rem, 3.75rem);
  --theme-font-size-v-72-96: clamp(4.5rem, 2vw + 4rem, 6rem);

  /* Layout tokens */
  --spacing-unit: 8;
  --speed-animation-transition: 150ms;
  --width-max-content: 1000px;
  --width-max-site: 1600px;
  --padding-vwidth: clamp(1rem, 2.67VW + 0.33rem, 2rem);

  /* Semantic color tokens */
  --color-primary-lightest: var(--theme-color-celadon-100);
  --color-primary-lighter: var(--theme-color-celadon-300);
  --color-primary-medium: var(--theme-color-celadon-400);
  --color-primary-darker: var(--theme-color-celadon-500);
  --color-secondary-lightest: var(--theme-color-eggplant-100);
  --color-secondary-lighter: var(--theme-color-eggplant-200);
  --color-secondary-darkest: var(--theme-color-eggplant-900);
  --color-tertiary-medium: var(--theme-color-goji-500);
  --color-background-primary: var(--theme-color-lemongrass-100);
  --color-background-secondary: var(--theme-color-eggplant-100);
  --color-background-tertiary: var(--theme-color-eggplant-900);
  --color-background-black: var(--theme-color-ink-900);
  --color-background-white: var(--theme-color-white-100);
  --color-font-primary: var(--theme-color-ink-900);
  --color-font-secondary: var(--theme-color-celadon-500);
  --color-font-tertiary: var(--theme-color-goji-500);
  --color-font-reverse: var(--theme-color-eggplant-100);
  --color-link-light: var(--theme-color-celadon-300);
  --color-link-dark: var(--theme-color-ink-900);

  /* Semantic font tokens */
  --font-family-primary: var(--theme-font-family-primary);
  --font-family-secondary: var(--theme-font-family-secondary);
  --font-family-tertiary: var(--theme-font-family-tertiary);

  /* Semantic size tokens */
  --font-vsize-100: var(--theme-font-size-v-8-12);
  --font-vsize-200: var(--theme-font-size-v-12-16);
  --font-vsize-300: var(--theme-font-size-v-14-20);
  --font-vsize-400: var(--theme-font-size-v-16-24);
  --font-vsize-500: var(--theme-font-size-v-24-32);
  --font-vsize-600: var(--theme-font-size-v-30-36);
  --font-vsize-700: var(--theme-font-size-v-36-48);
  --font-vsize-800: var(--theme-font-size-v-48-60);
  --font-vsize-900: var(--theme-font-size-v-72-96);
}

/* ============================================
   Base Styles
   ============================================ */
html {
  font-family: var(--font-family-primary);
  color: var(--color-font-primary);
  font-weight: 300;
  line-height: 1.5;
  background-color: var(--color-background-primary);
}

body {
  font: normal 62.5%/1.4 var(--font-family-primary);
  font-size: var(--font-vsize-400);
}

img {
  display: block;
}

strong {
  font-weight: 700;
}

a.button {
  white-space: nowrap;
}

/* ============================================
   Home Page
   ============================================ */
#masthead {
  position: relative;
  max-width: var(--width-max-site);
  margin: 0 auto;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px));
}

#headline {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  text-align: right;
  display: flex;
  align-items: center;
}

@media screen and (min-width: 1600px) {
  #headline {
    right: 0px;
  }
}

#headline h1 {
  display: inline-block;
  text-align: right;
}

#headline h1 span {
  background: var(--color-background-secondary);
  color: var(--color-font-primary);
  font-size: var(--font-vsize-700);
  font-weight: 900;
  line-height: 6rem;
  padding: 0 15px;
}

#whoami {
  margin: 96px auto 128px;
}

/* ============================================
   Work Page
   ============================================ */
.work-showcase {
  max-width: var(--width-max-site);
  margin: 0 auto;
}

.work-block {
  background-color: var(--color-primary-lightest);
  clip-path: polygon(0 0, 100% 50px, 100% 100%, 0 calc(100% - 50px));
  padding: 50px 0 50px;
  margin: 0 auto -51px;
  max-width: var(--width-max-site);
}

.work-block-heading {
  text-align: center;
  margin: 75px 0 75px;
}

/* ============================================
   Testimonials
   ============================================ */
.testimonial-block {
  max-width: var(--width-max-site);
  padding: 100px 0;
  background-color: var(--color-background-secondary);
  clip-path: polygon(0 0, 100% 50px, 100% 100%, 0 calc(100% - 50px));
  margin: 0 auto -51px;
}

.testimonial-block .editorial-callout {
  margin: 75px 0;
}