/* ═══════════════════════════════════════
   ESTHER SCHENAU — V4 Split Dark
   Design: B&W + Coral · Space Grotesk
═══════════════════════════════════════ */

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

:root {
  --bg:        #ffffff;
  --fg:        #0a0a0a;
  --hero-dark: #0a0a0a;
  --accent:    #F4533C;
  --muted:     #777;
  --border:    #e8e8e8;
  --font:      'Space Grotesk', sans-serif;
}

html { font-family: var(--font); background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── NAV ── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px 52px;
  /* White text on dark hero — works on both panels */
}
.nav-logo {
  font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff;
}
.nav-links { display: flex; gap: 36px; }
.nav-links a {
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.75); transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: #fff; }

/* On non-hero pages, nav needs to be dark */
.post-page .site-nav,
.about-page .site-nav {
  position: sticky; background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 20px 52px;
}
.post-page .site-nav .nav-logo,
.about-page .site-nav .nav-logo { color: var(--fg); }
.post-page .site-nav .nav-links a,
.about-page .site-nav .nav-links a { color: var(--muted); }
.post-page .site-nav .nav-links a:hover,
.about-page .site-nav .nav-links a:hover { color: var(--fg); }

/* Journal + Art pages: nav dark since no hero */
body:not(.home-page):not(.post-page):not(.about-page) .site-nav {
  position: sticky; background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 20px 52px;
}
body:not(.home-page):not(.post-page):not(.about-page) .site-nav .nav-logo { color: var(--fg); }
body:not(.home-page):not(.post-page):not(.about-page) .site-nav .nav-links a { color: var(--muted); }
body:not(.home-page):not(.post-page):not(.about-page) .site-nav .nav-links a:hover,
body:not(.home-page):not(.post-page):not(.about-page) .site-nav .nav-links a.active { color: var(--fg); }

/* ════════════════════════════════════════
   HOME PAGE
════════════════════════════════════════ */

/* ── Hero: 42/58 split ── */
.hero {
  height: 100vh; min-height: 600px;
  display: grid; grid-template-columns: 42% 1fr;
  position: relative;
}

/* Left: solid dark — text guaranteed readable */
.hero-left {
  position: relative; z-index: 10;
  background: var(--hero-dark);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 52px 72px;
  border-right: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
}
.hero-ghost {
  position: absolute; bottom: -20px; left: -20px;
  font-size: 26vw; font-weight: 700; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.04);
  line-height: 1; pointer-events: none; user-select: none;
}
.hero-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 24px; position: relative; z-index: 2;
  display: flex; align-items: center; gap: 10px;
}
.hero-eyebrow::before { content: ''; width: 24px; height: 1.5px; background: var(--accent); }
.hero-title {
  font-size: clamp(44px, 4.5vw, 68px); font-weight: 700;
  letter-spacing: -0.035em; line-height: 0.95;
  color: #fff; margin-bottom: 28px; position: relative; z-index: 2;
}
.hero-accent {
  background: var(--accent); color: #fff;
  padding: 2px 10px; display: inline-block;
}
.hero-desc {
  font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.45);
  max-width: 300px; margin-bottom: 40px; position: relative; z-index: 2;
}
.hero-actions { display: flex; gap: 12px; position: relative; z-index: 2; flex-wrap: wrap; }

/* Right: full-bleed art */
.hero-right {
  position: relative; overflow: hidden;
  background-size: cover; background-position: center;
  background-color: #1a0533;
}
.hero-art {
  position: absolute; inset: 0;
}
.hero-art-ghost {
  position: absolute; bottom: -10%; right: -10%;
  font-size: 60vw; font-weight: 700; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.05);
  line-height: 1; pointer-events: none; user-select: none;
}
.hero-art-info {
  position: absolute; bottom: 32px; right: 32px;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(10px);
  padding: 14px 20px; display: flex; flex-direction: column; gap: 4px;
}
.art-info-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--accent);
}
.art-info-title { font-size: 13px; font-weight: 600; color: #fff; }
.art-info-meta { font-size: 11px; color: rgba(255,255,255,0.4); }

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg); background: var(--accent);
  padding: 13px 24px; transition: opacity 0.2s; white-space: nowrap;
}
.btn-primary:hover { opacity: 0.85; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.2);
  padding: 13px 24px; transition: border-color 0.2s, color 0.2s; white-space: nowrap;
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.5); color: #fff; }

