/**
 * homepage.css — journal homepage
 *
 * The current issue module, the table of contents with its article cards,
 * the journal's own homepage content and the past issues grid. Measurements
 * from the approved design; content from OJS.
 */

.sup-home { padding-block: var(--sup-space-40) var(--sup-page-end); }

/* The page is a stack of sections 64px apart, separated by a hairline rule. */
.sup-home__sections {
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-64);
}

.sup-home__divider {
	height: 0;
	border: 0;
	border-top: var(--sup-border-width) solid var(--sup-color-rule);
	margin: 0;
}

/* Main column 839px beside the 320px sidebar, 1px apart, as designed */
.sup-home__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--sup-col-side);
	gap: var(--sup-space-1);
	align-items: start;
}

.sup-home__main { min-width: 0; }
.sup-home__side { min-width: 0; }

/* A journal with no sidebar blocks gets the whole column. */
.sup-home__row:not(:has(.sup-home__side)) { grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------------
   Current issue module
   --------------------------------------------------------------- */
.sup-issue {
	border: var(--sup-border-width) solid var(--sup-color-border);
	background: var(--sup-color-surface);
}

/* The accent rule sits on top of the module, in place of its top border —
   on the current issue and at the head of an issue's own page. */
.sup-issue--current,
.sup-issue--page { border-top: 0; }

/* The journal's own artwork behind the module, carried in by the template as
   --sup-hero-bg. It sits at half strength under a white radial wash, so it
   reads at the top and bottom edges and clears the middle for the text. The
   ellipse is the one in the approved frame: centred above the module at
   50% / -20.3%, with radii of 151.14%. */
.sup-issue--current {
	background-color: var(--sup-color-surface);
	background-image:
		radial-gradient(151.14% 151.14% at 50% -20.3%,
			rgba(255, 255, 255, 0) 0.28%,
			#FFFFFF 31.19%,
			#FFFFFF 69.62%,
			rgba(255, 255, 255, 0) 98.92%),
		linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)),
		var(--sup-hero-bg, none);
	background-size: auto, auto, 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}
/* The rule runs the module's full width, over the ends of its side frame. */
.sup-issue__rule {
	height: 4px;
	margin-inline: calc(-1 * var(--sup-border-width));
	background: var(--sup-color-accent);
}

/* The design measures the module's gutters from its outer edge, so the 1px
   frame is taken out of the padding. The current issue has no top border —
   the accent rule stands in its place — so its top gutter is the full 32. */
.sup-issue__body {
	display: flex;
	align-items: flex-start;
	gap: var(--sup-space-32);
	padding:
		calc(var(--sup-space-32) - var(--sup-border-width))
		calc(var(--sup-space-40) - var(--sup-border-width));
}
.sup-issue--current .sup-issue__body,
.sup-issue--page .sup-issue__body { padding-top: var(--sup-space-32); }

.sup-issue__cover { flex: 0 0 var(--sup-cover-width); }

/* Every cover sits on the same backplate: a hairline frame and the soft
   offset shadow of the design. The shadow is drawn here, never baked into
   the uploaded image. */
.sup-issue__cover img {
	box-sizing: border-box;
	display: block;
	width: var(--sup-cover-width);
	aspect-ratio: 180 / 255;
	object-fit: cover;
	border: var(--sup-border-width) solid var(--sup-color-cover-border);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, .1);
}

.sup-issue__details {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-16);
}

.sup-issue__identity { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sup-space-8); }
.sup-issue__naming { display: flex; flex-direction: column; }

.sup-issue__badge,
.pkp_structure_page .sup-issue__badge {
	margin: 0;
	padding: 3px 11px;   /* 4/12 in the design, less the 1px inside stroke */
	border: var(--sup-border-width) solid var(--sup-color-accent);
	border-radius: var(--sup-radius-pill);
	background: var(--sup-color-surface);   /* white on every journal's canvas */
	font-size: var(--sup-text-xxs);
	line-height: var(--sup-leading-flat);
	font-weight: var(--sup-weight-semibold);
	color: var(--sup-color-accent-text);
}

