/*
 * Topical featured image, design L (round 5b), laid out from Visual Design's approved board V (round 7).
 * Desktop (container 700 px and wider) is a 760 px card with absolutely placed pieces; mobile K (narrower) is a 350 px card
 * with the map, place name and tag anchored to the right and top. The frame never changes size (single 240 px desktop,
 * 184 px mobile; pair 200 px and 136 px); the photo shows at the smaller of the frame less a 3 px ring and 1.25 times its
 * native size, centered, with a white mat for the rest. No logo and no website text on any on-site card.
 * Variables the template may change:
 *   --gp-ti-card-h      minimum height of a desktop portrait card (380px; limit 400)
 *   --gp-ti-mapcard-h   minimum height of a desktop map-only or typed-name card (300px)
 * Tag size, the tag on/off switch and the ripple on/off switch are PHP constants (lib-card.php).
 */
.gp-ti {
	--gp-ink: #242424;
	--gp-cream: #FAF6EE;
	--gp-brick: #96504C;
	--gp-peach: #FCCDB6;
	--gp-muted: #5A5858;
	--gp-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--gp-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	container-type: inline-size;
	margin: 0 0 1.25rem;
	font-family: var(--gp-sans);
	color: var(--gp-ink);
}
.gp-ti__card {
	--mh: 250px; /* displayed height of the map on the original 92 x 94 viewBox basis */
	position: relative;
	box-sizing: border-box;
	background: var(--gp-peach);
	border-radius: 8px;
	overflow: hidden;
	min-height: var(--gp-ti-card-h, 380px);
	padding-bottom: 6px;
}
.gp-ti--pair .gp-ti__card { --mh: 240px; }
.gp-ti--mapcard .gp-ti__card, .gp-ti--typed .gp-ti__card { min-height: var(--gp-ti-mapcard-h, 300px); padding-bottom: 0; }
.gp-ti--mapcard .gp-ti__card { --mh: 262px; }
.gp-ti--typed .gp-ti__card { --mh: 260px; }

