From dae97ab8124e4383063151b7ba9fa74a87313ed0 Mon Sep 17 00:00:00 2001
From: Pontoporeia <pontoporeia@happyngreen.fr>
Date: Fri, 10 Jul 2026 12:27:17 +0200
Subject: [PATCH] fix: repertoire heading font sizes

---
 app/public/assets/css/components/header.css |  264 ++---
 app/public/assets/css/repertoire.css        | 1166 ++++++++++---------
 2 files changed, 713 insertions(+), 717 deletions(-)

diff --git a/app/public/assets/css/components/header.css b/app/public/assets/css/components/header.css
index 18207a2..29b6eeb 100644
--- a/app/public/assets/css/components/header.css
+++ b/app/public/assets/css/components/header.css
@@ -6,81 +6,82 @@
 /* ── Header bar ─────────────────────────────────────────────────────── */
 
 header {
-	vertical-align: center;
-	flex-shrink: 0;
-	background: linear-gradient(
-		0deg,
-		rgba(192, 93, 225, 1) 0%,
-		rgba(51, 191, 135, 1) 66%,
-		rgba(60, 133, 108, 1) 100%
-	);
+  vertical-align: center;
+  flex-shrink: 0;
+  background: linear-gradient(
+    0deg,
+    rgba(192, 93, 225, 1) 0%,
+    rgba(51, 191, 135, 1) 66%,
+    rgba(60, 133, 108, 1) 100%
+  );
 }
 
 /* ── Navigation ────────────────────────────────────────────────────── */
 
 header nav {
-	padding: var(--space-s) var(--space-s);
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	font-size: var(--step-0);
+  padding: var(--space-s) var(--space-s);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--step-0);
 }
 
 header nav ul {
-	display: flex;
-	gap: var(--space-l);
-	align-items: center;
-	list-style: none;
-	margin: 0;
-	padding: 0;
+  display: flex;
+  gap: var(--space-l);
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
 header nav ul a {
-	font-family: var(--font-display);
-	letter-spacing: 0.12em;
-	text-transform: uppercase;
-	color: var(--accent-foreground);
-	text-decoration: none;
-	padding: var(--space-3xs) var(--space-xs);
-	text-shadow:
-		0 0 16px var(--header-shadow-strong),
-		0 0 32px var(--header-shadow-soft);
-	transition: opacity 0.15s;
+  font-family: var(--font-display);
+  font-size: var(--step-0)
+    letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--accent-foreground);
+  text-decoration: none;
+  padding: var(--space-3xs) var(--space-xs);
+  text-shadow:
+    0 0 16px var(--header-shadow-strong),
+    0 0 32px var(--header-shadow-soft);
+  transition: opacity 0.15s;
 }
 
 header nav ul a:hover {
-	color: var(--accent-primary);
+  color: var(--accent-primary);
 }
 
 header nav ul a[aria-current="page"] {
-	color: var(--accent-primary);
-	border-radius: 0;
-	border-bottom: 2px solid currentColor;
-	padding-bottom: 1px;
+  color: var(--accent-primary);
+  border-radius: 0;
+  border-bottom: 2px solid currentColor;
+  padding-bottom: 1px;
 }
 
 /* ── Logo ───────────────────────────────────────────────────────────── */
 
 .nav-logo {
-	text-decoration: none;
+  text-decoration: none;
 }
 
 .nav-left-links,
 .nav-right-links {
-	display: flex;
-	gap: var(--space-l);
-	align-items: center;
-	list-style: none;
-	margin: 0;
-	padding: 0;
+  display: flex;
+  gap: var(--space-l);
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
 .nav-top-row {
-	display: contents;
+  display: contents;
 }
 
 .nav-mobile-links {
-	display: none;
+  display: none;
 }
 
 /* ── Hamburger menu (pure CSS, checkbox trick) ──────────────────────── */
@@ -94,132 +95,119 @@ header nav ul a[aria-current="page"] {
        ul.nav-mobile-links     ← full dropdown (hidden by default) */
 
 .menu-btn {
-	position: absolute;
-	top: -9999px;
-	left: -9999px;
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
 }
 
 .menu-icon {
-	display: none;
-	cursor: pointer;
-	padding: var(--space-2xs) var(--space-s);
-	align-items: center;
-	justify-content: center;
+  display: none;
+  cursor: pointer;
+  padding: var(--space-2xs) var(--space-s);
+  align-items: center;
+  justify-content: center;
 }
 
 /* Middle bar of the burger icon */
 .navicon {
-	background: var(--accent-foreground);
-	display: block;
-	height: 2px;
-	width: 24px;
-	position: relative;
-	transition: all 0.3s ease-out;
+  background: var(--accent-foreground);
+  display: block;
+  height: 2px;
+  width: 24px;
+  position: relative;
+  transition: all 0.3s ease-out;
 }
 
 .navicon::before,
 .navicon::after {
-	content: "";
-	background: var(--accent-foreground);
-	display: block;
-	height: 2px;
-	width: 100%;
-	position: absolute;
-	transition: all 0.3s ease-out;
+  content: "";
+  background: var(--accent-foreground);
+  display: block;
+  height: 2px;
+  width: 100%;
+  position: absolute;
+  transition: all 0.3s ease-out;
 }
 
 .navicon::before {
-	top: -7px;
+  top: -7px;
 }
 .navicon::after {
-	bottom: -7px;
+  bottom: -7px;
 }
 
 /* ── Mobile (≤ 640px) ───────────────────────────────────────────────── */
 
 @media screen and (max-width: 640px) {
-	header nav[aria-label="Navigation principale"] {
-		display: flex;
-		flex-direction: column;
-		align-items: stretch;
-		padding: 0;
-	}
+  header nav[aria-label="Navigation principale"] {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0;
+  }
 
-	header nav[aria-label="Navigation principale"] .nav-top-row {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: var(--space-s);
-	}
+  header nav[aria-label="Navigation principale"] .nav-top-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-s);
+  }
 
-	header nav[aria-label="Navigation principale"] .nav-right-links {
-		display: none;
-	}
+  header nav[aria-label="Navigation principale"] .nav-right-links {
+    display: none;
+  }
 
-	header nav[aria-label="Navigation principale"] .nav-left-links {
-		display: flex;
-		gap: 0;
-	}
+  header nav[aria-label="Navigation principale"] .nav-left-links {
+    display: flex;
+    gap: 0;
+  }
 
-	header
-		nav[aria-label="Navigation principale"]
-		.nav-left-links
-		li:not(:first-child) {
-		display: none;
-	}
+  header nav[aria-label="Navigation principale"] .nav-left-links li:not(:first-child) {
+    display: none;
+  }
 
-	.menu-icon {
-		display: flex;
-	}
+  .menu-icon {
+    display: flex;
+  }
 
-	header nav[aria-label="Navigation principale"] .nav-mobile-links {
-		display: block;
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		max-height: 0;
-		overflow: hidden;
-		transition: max-height 0.2s ease-out;
-	}
+  header nav[aria-label="Navigation principale"] .nav-mobile-links {
+    display: block;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+  }
 
-	.menu-btn:checked
-		~ nav[aria-label="Navigation principale"]
-		.nav-mobile-links {
-		max-height: 300px;
-	}
+  .menu-btn:checked ~ nav[aria-label="Navigation principale"] .nav-mobile-links {
+    max-height: 300px;
+  }
 
-	header nav[aria-label="Navigation principale"] .nav-mobile-links li {
-		border-top: 1px solid var(--header-nav-active-border);
-		text-align: left;
-	}
+  header nav[aria-label="Navigation principale"] .nav-mobile-links li {
+    border-top: 1px solid var(--header-nav-active-border);
+    text-align: left;
+  }
 
-	header nav[aria-label="Navigation principale"] .nav-mobile-links li a {
-		display: block;
-		width: 100%;
-		padding: var(--space-s) var(--space-s);
-		text-align: left;
-	}
+  header nav[aria-label="Navigation principale"] .nav-mobile-links li a {
+    display: block;
+    width: 100%;
+    padding: var(--space-s) var(--space-s);
+    text-align: left;
+  }
 
-	/* Animate burger → X */
-	.menu-btn:checked ~ nav[aria-label="Navigation principale"]
-		.menu-icon
-		.navicon {
-		background: transparent;
-	}
+  /* Animate burger → X */
+  .menu-btn:checked ~ nav[aria-label="Navigation principale"] .menu-icon .navicon {
+    background: transparent;
+  }
 
-	.menu-btn:checked
-		~ nav[aria-label="Navigation principale"]
-		.menu-icon
-		.navicon::before {
-		transform: rotate(-45deg);
-		top: 0;
-	}
+  .menu-btn:checked ~ nav[aria-label="Navigation principale"] .menu-icon .navicon::before {
+    transform: rotate(-45deg);
+    top: 0;
+  }
 
-	.menu-btn:checked
-		~ nav[aria-label="Navigation principale"]
-		.menu-icon
-		.navicon::after {
-		transform: rotate(45deg);
-		bottom: 0;
-	}
+  .menu-btn:checked ~ nav[aria-label="Navigation principale"] .menu-icon .navicon::after {
+    transform: rotate(45deg);
+    bottom: 0;
+  }
 }
