/* Shared colour palette and base styles. */
:root {
  color-scheme:dark;
  --bg:#171a19;
  --text:#e8e6dd;
  --muted:#adb5ad;
  --sage:#b6c5a6;
  --line:#39413b
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:15px/1.7 system-ui,-apple-system,sans-serif
}

a {
  color:inherit;
  text-underline-offset:5px
}

button,input,select {
  font:inherit
}

a,button,input,select {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--sage);
  outline-offset:5px
}

.wrap {
  width:min(1450px,90%);
  margin:auto
}

.skip {
  position:absolute;
  top:-100px;
  left:20px;
  padding:12px;
  background:var(--bg);
  z-index:5
}

.skip:focus {
  top:10px
}

header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding:26px 0;
  gap:24px
}

.brand {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:25px;
  letter-spacing:-1px;
  line-height:1.15;
  text-decoration:none
}

.brand-mark {
  display:block;
  width:39px;
  height:39px;
  flex-shrink:0
}

.brand-small {
  display:block;
  font-size:9px;
  letter-spacing:4px;
  margin-top:7px
}

nav {
  display:flex;
  gap:30px;
  flex-wrap:wrap
}

nav a {
  font-size:13px;
  text-decoration:none;
  color:var(--muted)
}

nav a:hover,nav a[aria-current] {
  color:var(--text)
}

nav a[aria-current] {
  border-bottom:1px solid var(--sage)
}

/* Page introductions and collection controls. */
.intro {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  align-items:end;
  padding:75px 0 66px
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:10px;
  color:var(--sage);
  margin:0 0 24px
}

h1 {
  font:400 clamp(44px,6.8vw,100px)/1.04 Georgia,serif;
  letter-spacing:-3px;
  margin:0
}

h2 {
  font:400 27px/1.3 Georgia,serif;
  margin:0
}

h3 {
  font-weight:500
}

.intro-note {
  max-width:400px;
  justify-self:end;
  padding-bottom:5px;
  color:var(--muted);
  font-size:16px
}

.intro-note p {
  margin:0
}

.intro-note .edition {
  margin-top:30px;
  text-transform:uppercase;
  font:10px/1.5 system-ui;
  letter-spacing:1.7px;
  color:var(--sage)
}

.edition span {
  padding:0 12px;
  color:var(--line)
}

.toolbar {
  border-top:1px solid var(--line);
  padding:27px 0;
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center
}

.toolbar p {
  font-size:11px;
  color:var(--muted);
  margin:7px 0 0
}

.controls {
  display:flex;
  gap:20px
}

label {
  display:flex;
  flex-direction:column;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1px;
  gap:7px;
  color:var(--muted)
}

input,select {
  border:1px solid var(--line);
  border-radius:0;
  background:#202521;
  color:var(--text);
  padding:10px 12px;
  font-size:12px;
  letter-spacing:0;
  width:200px;
  min-height:42px
}

input::placeholder {
  color:var(--muted)
}

/* Photo columns keep each photograph and caption together. */
.photo-grid {
  columns:3;
  column-gap:25px
}

.photograph {
  margin:0 0 30px;
  break-inside:avoid;
  display:inline-block;
  width:100%;
  vertical-align:top
}

.photo-link {
  display:block;
  position:relative;
  background:#242b25;
  overflow:hidden
}

.photo-link img {
  display:block;
  width:100%;
  height:auto;
  transition:opacity .2s
}

.photo-link:hover img {
  opacity:.85
}

.enlarge {
  position:absolute;
  bottom:12px;
  right:14px;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  background:#171a19c9;
  color:white;
  border-radius:50%;
  opacity:0;
  transition:opacity .2s
}

.photo-link:hover .enlarge,.photo-link:focus-visible .enlarge {
  opacity:1
}

figcaption {
  display:flex;
  justify-content:space-between;
  gap:15px;
  color:var(--muted);
  font-size:10px;
  margin-top:10px
}

figcaption a {
  text-decoration:none;
  white-space:nowrap
}

figcaption a:hover {
  text-decoration:underline
}

/* Album index cards and album detail links. */
.album-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:35px 25px
}

.album-card {
  text-decoration:none
}

.album-card img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:opacity .2s
}

.album-card:hover img {
  opacity:.8
}

.album-card>div {
  padding-top:15px;
  display:flex;
  align-items:baseline;
  gap:10px;
  justify-content:space-between
}

.album-card h2 {
  font-size:23px
}

.album-card span {
  font-size:10px;
  color:var(--muted);
  white-space:nowrap
}

#album-title {
  margin-top:18px
}

#album-source,#back-albums,.collection-source {
  font-size:12px;
  color:var(--sage)
}

.closing {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding:38px 0;
  margin-top:65px;
  gap:25px
}

.closing p {
  font:italic 24px Georgia,serif;
  color:var(--sage);
  margin:0
}

.closing a {
  font-size:11px;
  white-space:nowrap
}

footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  padding:30px 0 40px;
  gap:30px
}

footer strong {
  font-size:12px;
  font-weight:500
}

