/* Artist page */

.artist__head { text-align: center; padding: var(--space-5) var(--gutter) 0; }
.artist__back { display: inline-block; margin-bottom: 1rem; text-decoration: none; }
a.artist__back:hover { text-decoration: underline; text-decoration-thickness: 1px; }
/* Artist name in Alegreya small capitals, as in the home page line-up */
.artist__head h1 {
  font-family: "Alegreya Sans SC", var(--body); font-weight: 400; text-transform: none;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); letter-spacing: 0.08em; margin-right: -0.08em; line-height: 1.15;
}

/* Bio in a double-outlined box */
.artist__bio { margin-top: calc(var(--space-6) / 2); margin-inline: max(var(--gutter), calc((100% - 48rem) / 2)); max-width: none; }
.artist__bio p { font-size: 0.97rem; line-height: 1.7; }   /* same as the text in the home page cards */
.artist__links { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.artist__links a { font-family: var(--body); font-weight: 400; text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: .15rem; }
.artist__links a:hover { border-bottom-color: currentColor; }

.artist__pager {
  max-width: var(--read); margin: var(--space-6) auto 0; padding: var(--space-3) var(--gutter) 0;
  display: flex; justify-content: space-between; gap: 2rem;
  border-top: 1px solid var(--rule); box-sizing: content-box;
}
.artist__pager a { text-decoration: none; font-family: "Alegreya Sans SC", var(--body); letter-spacing: .08em; font-size: 1.15rem; display: grid; gap: .1rem; }
.artist__pager a[rel="next"] { text-align: right; }
.artist__pager .card-heading { font-size: .8rem; color: var(--ink-soft); }

/* ---------- Artwork page: the work shown large ---------- */
.artwork { padding: var(--space-4) var(--gutter) 0; }
.artwork__crumbs { text-align: center; margin: 0 0 var(--space-4); }
.artwork__crumbs a { text-decoration: none; }
.artwork__crumbs a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.artwork__figure { margin: 0; }
.artwork__img img { margin-inline: auto; width: auto; max-width: min(100%, 60rem); max-height: 78svh; border: 1px solid var(--ink); }   /* a single fine black line around the work */
.artwork__figure figcaption { text-align: center; margin-top: var(--space-3); }
.artwork__title { font-family: var(--body); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0.03em; font-size: 1.5rem; line-height: 1.3; font-size-adjust: 0.5; }
.artwork__artist { margin: .35rem 0 0; font-family: "Alegreya Sans SC", var(--body); letter-spacing: .08em; font-size: 1.1rem; }
.artwork__artist a { text-decoration: none; }
.artwork__artist a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.artwork .caption { margin-top: .6rem; }

/* ---------- Artist page ground: warm stone from the header's double rule to the footer,
   with the name, thumbnails and bio in soft ivory cards ---------- */
:root { --artist-ground: var(--stone); --artist-card: #f7f4e9; }
:is(.page-artist, .page-artwork) main { background: var(--artist-ground); padding-bottom: var(--space-6); }   /* artist and artwork pages share the stone */
:is(.page-artist, .page-artwork) .site-footer { margin-top: 0; }
/* Boxes (thumbnails, text) in the same paper as the header; the name sits straight on the page */
.page-artist .card { background: var(--paper); }

/* Artwork page: detail photos under the whole work, in rows sharing one height */
.details { max-width: 60rem; margin: var(--space-5) auto 0; }
.details__heading { text-align: center; margin: 0 0 var(--space-3); }
.details__row { display: flex; gap: clamp(.75rem, 2vw, 1.25rem); }
.details__row + .details__row { margin-top: clamp(.75rem, 2vw, 1.25rem); }
.details__item { margin: 0; flex: var(--ratio) 1 0; min-width: 0; }
.details__item img { width: 100%; border: 1px solid var(--ink); }
@media (max-width: 40rem) {
  .details__row { flex-direction: column; }
}
.details__link { display: block; cursor: zoom-in; }
@media (max-width: 40rem) { :is(.details__link, .artwork__link) { cursor: default; } }   /* no enlarging on phones */

/* The artist's statement about the work */
.statement { max-width: 38rem; margin: var(--space-5) auto 0; padding: 0 var(--gutter); }
.statement p { font-size: 0.97rem; line-height: 1.7; margin: 0 0 1em; }
.statement__sig { text-align: right; font-family: "Alegreya Sans SC", var(--body); letter-spacing: .08em; font-size: 1rem; color: var(--ink-soft); }

.artwork__link { display: block; cursor: zoom-in; }

/* Enlarged photo: the picture uses almost the whole screen; Close and Previous / Next float over it */
.enlarge {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: color-mix(in srgb, var(--paper) 97%, transparent); color: var(--ink); overflow: hidden;
}
.enlarge::backdrop { background: rgb(28 41 37 / .35); }
.enlarge__figure { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 1rem; cursor: zoom-out; }
.enlarge__figure img {
  max-width: 100%; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
  width: auto; height: auto; border: 1px solid var(--ink); cursor: zoom-in;
}
/* Zoomed: the photo fills the screen width and the view scrolls */
.enlarge.is-zoomed { overflow-y: auto; }
.enlarge.is-zoomed .enlarge__figure { position: static; display: block; padding: 1rem; }
.enlarge.is-zoomed .enlarge__figure img { max-height: none; width: 100%; cursor: zoom-out; }
.enlarge.is-zoomed :is(.enlarge__close, .enlarge__nav) { position: fixed; }
.enlarge button {
  font: inherit; color: inherit; cursor: pointer; border: 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent); padding: .55rem .9rem;
  font-family: var(--body); font-weight: 500; text-transform: uppercase; letter-spacing: .18em; font-size: .78rem;
}
.enlarge button:hover { text-decoration: underline; text-underline-offset: .3em; }
.enlarge__close { position: absolute; top: 1rem; right: 1rem; z-index: 1; }
.enlarge__nav {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1;
  display: flex; align-items: center; gap: .25rem; background: color-mix(in srgb, var(--paper) 88%, transparent);
}
.enlarge__nav button { background: none; }
.enlarge__count { font-size: .85rem; color: var(--ink-soft); min-width: 4rem; text-align: center; }
.details__caption { font-style: italic; font-size: .85rem; line-height: 1.35; text-align: center; color: var(--ink-soft); margin-top: .5rem; }
.artwork__shown { font-size: .85rem; color: var(--ink-soft); margin: .35rem 0 0; }


/* Text pages (About, Exhibition Details, ...) */
.text-page__body { margin-top: var(--space-4); }
.text-page__body p, .text-page__body li { font-size: 0.97rem; line-height: 1.7; }
.text-page__body .card-heading { margin: 2rem 0 .6rem; }
.text-page__body .card-heading:first-child { margin-top: 0; }
.text-page__body ul { padding-left: 1.1rem; margin: 0 0 1em; }
.text-page__strip { max-width: 48rem; margin: var(--space-4) auto 0; padding-inline: var(--gutter); box-sizing: content-box; }
.text-page__strip img { width: 100%; }

/* Text pages over a picture: every piece of text in a card */
.text-card { max-width: 40rem; text-align: center; }
.text-card p, .text-card li { font-size: 0.97rem; line-height: 1.7; }
.text-card p:last-child { margin-bottom: 0; }
.text-card ul { list-style: none; padding: 0; margin: 0 0 1em; }
.text-card .card-heading { margin: 2rem 0 .6rem; }
.text-card__head .card-heading { margin: 0 0 1rem; }
.text-card__head { text-align: center; margin-bottom: var(--space-4); }
.text-card__head .short-rule { margin-top: 1.1rem; }
.text-card h1 { font-family: "Alegreya Sans SC", var(--body); font-weight: 400; text-transform: none; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); letter-spacing: .08em; margin-right: -.08em; line-height: 1.15; }
.text-card .text-page__strip { padding: 0; margin: 0 0 1rem; }
.text-card--long { text-align: left; }
/* Objects photographed on a see-through background have no frame line */
img.is-cutout { border: 0 !important; }

