:root {
	--bg: #0b0c10;
	--bg-2: #12141c;
	--bg-3: #1a1d28;
	--ink: #efece6;
	--muted: #9a958a;
	--gold: #d4a017;
	--gold-2: #f0c14b;
	--teal: #4fd1c5;
	--line: rgba(239, 236, 230, 0.1);
	--radius: 18px;
	--font: "Outfit", system-ui, sans-serif;
	--serif: "Instrument Serif", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font);
	background: var(--bg);
	color: var(--ink);
	line-height: 1.6;
	font-weight: 400;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.wrap.narrow { width: min(760px, calc(100% - 40px)); }
.skip-link {
	position: absolute; left: -999px; top: 8px;
}
.skip-link:focus { left: 12px; background: var(--gold); color: #111; padding: 8px 12px; z-index: 20; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.site-header {
	position: sticky; top: 0; z-index: 40;
	backdrop-filter: blur(16px);
	background: rgba(11, 12, 16, 0.72);
	border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 20px; }
.brand-mark { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: 0.02em; }
.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--teal)); }
.site-nav .menu { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; font-size: 0.92rem; }
.site-nav a { color: var(--muted); }
.site-nav a:hover { color: var(--ink); }
.nav-toggle { display: none; background: none; border: 0; width: 40px; height: 40px; position: relative; }
.nav-toggle span { display: block; height: 2px; background: var(--ink); margin: 7px 0; }

