@charset "UTF-8";
/**
 * Catcha 2026 — the Overview timeline ("A new chapter")
 *
 * The investor-day deck's structure — a card per era sitting on a chevron,
 * the chevrons forming one arrow closed by an arrowhead, driven sideways by
 * the page scroll — rebuilt in the site's own palette and geometry.
 *
 * The deck's navy ground (#080D1A) and its blue furniture (#101829,
 * #1B2540, #242F4A) are gone. They were a second, unrelated colour system:
 * a cool blue-black dropped into a warm off-white site, so the section read
 * as a foreign object rather than as a page of it. Nothing here introduces
 * a colour — every value is an existing token, and red is the only accent,
 * as everywhere else on the site.
 *
 * Geometry follows the house style with it: square, hairline-ruled and
 * without hover lifts. The single exception is the shadow marking the
 * leading card, reasoned about where it is set. The one thing kept from the deck's
 * decoration is the chevron, because the arrow is the idea — it is what
 * makes the row read as a direction of travel rather than as a set of
 * tiles.
 *
 * Paired with assets/record.js, which functions.php loads on Overview only.
 *
 * One slice of the stylesheet. Load order and what lives where:
 * docs/MAP.md at the repo root.
 */

/* =====================================================================
 * 29  OVERVIEW — THE RECORD (scroll-driven timeline)
 * ================================================================== */
/* The `main > section.section--record` half of this selector is
   load-bearing, not belt-and-braces. 02-base.css bands every page with
   `main > section:nth-of-type(odd) { background: var(--ground) }` at
   specificity 0-1-2, which outranks a lone `.section--record` at 0-1-0.
   The band happens to be `--ground` here already, but the edge fades below
   gradient *to* this exact colour, so it is pinned rather than left to
   depend on where the section sits in the page order. */
main > section.section--record,
.section--record {
	--rec-chev:      var(--tint-deep);      /* the arrow at rest */
	--rec-chev-hover: var(--tint-deepest);
	--rec-ground:    var(--ground);

	position: relative;
	padding-block: clamp(56px, 6vw, 92px) clamp(40px, 4.5vw, 72px);
	background: var(--rec-ground);
}

.record__head {
	max-width: 62ch;
	margin-bottom: clamp(28px, 3.4vw, 44px);
}
.record__head h2 {
	font-family: var(--serif);
	font-size: var(--fs-d2);
	font-weight: 600;
	line-height: 1.06;
	color: var(--ink);
	margin: 0;
}
.record__head p {
	margin: 18px 0 0;
	font-size: var(--fs-lede);
	line-height: 1.62;
	color: var(--ink-2);
}

/* ── The pin ─────────────────────────────────────────────────────────
 * This block stays put while the page scrolls past it, and that scroll
 * distance is what drives the arrow left to right. The outer element's
 * height is set by record.js: one viewport, plus the horizontal distance
 * the track has to cover.
 *
 * `position: sticky` needs neither `html` nor `body` to be a scroll
 * container. Both set `overflow-x: hidden` followed by `overflow-x: clip`
 * in 02-base.css for exactly this reason — `hidden` resolves `overflow-y`
 * to `auto` and would silently unpin this section.
 * ------------------------------------------------------------------ */
.record__outer { position: relative; }

/* The stage is only as tall as what is in it. The deck pins a full
   `height: 100vh` box and centres its contents inside, which reserves a
   whole viewport whether or not the stage needs one — so the heading was
   followed by several hundred pixels of nothing before the track began.
   An auto-height sticky element holds just as well, and `top` parks it
   clear of the fixed masthead instead of behind it. */
.record__pin {
	position: sticky;
	top: clamp(76px, 9vh, 98px);
	padding-bottom: clamp(28px, 3vw, 44px);
}

/* No script, or no room to pin: an ordinary scroller, arrows doing the work. */
.record:not(.is-pinned) .record__outer { height: auto !important; }
.record:not(.is-pinned) .record__pin {
	position: static;
	padding-bottom: clamp(52px, 6vw, 84px);
}
.record:not(.is-pinned) .record__viewport {
	overflow-x: auto;
	scroll-snap-type: x proximity;
}
.record:not(.is-pinned) .year { scroll-snap-align: start; }

/* ── The bar above the track ─────────────────────────────────────── */
.record__bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
	margin-bottom: 22px;
}
.record__nav { display: flex; gap: 8px; }
.record__btn {
	width: 42px; height: 42px;
	display: grid;
	place-items: center;
	padding: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink-2);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
	            border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.record__btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.record__btn:disabled { opacity: 0.3; cursor: default; }
