/* =========================================================================
   pages.css — Page-specific layouts
   ========================================================================= */

/* =========================================================================
   HOME — hero
   ========================================================================= */
.hero {
  position: relative;
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-6);
  overflow: clip;
}
.hero__email {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lead);
  opacity: 0.85;
  margin-bottom: var(--sp-2);
}
/* Oversized lilac display word sitting behind the portrait */
.hero__word {
  font-family: var(--font-hero);
  font-weight: 400;  /* Asset ships a single weight */
  color: var(--c-lilac);
  font-size: var(--fs-hero);
  line-height: 0.86;
  letter-spacing: -0.01em;
  margin: 0;
  pointer-events: none;
  user-select: none;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: var(--sp-3);
  align-items: start;
}
.hero__portrait {
  align-self: start;
  z-index: 1;
  margin-top: 0;  /* level with the top of the bio, just below the title */
}
.hero__portrait .placeholder { aspect-ratio: 4 / 5; }
/* Portrait photo fills the 4:5 spot */
.hero__portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  background: var(--c-cream);
  border-radius: var(--radius);
}
.hero__bio { max-width: 46ch; }
.hero__bio p { font-size: var(--fs-body); }
.hero__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-top: var(--sp-4);
}
.hero__role {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lead);
  opacity: 0.9;
  margin-top: var(--sp-4);   /* sits under the bio (the name is now the big title) */
  margin-bottom: var(--sp-4);
}
/* Home hero: two stacked buttons of equal width; the second is the secondary (outlined) style */
.hero__buttons { display: flex; flex-direction: column; gap: var(--sp-2); width: max-content; max-width: 100%; }
.hero__buttons .btn { text-align: center; border: 1px solid var(--c-lilac); }
.btn--outline { background: transparent; color: var(--c-lilac); font-weight: 600; border: 1px solid var(--c-lilac); }
.btn--outline:hover { background: var(--c-lilac); color: #1c1922; }
@media (max-width: 820px) {
  .hero__grid { grid-template-columns: 1fr; margin-top: var(--sp-2); }
  /* Phones/tablets: portrait comes first, right under the "Portfolio" title */
  .hero__portrait { order: -1; margin-top: 0; }
  /* Asset is very wide; scale to viewport so "Portfolio" fits on one line */
  .hero__word { font-size: clamp(1.4rem, 8vw, 5rem); }
}

/* Home: "Latest Project(s)" list */
.project-list li { margin-bottom: var(--sp-2); font-size: var(--fs-lead); font-family: var(--font-serif); }
.project-list--bullets { margin-top: var(--sp-2); padding-left: var(--sp-3); }
.project-list--bullets li { list-style: disc; margin-bottom: var(--sp-1); }

/* Home: "Select Works" — larger image tiles, each with its title underneath.
   Only the image is a link; the title is plain text. */
.works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5) var(--sp-4);
  margin-bottom: var(--sp-2);
}
@media (max-width: 1000px) { .works { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3); } }
@media (max-width: 520px)  { .works { gap: var(--sp-4) var(--sp-2); } }
/* Small hint under the "Select Works" heading */
.works-hint {
  margin: calc(var(--sp-2) * -1) 0 var(--sp-4);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  opacity: 0.8;
}
.work { margin: 0; min-width: 0; }
.works img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
}
/* A wide slide shown whole (not cropped) on black, like the page behind it */
.work--slide img { object-fit: contain; background: var(--c-black); }
.work-thumb {
  display: block;
  transition: opacity var(--transition), transform var(--transition);
}
.work-thumb:hover { opacity: 0.85; transform: translateY(-3px); }
.work__title {
  margin-top: var(--sp-2);
  font-family: var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(0.8rem, 0.5rem + 0.7vw, 1.1rem);
  line-height: 1.2;
  color: var(--c-lilac);
  overflow-wrap: anywhere;
}

/* Home: "About" — portrait + bio on the dark page */
.about { align-items: start; }
.about__media img,
.about__media .placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
}
.about__title {
  font-family: var(--font-display);
  font-size: var(--fs-d2);
  text-align: center;
  margin-bottom: var(--sp-5);   /* sits above both the photo and the text */
}
.about__body p {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  max-width: 60ch;
  margin-bottom: var(--sp-4);
}
.about__latest { margin-top: var(--sp-5); }

