/*
 * Figma About — MacBook Pro 14" (1:92) @ 1512
 * Events end y=2066 · Projects y=3210
 * Polaroid 1:291  x=878  y=2017.92  w=342.14  h=375.14  (−49px into Events)
 * Title    1:105  x=146  y=2141.04  w=431    h=140     Futura 80 / lh 70
 * Left     1:109  x=144  y=2326     w=602              Inter 16 / 23
 * Facts    1:111  x=890  y=2412.04  w=353              values AlvinsHand 28/20
 * Right    1:110  x=890  y=2601     w=602
 * Frame pads: left 144 · right 20 (1512 − 1492)
 * Mobile   1:588
 */

.atrin-about {
	--atrin-about-bg: #ffffff;
	--atrin-about-text: #000000;
	--atrin-about-title: #110c00;
	--atrin-about-ink: #110c00;
	--atrin-about-font: 'Inter', sans-serif;
	/* Figma Futura Medium only — no AvantGarde fallback (smaller metrics look “too small”) */
	--atrin-about-display: 'Futura', 'Futura PT', sans-serif;
	/* Figma 1:112 AlvinsHand Regular — Caveat kept as last-resort fallback only */
	--atrin-about-hand: 'AlvinsHand', 'Alvins Hand', Caveat, cursive;
	--atrin-frame: 1512;
	--atrin-pad-l: 144;
	--atrin-pad-r: 20;
	--atrin-col: 602;
	--atrin-gap: 144; /* 890 − 746 */
	--atrin-overlap: 49;
	--atrin-title-top: 123; /* 2141 − 2017 */
	--atrin-title-to-body: 45; /* 2326 − (2141 + 140) */
	--atrin-polaroid-w: 342;
	--atrin-polaroid-to-facts: 20; /* 2412 − (2017 + 375) */
	--atrin-facts-to-body: 89; /* 2601 − (2412 + 100) */
	--atrin-polaroid-nudge: -12; /* 878 − 890 */

	box-sizing: border-box;
	position: relative;
	z-index: 3;
	width: 100%;
	/* Keep white About flush with Events bottom — polaroid alone sticks up */
	margin: 0;
	padding: 0 0 calc(80 * var(--atrin-u));
	background: var(--atrin-about-bg);
	color: var(--atrin-about-text);
	font-family: var(--atrin-about-font);
	font-size: calc(16 * var(--atrin-u));
	line-height: calc(23 * var(--atrin-u));
	overflow: visible;
}

.atrin-about *,
.atrin-about *::before,
.atrin-about *::after {
	box-sizing: border-box;
}

.atrin-about__inner {
	position: relative;
	display: flow-root; /* prevent title margin collapsing into Events overlap */
	width: 100%;
	max-width: none; /* Figma grid: full-bleed like hero/events */
	margin-left: 0;
	margin-right: 0;
	padding: 0 var(--atrin-gutter-x) 0 var(--atrin-gutter-l);
	box-sizing: border-box;
	/* polaroid top → right-copy bottom: 2601+529−2017 = 1113 */
	min-height: calc(1113 * var(--atrin-u));
}

.atrin-about__title {
	position: relative;
	z-index: 1;
	margin: calc(var(--atrin-title-top) * var(--atrin-u)) 0 calc(var(--atrin-title-to-body) * var(--atrin-u));
	padding: 0;
	max-width: none;
	width: max-content;
	max-width: 100%;
	/* Figma 1:105 — Futura Medium 80 / lh 70 */
	font-family: var(--atrin-about-display) !important;
	font-weight: 500 !important;
	font-size: calc(80 * var(--atrin-u)) !important;
	line-height: calc(70 * var(--atrin-u)) !important;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--atrin-about-title);
	white-space: pre; /* only break on intentional newline — never wrap "ALL ABOUT" */
	overflow: visible;
	min-height: calc(140 * var(--atrin-u));
	scroll-margin-top: 120px;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
}

.atrin-about__layout {
	display: grid;
	grid-template-columns: calc(var(--atrin-col) * var(--atrin-u)) calc(var(--atrin-col) * var(--atrin-u));
	column-gap: calc(var(--atrin-gap) * var(--atrin-u));
	align-items: start;
	width: 100%;
}

.atrin-about__primary {
	min-width: 0;
	max-width: calc(var(--atrin-col) * var(--atrin-u));
}

/*
 * Right column on the same Figma grid as left (x=890 / 602 wide).
 * Pull secondary up past the title block so polaroid top sits
 * --atrin-overlap (49px) into Events (Figma 1:291 y=2017 vs Events end 2066).
 * Title block ≈ title-top + title height (140) + title-to-body.
 */
.atrin-about__secondary {
	position: relative;
	top: auto;
	right: auto;
	width: 100%;
	max-width: calc(var(--atrin-col) * var(--atrin-u));
	margin-top: calc(
		(var(--atrin-title-top) + 140 + var(--atrin-title-to-body) + var(--atrin-overlap)) * var(--atrin-u) * -1
	);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	z-index: 4;
}

