@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300..900;1,300..900&family=Poetsen+One&display=swap');

@font-face {
	font-family: 'SRT Indicateur';
	src: url('fonts/SRTIndicateur-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-feature-settings: "ss05" 1;
}

:root { 
	--paper: #f1eee0; 
	--ink: #100e0d; 
	--decorative: #478beb; 
	--line: #000000; 
	--panel-width: 50vw; 
	--portrait-max-height: 400px; 
	
	--merriweather-size: 20px; 
	--poetsen-size: 25px;
	--indicateur-size: 82px;
	--icon-button-size: 27px;
	--lightbox-close-size: 30px;
	--language-toggle-size: var(--merriweather-size);
	--info-toggle-size: var(--merriweather-size);
	--project-link-size: var(--merriweather-size);
}

* { 
	box-sizing: border-box; 
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
}

html { scroll-behavior: smooth; }
body { 
	margin: 0; 
	background: var(--paper); 
	color: var(--ink); 
	font-family: 'Merriweather', Georgia, serif; 
	font-size: var(--merriweather-size); 
	line-height: 1.32; 
	font-weight: 400; 
}

button, a { 
	color: inherit; 
	font: inherit; 
	-webkit-tap-highlight-color: transparent; 
	text-decoration: none; 
}

/* Scrollbars */
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink); }

/* Structural Grid */
.portfolio-shell { 
	display: flex; 
	width: 100%; 
	height: 100vh; 
	min-height: 960px; 
	max-width: 3840px; 
	margin: auto; 
	background: var(--paper); 
}

.intro-panel, .project-panel { 
	width: 50%; 
	min-width: 0; 
	height: 100%; 
	display: flex; 
	flex-direction: column; 
	overflow: hidden;
}

.intro-panel { border-right: 1px solid var(--line); }
.project-panel { border-left: 1px solid var(--line); }

.site-header, .project-nav { 
	min-height: 54px; 
	border-bottom: 1px solid var(--line); 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
}

.site-header { height: 65px; flex-shrink: 0; }

.icon-button, .language-toggle { border: 0; background: transparent; cursor: pointer; }
.icon-button { padding-left: 12px; width: 42px; height: 42px; font-size: var(--icon-button-size); line-height: 1; }
.theme-toggle-icon { width: 100%; height: 100%; filter: brightness(0) saturate(100%) invert(0%); }
body.dark .theme-toggle-icon { filter: brightness(0) saturate(100%) invert(100%); }

.language-toggle { width: 128px; height: 64px; font-size: var(--language-toggle-size); }
.language-option { text-decoration: underline dotted var(--decorative); text-decoration-thickness: 2px; text-underline-offset: 3px; opacity: 0.56; transition: opacity 0.2s ease; }
.language-option.language-active { text-decoration: underline solid var(--decorative); text-decoration-thickness: 2px; text-underline-offset: 3px; opacity: 1; }
.language-divider { padding: 0 7px; }

.info-toggle { font-size: var(--info-toggle-size); border: 0; background: transparent; cursor: pointer; width: 256px; height: 64px; }
.info-option { text-decoration: underline dotted var(--decorative); text-decoration-thickness: 2px; text-underline-offset: 3px; opacity: 0.56; transition: opacity 0.2s ease; }
.info-option.info-active { text-decoration: underline solid var(--decorative); text-decoration-thickness: 2px; text-underline-offset: 3px; opacity: 1; }
.info-divider { padding: 0 7px; }

.intro-content { padding: 0 12px 12px; border-bottom: 1px solid var(--line); overflow: hidden; flex-shrink: 0; }
h1 { color: var(--decorative); font-family: 'SRT Indicateur', serif; font-size: var(--indicateur-size); font-weight: 400; letter-spacing: -0.5px; line-height: 1; margin: 0 0 10px; }

.intro-grid { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: stretch; }
.portrait-button { padding: 0; border: 0; background: transparent; cursor: zoom-in; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; max-height: var(--portrait-max-height); }
.portrait-button img, .work-tile img, .project-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.intro-copy { min-height: 258px; max-height: var(--portrait-max-height); overflow-y: auto; scrollbar-gutter: stable; }
.intro-copy p { margin: 0 0 18px; }

