/* 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;
}

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


/* 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);
  margin-bottom: var(--clump-24pt);
}

/* Logo */
.logo {
  font-size: var(--font-12pt);
  font-weight: var(--font-book);
  position: relative;
  top: 0;
  left: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  font-family: var(--font-family-sans);
  line-height: 22px;
  .word-a { font-weight: var(--font-thin); }
  .word-simple { font-weight: 300; }
  .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;
  position: relative;
  top: 0;
  right: 0;
  font-size: 16.5px;
  line-height: 22px;
}

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

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

.back-button {
  position: sticky;
  top: var(--clump-24pt);
  left: var(--clump-18pt);
  border-bottom: none;
  font-size: 16.5px;
  color: var(--color-gray-2);
}

@media (max-width: 812px) {
  .back-button {
    display: none;
  }
}

.content {
  margin-top: calc(var(--clump-24pt) * 2);
}