@charset "utf-8";

/*
----------------------------------------------------------
LETTER SWITCH ANIMATION
----------------------------------------------------------
Custom animation system for letter switching effects
Used as a mobile-friendly alternative to SVG animations
*/

/*----------------------------------------------
CSS VARIABLES - CUSTOMIZE SIZES HERE
----------------------------------------------*/
:root {
	/* Default letter pair sizing (kmandhhc font) */
	--letter-k-font-size: 192px;
	--letter-k-font-size-mobile: 144px;
	
	/* Different sized pairs */
	--letter-h-font-size: 192px;
	--letter-h-font-size-mobile: 144px;
	
	--letter-i-font-size: 192px;
	--letter-i-font-size-mobile: 144px;
	
	/* Book Antiqua font sizing (Y pair) */
	--letter-y-font-size: 215px;
	--letter-y-font-size-mobile: 124px;
	
	/* Avatar/Circle sizing */
	--letter-avatar-font-size: 96px;
	--letter-avatar-font-size-mobile: 60px;
	
	--letter-avatar-y-font-size: 96px;
	--letter-avatar-y-font-size-mobile: 54px;
	
	/* Container sizing (optional - for square containers) */
	--letter-pair-width: 210px;
	--letter-pair-height: 210px;
	--letter-pair-width-mobile: 160px;
	--letter-pair-height-mobile: 160px;
	
	--letter-pair-y-width: 215px;
	--letter-pair-y-height: 215px;
	--letter-pair-y-width-mobile: 165px;
	--letter-pair-y-height-mobile: 165px;
}

