/* About Us pages: Who We Are (articles.who_we_are) and Our Team
   (categories.team). Everything is scoped under .ab-page; the site's own
   header, footer and stylesheets are untouched.

   Direction: institutional editorial in the park's own colours. Cedar is the
   band the site header and footer already use, pine its accent, sage the
   tree in the logo. Source Sans Pro (the site's face) carries the text;
   Barlow Condensed, set in capitals like the TECHNO PARK wordmark, carries
   the display lines.

   These pages render outside #all_body on purpose, so custom_new.css's
   "#all_body * { font-size: 22px !important }" never reaches them.

   Motion is modelled on the QSTP leadership page: the title is unmasked on
   load, sections and cards fade up as they scroll in, portraits come into
   colour under the pointer, a tab change brings its cards in one after
   another, and a biography slides in from the side. Curves and durations
   are the house ones (animate skill); transform and opacity only. */

.ab-page {
	--ab-cedar: #283b3c;
	--ab-cedar-deep: #1f2f30;
	--ab-pine: #2c6e6b;
	--ab-pine-dark: #22524f;
	--ab-sage: #93bdb6;
	--ab-ink: #1b2625;
	--ab-text: #34403f;
	--ab-slate: #56635f;
	--ab-line: #d9e3e0;
	--ab-mist: #eef3f1;
	--ab-on-dark: rgba(255, 255, 255, .8);
	--ab-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
	--ab-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ab-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ab-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

	color: var(--ab-ink);
	font-size: 18px;
	line-height: 1.65;
	background: #fff;
}
.ab-page *, .ab-page *::before, .ab-page *::after { box-sizing: border-box; }
.ab-page p { margin: 0 0 1em; }
.ab-page a { text-decoration: none; }
.ab-page :focus-visible { outline: 3px solid #4d9b97; outline-offset: 3px; }
.ab-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The display voice: condensed capitals. Section headings in the CMS
   bodies (Our Story, Governance Overview...) get it too. */
.ab-display,
.ab-story h2, .ab-vm h2, .tm-intro-text h2 {
	font-family: var(--ab-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0;
	line-height: .95;
	color: var(--ab-ink);
	text-wrap: balance;
}

/* ---------- page head ----------
   The site header is position:absolute, 90px tall, over whatever comes
   first, and nothing reserves that space, so the head pads for it. */
.ab-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ab-cedar); color: #fff;
	padding: 150px 0 80px; }
.ab-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ab-hero--photo { display: flex; align-items: flex-end; min-height: min(88svh, 860px); padding-bottom: 96px; }
.ab-hero--photo .ab-hero-inner { width: 100%; }
.ab-hero--photo::before { content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(0deg, rgba(31, 47, 48, .97) 0%, rgba(31, 47, 48, .78) 38%, rgba(31, 47, 48, .25) 78%, rgba(31, 47, 48, .45) 100%),
		linear-gradient(90deg, rgba(31, 47, 48, .55) 0%, rgba(31, 47, 48, 0) 70%); }
