/* Inner pages and category listings for technopark.ps
   ------------------------------------------------------------------
   One system for every page that is not the homepage: the page head with its
   breadcrumb and title, the content surface under it, and the ways a category
   lays out what is filed in it (cards, tiles, rows, albums, photos). The
   direction and the reasons are in DESIGN.md; the template map is in
   docs/INNER-PAGES.md.

   The language is the one Who We Are and Our Team set (about.css): the cedar
   band the header and footer use, pine for actions, sage from the logo's
   tree, Barlow Condensed in capitals for display lines (it echoes the TECHNO
   PARK wordmark) and Source Sans Pro for reading. Tight 4px corners, cards
   that lift with a pine bar drawn across their top, sections that fade up as
   they scroll in.

   Everything is under .tp-inner or a .tp- class, so the homepage and the
   pages that bring their own design (the Diaspora Network, Brain Gain) are
   untouched. Category templates render outside #all_body, so the
   "#all_body * { font-size: 22px !important }" rule in custom_new.css does
   not reach anything here; the article body is article.css's job. */

.tp-inner {
	--tp-band: #283b3c;
	--tp-band-deep: #1f2f30;
	--tp-accent: #2c6e6b;
	--tp-accent-ink: #22524f;
	--tp-sage: #93bdb6;
	--tp-mint: #9ec8bd;
	--tp-ink: #1b2625;
	--tp-navy: #1b2625;
	--tp-body: #34403f;
	--tp-muted: #56635f;
	--tp-line: #d9e3e0;
	--tp-tint: #eef3f1;
	--tp-on-band: rgba(255, 255, 255, .8);
	--tp-radius: 4px;
	--tp-radius-sm: 3px;
	--tp-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
	--tp-shadow: 0 2px 4px rgba(31, 47, 48, .06), 0 24px 48px -24px rgba(31, 47, 48, .38);
	--tp-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

	color: var(--tp-ink);
	font-family: "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	background: #fff;
}
.tp-inner *, .tp-inner *::before, .tp-inner *::after { box-sizing: border-box; }
.tp-inner a { text-decoration: none; }
.tp-inner :focus-visible { outline: 3px solid #4d9b97; outline-offset: 3px; border-radius: 2px; }
.tp-inner img { max-width: 100%; }

/* The display voice: condensed capitals. */
.tp-display, .tp-title, .tp-section-title, .tp-row-title, .tp-album-name, .tp-card--lead .tp-card-title,
.tp-card--tile .tp-card-title, .tp-subcat a {
	font-family: var(--tp-display);
	text-transform: uppercase;
	letter-spacing: 0;
	text-wrap: balance;
}

/* ---------- page head ----------
   The site header is position:absolute, 90px tall, over whatever comes first,
   and nothing reserves that space, so the band pads for it. */
.tp-head { position: relative; isolation: isolate; background: var(--tp-band); color: #fff; padding: 150px 0 72px; overflow: hidden; }
.tp-head::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(70% 120% at 100% 100%, rgba(147, 189, 182, .14), transparent 65%); }
.tp-head-inner { position: relative; }
.tp-head--lift { padding-bottom: 120px; }
.tp-head--figure { padding-bottom: 184px; }
.tp-crumb { font-size: 14px; color: var(--tp-on-band); margin: 0 0 36px; line-height: 1.5; }
.tp-crumb a, .tp-crumb .stext { color: var(--tp-on-band); }
.tp-crumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* The title sits in a mask and rises into it on load. Three sizes, by length,
   so a two-word section name is a poster and a news headline still reads. */
.tp-title { font-weight: 700; font-size: clamp(44px, 11vw, 128px); line-height: .88; letter-spacing: -.005em;
	color: #fff; margin: 0; max-width: 16ch; overflow: hidden; padding-bottom: .05em; }
.tp-title--m { font-size: clamp(38px, 7vw, 88px); line-height: .92; max-width: 22ch; }
.tp-title--l { font-size: clamp(30px, 5vw, 62px); line-height: .98; max-width: 28ch; }
.tp-title-line { display: block; }
.tp-lede { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--tp-on-band); max-width: 52ch; margin: 32px 0 0; text-wrap: pretty; }
.tp-lede::before { content: ""; display: block; width: 72px; height: 3px; background: var(--tp-sage); margin-bottom: 24px; }
.tp-lede p { margin: 0 0 .6em; }
.tp-lede p:last-child { margin-bottom: 0; }
.tp-lede a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.tp-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 24px 0 0; font-size: 15px; font-weight: 600; color: var(--tp-sage); }
.tp-meta span + span { position: relative; }
.tp-meta span + span::before { content: ""; position: absolute; inset-inline-start: -12px; top: 50%;
	width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }

