/* ═══════════════════════════════════════════════════════════════════════════
   PROJECTS ARCHIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page hero banner ──
   Photo-backed, matching the site's established hero convention (homepage,
   subject pages): background image + dark overlay for text legibility, grey
   fallback colour if no image is set. Kept to roughly the same compact
   height as the old flat navy bar — deliberately NOT the full-height
   image-hero treatment used elsewhere on the site, since this is a listing
   page rather than a single piece of content. */
.ce-proj-archive__hero {
	position: relative;
	background-color: #d8d8d8;
	background-size: cover;
	background-position: center;
	padding: 2rem 0 2.25rem;
}

/* A gradient rather than a flat wash. Measured against the worst case — text
   landing on a bright patch of the photograph — a flat 0.5 with 90% white text
   gave 3.56:1, which is below the 4.5:1 WCAG AA needs for body copy. The
   gradient is lighter at the top, where the picture is doing its job and only
   the breadcrumb sits, and heaviest at the bottom behind the intro line. That
   buys 9.2:1 on the copy without flattening the image into a grey slab. */
.ce-proj-archive__hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.45) 0%,
		rgba(0, 0, 0, 0.62) 45%,
		rgba(0, 0, 0, 0.72) 100%
	);
	pointer-events: none;
}

.ce-proj-archive__hero .site-container {
	position: relative;
	z-index: 1;
}

.ce-proj-archive__hero[data-animate="fade-up"] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.65s ease, transform 0.65s ease;
}

.ce-proj-archive__hero[data-animate="fade-up"].is-visible {
	opacity: 1;
	transform: translateY(0);
}

.ce-proj-archive__hero .ci-breadcrumb {
	margin: 0 0 0.6rem;
}

.ce-proj-archive__hero .ci-breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
}

.ce-proj-archive__hero .ci-breadcrumb__item {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
	display: flex;
	align-items: center;
}

.ce-proj-archive__hero .ci-breadcrumb__item + .ci-breadcrumb__item::before {
	content: '›';
	margin: 0 0.4rem;
	color: rgba(255, 255, 255, 0.4);
	font-weight: 400;
}

.ce-proj-archive__hero .ci-breadcrumb__link {
	color: #ffffff;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
	.ce-proj-archive__hero .ci-breadcrumb__link:hover {
		opacity: 0.7;
	}
}

.ce-proj-archive__hero .ci-breadcrumb__item--current {
	color: rgba(255, 255, 255, 0.55);
}

.ce-proj-archive__title {
	font-family: var(--ci-font-primary) !important;
	font-size: clamp(2rem, 4vw, 3rem) !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
	margin: 0 !important;
	line-height: 1.15 !important;
}

/* ════════════════════════════════════════════════════
   SUBJECT FILTER
   ════════════════════════════════════════════════════ */

.ce-proj-filters {
	position: sticky;
	/* Pulled up by a pixel and given it back as padding, so the bar tucks
	   under the header instead of butting against it. A sticky element pinned
	   flush to a fixed one is a sub-pixel coin toss: when the two round to
	   different device pixels a hairline of the scrolling page shows through
	   between them. The header is opaque white at z-index 1000000 against this
	   bar's 15, so the overlapping pixel is never seen — it just closes the
	   gap. Rounding the scroll offset (see chromeHeight() in
	   projects-archive.js) removes the usual cause; this covers the rest. */
	top: calc(var(--nav-bottom, 64px) - 1px);
	z-index: 15;
	background: #f9f9f9;
	padding: calc(1.75rem + 1px) 0 1.75rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.ce-proj-filters__bar {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	flex-wrap: wrap;
	margin: 0;
}

.ce-proj-filters__label {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 600;
	color: var(--ci-color-navy);
	white-space: nowrap;
}

/* ── Custom coloured, multi-select dropdown (replaces native <select> chrome) ── */
.ce-proj-dropdown {
	position: relative;
}

.ce-proj-dropdown__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	height: 46px;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 500;
	color: var(--ci-color-navy);
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.12);
	border-radius: 9999px;
	padding: 0 1.1rem;
	width: 300px;
	max-width: 100%;
	flex-shrink: 0;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ce-proj-dropdown__toggle:hover {
	border-color: var(--ci-color-navy);
}

