/* Loaded only by the series directory and series explicitly using layout: axis. */
.portfolio-frame {
  width:100%;
  max-width:none;
  margin:0;
  padding-inline:clamp(24px,3.2vw,56px);
  padding-top:calc(var(--nav-h) + 36px);
}

/* A fixed catalogue number, followed by the series and its photographic index. */
.directory-intro { margin-bottom:64px; }
.directory-intro .eyebrow { font-weight:400; }
.directory-intro__text {
  max-width:42em;
  font:400 clamp(15px,1.56vw,22.8px)/1.65 var(--serif);
  color:var(--ink-2);
  letter-spacing:0;
}
.directory-list { list-style:none; margin:0; padding:0; }
.directory-entry {
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  align-items:baseline;
  padding-bottom:120px;
  opacity:1;
  transition:opacity 250ms ease;
}
.directory-entry:last-child { padding-bottom:0; }
.directory-number {
  color:var(--ink-3);
  font:400 11px/1.6 var(--sans);
  font-variant-numeric:tabular-nums;
  letter-spacing:.025em;
}
.directory-content { min-width:0; }
.directory-heading-row {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 16px;
}
.directory-heading {
  min-width:0;
  color:var(--ink);
  font:400 clamp(25px,2.6vw,38px)/1.5 var(--serif);
  letter-spacing:0;
  overflow-wrap:break-word;
}
.directory-heading a,.directory-heading a:hover { color:inherit; }
.directory-meta {
  color:var(--ink-3);
  font:400 11px/1.6 var(--sans);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.directory-description {
  max-width:48em;
  margin:12px 0 24px;
  color:var(--ink-2);
  font:400 13px/1.8 var(--sans);
}
.directory-thumbnails { display:flex; align-items:center; gap:12px; min-width:0; }
.directory-strip {
  display:flex;
  align-items:flex-start;
  gap:8px;
  width:100%;
  max-width:calc(180px * var(--r-sum) + 8px * (var(--n) - 1));
  min-width:0;
}
.directory-strip > a { flex:var(--r) 1 0%; min-width:0; }
.directory-strip img {
  display:block;
  width:100%;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  filter:none;
  transform:none;
}
.directory-more { flex:none; color:var(--ink-3); font:400 12px/1.6 var(--sans); }
.directory-journal {
  display:inline-block;
  margin-top:120px;
  margin-left:56px;
  color:var(--ink-2);
  font:400 12px/1.8 var(--sans);
  letter-spacing:.015em;
}
.directory-journal:hover { color:var(--ink); }
.directory-list:has(.directory-entry:focus-within) > .directory-entry:not(:focus-within) { opacity:.35; }
@media (hover:hover) {
  .directory-list:has(> .directory-entry:hover):not(:focus-within) > .directory-entry:not(:hover) { opacity:.35; }
}

/* One shared viewing axis; a pair is one photographic block. */
html:has(.series-page--axis) { scroll-padding-top:0; }
.series-page--axis .portfolio-sequence--axis {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:120px;
}
.series-page--axis .portfolio-sequence--axis .shot {
  --plate-height:80svh;
  width:min(100%,calc(80svh * var(--r)));
  max-width:100%;
  min-width:0;
  align-self:center;
  margin:0;
  padding:0;
  scroll-margin-top:var(--nav-h);
}
.series-page--axis .portfolio-sequence--axis .shot img {
  display:block;
  width:100%;
  height:auto;
  max-height:80svh;
  object-fit:contain;
  filter:none;
  transform:none;
}
.series-page--axis .portfolio-sequence--axis .portfolio-diptych {
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:16px;
  width:min(100%,calc(80svh * var(--r-sum) + 16px));
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  align-self:center;
}
.series-page--axis .portfolio-sequence--axis .portfolio-diptych .shot {
  flex:var(--r) 1 0%;
  align-self:flex-start;
  width:auto;
  max-width:none;
  min-width:0;
  margin:0;
}
.series-page--axis .portfolio-sequence--axis .shot__cap {
  display:block;
  margin-top:14px;
  text-align:left;
}
.series-page--axis .portfolio-sequence--axis .shot__cap .m { white-space:normal; }
.series-page--axis .series-navigation {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  margin-top:120px;
}
.series-page--axis .series-navigation .text-link { border:0; }
.series-page--axis .series-next {
  display:flex;
  align-items:center;
  gap:20px;
  min-width:0;
  max-width:100%;
  color:var(--ink-2);
  font:400 12px/1.8 var(--sans);
}
.series-page--axis .series-next:hover { color:var(--ink); }
.series-page--axis .series-next img {
  flex:0 0 auto;
  width:96px;
  max-height:96px;
  height:auto;
  object-fit:contain;
}
.series-page--axis .series-next span { min-width:0; overflow-wrap:break-word; }

@media (max-width:760px) {
  .portfolio-frame { padding-inline:20px; padding-top:calc(var(--nav-h) + 28px); }
  .directory-intro { margin-bottom:48px; }
  .directory-intro__text { font-size:15px; }
  .directory-entry { grid-template-columns:36px minmax(0,1fr); }
  .directory-heading-row { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
  .directory-heading { font-size:25px; }
  .directory-description { margin-top:14px; font-size:12px; }
  .directory-journal { margin-left:36px; }
}
@media (max-width:600px) {
  .series-page--axis .portfolio-sequence--axis { gap:64px; }
  .series-page--axis .series-navigation { margin-top:64px; align-items:flex-start; }
  .series-page--axis .series-next { gap:16px; }
  .series-page--axis .series-next img { width:80px; max-height:80px; }
}
@media (prefers-reduced-motion:reduce) {
  .directory-entry { transition:none; }
}