/* ==========================================================================
   Fonts
   Happy Times at the IKOB: self-hosted, converted from your uploaded OTF.
   Mona Sans: pulled from Google Fonts (see functions.php enqueue) instead of
   self-hosted — it's officially listed there now, so no license/hosting to
   manage ourselves.
   ========================================================================== */

@font-face {
	font-family: 'Happy Times at the IKOB';
	src: url('../fonts/happy-times/HappyTimesAtTheIKOB-Regular.woff') format('woff'),
	     url('../fonts/happy-times/HappyTimesAtTheIKOB-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--font-display: 'Happy Times at the IKOB', Georgia, 'Times New Roman', serif;
	--font-body: 'Mona Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;

	--color-text: #1a1a1a;
	--color-black: #000000;
	--color-white: #ffffff;
	--color-cream: #f2f0d3;
	--color-grey: #b3b6ac;
	--color-line: #e5e5e0; --color-line: #000000;

	--container-max: 1440px;
	--gutter: 48px;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

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

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-text);
	background: var(--color-white);
}

a { color: inherit; text-decoration: none; }
p { margin: 0; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; max-width:1920px; margin: auto;  width: 100%;}

/* ==========================================================================
   Header / nav
   ========================================================================== */

.site-header {
	background: var(--color-white);
	padding: 28px var(--gutter) 20px;
}

.site-header--home {
	background: var(--color-cream);
	height: 260px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.site-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	gap: 24px;
}

.site-logo {
	position: absolute;
	left: 0;
	display: inline-block;
	line-height: 0;
}

.site-logo img {
	height: 32px;
	width: auto;
	display: block;
}

.site-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 96px;
	margin: 0 auto;
}

.site-nav__item {
	font-family: var(--font-display);
	font-size: 24px;
	text-transform: uppercase;
	position: relative;
}

.site-nav__item.is-active::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 100%;
	margin-top: 8px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 7px solid var(--color-black);
	transform: translateX(-50%);
}

.lang-switch {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	position: absolute;
	right: 0;
}

.lang-switch__option { opacity: 0.4; }
.lang-switch__option.is-active { opacity: 1; }
.lang-switch__icon {
	width: 18px;
	height: 1px;
	background: currentColor;
	display: inline-block;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	padding: 0 var(--gutter) 16px;
}

.site-footer p {
	font-size: 12px;
	font-weight: 600;
}

/* ==========================================================================
   Home
   ========================================================================== */

.site-header--home .site-header__row {
  height:100%;
  align-items: start;
}

.site-header--home .site-header__row .site-nav {
  height:100%;
  align-items: end;
}

.home-main {
	position: relative;
	min-height: 480px;
}

.home-doodle {
	position: absolute;
	right: var(--gutter);
	bottom: 40px;
	width: 160px;
}

.home-doodle__img { display: block; width: 100%; height: auto; }

/* ==========================================================================
   About
   ========================================================================== */

.about-main {
	padding: 110px var(--gutter) 160px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 80px;
}

.about-intro {
	max-width: 660px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.about-offer {
	max-width: 306px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.about-offer__heading {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 16px;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-main {
	padding: 110px var(--gutter) 200px;
}

.contact-info {
	max-width: 300px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.contact-info a:hover { text-decoration: underline; }

/* ==========================================================================
   Work
   ========================================================================== */

.work-main {
	padding: 100px var(--gutter) 120px;
	display: flex;
	flex-wrap: wrap;
	align-items: start;
}

.work-view-switch {
	display: flex;
	flex: 1;
	padding-top:8px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-line);
	align-items: center;
	gap: 10px;
	text-transform: uppercase;
	font-size: 14px;
	margin-bottom: 24px;
	
}

.work-view-switch__btn { color: var(--color-grey); text-transform: uppercase; padding: 0; }
.work-view-switch__btn.is-active { color: var(--color-black); }

.work-table {
	flex:3;
}

.work-table__head,
.work-table__row {
	display: grid;
	grid-template-columns: 1.75fr 1.25fr 0.5fr 1.75fr;
	gap: 16px;
	padding: 8px 0;
}

.work-table__head {
	position: sticky;
	top: 0;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-line);
	padding-bottom: 12px;
	margin-bottom: 4px;
	text-transform: none;
	z-index: 1;
}

.work-table__row { border-bottom: 1px solid transparent; }
.work-table__arrow { display: inline-block; }

.work-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	flex: 1 1 100%;
	margin-top: 24px;
}

.work-gallery[hidden],
.work-table[hidden] {
	display: none;
}

.work-gallery__thumb {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--color-cream);
	margin-bottom: 12px;
}

.work-gallery__title { font-weight: 700; }
.work-gallery__meta { color: var(--color-grey); margin-top: 4px; }

/* ==========================================================================
   Responsive (approximate — refine against Figma's mobile frames separately)
   ========================================================================== */

@media (max-width: 900px) {
	:root { --gutter: 24px; }

	.site-nav { gap: 32px; }
	.site-nav__item { font-size: 18px; }
	.site-logo { font-size: 24px; }
	.site-header--home { height: 200px; }

	.about-main { flex-direction: column; gap: 48px; padding-top: 48px; }

	.work-main {
		display: block;
	}
	
	.work-table__head,
	.work-table__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.work-gallery { grid-template-columns: repeat(2, 1fr); }
}