@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400 600;font-display:swap;src:url(fonts/source-serif-4-italic-latin-ext.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:'Source Serif 4';font-style:italic;font-weight:400 600;font-display:swap;src:url(fonts/source-serif-4-italic-latin.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:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/source-serif-4-normal-latin-ext.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:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/source-serif-4-normal-latin.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;}

/* hh.sh: the works lie on the drawing. The paper and the graphite are the
   drawing's own (#817e79, 30 30 30). hh in the corner opens the way in. */

:root {
  /* two sizes on the whole site: reading, and everything else */
  --body: 17px;
  --small: 15px;
  --paper: #817e79;
  --graphite: rgb(30, 30, 30);
  --faint: rgba(30, 30, 30, .62);
  --serif: 'Source Serif 4', Georgia, serif;
  --edge: clamp(16px, 3.4vw, 48px);
  --gap: clamp(10px, 1.2vw, 16px);
  --row: clamp(120px, 15vw, 230px);
  color-scheme: light;
}

* { box-sizing: border-box; }

/* the page scrolls as any page does, so a phone's browser lets it run behind its own bars;
   the drawing stays still under everything */
html,
body {
  margin: 0;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
/* the sheets stay clear: the paper is the page's own colour. (A colour on a sheet fixed to
   the screen makes iPhone Safari 26.6+ fill the space under its bars with that colour,
   cutting the page off above and below them.) */

body {
  color: var(--graphite);
  font: 400 var(--small)/1.6 var(--serif);
  font-variation-settings: 'opsz' 14;
}

a { color: inherit; text-decoration: none; }
figure { margin: 0; }

/* ------------------------------------------------------------ hh, and the way in */

.site {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 26px;
  /* the ink of hh as far from the top as from the left: the line's own space above the letters taken off */
  padding: calc(var(--edge) - 0.4em) var(--edge);
  text-transform: lowercase;
}

.site .name,
.site .here { color: var(--faint); }       /* hh, the page's name and the menu: one colour */
html.menu .site .here { display: none; }   /* the menu names every page, this one included */
/* a word darkens under a mouse; a finger leaves no hover behind */
@media (hover: hover) {
  .site .name:hover,
  .site nav a:hover { color: var(--graphite); }
}
.site nav { display: none; }
html.menu .site nav { display: block; }
.site ul { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
.site nav a { color: var(--faint); }

/* ------------------------------------------------------------ what lies on the drawing */

.scroll {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.scroll > main { flex: 1 0 auto; }

/* the front page is only the drawing: it stays drawable */
html.home .scroll { pointer-events: none; }

main { padding: 92px var(--edge) 0; }

.title {
  margin: 0 0 42px;
  font-size: var(--small);
  font-weight: 400;
  text-transform: lowercase;
}

.title .line { display: block; }

/* thumbnails: justified rows, the drawing between them */
.archive {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  padding-bottom: 14vh;
}

.archive + .archive { margin-top: 8vh; }
.archive::after { content: ''; flex-grow: 1000000; }

.archive .cell {
  flex: calc(var(--r) * 100) 1 calc(var(--row) * var(--r));
  aspect-ratio: var(--r);
  max-height: calc(var(--row) * 1.7);
}

.archive .w,
.archive img { display: block; width: 100%; height: 100%; }
.archive img { object-fit: cover; }

/* small series: one work at a time */
.sequence {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18vh;
  padding: 2vh 0 20vh;
}

.sequence .w { display: block; }
.sequence img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 1100px);
  max-height: 80vh;
}

.single { margin: 0 auto 12vh; max-width: 1000px; }
.single a,
.single img { display: block; width: 100%; height: auto; }

/* reading: black on the grey, the most contrast the paper allows */
.text,
.caption,
.onward {
  max-width: 33em;
  margin: 0 auto;
  color: #000;
  font-size: var(--body);
  line-height: 1.72;
  font-variation-settings: 'opsz' 17;
}

.text { padding-bottom: 10vh; }
.text p { margin: 0 0 1.4em; }
.text h2 { margin: 0 0 1.2em; font-size: inherit; font-weight: 400; font-style: italic; }
.caption,
.onward { font-size: var(--small); padding-bottom: 12vh; text-align: center; }
.onward a { text-decoration: underline; text-underline-offset: 4px; }

.note {
  max-width: 24em;
  padding: 14vh 0 var(--edge);
  color: #000;
  font-size: var(--body);
  line-height: 1.72;
  font-variation-settings: 'opsz' 17;
}
.note p { margin: 0 0 1.2em; }
.note { text-transform: lowercase; }   /* the note in lowercase, as hh and the menu */

/* the covers stand in the middle of the drawing like works on the light table,
   as large as the screen allows for three or four of them side by side */
main:has(> .covers:first-child) { padding-top: var(--top); }

.covers {
  --cover-gap: clamp(24px, 3.5vw, 56px);
  --frame: min(
    calc(100svh - var(--top) - var(--foot) - var(--air) * 2 - 36px),
    calc((100vw - var(--edge) * 2 - (var(--n) - 1) * var(--cover-gap)) / (var(--n) * 0.8))
  );
  height: calc(100svh - var(--top) - var(--foot));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cover-gap);
}

.cover { display: block; }
.cover .frame { display: block; height: var(--frame); aspect-ratio: 4 / 5; }
.cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-title { display: block; margin-top: 12px; color: var(--faint); text-transform: lowercase; }
@media (hover: hover) { .cover:hover .cover-title { color: var(--graphite); } }

/* ------------------------------------------------------------ the light table and the book
   One work large on the drawing; the whole series as a strip of small prints below. */

:root {
  --strip: 72px;
  --air: clamp(20px, 3vh, 44px);
  --top: calc(var(--edge) + 22px);        /* hh's line and a little room under it */
  --foot: calc(var(--edge) - 11px);       /* the strip's prints end as far from the bottom as hh is from the top */
}

main:has(> .table:first-child) { padding-top: var(--top); }

.table {
  display: flex;
  flex-direction: column;
  height: calc(100svh - var(--top) - var(--foot));   /* hh, the work and the strip: one screen */
  margin: 0 calc(var(--edge) * -1);
}

.stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--air) var(--edge);     /* wall above and below the work */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.stage .w,
.stage .page { display: contents; }   /* the picture itself is what the stage centres */
.stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;                      /* table.js sets the exact size; these hold without it */
  object-fit: contain;                  /* and a work is never stretched, whatever size it is given */
  max-height: calc(100svh - var(--top) - var(--strip) - var(--foot) - var(--air) * 2);
  -webkit-user-drag: none;
}
.stage .w { cursor: zoom-in; }

