:root {
  --font-sans: Helvetica, Arial, sans-serif;
  --font-mono: 'Courier New', monospace;
  --text-nav: 12px;
  --text-body: 12px;
  --text-caption: 12px;
  --leading-body: 1.55;
  --leading-compact: 1.5;
  --weight-regular: 400;
  --weight-strong: 700;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 36px;
  --space-image: 60px;
  --color-text: #111;
  --color-muted: #777;
  --color-selected: #aaa;
}
* { box-sizing: border-box; }
html { background: #fff; color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-body); }
body { margin: 0; padding: 32px; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
a:hover, button:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--color-text); outline-offset: 5px; }
h1, h2, h3 { font-size: inherit; font-weight: var(--weight-regular); line-height: inherit; margin: 0 0 var(--space-md); }
p { margin: 0 0 var(--space-lg); }
header { position: fixed; top: 36px; left: 32px; z-index: 2; display: flex; align-items: baseline; gap: 12px; font-size: var(--text-nav); font-weight: var(--weight-strong); line-height: var(--leading-compact); }
nav, .nav-group, .submenu { display: flex; align-items: baseline; gap: 9px; }
.submenu { font-weight: var(--weight-strong); }
.selected { color: var(--color-selected); }
main { min-height: calc(100dvh - 64px); }
.gallery { margin-left: 58%; width: 42%; }
figure { margin: 0 0 90px; }
figure img { width: 100%; height: auto; display: block; }
figure button { display: block; width: 100%; cursor: zoom-in; }
figcaption { font-size: var(--text-caption); line-height: var(--leading-compact); margin-top: var(--space-xs); }
.homepage figure { margin-bottom: 0; }
.editorial { padding-top: 110px; max-width: 960px; }
.editorial img { width: 100%; height: auto; display: block; margin-bottom: var(--space-image); }
.book { width: 42%; max-width: 580px; margin-left: 58%; padding-top: 85px; }
.book-image { display: block; width: 100%; height: auto; margin-bottom: var(--space-xl); }
.book h2 { margin-top: var(--space-xl); }
.book-details { list-style: none; padding: 0; margin: 0 0 var(--space-xl); }
.notice { color: var(--color-muted); }
.about { width: 42%; margin-left: 58%; padding-top: 0; padding-bottom: var(--space-image); }
.about section { margin-bottom: var(--space-xl); }
.about ul { list-style: none; margin: 0 0 var(--space-xl); padding: 0; }
.about li { padding-left: 48px; position: relative; margin: 0 0 var(--space-xs); }
.about .year { position: absolute; left: 0; }
.about a { text-decoration: underline; text-underline-offset: 2px; }
.about .secondary > img { width: 50px; height: auto; margin: 10px 0 0; }
.film-player { width: 100%; aspect-ratio: 3/2; margin-bottom: var(--space-image); }
.film-player iframe { display: block; width: 100%; height: 100%; border: 0; }
dialog { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; margin: 0; padding: 5.5vh 32px 24px; background: #fff; }
dialog::backdrop { background: #fff; }
.lightbox-image { position: relative; height: calc(100% - 54px); display: flex; justify-content: center; align-items: center; }
.lightbox-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.previous, .next { position: absolute; top: 0; bottom: 0; width: 50%; }
.previous { left: 0; cursor: w-resize; }
.next { right: 0; cursor: e-resize; }
footer { display: grid; grid-template-columns: 1fr 3fr 1fr; align-items: end; height: 54px; font-family: var(--font-mono); font-size: var(--text-caption); line-height: var(--leading-compact); color: #000; }
#caption { text-align: center; }
#close { justify-self: end; }
body:has(dialog[open]) { overflow: hidden; }
@media (min-width: 768px) {
  header:has(.submenu) { background: rgba(255,255,255,.96); max-width: calc(100vw - 64px); flex-wrap: wrap; }
}
@media (max-width: 767px) {
  body { padding: 18px 16px; }
  header { position: relative; top: auto; left: auto; display: grid; grid-template-columns: 30% 1fr; gap: 0; line-height: 2; }
  nav { display: block; position: relative; }
  .nav-group { display: grid; grid-template-columns: 48% 1fr; align-items: start; gap: 0; }
  .nav-group > button { text-align: left; }
  .submenu { position: absolute; top: 0; left: 48%; right: 0; flex-direction: column; align-items: start; gap: 0; }
  .submenu a { line-height: 1.35; padding: 4px 0; }
  .gallery { margin: 74px auto 0; width: 74%; }
  figure { margin-bottom: 100px; }
  .editorial { padding-top: 74px; }
  .book { margin: 74px auto 0; padding: 0; width: 74%; }
  .editorial img, .film-player { margin-bottom: var(--space-xl); }
  .about { width: 100%; margin: 74px 0 0; }
  .about li { padding-left: 42px; }
  dialog { padding: 60px 16px 20px; }
  .lightbox-image { height: calc(100% - 80px); }
  footer { height: 80px; grid-template-columns: 1fr 1fr; }
  #caption { grid-row: 2; grid-column: 1/3; align-self: start; margin-top: 10px; }
  #close { grid-column: 2; grid-row: 1; }
}