.sup-issue__identification,
.pkp_structure_page .sup-issue__identification,
.sup-issue__identification a {
	margin: 0;
	font-family: var(--sup-font-display);
	font-size: var(--sup-text-h2);
	line-height: var(--sup-leading-display);
	font-weight: var(--sup-weight-medium);
	color: var(--sup-color-heading);
	text-decoration: none;
}
.sup-issue__identification a:hover { text-decoration: underline; color: var(--sup-color-heading); }
.sup-issue__sep { margin-inline: var(--sup-space-8); }

/* The publication date, directly under the numbering */
.sup-issue__line,
.pkp_structure_page .sup-issue__line {
	margin: 0;
	font-size: var(--sup-text-lead);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-heading);
}

/* The design's dividers are lines with no height of their own: the 16px
   gaps on either side are measured to the line itself. The rule gives its
   1px back so the rows keep that rhythm. */
.sup-issue__divider {
	height: 0;
	border: 0;
	border-top: var(--sup-border-width) solid var(--sup-color-border);
	margin: 0 0 calc(-1 * var(--sup-border-width));
}

/* The issue's masthead — Editors Section of the Current Issue Module. One
   role per line, the lines flush on the reading leading (21px); on a line,
   the role in semibold on a flat leading, 7px, then its people, each name
   carrying its comma and 4px before the next. A line too long for the
   column wraps its names under themselves. */
.sup-issue__masthead,
.pkp_structure_page .sup-issue__masthead {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-muted);
}

/* On the baseline rather than centred: on one line the two are the same
   (the 14px role sits 3.5px into the 21px line either way), and when the
   names wrap the role stays level with the first of them. */
.sup-issue__masthead-role {
	display: flex;
	align-items: baseline;
	gap: var(--sup-space-7);
}

.sup-issue__masthead dt,
.pkp_structure_page .sup-issue__masthead dt {
	flex: 0 0 auto;
	margin: 0;
	font-weight: var(--sup-weight-semibold);
	line-height: var(--sup-leading-flat);
}

.sup-issue__masthead dd,
.pkp_structure_page .sup-issue__masthead dd {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--sup-space-4);
	min-width: 0;
	margin: 0;
}

/* A journal that publishes continuously — Issue Meta Row of the Current
   Issue Module, under the current issue only. The same type as a masthead
   line: the label in semibold, the rest on the reading leading, 4px either
   side of the middle dot. It is one run of text, so a line too long for
   the column wraps word by word and the dot stays with its neighbours. */
.sup-issue__continuous,
.pkp_structure_page .sup-issue__continuous {
	margin: 0;
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-muted);
}

.sup-issue__continuous-label { font-weight: var(--sup-weight-semibold); }

.sup-issue__continuous-sep { margin: 0 var(--sup-space-4); }

/* The issue's own editorial note — OJS issue description. Its rows sit on
   the reading leading, 21px apart, which is exactly the rhythm the design
   gives the editors block. */
.sup-issue__description {
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-muted);
}
.sup-issue__description p,
.pkp_structure_page .sup-issue__description p { margin: 0; font-size: inherit; line-height: inherit; }

/* The design divides what the issue says about itself into sections — its
   editors, its publication model — parted by the same hairline as above.
   Each paragraph the journal writes is one of those sections. */
.sup-issue__description > * + *,
.pkp_structure_page .sup-issue__description > * + *,
.pkp_structure_page .sup-issue__description > p + p {   /* outweighs the reset above */
	margin-top: var(--sup-space-16);
	padding-top: calc(var(--sup-space-16) - var(--sup-border-width));
	border-top: var(--sup-border-width) solid var(--sup-color-border);
}

.sup-issue__description strong,
.sup-issue__description b { font-weight: var(--sup-weight-semibold); }

