:root {
   /* FONT TOKEN */
   --font-display: 'UncutSans-Variable', serif;

   /* COLOR TOKEN */
   --color-background: #FBFBFB;
   --color-background-elevated: #EDEDED;
   --color-button-background-primary: #202020;
   --color-button-background-primary-hover: #545454;
   --color-button-text-primary: #FBFBFB;
   --color-button-background-secondary: #DEDEDE;
   --color-button-text-secondary: #202020;
   --color-divider: #DEDEDE;
   --color-text-primary: #202020;
   --color-text-secondary: #707070;
   --color-text-third: #BABABA;
   --color-focus: #202020;
   --color-primary: #EAB631;
   --color-project-bookmarks: #FFB800;
   --color-project-places: #D9EAD9;
   --color-project-cheese: #FFD363;

   /* SPACE TOKEN */
   --space-none: 0;
   --space-xx-small: 2px;
   --space-x-small: 4px;
   --space-small: 8px;
   --space-regular: 16px;
   --space-medium: 24px;
   --space-large: 32px;
   --space-x-large: 48px;
   --space-xx-large: 64px;
   --space-xxx-large: 96px;
   --spacing-unit: 1.25rem;

   /* RADIUS TOKEN */
   --card-radius: 16px;
}

.color-text-secondary {
   color: var(--color-text-secondary);
}

@font-face {
   font-family: UncutSans-Variable;
   src: url(assets/fonts/UncutSans-Variable.woff2) format("woff2");
   font-style: normal;
   font-feature-settings: 'dlig' on, 'salt' on, 'rvrn' on, 'ss01' on, 'ss02' on, 'ss03' on, 'ss06' on, 'ss07' on, 'ss08' on;
   font-display: fallback;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
   font-family: UncutSans-Variable, sans-serif;
}

h1, .h1 { 
   margin: 0;
   font-size: 44px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
}

h2, .h2 {
   margin: 0;
   font-size: 36px;
   font-style: normal;
   font-weight: 400;
   line-height: 44px;
}

h3, .h3 {
   margin: 0;
   font-size: 28px;
   font-style: normal;
   font-weight: 400;
   line-height: 30px;
}

h4, .h4 {
   font-size: 18px;
   font-weight: 500;
   margin: 0;
   margin-bottom: 0px;
   line-height: 1.2;
}

p {
   line-height: 1.5;
   letter-spacing: 0px;
}

p strong, strong {
   font-family: UncutSans-Variable, sans-serif;
   font-weight: 600;
}

a {
   line-height: 1.5;
   letter-spacing: 0px;
   text-decoration: underline;
   color: var(--color-text-primary);
   font-feature-settings: "ss01" on;
}

a:hover {
   text-decoration: none;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
   min-height: 100vh;
   position: relative;
   margin: 0;
   padding: 0;
   font-family: var(--font-display);
   font-size: 18px;
   font-weight: 400;
   line-height: 26px;
   color: var(--color-text-primary);
   background: var(--color-background);
   font-feature-settings: 'dlig' on, 'salt' on, 'rvrn' on, 'ss01' on, 'ss02' on, 'ss03' on, 'ss06' on, 'ss07' on, 'ss08' on;
}

.container {
   width: 100%;
   max-width: 1240px;
   margin: 0 auto;
   padding: var(--space-regular) var(--space-medium) var(--space-regular) var(--space-medium);
}

header {
   max-width: 1200px;
   margin: var(--space-medium) auto var(--space-x-large) auto;
}

header h1 {
   font-weight: 400;
   margin-bottom: 0.5rem;
   color: var(--color-text-primary);
}

.subtitle {
   font-size: 1.2rem;
   color: var(--color-text-secondary);
}

/* Grid Layout */
.grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: var(--space-medium);
   max-width: 1200px;
   margin: 0 auto;
   grid-auto-flow: dense;
}

/* Card Base */
.card {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: var(--space-regular);
   text-decoration: none;
   color: inherit;
   overflow: hidden;
   min-height: 200px;
   border: 1px solid var(--color-divider);
}

.card:hover {
   background: var(--color-background-elevated);
}

.card-content {
   position: relative;
   z-index: 2;
}

.card h2 {
   font-family: var(--font-display);
   font-size: 24px;
   font-weight: 400;
   color: var(--color-text-secondary);
}

.card p {
   font-size: 24px;
   color: var(--color-text-primary);
}

.card-icon {
   width: 32px;
   height: 32px;
   margin-bottom: 1rem;
   color: var(--color-text-primary);
}

.card-portfolio svg, .card-github svg, .card-blog svg {
   fill: var(--color-text-primary);
}

/* Card Variations */
.card-large {
   grid-column: span 2;
   min-height: 200px;
}

.card-tall {
   grid-row: span 2;
   min-height: 200px;
}


/* Footer */
footer {
   margin-top: var(--space-x-large);
   padding: var(--space-medium);
   color: var(--color-text-secondary);
   border: 1px solid var(--color-divider);
}

.footer-credit {
   margin-top: var(--space-regular);
   padding-top: var(--space-regular);
   border-top: 1px solid var(--color-divider);
}

/* Animations */
@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

header {
   animation: fadeIn 0.6s ease-out;
}

.card {
   animation: fadeIn 0.6s ease-out backwards;
}

.card:nth-child(1) { animation-delay: 0.05s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.15s; }
.card:nth-child(4) { animation-delay: 0.2s; }
.card:nth-child(5) { animation-delay: 0.25s; }
.card:nth-child(6) { animation-delay: 0.3s; }
.card:nth-child(7) { animation-delay: 0.35s; }
.card:nth-child(8) { animation-delay: 0.4s; }
.card:nth-child(9) { animation-delay: 0.45s; }
.card:nth-child(10) { animation-delay: 0.5s; }


/* DARK MODE */
@media (prefers-color-scheme: dark) {
   :root {
      /* COLOR TOKEN */
      --color-background: #202020;
      --color-background-elevated: #343434;
      --color-button-background-primary: #FBFBFB;
      --color-button-background-primary-hover: #DEDEDE;
      --color-button-text-primary: #343434;
      --color-button-background-secondary: #DEDEDE;
      --color-button-text-secondary: #202020;
      --color-divider: #414141;
      --color-text-primary: #FBFBFB;
      --color-text-secondary: #BABABA;
      --color-text-third: #DEDEDE;
      --color-focus: #FBFBFB;
      --color-primary: #FFD363;
   }
}

/* Responsive */
@media (max-width: 768px) {
   body {
      padding: 0;
   }

   .container {
      width: 100%;
      max-width: 1240px;
      margin: 0 auto;
      padding: var(--space-regular);
    
   header {
      margin-bottom: var(--space-x-large)
   }
    
   .grid {
      grid-template-columns: 1fr;
      gap: var(--space-regular);
   }
    
   .card-large,
   .card-tall {
      grid-column: span 1;
      grid-row: span 1;
      min-height: 200px;
   }
    
   .card {
      padding: var(--space-regular);
   }
   
   .card h2 {
      font-size: 24px;
   }
   
   .card p {
      font-size: 24px;
   }
}

@media (max-width: 480px) {
   header h1 {
      font-size: 36px;
   }
   
   .subtitle {
      font-size: 18px;
   }
   
   .card {
      min-height: 160px;
   }
}