/* melraj.com — personal creative portfolio */
/* Deliberate: light/warm gallery aesthetic. NOT the Songumentary dark theme. */

:root {
  --bg:       #FAFAF8;
  --bg2:      #F3F1EC;
  --bg3:      #EAE7E0;
  --text:     #1C1B19;
  --muted:    #7B7770;
  --accent:   #B5640A;
  --accent-lt:#D4871C;
  --border:   #E4E1DA;
  --radius:   4px;
  --max-w:    1100px;
  --gap:      1.5rem;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-size:15px;
  line-height:1.6;
  overflow-x:hidden;
}

a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
.display {
  font-family:'Playfair Display', Georgia, serif;
  font-weight:700;
}
h1, h2, h3 { font-family:'Playfair Display', Georgia, serif; line-height:1.2; }

/* ── NAV ─────────────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(250,250,248,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 5%;
  display:flex; align-items:center;
  justify-content:space-between;
  height:56px;
}
.nav-name {
  font-family:'Playfair Display', Georgia, serif;
  font-weight:700; font-size:1.05rem;
  letter-spacing:-.01em;
  color:var(--text);
  transition:color .15s;
}
.nav-name span { color:var(--accent); }
.nav-name:hover { color:var(--accent); }

nav ul { list-style:none; display:flex; gap:2rem; }
nav ul a {
  color:var(--muted); font-size:.85rem; font-weight:500;
  letter-spacing:.01em;
  transition:color .15s;
}
nav ul a:hover, nav ul a.active { color:var(--text); }

.nav-burger { display:none; cursor:pointer; flex-direction:column; gap:5px; }
.nav-burger span { width:22px; height:2px; background:var(--text); transition:all .2s; }

/* ── HERO ─────────────────────────────────────────────────── */
.hero {
  padding:9rem 5% 5rem;
  max-width:var(--max-w);
  margin:0 auto;
}
.hero-kicker {
  font-size:.75rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:1rem;
}
.hero h1 {
  font-size:clamp(2.4rem,5.5vw,4.2rem);
  font-weight:700; letter-spacing:-.03em;
  line-height:1.1; margin-bottom:1.25rem;
}
.hero-tagline {
  font-size:clamp(.95rem,1.8vw,1.1rem);
  color:var(--muted); max-width:560px;
  margin-bottom:1.5rem; line-height:1.75;
}
.hero-meta {
  font-size:.8rem; color:var(--muted); letter-spacing:.02em;
}
.hero-meta strong { color:var(--text); }

/* ── SECTION DIVIDER ─────────────────────────────────────── */
.divider {
  border:none; border-top:1px solid var(--border);
  margin:0 5%;
}

/* ── WORKS SECTION ───────────────────────────────────────── */
#works { padding:4rem 5%; max-width:var(--max-w); margin:0 auto; }

.works-header {
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:2rem; flex-wrap:wrap; gap:1rem;
}
.works-header h2 {
  font-size:1.5rem; font-weight:700;
}
.work-count {
  font-size:.85rem; color:var(--muted);
}

/* ── TABS ─────────────────────────────────────────────────── */
.tabs {
  display:flex; gap:.5rem; flex-wrap:wrap;
  margin-bottom:2.5rem;
  border-bottom:1px solid var(--border);
  padding-bottom:0;
}
.tab-btn {
  background:none; border:none; cursor:pointer;
  font-family:'Inter', system-ui, sans-serif;
  font-size:.875rem; font-weight:500;
  color:var(--muted);
  padding:.6rem 1rem .75rem;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .15s, border-color .15s;
}
.tab-btn:hover { color:var(--text); }
.tab-btn.active {
  color:var(--text);
  border-bottom-color:var(--accent);
}
.tab-btn .count {
  font-size:.75rem; color:var(--muted);
  margin-left:.35rem;
  background:var(--bg2); padding:.1rem .4rem;
  border-radius:10px;
}
.tab-btn.active .count { color:var(--text); background:var(--bg3); }

/* ── GALLERY GRID ────────────────────────────────────────── */
.gallery {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--gap);
}

/* ── WORK CARD ───────────────────────────────────────────── */
.work-card {
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .2s, box-shadow .2s, transform .2s;
  display:flex; flex-direction:column;
  cursor:pointer;
}
.work-card:hover {
  border-color:var(--accent-lt);
  box-shadow:0 4px 20px rgba(28,27,25,.07);
  transform:translateY(-2px);
}

.card-thumb {
  position:relative;
  aspect-ratio:16/9;
  background:var(--bg3);
  overflow:hidden;
}
.card-thumb img {
  width:100%; height:100%;
  object-fit:cover;
  transition:opacity .2s;
}
.card-thumb.gap-thumb {
  display:flex; align-items:center; justify-content:center;
  background:var(--bg2);
}
.card-thumb.gap-thumb svg { opacity:.25; }

