/*
 * VESTIGE CMS-driven theme layer for Indexhibit 2.1.x
 * Content, titles, order, visibility, text and images remain editable in Indexhibit Admin.
 */
:root {
  --v-bg: #fff;
  --v-paper: #fff;
  --v-text: #111;
  --v-muted: #72726d;
  --v-line: #d8d8d2;
  --v-pad: clamp(16px, 2.2vw, 34px);
  --v-max: 1760px;
  --v-reading: 840px;
}

html, body { margin: 0; background: var(--v-bg); color: var(--v-text); }
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body * { box-sizing: border-box; }
a:link, a:visited { color: inherit; text-decoration: none; }

/* HEADER */
#index {
  position: sticky !important;
  z-index: 1000;
  top: 0;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: #fff !important;
  border-bottom: 1px solid var(--v-line);
  backdrop-filter: none;
}
#index > .container {
  width: min(100%, var(--v-max));
  margin: 0 auto;
  padding: 18px var(--v-pad) 15px !important;
}
.vestige-header {
  display: grid;
  grid-template-columns: minmax(120px, .7fr) minmax(0, 3fr);
  align-items: center;
  gap: 28px;
}
.vestige-brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  width: fit-content;
}
.vestige-brand img {
  display: block;
  width: auto;
  height: 68px;
  max-width: min(500px, 60vw);
  object-fit: contain;
}
.vestige-primary-nav {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}
.vestige-primary-nav a,
.vestige-subnav a {
  position: relative;
  display: inline-block;
  font-size: 18px;
  line-height: 1.2;
}
.vestige-primary-nav a {
  text-transform: uppercase;
  letter-spacing: .055em;
  padding-bottom: 3px;
}
.vestige-primary-nav a::after,
.vestige-subnav a::after {
  content: '';
  position: absolute;
  height: 1px;
  left: 0;
  right: 100%;
  bottom: 0;
  background: currentColor;
  transition: right 150ms ease;
}
.vestige-primary-nav a:hover::after,
.vestige-primary-nav a.is-active::after,
.vestige-subnav a:hover::after,
.vestige-subnav a.is-active::after { right: 0; }
.vestige-primary-nav a.is-active,
.vestige-subnav a.is-active { font-weight: 700; }

.vestige-context-row {
  display: grid;
  grid-template-columns: minmax(120px, .7fr) minmax(0, 3fr);
  gap: 28px;
  align-items: start;
  padding-top: 11px;
  margin-top: 12px;
  border-top: 1px solid var(--v-line);
}
.vestige-context-title {
  font-size: 16.5px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .065em;
  color: var(--v-muted);
}
.vestige-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
}
.vestige-subnav a { color: var(--v-muted); padding-bottom: 2px; }
.vestige-subnav a:hover, .vestige-subnav a.is-active { color: var(--v-text); }

/* PAGE */
#exhibit {
  margin: 0 !important;
  width: 100% !important;
  min-height: calc(100vh - 66px);
  background: var(--v-paper);
}
#exhibit > .container {
  width: min(100%, var(--v-max));
  margin: 0 auto;
  padding: clamp(34px, 5vw, 80px) var(--v-pad) clamp(70px, 9vw, 140px) !important;
}
#exhibit p, #exhibit code, #exhibit blockquote {
  width: auto !important;
  max-width: var(--v-reading);
  margin: 0 0 1em;
}
#exhibit h1, #exhibit h2, #exhibit h3, #exhibit h4 {
  max-width: 1100px;
  margin-top: 0;
}
#exhibit h1 { font-size: clamp(31px, 4.6vw, 72px); line-height: .98; letter-spacing: -.036em; font-weight: 500; }
#exhibit h2 { font-size: clamp(22px, 2.6vw, 42px); line-height: 1.04; letter-spacing: -.023em; font-weight: 500; }
#exhibit h3 { font-size: clamp(17px, 1.6vw, 25px); line-height: 1.17; font-weight: 500; }
#exhibit img { max-width: 100% !important; height: auto !important; }
#exhibit .captioning { max-width: 900px; margin-top: 7px; color: var(--v-muted); font-size: 11px; line-height: 1.35; }
#exhibit .captioning .title, #exhibit .captioning .caption { font-size: inherit; font-style: normal; line-height: inherit; }
#exhibit a:link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#exhibit a:hover { text-decoration: none; }