.ab-crumb { font-size: 14px; color: var(--ab-on-dark); margin: 0 0 40px; }
.ab-crumb a, .ab-crumb .stext { color: var(--ab-on-dark); }
.ab-crumb a:hover { color: #fff; }
.ab-hero--photo .ab-crumb { position: absolute; top: 120px; }

/* The title sits in a mask and rises into it on load. */
.ab-title { font-family: var(--ab-display); font-weight: 700; text-transform: uppercase;
	font-size: clamp(64px, 11vw, 168px); line-height: .86; letter-spacing: -.005em;
	color: #fff; margin: 0; overflow: hidden; padding-bottom: .04em; }
.ab-title-line { display: block; }
.ab-lede { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.55; color: var(--ab-on-dark);
	max-width: 46ch; margin: 36px 0 0; text-wrap: pretty; }
.ab-lede::before { content: ""; display: block; width: 72px; height: 3px; background: var(--ab-sage); margin-bottom: 28px; }

@media (prefers-reduced-motion: no-preference) {
	.ab-title-line { animation: ab-unmask .9s var(--ab-ease-out) both; }
	.ab-lede, .ab-crumb, .tm-faces { animation: ab-rise .7s var(--ab-ease-out) both; }
	.ab-lede { animation-delay: .25s; }
	.tm-faces { animation-delay: .35s; }
	.ab-hero-photo { animation: ab-settle 1.8s var(--ab-ease-out) both; }
}
@keyframes ab-unmask { from { transform: translateY(105%); } }
@keyframes ab-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes ab-settle { from { transform: scale(1.08); } }
@keyframes ab-fade { from { opacity: 0; } }

@media (max-width: 767px) {
	.ab-hero { padding: 120px 0 56px; }
	.ab-hero--photo { min-height: 78svh; padding-bottom: 56px; }
	.ab-hero--photo .ab-crumb { top: 104px; }
	.ab-lede { margin-top: 24px; }
	.ab-lede::before { margin-bottom: 20px; }
}

/* ---------- Who We Are: the story (CMS body) ---------- */
.ab-body { padding: 112px 0 0; }
.ab-story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: start; }
.ab-story h2 { font-size: clamp(44px, 5vw, 72px); margin: 0 0 32px; }
.ab-story p { color: var(--ab-text); max-width: 680px; }
.ab-story h2 + p { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.5; color: var(--ab-ink); margin-bottom: 1.1em; }
.ab-story-media { margin: 0; }
.ab-video { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--ab-cedar);
	box-shadow: 0 2px 4px rgba(31, 47, 48, .08), 0 30px 60px -24px rgba(31, 47, 48, .45); }
.ab-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* The film card steps up over the edge of the photo above it. */
@media (min-width: 992px) {
	.ab-page--who .ab-hero--photo + .ab-body .ab-story-media { position: sticky; top: 32px; z-index: 2; margin-top: -232px; }
}
@media (max-width: 991px) {
	.ab-body { padding-top: 72px; }
	.ab-story { grid-template-columns: 1fr; gap: 40px; }
}

/* The pull quote breaks out to the full width of the window: border-image
   paints the band outside the box without widening the page, so nothing
   scrolls sideways. */
.ab-quote { position: relative; margin: 128px 0 0; padding: 120px 0 112px;
	border-image: linear-gradient(var(--ab-cedar-deep), var(--ab-cedar-deep)) fill 0 / 0 / 0 100vmax; color: #fff; }
.ab-quote::before { content: ""; display: block; width: 72px; height: 3px; background: var(--ab-sage); margin-bottom: 40px; }
.ab-quote p { font-family: var(--ab-display); font-weight: 500; font-size: clamp(36px, 4.6vw, 68px); line-height: 1.04;
	color: #fff; max-width: 24ch; margin: 0; text-wrap: balance; }

.ab-vm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 112px 0 120px; }
.ab-vm-item { padding-inline-end: 64px; }
.ab-vm-item + .ab-vm-item { padding-inline: 64px 0; border-inline-start: 1px solid var(--ab-line); }
.ab-vm h2 { font-size: clamp(40px, 4vw, 56px); color: var(--ab-pine); margin: 0 0 24px; }
.ab-vm p { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.5; color: var(--ab-ink); margin: 0; max-width: 36ch; }
@media (max-width: 767px) {
	.ab-quote { margin-top: 88px; padding: 80px 0 72px; }
	.ab-vm { grid-template-columns: 1fr; padding: 72px 0 80px; }
	.ab-vm-item { padding: 0 0 40px; }
	.ab-vm-item + .ab-vm-item { padding: 40px 0 0; border-inline-start: 0; border-top: 1px solid var(--ab-line); }
}

/* ---------- section heads (Focus Areas) ---------- */
.ab-section-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 80px;
	align-items: end; margin-bottom: 56px; }
.ab-section-head h2 { font-size: clamp(48px, 6vw, 88px); margin: 0; }
.ab-section-lede { color: var(--ab-slate); font-size: 19px; max-width: 52ch; }
.ab-section-lede p:last-child { margin: 0; }
@media (max-width: 767px) { .ab-section-head { grid-template-columns: 1fr; margin-bottom: 36px; } }

