/* Galerija: built on the photographs themselves. First the contact sheet: all of them on one sheet at their own
   proportions, grouped, developing in one after another like prints in a tray. Then each group as a room behind its
   door, with a strip of the four names that stays with you, every photograph at its own proportions (nothing cropped,
   so the photographer's mark stays), portraits under an arch. Everything opens in the light viewer. */

/* ---------- small shared pieces ---------- */
.pc { display: flex; align-items: center; gap: 12px; margin-top: 12px; font: 600 11.5px/1.4 var(--ft); font-stretch: 75%; letter-spacing: .15em; text-transform: uppercase; color: var(--ink2); }
.pc::before { content: ''; width: 22px; height: 1.5px; background: var(--ink); flex: none; }
.ln { display: block; clip-path: inset(-45% -8% -.24em -8%); }
.lni { display: inline-block; }
.js .rv.rise { opacity: 1; transform: none; }
.js .rise .lni { transform: translateY(112%); }
.js .rise.in .lni { transform: none; transition: transform 1.35s var(--ease); }

/* ---------- head ---------- */
.gw-head { padding: clamp(28px, 3.4vw, 56px) var(--g) 0; }
.gw-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); column-gap: clamp(30px, 5vw, 100px); align-items: end; }
.gw-h1 { margin: clamp(16px, 2vw, 30px) 0 0 -.045em; font: 900 clamp(54px, 7.6vw, 140px)/.88 var(--fd); letter-spacing: -.04em; text-wrap: balance; }
.js .gw-h1 .lni { animation: gw-rise 1.3s var(--ease) .08s both; }
@keyframes gw-rise { from { transform: translateY(112%); } to { transform: none; } }
.gw-lead { max-width: 24em; padding-bottom: .4em; font: 500 clamp(17px, 1.35vw, 21px)/1.5 var(--ft); color: var(--ink2); text-wrap: pretty; }

/* ---------- the contact sheet ---------- */
.cs { padding: clamp(40px, 5vw, 80px) var(--g) clamp(20px, 3vw, 40px); }
.cs-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 30px; padding-top: 18px; background: var(--drbg); }
.cs-note { font: 500 14.5px/1.45 var(--ft); color: var(--ink2); max-width: 36em; }
.cw { --ch: clamp(64px, 6.6vw, 104px); display: flex; flex-wrap: wrap; gap: 6px; margin: clamp(22px, 2.4vw, 34px) 0 0; padding: 0; list-style: none; }
.cw::after { content: ''; flex: 1000 1 0; }
.cw-g { flex: none; display: flex; }
.cw-name {
  display: flex; flex-direction: column; justify-content: space-between; height: var(--ch); min-width: calc(var(--ch) * 1.25); padding: 9px 12px 10px;
  background: var(--ink); color: var(--lime); text-decoration: none; border-radius: 2px; transition: background-color .3s;
}
.cw-name span { font: 800 clamp(13px, 1.05vw, 16px)/1.05 var(--fd); letter-spacing: -.005em; max-width: 7.5em; }
.cw-name b { font: 700 11px/1 var(--ft); font-stretch: 75%; letter-spacing: .14em; color: #E8A487; }
.cw-name:hover, .cw-name:focus-visible { background: var(--terra); }
.cw-name:hover b, .cw-name:focus-visible b { color: #FFF8EF; }
.cw-i { flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--ch)); height: var(--ch); min-width: 0; }
.cw-a { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 2px; background: #e6dcc8; cursor: zoom-in; }
.cw-p .cw-a { border-radius: 999px 999px 2px 2px; }
.cw-a img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.cw-a:hover img, .cw-a:focus-visible img { transform: scale(1.08); }
.cw-a:focus-visible { outline-offset: 2px; }
/* prints developing in the tray, one after another */
.cw.pre .cw-a img { opacity: .42; filter: sepia(.9) contrast(.6) brightness(1.22); }
.cw.pre.dev .cw-a img { opacity: 1; filter: none; transition: opacity .8s var(--ease), filter 1.8s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--k) * 16ms), calc(var(--k) * 16ms + .2s), 0s; }

/* ---------- the strip of names that stays ---------- */
.gl-body { position: relative; padding: max(clamp(50px, 6vw, 100px), calc(var(--hd) + 16px)) var(--g) 0; }
.gs {
  position: sticky; top: var(--hd); z-index: 30; margin: 0 calc(var(--g) * -1); padding: 0 var(--g);
  background-color: var(--lime); background-image: var(--tex), var(--tex2); box-shadow: 0 1px 0 var(--rule);
}
/* the strip's own wall carried up behind the floating lintel: no photograph slides through the gap above it or around
   the plate (in flow it only covers the empty top of .gl-body) */
