/* ============================================================
   editorial.css

   Group C: projects archive, project case study, articles index,
   article post, category (news and events) archive, About,
   testimonials and search results.

   Loaded by inc/assets.php via indo_2027_is_editorial_view().

   It adds layout only. Every component these screens use is
   already styled in components.css: the project and article
   cards, the filter button and its panel, the chips, the
   pagination cells, the quote wall, the stat band, the flat and
   video heroes. Nothing here restyles one of them, and nothing
   here carries a border radius: INDO is square.

   Three rules in this file are load-bearing and are marked where
   they appear:

   1. The projects grid breaks at 1100px, not 1024. A 16:9 card at
      two columns gets shorter than its own overlaid text, so the
      300px floor forced a 533px minimum card width and pushed the
      grid 17 to 82px past the viewport between roughly 1100 and
      1280px. `minmax(0, 1fr)` on the track and `width: 100%` on
      the card are what hold it.
   2. The article hero band is 820px, flush with the prose column.
      It was 1100px and hung 140px wider on both sides.
   3. The year marker's sticky offset is 180px, dropping to 150px
      at 900px where the header becomes 64px and the tab row moves
      up with it.
   ============================================================ */


/* ============================================================
   1. Archive header, shared by projects, articles and news
   ============================================================ */

.indo-archive-head {
	background: var(--bg);
	/* The flat hero's top padding (2026-09-25), so a white archive head
	   starts its H1 where a dark flat band does. */
	padding-top: var(--hero-flat-pt);
	padding-bottom: var(--space-3);
}

.indo-archive-head__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.indo-archive-head__body {
	min-width: 0;
	max-width: 44ch;
}

.indo-archive-head__action { flex: 0 0 auto; }

.indo-archive-head__title {
	margin: 0;
	/* Size and weight: the flat hero H1, `.indo-h1--flat` in components.css
	   (2026-09-25). The projects (60px), articles (44px) and news (88px,
	   weight 200) archives each had their own. */
	text-wrap: balance;
}

.indo-archive-head__lede {
	margin: var(--space-1-25) 0 0;
	max-width: 56ch;
}

.indo-archive-head--news .indo-archive-head__lede { font-size: var(--fs-18); }

.indo-archive-body { background: var(--bg); }

.indo-archive-body__empty {
	margin: 0;
	padding: var(--space-4) 0;
	color: var(--fg-2);
}

.indo-editorial-pagination { margin-top: var(--space-5); }


/* ============================================================
   2. Projects archive
   ============================================================ */

.indo-projectgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
}

/* LOAD-BEARING. Without width:100% and min-width:0 the 300px floor
   on a 16:9 card resolves to a 533px minimum width and the two
   columns overflow the rail between roughly 1100 and 1280px. */
.indo-projectgrid > .indo-card {
	width: 100%;
	min-width: 0;
}

.indo-projectgrid .indo-card__title { text-wrap: balance; }

.indo-projectgrid .indo-card__blurb {
	color: var(--fg-on-dark-2);
	margin-top: var(--space-0-75);
}

/* Non-lead cards clamp their teaser to two lines, so a long excerpt
   cannot push the title out of a fixed-ratio card. */
.indo-projectgrid__clamp .indo-card__blurb {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}


/* ============================================================
   3. Project case study
   ============================================================ */

.indo-casestudy__hero .indo-hero__rail { max-width: var(--rail); }

.indo-casestudy__hero .indo-hero__title { text-wrap: balance; }

.indo-casestudy__hero .lede {
	max-width: 64ch;
	color: var(--fg-on-dark-2);
}

/* The facts band. As many cells as the project has fields, which is
   between one and four: only 5 of the 39 English projects carry a
   design and only 3 a location. */
.indo-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	margin: 0;
}

.indo-facts__cell {
	padding: var(--space-2-25) var(--space-3);
	border-left: 1px solid var(--border-on-dark-hair);
}

.indo-facts__cell:first-child {
	padding-left: 0;
	border-left: 0;
}

.indo-facts__label {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-11);
	font-weight: var(--w-body-bold);
	letter-spacing: var(--tracking-eyebrow-xs);
	text-transform: uppercase;
	color: var(--fg-on-dark-3);
}

