/* ─── Fonts ───────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;1,300&family=IBM+Plex+Mono:wght@300;400&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

/* ─── Reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  background: #34363b;
  color: #f1e7d8;
  font-family: 'Lora', serif;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* ─── Layout ──────────────────────────────────────────────────────────────── */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
}

.divider {
  border: none;
  border-top: 0.5px solid #ddd;
  margin: 3.5rem 0;
}

/* ─── Typography helpers ──────────────────────────────────────────────────── */
.label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 300;
  color: #c6bdaf;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.mono {
  font-family: 'DM Mono', monospace;
  font-weight: 300;
}

/* ─── Navigation ──────────────────────────────────────────────────────────── */
.nav {
  padding: 1.75rem 0;
  border-bottom: 0.5px solid rgba(241, 231, 216, 0.16);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  font-style: normal;
  font-weight: 300;
  color: #f6efe4;
  letter-spacing: 0.02em;
}

.nav__links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav__links a {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 300;
  color: #c6bdaf;
  letter-spacing: 0.06em;
  transition: color 0.15s;
}

.nav__links a:hover {
  color: #f6efe4;
}

/* ─── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  display: block;
  padding-top: 3rem;
  padding-bottom: 2rem;
}

.hero__statement {
  font-family: 'Lora', serif;
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  font-weight: 400;
  line-height: 1.02;
  color: #f6efe4;
  max-width: 520px;
}

/* ─── Process strip ───────────────────────────────────────────────────────── */
.process-strip {
  padding-bottom: 3.5rem;
}

.process-note {
  font-family: 'Lora', serif;
  font-size: 15px;
  font-style: italic;
  line-height: 1.9;
  color: #666;
  border-left: 1.5px solid #ccc;
  padding-left: 1.25rem;
  max-width: 560px;
}

/* ─── Selected work ───────────────────────────────────────────────────────── */
.homepage .container {
  max-width: 1120px;
}

.selected-work {
  padding-top: 0.75rem;
  padding-bottom: 7rem;
}

.work-grid-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr);
  gap: 2.75rem;
  margin-bottom: 4.75rem;
  align-items: start;
}

.work-grid-top__featured,
.work-grid-bottom .artwork-link {
  display: grid;
  align-content: start;
}

.work-grid-bottom {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 2.5rem;
  align-items: start;
}

.work-grid-top__featured--offset {
  margin-top: 9.5rem;
}

.work-grid-top__featured--primary .artwork__img {
  max-height: 1280px;
}

.artwork-link--bottom-1 {
  grid-column: span 4;
}

.artwork-link--featured .artwork__img,
.artwork-link--bottom-1 .artwork__img,
.artwork-link--bottom-2 .artwork__img,
.artwork-link--bottom-3 .artwork__img,
.artwork-link--bottom-4 .artwork__img {
  height: auto;
}

.artwork-link--bottom-2 {
  grid-column: span 4;
  margin-top: 6rem;
}

.work-grid-top__featured--offset .artwork__img {
  max-height: 1080px;
}

.artwork-link--bottom-3 {
  grid-column: span 3;
  margin-top: 3.5rem;
}

.artwork-link--bottom-1 .artwork__img {
  max-height: 1080px;
}

.artwork-link--bottom-4 {
  grid-column: span 3;
  margin-top: 7.5rem;
}

.artwork-link--bottom-5 {
  grid-column: span 4;
  margin-top: 5rem;
}

.artwork-link--bottom-6 {
  grid-column: 6 / span 5;
  margin-top: 11.5rem;
}

.artwork-link--headache {
  grid-column: 4 / span 7;
  margin-top: 12.5rem;
}

.artwork-link--bottom-2 .artwork__img {
  max-height: 980px;
}

.artwork-link--bottom-3 .artwork__img {
  max-height: 920px;
}

.artwork-link--bottom-4 .artwork__img {
  max-height: 1000px;
}

.artwork-link--bottom-5 .artwork__img {
  max-height: 980px;
}

.artwork-link--bottom-6 .artwork__img {
  max-height: 1320px;
}

.artwork-link--headache .artwork__img {
  max-height: 1560px;
}

.artwork {
  cursor: default;
}

.artwork-link {
  display: block;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.artwork-link:hover {
  transform: translateY(-2px);
}

.artwork__img {
  width: 100%;
  object-fit: contain;
  object-position: top;
  background: transparent;
  display: block;
}

.artwork__placeholder {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
}

.artwork__caption {
  margin-top: 0.6rem;
}

.artwork__title {
  font-family: 'Lora', serif;
  font-size: 14px;
  font-style: italic;
  color: #f6efe4;
  display: block;
}

.artwork__meta {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 300;
  color: #c6bdaf;
  margin-top: 0.2rem;
  display: block;
}

.artwork__cta {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 300;
  color: #ece3d7;
  margin-top: 0.45rem;
  display: inline-block;
}

/* ─── About strip ─────────────────────────────────────────────────────────── */
.about-strip {
  padding-bottom: 3.5rem;
}

.about-strip__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.75fr 1fr;
  gap: 3rem;
}