/* ── Section shared ── */
.section-label {
  display: inline-block; background: var(--fg); color: var(--bg);
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 10px; margin-bottom: 12px;
}
.section-title {
  font-size: clamp(26px, 3vw, 42px); font-weight: 700; letter-spacing: -0.025em;
}
.section-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 80px 52px 48px;
}
.view-all {
  font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  border-bottom: 2px solid var(--accent); padding-bottom: 2px; color: var(--fg);
  transition: color 0.2s;
}
.view-all:hover { color: var(--accent); }

/* ── Blog grid (P3: 2fr 1fr 1fr) ── */
.blog-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 2px; background: var(--border);
  margin: 0 52px 80px;
}
.blog-card {
  background: var(--bg); padding: 40px 32px;
  display: flex; flex-direction: column; gap: 14px;
  cursor: pointer; transition: background 0.2s;
}
.blog-card:hover { background: #f7f7f7; }
.blog-card.featured { background: var(--fg); }
.blog-card.featured:hover { background: #111; }

.blog-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
}
.blog-card.featured .blog-tag { color: var(--accent); }
.blog-card:not(.featured) .blog-tag { color: var(--muted); }

.blog-card h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.blog-card h3 a { transition: opacity 0.2s; }
.blog-card h3 a:hover { opacity: 0.7; }
.blog-card.featured h3, .blog-card.featured h3 a { color: #fff; }

.blog-card p { font-size: 13px; line-height: 1.65; flex: 1; }
.blog-card.featured p { color: rgba(255,255,255,0.5); }
.blog-card:not(.featured) p { color: var(--muted); }

.blog-date { font-size: 11px; }
.blog-card.featured .blog-date { color: rgba(255,255,255,0.2); }
.blog-card:not(.featured) .blog-date { color: #bbb; }

/* ── Gallery filter bar ── */
.gallery-filter {
  display: flex;
  padding: 0 52px;
  border-bottom: 1px solid var(--border);
  gap: 0;
}
.filter-pill {
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
  font-family: var(--font);
  transition: color 0.15s, border-color 0.15s;
}
.filter-pill.active { color: var(--fg); border-bottom-color: var(--accent); }
.filter-pill:hover:not(.active) { color: var(--fg); }

/* ── Gallery grid ── */
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 3px; margin: 0 52px 96px;
}
.gallery-item { position: relative; overflow: hidden; cursor: pointer; aspect-ratio: 1; display: block; transition: opacity 0.35s ease; }
.gallery-item--hidden { display: none; }
.gallery-thumb {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  background-color: #1a0533;
  transition: transform 0.5s ease;
}
.gallery-item:hover .gallery-thumb { transform: scale(1.03); }
.gallery-protect {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: all;
  -webkit-user-select: none; user-select: none;
}
.gallery-thumb { -webkit-user-drag: none; user-drag: none; }
.gallery-cap {
  position: absolute; inset: 0;
  background: rgba(244,83,60,0.88);
  opacity: 0; transition: opacity 0.3s;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  padding: 16px;
}
.gallery-item:hover .gallery-cap { opacity: 1; }
.cap-title { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; }
.cap-sub { font-size: 11px; color: rgba(255,255,255,0.7); }

/* ════════════════════════════════════════
   PAGE HERO (inner pages)
════════════════════════════════════════ */
.page-hero {
  padding: 80px 52px 48px; border-bottom: 1px solid var(--border);
}
.page-hero--light { background: var(--bg); }

.page-title {
  font-size: clamp(40px, 6vw, 80px); font-weight: 700;
  letter-spacing: -0.04em; line-height: 0.95;
}

/* ════════════════════════════════════════
   JOURNAL LISTING
════════════════════════════════════════ */
.journal-list { border-top: 1px solid var(--border); }
.journal-row {
  display: grid; grid-template-columns: 120px 1fr 140px;
  align-items: center; gap: 32px;
  padding: 24px 52px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.journal-row:hover { background: #fafafa; }
.journal-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); background: rgba(244,83,60,0.08);
  padding: 4px 10px; display: inline-block;
}
.journal-row-title {
  font-size: 18px; font-weight: 600; letter-spacing: -0.015em;
  transition: color 0.2s;
}
.journal-row-title:hover { color: var(--accent); }
.journal-row-date {
  font-size: 12px; color: var(--muted);
  text-align: right; display: block;
}

/* ════════════════════════════════════════
   GALLERY (full page)
════════════════════════════════════════ */
.gallery-full { padding-top: 40px; }
.gallery-grid--full { margin: 0 52px 96px; }

/* ════════════════════════════════════════
   SINGLE POST
════════════════════════════════════════ */
.post-header {
  padding: 80px 52px 0;
  border-bottom: 1px solid var(--border);
}
.post-header-inner { max-width: 680px; padding-bottom: 56px; }
.post-meta-top {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
}
.post-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--accent); background: rgba(244,83,60,0.08); padding: 4px 10px;
}
.post-date { font-size: 12px; color: var(--muted); }
.post-title {
  font-size: clamp(32px, 4.5vw, 56px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 20px;
}
.post-summary {
  font-size: 18px; line-height: 1.6; color: var(--muted); font-weight: 400;
}
.post-cover {
  width: 100%; height: 480px;
  background-size: cover; background-position: center;
  margin-top: 48px;
}

.post-body {
  max-width: 680px; margin: 64px auto; padding: 0 52px;
  font-size: 17px; line-height: 1.8; color: #222;
}
.post-body p { margin-bottom: 1.5em; }
.post-body h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 2em 0 0.8em; }
.post-body h3 { font-size: 19px; font-weight: 600; margin: 1.8em 0 0.6em; }
.post-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.post-body blockquote {
  border-left: 3px solid var(--accent); padding-left: 24px;
  color: var(--muted); font-style: italic; margin: 2em 0;
}
.post-body ul, .post-body ol { padding-left: 1.5em; margin-bottom: 1.5em; }
.post-body li { margin-bottom: 0.4em; }