.indo-facts__value {
	margin: var(--space-0-75) 0 0;
	font-family: var(--font-display);
	font-weight: var(--w-display);
	font-size: var(--fs-19);
	line-height: 1.35;
	color: var(--fg-on-dark);
}

.indo-facts__value--accent { color: var(--accent); }

.indo-casestudy__gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
	margin-top: var(--space-4);
}

.indo-casestudy__shot {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bg-soft);
}

.indo-casestudy__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.indo-relatedgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-2);
}


/* ============================================================
   4. Articles index
   ============================================================ */

.indo-articlegrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3) var(--space-2);
}

.indo-articlegrid > .indo-card--article-lead { grid-column: 1 / -1; }

.indo-articlegrid > .indo-card {
	width: 100%;
	min-width: 0;
}


/* ============================================================
   5. Article post
   ============================================================ */

.indo-article__head {
	background: var(--bg);
	padding-top: var(--hero-flat-pt);
}

.indo-article__meta {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	flex-wrap: wrap;
	margin: 0 0 var(--space-2);
}

.indo-article__cat {
	font-family: var(--font-body);
	font-size: var(--fs-11);
	font-weight: var(--w-body-bold);
	letter-spacing: var(--tracking-eyebrow-xs);
	text-transform: uppercase;
	color: var(--accent);
	text-decoration: none;
}

.indo-article__cat:hover,
.indo-article__cat:focus-visible { color: var(--accent-hover); }

.indo-article__date {
	font-family: var(--font-numeric);
	font-variant-numeric: tabular-nums;
	font-size: var(--fs-meta);
	color: var(--fg-muted);
}

.indo-article__title {
	margin: 0;
	text-wrap: balance;
}

.indo-article__standfirst {
	margin: var(--space-2) 0 0;
	font-size: var(--fs-21);
}

/* LOAD-BEARING. The hero band is the prose column's width, not the
   1280px rail: it sits inside .indo-shell--prose and fills it. */
.indo-article__hero {
	position: relative;
	margin: var(--space-4) 0 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bg-soft);
}

.indo-article__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.indo-article__bodywrap { background: var(--bg); }
.indo-article__body { margin-top: var(--space-3); }

.indo-article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--space-4);
	padding-top: var(--space-3);
	border-top: 1px solid var(--border-2);
}


/* ============================================================
   6. Editorial prose
   Stored body copy, from post_content. The editor's whole
   vocabulary: paragraphs, headings, lists, images, quotes and
   the occasional table.
   ============================================================ */

.indo-editorial-prose {
	font-size: var(--fs-18);
	line-height: 1.75;
	color: var(--fg-1);
}

.indo-editorial-prose > * + * { margin-top: 1.1em; }

.indo-editorial-prose h2 {
	margin-top: 1.7em;
	font-size: var(--fs-prose-h2);
	letter-spacing: -0.012em;
}

.indo-editorial-prose h3 {
	margin-top: 1.5em;
	font-size: var(--fs-22);
}

.indo-editorial-prose h4 {
	margin-top: 1.4em;
	font-size: var(--fs-18);
}

.indo-editorial-prose ul,
.indo-editorial-prose ol { padding-left: var(--space-2); }

.indo-editorial-prose li + li { margin-top: 0.4em; }

.indo-editorial-prose img,
.indo-editorial-prose iframe,
.indo-editorial-prose video {
	display: block;
	max-width: 100%;
	height: auto;
}

.indo-editorial-prose figure { margin: var(--space-3) 0; }

.indo-editorial-prose figcaption {
	margin-top: var(--space-0-75);
	font-size: var(--fs-small);
	color: var(--fg-2);
}

.indo-editorial-prose blockquote {
	margin: var(--space-3) 0;
	padding: 4px 0 4px var(--space-1-75);
	border-left: 2px solid var(--accent);
	font-family: var(--font-display);
	font-weight: var(--w-display);
	font-size: var(--fs-28);
	line-height: 1.35;
	letter-spacing: -0.018em;
}

.indo-editorial-prose blockquote p { margin: 0; }

.indo-editorial-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-15);
}

.indo-editorial-prose th,
.indo-editorial-prose td {
	padding: var(--space-0-75) var(--space-1);
	border: 1px solid var(--border-2);
	text-align: left;
	vertical-align: top;
}

.indo-editorial-prose th {
	font-weight: var(--w-body-bold);
	background: var(--bg-soft);
}


/* ============================================================
   7. News and events archive
   ============================================================ */

