/*
 * WP 02 — About page (pattern workingprint/w2-about).
 * Figma "About — Desktop" 462:1514 (1920 wide) and "About — Mobile" 465:1752 (440 wide).
 * Numbers are Figma px times var(--u) (see wp2.css).
 */

.w2a-hero .w2-in > *, .w2a-desk .w2-in > *, .w2a-principles .w2-in > *, .w2a-exp .w2-in > *, .w2a-now .w2-in > * { margin: 0; }
.w2a-hero p, .w2a-desk p, .w2a-principles p, .w2a-exp p, .w2a-now p { margin: 0; }

/* ---------- 01 hero (462:1532) ---------- */
.w2a-hero { overflow: clip; }
.w2a-hero > .w2-in { min-height: calc(1120 * var(--u)); padding-top: calc(100 * var(--u)); padding-bottom: calc(80 * var(--u)); box-sizing: border-box; }
.w2a-hero__title {
	--fs: 319; position: relative; z-index: 5; height: calc(250 * var(--u)); line-height: calc(250 * var(--u)); margin-top: calc(32 * var(--u)) !important;
	letter-spacing: 0; overflow: visible; top: calc(32 * var(--u));
}
.w2a-hero__lede { --fs: 84; position: relative; z-index: 5; max-width: calc(900 * var(--u)); line-height: .92; margin-top: calc(50 * var(--u)) !important; }
.w2a-hero__bio { --fs: 22; position: relative; z-index: 5; max-width: calc(760 * var(--u)); margin-top: calc(46 * var(--u)) !important; }
.w2a-hero__btns { position: relative; z-index: 5; margin-top: calc(105 * var(--u)) !important; }

.w2a-hero__art { position: absolute !important; inset: 0; margin: 0 !important; pointer-events: none; }
.w2a-hero__art > * { position: absolute !important; margin: 0 !important; }
.w2a-hero__back { left: calc(828 * var(--u)); top: calc(345 * var(--u)); width: calc(1164 * var(--u)); height: calc(730 * var(--u)); z-index: 1; }
.w2a-hero__portrait { left: calc(1180 * var(--u)); top: calc(110 * var(--u)); width: calc(514 * var(--u)); height: calc(668 * var(--u)); z-index: 2; background: var(--c-purple); overflow: hidden; }
.w2a-hero__front { left: calc(1041 * var(--u)); top: calc(551 * var(--u)); width: calc(668 * var(--u)); height: calc(446 * var(--u)); z-index: 3; }
.w2a-hero__back img, .w2a-hero__front img, .w2a-hero__cup img { object-fit: contain !important; }

/* sticker "20+ years" */
.w2a-sticker {
	left: calc(1123.4 * var(--u)); top: calc(61.4 * var(--u)); width: calc(230 * var(--u)); height: calc(230 * var(--u)); z-index: 4;
	box-sizing: border-box; border: max(1.5px, calc(2 * var(--u))) solid var(--c-black); border-radius: 50%;
	background: var(--c-yellow); color: var(--c-black); text-align: center; transform: rotate(12deg);
	transition: transform .35s ease;
}
.w2a-hero:hover .w2a-sticker { transform: rotate(4deg) scale(1.03); }
.w2a-sticker > * { position: absolute; left: 0; right: 0; margin: 0 !important; }
.w2a-sticker__big { --fs: 96; --fmin: 30px; top: calc(52 * var(--u)); line-height: .85; }
.w2a-sticker__small { --fs: 12; --fmin: 8px; top: calc(150 * var(--u)); font-weight: 500; letter-spacing: 1px; line-height: 1.2; }

