/* ============================================================
   ABOUT PAGE — the public company page, in Panel v2 fit/finish.

   Scope is body.pv2about, a route class added by about.tpl only.
   This is a PUBLIC marketing page, so it cannot lean on body.pnv2:
   panel-v2-core.css is not enqueued out here and every --pv2-* token
   would be undefined. Same trap, same cure as the auth surface — the
   tokens are redeclared under the route class (identical names and
   values, one palette) and every component is namespaced .ab-* so
   nothing can leak into the shared header, promo bar or footer.

   Design contract: CLAUDE-DESIGN-SYSTEM.md.
   ============================================================ */

body.pv2about {
	--pv2-surface: #1a1a1b;      /* deep chrome: card headers */
	--pv2-panel: #212122;        /* card body */
	--pv2-raised: #252526;
	--pv2-field: #2d2d2e;        /* chips, wells */
	--pv2-hover: #333333;
	--pv2-border: #3a3a3b;
	--pv2-border-strong: #4c4c4d;
	--pv2-line: #2c2c2d;
	--pv2-text: #ffffff;
	--pv2-text-soft: #cccccc;
	--pv2-text-muted: #999999;
	--pv2-text-dim: #666666;
	--pv2-accent: #d5a84a;
	--pv2-gold: #eaa824;
	--pv2-gold-deep: #db9b15;
	--pv2-radius: 4px;           /* controls, chips, images */
	--pv2-radius-lg: 6px;        /* cards */
	/* ONE content rail, one gutter. The year marker hangs in this
	   gutter and the card starts after it; the same number drives the
	   stacked phone layout, just smaller. */
	--ab-gutter: 78px;
	/* the reading column's hard cap. Everything else on the card is
	   free to take the width the rail hands it; the prose is not. See
	   the rail block below for why this number is a cap and not a
	   fraction. */
	--ab-measure: 560px;
}

/* ---------- the content rail ----------
   The page used to sit in bootstrap's 1170px `.container` with an
   inner 980px cap, which on a 1920 screen is a 375px empty margin
   either side and another 95px inside that - Ryan: "this is still not
   filling the full width."

   Panel v2 settled this once (CLAUDE-DESIGN-SYSTEM.md, "One content
   rail"): above 1400px the rail is min(1560px, 100vw - 180px). This is
   that same rail, scoped to the two blocks this page owns. `width` has
   to be reset alongside `max-width` because layout.css pins
   `.container` to a FIXED 1170px above 1216px - a max-width alone
   would never widen it.

   The width is spent on the card and its figure, NOT on the prose: a
   1560px line of body text is unreadable. The reading column is capped
   at --ab-measure and the figure column takes the remainder, so the
   measure stays near 70 characters at every width while the card grows
   with the page. */
@media only screen and (min-width: 1400px) {
	body.pv2about section.page-title > .container,
	body.pv2about .ab > .container {
		width: 100%;
		max-width: min(1560px, calc(100vw - 180px));
	}
}

/* ---------- page band ----------
   Site chrome stays site chrome: the band keeps its own background and
   position, only its type is brought onto the v2 ramp. The theme gives
   h2 a `padding-bottom:15px` + hairline underline that is invisible on
   a dark background but still spends 15px, so it is cancelled here and
   the spacing is set explicitly. */
body.pv2about section.page-title { padding: 22px 0 20px; }
body.pv2about section.page-title h2 {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 26px; font-weight: 400; color: #fff;
	letter-spacing: .01em;
	margin: 0; padding-bottom: 0; border-bottom: 0; display: block;
}
body.pv2about section.page-title p.ab-band-sub {
	margin: 9px 0 0; padding: 0; border: 0;
	font-size: 13.5px; color: var(--pv2-text-muted); line-height: 1.5;
}

/* ---------- shell ---------- */
body.pv2about .ab {
	font-family: 'Open Sans', Arial, sans-serif;
	color: var(--pv2-text-soft);
	padding: 34px 0 8px;
}
body.pv2about .ab *, body.pv2about .ab *:before, body.pv2about .ab *:after { box-sizing: border-box; }
body.pv2about .ab a { color: var(--pv2-accent); text-decoration: none; }
body.pv2about .ab a:hover { color: var(--pv2-gold); text-decoration: none; }