/* HOME PROJECTS — populated from Indexhibit sections */
.vestige-projects { margin-top: clamp(48px, 7vw, 105px); }
.home-1 .vestige-projects:first-child { margin-top: 0; }
.vestige-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 0 0 12px;
  margin-bottom: 1px;
  border-bottom: 1px solid var(--v-line);
  color: var(--v-muted);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vestige-project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--v-line);
  background: var(--v-line);
}
.vestige-project-card {
  display: block;
  min-width: 0;
  overflow: hidden;
  background: var(--v-paper);
}
.vestige-project-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
}
.vestige-project-media img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform 240ms ease;
}
.vestige-project-card:hover .vestige-project-media img { transform: scale(1.012); }
.vestige-project-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #8a8a84;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vestige-project-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 8px 5px;
  background: rgba(255,255,255,.93);
  border: 1px solid rgba(0,0,0,.18);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vestige-project-badge.is-current { background: rgba(255,255,255,.93); }
.vestige-project-badge.is-upcoming { background: rgba(255,255,255,.96); }
.vestige-project-badge.is-past { background: rgba(255,255,255,.96); color: var(--v-muted); }
.vestige-project-copy { padding: 15px 15px 19px; }
.vestige-project-line { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.vestige-project-line h2 { margin: 0; font-size: clamp(20px, 2vw, 31px) !important; line-height: 1.04 !important; font-weight: 500 !important; }
.vestige-project-year { flex: 0 0 auto; color: var(--v-muted); font-size: 11px; }
.vestige-project-copy p { margin: 13px 0 0 !important; max-width: 62ch !important; color: var(--v-muted); font-size: 13px; line-height: 1.4; }

/* FOOTER — content comes from Indexhibit Site > Bottom */
.vestige-footer { border-top: 1px solid var(--v-line); background: var(--v-bg); }
.vestige-footer-inner { width: min(100%, var(--v-max)); margin: 0 auto; padding: 18px var(--v-pad) 24px; color: var(--v-muted); font-size: 11px; line-height: 1.45; }
.vestige-footer-inner p { margin: 0 0 4px; }

@media (max-width: 850px) {
  #index { position: relative !important; }
  .vestige-header { grid-template-columns: 1fr; gap: 12px; }
  .vestige-primary-nav { justify-content: center; gap: 8px 17px; }
  .vestige-context-row { grid-template-columns: 1fr; gap: 8px; }
  .vestige-project-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 15px; }
  #index > .container { padding: 16px 15px 13px !important; }
  .vestige-brand img { height: 60px; max-width: 78vw; }
  .vestige-primary-nav a { font-size: 16.5px; }
  .vestige-subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .vestige-subnav::-webkit-scrollbar { display: none; }
  #exhibit > .container { padding: 29px 15px 72px !important; }
  .vestige-project-copy { padding: 12px 12px 16px; }
  .vestige-project-badge { left: 9px; top: 9px; }
}

/* =========================================================
   VESTIGE 2026 — IMAGE-FIRST CMS EXTENSIONS
   All images below are sourced from Indexhibit Admin.
   ========================================================= */

/* MAIN PAGE
   Main/Home page image #1 = primary main visual.
   Additional images = secondary image grid.
   Native Indexhibit image holders are hidden only when they contain images,
   preventing duplicate rendering while leaving non-image media untouched. */
.vestige-main-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 22px);
  margin: 0 0 clamp(34px, 5vw, 78px);
}
.vestige-main-image {
  margin: 0;
  min-width: 0;
}
.vestige-main-image.is-primary {
  grid-column: 1 / -1;
}
.vestige-main-image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: 82vh;
  object-fit: cover;
}
.vestige-main-image.is-primary img {
  min-height: min(54vw, 760px);
  object-fit: cover;
}
.vestige-main-image figcaption {
  display: flex;
  gap: 8px 14px;
  flex-wrap: wrap;
  margin-top: 7px;
  color: var(--v-muted);
  font-size: 11px;
  line-height: 1.35;
}
.vestige-main-image figcaption .title { color: var(--v-text); }
@supports selector(.picture_holder:has(img)) {
  .vestige-is-home #img-container .picture_holder:has(img) { display: none !important; }
}

/* PROJECT CONTENT — keep text compact and let images dominate. */
.vestige-is-project #exhibit p,
.vestige-is-project #exhibit blockquote {
  max-width: 66ch;
}
.vestige-is-project #img-container {
  max-width: 100%;
}
.vestige-is-project #img-container img {
  max-width: 100% !important;
  height: auto !important;
}

