/* ==========================================================================
   The plugin's own single-page templates — exhibitions, artworks.

   Loaded only on those pages (see includes/templates.php). The markup is in
   the plugin's templates/ folder, so every class here is one that exists
   there, not a class someone has to remember to type into the editor.

   Sizes follow the Figma file at its 1440px width. Where a Site Editor
   preset has the same value it is used, so that changing the preset in
   Global Styles changes these pages too:

     Figma "Desktop Text", ABC Otto 14/19        -> font-size preset "medium"
     Figma "Desktop Heading 1", ABC Otto 36/50   -> preset "xx-large"
     Figma "Desktop Heading 3", Suisse 16/18     -> preset "large"
     Figma "Desktop Tagline", Suisse 13/18, 3%   -> no preset; 0.8125rem

   Horizontal positions in the design are converted to percentages of the
   content width (1360px in the file), so the proportions hold at any size.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared
   -------------------------------------------------------------------------- */

/* The same side margins and maximum width as the rest of the site. */
.terngallery-single__section {
	box-sizing: border-box;
	max-width: calc(var(--wp--style--global--wide-size, 1340px) + var(--wp--style--root--padding-left, 50px) + var(--wp--style--root--padding-right, 50px));
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, var(--wp--preset--spacing--50)) var(--wp--style--root--padding-right, var(--wp--preset--spacing--50));
}

/* The space under the fixed header. Replaces the gap WordPress puts between
   the header and the page, rather than adding to it — the same thing the
   Site Editor templates do with the main group's top margin. */