.indo-topictabs__row { justify-content: flex-start; }

.indo-yeargroup {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: var(--space-4);
	margin-bottom: var(--space-1);
}

/* LOAD-BEARING. 180px clears the 76px header plus the 80px sticky
   tab row above it; at 900px both shrink and this goes to 150px. */
.indo-yeargroup__marker {
	position: sticky;
	top: var(--sticky-offset-deep);
	align-self: start;
	margin: var(--space-3) 0 0;
	font-family: var(--font-numeric);
	font-variant-numeric: tabular-nums;
	font-size: var(--fs-d7);
	font-weight: 200;
	line-height: 1;
	letter-spacing: 0;
	/* 0.50, not the design's 0.16.
	   This reads as a pale watermark year and the design draws it that way,
	   but it is not decoration: it is an <h2> with an id, and each
	   .indo-yeargroup names itself with aria-labelledby pointing at it. A
	   heading that labels a section has to be legible. At 0.16 it measured
	   1.38:1; at 56px the bar is 3:1 for large text and 0.50 gives 3.19:1,
	   which is the lightest value that clears it. Still visibly a watermark,
	   just one a sighted reader can actually read the year from. */
	color: rgba(33, 33, 33, 0.5);
}

.indo-yearitem {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-2-5);
	align-items: start;
	padding: var(--space-3) 0;
	border-top: 1px solid var(--border-2);
}

.indo-yearitem__body { min-width: 0; }

.indo-yearitem__meta {
	display: flex;
	align-items: center;
	gap: var(--space-0-75);
	flex-wrap: wrap;
	margin: 0 0 var(--space-0-75);
	font-family: var(--font-numeric);
	font-size: var(--fs-meta);
	color: var(--fg-muted);
}

.indo-yearitem__cat {
	font-family: var(--font-body);
	font-size: var(--fs-11);
	font-weight: var(--w-body-bold);
	letter-spacing: var(--tracking-eyebrow-xs);
	text-transform: uppercase;
	color: var(--accent);
}

.indo-yearitem__title {
	margin: 0;
	font-size: 24px;                      /* GAP G3 */
	font-weight: var(--w-card-title);
	line-height: 1.3;
	text-wrap: balance;
}

.indo-yearitem__title a {
	color: var(--fg-1);
	text-decoration: none;
	transition: color var(--dur-base) var(--easing);
}

.indo-yearitem__title a:hover,
.indo-yearitem__title a:focus-visible { color: var(--accent); }

.indo-yearitem__blurb {
	margin: var(--space-0-75) 0 0;
	max-width: 68ch;
	font-size: var(--fs-body);
	color: var(--fg-2);
}

.indo-yearitem__more {
	margin: 0;
	padding-top: 34px;
	white-space: nowrap;
	font-size: var(--fs-15);
	color: var(--accent);
}

.indo-yearitem__arrow { margin-left: var(--space-0-5); }


/* ============================================================
   8. Search results
   ============================================================ */

.indo-search__band { padding-block: var(--pad-72) var(--pad-64); }

.indo-search__field {
	display: flex;
	border: 1px solid var(--border-on-dark-3);
	background: rgba(255, 255, 255, 0.04);
}

.indo-search__field .indo-searchform {
	display: flex;
	width: 100%;
	margin: 0;
	border: 0;
	background: none;
}

.indo-search__field .indo-searchform__field {
	flex: 1;
	min-width: 0;
	padding: var(--space-1-75) var(--space-2);
	border: 0;
	background: none;
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 34px;                     /* GAP G3: the search field, the one 34px in the design */
	letter-spacing: -0.02em;
	color: var(--fg-on-dark);
}

.indo-search__field .indo-searchform__field::placeholder { color: var(--fg-on-dark-3); }

.indo-search__field .indo-searchform__submit {
	flex: 0 0 auto;
	padding: 0 var(--space-2);
	border: 0;
	background: none;
	color: var(--fg-on-dark);
	cursor: pointer;
	transition: color var(--dur-base) var(--easing);
}

.indo-search__field .indo-searchform__submit:hover,
.indo-search__field .indo-searchform__submit:focus-visible { color: var(--accent); }