/* ---------- 02 marquee (462:1557) ---------- */
.w2a-marquee { height: calc(170 * var(--u)); overflow: hidden; display: flex; align-items: center; }
.w2a-marquee > * { margin: 0 !important; }
.w2a-marquee__track { display: flex; flex: none; width: max-content; margin-left: calc(60 * var(--u)) !important; animation: w2a-marquee 36s linear infinite; }
.w2a-marquee__track > *, .w2a-marquee__set > * { margin: 0 !important; }
.w2a-marquee__set { display: flex; flex: none; align-items: center; }
.w2a-marquee__word { --fs: 113; display: flex; align-items: center; height: calc(86 * var(--u)); line-height: calc(86 * var(--u)); letter-spacing: 0; position: relative; top: calc(14 * var(--u)); }
.w2a-marquee__word::after {
	content: ""; flex: none; width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin: 0 calc(36 * var(--u));
	border-radius: 50%; background: var(--c-purple); position: relative; top: calc(-14 * var(--u));
}
.w2a-marquee__note { position: absolute; left: calc(1660 * var(--u)); top: calc(140 * var(--u)); --fs: 12; --fmin: 10px; letter-spacing: 1px; color: rgba(255, 255, 255, .55); }
.w2a-marquee:hover .w2a-marquee__track { animation-play-state: paused; }
@keyframes w2a-marquee { to { transform: translateX(-50%); } }

