/* Base Size Control - Change this to scale entire typographic system */
html {
  font-size: 22px; /* Adjust to 14px, 18px, 20px etc. to scale everything */
}

/* Design System - Letterpress-Inspired Scales */
:root {
  /* Colors */
  --color-white: #FFF;
  --color-gray-1: #333;
  --color-gray-2: #666;
  --color-gray-3: #999;
  --color-gray-4: #DDD;
  --color-gray-5: #EEE;
  --color-hot-pink: #FF005E;

  /* Typography - Curated Letterpress Point Sizes */
  --font-8pt: 0.5rem;      /* 8px - Brevier */
  --font-10pt: 0.625rem;   /* 10px - Long Primer */
  --font-12pt: 0.75rem;    /* 12px - Pica */
  --font-14pt: 0.875rem;   /* 14px - English */
  --font-16pt: 1rem;       /* 16px - Columbian */
  --font-18pt: 1.125rem;   /* 18px - Great Primer */
  --font-24pt: 1.5rem;     /* 24px - Double Pica */
  --font-30pt: 1.875rem;   /* 30px */
  --font-36pt: 2.25rem;    /* 36px - Double Great Primer */
  --font-48pt: 3rem;       /* 48px - Four-line Pica */
  --font-60pt: 3.75rem;    /* 60px - Five-line Pica */
  --font-72pt: 4.5rem;     /* 72px - Six-line Pica */
  
  /* Spacing - Typographic Spaces (proportional to current font size) */
  --space-hair: 0.063em;    /* Hair space - 1/16 em */
  --space-thin: 0.167em;    /* Thin space - 1/6 em */
  --space-mid: 0.25em;      /* Mid space - 1/4 em */
  --space-thick: 0.333em;   /* Thick space - 1/3 em */
  --space-en: 0.5em;        /* En quad - Half em space */
  --space-em: 1em;          /* Em quad - Full em space */

  /* Letterpress Quadrats - Multiples of current font size */
  --space-2em: 2em;         /* 2-em quad - Double em space */
  --space-3em: 3em;         /* 3-em quad - Triple em space */
  --space-4em: 4em;         /* 4-em quad - Quadruple em space */
  
  /* Lead Sizes - Small vertical spacing materials */
  --lead-1pt: 0.0625rem;   /* 1 point lead */
  --lead-2pt: 0.125rem;    /* 2 point lead */
  --lead-3pt: 0.1875rem;   /* 3 point lead */
  --lead-4pt: 0.25rem;     /* 4 point lead */
  --lead-5pt: 0.3125rem;   /* 5 point lead */
  
  /* Clumps - Larger vertical spacing materials */
  --clump-6pt: 0.375rem;    /* 6 point clump - Half pica (6px) */
  --clump-12pt: 0.75rem;    /* 12 point clump - Full pica (12px) */
  --clump-18pt: 1.125rem;   /* 18 point clump - 1.5 picas (18px) */
  --clump-24pt: 1.5rem;     /* 24 point clump - 2 picas (24px) */

  /* Leading - Line spacing like physical lead strips (font size + lead) */
  --leading-solid: 1em;                        /* No added space - solid setting */
  --leading-1pt: calc(1em + var(--lead-1pt) );        /* Font size + 1pt lead */
  --leading-2pt: calc(1em + var(--lead-2pt));         /* Font size + 2pt lead */
  --leading-3pt: calc(1em + var(--lead-3pt));        /* Font size + 3pt lead */
  --leading-4pt: calc(1em + var(--lead-4pt));        /* Font size + 4pt lead */
  --leading-5pt: calc(1em + var(--lead-5pt));        /* Font size + 5pt lead */
  --leading-6pt: calc(1em + var(--clump-6pt));         /* Font size + 6pt lead */
  --leading-12pt: calc(1em + var(--clump-12pt));         /* Font size + 12pt lead */
  --leading-18pt: calc(1em + var(--clump-18pt));         /* Font size + 12pt lead */
  
  /* Post Grotesk Weight Names */
  --font-thin: 100;       /* Thin */
  --font-light: 300;      /* Light */
  --font-book: 400;       /* Book (regular) */
  --font-medium: 500;     /* Medium */
  --font-bold: 700;       /* Bold */
  --font-black: 900;      /* Black */
  
  /* System */
  --font-family-sans: 'Post Grotesk', system-ui, -apple-system, sans-serif;
  --font-family-icons: 'ASF Icons';
  --container-max: 1024px;
}

