/* The album opens at Sheila's desk: a dark cloth backdrop and loose prints. */
.album-intro {
  color: #faf5e6;
  background-color: #344533;
  background-image: linear-gradient(110deg, #273c30 0%, #394b38 60%, #4a533b 100%);
  border-bottom: 4px double #a79877;
  overflow: clip;
}
.album-intro-layout {
  min-height: min(39rem, 44vw);
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(1.5rem, 5vw, 6rem);
  align-items: center;
  padding-block: clamp(3rem, 5vw, 5rem);
}
.album-intro-copy .eyebrow { color: #e9cba2; gap: 12px; }
.album-intro-copy .nav-glyph { width: 27px; height: 27px; color: #e9cba2; }
.album-intro h1 { margin-block: .14em .18em; font-size: clamp(5rem, 8.3vw, 8.6rem); line-height: .86; letter-spacing: -.044em; }
.album-intro h1 em { color: #ead6a9; }
.album-intro-copy > p:not(.eyebrow) { max-width: 39ch; line-height: 1.64; color: #eeeede; }
.album-browse { margin-top: 1rem; color: #f7efdb; border-color: #b4b89c; }
.album-browse:hover { color: white; border-color: white; }
.album-browse .drawn-arrow { transform: rotate(90deg); }
.album-desk {
  min-width: 0;
  display: grid;
  grid-template: 1fr 1fr / 1fr 1.55fr;
  max-width: 690px;
  width: 100%;
  align-items: center;
  justify-self: center;
  padding: 0 5% 0 3%;
  isolation: isolate;
}
.album-desk a {
  display: block;
  min-width: 0;
  position: relative;
  background: #fbf5e5;
  color: #453f32;
  padding: clamp(6px, .63vw, 11px) clamp(6px, .63vw, 11px) 0;
  box-shadow: 2px 7px 18px #16201470, 0 1px 2px #16201480;
  transition: transform .2s ease-out;
}
.album-desk a img { width: 100%; height: auto; object-fit: contain; }
.album-desk a span { display: block; padding: .12em .12em .25em; font: 500 clamp(1.08rem, 1.85vw, 1.6rem)/1 var(--script); }
.album-desk .desk-centre { grid-column: 2; grid-row: 1/3; transform: rotate(3deg); z-index: 1; }
.album-desk .desk-centre span { padding-block: .22em .28em; }
.desk-souvenir { grid-area: 1/1; transform: translate(6%, 5%) rotate(-8deg); }
.desk-korben { grid-area: 2/1; transform: translate(4%, -3%) rotate(-3deg); }
.album-desk a:hover, .album-desk a:focus-visible { z-index: 2; transform: rotate(0deg) translateY(-3px); }
.album-desk a:focus-visible, .album-intro .album-browse:focus-visible { outline-color: #ffe8a9; }

.album-section { padding-block: 0 clamp(3.5rem, 6vw, 6rem); background: var(--cream); }
#photo-album { scroll-margin-top: 1rem; }
.album-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #bdb7a4;
  padding-block: 1rem;
  margin-bottom: clamp(1.7rem, 3.5vw, 3.8rem);
}
.album-filters { display: flex; flex-wrap: wrap; gap: .2rem; }
.album-filters[hidden], .album-print[hidden] { display: none; }
.album-filters button {
  position: relative;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: .55rem 1rem;
  color: #4e5041;
  background: transparent;
  cursor: pointer;
  font: 550 .89rem/1.2 var(--sans);
}
.album-filters button:hover { background: #e9eadb; }
.album-filters button[aria-pressed="true"] { color: #fff9e9; background: #454e39; }
.album-count { color: #545746; font-size: .8rem; text-align: right; }
.album-sheet { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: clamp(2.1rem,4.5vw,5rem) clamp(1rem,2.8vw,2.8rem); }
.album-print { grid-column: span 4; min-width: 0; margin: 0; }
.album-sheet:not([data-filtered]) .album-print:nth-child(6n+1),
.album-sheet:not([data-filtered]) .album-print:nth-child(6n+5) { grid-column: span 5; }
.album-sheet:not([data-filtered]) .album-print:nth-child(6n+2),
.album-sheet:not([data-filtered]) .album-print:nth-child(6n+4) { grid-column: span 3; }
.album-sheet:not([data-filtered]) .album-print:nth-child(3n+2) { padding-top: clamp(1rem,3.4vw,3.1rem); }
.album-sheet[data-filtered="show"] .album-print { grid-column: span 6; }
.album-open {
  --mat: #e1e5d7;
  display: grid;
  place-items: center;
  height: clamp(13rem,22vw,22rem);
  position: relative;
  padding: clamp(.9rem,1.8vw,2rem);
  background: var(--mat);
  border: 1px solid #d0c9b9;
  cursor: zoom-in;
  isolation: isolate;
}
.album-print[data-album-category="show"] .album-open { --mat: #ded9c9; }
.album-print[data-album-category="kittens"] .album-open { --mat: #ebdccc; }
.album-sheet:not([data-filtered]) .album-print:nth-child(6n+1) .album-open,
.album-sheet:not([data-filtered]) .album-print:nth-child(6n+5) .album-open { height: clamp(16rem,26vw,25rem); }
.album-sheet:not([data-filtered]) .album-print:nth-child(6n+2) .album-open,
.album-sheet:not([data-filtered]) .album-print:nth-child(6n+4) .album-open { height: clamp(12rem,19vw,18.5rem); }
.album-open img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  box-shadow: 0 2px 5px #413b2d2b, 0 0 0 3px #fffcf2;
}
.album-open::before {
  content: '';
  position: absolute;
  inset: .48rem;
  pointer-events: none;
  background:
    linear-gradient(#69674f, #69674f) left top / 8px 1px,
    linear-gradient(#69674f, #69674f) left top / 1px 8px,
    linear-gradient(#69674f, #69674f) right bottom / 8px 1px,
    linear-gradient(#69674f, #69674f) right bottom / 1px 8px;
  background-repeat: no-repeat;
}
.album-enlarge {
  position: absolute;
  right: .6rem;
  top: .6rem;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fffdf4;
  color: #535a44;
  border: 1px solid #a2a690;
}
.album-enlarge .drawn-arrow { width: 14px; height: 14px; }
.album-open:hover .album-enlarge, .album-open:focus-visible .album-enlarge { background: #414d36; color: #fffbed; }
.album-print figcaption { padding-top: 1rem; }
.print-series, .viewer-counter {
  text-transform: uppercase;
  letter-spacing: .14em;
  font: 650 .65rem/1.35 var(--sans);
  color: var(--terra);
}
.album-print h2 { margin-top: .2em; font-size: clamp(1.8rem,3.05vw,3.15rem); }
.print-note, .album-print .album-source { display: none; }
body.album-viewing { overflow: hidden; }
.photo-viewer {
  width: min(72rem,calc(100% - 2.8rem));
  max-width: none;
  max-height: calc(100vh - 2.5rem);
  max-height: calc(100dvh - 2.5rem);
  margin: auto;
  padding: 0;
  color: var(--ink);
  border: 1px solid #c0b398;
  background: var(--paper);
  box-shadow: 0 20px 80px #13201855;
}
.photo-viewer:not([open]) { display: none; }
.photo-viewer::backdrop { background: #19271eeb; }
.viewer-shell { padding: clamp(.85rem,2vw,1.9rem); }
.viewer-top, .viewer-bottom { display: flex; justify-content: space-between; align-items: center; gap: .65rem; }
.viewer-top { border-bottom: 1px solid var(--line); padding-bottom: .4rem; }
.viewer-counter { color: #535c47; font-size: .71rem; }
.viewer-close, .viewer-bottom button {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-width: 44px; min-height: 44px; background: transparent; border: 0;
  padding: .4rem .55rem; color: var(--forest); cursor: pointer;
  font: 600 .85rem/1.2 var(--sans);
}
.viewer-close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.viewer-bottom .drawn-arrow { width: 20px; height: 16px; }
.viewer-previous .drawn-arrow { transform: rotate(180deg); }
.viewer-display {
  display: grid;
  grid-template-columns: minmax(0,1.85fr) minmax(12rem,.8fr);
  align-items: center;
  gap: clamp(1.4rem,3vw,3.6rem);
  margin-block: 1rem;
}
.viewer-photo {
  display: grid;
  place-items: center;
  height: min(62vh,40rem);
  height: min(62dvh,40rem);
  padding: clamp(.6rem,1.7vw,1.5rem);
  background: #354332;
  touch-action: pan-y pinch-zoom;
}
.viewer-photo img { width: auto; height: auto; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; box-shadow: 0 0 0 3px #fff9ec; }
.viewer-caption { padding-right: .5rem; }
.viewer-caption h2 { margin: .21em 0 .35em; font-size: clamp(2.4rem,5.2vw,5.4rem); line-height: .94; }
.viewer-description { margin: 0 auto .8rem 0; max-width: 37ch; color: var(--muted); }
.viewer-source { font: 500 clamp(1.08rem,2vw,1.55rem)/1.2 var(--script); color: var(--terra); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.viewer-bottom { border-top: 1px solid var(--line); padding-top: .35rem; }
.viewer-bottom .viewer-link { color: #5c6551; font-weight: 500; text-decoration: underline; text-underline-offset: .22em; }
.viewer-close:hover, .viewer-bottom button:hover { background: #e6e7d8; }
.viewer-bottom button[hidden] { display: none; }
.viewer-message { text-align: center; font-size: .76rem; line-height: 1.3; color: #525949; }
.viewer-message:not(:empty) { padding: .3rem 0 0; }

@media (max-width: 850px) {
  .album-intro-layout { gap: 1.5rem; grid-template-columns: .85fr 1.15fr; }
  .album-intro h1 { font-size: clamp(4.5rem,9.6vw,7rem); }
  .album-sheet { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .album-sheet .album-print, .album-sheet[data-filtered] .album-print, .album-sheet:not([data-filtered]) .album-print:nth-child(n) { grid-column: span 1; padding-top: 0; }
  .album-sheet .album-print .album-open, .album-sheet:not([data-filtered]) .album-print:nth-child(n) .album-open { height: clamp(11.5rem,35vw,19rem); }
  .viewer-display { grid-template-columns: minmax(0,1.5fr) minmax(10rem,.85fr); gap: 1rem; }
}
@media (max-width: 610px) {
  .album-intro-layout { grid-template-columns: 1fr; gap: 1.55rem; padding-block: 2.1rem 1.9rem; }
  .album-intro h1 { font-size: clamp(4.3rem,14vw,6rem); line-height: .94; }
  .album-intro h1 br { display: none; }
  .album-intro h1 br::after { content: ' '; }
  .album-intro-copy > p:not(.eyebrow) { font-size: .95rem; }
  .album-desk { width: min(93%, 24rem); max-width: 100%; padding-right: 3%; grid-template-columns: 1fr 1.45fr; }
  .album-tools { align-items: flex-start; flex-direction: column; gap: .36rem; padding-block: .75rem; }
  .album-filters { flex-wrap: wrap; gap: .08rem; }
  .album-filters button { padding-inline: .65rem; font-size: .82rem; }
  .album-count { padding-inline: .1rem; }
  .album-sheet { gap: 1.65rem .85rem; }
  .album-sheet .album-print .album-open, .album-sheet:not([data-filtered]) .album-print:nth-child(n) .album-open { height: clamp(9.6rem,39vw,15rem); padding: .7rem; }
  .album-enlarge { width: 24px; height: 24px; right: .25rem; top: .25rem; }
  .album-print h2 { font-size: clamp(1.55rem,5.85vw,2rem); }
  .album-print figcaption { padding-top: .65rem; }
  .photo-viewer { width: calc(100% - 1.1rem); max-height: calc(100dvh - 1.1rem); }
  .viewer-display { grid-template-columns: 1fr; gap: .9rem; margin-block: .75rem; }
  .viewer-photo { height: min(42dvh,23rem); padding: .55rem; }
  .viewer-caption h2 { font-size: clamp(2rem,8vw,3rem); margin-block: .14em .19em; }
  .viewer-description { font-size: .87rem; line-height: 1.5; margin-bottom: .37rem; }
  .viewer-bottom button { font-size: .77rem; gap: .3rem; padding-inline: .35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .album-desk a { transition: none; }
  .album-desk a:hover, .album-desk a:focus-visible { transform: none; }
}
/* A definite grid track keeps the complete print inside its mount in WebKit. */
.album-open, .viewer-photo { grid-template: minmax(0,1fr) / minmax(0,1fr); }