/* ===== Theme (brand from logo) ===== */
:root{
  --bg:#ffffff;
  --fg:#111111;
  --muted:#555555;
  --border:#e6e6e6;
  --card:#ffffff;

  --brand:#0f6d2f;   /* deep green */
  --accent:#f4c20d;  /* warm yellow */
}

/* Auto dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e0f10;
    --fg:#f2f2f2;
    --muted:#b7b7b7;
    --border:#2a2d31;
    --card:#151719;
    --brand:#23a152;
    --accent:#f2c94c;
  }
}

/* ===== Base ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background:var(--bg); color:var(--fg);
}
.wrap{max-width:1120px;margin:0 auto;padding:16px 20px 64px}

/* ===== Header ===== */
header{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 0;
  background:color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .2s ease, background-color .2s ease;
}
header:hover{box-shadow:0 6px 20px rgba(0,0,0,.06)}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.logo img{display:block; height:auto}

/* Nav: flex + wrap to avoid overlap on mobile */
nav{
  display:flex; align-items:center; gap:12px;
  flex-wrap:wrap;
}
nav a{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted);
  text-decoration:none;
  font-size:14px; line-height:1;
  padding:8px 10px;
  border-radius:10px;
  transition:color .15s ease, background-color .15s ease, border-color .15s ease;
}
nav a:hover{color:var(--fg); background:color-mix(in oklab, var(--fg) 6%, transparent)}
nav a.active{
  color:var(--brand);
  font-weight:700;
  border-bottom:2px solid var(--brand);
}

/* ===== Typography ===== */
.section{margin:40px 0}
.hero{display:grid;gap:14px;margin:28px 0}
h1{font-size:clamp(28px,5vw,44px);line-height:1.1;margin:0}
h2{font-size:clamp(20px,3.6vw,28px);margin:0 0 12px}
h3{margin:0 0 6px}
p{margin:0;color:var(--muted);line-height:1.55}

/* Offset for anchor jumps with sticky header */
[id]{scroll-margin-top:90px}

/* ===== Layout helpers ===== */
.grid{display:grid;gap:14px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.list{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ===== Cards ===== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .2s ease;
}
a.card{display:block; color:inherit; text-decoration:none}
a.card:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  border-color:color-mix(in oklab, var(--fg) 12%, var(--border));
}

/* ===== Buttons ===== */
.toolbar{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  display:inline-block;
  background:var(--brand);
  color:#fff;
  padding:12px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:600;
  transition:transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.12)}
.btn.sec{
  background:#fff;
  color:var(--brand);
  outline:2px solid var(--brand);
}
@media (prefers-color-scheme: dark){
  .btn.sec{background:transparent;color:#fff;outline:2px solid var(--brand)}
  .btn.sec:hover{background:color-mix(in oklab, var(--brand) 15%, transparent)}
}
.btn.sec:hover{background:#f7fff9}

/* ===== Gallery niceties ===== */
.gallery{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.gallery img{
  width:100%; height:auto;
  border-radius:12px; border:1px solid var(--border);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .2s ease;
}
.gallery img:hover{
  transform:scale(1.01);
  box-shadow:0 12px 26px rgba(0,0,0,.16);
}

/* ===== Accessibility ===== */
a:focus-visible, .btn:focus-visible, .card:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px; border-radius:12px;
}

/* ===== Footer ===== */
footer{
  color:var(--muted); font-size:14px;
  margin-top:44px; padding-top:16px;
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}

/* ===== Mobile tweaks to prevent overlap ===== */
@media (max-width: 640px){
  .wrap{padding:12px 14px 56px}
  header{padding:8px 0}
  .logo img{width:180px; max-width:60vw}
  nav{gap:8px}
  nav a{padding:8px 10px; font-size:15px}
  nav a.active{border-bottom-width:2px}
}
@media (max-width: 420px){
  .logo img{width:150px; max-width:62vw}
  nav{gap:6px}
  nav a{padding:7px 9px; font-size:14px}
}