/* CSS Reset */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  background-color: var(--md-sys-color-surface-container);
  min-height: 100%;
  font-family: Arial, sans-serif;
  font-size: var(--md-sys-typescale-body-medium, 14px);
  line-height: 1.43;
  /* 20px / 14px */
}

img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
  border: 0;
}

a {
  background-color: transparent;
  text-decoration: none;
}

a:active,
a:hover {
  outline: 0;
}

/* CSS Variables */
/* Design system tokens (colors, spacing, motion, state) are loaded from m3-design-v2 via CDN */
/* Map local token names to design system tokens for backward compatibility */
:root {
  /* Spacing tokens - mapped from design system */
  --md-sys-spacing-xs: var(--spacing-xs);      /* 4px */
  --md-sys-spacing-sm: var(--spacing-sm);      /* 8px */
  --md-sys-spacing-md: var(--spacing-md);      /* 16px */
  --md-sys-spacing-lg: var(--spacing-lg);      /* 24px */
  --md-sys-spacing-xl: var(--spacing-xl);      /* 32px */
  --md-sys-spacing-xxl: var(--spacing-2xl);    /* 48px */

  /* Typography tokens - kept for backward compatibility */
  /* Note: Design system provides more comprehensive typography tokens */
  --md-sys-typescale-body-medium: 14px;
  --md-sys-typescale-body-large: 16px;
  --md-sys-typescale-title-medium: 20px;
  --md-sys-typescale-title-large: 24px;
}

/* Page Container - Matches Webflow main-page-container */
.page-container {
  display: flex;
  min-height: 100svh;
  padding-top: 32px;
  padding-right: 24px;
  padding-bottom: 32px;
  padding-left: 24px;
  flex-direction: column;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  background-image: linear-gradient(303deg, hsla(0, 0.00%, 0.00%, 0.00) 52%, hsla(49.999999999999915, 19.59%, 92.54%, 1.00)),
    linear-gradient(180deg, #e4e2d8, hsla(49.999999999999915, 9.27%, 74.28%, 1.00));
  font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
}

/* Site Header - Matches Webflow Section Head Group */
.site-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-grow: 0;
}

/* Site Logo - Matches Webflow wy logo */
.site-logo {
  height: 40px;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

/* Site Title - Matches Webflow Text Block */
.site-title {
  font-family: Bodoni Moda, serif;
  color: hsla(0, 1.35%, 15.13%, 1.00);
  font-size: 0.85rem;
  line-height: 1.4em;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Cards Container - Matches Webflow main */
.cards-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
}

/* Project Grid - Container for dynamically rendered cards */
.project-grid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
}

/* Responsive Breakpoints */
/* Component-level responsive styles are handled in component CSS files */

/* Medium breakpoint (Tablet, max-width: 991px) */
@media screen and (max-width: 991px) {
  .site-header {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 0%;
  }

  .cards-container {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    grid-column-gap: 0.75em;
    grid-row-gap: 0.75em;
  }
}

/* Small breakpoint (Mobile Landscape, max-width: 767px) */
@media screen and (max-width: 767px) {
  .site-logo {
    height: 28px;
  }

  .page-container {
    justify-content: flex-start;
  }

  .site-header {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-grow: 0;
    align-self: stretch;
  }

  .project-grid {
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .cards-container {
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
  }
}

/* Tiny breakpoint (Mobile Portrait, max-width: 478px) */
@media screen and (max-width: 478px) {
  .site-header {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    line-height: 1.3em;
    text-align: center;
    flex-grow: 0;
    justify-content: start;
  }

  .page-container {
    padding: 16px;
    justify-content: flex-start;
  }

  .project-grid {
    row-gap: 8px;
  }

  .cards-container {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}