/* Bartosz Borowski — site styles.
   One typeface at one size. Hierarchy comes only from black against grey,
   italics for titles, and space. Everything sits on a 16px grid; the reading
   column is three thumbnails and two gutters wide (3 × 188 + 2 × 93 = 750). */

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/eb-garamond-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/eb-garamond-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/eb-garamond-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/eb-garamond-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/eb-garamond-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/eb-garamond-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --u: 16px;
  --ink: #000;
  --grey: #767676; /* Sassen's #848484, darkened just enough to read (4.5:1) */
  --paper: #fff;
  --thumb: 188px;
  --gutter: 93px;
  --col: calc(3 * var(--thumb) + 2 * var(--gutter));
  --menu: 900px;
  --fade: 450ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--u);
  font-family: "EB Garamond", "Times New Roman", Times, serif;
  font-size: 14px;
  line-height: var(--u);
  font-kerning: normal;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--grey);
  text-decoration: none;
  transition: color 200ms;
}
a:hover,
a:focus-visible,
a[aria-current="page"] {
  color: var(--ink);
}
:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}
em {
  font-style: italic;
}
h1,
h2,
h3 {
  font: inherit;
}
ul {
  list-style: none;
}
img,
video {
  display: block;
  max-width: 100%;
}
::selection {
  color: var(--paper);
  background: var(--ink);
}