.ce-proj-dropdown.is-open .ce-proj-dropdown__toggle {
	border-color: var(--ci-color-navy);
	box-shadow: 0 0 0 3px rgba(28, 46, 74, 0.1);
}

/* Fixed height and width (see .ce-proj-dropdown__toggle) — the box stays
   identical whether empty or full of selections. Content never wraps to a
   second line; anything past 2 pills collapses into a "+N" badge (see
   ce_projects_render_toggle_pills) so it always fits inside the fixed width. */
.ce-proj-dropdown__toggle-content {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.4rem;
	overflow: hidden;
}

.ce-proj-dropdown__placeholder {
	white-space: nowrap;
	padding: 0.1rem 0;
}

.ce-proj-dropdown__chevron {
	font-size: 0.7rem;
	color: var(--ci-color-navy);
	flex-shrink: 0;
	margin-left: 0.6rem;
	transition: transform 0.15s ease;
}

.ce-proj-dropdown.is-open .ce-proj-dropdown__chevron {
	transform: rotate(180deg);
}

/* Selected filter shown as a solid brand-coloured pill inside the toggle itself */
.ce-proj-dropdown__toggle-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--tag-color, var(--ci-color-navy));
	color: #ffffff;
	font-size: var(--ci-text-utility);
	font-weight: 700;
	padding: 0.3rem 0.4rem 0.3rem 0.75rem;
	border-radius: 9999px;
	white-space: nowrap;
}

.ce-proj-dropdown__pill-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.28);
	border: none;
	border-radius: 50%;
	width: 1.15rem;
	height: 1.15rem;
	color: #ffffff;
	font-size: 0.85rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	transition: background 0.15s ease;
}

.ce-proj-dropdown__pill-remove:hover {
	background: rgba(255, 255, 255, 0.46);
}

/* Summarises any selections beyond the first 2 visible pills — keeps the
   toggle's width bounded no matter how many filters are active */
.ce-proj-dropdown__toggle-more {
	display: inline-flex;
	align-items: center;
	background: rgba(28, 46, 74, 0.08);
	color: var(--ci-color-navy);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	padding: 0.3rem 0.6rem;
	border-radius: 9999px;
	white-space: nowrap;
	flex-shrink: 0;
}

.ce-proj-dropdown__menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 340px;
	overflow-y: auto;
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.1);
	border-radius: 1rem;
	box-shadow: 0 12px 32px rgba(28, 46, 74, 0.14);
	padding: 0.75rem;
}

.ce-proj-dropdown__menu[hidden] {
	display: none;
}

.ce-proj-dropdown__clear {
	display: block;
	background: none;
	border: none;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 600;
	color: var(--ci-color-navy);
	text-decoration: none;
	cursor: pointer;
	padding: 0 0.25rem 0.6rem;
}

.ce-proj-dropdown__options {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

/* ── Tag rows — filled brand-colour pills, vertically listed, with a plain
   checkbox indicating selection (rather than the pill itself changing state) ── */
.ce-proj-tag {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.4rem 0.5rem;
	border-radius: 0.6rem;
	cursor: pointer;
	transition: background 0.12s ease;
}

.ce-proj-tag:hover {
	background: #f9f9f9;
}

.ce-proj-tag-input {
	width: 1.05rem;
	height: 1.05rem;
	flex-shrink: 0;
	border-radius: 0.3rem;
	border: 1.5px solid rgba(0, 0, 0, 0.25);
	accent-color: var(--tag-color, var(--ci-color-navy));
	cursor: pointer;
}

.ce-proj-tag-input:focus-visible {
	outline: 2px solid var(--ci-color-navy);
	outline-offset: 2px;
}

.ce-proj-tag__pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: #ffffff;
	background: var(--tag-color, var(--ci-color-navy));
	padding: 0.35rem 0.85rem;
	border-radius: 9999px;
	white-space: nowrap;
}