/* ---------- lede ---------- */









/* ---------- the timeline ----------
   ONE rail, top to bottom, at every width. An alternating left/right
   timeline needs cards of roughly equal height or one half of the page
   sits permanently empty next to the tall ones — and these cards run
   from 5 lines to a photo + two paragraphs + a chip grid. So the years
   march down a single left rail and the width is spent INSIDE the card
   instead (see .ab-cbody's two-column split), which is also the layout
   the phone gets, just narrower. */
body.pv2about .ab-line {
	position: relative; list-style: none;
	max-width: none; margin: 0; padding: 0;
}
/* the rail — fades out at both ends so it never looks cut off */
body.pv2about .ab-line:before {
	content: ''; position: absolute; z-index: 0;
	top: 0; bottom: 0; left: 13px; width: 2px;
	background: linear-gradient(180deg,
		rgba(58, 58, 59, 0) 0,
		var(--pv2-border) 22px,
		var(--pv2-border) calc(100% - 22px),
		rgba(58, 58, 59, 0) 100%);
}
body.pv2about .ab-item {
	position: relative; z-index: 1;
	padding: 0 0 0 var(--ab-gutter); margin: 0 0 26px;
}
body.pv2about .ab-item:last-child { margin-bottom: 0; }

/* the year marker — hangs in the gutter and masks the rail behind it */
body.pv2about .ab-mark {
	position: absolute; z-index: 2; left: 0; top: 9px; margin: 0;
	font-family: 'Open Sans', Arial, sans-serif;
}
body.pv2about .ab-mark span {
	display: inline-block; height: 26px; line-height: 24px; padding: 0 13px;
	background: var(--pv2-surface); border: 1px solid var(--pv2-border-strong);
	border-radius: 13px; color: var(--pv2-gold);
	font-size: 12px; font-weight: 700; letter-spacing: .08em;
	white-space: nowrap;
}
/* hairline from the marker to the card */
body.pv2about .ab-item:after {
	content: ''; position: absolute; z-index: 0; top: 22px; left: 13px;
	width: calc(var(--ab-gutter) - 13px); height: 1px; background: var(--pv2-border);
}

/* ---------- card ---------- */
body.pv2about .ab-card {
	background: var(--pv2-panel); border: 1px solid var(--pv2-border);
	border-radius: var(--pv2-radius-lg); overflow: hidden;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30);
}
/* layout.css ships `section header { margin-bottom: 60px }` for the
   theme's marketing page headers. Every card head here is a <header>
   inside a <section>, so without this each card carried a 60px void
   between its title bar and its body. */
body.pv2about .ab header { margin: 0; }
body.pv2about .ab-chead {
	position: relative; overflow: hidden;
	padding: 12px 16px; margin: 0; background: var(--pv2-surface);
	border-bottom: 1px solid var(--pv2-line);
}
/* a card with no photograph gets a deliberate treatment, not a bare
   strip — an accent bloom drifting in from the top right, same idea as
   the dashboard game cards without band art. */
body.pv2about .ab-card.no-fig .ab-chead:before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(150px 90px at 100% -30%, rgba(234, 168, 36, 0.16), rgba(234, 168, 36, 0) 70%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, rgba(255, 255, 255, 0) 1px 7px);
}
body.pv2about .ab-title {
	position: relative; margin: 0; padding: 0; border: 0;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 15px; font-weight: 600; line-height: 1.35; color: #fff;
	letter-spacing: 0; text-transform: none;
}
/* the card body is a two-column grid on desktop: prose on the left at a
   readable 60-70 character measure, the photograph (or, on a card with
   no photograph, its chip grid) in the aside. Full-width blocks span
   both. That is what keeps the cards short enough that a single rail
   does not turn the page into a mile of scroll.

   The reading column is a CAPPED track (`minmax(0, --ab-measure)`), not
   a fraction: on the widened rail a `1fr` prose column would run to
   900px+ and no one reads a 130-character line. The figure column takes
   whatever the rail hands over, which is the honest place to spend the
   extra width - these sources are 800-1471px wide and were being shown
   at 340. */
