@layer components {
  :root {
    --paper: #ccd6d9;
    --paper-soft: #b9c7cb;
    --ink: #1d292d;
    --muted: #4e5f65;
    --accent: #3d5669;
    --rule: color-mix(in oklab, var(--ink) 22%, transparent);
    --rule-soft: color-mix(in oklab, var(--ink) 12%, transparent);
    --site-max: 88rem;
    --wall-max: 82rem;
  }

  body {
    color: var(--ink);
    background: var(--paper);
  }

  body:has(.lightbox[open]) {
    overflow: hidden;
  }

  .intro {
    inline-size: min(calc(100% - 2rem), var(--site-max));
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(2.75rem, 5vw, 4.5rem);
    border-block-end: 1px solid var(--rule);
  }

  .intro h1 {
    grid-column: 1 / 10;
    font-size: clamp(2.9rem, 6vw, 5.8rem);
    font-weight: 640;
    line-height: .94;
    letter-spacing: -.068em;
    text-wrap: balance;
  }

  .social-list {
    grid-column: 10 / -1;
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem 1rem;
    color: var(--muted);
    font: 600 .7rem/1.35 var(--mono);
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  .social-list a {
    min-block-size: 2rem;
    display: inline-flex;
    align-items: center;
    text-underline-offset: .25rem;
  }

  .social-list a:hover {
    color: var(--accent);
    text-decoration: underline;
  }

  .works-section {
    inline-size: min(calc(100% - 2rem), var(--wall-max));
    margin-inline: auto;
    padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(6rem, 10vw, 10rem);
  }

  .gallery-group + .gallery-group {
    margin-block-start: clamp(2.5rem, 5vw, 4.5rem);
    padding-block-start: clamp(1.25rem, 2.5vw, 2rem);
    border-block-start: 1px solid var(--rule);
  }

  .art-wall {
    columns: 3 16rem;
    column-gap: clamp(1rem, 2.5vw, 2.35rem);
  }

  .art-card {
    inline-size: 100%;
    display: inline-block;
    margin-block: 0 clamp(1.75rem, 3vw, 2.75rem);
    break-inside: avoid;
    vertical-align: top;
  }

  .art-link {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--paper-soft);
    border: 1px solid var(--rule-soft);
  }

  .art-link picture,
  .art-link img {
    inline-size: 100%;
  }

  .art-link img {
    block-size: auto;
    transition: filter .35s ease;
  }

  .art-card figcaption {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-block-start: .7rem;
    padding-block-start: .65rem;
    border-block-start: 1px solid var(--rule);
    color: var(--muted);
    font: 600 .68rem/1.35 var(--mono);
    letter-spacing: .025em;
    text-transform: uppercase;
  }

  .art-medium {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .art-year {
    flex: none;
    text-align: end;
  }

  .site-footer {
    inline-size: min(calc(100% - 2rem), var(--site-max));
    min-block-size: 4.5rem;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    border-block-start: 1px solid var(--rule);
    color: var(--muted);
    font: 600 .66rem/1.4 var(--mono);
    letter-spacing: .045em;
    text-transform: uppercase;
  }

  .site-footer a {
    justify-self: end;
  }

  .site-footer a:hover {
    color: var(--accent);
  }

  .lightbox {
    position: fixed;
    inset: 0;
    inline-size: 100vw;
    block-size: 100vh;
    block-size: 100dvh;
    max-inline-size: 100vw;
    max-block-size: 100vh;
    max-block-size: 100dvh;
    margin: 0;
    border: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    color: #eef1f0;
    color: oklch(94% .006 100);
    background: rgba(20, 29, 31, .97);
    background: color-mix(in oklab, oklch(16% .018 190) 96%, transparent);
    opacity: 0;
    transition: opacity .25s ease;
    transition: opacity .25s ease, display .25s allow-discrete, overlay .25s allow-discrete;
  }

  .lightbox[open] {
    display: block;
    opacity: 1;
  }

  .lightbox::backdrop {
    background: rgba(10, 15, 16, .9);
    background: oklch(12% .015 190 / .9);
  }

  .lightbox-shell {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    min-inline-size: 0;
    min-block-size: 0;
    display: grid;
    padding:
      max(.55rem, env(safe-area-inset-top))
      max(.55rem, env(safe-area-inset-right))
      max(.55rem, env(safe-area-inset-bottom))
      max(.55rem, env(safe-area-inset-left));
    overflow: hidden;
    isolation: isolate;
  }

  .lightbox-close,
  .lightbox-prev,
  .lightbox-next {
    z-index: 2;
    display: grid;
    place-items: center;
    border: 1px solid rgba(240, 245, 244, .22);
    border-color: oklch(90% .008 190 / .22);
    border-radius: 999px;
    color: inherit;
    background: rgba(15, 22, 24, .76);
    background: oklch(14% .018 190 / .7);
    box-shadow: 0 .3rem 1.1rem rgba(5, 10, 11, .24);
    box-shadow: 0 .3rem 1.1rem oklch(8% .01 190 / .24);
    backdrop-filter: blur(10px);
    cursor: pointer;
  }

  .lightbox-close {
    position: absolute;
    inset-block-start: max(.7rem, env(safe-area-inset-top));
    inline-size: 2.9rem;
    block-size: 2.9rem;
    font-size: 1.4rem;
    line-height: 1;
  }

  .lightbox-close {
    inset-inline-end: max(.7rem, env(safe-area-inset-right));
  }

  .lightbox-prev,
  .lightbox-next {
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
    inline-size: 3.4rem;
    block-size: 3.4rem;
    font-size: 1.35rem;
    transition: color .2s ease, opacity .2s ease, background-color .2s ease;
  }

  .lightbox-prev {
    inset-inline-start: max(.7rem, env(safe-area-inset-left));
  }

  .lightbox-next {
    inset-inline-end: max(.7rem, env(safe-area-inset-right));
  }

  .lightbox figure {
    inline-size: 100%;
    block-size: 100%;
    min-inline-size: 0;
    min-block-size: 0;
    grid-area: 1 / 1;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: .75rem;
    overflow: hidden;
  }

  .lightbox-media {
    inline-size: 100%;
    block-size: 100%;
    min-inline-size: 0;
    min-block-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    overscroll-behavior: contain;
    scrollbar-color: oklch(68% .02 190) oklch(18% .018 190);
    touch-action: pan-y pinch-zoom;
    cursor: zoom-out;
  }

  .lightbox-media img {
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
  }

  .lightbox-media img:focus-visible {
    outline-offset: -3px;
  }

  .lightbox.is-zoomed .lightbox-media {
    display: block;
    overflow: auto;
    touch-action: pan-x pan-y pinch-zoom;
  }

  .lightbox.is-zoomed .lightbox-media img {
    max-inline-size: none;
    max-block-size: none;
    display: block;
    margin-inline: auto;
    cursor: zoom-out;
  }

  .lightbox.is-zoomed .lightbox-prev,
  .lightbox.is-zoomed .lightbox-next {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .lightbox figcaption {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem .2rem .15rem;
    border-block-start: 1px solid rgba(230, 236, 234, .28);
    border-block-start-color: color-mix(in oklab, currentColor 28%, transparent);
    color: #c7d0ce;
    color: oklch(82% .01 160);
    font: 600 .68rem/1.35 var(--mono);
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .lightbox-medium {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .lightbox-year {
    flex: none;
  }

  @starting-style {
    .lightbox[open] {
      opacity: 0;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .art-link:hover img {
      filter: saturate(1.04) contrast(1.015);
    }

    .lightbox-close:hover,
    .lightbox-prev:hover,
    .lightbox-next:hover {
      color: oklch(78% .12 210);
      background: rgba(25, 38, 41, .9);
      background: oklch(20% .025 190 / .88);
    }
  }

  @supports (display: grid-lanes) {
    .art-wall {
      columns: auto;
      display: grid-lanes;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(1rem, 2.5vw, 2.35rem);
    }

    .art-wall .art-card {
      display: block;
      margin: 0;
    }
  }

  @media (max-width: 760px) {
    .intro {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      padding-block: 3.25rem 3rem;
    }

    .intro h1,
    .social-list {
      grid-column: 1 / -1;
    }

    .intro h1 {
      font-size: clamp(2.8rem, 14vw, 4.7rem);
    }

    .social-list {
      justify-content: flex-start;
      margin-block-start: 2rem;
    }

    .works-section {
      padding-block-end: 6rem;
    }

    .gallery-group + .gallery-group {
      margin-block-start: 3rem;
    }

    .art-wall {
      columns: 2;
      column-gap: .8rem;
    }

    @supports (display: grid-lanes) {
      .art-wall {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .8rem;
      }
    }

    .art-card {
      margin-block-end: 1.65rem;
    }

    .art-card figcaption {
      min-block-size: 0;
      align-items: start;
      font-size: .62rem;
    }

    .site-footer {
      padding-block: 1rem;
    }

    .lightbox-shell {
      padding:
        max(.35rem, env(safe-area-inset-top))
        max(.35rem, env(safe-area-inset-right))
        max(.35rem, env(safe-area-inset-bottom))
        max(.35rem, env(safe-area-inset-left));
    }

    .lightbox-prev,
    .lightbox-next {
      inline-size: 3rem;
      block-size: 3rem;
      padding: 0;
    }

    .lightbox-close {
      inline-size: 2.75rem;
      block-size: 2.75rem;
    }

    .lightbox figure {
      gap: .45rem;
    }

    .lightbox figcaption {
      font-size: .61rem;
    }

  }

  @media (max-width: 400px) {
    .intro,
    .works-section,
    .site-footer {
      inline-size: min(calc(100% - 1.25rem), var(--site-max));
    }

    .art-wall {
      column-gap: .6rem;
    }

    @supports (display: grid-lanes) {
      .art-wall {
        gap: .6rem;
      }
    }

    .art-card figcaption {
      font-size: .68rem;
    }
  }
}