/* ── Clear-all — plain text action, matching the per-dropdown "Clear" style
   rather than a boxed button (a <button> needs its native chrome reset
   explicitly, or the browser's default border/background/padding show through) ── */
.ce-proj-filters__clear-all {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: none;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 600;
	color: var(--ci-color-navy);
	text-decoration: none;
	cursor: pointer;
	padding: 0;
}

.ce-proj-filters__clear-all:hover {
	color: rgba(28, 46, 74, 0.75);
}

/* ════════════════════════════════════════════════════
   CARD GRID
   ════════════════════════════════════════════════════ */

.ce-proj-grid-section {
	background: #f9f9f9;
	padding: 2rem 0 5rem;
}

/* Five per row, not auto-fill.

   The curriculum runs five projects per year group — one per subject — so a
   fixed five-column grid makes each row exactly one year group. auto-fill
   derived four columns from the container width, which left every year group
   as a row of four and an orphan on its own line.

   Column counts step down explicitly below; the tile width follows from the
   container rather than the other way round. */
.ce-proj-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.5rem;
	margin-bottom: 3rem;
}

@media (max-width: 1180px) {
	.ce-proj-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 940px) {
	.ce-proj-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Chromeless tile — no card box, no shadow, no white strip. Just a rounded
   image with the title sitting directly on the page background beneath it,
   the way Apple treats grid tiles (App Store, Music, Photos) rather than
   the "boxed card" treatment borrowed from Case Studies. */
.ce-proj-card {
	position: relative;
}

.ce-proj-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	outline-offset: 3px;
	/* Tapping the tile on mobile showed the browser's default grey
	   tap-highlight flash before navigating — has no effect on desktop
	   (mouse input never triggers it), so safe to disable unconditionally. */
	-webkit-tap-highlight-color: transparent;
}

.ce-proj-card__image {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 1rem;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-color: #e8edf0;
	transition: opacity 0.2s ease;
}

.ce-proj-card:hover .ce-proj-card__image {
	opacity: 0.88;
}

/* Touch devices don't hover, so mirror the hover feedback above onto
   :active instead — same subtle opacity shift, no scale/transform jump
   (matches the button press-feedback convention used site-wide).
   (hover: none) keeps this off desktop entirely. */
@media (hover: none) {
	.ce-proj-card:active .ce-proj-card__image {
		opacity: 0.88;
	}
}

.ce-proj-card__image--no-image {
	background-image: linear-gradient(135deg, #e8edf0 0%, #d4dce0 100%);
}

.ce-proj-card__body {
	padding: 0.7rem 0.1rem 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.3rem;
}

/* Pinned top-left over the image, not in the white body.

   Sized down from 16px when the grid went to five columns: at a 221px tile the
   old pill was a third of the card's width and competed with the artwork. The
   inset and gap come down with it so the pair still sits as one cluster in the
   corner rather than drifting toward the middle. */
.ce-proj-card__pills {
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.32rem;
}

/* Weight stays at 700, matching every other pill and chip on the site. White
   text on a saturated fill optically thins, so a lighter weight costs
   legibility here in a way it would not on dark-on-light body copy. */
.ce-proj-card__pill {
	font-family: var(--ci-font-primary);
	font-size: 0.75rem;
	font-weight: 700;
	color: #ffffff;
	padding: 0.22rem 0.62rem;
	border-radius: 9999px;
	letter-spacing: 0.02em;
	line-height: 1.35;
}

.ce-proj-card__title {
	font-family: var(--ci-font-primary) !important;
	font-size: var(--ci-text-card-heading) !important;
	font-weight: 600 !important;
	color: var(--ci-color-navy) !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ── Pagination ── */
.ce-proj-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 1rem;
}

.ce-proj-pagination a,
.ce-proj-pagination span {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 600;
	color: var(--ci-color-navy);
	padding: 0.5rem 0.9rem;
	border-radius: 8px;
	text-decoration: none;
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.1);
	transition: background 0.15s ease;
	display: inline-flex;
	align-items: center;
}

.ce-proj-pagination a:hover {
	background: rgba(28, 46, 74, 0.07);
}