.play-badge {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.0);
  transition:background .2s;
}
.work-card:hover .play-badge { background:rgba(0,0,0,.18); }
.play-badge svg {
  opacity:0; transform:scale(.9);
  transition:opacity .2s, transform .2s;
}
.work-card:hover .play-badge svg { opacity:1; transform:scale(1); }

.card-body { padding:1rem 1.1rem 1.1rem; flex:1; display:flex; flex-direction:column; }

.card-lang {
  display:inline-block;
  font-size:.68rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
  background:rgba(181,100,10,.08);
  padding:.15rem .5rem; border-radius:3px;
  margin-bottom:.6rem;
}

.card-title {
  font-family:'Playfair Display', Georgia, serif;
  font-size:.975rem; font-weight:700;
  line-height:1.35; margin-bottom:.4rem;
  color:var(--text);
  /* 2-line clamp */
  display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

.card-meta { font-size:.78rem; color:var(--muted); margin-bottom:.6rem; }
.card-meta .genre-tag { color:var(--text); font-weight:500; }

.card-desc {
  font-size:.8rem; color:var(--muted);
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  flex:1;
}

.card-gap-note {
  font-size:.75rem; color:var(--muted);
  margin-top:.75rem; font-style:italic;
  display:flex; align-items:center; gap:.35rem;
}
.card-gap-note svg { opacity:.5; flex-shrink:0; }

.card-link {
  display:inline-flex; align-items:center; gap:.35rem;
  margin-top:.75rem;
  font-size:.78rem; font-weight:600;
  color:var(--accent);
  transition:color .15s;
}
.card-link:hover { color:var(--accent-lt); }

/* ── LOAD MORE ───────────────────────────────────────────── */
.load-more-wrap {
  text-align:center; margin-top:3rem;
}
#btn-more {
  background:none; border:1px solid var(--border);
  border-radius:var(--radius);
  padding:.7rem 2rem; font-size:.875rem; font-weight:500;
  color:var(--muted); cursor:pointer;
  font-family:'Inter', system-ui, sans-serif;
  transition:border-color .2s, color .2s;
}
#btn-more:hover { border-color:var(--accent); color:var(--text); }
#btn-more:disabled { opacity:.4; cursor:default; }

/* ── LOADING / ERROR STATES ───────────────────────────────── */
.state-msg {
  grid-column:1/-1;
  text-align:center; padding:4rem 1rem;
  color:var(--muted); font-size:.9rem;
}
.state-msg a { color:var(--accent); text-decoration:underline; }

/* ── ABOUT ───────────────────────────────────────────────── */
#about {
  padding:5rem 5% 4rem;
  border-top:1px solid var(--border);
  max-width:var(--max-w);
  margin:0 auto;
}
.about-grid {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:4rem; align-items:start;
}
.about-portrait {
  aspect-ratio:3/4; background:var(--bg3);
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
}
.about-portrait img { width:100%; height:100%; object-fit:cover; object-position:top; }
/* Fallback when portrait.jpg is missing */
.about-portrait.portrait-missing img { display:none; }
.about-portrait.portrait-missing::after {
  content:''; position:absolute; inset:0;
  background:var(--bg3)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='%23C5C0B8'%3E%3Cpath d='M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z'/%3E%3C/svg%3E")
    center/80px no-repeat;
}

.about-content {}
.about-content h2 { font-size:1.75rem; margin-bottom:.5rem; }
.about-sub {
  font-size:.85rem; color:var(--accent); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:1.5rem;
}
.about-bio p { color:var(--text); line-height:1.8; margin-bottom:1rem; font-size:.95rem; }

.timeline { margin:2rem 0; border-left:2px solid var(--border); padding-left:1.5rem; }
.timeline-item { position:relative; margin-bottom:1.25rem; }
.timeline-item::before {
  content:'';
  position:absolute; left:-1.75rem; top:.35rem;
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
}
.timeline-year {
  font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:.15rem;
}
.timeline-fact { font-size:.875rem; color:var(--text); line-height:1.5; }

/* ── FOOTER ──────────────────────────────────────────────── */
footer {
  background:var(--bg2);
  border-top:1px solid var(--border);
  padding:2rem 5%;
  text-align:center;
}
.footer-exits {
  display:flex; align-items:center; justify-content:center;
  gap:1.5rem; flex-wrap:wrap;
  margin-bottom:.75rem;
}
.footer-exits a {
  font-size:.8rem; color:var(--muted);
  transition:color .15s;
}
.footer-exits a:hover { color:var(--text); }
.footer-exits .sep { color:var(--border); }
.footer-copy { font-size:.75rem; color:var(--muted); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:860px) {
  .about-grid { grid-template-columns:1fr; gap:2rem; }
  .about-portrait { max-width:220px; aspect-ratio:1; }
}
@media (max-width:640px) {
  .gallery { grid-template-columns:1fr; }
  nav ul { display:none; }
  .nav-burger { display:flex; }
  nav ul.open {
    display:flex; flex-direction:column;
    position:fixed; top:56px; left:0; right:0;
    background:var(--bg); border-bottom:1px solid var(--border);
    padding:1rem 5%; gap:1rem;
  }
}