/* A link the journal writes into the description carries the same arrow as
   every other forward link in the design. */
.sup-issue__description a {
	color: var(--sup-color-link);
	text-decoration: underline;
}
.sup-issue__description a:hover,
.sup-issue__description a:focus-visible { color: var(--sup-color-link-strong); }
.sup-issue__description a::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 2px;
	vertical-align: -1px;
	background-color: currentColor;
	-webkit-mask: url('../images/arrow-right.svg') no-repeat center / contain;
	mask: url('../images/arrow-right.svg') no-repeat center / contain;
}

/* ---------------------------------------------------------------
   Table of contents
   --------------------------------------------------------------- */
/* 32px under the issue module, where the first label starts. */
.sup-toc { margin-top: var(--sup-space-32); }
.sup-toc__section + .sup-toc__section { margin-top: 0; }

/* The Standard Label is an 18px row holding its 14/14 text, 2px above and
   below. Each label has 40px of air above that row and 8px below it,
   indented to the card's own 40px gutter; the first starts flush with the
   list, which already stands 32px under the module. The card's top rule is
   drawn outside the card in the design, over the last pixel of those 8, so
   the label gives it that pixel. */
.sup-toc__label {
	padding:
		calc(var(--sup-space-40) + var(--sup-space-2))
		var(--sup-space-40)
		calc(var(--sup-space-8) + var(--sup-space-2) - var(--sup-border-width));
}
.sup-toc__section:first-child .sup-toc__label { padding-top: var(--sup-space-2); }

.sup-toc__list { margin: 0; padding: 0; list-style: none; }
.sup-toc__item + .sup-toc__item { margin-top: -1px; }

/* ---------------------------------------------------------------
   Article card
   --------------------------------------------------------------- */
/* The design strokes the card outside its top and sides and inside its
   bottom, with 28/40 of padding: the text stands 28px under the top rule,
   40px in from the side rules and 28px over the bottom one, rule included.
   A CSS border is drawn inside the box, so the sides and bottom give that
   1px back. */
.sup-card {
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-20);
	padding:
		var(--sup-space-28)
		calc(var(--sup-space-40) - var(--sup-border-width))
		calc(var(--sup-space-28) - var(--sup-border-width));
	border: var(--sup-border-width) solid var(--sup-color-border);
	background: var(--sup-color-surface);
}
/* The parent theme clears floats on every article summary with two empty
   pseudo-elements. In this flex column they would count as items and add
   the 20px gap above and below the card's content. */
.obj_article_summary.sup-card::before,
.obj_article_summary.sup-card::after { content: none; }

.sup-card__head { display: flex; flex-direction: column; gap: var(--sup-space-8); }

.sup-card__title,
.pkp_structure_page .sup-card__title,
.sup-card__title a {
	margin: 0;
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-h3);
	line-height: var(--sup-leading-display);
	font-weight: var(--sup-weight-medium);
	color: var(--sup-color-text);
	text-decoration: none;
}
.sup-card__title a:hover { text-decoration: underline; color: var(--sup-color-text); }

/* Names sit 16px apart along the line and the rows 8px apart when the list
   wraps — the two axes the JMSACL page sets on the author list. */
.sup-card__authors {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sup-space-8) var(--sup-space-16);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sup-card__author,
.pkp_structure_page .sup-card__author {
	display: inline-flex;
	align-items: center;
	gap: var(--sup-space-4);
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-text);
}
.sup-card__orcid { display: inline-flex; align-items: center; }

/* The galleys sit centred on the row, against the two lines of the link
   and the dates, which stand 2px apart. */
.sup-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sup-space-16);
}

.sup-galleys { display: flex; flex-wrap: wrap; gap: var(--sup-space-8); }

.sup-card__meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sup-space-2); }

