/* --------------------------------------------------------- */
/* GD LAYOUT — MS0 ARCHITECTURE                              */
/* Header, footer, nav, spacing, global resonance            */
/* --------------------------------------------------------- */


/* --------------------------------------------- */
/* HEADER — structural minimalism                */
/* --------------------------------------------- */

.gd-header {
  background: var(--bone);
  padding-top: var(--space-s);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid color-mix(in srgb, var(--graphite) 8%, transparent);
}

.gd-header .gd-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* Logo */
.gd-logo {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--graphite);
}

.gd-logo:hover {
  opacity: 0.75;
}


/* --------------------------------------------- */
/* NAVIGATION                                    */
/* --------------------------------------------- */

.gd-nav {
  display: flex;
  gap: var(--space-m);
}

.gd-nav a {
  font-size: 16px;
  color: var(--graphite);
  text-decoration: none;
  position: relative;
}

.gd-nav a:hover {
  opacity: 0.65;
}


/* --------------------------------------------- */
/* FOOTER                                        */
/* --------------------------------------------- */

.gd-footer {
  background: var(--bone);
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
  text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--graphite) 8%, transparent);
}

.gd-footer p {
  margin-bottom: var(--space-s);
  font-size: 14px;
  color: var(--graphite);
}

.gd-footer-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-m);
}

.gd-footer-nav a {
  font-size: 14px;
  color: var(--graphite);
  text-decoration: none;
}

.gd-footer-nav a:hover {
  opacity: 0.65;
}


/* --------------------------------------------- */
/* GLOBAL SECTIONS — vertical spacing            */
/* --------------------------------------------- */

.gd-section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.gd-section-small {
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
}


/* --------------------------------------------- */
/* GLOBAL GRID SYNC — resonance alignment        */
/* --------------------------------------------- */

.gd-layout-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-m);
}


/* --------------------------------------------- */
/* RESPONSIVE ADJUSTMENTS                        */
/* --------------------------------------------- */

@media (max-width: 680px) {
  .gd-nav {
    gap: var(--space-s);
  }
  
  .gd-footer-nav {
    flex-wrap: wrap;
    gap: var(--space-s);
  }
}