.record__btn svg { width: 16px; height: 16px; }

/* ── The track ───────────────────────────────────────────────────────
 * Soft fades at either edge say there is more that way; they lift once
 * the track reaches that end.
 * ------------------------------------------------------------------ */
.record__frame { position: relative; }
.record__frame::before,
.record__frame::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: 48px;
	pointer-events: none;
	z-index: 5;
	opacity: 1;
	transition: opacity 0.25s var(--ease);
}
.record__frame::before { left: 0;  background: linear-gradient(90deg, var(--rec-ground), transparent); }
.record__frame::after  { right: 0; background: linear-gradient(270deg, var(--rec-ground), transparent); }
.record__frame.at-start::before { opacity: 0; }
.record__frame.at-end::after { opacity: 0; }

.record__viewport {
	overflow: hidden;               /* the page scroll sets the position */
	scrollbar-width: none;
}
.record__viewport::-webkit-scrollbar { display: none; }

.record__track {
	display: flex;
	align-items: flex-end;
	list-style: none;
	margin: 0;
	padding: 0;
}

.year {
	flex: 0 0 auto;
	width: 318px;
	padding-right: 1px;             /* the hairline between two cards */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.year--wide { width: 592px; }

/* Every card is white, at rest and in the lead. Filling the leading card
   with `--tint` was tried and read as a mistake rather than as a state:
   `--tint` (#F1ECE9) sits four points off the `--ground` (#F8F6F5) it is
   seen against, so the card looked like it had lost its background rather
   than gained emphasis.
 *
 * A shadow marks it instead. The house style is shadowless — this is the
 * one exception, and it is deliberate: on a page where nothing else casts
 * one, a slight lift is unmissable at a glance while changing no colour
 * and costing no contrast. Kept to a soft, close shadow rather than a
 * float; the card lifts off the page, it does not hover above it.
 * Scoped to `.year`: bare `.card` also matched the Press & News cards and
 * gave them this border, margin and padding on top of their own. */
.year .card {
	background: var(--surface);
	border: 1px solid var(--line);
	padding: 24px 22px 26px;
	margin-bottom: 14px;
	transition: border-color 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.year.is-active .card {
	border-color: var(--line-firm);
	box-shadow: 0 1px 2px rgba(43, 22, 27, 0.07), 0 10px 26px -14px rgba(43, 22, 27, 0.42);
}

.card__tag {
	font-family: var(--label);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 12px;
}
.card__headline {
	font-family: var(--serif);
	font-size: 17.5px;
	font-weight: 600;
	line-height: 1.34;
	color: var(--ink);
	margin: 0 0 20px;
}

/* Each mark is its own closed box with a gap between, rather than cells in
   one ruled matrix sharing a container border.
 *
 * The shared-border version drew the container's top and left rules across
 * the full three columns, so any era with one or two marks — 2013, 2014,
 * 2017 — hung a hairline out across the empty rest of the row, pointing at
 * nothing. Self-contained tiles cannot do that: an incomplete row simply
 * ends where its marks end. */
.logos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	justify-items: start;
	margin-bottom: 18px;
}
.year--wide .logos { grid-template-columns: repeat(5, 1fr); }

.logo {
	appearance: none;
	cursor: pointer;
	background: var(--surface);
	border: 1px solid var(--line);
	padding: 9px;
	width: 100%;
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--dur) var(--ease);
}
.logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	pointer-events: none;
	opacity: 0.92;
	transition: opacity var(--dur) var(--ease);
}
.logo:hover img, .logo.is-open img { opacity: 1; }

/* The four 2011 magazine titles are portrait cover scans, not wordmarks.
   Letterboxed into the same box as a wide logo they shrink to nothing, so
   they are given the full cell height and the padding comes off. */
.logo--tall { padding: 4px; }
.logo--tall img { height: 100%; max-height: none; width: auto; }

.card__notes { list-style: none; margin: 0; padding: 0; }
.card__notes li {
	position: relative;
	padding: 0 0 8px 16px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ink-2);
}
.card__notes li::before {
	content: "";
	position: absolute;
	left: 0; top: 10px;
	width: 7px; height: 1px;
	background: var(--accent);
}