/* ---------- Who We Are: focus areas (category 109) ----------
   Five areas sit as two wide cards over three; any other count falls back
   to an even grid. */
.ab-focus { padding: 120px 0 128px; background: var(--ab-mist); scroll-margin-top: 24px; }
.ab-focus-list { list-style: none; margin: 0; padding: 0; display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.ab-focus-list > li { grid-column: span 2; display: flex; }
.ab-focus-list:has(> :nth-child(5):last-child) > :nth-child(-n+2),
.ab-focus-list:has(> :nth-child(4):last-child) > *,
.ab-focus-list:has(> :nth-child(2):last-child) > * { grid-column: span 3; }
.ab-focus-card { position: relative; display: flex; flex-direction: column; width: 100%; min-height: 300px;
	padding: 36px 36px 32px; background: #fff; border-radius: 4px; color: var(--ab-ink); overflow: hidden;
	transition: transform .35s var(--ab-ease-out); }
/* A pine bar draws across the top of the card under the pointer. */
.ab-focus-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--ab-pine);
	transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ab-ease-out); }
.ab-focus-ico { width: 56px; height: 56px; object-fit: contain; margin-bottom: 40px; }
.ab-focus-name { font-family: var(--ab-display); font-weight: 600; text-transform: uppercase; font-size: clamp(30px, 2.4vw, 38px);
	line-height: 1; color: var(--ab-ink); margin: 0 0 14px; text-wrap: balance; }