.indo-search__count {
	margin: 0 0 var(--space-2);
	padding-bottom: var(--space-1);
	border-bottom: 1px solid var(--border-2);
	font-family: var(--font-body);
	font-size: var(--fs-15);
	font-weight: var(--w-body);
	letter-spacing: 0;
	color: var(--fg-2);
}

.indo-searchlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.indo-searchlist__row {
	padding: var(--space-1-75) 0;
	border-bottom: 1px solid var(--border-1);
}

.indo-searchlist__url {
	margin: var(--space-0-5) 0 0;
	font-family: var(--font-numeric);
	font-size: 13px;
	color: var(--fg-2);
	overflow-wrap: anywhere;
}

.indo-searchlist__title {
	margin: var(--space-0-5) 0 0;
	font-size: var(--fs-22);
	font-weight: var(--w-card-title);
	line-height: 1.3;
}

.indo-searchlist__title a {
	color: var(--fg-1);
	text-decoration: none;
	transition: color var(--dur-base) var(--easing);
}

.indo-searchlist__title a:hover,
.indo-searchlist__title a:focus-visible { color: var(--accent); }

.indo-searchlist__blurb {
	margin: var(--space-0-75) 0 0;
	max-width: 70ch;
	color: var(--fg-2);
}

.indo-search__empty { padding-top: var(--space-3); }

.indo-search__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: var(--space-3);
}


/* ============================================================
   9. About
   ============================================================ */

/* The hero's height and H1 size are the shared band-hero rule. */

.indo-about__hero .lede { max-width: 62ch; }

.indo-about__duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
	align-items: start;
}

.indo-about__copy > * + * { margin-top: var(--space-2); }

.indo-about__lede { font-size: var(--fs-19); }

.indo-about__portrait {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--bg-soft);
}

.indo-about__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.indo-about__cell > * + * { margin-top: var(--space-2); }

.indo-about__badge {
	display: block;
	max-width: 180px;
	height: auto;
}

/*
 * Missing photography (content-bands-2026-09-24): a real INDO production-floor
 * photo in the Component Quality cell, where the design left an image slot the
 * build had nothing real to fill. object-fit:cover on a fixed aspect-ratio
 * rather than the badge's intrinsic sizing, because this is a photograph
 * (roughly 3:2) sitting under running prose, not a small logo mark.
 */
.indo-about__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	margin-top: var(--space-2);
}

.indo-teamgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-3) var(--space-2);
}

.indo-teamcard { min-width: 0; }

.indo-teamcard__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--bg-soft);
	margin-bottom: var(--space-1-25);
}

.indo-teamcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-image-slow) var(--easing);
}

.indo-teamcard:hover .indo-teamcard__media img { transform: scale(1.05); }

.indo-teamcard__name {
	margin: var(--space-0-5) 0 0;
	font-size: var(--fs-22);
	line-height: 1.25;
}

.indo-teamcard__bio {
	margin: var(--space-0-75) 0 0;
	font-size: var(--fs-15);
	color: var(--fg-2);
}


/* ============================================================
   10. Testimonials
   ============================================================ */

/* The hero is the shared flat hero: its padding and H1 size are not set here. */

.indo-testimonials__featured .indo-shell {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}


/* ============================================================
   11. Responsive
   1100 is the projects grid's own stop and the articles grid's
   first; 1024, 900, 820, 700 and 600 are the shared ladder.
   ============================================================ */

@media (max-width: 1100px) {
	/* LOAD-BEARING. Not 1024: a 16:9 card at two columns gets
	   shorter than its own overlaid text well before then. */
	.indo-projectgrid { grid-template-columns: minmax(0, 1fr); }
	.indo-articlegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.indo-relatedgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
	.indo-teamgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.indo-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.indo-facts__cell:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 900px) {
	.indo-yeargroup__marker { top: 150px; }
}

@media (max-width: 820px) {
	/* The 300px floor and the width lock come off once the grid is
	   a single column: at one card per row the card is the rail. */
	.indo-projectgrid > .indo-card--project-wide {
		min-height: 0;
		min-width: 0;
	}

	.indo-about__duo { grid-template-columns: minmax(0, 1fr); }
	.indo-casestudy__gallery { gap: var(--space-1); }
	.indo-yeargroup { gap: var(--space-2); }
	.indo-yeargroup__marker { font-size: var(--fs-40); }
	.indo-editorial-prose blockquote { font-size: var(--fs-22); }
}