.sup-card__dates,
.pkp_structure_page .sup-card__dates {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--sup-space-8);   /* the Dates Row of the JMSACL card */
	margin: 0;
}
.sup-card__date { display: inline-flex; align-items: baseline; gap: var(--sup-space-4); }
.sup-card__date-label,
.sup-card__date-value {
	font-size: var(--sup-text-xs);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-muted);
}
.sup-card__date-label { font-weight: var(--sup-weight-semibold); }

/* ---------------------------------------------------------------
   Non-specialist summary

   A disclosure the reader opens: the control is a small outlined button
   that takes on a grey tint once the text is showing, and the text itself
   stands behind a hairline, indented from the column.
   --------------------------------------------------------------- */
/* The <details> and its <summary> keep the display the browser gives them,
   and the button is drawn on a span inside the summary. Restyling either box
   is a known way to lose the closed state in engines that hide it by
   display rather than by ::details-content, and nothing here needs it. */
.sup-card__summary-toggle {
	list-style: none;
	cursor: pointer;
}
.sup-card__summary-toggle::-webkit-details-marker { display: none; }

.sup-card__summary-control {
	display: inline-flex;
	align-items: center;
	gap: var(--sup-space-4);
	padding: 7px;   /* 8 in the design, less the 1px inside stroke */
	border: var(--sup-border-width) solid var(--sup-color-border);
	border-radius: var(--sup-radius);
	background: var(--sup-color-surface);
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-flat);
	font-weight: var(--sup-weight-medium);
	color: var(--sup-color-muted);
}

/* The three states of the Accordion component: hover lifts the surface and
   darkens the label and mark; open presses the control in and turns the plus
   into a minus. */
.sup-card__summary-toggle:hover .sup-card__summary-control {
	background: var(--sup-color-surface-raised);
	color: var(--sup-color-text);
}
.sup-card__summary-toggle:hover .sup-card__summary-mark { background-color: var(--sup-color-text); }

.sup-card__summary[open] .sup-card__summary-control,
.sup-card__summary[open] .sup-card__summary-toggle:hover .sup-card__summary-control {
	background: var(--sup-color-surface-sunken);
	box-shadow: var(--sup-shadow-pressed);
	color: var(--sup-color-muted);
}
.sup-card__summary[open] .sup-card__summary-mark,
.sup-card__summary[open] .sup-card__summary-toggle:hover .sup-card__summary-mark {
	background-color: var(--sup-color-muted);
	-webkit-mask-image: url('../images/minus.svg');
	mask-image: url('../images/minus.svg');
}

.sup-card__summary-mark {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-color: var(--sup-color-muted);
	-webkit-mask: url('../images/plus.svg') no-repeat center / contain;
	mask: url('../images/plus.svg') no-repeat center / contain;
}

.sup-card__summary-body,
.pkp_structure_page .sup-card__summary-body {
	margin-top: var(--sup-space-10);
	margin-left: var(--sup-space-16);
	padding-left: var(--sup-space-16);
	border-left: 2px solid var(--sup-color-border);
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-text);
}
.sup-card__summary-body p,
.pkp_structure_page .sup-card__summary-body p {
	margin: 0 0 var(--sup-space-12);
	font-size: inherit;
	line-height: inherit;
}
.sup-card__summary-body > *:last-child,
.pkp_structure_page .sup-card__summary-body > *:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   Section headings — "Explore …" and "Explore Past Issues"
   --------------------------------------------------------------- */
.sup-section { display: flex; flex-direction: column; gap: var(--sup-space-24); }

.sup-section__heading,
.pkp_structure_page .sup-section__heading {
	font-family: var(--sup-font-display);
	font-size: var(--sup-text-display);
	line-height: var(--sup-leading-display);
	font-weight: var(--sup-weight-medium);
	color: var(--sup-color-heading);
	margin: 0;
}

/* ---------------------------------------------------------------
   Explore — up to four cards configured per journal in the theme
   settings. Measured from the JMSACL canvas: 28/35 heading, 32px to the
   grid, two columns of 240px cells that share their 1px rules, 76px
   pictogram, 40px from the pictogram to the text.
   --------------------------------------------------------------- */
