/*
 * Page layouts of phase 4b-2: home, award pages, About, Media, Privacy
 * Policy, Terms and Conditions (docs/audit/isarch-v2-tasks/phase4b-pages-brief.md).
 *
 * Dark stage by default (Kit body: --isarch-ink background, --isarch-paper
 * text); long text uses the light reading surface (.isarch-reading from
 * site.css). Colours come from tokens.css; yellow text only on dark
 * surfaces, --isarch-stone text only on light surfaces. Motion classes
 * (isd-*) are styled by motion.css; elements that carry them set no
 * transition here.
 */

/* ---------- Shared type and controls ---------- */

.isarch-pg-eyebrow {
	margin: 0;
	color: var(--isarch-yellow);
	font: 600 0.75rem/1.3 var(--isarch-font-body);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.isarch-reading .isarch-pg-eyebrow {
	color: var(--isarch-stone);
}

.isarch-pg-accent {
	color: var(--isarch-yellow);
}

body .isarch-pg-h2 .elementor-heading-title,
.isarch-pg-h2-text {
	margin: 0;
	color: var(--isarch-paper);
	font-family: var(--isarch-font-display);
	font-size: clamp(2.25rem, 1.4rem + 4vw, 5rem);
	font-stretch: 125%;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 0.95;
}

/* "Disciplines" is 6.46em wide: 14.2% of the column leaves 8% spare. */
body .isarch-pg-h2 .elementor-heading-title {
	font-size: min(clamp(2.25rem, 1.4rem + 4vw, 5rem), 14.2cqi);
}

body .isarch-pg-h2-small .elementor-heading-title {
	color: var(--isarch-paper);
	font-family: var(--isarch-font-display);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	/* "Announcement" is 8.11em wide: 11.3% of the column leaves 8% spare. */
	font-size: min(clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem), 11.3cqi);
	font-stretch: 112%;
	font-weight: 700;
	line-height: 1.1;
}

body .isarch-pg-h3 .elementor-heading-title {
	color: var(--isarch-paper);
	font-family: var(--isarch-font-display);
	font-size: 1.5rem;
	/* "Sustainability" is 7.25em wide; it ran 69px past a 192px column at a
	   24px default font size. 13.3% of the column keeps the default size in
	   the narrowest column at 16px (181px, three cards at 768px, where the
	   word already had 4% spare) and the same 3.7% spare everywhere else. */
	font-size: min(1.5rem, 13.3cqi);
	font-weight: 700;
	line-height: 1.15;
}

body .isarch-reading .isarch-pg-h2 .elementor-heading-title,
body .isarch-reading .isarch-pg-h2-small .elementor-heading-title {
	color: var(--isarch-ink);
}

/* Display type follows the width of its own column, not only the window.
   Sizes in rem and vw alone outgrow a column that is narrower than the
   window suggests (two-column heads, cards, blocks) or a column whose width
   is fixed in px while the reader's browser uses a larger default font size;
   the widest word then broke in the middle ("ISARC/H", reported 2026-10-11).
   Each display heading's widget is a size container and the size is capped
   at a share of the widget width (cqi): the share leaves the widest word of
   that heading style at least 8% spare room (widths measured in em with the
   web font; the fallback font is narrower). overflow-wrap: anywhere stays
   only as the fallback for a reader's own wider letter spacing (WCAG
   1.4.12), where breaking inside a word is allowed but running past the
   column into the next one is not. Browsers without container units keep
   the first declaration. The widgets sit in column containers, which wrap
   on phones: there Chrome measures an item's height at its max-content
   width, which is zero for a size container, so the widget came out 0px
   high and the heading ran over the next element. A definite width (the
   same width the column gives it anyway) makes it measure at its real
   width. */
.elementor-widget.isarch-pg-page-title,
.elementor-widget.isarch-pg-h2,
.elementor-widget.isarch-pg-h2-small,
.elementor-widget.isarch-pg-h3,
.elementor-widget:has(> .isarch-pg-wordmark) {
	container-type: inline-size;
	width: 100%;
}

body .isarch-pg-page-title .elementor-heading-title {
	color: var(--isarch-yellow);
	font-family: var(--isarch-font-display);
	font-size: clamp(3rem, 1.6rem + 7vw, 8rem);
	/* "ISARCH" is 4.92em wide: 18.5% of the column leaves 9% spare. */
	font-size: min(clamp(3rem, 1.6rem + 7vw, 8rem), 18.5cqi);
	font-stretch: 125%;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 0.92;
	overflow-wrap: anywhere;
}