.ce-proj-pagination .current {
	background: var(--ci-color-navy);
	color: #ffffff;
	border-color: var(--ci-color-navy);
}

.ce-proj-empty {
	font-family: var(--ci-font-primary);
	color: var(--ci-color-text-muted);
	text-align: center;
	padding: 3rem 0;
}

/* ════════════════════════════════════════════════════
   TABLET
   ════════════════════════════════════════════════════ */

/* No column-count overrides needed here — the auto-fill + minmax on
   .ce-proj-grid sets its column count explicitly at each breakpoint above. */

/* ════════════════════════════════════════════════════
   MOBILE
   ════════════════════════════════════════════════════ */

@media (max-width: 768px) {
	.ce-proj-archive__hero {
		padding: 2rem 0 1.75rem;
	}

	.ce-proj-filters {
		padding: 1.25rem 0;
	}

	.ce-proj-filters__bar {
		flex-direction: column;
		align-items: stretch;
	}

	.ce-proj-dropdown {
		width: 100%;
	}

	.ce-proj-dropdown__toggle {
		min-width: 0;
		width: 100%;
	}

	.ce-proj-grid-section {
		padding: 1.5rem 0 3rem;
	}

	.ce-proj-grid {
		gap: 1.25rem;
	}
}

/* Phones — 2 tiles per row rather than 1. A single square tile floating in
   a full-width row (what auto-fill/minmax naturally collapses to here) reads
   as sparse; 2-up feels like a proper gallery grid and halves the scrolling
   needed to browse the library. Pills/title trimmed slightly since each tile
   is now noticeably narrower. */
@media (max-width: 600px) {
	.ce-proj-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.85rem;
	}

	/* Base is already 12px; phones only need a touch less horizontal padding
	   on the narrower tile. Setting a font-size here would make phones larger
	   than desktop, which is what the old 16px-era override did. */
	.ce-proj-card__pill {
		padding: 0.2rem 0.55rem;
	}

	.ce-proj-card__body {
		padding-top: 0.5rem;
	}

	.ce-proj-card__title {
		font-size: var(--ci-text-card-heading) !important;
	}
}


/* ════════════════════════════════════════════════════
   TOPICS ARCHIVE — subject grouping + jump links
   Only used by /topic/, which is a single unpaginated page grouped under
   subject headings. /projects/ is unaffected by everything below.
   ════════════════════════════════════════════════════ */

/* Hero sub-text, under the H1 — same role as .page-hero__subtitle elsewhere. */
.ce-proj-archive__intro {
	font-family: var(--ci-font-primary) !important;
	font-size: var(--ci-text-body) !important;
	font-weight: 400 !important;
	line-height: 1.65 !important;
	/* Pure white, and a shadow to hold the letters together where the photo
	   underneath is busy. 0.9 alpha was costing a tenth of the contrast for
	   nothing — this was already fixed for phones and never for anything
	   else. */
	color: #ffffff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) !important;
	margin: 1rem 0 0 !important;
}

/* Jump links live in the hero, under the intro copy. */
.ce-topic-jump {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-top: 1.75rem;
	position: relative;
	z-index: 1;
}

.ce-topic-jump[hidden] {
	display: none;
}

.ce-topic-jump__label {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: #ffffff;
	flex-shrink: 0;
}

.ce-topic-jump__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.ce-topic-jump__item[hidden] {
	display: none;
}

/* Each pill carries its subject's own colour inline, the same value the
   subject's card pills use, so a "History" jump link reads as the same thing
   as a History card tag. White text to match .ce-proj-card__pill exactly —
   an earlier navy version used the identical background but read as a
   noticeably deeper swatch, because bold glyphs cover enough of a small pill
   to shift its perceived lightness.
   Known trade-off, chosen deliberately: white on these pastels is 1.6-3.3:1,
   below the WCAG AA 4.5:1 threshold (Art and Design is the worst at 1.63:1).
   The same applies to the card pills this matches. Switching both to navy
   would clear AA at 4.26-8.62:1 if that's ever revisited. */