.tp-head-action { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin: 32px 0 0; padding: 10px 22px;
	border-radius: 999px; border: 1.5px solid rgba(147, 189, 182, .6); background: transparent;
	color: #fff; font-weight: 700; font-size: 15px; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.tp-head-action:hover, .tp-head-action:focus-visible { background: var(--tp-sage); border-color: var(--tp-sage); color: var(--tp-band-deep); }
.tp-head-action i { font-size: 18px; }

/* A landscape photograph fills the head, as on Who We Are: the title sits
   over its darkened lower half. InnerPage::headPhotoMode() chooses this only
   for wide photographs; posters and group shots with words on them keep the
   figure below, in their natural shape. */
.tp-head--photo { display: flex; align-items: flex-end; min-height: min(84svh, 820px); padding-bottom: 88px; }
.tp-head--photo .tp-head-inner { width: 100%; }
.tp-head-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.tp-head--photo::before {
	background:
		linear-gradient(0deg, rgba(31, 47, 48, .97) 0%, rgba(31, 47, 48, .8) 34%, rgba(31, 47, 48, .25) 76%, rgba(31, 47, 48, .5) 100%),
		linear-gradient(90deg, rgba(31, 47, 48, .55) 0%, rgba(31, 47, 48, 0) 70%); }
.tp-head--photo .tp-head-inner { position: static; }
.tp-head--photo .tp-crumb { position: absolute; top: 124px; }
.tp-head--article.tp-head--photo { min-height: min(78svh, 760px); }

/* The page photo straddles the band's lower edge. Its natural shape is kept:
   these are group photos and event posters with words on them, and a fixed
   crop cut heads and headlines off. A tall poster is simply shown smaller. */
.tp-figure { position: relative; margin: -136px auto 0; text-align: center; }
.tp-figure img { display: inline-block; width: auto; height: auto; max-width: min(100%, 1040px);
	max-height: min(74vh, 660px); border-radius: var(--tp-radius); background: var(--tp-tint);
	box-shadow: 0 2px 4px rgba(31, 47, 48, .08), 0 30px 60px -30px rgba(31, 47, 48, .45); }

@media (prefers-reduced-motion: no-preference) {
	.tp-title-line { animation: tp-unmask .9s var(--tp-ease-out) both; }
	.tp-crumb, .tp-lede, .tp-meta, .tp-head-action, .tp-search { animation: tp-rise .7s var(--tp-ease-out) both; }
	.tp-lede { animation-delay: .2s; }
	.tp-meta, .tp-search { animation-delay: .28s; }
	.tp-head-action { animation-delay: .34s; }
	.tp-head-photo { animation: tp-settle 1.8s var(--tp-ease-out) both; }
	.tp-figure img { animation: tp-fade .8s var(--tp-ease-out) .15s both; }
}
@keyframes tp-unmask { from { transform: translateY(105%); } }
@keyframes tp-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes tp-settle { from { transform: scale(1.08); } }
@keyframes tp-fade { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 767px) {
	.tp-head { padding: 120px 0 52px; }
	.tp-head--lift { padding-bottom: 84px; }
	.tp-head--figure { padding-bottom: 116px; }
	.tp-head--photo { min-height: 74svh; padding-bottom: 52px; }
	.tp-crumb { margin-bottom: 24px; }
	.tp-head--photo .tp-crumb { top: 104px; }
	.tp-lede { margin-top: 24px; }
	.tp-lede::before { margin-bottom: 18px; }
	.tp-figure { margin-top: -88px; }
	.tp-figure img { max-height: 60vh; }
}

/* ---------- content surface ---------- */
.tp-main { padding: 72px 0 112px; }
.tp-main--tint { background: var(--tp-tint); }
.tp-head--lift + .tp-main { padding-top: 0; }
.tp-head--lift + .tp-main .tp-grid,
.tp-head--lift + .tp-main .tp-photos,
.tp-head--lift + .tp-main .tp-albums { margin-top: -64px; position: relative; }
@media (max-width: 767px) {
	.tp-main { padding: 48px 0 72px; }
	.tp-head--lift + .tp-main .tp-grid,
	.tp-head--lift + .tp-main .tp-photos,
	.tp-head--lift + .tp-main .tp-albums { margin-top: -44px; }
}
.tp-section-title { font-size: clamp(36px, 4.2vw, 60px); font-weight: 600; color: var(--tp-ink); line-height: .95; margin: 0 0 32px; }
.tp-empty { margin: 0; padding: 56px 0; font-size: 19px; color: var(--tp-muted); }

/* A category description too long for the head: set as reading text, with
   its headings in the display voice. */
.tp-prose { max-width: 70ch; font-size: 18px; line-height: 1.7; color: var(--tp-body); }
.tp-prose > :first-child { margin-top: 0; }
.tp-prose p, .tp-prose ul, .tp-prose ol { margin: 0 0 1em; }
.tp-prose li { margin-bottom: .45em; }
.tp-prose strong, .tp-prose b { color: var(--tp-ink); }
.tp-prose a { color: var(--tp-accent); text-decoration: underline; text-underline-offset: 3px; }
/* Bodies pasted from Word carry inline justify, which tears rivers through a
   narrow column. */
.tp-prose [style*="justify"] { text-align: start !important; }
.tp-prose h2, .tp-prose h3 { font-family: var(--tp-display); text-transform: uppercase; font-weight: 600; color: var(--tp-ink);
	line-height: 1; margin: 1.4em 0 .5em; }
.tp-prose h2 { font-size: clamp(30px, 3vw, 40px); }
.tp-prose h3 { font-size: clamp(24px, 2.2vw, 30px); }
/* The introduction opens at standfirst size; a long one of several
   paragraphs runs in two columns on a wide screen. */
.tp-intro { margin-bottom: 80px; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.6; color: var(--tp-ink); max-width: 62ch; }
.tp-intro > p:first-child:not(:only-child) { font-size: clamp(21px, 1.9vw, 26px); line-height: 1.45; }
@media (min-width: 1200px) {
	.tp-intro:has(> :nth-child(3)) { columns: 2 380px; column-gap: 72px; max-width: none; font-size: 19px; }
	.tp-intro:has(> :nth-child(3)) > p:first-child { column-span: all; max-width: 40ch; margin-bottom: 1.2em; }
	.tp-intro > * { break-inside: avoid; }
}

/* ---------- cards ----------
   White on the tint, no border, tight corners. A pine bar draws across the
   top under the pointer and the card lifts. The title's link is stretched
   over the card, so the card is one tab stop. */
.tp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.tp-grid--tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1099px) {
	.tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
	.tp-grid--tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
	.tp-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.tp-grid--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.tp-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff;
	border-radius: var(--tp-radius); overflow: hidden;
	transition: transform .35s var(--tp-ease-out), box-shadow .35s var(--tp-ease-out); }