/* ---------- 03 what's on my desk (462:1577) ---------- */
.w2a-desk > .w2-in { display: grid; grid-template-columns: calc(1200 * var(--u)) 1fr; padding-top: calc(110 * var(--u)); padding-bottom: calc(60 * var(--u)); }
.w2a-desk__label { grid-column: 1 / -1; }
.w2a-desk__title { --fs: 140; line-height: .85; margin-top: calc(22 * var(--u)) !important; white-space: nowrap; }
.w2a-desk__intro { --fs: 22; line-height: 1.55; max-width: calc(560 * var(--u)); margin-top: calc(52 * var(--u)) !important; }
.w2a-desk__board { grid-column: 1 / -1; position: relative; height: calc(800 * var(--u)); margin-top: calc(51 * var(--u)) !important; background: #ededed; overflow: hidden; }
.w2a-desk__item { display: contents; }
.w2a-desk__obj { position: absolute; margin: 0 !important; }
.w2a-desk__obj img { transition: transform .35s ease; }
.w2a-desk__obj:hover img { transform: rotate(-4deg) scale(1.05); }
.w2a-desk__tag { position: absolute; display: flex; flex-direction: column; gap: calc(6 * var(--u)); width: calc(250 * var(--u)); }
.w2a-desk__tag > * { margin: 0 !important; }
.w2a-desk__name { --fs: 13; --fmin: 10px; display: flex; align-items: center; gap: calc(10 * var(--u)); letter-spacing: 1px; line-height: 1.3; }
.w2a-desk__name::before { content: ""; flex: none; width: max(7px, calc(10 * var(--u))); height: max(7px, calc(10 * var(--u))); border-radius: 50%; background: var(--c-pink); }
.w2a-desk__name.is-purple::before { background: var(--c-purple); }
.w2a-desk__name.is-yellow::before { background: var(--c-yellow); }
.w2a-desk__note { --fs: 18; --fmin: 13px; line-height: 1.45; }

.is-coffee > .w2a-desk__obj { left: calc(100 * var(--u)); top: calc(70 * var(--u)); width: calc(240 * var(--u)); height: calc(281 * var(--u)); }
.is-coffee > .w2a-desk__tag { left: calc(100 * var(--u)); top: calc(370 * var(--u)); }
.is-donut > .w2a-desk__obj { left: calc(110 * var(--u)); top: calc(560 * var(--u)); width: calc(190 * var(--u)); height: calc(198 * var(--u)); }
.is-donut > .w2a-desk__tag { left: calc(330 * var(--u)); top: calc(610 * var(--u)); }
.is-notebook > .w2a-desk__obj { left: calc(620 * var(--u)); top: calc(190 * var(--u)); width: calc(460 * var(--u)); height: calc(315 * var(--u)); }
.is-notebook > .w2a-desk__tag { left: calc(640 * var(--u)); top: calc(110 * var(--u)); }
.is-redpen > .w2a-desk__obj { left: calc(660 * var(--u)); top: calc(540 * var(--u)); width: calc(210 * var(--u)); height: calc(210 * var(--u)); }
.is-redpen > .w2a-desk__tag { left: calc(880 * var(--u)); top: calc(640 * var(--u)); }
.is-pencil > .w2a-desk__obj { left: calc(1210 * var(--u)); top: calc(158 * var(--u)); width: calc(219.5 * var(--u)); height: calc(348.6 * var(--u)); }
.is-pencil > .w2a-desk__tag { left: calc(1300 * var(--u)); top: calc(90 * var(--u)); }
.is-swatch > .w2a-desk__obj { left: calc(1460 * var(--u)); top: calc(300 * var(--u)); width: calc(210 * var(--u)); height: calc(188.5 * var(--u)); }
.is-swatch > .w2a-desk__tag { left: calc(1460 * var(--u)); top: calc(500 * var(--u)); }
.is-keypad > .w2a-desk__obj { left: calc(1180 * var(--u)); top: calc(520 * var(--u)); width: calc(200 * var(--u)); height: calc(207.6 * var(--u)); }
.is-keypad > .w2a-desk__tag { left: calc(1400 * var(--u)); top: calc(640 * var(--u)); }

/* ---------- 04 principles (462:1624) ---------- */
.w2a-principles { background: var(--c-yellow); color: var(--c-black); }
.w2a-principles > .w2-in { padding-top: calc(110 * var(--u)); padding-bottom: calc(40 * var(--u)); }
.w2a-principles__title { --fs: 140; line-height: .85; margin: calc(22 * var(--u)) 0 calc(71 * var(--u)) !important; }
.w2a-principle { display: grid; grid-template-columns: calc(180 * var(--u)) calc(1020 * var(--u)) 1fr; align-items: start; box-sizing: border-box; height: calc(160 * var(--u)); padding-top: calc(26 * var(--u)); border-top: 2px solid var(--c-black); }
.w2a-principle > * { margin: 0 !important; }
.w2a-principle__num { --fs: 96; line-height: .85; transition: color .2s ease; }
.w2a-principle__title { --fs: 60; line-height: .95; max-width: calc(860 * var(--u)); margin-top: calc(12 * var(--u)) !important; }
.w2a-principle__text { --fs: 20; line-height: 1.55; max-width: calc(560 * var(--u)); margin-top: calc(16 * var(--u)) !important; }
.w2a-principle:hover .w2a-principle__num { color: var(--c-pink); }

/* ---------- 05 experience (462:1647) ---------- */
.w2a-exp > .w2-in { display: grid; grid-template-columns: calc(1000 * var(--u)) 1fr; column-gap: calc(120 * var(--u)); align-items: start; padding-top: calc(110 * var(--u)); padding-bottom: calc(166 * var(--u)); }
.w2a-exp__label { grid-column: 1 / -1; }
.w2a-exp__title { grid-column: 1 / -1; --fs: 140; line-height: .85; margin: calc(22 * var(--u)) 0 calc(71 * var(--u)) !important; }
.w2a-exp__main > *, .w2a-jobs > * { margin: 0 !important; }
.w2a-jobs { border-bottom: 1px solid var(--c-black); }
.w2a-job { display: grid; grid-template-columns: calc(480 * var(--u)) 1fr auto; align-items: start; box-sizing: border-box; height: calc(120 * var(--u)); padding-top: calc(29 * var(--u)); border-top: 1px solid var(--c-black); }
.w2a-job > * { margin: 0 !important; }
.w2a-job__title { --fs: 44; line-height: 1.2; white-space: nowrap; }
.w2a-job__co { --fs: 20; line-height: 1.2; color: rgba(0, 0, 0, .75); margin-top: calc(10 * var(--u)) !important; }
.w2a-job__when { --fs: 14; line-height: 1.3; margin-top: calc(14 * var(--u)) !important; text-align: right; }
.w2a-exp__btns { margin-top: calc(50 * var(--u)) !important; }
.w2a-exp__main > .w2a-exp__btns:first-child { margin-top: 0 !important; }
.w2a-exp__brands { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.w2a-exp__brands > * { margin: 0 !important; }
.w2a-exp__brands-label { --fs: 13; }
.w2a-exp__brands .w2-tag { transition: background-color .2s ease, color .2s ease; }
.w2a-exp__brands .w2-tag:hover { background: var(--c-black); color: var(--c-white); }

/* ---------- 06 currently (462:1713) ---------- */
.w2a-now { background: var(--c-purple); color: var(--c-white); z-index: 2; overflow-x: clip; }
.w2a-now > .w2-in { min-height: calc(496 * var(--u)); box-sizing: border-box; padding-top: calc(100 * var(--u)); padding-bottom: calc(80 * var(--u)); }
.w2a-now__label { color: rgba(255, 255, 255, .7); position: relative; z-index: 1; }
.w2a-now__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, calc(380 * var(--u))); column-gap: calc(40 * var(--u)); margin-top: calc(62 * var(--u)) !important; }
.w2a-now__item { border-top: 1px solid rgba(255, 255, 255, .5); padding-top: calc(29 * var(--u)); }
.w2a-now__item > * { margin: 0 !important; }
.w2a-now__what { --fs: 13; --fmin: 10px; color: var(--c-yellow); letter-spacing: 1px; line-height: 1.3; margin-bottom: calc(23 * var(--u)) !important; }
.w2a-now__value { --fs: 52; line-height: .95; max-width: calc(360 * var(--u)); }
.w2a-now__phones { position: absolute !important; z-index: 2; left: calc(973 * var(--u)); top: calc(-84 * var(--u)); width: calc(314 * var(--u)); height: calc(336 * var(--u)); margin: 0 !important; transition: transform .4s ease; }
.w2a-now:hover .w2a-now__phones { transform: rotate(-4deg) translateY(-6px); }

