/* ===== bodycopy ===== */
bodycopy, .bodycopy {
	--font-size: 1.7rem;
	--font-scale: 1;
	color: #ffffff;
	font-family: Sabon, serif;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
	display: block;
	font-weight: 400;
	width: 100%;
}

/* Like live: each text style sets --font-size, and everything renders at --font-size × --font-scale.
   --font-scale is 1 except inside [data-autofit] elements, where autofit.js sets it. */
.bodycopy, .bodycopy * {
	font-size: calc(var(--font-scale, 1) * var(--font-size));
}

bodycopy a, .bodycopy a {
	color: #ffffff;
	border-bottom: 0px solid rgba(127, 127, 127, 0.2);
	text-decoration: none;
}

/* ===== column-set / column-unit ===== */
column-set, .column-set {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	width: 100%;
	gap: 2rem;
}

column-unit, .column-unit {
	min-width: 0;
}

column-unit[span="1"], .column-unit[data-span="1"] { grid-column: span 1; }
column-unit[span="2"], .column-unit[data-span="2"] { grid-column: span 2; }
column-unit[span="3"], .column-unit[data-span="3"] { grid-column: span 3; }
column-unit[span="4"], .column-unit[data-span="4"] { grid-column: span 4; }
column-unit[span="5"], .column-unit[data-span="5"] { grid-column: span 5; }
column-unit[span="6"], .column-unit[data-span="6"] { grid-column: span 6; }
column-unit[span="7"], .column-unit[data-span="7"] { grid-column: span 7; }
column-unit[span="8"], .column-unit[data-span="8"] { grid-column: span 8; }
column-unit[span="9"], .column-unit[data-span="9"] { grid-column: span 9; }
column-unit[span="10"], .column-unit[data-span="10"] { grid-column: span 10; }
column-unit[span="11"], .column-unit[data-span="11"] { grid-column: span 11; }
column-unit[span="12"], .column-unit[data-span="12"] { grid-column: span 12; }

/* Empty column-units are decorative spacers — collapse them so content gets the room */
.column-unit:empty, column-unit:empty { display: none; }

