/* Basic reset and typography */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #1f2937; /* gray-800 */
  background: #f8fafc; /* gray-50 */
  line-height: 1.55;
}

.container { width: min(1100px, 92vw); margin: 0 auto; }

/* Navigation */
.site-nav { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.site-nav .inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem; }
.brand { font-weight: 700; font-size: 1.25rem; letter-spacing: .02em; }
.brand small { color: #9ca3af; font-weight: 400; font-size: .9rem; margin-left: .35rem; }
.menu { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; font-weight: 500; font-size: .95rem; }
.menu a { color: #374151; text-decoration: none; }
.menu a:hover { color: #1d4ed8; }

/* Intro video */
.intro-video { background: #000; }
.intro-video .pad { padding: 1.5rem 1rem; }
.intro-video video { width: 100%; height: auto; display: block; }
.notice { margin-top: .5rem; font-size: .9rem; color: #d1d5db; }
.btn { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem; border-radius: .35rem; border: 1px solid #111; background: #fff; color: #111; cursor: pointer; }
.btn:hover { background: #f3f4f6; }

/* Hero (text) */
.hero { background: #0f172a; color: #fff; padding: 6rem 0; text-align: center; }
.hero h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 1rem; font-weight: 800; letter-spacing: .01em; }
.hero p { max-width: 52ch; margin: 0 auto 2rem; color: #cbd5e1; font-size: 1.125rem; }
.actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.button-primary { background: #2563eb; color: #fff; border: none; padding: .8rem 1rem; border-radius: .5rem; font-weight: 600; text-decoration: none; }
.button-primary:hover { background: #1d4ed8; }
.button-ghost { background: transparent; color: #fff; border: 1px solid #fff; padding: .8rem 1rem; border-radius: .5rem; font-weight: 600; text-decoration: none; }
.button-ghost:hover { background: #fff; color: #0f172a; }

/* Sections */
.section { padding: 4rem 0; }
.section h3 { font-size: 2rem; margin: 0 0 1.5rem; font-weight: 800; color: #111827; text-align: center; }

/* Grids */
.grid-2 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* Cards */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem; padding: 1rem; transition: box-shadow .2s ease;
        box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.card h4 { margin: 0 0 .25rem; font-size: 1.1rem; font-weight: 700; }
.card .meta { color: #6b7280; font-size: .9rem; margin: 0 0 .5rem; }
.card p { margin: 0; color: #374151; }

/* Book highlight */
.book { display: grid; grid-template-columns: 1fr; background: #1e3a8a; color: #fff; border-radius: 1rem; overflow: hidden; }
@media (min-width: 768px) { .book { grid-template-columns: 1fr 2fr; } }
.book-aside { background: #1d4ed8; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.book-aside .placeholder { width: 8rem; height: 12rem; background: #1e40af; border: 2px solid #3b82f6; margin: 0 auto 1rem; }
.book-main { padding: 2rem; }
.book-main h3 { margin: 0 0 .25rem; color: #fff; }
.book-main p { color: #bfdbfe; }
.book-quote { background: #1d4ed8; padding: 1rem; border-radius: .5rem; margin-top: 1rem; font-style: italic; color: #e0e7ff; }

/* Footer */
.site-footer { background: #0f172a; color: #9ca3af; text-align: center; padding: 3rem 1rem; }
.site-footer p { margin: .25rem 0; }

/* Bio section balance */
#bio .grid-2 { align-items: center; gap: 1em; }
#bio .grid-2 > div:first-child { display: flex; justify-content: flex-end; }
#bio img { width: auto !important; max-width: 100%; max-height: 18rem; display: block; margin: 0; border-radius: .5rem; border: 1px solid #e5e7eb; }
@media (min-width: 768px) {
  /* Make the image column size to its content so the gap is minimal */
  #bio .grid-2 { grid-template-columns: auto 1fr; }
}
@media (max-width: 767px) {
  #bio img { max-height: 14rem; }
}

/* Gallery media-only grid */
#gallery .media-only { padding: 0; border: none; box-shadow: none; background: transparent; border-radius: .5rem; overflow: hidden; }
#gallery .media-only .media { width: 100%; height: auto; display: block; }
#gallery .grid-3 { gap: 1.25rem; }