.grey {
  color: var(--grey);
}
.ink,
.ink a {
  color: var(--ink);
}
.caps {
  text-transform: uppercase;
}
/* Small date lines and labels, as in a catalogue: uppercase at a hair under body size. */
.small-caps {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* The little bullet between crumbs and list items. */
.sep::before {
  content: "•";
  display: inline-block;
  padding: 0 5px;
  font-size: 8px;
  vertical-align: 1px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- header */

/* Everything is set on one centre line, like the title page of a lookbook. */
.masthead {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  padding: var(--u);
  background: var(--paper);
  text-align: center;
}
.masthead.static {
  position: static;
  padding: 0;
  background: none;
}
.crumb {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crumb .name,
.crumb .here {
  color: var(--ink);
}
.name {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
}

.menu {
  display: flex;
  justify-content: center;
  margin-top: var(--u);
}
.menu ul {
  width: 150px;
}

/* -------------------------------------------------------------- the page */

.page {
  width: 100%;
  max-width: var(--col);
  margin: 128px auto 0; /* 144 from the top, under the fixed menu */
  padding-bottom: calc(3 * var(--u));
  text-align: center;
}
.page.under-crumb {
  margin-top: calc(4 * var(--u));
}

.page p + p {
  margin-top: var(--u);
}

/* Running text stays a readable width, centred. */
.text {
  max-width: 30em;
  margin: 0 auto;
}

/* The footer sits at the foot of the window even when a page is short. */
.footer {
  width: 100%;
  max-width: var(--col);
  margin: auto auto 0;
  padding: calc(3 * var(--u)) 0 var(--u);
  text-align: center;
  color: var(--grey);
}
.footer a:hover {
  color: var(--ink);
}

.intro .text,
.intro .contents {
  margin-top: calc(2 * var(--u));
}

/* ---------------------------------------------------------- thumbnails */

/* Three columns of small, uncropped pictures standing on their captions,
   like figures on a shelf: every row is bottom-aligned. */
.thumbs {
  display: grid;
  grid-template-columns: repeat(3, var(--thumb));
  justify-content: center;
  column-gap: var(--gutter);
  margin-top: calc(3 * var(--u));
}
/* A chapter of one or two pictures stays centred under its heading. */
.thumbs.few {
  grid-template-columns: repeat(auto-fit, var(--thumb));
}
/* Each thumbnail spans two shared rows (picture, caption), so in every row
   the pictures stand on one floor and the captions hang from it. */
.thumb,
.thumb a {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}
.thumb a {
  color: var(--ink);
}
.thumb .frame {
  position: relative;
  display: block;
  align-self: end;
  overflow: hidden;
}
.thumb img {
  width: 100%;
  height: auto;
}
.thumb .cap {
  display: block;
  align-self: start;
  margin: 4px 0 calc(3 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.thumb a:hover .cap,
.thumb a:focus-visible .cap {
  color: var(--grey);
}

/* On the collections page the titles are long: let them wrap, and the
   three covers share one frame so the collections stand as equals. */
.index .cap {
  white-space: normal;
}
.thumbs.index {
  grid-template-columns: repeat(3, minmax(0, 248px));
  column-gap: min(64px, 5vw);
}
.page.collections-page {
  max-width: 900px;
}
.index .frame {
  aspect-ratio: 3 / 4;
}
.index .frame > picture:first-child img {
  height: 100%;
  object-fit: cover;
}

/* Collection pages: rows of three, all one height (282px, the height the
   upright pictures had in the small grid), so horizontal pictures come out
   wider and the rows may run past the text column. */
.gallery {
  --gap: 40px;
  --h: min(282px, calc((100vw - 2 * var(--u) - 2 * var(--gap)) / 4.3));
  width: calc(100vw - 2 * var(--u));
  margin: calc(3 * var(--u)) 0 0 calc(50% - 50vw + var(--u));
}
.g-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--gap);
  margin-bottom: calc(3 * var(--u));
}
.g-item {
  width: calc(var(--h) * var(--ar));
}
.g-item a {
  display: block;
  color: var(--ink);
}
.g-item img {
  width: 100%;
  height: var(--h);
  object-fit: cover;
}
.g-item .cap {
  display: block;
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-item a:hover .cap {
  color: var(--grey);
}

/* Double-page spreads: two to a row. */
.thumbs.wide {
  grid-template-columns: repeat(2, calc((var(--col) - var(--gutter)) / 2));
}

/* Collection covers on the index flip through a few looks on hover. */
.flip > picture + picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.flip > picture + picture > img.on {
  opacity: 1;
}
/* While another look shows, the cover stays underneath but out of sight. */
.flip.flipping > picture:first-child img {
  opacity: 0;
}

/* Pages and drawings: white paper on the white page, so a hairline edge. */
.paper .frame img,
.viewer .stage.paper img {
  outline: 1px solid #e3e3e3;
  outline-offset: -1px;
}

/* Pictures fade in as they arrive, on plain white, never on a placeholder. */
.js img.fade {
  opacity: 0;
  transition: opacity var(--fade) ease;
}
.js img.fade.in {
  opacity: 1;
}

/* ------------------------------------------------------------- chapters */

.chapter {
  margin-top: calc(6 * var(--u));
  scroll-margin-top: 128px; /* clear of the fixed menu */
}
.chapter-head .label {
  color: var(--ink);
}

/* Credits as at the end of a film: roles to the left of the centre line,
   names to the right of it. */
.credits {
  margin-top: calc(6 * var(--u));
}
.credits dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--u);
}
.credits dt {
  text-align: right;
  color: var(--grey);
}
.credits dd {
  text-align: left;
}

.pager {
  display: flex;
  justify-content: space-between;
  margin-top: calc(6 * var(--u));
}

/* ------------------------------------------------------------ text pages */

.prose p {
  max-width: 30em;
  margin-left: auto;
  margin-right: auto;
}
.cv h2 {
  margin-top: calc(3 * var(--u));
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
}
.cv h2:first-child {
  margin-top: 0;
}
.cv ul {
  margin-top: var(--u);
}
.cv li .year {
  color: var(--grey);
}
.cv li + li {
  margin-top: 2px;
}

/* ------------------------------------------------------------- the film */

.film-block {
  margin-top: calc(3 * var(--u));
}
.film-block video {
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: #000;
  cursor: pointer;
}
.film-bar {
  margin-top: 4px;
  color: var(--grey);
}
.film-bar button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.film-bar button:hover {
  color: var(--grey);
}
.portrait .film-block video {
  width: 375px;
  max-width: 100%;
}

/* ---------------------------------------------------- the process book */

/* The book lies open on the centre line; each leaf turns over the spine.
   Closed, it shifts so the cover itself sits in the middle. */
.flipbook {
  --ratio: 1.4; /* page width / height, set per book */
  --pw: min(calc(540px * min(1, var(--ratio) / 1.4 * 1.45)), calc(50vw - 16px)); /* one page */
  --ph: calc(var(--pw) / var(--ratio));
  position: relative;
  left: 50%; /* wider than the text column: centred on its middle line */
  width: calc(2 * var(--pw));
  height: var(--ph);
  margin: calc(4 * var(--u)) 0 0 calc(-1 * var(--pw));
  perspective: 2800px;
  cursor: pointer;
  outline: none;
}
.flipbook:focus-visible {
  outline: 1px solid var(--grey);
  outline-offset: 12px;
}
.flipbook .book {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 800ms cubic-bezier(0.3, 0.1, 0.2, 1);
}
.flipbook .book.at-front {
  transform: translateX(-25%);
}
.flipbook .book.at-back {
  transform: translateX(25%);
}
.flipbook .leaf {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(0.3, 0.1, 0.2, 1);
  will-change: transform; /* its own layer: the page under it repaints cleanly */
}
.flipbook .leaf.turned {
  transform: rotateY(-180deg);
}
.flipbook .face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #f4f2ed;
  outline: 1px solid #e3e3e3;
  outline-offset: -1px;
}
.flipbook .face.back {
  transform: rotateY(180deg);
}
.flipbook .face.end {
  background: #ebe8e1; /* the endpaper inside the covers */
}
.flipbook .face img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* a landscape page in an upright book keeps its edges */
}
.flipbook .face picture {
  display: contents;
}
/* One page at a time on a phone: a turned page lifts away to the left. */
.flipbook.single {
  --pw: calc(100vw - 2 * var(--u));
  width: var(--pw);
  margin-left: calc(-0.5 * var(--pw));
}
.flipbook.single .leaf {
  left: 0;
  width: 100%;
  transition: transform 700ms cubic-bezier(0.3, 0.1, 0.2, 1), opacity 700ms;
}
.flipbook.single .leaf.turned {
  transform: rotateY(-100deg);
  opacity: 0;
  pointer-events: none;
}
.book-count {
  margin-top: var(--u);
  font-size: 11px;
}
.book-chapter + .book-chapter {
  margin-top: calc(9 * var(--u));
}
.book-chapter .flipbook {
  margin-top: calc(3 * var(--u));
}