/* ===== Heading Styles ===== */
h1 {
	font-family: "Diatype Variable", sans-serif;
	font-style: normal;
	font-weight: 533;
	margin: 0;
	--font-size: 8.8rem;
	line-height: 9.75;
	color: #ffffff;
	letter-spacing: -0.06em;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

h2 {
	font-family: "Diatype Variable", sans-serif;
	font-style: normal;
	font-weight: 440;
	margin: 0;
	color: #ffffff;
	--font-size: 3.8rem;
	line-height: 1.1;
	letter-spacing: 0em;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

/* ===== Named text classes (in source order) ===== */
.about-me-heading {
	color: #ffffff;
	font-family: "Gravity Variable", sans-serif;
	font-style: normal;
	line-height: 1.55;
	letter-spacing: 0;
	display: block;
	font-feature-settings: "ss03", "ss05", "ss06", "ss07", "ss09";
	font-variation-settings: 'wdth' 115.501, 'slnt' 0;
	--font-size: 8rem;
	--font-scale: 1;
	font-size: calc(var(--font-scale) * var(--font-size));
}

.about-me {
	--font-size: 2.1rem;
	color: #ffffff;
	font-family: "Social Variable", sans-serif;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 0;
	display: block;
	font-weight: 700;
	font-variation-settings: 'wdth' 100, 'slnt' 0;
}

.about-me a {
	color: #ffffff;
	border-bottom: 0px solid rgba(127, 127, 127, 0.2);
	text-decoration: none;
}

.ps {
	color: #ffffff;
	font-family: Georgia, serif;
	font-style: normal;
	line-height: 2.3;
	letter-spacing: 0.02em;
	display: inline-block;
	font-weight: bold;
	padding: 0 0 0 3.3rem;
	--font-size: 0.5rem;
	font-size: calc(var(--font-scale, 1) * var(--font-size));
}

.propriety-society {
	color: #ffffff;
	font-family: Sabon, serif;
	font-style: normal;
	line-height: 1;
	letter-spacing: -0.028em;
	display: block;
	font-weight: 400;
	padding: 0 2.9rem 0 3rem;
}

.go-mad-i-the-moment {
	--font-size: 2.1rem;
	color: #ffffff;
	font-family: Sabon, serif;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 0;
	display: inline-block;
	font-weight: 400;
	filter: drop-shadow(1rem 1rem 1rem #e17070);
	will-change: filter;
	border-width: 0rem;
}

.jhb {
	--font-size: 3.4rem;
	color: #ffffff;
	font-family: "VCR OSD Mono", monospace;
	font-style: normal;
	line-height: 1.05;
	letter-spacing: 0;
	display: block;
	font-weight: 400;
}

.email-address {
	--font-size: 2.7rem;
	color: #ffffff;
	font-family: "Terminal Grotesque", sans-serif;
	font-style: normal;
	line-height: 1.15;
	letter-spacing: -0.026em;
	display: block;
	font-weight: 400;
	background: rgba(220, 39, 255, 0.32);
}

.no-wrap { white-space: nowrap; }

.rumi {
	color: #ffffff;
	font-family: Sabon, serif;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 0;
	display: block;
	font-weight: 400;
	--font-size: 3.4rem;
	--font-scale: 1;
	font-size: calc(var(--font-scale) * var(--font-size));
}

.tidbit {
	--font-size: 2.05rem;
	color: #ffffff;
	font-family: Sabon, serif;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 0;
	display: inline-block;
	font-weight: 400;
}

.essay-quote {
	font-family: "Diatype Mono Variable", monospace;
	--font-size: 1.7rem;
	font-weight: 300;
	font-variation-settings: 'slnt' 0, 'MONO' 1;
	line-height: 1.2;
	display: block;
	color: #ffffff;
}

.essay-quote a {
	color: #ffffff;
	text-decoration: none;
	border-bottom: none;
}

.kinks {
	--font-size: 0.5rem;
	color: #ffffff;
	font-family: "Monument Grotesk Semi-Mono Variable", sans-serif;
	font-style: normal;
	line-height: 0.8;
	letter-spacing: 0em;
	display: block;
	font-weight: 200;
	font-variation-settings: 'slnt' 0, 'MONO' 0.5;
}

.kinks a {
	color: #ffffff;
	border-bottom: 0px solid rgba(127, 127, 127, 0.2);
	text-decoration: none;
}

.button-11-3 {
	--font-size: 1.7rem;
	font-family: Sabon, serif;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0px;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	display: inline-block;
	border: 0.2rem solid rgba(0, 0, 0, 0.85);
	filter: drop-shadow(rgba(0, 0, 0, 0.85) 0.3rem 0.3rem 0rem);
	will-change: filter;
	border-radius: 0.5rem;
	padding: 0.8rem 1rem;
	background: #ffffff;
}

.bodycopy a.button-11-3,
.button-11-3 a {
	color: rgba(0, 0, 0, 0.85);
	text-decoration: none;
}

/* ===== icon-link ===== */
a.image-link, a.image-link:hover, a.image-link:active,
a.icon-link, a.icon-link:hover, a.icon-link:active {
	border-bottom: none;
	text-decoration: none;
}

/* ===== text-icon (inline SVG replacement) ===== */
.text-icon {
	display: inline-block;
	aspect-ratio: 1;
	height: 1.2em;
	width: auto;
	margin-top: -1em;
	margin-bottom: -0.25em;
	vertical-align: baseline;
	position: relative;
}

.text-icon svg {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: currentColor;
	object-fit: cover;
}

/* ===== Fit Text (legacy class — no JS consumer anymore) ===== */
[uses="fit-text"], .fit-text {
	display: block;
	width: 100%;
	overflow: visible;
}

/* Autofit fallback for [data-autofit] elements without their own calc rule.
   No !important — mobile.css uses --font-size (a CSS variable that feeds into this calc),
   so source-order cascade naturally resolves correctly. */
[data-autofit] {
	/* Same box live's fit-text uses: one unwrapped block, sized by assets/js/autofit.js */
	display: inline-block;
	white-space: nowrap;
}
[data-autofit]:not([style*="line-height"]) { line-height: 1; }

/* ===== kjhg: drag handles / scattered text (matches live's .kjhg) ===== */
.kjhg {
	--font-size: 1.95rem;
	color: #ffffff;
	font-family: "Fraunces Variable", "Fraunces", serif;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 0;
	display: block;
	font-weight: 400;
	font-variation-settings: 'SOFT' 0, 'opsz' 9, 'WONK' 0;
}

/* ===== Draggable elements: user can grab and move them around the page ===== */
[data-drag] {
	cursor: grab;
	user-select: none;
	touch-action: none;
	position: relative;
	will-change: transform;
}
[data-drag]:active, [data-drag].dragging {
	cursor: grabbing;
}

/* ===== Marquee Animations ===== */
.marquee-vertical {
	overflow: hidden;
	/* Live's marquee ignores its 40vh setting and fills the screen minus the page padding */
	height: calc(var(--viewport-height) - 2rem);
	position: relative;
}
.marquee-vertical-inner {
	animation: scroll-up 20s linear infinite;
	position: relative;
}
@keyframes scroll-up {
	0% { transform: translateY(0); }
	100% { transform: translateY(-50%); }
}

.marquee-horizontal {
	overflow: hidden;
	display: flex;  /* height follows the content, like live (its 70vh setting has no effect) */
}
.marquee-horizontal-inner {
	animation: scroll-left 20s linear infinite;
	white-space: nowrap;
	display: flex;
}
@keyframes scroll-left {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* ===== Blink (live's uses="blink") =====
   --blink-speed is Cargo's unitless 0–100 speed: one cycle lasts 5s × (100 − speed) / 100, at least
   0.25s. On/off by default; --blink-timing: ease matches live's blink-transition. */
@keyframes blink {
	0%, 100% { opacity: 0; }
	50% { opacity: 1; }
}

.blink {
	animation: blink calc(5s * max(100 - var(--blink-speed, 75), 5) / 100) infinite var(--blink-timing, steps(1));
}

/* ===== Rotation (live's uses="rotation") =====
   --rotation tilts the element; --spin-speed (Cargo's "animate") turns it once every 50s / speed.
   --spin-direction: reverse matches live's negative animate values. */
@keyframes spin {
	from { transform: rotate(var(--rotation, 0deg)); }
	to { transform: rotate(calc(var(--rotation, 0deg) + 360deg)); }
}

.rotating {
	display: inline-block;
	transform: rotate(var(--rotation, 0deg));
	animation: spin calc(50s / var(--spin-speed, 1)) linear infinite var(--spin-direction, normal);
}