/* Headings Styling */
.free-works h2, .projects-label h2 { 
	color: var(--decorative); 
	font-family: 'Poetsen One', sans-serif; 
	font-size: var(--poetsen-size); 
	font-weight: 400; 
	letter-spacing: 0px; 
	line-height: 1.2; 
	margin: 0;
	display: block;
	visibility: visible;
}

.free-works { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.free-works h2 { padding: 4px 12px 7px; border-bottom: 1px solid var(--line); flex-shrink: 0; position: sticky; top: 0; background: var(--paper); z-index: 1; }
.free-work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 12px 20px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-gutter: stable; }
.free-work-column { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.work-tile { display: block; cursor: zoom-in; }
.work-tile.wide img { aspect-ratio: 3100 / 1200; }

.project-nav { top: 0; z-index: 2; min-width: 0; padding-left: 12px; background: var(--paper); gap: 20px; flex-shrink: 0; justify-content: space-between; }
.project-link { font-size: var(--project-link-size); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--decorative); text-underline-offset: 3px; }
.project-link:not(.active) { opacity: .56; text-decoration: underline dotted var(--decorative); text-decoration-thickness: 2px; }
.project-link.active { text-decoration-thickness: 2px; opacity: 1; }
.projects-label { padding: 0 12px 0 0; white-space: nowrap; }

.project-blurb, .project-content { padding: 12px; }
.project-blurb { border-bottom: 1px solid var(--line); margin: 0; padding-top: 9px; padding-bottom: 9px; flex-shrink: 0; }
.project-content { flex: 1; overflow-y: auto; min-height: 0; }
.project-content[hidden] { display: none !important; }
.project-content p { margin: 0 0 12px; }

.project-image { display: block; cursor: zoom-in; overflow: hidden; }
.image-row { display: grid; gap: 12px; margin: 0 0 12px; }
.three-images { grid-template-columns: repeat(3, 1fr); }
.two-images { grid-template-columns: repeat(2, 1fr); }

/* Lightbox Modal */
.lightbox { width: min(94vw, 1200px); max-height: 94vh; padding: 18px; border: 1px solid var(--line); background: var(--paper); }
.lightbox::backdrop { background: rgba(18, 15, 12, .8); }
.lightbox img { display: block; max-width: 100%; max-height: 86vh; margin: auto; object-fit: contain; }
.lightbox-close { position: absolute; top: 5px; right: 12px; border: 0; background: transparent; cursor: pointer; font-size: var(--lightbox-close-size); line-height: 1; }

/* Dark Theme Overlay */
body.dark { --paper: #161213; --ink: #def8fd; --decorative: #e73d81; --line: #ffffff; }
body.dark .project-nav, body.dark .lightbox { background: var(--paper); }

/* Responsive Adjustments */
@media (max-width: 1312px) { 
	:root { 
		--merriweather-size: 18px; 
		--poetsen-size: 23px; 
		--indicateur-size: 72px; 
		--icon-button-size: 24px;
		--lightbox-close-size: 26px;
	} 
	.portfolio-shell { display: flex; flex-direction: column; width: 100%; height: auto; min-height: 0; } 
	.intro-panel, .project-panel { width: 100%; height: auto; position: static; border: 0; overflow: visible; } 
	.intro-panel { display: contents; } 
	.intro-content { order: 1; height: auto; min-height: 447px; } 
	.project-panel { display: contents; } 
	.project-nav { order: 2; overflow-x: auto; gap: 16px; } 
	.project-blurb { order: 3; } 
	.project-content { order: 4; } 
	.free-works { order: 5; border-top: 1px solid var(--line); }
	.intro-grid { grid-template-columns: auto 1fr; } 
}

@media (max-width: 710px) { 
	:root { 
		--merriweather-size: 16px; 
		--poetsen-size: 21px; 
		--indicateur-size: 62px; 
		--icon-button-size: 22px;
		--lightbox-close-size: 24px;
	} 
	.intro-grid { grid-template-columns: 1fr; } 
	.portrait-button { max-width: 220px; aspect-ratio: 4 / 5; } 
	.free-work-grid { gap: 8px; padding-left: 8px; padding-right: 8px; } 
	.three-images, .two-images { gap: 8px; } 
}