/* Theme A (tested 7 Oct 2026): Fraunces for titles, Source Serif for running text,
   a subtle grey marker on the subheadings of longer texts, a subtle grey underline on links and behind them on hover.
   Everything else (menu, captions, dates, facts, sources, footer) in IBM Plex Mono; the logo stays as it is.
   Chosen with "theme" in src/_data/site.json; "none" turns it off. Published as /assets/theme.css. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..800;1,9..144,300..800&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&display=swap");

:root {
  --display: "Fraunces", Georgia, serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --mark: #f0f0f0;
  --hover: #f0f0f0;
  --accent: #e3e3e3;
}

/* Everything that is not a title or running text */
body { font-family: var(--mono); font-size: .9375em; letter-spacing: -.01em; }
.logo { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .08em; }
.facts, .work-grid .cap, .grid .cap, .editorial-grid .cap, .editorial-figure figcaption, .editorial-sources, .site-footer { font-size: .78rem; }

/* Titles */
main h1:not(.visually-hidden), main .ex-title {
  font-family: var(--display); font-style: italic; font-weight: 600; letter-spacing: -.01em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.editorial-head h1 { font-weight: 700; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.02; letter-spacing: -.02em; }
.ex-head h1, .ex-head .ex-title { font-size: clamp(1.9rem, 4.5vw, 2.8rem); line-height: 1.08; }
.work h1, .sheet h1, .about-work h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); line-height: 1.12; }

/* Running text */
.editorial-body, .editorial-sub, .about, .ex-lead, .ex-about p, .about-work > p, .artist p:not(.artist-links) { font-family: var(--serif); }
.editorial-body, .about { font-size: 1.125rem; line-height: 1.6; }
.ex-lead { font-size: 1.125rem; }

/* Every heading: a marker. Titles run inline so that the marker follows each line. */
main h1:not(.visually-hidden), main .ex-title {
  display: inline; padding: 0 .2em; margin-left: -.2em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  background: linear-gradient(transparent 50%, var(--mark) 50%, var(--mark) 90%, transparent 90%);
}
/* Air around the titles: the line above (artist, curator, "Editorial") and the line below (dates, subtitle) */
main p:has(+ h1:not(.visually-hidden)), main p:has(+ .ex-title) { margin-bottom: .55rem; }
main h1:not(.visually-hidden) + p, main .ex-title + p { margin-top: .75rem; }
.ex-head .ex-more { margin-top: .9rem; }
main h2:not(.visually-hidden):not(.ex-title) {
  display: block; width: fit-content; padding: .05em .3em; margin-left: -.3em;
  background: linear-gradient(transparent 45%, var(--mark) 45%, var(--mark) 88%, transparent 88%);
}
.editorial-body h2, .editorial-sources h2, .editorial-related h2, .ex-about h2, .about-work h2, .about h2 {
  font-family: var(--display); font-weight: 600; font-size: 1.45rem;
}
.about-work h2 { font-size: 1.25rem; }

/* Every link except the logo and the images in the grids: a subtle grey line, and the same grey behind the word on hover */
a:not(.logo):not(:is(.work-grid, .grid, .editorial-grid, .ex-list) a) {
  text-decoration: none; padding: 0 .05em; color: inherit;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 2px no-repeat;
  transition: background-size .25s ease, color .25s;
}
a:not(.logo):not(:is(.work-grid, .grid, .editorial-grid, .ex-list) a):hover,
a:not(.logo):not(:is(.work-grid, .grid, .editorial-grid, .ex-list) a):focus-visible {
  background-color: var(--hover); color: inherit;
}
.site-header [aria-current="page"]:not(.logo) { background-color: var(--hover); }