/*
 * About — page-specific override layer over the inline desktop spec (desktop
 * >=1280 is the binding inline design, untouched). Rebuilt for design round 7
 * from "V5 Release/About.dc.html": style-hover attributes become .ab-* classes
 * and the .rsp-* responsive layer (1279/1023/767). Globals (hpRise, grain,
 * data-rev) come from tokens.css/site.css.
 */

/* Light-page scrollbar (overrides the global dark one while this CSS is loaded). */
::-webkit-scrollbar-track { background: #ece6f6; }
::-webkit-scrollbar-thumb { background: #cabfe4; border-radius: 8px; border: 3px solid #ece6f6; }

/* Links, jump chips and the mint button. */
.ab-link { color: #6D5DF3; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; transition: gap .2s ease, color .2s ease; }
.ab-link:hover { gap: 11px; color: #5547d6; }
.ab-link-w { color: #9385FF; }
.ab-link-w:hover { color: #fff; }
.ab-jump { color: #C8BCE8; text-decoration: none; font-size: 15px; font-weight: 500; padding: 9px 16px; white-space: nowrap; border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.ab-jump:hover { color: #fff; border-color: #9385FF; background: rgba(147,133,255,0.14); }
.ab-mint { transition: background .16s ease; }
.ab-mint:hover { background: #35c98a; }

/* Timeline thumbnails: the browser frame scrolls its screenshot on hover. */
.ab-shot { position: relative; overflow: hidden; aspect-ratio: 16/10; background: #f4f0fb; container-type: size; }
.ab-shot img { position: absolute; top: 0; left: -10%; width: 120%; height: auto; display: block; transform: translateY(0); transition: transform 2.6s cubic-bezier(.4,0,.2,1); }
figure:hover .ab-shot img { transform: translateY(calc(100cqh - 100%)); }

/* Backer chips on the dark stage. */
.ab-backer { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 13px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #fff; font-size: 15px; font-weight: 700; }

/* ===== RESPONSIVE OVERRIDE LAYER · desktop (>=1280px) is the inline spec ===== */
@media (max-width: 1279px) {
	.rsp-hero { padding-left: 32px !important; padding-right: 32px !important; }
	.rsp-sec { padding-left: 32px !important; padding-right: 32px !important; }
	.rsp-team { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 1023px) {
	.rsp-hero { padding-left: 24px !important; padding-right: 24px !important; }
	.rsp-sec { padding-left: 24px !important; padding-right: 24px !important; }
	.rsp-split { grid-template-columns: 1fr !important; }
	.rsp-note { grid-template-columns: 1fr !important; }
	.rsp-tiles4 { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-tiles3 { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-tiles6 { grid-template-columns: repeat(3, 1fr) !important; }
	.rsp-team { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-tl { grid-template-columns: 72px 1fr !important; }
	.rsp-shots figure { width: 220px !important; }
	.rsp-rail { display: none !important; }
}
@media (max-width: 767px) {
	[data-mascot][style*="absolute"] { display: none !important; }
	.rsp-hero { padding-left: 16px !important; padding-right: 16px !important; padding-top: 124px !important; padding-bottom: 110px !important; }
	.rsp-sec { padding-left: 16px !important; padding-right: 16px !important; padding-top: 56px !important; padding-bottom: 56px !important; }
	.rsp-tiles4 { grid-template-columns: 1fr !important; }
	.rsp-tiles3 { grid-template-columns: 1fr !important; }
	.rsp-tiles6 { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-team { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-tl { grid-template-columns: 1fr !important; }
	.rsp-tlcard { grid-template-columns: 1fr !important; }
	.rsp-shots figure { width: 100% !important; }
	.rsp-tl-year { text-align: left !important; padding-top: 0 !important; }
	.rsp-rail { display: none !important; }
	.rsp-url { width: 100% !important; }
	.rsp-jumps { display: none !important; }
}

/* Responsive sweep (Sep 2026): the #story timeline ran off-screen on tablet
 * and phones. Its `1fr` tracks grew to the card's min width (the card's image
 * row is ~357px wide), so the tracks use minmax(0,1fr), and the card stacks
 * from tablet down rather than squeezing its text beside the images. */
@media (max-width: 1023px) {
	.rsp-tl { grid-template-columns: 72px minmax(0, 1fr) !important; }
	.rsp-tlcard { grid-template-columns: minmax(0, 1fr) !important; }
	.rsp-tl > *, .rsp-tlcard > * { min-width: 0; }
}
@media (max-width: 767px) {
	.rsp-tl { grid-template-columns: minmax(0, 1fr) !important; }
}