/* OakenGallery — Public CSS */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --green:      #2c5f2e;
  --green-dark: #1a3d1c;
  --radius:     8px;
  --radius-lg:  12px;
  --border:     1px solid #e0e0e0;
  --text:       #1a1a1a;
  --text-sec:   #555;
  --text-muted: #888;
  --bg:         #f9f9f7;
  --bg-card:    #fff;
  --max-w:      1200px;
}

body { font-family:system-ui,-apple-system,sans-serif; font-size:16px; color:var(--text); background:var(--bg); line-height:1.6; }

/* ── Nav ─────────────────────────────────────────────────────────────── */
.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.125rem 2rem;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease, padding .35s ease;
}
.site-nav.scrolled {
  background:#0d0d0b;
  border-bottom-color:rgba(255,255,255,.08);
  padding:.75rem 2rem;
}
/* Logo: image upload mode */
.nav-logo { display:flex; align-items:center; gap:.625rem; text-decoration:none; }
.nav-logo-img { height:32px; width:auto; display:block; transition:opacity .2s; }
/* Logo: text+icon fallback */
.nav-logo-text {
  display:flex; align-items:center; gap:.625rem;
  font-size:17px; font-weight:700; letter-spacing:.01em;
  color:#1a1a1a; transition:color .35s;
}
.site-nav.scrolled .nav-logo-text { color:#c9b87a; }
.nav-logo-text svg .icon-bg  { transition:fill .35s; fill:#2c5f2e; }
.site-nav.scrolled .nav-logo-text svg .icon-bg { fill:#c9b87a; }
.nav-logo-text svg .icon-path { fill:#fff; }
/* Nav links */
.nav-links { display:flex; align-items:center; gap:1.75rem; list-style:none; }
.nav-links a {
  text-decoration:none; font-size:13px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  color:#333; transition:color .35s;
}
.site-nav.scrolled .nav-links a { color:rgba(255,255,255,.72); }
.nav-links a:hover { color:#1a1a1a; }
.site-nav.scrolled .nav-links a:hover { color:#fff; }
/* Login button */
.nav-login {
  display:inline-block; padding:.4rem 1rem;
  border:1px solid #999; border-radius:3px;
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#333; text-decoration:none;
  transition:border-color .35s, color .35s, background .2s;
}
.site-nav.scrolled .nav-login { border-color:#c9b87a; color:#c9b87a; }
.nav-login:hover { background:rgba(0,0,0,.06); }
.site-nav.scrolled .nav-login:hover { background:rgba(201,184,122,.1); }
/* Push body below fixed nav */
body { padding-top:60px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { background:var(--green); color:#fff; padding:5rem 1.75rem; text-align:center; margin-top:-60px; padding-top:calc(5rem + 60px); }
.hero-inner { max-width:680px; margin:0 auto; }
.hero h1 { font-size:clamp(2rem,5vw,3rem); font-weight:700; line-height:1.2; margin-bottom:1rem; }
.hero p  { font-size:1.125rem; opacity:.85; margin-bottom:2rem; }
.btn-hero { display:inline-block; padding:.875rem 2rem; background:#fff; color:var(--green); font-weight:700; border-radius:var(--radius); text-decoration:none; transition:opacity .15s; }
.btn-hero:hover { opacity:.9; }

/* ── Sections ─────────────────────────────────────────────────────────── */
.section      { padding:4rem 1.75rem; }
.section--alt { background:#f3f6f3; }
.section-title { font-size:1.75rem; font-weight:700; margin-bottom:2rem; }
.container { max-width:var(--max-w); margin:0 auto; }
.container--narrow { max-width:600px; margin:0 auto; }
.prose { max-width:720px; line-height:1.8; }
.prose p { margin-bottom:1rem; }

/* ── Project grid ─────────────────────────────────────────────────────── */
.project-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.25rem; }
.project-card { display:block; background:var(--bg-card); border:var(--border); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:var(--text); transition:box-shadow .2s, transform .2s; }
.project-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.1); transform:translateY(-2px); }
.project-card img { width:100%; height:200px; object-fit:cover; display:block; }
.project-card__placeholder { height:200px; background:linear-gradient(135deg,#e8f5e9,#c8e6c9); }
.project-card__info { padding:1rem 1.25rem; }
.project-card__info h3 { font-size:1rem; font-weight:600; margin-bottom:.35rem; }
.project-card__info p  { font-size:.875rem; color:var(--text-sec); }

/* ── Contact form ─────────────────────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.125rem; }
.form-group label { font-size:13px; font-weight:600; color:var(--text-sec); }
input[type=text],input[type=email],textarea {
  width:100%; padding:.625rem .875rem; border:var(--border); border-radius:var(--radius);
  font-size:15px; color:var(--text); background:#fff; outline:none; transition:border-color .15s;
}
input:focus,textarea:focus { border-color:var(--green); }
textarea { min-height:120px; resize:vertical; }
.btn-primary { display:inline-block; padding:.75rem 1.75rem; background:var(--green); color:#fff; font-weight:600; font-size:15px; border:none; border-radius:var(--radius); cursor:pointer; transition:background .15s; }
.btn-primary:hover { background:var(--green-dark); }
#contact-msg .success { background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7; padding:.875rem 1rem; border-radius:var(--radius); margin-bottom:1rem; }
#contact-msg .error   { background:#ffebee; color:#c62828; border:1px solid #ef9a9a; padding:.875rem 1rem; border-radius:var(--radius); margin-bottom:1rem; }

/* ── Auth card ─────────────────────────────────────────────────────────── */
.auth-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg); }
.auth-card { background:var(--bg-card); border:var(--border); border-radius:var(--radius-lg); padding:2.5rem 2rem; width:100%; max-width:400px; }
.auth-logo { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; margin-bottom:1.5rem; color:var(--green); }
.auth-card h1 { font-size:20px; font-weight:600; margin-bottom:1.25rem; }
.btn-full { width:100%; justify-content:center; }
.alert { padding:.75rem 1rem; border-radius:var(--radius); font-size:13px; margin-bottom:1rem; }
.alert-error { background:#ffebee; color:#c62828; border:1px solid #ef9a9a; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { background:var(--green); color:rgba(255,255,255,.7); padding:2rem 1.75rem; text-align:center; font-size:14px; }

/* ── Misc ─────────────────────────────────────────────────────────────── */
.empty-state { color:var(--text-muted); text-align:center; padding:3rem; }
.muted { color:var(--text-muted); font-size:13px; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:600px) {
  .nav-links { display:none; }
  .hero { padding:3rem 1.25rem; }
  .section { padding:2.5rem 1.25rem; }
}