/*
 * Sia.L — Archive chapter typography
 * ------------------------------------------------------------
 * Use on EVERY Archive page (Painting, Installation, Early…,
 * and any future chapter). Do not re-declare these sizes locally.
 *
 * Hierarchy (hard rule):
 *   Theme title  (h1)  — large  ·  Installation / Painting
 *   Piece title  (h2)  — smaller ·  Round Heaven… / Secret Garden
 *   Piece title must stay clearly below theme title.
 *
 * Markup for a new Archive chapter:
 *
 *   <link rel="stylesheet" href="css/site-archive.css">
 *
 *   <header class="archive-theme" id="chapter-top">
 *     <h1 class="archive-theme__title" data-i18n="…">Theme</h1>
 *     <p class="archive-theme__year">© YEAR — YEAR SIA LIU</p>
 *     <p class="archive-theme__cat" data-i18n="inst_cat">Archive</p>
 *     <p class="archive-theme__lead" data-i18n="…">Lead sentence.</p>
 *   </header>
 *
 *   <section class="archive-piece" id="piece-id">
 *     <header class="archive-piece__head">
 *       <h2 class="archive-piece__title" data-i18n="…">Work title</h2>
 *       <p class="archive-piece__year">© YEAR SIA LIU</p>
 *       <p class="archive-piece__cat" data-i18n="…">Type</p>
 *       <p class="archive-piece__lead" data-i18n="…">Short note.</p>
 *     </header>
 *     … images …
 *   </section>
 */

.archive-theme {
  max-width: 42rem;
  margin: 0 0 clamp(3rem, 8vh, 5rem);
  scroll-margin-top: 1.5rem;
}

.archive-theme__title {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.08;
  color: #f2edf8;
  margin: 0 0 1.15rem;
}

.archive-theme__year,
.archive-piece__year {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: none;
  color: rgba(242, 237, 248, 0.72);
  margin: 0 0 0.85rem;
}

.archive-theme__cat,
.archive-piece__cat {
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242, 237, 248, 0.55);
  margin: 0 0 1.5rem;
}

.archive-theme__lead,
.archive-piece__lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: #f2edf8;
  margin: 0;
  max-width: 34rem;
}

.archive-piece {
  margin: 0 0 clamp(4rem, 10vh, 6.5rem);
  scroll-margin-top: 4rem;
}

.archive-piece__head {
  max-width: 42rem;
  margin: 0 0 clamp(2rem, 4.5vh, 2.75rem);
}

/* One clear step below theme title — do not enlarge toward theme size */
.archive-piece__title {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: #f2edf8;
  margin: 0 0 0.85rem;
}

.archive-piece__year {
  margin: 0 0 0.65rem;
}

.archive-piece__cat {
  margin: 0 0 1.15rem;
}

.archive-piece__lead {
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
}