/* Home: "Inquiries" — contact form on the dark page */
.inquiries { scroll-margin-top: var(--nav-h); }
.inquiries__intro {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  text-align: center;
  max-width: 52ch;
  margin: 0 auto var(--sp-5);
}
.inquiries__acq { text-align: center; max-width: none; margin: calc(var(--sp-3) * -1) 0 var(--sp-5); font-family: var(--font-serif); font-size: var(--fs-lead); }
.inquiries__acq .btn { margin-left: var(--sp-2); }
.inquiry { max-width: 720px; margin-inline: auto; display: grid; gap: var(--sp-3); }
.inquiry__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 620px) { .inquiry__row { grid-template-columns: 1fr; } }
.inquiry label { display: block; font-family: var(--font-serif); font-size: var(--fs-lead); margin-bottom: 0.4rem; }
.inquiry__optional { font-style: italic; opacity: 0.7; font-size: 0.9em; }
.inquiry input,
.inquiry select,
.inquiry textarea {
  display: block;
  width: 100%;
  padding: 0.8em 1em;
  background: var(--c-near-black);
  color: var(--on-dark);
  border: 1px solid rgba(243, 242, 240, 0.35);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: border-color var(--transition);
}
.inquiry textarea { min-height: 11rem; resize: vertical; line-height: var(--lh-body); }
.inquiry input:focus,
.inquiry select:focus,
.inquiry textarea:focus { border-color: var(--c-lilac); }
/* spam trap: off-screen, not display:none (so bots still see it) */
.inquiry__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.inquiry__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.inquiry .btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.inquiry__status { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lead); margin: 0; max-width: none; }
.inquiry__status--ok { color: var(--c-lilac-soft); }
.inquiry__status--error { color: var(--on-dark); }

/* Acquisitions — available works (shown whole, never cropped) */
.acq-section { padding-top: var(--sp-6); scroll-margin-top: var(--nav-h); }
.acq-grid {
  display: grid;
  /* cards are 300-400px wide and centered, so one work (or a few) sits in the middle */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 400px));
  justify-content: center;
  align-items: stretch;   /* cards in a row share one height, so their buttons line up at the bottom */
  gap: var(--sp-6) var(--sp-4);
  margin-top: var(--sp-5);
}
.acq-work { display: flex; flex-direction: column; }
.acq-work__image { border-radius: var(--radius); }
/* Every main picture sits in the same square frame so the cards line up; the whole work
   is always shown (never cropped), on a soft light background */
.acq-work__image > .g-link:first-child { display: block; }
.acq-work__image > .g-link:first-child img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--c-white);
  border-radius: var(--radius);
}
.acq-work__image .placeholder { aspect-ratio: 1 / 1; }
/* Extra views (back, signature, certificate): one compact row of thumbnails; the row keeps
   the same height on every card, so the text underneath starts at the same place */
.acq-work__views { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); min-height: 56px; margin-top: var(--sp-2); }
.acq-work__views-label { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-small); opacity: 0.8; margin-right: var(--sp-1); }
@media (max-width: 420px) { .acq-work__views-label { display: none; } }
.acq-work__thumb { display: block; flex: none; border-radius: var(--radius); transition: opacity var(--transition); }
.acq-work__thumb:hover { opacity: 0.75; }
.acq-work__thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius); display: block; }
.acq-work__info { display: flex; flex-direction: column; align-items: flex-start; padding-top: var(--sp-3); flex: 1; }
.acq-work__artist { font-family: var(--font-sans); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.95rem; color: var(--c-lilac); margin: 0; }
.acq-work__title { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-snug); margin-top: var(--sp-1); }
.acq-work__meta { font-family: var(--font-serif); font-size: var(--fs-small); opacity: 0.8; margin-top: var(--sp-1); }
.acq-work__status { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; margin: var(--sp-2) 0 0; }
.acq-work__status::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; margin-right: 0.6em; background: currentColor; }
.acq-work__status--available { color: var(--c-lilac-soft); }
.acq-work__status--reserved,
.acq-work__status--sold { color: var(--on-dark-dim); }
.acq-work__status--sold { margin-bottom: var(--sp-3); }
.acq-work__price { font-family: var(--font-serif); font-style: italic; margin: var(--sp-1) 0 var(--sp-3); }
.acq-work__inquire { margin-top: auto; }