.about-text p {
  font-family: 'Lora', serif;
  font-size: 15px;
  line-height: 1.9;
  color: #ede4d9;
  margin-bottom: 1rem;
}

.about-text p:last-child {
  margin-bottom: 0;
}

/* Process photos column */
.process-photos {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.process-photo__wrap img,
.process-photo__wrap {
  width: 100%;
  object-fit: cover;
  background: #e8e4dd;
  display: block;
}

.process-photo__caption {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 300;
  color: #c6bdaf;
  margin-top: 0;
  line-height: 1.45;
}

.text-link {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 300;
  color: #ece3d7;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.text-link:hover,
.footer__instagram:hover {
  color: #f6efe4;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 42px;
  padding: 0.7rem 1rem;
  border: 1px solid #f1e7d8;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease;
}

.button-link:hover {
  background: #f1e7d8;
  color: #34363b;
}

/* CV column */
.cv-section {
  margin-bottom: 1.5rem;
}

.cv-section:last-child {
  margin-bottom: 0;
}

.cv-section__heading {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 300;
  color: #c6bdaf;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.cv-entry {
  margin-bottom: 0.75rem;
}

.cv-entry:last-child {
  margin-bottom: 0;
}

.cv-entry__title {
  font-family: 'Lora', serif;
  font-size: 13px;
  color: #f6efe4;
  line-height: 1.5;
}

.cv-entry__detail {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 300;
  color: #c6bdaf;
  line-height: 1.6;
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.footer {
  border-top: 0.5px solid rgba(241, 231, 216, 0.16);
  padding: 2rem 0 4.5rem;
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__email {
  font-family: 'Lora', serif;
  font-size: 14px;
  font-style: italic;
  color: #f6efe4;
  transition: opacity 0.15s;
}

.footer__email:hover {
  opacity: 0.6;
}

.footer__instagram {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 300;
  color: #c6bdaf;
}

/* ─── Work page ───────────────────────────────────────────────────────────── */
.work-page {
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.work-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.work-gallery .artwork {
  cursor: pointer;
}

.work-gallery .artwork__img {
  height: auto;
  width: 100%;
  object-fit: unset;
  transition: opacity 0.2s;
}

.work-gallery .artwork:hover .artwork__img {
  opacity: 0.85;
}

/* ─── Work detail ─────────────────────────────────────────────────────────── */
.work-detail {
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.work-detail__content {
  display: grid;
  gap: 2.5rem;
}

.work-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.75fr);
  gap: 3rem;
  align-items: start;
}

.work-detail__figure {
  margin: 0;
}

.work-detail__image {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: #e8e4dd;
}

.work-detail__meta {
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 2rem;
}

.work-detail__title {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.4;
}

.work-detail__spec {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 300;
  color: #c6bdaf;
  letter-spacing: 0.05em;
}

.work-detail__note {
  font-size: 15px;
  line-height: 1.9;
  color: #ede4d9;
}

.work-detail__actions {
  display: grid;
  gap: 0.9rem;
}

.work-detail__related {
  display: grid;
  gap: 1rem;
}

.work-detail__placeholder {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.75fr);
  gap: 3rem;
}

.work-detail__placeholder-image {
  min-height: 540px;
}

.work-detail__placeholder-copy {
  display: grid;
  align-content: start;
  gap: 0.8rem;
}

.work-detail__placeholder-line {
  height: 18px;
}

.work-detail__placeholder-line--short {
  width: 55%;
}

/* ─── About page ──────────────────────────────────────────────────────────── */
.about-page {
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.about-page__grid {
  display: block;
}

.about-page {
  max-width: 1280px;
  margin: 0 auto;
}

.about-page__media-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.about-page__photo-card {
  margin: 0;
  display: grid;
  gap: 0.45rem;
}

.about-page .artwork__placeholder {
  background: rgba(255, 255, 255, 0.06);
}

.about-page__photo-card--tile {
  gap: 0;
}

.about-page__media {
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
  display: block;
}

video.about-page__media {
  width: 100%;
  max-height: 420px;
}

.about-page__media {
  max-height: 380px;
}

.artwork__placeholder.about-page__media {
  min-height: 300px;
}

.about-page__tile {
  display: grid;
  gap: 1.25rem;
  padding: 0;
  align-content: start;
}

.about-page__tile--bio {
  gap: 1rem;
}

.about-page__photo-card--intro {
  grid-column: 1;
  grid-row: 1;
}

.about-page__photo-card--practice {
  grid-column: 2;
  grid-row: 2;
}

.about-page__photo-card--education {
  grid-column: 3;
  grid-row: 3;
}

.about-page__photo-card--arnold-wide {
  grid-column: 2 / span 2;
  grid-row: 4;
}

.about-page__photo-card--exhibitions {
  grid-column: auto;
  grid-row: auto;
}

.about-page__tile .cv-section {
  margin-bottom: 0;
}

.about-page .about-text p,
.about-page .cv-entry__title,
.about-page .cv-entry__detail,
.about-page .cv-section__heading,
.about-page .label,
.about-page .process-photo__caption {
  opacity: 0.86;
}

/* ─── Empty / error states ────────────────────────────────────────────────── */
.empty-state {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 300;
  color: #c6bdaf;
  letter-spacing: 0.04em;
  padding: 1.5rem 0;
}

.hero--editorial {
  gap: 1.5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  align-items: start;
}

.hero__lead {
  max-width: 420px;
}

.hero--editorial .hero__statement {
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: 0;
  margin-bottom: 0;
}

.hero__visual--editorial {
  position: static;
}

.hero__image--editorial,
.hero__visual--editorial .hero__image-placeholder {
  width: 100%;
  max-height: 620px;
  object-fit: contain;
  object-position: top;
  background: #41444b;
}

.hero__caption {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.85rem;
}

.hero__caption-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c6bdaf;
}

.hero__caption-title {
  font-size: 1rem;
  line-height: 1.2;
  font-style: italic;
}

.hero__caption-meta {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #c6bdaf;
}

.curated-band,
.home-info {
  padding-top: 3.5rem;
}

.curated-band {
  padding-bottom: 0.5rem;
}

.page-intro-block {
  display: grid;
  gap: 0.55rem;
  max-width: 520px;
  margin-bottom: 2rem;
}

.page-title {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.1;
}

.page-copy {
  font-size: 16px;
  line-height: 1.6;
  color: #ede4d9;
}

.curated-band__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  min-height: 0;
}

.curated-band__secondary-placeholder,
.curated-band .artwork__img {
  min-height: 280px;
  object-fit: contain;
}

.home-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.72fr) minmax(220px, 0.72fr);
  gap: 2rem;
  align-items: start;
}