.gp-ti__ripple { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.gp-ti__ripple--m { display: none; }

.gp-ti__tag {
	position: absolute; left: 32px; top: 24px; z-index: 2; max-width: 380px;
	font: 700 var(--tag-d, 20px)/1.25 var(--gp-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gp-ink);
}
.gp-ti--typed .gp-ti__tag { font-size: 13px; line-height: 16px; top: 28px; max-width: 400px; }

/* people: single frame left edge at 104 px (block 74 px + the frame centered in 300), pair frames at 32 and 248 */
.gp-ti__people { position: relative; z-index: 1; display: flex; align-items: flex-start; padding-top: 68px; margin-left: 74px; gap: 16px; }
.gp-ti--pair .gp-ti__people { padding-top: 76px; margin-left: 32px; }
.gp-ti__person { margin: 0; flex: none; width: 300px; }
.gp-ti--pair .gp-ti__person { width: var(--fd, 200px); }
.gp-ti__frame { display: flex; align-items: center; justify-content: center; width: var(--fd, 240px); height: var(--fd, 240px); border-radius: 50%; background: #FFFFFF; margin: 0 auto; }
.gp-ti__circ { display: block; width: var(--pd, 234px); height: var(--pd, 234px); border-radius: 50%; overflow: hidden; }
.gp-ti__circ img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gp-ti__person figcaption { margin: 10px 0 0; text-align: center; }
.gp-ti--pair .gp-ti__person figcaption { width: 220px; margin: 12px 0 0 -10px; }
.gp-ti__name { display: block; font: 700 28px/32px var(--gp-serif); color: var(--gp-ink); overflow-wrap: break-word; }
.gp-ti__name--ld { font-size: 22px; line-height: 26px; } /* long name plus party letter wraps to two lines on desktop; 22 px keeps the card at 400 px or less */
.gp-ti--pair .gp-ti__name { font-size: 24px; line-height: 28px; }
.gp-ti__role { display: block; margin-top: 2px; font: 600 15px/22px var(--gp-sans); color: var(--gp-ink); }
.gp-ti--pair .gp-ti__role { font-size: 14px; line-height: 21px; }

/* typed-name card (board V, VC1): names left aligned in a column, the place is in the tag, no label under the map */
.gp-ti--typed .gp-ti__people { position: absolute; left: 32px; top: 88px; display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 0; width: 300px; }
.gp-ti__typed { text-align: left; width: 300px; }
.gp-ti--typed .gp-ti__name { font-size: 30px; line-height: 34px; }
.gp-ti--typed .gp-ti__name--ld { font-size: 26px; line-height: 30px; }
.gp-ti--typed .gp-ti__role { font-size: 15px; line-height: 22px; }

/* the map: absolute box over the visible outline (92 x 94 units); the svg is padded 12 units and pulled back */
.gp-ti__place { position: absolute; z-index: 1; left: 443px; top: 60px; width: calc(var(--mh) * 92 / 94); text-align: center; }
.gp-ti--pair .gp-ti__place { left: 485px; top: 70px; }
.gp-ti--mapcard .gp-ti__place { left: 448px; top: 16px; }
.gp-ti--typed .gp-ti__place { left: 466px; top: 20px; }
.gp-ti__map {
	display: block;
	width: calc(var(--mh) * 107 / 94);
	height: calc(var(--mh) * 110 / 94);
	margin: calc(var(--mh) * -8 / 94) calc(var(--mh) * -7 / 94) calc(var(--mh) * -8 / 94) calc(var(--mh) * -8 / 94);
}
.gp-ti__placename { display: block; width: calc(100% + 40px); margin: 12px -20px 0; font: 700 24px/28px var(--gp-serif); color: var(--gp-ink); }
.gp-ti--mapcard .gp-ti__placename, .gp-ti--typed .gp-ti__placename { display: none; }
.gp-ti__headline { position: absolute; z-index: 1; left: 32px; bottom: 32px; width: 360px; font: 800 52px/56px var(--gp-serif); color: var(--gp-ink); overflow-wrap: break-word; }

.gp-ti__credit { margin: 8px 0 0; font: 400 14px/22px var(--gp-sans); color: var(--gp-muted); }
.gp-ti__credit + .gp-ti__credit { margin-top: 0; }

/* Mobile K (board V, VH5 and VH6): tag top left, map top right with the place name under it, frame at left 20 and top 104,
   name and title centered under the frame. Anchored to the right so it holds from 350 px up to 699 px. */
@container (max-width: 699px) {
	.gp-ti__card { --mh: calc(120px); min-height: 408px; padding-bottom: 12px; }
	.gp-ti--pair .gp-ti__card, .gp-ti--typed .gp-ti__card { --mh: 120px; }
	.gp-ti--pair .gp-ti__card { min-height: 400px; }
	.gp-ti--pair .gp-ti__placename { font-size: 16px; line-height: 20px; }
	.gp-ti__ripple--d { display: none; }
	.gp-ti__ripple--m { display: block; left: auto; right: 0; }
	.gp-ti__tag { left: 20px; top: 20px; width: 180px; max-width: 180px; font-size: var(--tag-m, 18px); }
	.gp-ti--longtag .gp-ti__place { /* a 13+ letter tag word (Transportation) cannot wrap: the map does not move, the tag column is 180 px */ }
	.gp-ti__place { left: auto; right: 20px; top: 20px; }
	.gp-ti--pair .gp-ti__place, .gp-ti--typed .gp-ti__place, .gp-ti--mapcard .gp-ti__place { left: auto; right: 20px; top: 20px; }
	.gp-ti__placename { width: calc(100% + 19px); margin: 6px -10px 0 -9px; font-size: 22px; line-height: 26px; }
	.gp-ti--solo .gp-ti__place { max-width: 112px; } /* keeps the place name at least 24 px right of the 184 px frame (right edge 204) */
	.gp-ti--solo .gp-ti__placename { margin: 6px 0 0 14px; width: calc(100% - 14px); }
	.gp-ti__people { padding-top: 104px; margin-left: 14px; }
	.gp-ti__person { width: 196px; }
	.gp-ti__name { font-size: 28px; line-height: 32px; }
	.gp-ti__name--lm { font-size: 24px; line-height: 28px; }
	.gp-ti__role { font-size: 14px; line-height: 21px; }
	.gp-ti__frame { --fd: 184px; width: var(--fm, 184px); height: var(--fm, 184px); }
	.gp-ti__circ { width: var(--pm, 178px); height: var(--pm, 178px); }
	/* pair: two frames of 136 px below the place name, so nothing sits over a photo */
	.gp-ti--pair .gp-ti__people { padding-top: 192px; margin-left: 20px; gap: 12px; }
	.gp-ti--pair .gp-ti__person { width: var(--fm, 136px); }
	.gp-ti--pair .gp-ti__person figcaption { width: 150px; margin: 8px 0 0 -7px; }
	.gp-ti--pair .gp-ti__name { font-size: 19px; line-height: 23px; }
	.gp-ti--pair .gp-ti__role { font-size: 13px; line-height: 18px; }
	/* typed-name card: names left aligned under the map row */
	.gp-ti--typed .gp-ti__card { min-height: 300px; }
	.gp-ti--typed .gp-ti__people { position: relative; left: auto; top: auto; padding: 150px 0 0 20px; margin: 0; width: auto; }
	.gp-ti__typed { width: 310px; }
	.gp-ti--typed .gp-ti__name { font-size: 28px; line-height: 32px; }
	.gp-ti--typed .gp-ti__name--lm { font-size: 24px; line-height: 28px; }
	.gp-ti--typed .gp-ti__role { font-size: 14px; line-height: 21px; }
	.gp-ti--typed .gp-ti__tag { font-size: 13px; line-height: 16px; top: 22px; }
	/* map-only: tag, then the map centered with the place name as the headline under it */
	.gp-ti--mapcard .gp-ti__card { --mh: calc(190px * 94 / 92); min-height: 0; padding: 20px 20px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
	.gp-ti--mapcard .gp-ti__tag { position: static; align-self: flex-start; width: auto; max-width: none; }
	.gp-ti--mapcard .gp-ti__place { position: static; width: calc(var(--mh) * 92 / 94); }
	.gp-ti--mapcard .gp-ti__headline { position: static; width: auto; font-size: 30px; line-height: 34px; text-align: center; }
	.gp-ti--mapcard .gp-ti__ripple { display: none; }
}

/* Compact (homepage slider, Phase 3 design; kept simple here): portrait left, map right, in normal flow */
.gp-ti--compact .gp-ti__card { min-height: 0; display: grid; grid-template-columns: 1fr auto; column-gap: 16px; padding: 16px; --mh: 170px; }
.gp-ti--compact .gp-ti__tag, .gp-ti--compact .gp-ti__place, .gp-ti--compact .gp-ti__headline { position: static; }
.gp-ti--compact .gp-ti__tag { grid-column: 1 / -1; font-size: 16px; width: auto; max-width: none; margin-bottom: 10px; }
.gp-ti--compact .gp-ti__people { padding: 0; margin: 0; }
.gp-ti--compact .gp-ti__person, .gp-ti--compact.gp-ti--pair .gp-ti__person { width: 150px; }
.gp-ti--compact .gp-ti__frame { width: 150px; height: 150px; --fd: 150px; }
.gp-ti--compact .gp-ti__circ { width: min(var(--pd, 144px), 144px); height: min(var(--pd, 144px), 144px); }
.gp-ti--compact .gp-ti__person figcaption { width: 170px; margin: 8px 0 0 -10px; }
.gp-ti--compact .gp-ti__name { font-size: 18px; line-height: 22px; }
.gp-ti--compact .gp-ti__role { font-size: 12px; line-height: 16px; }
.gp-ti--compact .gp-ti__placename { font-size: 16px; line-height: 20px; margin-top: 6px; }
.gp-ti--compact .gp-ti__ripple { display: none; }

/* ---------- H1 (site review 2026-10-08): the real phone container is 310 px (390 px screen less 80 px of page and article padding), not
   the 350 px Mobile K was drawn for. Below 340 px: smaller frame (the place name keeps 24 px clear of it), pair frames 118 px, typed
   names at 24 px. Tested at 310, 350 and 390. ---------- */
@container (max-width: 339px) {
	.gp-ti:not(.gp-ti--topslide) .gp-ti__card { --mh: 100px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__people { margin-left: 18px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__person { width: 150px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__frame { width: 150px; height: 150px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__circ { width: 144px; height: 144px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__person figcaption { width: 170px; margin: 10px 0 0 -10px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__name { font-size: 20px; line-height: 24px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__place { max-width: 94px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__placename { margin-left: 8px; width: calc(100% - 8px); font-size: 20px; line-height: 24px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__card { min-height: 392px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__people { padding-top: 176px; margin-left: 20px; gap: 10px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__person { width: 118px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__frame { width: 118px; height: 118px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__circ { width: 112px; height: 112px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__person figcaption { width: 140px; margin: 8px 0 0 -11px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__name { font-size: 16px; line-height: 20px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__role { font-size: 12px; line-height: 16px; }
	.gp-ti--typed:not(.gp-ti--topslide) .gp-ti__people { padding-top: 140px; }
	.gp-ti__typed:not(.gp-ti--topslide) { width: 270px; }
	.gp-ti--typed:not(.gp-ti--topslide) .gp-ti__name { font-size: 24px; line-height: 28px; }
}

/* ---------- Phone slider slide (Revision 2, Daniel 2026-10-08: "Art go; slider go"). context=topslide. One card per slide with the
   headline inside it: eyebrow, band (portrait or object left, map and place right), headline. Designed for the 310 px phone container
   first (tier under 340 px), larger from 340 px. Compact frames 150/138 px (single) and 128/118 px (pair), as drawn in
   art/slider-proposal/. ---------- */
.gp-ti--topslide .gp-ti__card { --mh: 92px; min-height: 372px; padding: 16px; padding-bottom: 18px; display: flex; flex-direction: column; }
.gp-ti--topslide .gp-ti__rings { position: absolute; right: -70px; top: -30px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(150, 80, 76, .25); box-shadow: 0 0 0 26px transparent, 0 0 0 27px rgba(150, 80, 76, .19), 0 0 0 56px transparent, 0 0 0 57px rgba(150, 80, 76, .12); pointer-events: none; z-index: 0; }
.gp-ti--topslide .gp-ti__eyebrow { position: relative; z-index: 2; display: block; font: 700 12px/16px var(--gp-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gp-ink); }
.gp-ti--topslide .gp-ti__eyebrow b { font-weight: 700; color: var(--gp-ink); }
.gp-ti--topslide .gp-ti__band { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; margin-top: 10px; }
.gp-ti--topslide .gp-ti__people { position: static; display: flex; padding: 0; margin: 0; gap: 6px; width: auto; }
.gp-ti--topslide .gp-ti__person { margin: 0; flex: none; width: 178px; }
.gp-ti--topslide .gp-ti__frame { width: 138px; height: 138px; margin: 0 auto; }
.gp-ti--topslide .gp-ti__circ { width: calc(100% - 6px); height: calc(100% - 6px); }
.gp-ti--topslide .gp-ti__person figcaption { margin: 8px 0 0; text-align: center; width: auto; }
.gp-ti--topslide .gp-ti__name { font-size: 22px; line-height: 25px; }
.gp-ti--topslide .gp-ti__role { font-size: 14px; line-height: 18px; margin-top: 2px; }
.gp-ti--topslide .gp-ti__place { position: static; width: calc(var(--mh) * 92 / 94); max-width: none; flex: none; }
.gp-ti--topslide .gp-ti__map { margin: calc(var(--mh) * -8 / 94) calc(var(--mh) * -7 / 94) calc(var(--mh) * -8 / 94) calc(var(--mh) * -8 / 94); }
.gp-ti--topslide .gp-ti__placename { display: block; width: calc(100% + 30px); margin: 4px -15px 0; font: 700 15px/18px var(--gp-serif); text-align: center; }
.gp-ti--topslide .gp-ti__slidehead { position: relative; z-index: 2; margin: 14px 0 0; font: 800 21px/25px var(--gp-serif); color: var(--gp-ink); overflow-wrap: break-word; }
/* pair: eyebrow wraps to two lines beside a small map chip; frames larger, below */
.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__top2 { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; }
.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__eyebrow { max-width: 150px; }
.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__place { width: 46px; --mh: 46px; }
.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__placename { font-size: 12px; line-height: 14px; margin: 2px -10px 0; width: calc(100% + 20px); }
.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__band { margin-top: 6px; }
.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__people { gap: 4px; }
.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__person { width: 126px; }
.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__frame { width: 118px; height: 118px; }
.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__person figcaption { margin: 8px 0 0; }
.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__name { font-size: 16px; line-height: 18px; }
.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__role { font-size: 12px; line-height: 16px; }
/* typed names: larger name and title, map right */
.gp-ti--topslide.gp-ti--typed .gp-ti__band { margin-top: 14px; }
.gp-ti--topslide.gp-ti--typed .gp-ti__people { flex-direction: column; gap: 0; }
.gp-ti--topslide.gp-ti--typed .gp-ti__typed { width: 174px; text-align: left; }
.gp-ti--topslide.gp-ti--typed .gp-ti__name { font-size: 22px; line-height: 25px; }
.gp-ti--topslide.gp-ti--typed .gp-ti__role { font-size: 14px; line-height: 18px; margin: 2px 0 12px; }
/* object: the same round frame and mat as a portrait, cream inside, the drawn object centered */
.gp-ti--topslide .gp-ti__frame--object { display: flex; align-items: center; justify-content: center; flex: none; margin: 0; background: #FFFFFF; }
.gp-ti--topslide .gp-ti__frame--object svg { width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 50%; background: var(--gp-cream); padding: 18%; box-sizing: border-box; }
.gp-ti--topslide .gp-ti__bigplace { font: 800 30px/32px var(--gp-serif); max-width: 140px; align-self: center; }
.gp-ti--topslide.gp-ti--object .gp-ti__band, .gp-ti--topslide.gp-ti--mapcard .gp-ti__band { margin-top: 12px; align-items: center; }
.gp-ti--topslide .gp-ti__credit { margin: 6px 0 0; font-size: 12px; line-height: 16px; }
/* from 340 px up: larger */
@container (min-width: 340px) {
	.gp-ti--topslide .gp-ti__card { --mh: 104px; min-height: 392px; }
	.gp-ti--topslide .gp-ti__frame { width: 150px; height: 150px; }
	.gp-ti--topslide .gp-ti__person { width: 194px; }
	.gp-ti--topslide .gp-ti__band { padding-left: 8px; }
	.gp-ti--topslide .gp-ti__name { font-size: 24px; line-height: 27px; }
	.gp-ti--topslide .gp-ti__role { font-size: 15px; line-height: 19px; }
	.gp-ti--topslide .gp-ti__slidehead { font-size: 22px; line-height: 26px; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__band { padding-left: 0; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__person { width: 136px; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__frame { width: 128px; height: 128px; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__place { width: 56px; --mh: 56px; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__name { font-size: 17px; line-height: 19px; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__role { font-size: 13px; line-height: 17px; }
	.gp-ti--topslide.gp-ti--typed .gp-ti__band { padding-left: 0; }
	.gp-ti--topslide.gp-ti--typed .gp-ti__typed { width: 200px; }
	.gp-ti--topslide.gp-ti--typed .gp-ti__name { font-size: 26px; line-height: 29px; }
	.gp-ti--topslide.gp-ti--typed .gp-ti__role { font-size: 15px; line-height: 19px; }
}

/* Very narrow phones (320 px screens and under leave a 240 px container): a smaller slide so the map is never cut off. */
@container (max-width: 299px) {
	.gp-ti--topslide .gp-ti__card { --mh: 72px; min-height: 340px; padding: 14px; }
	.gp-ti--topslide .gp-ti__person { width: 122px; }
	.gp-ti--topslide .gp-ti__frame { width: 112px; height: 112px; }
	.gp-ti--topslide .gp-ti__name { font-size: 18px; line-height: 21px; }
	.gp-ti--topslide .gp-ti__role { font-size: 12px; line-height: 16px; }
	.gp-ti--topslide .gp-ti__placename { font-size: 13px; line-height: 16px; }
	.gp-ti--topslide .gp-ti__slidehead { font-size: 19px; line-height: 23px; }
	.gp-ti--topslide.gp-ti--typed .gp-ti__typed { width: 124px; }
	.gp-ti--topslide.gp-ti--typed .gp-ti__name { font-size: 18px; line-height: 21px; }
	.gp-ti--topslide.gp-ti--typed .gp-ti__role { font-size: 12px; line-height: 16px; }
	.gp-ti--topslide .gp-ti__bigplace { font-size: 24px; line-height: 26px; max-width: 110px; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__person { width: 100px; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__frame { width: 96px; height: 96px; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__name { font-size: 14px; line-height: 17px; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__role { font-size: 11px; line-height: 14px; }
}

/* Hero cards on small phones (360 px screens leave a 280 px container, 320 px screens 240 px). Two more steps below the 340 px tier. */
@container (max-width: 299px) {
	.gp-ti:not(.gp-ti--topslide) .gp-ti__card { --mh: 84px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__people { margin-left: 14px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__person { width: 128px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__frame { width: 128px; height: 128px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__circ { width: 122px; height: 122px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__person figcaption { width: 150px; margin: 10px 0 0 -11px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__name { font-size: 18px; line-height: 22px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__role { font-size: 13px; line-height: 18px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__place { max-width: 78px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__placename { font-size: 16px; line-height: 20px; margin-left: 4px; width: calc(100% - 4px); }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__card { min-height: 360px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__people { padding-top: 150px; margin-left: 14px; gap: 8px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__person { width: 102px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__frame { width: 102px; height: 102px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__circ { width: 96px; height: 96px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__person figcaption { width: 120px; margin: 8px 0 0 -9px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__name { font-size: 14px; line-height: 17px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__role { font-size: 11px; line-height: 14px; }
	.gp-ti--typed:not(.gp-ti--topslide) .gp-ti__people { padding-top: 125px; }
	.gp-ti__typed:not(.gp-ti--topslide) { width: 230px; }
	.gp-ti--typed:not(.gp-ti--topslide) .gp-ti__name { font-size: 20px; line-height: 24px; }
	.gp-ti--typed:not(.gp-ti--topslide) .gp-ti__role { font-size: 13px; line-height: 18px; }
	.gp-ti__tag:not(.gp-ti--topslide) { width: 150px; max-width: 150px; }
}
@container (max-width: 259px) {
	.gp-ti:not(.gp-ti--topslide) .gp-ti__card { --mh: 68px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__person { width: 104px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__frame { width: 104px; height: 104px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__circ { width: 98px; height: 98px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__person figcaption { width: 124px; margin: 8px 0 0 -10px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__name { font-size: 16px; line-height: 19px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__place { max-width: 66px; }
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__placename { font-size: 14px; line-height: 17px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__people { padding-top: 148px; gap: 6px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__person { width: 92px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__frame { width: 92px; height: 92px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__circ { width: 86px; height: 86px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__person figcaption { width: 108px; margin: 6px 0 0 -8px; }
	.gp-ti--pair:not(.gp-ti--topslide) .gp-ti__name { font-size: 13px; line-height: 16px; }
	.gp-ti__typed:not(.gp-ti--topslide) { width: 200px; }
	.gp-ti--typed:not(.gp-ti--topslide) .gp-ti__name { font-size: 18px; line-height: 22px; }
}

@container (min-width: 300px) and (max-width: 319px) {
	.gp-ti--topslide .gp-ti__person { width: 164px; }
}
@container (max-width: 259px) {
	.gp-ti--topslide .gp-ti__card { --mh: 60px; min-height: 330px; padding: 12px; }
	.gp-ti--topslide .gp-ti__person { width: 106px; }
	.gp-ti--topslide .gp-ti__frame { width: 100px; height: 100px; }
	.gp-ti--topslide .gp-ti__name { font-size: 16px; line-height: 19px; }
	.gp-ti--topslide .gp-ti__role { font-size: 11px; line-height: 14px; }
	.gp-ti--topslide .gp-ti__slidehead { font-size: 17px; line-height: 21px; }
	.gp-ti--topslide .gp-ti__placename { font-size: 12px; line-height: 14px; width: calc(100% + 16px); margin: 4px -8px 0; }
	.gp-ti--topslide.gp-ti--typed .gp-ti__typed { width: 104px; }
	.gp-ti--topslide.gp-ti--typed .gp-ti__name { font-size: 16px; line-height: 19px; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__person { width: 88px; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__frame { width: 84px; height: 84px; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__name { font-size: 12px; line-height: 15px; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__role { font-size: 10px; line-height: 13px; }
}

@container (min-width: 340px) and (max-width: 349px) {
	.gp-ti--solo:not(.gp-ti--topslide) .gp-ti__place { max-width: 100px; }
}

/* ---------- One card, standard from 2026-10-08 (Daniel: "Option B", "N2 is much better", "apply these principles across the site"):
   names and titles left-aligned under the portrait at the full card width (N2); no credit on the card; article pages show the card with no
   eyebrow and no headline (.gp-ti--article), the slider and social image keep both (.gp-ti--withhead). Name size by length (with party
   letter): up to 20 characters 24 px, 21 to 26 characters 22 px, longer 20 px (one step less under 340 px). ---------- */
.gp-ti--topslide .gp-ti__person { width: auto; }
.gp-ti--topslide .gp-ti__people { gap: 8px; }
.gp-ti--topslide .gp-ti__frame { margin: 0; }
.gp-ti--topslide .gp-ti__cap { position: relative; z-index: 2; margin-top: 8px; text-align: left; }
.gp-ti--topslide .gp-ti__cap .gp-ti__name, .gp-ti--topslide .gp-ti__person figcaption { text-align: left; }
.gp-ti--topslide .gp-ti__person figcaption { margin-top: 8px; }
.gp-ti--topslide .gp-ti__name--n22 { font-size: 22px; line-height: 25px; }
.gp-ti--topslide .gp-ti__name--n20 { font-size: 20px; line-height: 23px; }
.gp-ti--topslide .gp-ti__eyebrow--place { max-width: 150px; }
.gp-ti--article .gp-ti__card { min-height: 0; padding-top: 18px; padding-bottom: 16px; }
.gp-ti--article .gp-ti__band { margin-top: 0; }
.gp-ti--article.gp-ti--pair .gp-ti__top2 .gp-ti__placename { display: none; }
.gp-ti--article.gp-ti--typed .gp-ti__band, .gp-ti--article.gp-ti--object .gp-ti__band, .gp-ti--article.gp-ti--mapcard .gp-ti__band { margin-top: 0; }
@container (max-width: 339px) {
	.gp-ti--topslide .gp-ti__name--n22 { font-size: 20px; line-height: 23px; }
	.gp-ti--topslide .gp-ti__name--n20 { font-size: 18px; line-height: 21px; }
}
@container (min-width: 700px) {
	.gp-ti--topslide .gp-ti__card { --mh: 220px; padding: 30px 40px 28px; min-height: 0; }
	.gp-ti--topslide .gp-ti__rings { right: -150px; top: -110px; width: 360px; height: 360px; box-shadow: 0 0 0 52px transparent, 0 0 0 53px rgba(150, 80, 76, .19), 0 0 0 112px transparent, 0 0 0 113px rgba(150, 80, 76, .12); }
	.gp-ti--topslide .gp-ti__eyebrow { font-size: 14px; line-height: 18px; margin-bottom: 14px; }
	.gp-ti--topslide .gp-ti__band { padding-left: 0; }
	.gp-ti--topslide .gp-ti__frame { width: 216px; height: 216px; }
	.gp-ti--topslide .gp-ti__placename { font-size: 24px; line-height: 28px; margin-top: 10px; }
	.gp-ti--topslide .gp-ti__cap { margin-top: 12px; }
	.gp-ti--topslide .gp-ti__name { font-size: 30px; line-height: 34px; }
	.gp-ti--topslide .gp-ti__name--n22 { font-size: 28px; line-height: 32px; }
	.gp-ti--topslide .gp-ti__name--n20 { font-size: 26px; line-height: 30px; }
	.gp-ti--topslide .gp-ti__role { font-size: 17px; line-height: 22px; margin-top: 2px; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__top2 { position: absolute; right: 40px; top: 36px; display: block; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__top2 .gp-ti__eyebrow { display: none; }
	.gp-ti--article.gp-ti--pair:not(.gp-ti--typed) .gp-ti__top2 .gp-ti__placename { display: block; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__place { width: calc(var(--mh) * 92 / 94); --mh: 220px; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__placename { font-size: 24px; line-height: 28px; margin: 10px -15px 0; width: calc(100% + 30px); }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__people { gap: 24px; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__person { width: 198px; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__frame { width: 190px; height: 190px; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__name { font-size: 24px; line-height: 28px; }
	.gp-ti--topslide.gp-ti--pair:not(.gp-ti--typed) .gp-ti__role { font-size: 16px; line-height: 20px; }
	.gp-ti--topslide.gp-ti--typed .gp-ti__typed { width: 360px; }
	.gp-ti--topslide.gp-ti--typed .gp-ti__name { font-size: 32px; line-height: 36px; }
	.gp-ti--topslide.gp-ti--typed .gp-ti__role { font-size: 17px; line-height: 22px; }
	.gp-ti--topslide .gp-ti__bigplace { font-size: 52px; line-height: 56px; max-width: 360px; }
	.gp-ti--topslide .gp-ti__slidehead { font-size: 36px; line-height: 42px; max-width: 460px; }
}

/* ---------- Place-only and object cards (Daniel, 2026-10-09, "Not good" on the Gwinnett article): one place name only (the big title; the map has no
   second label), a compact card with no empty band (height follows the content), the object illustration when there is one, and rings
   centered on the map so they are never cut at the card edge. ---------- */
.gp-ti--topslide .gp-ti__place--nolabel .gp-ti__placename { display: none; }
.gp-ti--article.gp-ti--mapcard .gp-ti__card, .gp-ti--article.gp-ti--object .gp-ti__card { min-height: 0; padding: 18px 20px; }
.gp-ti--article.gp-ti--mapcard .gp-ti__band, .gp-ti--article.gp-ti--object .gp-ti__band { margin-top: 0; align-items: center; gap: 12px; }
.gp-ti--article.gp-ti--mapcard .gp-ti__bigplace { font-size: 34px; line-height: 38px; max-width: none; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.gp-ti--article.gp-ti--mapcard .gp-ti__rings, .gp-ti--article.gp-ti--object .gp-ti__rings { --rp: 20px; left: auto; right: calc(var(--rp) + var(--mh) * 0.21); top: 50%; transform: translateY(-50%); width: calc(var(--mh) * 0.56); height: calc(var(--mh) * 0.56); border: 0; background: none; box-shadow: 0 0 0 calc(var(--mh) * 0.16) transparent, 0 0 0 calc(var(--mh) * 0.16 + 1px) rgba(150, 80, 76, .25), 0 0 0 calc(var(--mh) * 0.32) transparent, 0 0 0 calc(var(--mh) * 0.32 + 1px) rgba(150, 80, 76, .15); } /* both rings sit inside the card: outer diameter about 1.2 times the map height, centered on the map */
.gp-ti--article.gp-ti--object .gp-ti__place .gp-ti__placename { margin-top: 4px; }
@container (max-width: 339px) {
	.gp-ti--article.gp-ti--mapcard .gp-ti__rings, .gp-ti--article.gp-ti--object .gp-ti__rings { --rp: 16px; }
	.gp-ti--article.gp-ti--mapcard .gp-ti__bigplace { font-size: 30px; line-height: 34px; }
	.gp-ti--article.gp-ti--mapcard .gp-ti__card, .gp-ti--article.gp-ti--object .gp-ti__card { padding: 16px; }
}
@container (max-width: 279px) {
	.gp-ti--article.gp-ti--mapcard .gp-ti__bigplace { font-size: 24px; line-height: 28px; }
}
@container (min-width: 700px) {
	.gp-ti--article.gp-ti--mapcard .gp-ti__card, .gp-ti--article.gp-ti--object .gp-ti__card { padding: 24px 40px; min-height: 0; }
	.gp-ti--article.gp-ti--mapcard .gp-ti__rings, .gp-ti--article.gp-ti--object .gp-ti__rings { --rp: 40px; }
	.gp-ti--article.gp-ti--mapcard .gp-ti__bigplace { font-size: 52px; line-height: 56px; }
}