/* About page sections, ported from jessiqueenux.com/about/. The sister sites share fonts and
   components; only the colors differ: the UX site's chartreuse/plum accents become teal/cool ink here. */
:root {
	--ab-ink: var(--wp--preset--color--contrast);                                    /* headings (same plum on both sites) */
	--ab-text: var(--wp--preset--color--deep);                                      /* body copy */
	--ab-soft: color-mix(in srgb, var(--wp--preset--color--deep) 75%, transparent); /* secondary copy, AA on light */
	--ab-accent: color-mix(in srgb, var(--wp--preset--color--teal-core) 80%, #000); /* eyebrows + small links, AA on light */
	--ab-highlight: var(--wp--preset--color--teal);                                 /* UX site's chartreuse role */
	--ab-border: var(--wp--preset--color--neutral-100);
	--ab-tint: var(--wp--preset--color--base);
	--ab-dark: var(--wp--preset--color--deep);
	--ab-darker: color-mix(in srgb, var(--wp--preset--color--deep) 70%, #000);
	--ab-display: var(--wp--preset--font-family--display);  /* Alte Haas Grotesk */
	--ab-ui: var(--wp--preset--font-family--ui);            /* JUST Sans */
	--ab-editorial: var(--wp--preset--font-family--body);   /* Zilla Slab, standing in for Modum */
	--ab-sticky-top: calc(var(--qa-admin-bar) + 150px);
}

/* Sections sit flush against each other (no block gap between the colored bands). */
.wp-block-post-content > .qa-story-header, .wp-block-post-content > .qa-about-story,
.wp-block-post-content > .qa-ab-section, .wp-block-post-content > .qa-story-sentinel { margin-block: 0 !important; }
.qa-ab-container { box-sizing: border-box; width: 100%; max-width: 1512px; margin-inline: auto; padding-inline: clamp(20px, 6.6vw, 96px); }
.qa-ab-section { padding-block: clamp(64px, 8vw, 96px); background: #fff; color: var(--ab-text); }
.qa-ab-section--tint { background: var(--ab-tint); }
.qa-ab-section--dark { background: var(--ab-dark); }
.qa-ab-section--darker { background: var(--ab-darker); }
#story, #cv, #beyond { scroll-margin-top: 150px; }

/* Shared header: eyebrow, title, lede */
.qa-ab-header { margin-bottom: 48px; }
.qa-ab-eyebrow { display: block; margin: 0 0 12px; font-family: var(--ab-editorial); font-weight: 600; font-size: 14px; letter-spacing: .08em;
	text-transform: uppercase; color: var(--ab-accent); }
.qa-ab-title { margin: 0; max-width: 22ch; font-family: var(--ab-display); font-weight: 700; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05;
	letter-spacing: -.02em; color: var(--ab-ink); }
.qa-skills-section .qa-ab-title, .qa-clients-section .qa-ab-title { max-width: 30ch; }
.qa-ab-lede { max-width: 640px; margin: 16px 0 0; font-family: var(--ab-ui); font-size: 18px; line-height: 1.6; color: var(--ab-soft); }
.qa-ab-section--dark .qa-ab-eyebrow, .qa-ab-section--darker .qa-ab-eyebrow { color: var(--ab-highlight); }
.qa-ab-section--dark .qa-ab-title, .qa-ab-section--darker .qa-ab-title { color: var(--wp--preset--color--base); }
.qa-ab-section--darker .qa-ab-lede { color: var(--wp--preset--color--neutral-200); }
.qa-ab-section--darker .qa-ab-lede a { color: var(--ab-highlight); text-underline-offset: 3px; }

/* Pill buttons (UX site's .btn-secondary) */
.qa-pill-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: 999px;
	border: 1.5px solid var(--ab-ink); background: none; color: var(--ab-ink) !important; font-family: var(--ab-ui); font-weight: 800; font-size: 12px;
	letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
	transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out; }
.qa-pill-btn:hover { background: var(--wp--preset--color--teal-core); border-color: var(--wp--preset--color--teal-core); color: #fff !important;
	box-shadow: 0 0 8px rgba(41, 133, 130, .3); }
.qa-pill-btn:active { background: rgba(53, 18, 49, .12); color: var(--ab-ink) !important; }
.qa-pill-btn:focus-visible { outline: 2px solid var(--wp--preset--color--teal-core); outline-offset: 2px; }
.qa-pill-btn--solid { background: var(--ab-ink); color: #fff !important; }
.qa-pill-btn span { transition: transform .15s ease-out; }
.qa-pill-btn:hover span { transform: translateX(4px); }

/* ---------- Sticky story header ---------- */
.qa-story-sentinel { display: block; height: 1px; }
.qa-story-header { position: sticky; z-index: 25; top: var(--qa-admin-bar); background: #fff; transition: top .3s ease-out, background-color .2s ease-out, box-shadow .2s ease-out; }
body:has(.qa-nav:not(.is-hidden)) .qa-story-header { top: calc(var(--qa-admin-bar) + var(--qa-nav-h-scrolled)); }
.qa-story-header.is-stuck { background: var(--ab-tint); box-shadow: 0 4px 6px rgba(11, 48, 63, .08); }
/* Spacing matches the UX site's story header: 48px rows (12px once stuck), 64/32/20px sides. */
.qa-story-header__row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px;
	padding-block: 48px; padding-inline: 64px; transition: padding .25s ease-out; }
.qa-story-header.is-stuck .qa-story-header__row { align-items: center; padding-block: 12px; }
.qa-story-header__links { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 26px; }
/* Figma Sticky Nav (4038:42878): cool-ink outline + text, 12x24px, 26px apart. */
.qa-story-header__links .qa-pill-btn { padding: 12px 24px; border-color: var(--ab-text); color: var(--ab-text) !important; letter-spacing: .04em; }
.qa-story-header__links a[aria-current="true"] { background: var(--ab-highlight); border-color: transparent; color: var(--ab-text) !important; box-shadow: none; }
.qa-story-intro { display: flex; flex-direction: column; gap: 8px; }
.qa-story-intro__name { margin: 0; font-family: var(--ab-display); font-weight: 700; font-size: clamp(40px, 4.4vw, 56px); line-height: 1.05;
	letter-spacing: -.02em; color: var(--ab-ink); transition: font-size .25s ease-out; }
.qa-story-header.is-stuck .qa-story-intro__name { font-size: 28px; line-height: 1.15; letter-spacing: -.01em; }
.qa-story-intro__title, .qa-story-intro__location { margin: 0; max-height: 60px; overflow: hidden; transition: opacity .2s ease-out, max-height .25s ease-out; }
.qa-story-header.is-stuck .qa-story-intro__title, .qa-story-header.is-stuck .qa-story-intro__location { max-height: 0; max-width: 0; opacity: 0; }
.qa-story-intro__title { font-family: var(--ab-display); font-weight: 700; font-size: 28px; line-height: 1.15; color: var(--ab-soft); }
.qa-story-intro__location { font-family: var(--ab-editorial); font-size: 15px; color: var(--ab-accent); }
@media (max-width: 1024px) {
	.qa-story-header__row { padding-inline: 32px; }
	.qa-story-header.is-stuck .qa-story-intro { display: none; }
}
@media (max-width: 640px) {
	.qa-story-header__row { padding-block: 32px; padding-inline: 20px; }
	.qa-story-header__links { flex-wrap: nowrap; gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
	.qa-story-header__links .qa-pill-btn { padding: 8px 11px; font-size: 10.5px; letter-spacing: .02em; }
}

/* ---------- Story blocks + bento grids ---------- */
.qa-about-story { background: #fff; padding-block: 48px clamp(64px, 8vw, 96px); }
.qa-about-story__blocks { display: flex; flex-direction: column; gap: clamp(64px, 8vw, 120px); }
.qa-story-block { display: flex; gap: clamp(32px, 5.5vw, 80px); }
.qa-story-block__intro { position: sticky; top: var(--ab-sticky-top); align-self: flex-start; flex: 0 0 min(400px, 32%); }
.qa-story-block__heading { margin: 0; font-family: var(--ab-display); font-weight: 700; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.2;
	letter-spacing: -.01em; color: var(--ab-ink); }
.qa-story-block__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.qa-story-block__body p { margin: 0; font-family: var(--ab-ui); font-size: 18px; line-height: 1.6; color: var(--ab-text); }
.qa-story-block__body p.qa-story-block__lead { font-size: 22px; line-height: 1.5; color: var(--ab-ink); }
.qa-story-block__body a { color: var(--ab-accent); }
.qa-bento { display: flex; flex-direction: column; gap: 16px; }
.qa-bento__row { display: flex; gap: 16px; }
.qa-bento__cell { position: relative; overflow: hidden; border-radius: 16px; }
.qa-bento__cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qa-bento__row--a .qa-bento__cell:first-child { flex: 1 1 0; min-width: 0; height: 320px; }
.qa-bento__row--a .qa-bento__cell:last-child { flex: 0 0 285px; height: 320px; }
.qa-bento__row--wide .qa-bento__cell { width: 100%; height: 403px; }
.qa-bento__row--collage .qa-bento__cell { width: 100%; aspect-ratio: 1536 / 521; }
.qa-bento__row--b .qa-bento__cell:first-child { flex: 0 0 285px; height: 444px; }
.qa-bento__row--b .qa-bento__cell:last-child { flex: 1 1 0; min-width: 0; height: 444px; }
@media (max-width: 900px) {
	.qa-story-block { flex-direction: column; gap: 24px; }
	.qa-story-block__intro { position: static; flex: none; }
}
@media (max-width: 640px) {
	.qa-bento__row:not(.qa-bento__row--collage) { flex-direction: column; }
	.qa-bento__row .qa-bento__cell { flex: 1 1 auto !important; width: 100%; height: 240px !important; }
	.qa-bento__row--collage .qa-bento__cell { height: auto !important; }
}

/* ---------- Art history timeline ---------- */
.qa-cv__download { margin: -24px 0 0; }
.qa-timeline { position: relative; margin-top: 64px; }
.qa-timeline__line { position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--ab-border); }
.qa-timeline__fill { position: absolute; top: 0; left: 0; width: 100%; height: 0; border-radius: 1px;
	background: linear-gradient(to bottom, var(--ab-highlight), var(--wp--preset--color--rose)); }
.qa-timeline__entry { display: flex; align-items: flex-start; gap: 64px; padding-top: 96px; }
.qa-timeline__entry:first-of-type { padding-top: 0; }
.qa-timeline__sticky { position: sticky; top: var(--ab-sticky-top); display: flex; align-items: center; gap: 16px; flex: 0 0 auto; min-width: 200px; }
.qa-timeline__dot { position: relative; z-index: 2; flex: none; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%;
	background: var(--ab-tint); border: 2px solid var(--wp--preset--color--neutral-200); }
.qa-timeline__year { margin: 0; max-width: 168px; font-family: var(--ab-display); font-weight: 700; font-size: 28px; line-height: 1.15;
	letter-spacing: -.01em; color: var(--ab-soft); }
.qa-timeline__content { flex: 1 1 auto; min-width: 0; padding-bottom: 56px; display: flex; flex-direction: column; gap: 32px; }
.qa-timeline__role { display: flex; flex-direction: column; gap: 16px; }
.qa-timeline__role h4 { margin: 0; font-family: var(--ab-display); font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: -.01em; color: var(--ab-ink); }
.qa-timeline__role p { margin: 0; max-width: 60ch; font-family: var(--ab-ui); font-size: 16px; line-height: 1.55; color: var(--ab-soft); }
.qa-timeline__role p.qa-timeline__where { margin-top: 4px; color: var(--ab-text); }
.qa-timeline__role p.qa-timeline__highlights { font-family: var(--ab-editorial); font-size: 15px; color: var(--ab-accent); }
@media (max-width: 640px) {
	.qa-timeline__entry { flex-direction: column; gap: 12px; padding-top: 48px; padding-left: 32px; }
	.qa-timeline__sticky { position: static; margin-left: -32px; }
	.qa-timeline__role h4 { font-size: 24px; }
}

/* ---------- Skills carousel ---------- */
.qa-skills__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.qa-filter-pill { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--ab-ink); background: none;
	color: var(--ab-ink); font-family: var(--ab-ui); font-weight: 800; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
	cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out; }
.qa-filter-pill:hover { background: var(--wp--preset--color--teal-core); border-color: var(--wp--preset--color--teal-core); color: #fff; box-shadow: 0 0 8px rgba(41, 133, 130, .3); }
.qa-filter-pill[aria-selected="true"] { background: var(--ab-highlight); border-color: transparent; color: var(--ab-text); box-shadow: none; }
.qa-filter-pill:focus-visible { outline: 2px solid var(--wp--preset--color--teal-core); outline-offset: 2px; }
.qa-skills__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
	padding: 8px 8px 16px; margin: 0 -8px; }
.qa-skills__track::-webkit-scrollbar { display: none; }
.qa-skills__track[hidden] { display: none; }
.qa-skills__track:focus-visible { outline: 2px solid var(--wp--preset--color--teal-core); outline-offset: 2px; border-radius: 8px; }
.qa-skills__card { flex: 0 0 220px; box-sizing: border-box; min-height: 110px; display: flex; align-items: center; justify-content: center; text-align: center;
	padding: 24px; scroll-snap-align: start; background: var(--ab-tint); border: 1px solid var(--ab-border); border-radius: 8px;
	transition: border-color .15s ease, transform .15s ease; }
.qa-skills__card:hover { border-color: var(--wp--preset--color--teal-core); transform: translateY(-2px); }
.qa-skills__card span { font-family: var(--ab-display); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--ab-ink); }
.qa-skills__nav { display: flex; gap: 8px; margin-top: 16px; }
.qa-skills__arrow { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
	background: var(--ab-dark); color: var(--ab-highlight); cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease, color .15s ease; }
.qa-skills__arrow svg { width: 20px; height: 14px; }
.qa-skills__arrow:hover:not([aria-disabled="true"]) { box-shadow: 0 0 0 2px var(--ab-highlight), 0 0 10px rgba(0, 191, 186, .35); }
.qa-skills__arrow:active:not([aria-disabled="true"]) { background: var(--ab-darker); }
.qa-skills__arrow:focus-visible { outline: 2px solid var(--wp--preset--color--teal-core); outline-offset: 4px; }
.qa-skills__arrow[aria-disabled="true"] { color: var(--wp--preset--color--neutral-200); opacity: .55; cursor: default; }
@media (max-width: 640px) { .qa-skills__card { flex-basis: 170px; } }

/* ---------- Awards (UX certifications grid) ---------- */
.qa-awards-section { background: var(--ab-tint); }
.qa-awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.qa-awards__item { display: flex; flex-direction: column; gap: 12px; min-height: 260px; box-sizing: border-box; padding: 32px 28px; border-radius: 8px;
	background: #fff; border: 1px solid var(--ab-border); }
.qa-awards__crown { width: 48px; height: 24px; margin-bottom: auto; }
.qa-awards__item h3 { margin: 24px 0 0; font-family: var(--ab-display); font-weight: 700; font-size: 32px; line-height: 1.05; letter-spacing: -.01em; color: var(--ab-ink); }
.qa-awards__item ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.qa-awards__item li li { font-family: var(--ab-editorial); font-size: 15px; line-height: 1.45; color: var(--ab-accent); }

/* ---------- Tools slider ---------- */
.qa-tools { display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: space-between; gap: 32px; }
.qa-tools__labels { display: flex; flex-direction: column; gap: 8px; }
.qa-tools__label { display: block; margin: 0; padding: 4px 0; border: 0; background: none; cursor: pointer; text-align: left;
	font-family: var(--ab-display); font-weight: 700; font-size: clamp(28px, 4.5vw, 44px); line-height: 1.15; letter-spacing: -.01em; color: var(--ab-ink); }
.qa-tools__label:focus-visible { outline: 2px solid var(--wp--preset--color--teal-core); outline-offset: 4px; }
.qa-tools__word { display: inline-block; white-space: nowrap; }
.qa-tools__cell { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.qa-tools__char { display: inline-block; transition: transform .3s cubic-bezier(.25, .46, .45, .94); }
.qa-tools__char--ghost { color: var(--wp--preset--color--neutral-200); }
.qa-tools__char--active { position: absolute; left: 0; top: 0; color: var(--ab-ink); transform: translateY(110%); }
.qa-tools__label.is-active .qa-tools__char--ghost { transform: translateY(-110%); }
.qa-tools__label.is-active .qa-tools__char--active { transform: none; }
.qa-tools__panels { position: relative; display: grid; flex: none; height: 400px; max-width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; }
.qa-tools__panel { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; clip-path: inset(0 0 100% 0);
	transition: clip-path .6s cubic-bezier(.33, 1, .68, 1); }
.qa-tools__panel.is-active { clip-path: inset(0); }
.qa-tools__panel svg { width: 88px; height: 88px; }
.qa-tools__panel--plum { background: var(--wp--preset--color--contrast); color: #fff; }
.qa-tools__panel--teal { background: var(--wp--preset--color--teal); color: var(--ab-text); }
.qa-tools__panel--ink { background: var(--wp--preset--color--deep); color: #fff; }
.qa-tools__panel--rose { background: var(--wp--preset--color--rose); color: #fff; }
.qa-tools__panel--teal-core { background: var(--wp--preset--color--teal-core); color: #fff; }
@media (max-width: 640px) {
	.qa-tools { flex-direction: column-reverse; align-items: stretch; }
	.qa-tools__panels { width: 100%; height: auto; }
}

/* ---------- Client marquee ---------- */
.qa-clients-section .qa-ab-header { margin-bottom: 24px; }
.qa-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.qa-marquee__row { display: flex; align-items: center; gap: 16px; width: max-content; margin: 0; padding: 24px 0; list-style: none;
	animation: qa-marquee 60s linear infinite; }
.qa-marquee:hover .qa-marquee__row { animation-play-state: paused; }
.qa-marquee__item { display: flex; align-items: center; justify-content: center; height: 96px; padding: 0 32px; border-radius: 8px; white-space: nowrap;
	background: var(--ab-tint); border: 1px solid var(--ab-border); font-family: var(--ab-display); font-weight: 700; font-size: 18px; color: var(--ab-soft);
	transition: border-color .15s ease, color .15s ease, transform .15s ease; }
.qa-marquee__item:hover { border-color: var(--wp--preset--color--teal-core); color: var(--ab-ink); transform: translateY(-2px); }
@keyframes qa-marquee { to { transform: translateX(calc(-50% - 8px)); } }

/* ---------- Beyond the chalk ---------- */
.qa-beyond { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; }
.qa-beyond__item { display: flex; flex-direction: column; gap: 24px; }
.qa-beyond__photo { margin: 0; height: 380px; border-radius: 8px; overflow: hidden; }
.qa-beyond__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qa-beyond__text { display: flex; flex-direction: column; gap: 12px; }
.qa-beyond__text h3 { margin: 0; font-family: var(--ab-display); font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -.01em; color: var(--wp--preset--color--base); }
.qa-beyond__text p { margin: 0; font-family: var(--ab-ui); font-size: 18px; line-height: 1.6; color: var(--wp--preset--color--neutral-100); }
.qa-beyond__text p.qa-beyond__org { font-family: var(--ab-editorial); font-size: 15px; color: var(--ab-highlight); }
@media (max-width: 768px) { .qa-beyond { grid-template-columns: 1fr; gap: 32px; } .qa-beyond__photo { height: 260px; } }

/* ---------- Instagram grid (middle column stays put while the outer two scroll) ---------- */
.qa-insta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 clamp(20px, 2.2vw, 32px); }
.qa-insta__col { display: flex; flex-direction: column; gap: 10px; }
.qa-insta__col--sticky { position: sticky; top: 0; height: 100vh; display: grid; grid-template-rows: repeat(2, 1fr); }
.qa-insta__figure { margin: 0; height: 400px; border-radius: 16px; overflow: hidden; }
.qa-insta__col--sticky .qa-insta__figure { height: 100%; }
.qa-insta__figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .qa-insta__figure { height: 280px; } }
@media (max-width: 768px) {
	.qa-insta { grid-template-columns: 1fr; gap: 16px; }
	.qa-insta__col--sticky { position: static; height: auto; display: flex; }
	.qa-insta__figure, .qa-insta__col--sticky .qa-insta__figure { height: 320px; }
}

/* ---------- Places we've chalked (Figma 4050:43215): full-bleed dotted map + city tag index ---------- */
.qa-dotmap-section { padding-bottom: 120px; }
.qa-dotmap { position: relative; width: 100%; overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent); }
.qa-dotmap__inner { position: relative; width: 100%; aspect-ratio: 1210 / 480; }
.qa-dotmap__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.qa-dotmap__land { fill: none; stroke: var(--wp--preset--color--neutral-200); stroke-width: 4.4; stroke-linecap: round; }
.qa-dotmap__pin { position: absolute; z-index: 1; width: 12px; height: 12px; padding: 0; border: 0; translate: -50% -50%; border-radius: 50%; cursor: pointer;
	background: color-mix(in srgb, var(--wp--preset--color--teal-core) 80%, #000); box-shadow: 0 0 0 3px rgba(0, 191, 186, .22);
	transition: scale .2s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease; }
.qa-dotmap__pin::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--wp--preset--color--teal);
	animation: qa-pin-pulse 2.4s ease-out infinite; animation-delay: calc(var(--i) * .33s); }
/* City-name label (Figma "City-name rollover label"): teal fill, plum outline, cool-ink type, teal glow. */
.qa-dotmap__label { position: absolute; left: calc(100% + 8px); top: 50%; translate: 0 -50%; display: none; padding: 6px 14px; border-radius: 4px;
	white-space: nowrap; background: var(--wp--preset--color--teal); border: 1px solid var(--wp--preset--color--rose); color: var(--wp--preset--color--deep);
	font: 700 12px/1.2 var(--ab-display); letter-spacing: 1px; box-shadow: 0 0 6px rgba(0, 191, 186, .5); pointer-events: none; }
.qa-dotmap__pin--flip .qa-dotmap__label { left: auto; right: calc(100% + 8px); } /* pins near the right edge label to the left */
.qa-dotmap__pin:hover, .qa-dotmap__pin.is-active { z-index: 3; scale: 1.45; background: var(--wp--preset--color--teal); }
.qa-dotmap__pin:hover .qa-dotmap__label, .qa-dotmap__pin.is-active .qa-dotmap__label { display: block; scale: calc(1 / 1.45); transform-origin: left center; }
.qa-dotmap__pin--flip .qa-dotmap__label { transform-origin: right center; }
.qa-dotmap__pin.is-active::before { animation-duration: 1.4s; animation-delay: 0s; }
@keyframes qa-pin-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3.2); opacity: 0; } }

/* Art card (Figma 4053:43436): square photo, plum outline, teal city label with glow; opens above the pin. */
.qa-map-card { position: absolute; z-index: 5; width: 132px; translate: -50% calc(-100% - 14px); display: none; flex-direction: column; overflow: hidden;
	border: 1px solid var(--wp--preset--color--rose); border-radius: 4px; background: var(--wp--preset--color--teal); text-decoration: none;
	box-shadow: 0 0 12px 2px rgba(0, 191, 186, .5), 0 10px 24px rgba(11, 48, 63, .25); transform-origin: 50% 100%; }
.qa-map-card.is-open { display: flex; animation: qa-card-in .28s cubic-bezier(.34, 1.4, .64, 1) both; }
.qa-map-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: scale .3s ease; }
.qa-map-card__label { padding: 6px 12px 0; color: var(--wp--preset--color--deep); font: 700 12px/1.25 var(--ab-display); letter-spacing: 1px; }
.qa-map-card__cta { overflow: hidden; padding: 2px 12px 7px; color: var(--wp--preset--color--deep); font: italic 400 12px/1.3 var(--ab-editorial);
	white-space: nowrap; text-overflow: ellipsis; }