/* ── The arrow ───────────────────────────────────────────────────────
 * Each year sits on a chevron; together they form one arrow running left
 * to right, closed by an arrowhead after the final card. This is the one
 * piece of the deck's decoration kept, because the arrow is the idea.
 * ------------------------------------------------------------------ */
.axis {
	position: relative;
	height: 44px;
}
.axis__chev {
	position: relative;
	width: 100%;
	height: 44px;
	cursor: pointer;
	appearance: none;
	border: 0;
	padding: 0 0 0 30px;
	display: flex;
	align-items: center;
	background: var(--rec-chev);
	clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 50%, calc(100% - 17px) 100%, 0 100%, 17px 50%);
	font-family: var(--label);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--ink-2);
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.year:first-child .axis__chev {
	clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 50%, calc(100% - 17px) 100%, 0 100%);
	padding-left: 18px;
}
.axis__chev:hover { background: var(--rec-chev-hover); color: var(--ink); }
.year.is-active .axis__chev { background: var(--accent); color: var(--surface); }

.arrowhead {
	flex: 0 0 auto;
	align-self: flex-end;
	width: 34px; height: 44px;
	position: relative;
	list-style: none;
}
.arrowhead::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--accent);
	clip-path: polygon(0 0, 100% 50%, 0 100%, 17px 50%);
}

.record__progress {
	height: 2px;
	background: var(--line-soft);
	margin-top: 24px;
	overflow: hidden;
}
.record__progress-bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--accent);
	transition: width 0.15s linear;
}

/* ── A logo's detail ─────────────────────────────────────────────── */
.markpop {
	position: fixed;
	z-index: 95;
	max-width: 280px;
	background: var(--surface);
	border: 1px solid var(--line-firm);
	padding: 14px 16px 15px;
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
	transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}
.markpop.is-on { opacity: 1; transform: none; }
.markpop__name {
	display: block;
	font-family: var(--label);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 8px;
}
.markpop__detail {
	display: block;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink-2);
}

/* ── Short viewports ─────────────────────────────────────────────────
 * Whether the section can pin is a question about height, not width: the
 * stage plus its `top` offset has to clear the viewport or record.js
 * falls back to a plain scroller. A 1280×720 laptop missed it by four
 * pixels, so the stage is trimmed wherever the window is short — which is
 * a different axis from the phone rules below, and both can apply at once.
 * ------------------------------------------------------------------ */
@media (max-height: 820px) {
	.record__pin { top: clamp(64px, 8vh, 76px); padding-bottom: 16px; }
	.record__bar { margin-bottom: 14px; }
	.record__progress { margin-top: 16px; }
	.card { padding: 18px 18px 20px; margin-bottom: 12px; }
	.card__headline { margin-bottom: 16px; }
	.logo { height: 60px; }
	.logos { margin-bottom: 14px; }
}

/* ── Small screens ───────────────────────────────────────────────────
 * The pin is only one screen tall, so anything that does not earn its
 * space comes out and the cards narrow.
 * ------------------------------------------------------------------ */
@media (max-width: 720px) {
	.record__head { margin-bottom: 22px; }
	.record__bar { display: none; }        /* scrolling drives it here */
	.record__progress { margin-top: 16px; }
	.record__frame::before, .record__frame::after { display: none; }

	.year { width: 262px; }
	.year--wide { width: 292px; }
	.year--wide .logos { grid-template-columns: repeat(3, 1fr); }
	.card { padding: 18px 16px 20px; }
	.card__headline { font-size: 16.5px; margin-bottom: 16px; }
	.logo { height: 60px; }
}

/* The pin is scroll *position*, not animation, so it keeps working under a
   reduced-motion preference — that setting takes out the decorative easing
   instead. Disabling the pin there was tried first and simply read as a
   broken section. 99-motion-reduced.css kills the transitions site-wide;
   this only stops the colour ramps from looking like a missing state. */
@media (prefers-reduced-motion: reduce) {
	.card, .logo, .axis__chev, .record__btn,
	.record__frame::before, .record__frame::after,
	.record__progress-bar { transition: none !important; }
}

/* The track is not a tab stop, so it never draws the theme's focus ring —
   a 2px accent outline at 3px offset, which around a region this size read
   as a sudden red border across the whole section rather than as a focus
   state. Nothing is lost: the year chevrons are real buttons and already
   take focus one by one, each jumping the page to its era, and under the
   pin the page scroll is what drives the track anyway. */
.record__viewport:focus { outline: none; }