.ab-focus-list > li:nth-child(-n+2) .ab-focus-name { font-size: clamp(32px, 2.9vw, 46px); }
.ab-focus-sum { color: var(--ab-slate); font-size: 17px; line-height: 1.55; margin: 0 0 28px; max-width: 40ch; }
.ab-focus-go { margin-top: auto; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid #bfd0cc;
	display: grid; place-items: center; color: var(--ab-pine);
	transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.ab-focus-go svg { width: 18px; height: 18px; transition: transform .3s var(--ab-ease-out); }
.ab-focus-card:focus-visible .ab-focus-go { background: var(--ab-pine); border-color: var(--ab-pine); color: #fff; }
@media (hover: hover) and (pointer: fine) {
	.ab-focus-card:hover { transform: translateY(-4px); }
	.ab-focus-card:hover::before { transform: scaleX(1); }
	.ab-focus-card:hover .ab-focus-go { background: var(--ab-pine); border-color: var(--ab-pine); color: #fff; }
	.ab-focus-card:hover .ab-focus-go svg { transform: translateX(3px); }
}
.ab-focus-card:active { transform: translateY(-1px); }
@media (max-width: 991px) {
	.ab-focus-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ab-focus-list > li, .ab-focus-list:has(> :nth-child(5):last-child) > :nth-child(-n+2),
	.ab-focus-list:has(> :nth-child(4):last-child) > *, .ab-focus-list:has(> :nth-child(2):last-child) > * { grid-column: auto; }
	.ab-focus-list > li:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
	.ab-focus { padding: 72px 0 80px; }
	.ab-focus-list { grid-template-columns: 1fr; gap: 12px; }
	.ab-focus-card { min-height: 0; padding: 28px 24px 24px; }
	.ab-focus-ico { width: 48px; height: 48px; margin-bottom: 24px; }
	.ab-focus-go { width: 44px; height: 44px; }
}

/* ---------- Who We Are: the way on to Our Team ---------- */
.ab-next { background: var(--ab-cedar); color: #fff; }
.ab-next-link { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; gap: 24px 80px; align-items: center;
	padding: 96px 0; color: #fff; }
.ab-next-name { font-size: clamp(56px, 8vw, 120px); color: #fff; line-height: .9; }
.ab-next-lede { color: var(--ab-on-dark); font-size: 20px; line-height: 1.55; max-width: 40ch; }
.ab-next-go { width: 72px; height: 72px; border-radius: 50%; border: 1.5px solid rgba(147, 189, 182, .6);
	display: grid; place-items: center; color: var(--ab-sage);
	transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.ab-next-go svg { width: 26px; height: 26px; transition: transform .3s var(--ab-ease-out); }
.ab-next-link:hover .ab-next-go, .ab-next-link:focus-visible .ab-next-go { background: var(--ab-sage); border-color: var(--ab-sage); color: var(--ab-cedar); }
@media (hover: hover) and (pointer: fine) { .ab-next-link:hover .ab-next-go svg { transform: translateX(4px); } }
@media (max-width: 767px) {
	.ab-next-link { grid-template-columns: 1fr auto; padding: 64px 0; gap: 16px 24px; }
	.ab-next-lede { grid-column: 1 / -1; grid-row: 2; font-size: 18px; }
	.ab-next-go { width: 56px; height: 56px; }
}

/* ---------- Our Team: page head with the faces ---------- */
.ab-hero--team { padding-bottom: 96px; }
.ab-hero-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 64px; align-items: end; }
.tm-faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-self: center; }
.tm-faces img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%;
	border-radius: 3px; filter: grayscale(1) contrast(1.05); opacity: .78; }
/* Every other column steps down, so the strip reads as people, not a table. */
.tm-faces img:nth-child(even) { transform: translateY(28px); }
.tm-faces img:nth-child(n+9) { display: none; }
@media (max-width: 991px) {
	.ab-hero-split { grid-template-columns: 1fr; }
	.tm-faces { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; padding-bottom: 20px; }
	.tm-faces img:nth-child(even) { transform: translateY(14px); }
}
@media (max-width: 575px) {
	.ab-hero--team { padding-bottom: 64px; }
	.tm-faces { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.tm-faces img:nth-child(n+5) { display: none; }
}

/* ---------- Our Team: governance overview (category description) ---------- */
.tm-intro { padding: 112px 0 40px; }
.tm-intro-text { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 80px; }
.tm-intro-text > * { grid-column: 2; }
.tm-intro-text > h2 { grid-column: 1; font-size: clamp(44px, 5vw, 72px); margin: 0 0 24px; }
.tm-intro-text p { color: var(--ab-text); max-width: 64ch; }
.tm-intro-text h2 + p { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.5; color: var(--ab-ink); }
.tm-founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 32px 0 36px; }
.tm-founder { background: var(--ab-mist); border-radius: 4px; padding: 32px 32px 12px; }
.tm-founder h3 { font-family: var(--ab-display); font-weight: 600; text-transform: uppercase; font-size: 34px; line-height: 1;
	color: var(--ab-pine); margin: 0 0 16px; }
.tm-founder p { font-size: 16.5px; color: var(--ab-text); }
@media (max-width: 1199px) {
	.tm-intro-text { grid-template-columns: 1fr; }
	.tm-intro-text > *, .tm-intro-text > h2 { grid-column: 1; }
}
@media (max-width: 767px) {
	.tm-intro { padding-top: 72px; }
	.tm-founders { grid-template-columns: 1fr; }
	.tm-founder { padding: 26px 24px 8px; }
}

/* ---------- Our Team: the group tabs ----------
   The bar sticks to the top of the window while the groups scroll under
   it. On a phone it scrolls sideways rather than wrapping. */
.tm-groups { padding: 48px 0 128px; }
.tm-tabbar { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--ab-line); margin-bottom: 72px; }
.tm-tabs { position: relative; display: flex; gap: 40px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.tm-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 991px) {
	/* Tabs past the edge fade out, so the row reads as one that scrolls. */
	.tm-tabs { padding-inline-end: 40px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
}
/* One weight for every state: a bolder selected tab would be wider and
   would shift the row. */
.tm-tab { flex: none; display: inline-flex; align-items: baseline; gap: 8px; padding: 24px 0 22px;
	font-size: 17px; font-weight: 600; color: var(--ab-slate); white-space: nowrap;
	border-bottom: 3px solid transparent; transition: color .2s ease; }
.tm-tab:hover { color: var(--ab-ink); }
.tm-tab-count { font-size: 13px; font-weight: 600; color: var(--ab-pine); font-variant-numeric: tabular-nums; }
.tm-tab[aria-selected="true"] { color: var(--ab-ink); }
/* With the script the selected tab is marked by one bar that slides between
   tabs; without it there is no selection to mark. */
.tm-tab-ind { position: absolute; left: 0; bottom: 0; width: 1px; height: 3px; background: var(--ab-pine);
	transform-origin: left center; opacity: 0; pointer-events: none; }
.tm-tabbed .tm-tab-ind { opacity: 1; }
.tm-tab-ind.is-moving { transition: transform .35s var(--ab-ease-in-out); }

/* ---------- Our Team: a group ---------- */
.tm-group + .tm-group { margin-top: 112px; }
.tm-tabbed .tm-group + .tm-group { margin-top: 0; }
.tm-group-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px 80px; align-items: end;
	margin-bottom: 56px; scroll-margin-top: 96px; }
.tm-group-title { font-size: clamp(44px, 5.4vw, 80px); margin: 0; }
.tm-group-intro { color: var(--ab-slate); font-size: 18px; max-width: 56ch; }
.tm-group-intro p:last-child { margin: 0; }
@media (max-width: 767px) {
	.tm-tabbar { margin-bottom: 48px; }
	.tm-tabs { gap: 28px; }
	.tm-tab { padding: 18px 0 16px; font-size: 16px; }
	.tm-group-head { grid-template-columns: 1fr; margin-bottom: 36px; }
	.tm-group + .tm-group { margin-top: 80px; }
}

/* ---------- Our Team: the cards ----------
   Four across, as on the reference; three, then two on narrower screens;
   on a phone each person is a row, portrait beside name. */
.tm-grid { list-style: none; margin: 0; padding: 0; display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 64px 32px; }
@media (max-width: 1199px) { .tm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 28px; } }
@media (max-width: 899px) { .tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 20px; } }

.tm-card { position: relative; }
.tm-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden; background: var(--ab-mist); margin-bottom: 20px; }
.tm-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block;
	transition: transform .6s var(--ab-ease-out); }