.terngallery-single {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* The small capitals used for every label: ON VIEW, artist names over a
   bio, WORKS ON DISPLAY. Figma's letter-spacing of 3 is 3%, confirmed
   against the file's own CSS. */
.terngallery-label {
	margin: 0;
	font-family: var(--wp--preset--font-family--suisse-intl);
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 1.385; /* 18px */
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* A label with the site's hairline under it (solid black, 0.5px since 2026-09-29, as
   in the design). The same fine rule as the
   Separator's terngallery-hairline style, drawn as a border here because
   there is no separate element to style. */
.terngallery-single__works-label,
.terngallery-exhibition__artist-name {
	padding-bottom: 0.3125rem;
	border-bottom: 0.5px solid var(--wp--preset--color--custom-black, #000);
}

/* --------------------------------------------------------------------------
   Grid of works — "Works on display", "More works by…"
   -------------------------------------------------------------------------- */

.terngallery-single__works {
	margin-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}

/*
 * Four columns, narrower than the page and centred, as in the design: four
 * 273px columns with 18px between them, 1146px of the 1360px content width.
 * Images keep their own proportions, so a row is ragged along the bottom and
 * every caption sits directly under its own image.
 */
.terngallery-works {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 1.57%;
	row-gap: 3rem;
	align-items: start;
	max-width: 84.3%;
	margin: var(--wp--preset--spacing--60) auto 0;
	padding: 0;
	list-style: none;
}

.terngallery-works__image,
.terngallery-works__image img {
	display: block;
	width: 100%;
	height: auto;
}

.terngallery-works__caption {
	margin: 0.625rem 0 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.357; /* 19px */
}

.terngallery-works__artist,
.terngallery-works__title {
	display: block;
}

/* --------------------------------------------------------------------------
   Exhibition — Figma 769:726
   -------------------------------------------------------------------------- */

/*
 * The heading: the label in a narrow first column, everything else in the
 * second. 212px and 1148px of the design's 1360.
 */
.terngallery-exhibition__head {
	display: grid;
	grid-template-columns: minmax(0, 15.6fr) minmax(0, 84.4fr);
	align-items: start;
}

/* Down a hair, so the label's small capitals share a line with the dates. */
.terngallery-exhibition__status {
	padding-top: 0.125rem;
}

.terngallery-exhibition__dates {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.357;
}

/* Font, weight and capitalisation still come from Global Styles' Heading 1;
   only the spacing and line height are the design's own. */
.terngallery-exhibition__title {
	margin: 0.1875rem 0 1.1875rem;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.389; /* 50px */
}

.terngallery-exhibition__names {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--suisse-intl);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	line-height: 1.125; /* 18px */
}

/* The exhibition's own content, with the design's space above it. */
.terngallery-exhibition > .wp-block-post-content {
	margin-top: var(--wp--preset--spacing--70);
}

/*
 * The artists and their bios: a column starting a little right of centre,
 * 637px in and 618px wide in the design's 1360.
 */
.terngallery-exhibition__artists {
	margin-top: var(--wp--preset--spacing--80);
}

.terngallery-exhibition__artist {
	max-width: 45.4%;
	margin-left: 46.8%;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.357;
}

.terngallery-exhibition__artist + .terngallery-exhibition__artist {
	margin-top: 3.125rem;
}

.terngallery-exhibition__artist p {
	margin: 0;
}

/* One blank line between paragraphs, as the design separates "Learn More". */
.terngallery-exhibition__artist p + p {
	margin-top: 1.357em;
}

.terngallery-exhibition__artist-name + p {
	margin-top: 0.625rem;
}

/* Italic all the time, as in the design. The site's link script, which
   normally swaps in an italic copy on hover (see "Keeping links still" in
   custom.css), leaves this link alone, since there is nothing to swap. */
.terngallery-exhibition__more {
	font-style: italic;
}

/* No hover effect: the letters keep their normal spacing. The same goes for
   "Back to Artist Page" on the artwork page. */
.terngallery-exhibition__more a:is(:hover, :active, :focus-visible),
.terngallery-artwork__back a:is(:hover, :active, :focus-visible) {
	letter-spacing: inherit;
}

/* --------------------------------------------------------------------------
   Artwork — Figma 769:362
   -------------------------------------------------------------------------- */

/*
 * Two columns: the text, and the image flush with the right-hand margin.
 * 635px and 725px of the design's 1360. "Back to Artist Page" has a row of
 * its own under the text, which stretches to the image's height, so the link
 * sits at the foot of the column whatever the image's proportions.
 */
.terngallery-artwork__head {
	display: grid;
	grid-template-columns: minmax(0, 46.7fr) minmax(0, 53.3fr);
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"info  image"
		"back  image";
}

.terngallery-artwork__info {
	grid-area: info;
	padding-right: var(--wp--preset--spacing--40);
}

.terngallery-artwork__image {
	grid-area: image;
	margin: 0;
}

.terngallery-artwork__image img {
	display: block;
	width: 100%;
	height: auto;
}

.terngallery-artwork__back {
	grid-area: back;
	align-self: end;
	margin: var(--wp--preset--spacing--40) 0 0;
}

/* Artist and title: two lines in Heading 1's size, with nothing between
   them. The title is the page's h1 for its meaning, not for a different
   look. Measurements and description follow in Heading 2, below. */
.terngallery-artwork__lines > * {
	margin: 0;
	font-family: var(--wp--preset--font-family--abc-otto);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 300;
	font-style: normal;
	line-height: 1.389; /* 50px */
	letter-spacing: 0;
	text-transform: none;
}

/* Measurements and description: Heading 2, 23/33, 10px under the title —
   Figma 4223:453 (2026-10-15). Smaller than the lines above because a
   description can run to several lines. */
.terngallery-artwork__lines > .terngallery-artwork__detail {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.435; /* 33px */
}

.terngallery-artwork__lines > :not(.terngallery-artwork__detail) + .terngallery-artwork__detail {
	margin-top: 0.625rem; /* 10px */
}

/*
 * The Figma "Button Black": a 0.5px solid black outline (70% until
 * 2026-09-29 — the design has no grey), italic caption type. A plain
 * link styled here rather than a Button block, since there is no editor on
 * this page to place one in.
 */
.terngallery-artwork__inquire {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 8.625rem; /* 138px */
	margin-top: var(--wp--preset--spacing--40);
	/* 6px, not the file's 7px: with the 10px line and the border, 7px made
	   the button 25px tall against the design's 23px. */
	padding: 0.375rem 1.4375rem; /* 6px 23px */
	border: 0.5px solid var(--wp--preset--color--custom-black, #000);
	color: inherit;
	font-family: var(--wp--preset--font-family--abc-otto);
	font-size: 0.75rem; /* 12px */
	font-weight: 300;
	line-height: 0.625rem; /* 10px, as in the file */
	text-decoration: none;
}

.terngallery-artwork__back {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.357;
}

/*
 * The small arrow is the Figma file's own drawing (assets/arrow.svg), at
 * its own size. Added here rather than as an image inside the link, because
 * the script that keeps links still on hover passes over any link containing
 * an image.
 */
.terngallery-artwork__back a::before {
	content: url("arrow.svg");
	display: inline-block;
	/* As in the file: the arrow just outside the page margin, the words
	   10px inside it. -5.6px is the arrow's own width. */
	margin-left: -5.6px;
	margin-right: 0.625rem;
	vertical-align: 0.05em;
}

/* Both are italic in the design all the time, not only on hover — so the
   hover script's italic swap leaves them alone, as it does "Learn More" on
   the exhibition page. */
.terngallery-artwork__inquire,
.terngallery-artwork__back a {
	font-style: italic;
}

/* Its hover is the inverted fill shared by every button on the site, in
   custom.css under "Buttons invert on hover". */

/* "More works by…" and the artist's Works Index were drawn in Figma "Desktop
   Caption" (12/17). Client feedback (BugHerd #30, 2026-10-05) asked for every
   artwork title on the site at 14, so on a wide screen they now share the 14/19
   of .terngallery-works__caption above. Phones still step them down — see
   "Mobile type" at the end of this file. */

/* --------------------------------------------------------------------------
   Shared: the narrower centred column

   The design's inner content — the works grid, the artist's Info — spans
   1148px of the 1360px content width, centred.
   -------------------------------------------------------------------------- */
.terngallery-single__inner {
	max-width: 84.3%;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Artist — Figma 769:632
   -------------------------------------------------------------------------- */

.terngallery-artist__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.389; /* 50px */
}

.terngallery-artist__jump {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.357;
}

/* Where a jump link lands: below the fixed header, not underneath it. */
.terngallery-artist [id] {
	scroll-margin-top: calc(var(--terngallery-header-top, 0px) + var(--terngallery-header-height, 4rem) + var(--wp--preset--spacing--40));
}

/*
 * The highlights: a row that scrolls sideways and runs off the right edge.
 *
 * It starts at the page's left margin and deliberately has no right margin,
 * so the last visible image is cut by the window — the clearest sign that
 * there is more. Each image is 37% of the content width, as on the earlier
 * block-built carousel, so about two and a half show at any window size.
 * Plain CSS scrolling with snap points: no script, and real momentum on
 * phones and trackpads.
 */
.terngallery-artist__highlights {
	--terngallery-left: max(var(--wp--style--root--padding-left, 50px), calc((100% - var(--wp--style--global--wide-size, 1340px)) / 2));
	margin-top: var(--wp--preset--spacing--60);
}

.terngallery-artist__carousel {
	display: flex;
	gap: 1.25rem; /* 20px */
	align-items: flex-start;
	margin: 0;
	padding: 0 0 0.5rem var(--terngallery-left);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-left: var(--terngallery-left);
}

.terngallery-artist__carousel > li {
	flex: 0 0 auto;
	width: max(240px, calc(0.376 * (100vw - 2 * var(--terngallery-left))));
	scroll-snap-align: start;
}

/* The gap after the last image, which the row's padding cannot give. */
.terngallery-artist__carousel > li:last-child {
	margin-right: var(--terngallery-left);
}

.terngallery-artist__carousel-image,
.terngallery-artist__carousel-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* 14/19, 13px under the image. The design file has Figma "Desktop Caption"
   (12/17) here, but client feedback (BugHerd #30, 2026-09-30) asked for the
   artwork titles at 14 — Figma "Desktop Text", the "medium" preset. */
.terngallery-artist__caption {
	margin: 0.8125rem 0 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.357; /* 19px */
}

/* INFO */
.terngallery-artist__info {
	margin-top: var(--wp--preset--spacing--70);
}

.terngallery-artist__bio {
	margin-top: 2.125rem;
	max-width: 72.2%; /* 829px of 1148 */
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.357;
}

.terngallery-artist__bio p {
	margin: 0;
}

.terngallery-artist__bio p + p {
	margin-top: 1.357em;
}

/*
 * Exhibitions and fairs on the left, downloads on the right: 617px and 192px
 * of 1148, with the downloads column ending on the inner column's edge.
 */
.terngallery-artist__lists {
	display: grid;
	grid-template-columns: minmax(0, 53.75fr) minmax(0, 29.53fr) minmax(0, 16.72fr);
	margin-top: var(--wp--preset--spacing--80);
}

.terngallery-artist__histories {
	grid-column: 1;
}

.terngallery-artist__downloads {
	grid-column: 3;
}

.terngallery-artist__history + .terngallery-artist__history {
	margin-top: 3.125rem; /* 50px */
}

/* A column label with its hairline, as over the works grids. */
.terngallery-artist__list-label {
	padding-bottom: 0.3125rem;
	border-bottom: 0.5px solid var(--wp--preset--color--custom-black, #000);
}

.terngallery-artist__rows,
.terngallery-artist__downloads ul {
	margin: 0.9375rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--large); /* 16px */
	line-height: 1.375; /* 22px */
}

/* The year in its own narrow column: 106px of 617. */
.terngallery-artist__rows li {
	display: grid;
	grid-template-columns: minmax(0, 17.2fr) minmax(0, 82.8fr);
	align-items: baseline;
}

/* A year repeating the row above is hidden to the eye only, so a screen
   reader still hears it — the Exhibitions index does the same. */
.terngallery-artist__year.is-repeated-year {
	visibility: hidden;
}

/* Every year at 12px rather than the label's 13 (client feedback, 2026-10-05),
   as on the Exhibitions index. Phones keep Tagline's 11, set further down. */
.terngallery-artist__year {
	font-size: 0.75rem;
}

/* A download: its label, with the design's arrow at the far right turned to
   point down. The arrow is the same drawing as "Back to Artist Page". */
.terngallery-artist__downloads a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.terngallery-artist__downloads a::after {
	content: url("arrow.svg");
	display: inline-block;
	line-height: 0;
	transform: rotate(90deg);
}

/* The quote, and the portrait to its right: 722px and 298px of 1148. */
.terngallery-artist__quote-row {
	display: grid;
	grid-template-columns: minmax(0, 62.9fr) minmax(0, 11.14fr) minmax(0, 25.96fr);
	align-items: start;
	margin-top: var(--wp--preset--spacing--80);
}

.terngallery-artist__quote {
	grid-column: 1;
	margin: 0;
}

.terngallery-artist__quote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Figma "Desktop Heading 2", 23/33. */
.terngallery-artist__quote blockquote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--abc-otto);
	font-size: var(--wp--preset--font-size--x-large);
	font-style: normal;
	font-weight: 300;
	line-height: 1.435;
}

.terngallery-artist__quote figcaption {
	margin-top: var(--wp--preset--spacing--40);
}

/* The portrait keeps the design's upright shape (298 × 390) whatever the
   photograph's own proportions, cropping to fill it. */
.terngallery-artist__portrait {
	grid-column: 3;
	margin: 0;
}

.terngallery-artist__portrait img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 298 / 390;
	object-fit: cover;
}

