@font-face {
  font-family: "Nunito Sans";
  src: url("/fonts/nunito-sans-latin.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@layer reset, base, layout, components;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  img, picture { display: block; max-width: 100%; height: auto; }
  ul, ol { padding: 0; list-style: none; }
  input[type="radio"], input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
}

/* element defaults and utilities */
@layer base {
  :root {
    --paper: #e5e2d9;
    --ink: #1d1711;
    --mute: #6a6358;
    --rule: #bdb8ab;
    --tint: #d9d5ca;
    --accent: #1d1711;
    --light: 200;
    --bold: 500;
    --edge: clamp(1rem, 4vw, 3.5rem);
    --measure: 60ch;
    --small: 0.8125rem;
    --sans: "Nunito Sans", "Avenir Next", Avenir, "Century Gothic", system-ui, sans-serif;
    font-family: var(--sans);
    font-weight: var(--light);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    line-height: 1.6;
    color-scheme: light;
  }

  /* Theme */
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #1d1711; --ink: #e5e2d9; --mute: #a39b8c; --rule: #3f372d; --tint: #2a231b; --accent: #e5e2d9;
  }

  body {
    background: var(--paper);
    color: var(--ink);
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
  }

  a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;

    &:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  }

  h1, h2 { font-weight: var(--light); line-height: 1.15; text-wrap: balance; }
  h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3.25rem); letter-spacing: -0.01em; }
  h2 { font-size: 1.25rem; }

  /* Running text */
  .prose {
    max-width: var(--measure);

    & p + p { margin-block-start: 0.75em; }
  }

  /* The large opening statement: first paragraph big and bold, any further paragraph small and light */
  .lead-text {
    font-size: clamp(1.75rem, 1rem + 2.8vw, 3.5rem);
    line-height: 1.18;
    font-weight: var(--bold);
    letter-spacing: -0.015em;
    max-inline-size: 28ch;
    text-wrap: balance;

    & p + p {
      font-size: 1rem;
      font-weight: var(--light);
      line-height: 1.65;
      letter-spacing: 0;
      max-inline-size: 54ch;
      margin-block-start: 1.5rem;
      color: var(--mute);
      text-wrap: pretty;
    }
  }


  .ref-code { font-size: var(--small); font-variant-numeric: tabular-nums; }

  /* <main> is focusable (tabindex -1) so the skip link moves focus into it in every browser; no ring needed on the container */
  main:focus { outline: none; }

  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  .skip-link {
    position: absolute;
    inset-inline-start: 0.5rem;
    inset-block-start: -4rem;
    background: var(--ink);
    color: var(--paper);
    padding: 0.5rem 1rem;
    z-index: 10;

    &:focus { inset-block-start: 0.5rem; }
  }
}

/* Page structure */
@layer layout {
  .site-header, .site-footer, main > * { padding-inline: var(--edge); }

  .site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.5rem;
    margin-block-end: 3rem;
    border-block-end: 1px solid var(--rule);
  }

  /* Logo is an inline <svg> filled with currentColor. */
  .site-header__logo svg { display: block; width: clamp(7.5rem, 16vw, 10rem); height: auto; color: var(--ink); }

  .site-nav {
    display: flex;
    gap: 1.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    padding-block: 2.5rem;
    margin-block-start: 4rem;
    border-block-start: 1px solid var(--rule);
    font-size: var(--small);
    color: var(--mute);
  }

  .page-intro { display: grid; gap: 1rem; margin-block-end: 3rem; }

  .page-intro__title {
    font-size: clamp(1.75rem, 1rem + 2.5vw, 3rem);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }

  .all-work-link { margin-block-start: -1.5rem; margin-block-end: 3rem; font-size: var(--small); letter-spacing: 0.18em; text-transform: uppercase; text-align: center; }

  .home-statement { margin-block-end: 1rem; }

  /* series grid */
  .series-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: 4rem 2rem;
    margin-block: 4rem;
  }

  /* work grid */
  .work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: 3rem 1.5rem;
  }

  /* work page */
  .work-detail {
    display: grid;
    gap: 2rem;

    @media (width >= 60rem) {
      grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
      gap: 2rem 5rem;
    }
  }

  /* breadcrumb and previous / next share one row above the work */
  .work-detail__topbar {
    display: grid;
    gap: 0.75rem;

    @media (width >= 40rem) { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1rem 2rem; }
    @media (width >= 60rem) { grid-column: 1 / -1; }
  }

  .work-detail__images {
    display: grid;
    gap: 1.5rem;
    justify-items: center;

    & img { max-block-size: calc(100svh - 5rem); inline-size: auto; max-inline-size: 100%; margin-inline: auto; }

    @media (width >= 60rem) { grid-column: 2; grid-row: 2; }
  }

  /* work made of several images has a tiled grid */
  .work-detail__images--grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    justify-items: stretch;
    gap: 1.5rem 1rem;

    & img { max-block-size: none; inline-size: 100%; }
  }

  .work-detail__facts {
    display: grid;
    gap: 1.5rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--rule);

    @media (width >= 60rem) {
      grid-column: 1;
      grid-row: 2;
      grid-template-columns: minmax(0, 1fr);
      gap: 3rem;
      position: sticky;
      inset-block-start: 1.5rem;
      align-self: start;
      border: 0;
      padding: 0;
    }
  }

  .work-detail__title {
    font-weight: var(--bold);

    @media (width >= 60rem) {
      font-size: 1.4rem;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-weight: var(--light);
    }
  }

  .work-detail__list { display: grid; gap: 0.75rem; }

  .work-detail__row {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 1rem;
    padding-block-end: 0.75rem;
    border-block-end: 1px solid var(--rule);
  }

  .work-detail__term { font-size: var(--small); color: var(--mute); }
}