.home-info__about,
.home-info__background,
.home-info__contact {
  display: grid;
  gap: 1rem;
}

.home-info__copy {
  font-size: 16px;
  line-height: 1.6;
  color: #ede4d9;
}

/* ─── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .container {
    padding: 0 1.25rem;
  }

  .nav__links {
    gap: 1.25rem;
  }

  .hero {
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
  }

  .work-grid-top {
    grid-template-columns: 1fr;
  }

  .work-grid-top {
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .work-grid-bottom {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .work-grid-top__featured--offset,
  .artwork-link--bottom-1,
  .artwork-link--bottom-2,
  .artwork-link--bottom-3,
  .artwork-link--bottom-4,
  .artwork-link--bottom-5,
  .artwork-link--bottom-6,
  .artwork-link--headache {
    margin-top: 0;
  }

  .artwork-link--bottom-1,
  .artwork-link--bottom-2,
  .artwork-link--bottom-3,
  .artwork-link--bottom-4,
  .artwork-link--bottom-5,
  .artwork-link--bottom-6,
  .artwork-link--headache {
    grid-column: auto;
  }

  .work-grid-top__featured--primary .artwork__img,
  .work-grid-top__featured--offset .artwork__img,
  .artwork-link--bottom-1 .artwork__img,
  .artwork-link--bottom-2 .artwork__img,
  .artwork-link--bottom-3 .artwork__img,
  .artwork-link--bottom-4 .artwork__img,
  .artwork-link--bottom-5 .artwork__img,
  .artwork-link--bottom-6 .artwork__img,
  .artwork-link--headache .artwork__img {
    max-height: 360px;
  }

  .about-strip__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .curated-band__grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .curated-band__secondary-placeholder,
  .curated-band .artwork__img {
    min-height: 320px;
  }

  .work-detail__grid,
  .work-detail__placeholder {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .work-detail__meta {
    position: static;
  }

  .about-page__media-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .about-page__photo-card--intro,
  .about-page__photo-card--practice,
  .about-page__photo-card--education,
  .about-page__photo-card--arnold-wide,
  .about-page__photo-card--exhibitions {
    grid-column: auto;
    grid-row: auto;
  }

  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .divider {
    margin: 2.5rem 0;
  }
}