.qa-map-card:hover img { scale: 1.06; }
.qa-map-card:hover .qa-map-card__cta { text-decoration: underline; }
.qa-map-card--below { translate: -50% 14px; transform-origin: 50% 0; }
.qa-map-card--right { translate: -12px calc(-100% - 14px); }
.qa-map-card--left { translate: calc(-100% + 12px) calc(-100% - 14px); }
/* With a card open, the pin's own name label would duplicate it. */
.qa-dotmap__pin.has-art.is-active .qa-dotmap__label { display: none; }
@keyframes qa-card-in { from { opacity: 0; scale: .85; } to { opacity: 1; scale: 1; } }
/* Tags for cities with art carry a small marker. */
.qa-place-tag.has-art::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: currentColor; }
.qa-places__tags li { display: flex; align-items: center; gap: 8px; }
.qa-place-link.screen-reader-text:focus { position: static !important; width: auto; height: auto; clip: auto; clip-path: none; padding: 4px 8px;
	background: #fff; color: var(--wp--preset--color--deep); font: 600 13px/1.3 var(--ab-ui); }

/* City index: divider, five region columns of System tags (cool-ink fill, teal outline + type). */
.qa-places { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin-top: 48px; padding-top: 48px;
	border-top: 1px solid var(--wp--preset--color--neutral-200); }
.qa-places__heading { margin: 0 0 16px; font-family: var(--ab-editorial); font-weight: 400; font-size: 14px; line-height: 1.4; letter-spacing: 1px;
	text-transform: uppercase; color: var(--wp--preset--color--muted); }
.qa-places__tags { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qa-place-tag { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 4px; cursor: pointer; white-space: nowrap;
	background: var(--wp--preset--color--deep); border: 1px solid var(--wp--preset--color--teal); color: var(--wp--preset--color--teal);
	font: 700 12px/1.2 var(--ab-display); letter-spacing: 1px; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease; }
.qa-place-tag:hover { box-shadow: 0 0 6px rgba(0, 191, 186, .5); }
.qa-place-tag[aria-pressed="true"] { background: var(--wp--preset--color--teal); border-color: var(--wp--preset--color--rose); color: var(--wp--preset--color--deep);
	box-shadow: 0 0 6px rgba(0, 191, 186, .5); }
.qa-place-tag:focus-visible { outline: 2px solid var(--wp--preset--color--teal-core); outline-offset: 2px; }
.qa-place-tag--nopin { cursor: default; opacity: .6; }
@media (max-width: 1100px) { .qa-places { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 760px) {
	/* Phones: the map keeps a readable size and scrolls sideways; tags wrap in rows. */
	.qa-dotmap { overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
	.qa-dotmap::-webkit-scrollbar { display: none; }
	.qa-dotmap__inner { width: 900px; }
	.qa-places { grid-template-columns: 1fr; row-gap: 32px; margin-top: 32px; padding-top: 32px; }
	.qa-places__tags { flex-direction: row; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
	.qa-dotmap__pin::before { animation: none; display: none; }
	.qa-dotmap__pin, .qa-dotmap { transition: none; scroll-behavior: auto; }
	.qa-map-card.is-open { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
	.qa-marquee__row { animation: none; flex-wrap: wrap; width: auto; }
	.qa-marquee__item--dup { display: none; }
	.qa-skills__track { scroll-behavior: auto; }
	.qa-skills__card:hover, .qa-marquee__item:hover { transform: none; }
	.qa-tools__char { transition: none; }
	.qa-tools__panel { clip-path: none; opacity: 0; transition: opacity .2s ease; }
	.qa-tools__panel.is-active { opacity: 1; }
}