/* Base Typography */
body {
  font-family: var(--font-family-sans);
  font-size: var(--font-12pt);
  line-height: calc(var(--leading-3pt) + var(--lead-1pt));
  color: var(--color-gray-1);
  background-color: var(--color-white);
  p {
    margin-bottom: var(--clump-12pt);
  }
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background-color: var(--color-hot-pink);
  z-index: 1000;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  text-decoration-line: underline;
  text-decoration-color: var(--color-gray-4);
  text-decoration-skip-ink: auto;
}

a:hover {
  color: var(--color-hot-pink);
  text-decoration: none;
}

/* Headings use Medium weight (refined bold) */
h1, h2, h3, h4, h5, h6, strong {
  font-weight: 500; /* Explicit Medium weight */
  font-size: var(--font-12pt);
}

.layout {
  margin: 0;
}

/* Layout Main */
.layout__main {
  margin-left: var(--clump-18pt);
  margin-right: var(--clump-18pt);
}

/* Header Navigation Bar */
.layout__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: var(--clump-18pt);
  padding-right: var(--clump-18pt);
  padding-top: calc(var(--clump-18pt) + var(--clump-6pt));
  padding-bottom: var(--clump-18pt);
  border-bottom: 1px solid var(--color-gray-5);
}

/* Logo */
.logo {
  font-size: var(--font-12pt);
  font-weight: var(--font-book);
  .word-a { font-weight: var(--font-thin); }
  .word-simple { font-weight: var(--font-light); }
  .word-frame { font-weight: var(--font-book); }
  a {
    text-decoration: none;
    color: var(--color-gray-2);
    font-feature-settings: "ss02" 1; /* Stylistic Set 02 - Alternate Lowercase 'a' */
  }
  a:hover {
    color: var(--color-hot-pink);
    .word-a { color: var(--color-hot-pink); }
    .word-simple { color: var(--color-hot-pink); }
    .word-frame { color: var(--color-hot-pink); }
  }
}

/* Navigation Component */
.nav {
  display: flex;
  gap: var(--space-em);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  color: var(--color-gray-2);
  text-decoration: none;
  display: inline-block;
}

.nav__link:hover {
  color: var(--color-hot-pink);
}

/* .nav__link[aria-current="page"] {
  color: var(--color-hot-pink);
} */