.atrin-about__body {
	color: var(--atrin-about-text);
	font-family: var(--atrin-about-font) !important;
	font-size: calc(16 * var(--atrin-u));
	font-weight: 400;
	line-height: calc(23 * var(--atrin-u));
}

/* Beat global `body p / body span { itc-avant-garde… }` from style.css */
.atrin-about__body p,
.atrin-about__body span,
.atrin-about p,
.atrin-about span {
	font-family: 'Inter', sans-serif !important;
}

.atrin-about__body p {
	margin: 0 0 calc(23 * var(--atrin-u));
	font-size: inherit;
	font-weight: 400 !important;
	line-height: inherit;
}

.atrin-about__body p:last-child {
	margin-bottom: 0;
}

.atrin-about__body strong,
.atrin-about__body b {
	font-family: 'Inter', sans-serif !important;
	font-weight: 700 !important;
}

/* PNG already includes polaroid matte — match Figma 1:291 (no CSS rotate; node is upright) */
.atrin-about figure.atrin-about__polaroid {
	display: block;
	position: relative;
	z-index: 5;
	width: calc(var(--atrin-polaroid-w) * var(--atrin-u));
	height: calc(375 * var(--atrin-u));
	max-width: none;
	margin: 0 0 calc(var(--atrin-polaroid-to-facts) * var(--atrin-u)) calc(var(--atrin-polaroid-nudge) * var(--atrin-u)) !important;
	padding: 0;
	overflow: visible;
}

.atrin-about__polaroid-frame {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background: transparent;
	/* Figma composition shows a slight clockwise scrapbook tilt */
	box-shadow: 0 10px 28px rgba(17, 12, 0, 0.12);
	transform: rotate(2.08deg);
	transform-origin: center center;
}

.atrin-about__polaroid-img {
	display: block;
	position: relative;
	z-index: 5;
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: auto;
	object-fit: contain;
	object-position: center center;
	pointer-events: none;
}

.atrin-about__facts {
	margin: 0 0 calc(var(--atrin-facts-to-body) * var(--atrin-u));
	padding: 0;
	width: calc(353 * var(--atrin-u));
	height: calc(100 * var(--atrin-u));
	list-style: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.atrin-about__fact {
	display: grid;
	grid-template-columns: calc(125 * var(--atrin-u)) minmax(0, 1fr);
	align-items: baseline;
	column-gap: 0;
	margin: 0;
	padding: 0 0 calc(8 * var(--atrin-u));
	border-bottom: 1px solid #000;
	min-height: 0;
	flex: 0 0 auto;
}

.atrin-about__fact + .atrin-about__fact {
	margin-top: 0;
}

.atrin-about__fact-label {
	margin: 0;
	font-family: 'Inter', sans-serif !important;
	font-size: calc(16 * var(--atrin-u));
	font-weight: 400 !important;
	line-height: calc(20 * var(--atrin-u));
	color: #000;
}

.atrin-about__fact-value {
	margin: 0;
	font-family: 'AlvinsHand', 'Alvins Hand', Caveat, cursive !important;
	font-size: calc(28 * var(--atrin-u)) !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: calc(20 * var(--atrin-u)) !important;
	letter-spacing: 0;
	color: #000;
}

.atrin-about__more-panel {
	display: block;
	width: 100%;
	max-width: calc(var(--atrin-col) * var(--atrin-u));
}

.atrin-about__more {
	display: none;
	width: 100%;
	max-width: none;
	margin: 24px 0 0;
	padding: 10px;
	border: 1px solid var(--atrin-about-ink);
	border-radius: 5px;
	/* Figma 1:753 — outline only, never gray/system fill */
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--atrin-about-ink);
	font-family: var(--atrin-about-font);
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	appearance: none !important;
	-webkit-appearance: none !important;
	-webkit-tap-highlight-color: transparent;
	transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.atrin-about__more:hover,
.atrin-about__more:focus,
.atrin-about__more:focus-visible,
.atrin-about__more:active,
body.home .elementor-element .atrin-about__more:hover,
body.home .elementor-element .atrin-about__more:focus,
body.home .elementor-element .atrin-about__more:focus-visible,
body.home .elementor-element .atrin-about__more:active,
body button.atrin-about__more:hover,
body button.atrin-about__more:focus,
body button.atrin-about__more:active {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--atrin-about-ink) !important;
	outline: none;
}

/* Optical ü–r spacing in About body (Inter / inherited) */
.atrin-about .atrin-ue {
	display: inline;
	margin: 0;
	padding: 0;
	font-family: inherit;
}

/* —— Kill Elementor + legacy biography chrome —— */
body.home .elementor-element.atrin-about-section,
body.home .elementor-element.atrin-about-section.biography-section,
body.home .elementor-element.biography-section.atrin-about-section {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	overflow: visible !important;
	position: relative !important;
	z-index: 3 !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	align-items: flex-start !important;
}

