:root {
  --paper: #FFC5D3;
  --ink: #28262d;
  --muted: #6d6268;
  --accent: #6e3759;
  --gutter: 16px;
  --gap: 16px;
  --columns: 24;
  --contact-column: 18;
  --home-width: 408px;
  --thumb-height: 380px;
  --menu-offset: 40px;
  --menu-top: max(calc(50svh + var(--menu-offset) - 10px - .675em), calc(var(--thumb-height) + 120px), calc(30px + 32em));
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Baskerville', 'Times New Roman', serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: clamp(12px, .694vw, 18px)/1.35 var(--sans); letter-spacing: .02em; min-height: 100svh; }
a { color: inherit; text-decoration: none; }
a:hover, a[aria-current] { color: var(--accent); }
a:focus-visible, .gallery:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img, video { display: block; width: 100%; height: 100%; object-fit: cover; }
h1, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }
.sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; top: 10px; left: var(--gutter); z-index: 5; background: var(--paper); padding: 8px; }

.header, .footer, .information, .archive-intro, .listing, .detail-body {
  width: 100%;
  max-width: 2560px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.header, .footer, .information, .archive-intro, .listing {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gap);
}
.header {
  position: fixed;
  z-index: 3;
  inset: var(--menu-top) 0 auto;
  align-items: center;
  pointer-events: none;
}
.header nav { display: contents; }
.header nav a { grid-column: span 2; padding-block: 10px; justify-self: start; pointer-events: auto; white-space: nowrap; }
.header .contact { grid-column: var(--contact-column) / -1; justify-content: space-between; }
.header .contact a { pointer-events: auto; }
.contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--gap); }
.header nav a::before {
  content: '[  ]';
  display: inline-block;
  width: 1.3em;
  margin-right: 4px;
  text-align: center;
  white-space: pre;
}
.header nav a:is(:hover, :focus-visible, [aria-current])::before { content: '[·]'; }
.footer {
  position: fixed;
  z-index: 2;
  inset: auto 0 0;
  padding-block: 12px 16px;
  align-items: baseline;
  pointer-events: none;
}
.footer > a { grid-column: 1 / span 5; justify-self: start; font: 12px/1 var(--serif); text-transform: uppercase; letter-spacing: .13em; pointer-events: auto; }
.footer > span { grid-column: calc(var(--contact-column) + 2) / -1; color: #000; text-align: right; }
.language-switch { grid-column: var(--contact-column) / span 2; white-space: nowrap; }
.language-switch a { pointer-events: auto; }
.language-switch [aria-current] { color: var(--accent); }
.index { color: var(--muted); }
.index { font-variant-numeric: tabular-nums; }

.media { position: relative; overflow: hidden; display: grid; place-items: center; color: var(--ink); }
.media.wide { aspect-ratio: 5 / 4; }
.media.portrait { aspect-ratio: 4 / 5; }
.media.clay { background: #cda79a; }
.media.olive { background: #b9bd9f; }
.media.blue { background: #acbac7; }
.media.plum { background: #c1afbf; }
.media.sand { background: #dac7a9; }
.placeholder { padding: 6px; text-align: center; font: 10px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; }

.sequence {
  padding-block: max(0px, calc(50svh - var(--home-width) * .625)) 52px;
}
.sequence, .sequence-cycle { display: grid; justify-content: center; gap: 4px; }
.sequence.is-looping { overflow-anchor: none; }
.slide { width: min(var(--home-width), calc(100vw - 32px)); position: relative; }
.slide > a:first-child { display: block; }
.slide .media { transform: scale(.95); }
@media (prefers-reduced-motion: no-preference) {
  .slide .media { transition: transform .24s ease-out; }
  .slide.is-centered { z-index: 1; }
  .slide.is-centered .media { transform: scale(1.035); }
}
.slide-link {
  position: absolute;
  left: 100%;
  top: 50%;
  padding-left: 12px;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.slide:hover .slide-link, .slide:focus-within .slide-link { opacity: 1; }

.gallery {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  padding: 16px 16px 8px;
  scrollbar-width: thin;
}
.archive .gallery { scrollbar-width: none; overflow-anchor: none; }
.archive .gallery::-webkit-scrollbar { display: none; }
.archive-intro {
  margin-block: 12px 96px;
}
.gallery li { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.gallery .media { height: var(--thumb-height); }
.gallery .caption { padding-inline: 2px; }
.gallery .placeholder { font-size: 8px; }
.bio p, .archive-copy p, .listing { line-height: 1.1; }
.listing { padding-block: 14px 96px; }
.listing > p { grid-column: 1 / span 4; }
.rows { grid-column: 5 / -1; }
.rows li { display: grid; grid-template-columns: 2fr 3fr; align-items: baseline; column-gap: var(--gap); }

.information { padding-top: calc(var(--menu-top) + 26px + 1.35em); padding-bottom: 80px; }
.info { display: flex; flex-direction: column; }
.info main { flex: 1; }
.info .header { position: absolute; }
.info .footer { position: static; }
.bio, .archive-copy { grid-column: 1 / span 7; }
.bio p:first-of-type { text-indent: 24px; }
.detail-top { display: contents; }
.detail-close {
  display: inline-flex;
  position: fixed;
  z-index: 4;
  top: 8px;
  right: var(--gutter);
  align-items: center;
  min-height: 36px;
  padding-inline: 8px;
  background: var(--paper);
}
.detail-close:focus-visible { outline: none; text-decoration: underline; }
.detail-body { padding-block: 48px 104px; }
.detail-heading { margin-bottom: var(--gap); }
.detail-heading h1 { font: clamp(24px, 3.5vw, 48px)/1.05 var(--serif); margin-block: 5px; }
.detail-body .media { max-width: min(100%, 720px); margin-inline: auto; }
.detail-body .portrait { max-width: min(100%, 408px); }
.detail-copy { max-width: 55ch; margin: 16px auto; }
.detail-links {
  position: fixed;
  z-index: 3;
  inset: auto 0 56px;
  max-width: 2560px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  pointer-events: none;
}
.detail-links a {
  padding: 8px 0;
  background: var(--paper);
  pointer-events: auto;
}

@media (max-width: 1280px) {
  :root { --contact-column: 16; }
  .rows { grid-column: 7 / -1; }
  .header nav a:not(:first-child) { grid-column: span 3; }
  .bio, .archive-copy { grid-column: 1 / span 8; }
}
@media (width > 880px) and (height < 700px) {
  body { min-height: max(100svh, calc(var(--menu-top) + 105px)); }
  .header { position: absolute; }
}
@media (max-width: 880px) {
  :root {
    --mobile-footer-height: 68px;
    --mobile-header-height: 84px;
    --mobile-nav-height: calc(var(--mobile-footer-height) + var(--mobile-header-height));
    --mobile-detail-links-height: 36px;
  }
  html { scroll-padding-bottom: calc(var(--mobile-nav-height) + var(--gap)); }
  html:has(.detail) { scroll-padding: 44px 0 calc(var(--mobile-nav-height) + var(--mobile-detail-links-height) + var(--gap)); }
  .header { top: auto; bottom: var(--mobile-footer-height); display: flex; background: var(--paper); }
  .header nav { display: flex; column-gap: clamp(6px, 3vw, 24px); flex-wrap: wrap; }
  .header { flex-wrap: wrap; }
  .header nav a { padding-block: 8px; }
  .header .contact { width: 100%; min-width: 0; padding-bottom: 8px; overflow-wrap: anywhere; }
  .listing { padding-bottom: calc(var(--mobile-nav-height) + var(--gap)); }
  .rows li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); overflow-wrap: anywhere; }
  .footer { grid-template-columns: auto minmax(0, 1fr); row-gap: 4px; background: var(--paper); }
  .footer > a { grid-area: 2 / 1; }
  .footer > span { grid-area: 2 / 2; overflow-wrap: anywhere; }
  .language-switch { grid-area: 1 / 1; }
  .sequence { padding-bottom: calc(var(--mobile-nav-height) + var(--gap)); }
  .slide-link { display: none; }
  .bio, .archive-copy { grid-column: 1 / span 12; }
  .archive-intro { margin-bottom: calc(var(--mobile-nav-height) + var(--gap)); }
  .information { padding-top: calc(49.5svh + 24px); padding-bottom: calc(var(--mobile-nav-height) + var(--gap)); }
  .info main { order: 1; }
  .info .header { position: static; order: 2; }
  .info .footer { order: 3; }
  .info .information { padding-bottom: var(--gap); }
  .detail-top {
    position: fixed;
    z-index: 4;
    inset: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    padding-inline: var(--gutter);
    background: var(--paper);
    pointer-events: none;
  }
  .detail-close { position: static; min-height: 44px; padding-inline: 0; pointer-events: auto; }
  .detail-body { padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-detail-links-height) + var(--gap)); }
  .detail-heading { overflow-wrap: anywhere; }
  .detail-links { bottom: var(--mobile-nav-height); background: var(--paper); }
}
@media (max-width: 768px) {
  :root { --home-width: 308px; }
}
@media (max-width: 650px) { :root { --home-width: 260px; } }
@media (max-width: 550px) {
  :root { --columns: 6; }
  .footer { font-size: 10px; padding-block: 8px; }
  .footer > a { font-size: 10px; }
  .listing > p, .rows, .bio, .archive-copy { grid-column: 1 / -1; }
  .rows { margin-top: 12px; }
}