.tp-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; z-index: 2; background: var(--tp-accent);
	transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--tp-ease-out); }
.tp-card:focus-within { box-shadow: 0 0 0 3px rgba(44, 110, 107, .35); }
.tp-card:focus-within::before { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
	.tp-card:hover { box-shadow: var(--tp-shadow); }
	.tp-card:hover::before { transform: scaleX(1); }
	.tp-card:hover .tp-card-title { color: var(--tp-accent-ink); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
	.tp-card:hover { transform: translateY(-4px); }
	.tp-card:hover .tp-card-media img { transform: scale(1.04); }
}
.tp-card:active { transform: translateY(-1px); }
.tp-card-media { aspect-ratio: 3 / 2; background: #dfe7e4; overflow: hidden; }
.tp-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--tp-ease-out); }
.tp-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 24px 26px; }
.tp-card-date { margin: 0; font-size: 14px; font-weight: 600; color: var(--tp-accent); font-variant-numeric: tabular-nums; }
.tp-card-title { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--tp-ink); overflow-wrap: anywhere;
	transition: color .2s ease; }
.tp-card-title a { color: inherit; }
.tp-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tp-card-title a:focus-visible { outline: none; }
.tp-card-teaser { margin: 0; font-size: 16px; line-height: 1.55; color: var(--tp-muted);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tp-card--bare .tp-card-body { padding-top: 28px; border-top: 4px solid var(--tp-sage); }

/* The newest item on the first page is the lead story: two columns and two
   rows of a three-column grid, so the next two items stand beside it as a
   bento and the rest run on in rows of three. */
@media (min-width: 1100px) {
	.tp-card--lead { grid-column: span 2; grid-row: span 2; }
	.tp-card--lead .tp-card-media { aspect-ratio: auto; flex: 1 1 300px; min-height: 300px; }
	.tp-card--lead .tp-card-body { flex: 0 0 auto; padding: 30px 36px 34px; gap: 14px; }
}
@media (min-width: 640px) and (max-width: 1099px) {
	.tp-card--lead { grid-column: 1 / -1; }
	.tp-card--lead .tp-card-media { aspect-ratio: 16 / 8; }
}
.tp-card--lead .tp-card-title { font-size: clamp(30px, 3vw, 46px); font-weight: 600; line-height: .98; }
.tp-card--lead .tp-card-teaser { font-size: 18px; -webkit-line-clamp: 3; max-width: 60ch; }

/* Tiles: logos, icons and posters, shown whole on white — never cropped. */
.tp-card--tile .tp-card-media { aspect-ratio: 4 / 3; background: #fff; padding: 12% 16% 4%; }
.tp-card--tile .tp-card-media img { object-fit: contain; }
.tp-card--tile .tp-card-body { padding: 10px 18px 22px; }
.tp-card--tile .tp-card-title { font-size: 24px; font-weight: 600; line-height: 1; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
	.tp-card--tile:hover .tp-card-media img { transform: scale(1.06); }
}

/* ---------- rows (the shared "line" template) ----------
   An editorial run: a large photograph, and the text on a white panel that
   steps over its edge, the sides alternating down the list. */
.tp-rows { display: grid; gap: 72px; }
.tp-row { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.tp-row-media { grid-column: 1 / span 8; grid-row: 1; aspect-ratio: 16 / 10; background: #dfe7e4; overflow: hidden; border-radius: var(--tp-radius); }
.tp-row-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--tp-ease-out); }
.tp-row-body { grid-column: 8 / span 5; grid-row: 1; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px;
	padding: 48px 48px 44px; background: #fff; border-radius: var(--tp-radius);
	box-shadow: 0 2px 4px rgba(31, 47, 48, .05), 0 30px 60px -30px rgba(31, 47, 48, .35);
	transition: transform .35s var(--tp-ease-out); }
.tp-row:nth-child(even) .tp-row-media { grid-column: 5 / span 8; }
.tp-row:nth-child(even) .tp-row-body { grid-column: 1 / span 5; }
.tp-row-body::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--tp-accent);
	transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--tp-ease-out); }
