/* ------------------------------------------- */
/*  Björk Theme — Shared Stylesheet
/* ------------------------------------------- */

:root {
	--color-foreground:  #111111;
	--color-background:  #FFFFFF;
	--color-primary:     #1791FF;
	--color-secondary:   #6B6A6A;
	--color-tertiary:    #E2E2E2;
	--color-quaternary:  #F3F2F2;

	--font-tiny:      clamp(14px, 1.5vw, 16px);
	--font-small:     clamp(16px, 1.8vw, 18px);
	--font-medium:    clamp(18px, 2.1vw, 22px);
	--font-large:     clamp(21px, 2.5vw, 24px);
	--font-xl:        clamp(24px, 3vw,   32px);
	--font-huge:      clamp(36px, 5vw,   64px);

	--spacing-70: 3.5rem;
	--content-max: 1600px;
}

/* ------------------------------------------- */
/*  Reset & Base
/* ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
	font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	font-size: var(--font-medium);
	color: var(--color-foreground);
	background-color: var(--color-background);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-underline-offset: 0.2em; }

/* ------------------------------------------- */
/*  Layout
/* ------------------------------------------- */
.site-wrapper {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.site-columns {
	display: flex;
	align-items: flex-start;
}

/* ------------------------------------------- */
/*  Sidebar
/* ------------------------------------------- */
.site-sidebar {
	width: 23%;
	flex-shrink: 0;
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	gap: 2em;
	padding-top: var(--spacing-70);
	padding-bottom: var(--spacing-70);
	padding-right: 2rem;
}

.site-sidebar nav {
	margin-top: auto;
	margin-bottom: auto;
}

.site-title {
	font-size: clamp(28px, 3.5vw, 40px);
	font-style: normal;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.site-nav {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	list-style: none;
}

.site-nav a {
	font-size: var(--font-large);
	text-decoration: none;
	transition: color 0.2s;
}

.site-nav a:hover,
.site-nav a.active { color: var(--color-primary); }

.site-nav a.sub-nav {
	display: block;
	font-size: var(--font-medium);
	padding-left: 1.3em;
	text-indent: -1.3em;
	color: var(--color-secondary);
}

.social-links {
	display: flex;
	gap: 1em;
	list-style: none;
}

.social-links a {
	color: var(--color-foreground);
	font-size: 1.1rem;
	text-decoration: none;
	transition: color 0.2s;
}

.social-links a:hover { color: var(--color-primary); }

/* ------------------------------------------- */
/*  Main column
/* ------------------------------------------- */
.site-main-col {
	width: 77%;
	flex: 1;
}

.hero-animation {
	margin-top: calc(var(--spacing-70) + 0.4rem);
}

/* ------------------------------------------- */
/*  Page header (for inner pages)
/* ------------------------------------------- */
.page-header {
	padding: 4rem 3rem 2rem;
}

.page-header h1 {
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* ------------------------------------------- */
/*  Hero Section
/* ------------------------------------------- */
.hero {
	min-height: 90vh;
	background-color: var(--color-quaternary);
	display: flex;
	align-items: center;
}

.hero-inner {
	padding: 4rem 3rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	color: var(--color-foreground);
	width: 100%;
}

.hero-eyebrow {
	font-size: var(--font-xl);
	font-weight: 700;
	color: var(--color-secondary);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.hero-heading {
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.hero-buttons {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
}

/* ------------------------------------------- */
/*  Buttons
/* ------------------------------------------- */
.btn {
	display: inline-block;
	padding: 0.65em 1.4em;
	font-size: var(--font-medium);
	font-family: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border-radius: 3px;
	transition: opacity 0.2s;
}

.btn:hover { opacity: 0.85; }

.btn-filled {
	background-color: var(--color-foreground);
	color: var(--color-background);
	border: 2px solid var(--color-foreground);
}

.btn-outline {
	background-color: transparent;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
}

.btn-dark {
	background-color: var(--color-foreground);
	color: var(--color-background);
	border: none;
	font-size: var(--font-tiny);
	padding: 0.55em 1.1em;
	border-radius: 3px;
	align-self: flex-start;
	text-decoration: none;
	font-weight: 600;
	transition: opacity 0.2s;
}

.btn-dark:hover { opacity: 0.8; }

/* ------------------------------------------- */
/*  Angled Separator
/* ------------------------------------------- */
.angled-separator {
	background-color: transparent !important;
	background-image: linear-gradient(-45deg, var(--color-tertiary) 25%, transparent 25%, transparent 50%, var(--color-tertiary) 50%, var(--color-tertiary) 75%, transparent 75%, transparent);
	background-size: 5px 5px;
	border: none;
	height: 10px !important;
	width: 100%;
	display: block;
}

.angled-separator-dark {
	background-image: linear-gradient(-45deg, var(--color-secondary) 25%, transparent 25%, transparent 50%, var(--color-secondary) 50%, var(--color-secondary) 75%, transparent 75%, transparent);
}

/* ------------------------------------------- */
/*  Two-column text block
/* ------------------------------------------- */
.text-columns {
	display: flex;
	gap: 2rem;
	padding: 5vh 3rem;
}

.text-columns > div {
	flex: 1;
	line-height: 1.7;
	font-size: var(--font-medium);
}

/* ------------------------------------------- */
/*  Featured Items
/* ------------------------------------------- */
.featured-items {
	display: flex;
	gap: 0;
	padding: 0 0 3rem 0;
}

.featured-item {
	flex: 1;
	background-color: var(--color-quaternary);
	color: var(--color-foreground);
	display: flex;
	flex-direction: column;
}

.featured-item + .featured-item { margin-left: 1px; }

.featured-item img {
	width: 100%;
	height: auto;
	display: block;
}

.featured-item-body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	background-color: var(--color-quaternary);
	flex: 1;
}

.featured-item-body h6 {
	font-size: var(--font-medium);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
}

.featured-item-body p {
	font-size: var(--font-small);
	line-height: 1.6;
}

/* ------------------------------------------- */
/*  Testimonials
/* ------------------------------------------- */
.testimonials {
	display: flex;
	gap: 1px;
	padding: 0 0 3rem 0;
}

.testimonial-card {
	flex: 1;
	background-color: var(--color-foreground);
	color: var(--color-background);
	padding: 2.5em;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
	text-align: center;
}

.testimonial-card img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
}

.testimonial-card p {
	line-height: 1.6;
	font-size: var(--font-medium);
}

.testimonial-sep {
	background-image: linear-gradient(-45deg, var(--color-secondary) 25%, transparent 25%, transparent 50%, var(--color-secondary) 50%, var(--color-secondary) 75%, transparent 75%, transparent);
	background-size: 5px 5px;
	background-color: transparent;
	border: none;
	height: 10px;
	width: 80px;
}

.testimonial-author {
	font-size: var(--font-medium);
	font-weight: 400;
	line-height: 1.4;
}

.testimonial-author strong { display: block; font-weight: 700; }

/* ------------------------------------------- */
/*  CTA Banner
/* ------------------------------------------- */
.cta-banner {
	background-color: var(--color-primary);
	color: var(--color-background);
	border-radius: 8px;
	padding: 1.5rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0 0 3rem 0;
}

.cta-banner h3 {
	font-size: var(--font-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.btn-cta {
	background-color: var(--color-foreground);
	color: var(--color-background);
	padding: 0.65em 1.4em;
	border-radius: 3px;
	font-weight: 600;
	text-decoration: none;
	font-size: var(--font-medium);
	white-space: nowrap;
	transition: opacity 0.2s;
}

.btn-cta:hover { opacity: 0.85; }

/* ------------------------------------------- */
/*  Follow Us Banner
/* ------------------------------------------- */
.follow-banner {
	background-color: var(--color-primary);
	color: var(--color-background);
	border-radius: 8px;
	padding: 2.5rem 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	text-align: center;
	margin: 0 0 3rem 0;
}

.follow-banner h3 {
	font-size: var(--font-xl);
	font-weight: 700;
}

.follow-banner p {
	font-size: var(--font-medium);
	line-height: 1.6;
}

.follow-sep {
	background-image: linear-gradient(-45deg, var(--color-background) 25%, transparent 25%, transparent 50%, var(--color-background) 50%, var(--color-background) 75%, transparent 75%, transparent);
	background-size: 5px 5px;
	background-color: transparent;
	border: none;
	height: 10px;
	width: 100%;
}

.follow-social {
	display: flex;
	gap: 1.5rem;
	list-style: none;
}

.follow-social a {
	color: var(--color-background);
	font-size: 1.3rem;
	text-decoration: none;
	transition: opacity 0.2s;
}

.follow-social a:hover { opacity: 0.7; }

/* ------------------------------------------- */
/*  Blog Posts
/* ------------------------------------------- */
.blog-post {
	padding: 0 3rem;
}

.post-date {
	font-size: var(--font-large);
	font-weight: 600;
	color: var(--color-primary);
	margin-bottom: 0.25em;
	font-style: normal;
	display: block;
}

.post-title {
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin-bottom: 1.5rem;
}

.post-title a {
	text-decoration: none;
	transition: color 0.2s;
}

.post-title a:hover { color: var(--color-primary); }

.post-featured-img {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 4rem;
}

.post-content {
	line-height: 1.75;
	font-size: var(--font-medium);
	margin-bottom: 2rem;
}

.post-content p + p { margin-top: 1.2em; }

.post-meta {
	font-size: var(--font-small);
	color: var(--color-secondary);
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin-bottom: 2rem;
}

.post-meta a {
	color: var(--color-primary);
	text-decoration: none;
}

.post-meta a:hover { text-decoration: underline; }

.post-sep-wrap {
	padding: 5vh 3rem;
}

/* ------------------------------------------- */
/*  Blog pagination
/* ------------------------------------------- */
.blog-pagination {
	padding: 0 3rem 3rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--font-small);
	font-weight: 700;
}

.blog-pagination a {
	color: var(--color-primary);
	text-decoration: none;
	transition: opacity 0.2s;
}

.blog-pagination a:hover { opacity: 0.7; }

.pagination-numbers {
	display: flex;
	gap: 0.5em;
}

.pagination-numbers a,
.pagination-numbers span {
	color: var(--color-primary);
	font-weight: 700;
	text-decoration: none;
	padding: 0 0.3em;
}

.pagination-numbers .current {
	text-decoration: underline;
}

/* ------------------------------------------- */
/*  Footer
/* ------------------------------------------- */
.site-footer {
	padding-top: var(--spacing-70);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	font-size: var(--font-small);
	gap: 1em;
	padding-bottom: 2rem;
	padding-left: 3rem;
	padding-right: 3rem;
}

.footer-left {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
	align-items: center;
}

.footer-copy {
	display: flex;
	gap: 0.5em;
	font-weight: 700;
}

.footer-credit {
	color: var(--color-secondary);
}

.footer-credit a, .footer-right a { color: inherit; }

/* ------------------------------------------- */
/*  Team Page
/* ------------------------------------------- */
.team-section {
	padding: 3rem 3rem 1rem;
}

.team-section h2 {
	font-size: var(--font-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 2rem;
}

.team-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.team-card {
	width: calc(25% - 1.125rem);
}

.team-card__name-link {
	text-decoration: none;
	color: inherit;
	transition: color 0.2s;
}

.team-card__name-link:hover {
	color: var(--color-primary);
}

.team-card__photo {
	position: relative;
	width: 100%;
	padding-top: 128.57%; /* 3.5:4.5 ratio */
	background-color: var(--color-quaternary);
	overflow: hidden;
}

.team-card__photo img {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.team-card__photo .placeholder {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-tertiary);
	font-size: 3rem;
}

.team-card__name {
	margin-top: 0.75rem;
	font-size: var(--font-medium);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.team-card__role {
	font-size: var(--font-tiny);
	color: var(--color-secondary);
	margin-top: 0.25rem;
}

@media (max-width: 780px) {
	.team-card { width: calc(50% - 0.75rem); }
}

/* ------------------------------------------- */
/*  Shared Components
/* ------------------------------------------- */
.section-title {
	font-size: var(--font-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.btn-outline {
	display: inline-block;
	font-size: var(--font-tiny);
	font-weight: 600;
	color: var(--color-foreground);
	text-decoration: none;
	border: 1.5px solid var(--color-foreground);
	padding: 0.35em 0.9em;
	border-radius: 3px;
	align-self: flex-start;
	transition: background 0.2s, color 0.2s;
}

.btn-outline:hover {
	background-color: var(--color-foreground);
	color: var(--color-background);
}

/* ------------------------------------------- */
/*  Fade-in Animation
/* ------------------------------------------- */
.fade-in {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.fade-in.visible {
	opacity: 1;
}

/* ------------------------------------------- */
/*  Image Space Reservation (prevents layout shift)
/* ------------------------------------------- */
.pub-entry__image img,
.vision-figure__image img,
.featured-item img {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
	display: block;
	background-color: var(--color-quaternary);
}

/* ------------------------------------------- */
/*  Publications Page
/* ------------------------------------------- */
.pub-entry {
	display: flex;
	gap: 2.5rem;
	align-items: flex-start;
	padding: 2rem 0;
	border-bottom: 1px solid var(--color-tertiary);
}

.pub-entry__image {
	flex: 0 0 360px;
}

.pub-entry__image img {
	width: 100%;
	height: auto;
	display: block;
}

.pub-entry__text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

@media (max-width: 780px) {
	.pub-entry { flex-direction: column; }
	.pub-entry__image { flex: 0 0 auto; width: 100%; }
}

/* ------------------------------------------- */
/*  Vision Page
/* ------------------------------------------- */
.vision-figure {
	display: flex;
	gap: 3rem;
	align-items: flex-start;
	margin-bottom: 3rem;
}

.vision-figure__image {
	flex: 1;
}

.vision-figure__image img {
	width: 100%;
	height: auto;
	display: block;
}

.vision-figure__text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1em;
	font-size: var(--font-small);
	line-height: 1.7;
	color: var(--color-secondary);
}

/* ------------------------------------------- */
/*  Hamburger Button
/* ------------------------------------------- */
.nav-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.4rem;
	font-size: 1.4rem;
	color: var(--color-foreground);
	line-height: 1;
}

/* ------------------------------------------- */
/*  Responsive
/* ------------------------------------------- */
@media (max-width: 780px) {
	.site-columns { flex-direction: column; }

	.site-sidebar {
		width: 100%;
		position: sticky;
		top: 0;
		z-index: 100;
		height: auto;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding: 1.5rem;
		gap: 0;
		background-color: var(--color-background);
		border-bottom: 1px solid var(--color-tertiary);
	}

	.site-sidebar nav {
		display: none;
		width: 100%;
		margin: 0;
		padding-top: 1rem;
		padding-bottom: 0.5rem;
	}

	.site-sidebar.nav-open nav {
		display: block;
	}

	.nav-toggle {
		display: block;
	}

	.site-main-col { width: 100%; }

	.hero-inner,
	.page-header { padding: 3rem 1.5rem 2rem; }

	.text-columns { flex-direction: column; padding: 3vh 1.5rem; }

	.featured-items,
	.testimonials { flex-direction: column; gap: 1px; }

	.featured-item + .featured-item { margin-left: 0; margin-top: 1px; }

	.vision-figure { flex-direction: column; gap: 1.5rem; }

	.blog-post,
	.post-sep-wrap,
	.blog-pagination { padding-left: 1.5rem; padding-right: 1.5rem; }

	.site-footer { padding: var(--spacing-70) 1.5rem 2rem; }

	.news-item { flex-direction: column; gap: 0.4rem; }
	.news-item > div:first-child { flex: 0 0 auto !important; }
}