/* ---------- specimen cards ---------- */
.card{border-top:1.5px solid var(--ink);padding-top:26px;margin-top:58px}
.card:first-of-type{margin-top:0}
.card-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.rank{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.14em;color:var(--oak);font-weight:500}
.latin{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:300;color:var(--ink-soft);font-size:1.05rem;margin:2px 0 0}
.wiki{
  display:inline-flex;align-items:center;gap:.5em;vertical-align:baseline;
  margin-left:14px;font-family:"IBM Plex Mono",monospace;font-style:normal;font-weight:400;
  font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;
  border:1px solid var(--rule);border-radius:2px;padding:4px 9px;
  transition:color .15s,background-color .15s,border-color .15s;
}
.wiki:hover,.wiki:focus-visible{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.wiki-arrow{letter-spacing:0;transition:transform .15s}
.wiki:hover .wiki-arrow{transform:translateX(2px)}
.also .wiki{margin-left:8px;font-size:.58rem;padding:3px 7px}
.tagline{font-size:1.06rem;color:var(--ink-soft);max-width:62ch;margin:14px 0 24px}


/* ---------- height scale (signature) ---------- */
/* --roof: three-story roofline (37.5 ft) on a full-track scale of 80 ft; --h: per-tree mature height */
.scale{--roof:46.9%;margin:0 0 26px;border:1px solid var(--rule);background:var(--paper-2);padding:18px 20px 14px}
.scale-label{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--moss);margin-bottom:10px}
.roofline{position:relative;height:15px;font-family:"IBM Plex Mono",monospace;font-size:.6rem;color:var(--oak)}
.roofline span{position:absolute;bottom:0;left:var(--roof);transform:translateX(-3px);white-space:nowrap}
.track{position:relative;height:26px;border-bottom:1.5px solid var(--ink)}
.bar{position:absolute;left:0;bottom:0;height:16px;width:var(--h);background:var(--moss)}
.bar.small{background:var(--oak)}
.house{position:absolute;bottom:0;left:var(--roof);height:26px;border-right:1.5px dashed var(--ink-soft)}
.ticks{position:relative;height:20px;font-family:"IBM Plex Mono",monospace;font-size:.6rem;color:var(--ink-soft)}
/* min() keeps the centered label from overhanging the track on narrow viewports */
.ticks span{position:absolute;top:4px;left:min(var(--h),calc(100% - 3em));transform:translateX(-50%);white-space:nowrap}

/* ---------- data table ---------- */
.data{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:.92rem}
.data th,.data td{text-align:left;vertical-align:top;padding:9px 12px 9px 0;border-bottom:1px solid var(--rule)}
.data th{
  font-family:"IBM Plex Mono",monospace;font-size:.63rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--moss);
  width:34%;padding-right:18px;
}
@media(max-width:560px){
  .data th{width:100%;display:block;border-bottom:none;padding-bottom:2px}
  .data td{display:block;padding-left:0}
}
.pill{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border:1px solid currentColor;
}
.p-best{color:var(--moss)}
.p-good{color:var(--oak)}

/* ---------- lists ---------- */
.also h4{font-size:1.08rem;margin-bottom:6px}
.also .latin{font-size:.9rem;margin-bottom:8px}
.also p{font-size:.9rem;margin:0}
.avoid{border-left:3px solid var(--oak);padding-left:22px;max-width:66ch}
.avoid dt{font-weight:600;margin-top:14px}
.avoid dd{margin:0 0 2px;color:var(--ink-soft);font-size:.95rem}