body.pv2about .ab-cbody {
	display: grid; align-items: start;
	grid-template-columns: minmax(0, var(--ab-measure)) minmax(250px, 1fr);
	gap: 16px 22px; padding: 18px;
}
body.pv2about .ab-main { grid-column: 1; grid-row: 1; min-width: 0; max-width: var(--ab-measure); }
body.pv2about .ab-fig { grid-column: 2; grid-row: 1; }
body.pv2about .ab-nums,
body.pv2about .ab-quote,
body.pv2about .ab-pills { grid-column: 1 / -1; }
body.pv2about .ab-main > *:last-child { margin-bottom: 0; }
/* the hero card re-orders that grid: gallery across the top, then prose and
   the stat tiles side by side under it. Scoped to >=761px because below that
   the card is a single column and `.ab-fig { order: -1 }` already puts the
   picture first - an explicit grid-row here would fight it, and a
   `grid-column: 2` would invent a second column that no longer exists. */
@media only screen and (min-width: 761px) {
	body.pv2about .ab-card.ab-hero .ab-fig { grid-column: 1 / -1; grid-row: 1; }
	body.pv2about .ab-card.ab-hero .ab-main { grid-column: 1; grid-row: 2; }
	body.pv2about .ab-card.ab-hero .ab-nums { grid-column: 2; grid-row: 2; }
	body.pv2about .ab-card.ab-hero .ab-pills { grid-column: 1 / -1; grid-row: 3; }
}
body.pv2about .ab-copy {
	margin: 0 0 12px; font-size: 14px; line-height: 1.62; color: var(--pv2-text-soft);
}
body.pv2about .ab-copy strong { color: #fff; font-weight: 600; }

/* ---------- figure ---------- */
body.pv2about .ab-fig { margin: 0; padding: 0; }
body.pv2about .ab-fig img {
	display: block; width: 100%; height: auto;
	border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius);
	background: var(--pv2-surface);
}
body.pv2about .ab-fig figcaption {
	margin: 8px 0 0; font-size: 11.5px; line-height: 1.45;
	color: var(--pv2-text-dim); font-style: normal;
}

/* ---------- the hero card's gallery ----------
   One card on this page gets three shots instead of one: the current year,
   which is the only entry still being written and the only one where the
   product itself - not key art - is the story. Ryan: "love to show the
   Pokemon cards and have a few pictures for that one. Also, it needs to
   match the full width."

   A 560px aside cannot carry three screenshots, so on this card the figure
   is promoted to a full-width row above the prose (see .ab-hero below). The
   capped-figure-track rule the rest of the page lives by is NOT relaxed - it
   exists so a tall image cannot tower over a short text column, and a figure
   that spans the card has no text column beside it to tower over.

   Sizing carries itself: the two small shots hold their own 1.41 aspect and
   therefore set the row heights, and the lead spans both rows and `cover`s
   whatever that adds up to. No hard-coded height anywhere, so the block ends
   flush on both columns at every width. Comes AFTER `.ab-fig img` on purpose
   - both selectors weigh the same and source order is what decides. */
/* ---------- 2026 carousel ----------
   Was a three-up gallery promoted to a full-width row; it dwarfed every other
   year. Now one crossfading frame in the ordinary figure slot, so 2026 sits at
   the same size as 2012. */
body.pv2about .ab-carousel { position: relative; }
body.pv2about .ab-slides { position: relative; }
/* scoped through .ab-fig on purpose: `body.pv2about .ab-fig img` above carries
   height:auto and outweighs a bare `.ab-slide`, which let each slide take its
   own natural height inside a fixed frame instead of filling it. */