.work main {
  h1 {
    font-size: var(--font-18pt);
    line-height: var(--leading-solid);
  }
  
  div {
    margin-bottom: calc(var(--clump-12pt) * 2);
  }

  h2 {
    font-size: var(--font-14pt);
    line-height: var(--leading-solid);
    margin-bottom: var(--clump-12pt);
  }

  p {
    margin-bottom: 0;
  }

  .work-overview p {
    text-indent: var(--space-em);
  }
  .work-overview p:first-of-type {
    text-indent: 0;
  }

  thead {
    display: none;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  table tr:not(:last-child) {
    border-bottom: 1px solid var(--color-gray-5);
  }

  table td {
    padding: var(--clump-6pt) 0;
  }

  table td:first-child {
    text-align: left;
  }

  table td:last-child {
    text-align: right;
    color: var(--color-gray-3);
  }

  .work-purpose { 
    padding-top: var(--clump-12pt);
    padding-bottom: var(--clump-12pt);
    h3 {
    font-size: var(--font-18pt);
    line-height: var(--leading-6pt);
    font-weight: var(--font-light);
    color: var(--color-gray-3);
    border: solid 1px var(--color-gray-5);
    padding: var(--clump-12pt);
    }
  }

  .work-principles p {
    margin-bottom: var(--clump-12pt);
    color: var(--color-gray-3);
    strong {
      color: var(--color-gray-1);
    }
  }
}



/* Home Page Grid Layout - Mobile First */

.home .layout__main {
  display: grid;
  grid-template-columns: 1fr;
}

.home .layout__main > div {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
}

.home h2 {
  font-size: var(--font-18pt);
  font-weight: var(--font-book);
  margin-bottom: var(--clump-24pt);
}

.home-profile, .home-purpose, .home-portfolio {
  border-top: none;
  border-top: solid 1px var(--color-gray-4);
  padding-top: var(--clump-12pt);
  margin-bottom: calc(var(--clump-24pt) * 2);
}


.home-hero {
  padding-top: calc(var(--clump-24pt) * 2);
  padding-bottom: calc(var(--clump-24pt) * 2);
}

.home-hero figure img {
  max-width: calc(var(--clump-18pt) * 7);
}

.home-hero p {
  font-size: var(--font-24pt);
  line-height: var(--leading-3pt);
  font-weight: var(--font-light);
  margin-bottom: 0;
  margin-top: var(--clump-18pt);
}

@media (min-width: 330px) {
  .home-hero p {
    font-size: var(--font-30pt);
  }
}

.home-profile-text {
  margin-bottom: var(--clump-18pt);
  max-width: 490px;
}

.home-profile-text p {
  font-size: var(--font-12pt);
  line-height: var(--leading-5pt);
  color: var(--color-gray-2);
}

.home-profile-text p:first-of-type {
  font-size: var(--font-16pt);
  line-height: var(--leading-5pt);
  color: var(--color-gray-1);
}

.home-experience h3 {
  font-variant-caps: small-caps;
  text-transform: lowercase;
  letter-spacing: calc(var(--space-hair) * 2);
  color: var(--color-gray-2);
  margin-bottom: var(--clump-6pt);
}

.home-experience table {
  width: 100%;
  max-width: 330px;
  border-collapse: collapse;
  font-size: var(--font-10pt);
  color: var(--color-gray-2);
  margin-bottom: var(--clump-12pt);
}

.home-experience table tr:not(:last-child) {
  border-bottom: 1px solid var(--color-gray-5);
}

.home-experience table td {
  padding: var(--clump-6pt) 0;
}

.home-experience table td:first-child {
  text-align: left;
  width: 16px;
  padding-right: var(--clump-6pt);
}

.home-experience table td:nth-child(2) {
  text-align: left;
}

.home-experience table td:last-child {
  text-align: right;
  color: var(--color-gray-3);
  font-feature-settings: "lnum" 1;
}

.home-experience thead {
  display: none;
}

.home-experience a {
  font-size: var(--font-10pt);
  color: var(--color-gray-2);
  text-decoration: none;
  padding-right: var(--space-em);
}

.home-purpose p {
  font-size: var(--font-24pt);
  font-weight: var(--font-light);
  line-height: var(--leading-6pt);
}

.home-portfolio p {
  font-size: var(--font-12pt);
  line-height: var(--leading-5pt);
  color: var(--color-gray-2);
}

.home-portfolio p:first-of-type {
  font-size: var(--font-16pt);
  line-height: var(--leading-5pt);
  color: var(--color-gray-1);
}


/* Desktop Layout - 4 Column Grid at 900px and above */
@media (min-width: 900px) {
  /* Home Page 4-Column Grid Layout */
  .home .layout__main {
    grid-template-columns: 150px 1fr 1fr 1fr;
    column-gap: var(--clump-24pt);
  }
  
  .home .layout__main > div {
    grid-template-columns: 150px 1fr 1fr 1fr;
    column-gap: calc(var(--clump-24pt) * 2);
  }
  
  .home-hero figure,
  .home-hero p {
    grid-column: 2 / -1;
  }

  .home-profile h2 {
    grid-column: 1;
    grid-row: 1;
  }

  .home-profile-text, .home-portfolio-text {
    grid-column: 2 / 4;
    grid-row: 1;
  }

  .home-experience {
    grid-column: 4;
    grid-row: 1;
  }

  .home-purpose p {
    grid-column: 2 / 5;
  }
}

@media (min-width: 1240px) {
  .home .layout__main {
    grid-template-columns: 1fr minmax(auto,240px) minmax(auto,240px) minmax(auto,240px) 1fr;
    column-gap: var(--clump-24pt);
  }
  .home .layout__main > div {
    grid-template-columns: 1fr minmax(auto,240px) minmax(auto,240px) minmax(auto,240px) 1fr;
    column-gap: calc(var(--clump-24pt) * 2);
  }
}