footer span {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:5px
}

footer nav a {
  font-size:11px
}

/* About page portrait and biography. */
.about-layout {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:80px;
  padding-top:25px
}

.about-layout figure {
  margin:0
}

.about-image {
  width:100%;
  height:auto;
  display:block
}

.about-copy {
  max-width:440px
}

.about-copy p {
  color:var(--muted)
}

.about-copy .eyebrow {
  color:var(--sage)
}

.about-copy h2 {
  font-size:38px
}

.text-link {
  display:inline-block;
  margin-top:15px;
  color:var(--sage)
}

.archive-note {
  margin-top:50px;
  border-top:1px solid var(--line);
  padding-top:20px;
  font-size:12px
}

.archive-note h3 {
  color:var(--text)
}

/* Ensure filtered cards and inactive sections stay hidden. */
[hidden] {
  display:none!important
}

/* Modal photograph viewer and navigation controls. */
dialog {
  width:min(1300px,96vw);
  max-width:none;
  max-height:96dvh;
  background:#111512;
  color:var(--text);
  border:1px solid var(--line);
  padding:20px 24px
}

dialog::backdrop {
  background:#080b09ed
}

.viewer-bar,.viewer-caption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:12px
}

.viewer-bar p {
  margin:0;
  color:var(--muted)
}

button {
  border:1px solid var(--line);
  color:var(--text);
  background:transparent;
  cursor:pointer;
  min-width:44px;
  min-height:44px
}

button:hover {
  background:#303b30
}

#close-viewer {
  padding:8px 15px
}

.viewer-image {
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  align-items:center;
  gap:12px;
  margin:16px 0
}

.viewer-image img {
  display:block;
  max-width:100%;
  max-height:72dvh;
  width:auto;
  height:auto;
  justify-self:center;
  object-fit:contain
}

.viewer-caption {
  padding:5px 56px 0
}

body:has(dialog[open]) {
  overflow:hidden
}

/* Responsive layouts for wide, tablet and phone screens. */
@media(min-width:1600px) {
  .photo-grid {
    columns:4
  }
}

@media(max-width:1000px) {
  .intro {
    gap:30px
  }
  h1 {
    letter-spacing:-2px
  }
  .photo-grid {
    columns:2
  }
  .album-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .controls {
    gap:10px
  }
  input,select {
    width:170px
  }
  .about-layout {
    gap:40px
  }
  .album-card>div {
    display:block
  }
}

@media(max-width:650px) {
  .wrap {
    width:90%
  }
  header {
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
    padding:23px 0
  }
  nav {
    gap:24px;
    width:100%;
    justify-content:space-between
  }
  .intro {
    grid-template-columns:1fr;
    padding:44px 0 38px;
    gap:23px
  }
  h1 {
    font-size:57px
  }
  .intro-note {
    justify-self:start;
    font-size:14px;
    max-width:100%
  }
  .intro-note .edition {
    margin-top:20px
  }
  .eyebrow {
    margin-bottom:17px
  }
  .toolbar {
    flex-direction:column;
    align-items:flex-start
  }
  .controls {
    width:100%;
    gap:12px
  }
  .controls label {
    flex:1;
    min-width:0
  }
  input,select {
    width:100%;
    min-width:0
  }
  .photo-grid {
    columns:1
  }
  .photograph {
    margin-bottom:26px
  }
  .album-grid {
    gap:26px 14px
  }
  .album-card h2 {
    font-size:20px
  }
  .album-card span {
    font-size:9px
  }
  .closing {
    align-items:flex-start;
    margin-top:40px
  }
  .closing p {
    font-size:21px
  }
  .about-layout {
    grid-template-columns:1fr;
    gap:30px
  }
  .about-copy {
    max-width:none
  }
  footer {
    align-items:flex-start;
    flex-direction:column;
    gap:22px
  }
  footer nav {
    gap:18px;
    justify-content:flex-start
  }
  .viewer-image {
    gap:5px;
    grid-template-columns:35px minmax(0,1fr) 35px
  }
  dialog {
    padding:12px 8px
  }
  .viewer-caption {
    padding:8px;
    align-items:flex-start
  }
  .viewer-image button {
    min-width:35px
  }
  .viewer-image img {
    max-height:65dvh
  }
}

/* Respect the visitor’s reduced motion preference. */
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}

/* The Archive uses denser columns than the other gallery pages. */
:where(body[data-page="archive"]) .photo-grid {
  columns:4;
  column-gap:20px
}

:where(body[data-page="archive"]) .photograph {
  margin-bottom:24px
}

@media(min-width:1600px) {
  body[data-page="archive"] .photo-grid {
    columns:6
  }
}

@media(max-width:1000px) {
  body[data-page="archive"] .photo-grid {
    columns:3;
    column-gap:18px
  }
}

@media(max-width:650px) {
  body[data-page="archive"] .photo-grid {
    columns:2;
    column-gap:14px
  }
  body[data-page="archive"] figcaption {
    flex-wrap:wrap;
    gap:2px 10px
  }
}