/* The portraits came from many sources and backgrounds. On a pointer
   device they rest in one cedar tone and come into colour under the
   pointer; on touch they are always in colour. */
.tm-photo::after { content: ""; position: absolute; inset: 0; background: var(--ab-cedar); mix-blend-mode: color;
	opacity: 0; transition: opacity .4s ease; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
	.tm-photo::after { opacity: .92; }
	.tm-card:hover .tm-photo::after, .tm-card:focus-within .tm-photo::after { opacity: 0; }
	.tm-card:hover .tm-photo img { transform: scale(1.04); }
	.tm-card--bio:hover .tm-name { color: var(--ab-pine); }
	.tm-card--bio:hover .tm-more::after { transform: translateX(4px); }
}
.tm-initials { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ab-cedar);
	color: var(--ab-sage); font-family: var(--ab-display); font-weight: 600; font-size: clamp(48px, 6vw, 88px); letter-spacing: .02em; }
.tm-name { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--ab-ink); margin: 0 0 6px; transition: color .2s ease; }
.tm-role { font-size: 15.5px; line-height: 1.45; color: var(--ab-slate); margin: 0; }

/* A card with a biography opens it. The name is the button; its ::after
   makes the whole card the hit area, the contact links sit above it. */
.tm-open { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
	text-align: start; cursor: pointer; }
.tm-open::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 3px; }
.tm-open:focus-visible { outline: none; }
.tm-open:focus-visible::after { outline: 3px solid #4d9b97; outline-offset: 6px; }
.tm-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14.5px; font-weight: 700; color: var(--ab-pine); }
.tm-more::after { content: ""; width: 14px; height: 2px; background: currentColor; transition: transform .3s var(--ab-ease-out); }

.tm-links { display: flex; gap: 4px; margin: 12px 0 0 -10px; position: relative; z-index: 2; }
.tm-links a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #4a5b5c;
	transition: background-color .2s ease, color .2s ease; }
.tm-links a:hover { background: var(--ab-mist); color: var(--ab-pine); }
.tm-links svg { width: 19px; height: 19px; }