.strip {
  flex: none;
  height: var(--strip);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 var(--edge);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.strip::-webkit-scrollbar { display: none; }

.strip .t {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: .5;
}
.strip .t.gap { margin-left: 28px; }
/* a strip shorter than the screen sits in the middle; a longer one starts at the edge and scrolls */
.strip .t:first-child { margin-left: auto; }
.strip .t:last-child { margin-right: auto; }
.strip .t:hover { opacity: .85; }
.strip .t[aria-current] { opacity: 1; }
.strip .t:focus:not(:focus-visible) { outline: none; }
.strip .t img { display: block; height: 50px; width: auto; }

/* the same works as one column, for phones */
.column { display: none; }

/* what a table's page has to say comes after it */
.table + :not(.column),
.table + .column + * { margin-top: 12vh; }

/* words lie on clean paper that fades slowly into the drawing, so no line runs through them
   and no edge shows: the paper is a layer behind the words, fully there only near them */
.text,
.note,
.caption,
.onward,
.cover-title,
.cover-text,
.title,
.site .name,
.site .here,
.site nav {
  --feather: 44px;
  position: relative;
  isolation: isolate;
}
.title, .cover-title, .cover-text { width: fit-content; }
.cover-title,
.cover-text,
.site .name,
.site .here,
.site nav { --feather: 30px; }

.text::before,
.note::before,
.caption::before,
.onward::before,
.cover-title::before,
.cover-text::before,
.title::before,
.site .name::before,
.site .here::before,
.site nav::before {
  content: '';
  position: absolute;
  inset: calc(var(--feather) * -1);
  z-index: -1;
  pointer-events: none;
  background: var(--paper);
  -webkit-mask-image:
    linear-gradient(to right, transparent, rgb(0 0 0 / .08) calc(var(--feather) * .15), rgb(0 0 0 / .3) calc(var(--feather) * .35), rgb(0 0 0 / .65) calc(var(--feather) * .6), rgb(0 0 0 / .9) calc(var(--feather) * .8), #000 var(--feather), #000 calc(100% - var(--feather)), rgb(0 0 0 / .9) calc(100% - var(--feather) * .8), rgb(0 0 0 / .65) calc(100% - var(--feather) * .6), rgb(0 0 0 / .3) calc(100% - var(--feather) * .35), rgb(0 0 0 / .08) calc(100% - var(--feather) * .15), transparent),
    linear-gradient(to bottom, transparent, rgb(0 0 0 / .08) calc(var(--feather) * .15), rgb(0 0 0 / .3) calc(var(--feather) * .35), rgb(0 0 0 / .65) calc(var(--feather) * .6), rgb(0 0 0 / .9) calc(var(--feather) * .8), #000 var(--feather), #000 calc(100% - var(--feather)), rgb(0 0 0 / .9) calc(100% - var(--feather) * .8), rgb(0 0 0 / .65) calc(100% - var(--feather) * .6), rgb(0 0 0 / .3) calc(100% - var(--feather) * .35), rgb(0 0 0 / .08) calc(100% - var(--feather) * .15), transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ------------------------------------------------------------ one work, on the drawing */

.viewer {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: transparent;
  display: none;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.viewer.open { display: block; }
.viewer:focus { outline: none; }

.viewer img {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  max-width: none;
  cursor: zoom-in;
}

.viewer.zoomed img { cursor: grab; }

.viewer .zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}
.viewer .prev-zone { left: 0; cursor: w-resize; }
.viewer .next-zone { right: 0; cursor: e-resize; }
.viewer.zoomed .zone { display: none; }

.viewer .close {
  position: absolute;
  top: 10px;
  right: calc(var(--edge) - 12px);
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: 300 var(--body)/44px var(--serif);
  color: var(--graphite);
  cursor: pointer;
}
.viewer .close:focus:not(:focus-visible) { outline: none; }
.viewer .close:focus-visible { outline: 1px solid currentColor; outline-offset: -8px; }
.viewer.zoomed .close { display: none; }

/* while a work is open, hh and the page under it step back */
html.viewing .site,
html.viewing .scroll { visibility: hidden; }
html.viewing { overflow: hidden; }

@media (max-width: 760px) {
  :root { --row: 104px; --gap: 8px; --strip: 70px; }
  .strip .t img { height: 48px; }
  main { padding-top: 84px; }
  .sequence { gap: 12vh; }
  .sequence img { max-height: 74vh; }
  .covers { height: auto; flex-direction: column; gap: 12vh; }
  main:has(> .covers:first-child) { padding-top: 84px; }
  .cover { width: 100%; }
  .cover .frame { height: auto; width: 100%; }

  /* a light table becomes a column: one work after another, the drawing between them
     (a book stays a book) */
  .table[data-table="light"] { display: none; }
  main:has(> .table[data-table="light"]:first-child) { padding-top: 84px; }
  .table[data-table="light"] + .column + * { margin-top: 12vh; }
  .column { display: flex; flex-direction: column; gap: 9vh; }
  .column figure { margin: 0; }
  .column figure.gap { margin-top: 12vh; }     /* a second group of the same series */
  .column .w,
  .column img { display: block; width: 100%; height: auto; }
  .note { padding-top: 8vh; }

  /* the way in, on a phone: one word under another, and the page steps aside while it is open */
  html.menu .site { flex-direction: column; align-items: flex-start; gap: 18px; }
  html.menu .site ul { flex-direction: column; gap: 0; }
  html.menu .site nav a { display: block; padding: 7px 0; }
  html.menu .scroll { visibility: hidden; }
}

/* large on the page already: a click goes closer */
.sequence .w,
.single .w,
.frame .w { cursor: zoom-in; }

/* ------------------------------------------------------------ the works lie on the paper
   a soft shadow, lit from almost straight above: even all round, a little lower at the
   bottom. a transparent work (a book, a sketchbook) casts it from its own outline. */

:root {
  --lift: 0 3px 22px rgb(30 30 30 / .28), 0 1px 3px rgb(30 30 30 / .16);
  --lift-cut: drop-shadow(0 3px 18px rgb(30 30 30 / .3)) drop-shadow(0 1px 2px rgb(30 30 30 / .18));
}
.stage img,
.column img,
.cover img { box-shadow: var(--lift); }

.stage img.cut,
.column img.cut,
.cover img.cut { box-shadow: none; filter: var(--lift-cut); }