.gs::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--hd) + 2px);
  background-color: var(--lime); background-image: var(--tex), var(--tex2); pointer-events: none;
}
.gs-l { display: flex; gap: clamp(20px, 3vw, 52px); margin: 0; padding: 12px 0 13px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.gs-l::-webkit-scrollbar { display: none; }
.gs-a { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; color: var(--ink3); text-decoration: none; transition: color .35s; }
.gs-t { font: 800 clamp(16px, 1.35vw, 20px)/1.2 var(--fd); letter-spacing: -.01em; }
.gs-c { font: 600 11.5px/1 var(--ft); font-stretch: 75%; letter-spacing: .12em; color: var(--terra); }
.gs-a:hover, .gs-a.on { color: var(--ink); }
.gs-a.on .gs-t { text-decoration: underline; text-decoration-thickness: 1.8px; text-underline-offset: 6px; }

/* ---------- one group: a room behind its door ---------- */
.gg { padding: clamp(80px, 9vw, 150px) 0 clamp(30px, 3vw, 50px); }
.gg-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: clamp(16px, 2vw, 34px); align-items: end; padding-top: clamp(22px, 2.2vw, 34px); background: var(--drbg); }
.gg-n { align-self: start; padding-top: .5em; font: 600 12.5px/1 var(--ft); font-stretch: 75%; letter-spacing: .16em; color: var(--terra); }
.gg-name { margin: 0 0 0 -.03em; font: 900 clamp(48px, 7.2vw, 128px)/.9 var(--fd); letter-spacing: -.038em; }
.gg-c { padding-bottom: .5em; font: 600 12.5px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; }
.gg-line { grid-column: 2 / -1; max-width: 40em; margin-top: 18px; font: 500 clamp(17px, 1.35vw, 20px)/1.5 var(--ft); color: var(--ink2); text-wrap: pretty; }
.gg-links { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 18px; }
.gg-links .more { font-size: clamp(17px, 1.3vw, 20px); }
/* every photograph at its own proportions: rows of equal height, each frame exactly the photograph's shape */
.al { --rh: clamp(170px, 17vw, 262px); display: flex; flex-wrap: wrap; gap: clamp(28px, 2.6vw, 42px) clamp(14px, 1.4vw, 22px); margin: clamp(34px, 3.6vw, 56px) 0 0; padding: 0; list-style: none; }
.al::after { content: ''; flex: 1000 1 0; }
.al-i { flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--rh)); min-width: 0; }
.al-a { display: block; color: inherit; cursor: zoom-in; }
.al-f { display: block; aspect-ratio: var(--r); overflow: hidden; border-radius: 3px; background: #d9ccb4; }
.al-p .al-f { border-radius: 999px 999px 3px 3px; }
.al-f img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); user-select: none; -webkit-user-drag: none; }
.al-a:hover img, .al-a:focus-visible img { transform: scale(1.045); }
.al-a:focus-visible { outline-offset: 4px; }
.js .al-f.rv.wipe { opacity: 1; transform: none; }
.js .al-f.wipe img { transition: clip-path 1s var(--door), transform 1.1s var(--ease); }
.al-c { display: flex; gap: 9px; margin-top: 10px; font: 500 13.5px/1.4 var(--ft); color: var(--ink2); text-wrap: pretty; }
.al-c b { flex: none; font: 700 11.5px/1.6 var(--ft); font-stretch: 75%; letter-spacing: .1em; color: var(--terra); }

/* ---------- the end of the album ---------- */
.gw-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; margin: clamp(60px, 7vw, 110px) var(--g) clamp(70px, 8vw, 120px); padding-top: clamp(22px, 2.2vw, 34px); background: var(--drbg); }
.gw-end .more svg { transform: rotate(180deg); }
.gw-end .more:hover svg, .gw-end .more:focus-visible svg { transform: rotate(180deg) translateY(4px); }

/* =================== responsive =================== */
@media (max-width: 999px) {
  .gw-top { grid-template-columns: minmax(0, 1fr); }
  .gw-lead { margin-top: 24px; }
}
@media (max-width: 640px) {
  .gw-h1 { font-size: clamp(44px, 13.4vw, 64px); }
  .cw { --ch: 50px; gap: 4px; }
  .cw-name { min-width: 76px; padding: 6px 8px 7px; }
  .cw-name span { font-size: 12px; }
  .cw-name b { font-size: 10px; }
  .cs-note { font-size: 13.5px; }
  .gs-l { padding: 11px 0 12px; }
  .gs-t { font-size: 16px; }
  .gg-h { grid-template-columns: auto minmax(0, 1fr); }
  .gg-c { grid-column: 2; padding-bottom: 0; margin-top: 10px; }
  .gg-name { font-size: clamp(42px, 12.5vw, 60px); }
  .al { --rh: 104px; gap: 20px 10px; }
  .al-c { font-size: 12px; gap: 6px; margin-top: 7px; }
  .al-c b { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .gw-h1 .lni { animation: none; }
  .js .cw-a img, .cw.pre.dev .cw-a img { opacity: 1; filter: none; transition: none; }
  .js .rise .lni, .js .rise.in .lni { transform: none; transition: none; }
  .al-f img, .cw-a img, .gs-a { transition: none; }
}