diff --git a/app/public/assets/css/repertoire.css b/app/public/assets/css/repertoire.css
index f02fb08..82a6e48 100644
--- a/app/public/assets/css/repertoire.css
+++ b/app/public/assets/css/repertoire.css
@@ -4,852 +4,860 @@
    ============================================================ */
 
 .search-main {
-	flex: 1;
-	min-height: 0;
-	overflow: hidden;
-	padding: 0;
-	display: flex;
-	flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 /* ── Scrollable results area with sticky pagination ──────────────── */
 #search-results {
-	flex: 1;
-	min-height: 0;
-	overflow-y: auto;
-	display: flex;
-	flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
 }
 
 .search-results-header {
-	flex-shrink: 0;
+  flex-shrink: 0;
 }
 
 .search-results-range--compact {
-	display: none;
+  display: none;
 }
 
 .search-empty {
-	flex: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: var(--space-xl) var(--space-m);
-	color: var(--text-secondary);
-	font-size: var(--step-0);
-	text-align: center;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-xl) var(--space-m);
+  color: var(--text-secondary);
+  font-size: var(--step-0);
+  text-align: center;
 }
 
 /* ---- 6-column index layout ---- */
 /* Equal-width columns except Années (years) = narrower */
 .repertoire-index {
-	display: grid;
-	grid-template-columns:
-		minmax(3rem, 0.45fr)
-		minmax(16rem, 1.2fr)
-		minmax(9rem, 1fr)
-		minmax(7rem, 1fr)
-		minmax(8rem, 1fr)
-		minmax(3rem, 0.45fr);
-	grid-template-rows: auto minmax(0, 1fr);
-	gap: var(--space-s);
-	justify-content: space-between;
-	padding: 0;
-	margin: 0 var(--space-s);
-	height: 100%;
+  display: grid;
+  grid-template-columns:
+    minmax(3rem, 0.45fr)
+    minmax(16rem, 1.2fr)
+    minmax(9rem, 1fr)
+    minmax(7rem, 1fr)
+    minmax(8rem, 1fr)
+    minmax(3rem, 0.45fr);
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: var(--space-s);
+  justify-content: space-between;
+  padding: 0;
+  margin: 0 var(--space-s);
+  height: 100%;
 }
 
 /* ---- Accordion: visible only on mobile (≤ 640px) ---- */
 
 /* Desktop: heading-text visible, toggle hidden */
 .rep-accordion__heading-text {
-	/* visible — inherits the h2 styling above */
+  /* visible — inherits the h2 styling above */
 }
 
 .rep-accordion__toggle,
 .rep-accordion__chevron,
 .rep-accordion__badge {
-	display: none;
+  display: none;
 }
 
 .rep-accordion__panel {
-	display: contents;
+  display: contents;
 }
 
 /* Each section becomes transparent to the grid so h2+ul sit in the 2-row layout */
 .repertoire-col {
-	display: contents;
+  display: contents;
 }
 
 .repertoire-col > h2 {
-	grid-row: 1;
-	font-family: var(--font-display);
-	font-size: var(--step--1);
-	letter-spacing: 0.08em;
-	text-transform: uppercase;
-	color: var(--text-primary);
-	font-weight: 398;
-	line-height: 1.3;
-	margin: 0;
-	padding: var(--space-xs) 0 var(--space-3xs) 0;
-	border-bottom: 1px solid var(--text-primary);
-	align-self: end;
-	hyphens: auto;
-	word-break: normal;
-	overflow-wrap: break-word;
+  grid-row: 1;
+  font-family: var(--font-display);
+  font-size: var(--step--1);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-primary);
+  font-weight: 398;
+  line-height: 1.3;
+  margin: 0;
+  padding: var(--space-xs) 0 var(--space-3xs) 0;
+  border-bottom: 1px solid var(--text-primary);
+  align-self: end;
+  hyphens: auto;
+  word-break: normal;
+  overflow-wrap: break-word;
 }
 
 .repertoire-col .rep-accordion__panel > ul {
-	grid-row: 2;
-	overflow-y: auto;
-	overflow-x: hidden;
-	min-height: 0;
-	padding-top: var(--space-2xs);
-	padding-bottom: var(--space-l);
-	padding-left: 0;
-	padding-right: 0;
+  grid-row: 2;
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-height: 0;
+  padding-top: var(--space-2xs);
+  padding-bottom: var(--space-l);
+  padding-left: 0;
+  padding-right: 0;
 }
 
 /* Strip list chrome inside repertoire columns */
 .repertoire-col ul {
-	list-style: none;
-	margin: 0;
-	padding: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.repertoire-col a,
+.repertoire-col button {
+  line-height: 22px;
+}
+.repertoire-col[data-col="kw"] button {
+  font-size: calc(var(--step--1)*1.15);
 }
 
 /* ---- Responsive (≤ 1025px): accordion mode, students as results ---- */
 @media (max-width: 1025px) {
-	.repertoire-index {
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-		height: 100%;
-		overflow-y: hidden;
-		gap: 0;
-		margin: 0;
-	}
+  .repertoire-index {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    height: 100%;
+    overflow-y: hidden;
+    gap: 0;
+    margin: 0;
+  }
 
-	/* Each column becomes a block-level accordion section */
-	.repertoire-col {
-		display: block;
-		border-bottom: 1px solid var(--text-primary);
-	}
+  /* Each column becomes a block-level accordion section */
+  .repertoire-col {
+    display: block;
+    border-bottom: 1px solid var(--text-primary);
+  }
 
-	.repertoire-col[data-col="students"] {
-		border-bottom: none;
-	}
+  .repertoire-col[data-col="students"] {
+    border-bottom: none;
+  }
 
-	/* Flex order: years/ap/or/fi first, then keywords, students last */
-	.repertoire-col[data-col="years"] {
-		order: 0;
-	}
-	.repertoire-col[data-col="ap"] {
-		order: 1;
-	}
-	.repertoire-col[data-col="or"] {
-		order: 2;
-	}
-	.repertoire-col[data-col="fi"] {
-		order: 3;
-	}
-	.repertoire-col[data-col="kw"] {
-		order: 4;
-	}
-	.repertoire-col[data-col="students"] {
-		order: 5;
-	}
+  /* Flex order: years/ap/or/fi first, then keywords, students last */
+  .repertoire-col[data-col="years"] {
+    order: 0;
+  }
+  .repertoire-col[data-col="ap"] {
+    order: 1;
+  }
+  .repertoire-col[data-col="or"] {
+    order: 2;
+  }
+  .repertoire-col[data-col="fi"] {
+    order: 3;
+  }
+  .repertoire-col[data-col="kw"] {
+    order: 4;
+  }
+  .repertoire-col[data-col="students"] {
+    order: 5;
+  }
 
-	/* Students column: not an accordion — open results list below filters */
-	.repertoire-col[data-col="students"] {
-		border-bottom: none;
-		border-top: none;
-		margin-top: 0;
-		padding-top: 0;
-		flex: 1;
-		min-height: 0;
-		display: flex;
-		flex-direction: column;
-	}
+  /* Students column: not an accordion — open results list below filters */
+  .repertoire-col[data-col="students"] {
+    border-bottom: none;
+    border-top: none;
+    margin-top: 0;
+    padding-top: 0;
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
 
-	.repertoire-col[data-col="students"] .rep-accordion__toggle {
-		display: none;
-	}
+  .repertoire-col[data-col="students"] .rep-accordion__toggle {
+    display: none;
+  }
 
-	.repertoire-col[data-col="students"] .rep-accordion__heading-text {
-		display: none;
-	}
+  .repertoire-col[data-col="students"] .rep-accordion__heading-text {
+    display: none;
+  }
 
-	.repertoire-col[data-col="students"] .rep-accordion__panel {
-		display: block;
-		max-height: none;
-		overflow-y: auto;
-		flex: 1;
-	}
+  .repertoire-col[data-col="students"] .rep-accordion__panel {
+    display: block;
+    max-height: none;
+    overflow-y: auto;
+    flex: 1;
+  }
 
-	/* Hide the plain h2 — the toggle button replaces it */
-	.repertoire-col > h2 {
-		display: block;
-		grid-row: unset;
-		align-self: unset;
-		border-bottom: none;
-		padding: 0;
-		margin: 0;
-		font-size: inherit;
-		line-height: inherit;
-	}
+  /* Hide the plain h2 — the toggle button replaces it */
+  .repertoire-col > h2 {
+    display: block;
+    grid-row: unset;
+    align-self: unset;
+    border-bottom: none;
+    padding: 0;
+    margin: 0;
+    font-size: inherit;
+    line-height: inherit;
+  }
 
-	/* Hide heading text on mobile (toggle button replaces it) */
-	.rep-accordion__heading-text {
-		display: none;
-	}
+  /* Hide heading text on mobile (toggle button replaces it) */
+  .rep-accordion__heading-text {
+    display: none;
+  }
 
-	/* Accordion toggle: full-width touch target */
-	.rep-accordion__toggle {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		width: 100%;
-		min-height: 48px;
-		padding: var(--space-xs) var(--space-s);
-		background: none;
-		border: none;
-		font-family: var(--font-display);
-		font-size: var(--step--2);
-		letter-spacing: 0.08em;
-		text-transform: uppercase;
-		color: var(--text-primary);
-		font-weight: 398;
-		text-align: left;
-		cursor: pointer;
-	}
+  /* Accordion toggle: full-width touch target */
+  .rep-accordion__toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 48px;
+    padding: var(--space-xs) var(--space-s);
+    background: none;
+    border: none;
+    font-family: var(--font-display);
+    font-size: var(--step--2);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-primary);
+    font-weight: 398;
+    text-align: left;
+    cursor: pointer;
+  }
 
-	.rep-accordion__toggle:active {
-		background: var(--bg-secondary);
-	}
+  .rep-accordion__toggle:active {
+    background: var(--bg-secondary);
+  }
 
-	/* Badge: active filter count */
-	.rep-accordion__badge {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		min-width: 1.4em;
-		height: 1.4em;
-		padding: 0 0.35em;
-		margin-left: var(--space-2xs);
-		background: var(--accent-primary);
-		color: var(--accent-foreground);
-		border-radius: 99px;
-		font-family: var(--font-body);
-		font-size: var(--step--2);
-		font-weight: 500;
-		letter-spacing: 0;
-		text-transform: none;
-	}
+  /* Badge: active filter count */
+  .rep-accordion__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.4em;
+    height: 1.4em;
+    padding: 0 0.35em;
+    margin-left: var(--space-2xs);
+    background: var(--accent-primary);
+    color: var(--accent-foreground);
+    border-radius: 99px;
+    font-family: var(--font-body);
+    font-size: var(--step--2);
+    font-weight: 500;
+    letter-spacing: 0;
+    text-transform: none;
+  }
 
