* { box-sizing:border-box }
body {
 margin:0; min-height:100svh; color:#fff5da; font:700 16px system-ui,sans-serif;
 background:#173b2e linear-gradient(#112e24aa,#112e24d9);
}
body::before {
 content:''; position:fixed; inset:0; z-index:-1;
 background:linear-gradient(90deg,#112e24e8,#112e2480),url('./catalog-forest-v1.webp') center/cover;
}
main { width:min(100%,1080px); margin:auto; padding:clamp(16px,4vw,46px) }
#back { display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px; background:#fff1cb; color:#513317; text-decoration:none }
header { margin:20px 0; }
header p { margin:0; color:#ffe197; }
h1 { margin:5px 0 8px; font-size:clamp(28px,5vw,52px); text-shadow:0 3px #102b22 }
nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
nav a { display:grid; place-items:center; gap:9px; padding:12px; min-height:105px; border:2px solid #dfb978; border-radius:18px; color:#452913; background:linear-gradient(#fff7dd,#f2d7a2); box-shadow:0 4px #70491f; text-decoration:none; text-align:center }
nav a:hover { background:#fff8df; }
a:focus-visible { outline:3px solid #ffe160; outline-offset:4px }
nav .badge { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:#dcebd3; font-size:30px }
nav small { color:#5d502f }
@media(max-width:650px){nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}nav a{min-height:94px}}

header p:last-child { color:#fff5da; line-height:1.5 }
nav a { border-color:#e9bf77; }
nav a > span:not(.badge) { font-size:clamp(15px,2vw,19px); }
@media(min-width:1000px) {
 main { width:min(74%,1080px); margin-left:clamp(28px,7vw,120px); margin-right:0; }
}
@media(max-width:650px) {
 body::before { background-position:center,65% center; }
 header { margin:16px 0; }
}
nav .categoryArt {
 display:block; width:100%; max-width:160px; height:auto; aspect-ratio:1;
 object-fit:cover; border-radius:12px; border:1px solid #a88148;
}
main { min-height:100svh; display:flex; flex-direction:column; justify-content:center; }
#back { align-self:flex-start; }
#pagination { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:16px }
#pagination[hidden] { display:none }
#pagination button { width:46px; height:44px; border:1px solid #e9bf77; border-radius:14px; background:#fff1cb; color:#513317; font:800 22px system-ui; cursor:pointer }
#pagination button:disabled { opacity:.4; cursor:default }
nav .categoryArt { max-height:clamp(40px,22svh,160px); width:auto; max-width:100%; }
nav .speciesHero {
 position:relative;
 display:block;
 flex-shrink:0;
 width:clamp(40px,22svh,160px);
 max-width:100%;
 aspect-ratio:1;
 overflow:hidden;
 border-radius:12px;
}
nav .speciesHero .categoryArt {
 position:absolute;
 width:280%;
 max-width:none;
 height:auto;
 max-height:none;
 aspect-ratio:auto;
 border:0;
 border-radius:0;
 left:-4%;
 top:-30%;
}
nav .legacyHero .categoryArt { width:300%; left:-40%; top:-40%; }
@media(max-width:650px) {
 main { padding:12px }
 header { margin:10px 0 }
 nav a { min-height:0; padding:8px; gap:4px }
 nav .categoryArt { max-height:min(18svh,120px) }
 nav .speciesHero { width:min(18svh,120px) }
 #pagination { margin-top:12px }
}
@media (orientation:landscape) and (max-height:480px) {
 main { padding:8px 18px }
 header { margin:4px 0 8px }
 h1 { font-size:24px; margin:0 }
 header p { font-size:13px }
 nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
 nav a { min-height:0; padding:6px; gap:4px }
 nav .categoryArt { max-height:24svh }
 nav .speciesHero { width:24svh }
 #pagination { margin-top:8px }
}

main { padding-top:calc(60px + env(safe-area-inset-top)); }
#back {
 position:fixed; z-index:2;
 top:calc(8px + env(safe-area-inset-top));
 left:max(12px,env(safe-area-inset-left));
 box-shadow:0 3px 10px #102b2255;
}
nav[data-count="1"] { grid-template-columns:minmax(0,320px); }
nav[data-count="2"] { grid-template-columns:repeat(2,minmax(0,270px)); }
nav[data-count="3"] { grid-template-columns:repeat(2,minmax(0,270px)); }
nav[data-count="1"], nav[data-count="2"], nav[data-count="3"] { justify-content:center; }
nav[data-count="1"] a, nav[data-count="2"] a, nav[data-count="3"] a {
 min-height:clamp(72px,23svh,190px);
}
nav[data-count="1"] .categoryArt { max-height:clamp(50px,30svh,200px); }

@media (orientation:portrait) and (max-width:650px) {
 nav[data-count="3"] { grid-template-columns:repeat(2,minmax(0,1fr)); }

 nav[data-count="1"] a, nav[data-count="2"] a, nav[data-count="3"] a { min-height:clamp(64px,18svh,130px); }
}
@media (orientation:landscape) and (max-height:480px) {
 main { padding-top:calc(55px + env(safe-area-inset-top)); }
 nav[data-count="1"] a, nav[data-count="2"] a, nav[data-count="3"] a { min-height:68px; }
}

@media (orientation:landscape) and (max-height:600px) {
 nav a { grid-template-columns:auto minmax(0,1fr); min-height:0; padding:6px; }
 nav .categoryArt, nav .speciesHero { max-height:15svh; }
 nav .speciesHero { width:15svh; }
 nav a small { grid-column:2; }
 nav .speciesHero .categoryArt { max-height:none; }
}