/* ---------- mobile (440 frames) ---------- */
@media (max-width: 899px) {
	/* hero 465:1763 */
	.w2a-hero > .w2-in { display: flex; flex-direction: column; gap: calc(24 * var(--u)); min-height: 0; padding-top: calc(40 * var(--u)); padding-bottom: calc(72 * var(--u)); }
	.w2a-hero .w2-in > * { margin: 0 !important; }
	.w2a-hero__title { --fs: 130; height: calc(102 * var(--u)); line-height: calc(102 * var(--u)); top: calc(13 * var(--u)); }
	.w2a-hero__art { position: relative !important; inset: auto; width: calc(392 * var(--u)); height: calc(500 * var(--u)); }
	.w2a-hero__portrait { left: calc(32 * var(--u)); top: calc(20 * var(--u)); width: calc(360 * var(--u)); height: calc(480 * var(--u)); }
	.w2a-hero__cup { display: block; left: calc(-20 * var(--u)); top: calc(340 * var(--u)); width: calc(130 * var(--u)); height: calc(152 * var(--u)); z-index: 3; transform: rotate(10deg); }
	.w2a-sticker { left: calc(-16 * var(--u)); top: calc(13 * var(--u)); width: calc(140 * var(--u)); height: calc(140 * var(--u)); }
	.w2a-sticker__big { --fs: 60; top: calc(30 * var(--u)); }
	.w2a-sticker__small { --fs: 9; --fmin: 8px; top: calc(92 * var(--u)); letter-spacing: .6px; }
	.w2a-hero__lede { --fs: 52; max-width: none; }
	.w2a-hero__bio { --fs: 17; max-width: none; }
	.w2a-hero__btns { flex-direction: column; gap: calc(24 * var(--u)); }
	.w2a-hero__btns .wp-block-button, .w2a-exp__btns .wp-block-button { width: 100%; }
	.w2a-hero__btns .wp-block-button__link, .w2a-exp__btns .wp-block-button__link { width: 100%; justify-content: space-between; }

	/* marquee 465:1787 */
	.w2a-marquee { height: calc(96 * var(--u)); }
	.w2a-marquee__track { margin-left: calc(24 * var(--u)) !important; animation-duration: 24s; }
	.w2a-marquee__word { --fs: 58; --fmin: 30px; height: calc(44 * var(--u)); line-height: calc(44 * var(--u)); top: calc(7 * var(--u)); }
	.w2a-marquee__word::after { width: calc(10 * var(--u)); height: calc(10 * var(--u)); margin: 0 calc(18 * var(--u)); top: calc(-7 * var(--u)); }
	.w2a-marquee__note { display: none; }

	/* desk 465:1797 */
	.w2a-desk > .w2-in { display: flex; flex-direction: column; gap: calc(24 * var(--u)); padding-top: calc(56 * var(--u)); padding-bottom: calc(72 * var(--u)); }
	.w2a-desk .w2-in > * { margin: 0 !important; }
	.w2a-desk__title { --fs: 64; line-height: .9; }
	.w2a-desk__intro { --fs: 17; max-width: none; }
	.w2a-desk__board { display: grid; grid-template-columns: 1fr 1fr; gap: calc(28 * var(--u)) calc(16 * var(--u)); height: auto; padding: calc(20 * var(--u)); }
	.w2a-desk__item { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
	.w2a-desk__item > * { margin: 0 !important; }
	.w2a-desk__item > .w2a-desk__obj { position: static; display: flex; align-items: center; justify-content: center; width: 100%; height: calc(130 * var(--u)); }
	.w2a-desk__item > figure.w2a-desk__obj:not(.w2-hide-m) { display: grid !important; place-items: center; }
	.w2a-desk__obj img { width: var(--w, calc(110 * var(--u))) !important; height: auto !important; max-height: 100%; }
	.is-notebook { --w: calc(160 * var(--u)); }
	.is-pencil { --w: calc(136 * var(--u)); }
	.w2a-desk__item > .w2a-desk__tag { position: static; width: auto; gap: calc(8 * var(--u)); }
	.w2a-desk__name { --fs: 11; }
	.w2a-desk__name::before { display: none; }
	.w2a-desk__note { --fs: 15; line-height: 1.4; }

	/* principles 465:1832 */
	.w2a-principles > .w2-in { padding-top: calc(56 * var(--u)); padding-bottom: calc(52 * var(--u)); }
	.w2a-principles__title { --fs: 64; line-height: .9; margin: calc(20 * var(--u)) 0 !important; }
	.w2a-principle { grid-template-columns: auto 1fr; column-gap: calc(14 * var(--u)); height: auto; padding-top: calc(6 * var(--u)); margin-bottom: calc(20 * var(--u)) !important; }
	.w2a-principle__num { --fs: 52; line-height: .9; grid-row: 1 / 3; }
	.w2a-principle__title { --fs: 34; margin-top: 0 !important; max-width: none; }
	.w2a-principle__text { --fs: 16; line-height: 1.5; margin-top: calc(4 * var(--u)) !important; max-width: none; }

	/* experience 465:1870 */
	.w2a-exp > .w2-in { display: flex; flex-direction: column; padding-top: calc(56 * var(--u)); padding-bottom: calc(72 * var(--u)); }
	.w2a-exp__title { --fs: 64; line-height: .9; margin: calc(20 * var(--u)) 0 !important; }
	.w2a-exp__main { display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
	.w2a-jobs { border-bottom: 0; display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
	.logged-in .w2a-jobs.is-placeholder { display: flex !important; }
	.w2a-job { display: flex; flex-wrap: wrap; column-gap: .6em; row-gap: calc(6 * var(--u)); height: auto; padding-top: calc(6 * var(--u)); }
	.w2a-job__title { --fs: 32; flex: 0 0 100%; white-space: normal; }
	.w2a-job__co, .w2a-job__when { --fs: 12; --fmin: 10px; margin: 0 !important; font-family: var(--f-mono); letter-spacing: .6px; text-transform: uppercase; color: rgba(0, 0, 0, .7); text-align: left; }
	.w2a-job__when::before { content: "· "; }
	.w2a-exp__btns { margin-top: 0 !important; }
	.w2a-exp__brands { margin-top: calc(20 * var(--u)) !important; gap: calc(20 * var(--u)); }
	.w2a-exp__brands-label { --fs: 12; }

	/* currently 465:1932 */
	.w2a-now > .w2-in { min-height: 0; padding-top: calc(56 * var(--u)); padding-bottom: calc(72 * var(--u)); }
	.w2a-now__grid { grid-template-columns: 1fr 1fr; gap: calc(24 * var(--u)); margin-top: calc(20 * var(--u)) !important; }
	.w2a-now__item { padding-top: calc(8 * var(--u)); }
	.w2a-now__what { --fs: 11; margin-bottom: calc(8 * var(--u)) !important; }
	.w2a-now__value { --fs: 32; max-width: none; }
	.w2a-now__phones { left: calc(300 * var(--u)); top: calc(-15 * var(--u)); width: calc(145 * var(--u)); height: calc(155 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
	.w2a-marquee__track { animation: none; }
	.w2a-sticker, .w2a-desk__obj img, .w2a-now__phones { transition: none; }
}