body .isarch-pg-lead-heading .elementor-heading-title {
	color: var(--isarch-paper);
	font-family: var(--isarch-font-body);
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
	font-stretch: 100%;
	font-weight: 500;
	line-height: 1.35;
}

.isarch-pg-lead-large {
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
	line-height: 1.4;
}

.isarch-pg-prose {
	color: var(--isarch-paper);
	font-size: 1.0625rem;
	line-height: 1.7;
	max-width: 68ch;
}

.isarch-pg-prose p,
.isarch-pg-prose ul {
	margin: 0 0 1.1em;
}

.isarch-pg-prose p:last-child {
	margin-bottom: 0;
}

.isarch-pg-prose p.isarch-pg-eyebrow {
	margin-bottom: 0.75rem;
}

.isarch-reading .isarch-pg-prose {
	color: var(--isarch-ink);
}

body .isarch-pg-prose a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

html body a.isarch-pg-btn,
html body a.isarch-pg-btn:visited {
	align-items: center;
	background: var(--isarch-yellow);
	border: 1px solid var(--isarch-yellow);
	border-radius: var(--isarch-radius-pill);
	color: var(--isarch-black);
	display: inline-flex;
	font: 600 1rem/1.1 var(--isarch-font-body);
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	text-decoration: none;
}

html body a.isarch-pg-btn:hover {
	background: var(--isarch-yellow-soft);
	border-color: var(--isarch-yellow-soft);
	color: var(--isarch-black);
}

html body a.isarch-pg-btn--ghost,
html body a.isarch-pg-btn--ghost:visited {
	background: transparent;
	border-color: var(--isarch-mist);
	color: var(--isarch-paper);
}

html body a.isarch-pg-btn--ghost:hover {
	background: var(--isarch-yellow);
	border-color: var(--isarch-yellow);
	color: var(--isarch-black);
}

html body a.isarch-pg-btn--dark,
html body a.isarch-pg-btn--dark:visited {
	background: var(--isarch-ink);
	border-color: var(--isarch-ink);
	color: var(--isarch-paper);
}

html body a.isarch-pg-btn--dark:hover {
	background: var(--isarch-black);
	border-color: var(--isarch-black);
	color: var(--isarch-yellow);
}

.isarch-pg-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

.isarch-pg-band--rule {
	border-top: 1px solid var(--isarch-line-dark);
}

.isarch-pg-img {
	display: block;
	height: auto;
	max-width: 100%;
}

.isarch-pg-photo {
	margin: 0;
}

.isarch-pg-photo img {
	border-radius: var(--isarch-radius);
	width: 100%;
}

.isarch-pg-photo--tall img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* ---------- Rows and columns (Elementor containers of the page data) ---------- */

.elementor .elementor-element.e-con.isarch-pg-col {
	flex: 1 1 0%;
	min-width: 0;
	width: auto;
}

/* The photo column is 24rem, but the text beside it keeps at least 17rem
   (the 64px column gap of these rows included): the text column of a
   768px window at the default 16px. With a 24px default font size the
   photo column took 576px of a 720px row and left the text 80px, so words
   ran over the photo; the photo column now gives way first. */
.elementor .elementor-element.e-con.isarch-pg-col--media {
	flex: 0 0 min(100%, 24rem);
	flex: 0 0 min(100%, 24rem, calc(100% - 64px - 17rem));
}

.elementor .elementor-element.e-con.isarch-pg-col--head {
	flex: 0 0 30%;
}