/* =========================================================================
   INFO
   ========================================================================= */
.info-intro { padding-block: var(--sp-6); }
.info-portrait .placeholder { aspect-ratio: 3 / 4; }
.info-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
}
.info-contact { font-family: var(--font-serif); font-size: var(--fs-lead); }
.info-contact .info-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-d2);
  margin-bottom: var(--sp-3);
}
.info-contact p { margin-bottom: var(--sp-3); }
.info-contact .link { overflow-wrap: normal; }
.info-summary { margin: var(--sp-4) auto 0; text-align: center; font-family: var(--font-serif); max-width: 80ch; }
@media (max-width: 620px) {
  /* Phones: each email on its own line, never split mid-address */
  .info-emails .link { display: block; width: fit-content; }
  .info-emails .info-sep { display: none; }
  .info-emails .link + .info-sep + .link { margin-top: var(--sp-1); }
  /* long centred paragraphs are hard to read on a narrow screen */
  .info-summary { text-align: left; }
}

/* résumé-style blocks */
.resume-block { margin-bottom: var(--sp-5); }
.resume-block__org { font-family: var(--font-serif); font-size: var(--fs-lead); }
.resume-block__role { font-family: var(--font-serif); font-style: italic; margin-block: var(--sp-1) var(--sp-2); opacity: 0.9; }
.resume-list li {
  list-style: disc;
  margin-left: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-family: var(--font-serif);
  max-width: 90ch;
}
.skills-group { margin-bottom: var(--sp-4); }
.skills-group h3 { font-family: var(--font-serif); font-style: italic; font-weight: 700; margin-bottom: var(--sp-2); }
.skills-group li { list-style: disc; margin-left: var(--sp-3); margin-bottom: var(--sp-1); font-family: var(--font-serif); }

.meta-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 720px) { .meta-cols { grid-template-columns: 1fr; } }
.meta-cols h3 {
  font-family: var(--font-serif); font-weight: 700;
  text-decoration: underline; text-underline-offset: 4px;
  margin-bottom: var(--sp-3); color: var(--c-lilac-soft);
}
.meta-cols li, .meta-cols p { font-family: var(--font-serif); margin-bottom: var(--sp-1); }

/* =========================================================================
   PROJECT PAGES (Virtual Exhibition, Migration, Dissertation, Post-Maoism)
   ========================================================================= */