@media (max-width: 700px) {
	.indo-articlegrid { grid-template-columns: minmax(0, 1fr); }
	.indo-relatedgrid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
	.indo-articlegrid .indo-card__title { font-size: 23px; }
	.indo-editorial-prose h2 { font-size: 23px; }

	.indo-facts { grid-template-columns: minmax(0, 1fr); }
	.indo-facts__cell {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid var(--border-on-dark-hair);
	}
	.indo-facts__cell:first-child { border-top: 0; }

	.indo-casestudy__gallery { grid-template-columns: minmax(0, 1fr); }
	.indo-teamgrid { grid-template-columns: minmax(0, 1fr); }

	.indo-yeargroup {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}
	.indo-yeargroup__marker {
		position: static;
		margin-top: var(--space-2);
		font-size: 31px;
	}
	.indo-yearitem {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-0-5);
	}
	.indo-yearitem__more { padding-top: 0; }

	.indo-search__field .indo-searchform__field { font-size: 23px; }

	/* 44px minimum tap target. The pagination cells and the chips
	   already get theirs from components.css; these are this
	   group's own touchable rows. */
	.indo-yearitem__title a,
	.indo-searchlist__title a {
		display: inline-block;
		min-height: var(--tap-min);
	}
}


/* ============================================================
   12. Go-live fixes 2026-09-24 (editorial-and-forms fixer)
   Findings are named on each rule. Kept in one block so the
   diff against the build above stays readable.
   ============================================================ */

/* ---------- Projects archive ---------- */

/* design-fidelity-30, editorial-39: the 44ch cap was measured in body
   type and squeezed a 64px h1 into three lines ("projects" orphaned).
   The lede keeps its measure; the title gets one in its own size. */
.indo-projects .indo-archive-head__body {
	flex: 1 1 36rem;
	max-width: none;
}

.indo-projects .indo-archive-head__title { max-width: 20ch; }

/* editorial-28: 768 to 1100 was one column of 976 x 549 cards. Two
   columns with a taller card, so the overlaid copy still fits. */
@media (min-width: 768px) and (max-width: 1100px) {
	.indo-projectgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.indo-projectgrid > .indo-card--project-wide {
		aspect-ratio: 4 / 3;
		min-height: 300px;
	}
}

/* ---------- Filters on phones (editorial-07) ----------
   The dropdown panel was anchored to its own 106px button. On a phone
   it anchors to the whole header row instead: full width, chips on one
   line each. */
@media (max-width: 600px) {
	.indo-archive-head__row { position: relative; }
	.indo-archive-head .indo-filterwrap { position: static; }

	/*
	 * fm-13 (polish-2026-09-28): the panel was still positioned absolute
	 * here, so opening it drew it over the first project card, with the
	 * card's title showing sliced behind the panel's lower edge. It now
	 * renders in flow inside .indo-archive-head__action, which is already
	 * its own row in the wrapping flex header, so opening it pushes the
	 * grid below down instead of covering it. No scrim or overlay is
	 * added: this is a layout change, not a darkening treatment.
	 */
	.indo-archive-head .indo-filterpanel {
		position: static;
		left: auto;
		right: auto;
		width: auto;
		max-height: none;
		overflow-y: visible;
		margin-top: var(--space-2);
	}
}

/* ---------- Category topic tabs (design-fidelity-12, editorial-08) ---------- */

/* Pinned under the real header height, not 80px: the 4px strip of
   article that showed between them at 1440 is gone. */
.indo-topictabs.indo-filterbar--sticky { top: var(--header-h); }

.indo-filterbar--sticky .indo-topictabs__row {
	justify-content: flex-start;
	gap: 10px;
}

@media (max-width: 900px) {
	.indo-topictabs.indo-filterbar--sticky { top: var(--header-h-mobile); }
}

/* Below 1024 the chips are ONE scrolling row: at 375 they wrapped to
   five rows, 357px of an 812px screen, and stayed pinned. */