/* Cut-out objects (Lisa's boxes, Ben's and Ralph's pieces) sit on a soft shadow, so they look grounded rather than floating */
.artwork__img img.is-grounded { filter: drop-shadow(0 18px 22px rgb(28 41 37 / .3)) drop-shadow(0 3px 4px rgb(28 41 37 / .18)); }
.artwork__img img.is-grounded.is-tight { filter: drop-shadow(0 7px 7px rgb(28 41 37 / .32)) drop-shadow(0 2px 2px rgb(28 41 37 / .22)); }   /* closer and crisper (Ben Wilson) */

/* Artist page works: every work the same height, whatever its real size; a single fine line round each
   except cut-outs, and the title underneath */
.wholes { --h: clamp(9rem, 6rem + 9vw, 13rem); padding: var(--space-5) var(--gutter) 0; }
/* Each row a little narrower than the text box below (48rem) */
.wholes ul {
  list-style: none; margin: 0 auto; padding: 0; max-width: 46rem;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2.5rem clamp(1rem, 2.2vw, 2rem);
}
.wholes ul + ul { margin-top: 2.5rem; }
.wholes li { max-width: 100%; }
/* Each work is as wide as its picture (at least 10rem); a longer title wraps onto a second line */
.whole { display: flex; flex-direction: column; align-items: center; min-width: 10rem; max-width: 100%; text-decoration: none; color: inherit; }
.whole img { display: block; height: var(--h); width: auto; max-width: 100%; object-fit: contain; }
.whole__frame { position: relative; display: block; border: 1px solid var(--ink); }
/* Pointing at a work adds an inner line 4px inside its box, as on the Artists 2026 page */
.whole__frame::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--ink); pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.whole:is(:hover, :focus-visible) .whole__frame::before { opacity: 1; }
.whole img.is-grounded { filter: drop-shadow(0 4px 3px rgb(28 41 37 / .2)) drop-shadow(0 1px 1px rgb(28 41 37 / .14)); }
.whole__title { margin-top: 1rem; width: 0; min-width: 100%;   /* takes the picture's width, never widens it */ text-align: center; font-style: italic; font-size: .97rem; line-height: 1.4; text-wrap: balance; }
.whole:is(:hover, :focus-visible) .whole__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.whole:focus-visible { outline: none; }
@media (max-width: 40rem) { .wholes ul { gap: 2rem 1rem; } .wholes ul + ul { margin-top: 2rem; } }

/* Text pages set in italics (Curator's Notes); words already in italics turn upright for contrast */
.text-card--italic :is(p, li) { font-style: italic; }
.text-card--italic em { font-style: normal; }
/* {{words}} in a text page: set in Mendl, the HEATHBOUND logo font */
.in-mendl { font-family: var(--display); font-weight: 600; letter-spacing: .06em; font-style: normal; font-size-adjust: none; }

/* Artist with a single work: the work shown large under the name, then the bio box, where the artist's
   own words about the work follow under "About <title>", in quotation marks and italics */
.artist__work { padding: var(--space-5) var(--gutter) 0; }
.artist__work .caption { margin-top: .6rem; }
.page-artist .details { padding-inline: var(--gutter); }
.artist__about-work { margin: var(--space-4) 0 .8rem; }
.artist__statement p { font-style: italic; }
.artist__statement .statement__sig { font-style: normal; }