/* CardTap card drawings (CR80 proportions). Shared by the theme, the designer, the print sheet and profile pages. */
.cw, .cw * { box-sizing: border-box; }
.cw {
	--f-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-body: "Albert Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.cw { container-type: inline-size; }
.ct {
	position: relative; overflow: hidden; width: 100%;
	background: var(--c-bg); color: var(--c-ink);
	font-family: var(--f-body); line-height: 1.2;
}
.ct--l { aspect-ratio: 85.65 / 53.78; border-radius: 3.7cqw; }
.ct--p { aspect-ratio: 53.78 / 85.65; border-radius: 5.9cqw; }
.ct p, .ct ul { margin: 0; }
.ct__name { font-family: var(--f-display); font-weight: 750; letter-spacing: -0.02em; line-height: 1.05; }
.ct__role { opacity: 0.8; font-weight: 500; margin-top: 0.4em; }
.ct__lines { list-style: none; padding: 0; position: absolute; }
.ct__lines li + li { margin-top: 0.5em; }
.ct__tap { position: absolute; color: var(--c-ac); }
.ct__tap svg, .ct__coil, .ct__rings { display: block; width: 100%; height: auto; }
.ct__coil, .ct__rings { position: absolute; color: var(--c-ac); }
.ct__main { position: absolute; }
.ct__block {
	position: absolute; display: flex; align-items: center; justify-content: center;
	background: var(--c-ac); color: var(--c-bg);
	font-family: var(--f-display); font-weight: 750; letter-spacing: -0.04em; line-height: 1;
}
.ct__qr { display: block; background: #fff; }
.ct__content { position: absolute; inset: 0; }
.ct__block img, .ct__photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.ct__block img { object-fit: contain; padding: 14%; box-sizing: border-box; }
.ct__logo img { height: 5.2cqw; width: auto; max-width: 30cqw; display: block; object-fit: contain; }
.ct--badge .ct__photo { overflow: hidden; }

/* Landscape type sizes */
.ct--l .ct__name { font-size: 7.6cqw; }
.ct--l .ct__role { font-size: 3.5cqw; }
.ct--l .ct__lines { font-size: 3.1cqw; }
.ct--l .ct__tap { width: 6.5cqw; }

/* Portrait type sizes */
.ct--p .ct__name { font-size: 11cqw; }
.ct--p .ct__role { font-size: 5.4cqw; }
.ct--p .ct__lines { font-size: 4.6cqw; }
.ct--p .ct__tap { width: 8cqw; }

/* coil (landscape) */
.ct--coil .ct__coil { right: -8cqw; top: -10cqw; width: 70cqw; opacity: 0.4; }
.ct--coil .ct__main { left: 6cqw; top: 8cqw; }
.ct--coil .ct__lines { left: 6cqw; bottom: 6cqw; }
.ct--coil .ct__tap { right: 6cqw; bottom: 5cqw; }

/* paper (landscape) */
.ct__logo { position: absolute; left: 6cqw; top: 6cqw; display: flex; align-items: center; gap: 1.6cqw; font: 700 3.6cqw/1 var(--f-display); }
.ct__mark { width: 4cqw; height: 4cqw; border-radius: 1cqw; background: var(--c-ac); display: block; }
.ct--paper .ct__tap { right: 6cqw; top: 5.5cqw; }
.ct--paper .ct__main { left: 6cqw; bottom: 19cqw; }
.ct--paper .ct__lines { left: 6cqw; bottom: 6cqw; display: flex; gap: 4cqw; }
.ct--paper .ct__lines li + li { margin-top: 0; }
.ct--paper::after { content: ""; position: absolute; left: 6cqw; right: 6cqw; bottom: 13.5cqw; height: 0.35cqw; background: var(--c-ac); }

/* split (landscape) */
.ct--split .ct__block { inset: 0 auto 0 0; width: 36%; font-size: 17cqw; color: #fff; }
.ct--split .ct__main { left: 42%; top: 9cqw; }
.ct--split .ct__lines { left: 42%; bottom: 6cqw; }
.ct--split .ct__tap { right: 6cqw; bottom: 5cqw; }

/* pulse (landscape) */
.ct--pulse .ct__rings { right: -14cqw; top: 50%; width: 62cqw; transform: translateY(-50%); opacity: 0.35; }
.ct--pulse .ct__main { left: 6cqw; top: 8cqw; }
.ct--pulse .ct__lines { left: 6cqw; bottom: 6cqw; }

/* badge (portrait) */
.ct--badge .ct__band { position: absolute; left: 0; right: 0; top: 0; height: 36%; background: var(--c-ac); }
.ct--badge .ct__photo {
	position: absolute; left: 50%; top: calc(36% - 18cqw); transform: translateX(-50%);
	width: 36cqw; aspect-ratio: 1; display: grid; place-items: center;
	background: var(--c-bg); color: var(--c-ac); border: 1.8cqw solid var(--c-bg); border-radius: 50%;
	box-shadow: inset 0 0 0 100cqw rgba(12, 74, 62, 0.1);
	font: 750 12cqw/1 var(--f-display);
}
.ct--badge .ct__main { left: 0; right: 0; top: calc(36% + 22cqw); text-align: center; }
.ct--badge .ct__qr { position: absolute; left: 50%; bottom: 7cqw; width: 26cqw; transform: translateX(-50%); }

/* column (portrait) */
.ct__vname {
	position: absolute; left: 5cqw; bottom: 6cqw; white-space: nowrap;
	writing-mode: vertical-rl; transform: rotate(180deg);
	font: 750 16cqw/1 var(--f-display); letter-spacing: -0.02em; color: var(--c-ac);
}
.ct--column .ct__main { right: 5cqw; top: 6cqw; text-align: right; }
.ct--column .ct__lines { right: 5cqw; bottom: 6cqw; text-align: right; }
.ct--column .ct__tap { right: 5cqw; top: 18cqw; }

/* pocket (portrait) */
.ct--pocket .ct__qrbox {
	position: absolute; left: 50%; top: 12cqw; transform: translateX(-50%);
	width: 66cqw; aspect-ratio: 1; padding: 5cqw;
	background: #fff; border-radius: 4cqw; color: var(--c-ink);
}
.ct--pocket .ct__qrbox .ct__qr { width: 100%; height: 100%; }
.ct--pocket .ct__main { left: 0; right: 0; bottom: 17cqw; text-align: center; }
.ct--pocket .ct__tap { left: 50%; bottom: 5cqw; transform: translateX(-50%); }

/* stack (portrait) */
.ct--stack .ct__block { inset: 0 0 auto 0; height: 52%; font-size: 44cqw; }
.ct--stack .ct__main { left: 6cqw; right: 6cqw; top: 56%; }
.ct--stack .ct__lines { left: 6cqw; bottom: 6cqw; }

/* follow (social themes, both orientations) */
.ct--follow .ct__glow { position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 60%); }
.ct--follow .ct__who { position: absolute; left: 6cqw; top: 6cqw; display: flex; align-items: center; gap: 2cqw; }
.ct--follow .ct__glyph { display: block; width: 8cqw; height: 8cqw; padding: 1.7cqw; border-radius: 50%; background: rgba(127, 127, 127, 0.18); color: var(--c-ac); box-sizing: border-box; }
.ct--follow .ct__glyph svg { display: block; width: 100%; height: 100%; }
.ct--follow .ct__where { font: 600 3.2cqw/1 var(--f-body); opacity: 0.92; }
.ct--follow .ct__cta { position: absolute; left: 6cqw; font-weight: 600; opacity: 0.92; }
.ct--follow .ct__handle { position: absolute; left: 6cqw; font-family: var(--f-display); font-weight: 750; letter-spacing: -0.02em; line-height: 1.05; overflow-wrap: anywhere; }
.ct--follow .ct__by { position: absolute; opacity: 0.85; }
.ct--follow .ct__qrbox { position: absolute; background: #fff; overflow: hidden; box-shadow: 0 0 0 0.4cqw rgba(0, 0, 0, 0.08); }
.ct--follow .ct__qrbox .ct__qr { width: 100%; height: 100%; }
.ct--follow.ct--l .ct__cta { top: 21cqw; font-size: 3.4cqw; max-width: 54cqw; }
.ct--follow.ct--l .ct__handle { top: 27.5cqw; font-size: 6.4cqw; max-width: 54cqw; }
.ct--follow.ct--l .ct__by { left: 6cqw; bottom: 6cqw; font-size: 3.2cqw; }
.ct--follow.ct--l .ct__qrbox { right: 6cqw; top: 50%; transform: translateY(-50%); width: 27cqw; height: 27cqw; border-radius: 2cqw; }
.ct--follow.ct--l .ct__tap { right: 16.25cqw; bottom: 3.5cqw; }
.ct--follow.ct--p .ct__who { left: 7cqw; top: 7cqw; }
.ct--follow.ct--p .ct__glyph { width: 10cqw; height: 10cqw; padding: 2.1cqw; }
.ct--follow.ct--p .ct__where { font-size: 4.2cqw; }
.ct--follow.ct--p .ct__cta { left: 7cqw; top: 25cqw; font-size: 5.2cqw; max-width: 86cqw; }
.ct--follow.ct--p .ct__handle { left: 7cqw; top: 32cqw; font-size: 10cqw; max-width: 86cqw; }
.ct--follow.ct--p .ct__qrbox { left: 50%; top: 66cqw; transform: translateX(-50%); width: 58cqw; height: 58cqw; border-radius: 3.4cqw; }
.ct--follow.ct--p .ct__by { left: 0; right: 0; bottom: 21cqw; text-align: center; font-size: 5cqw; }
.ct--follow.ct--p .ct__tap { left: 50%; bottom: 7cqw; transform: translateX(-50%); }