@media (max-width: 1023px) {
	.indo-filterbar--sticky .indo-topictabs__row {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		padding: 12px 0;
		-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
		mask-image: linear-gradient(90deg, #000 88%, transparent);
	}

	.indo-filterbar--sticky .indo-topictabs__row::-webkit-scrollbar { display: none; }

	.indo-topictabs__row .indo-chip {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		min-height: var(--tap-min);
		white-space: nowrap;
	}
}

/* ---------- Articles ---------- */

/* editorial-25: 90 to 97 characters a line at 1440. Text blocks hold
   about 70; images, films and tables keep the 820px column. */
.indo-article__body > p,
.indo-article__body > ul,
.indo-article__body > ol,
.indo-article__body > h2,
.indo-article__body > h3,
.indo-article__body > h4,
.indo-article__body > h5,
.indo-article__body > h6,
.indo-article__body > blockquote { max-width: 70ch; }

/* locales-18 companion: the meta row's category link was 11px and a
   36 x 18 target (editorial-43). */
.indo-article__cat,
.indo-yearitem__cat,
.indo-facts__label { font-size: var(--fs-micro); }

.indo-article__cat {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
}

/* editorial-26: the tag row sits under the prose, left-aligned chips. */
.indo-article__tags .indo-chip { min-height: var(--tap-min); display: inline-flex; align-items: center; }

.indo-articlegrid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.indo-editorial-showall {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
}

/* editorial-42, a11y-perf 14: legacy <h5> intros with an inline cyan
   span read as small links. Same level in the outline (content is not
   rewritten), set as a standfirst. Inline legacy colours give way to
   the theme's: an inline style can only be overridden this way. */
.indo-editorial-prose h5,
.indo-editorial-prose h6 {
	margin-top: 0;
	font-family: var(--font-body);
	font-size: var(--fs-21);
	font-weight: var(--w-body);
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--fg-1);
}

.indo-editorial-prose [style*="color"] { color: inherit !important; }
.indo-editorial-prose h5 a,
.indo-editorial-prose h6 a { color: var(--accent-text, #00719b); }

/* editorial-38: a long testimonial quote at body size, with space
   between its paragraphs. */
.indo-editorial-prose blockquote.indo-quote-long {
	font-family: var(--font-body);
	font-weight: var(--w-body);
	font-size: var(--fs-18);
	line-height: 1.75;
	letter-spacing: 0;
}

.indo-editorial-prose blockquote.indo-quote-long p + p { margin-top: 1em; }

/* editorial-04: the legacy shortcodes, rendered. */
.indo-editorial-prose .indo-legacy-space { height: var(--space-1); }
.indo-editorial-prose .indo-legacy-button { margin: 4px 12px 4px 0; }
.indo-editorial-prose a.indo-btn { text-decoration: none; }
.indo-editorial-prose a.indo-btn--primary,
.indo-editorial-prose a.indo-btn--primary:hover { color: var(--indo-white); }

/* TopLink's hand-written body (its Elementor JSON is invalid, so the
   stored post_content renders): the lede and the three figures. */
.indo-editorial-prose .indo-article-lede { font-size: var(--fs-21); line-height: 1.5; }

.indo-editorial-prose .indo-article-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-2);
	max-width: none;
	padding: var(--space-2) 0;
	border-block: 1px solid var(--border-2);
	list-style: none;
}

.indo-editorial-prose .indo-article-stats li {
	margin: 0;
	font-family: var(--font-display);
	font-weight: var(--w-display);
	font-size: var(--fs-22);
	line-height: 1.3;
}

/* ---------- Case studies ---------- */

.indo-facts__link {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.indo-facts__link:hover,
.indo-facts__link:focus-visible { color: var(--fg-on-dark); }

/* editorial-40: 3-up on the full rail, captioned, each opens full size. */
.indo-casestudy__galleryrail { margin-top: var(--space-5); }

.indo-casestudy__galleryrail .indo-casestudy__gallery {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 0;
}

.indo-casestudy__galleryrail .indo-casestudy__shot {
	aspect-ratio: auto;
	overflow: visible;
	background: none;
}

.indo-casestudy__shotlink {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bg-soft);
}

.indo-casestudy__shotlink img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-image) var(--easing);
}

.indo-casestudy__shotlink:hover img,
.indo-casestudy__shotlink:focus-visible img { transform: scale(1.03); }

.indo-casestudy__caption {
	margin-top: var(--space-0-75);
	font-size: var(--fs-small);
	color: var(--fg-2);
}

.indo-casestudy__more { margin-top: var(--space-2); }

.indo-casestudy__moretoggle {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	padding: 0 var(--space-2);
	border: 1px solid var(--border-strong);
	font-size: 15px;
	font-weight: var(--w-body-bold);
	cursor: pointer;
	list-style: none;
}

