/* ================================
   Sloth Forest • main.css
   Mobile-first, accessible, responsive
   ================================ */

/* --- Theme variables --- */
:root{
  /* dark */
  --bg:#0b110e;
  --card:#0f1612;
  --muted:#8aa397;
  --text:#ecf4ee;
  --accent:#10b981;
  --accent-2:#a3e635;
  --ring: 0 0 0 2px var(--accent);
  --border: rgba(255,255,255,.08);
  --glass-top: rgba(22,163,74,.25);

  /* layout scale */
  --space-1: clamp(6px, 1.2vw, 10px);
  --space-2: clamp(10px, 1.8vw, 14px);
  --space-3: clamp(14px, 2.4vw, 18px);
  --space-4: clamp(20px, 3vw, 24px);
  --radius: 18px;

  /* type scale */
  --fs-0: clamp(14px, 1.6vw, 15px);
  --fs-1: clamp(16px, 2vw, 18px);
  --fs-2: clamp(18px, 2.4vw, 22px);
  --fs-3: clamp(22px, 3vw, 28px);
}
:root.light{
  /* light */
  --bg:#f3f7f4;
  --card:#ffffff;
  --muted:#3f5d51;
  --text:#0b110e;
  --accent:#16a34a;
  --accent-2:#34d399;
  --border: rgba(0,0,0,.08);
  --glass-top: rgba(22,163,74,.12);
}

/* --- Base --- */
*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:dark light}
body{
  margin:0;
  font: var(--fs-1)/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(16,185,129,.10), transparent),
    radial-gradient(900px 600px at 110% 10%, rgba(163,230,53,.10), transparent),
    var(--bg);
  color:var(--text);
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  padding-top: env(safe-area-inset-top);
}

/* --- Utilities --- */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;border:0;padding:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{
  left: env(safe-area-inset-left); top: env(safe-area-inset-top);
  background:var(--card); color:var(--text); padding:8px 12px; border-radius:10px; z-index:9999;
  outline: var(--ring);
}

/* --- Layout --- */
.container{max-width:960px;margin:0 auto;padding:var(--space-3)}
header{
  position:sticky; top:0; z-index:10;
  border-bottom:1px solid var(--border);
  background: linear-gradient(to bottom, var(--glass-top), transparent);
  padding-block: var(--space-1);
}
@supports (backdrop-filter: blur(8px)) {
  header{ backdrop-filter: saturate(140%) blur(8px) }
}
@media (max-width:420px){
  header{ backdrop-filter:none !important }
}

.nav{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.brand{font-weight:700;letter-spacing:.3px;font-size:var(--fs-2)}
.spacer{flex:1 1 auto;min-width:120px}

/* --- Buttons & chips --- */
.btn, .chip, .link{border:1px solid var(--border); color:var(--text)}
.btn{
  padding:10px 14px; border-radius:12px; background:var(--card); cursor:pointer;
  min-height:44px; min-width:44px; touch-action:manipulation;
}
.btn:focus-visible{ outline: var(--ring) }

.chip{
  padding:8px 12px; border-radius:999px; font-size:.9rem;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.05));
  min-height:36px;
}
.link{
  padding:8px 12px; border-radius:10px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; background:var(--card)
}

/* --- Filter (scrollable on phones) --- */
.filter{
  display:flex; gap:10px; flex-wrap:nowrap; overflow:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.filter::-webkit-scrollbar{ display:none }
.filter > button{
  appearance:none; border:1px solid var(--border); background:transparent; color:inherit; font:inherit;
  padding:8px 12px; border-radius:999px; cursor:pointer; white-space:nowrap; min-height:40px;
}
.filter > button.active,
.filter > button[aria-pressed="true"]{
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#0b110e; border-color:transparent
}

/* --- Grid: 1 col → 2 cols at 900px --- */
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 900px){
  .grid{ grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr) }
}

/* --- Cards & content --- */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.06));
  border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-3);
  box-shadow:0 6px 18px rgba(0,0,0,.25)
}
.card h2{margin:0 0 var(--space-2) 0; font-size:var(--fs-2)}
.muted{color:var(--muted)}
.hero{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.avatar{
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:grid;place-items:center;color:white;font-weight:800
}
.tags{display:flex;flex-wrap:wrap;gap:10px}

.post{padding:var(--space-3);border-radius:16px;border:1px solid var(--border); background:var(--card)}
.post h3{margin:0 0 6px 0; font-size:var(--fs-1)}
.post .meta{font-size:.9rem;color:var(--muted);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.post p{word-wrap:break-word; overflow-wrap:anywhere}

.list{display:grid;gap:var(--space-2)}
.kicker{color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
.footer{margin:32px 0 12px;color:var(--muted);font-size:.95rem}

/* --- Motion preferences --- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* --- Optional: basic print styles --- */
@media print{
  body{ background:#fff; color:#000 }
  header, .btn, .filter{ display:none !important }
  .card{ box-shadow:none; border-color:#ddd }
  a{ color:#000; text-decoration:underline }
}