@media (max-width: 767px) {
	.elementor .elementor-element.e-con.isarch-pg-col {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* ---------- Home: hero ---------- */

.isarch-pg-hero-band,
.isarch-pg-hero-band .elementor-widget-html,
.isarch-pg-timeline-band .elementor-widget-html {
	width: 100%;
}

.isarch-pg-hero {
	align-items: flex-end;
	display: flex;
	height: calc(100svh - var(--isarch-header-height));
}

.isarch-pg-hero__copy {
	max-width: 62rem;
	padding: 0 var(--isarch-gutter) clamp(5.5rem, 12vh, 8rem);
	width: 100%;
}

.isarch-pg-hero__tagline {
	color: var(--isarch-paper);
	font: 500 clamp(1.125rem, 1rem + 0.8vw, 1.5rem)/1.3 var(--isarch-font-body);
	margin: 0 0 1rem;
}

.isarch-pg-hero__title {
	color: var(--isarch-paper);
	font-family: var(--isarch-font-display);
	font-size: clamp(3rem, 1.2rem + 8vw, 9rem);
	font-stretch: 125%;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 0.92;
	margin: 0 0 1.75rem;
	max-width: 11ch;
}

/* The heading's size comes from the Kit's h1 (2.25rem on phones). On a
   window narrower than 20em (320px at the default 16px; 320 to 478px at a
   24px default font size) "ISARCH" (4.92em) ran 25px past its 240px column
   and the hero cut it off. There the size follows the column: 18.8% of it
   leaves 8% spare. The copy is already positioned with a z-index (motion
   css), so the container adds no new stacking or containing block. */
@media (max-width: 19.9375em) {
	.isarch-pg-hero__copy {
		container-type: inline-size;
	}

	body .isarch-pg-hero__title {
		font-size: min(2.25rem, 18.8cqi);
	}
}

.isarch-pg-hero__meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
}

/* Current phase of the award, next to the entry button. It was a thin grey
   outline with small light text and was easily missed (reported
   2026-10-11). Now yellow text (16px, semibold) and a 2px yellow outline on
   the opaque ink ground: 13.1:1 for the text, and the yellow outline
   against the dark hero. The entry button stays the only yellow fill, so it
   remains the main action and the status reads as information. */
.isarch-pg-status {
	align-items: center;
	background: var(--isarch-ink);
	border: 2px solid var(--isarch-yellow);
	border-radius: var(--isarch-radius-pill);
	color: var(--isarch-yellow);
	display: inline-flex;
	font-size: 1rem;
	font-weight: 600;
	gap: 0.75rem;
	letter-spacing: 0.01em;
	line-height: 1.25;
	margin: 0;
	min-height: 48px;
	padding: 0.5rem 1.25rem 0.5rem 1rem;
}

/* A larger yellow dot with a slow breathing glow (one 2.4s cycle, the glow
   grows and fades smoothly; nothing flashes, WCAG 2.3.1). With reduced
   motion or the site's motion pause it keeps a still glow. */
.isarch-pg-status__dot {
	animation: isarch-status-glow 2.4s ease-in-out infinite;
	background: var(--isarch-yellow);
	border-radius: 50%;
	box-shadow: 0 0 6px 2px rgb(255 221 41 / 0.55);
	flex: none;
	height: 12px;
	width: 12px;
}

@keyframes isarch-status-glow {
	0%,
	100% {
		box-shadow: 0 0 4px 1px rgb(255 221 41 / 0.6);
	}

	50% {
		box-shadow: 0 0 14px 6px rgb(255 221 41 / 0.3);
	}
}

html.isd-motion-paused .isarch-pg-status__dot {
	animation: none;
}

@media (max-width: 767px) {
	.isarch-pg-hero__copy {
		padding-bottom: 6rem;
	}
}

/* ---------- Home: figures ---------- */

.isarch-pg-stats {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.isarch-pg-stat {
	border-left: 1px solid var(--isarch-line-dark);
	/* The figure's size follows its own column (see the page title above). */
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem 1.5rem 0.5rem;
}

.isarch-pg-stat__value {
	color: var(--isarch-yellow);
	font-family: var(--isarch-font-display);
	font-size: clamp(2rem, 1.2rem + 2.2vw, 3.25rem);
	/* "10000+" is 4.35em wide: 21% of the column leaves 8% spare, so the
	   figure stays inside its own column and clear of the next one. */
	font-size: min(clamp(2rem, 1.2rem + 2.2vw, 3.25rem), 21cqi);
	font-stretch: 112%;
	font-weight: 900;
	line-height: 0.9;
}

.isarch-pg-stat__label {
	color: var(--isarch-mist);
	font-size: 0.9375rem;
}

@media (max-width: 767px) {
	.isarch-pg-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 1.5rem;
	}

	.isarch-pg-stat {
		padding: 0.75rem 1rem 0;
	}
}

/* A window narrower than 20em (320px at the default 16px): less side
   padding, so the longest label ("Exposure", 4.42em) stays inside its
   column at a 24px default font size (it ran 4px past a 95px column). The
   label keeps its size: a size in cqi would make the stats block measure
   shorter than it is in the wrapping column container on phones. */
@media (max-width: 19.9375em) {
	.isarch-pg-stat {
		padding-inline: 0.5rem;
	}
}

/* ---------- Home: year timeline ---------- */

.isarch-pg-timeline {
	border-block: 1px solid var(--isarch-line-dark);
	padding-block: clamp(3.5rem, 8vw, 5rem);
}

.isarch-pg-timeline__head {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0 auto;
	max-width: calc(var(--isarch-content-width) + 2 * var(--isarch-gutter));
	padding: 0 var(--isarch-gutter) 2rem;
	width: 100%;
}

/* Home: the timeline is static (isd-timeline--static: natural height, native
   horizontal scroll); a thin scrollbar shows that it scrolls. */
html.js .isarch-pg-timeline .isd-timeline__viewport {
	scrollbar-color: var(--isarch-mist) transparent;
	scrollbar-width: thin;
}

/* The first year lines up with the content column; the track still scrolls
   to the window edge. */
.isarch-pg-timeline .isd-timeline__track {
	padding-inline: max(var(--isarch-gutter), calc((100vw - var(--isarch-content-width)) / 2));
}

/* Scroll snap uses the same start, so the first year is not pulled left. */
.isarch-pg-timeline .isd-timeline__viewport {
	scroll-padding-inline: max(var(--isarch-gutter), calc((100vw - var(--isarch-content-width)) / 2));
}

.isarch-pg-year {
	border-left: 1px solid var(--isarch-line-dark);
	color: var(--isarch-paper);
	/* The year's size follows the width of its card (see the page title). */
	container-type: inline-size;
	display: block;
	min-height: 12rem;
	padding: 1.5rem 1.75rem;
	text-decoration: none;
	width: clamp(14rem, 26vw, 22rem);
}

body a.isarch-pg-year,
body a.isarch-pg-year:visited {
	color: var(--isarch-paper);
}

.isarch-pg-year__num {
	display: block;
	font-family: var(--isarch-font-display);
	font-size: clamp(3.25rem, 2rem + 4vw, 5.75rem);
	/* A year is 3.25em wide: 28% of the card leaves 9% spare (the vw size
	   ran up to 29px past the card at 720px). */
	font-size: min(clamp(3.25rem, 2rem + 4vw, 5.75rem), 28cqi);
	font-stretch: 125%;
	font-weight: 900;
	line-height: 0.9;
}

.isarch-pg-year:hover .isarch-pg-year__num {
	color: var(--isarch-yellow);
}

.isarch-pg-year__meta {
	color: var(--isarch-mist);
	display: block;
	font-size: 0.9375rem;
	margin-top: 1rem;
}

.isarch-pg-year-group {
	border-left: 1px solid var(--isarch-line-dark);
	min-height: 12rem;
	padding: 1.5rem 1.75rem;
}

.isarch-pg-year-group .isd-timeline__group-label {
	color: var(--isarch-mist);
}

body .isarch-pg-year-group .isd-timeline__years a {
	color: var(--isarch-paper);
	text-decoration: none;
}

body .isarch-pg-year-group .isd-timeline__years a:hover {
	color: var(--isarch-yellow);
}

/* ---------- Home: winners, jury, about, ranking ---------- */

.isarch-pg-banner {
	margin: 0;
}

.isarch-pg-banner img {
	border-radius: var(--isarch-radius);
	width: 100%;
}

.isarch-pg-jury-grid,
.isarch-pg-rank-cards {
	--isarch-pg-cols: 4;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* Four columns (two up to 1024px), but a column is never narrower than
	   its longest word needs: 7.2rem for a juror card ("Provencher_Roy" is
	   7.8em of the 0.9375rem role line), 8.2rem for a ranking card
	   ("Cambridge" is 5.89em of the 1.3125rem name on phones). That is the
	   column width a 320px phone has at the default 16px, so the default
	   layout is the same; with a larger default font size the names ran
	   into the next card on phones (up to 72px at 24px), and there the grid
	   now shows one column fewer. */
	grid-template-columns: repeat(auto-fill, minmax(max(min(100%, var(--isarch-pg-col-min)), calc((100% - (var(--isarch-pg-cols) - 1) * 1.5rem) / var(--isarch-pg-cols) - 1px)), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.isarch-pg-jury-grid {
	--isarch-pg-col-min: 7.2rem;
}

.isarch-pg-rank-cards {
	--isarch-pg-col-min: 8.2rem;
}

.isarch-pg-juror__media img,
.isarch-pg-rank-card__media img {
	aspect-ratio: 1 / 1;
	border-radius: var(--isarch-radius);
	object-fit: cover;
	width: 100%;
}

.isarch-pg-rank-card__media img {
	aspect-ratio: 4 / 3;
}

.isarch-pg-juror__name,
.isarch-pg-rank-card__name {
	color: var(--isarch-paper);
	font-family: var(--isarch-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 1rem 0 0.375rem;
}

.isarch-pg-juror__role,
.isarch-pg-rank-card__country {
	color: var(--isarch-mist);
	font-size: 0.9375rem;
	line-height: 1.45;
	margin: 0;
}


@media (max-width: 1024px) {
	.isarch-pg-jury-grid,
	.isarch-pg-rank-cards {
		--isarch-pg-cols: 2;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-columns: repeat(auto-fill, minmax(max(min(100%, var(--isarch-pg-col-min)), calc((100% - (var(--isarch-pg-cols) - 1) * 1.5rem) / var(--isarch-pg-cols) - 1px)), 1fr));
	}
}

.isarch-pg-panel {
	background: var(--isarch-ink-raised);
	border-radius: var(--isarch-radius);
	padding: 2rem;
}

.isarch-pg-panel p {
	margin: 0;
}

.isarch-pg-ticks {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Two columns while each is at least 9.5rem wide (the longest word,
	   "Production", with its bullet is about 7rem), one column below that,
	   so the words stay inside their column at any default font size. */
	grid-template-columns: repeat(auto-fit, minmax(max(9.5rem, calc((100% - 0.5rem) / 2 - 1px)), 1fr));
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

.isarch-pg-ticks li {
	padding-left: 1.5rem;
	position: relative;
}

.isarch-pg-ticks li::before {
	background: var(--isarch-yellow);
	border-radius: 50%;
	content: "";
	height: 8px;
	left: 0.25rem;
	position: absolute;
	top: 0.6em;
	width: 8px;
}

/* ---------- Light reading bands: latest posts, logos, questions ---------- */

.isarch-pg-news-list {
	display: grid;
	gap: 2rem 1.75rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.isarch-pg-news-card {
	border-top: 2px solid var(--isarch-ink);
	padding-top: 1.25rem;
}

.isarch-pg-news-card__date {
	color: var(--isarch-stone);
	font-size: 0.875rem;
	margin: 0 0 0.5rem;
}

.isarch-pg-news-card__title {
	font-family: var(--isarch-font-display);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

body .isarch-pg-news-card__link {
	color: var(--isarch-ink);
	text-decoration: none;
}

body .isarch-pg-news-card__link:hover {
	background: var(--isarch-yellow);
	/* Not the Kit's pale yellow link hover colour on yellow (WCAG 1.4.3). */
	color: var(--isarch-ink);
	text-decoration: underline;
}

.isarch-pg-logo-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.isarch-pg-logo-tile {
	align-items: center;
	background: var(--isarch-white);
	border: 1px solid var(--isarch-line-light);
	border-radius: 12px;
	display: flex;
	justify-content: center;
	min-height: 6.5rem;
	padding: 1rem;
}

.isarch-pg-logo-tile img {
	max-height: 4.5rem;
	object-fit: contain;
	width: auto;
}

.isarch-pg-disclosures {
	border-bottom: 1px solid var(--isarch-line-dark);
}

.isarch-reading .isarch-pg-disclosures,
.isarch-reading .isarch-pg-disclosure {
	border-color: var(--isarch-line-light);
}

.isarch-pg-disclosure {
	border-top: 1px solid var(--isarch-line-dark);
}

.isarch-pg-disclosure__summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 1.125rem;
	font-weight: 600;
	gap: 1rem;
	justify-content: space-between;
	list-style: none;
	min-height: 48px;
	padding: 0.875rem 0;
}

.isarch-pg-disclosure__summary::-webkit-details-marker {
	display: none;
}

/* The plus and minus are decoration: the summary itself tells whether it is
   expanded. The second content declaration gives them empty alternative
   text, so they stay out of the summary's accessible name; browsers without
   that syntax keep the first one. */
.isarch-pg-disclosure__summary::after {
	content: "+";
	content: "+" / "";
	flex: none;
	font: 400 1.75rem/1 var(--isarch-font-body);
}

.isarch-pg-disclosure[open] > .isarch-pg-disclosure__summary::after {
	content: "\2212";
	content: "\2212" / "";
}

.isarch-pg-disclosure__body {
	padding: 0 0 1.5rem;
}

.isarch-pg-disclosure__body p {
	margin: 0;
	max-width: 68ch;
}

/* ---------- Award pages ---------- */

/* The widget that holds the category list is a stretched flex item. Without
   a definite width, Chrome measures its height with the list laid out at its
   max-content width, so when the words are narrower than the columns the
   square blocks come out taller than the widget and the next band rides up
   over them. A definite width makes it measure the list at its real width. */
.e-con .elementor-widget:has(> .isarch-pg-tiles) {
	width: 100%;
}

.isarch-pg-tiles {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.isarch-pg-tile__link {
	border-radius: var(--isarch-radius);
	display: block;
	overflow: hidden;
}

/* Category blocks: the award name as text (WCAG 1.4.5) in the colours,
   case and three lines of the former images (yellow #FFDD29 with black,
   ESG teal #018174 with white, about 11 % of the block width, line height
   1.8). The size follows the block width of each layout: the viewport-unit
   size of each layout, capped at 10.6% of the block (container unit). The
   viewport sizes alone made "ARCHITECTURE" fill the block exactly, so a
   wider scrollbar, a larger default font size or another font renderer
   broke it in the middle ("ARCHITECT/URE", reported 2026-10-11); the cap
   leaves it 8% spare room. (Container units on the link once made the
   Elementor container measure the list too short on phones; the definite
   widget width above removed that.) */
body .isarch-pg-tiles .isarch-pg-tile__link {
	align-items: center;
	aspect-ratio: 1 / 1;
	background: var(--isarch-yellow);
	color: var(--isarch-black);
	container-type: inline-size;
	display: flex;
	justify-content: center;
	/* clip, not hidden: the link is then no scroll container, so the square
	   grows with its text when the text needs more room (narrow columns,
	   zoom, a reader's own text spacing) instead of cutting it. */
	overflow: hidden;
	overflow: clip;
	text-decoration: none;
}

body .isarch-pg-tiles .isarch-pg-tile__link:hover,
body .isarch-pg-tiles .isarch-pg-tile__link:focus-visible {
	color: var(--isarch-black);
}

body.isd-esg .isarch-pg-tiles .isarch-pg-tile__link,
body.isd-esg .isarch-pg-tiles .isarch-pg-tile__link:hover,
body.isd-esg .isarch-pg-tiles .isarch-pg-tile__link:focus-visible {
	background: #018174;
	color: #FFFFFF;
}

/* "ARCHITECTURE" is 8.11em wide plus 0.6em side padding: at 10.6% of the
   block it takes 92% of the room between the paddings. overflow-wrap:
   anywhere only acts with a reader's own wider letter spacing (1.4.12). */
.isarch-pg-tile__text {
	--isarch-tile-size: 2.43rem;
	font-family: var(--isarch-font-display);
	font-size: var(--isarch-tile-size);
	font-size: min(var(--isarch-tile-size), 10.6cqi);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.8;
	overflow-wrap: anywhere;
	padding: 0.25em 0.3em;
	text-align: center;
}

.isarch-pg-tile__line {
	display: block;
}

/* The light sweep band of the block (model.css, .isd-block > a::before)
   reaches 30px above and below the link, where overflow: hidden cuts it;
   kept inside the link so that the text block is the only content (the
   band looks the same). */
.isarch-pg-tiles .isd-block > .isarch-pg-tile__link::before {
	bottom: 0;
	top: 0;
}

@media (max-width: 1247px) {
	.isarch-pg-tile__text {
		--isarch-tile-size: calc(3.63vw - 6.6px);
	}
}

@media (max-width: 767px) {
	.isarch-pg-tile__text {
		--isarch-tile-size: calc(5.5vw - 6.6px);
	}

	.isarch-pg-tiles--3 .isarch-pg-tile__text {
		--isarch-tile-size: calc(11vw - 7.5px);
	}
}

@media (max-width: 767px) {
	.isarch-pg-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.isarch-pg-tiles--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.isarch-pg-steps {
	border-left: 1px solid var(--isarch-line-dark);
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

.isarch-pg-step {
	display: grid;
	gap: 0.25rem 2.5rem;
	grid-template-columns: 13rem minmax(0, 1fr);
	padding: 0 0 2.75rem 2rem;
	position: relative;
}

.isarch-pg-step::before {
	background: var(--isarch-yellow);
	border-radius: 50%;
	content: "";
	height: 11px;
	left: -6px;
	position: absolute;
	top: 0.45rem;
	width: 11px;
}

.isarch-pg-step > * {
	grid-column: 2;
	margin: 0;
}

.isarch-pg-step > .isarch-pg-step__date {
	color: var(--isarch-yellow);
	font-family: var(--isarch-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	grid-column: 1;
	grid-row: 1 / span 6;
}

.isarch-pg-step__title {
	color: var(--isarch-paper);
	font-family: var(--isarch-font-display);
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	font-weight: 700;
	line-height: 1.15;
}

.isarch-pg-step__period {
	color: var(--isarch-mist);
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.isarch-pg-step p {
	max-width: 62ch;
}

.isarch-pg-step__cta {
	margin-top: 1rem;
}

@media (max-width: 767px) {
	.isarch-pg-step {
		grid-template-columns: minmax(0, 1fr);
		padding-left: 1.25rem;
	}

	.isarch-pg-step > *,
	.isarch-pg-step > .isarch-pg-step__date {
		grid-column: 1;
		grid-row: auto;
	}
}

/* From 768px each step is a size container, and its date and text stack as
   on phones when the step is too narrow for both columns: the date column
   (13rem), the gap (2.5rem) and at least 15.5rem for the text ("Announcement"
   is 8.22em of the 1.75rem title, plus 8%). From 900px the steps sit beside
   the floor tower (model.css) and are narrower than the window suggests;
   with a 20 or 24px default font size the titles ran past the step and the
   page scrolled sideways by up to 124px. At the default 16px a step is
   always wide enough, so nothing changes there. */
@media (min-width: 768px) {
	.isarch-pg-step {
		container: isarch-step / inline-size;
	}
}

@container isarch-step (max-width: 31rem) {
	.isarch-pg-step > *,
	.isarch-pg-step > .isarch-pg-step__date {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

.isarch-pg-disciplines {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

.isarch-pg-discipline {
	background: var(--isarch-ink-raised);
	border-radius: var(--isarch-radius);
	padding: 1.75rem 1.75rem 1rem;
}

/* A window narrower than 20em (320px at the default 16px): the card's side
   padding gives the room the title needs ("Architecture", 6.69em of the
   Kit's 1.3125rem h3, ran 7px past the card at a 24px default font size). */
@media (max-width: 19.9375em) {
	.isarch-pg-discipline {
		padding-inline: 1.25rem;
	}
}

.isarch-pg-discipline__title {
	color: var(--isarch-yellow);
	font-family: var(--isarch-font-display);
	font-size: 1.875rem;
	font-weight: 800;
	line-height: 1.05;
	margin: 0 0 0.75rem;
}

.isarch-pg-discipline .isarch-pg-disclosure:first-of-type {
	border-top: 0;
}

.isarch-pg-tags {
	color: var(--isarch-mist);
	columns: 2 11rem;
	column-gap: 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.45;
	list-style: none;
	margin: 0;
	padding: 0;
}

.isarch-pg-tags + .isarch-pg-tags {
	border-top: 1px solid var(--isarch-line-dark);
	margin-top: 0.75rem;
	padding-top: 0.75rem;
}

.isarch-pg-tags li {
	break-inside: avoid;
	padding: 0.15rem 0;
}

.isarch-pg-info {
	border-top: 1px solid var(--isarch-line-light);
	padding-top: 2rem;
}


/* ---------- About and Media ---------- */


.isarch-pg-wordmark {
	color: var(--isarch-yellow);
	font-family: var(--isarch-font-display);
	/* The word is about 4.94 em wide: below about 460 px the size follows the
	   column width so the last letter is not cut (WCAG 1.4.10); wider
	   screens keep 1rem + 15vw. */
	font-size: clamp(3rem, min(1rem + 15vw, 20vw - 7px), 15rem);
	/* The word is 4.94em wide: 18.5% of its column leaves 8.6% spare, so it
	   stays on one line at any window width and default font size (the
	   viewport size alone filled 96% of the column at 1440px and broke the
	   word with a larger default font size). */
	font-size: min(clamp(3rem, min(1rem + 15vw, 20vw - 7px), 15rem), 18.5cqi);
	font-stretch: 125%;
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 0.8;
	margin: 1rem 0 0;
	/* With a reader's own wider letter spacing (WCAG 1.4.12) the word wraps
	   instead of running past the page edge. */
	overflow-wrap: anywhere;
}

.isarch-pg-press-list {
	display: grid;
	gap: 2.25rem 2rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.isarch-pg-press {
	border-top: 2px solid var(--isarch-ink);
	padding-top: 1rem;
}

.isarch-pg-press__outlet {
	font-family: var(--isarch-font-display);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.5rem;
}

body .isarch-pg-press__link {
	color: var(--isarch-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

body .isarch-pg-press__link:hover {
	background: var(--isarch-yellow);
	color: var(--isarch-ink);
	text-decoration-thickness: 2px;
}

.isarch-pg-press__title {
	color: var(--isarch-stone);
	margin: 0;
}

/* ---------- Privacy Policy, Terms and Conditions (Hello page template) ---------- */

body.isarch-pg-reading-body .site-main.isarch-pg-reading-page {
	margin: 0;
	max-width: none;
	padding: clamp(3.5rem, 8vw, 6rem) var(--isarch-gutter) clamp(4rem, 10vw, 7rem);
	width: 100%;
}

.isarch-pg-reading-page .page-content {
	color: var(--isarch-ink);
	font-size: 1.0625rem;
	line-height: 1.7;
	margin: 0 auto;
	max-width: var(--isarch-reading-width);
}

.isarch-pg-reading-page .page-content p,
.isarch-pg-reading-page .page-content ol,
.isarch-pg-reading-page .page-content ul {
	margin: 0 0 1.25em;
}

/* Section headings of the policy texts (H2 under the page title). */
.isarch-pg-reading-page .page-content h2 {
	color: var(--isarch-ink);
	font-family: var(--isarch-font-display);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: 2.25em 0 0.6em;
}

/* Sub-headings inside a section (H3 under an H2). */
.isarch-pg-reading-page .page-content h3 {
	color: var(--isarch-ink);
	font-family: var(--isarch-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	margin: 1.75em 0 0.4em;
}

.isarch-pg-reading-page .page-content b,
.isarch-pg-reading-page .page-content strong {
	font-weight: 700;
}

body .isarch-pg-reading-page .page-content a {
	color: var(--isarch-ink);
	text-decoration: underline;
}

.isarch-pg-reading-page__title {
	color: var(--isarch-ink);
	font-family: var(--isarch-font-display);
	font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
	font-stretch: 125%;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 0.95;
	margin: 0 0 2.5rem;
}

/* ---------- Motion v2 hooks (build/isarch-v2-motion/README.md, second version) ---------- */

/* Award pages: the H1 and the isometric cubes share the head row. */
.elementor .elementor-element.e-con.isarch-pg-head-iso {
	flex: 0 0 auto;
	align-items: flex-end;
}

/* ESG page: the intro row has no padding of its own; its air-flow lines
   (model.css, top and bottom edge) reach into the gap and the band padding
   instead of running through the text. */
.isarch-pg-row.isd-flow > .isd-flow__lines {
	inset: -48px 0;
}

.isarch-pg-pause {
	display: flex;
	justify-content: flex-end;
	min-height: 44px;
}

@media (max-width: 767px) {
	.elementor .elementor-element.e-con.isarch-pg-head-iso {
		align-items: center;
	}
}

/* Category tiles as solid blocks: room for the top and side faces. */
.isarch-pg-tiles--blocks {
	--isd-depth: 18px;
	gap: calc(1.25rem + 18px) calc(1rem + 18px);
	padding: 18px 18px 0 0;
}

.isarch-pg-tiles--blocks .isarch-pg-tile__link,
.isarch-pg-tiles--blocks .isarch-pg-tile__link img {
	border-radius: 0;
}

/* Home Winners: the Gold work cards under the pavilion ([isarch_home_gold],
   approved demo build/isarch-v2-motion/demo/home.html and v2.css). */
.isarch-pg-works {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

body .isarch-pg-work__card {
	background: var(--isarch-ink-raised);
	border: 1px solid var(--isarch-line-dark);
	border-radius: 16px;
	color: var(--isarch-paper);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
}

.isarch-pg-work__media {
	aspect-ratio: 4 / 3;
	background: #110d08;
	display: block;
	overflow: hidden;
}

.isarch-pg-work__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.isarch-pg-work__body {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.1rem 1.25rem 1.4rem;
}

.isarch-pg-work__title {
	font: 700 1.25rem/1.15 var(--isarch-font-display);
	font-stretch: 112%;
}

.isarch-pg-work__meta {
	color: var(--isarch-mist);
	font-size: 0.875rem;
}

@media (max-width: 899px) {
	.isarch-pg-works {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.isarch-pg-works {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Home jury grid as the lit facade. */
.isarch-pg-jury-grid.isd-facade {
	border-radius: 20px;
	padding: clamp(1rem, 2.4vw, 2rem);
}

.isd-facade .isarch-pg-juror__media {
	aspect-ratio: 1 / 1;
	border-radius: var(--isarch-radius);
	overflow: hidden;
}

.isd-facade .isarch-pg-juror__media img {
	display: block;
	height: 100%;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.isarch-pg-status__dot {
		animation: none;
	}
}