.tp-row:focus-within .tp-row-body::before { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
	.tp-row:hover .tp-row-body::before { transform: scaleX(1); }
	.tp-row:hover .tp-more::after { transform: translateX(4px); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
	.tp-row:hover .tp-row-media img { transform: scale(1.03); }
}
.tp-row-title { margin: 0; font-size: clamp(34px, 3.4vw, 52px); line-height: .95; font-weight: 600; color: var(--tp-ink); }
.tp-row-title a { color: inherit; }
.tp-row-title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.tp-row-title a:focus-visible { outline: none; }
.tp-row:focus-within { outline: 3px solid #4d9b97; outline-offset: 6px; border-radius: var(--tp-radius); }
.tp-row-teaser { margin: 0; color: var(--tp-body); font-size: 17px; line-height: 1.65; }
.tp-row--bare { display: block; }
.tp-row--bare .tp-row-body { border-inline-start: 4px solid var(--tp-accent); box-shadow: none; max-width: 860px; }
.tp-more { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: 8px; font-weight: 700; font-size: 15px; color: var(--tp-accent); }
.tp-more::after { content: ""; width: 18px; height: 2px; background: currentColor; transition: transform .3s var(--tp-ease-out); }
@media (max-width: 991px) {
	.tp-rows { gap: 48px; }
	.tp-row, .tp-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
	.tp-row-media, .tp-row:nth-child(even) .tp-row-media { grid-column: 1; grid-row: 1; }
	.tp-row-body, .tp-row:nth-child(even) .tp-row-body { grid-column: 1; grid-row: 2; margin: -48px 24px 0; padding: 32px 28px 30px; }
	.tp-row--bare .tp-row-body { margin: 0; }
}
@media (max-width: 559px) {
	.tp-rows { gap: 36px; }
	.tp-row-body, .tp-row:nth-child(even) .tp-row-body { margin: -32px 12px 0; padding: 26px 22px 24px; }
}

/* ---------- sub-sections of a category ---------- */
.tp-subcats { margin: 0 0 72px; }
.tp-subcat-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tp-subcat { position: relative; display: flex; align-items: center; gap: 18px; min-height: 92px; padding: 14px 22px 14px 14px;
	background: #fff; border-radius: var(--tp-radius); overflow: hidden;
	transition: box-shadow .3s var(--tp-ease-out), transform .3s var(--tp-ease-out); }
.tp-subcat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--tp-accent);
	transform: scaleY(0); transform-origin: center bottom; transition: transform .35s var(--tp-ease-out); }