/* Reusable elements */
@layer components {

  .site-nav__item { position: relative; }

  .site-nav__menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: -1rem;
    z-index: 6;
    min-inline-size: 16rem;
    max-inline-size: calc(100vw - 2 * var(--edge));
    padding: 1.25rem 1rem 1rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    visibility: hidden;
    opacity: 0;
    translate: 0 -0.25rem;
    letter-spacing: 0.14em;
  }

  .site-nav__item[data-open] .site-nav__menu,
  .site-nav__item:not([data-dismissed]):is(:hover, :focus-within) .site-nav__menu { visibility: visible; opacity: 1; translate: 0 0; }

  .site-nav__menu-link {
    display: block;
    padding: 0.4rem 0;
    text-decoration: none;

    &:hover, &:focus-visible, &[aria-current] { text-decoration: underline; text-underline-offset: 0.4em; }
  }

  /* narrow screens */
  @media (width < 40rem) {
    .site-header { position: relative; }
    .site-nav__item { position: static; }
    .site-nav__menu { inset-inline-end: var(--edge); }
  }

  .site-nav__menu-link--all { margin-block-start: 0.4rem; padding-block-start: 0.8rem; border-block-start: 1px solid var(--rule); }

  @media (prefers-reduced-motion: no-preference) {
    .site-nav__menu { transition: opacity 0.15s, translate 0.15s; }
  }

  .site-nav__link {
    text-decoration: none;

    &:hover, &[aria-current] { color: var(--accent); text-decoration: underline; text-underline-offset: 0.4em; }
  }

  .site-footer__theme { display: none; }
  .js .site-footer__theme { display: block; }

  .theme-toggle {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;

    &:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
  }

  .breadcrumb {
    font-size: var(--small);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mute);

    & a { text-decoration: none; }
    & a:hover { color: var(--accent); }
  }

  .breadcrumb__item { display: inline; }

  .breadcrumb__item + .breadcrumb__item::before {
    content: "/";
    content: "/" / "";
    margin-inline: 0 0.5em;
  }

  /* filters on the All work page */
  .filters { margin-block-end: 2.5rem; }
  .filters__body { display: grid; gap: 1.25rem; }

  /* The toggle is only needed on a narrow screen; wider, the filters are simply shown */
  .filters__toggle {
    display: none;
    cursor: pointer;
    padding: 0.5rem 0;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-block: 1px solid var(--rule);
    list-style: none;

    &::-webkit-details-marker { display: none; }
    &::after { content: "+"; float: inline-end; }
    &:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

    @media (width < 40rem) { display: block; }
  }

  .filters[open] .filters__toggle::after { content: "\2212"; }
  .filters[open] .filters__body { padding-block-start: 1.25rem; }

  .filter-group { display: grid; gap: 0.5rem; border: 0; padding: 0; min-inline-size: 0; }

  .filter-group__label {
    padding: 0;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mute);
  }

  .filter-group__options { display: flex; flex-wrap: wrap; gap: 0.5rem; }

  .filter-chip {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--rule);
    font-size: var(--small);
    cursor: pointer;

    &:hover { border-color: var(--ink); }
    &:has(:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
    &:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
  }

  .exhibition-list { display: grid; gap: 3rem; max-inline-size: var(--measure); }

  .exhibition__title { font-weight: var(--bold); }

  .exhibition__meta { font-size: var(--small); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }

  .exhibition__body { margin-block-start: 0.75rem; }

  /* A work or series image on a tinted mount */
  .image-frame {
    display: block;
    aspect-ratio: 4 / 5;
    padding: 7%;
    background: var(--tint);

    & picture { display: block; block-size: 100%; }
    & img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  }

  .image-frame--square { aspect-ratio: 1; }

  .series-tile {
    display: block;
    text-align: center;
    text-decoration: none;

    &:hover .image-frame, &:focus-visible .image-frame { outline: 1px solid var(--ink); outline-offset: -1px; }
    &:hover .series-tile__title, &:focus-visible .series-tile__title { text-decoration: underline; text-underline-offset: 0.3em; }
  }

  .series-tile__title {
    display: block;
    margin-block-start: 1.1rem;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .series-tile__count {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
  }

  .work-card {
    display: block;
    text-decoration: none;

    &:hover .image-frame, &:focus-visible .image-frame { outline: 1px solid var(--ink); outline-offset: -1px; }
  }

  .work-card__ref {
    display: block;
    margin-block-start: 0.6rem;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    text-wrap: balance;
    color: var(--mute);
    font-variant-numeric: tabular-nums;
  }

  .enquire-link {
    display: inline-block;
    color: var(--accent);
    font-size: var(--small);
    text-underline-offset: 0.3em;
  }

  /* Previous / next: chevrons only, in the row above the work. The reference codes are in the links' aria-labels. */
  .pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    order: -1;

    @media (width >= 40rem) { order: 0; justify-content: flex-end; }
  }

  .pager__link {
    display: block;
    padding: 0.5rem;
    margin: -0.5rem;
    color: var(--mute);

    &:hover, &:focus-visible { color: var(--ink); }
  }

  .pager__icon {
    display: block;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
  }

  /* image on a work page is the link to full-size view */
  .image-link {
    display: block;
    cursor: zoom-in;
    text-decoration: none;
  }

  /* full-size view <dialog> */
  .image-viewer {
    --viewer-pad: clamp(1rem, 4vw, 3rem);
    inline-size: 100vw;
    block-size: 100dvh;
    max-inline-size: none;
    max-block-size: none;
    margin: 0;
    padding: var(--viewer-pad);
    border: 0;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);

    &[open] { display: grid; place-items: center; }
  }

  .image-viewer__frame { overflow: hidden; line-height: 0; }

  .image-viewer__image {
    display: block;
    inline-size: auto;
    block-size: auto;
    max-inline-size: calc(100vw - 2 * var(--viewer-pad));
    max-block-size: calc(100dvh - 2 * var(--viewer-pad));
  }

  /* HOVER ZOOM, currently off: it applies only to a dialog with the modifier image-viewer--zoomable */
  @media (hover: hover) and (pointer: fine) {
    .image-viewer--zoomable .image-viewer__frame { cursor: crosshair; }
    .image-viewer--zoomable .image-viewer__image { transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%); }
    .image-viewer--zoomable .image-viewer__frame:hover .image-viewer__image { transform: scale(var(--zoom, 2)); }
  }

  @media (prefers-reduced-motion: no-preference) {
    .image-viewer--zoomable .image-viewer__image { transition: transform 0.2s ease-out; }
  }

  .image-viewer__close {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: var(--edge);
    padding: 0.5rem;
    background: none;
    border: 0;
    color: var(--mute);
    cursor: pointer;
    z-index: 1;

    &:hover, &:focus-visible { color: var(--ink); }
  }

  .image-viewer__icon {
    display: block;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
  }

  /* No scrolling behind the open dialog */
  html:has(.image-viewer[open]) { overflow: hidden; }

  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
  }
}