@media (max-width: 559px) {
	.tm-grid { grid-template-columns: 1fr; gap: 0; }
	.tm-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: start;
		padding: 18px 0; border-bottom: 1px solid var(--ab-line); }
	.tm-card:first-child { border-top: 1px solid var(--ab-line); }
	.tm-photo { margin: 0; }
	.tm-meta { padding-top: 4px; }
	.tm-name { font-size: 18px; }
	.tm-role { font-size: 15px; }
	.tm-initials { font-size: 36px; }
	.tm-more { margin-top: 10px; }
	.tm-links { margin-top: 6px; }
}

/* ---------- scroll entrance ----------
   Only things that start below the fold are hidden, and only once the
   script has run, so nothing is ever invisible without it. */
@media (prefers-reduced-motion: no-preference) {
	.ab-pending { opacity: 0; transform: translateY(24px); }
	.ab-shown { transition: opacity .6s var(--ab-ease-out), transform .6s var(--ab-ease-out); }
	.tm-tabbed .tm-group:not([hidden]) .tm-group-head { animation: ab-rise .45s var(--ab-ease-out) both; }
}

/* ---------- the biography: a panel that slides in from the side ---------- */
.tm-bio { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(640px, 100vw); max-width: 100vw;
	height: 100dvh; max-height: 100dvh; padding: 0; border: 0; color: var(--ab-ink); background: #fff;
	overflow-y: auto; overscroll-behavior: contain; box-shadow: -30px 0 80px rgba(20, 35, 35, .28); }
.tm-bio::backdrop { background: rgba(24, 37, 38, .6); }
.tm-bio-bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; padding: 16px 16px 0; }
.tm-bio-close { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--ab-mist); color: var(--ab-ink);
	display: grid; place-items: center; cursor: pointer; transition: background-color .15s ease, transform .15s var(--ab-ease-out); }
.tm-bio-close:hover { background: #dfe9e6; }
.tm-bio-close:active { transform: scale(.96); }
.tm-bio-close svg { width: 20px; height: 20px; }
.tm-bio-head { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 28px; align-items: end;
	padding: 8px 48px 32px; border-bottom: 1px solid var(--ab-line); }
.tm-bio-head:not(:has(.tm-bio-photo)) { grid-template-columns: 1fr; }
.tm-bio-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 3px; }
.tm-bio-group { font-size: 15px; font-weight: 600; color: var(--ab-pine); margin: 0 0 10px; }
.tm-bio-name { font-size: clamp(40px, 5vw, 56px); margin: 0 0 12px; }
.tm-bio-role { font-size: 18px; color: var(--ab-slate); margin: 0; }
.tm-bio .tm-links { margin-top: 14px; }
.tm-bio-body { padding: 32px 48px 56px; font-size: 18px; line-height: 1.7; color: var(--ab-text); }
@media (max-width: 599px) {
	.tm-bio-head { grid-template-columns: 112px minmax(0, 1fr); gap: 18px; padding: 4px 22px 24px; }
	.tm-bio-body { padding: 24px 22px 40px; font-size: 17px; }
}
@media (prefers-reduced-motion: no-preference) {
	.tm-bio[open] { animation: tm-slide-in .45s var(--ab-ease-drawer); }
	.tm-bio.is-closing { animation: tm-slide-out .3s var(--ab-ease-drawer) forwards; }
}
@media (prefers-reduced-motion: reduce) {
	.tm-bio[open] { animation: ab-fade .2s ease-out; }
	.tm-bio.is-closing { animation: ab-fade .15s ease-out reverse forwards; }
}
.tm-bio[open]::backdrop { animation: ab-fade .3s ease-out; }
.tm-bio.is-closing::backdrop { animation: ab-fade .3s ease-out reverse forwards; }
@keyframes tm-slide-in { from { transform: translateX(100%); } }
@keyframes tm-slide-out { to { transform: translateX(100%); } }
/* Keep the scrollbar's space while the page is locked, so nothing shifts. */
html.tm-locked { overflow: hidden; scrollbar-gutter: stable; }