/* ===========================================================
   JK Studio — editorial, minimal architecture-studio theme
   =========================================================== */

:root {
	--color-bg: #ffffff;
	--color-text: #111111;
	--color-text-muted: #6b6b6b;
	--color-line: #e2e2e2;
	--color-line-strong: #111111;
	--font-sans: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--header-h: 88px;
	--container-pad: 40px;
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 780px) {
	:root {
		--header-h: 64px;
		--container-pad: 20px;
	}
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-sans);
	color: var(--color-text);
	background: var(--color-bg);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }

ul { list-style: none; margin: 0; padding: 0; }

.section {
	padding: 120px var(--container-pad);
	max-width: 1600px;
	margin: 0 auto;
}

.section--narrow { max-width: 900px; }

@media (max-width: 780px) {
	.section { padding: 64px var(--container-pad); }
}

.empty-state { color: var(--color-text-muted); font-style: italic; }

/* ---------- Header ---------- */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), opacity 0.3s var(--ease);
}

.is-front .site-header {
	background: transparent;
	border-bottom: 1px solid transparent;
	opacity: 0;
	pointer-events: none;
}

.site-header.is-scrolled,
body:not(.is-front) .site-header {
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid var(--color-line);
	backdrop-filter: saturate(180%) blur(6px);
}