.indo-casestudy__moretoggle::-webkit-details-marker { display: none; }
.indo-casestudy__more[open] .indo-casestudy__moretoggle { display: none; }

@media (max-width: 1100px) {
	.indo-casestudy__galleryrail .indo-casestudy__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Final round 2026-09-25 (grid hygiene, final-desktop-07): the related
   articles are always three, and two columns left the third alone beside an
   empty cell at 768 and 1024. They stay three-up down to 601px. */
@media (min-width: 900px) and (max-width: 1100px) {
	.indo-articlegrid.indo-articlegrid--related { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
}
/* Below 900 three cards ran their titles to five lines (QA C5), so the row
   shows two, side by side, and the third is left out rather than orphaned. */
@media (min-width: 601px) and (max-width: 899px) {
	.indo-articlegrid.indo-articlegrid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.indo-articlegrid.indo-articlegrid--related > :nth-child(n + 3) { display: none; }
}

@media (max-width: 600px) {
	.indo-casestudy__galleryrail .indo-casestudy__gallery,
	.indo-articlegrid--related,
	.indo-editorial-prose .indo-article-stats { grid-template-columns: minmax(0, 1fr); }

	.indo-editorial-prose h5,
	.indo-editorial-prose h6,
	.indo-editorial-prose .indo-article-lede { font-size: var(--fs-19); }
}

/* ---------- About (design-fidelity-28, editorial-17, 30) ---------- */

/* The Component Quality cell. QA V-2: beside the prose only from 1280px,
   where the half-width cell is wide enough for both (at 700 to 1279 the
   prose was squeezed to 50 to 304px). Below that the photograph sits under
   the text at the cell's full width, cropped to 4:3. */
.indo-about__photo--portrait {
	aspect-ratio: 4 / 3;
	margin-top: var(--space-2);
}

/* final-desktop-26 (2026-09-25): at 1280 and up the prose sat in a 340px
   column beside a 240px photograph, so this cell read as a different block
   from its British Designed neighbour. It now matches it at every width:
   the text at the cell's full measure, the photograph under it at 3:2. */
.indo-about__quality .indo-about__photo--portrait { aspect-ratio: 3 / 2; }
.indo-about__quality .indo-editorial-prose {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	max-width: 70ch;
}

.indo-about__photo--wide { aspect-ratio: 3 / 2; }

/* The team: five across on desktop; below that the rows centre, so the
   last row is 3 + 2 or 2 + 2 + 1, never a lone orphan on the left. */
.indo-about .indo-teamgrid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3) var(--space-2);
}

.indo-about .indo-teamcard { flex: 0 1 calc((100% - 4 * var(--space-2)) / 5); }

/* Cut-out portraits on slightly different whites: multiply onto one
   white so every portrait sits on the same ground, anchored at the top. */
.indo-about .indo-teamcard__media { background: var(--indo-white); }
.indo-about .indo-teamcard__media img {
	object-position: center top;
	mix-blend-mode: multiply;
}

/* One portrait scale (final-desktop-26): a 3:4 waist-up source is framed
   tighter so its head matches the square head-and-shoulders cut-outs. */
.indo-about .indo-teamcard__media--tall img {
	/* Measured on the 237x296 card: the waist-up heads sat about 55px lower
	   and a sixth smaller than the cut-outs'. Scaled from the top, then
	   lifted, so the head lands where the cut-outs' do and the frame still
	   fills to its bottom edge. */
	transform: translateY(-18%) scale(1.2);
	transform-origin: 50% 0;
}
.indo-about .indo-teamcard:hover .indo-teamcard__media--tall img { transform: translateY(-18%) scale(1.26); }

@media (max-width: 1100px) {
	.indo-about .indo-teamcard { flex-basis: calc((100% - 2 * var(--space-2)) / 3); }
}

@media (max-width: 600px) {
	.indo-about .indo-teamcard { flex-basis: calc((100% - var(--space-2)) / 2); }
}

.indo-about .indo-teamcard__name { margin: 0 0 var(--space-0-5); }

/* QA N-8: the About stat band as the homepage's (and the pillars branch's
   component fix): three across down to 601px with no orphan, and one
   column below that with every cell flush left. */