.ce-topic-jump__link {
	display: inline-flex;
	align-items: center;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: #ffffff;
	text-decoration: none;
	border-radius: 9999px;
	padding: 0.35rem 0.85rem;
	letter-spacing: 0.02em;
	transition: opacity 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
	.ce-topic-jump__link:hover {
		opacity: 0.78;
	}
}


/* Subject groups */
.ce-topic-group[hidden] {
	display: none;
}

.ce-topic-group__heading {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #646464;
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	/* Clears the sticky nav + filter bar so an anchor jump doesn't drop the
	   heading underneath them.

	   --ce-filters-bottom is measured and published by projects-archive.js;
	   it is the only value that can be right at both sizes, because the bar
	   is ~186px tall on a phone against ~104px on a desktop. The old fixed
	   6.5rem was the desktop figure, which left the heading 82px behind the
	   bar on a phone — jumping to "History" landed on the cards with the
	   heading nowhere in sight.

	   The calc() fallback keeps the desktop number for the moment before the
	   script runs, and for the no-JS case. */
	scroll-margin-top: var(--ce-filters-bottom, calc(var(--nav-bottom, 64px) + 6.5rem));
}

.ce-topic-group:first-child .ce-topic-group__head {
	margin-top: 2rem;
}

.ce-topic-group__count {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ci-color-text-muted);
}

/* Heading and note on one baseline row. It wraps on a narrow screen, where
   the sentence cannot sit beside the heading at any sensible size. */
.ce-topic-group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.85rem;
	margin: 2.5rem 0 1.5rem;
}

/* Sets expectation beside each year heading: this is a selection, and the rest
   of the library is a conversation away. */
/* No measure limit: the sentence is meant to sit on a single line, and a
   max-width was breaking it onto two well before the container ran out. It
   still wraps on a narrow screen, where one line will not fit at all. */
.ce-topic-group__note {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ci-color-text-muted);
	margin: 0;
}

/* The count is a number in a sentence here, not a badge beside a heading, so
   it drops the badge's own weight and size. */
.ce-topic-group__note .ce-topic-group__count {
	font-size: inherit;
	font-weight: 700;
	color: inherit;
}

/* Orange and bold rather than underlined — it carries against the muted grey
   of the rest of the sentence on its colour alone. */
.ce-topic-group__note a {
	color: var(--ci-color-engage);
	font-weight: 700;
	text-decoration: none;
}

@media (hover: hover) {

	/* The darker orange the site uses for a hovered engage control. */
	.ce-topic-group__note a:hover {
		color: #e08a1e;
	}
}

/* A hidden card must not leave a gap in the grid — [hidden] alone loses to
   the grid item's own display value. */
.ce-proj-card[hidden] {
	display: none !important;
}

/* Real <img> instead of a CSS background, so card images can be lazy-loaded.
   .ce-proj-card__image is already position:relative + overflow:hidden. */
.ce-proj-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 640px) {
	.ce-topic-group__head {
		margin: 2rem 0 1.25rem;
	}

	.ce-topic-jump {
		margin-top: 1.25rem;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO SUB-TEXT ON PHONES — match .page-hero__subtitle
   ═══════════════════════════════════════════════════════════════════════════

   This hero is its own component rather than .page-hero, so it did not pick up
   the mobile legibility treatment applied to the other 25 heroes. Same three
   changes, and the same reasoning — see the mobile block in page-hero.css.

   Of the three, only two are needed here: the intro is already weight 400, so
   it never had the Lato Light problem the .page-hero subtitles did.

   Measured on this hero's own banner at 390px, sampling the intro's box at 144
   points:

                                          worst    median   below AA
       before  (50% overlay, 90% white)     3.91    10.34       6%
       after   (55% overlay, pure white)    5.23    13.34       0%

   The colour is part of it: rgba(255,255,255,0.9) costs about a tenth of the
   contrast for no reason a hero needs, and .page-hero__subtitle is pure white.
   !important only because the base rule below uses it — matching, not choosing.

   640px to match the breakpoint page-hero.css treats as mobile.
────────────────────────────────────────────────────────────────────────────── */

/* The phone-only override that used to live here is now the base rule, so
   every width gets it. Left empty rather than deleted so the note above still
   has something to point at. */