.sup-explore { gap: var(--sup-space-32); }

.sup-explore__heading,
.pkp_structure_page .sup-explore__heading {
	font-size: var(--sup-text-h2);
	font-weight: var(--sup-weight-semibold);
}

/* Cells keep their size whatever the count: one, two or three cards sit in
   the same grid as four, and no empty cell is drawn to fill a row. */
.sup-explore__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.sup-explore-card {
	display: flex;
	align-items: flex-start;
	gap: var(--sup-space-40);
	min-height: 240px;
	padding: var(--sup-space-40) var(--sup-space-56) var(--sup-space-40) var(--sup-space-40);
	margin: 0 -1px -1px 0;   /* neighbours share their 1px rules */
	border: var(--sup-border-width) solid var(--sup-color-border);
	background: var(--sup-color-surface);
}

/* The pictogram is the theme's own SVG, drawn in the journal's accent. */
.sup-pictogram {
	flex: 0 0 76px;
	width: 76px;
	height: 76px;
	background-color: var(--sup-color-accent);
	-webkit-mask: var(--sup-pictogram) no-repeat center / contain;
	mask: var(--sup-pictogram) no-repeat center / contain;
}
.sup-pictogram--add-document { --sup-pictogram: url('../images/pictograms/add-document.svg'); }
.sup-pictogram--bluepages { --sup-pictogram: url('../images/pictograms/bluepages.svg'); }
.sup-pictogram--calendar-event { --sup-pictogram: url('../images/pictograms/calendar-event.svg'); }
.sup-pictogram--design-development { --sup-pictogram: url('../images/pictograms/design-development.svg'); }
.sup-pictogram--documentation { --sup-pictogram: url('../images/pictograms/documentation.svg'); }
.sup-pictogram--ecosystem { --sup-pictogram: url('../images/pictograms/ecosystem.svg'); }
.sup-pictogram--group { --sup-pictogram: url('../images/pictograms/group.svg'); }
.sup-pictogram--literature { --sup-pictogram: url('../images/pictograms/literature.svg'); }
.sup-pictogram--microscope { --sup-pictogram: url('../images/pictograms/microscope.svg'); }
.sup-pictogram--unlock { --sup-pictogram: url('../images/pictograms/unlock.svg'); }
.sup-pictogram--unlock-01 { --sup-pictogram: url('../images/pictograms/unlock-01.svg'); }

.sup-explore-card__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sup-space-12);
}

.sup-explore-card__header { display: flex; flex-direction: column; gap: var(--sup-space-4); }

.sup-explore-card__title,
.pkp_structure_page .sup-explore-card__title {
	font-family: var(--sup-font-display);
	font-size: var(--sup-text-h3);
	line-height: var(--sup-leading-display);
	font-weight: var(--sup-weight-semibold);
	color: var(--sup-color-text);
	margin: 0;
}

.sup-explore-card__description,
.pkp_structure_page .sup-explore-card__description {
	font-size: var(--sup-text-body);
	line-height: var(--sup-leading-text);
	font-weight: var(--sup-weight-regular);
	color: var(--sup-color-text);
	margin: 0;
}

.sup-explore-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sup-space-2);
	font-size: var(--sup-text-ui);
	line-height: var(--sup-leading-flat);
	font-weight: var(--sup-weight-semibold);
	color: var(--sup-color-link);
	text-decoration: underline;
}
.sup-explore-card__link:hover,
.sup-explore-card__link:active { color: var(--sup-color-link-strong); }

/* The journal's free homepage content, when it writes any, reads as prose. */
.sup-home-content > *:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   Past issues — a four-column grid of issue cards with one shared rule
   --------------------------------------------------------------- */
/* Four cells that share their rules: each carries a full border and overlaps
   its neighbour by that 1px, so a full row reads as the single ruled grid the
   design draws and a shorter row still reads as complete cards. */
