/* Bare-bones layout only. No design direction yet — build this out later. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  background: #fff;
  color: #111;
}

img, video { display: block; max-width: 100%; }

a { color: inherit; }

.nav {
  position: sticky;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 16px;
  background: #fff;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
}

.section {
  padding: 48px 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.resume {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin-top: 32px;
}

h1 { font-size: 2rem; line-height: 1.2; }
h2, h3 { margin: 0 0 8px; }
.resume h2, .project h3 { font-size: 12px; letter-spacing: .05em; }

.work-label { padding: 0 16px; max-width: 1200px; margin: 0 auto; font-size: 14px; }

.project {
  display: grid;
  gap: 16px;
  border-top: 1px solid #ddd;
}

.placeholder {
  display: grid;
  place-items: center;
  background: #eee;
  color: #888;
  font-size: 14px;
}
.photo { aspect-ratio: 4 / 5; }
.project-image { aspect-ratio: 16 / 9; }

.footer { border-top: 1px solid #ddd; }

/* Password gate: shown until unlocked, then the site takes over */
html:not(.is-unlocked) .site { display: none; }
html.is-unlocked .gate { display: none; }

.gate {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
}
.gate h1 { margin: 0; }
.gate p { margin: 0; color: #666; }
.gate-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.gate-form input, .gate-form button { font: inherit; padding: 8px 12px; }
.gate-error { color: #b00020 !important; }