/* Site layout on top of tokens.css + bundle.css. Only gd-* classes; no framework. */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--surface-base); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; outline: none; }
h1, h2, h3, h4 { margin: 0; }
img, svg { max-width: 100%; }

/* Skip link */
.gd-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 10; padding: var(--space-2) var(--space-4);
  background: var(--accent); color: var(--on-accent) !important; border-radius: var(--radius-sm); text-decoration: none; }
.gd-skip:focus { top: var(--space-3); }

/* Containers and sections */
.gd-container { max-width: var(--container-page); margin: 0 auto; padding: 0 var(--space-5); }
.gd-container--text { max-width: var(--container-text); }
.gd-container.gd-container--text { max-width: calc(var(--container-text) + 2 * var(--space-5)); }
.gd-section { padding: var(--space-9) 0; }
.gd-section--first { padding-top: var(--space-8); }
.gd-section--sunken { background: var(--surface-sunken); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.gd-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-7); }
.gd-section__title { margin-bottom: var(--space-6); }
.gd-section__title--spaced { margin-top: var(--space-8); }
.gd-section__body { margin-top: var(--space-7); }
.gd-section .display-lg { margin: var(--space-2) 0 var(--space-4); overflow-wrap: anywhere; }
.gd-section .heading-1 { margin: var(--space-2) 0 var(--space-4); }
@media (max-width: 767px) {
  .gd-section { padding: var(--space-8) 0; }
  .gd-section--first { padding-top: var(--space-6); }
  .gd-section .display-lg { font-size: 36px; line-height: 42px; }
  .gd-section .heading-1 { font-size: 30px; line-height: 38px; }
}

.gd-muted { color: var(--ink-muted); }
.gd-lead { color: var(--ink-muted); margin: 0 0 var(--space-6); }
.gd-inline-links { display: flex; flex-wrap: wrap; gap: var(--space-5); }

/* Grids */
.gd-grid { display: grid; gap: var(--space-6); }
.gd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991px) { .gd-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .gd-grid--2, .gd-grid--3 { grid-template-columns: 1fr; } }

/* Header / nav */
.gd-header { border-bottom: 1px solid var(--border-subtle); }
.gd-page-nav { position: relative; max-width: var(--container-page); margin: 0 auto; width: 100%; }
.gd-page-nav__tools { display: flex; align-items: center; gap: var(--space-2); }
.gd-theme-toggle { display: none; }
.js .gd-theme-toggle { display: inline-flex; }
.gd-nav-menu { display: none !important; }
@media (max-width: 767px) {
  .gd-page-nav { flex-wrap: wrap; padding-left: var(--space-3); padding-right: var(--space-3); }
  .gd-nav__brand { padding-left: var(--space-2); padding-right: var(--space-2); }
  .js .gd-nav-menu { display: inline-flex !important; }
  /* Without JS the list stays visible as a wrapped row. */
  html:not(.js) .gd-nav__list { display: flex; flex-wrap: wrap; width: 100%; order: 3; }
  html:not(.js) .gd-page-nav__tools { flex-wrap: wrap; }
  .js .gd-page-nav[data-open] .gd-nav__list {
    display: flex; flex-direction: column; align-items: stretch; position: absolute; z-index: 5;
    top: 100%; left: var(--space-3); right: var(--space-3); padding: var(--space-2);
    background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  }
  .js .gd-nav--over-hero[data-open] .gd-nav__list { background: #111826; border-color: #232d3f; }
  .gd-hero > .gd-nav[data-open] { z-index: 3; }
}

/* Hero (home) */
.gd-hero { min-height: min(720px, 92vh); }
.gd-hero__eyebrow { margin: 0; color: var(--hero-muted); }
.gd-hero__status { display: inline-flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; color: var(--hero-muted); }
.gd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.gd-hero .gd-hero__title { overflow-wrap: anywhere; }
@media (max-width: 639px) { .gd-hero .display-xl { font-size: 40px; line-height: 46px; } }

/* Cards */
.gd-card { height: 100%; }
.gd-card .gd-card__tags { margin-top: var(--space-2); }

/* CV */
.gd-cv-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-8); }
@media (max-width: 991px) { .gd-cv-grid { grid-template-columns: 1fr; } }
.gd-skills { margin: 0; display: grid; gap: var(--space-2); }
.gd-skills dt { color: var(--ink-muted); margin-top: var(--space-3); }
.gd-skills dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gd-edu__school { margin: var(--space-1) 0 0; font-weight: 500; }
.gd-cv-aside p { margin-top: 0; }

/* Case study facts */
.gd-facts { margin: 0 0 var(--space-4); display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--surface-raised);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.gd-facts__row { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-3); }
.gd-facts dt { color: var(--ink-muted); padding-top: 4px; }
.gd-facts dd { margin: 0; }
.gd-facts__stack { margin-bottom: var(--space-7); }
@media (max-width: 575px) { .gd-facts__row { grid-template-columns: 1fr; gap: 0; } }

/* Markdown prose */
.gd-prose { max-width: var(--container-text); }
.gd-prose > * + * { margin-top: var(--space-4); }
.gd-prose h2 { font-family: var(--font-display); font-size: 30px; line-height: 38px; font-weight: 500; margin-top: var(--space-7); }
.gd-prose h3 { font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 500; margin-top: var(--space-6); }
.gd-prose p, .gd-prose ul, .gd-prose ol { margin-bottom: 0; }
.gd-prose ul, .gd-prose ol { padding-left: var(--space-5); }
.gd-prose li + li { margin-top: var(--space-2); }
.gd-prose li::marker { color: var(--accent-text); }
.gd-prose strong { color: var(--ink); font-weight: 600; }
.gd-prose em { color: var(--ink); }
.gd-prose code { font-family: var(--font-mono); font-size: 14px; background: var(--surface-sunken); padding: 1px 6px; border-radius: var(--radius-sm); }
.gd-prose__cta { margin-top: var(--space-7) !important; }
.gd-prose__table { overflow-x: auto; }
.gd-prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 22px; }
.gd-prose th, .gd-prose td { text-align: left; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.gd-prose th { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; }
.gd-prose td:first-child { font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
@media (max-width: 767px) { .gd-prose h2 { font-size: 24px; line-height: 32px; } }

/* Contact form */
.gd-form { display: flex; flex-direction: column; gap: var(--space-5); max-width: 560px; }
.gd-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.gd-alert { padding: var(--space-4) var(--space-5); border: 1px solid; border-radius: var(--radius-md); background: var(--surface-raised); margin: 0 0 var(--space-6); }
.gd-alert p { margin: 0; }
.gd-alert p + p { margin-top: var(--space-2); color: var(--ink); }
.gd-alert--success { border-color: var(--success); color: var(--success); }
.gd-alert--danger { border-color: var(--danger); color: var(--danger); }

/* Footer */
.gd-footer__tagline { margin: 0; }

@media (prefers-reduced-motion: reduce) { * { transition-duration: 0ms !important; } }