/* ---------------------------------------------------------- the viewer */

/* The picture in the middle; above it where you are, below it what it is. */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 20;
  padding: var(--u);
  background: var(--paper);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}
.viewer.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease, visibility 0s;
}
.viewer .stage {
  position: absolute;
  top: calc(3 * var(--u));
  left: var(--u);
  right: var(--u);
  height: calc(100% - 176px);
}
.viewer .stage picture {
  display: contents;
}
.viewer .stage img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  opacity: 0;
  transition: opacity 450ms ease;
}
.viewer .stage img.on {
  opacity: 1;
}
.viewer .hit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: none;
  border: 0;
  z-index: 2;
}
.viewer .hit:focus-visible {
  outline: none;
}
.viewer .hit.prev {
  left: 0;
  cursor: w-resize;
}
.viewer .hit.next {
  right: 0;
  cursor: e-resize;
}
.viewer .count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 104px;
  font-size: 11px;
}
.viewer .caption {
  position: absolute;
  left: var(--u);
  right: var(--u);
  bottom: 40px;
}
.viewer .back {
  position: absolute;
  left: 50%;
  bottom: 8px;
  padding: 8px 16px;
  transform: translateX(-50%);
}

/* ------------------------------------------------------------- the cover */

/* The entrance: a film of the newest collection, the name on the centre line.
   Pointing at the name unfolds a white page, proportioned like the lookbook's,
   with the whole index on it; pointing at a collection on that page brings
   that collection's own film or picture behind it. */
