/* About page styles. */

/* HEAD */
.page-head {
	padding: 70px 0 60px;
	border-bottom: 1px solid var(--rule);
}
.page-head .crumb {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--ink-3);
	margin-bottom: 36px;
	font-size: 14px;
	text-transform: none;
	letter-spacing: normal;
}
.page-head .crumb:hover { color: var(--terracotta); }
.page-head .crumb .arr { font-family: 'Newsreader', serif; font-style: italic; }

.about-head-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 80px;
	align-items: end;
}
.about-head-grid h1 {
	font-family: 'Newsreader', serif;
	font-weight: 400;
	font-size: clamp(48px, 6.4vw, 92px);
	line-height: 0.98;
	letter-spacing: -0.025em;
	color: var(--ink);
}
.about-head-grid h1 em { font-style: italic; color: var(--terracotta); font-weight: 400; }
@media (max-width: 880px) { .about-head-grid { grid-template-columns: 1fr; gap: 32px; } }

.page-meta { display: flex; flex-direction: column; }
.page-meta .row {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 12px 0;
	border-top: 1px solid var(--rule);
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.06em;
}
.page-meta .row:last-child { border-bottom: 1px solid var(--rule); }
.page-meta .k { color: var(--ink-3); text-transform: uppercase; }
.page-meta .v {
	font-family: 'Newsreader', serif;
	font-style: italic;
	font-size: 15px;
	color: var(--ink);
	letter-spacing: -0.01em;
	text-transform: none;
}

/* PORTRAIT */
.about-portrait { padding: 90px 0; }
.about-portrait-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 80px;
	align-items: start;
}
@media (max-width: 880px) { .about-portrait-grid { grid-template-columns: 1fr; gap: 40px; } }
.portrait-image img,
.portrait-image .placeholder {
	width: 100%;
	aspect-ratio: 3/4;
	object-fit: cover;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: linear-gradient(135deg, #E8C9A2 0%, #D8A77A 50%, #B86A3E 100%);
	min-height: 0;
}
.portrait-prose .prose {
	font-family: 'Newsreader', serif;
	font-size: 24px;
	line-height: 1.4;
	color: var(--ink);
	max-width: 540px;
}
.portrait-prose .prose p + p { margin-top: 0.8em; }
.portrait-prose .prose em { font-style: italic; color: var(--terracotta); }
.portrait-prose .signature {
	margin-top: 40px;
	font-family: 'Newsreader', serif;
	font-style: italic;
	font-size: 32px;
	color: var(--terracotta);
	transform: rotate(-3deg);
	transform-origin: left center;
	display: inline-block;
}

/* STORY */
.about-story { padding: 90px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.story-blocks { max-width: 720px; margin: 0 auto; }
.story-prose {
	font-family: 'Newsreader', serif;
	font-size: 19px;
	line-height: 1.6;
	color: var(--ink-2);
	margin-bottom: 32px;
}
.story-prose p + p { margin-top: 1em; }
.story-prose em { font-style: italic; color: var(--terracotta); }
.story-pull {
	font-family: 'Newsreader', serif;
	font-style: italic;
	font-size: 28px;
	line-height: 1.3;
	color: var(--ink);
	border-left: 3px solid var(--terracotta);
	padding-left: 24px;
	margin: 36px 0;
	max-width: 600px;
}

/* CAREER */
.about-career { padding: 100px 0; }
.career-table { border-top: 2px solid var(--ink); }
.career-row {
	display: grid;
	grid-template-columns: 240px 1fr 200px;
	gap: 32px;
	padding: 22px 0;
	border-bottom: 1px solid var(--rule);
	align-items: baseline;
	transition: background .15s ease;
}
.career-row:hover { background: var(--paper-2); padding-left: 12px; padding-right: 12px; }
.career-row.is-current .now-dot { color: var(--terracotta); margin-left: 8px; }
.career-row.is-current .now-label {
	margin-left: 6px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--terracotta);
}
.career-row .company {
	font-family: 'Newsreader', serif;
	font-size: 22px;
	letter-spacing: -0.01em;
}
.career-row .role { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.career-row .location {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--ink-3);
	text-transform: uppercase;
	text-align: right;
}
@media (max-width: 980px) {
	.career-row { grid-template-columns: 1fr; gap: 4px; }
	.career-row .location { text-align: left; }
}

/* VALUES */
.about-values { padding: 100px 0; background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.values-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 880px) { .values-grid { grid-template-columns: 1fr; } }
.value-card {
	padding: 32px 28px;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 4px;
}
.value-card .num {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--terracotta);
	margin-bottom: 12px;
}
.value-card h3 {
	font-family: 'Newsreader', serif;
	font-size: 26px;
	font-weight: 400;
	letter-spacing: -0.01em;
	margin-bottom: 12px;
}
.value-card h3 em { font-style: italic; color: var(--terracotta); }
.value-card p { color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 38ch; }