/* ARTISTS INDEX
   Artist detail pages are regular Indexhibit pages in the same project Section.
   Set their Year field to ARTIST. First image becomes the thumbnail. */
.vestige-artists-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.3vw, 38px) clamp(12px, 1.7vw, 28px);
  margin-top: clamp(32px, 5vw, 72px);
}
.vestige-artist-card {
  display: block;
  min-width: 0;
}
.vestige-artist-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #fff;
}
.vestige-artist-thumb img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform 220ms ease;
}
.vestige-artist-card:hover .vestige-artist-thumb img { transform: scale(1.012); }
.vestige-artist-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--v-muted);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.vestige-artist-name {
  padding-top: 9px;
  font-size: 16px;
  line-height: 1.25;
}
.vestige-is-artist-detail #exhibit > .container {
  padding-top: clamp(28px, 4vw, 58px) !important;
}

/* SUPPORTERS & PARTNERS
   Add each logo as an image in the Indexhibit page. */
.vestige-is-supporters #img-container {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  width: 100% !important;
  max-width: 100% !important;
  background: var(--v-line);
  border: 1px solid var(--v-line);
  margin-top: clamp(28px, 4vw, 56px);
}
.vestige-is-supporters #img-container .picture_holder,
.vestige-is-supporters #img-container .picture {
  float: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  background: #fff;
}
.vestige-is-supporters #img-container .picture {
  display: grid;
  place-items: center;
  min-height: 170px;
  padding: clamp(22px, 3vw, 54px);
}
.vestige-is-supporters #img-container img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 90px;
  object-fit: contain;
}
.vestige-is-supporters #img-container .captioning {
  padding: 0 16px 14px;
  margin: 0;
}

@media (max-width: 850px) {
  .vestige-artists-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vestige-is-supporters #img-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .vestige-main-media { grid-template-columns: 1fr; }
  .vestige-main-image.is-primary { grid-column: auto; }
  .vestige-main-image.is-primary img { min-height: 62vw; }
  .vestige-artists-grid { grid-template-columns: 1fr; }
  .vestige-is-supporters #img-container { grid-template-columns: 1fr 1fr; }
  .vestige-is-supporters #img-container .picture { min-height: 120px; padding: 20px; }
}


/* PROJECT LANDING — SUPPORTERS & PARTNERS · compact institutional marks
   5 columns × 2 rows. Position is controlled by [SLOT:n] in Image Title.
   Logos never upscale; they display at intrinsic size or shrink to fit. */
.vestige-project-supporters {
  margin-top: clamp(42px, 5vw, 76px);
  padding-top: 11px;
  border-top: 1px solid #111;
}
.vestige-project-supporters-heading {
  margin: 0 0 15px;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.vestige-project-supporters-heading a { text-decoration: none !important; }
.vestige-project-supporters-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(50px, auto));
  gap: 12px 20px;
  align-items: center;
  width: min(100%, 760px);
  border: 0;
  background: #fff;
}
.vestige-project-supporter {
  margin: 0;
  min-width: 0;
  grid-column: var(--vestige-logo-col, auto);
  grid-row: var(--vestige-logo-row, auto);
  background: #fff;
  border: 0;
}
.vestige-project-supporter-logo {
  min-height: 50px;
  padding: 2px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vestige-project-supporter-logo img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100px !important;
  max-height: 26px !important;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  transform: none !important;
}
.vestige-project-supporter figcaption { display: none; }

/* Dedicated Supporters page uses the same compact scale. */
.vestige-is-supporters #img-container {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px 20px;
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  border: 0 !important;
  background: #fff !important;
}
.vestige-is-supporters #img-container .picture_holder,
.vestige-is-supporters #img-container .picture {
  float: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  background: #fff !important;
  border: 0 !important;
}
.vestige-is-supporters #img-container .picture {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 2px 0;
}
.vestige-is-supporters #img-container img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100px !important;
  max-height: 26px !important;
  object-fit: contain;
  image-rendering: auto;
  transform: none !important;
}
.vestige-is-supporters #img-container .captioning { display: none; }

@media (max-width: 800px) {
  .vestige-project-supporters-grid,
  .vestige-is-supporters #img-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
  }
  .vestige-project-supporter { grid-column: auto !important; grid-row: auto !important; }
}
@media (max-width: 520px) {
  .vestige-project-supporters-grid,
  .vestige-is-supporters #img-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
  .vestige-project-supporter-logo img,
  .vestige-is-supporters #img-container img { max-width: 88px !important; max-height: 26px !important; }
}