body.pv2about .ab-fig .ab-slide {
	position: absolute; inset: 0; width: 100%; height: 100%;
	border: 1px solid var(--pv2-border); border-radius: var(--pv2-radius);
	opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
body.pv2about .ab-fig .ab-slide.is-on { opacity: 1; }
/* manual controls: the dots alone were easy to miss, so the frame carries
   arrows that fade up on hover and are always present for keyboard and touch */
body.pv2about .ab-carousel { position: relative; }
body.pv2about .ab-nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; line-height: 1;
	cursor: pointer; opacity: 0; transition: opacity .18s ease, background .18s ease;
	display: flex; align-items: center; justify-content: center;
}
body.pv2about .ab-carousel:hover .ab-nav,
body.pv2about .ab-nav:focus-visible { opacity: 1; }
body.pv2about .ab-nav:hover { background: rgba(0, 0, 0, .78); }
body.pv2about .ab-prev { left: 9px; }
body.pv2about .ab-next { right: 9px; }
/* a touch screen has no hover, so they stay visible there */
@media (hover: none) {
	body.pv2about .ab-nav { opacity: .85; }
}
body.pv2about .ab-dots { display: flex; gap: 6px; justify-content: center; margin: 9px 0 0; }
body.pv2about .ab-dot {
	width: 7px; height: 7px; padding: 0; border-radius: 50%;
	border: 0; background: var(--pv2-border-strong, #4c4c4d); cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
body.pv2about .ab-dot:hover { background: var(--pv2-text-muted); }
body.pv2about .ab-dot.is-on { background: var(--pv2-gold, #eaa824); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) {
	body.pv2about .ab-fig .ab-slide { transition: none; }
}

/* ---------- every year's figure is the same box ----------
   The sources are all different shapes - a 4:3 photo, 800px composites, a 400px
   panel capture - so each card used to size its own figure and the column read
   as ragged down the page. One ratio, cover-cropped, so they match in height
   and width whatever the source. */
/* One box for every figure, and nothing cropped out of it.
   Measured first this time: 13 of the 17 sources are wide banners between 2.29
   and 2.95, and only the 2026 panel captures are near 1.35. A 1.35 cover crop
   was therefore eating 40-54% off the sides of most of the page - half of the
   2024 Palworld/Enshrouded art was gone. The box is now 2.29, the ratio the
   largest group is already cut to, and `contain` guarantees no image ever loses
   a logo or a face; the odd shapes letterbox onto the card colour instead. */
body.pv2about .ab-fig > img,
body.pv2about .ab-slides {
	width: 100%; aspect-ratio: 2.29; object-fit: contain;
	background: #171718;
}
body.pv2about .ab-fig .ab-slide { object-fit: contain; background: #171718; }

/* ---------- pull quote ---------- */
body.pv2about .ab-quote {
	margin: 0; padding: 11px 14px; border: 0;
	border-left: 3px solid var(--pv2-accent);
	background: rgba(255, 255, 255, 0.026);
	border-radius: 0 var(--pv2-radius) var(--pv2-radius) 0;
	font-size: 13.5px; line-height: 1.55; color: #dcdcdc;
}
body.pv2about .ab-quote p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
body.pv2about .ab-quote cite {
	display: block; margin: 7px 0 0; font-size: 11.5px; font-style: normal;
	color: var(--pv2-text-dim);
}

/* ---------- most-hosted pills ----------
   A texture strip at the foot of each card: the games people actually
   bought that year, biggest first. Size IS the data - there is no
   number anywhere in this component, by design (Ryan: "without giving
   all the numbers specifically ... make it kind of subtle as well, we
   don't need it front and center").

   Four tiers, baked into the template from `gameservers` bucketed by
   creation year. The tier is sqrt(n / that year's leader) - a raw
   proportional scale collapses every year with one runaway game
   (Valheim was 47% of 2021, ARK 69% of 2016) into one huge pill and a
   row of identical crumbs. sqrt keeps the leader obviously first while
   the tail stays legible. Caps of one xl, one lg and two md then force
   a descending silhouette even in a flat year like 2025, where the top
   four were within a whisker of each other.

   Colour fades with size as well, so the hierarchy still reads on a
   phone where every pill has wrapped onto its own line.

   No well and no card chrome: it sits directly under the card body,
   and two stacked wells at the foot of every card is the opposite of
   subtle. A hairline and a label is the whole chrome budget. */
body.pv2about .ab-pills {
	margin: 2px 0 0; padding: 13px 0 0;
	border-top: 1px solid var(--pv2-line);
}
body.pv2about .ab-pills h5 {
	margin: 0 0 10px; padding: 0; font-family: 'Open Sans', Arial, sans-serif;
	font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
	color: var(--pv2-text-dim);
}
body.pv2about .ab-plist {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 8px; margin: 0; padding: 0; list-style: none;
}
body.pv2about .ab-plist li {
	display: inline-flex; align-items: center; margin: 0;
	background: var(--pv2-field); border: 1px solid var(--pv2-border);
	border-radius: 999px; color: var(--pv2-text-soft);
	font-family: 'Open Sans', Arial, sans-serif; font-weight: 600;
	white-space: nowrap;
}
/* the icon is a rounded SQUARE, not a disc. A circular crop of a 64px
   game tile decapitates the wordmark on half the catalog - Sons of the
   Forest, Minecraft, Abiotic Factor and Subnautica 2 all lose their
   first and last letters. Verified against the whole icon set before
   picking this. */
body.pv2about .ab-plist img {
	display: block; flex: 0 0 auto; object-fit: cover;
	background: var(--pv2-surface);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
body.pv2about .ab-plist .p-xl {
	height: 36px; padding: 0 15px 0 5px; gap: 10px; font-size: 14px;
	background: var(--pv2-hover); border-color: var(--pv2-border-strong); color: #fff;
}
body.pv2about .ab-plist .p-xl img { width: 26px; height: 26px; border-radius: 5px; }
body.pv2about .ab-plist .p-lg {
	height: 32px; padding: 0 13px 0 5px; gap: 9px; font-size: 13px; color: #ededed;
}
body.pv2about .ab-plist .p-lg img { width: 22px; height: 22px; border-radius: 4px; }
body.pv2about .ab-plist .p-md {
	height: 28px; padding: 0 11px 0 4px; gap: 7px; font-size: 12px;
	border-color: var(--pv2-line);
}
body.pv2about .ab-plist .p-md img { width: 20px; height: 20px; border-radius: 4px; }
body.pv2about .ab-plist .p-sm {
	height: 24px; padding: 0 10px; font-size: 11.5px; font-weight: 400;
	background: rgba(255, 255, 255, 0.028); border-color: var(--pv2-line);
	color: var(--pv2-text-muted);
}

/* ---------- year in review numbers ---------- */
body.pv2about .ab-nums { margin: 0; }
body.pv2about .ab-nums h5 {
	margin: 0 0 9px; padding: 0; font-family: 'Open Sans', Arial, sans-serif;
	font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
	color: var(--pv2-text-muted);
}
/* stat tiles are chips, not banners - a 400px-wide tile holding a
   4-character number is 80% empty, so they cap out and sit left. */
body.pv2about .ab-numgrid { display: flex; flex-wrap: wrap; gap: 10px; }
body.pv2about .ab-num {
	flex: 0 1 300px; min-width: 210px;
	background: var(--pv2-field); border: 1px solid var(--pv2-border);
	border-radius: var(--pv2-radius); padding: 11px 12px;
}
body.pv2about .ab-num b {
	display: flex; align-items: center; gap: 8px;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 19px; font-weight: 700; line-height: 1.15; color: #fff;
	font-variant-numeric: tabular-nums;
}
body.pv2about .ab-num b i { color: var(--pv2-accent); font-size: 14px; width: 16px; text-align: center; flex: 0 0 16px; }
body.pv2about .ab-num span {
	display: block; margin: 5px 0 0; font-size: 11.5px; line-height: 1.35;
	color: var(--pv2-text-muted);
}

/* ---------- closing CTA ---------- */
body.pv2about .ab-cta {
	max-width: none; margin: 44px 0 0;
	display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
	background: var(--pv2-panel); border: 1px solid var(--pv2-border);
	border-radius: var(--pv2-radius-lg); padding: 20px 22px;
}
body.pv2about .ab-cta-txt { flex: 1 1 300px; min-width: 0; }
body.pv2about .ab-cta h3 {
	margin: 0; padding: 0; font-family: 'Open Sans', Arial, sans-serif;
	font-size: 18px; font-weight: 600; line-height: 1.3; color: #fff; text-transform: none;
}
body.pv2about .ab-cta p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--pv2-text-muted); }
/* NOTE the `a.` - `body.pv2about .ab a` above is (0,2,2) and would
   otherwise repaint this gold-on-gold. */
body.pv2about .ab a.ab-btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 40px; padding: 0 26px; flex: 0 0 auto;
	background: var(--pv2-gold); border: 1px solid var(--pv2-gold);
	border-radius: var(--pv2-radius); color: #fff;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 14px; font-weight: 600; letter-spacing: .02em;
	text-shadow: none; box-shadow: none;
	transition: background-color .12s, border-color .12s;
}
body.pv2about .ab a.ab-btn:hover, body.pv2about .ab a.ab-btn:focus {
	background: var(--pv2-gold-deep); border-color: var(--pv2-gold-deep); color: #fff;
}

/* ============================================================
   On the widened rail (>=1400px) the card is ~1450px instead of 902.
   Three things change and nothing else:

   1. The measure grows to 620px, but the TYPE grows with it (14 ->
      15.5px). Character count is what matters, not pixels - 620px at
      15.5px is the same ~72 characters 502px at 14px was, just easier
      to read on a big screen. Growing the box without growing the type
      is how you end up with a 100-character line.
   2. Card padding opens up. A 1450px card on 18px padding reads like a
      spreadsheet row.
   3. BOTH tracks are capped and the leftover is pushed into the gutter
      between them (`justify-content: space-between`), instead of being
      handed to the figure. A figure that simply eats the remainder gets
      to ~750px, and since these cards run from three lines of prose to
      two paragraphs, the taller image then towers 250px over its own
      text column. Capped tracks + a gutter that grows keeps the two
      columns within sight of each other at every width, and the
      full-width rows below (`grid-column: 1 / -1`) still span the whole
      card, so the gutter reads as breathing room and never as a hole.
   ============================================================ */
@media only screen and (min-width: 1400px) {
	body.pv2about { --ab-measure: 620px; }
	body.pv2about .ab-cbody {
		grid-template-columns: minmax(0, var(--ab-measure)) minmax(280px, 560px);
		justify-content: space-between;
		gap: 18px 28px; padding: 22px 26px;
	}
	body.pv2about .ab-chead { padding: 13px 26px; }
	body.pv2about .ab-copy { font-size: 15.5px; line-height: 1.66; margin-bottom: 13px; }
	body.pv2about .ab-fig figcaption { font-size: 12px; }
	body.pv2about .ab-quote { padding: 13px 17px; font-size: 14px; }

	body.pv2about .ab-cta { padding: 22px 26px; }
	/* fig-tight used to cap two cards at a 400px figure track - the 4:3
	   TwitchCon photo, which would have stood 420px tall, and the 2014 panel
	   screenshot, which is only 400px native. Ryan wants the figure column to
	   match in height and width all the way down, and the uniform 1.35 crop
	   already fixes the tall-photo half. The 2014 shot is therefore displayed
	   about 1.4x its native width and is a little soft; there is no
	   higher-resolution copy of it anywhere in the tree. */
}

/* ============================================================
   Below ~760px a 250px aside leaves the prose column too narrow to
   read, so the card body collapses to one column and the year marker
   stops hanging in a 78px gutter it can no longer afford. The rail,
   the markers and the card chrome are unchanged - the layout narrows,
   it does not become a different design.
   ============================================================ */
@media only screen and (max-width: 760px) {
	body.pv2about { --ab-gutter: 26px; }
	body.pv2about .ab { padding-top: 24px; }
	body.pv2about .ab-cbody { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	/* Collapsing the template to one column is only half of it: the desktop
	   rules place the prose at `grid-column: 1` and the figure at
	   `grid-column: 2` EXPLICITLY, and an explicit placement outlives a
	   template change. Left alone, the figure lands in an implicit second
	   column, the tracks overflow the card, `minmax(0, 1fr)` resolves the
	   prose to its 0 minimum, and every body paragraph on the page renders
	   one character wide. That was live - measured on production at 390px:
	   `grid-template-columns: 0px 294px`. Reset the placement here and let
	   auto-flow + `order` do the stacking. */
	body.pv2about .ab-main,
	body.pv2about .ab-fig { grid-column: 1; grid-row: auto; }
	/* photograph first on a narrow card - it is the card's hook, and a
	   figure stranded under a chip grid reads as an afterthought. Capped
	   so a 1.4:1 screenshot cannot eat 440px of a tablet's scroll. */
	body.pv2about .ab-fig { order: -1; max-width: 480px; }
	/* the 480px cap is there so one 1.4:1 screenshot cannot eat 440px of a
	   tablet's scroll. The hero's gallery is three shots inside one figure,
	   and the pal cards stop being readable long before 480px, so it keeps
	   the card's full width and drops its lead to a full-width row. */
	body.pv2about .ab-card.ab-hero .ab-fig { max-width: none; }
	body.pv2about .ab-galgrid { grid-template-columns: 1fr 1fr; }
	body.pv2about .ab-gal-lead { grid-column: 1 / -1; grid-row: auto; height: auto; aspect-ratio: 1.3515; }
	body.pv2about .ab-line:before { left: 7px; width: 1px; }
	body.pv2about .ab-item { margin-bottom: 22px; }
	body.pv2about .ab-item:after { display: none; }
	body.pv2about .ab-mark {
		position: static; display: block;
		margin: 0 0 9px calc(var(--ab-gutter) * -1);
	}
}

/* phone comfort: one-per-row controls and full-width taps */
@media only screen and (max-width: 560px) {


	body.pv2about .ab-cbody { padding: 14px; }
	body.pv2about .ab-num { flex: 1 1 100%; max-width: none; }
	body.pv2about .ab-cta { margin-top: 32px; padding: 18px; }
	body.pv2about .ab a.ab-btn { width: 100%; height: 44px; }
	/* the pills stay a wrapping row on a phone - they are the one block
	   on the card that must NOT go full-width-per-item, because the size
	   ramp IS the content. One pill per line would erase it. */
	body.pv2about .ab-pills { padding-top: 12px; }
	body.pv2about .ab-plist { gap: 7px; }
	body.pv2about .ab-plist .p-xl { height: 32px; padding: 0 12px 0 4px; gap: 8px; font-size: 13px; }
	body.pv2about .ab-plist .p-xl img { width: 23px; height: 23px; }
	body.pv2about .ab-plist .p-lg { height: 29px; padding: 0 11px 0 4px; gap: 7px; font-size: 12.5px; }
	body.pv2about .ab-plist .p-lg img { width: 20px; height: 20px; }
	body.pv2about .ab-plist .p-md { height: 26px; padding: 0 10px 0 4px; gap: 6px; font-size: 11.5px; }
	body.pv2about .ab-plist .p-md img { width: 18px; height: 18px; }
	body.pv2about .ab-plist .p-sm { height: 23px; padding: 0 9px; font-size: 11px; }
}

@media only screen and (max-width: 430px) {
	body.pv2about { --ab-gutter: 22px; }
	body.pv2about section.page-title h2 { font-size: 22px; }
	body.pv2about .ab-title { font-size: 14.5px; }
	body.pv2about .ab-mark span { padding: 0 11px; font-size: 11.5px; }
}

/* touch floors — width queries miss coarse-pointer tablets */
@media (hover: none) {
}

/* the open-source stat is the one tile that goes somewhere, so it reads as a
   link on hover without becoming a button in a row of plain figures */
body.pv2about .ab-num-link { text-decoration: none; transition: border-color .14s ease, background .14s ease; }
body.pv2about .ab-num-link:hover { border-color: var(--pv2-gold, #eaa824); background: rgba(234,168,36,.06); text-decoration: none; }
body.pv2about .ab-num-link:hover span { color: var(--pv2-gold, #eaa824); }