.cover {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #000;
}
.cover .scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms ease;
}
.cover .scene.on {
  opacity: 1;
}
.cover .enter {
  position: fixed;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}
.cover .title-page {
  position: fixed;
  z-index: 3;
  top: 0; /* the page hangs from the top edge, above the models */
  left: 50%;
  width: 420px;
  min-height: 297px; /* the A-format of the lookbook: 420 × 297 */
  max-width: calc(100vw - 2 * var(--u));
  transform: translateX(-50%);
  padding: 28px var(--u) 40px;
  text-align: center;
}
.cover .leaf {
  position: absolute;
  inset: 0;
  background: var(--paper);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 450ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.cover .title-page .name {
  position: relative;
  display: inline-block;
  padding: 4px 8px;
  cursor: default;
  color: var(--paper);
  transition: color 300ms;
}
.cover .index {
  position: relative;
  margin-top: calc(2 * var(--u));
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms, visibility 0s linear 300ms;
}
.cover .index .works li + li {
  margin-top: 4px;
}
.cover .index .works a {
  color: var(--ink);
}
.cover .index .works a:hover,
.cover .index .works a:focus-visible {
  color: var(--grey);
}
.cover .index .more {
  margin-top: calc(2 * var(--u));
}
/* Closed, only the name can be pointed at; open, the whole page holds. */
.cover .title-page,
.cover .leaf,
.cover .index {
  pointer-events: none;
}
.cover .title-page .name,
.cover .title-page:hover .leaf,
.cover .title-page:hover .index,
.cover .title-page:focus-within .leaf,
.cover .title-page:focus-within .index,
.cover .title-page.open .leaf,
.cover .title-page.open .index {
  pointer-events: auto;
}
.cover .title-page:hover .leaf,
.cover .title-page:focus-within .leaf,
.cover .title-page.open .leaf {
  clip-path: inset(0 0 0 0);
}
.cover .title-page:hover .name,
.cover .title-page:focus-within .name,
.cover .title-page.open .name {
  color: var(--ink);
}
.cover .title-page:hover .index,
.cover .title-page:focus-within .index,
.cover .title-page.open .index {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms 150ms, visibility 0s;
}

/* On touch screens there is no hover: the name opens the page (site.js),
   and the lines are spaced for fingers. */
@media (hover: none) {
  .cover .index li,
  .cover .index .more {
    line-height: 26px;
  }
}

/* ------------------------------------------------------------- 404 */

.lost {
  margin-top: calc(9 * var(--u));
}

/* ------------------------------------------------------------- motion */

@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
  @view-transition {
    navigation: none;
  }
}

/* --------------------------------------------------------- small screens */

@media (max-width: 820px) {
  :root {
    --col: 100%;
  }
  .page {
    margin-top: 112px;
  }
  .menu ul {
    width: 33%;
  }
  .thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 9%;
  }
  .thumbs.wide {
    grid-template-columns: 1fr;
  }
  .thumbs.index {
    grid-template-columns: minmax(0, 72%);
  }
  /* On a phone the rows of three give way to one flow: a horizontal picture
     has its own line at full width; upright ones pair up, two to a line, at
     one height, set per gallery (--pair) so its broadest pair just fits. */
  .gallery {
    --gap: 16px;
    --h: calc((100vw - 2 * var(--u) - var(--gap)) / var(--pair, 1.5));
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: calc(2 * var(--u)) var(--gap);
    margin-bottom: calc(3 * var(--u));
  }
  .g-row {
    display: contents;
  }
  .g-item.wide {
    width: 100%;
  }
  .g-item.wide img {
    height: auto;
  }
  .crumb {
    white-space: normal;
  }
  .chapter {
    margin-top: calc(4 * var(--u));
  }
  .viewer .stage {
    height: calc(100% - 196px);
  }
}

@media print {
  .masthead,
  .viewer,
  .footer {
    display: none;
  }
}