/* nlouie.com — static recreation */
:root {
  --ink: #282828;
  --ink-soft: #1e1f21;
  --gray: #999;
  --link-pale: #c0c6cc;
  --mono: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--mono);
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { display: block; }
a { color: inherit; }

/* ---------- splash (index) ---------- */
.splash { display: flex; min-height: 100vh; }
.splash-panel {
  flex: 1 1 50%;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 40px;
}
.splash-name {
  font-size: 20px; color: var(--ink-soft);
  letter-spacing: .12em; margin: 0 0 52px;
}
.splash-links { font-size: 15px; margin: 0; color: var(--link-pale); }
.splash-links a { color: var(--link-pale); text-decoration: underline; text-underline-offset: 3px; }
.splash-links a:hover { color: var(--ink); }
.splash-image { flex: 1 1 50%; }
.splash-image img { width: 100%; height: 100vh; object-fit: cover; }
@media (max-width: 700px) {
  .splash { flex-direction: column-reverse; }
  .splash-image img { height: 55vh; }
  .splash-panel { padding: 60px 24px; }
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: #fff;
  display: flex; align-items: center;
  padding: 26px 40px;
}
.site-nav { display: flex; gap: 26px; font-size: 16px; }
.site-nav a { color: #555; text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.site-nav a.active { color: var(--ink); font-weight: 700; }
.logo {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 22px; font-weight: 700; letter-spacing: .08em;
  color: var(--ink); text-decoration: none;
}
@media (max-width: 700px) {
  .site-header { flex-direction: column; gap: 14px; padding: 20px 16px; }
  .logo { position: static; transform: none; order: -1; }
}

/* ---------- photo masthead ---------- */
.masthead {
  min-height: 72vh;
  display: flex; align-items: center; justify-content: center;
  position: relative; text-align: center;
}
.masthead h1 { font-size: 60px; font-weight: 700; margin: 0 0 26px; color: var(--ink); }
.masthead-sub { font-size: 20px; color: var(--gray); margin: 0; }
.masthead-arrow {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  color: var(--ink); text-decoration: none;
}
@media (max-width: 700px) { .masthead h1 { font-size: 40px; } }

/* ---------- covers grid ---------- */
.covers {
  max-width: 1200px; margin: 0 auto; padding: 0 16px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 4px;
}
.cover { position: relative; display: block; overflow: hidden; }
.cover img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cover-title {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; color: #fff; text-align: center;
  background: rgba(0,0,0,.25); opacity: 0; transition: opacity .25s ease;
  padding: 0 20px;
}
.cover:hover .cover-title { opacity: 1; }
@media (hover: none) {
  /* touch devices: always label the covers */
  .cover-title {
    opacity: 1; align-items: flex-end; justify-content: flex-start;
    padding: 0 14px 12px;
    background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 40%);
    font-size: 20px;
  }
}
@media (max-width: 700px) { .covers { grid-template-columns: 1fr; } }

/* ---------- content pages ---------- */
.content { max-width: 1200px; margin: 0 auto; padding: 64px 16px 0; }
.page-title {
  font-size: 30px; font-weight: 700; text-align: center;
  margin: 0 0 64px; color: var(--ink);
}

/* ---------- gallery ---------- */
.gallery .module { margin-bottom: 24px; }
.gallery .row { display: flex; gap: 8px; margin-bottom: 8px; }
.gallery .row:last-child { margin-bottom: 0; }
.gallery .cell { flex-basis: 0; min-width: 0; }
.gallery .cell img { width: 100%; height: auto; }
.gallery .row-top { align-items: flex-start; }
.gallery .row-top .cell { flex: 0 0 calc(50% - 4px); }
@media (max-width: 700px) {
  .gallery .row { flex-direction: column; gap: 8px; }
  .gallery .cell { flex-grow: 0 !important; }
  .gallery .row-top .cell { flex-basis: auto; }
}

/* ---------- contact ---------- */
.contact-email { text-align: center; font-size: 18px; margin: 0 0 40px; }
.contact-email a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- legal ---------- */
.legal { font-size: 15px; line-height: 1.75; padding-bottom: 24px; }
.legal h2 { font-size: 16px; font-weight: 700; margin: 34px 0 10px; }
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }

/* ---------- year prev/next nav ---------- */
.year-nav {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px; padding: 56px 0 8px; font-size: 16px;
}
.year-nav a { color: var(--ink); text-decoration: none; }
.year-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.year-nav .nav-up { color: var(--gray); margin: 0 auto; }
.year-nav .nav-prev:first-child + .nav-up { margin-left: auto; }

/* ---------- short legal ---------- */
.legal-short { max-width: 640px; margin: 0 auto; font-size: 16px; }

/* ---------- footer ---------- */
.site-footer {
  text-align: center; padding: 72px 0 40px;
  font-size: 15px; color: var(--gray);
}
.site-footer a { color: var(--gray); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--ink); }