/* PLACE */
.about-place {
	padding: 110px 0;
	background: var(--ink);
	color: var(--paper);
	position: relative;
	overflow: hidden;
}
.place-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 60px;
	align-items: center;
}
@media (max-width: 980px) { .place-grid { grid-template-columns: 1fr; gap: 40px; } }
.place-text .num {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--terracotta-3);
	margin-bottom: 12px;
}
.place-text h2 {
	font-family: 'Newsreader', serif;
	font-weight: 400;
	font-size: clamp(40px, 5vw, 68px);
	line-height: 1.02;
	color: var(--paper);
	letter-spacing: -0.025em;
}
.place-text h2 em { font-style: italic; color: var(--terracotta-3); }
.place-text p {
	font-family: 'Newsreader', serif;
	font-size: 19px;
	line-height: 1.55;
	color: rgba(244, 238, 227, 0.78);
	margin-top: 22px;
	max-width: 540px;
}

.place-card {
	aspect-ratio: 1;
	background: linear-gradient(180deg, #2A2418 0%, #1F1A14 100%);
	border: 1px solid rgba(244, 238, 227, 0.12);
	border-radius: 6px;
	position: relative;
	overflow: hidden;
}
.place-card .grid-bg {
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(244, 238, 227, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(244, 238, 227, 0.05) 1px, transparent 1px);
	background-size: 32px 32px;
}
.place-card .ridge {
	position: absolute;
	bottom: 35%; left: 0; right: 0;
	height: 18%;
	background: var(--terracotta);
	opacity: 0.7;
	clip-path: polygon(0 100%, 0 60%, 12% 40%, 22% 55%, 35% 30%, 50% 50%, 62% 35%, 78% 55%, 88% 38%, 100% 60%, 100% 100%);
}
.place-card .pin {
	position: absolute;
	top: 38%; left: 48%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	transform: translate(-50%, -50%);
}
.place-card .pin .dot {
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--terracotta);
	box-shadow: 0 0 0 6px rgba(177, 74, 42, 0.25);
}
.place-card .pin .lbl {
	font-family: 'Newsreader', serif;
	font-style: italic;
	font-size: 14px;
	color: var(--paper);
}
.place-card .coords {
	position: absolute;
	bottom: 14px; right: 14px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.08em;
	color: rgba(244, 238, 227, 0.6);
}

/* COLOPHON */
.about-colophon { padding: 100px 0; }
.colophon-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	border-top: 1px solid var(--rule);
}
@media (max-width: 720px) { .colophon-grid { grid-template-columns: 1fr; } }
.colophon-grid .row {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 18px 24px;
	border-bottom: 1px solid var(--rule);
	border-right: 1px solid var(--rule);
}
@media (max-width: 720px) { .colophon-grid .row { border-right: none; } }
.colophon-grid .row:nth-child(2n) { border-right: none; }
.colophon-grid .k {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.colophon-grid .v {
	font-family: 'Newsreader', serif;
	font-style: italic;
	font-size: 17px;
	color: var(--ink);
}