-	/* Chevron: CSS triangle */
-	.rep-accordion__chevron {
-		display: inline-block;
-		width: 10px;
-		height: 10px;
-		flex-shrink: 0;
-		margin-left: var(--space-2xs);
-		border-right: 2px solid var(--text-secondary);
-		border-bottom: 2px solid var(--text-secondary);
-		transform: rotate(45deg);
-		transition: transform 0.2s;
-	}
+  /* Chevron: CSS triangle */
+  .rep-accordion__chevron {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    flex-shrink: 0;
+    margin-left: var(--space-2xs);
+    border-right: 2px solid var(--text-secondary);
+    border-bottom: 2px solid var(--text-secondary);
+    transform: rotate(45deg);
+    transition: transform 0.2s;
+  }
 
-	.rep-accordion__toggle[aria-expanded="true"] .rep-accordion__chevron {
-		transform: rotate(-135deg);
-	}
+  .rep-accordion__toggle[aria-expanded="true"] .rep-accordion__chevron {
+    transform: rotate(-135deg);
+  }
 
-	/* Panel: collapsed by default */
-	.rep-accordion__panel {
-		display: block;
-		max-height: 0;
-		overflow: hidden;
-		transition: max-height 0.3s ease;
-	}
+  /* Panel: collapsed by default */
+  .rep-accordion__panel {
+    display: block;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+  }
 