/*----------------------------------------------
Font Face Declarations for Custom Fonts
----------------------------------------------*/
@font-face {
	font-family: 'kmandhhc';
	src: url('/css/font/kmandhhc.woff2') format('woff2'),
		url('/css/font/kmandhhc.woff') format('woff'),
		url('/css/font/kmandhhc.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Book Antiqua';
	src: url('/css/font/BKANT.woff2') format('woff2'),
		url('/css/font/BKANT.woff') format('woff'),
		url('/css/font/BKANT.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

/*----------------------------------------------
BASE LETTER PAIR CONTAINER
Uses clamp() for responsive sizing
----------------------------------------------*/
.letter-pair {
	position: relative;
	display: inline-block;
	width: clamp(var(--letter-pair-width-mobile), 10vw, var(--letter-pair-width));
	height: clamp(var(--letter-pair-height-mobile), 10vw, var(--letter-pair-height));
	vertical-align: top;
	text-align: center;
}

/*----------------------------------------------
BASE LETTER STYLING (kmandhhc font)
Uses clamp() with CSS variables for responsive sizing
----------------------------------------------*/
.letter-k-main, .letter-k-alt {
	font-family: 'kmandhhc';
	font-size: clamp(var(--letter-k-font-size-mobile), 8vw, var(--letter-k-font-size));
	color: #eaeaea;
}

.letter-h-main, .letter-h-alt {
	font-family: 'kmandhhc';
	font-size: clamp(var(--letter-h-font-size-mobile), 8vw, var(--letter-h-font-size));
	color: #eaeaea;
}

.letter-i-main, .letter-i-alt {
	font-family: 'kmandhhc';
	font-size: clamp(var(--letter-i-font-size-mobile), 8vw, var(--letter-i-font-size));
	color: #eaeaea;
}

/* Position all letters in the same place */
.letter-k-main, .letter-k-alt,
.letter-h-main, .letter-h-alt,
.letter-i-main, .letter-i-alt,
.letter-y-main, .letter-y-alt {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0;
	line-height: 1;
	display: block;
	width: 100%;
	text-align: center;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	white-space: nowrap;
}

/*----------------------------------------------
K PAIR - BASELINE TIMING (0s delay)
----------------------------------------------*/
.letter-k-main {
	opacity: 1; /* Start visible, fade out on blinks */
	animation: letterSwitchMainFade 15s steps(1, end) infinite;
}

.letter-k-alt {
	opacity: 1; /* Always visible - never fades */
	animation: letterSwitchAltFade 15s steps(1, end) infinite;
}

/*----------------------------------------------
H PAIR - DELAYED TIMING (0.3s offset)
----------------------------------------------*/
.letter-h-main {
	opacity: 1; /* Start visible, fade out on blinks */
	animation: letterSwitchMainFade 15s steps(1, end) 0.3s infinite;
}

.letter-h-alt {
	opacity: 1; /* Always visible - never fades */
	animation: letterSwitchAltFade 15s steps(1, end) 0.3s infinite;
}

/*----------------------------------------------
I PAIR - DELAYED TIMING (0.6s offset)
----------------------------------------------*/
.letter-i-main {
	opacity: 1; /* Start visible, fade out on blinks */
	animation: letterSwitchMainFade 15s steps(1, end) 0.6s infinite;
}

.letter-i-alt {
	opacity: 1; /* Always visible - never fades */
	animation: letterSwitchAltFade 15s steps(1, end) 0.6s infinite;
}

/*----------------------------------------------
Y PAIR - DIFFERENT FONT & SIZE
----------------------------------------------*/
.letter-pair-y {
	width: 215px;
	height: 215px;
}

.letter-pair-y .letter-y-main,
.letter-pair-y .letter-y-alt {
	font-family: 'Book Antiqua';
	font-size: 215px;
	color: #eaeaea;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0;
	line-height: 1;
	display: block;
	width: 100%;
	text-align: center;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	white-space: nowrap;
}

.letter-y-main {
	font-family: 'Book Antiqua';
	opacity: 1; /* Start visible, fade out on blinks */
	animation: letterSwitchMainFade 15s steps(1, end) 0.9s infinite;
}

.letter-y-alt {
	font-family: 'Book Antiqua';
	opacity: 1; /* Always visible - never fades */
	animation: letterSwitchAltFade 15s steps(1, end) 0.9s infinite;
}

/*----------------------------------------------
ANIMATION KEYFRAMES
Exact timing from SVG 1-KM.svg
Pattern: k visible → blinks to ? → back to k (repeat)
Values: k = "1;0;1;1;1;0;1;1;1;0;1;1;1;0;1"
        ? = "0;1;0;0;0;1;0;0;0;1;0;0;0;1;0"
keyTimes: 0;0.0025;0.005;0.4;0.4025;0.405;0.4525;0.455;0.8;0.8025;0.805;0.808;1
----------------------------------------------*/
@keyframes letterSwitchMainFade {
	/* Embellished letters (k, h, i, Ÿ) - visible most of time, fade out on blink */
	/* SVG keyTimes: 0(0%), 0.0025(0.25%), 0.005(0.5%), 0.4(40%), 0.4025(40.25%), 0.405(40.5%), 0.4525(45.25%), 0.455(45.5%), 0.8(80%), 0.8025(80.25%), 0.805(80.5%), 0.808(80.8%), 1(100%) */
	/* SVG values: 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1 */
	0%, 0.5%, 40%, 40.5%, 45.5%, 80%, 80.5%, 80.8%, 100% { opacity: 1; }
	0.2%, 40.25%, 45%, 80.25% { opacity: 0; } /* Blink moments */
}

@keyframes letterSwitchAltFade {
	/* Base characters (?, #, !, Y) - ALWAYS visible, no animation */
	/* They remain static so only dots flicker, not the body */
	0%, 100% { opacity: 1; }
}

.letter-pair-y-medium .letter-y-main,
.letter-pair-y-medium .letter-y-alt {
	font-family: 'Book Antiqua';
	font-size: clamp(var(--letter-y-font-size-mobile), 2vw, var(--letter-y-font-size));
	color: #eaeaea;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0;
	line-height: 1;
	display: block;
	width: 100%;
	text-align: center;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	white-space: nowrap;
}

.letter-y-main-medium {
	font-family: 'Book Antiqua';
	opacity: 1; /* Start visible, fade out on blinks */
	animation: letterSwitchMainFade 15s steps(1, end) 0.9s infinite;
}

.letter-y-alt-medium {
	font-family: 'Book Antiqua';
	opacity: 1; /* Always visible - never fades */
	animation: letterSwitchAltFade 15s steps(1, end) 0.9s infinite;
}

/*----------------------------------------------
ANIMATION KEYFRAMES
Exact timing from SVG 1-KM.svg
Pattern: k visible → blinks to ? → back to k (repeat)
Values: k = "1;0;1;1;1;0;1;1;1;0;1;1;1;0;1"
        ? = "0;1;0;0;0;1;0;0;0;1;0;0;0;1;0"
keyTimes: 0;0.0025;0.005;0.4;0.4025;0.405;0.4525;0.455;0.8;0.8025;0.805;0.808;1
----------------------------------------------*/
@keyframes letterSwitchMainFade {
	/* Embellished letters (k, h, i, Ÿ) - visible most of time, fade out on blink */
	/* SVG keyTimes: 0(0%), 0.0025(0.25%), 0.005(0.5%), 0.4(40%), 0.4025(40.25%), 0.405(40.5%), 0.4525(45.25%), 0.455(45.5%), 0.8(80%), 0.8025(80.25%), 0.805(80.5%), 0.808(80.8%), 1(100%) */
	/* SVG values: 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1 */
	0%, 0.5%, 40%, 40.5%, 45.5%, 80%, 80.5%, 80.8%, 100% { opacity: 1; }
	0.2%, 40.25%, 45%, 80.25% { opacity: 0; } /* Blink moments */
}

@keyframes letterSwitchAltFade {
	/* Base characters (?, #, !, Y) - ALWAYS visible, no animation */
	/* They remain static so only dots flicker, not the body */
	0%, 100% { opacity: 1; }
}



/*----------------------------------------------
AVATAR-SPECIFIC STYLING
For use in avatar circles
Uses clamp() with CSS variables for responsive sizing
----------------------------------------------*/
/* .avatar .letter-switch-container {
	position: relative;
	width: 100%;
	height: 100%;
	border: 1px solid red;
} */

/*----------------------------------------------
LETTER SWITCH CONTAINER (FLEXBOX)
----------------------------------------------*/
.letter-switch-container {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 0;
	vertical-align: bottom;
}
@media (max-width: 1041px) {
	.letter-switch-container {
		margin-top: 0px;
	}
}

.avatar .letter-k-main,
.avatar .letter-k-alt,
.avatar .letter-h-main,
.avatar .letter-h-alt,
.avatar .letter-i-main,
.avatar .letter-i-alt {
	font-size: clamp(var(--letter-avatar-font-size-mobile), 6vw, var(--letter-avatar-font-size));
	color: #f4f4f4 !important;
	margin-top: 50px;
	margin-left: -40px;
}
@media (min-width: 1600px) {	
	.avatar .letter-k-main,
	.avatar .letter-k-alt,
	.avatar .letter-h-main,
	.avatar .letter-h-alt,
	.avatar .letter-i-main,
	.avatar .letter-i-alt {
		margin-top: 60px;
		margin-left: -50px !important;
	}
}
@media (min-width: 1041px) and (max-width: 1200px) {
	.avatar .letter-k-main,
	.avatar .letter-k-alt,
	.avatar .letter-h-main,
	.avatar .letter-h-alt,
	.avatar .letter-i-main,	
	.avatar .letter-i-alt {
		margin-top: 0px;
		margin-left: -40px;
	}
}
@media (max-width: 1041px) {
	.avatar .letter-k-main,	
	.avatar .letter-k-alt,
	.avatar .letter-h-main,
	.avatar .letter-h-alt,
	.avatar .letter-i-main,
	.avatar .letter-i-alt {
		margin-top: 0px !important;
		margin-left: 0px !important;
	}
}

.avatar .letter-y-main,
.avatar .letter-y-alt {
	font-size: clamp(var(--letter-avatar-y-font-size-mobile), 10vw, var(--letter-avatar-y-font-size)) !important;
	color: #eaeaea;
}

/*----------------------------------------------
UTILITY CLASSES - QUICK SIZE OVERRIDES
----------------------------------------------*/
/* Small size */
.letter-pair-small {
	width: clamp(120px, 8vw, 150px);
	height: clamp(120px, 8vw, 150px);
}

.letter-pair-small .letter-k-main,
.letter-pair-small .letter-k-alt,
.letter-pair-small .letter-h-main,
.letter-pair-small .letter-h-alt,
.letter-pair-small .letter-i-main,
.letter-pair-small .letter-i-alt {
	font-size: clamp(100px, 6vw, 130px);
}

.letter-pair-small .letter-y-main,
.letter-pair-small .letter-y-alt {
	font-family: 'Book Antiqua';
	font-size: clamp(80px, 6vw, 110px);
	color: #eaeaea;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0;
	line-height: 1;
	display: block;
	width: 100%;
	text-align: center;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	white-space: nowrap;
}

/* Logo size (matches 75x100 SVG) */
.letter-pair-logo {
	width: 80px;
	height: 100px;
}

.letter-pair-logo .letter-k-main,
.letter-pair-logo .letter-k-alt,
.letter-pair-logo .letter-h-main,
.letter-pair-logo .letter-h-alt,
.letter-pair-logo .letter-i-main,
.letter-pair-logo .letter-i-alt {
	font-size: 70px;
}

.letter-pair-logo .letter-y-main,
.letter-pair-logo .letter-y-alt {
	font-family: 'Book Antiqua';
	font-size: 70px;
	color: #eaeaea;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0;
	line-height: 1;
	display: block;
	width: 100%;
	text-align: center;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	white-space: nowrap;
}

/* Responsive logo size (matches .responsive-logo styles) */
.letter-pair-responsive-logo {
	position: relative;
	display: inline-block;
	width: 80px;
	height: 100px;
	margin: -35px 0px 30px 5px;
	vertical-align: middle;
	background-color: transparent !important;
}

.letter-pair-responsive-logo .letter-k-main,
.letter-pair-responsive-logo .letter-k-alt,
.letter-pair-responsive-logo .letter-h-main,
.letter-pair-responsive-logo .letter-h-alt,
.letter-pair-responsive-logo .letter-i-main,
.letter-pair-responsive-logo .letter-i-alt {
	font-size: 90px !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0;
	font-family: 'kmandhhc' !important;
	color: #f4f4f4 !important;
}

.letter-pair-responsive-logo .letter-y-main,
.letter-pair-responsive-logo .letter-y-alt {
	font-family: 'Book Antiqua' !important;
	font-size: 90px !important;
	color: #f4f4f4 !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0;
	line-height: 1;
	display: block;
	width: 100%;
	text-align: center;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	white-space: nowrap;
}

/* Responsive sizing for logo */
@media (max-width: 1200px) {
	.letter-pair-responsive-logo {
		width: 50px;
		height: 60px;
		margin: -20px 0px 0px 8px;
	}
	
	.letter-pair-responsive-logo .letter-k-main,
	.letter-pair-responsive-logo .letter-k-alt,
	.letter-pair-responsive-logo .letter-h-main,
	.letter-pair-responsive-logo .letter-h-alt,
	.letter-pair-responsive-logo .letter-i-main,
	.letter-pair-responsive-logo .letter-i-alt {
		font-size: 72px !important;
	}
	
	.letter-pair-responsive-logo .letter-y-main,
	.letter-pair-responsive-logo .letter-y-alt {
		font-size: 72px !important;
	}
}

@media (max-width: 480px) {
	.letter-pair-responsive-logo {
		width: 45px;
		height: 60px;
		margin: -20px 0px 20px 3px;
	}
	
	.letter-pair-responsive-logo .letter-k-main,
	.letter-pair-responsive-logo .letter-k-alt,
	.letter-pair-responsive-logo .letter-h-main,
	.letter-pair-responsive-logo .letter-h-alt,
	.letter-pair-responsive-logo .letter-i-main,
	.letter-pair-responsive-logo .letter-i-alt {
		font-size: 60px !important;
	}
	
	.letter-pair-responsive-logo .letter-y-main,
	.letter-pair-responsive-logo .letter-y-alt {
		font-size: 60px !important;
	}
}

@media (max-width: 380px) {
	.letter-pair-responsive-logo {
		width: 35px;
		height: 47px;
		margin: -15px 0px 15px 5px;
	}
	
	.letter-pair-responsive-logo .letter-k-main,
	.letter-pair-responsive-logo .letter-k-alt,
	.letter-pair-responsive-logo .letter-h-main,
	.letter-pair-responsive-logo .letter-h-alt,
	.letter-pair-responsive-logo .letter-i-main,
	.letter-pair-responsive-logo .letter-i-alt {
		font-size: 60px !important;
	}
	
	.letter-pair-responsive-logo .letter-y-main,
	.letter-pair-responsive-logo .letter-y-alt {
		font-size: 60px !important;
	}
}
/* Responsive logo size (matches .responsive-logo styles) */
/* Used solely in preface and structure content on indexYdarkhtml and indexmmtdark.html */
.letter-pair-responsive-logo-small {
	position: relative;
	display: inline-block;
	width: 38px;
	height: 50px;
	vertical-align: bottom;
	background-color: transparent;
}

.letter-pair-responsive-logo-small .letter-h-main,
.letter-pair-responsive-logo-small .letter-h-alt {
	font-size: 55px !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: 'kmandhhc' !important;
	color: #eaeaea !important;
}

.letter-pair-responsive-logo-small .letter-k-main,
.letter-pair-responsive-logo-small .letter-k-alt,
.letter-pair-responsive-logo-small .letter-i-main,
.letter-pair-responsive-logo-small .letter-i-alt {
	font-size: 58px !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: 'kmandhhc' !important;
	color: #eaeaea !important;
}

/* Responsive sizing for logo */
@media (max-width: 1200px) {
	.letter-pair-responsive-logo-small {
		width: 38px;
		height: 50px;
	}

	.letter-pair-responsive-logo-small .letter-h-main,
	.letter-pair-responsive-logo-small .letter-h-alt {
		font-size: 45px !important;
	}

	.letter-pair-responsive-logo-small .letter-k-main,
	.letter-pair-responsive-logo-small .letter-k-alt,
	.letter-pair-responsive-logo-small .letter-i-main,
	.letter-pair-responsive-logo-small .letter-i-alt {
		font-size: 50px !important;
	}
}

@media (max-width: 480px) {
	.letter-pair-responsive-logo-small {
		width: 37px;
		height: 50px;
		margin: 0px 0px 0px 0px;
	}
	
	.letter-pair-responsive-logo-small .letter-k-main,
	.letter-pair-responsive-logo-small .letter-k-alt {
		font-size: 50px !important;
	}

	.letter-pair-responsive-logo-small .letter-k-main,
	.letter-pair-responsive-logo-small .letter-k-alt,
	.letter-pair-responsive-logo-small .letter-h-main,
	.letter-pair-responsive-logo-small .letter-h-alt,
	.letter-pair-responsive-logo-small .letter-i-main,
	.letter-pair-responsive-logo-small .letter-i-alt {
		font-size: 44px !important;
	}
}

@media (max-width: 380px) {
	.letter-pair-responsive-logo-small {
		width: 30px;
		height: 40px;		
	}

	.letter-pair-responsive-logo-small .letter-h-main,
	.letter-pair-responsive-logo-small .letter-h-alt {
		font-size: 40px !important;
	}


	.letter-pair-responsive-logo-small .letter-k-main,
	.letter-pair-responsive-logo-small .letter-k-alt,
	.letter-pair-responsive-logo-small .letter-i-main,
	.letter-pair-responsive-logo-small .letter-i-alt {
		font-size: 46px !important;
	}
}

/* Large size */
.letter-pair-large {
	width: clamp(220px, 15vw, 380px);
	height: clamp(220px, 15vw, 380px);
}

.letter-pair-large .letter-k-main,
.letter-pair-large .letter-k-alt,
.letter-pair-large .letter-h-main,
.letter-pair-large .letter-h-alt,
.letter-pair-large .letter-i-main,
.letter-pair-large .letter-i-alt {
	font-size: clamp(180px, 10vw, 300px);
}

.letter-pair-large .letter-y-main,
.letter-pair-large .letter-y-alt {
	font-family: 'Book Antiqua' !important;
	font-size: clamp(140px, 10vw, 240px) !important;
	color: #eaeaea;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0;
	line-height: 1;
	display: block;
	width: 100%;
	text-align: center;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	white-space: nowrap;
}
@media (min-width: 1041px) {
	.letter-pair-large .letter-y-main,
	.letter-pair-large .letter-y-alt {
		font-size: clamp(140px, 10vw, 220px) !important;
	}
}


/* Full viewport width (like a hero header) */
.letter-pair-hero {
	width: clamp(var(--letter-pair-width-mobile), 15vw, var(--letter-pair-width));
	height: clamp(var(--letter-pair-height-mobile), 15vw, var(--letter-pair-height));
}

.letter-pair-hero .letter-k-main,
.letter-pair-hero .letter-k-alt,
.letter-pair-hero .letter-h-main,
.letter-pair-hero .letter-h-alt,
.letter-pair-hero .letter-i-main,
.letter-pair-hero .letter-i-alt {
	font-size: clamp(var(--letter-k-font-size-mobile), 10vw, var(--letter-k-font-size));
}

.letter-pair-hero .letter-y-main,
.letter-pair-hero .letter-y-alt {
	font-family: 'Book Antiqua';
	font-size: clamp(var(--letter-y-font-size-mobile), 10vw, var(--letter-y-font-size));
	color: #eaeaea;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0;
	line-height: 1;
	display: block;
	width: 100%;
	text-align: center;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	white-space: nowrap;
}

/*----------------------------------------------
LETTER COMBO (for h/# + text combinations)
A self-contained component that can be reused
Matches img/ystructure/6-400x200.svg (600x200)
----------------------------------------------*/
.letter-combo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	width: 100%;
	/* Dynamic height based on content - overrides absolute positioning */
	position: relative !important;
	min-height: 80px;
	padding: 10px;
	box-sizing: border-box;
	background-color: #292929;
}

.letter-combo .letter-pair-h {
	position: relative;
	width: 60px;
	height: 80px;
	display: inline-block;
}

.letter-combo .letter-pair-h .letter-h-main,
.letter-combo .letter-pair-h .letter-h-alt {
	font-size: 70px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	line-height: 1;
	color: #c5c5c5;
}

.letter-combo .letter-pair-k {
	position: relative;
	width: 50px;
	height: 80px;
	display: inline-block;
}

.letter-combo .letter-pair-k .letter-k-main,
.letter-combo .letter-pair-k .letter-k-alt {
	font-size: 77px;
	margin-top: -5px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	line-height: 1;
	color: #c5c5c5;
}

.letter-combo .combo-text {
	font-family: 'Quicksand';
	font-size: 50px;
	display: inline-block;
	margin-left: 6px;
	vertical-align: middle;
	/* line-height: 1; */
	white-space: nowrap;
	color: #c5c5c5;
}

/*----------------------------------------------
RESPONSIVE SIZING (Mobile Breakpoints)
Additional fine-tuning if needed beyond clamp()
----------------------------------------------*/
@media (max-width: 768px) {
	/* Avatar font size already responsive via clamp() */
	/* Add any mobile-specific adjustments here */
}