/* Ant Atlas. A field guide, so: warm paper, a serif that looks printed, ruled entries, and
   labels set the way a museum drawer labels a specimen. */
:root{
  --paper:#F4EFE4;
  --paper-2:#EAE3D4;
  --ink:#1E1A15;
  --ink-2:#4B4337;
  --ink-3:#8A7E6B;
  --rule:#D6CCB8;
  --rust:#9C3D18;
  --moss:#4A5D33;
  --amber:#C8802A;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow:hidden}

.shell{display:flex;height:100%}

/* ---------------------------------------------------------------- the guide */
.field{width:372px;flex:0 0 372px;background:var(--paper);border-right:1px solid var(--rule);
  padding:26px 24px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:22px}
.eyebrow{margin:0 0 6px;font:600 .6rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--rust)}
.field h1{margin:0;font-family:var(--serif);font-size:2.1rem;line-height:1;font-weight:400;letter-spacing:-.01em}
.sub{margin:10px 0 0;color:var(--ink-2);font-size:.92rem;line-height:1.55}

.find{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.find label{grid-column:1/3;font:600 .58rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.find input{padding:10px 11px;border:1px solid var(--rule);background:#fff;border-radius:2px;
  font-family:var(--sans);font-size:.92rem;color:var(--ink);min-width:0}
.find input:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber)}
.find button{padding:10px 15px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  border-radius:2px;cursor:pointer;font:700 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.find button:hover{background:var(--rust);border-color:var(--rust)}

.tally{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:14px 0}
.tally b{display:block;font-family:var(--serif);font-size:1.9rem;line-height:1;font-variant-numeric:tabular-nums}
.tally span{font:600 .56rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

.block h2{margin:0 0 10px;font:600 .6rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.species{list-style:none;margin:0;padding:0}
.species li{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--rule);cursor:pointer}
.species li:hover em{color:var(--rust)}
.species li.on em{color:var(--rust);font-weight:600}
.species em{flex:1;font-family:var(--serif);font-style:italic;font-size:1rem}
.species b{font:600 .72rem/1 var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.species .auth{display:block;font-style:normal;font-size:.7rem;color:var(--ink-3);font-family:var(--sans)}
.clear{margin-top:12px;padding:9px 12px;border:1px dashed var(--rule);background:transparent;
  color:var(--ink-2);border-radius:2px;cursor:pointer;font:600 .62rem/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;width:100%}
.clear:hover{border-color:var(--rust);color:var(--rust)}

#years{width:100%;height:70px;display:block}
.tiny{margin:6px 0 0;font-size:.72rem;color:var(--ink-3);line-height:1.5}

.field footer{margin-top:auto;border-top:1px solid var(--rule);padding-top:14px}
.field footer p{margin:0 0 8px;font-size:.72rem;line-height:1.55;color:var(--ink-3)}
.field footer a{color:var(--rust)}

/* ---------------------------------------------------------------- the map */
main{flex:1;position:relative;min-width:0}
#map{position:absolute;inset:0}
.loading{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:5;
  background:var(--ink);color:var(--paper);padding:7px 14px;border-radius:2px;
  font:600 .6rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}

.specimen{position:absolute;right:16px;top:16px;width:300px;z-index:5;background:var(--paper);
  border:1px solid var(--ink);border-radius:2px;box-shadow:0 18px 40px -22px rgba(30,26,21,.55);
  overflow:hidden}
.specimen img{display:block;width:100%;height:180px;object-fit:cover;border-bottom:1px solid var(--rule)}
.specimen .body{padding:14px 15px 16px}
.specimen h3{margin:0;font-family:var(--serif);font-style:italic;font-size:1.22rem;line-height:1.15}
.specimen .auth{margin:2px 0 12px;font-size:.72rem;color:var(--ink-3)}
.specimen dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px}
.specimen dt{font:600 .56rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.specimen dd{margin:0;font-size:.84rem;line-height:1.35}
.specimen .close{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer;
  font:700 .8rem/1 var(--sans)}
.specimen .gbif{display:inline-block;margin-top:12px;font:600 .6rem/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--rust)}

.maplibregl-popup-content{font-family:var(--sans)}

@media (max-width:900px){
  body{overflow:auto}
  .shell{flex-direction:column;height:auto}
  .field{width:auto;flex:none;border-right:0;border-bottom:1px solid var(--rule)}
  main{height:64vh;flex:none}
  .specimen{right:10px;left:10px;width:auto}
}