-	.rep-accordion__panel.is-open {
-		max-height: 60vh;
-		overflow-y: auto;
-	}
+  .rep-accordion__panel.is-open {
+    max-height: 60vh;
+    overflow-y: auto;
+  }
 
-	/* Reposition the <ul> inside the panel */
-	.repertoire-col ul {
-		grid-row: unset;
-		overflow-y: visible;
-		padding: 0;
-		padding-left: 1ch;
-	}
+  /* Reposition the <ul> inside the panel */
+  .repertoire-col ul {
+    grid-row: unset;
+    overflow-y: visible;
+    padding: 0;
+    padding-left: 1ch;
+  }
 
-	/* Larger touch targets for filter entries */
-	.rep-entry {
-		padding: var(--space-2xs) 0;
-		min-height: 44px;
-		display: flex;
-		align-items: center;
-	}
+  /* Larger touch targets for filter entries */
+  .rep-entry {
+    padding: var(--space-2xs) 0;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+  }
 
-	/* Years column: keep big numbers but smaller on mobile */
-	.repertoire-col[data-col="years"] .rep-entry {
-		font-size: var(--step-2);
-		min-height: 48px;
-	}
+  /* Years column: keep big numbers but smaller on mobile */
+  .repertoire-col[data-col="years"] .rep-entry {
+    font-size: var(--step-2);
+    min-height: 48px;
+  }
 