.project-hero { padding-block: var(--sp-6); }
.project-hero__subtitle {
  font-family: var(--font-serif);
  font-size: var(--fs-d2);
  margin-block: var(--sp-3) var(--sp-4);
  max-width: 22ch;
}
.project-hero__intro { font-family: var(--font-sans); max-width: 62ch; margin-top: var(--sp-3); }
/* Toasty Gold page header: text with the company logo beside it */
.social-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-5);
}
.social-hero__logo {
  grid-column: 2;
  grid-row: 1;
  width: clamp(150px, 18vw, 240px);
  height: auto;
  clip-path: circle(49%);   /* trims the white square corners around the round badge */
}
.social-hero__text { grid-column: 1; grid-row: 1; }
.social-hero__links { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.social-hero__links .btn { border: 1px solid var(--c-lilac); text-align: center; }
@media (max-width: 620px) { .social-hero__links { flex-direction: column; width: max-content; max-width: 100%; } }
@media (max-width: 760px) {
  .social-hero { grid-template-columns: 1fr; gap: var(--sp-3); }
  .social-hero__logo { grid-column: 1; width: 130px; }
  .social-hero__text { grid-row: 2; }
}
/* Social media posts (Toasty Gold page): image beside its caption, stacked on phones */
.social-posts { display: grid; gap: var(--sp-6); }
.social-post {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.social-post__media img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.social-post__title { font-family: var(--font-serif); font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.social-post__caption p { font-family: var(--font-sans); margin-bottom: var(--sp-2); max-width: 60ch; }
.social-post__media .g-link { display: block; }
.social-post__platform {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  margin-bottom: var(--sp-1);
}
.social-post__more { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--on-dark-dim); margin: var(--sp-3) 0 var(--sp-1); }
.social-post__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1); }
.social-post__thumbs img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
/* Thumbnails spread in one row across the full width under the post */
.social-post__thumbs--row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); }
@media (max-width: 900px) { .social-post__thumbs--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.social-post__thumbs--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
@media (max-width: 620px) { .social-post__thumbs--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.social-post__thumbs--square img { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: cover; }
/* Posts where each image had its own description: cards across the full width */
.social-post__slides { grid-column: 1 / -1; }
.social-slides {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-3);
}
@media (max-width: 900px) { .social-slides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .social-slides { grid-template-columns: 1fr; } }
.social-slide img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.social-slide__title { font-family: var(--font-serif); font-size: var(--fs-h3); margin: var(--sp-2) 0 var(--sp-1); }
.social-slide figcaption p { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--on-dark-dim); }
/* Two stand-alone posters side by side */
.social-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); max-width: 820px; }
.social-pair img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
@media (max-width: 520px) { .social-pair { grid-template-columns: 1fr; } }
/* A larger set of stand-alone posters: three across, two on phones */
.social-pair--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
@media (max-width: 760px) { .social-pair--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Landscape posts (e.g. stories shared wide): image full width, caption below */
.social-post--wide { grid-template-columns: 1fr; gap: var(--sp-3); }
/* Tall phone-shaped posts: keep the image from towering over the caption */
.social-post--tall .social-post__media img { max-width: 400px; margin-inline: auto; }
.social-post__tags { color: var(--c-lilac); font-size: var(--fs-small); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .social-post { grid-template-columns: 1fr; gap: var(--sp-3); }
}
.project-hero__meta { margin-top: var(--sp-4); font-family: var(--font-sans); opacity: 0.85; }
.project-body .prose p { font-family: var(--font-sans); margin-bottom: var(--sp-3); max-width: 78ch; }
.bg-light .project-body .prose p { color: var(--on-light); }
.project-figures { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; margin-top: var(--sp-5); }
@media (max-width: 720px) { .project-figures { grid-template-columns: 1fr; } }
.project-figures img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
/* A column of stacked figures within a project-figures grid cell */
.fig-stack { display: flex; flex-direction: column; gap: var(--sp-5); }

/* Migration — two separate works, side by side */
.migration-works { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
@media (max-width: 720px) { .migration-works { grid-template-columns: 1fr; gap: var(--sp-6); } }
.work-card { display: flex; flex-direction: column; align-items: flex-start; }
.work-card__title { font-family: var(--font-serif); font-size: var(--fs-h1); line-height: var(--lh-snug); }
.work-card__sub { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lead); opacity: 0.9; margin: var(--sp-2) 0 var(--sp-4); max-width: 42ch; }
.work-card__meta { text-align: left; margin-top: var(--sp-2); }

/* Venice Biennale — sectioned galleries in justified rows (photos shown uncropped) */
.jump { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-4); font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lead); }
.jump a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; opacity: 0.9; transition: opacity var(--transition); }
.jump a:hover { opacity: 0.6; }

.venice-section { padding-top: var(--sp-6); scroll-margin-top: var(--nav-h); }
.venice-section__title {
  font-family: var(--font-hero);
  font-weight: 400;
  font-size: clamp(1.5rem, 4.5vw, 2.7rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--c-lilac);
  margin-bottom: var(--sp-5);
  overflow-wrap: anywhere;
}
.g-group { margin-bottom: var(--sp-6); }
.g-group__title { margin-bottom: var(--sp-3); }
.g-grid {
  --row-h: clamp(120px, 20vw, 240px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.g-grid::after { content: ""; flex-grow: 1000000; }   /* keeps a short last row from stretching */
.g-item {
  flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row-h));
  min-width: 0;
  margin: 0;
}
.g-item img, .g-item video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--c-near-black);
}
.g-link { display: block; transition: opacity var(--transition); }
.g-link:hover { opacity: 0.85; }
.g-item .caption { margin-top: var(--sp-1); font-size: 0.8rem; }

