:root { --gutter: 24px; --font: Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font: 13px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------- gallery ---------- */
body.gallery { background: #000; color: #fff; overflow: hidden; }
.stage { position: fixed; inset: 0; }
.photo { width: 100%; height: 100%; display: block; object-fit: contain; transition: opacity .35s ease; }
.photo.cover { object-fit: cover; }
.photo.fading { opacity: 0; }
.hit { position: absolute; top: 0; bottom: 0; }
.hit.prev { left: 0; width: 33%; cursor: w-resize; }
.hit.next { right: 0; width: 67%; cursor: e-resize; }

.nav, .info { position: fixed; bottom: var(--gutter); z-index: 2; text-shadow: 0 0 12px rgba(0,0,0,.6); }
.nav { left: var(--gutter); display: flex; align-items: baseline; gap: clamp(16px, 1.6vw, 28px); flex-wrap: nowrap; white-space: nowrap; }
.name { font-size: clamp(19px, 1.7vw, 28px); font-weight: 700; letter-spacing: .08em; }
.years { list-style: none; display: flex; flex-wrap: nowrap; gap: clamp(10px, 1.15vw, 20px); font-size: clamp(11px, 1vw, 16px); letter-spacing: .07em; }
.years > li { position: relative; }
.years > li > button, .years > li > a { opacity: .75; padding: 2px 0; }
.years > li.on > button, .years > li.on > a, .years > li > :hover { opacity: 1; }
.years > li.on > button, .years > li.on > a { border-bottom: 1px solid currentColor; }

.menu { display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  list-style: none; background: #fff; color: #000; text-shadow: none; padding: 14px 22px; width: max-content;
  max-width: min(320px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; text-align: center;
  text-transform: lowercase; font-size: 12px; line-height: 2.1; box-shadow: 0 6px 30px rgba(0,0,0,.35); }
.menu a:hover, .menu a[aria-current] { text-decoration: underline; }
.years > li.open > .menu { display: block; }
@media (hover: hover) { .years > li:hover > .menu { display: block; }
  .years > li:hover > .menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } }

.info { right: var(--gutter); font-size: clamp(11px, .85vw, 14px); opacity: .7; text-align: right; max-width: 22vw; }
.info .count { margin-left: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- about ---------- */
body.about { background: #fff; color: #000; }
body.about .nav { position: static; padding: var(--gutter); text-shadow: none; }
.about article, article.about { max-width: 720px; padding: 24px var(--gutter) 80px; font-size: 13px; }
article.about p { margin-bottom: 1.2em; }
article.about a { text-decoration: underline; }
body.about .menu { box-shadow: 0 6px 30px rgba(0,0,0,.18); border: 1px solid #ddd; top: calc(100% + 8px); bottom: auto; }

/* below ~1100px the line no longer fits: wrap the years under the name */
@media (max-width: 1100px) {
  .nav { flex-wrap: wrap; white-space: normal; max-width: calc(100vw - 2 * var(--gutter)); gap: 6px 18px; }
  .years { flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
  .name { font-size: 22px; }
  .info { bottom: auto; top: var(--gutter); max-width: 60vw; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .info { bottom: auto; top: var(--gutter); max-width: 70vw; }
  .menu { position: fixed; left: 16px; right: 16px; transform: none; max-width: none; width: auto; bottom: 120px; }
  body.about .menu { top: 110px; bottom: auto; }
}