body.home .elementor-element.atrin-about-section > .elementor-container,
body.home .elementor-element.atrin-about-section .elementor-column,
body.home .elementor-element.atrin-about-section .elementor-widget-wrap,
body.home .elementor-element.atrin-about-section .elementor-element-populated,
body.home .elementor-element.atrin-about-section .elementor-widget-atrin_about,
body.home .elementor-element.atrin-about-section .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	max-width: none !important;
	width: 100% !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
	align-items: flex-start !important;
	align-content: flex-start !important;
	display: block !important;
}

body.home .elementor-element.atrin-about-section > .elementor-container {
	display: block !important;
}

body.home .elementor-element.atrin-events-section,
body.home .elementor-element.atrin-events-section.all-section {
	overflow: visible !important;
	position: relative;
	z-index: 1;
}

/* Desktop mid-widths inherit global --atrin-u (100vw/1512) from :root */

/* ========== Mobile ≤991 — Figma 1:588 ========== */
@media (max-width: 991px) {
	.atrin-about {
		margin-top: 0;
		padding: 40px 0 48px;
		z-index: 1;
		font-size: 16px;
		line-height: 23px;
	}

	.atrin-about__inner {
		display: flex;
		flex-direction: column;
		padding: 0 10px;
		max-width: none;
		min-height: 0;
	}

	.atrin-about__title {
		position: static;
		max-width: none;
		width: auto;
		margin: 0 0 30px;
		padding: 0;
		font-size: clamp(52px, 17.4vw, 68px) !important;
		line-height: 1;
		min-height: 0;
		white-space: pre-line;
	}

	.atrin-about__layout {
		display: flex;
		flex-direction: column;
		gap: 0;
		width: 100%;
		grid-template-columns: none;
		column-gap: 0;
	}

	.atrin-about__primary,
	.atrin-about__secondary,
	.atrin-about__more-panel {
		position: static;
		width: 100%;
		max-width: none;
		right: auto;
	}

	.atrin-about__secondary {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 28px;
		gap: 23px;
		text-align: left;
	}

	.atrin-about figure.atrin-about__polaroid {
		width: min(100%, 359px);
		height: auto;
		margin: 0 auto !important;
	}

	.atrin-about__facts {
		width: 100%;
		max-width: 353px;
		height: auto;
		margin: 0 auto;
	}

	.atrin-about__more-panel {
		width: 100%;
		max-width: 602px;
		margin-left: auto;
		margin-right: auto;
	}

	.atrin-about__fact {
		grid-template-columns: 125px minmax(0, 1fr);
		padding-bottom: 9px;
		min-height: 29px;
	}

	.atrin-about__fact + .atrin-about__fact {
		margin-top: 12px;
	}

	.atrin-about__fact-label {
		font-size: 16px;
		line-height: 20px;
	}

	.atrin-about__fact-value {
		font-size: 28px;
		line-height: 20px;
	}

	.atrin-about__more-panel {
		display: block;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transform: translate3d(0, 14px, 0);
		visibility: hidden;
		pointer-events: none;
		transition:
			max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.4s ease,
			transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s linear 0.45s;
	}

	.atrin-about.is-expanded .atrin-about__more-panel {
		max-height: 2400px;
		opacity: 1;
		transform: translate3d(0, 0, 0);
		visibility: visible;
		pointer-events: auto;
		transition:
			max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.4s ease,
			transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s linear 0s;
	}

	/* Full content width (Figma 370 on 390 @ 10px pad) — no gray fill */
	.atrin-about__more,
	body.home .elementor-element .atrin-about__more,
	body button.atrin-about__more {
		display: flex !important;
		align-items: center;
		justify-content: center;
		align-self: stretch;
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		margin: 20px 0 0 !important;
		background: transparent !important;
		background-color: transparent !important;
		background-image: none !important;
		box-shadow: none !important;
	}

	.atrin-about__more:hover,
	.atrin-about__more:focus,
	.atrin-about__more:focus-visible,
	.atrin-about__more:active,
	body.home .elementor-element .atrin-about__more:hover,
	body.home .elementor-element .atrin-about__more:focus,
	body.home .elementor-element .atrin-about__more:focus-visible,
	body.home .elementor-element .atrin-about__more:active,
	body button.atrin-about__more:hover,
	body button.atrin-about__more:focus,
	body button.atrin-about__more:active {
		background: transparent !important;
		background-color: transparent !important;
		background-image: none !important;
		color: var(--atrin-about-ink) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.atrin-about__polaroid-frame,
	.atrin-about__more {
		transition: none;
	}

	.atrin-about__more-panel,
	.atrin-about.is-expanded .atrin-about__more-panel {
		transition: none !important;
		transform: none !important;
	}
}