.tp-subcat:hover { box-shadow: var(--tp-shadow); }
.tp-subcat:hover::before, .tp-subcat:focus-within::before { transform: scaleY(1); }
.tp-subcat img { flex: none; width: 64px; height: 64px; border-radius: var(--tp-radius-sm); object-fit: cover; background: var(--tp-tint); }
.tp-subcat a { font-weight: 600; font-size: 24px; color: var(--tp-ink); line-height: 1; }
.tp-subcat a::after { content: ""; position: absolute; inset: 0; }
.tp-subcat a:focus-visible { outline: none; }
.tp-subcat:focus-within { box-shadow: 0 0 0 3px rgba(44, 110, 107, .35); }

/* ---------- photos and albums ----------
   A photo set is a mosaic: every seventh picture takes a double cell, so a
   long album has rhythm instead of a spreadsheet of thumbnails. */
.tp-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	grid-auto-flow: dense; gap: 10px; }
.tp-photos li { min-width: 0; }
.tp-photos a { display: block; height: 100%; border-radius: var(--tp-radius-sm); overflow: hidden; background: #dfe7e4; }
.tp-photos img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s var(--tp-ease-out), opacity .2s ease; }
@media (min-width: 768px) {
	.tp-photos li:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
}
.tp-photos a:hover img { opacity: .92; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.tp-photos a:hover img { transform: scale(1.04); }
}
@media (max-width: 639px) {
	.tp-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
	.tp-photos li:nth-child(5n+1) { grid-column: 1 / -1; }
}

/* Albums are photographs first: the cover fills the card and the album's
   name sits on it. The first album of the page takes a double cell. */
.tp-albums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	grid-auto-flow: dense; gap: 16px; }
.tp-album { position: relative; isolation: isolate; display: flex; min-height: 300px; background: var(--tp-band); border-radius: var(--tp-radius); overflow: hidden;
	transition: box-shadow .35s var(--tp-ease-out), transform .35s var(--tp-ease-out); }
@media (min-width: 900px) { .tp-albums > .tp-album:first-child:not(:only-child) { grid-column: span 2; grid-row: span 2; } }
.tp-album:hover { box-shadow: var(--tp-shadow); }
.tp-album:focus-within { box-shadow: 0 0 0 3px rgba(44, 110, 107, .45); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
	.tp-album:hover { transform: translateY(-4px); }
	.tp-album:hover .tp-album-media img { transform: scale(1.05); }
}
.tp-album-media { position: absolute; inset: 0; z-index: -1; background: var(--tp-band); overflow: hidden; }
.tp-album-media::after { content: ""; position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(31, 47, 48, .92) 0%, rgba(31, 47, 48, .45) 42%, rgba(31, 47, 48, 0) 70%); }
.tp-album-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--tp-ease-out); }
.tp-album-media--video::before { content: ""; position: absolute; z-index: 1; inset-inline-end: 20px; top: 20px; width: 56px; height: 56px;
	border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7);
	background: rgba(31, 47, 48, .4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50% / 24px no-repeat; }
.tp-album-name { align-self: flex-end; display: block; width: 100%; padding: 22px 24px 24px;
	font-weight: 600; font-size: clamp(24px, 2vw, 30px); line-height: 1; color: #fff; overflow-wrap: anywhere; }
.tp-albums > .tp-album:first-child:not(:only-child) .tp-album-name { font-size: clamp(30px, 3.4vw, 52px); padding: 32px; }
.tp-album-name::after { content: ""; position: absolute; inset: 0; }
.tp-album-name:focus-visible { outline: none; }
.tp-album-name:hover { color: #fff; }

/* ---------- a single video ---------- */
.tp-video { max-width: 1040px; margin: 0 auto; }
.tp-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--tp-radius); overflow: hidden; background: var(--tp-band-deep);
	box-shadow: 0 2px 4px rgba(31, 47, 48, .08), 0 30px 60px -24px rgba(31, 47, 48, .45); }