/* The Works Index sits the design's distance below Info. */
.terngallery-artist__info + .terngallery-single__works {
	margin-top: var(--wp--preset--spacing--80);
}

/*
 * Artist — the vertical spacing measured from the Figma frame (769:632) at
 * 1440px, 2026-10-05. Wide screens only: phones follow the mobile frame and
 * keep the rules above. Each large gap shrinks with the window the way the
 * spacing presets do — the px value in each comment is reached at 1440px and
 * never exceeded; the smallest value is the preset's own minimum.
 */
@media (min-width: 782px) {
	/* 88px from the jump links to the highlights. */
	.terngallery-artist__highlights {
		margin-top: clamp(1.875rem, 6.11vw, 5.5rem);
	}

	/* 170px from the highlight captions to INFO. 162px here, plus the 8px the
	   sideways-scrolling row keeps under itself for its scrollbar. */
	.terngallery-artist__info {
		margin-top: clamp(3.125rem, 11.25vw, 10.125rem);
	}

	/* The hairline sits 3.5px under the label's text, not 5px. The rule
	   itself (0.5px black) is shared with every other line on the site. */
	.terngallery-artist .terngallery-single__works-label,
	.terngallery-artist__list-label {
		padding-bottom: 0.21875rem;
	}

	/* 30px from INFO's line to the bio. */
	.terngallery-artist__bio {
		margin-top: 1.875rem;
	}

	/* 150px from the bio to the lists, and from the lists to the quote. */
	.terngallery-artist__lists,
	.terngallery-artist__quote-row {
		margin-top: clamp(4.375rem, 10.42vw, 9.375rem);
	}

	/* 10px from a list's line to its first row. */
	.terngallery-artist__rows,
	.terngallery-artist__downloads ul {
		margin-top: 0.625rem;
	}

	/* 129px from the portrait (the end of Info) to WORKS INDEX. */
	.terngallery-artist__info + .terngallery-single__works {
		margin-top: clamp(4.375rem, 8.96vw, 8.0625rem);
	}

	/* 51px between rows of the Works Index, measured from the lowest
	   caption of a row. The exhibition and artwork grids keep 48px. */
	.terngallery-artist .terngallery-works {
		row-gap: 3.1875rem;
	}
}

