/* ============================================
   COLORS & FONTS — change these to restyle
   the whole site in one place.
   Black / white / gray only, all one font.
   ============================================ */
:root {
  --bg: #ffffff;
  --text: #111111;
  --muted: #666666;
  --line: #cccccc;
  --link: #000000;

  --font: "Libre Baskerville", Georgia, serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
}

/* ============================================
   LAYOUT — single centered panel
   ============================================ */
.panel {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

/* ============================================
   HEADER — name, top left
   ============================================ */
.hero {
  text-align: left;
  margin-bottom: 3rem;
}

.hero h1 {
  font-size: 1.6rem;
  margin: 0 0 0.35rem;
}

.tagline {
  color: var(--muted);
  margin: 0;
}

section,
footer {
  margin-bottom: 1.5rem;
}

.gallery {
  margin-bottom: 0.75rem;
}

.bio {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* ============================================
   GALLERY — scrollable row, ~5 visible at once
   ============================================ */
.gallery-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  /* nicer scrollbar on supporting browsers, harmless elsewhere */
  scrollbar-width: thin;
}

.gallery-item {
  flex: 0 0 calc((100% - 4rem) / 5); /* 5 items visible, 4 gaps of 1rem */
  min-width: 110px;
  overflow: hidden;
  text-align: center;
}

.gallery-item img,
.gallery-item video {
  width: 100%;
  height: 110px;
  object-fit: cover;
  background: #000;
  display: block;
}

/* Video embeds (e.g. YouTube) keep their own aspect ratio instead */
.gallery-item .video-wrap {
  position: relative;
  width: 100%;
  padding-top: 100%; /* square-ish, matches image tiles */
  background: #000;
}

.gallery-item .video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.caption {
  margin: 0;
  padding: 0.5rem;
  color: var(--muted);
  font-size: 0.8rem;
}

/* ============================================
   BIO
   ============================================ */
.bio p {
  margin: 0;
}

/* ============================================
   CONTACT (footer)
   ============================================ */
.links {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.links a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--text);
}

.links a:hover {
  color: var(--muted);
  border-bottom-color: var(--muted);
}

/* ============================================
   SMALL SCREENS — show fewer gallery items at once
   ============================================ */
@media (max-width: 600px) {
  .gallery-item {
    flex: 0 0 calc((100% - 1rem) / 2); /* 2 items visible */
  }
}