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

html { scroll-behavior: smooth; }

body {
background: #fff;
color: #000;
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 18px;
font-weight: 400;
display: flex;
min-height: 100vh;
}

/* ────────────────────────────────────────
 Loader
──────────────────────────────────────── */
#loader {
position: fixed;
inset: 0;
background: #fff;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}

.loader-text-wrap {
position: relative;
display: inline-block;
}

.loader-name-bg {
font-size: 36px;
font-weight: 700;
color: #e8e8e8;
white-space: nowrap;
display: block;
}

.loader-name-fill {
position: absolute;
top: 0;
left: 0;
width: 0%;
overflow: hidden;
white-space: nowrap;
}

.loader-name-fill span {
font-size: 36px;
font-weight: 700;
color: #000;
white-space: nowrap;
display: block;
}

/* ────────────────────────────────────────
 Left Sidebar
──────────────────────────────────────── */
aside {
position: fixed;
top: 0;
left: 0;
width: 240px;
height: 100vh;
padding: 2rem;
border-right: 1px solid #e0e0e0;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 10;
background: #fff;
}

.sidebar-top {
display: flex;
flex-direction: column;
gap: 3rem;
}

/* ── Language toggle ── */
.lang-toggle {
display: flex;
align-items: center;
gap: 0.3rem;
}

.lang-btn {
font-size: 18px;
font-weight: 400;
color: #aaa;
cursor: pointer;
user-select: none;
transition: color 0.2s ease;
text-decoration: none;
}

.lang-btn.active {
color: #000;
text-decoration: underline;
text-underline-offset: 3px;
}

.lang-btn:hover {
color: #000;
text-decoration: underline;
text-underline-offset: 3px;
}

.lang-sep {
font-size: 18px;
color: #ddd;
pointer-events: none;
}

/* ── Name ── */
.name {
font-size: 19px;
font-weight: 700;
}

/* ── Nav ── */
nav {
display: flex;
flex-direction: column;
gap: 1rem;
}

nav a {
color: #000;
text-decoration: none;
font-size: 18px;
font-weight: 400;
transition: opacity 0.2s ease;
cursor: pointer;
}

nav a:hover  { opacity: 0.5; }
nav a.active { opacity: 0.5; }

/* ── Copyright ── */
.sidebar-bottom {
font-size: 11px;
font-weight: 400;
color: #aaa;
}

/* ────────────────────────────────────────
 Right Content
──────────────────────────────────────── */
main {
margin-left: 240px;
flex: 1;
padding: 4rem 3rem;
min-height: 100vh;
overflow-y: auto;
}

/* ────────────────────────────────────────
 Sections — controlled by script.js
──────────────────────────────────────── */
.section {
display: none;
opacity: 0;
}

/* ────────────────────────────────────────
 Paintings — Masonry
──────────────────────────────────────── */
.paintings-grid {
columns: 3;
column-gap: 1.5rem;
}

.painting-item {
break-inside: avoid;
margin-bottom: 1.5rem;
cursor: pointer;
}

.painting-item img {
width: 100%;
height: auto;
display: block;
background: #f0f0f0;
transition: opacity 0.25s ease;
}

.painting-item:hover img { opacity: 0.8; }

/* ────────────────────────────────────────
 Resume
──────────────────────────────────────── */
.resume-inner {
max-width: 560px;
display: flex;
flex-direction: column;
gap: 3rem;
}

.resume-identity {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding-bottom: 0.5rem;
}

.resume-name {
font-size: 19px;
font-weight: 700;
margin-bottom: 0.4rem;
}

.resume-bio {
font-size: 18px;
font-weight: 400;
color: #555;
line-height: 1.6;
}

.resume-block {
display: flex;
flex-direction: column;
gap: 0.9rem;
}

.resume-heading {
font-size: 19px;
font-weight: 700;
padding-bottom: 0.6rem;
border-bottom: 1px solid #e0e0e0;
}