/*
 * Exhibition — the vertical spacing measured from the Figma frame (769:726)
 * at 1440px, 2026-10-05. Wide screens only, and scaled with the window, as
 * for the artist page above. The space inside the exhibition's own content
 * (images, text, quote) is set block by block in the editor, not here.
 */
@media (min-width: 782px) {
	/* 95px from the artist names to the exhibition's content. */
	.terngallery-exhibition > .wp-block-post-content {
		margin-top: clamp(3.125rem, 6.6vw, 5.9375rem);
	}

	/* 130px from the content to the artists' bios, and from the bios to
	   WORKS ON DISPLAY. */
	.terngallery-exhibition__artists,
	.terngallery-exhibition .terngallery-single__works {
		margin-top: clamp(4.375rem, 9.03vw, 8.125rem);
	}

	/* The hairline sits 3.5px under an artist's name and under WORKS ON
	   DISPLAY, not 5px. The bio follows 10px under the line, as before. */
	.terngallery-exhibition__artist-name,
	.terngallery-exhibition .terngallery-single__works-label {
		padding-bottom: 0.21875rem;
	}
}

/* --------------------------------------------------------------------------
   Narrow screens

   The same breakpoint the rest of the site uses for its columns. Everything
   stacks; the grid of works drops to two columns and uses the full width.
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	/* The mobile Exhibition frame in Figma (4067:2524): the label, then 7px
	   to the dates, 12px to the title, 13px to the names. The label's 2px
	   nudge only matters when it shares a line with the dates on desktop. */
	.terngallery-exhibition__head {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.4375rem;
	}

	.terngallery-exhibition__status {
		padding-top: 0;
	}

	.terngallery-exhibition__title {
		margin: 0.75rem 0 0.8125rem;
	}

	.terngallery-exhibition__artist {
		max-width: none;
		margin-left: 0;
	}

	/* The image first, then the text, then the way back — the order of the
	   mobile Single Artwork frame in Figma (4032:2116). The gaps are the
	   frame's: 20px under the image, 20px above Inquire, 42px above the link. */
	/* 16px under the header, as in the mobile artwork and exhibition frames.
	   (The artist frame has 10px; 16px is the closer of the two.) */
	.terngallery-single {
		margin-block-start: 1rem;
	}

	.terngallery-artwork__head {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas:
			"image"
			"info"
			"back";
		row-gap: 0;
	}

	.terngallery-artwork__info {
		margin-top: 1.25rem;
		padding-right: 0;
	}

	.terngallery-artwork__inquire {
		margin-top: 1.25rem;
	}

	.terngallery-artwork__back {
		margin-top: 2.625rem;
	}

	/* 100px from the link down to "More works by…". */
	.terngallery-artwork__head + .terngallery-single__works {
		margin-top: 6.25rem;
	}

	/* The arrow hangs into the page margin on desktop; there is no room for
	   that on a phone, so it sits inline. */
	.terngallery-artwork__back a::before {
		margin-left: 0;
	}

	/* The artist: highlights 140px wide at 376px (Figma 4032:1856), so about
	   two and a half show, as on a wide screen; 12px apart, each caption 3px
	   under its image. The images keep their own proportions. And the Info
	   columns stacked. */
	.terngallery-artist__carousel {
		gap: 0.75rem;
	}

	.terngallery-artist__carousel > li {
		width: 37.25vw;
	}

	.terngallery-artist__caption {
		margin-top: 0.1875rem;
	}

	.terngallery-single__inner,
	.terngallery-artist__bio {
		max-width: none;
	}

	.terngallery-artist__lists,
	.terngallery-artist__quote-row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--60);
	}

	.terngallery-artist__histories,
	.terngallery-artist__downloads,
	.terngallery-artist__quote,
	.terngallery-artist__portrait {
		grid-column: 1;
	}

	/* The portrait at the highlights' width (140px at 376px, Figma
	   4032:1856), against the right margin. */
	.terngallery-artist__portrait {
		justify-self: end;
		width: 37.25vw;
	}

	/* The mobile frames set these a further 30px in than the page margin
	   (42px from the edge): the artist's bio, lists, downloads and quote,
	   and the artists' bios on an exhibition. */
	.terngallery-artist__bio,
	.terngallery-artist__lists,
	.terngallery-artist__quote-row,
	.terngallery-exhibition__artists .terngallery-exhibition__artist {
		padding-left: 1.875rem;
	}

	/* The artist's spacing in the mobile frame (4032:1856), measured from
	   the top of each label: 40px from INFO to the bio, 30px from a list's
	   label to its first row. 100px before the lists, before the quote and
	   before WORKS INDEX; 50px between the lists, Downloads included. */
	.terngallery-artist__bio {
		margin-top: 1.25rem;
	}

	.terngallery-artist__rows,
	.terngallery-artist__downloads ul {
		margin-top: 0.5625rem;
	}

	.terngallery-artist__lists,
	.terngallery-artist__quote-row,
	.terngallery-artist__info + .terngallery-single__works {
		margin-top: 6.25rem;
	}

	.terngallery-artist__lists {
		row-gap: 3.125rem;
	}

	/* At the top: the name 10px under the header (the other plugin pages
	   keep 16px), and 52px from the jump links to the highlights. */
	.terngallery-single.terngallery-artist {
		margin-block-start: 0.625rem;
	}

	.terngallery-artist__highlights {
		margin-top: 3.25rem;
	}

	/* The year column: titles start 61px after the year, not 55. */
	.terngallery-artist__rows li {
		grid-template-columns: 3.8125rem minmax(0, 1fr);
	}

	/* The exhibition's spacing in the mobile frame (4067:2524): 80px from
	   the content to the first artist, 30px between artists, 100px from the
	   last artist to WORKS ON DISPLAY. */
	.terngallery-exhibition__artists {
		margin-top: 5rem;
	}

	.terngallery-exhibition__artist + .terngallery-exhibition__artist {
		margin-top: 1.875rem;
	}

	.terngallery-exhibition .terngallery-single__works {
		margin-top: 6.25rem;
	}

	/* Inside the exhibition's own content the frame spaces everything 40px
	   apart, and 80px around the pull quote. The editor's Spacer blocks set
	   wide-screen distances, so on phones they are skipped and these gaps
	   used instead (Karla, 2026-10-06). A Spacer added in the editor still
	   shows on wide screens only. The quote is found by its x-large text,
	   as in the exhibition-content pattern. */
	.terngallery-exhibition > .wp-block-post-content {
		margin-top: 0;
	}

	.terngallery-exhibition > .wp-block-post-content > .wp-block-spacer {
		display: none;
	}

	.terngallery-exhibition > .wp-block-post-content > * {
		margin-block-start: 2.5rem;
	}

	/* The quote is also 322px wide, 15px in from each side. */
	.terngallery-exhibition > .wp-block-post-content > :has(> .has-x-large-font-size) {
		margin-block: 5rem;
		padding-inline: 0.9375rem;
	}

	/* The same in every mobile frame (artwork, artist, exhibition): 20px
	   below the label's line, about 11px between the columns (3.2% of the
	   width), 30px between rows, each caption 6px under its image. */
	.terngallery-works {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 3.2%;
		row-gap: 1.875rem;
		max-width: none;
		margin-top: 1.25rem;
	}

	.terngallery-works__caption {
		margin-top: 0.375rem;
	}
}


