/* ---------------------------------------------------------------- tokens */
:root {
  --color-white: #fff;
  --color-air-50: #f6f8fb;
  --color-air-300: #c0cfe0;
  --color-slate-900: #080a0e;
  --color-blue-600: #1f4fa5;
  --color-blue-700: #173a80;
  --color-signal-500: #c65324;
  --canvas-bg: var(--color-air-50);
  --ink-strong: var(--color-slate-900);
  --link: var(--color-blue-600);
  --link-hover: var(--color-blue-700);
  --focus: var(--color-signal-500);
  --font-heading: "Crimson Text", Georgia, "Times New Roman", serif;
  --font-body: "Helvetica Neue", Arial, sans-serif;
  --fs-body: 1.125rem;
  --fs-h2: 1.65rem;
  --fs-h1: clamp(2rem, 4vw, 3rem);
  --fs-h3: 1.4rem;
  --fs-h4: 1.25rem;
  --fs-h5: 1.125rem;
  --fs-h6: 1rem;
  --fw-heading: 400;
  --fs-nav: 0.95rem;
  --fs-meta: 0.8rem;
  --lh-tight: 1.06;
  --lh-body: 1.65;
  --tracking-display: -0.035em;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --container-max: 1180px;
  --reading-measure: 720px;
  --container-gutter: clamp(20px, 12px + 1.4vw, 44px);
  --section-pad-y: clamp(64px, 36px + 5.5vw, 152px);
  --hero-pad-y-compact: clamp(64px, 7vw, 112px);
  --border-width: 1px;
  --focus-width: 4px;
  --focus-offset: 4px;
  --link-offset: 4px;
  --duration-fast: 160ms;
  --ratio-artwork: 4 / 5;
  --artwork-inset: var(--space-24);
  --z-skip-link: 2;
  --skip-link-hidden-y: -120%;
  --visually-hidden-size: 1px;
  --visually-hidden-offset: -1px;
}

/* ------------------------------------------------------------------ base */
* {
  box-sizing: border-box;
}

html {
  background: var(--canvas-bg);
  color: var(--ink-strong);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--color-white);
  line-height: var(--lh-body);
}

main {
  flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0 0 var(--space-24);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink-strong);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  line-height: var(--lh-tight);
}

h1 {
  font-size: var(--fs-h1);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-size: var(--fs-h4);
}

h5 {
  font-size: var(--fs-h5);
}

h6 {
  font-size: var(--fs-h6);
}

a {
  color: var(--link);
  text-decoration-thickness: var(--border-width);
  text-underline-offset: var(--link-offset);
}

a:hover {
  color: var(--link-hover);
}

:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* ---------------------------------------------------------------- layout */
.layout-container {
  width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.layout-reading {
  max-width: calc(var(--reading-measure) + var(--container-gutter) * 2);
}

.section__inner {
  padding-block: var(--section-pad-y);
}

.content-flow > :last-child {
  margin-bottom: 0;
}

.visually-hidden {
  position: absolute;
  width: var(--visually-hidden-size);
  height: var(--visually-hidden-size);
  padding: 0;
  margin: var(--visually-hidden-offset);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------- components */
.site-header {
  --text-link-color: var(--ink-strong);
  --text-link-hover-color: var(--link);
  background: transparent;
  border: 0;
}

.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  padding: var(--space-24) clamp(20px, 4vw, 64px);
}

.site-header__brand {
  display: inline-flex;
  justify-self: start;
}

.site-header__logo {
  display: block;
  width: clamp(140px, 16vw, 200px);
  height: auto;
}

.site-header__brand {
  color: var(--ink-strong);
  text-decoration: none;
}

.site-header__nav {
  display: flex;
  justify-self: center;
  flex-wrap: wrap;
  gap: var(--space-24);
  font-size: var(--fs-nav);
}

.site-header .social-links {
  justify-self: end;
}

.text-link {
  color: var(--text-link-color);
  text-decoration-line: underline;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: var(--link-offset);
}

.text-link:hover {
  color: var(--text-link-hover-color);
}

.skip-link {
  position: fixed;
  z-index: var(--z-skip-link);
  top: 0;
  left: var(--space-16);
  padding: var(--space-16);
  color: var(--color-white);
  background: var(--ink-strong);
  transform: translateY(var(--skip-link-hidden-y));
}

.skip-link:focus {
  transform: translateY(0);
}

.page-hero--compact .page-hero__inner {
  padding-block: var(--hero-pad-y-compact);
}

.media-grid {
  --media-grid-columns: 2;
  --media-grid-gap: var(--space-24);
  display: grid;
  grid-template-columns: repeat(var(--media-grid-columns), minmax(0, 1fr));
  gap: var(--media-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.media-grid--works {
  --media-grid-columns: 3;
  --media-grid-gap: clamp(24px, 3vw, 48px);
  row-gap: var(--space-48);
  align-items: start;
}

.media-tile {
  min-width: 0;
}

.media-tile__link,
.media-tile__frame,
.media-tile__image {
  cursor: pointer;
}

.media-tile__link {
  display: block;
}

.media-tile__link:hover {
  color: inherit;
}

.media-tile__frame {
  position: relative;
  display: block;
  aspect-ratio: var(--ratio-artwork);
  overflow: hidden;
}

.media-tile__image {
  position: absolute;
  inset: var(--artwork-inset);
  display: block;
  width: calc(100% - 2 * var(--artwork-inset));
  height: calc(100% - 2 * var(--artwork-inset));
  object-fit: contain;
  object-position: center;
  transition: transform var(--duration-fast) ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .media-tile__link:hover .media-tile__image {
    transform: scale(1.025);
  }
}

.artwork-detail__inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  align-items: start;
  gap: clamp(var(--space-48), 7vw, var(--space-96));
  padding-block: var(--section-pad-y);
}

.artwork-detail__visual {
  display: flex;
  min-width: 0;
  justify-content: center;
}

.artwork-detail__image-link {
  display: block;
  cursor: zoom-in;
}

.artwork-detail__image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(78vh, 900px);
  height: auto;
  object-fit: contain;
}

.artwork-detail__information {
  position: sticky;
  top: var(--space-48);
}

.artwork-detail__title {
  margin-bottom: var(--space-8);
}

.artwork-detail__author {
  margin-bottom: var(--space-48);
}

.artwork-detail__metadata {
  margin: 0 0 var(--space-48);
}

.artwork-detail__metadata div {
  display: grid;
  grid-template-columns: minmax(96px, 0.75fr) minmax(0, 1.25fr);
  gap: var(--space-16);
  padding-block: 12px;
  border-bottom: var(--border-width) solid var(--color-air-300);
}

.artwork-detail__metadata div:first-child {
  border-top: var(--border-width) solid var(--color-air-300);
}

.artwork-detail__metadata dt {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.artwork-detail__metadata dd {
  margin: 0;
}

.artwork-detail__back {
  color: var(--ink-strong);
}

.newsletter {
  width: 100%;
  background: var(--color-air-50);
}

.newsletter__inner {
  width: 100%;
  padding: var(--space-64) clamp(20px, 4vw, 64px);
}

.newsletter__content {
  width: min(100%, 700px);
  margin-inline: auto;
}

.newsletter .formkit-form[data-uid="6cf4b41f36"] {
  width: 100% !important;
  margin-inline: 0 !important;
}

.newsletter .formkit-form[data-uid="6cf4b41f36"] [data-style="clean"] {
  padding-top: 0 !important;
  padding-inline: 0 !important;
}

.newsletter .formkit-powered-by-convertkit-container,
.newsletter .formkit-powered-by-convertkit {
  display: none !important;
  visibility: hidden !important;
}

.thank-you__title {
  text-align: center;
}

.about-page__inner {
  display: grid;
  grid-template-columns: minmax(200px, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(var(--space-48), 8vw, var(--space-96));
  max-width: 980px;
  padding-block: var(--section-pad-y);
}

.about-page__portrait {
  display: grid;
  place-items: center;
}

.about-page__image {
  display: block;
  width: min(100%, 240px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.about-page__content {
  max-width: var(--reading-measure);
}

.about-page__contact {
  margin-top: var(--space-48);
}

.about-page__social {
  margin-top: var(--space-24);
}

@media (max-width: 700px) {
  .about-page__inner {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-48);
    padding-block: var(--space-64);
  }
}

@media (max-width: 760px) {
  .artwork-detail__inner {
    grid-template-columns: 1fr;
    gap: var(--space-48);
    padding-block: var(--space-64);
  }

  .artwork-detail__information {
    position: static;
  }

  .artwork-detail__title {
    margin-bottom: var(--space-8);
  }

  .artwork-detail__author {
    margin-bottom: var(--space-24);
  }

  .artwork-detail__image {
    max-height: none;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  .media-grid--works {
    --media-grid-columns: 2;
  }
}
@media (max-width: 600px) {
  .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-8);
    padding: var(--space-16) 12px;
  }
  .site-header__logo {
    width: clamp(90px, 24vw, 120px);
  }
  .site-header__nav {
    gap: var(--space-8);
  }
  .site-header .social-links {
    gap: 0;
  }
  .site-header .social-links__link {
    width: 40px;
    height: 40px;
    padding: 9px;
  }
  .site-header .social-links__link span, .site-header .social-links__link svg {
    width: 22px;
    height: 22px;
  }
  .media-grid--works {
    --media-grid-columns: 1;
    --media-grid-gap: var(--space-48);
    row-gap: var(--space-48);
  }
  .media-tile__frame {
    aspect-ratio: auto;
    background: transparent;
  }
  .media-tile__image {
    position: static;
    width: 100%;
    height: auto;
  }
}
@media (max-width: 340px) {
  .site-header__inner {
    gap: 4px;
    padding-inline: 12px;
  }
  .site-header__logo {
    width: 84px;
  }
  .site-header__nav {
    gap: 4px;
    font-size: 0.85rem;
  }
  .site-header .social-links__link {
    width: 36px;
    height: 36px;
    padding: 8px;
  }
  .site-header .social-links__link span, .site-header .social-links__link svg {
    width: 20px;
    height: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .media-tile__image {
    transition: none;
  }
}
/* Native modal lightbox: the image keeps its natural proportions. */
body.lightbox-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--space-64);
  border: 0;
  background: transparent;
  color: var(--color-white);
  overflow: hidden;
  overscroll-behavior: contain;
}

.lightbox::backdrop {
  background: rgb(0 0 0/90%);
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.lightbox__control {
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--space-48);
  height: var(--space-48);
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-white);
  appearance: none;
  cursor: pointer;
  touch-action: manipulation;
}

.lightbox__control svg {
  display: block;
  width: var(--space-24);
  height: var(--space-24);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.lightbox__control:hover {
  color: var(--color-air-300);
}

.lightbox__close {
  top: max(var(--space-16), env(safe-area-inset-top));
  right: max(var(--space-16), env(safe-area-inset-right));
}

.lightbox__previous {
  left: max(var(--space-16), env(safe-area-inset-left));
  top: calc(50% - var(--space-24));
}

.lightbox__next {
  right: max(var(--space-16), env(safe-area-inset-right));
  top: calc(50% - var(--space-24));
}

.lightbox__description {
  position: absolute;
  bottom: max(var(--space-16), env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 160px);
  margin: 0;
  text-align: center;
  font-size: var(--fs-meta);
  pointer-events: none;
}

@media (max-width: 600px) {
  .lightbox {
    padding: calc(var(--space-64) + env(safe-area-inset-top)) var(--space-16) calc(var(--space-96) + env(safe-area-inset-bottom));
  }
  .lightbox__previous, .lightbox__next {
    top: auto;
    bottom: max(var(--space-16), env(safe-area-inset-bottom));
  }
  .lightbox__description {
    bottom: calc(max(var(--space-16), env(safe-area-inset-bottom)) + var(--space-8));
  }
}
/* Local Tabler outline icons: small visuals with generous touch targets. */
.social-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.social-links__link {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 10px;
  color: var(--ink-strong);
  background: transparent;
  text-decoration: none;
}

.social-links__link:hover {
  color: var(--link);
}

.social-links__link span, .social-links__link svg {
  display: block;
  width: 28px;
  height: 28px;
}