.site-header__inner {
	height: var(--header-h);
	max-width: 1800px;
	margin: 0 auto;
	padding: 0 var(--container-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-logo {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.site-nav__list {
	display: flex;
	gap: 40px;
}

.site-nav__list a {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 4px 0;
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s var(--ease);
}

.site-nav__list a:hover { border-color: currentColor; }

.nav-toggle {
	display: none;
	width: 28px;
	height: 20px;
	position: relative;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.nav-toggle span {
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: currentColor;
	transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.nav-toggle span:first-child { top: 4px; }
.nav-toggle span:last-child { bottom: 4px; }

.nav-toggle[aria-expanded="true"] span:first-child {
	transform: translateY(9px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:last-child {
	transform: translateY(-9px) rotate(-45deg);
}

.site-nav-mobile {
	display: none;
	position: fixed;
	inset: var(--header-h) 0 0 0;
	background: var(--color-bg);
	padding: 40px var(--container-pad);
	transform: translateY(-8px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.site-nav-mobile.is-open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.site-nav-mobile__list li { border-bottom: 1px solid var(--color-line); }

.site-nav-mobile__list a {
	display: block;
	padding: 20px 0;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

@media (max-width: 780px) {
	.site-nav { display: none; }
	.nav-toggle { display: block; }
	.site-nav-mobile { display: block; }
}

/* ---------- Hero: split panel with scroll-driven reveal ---------- */

.hero-wrap {
	position: relative;
	height: 220vh;
}

.hero--split {
	position: sticky;
	top: 0;
	height: 100vh;
	min-height: 560px;
	overflow: hidden;
	background: #f7f6f3;
}

.hero__photo {
	position: absolute;
	inset: 0;
}

.hero__photo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__panel {
	position: absolute;
	inset: 0;
	background: #f7f6f3;
	clip-path: polygon(0 0, 28% 0, 54% 100%, 0 100%);
	will-change: clip-path;
}

.hero__panel-sketch {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity: 0.16;
	filter: grayscale(1);
}

.hero__panel-content {
	position: absolute;
	left: var(--container-pad);
	top: 50%;
	transform: translateY(-50%);
	max-width: 420px;
}

.hero__mark {
	width: 56px;
	margin-bottom: 32px;
	color: var(--color-text);
}

.hero__mark-img,
.hero__mark svg {
	width: 100%;
	height: auto;
	display: block;
}

.hero__wordmark {
	font-size: clamp(20px, 2.2vw, 28px);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.hero__wordmark strong { font-weight: 700; }

.hero__tagline {
	font-size: 15px;
	color: var(--color-text-muted);
	margin-bottom: 36px;
}

.hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 30px;
	background: #111;
	color: #fff;
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: opacity 0.25s var(--ease);
}

.hero__cta:hover { opacity: 0.82; }

.hero__panel-nav {
	position: absolute;
	left: var(--container-pad);
	bottom: 40px;
	display: flex;
	gap: 24px;
}

.hero__panel-nav a {
	font-size: 13px;
	color: var(--color-text-muted);
	transition: color 0.2s var(--ease);
}

.hero__panel-nav a:hover { color: var(--color-text); }

@media (max-width: 780px) {
	.hero-wrap { height: 180vh; }
	.hero__panel-content { max-width: 76%; }
	.hero__panel-nav { flex-wrap: wrap; gap: 10px 20px; right: var(--container-pad); }
}

/* The persistent site header re-fades in via the existing .is-scrolled
   toggle once the visitor starts scrolling past the split hero. */
.is-front .site-header.is-scrolled {
	opacity: 1;
	pointer-events: auto;
}

/* ---------- Section headers ---------- */

.section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 56px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--color-line-strong);
}

.section__title {
	font-size: clamp(28px, 3.4vw, 44px);
	letter-spacing: -0.01em;
}

.section__link {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.text-link {
	display: inline-block;
	margin-top: 12px;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-bottom: 1px solid currentColor;
}

/* ---------- Project grid / cards ---------- */

.project-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
}

@media (max-width: 1000px) {
	.project-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.project-grid { grid-template-columns: 1fr; }
}

.project-card { display: block; group: card; }

.project-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f2f2f2;
}

.project-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease);
}

.project-card:hover .project-card__media img { transform: scale(1.045); }

/* Technical drawings vary wildly in native aspect ratio (elevations, site
   plans, floor plans) — contain + padding keeps every card the same size
   without cropping or distorting the drawing itself. */
.project-card__media--drawing {
	background: #fbfbfa;
	padding: 28px;
}

.project-card__media--drawing img {
	object-fit: contain;
	transition: transform 0.5s var(--ease);
}

.project-card:hover .project-card__media--drawing img { transform: scale(1.02); }

.project-card__meta { padding: 18px 4px 40px; }

.project-card__title {
	font-size: 18px;
	margin-bottom: 6px;
}

.project-card__sub {
	font-size: 13px;
	color: var(--color-text-muted);
	letter-spacing: 0.02em;
	margin: 0;
}

/* ---------- Category grid ---------- */

.category-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--color-line-strong);
	border-left: 1px solid var(--color-line);
}

@media (max-width: 780px) {
	.category-grid { grid-template-columns: 1fr; }
}

.category-card {
	padding: 32px;
	border-right: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: background-color 0.25s var(--ease);
}

.category-card:hover { background: #fafafa; }

.category-card__name { font-size: 20px; }

.category-card__count {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* ---------- Project gallery (single) ---------- */

.project-gallery {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 var(--container-pad) 100px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px;
}

@media (max-width: 780px) {
	.project-gallery { grid-template-columns: 1fr; }
}

.project-gallery__item { overflow: hidden; }
.project-gallery__item img { width: 100%; height: 100%; object-fit: cover; }

.page-header__desc {
	margin-top: 16px;
	color: var(--color-text-muted);
	max-width: 640px;
}

/* ---------- Studio / intro section ---------- */

.section--intro__grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 60px;
	border-top: 1px solid var(--color-line-strong);
	padding-top: 56px;
}

@media (max-width: 780px) {
	.section--intro__grid { grid-template-columns: 1fr; gap: 24px; }
}

.section--intro__text {
	font-size: clamp(17px, 1.8vw, 22px);
	line-height: 1.55;
	max-width: 640px;
}

/* ---------- Page header / generic pages ---------- */

.page-header {
	padding: calc(var(--header-h) + 64px) var(--container-pad) 40px;
	max-width: 1600px;
	margin: 0 auto;
	border-bottom: 1px solid var(--color-line);
}

.page-header__title {
	font-size: clamp(32px, 5vw, 64px);
}

.page-hero { max-height: 70vh; overflow: hidden; }
.page-hero__image { width: 100%; height: 100%; object-fit: cover; }

.prose { font-size: 18px; line-height: 1.7; }
.prose p { margin-bottom: 1.4em; }

/* ---------- Single project ---------- */

.project-hero {
	margin-top: var(--header-h);
	height: 80vh;
	min-height: 420px;
	overflow: hidden;
	background: #111;
}

.project-hero__image { width: 100%; height: 100%; object-fit: cover; }

.project-single__intro {
	max-width: 1600px;
	margin: 0 auto;
	padding: 56px var(--container-pad) 40px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 32px;
	border-bottom: 1px solid var(--color-line-strong);
}

.project-single__title {
	font-size: clamp(28px, 4vw, 52px);
}

.project-meta {
	display: flex;
	gap: 36px;
	flex-wrap: wrap;
	margin: 0;
}

.project-meta__item dt {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: 4px;
}

.project-meta__item dd {
	margin: 0;
	font-size: 15px;
}

.project-single__body {
	max-width: 900px;
	margin: 0 auto;
	padding: 64px var(--container-pad);
	font-size: 18px;
	line-height: 1.7;
}

.section--related { border-top: 1px solid var(--color-line); }

/* ---------- Footer ---------- */

.site-footer {
	border-top: 1px solid var(--color-line-strong);
	padding: 72px var(--container-pad) 32px;
}

.site-footer__inner {
	max-width: 1600px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-bottom: 56px;
}

@media (max-width: 780px) {
	.site-footer__inner { grid-template-columns: 1fr; }
}

.site-footer__label {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: 12px;
}

.site-footer__list li { margin-bottom: 8px; }

.site-footer__bottom {
	max-width: 1600px;
	margin: 0 auto;
	font-size: 12px;
	color: var(--color-text-muted);
}

/* ---------- Basic post list (fallback) ---------- */

.post-list__item {
	padding: 32px 0;
	border-bottom: 1px solid var(--color-line);
}

.post-list__title { font-size: 22px; margin-bottom: 10px; }