.hero { padding: 96px 0 72px; position: relative; overflow: hidden; }
.hero::before {
	content: "";
	position: absolute; inset: -20% auto auto -10%;
	width: 520px; height: 520px; border-radius: 50%;
	background: radial-gradient(circle, rgba(212,160,23,.18), transparent 65%);
	pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.kicker {
	text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem;
	color: var(--gold); margin: 0 0 12px; font-weight: 600;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0 0 16px; }
h1 { font-size: clamp(3rem, 8vw, 6.2rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.lede { font-size: 1.2rem; color: #d7d2c8; max-width: 36ch; }
.meta-line { color: var(--muted); font-size: 0.92rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 20px; border-radius: 999px; font-weight: 550; font-size: 0.95rem;
	border: 1px solid transparent; transition: .2s ease;
}
.btn-primary { background: var(--gold); color: #14120c; }
.btn-primary:hover { background: var(--gold-2); }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--gold); }

.hero-panel { position: relative; min-height: 320px; }
.orb {
	position: absolute; right: 8%; top: 10%;
	width: 240px; height: 240px; border-radius: 50%;
	background: conic-gradient(from 120deg, var(--gold), var(--teal), #6b4f16, var(--gold));
	filter: blur(2px); opacity: .85;
	animation: spin 22s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.stat-card {
	position: relative; background: rgba(18,20,28,.82);
	border: 1px solid var(--line); border-radius: var(--radius);
	padding: 18px 20px; width: min(240px, 100%);
	backdrop-filter: blur(10px);
}
.stat-card.delay { margin: 18px 0 0 72px; }
.stat-card span { color: var(--muted); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.stat-card strong { display: block; font-family: var(--serif); font-size: 1.6rem; }
.stat-card em { font-style: normal; color: var(--muted); font-size: .85rem; }

.strip { border-block: 1px solid var(--line); padding: 18px 0; }
.strip-row { display: flex; flex-wrap: wrap; gap: 12px 28px; color: var(--muted); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }

.section { padding: 88px 0; }
.section.alt { background: var(--bg-2); }
.section-head { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 36px; }
.two-col { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; }
.prose p { color: #d2cdc3; }
.facts { list-style: none; padding: 0; margin: 28px 0 0; }
.facts li { border-top: 1px solid var(--line); padding: 12px 0; color: var(--muted); }

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.card {
	background: var(--bg-3); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 24px 22px;
}
.card-num { color: var(--gold); font-size: .8rem; letter-spacing: .14em; }
.card h3 { margin-top: 16px; font-size: 1.6rem; }
.card p { color: var(--muted); margin: 0; }

.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.work-card {
	background: var(--bg-3); border: 1px solid var(--line);
	border-radius: var(--radius); overflow: hidden;
}
.work-thumb {
	aspect-ratio: 4/3; display: grid; place-items: center;
	font-family: var(--serif); font-size: 2.4rem; color: #1b160c;
}
.work-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tone-1 { background: linear-gradient(145deg, #d4a017, #7a5a10); }
.tone-2 { background: linear-gradient(145deg, #4fd1c5, #1d6b66); }
.tone-3 { background: linear-gradient(145deg, #c97a4a, #5c2e18); }
.tone-4 { background: linear-gradient(145deg, #8aa0c8, #2c3a55); }
.tone-5 { background: linear-gradient(145deg, #d7c4a0, #6d5a3a); }
.tone-6 { background: linear-gradient(145deg, #e07a8a, #5a2430); }
.work-meta { padding: 16px 18px 20px; }
.work-meta small { color: var(--gold); letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; }
.work-meta h3 { font-size: 1.35rem; margin: 6px 0 8px; }
.work-meta p { margin: 0; color: var(--muted); font-size: .95rem; }
.hint { color: var(--muted); margin-top: 22px; font-size: .9rem; }
.text-link { color: var(--gold); align-self: center; }

.timeline { display: grid; gap: 22px; }
.timeline > div { border-left: 2px solid var(--gold); padding-left: 18px; }
.timeline p { margin: 6px 0 0; color: var(--muted); }

.cta-band { text-align: center; }
.cta-band .lede { margin-inline: auto; }

.feature { margin: 24px 0; border-radius: var(--radius); overflow: hidden; }
.site-footer { border-top: 1px solid var(--line); padding: 48px 0 24px; background: #090a0d; }
.footer-grid { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 32px; }
.footer-brand { font-family: var(--serif); font-size: 1.6rem; margin: 0 0 8px; }
.footer-label { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--gold); }
.footer-links { list-style: none; padding: 0; margin: 8px 0 0; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--ink); }
.footer-base { margin-top: 36px; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); padding-top: 16px; }
.muted { color: var(--muted); }

@media (max-width: 960px) {
	.hero-grid, .two-col, .cards, .work-grid, .footer-grid { grid-template-columns: 1fr 1fr; }
	.cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
	.nav-toggle { display: block; }
	.site-nav { display: none; position: absolute; inset: 72px 0 auto; background: #0e1016; padding: 16px 20px 24px; border-bottom: 1px solid var(--line); }
	.site-nav.is-open { display: block; }
	.site-nav .menu { flex-direction: column; gap: 14px; }
	.hero-grid, .two-col, .cards, .work-grid, .footer-grid, .section-head { grid-template-columns: 1fr; }
	.hero { padding-top: 56px; }
	.stat-card.delay { margin-left: 24px; }
}

/* Portrait hero */
.hero-portrait .hero-grid { align-items: end; }
.hero-photo { position: relative; }
.hero-photo figure {
	margin: 0;
	border-radius: 28px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: #2a2c32;
	aspect-ratio: 4 / 5;
	max-height: 640px;
}
.hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 12%;
	filter: contrast(1.05) saturate(0.96);
}
.page-hero { padding: 72px 0 24px; }
.page-portrait {
	margin: 0;
	border-radius: 22px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	max-width: 360px;
}
.page-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }

.social-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 32px;
}
.social-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--bg-3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px 20px;
	min-height: 140px;
}
.social-card:hover { border-color: var(--gold); }
.social-name { color: var(--gold); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.social-card strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.social-card em { margin-top: auto; font-style: normal; color: var(--muted); font-size: .85rem; }

.blog-grid .work-thumb { font-size: 1.6rem; }

@media (max-width: 960px) {
	.social-grid { grid-template-columns: 1fr 1fr; }
	.hero-portrait .hero-grid { grid-template-columns: 1fr; }
	.hero-photo figure { max-height: 520px; max-width: 420px; }
}
@media (max-width: 720px) {
	.social-grid { grid-template-columns: 1fr; }
}