.post-footer {
  max-width: 680px; margin: 0 auto; padding: 40px 52px 80px;
  border-top: 1px solid var(--border);
}
.back-link {
  font-size: 13px; font-weight: 600; letter-spacing: 0.05em;
  color: var(--muted); transition: color 0.2s;
}
.back-link:hover { color: var(--accent); }

/* ════════════════════════════════════════
   ABOUT PAGE
════════════════════════════════════════ */
.about-body { padding: 64px 52px 96px; }
.about-inner { max-width: 560px; }
.about-inner p {
  font-size: 17px; line-height: 1.8; color: #333; margin-bottom: 1.4em;
}
.about-inner a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.site-footer {
  border-top: 1px solid var(--border); padding: 36px 52px;
  display: flex; justify-content: space-between; align-items: center;
}
.footer-logo { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.footer-links { display: flex; gap: 28px; }
.footer-links a { font-size: 11px; color: var(--muted); transition: color 0.2s; }
.footer-links a:hover { color: var(--accent); }
.footer-copy { font-size: 11px; color: #ccc; }

/* ── Empty states ── */
.empty-state { padding: 52px; color: var(--muted); font-size: 15px; text-align: center; grid-column: 1 / -1; }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 900px) {
  .site-nav { padding: 20px 24px; }
  .hero { grid-template-columns: 1fr; height: auto; }
  .hero-left { padding: 120px 24px 56px; min-height: 70vh; justify-content: flex-end; }
  .hero-right { height: 50vw; min-height: 280px; }
  .section-header { padding: 56px 24px 32px; }
  .blog-grid { grid-template-columns: 1fr; margin: 0 24px 56px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); margin: 0 24px 56px; }
  .gallery-filter { padding: 0 24px; overflow-x: auto; }
  .journal-row { grid-template-columns: 1fr; gap: 8px; padding: 20px 24px; }
  .journal-row-date { text-align: left; }
  .page-hero { padding: 56px 24px 32px; }
  .post-header { padding: 56px 24px 0; }
  .post-body { padding: 0 24px; }
  .post-footer { padding: 32px 24px 56px; }
  .about-body { padding: 40px 24px 64px; }
  .site-footer { flex-direction: column; gap: 20px; text-align: center; padding: 32px 24px; }
}

@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 36px; }
}