/* Lightbox (photo viewer) */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.92); }
.lightbox__stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--sp-5) var(--sp-3) var(--sp-6); }
.lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); }
.lightbox__bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); color: var(--c-white); font-family: var(--font-serif); font-style: italic; }
.lightbox__btn { color: var(--c-white); width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1; border-radius: 50%; background: rgba(255,255,255,0.12); transition: background var(--transition); }
.lightbox__btn:hover { background: rgba(255,255,255,0.25); }
.lightbox__close { position: fixed; top: var(--sp-2); right: var(--sp-2); }
.lightbox__nav { display: flex; gap: var(--sp-1); }

/* Hallockville — stacked presentation slides */
.slide-deck { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 1080px; margin-inline: auto; }
.slide-deck img { display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* Poster/image in a project hero (shown whole, not cropped) */
.hero-poster { display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* Dissertation — title-page styling */
.diss-title { padding-block: var(--sp-7) var(--sp-6); }
.diss-meta {
  list-style: none;
  text-align: right;
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: 1.85;
  opacity: 0.92;
  margin-bottom: var(--sp-7);
}
.diss-heading {
  font-family: var(--font-hero);
  font-weight: 400;                 /* Asset ships a single weight */
  font-size: clamp(1.05rem, 3vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--c-lilac);
  max-width: 26ch;
  margin-inline: auto;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Dissertation — table of contents with dotted leaders */
.toc { list-style: none; max-width: 80ch; margin-inline: auto; }
.toc li { margin-bottom: var(--sp-3); }
.toc__row { display: flex; align-items: baseline; font-family: var(--font-serif); font-size: var(--fs-lead); }
.toc__dots { flex: 1 1 auto; margin: 0 0.6rem; border-bottom: 1px dotted currentColor; opacity: 0.45; transform: translateY(-0.25em); }
.toc__page { font-variant-numeric: tabular-nums; opacity: 0.75; }
.toc__chapter { margin-top: var(--sp-4); }
.toc__chapter .toc__label { font-weight: 700; }
.toc__sub { margin-bottom: var(--sp-2); padding-left: var(--sp-4); }
.toc__sub .toc__row { opacity: 0.82; }
@media (max-width: 560px) { .toc__sub { padding-left: var(--sp-3); } }

/* Shared PDF call-to-action (dissertation, virtual exhibition, etc.) */
.pdf-cta { text-align: center; margin-top: var(--sp-8); }
.pdf-cta .caption { margin: var(--sp-2) auto 0; max-width: 60ch; }
.pdf-cta__request { margin-top: var(--sp-4); }
/* Outlined button on the cream sections: dark text and border so it stays readable */
.bg-light .btn--outline { color: var(--on-light); border: 1px solid var(--on-light); }
.bg-light .btn--outline:hover { background: var(--c-lilac); border-color: var(--c-lilac); color: #1c1922; }

/* =========================================================================
   FLESCH — "About Flesch" block (Artists + Acquisitions) and Artists page
   ========================================================================= */
.flesch-about {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: center;
  margin-top: var(--sp-5);
  padding: var(--sp-4) 0;
  border-top: 1px solid rgba(243, 242, 240, 0.2);
  border-bottom: 1px solid rgba(243, 242, 240, 0.2);
  max-width: 62rem;
}
.flesch-about__mark {
  font-family: var(--font-hero);
  color: var(--c-lilac);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1;
  margin: 0;
}
.flesch-about__logo { width: clamp(120px, 14vw, 180px); height: auto; }
.flesch-about__title { font-family: var(--font-serif); font-size: var(--fs-h3); margin-bottom: var(--sp-1); }
.flesch-about__text p { font-family: var(--font-sans); max-width: 62ch; }
@media (max-width: 620px) {
  .flesch-about { grid-template-columns: 1fr; gap: var(--sp-2); }
}
.offer-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  max-width: 900px;
  margin: 0 auto;
}
.offer-list__item {
  padding: var(--sp-3);
  border: 1px solid rgba(182, 172, 198, 0.4);
  border-radius: var(--radius);
}
.offer-list__title { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--c-lilac); margin-bottom: var(--sp-1); }
.offer-list__item p { font-family: var(--font-sans); }
@media (max-width: 620px) { .offer-list { grid-template-columns: 1fr; } }
.inquiry__note { font-family: var(--font-serif); font-style: italic; opacity: 0.8; margin: calc(var(--sp-2) * -1) 0 0; }