-	/* Column heading font-size is handled by the toggle button */
-	.repertoire-col > h2 {
-		font-size: inherit;
-		line-height: inherit;
-	}
+  /* Column heading font-size is handled by the toggle button */
+  .repertoire-col > h2 {
+    font-size: inherit;
+    line-height: inherit;
+  }
 }
 
 /* ---- rep-entry: shared base (button + link variants) ---- */
 .rep-entry {
-	display: block;
-	width: 100%;
-	text-align: left;
-	background: none;
-	border: none;
-	padding: var(--space-3xs) 0;
-	margin: 0;
-	font-family: var(--font-body);
-	font-size: var(--step-0);
-	font-weight: 398;
-	color: var(--text-primary);
-	line-height: 1.4;
-	cursor: pointer;
-	text-decoration: none;
-	transition:
-		color 0.15s,
-		opacity 0.15s;
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  padding: var(--space-3xs) 0;
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: var(--step-0);
+  font-weight: 398;
+  color: var(--text-primary);
+  line-height: 1.4;
+  cursor: pointer;
+  text-decoration: none;
+  transition:
+    color 0.15s,
+    opacity 0.15s;
 }
 
 .rep-entry:hover {
-	color: var(--accent-primary);
+  color: var(--accent-primary);
 }
 
 /* ── Swap transition ────────────────────────────────────────────────── */
 
 .repertoire-index.htmx-swapping {
-	opacity: 0.5;
-	transition: opacity 0.1s ease-out;
+  opacity: 0.5;
+  transition: opacity 0.1s ease-out;
 }
 
 .repertoire-index {
-	transition: opacity 0.15s ease-in;
+  transition: opacity 0.15s ease-in;
 }
 
 /* Link variant (students col) — no underline by default */
 .rep-entry--link {
-	text-decoration: none;
+  text-decoration: none;
 }
 
 /* Selected: accent color */
 .rep-entry--selected {
-	color: var(--accent-primary);
+  color: var(--accent-primary);
 }
 
 /* Faded/disabled: muted, not interactive */
 .rep-entry--faded {
-	opacity: 0.3;
-	cursor: not-allowed;
-	pointer-events: none;
+  opacity: 0.3;
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
 /* Years column — big numbers, semi-bold (BBBDMSans Medium weight) */
 .repertoire-col[data-col="years"] .rep-entry {
-	font-size: var(--step-3);
-	font-weight: 300;
-	line-height: 1.1;
-	letter-spacing: -0.02em;
-	padding: var(--space-3xs) 0;
+  font-size: var(--step-3);
+  font-weight: 300;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  padding: var(--space-3xs) 0;
 }
 
 /* Empty state in students column */
 .rep-empty {
-	color: var(--text-tertiary);
-	font-size: var(--step--1);
-	padding: var(--space-3xs) 0;
+  color: var(--text-tertiary);
+  font-size: var(--step--1);
+  padding: var(--space-3xs) 0;
 }
 
 /* ---- HTMX loading indicator ---- */
 .rep-indicator {
-	display: block;
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	height: 2px;
-	background: var(--accent-primary);
-	opacity: 0;
-	transition: opacity 0.1s;
-	z-index: 100;
-	pointer-events: none;
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--accent-primary);
+  opacity: 0;
+  transition: opacity 0.1s;
+  z-index: 100;
+  pointer-events: none;
 }
 
 .rep-indicator.htmx-request {
-	opacity: 1;
-	animation: rep-progress 1.2s ease-in-out infinite;
+  opacity: 1;
+  animation: rep-progress 1.2s ease-in-out infinite;
 }
 
 @keyframes rep-progress {
-	0% {
-		transform: scaleX(0);
-		transform-origin: left;
-	}
-	50% {
-		transform: scaleX(0.7);
-		transform-origin: left;
-	}
-	100% {
-		transform: scaleX(1);
-		transform-origin: left;
-	}
+  0% {
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+  50% {
+    transform: scaleX(0.7);
+    transform-origin: left;
+  }
+  100% {
+    transform: scaleX(1);
+    transform-origin: left;
+  }
 }
 
 /* ---- Search results view (grid) ---- */
 .search-results-header {
-	display: block;
-	font-size: var(--step--1);
-	color: var(--text-secondary);
-	margin: var(--space-s) var(--space-m) var(--space-2xs);
+  display: block;
+  font-size: var(--step--1);
+  color: var(--text-secondary);
+  margin: var(--space-s) var(--space-m) var(--space-2xs);
 }
 
 .results-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-	gap: var(--space-m);
-	list-style: none;
-	margin: 0;
-	padding: var(--space-2xs) var(--space-m) var(--space-m);
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: var(--space-m);
+  list-style: none;
+  margin: 0;
+  padding: var(--space-2xs) var(--space-m) var(--space-m);
 }
 
 .result-card {
-	text-decoration: none;
-	color: inherit;
-	display: flex;
-	flex-direction: column;
-	gap: var(--space-3xs);
+  text-decoration: none;
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3xs);
 }
 
 .result-card__cover {
-	margin: 0;
+  margin: 0;
 }
 
 .result-card__cover img {
-	width: 100%;
-	aspect-ratio: 4 / 3;
-	object-fit: cover;
-	display: block;
-	border-radius: 7px 7px 0 0;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  display: block;
+  border-radius: 7px 7px 0 0;
 }
 
 .result-card__gradient {
-	width: 100%;
-	aspect-ratio: 4 / 3;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: var(--space-s);
-	text-align: center;
-	box-sizing: border-box;
-	border-radius: 7px 7px 0 0;
-	background: linear-gradient(
-		180deg,
-		rgba(60, 133, 108, 1) 0%,
-		rgba(51, 191, 135, 1) 25%,
-		rgba(192, 93, 225, 1) 75%,
-		rgba(149, 87, 181, 1) 100%
-	);
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-s);
+  text-align: center;
+  box-sizing: border-box;
+  border-radius: 7px 7px 0 0;
+  background: linear-gradient(
+    180deg,
+    rgba(60, 133, 108, 1) 0%,
+    rgba(51, 191, 135, 1) 25%,
+    rgba(192, 93, 225, 1) 75%,
+    rgba(149, 87, 181, 1) 100%
+  );
 }
 
 .result-card__gradient-author {
-	color: var(--accent-foreground);
-	font-size: var(--step--2);
-	opacity: 0.85;
-	margin-bottom: 0.25rem;
-	display: block;
+  color: var(--accent-foreground);
+  font-size: var(--step--2);
+  opacity: 0.85;
+  margin-bottom: 0.25rem;
+  display: block;
 }
 
 .result-card__gradient-title {
-	color: var(--accent-foreground);
-	font-size: var(--step--1);
-	font-weight: 600;
-	display: -webkit-box;
-	-webkit-line-clamp: 3;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
+  color: var(--accent-foreground);
+  font-size: var(--step--1);
+  font-weight: 600;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .result-card__authors {
-	font-size: var(--step--1);
-	font-weight: 500;
-	color: var(--text-primary);
+  font-size: var(--step--1);
+  font-weight: 500;
+  color: var(--text-primary);
 }
 
 .result-card__title {
-	font-size: var(--step--1);
-	color: var(--text-secondary);
-	line-height: 1.35;
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
+  font-size: var(--step--1);
+  color: var(--text-secondary);
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .result-card__meta {
-	font-size: var(--step--2);
-	color: var(--accent-primary);
-	font-style: normal;
+  font-size: var(--step--2);
+  color: var(--accent-primary);
+  font-style: normal;
 }
 
 /* Search controls bar */
 .search-controls {
-	display: flex;
-	align-items: center;
-	gap: var(--space-s);
-	padding: var(--space-xs) var(--space-m);
-	border-bottom: 1px solid var(--border-secondary);
-	flex-shrink: 0;
-	flex-wrap: wrap;
+  display: flex;
+  align-items: center;
+  gap: var(--space-s);
+  padding: var(--space-xs) var(--space-m);
+  border-bottom: 1px solid var(--border-secondary);
+  flex-shrink: 0;
+  flex-wrap: wrap;
 }
 
 .search-filter-label {
-	display: flex;
-	align-items: center;
-	gap: var(--space-3xs);
-	font-size: var(--step--2);
-	color: var(--text-secondary);
-	text-transform: uppercase;
-	letter-spacing: 0.06em;
-	white-space: nowrap;
-	cursor: default;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3xs);
+  font-size: var(--step--2);
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+  cursor: default;
 }
 
 .search-filter-select {
-	font-size: var(--step--1);
-	padding: var(--space-3xs) var(--space-2xs);
-	padding-right: 1.75rem;
+  font-size: var(--step--1);
+  padding: var(--space-3xs) var(--space-2xs);
+  padding-right: 1.75rem;
 }
 
 .search-filter-select:focus {
-	border: 2px solid var(--accent-primary);
+  border: 2px solid var(--accent-primary);
 }
 
 .search-apply-btn,
 .search-reset-link {
-	/* btn--sm classes handle styling; space kept for potential overrides */
+  /* btn--sm classes handle styling; space kept for potential overrides */
 }
 
 /* Search results pagination */
 .pagination-wrap {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	gap: var(--space-2xs);
-	padding: var(--space-s) 0;
-	position: sticky;
-	bottom: 0;
-	background: var(--bg-primary);
-	z-index: 10;
-	flex-shrink: 0;
-	margin-top: auto;
-	border-top: 1px solid var(--border-secondary);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--space-2xs);
+  padding: var(--space-s) 0;
+  position: sticky;
+  bottom: 0;
+  background: var(--bg-primary);
+  z-index: 10;
+  flex-shrink: 0;
+  margin-top: auto;
+  border-top: 1px solid var(--border-secondary);
 }
 
 .pagination-wrap ul {
-	display: flex;
-	align-items: center;
-	gap: var(--space-2xs);
-	list-style: none;
-	margin: 0;
-	padding: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2xs);
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
 .pagination-btn {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	min-width: 2.75rem;
-	min-height: 2.75rem;
-	padding: 0 var(--space-2xs);
-	border: 1px solid var(--border-secondary);
-	border-radius: var(--radius);
-	color: var(--text-primary);
-	font-size: var(--step--1);
-	text-decoration: none;
-	font-weight: 400;
-	transition: all 0.15s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+  padding: 0 var(--space-2xs);
+  border: 1px solid var(--border-secondary);
+  border-radius: var(--radius);
+  color: var(--text-primary);
+  font-size: var(--step--1);
+  text-decoration: none;
+  font-weight: 400;
+  transition: all 0.15s;
 }
 
 .pagination-btn:hover:not(.disabled) {
-	border-color: var(--accent-primary);
-	color: var(--accent-primary);
+  border-color: var(--accent-primary);
+  color: var(--accent-primary);
 }
 
 .pagination-btn.disabled {
-	opacity: 0.3;
-	cursor: not-allowed;
-	pointer-events: none;
+  opacity: 0.3;
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
 .pagination-info {
-	font-size: var(--step--1);
-	color: var(--text-secondary);
-	padding: 0 var(--space-2xs);
+  font-size: var(--step--1);
+  color: var(--text-secondary);
+  padding: 0 var(--space-2xs);
 }
 
 /* Error message */
 .search-error {
-	background: var(--search-error-bg);
-	border-left: 3px solid var(--search-error-border);
-	color: var(--search-error-color);
-	padding: var(--space-2xs) var(--space-s);
-	font-size: var(--step--1);
-	margin: var(--space-2xs) var(--space-m);
-	flex-shrink: 0;
+  background: var(--search-error-bg);
+  border-left: 3px solid var(--search-error-border);
+  color: var(--search-error-color);
+  padding: var(--space-2xs) var(--space-s);
+  font-size: var(--step--1);
+  margin: var(--space-2xs) var(--space-m);
+  flex-shrink: 0;
 }
 
 /* ---- Student popover ---- */
 .student-popover {
-	position: absolute;
-	z-index: 200;
-	width: 300px;
-	background: var(--bg-primary, #fff);
-	border: 1px solid var(--border-primary, #ddd);
-	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.13);
-	border-radius: var(--radius);
-	overflow: hidden;
-	pointer-events: auto;
-	max-height: 80vh;
-	overflow-y: auto;
+  position: absolute;
+  z-index: 200;
+  width: 300px;
+  background: var(--bg-primary, #fff);
+  border: 1px solid var(--border-primary, #ddd);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.13);
+  border-radius: var(--radius);
+  overflow: hidden;
+  pointer-events: auto;
+  max-height: 80vh;
+  overflow-y: auto;
 }
 
 .student-popover[hidden] {
-	display: none;
+  display: none;
 }
 
 /* ---- Student card (inside popover) ---- */
 .student-card {
-	display: block;
-	text-decoration: none;
-	color: inherit;
-	transition: background 0.12s;
-	border-bottom: 1px solid var(--border-primary, #eee);
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  transition: background 0.12s;
+  border-bottom: 1px solid var(--border-primary, #eee);
 }
 
 .student-card:last-child {
-	border-bottom: none;
+  border-bottom: none;
 }
 
 .student-card:hover {
-	background: var(--bg-secondary, #f5f5f5);
+  background: var(--bg-secondary, #f5f5f5);
 }
 
 .student-card__banner {
-	width: 100%;
-	height: 120px;
-	background-size: cover;
-	background-position: center;
+  width: 100%;
+  height: 120px;
+  background-size: cover;
+  background-position: center;
 }
 
 .student-card__banner--gradient {
-	background: linear-gradient(
-		180deg,
-		rgba(60, 133, 108, 1) 0%,
-		rgba(51, 191, 135, 1) 25%,
-		rgba(192, 93, 225, 1) 75%,
-		rgba(149, 87, 181, 1) 100%
-	);
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: var(--space-s);
-	text-align: center;
-	box-sizing: border-box;
+  background: linear-gradient(
+    180deg,
+    rgba(60, 133, 108, 1) 0%,
+    rgba(51, 191, 135, 1) 25%,
+    rgba(192, 93, 225, 1) 75%,
+    rgba(149, 87, 181, 1) 100%
+  );
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-s);
+  text-align: center;
+  box-sizing: border-box;
 }
 
 .student-card__gradient-author {
-	color: var(--accent-foreground);
-	font-size: var(--step--2);
-	opacity: 0.85;
-	margin-bottom: 0.25rem;
-	display: block;
+  color: var(--accent-foreground);
+  font-size: var(--step--2);
+  opacity: 0.85;
+  margin-bottom: 0.25rem;
+  display: block;
 }
 
 .student-card__gradient-title {
-	color: var(--accent-foreground);
-	font-size: var(--step--1);
-	font-weight: 600;
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
+  color: var(--accent-foreground);
+  font-size: var(--step--1);
+  font-weight: 600;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .student-card__body {
-	padding: var(--space-xs) var(--space-s) var(--space-s);
+  padding: var(--space-xs) var(--space-s) var(--space-s);
 }
 
 .student-card__meta {
-	margin: 0 0 var(--space-3xs);
-	font-size: var(--step--2);
-	color: var(--text-secondary, #888);
-	letter-spacing: 0.03em;
+  margin: 0 0 var(--space-3xs);
+  font-size: var(--step--2);
+  color: var(--text-secondary, #888);
+  letter-spacing: 0.03em;
 }
 
 .student-card__title {
-	margin: 0 0 var(--space-3xs);
-	font-size: var(--step--1);
-	font-weight: 600;
-	line-height: 1.3;
-	color: var(--text-primary);
+  margin: 0 0 var(--space-3xs);
+  font-size: var(--step--1);
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--text-primary);
 }
 
 .student-card__subtitle {
-	margin: 0 0 var(--space-3xs);
-	font-size: var(--step--2);
-	color: var(--text-secondary, #888);
-	font-style: italic;
+  margin: 0 0 var(--space-3xs);
+  font-size: var(--step--2);
+  color: var(--text-secondary, #888);
+  font-style: italic;
 }
 
 .student-card__synopsis {
-	margin: var(--space-3xs) 0 0;
-	font-size: var(--step--2);
-	color: var(--text-secondary, #888);
-	line-height: 1.5;
+  margin: var(--space-3xs) 0 0;
+  font-size: var(--step--2);
+  color: var(--text-secondary, #888);
+  line-height: 1.5;
 }
 
 /* ── Collapsible filter controls ─────────────────────────────────── */
 .search-filters-toggle {
-	flex-shrink: 0;
-	border-bottom: 1px solid var(--border-secondary);
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border-secondary);
 }
 
 .search-filters-summary {
-	display: none; /* hidden on desktop */
-	align-items: center;
-	gap: var(--space-2xs);
-	padding: var(--space-xs) var(--space-m);
-	font-size: var(--step--2);
-	text-transform: uppercase;
-	letter-spacing: 0.06em;
-	color: var(--text-secondary);
-	cursor: pointer;
-	list-style: none;
-	user-select: none;
-	min-height: 44px;
+  display: none; /* hidden on desktop */
+  align-items: center;
+  gap: var(--space-2xs);
+  padding: var(--space-xs) var(--space-m);
+  font-size: var(--step--2);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-secondary);
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+  min-height: 44px;
 }
 
 .search-filters-summary::-webkit-details-marker {
-	display: none;
+  display: none;
 }
 
 .search-filters-summary::after {
-	content: "";
-	display: inline-block;
-	width: 8px;
-	height: 8px;
-	margin-left: auto;
-	border-right: 2px solid var(--text-secondary);
-	border-bottom: 2px solid var(--text-secondary);
-	transform: rotate(45deg);
-	transition: transform 0.2s;
+  content: "";
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-left: auto;
+  border-right: 2px solid var(--text-secondary);
+  border-bottom: 2px solid var(--text-secondary);
+  transform: rotate(45deg);
+  transition: transform 0.2s;
 }
 
 .search-filters-toggle[open] .search-filters-summary::after {
-	transform: rotate(-135deg);
+  transform: rotate(-135deg);
 }
 
 .search-filters-badge {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	min-width: 1.4em;
-	height: 1.4em;
-	padding: 0 0.35em;
-	background: var(--accent-primary);
-	color: var(--accent-foreground);
-	border-radius: 99px;
-	font-size: 0.85em;
-	font-weight: 500;
-	letter-spacing: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.4em;
+  height: 1.4em;
+  padding: 0 0.35em;
+  background: var(--accent-primary);
+  color: var(--accent-foreground);
+  border-radius: 99px;
+  font-size: 0.85em;
+  font-weight: 500;
+  letter-spacing: 0;
 }
 
 /* ── Responsive: mobile (≤ 768px) ────────────────────────────────── */
 @media (max-width: 768px) {
-	/* Show filter toggle summary, collapse by default if no filters active */
-	.search-filters-summary {
-		display: flex;
-	}
+  /* Show filter toggle summary, collapse by default if no filters active */
+  .search-filters-summary {
+    display: flex;
+  }
 
-	.search-filters-toggle:not([open]) .search-controls {
-		display: none;
-	}
+  .search-filters-toggle:not([open]) .search-controls {
+    display: none;
+  }
 
-	.search-filters-toggle[open] .search-controls {
-		display: flex;
-	}
+  .search-filters-toggle[open] .search-controls {
+    display: flex;
+  }
 
-	/* Filters stack vertically on mobile */
-	.search-controls {
-		flex-direction: column;
-		align-items: stretch;
-		gap: var(--space-xs);
-		padding: var(--space-xs) var(--space-m);
-	}
+  /* Filters stack vertically on mobile */
+  .search-controls {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-xs);
+    padding: var(--space-xs) var(--space-m);
+  }
 
-	.search-filter-label {
-		flex-direction: column;
-		align-items: stretch;
-		gap: var(--space-3xs);
-	}
+  .search-filter-label {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-3xs);
+  }
 
-	.search-filter-select {
-		width: 100%;
-	}
+  .search-filter-select {
+    width: 100%;
+  }
 
-	.search-apply-btn,
-	.search-reset-link {
-		width: 100%;
-		text-align: center;
-	}
+  .search-apply-btn,
+  .search-reset-link {
+    width: 100%;
+    text-align: center;
+  }
 
-	/* Pagination: hide first/last edge buttons */
-	.pagination-edge {
-		display: none;
-	}
+  /* Pagination: hide first/last edge buttons */
+  .pagination-edge {
+    display: none;
+  }
 
-	.pagination-btn {
-		min-width: 2.25rem;
-		min-height: 2.25rem;
-		font-size: var(--step--2);
-	}
+  .pagination-btn {
+    min-width: 2.25rem;
+    min-height: 2.25rem;
+    font-size: var(--step--2);
+  }
 
-	.pagination-info {
-		font-size: var(--step--2);
-	}
+  .pagination-info {
+    font-size: var(--step--2);
+  }
 
-	/* Reduce results grid gaps and padding */
-	.results-grid {
-		gap: var(--space-s);
-		padding: var(--space-2xs) var(--space-s) var(--space-s);
-		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-	}
+  /* Reduce results grid gaps and padding */
+  .results-grid {
+    gap: var(--space-s);
+    padding: var(--space-2xs) var(--space-s) var(--space-s);
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  }
 
-	.search-results-header {
-		margin: var(--space-s) var(--space-s) var(--space-2xs);
-	}
+  .search-results-header {
+    margin: var(--space-s) var(--space-s) var(--space-2xs);
+  }
 
-	.search-results-range {
-		display: none;
-	}
+  .search-results-range {
+    display: none;
+  }
 
-	.search-results-range--compact {
-		display: inline;
-	}
+  .search-results-range--compact {
+    display: inline;
+  }
 }