@media (min-width: 601px) and (max-width: 820px) {
	.indo-about__stats .indo-statband { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.indo-about__stats .indo-statband .indo-statband__cell {
		padding: var(--space-3) var(--space-2);
		border-top: 0;
		border-left: 1px solid var(--border-on-dark-hair);
	}
	.indo-about__stats .indo-statband .indo-statband__cell:first-child { padding-left: 0; border-left: 0; }
	.indo-about__stats .indo-statband .indo-statband__cell:last-child { padding-right: 0; }
}

@media (max-width: 600px) {
	.indo-about__stats .indo-statband .indo-statband__cell { padding-inline: 0; }
}

/* final-desktop-13: same fix as home.css's .indo-home-stats. About runs
   the shared .indo-stat component's dark tone (tracked, uppercase labels)
   for the same three figures the pillars show in sentence case. Match the
   pillars, still on About's navy band. */
.indo-about__stats .indo-stat__label {
	font-size: 15px;
	letter-spacing: normal;
	text-transform: none;
}

/* ---------- Testimonials (editorial-31) ---------- */

/* One consistent pair of marks on every wall card; the stored marks
   are taken off in indo_2027_testimonial_quotes(). */
.indo-quote--wall .indo-quote__card blockquote > p:first-child::before { content: "\201C"; }
.indo-quote--wall .indo-quote__card blockquote > p:last-child::after { content: "\201D"; }

/* Two columns from 700px: at 768 the wall was one column, 9,575px. */
@media (min-width: 700px) and (max-width: 820px) {
	.indo-testimonials__wall .indo-quote--wall { column-count: 2; }
}

/* editorial-43: 44px targets on the editorial pages' small controls. */
.indo-editorial-pagination .indo-pagination__cell {
	min-width: var(--tap-min);
	min-height: var(--tap-min);
}

.indo-article__cat { min-width: var(--tap-min); }

@media (max-width: 600px) {
	/* V-3 companion: the wide cards grow with their copy (components.css)
	   and keep at least 280px, so some photograph shows above the text. */
	.indo-projectgrid > .indo-card--project-wide { min-height: 280px; }
}

/* ---------- Final round 2026-09-25 (final-fpages) ---------- */

/* final-desktop-21, final-mobile fm-18: one treatment for every article
   card image. They were all cover-cropped already, but a thumbnail whose own
   ground is white (the GreenTech logo, the SkySync globe) had no edge and read
   as a logo floating on the page beside full-bleed photographs. Every card
   image now sits in the same hairline frame on the same soft ground. */
.indo-articlegrid .indo-card__media { position: relative; background: var(--bg-soft); }
.indo-articlegrid .indo-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 1px var(--border-1);
	pointer-events: none;
}

/* final-adversarial-04, -05, final-locales-03: a long unbroken search term
   ran the count h1 off the page, and a long Finnish result title
   ("LED-kasvihuonevalaistusvalikoimaansa") overflowed a phone by 7px, its
   link being inline-block for the 44px tap target. Both now break inside a
   word that cannot fit, and the link never outgrows its column. No automatic
   hyphens. */
.indo-search__count,
.indo-searchlist__title {
	overflow-wrap: anywhere;
	hyphens: manual;
}
.indo-searchlist__title a { max-width: 100%; }

/* fm-10: the About portrait was a 4:5 crop of a 1080x900 file, drawn 1.44x
   at 1180 on a DPR 2 tablet. It now shows the file's own 6:5 frame, and is a
   2:1 band once the duo is one column (the <picture> in page-about.php serves
   the wide crops there). */
.indo-about .indo-about__portrait { aspect-ratio: 6 / 5; }
.indo-about__portrait picture { display: contents; }
@media (max-width: 820px) {
	.indo-about .indo-about__portrait { aspect-ratio: 2 / 1; }
}

/* QA C4 (2026-09-25): at tablet width the About quality cells were 336px,
   too narrow for "Komponentenqualität" at the section size, so the two
   cells stack below 900px. */
@media (max-width: 899px) {
	.indo-about__quality .indo-grid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* About intro: the portrait with the people behind the product under it
   (2026-09-29, staff photos cleared). Two 3:2 photos side by side, which fill
   the space the text column ran on past the portrait; still a pair on phones. */
.indo-about__media { display: grid; gap: var(--space-2); align-content: start; }
.indo-about__people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.indo-about__person { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--bg-soft); }