.sup-past__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}

.sup-past__item {
	display: flex;
	margin: 0 -1px -1px 0;
	border: var(--sup-border-width) solid var(--sup-color-border);
}

/* The compact card is a cell of the grid: the grid draws the rules, the
   card only stacks its cover, its identification and its link. */
.sup-issue--compact {
	display: flex;
	width: 100%;
	border: 0;
}

.sup-issue--compact .sup-issue__body {
	flex-direction: column;
	align-items: center;
	gap: var(--sup-space-16);
	width: 100%;
	padding: var(--sup-space-32);
	text-align: center;
}

.sup-issue--compact .sup-issue__cover { flex: 0 0 auto; }
.sup-issue--compact .sup-issue__cover img {
	width: var(--sup-cover-width-sm);
	max-width: 100%;
	aspect-ratio: 160 / 226;
}

.sup-issue--compact .sup-issue__details { width: 100%; align-items: center; gap: var(--sup-space-12); }
.sup-issue--compact .sup-issue__header { width: 100%; align-items: center; gap: var(--sup-space-4); }
.sup-issue--compact .sup-issue__identity { align-items: center; }
/* The numbering of a past issue on the homepage is set in the interface
   face at 20/28, medium — the Issue Module Content of the Homepage frame. */
.sup-issue--compact .sup-issue__identification,
.sup-issue--compact .sup-issue__identification a,
.pkp_structure_page .sup-issue--compact .sup-issue__identification {
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-h4);
	line-height: var(--sup-leading-card);
	font-weight: var(--sup-weight-medium);
}
.sup-issue--compact .sup-issue__line { justify-content: center; font-size: var(--sup-text-sm); }

.sup-past__cta { display: flex; justify-content: center; padding: var(--sup-space-32) var(--sup-space-20); }

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */

/* Tablet and below — the sidebar moves under the content, and the past
   issues fall to two across so each cover keeps its 160px */
@media (max-width: 991.98px) {
	.sup-past__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sup-home { padding-block: var(--sup-space-32) var(--sup-space-64); }
	.sup-home__row { grid-template-columns: minmax(0, 1fr); gap: var(--sup-space-40); }
	.sup-explore__grid { grid-template-columns: minmax(0, 1fr); }
	.sup-explore-card { min-height: 0; padding: var(--sup-space-32); gap: var(--sup-space-24); }
}

/* Phones — cards lose their wide gutters, rows stack */
@media (max-width: 767.98px) {
	.sup-home { padding-block: var(--sup-space-24) var(--sup-space-40); }
	.sup-home__sections { gap: var(--sup-space-40); }
	.sup-issue__body { flex-direction: column; align-items: stretch; gap: var(--sup-space-20); padding: var(--sup-space-20); }
	.sup-issue__cover { flex-basis: auto; align-self: center; }
	/* the published date and the issue link fall onto separate lines, so the
	   separator between them has nothing to separate */
	.sup-issue__dot { display: none; }
	.sup-card { padding: var(--sup-space-20); gap: var(--sup-space-16); }
	.sup-toc__label {
		padding:
			calc(var(--sup-space-32) + var(--sup-space-2))
			var(--sup-space-20)
			calc(var(--sup-space-8) + var(--sup-space-2) - var(--sup-border-width));
	}
	.sup-toc__section:first-child .sup-toc__label { padding-top: var(--sup-space-2); }
	.sup-card__footer { flex-direction: column; align-items: stretch; gap: var(--sup-space-20); }
	.sup-card__meta { align-items: flex-start; }
	.sup-card__dates { justify-content: flex-start; gap: var(--sup-space-8); }
	.sup-past__list { grid-template-columns: minmax(0, 1fr); }
	.sup-issue--compact { padding: var(--sup-space-24); }
	.sup-explore-card { flex-direction: column; padding: var(--sup-space-20); }
	.sup-section__heading { font-size: var(--sup-text-h2); }
}