* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font:15px/1.42 system-ui,-apple-system,"Segoe UI",Arial,sans-serif; color:#24312b; background:#78948c url('images/background.jpg') center center / cover fixed no-repeat; }
a { color:inherit; }
.nature-page { max-width:1180px; margin:0 auto; padding:5px 10px 36px; }
/* Slim title, aligned with the left edge - no title panel. */
.intro { margin:0 0 4px; padding:0; }
.intro h1 { color:#000; font-size:20px; font-weight:700; line-height:1.2; margin:0; text-shadow:none; }
h2 { font-size:16px; margin:0; }
/* Category radio buttons; one line on a typical desktop, flexible on narrow screens. */
.category-grid { display:flex; align-items:center; flex-wrap:wrap; column-gap:14px; row-gap:3px; margin:0 0 6px; padding:4px 9px; border-radius:7px; background:rgba(247,250,245,.94); box-shadow:0 2px 8px #0002; }
.category-choice { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; cursor:pointer; font-size:13px; font-weight:600; color:#284639; }
.category-choice input { margin:0; width:14px; height:14px; accent-color:#315c49; cursor:pointer; }
.category-choice:has(input:checked) { color:#153e2c; font-weight:750; }
.category-choice:focus-within { outline:2px solid #315c49; outline-offset:2px; border-radius:2px; }
.category-grid noscript button { font:inherit; }
.welcome,.notice { background:rgba(247,250,245,.94); border-radius:7px; padding:5px 9px; box-shadow:0 2px 8px #0002; }
.search-panel { background:rgba(247,250,245,.72); border-radius:5px; padding:3px 5px; margin:0; }
.welcome h2 { margin-bottom:3px; }
.welcome p { margin:0; }
/* Keep category name, three dropdowns and both actions on one line on desktop. */
.filters { display:flex; align-items:center; gap:5px; flex-wrap:nowrap; }
.filters h2 { flex:0 0 auto; margin:0 4px 0 0; font-size:15px; white-space:nowrap; }
.filters label { display:flex; align-items:center; gap:4px; min-width:0; flex:1 1 0; font-size:12px; font-weight:650; white-space:nowrap; }
.filters select { flex:1 1 auto; width:0; min-width:0; height:28px; padding:2px 5px; border:1px solid #b5c4b8; border-radius:5px; background:white; color:#24312b; font:12px system-ui,-apple-system,"Segoe UI",Arial,sans-serif; font-weight:400; }
.filter-actions { display:flex; flex:0 0 auto; align-items:center; gap:5px; white-space:nowrap; }
.filter-actions button { border:0; padding:5px 9px; border-radius:5px; background:#315c49; color:white; font:600 12px system-ui,-apple-system,"Segoe UI",Arial,sans-serif; cursor:pointer; }
.filter-actions button:hover { background:#244535; }
.filter-actions a { font-size:12px; }
.result-count { flex:0 0 auto; font-weight:700; color:#24312b; margin:0 0 0 3px; font-size:12px; white-space:nowrap; }
/* Compact wildlife records: same alternating colours and existing images/audio. */
.results { display:grid; gap:5px; }
.species-card { display:flex; justify-content:space-between; gap:7px; align-items:flex-start; background:rgba(245,250,245,.95); padding:6px 8px; border-radius:6px; box-shadow:0 2px 8px #0002; }
.species-card:nth-child(even) { background:rgba(231,244,238,.96); }
.species-main { flex:1; min-width:0; }
.species-card h3 { margin:0; font-size:17px; line-height:1.25; }
.latin { font-size:0.88em; font-weight:400; font-style:italic; color:#56675c; }
.traits { display:flex; flex-wrap:wrap; gap:1px 10px; margin:1px 0; font-size:13px; }
.description { margin:1px 0; white-space:normal; }
.description p { margin:2px 0; }
.habitat { margin:2px 0 0; }
audio { display:block; margin-top:4px; max-width:100%; width:260px; height:32px; }
.species-photo { width:150px; flex-shrink:0; display:block; padding:0; margin:0; border:0; background:none; text-decoration:none; cursor:zoom-in; }
.species-photo img { display:block; width:100%; height:auto; max-height:150px; object-fit:contain; border:2px solid #000; border-radius:6px; background:transparent; padding:0; }
#back-to-top { position:fixed; left:18px; bottom:18px; z-index:99; background:#315c49; color:white; border:0; border-radius:8px; padding:9px 12px; cursor:pointer; box-shadow:0 3px 12px #0003; }
#back-to-top[hidden] { display:none; }
@media (max-width:1060px) { .filters { flex-wrap:wrap; } .filters label { flex:1 1 24%; } }
@media (max-width:650px) {
  .nature-page { padding:5px 7px 24px; }
  .category-grid { column-gap:10px; row-gap:5px; }
  .filters { gap:5px; }
  .filters h2 { width:100%; }
  .filters label { flex:1 1 45%; }
  .filters select { min-width:0; }
  .filter-actions { flex:1 1 auto; }
  .species-card { gap:6px; padding:6px; }
  .species-photo { width:100px; }
  .species-photo img { height:auto; max-height:110px; }
}
@media (max-width:420px) {
  .filters label { flex:1 1 100%; }
  .species-card { flex-direction:column-reverse; }
  .species-photo { width:100%; max-width:200px; align-self:center; }
  .species-photo img { height:auto; max-height:160px; }
}
/* Image viewer stays on top of the same page. */
body.lightbox-open { overflow:hidden; }
.photo-lightbox[hidden] { display:none; }
.photo-lightbox { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:55px 20px 24px; background:rgba(0,0,0,.88); }
.lightbox-figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; max-width:100%; max-height:100%; }
.lightbox-figure img { display:block; max-width:min(100%,1200px); max-height:calc(100dvh - 125px); width:auto; height:auto; object-fit:contain; border-radius:5px; }
.lightbox-figure figcaption { color:#fff; font-size:15px; text-align:center; text-shadow:0 1px 3px #000; }
.lightbox-close { position:absolute; top:12px; right:18px; width:44px; height:44px; background:rgba(255,255,255,.15); border:1px solid #fff8; border-radius:50%; color:white; font-size:32px; line-height:1; cursor:pointer; }
.lightbox-close:hover,.lightbox-close:focus-visible { background:rgba(255,255,255,.3); }

/* Fungi disclaimer: display only until the visitor acknowledges it. */
.fungi-warning { max-width:740px; background:rgba(247,250,245,.96); border-radius:7px; padding:14px 16px; box-shadow:0 2px 8px #0002; }
.fungi-warning h2 { color:#8a2929; margin:0 0 8px; font-size:18px; }
.fungi-warning p { margin:7px 0; }
.fungi-warning form { margin:12px 0 0; }
.fungi-warning button { border:0; border-radius:5px; padding:7px 18px; background:#315c49; color:white; font:600 14px system-ui,-apple-system,"Segoe UI",Arial,sans-serif; cursor:pointer; }
.fungi-warning button:hover,.fungi-warning button:focus-visible { background:#244535; }