.tp-video-frame iframe, .tp-video-frame video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }
.tp-video .tp-prose { margin-top: 36px; }

/* ---------- pager (Laravel's Bootstrap 5 markup) ---------- */
.tp-pager { margin-top: 56px; }
.tp-pager nav > .d-sm-flex { align-items: center; gap: 16px; }
.tp-pager p.small { margin: 0; color: var(--tp-muted); font-size: 15px; }
.tp-pager .pagination { gap: 6px; flex-wrap: wrap; margin: 0; }
.tp-pager .page-link { min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 12px;
	border: 0; border-radius: var(--tp-radius) !important; background: #fff;
	color: var(--tp-ink); font-weight: 600; font-size: 16px; box-shadow: none; transition: background-color .2s ease, color .2s ease; }
.tp-pager .page-link:hover { background: var(--tp-sage); color: var(--tp-band-deep); }
.tp-pager .page-item.active .page-link { background: var(--tp-band); color: #fff; }
.tp-pager .page-item.disabled .page-link { background: transparent; color: #a3afac; }
.tp-pager .page-link:focus { box-shadow: 0 0 0 3px rgba(44, 110, 107, .3); }

/* ---------- search ---------- */
.tp-search { display: flex; gap: 10px; max-width: 680px; margin: 36px 0 0; }
.tp-search input { flex: 1; min-width: 0; height: 56px; padding: 0 20px; border-radius: var(--tp-radius);
	border: 1.5px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: #fff; font-size: 18px; }
.tp-search input::placeholder { color: rgba(255, 255, 255, .62); }
.tp-search input:focus { outline: none; border-color: var(--tp-sage); background: rgba(255, 255, 255, .14); }
.tp-search button { flex: none; height: 56px; padding: 0 28px; border: 0; border-radius: var(--tp-radius);
	background: var(--tp-sage); color: var(--tp-band-deep); font-weight: 700; font-size: 16px; transition: background-color .2s ease, transform .15s ease; }
.tp-search button:hover { background: #b3d3cc; }
.tp-search button:active { transform: scale(.98); }
.tp-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- article pages ----------
   The body itself is article.css (#all_body.tp-article). This is the frame
   around it: the column, the tags and the related stories. */
/* clip, not hidden: a self-designed body's decorative shapes poked 3px past
   the viewport on Entrepreneurship at 768px, and clip neither scrolls nor
   breaks position:sticky inside it. Never on html or body (DESIGN.md). */
.tp-article-main { padding: 88px 0 112px; overflow-x: clip; }
.tp-head--figure + .tp-figure + .tp-article-main { padding-top: 64px; }
.tp-column { max-width: 820px; margin-inline: auto; }
.tp-column--wide { max-width: none; }
.tp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 48px 0 0; padding: 28px 0 0; list-style: none; border-top: 1px solid var(--tp-line); }
.tp-tags a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: 999px; background: var(--tp-tint);
	color: var(--tp-accent-ink); font-size: 15px; font-weight: 600; transition: background-color .2s ease, color .2s ease; }
.tp-tags a:hover { background: var(--tp-accent); color: #fff; }
.tp-gallery { margin-top: 56px; }
.tp-related { margin-top: 96px; padding-top: 0; }
.tp-related .tp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tp-related .tp-card { background: var(--tp-tint); }
.tp-related .tp-card-title { font-size: 18px; }
@media (max-width: 899px) { .tp-related .tp-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .tp-article-main { padding: 48px 0 72px; } .tp-related { margin-top: 64px; } }

/* ---------- forms on article pages (Get In Touch, registrations) ---------- */
.tp-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.tp-contact-info { position: sticky; top: 32px; }
@media (max-width: 991px) {
	.tp-contact { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.tp-contact-info { position: static; }
}
.tp-form-card { position: relative; background: #fff; border-radius: var(--tp-radius); padding: clamp(24px, 3.4vw, 44px);
	box-shadow: 0 2px 4px rgba(31, 47, 48, .05), 0 30px 60px -36px rgba(31, 47, 48, .4); }
.tp-form-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--tp-accent); border-radius: var(--tp-radius) var(--tp-radius) 0 0; }
.tp-form-card + .tp-form-card, .tp-contact .lf-wrap { margin-top: 32px; }
.tp-column .tp-form-card { margin-top: 56px; }
.tp-form { display: grid; gap: 20px; }
.tp-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 639px) { .tp-form-row { grid-template-columns: minmax(0, 1fr); } }
.tp-field label { display: block; margin: 0 0 8px; font-weight: 700; font-size: 15px; color: var(--tp-ink); }
.tp-field label small { font-weight: 400; color: var(--tp-muted); }
.tp-req { color: #b3261e; }
.tp-field .form-control { min-height: 50px; border: 1.5px solid #cfd8d7; border-radius: var(--tp-radius); padding: 11px 14px; font-size: 17px; color: var(--tp-ink); background: #fff; }
.tp-field textarea.form-control { min-height: 150px; resize: vertical; }
.tp-field .form-control:focus { border-color: var(--tp-accent); box-shadow: 0 0 0 3px rgba(44, 110, 107, .18); }
.tp-button { justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 32px;
	border: 0; border-radius: 999px; background: var(--tp-accent); color: #fff; font-weight: 700; font-size: 16px; cursor: pointer;
	transition: background-color .2s ease, transform .15s ease; }
.tp-button:hover { background: var(--tp-accent-ink); color: #fff; }
.tp-button:active { transform: scale(.98); }
.tp-alert { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 22px; padding: 14px 18px; border-radius: var(--tp-radius); font-weight: 600; line-height: 1.5; }
.tp-alert::before { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; }
.tp-alert.is-ok { background: #e6f2ec; color: #1d5b3a; box-shadow: inset 4px 0 0 #2f7d57; }
.tp-alert.is-ok::before { content: "\2713"; background: #2f7d57; }
.tp-alert.is-error { background: #fbecea; color: #8c1d18; box-shadow: inset 4px 0 0 #b3261e; }
.tp-alert.is-error::before { content: "!"; background: #b3261e; }

/* ---------- blog authors ---------- */
.tp-authors { list-style: none; margin: 0 0 40px; padding: 0 0 32px; border-bottom: 1px solid var(--tp-line); display: grid; gap: 18px; }
.tp-authors li { display: flex; gap: 14px; align-items: flex-start; }
.tp-author-mark { flex: none; width: 48px; height: 48px; border-radius: var(--tp-radius); display: grid; place-items: center; background: var(--tp-tint); color: var(--tp-accent); }
.tp-authors a { font-weight: 700; color: var(--tp-ink); }
.tp-author-bio { display: block; color: var(--tp-muted); font-size: 15.5px; line-height: 1.5; }

.tp-related-band { padding-bottom: 88px; }

/* ---------- the way on: a closing band to a related page ---------- */
.tp-next { background: var(--tp-band); color: #fff; }
.tp-next-link { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; gap: 24px 72px; align-items: center; padding: 96px 0; color: #fff; }
.tp-next-link:hover { color: #fff; }
.tp-next-name { font-family: var(--tp-display); text-transform: uppercase; font-weight: 600; font-size: clamp(52px, 7vw, 108px); line-height: .9; text-wrap: balance; }
.tp-next-lede { color: var(--tp-on-band); font-size: 19px; line-height: 1.55; max-width: 44ch; }
.tp-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(--tp-sage); transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.tp-next-go svg { width: 26px; height: 26px; transition: transform .3s var(--tp-ease-out); }
.tp-next-link:hover .tp-next-go, .tp-next-link:focus-visible .tp-next-go { background: var(--tp-sage); border-color: var(--tp-sage); color: var(--tp-band); }
@media (hover: hover) and (pointer: fine) { .tp-next-link:hover .tp-next-go svg { transform: translateX(4px); } }
@media (max-width: 767px) {
	.tp-next-link { grid-template-columns: 1fr auto; padding: 64px 0; gap: 16px 24px; }
	.tp-next-lede { grid-column: 1 / -1; grid-row: 2; font-size: 17px; }
	.tp-next-go { width: 56px; height: 56px; }
}

/* ---------- scroll entrance ----------
   Only things that start below the fold are hidden, and only once inner.js
   has run, so nothing is ever invisible without it. Transform and opacity. */
@media (prefers-reduced-motion: no-preference) {
	.tp-pending { opacity: 0; transform: translateY(24px); }
	.tp-shown { transition: opacity .6s var(--tp-ease-out), transform .6s var(--tp-ease-out), box-shadow .35s var(--tp-ease-out); }
}