.resume-entry {
display: grid;
grid-template-columns: 90px 1fr;
gap: 1.5rem;
line-height: 1.6;
}

.resume-year {
font-size: 18px;
color: #aaa;
font-weight: 400;
}

.resume-detail {
font-size: 18px;
font-weight: 400;
line-height: 1.6;
}

.resume-link {
color: #000;
text-decoration: none;
border-bottom: 1px solid #000;
}

.resume-link:hover { opacity: 0.5; }

/* ────────────────────────────────────────
 Text Page
──────────────────────────────────────── */
.text-inner {
max-width: 560px;
line-height: 1.9;
font-weight: 400;
font-size: 18px;
}

.text-inner p { margin-bottom: 1.5rem; }

.text-inner h2 {
font-size: 19px;
font-weight: 700;
margin-bottom: 0.5rem;
margin-top: 2rem;
}

/* ────────────────────────────────────────
 Contact
──────────────────────────────────────── */
.contact-inner { display: flex; align-items: flex-start; }

.contact-link {
color: #000;
border-bottom: 1px solid #000;
text-decoration: none;
font-weight: 400;
font-size: 18px;
}

.contact-link:hover { opacity: 0.5; }

/* ────────────────────────────────────────
 Lightbox — controlled by script.js
──────────────────────────────────────── */
#lightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
z-index: 100;
align-items: center;
justify-content: center;
padding: 3rem;
opacity: 0;
}

.lightbox-inner {
display: flex;
align-items: flex-start;
gap: 2.5rem;
max-width: 900px;
max-height: 90vh;
width: 100%;
opacity: 0;
transform: scale(0.96);
}

.lightbox-img-wrap {
flex: 0 0 auto;
max-height: 85vh;
display: flex;
align-items: center;
}

.lightbox-img-wrap img {
max-height: 85vh;
max-width: 580px;
width: auto;
height: auto;
object-fit: contain;
display: block;
background: #111;
}

.lightbox-meta {
flex: 0 0 160px;
padding-top: 0.25rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}

.meta-title {
font-size: 12px;
font-weight: 700;
color: #fff;
}

.meta-year,
.meta-medium {
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 0.5);
}

.lightbox-close {
position: fixed;
top: 1.5rem;
right: 1.5rem;
background: none;
border: none;
color: rgba(255, 255, 255, 0.6);
font-size: 24px;
cursor: pointer;
font-family: 'DM Sans', sans-serif;
line-height: 1;
transition: color 0.2s ease;
}

.lightbox-close:hover { color: #fff; }

/* ────────────────────────────────────────
 Responsive — tablet
──────────────────────────────────────── */
@media (max-width: 900px) {

aside           { width: 192px; padding: 1.6rem; }
.name           { font-size: 15px; }
nav a           { font-size: 14px; }
.lang-btn,
.lang-sep       { font-size: 14px; }
.sidebar-bottom { font-size: 9px; }
.resume-heading { font-size: 15px; }
.text-inner h2  { font-size: 15px; }

main { margin-left: 192px; padding: 3rem 2rem; }

.paintings-grid { columns: 2; }

.resume-entry { grid-template-columns: 70px 1fr; gap: 1rem; }

}

/* ────────────────────────────────────────
 Responsive — mobile
──────────────────────────────────────── */
@media (max-width: 560px) {

body { flex-direction: column; }

aside {
  position: relative;
  width: 100%;
  height: auto;
  padding: 1rem 1.5rem;
  border-right: none;
  border-bottom: 1px solid #e0e0e0;
  flex-direction: row;
  align-items: center;
}

.sidebar-top {
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
}

nav { flex-direction: row; gap: 1.2rem; }

.sidebar-bottom { display: none; }

main { margin-left: 0; padding: 2rem 1.5rem; }

.paintings-grid { columns: 2; }

.resume-entry { grid-template-columns: 1fr; gap: 0.2rem; }
.resume-year  { font-size: 14px; }

}