/* --------------------------------------------------------------------------
   Mobile type

   The sizes themselves come from the presets, which custom.css steps down
   below 782px (see "Mobile type" there). What this adds is the line spacing
   of each mobile style, since the ratios above are the desktop ones, and the
   few sizes set here as fixed values rather than presets. The artist page
   follows the mobile Single Artist frame in Figma (4032:1856).
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	/* Tagline, 11/15. Includes the quote's author, which the Figma frame
	   still draws at the desktop 13/18. */
	.terngallery-label {
		font-size: var(--wp--preset--font-size--custom-1);
		line-height: 1.364;
	}

	/* Heading 1, 24/30. The artwork's lines were at Heading 2 on phones
	   before; they now follow the other page titles. */
	.terngallery-exhibition__title,
	.terngallery-artist__name,
	.terngallery-artwork__lines > * {
		font-size: var(--wp--preset--font-size--xx-large);
		line-height: 1.25;
	}

	/* Heading 2, 18/24: the x-large preset is 18px on phones. */
	.terngallery-artwork__lines > .terngallery-artwork__detail {
		line-height: 1.333;
	}

	/* Heading 3, 13/15. */
	.terngallery-exhibition__names {
		line-height: 1.154;
	}

	/* Caption, 10/14: the artwork titles under the images. BugHerd #30 raised
	   them to 14 on wide screens only; phones follow the Figma mobile frames
	   (Karla, 2026-10-06). */
	.terngallery-works__caption,
	.terngallery-artist__caption {
		font-size: 0.625rem;
		line-height: 1.4;
	}

	/* Text, 12/16. */
	.terngallery-exhibition__dates,
	.terngallery-exhibition__artist,
	.terngallery-artwork__back,
	.terngallery-artist__jump,
	.terngallery-artist__bio {
		line-height: 1.333;
	}

	/* Text Large, 14/20: exhibition and fair titles, and the downloads. */
	.terngallery-artist__rows,
	.terngallery-artist__downloads ul {
		font-size: 0.875rem;
		line-height: 1.429;
	}

	/* Heading 2, 18/24. */
	.terngallery-artist__quote blockquote p {
		line-height: 1.333;
	}
}