:root{
  /* Your calm green palette (AA-friendly text) */
  --bg:#9ea99c;            /* quick silver */
  --fg:#2e3b26;            /* darker kombu for contrast on --bg */
  --muted:#90997f;         /* artichoke (muted text) */
  --brand:#2a644d;         /* primary green */
  --brand-strong:#1b4f3b;  /* darker accent */
  --brand-soft:#dce9e1;    /* hover/card tint */
  --brand-soft-2:#bcd9ca;  /* active/current tint */
  --card:#e9f1ec;          /* card background */
  --focus:#ffbf00;         /* ADA focus ring */
  --link:#1a442f;          /* accessible link on --bg */
  --link-hover:#143826;    /* deeper hover */
  --maxw:60rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  color:var(--fg);
  background:var(--bg);
}
.container{max-width:var(--maxw);margin:auto;padding:1rem}

/* Header base */
header{
  border-bottom:1px solid var(--brand-soft-2);
  background:var(--bg);
  position:sticky; top:0;
}
.skip{position:absolute;left:-9999px}
.skip:focus{
  left:auto;top:auto;background:var(--focus);color:#000;
  padding:.25rem .5rem;border-radius:.25rem
}

/* ===== Dropdown nav (accessible, no JS) ===== */
.topnav{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem}
.brand{font-weight:700;text-decoration:none;color:var(--fg)}
.menu{list-style:none;display:flex;gap:.5rem;margin:0;padding:0}
.menu-item > a,
.menu-item summary{
  display:block;padding:.4rem .6rem;border-radius:.4rem;
  text-decoration:none;color:var(--fg); cursor:pointer;
}
.menu-item > a:hover,
.menu-item > a:focus,
.menu-item summary:hover,
.menu-item summary:focus{ background:var(--brand-soft); outline:none }
.menu-item summary{ list-style:none; }
.menu-item summary::-webkit-details-marker{ display:none; }
.menu-item summary::after{ content:"▾"; margin-left:.25rem; font-size:.85em; }
.has-submenu details{ position:relative; }
.submenu{
  position:absolute; left:0; top:100%; margin-top:.5rem;
  min-width:220px; padding:.4rem;
  background:var(--card); border:1px solid var(--brand-soft-2);
  border-radius:.5rem; box-shadow:0 6px 18px rgba(0,0,0,.08); z-index:10;
}
.submenu li{ list-style:none; }
.submenu a{
  display:block; padding:.45rem .6rem; border-radius:.35rem;
  color:var(--fg); text-decoration:none;
}
.submenu a:hover, .submenu a:focus{ background:var(--brand-soft); outline:none }
.has-submenu details:not([open]) .submenu{ display:none; }
@media (max-width:720px){
  .menu{flex-wrap:wrap}
  .submenu{min-width:200px}
}

/* Content */
h1,h2{line-height:1.25}
.muted{ color:var(--muted) }

.avatar{
  margin:0 0 1rem 0;background:var(--card);
  padding:1rem;border-radius:.5rem;max-width:20rem
}
.avatar img{display:block;border-radius:.5rem;margin:0 auto}

.card{
  background:var(--card);
  border:1px solid var(--brand-soft-2);
  border-radius:.6rem;
  padding:1rem;
  margin:.75rem 0;
}

.list{padding-left:1rem}

/* Body/footer links */
main a, footer a{ color:var(--link); }
main a:hover, footer a:hover{ color:var(--link-hover); }

/* Status tags */
.tag{
  padding:.1rem .5rem;border:1px solid var(--brand-soft-2);
  border-radius:999px;font-size:.9rem;color:var(--fg)
}
.tag.done{ background:#d6efe3; border-color:#8fd3af; }
.tag.progress{ background:#eef5f1; border-color:var(--brand-soft-2); }

/* Footer & focus */
footer{border-top:1px solid var(--brand-soft-2);margin-top:2rem}
a:focus{outline:3px solid var(--focus);outline-offset:3px;border-radius:.25rem}