@import url('https://fonts.googleapis.com/css2?family=Merriweather:opsz,wdth,wght@18..144,87..112,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, "ss06" 1;
}

:root { --paper: #f1eee0; --ink: #100e0d; --decorative: #478beb; --line: #000000; --panel-width: 50vw; --portrait-max-height: 400px; }

* { 
	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: 21px; line-height: 1.32; font-weight: 400; font-variation-settings: "wght" 400, "wdth" 95, "opsz" 82; }
button, a { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; text-decoration: none; }

/* Scrollbar styling */
::-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); }

.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; }
.intro-panel { border-right: 1px solid var(--line); height: 100%; display: flex; flex-direction: column; }
.project-panel { border-left: 1px solid var(--line); height: 100%; display: flex; flex-direction: column; }
.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: 27px; 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: 21px; }
.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; }
.project-link:not(.active) { opacity: .56; text-decoration: underline dotted var(--decorative); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.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'; font-size: clamp(58px, 6vw, 82px); font-weight: 400; letter-spacing: -2px; line-height: 1; margin: 0 0 8px; }
.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; }
.free-works h2, .projects-label { color: var(--decorative); font-family: 'Poetsen One', sans-serif; font-size: 26px; font-weight: 400; letter-spacing: -1px; line-height: .95; }
.free-works { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.free-works h2 { margin: 0; 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 img {object-fit: cover; }
.work-tile.wide img { aspect-ratio: 3100 / 1200; }
.project-nav { position: sticky; 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: 21px; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--decorative); text-underline-offset: 3px; }
.project-link.active { text-decoration-thickness: 2px; }
.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], .empty-project[hidden] { display: none; }
.project-content p { margin: 0 0 12px; }
.project-image { display: block; cursor: zoom-in; overflow: hidden; }
.hero-project-image { aspect-ratio: 1920 / 1080; margin-bottom: 12px; }
.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); }
/*.three-images .project-image, .two-images .project-image { aspect-ratio: 16 / 9; }*/
.empty-project { padding: 40px 12px; }
.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: 30px; line-height: 1; }
body.dark { --paper: #161213; --ink: #def8fd; --decorative: #e73d81; --line: #ffffff; }
body.dark .project-nav { background: var(--paper); }
body.dark .lightbox { background: var(--paper); }
@media (max-width: 1312px) { body { font-size: 19px; } .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); } .project-link { font-size: 16px; } .projects-label { font-size: 21px; } .intro-grid { grid-template-columns: auto 1fr; } .portrait-button { aspect-ratio: 4 / 5; } .work-tile span { font-size: 20px; } }
@media (max-width: 710px) { .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; } }