/* --faint carries real prose (colophon, ring notes, observation counts), so it is
   held at >=4.5:1 against both grounds. --rule2 is structure only, never text. */
:root{
  --ground:#0A0C0B; --deep:#050706; --ink:#E8E4D9; --dim:#948E7F; --faint:#807D73;
  --rule:#22261D; --rule2:#2E3327; --gold:#C9A227; --cold:#7E93A3; --rust:#C07A5F;
  --soil:#060504; --soilshade:rgba(0,0,0,.6);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"Avenir Next Condensed","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --col:66ch; --railx:44px; --pad:70px;
  /* how far the ring and the wide blocks reach into the right margin */
  --spill:0px; --mcw:5px;
  /* the two engravings, embedded once each and referenced wherever they are drawn */
  --plate-a:url(/plate-altissima.5eb3933633.png);
  --plate-b:url(/plate-blooms.2f31bdd3cc.png);
  --plate-e:url(/plate-euthamia.631cf11cd2.png);
  --plate-be:url(/plate-bloomse.273de968d4.png);
  --plate-g:url(/plate-ballgall.d8b7faa702.png);
}
@media (min-width:1080px){ :root{ --spill:110px; --mcw:6px } }
@media (min-width:1320px){ :root{ --spill:200px; --mcw:7px } }
@media (prefers-color-scheme:light){
  :root{ --ground:#EFEDE4; --deep:#DEDBCF; --ink:#191B15; --dim:#565348; --faint:#605C4D;
         --rule:#D2CEC0; --rule2:#C2BEAE; --gold:#6F5609; --cold:#4A6172; --rust:#8C4230; --soil:#DAD5C5; --soilshade:rgba(90,78,54,.20); }
}
:root[data-theme="dark"]{ --ground:#0A0C0B; --deep:#050706; --ink:#E8E4D9; --dim:#948E7F; --faint:#807D73;
  --rule:#22261D; --rule2:#2E3327; --gold:#C9A227; --cold:#7E93A3; --rust:#C07A5F; --soil:#060504; --soilshade:rgba(0,0,0,.6); }
:root[data-theme="light"]{ --ground:#EFEDE4; --deep:#DEDBCF; --ink:#191B15; --dim:#565348; --faint:#605C4D;
  --rule:#D2CEC0; --rule2:#C2BEAE; --gold:#6F5609; --cold:#4A6172; --rust:#8C4230; --soil:#DAD5C5; --soilshade:rgba(90,78,54,.20); }

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--serif);
     font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:calc(var(--col) + var(--pad) + 3rem);margin:0 auto;padding:0 1.5rem}
h1,h2,h3,h4{text-wrap:balance;font-weight:400;margin:0}
i{font-style:italic}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dot{opacity:.4;margin:0 .5em}
.lbl,.sumlab,.sumhint,.role,.zonecount,.meta,.chip,.mh b,.obs,.rn,.ringread,.mtick,.eyebrow{
  font-family:var(--sans);letter-spacing:.09em;text-transform:uppercase;font-size:.66rem}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(3rem,9vw,6.5rem) 0 2rem;text-align:center}
/* Both plants the site is about, standing on one line: the eyebrow directly below says
   Solidago & Euthamia, and until now the hero showed only the first of them. They stand
   on a common baseline rather than a common centre, so the two are read as two plants
   rather than as two pictures. Widths shrink together on narrow screens. */
.plates{display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(.7rem,3.4vw,2.4rem);margin:0 auto 2.2rem}
.plate{position:relative;display:block;min-width:0;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:bottom center;mask-position:bottom center;
  background:var(--ink);opacity:.92}
/* the flowering top, drawn in the gold the headline uses for "weed". A second mask over
   the same box, so the plant is drawn once and only its flowers change colour. The mask
   holds the engraver's own line, so this is the same drawing in another colour — not a
   flower filled in. */
.plate::after{content:"";position:absolute;inset:0;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:bottom center;mask-position:bottom center;
  background:var(--gold)}
.plate-a{flex:0 1 285px;aspect-ratio:620/796;
  -webkit-mask-image:var(--plate-a);mask-image:var(--plate-a)}
.plate-a::after{-webkit-mask-image:var(--plate-b);mask-image:var(--plate-b)}
.plate-e{flex:0 1 225px;aspect-ratio:426/520;
  -webkit-mask-image:var(--plate-e);mask-image:var(--plate-e)}
.plate-e::after{-webkit-mask-image:var(--plate-be);mask-image:var(--plate-be)}
.hero h1{font-size:clamp(2.6rem,8vw,4.4rem);line-height:1.02;letter-spacing:-.015em}
.hero h1 em{font-style:italic;color:var(--gold)}
.eyebrow{color:var(--dim);display:block;margin-bottom:1.4rem}
.thesis{max-width:52ch;margin:1.8rem auto 0;color:var(--dim);font-size:1.06rem}
.thesis b{color:var(--ink);font-weight:400}
.tally{display:flex;flex-wrap:wrap;justify-content:center;gap:0 2.2rem;margin:2.6rem auto 0;
  padding-top:1.6rem;border-top:1px solid var(--rule);max-width:44rem}
.tally div{padding:.5rem 0}
.tally b{display:block;font-size:1.7rem;font-family:var(--serif);font-variant-numeric:tabular-nums;line-height:1}
.tally span{font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;font-size:.62rem;color:var(--dim)}
.tally .hi b{color:var(--gold)}
.tally b .tof{font-size:.9rem;color:var(--dim);font-family:var(--sans);font-variant-numeric:normal;letter-spacing:.01em}
.tallynote{font-family:var(--sans);font-size:.66rem;line-height:1.5;color:var(--dim);text-align:center;margin:.7rem auto 0;max-width:32rem;letter-spacing:.02em}
/* ---- Semple classification, drawn as a bracket tree ---- */
.cladwrap{margin:1.4rem 0 .6rem;overflow-x:auto}
.clad,.clad ul{list-style:none;margin:0;padding:0}
.clad ul{margin-left:.9rem}
.clad li{position:relative;padding:.16rem 0 .16rem 1rem}
.clad li::before{content:"";position:absolute;left:0;top:.72rem;width:.7rem;border-top:1px solid var(--rule2)}
.clad li::after{content:"";position:absolute;left:0;top:0;height:100%;border-left:1px solid var(--rule2)}
.clad li:last-child::after{height:.72rem}
.clad>li{padding-left:0;margin-top:.55rem}
.clad>li::before,.clad>li::after{display:none}
.cl-node{white-space:nowrap}
.cl-r{font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;font-size:.58rem;color:var(--dim);margin-right:.15rem}
.cl-n{font-family:var(--serif);font-style:italic}
.clad-sg>details{margin:0}
.clad-sg>details>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:baseline;gap:.45rem;padding:.05rem 0}
.clad-sg>details>summary::-webkit-details-marker{display:none}
.clad-sg>details>summary::before{content:"\25B8";color:var(--dim);font-size:.72em;margin-right:.1rem;transition:transform .12s}
.clad-sg>details[open]>summary::before{transform:rotate(90deg)}
.clad-sg>details>summary:hover .cl-n{color:var(--gold)}
.clad-sg>details>summary .cl-n{font-size:1.05rem}
.cl-cnt{font-family:var(--sans);font-size:.58rem;text-transform:uppercase;letter-spacing:.09em;color:var(--dim)}
.cl-tips{display:inline}
.cl-sp{font-size:.92rem;white-space:nowrap;margin-left:.6rem}
.cl-node+.cl-tips .cl-sp:first-child{margin-left:.35rem}
.cl-node+.cl-tips::before{content:":";color:var(--dim)}
.cl-sp a{text-decoration:none;border-bottom:1px solid var(--faint);color:inherit}
.cl-sp a:hover,.cl-sp a:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}
.cl-g{font-family:var(--sans);font-size:.56rem;color:var(--gold);vertical-align:.4em;margin-left:.1rem}
.clad-foot{font-family:var(--sans);font-size:.66rem;line-height:1.55;color:var(--dim);max-width:44rem;margin:.7rem 0 0}
.spsub{font-family:var(--sans);font-size:.64rem;color:var(--dim);margin:.15rem 0 0;letter-spacing:.02em}
.spsub-l{text-transform:uppercase;letter-spacing:.09em;border-bottom:1px solid var(--faint);text-decoration:none;color:var(--dim);margin-right:.45rem}
.spsub .cl-n{font-style:italic}

/* ---------- descent ---------- */
/* The rail hangs in the left margin rather than indenting the descent, so descent
   prose sits on the same left edge as the hero and every section below it. */
.descent{position:relative;padding-top:2rem}
.descent::before{content:"";position:absolute;left:calc(-1 * var(--railx));top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--rule2) 4%,var(--rule2) 96%,transparent)}
.zone{padding:3.4rem 0 1rem;position:relative}
.zonehead{position:relative;margin-bottom:2.2rem}
.node{position:absolute;left:calc(-1 * var(--railx) - 5px);top:.62em;width:9px;height:9px;
  border-radius:50%;background:var(--ground);border:1px solid var(--gold)}
.zonehead h2{font-size:1.9rem;letter-spacing:-.01em}
.zonesub{margin:.35rem 0 .8rem;color:var(--dim);max-width:46ch}
.zonecount{color:var(--faint);margin:0}
.zonecount b{color:var(--ink);font-variant-numeric:tabular-nums}

/* deep station */
.deep{margin:0 0 3.2rem;padding-bottom:2.4rem;border-bottom:1px solid var(--rule);scroll-margin-top:1.5rem}
.cat{scroll-margin-top:6rem}
.deephead{display:flex;gap:1.2rem;align-items:flex-start}
.glyph{width:40px;height:64px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.4;
  stroke-linecap:round;opacity:.85;margin-top:.2rem}
.deeptitle h3{font-size:1.5rem;line-height:1.2}
.auth{font-size:.8rem;color:var(--faint);font-style:normal;white-space:nowrap}
.common{display:block;color:var(--gold);font-style:italic;font-size:1.02rem;margin-top:.15rem}
/* What kind of animal this is, in words, above the formal rank. A reader who does not
   know that Cecidomyiidae means fly needs this before anything else on the page. */
.whatis{margin:.45rem 0 0;color:var(--dim);font-size:.95rem;line-height:1.45}
.meta{margin:.3rem 0 0;color:var(--faint)}
.obs{font-variant-numeric:tabular-nums}
.lede{font-size:1.16rem;margin:1.3rem 0 1.6rem;max-width:54ch;color:var(--ink)}
/* The ring hangs into the right margin so the prose beside it keeps the same
   measure as every other column on the page. Without this it collapses to ~46ch. */
.deepbody{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:2.2rem;align-items:start;
  margin-right:calc(-1 * var(--spill))}
.deeptext p{margin:0 0 1.05rem;max-width:58ch}
.pclaim{position:relative}
.pclaim[data-status="disputed"]{border-left:2px solid var(--rust);padding-left:1rem;margin-left:-1rem}
.pclaim[data-status="unknown"]{border-left:2px dotted var(--cold);padding-left:1rem;margin-left:-1rem;color:var(--dim)}
.pclaim[data-status="single"]{border-left:1px solid var(--rule2);padding-left:1rem;margin-left:-1rem}
.hosts{color:var(--dim);font-size:.94rem;border-top:1px solid var(--rule);padding-top:.9rem;margin-top:1.4rem}
.hosts .lbl{display:block;color:var(--faint);margin-bottom:.3rem}
.cite{font-family:var(--mono);font-size:.62em;vertical-align:super;line-height:0;color:var(--gold);
  text-decoration:none;padding:0 .12em}
.cite:hover{text-decoration:underline}

/* ring */
.deepside{position:sticky;top:1.5rem}
.ringwrap{width:200px}
.ring{width:200px;height:200px;display:block;touch-action:none;cursor:ew-resize}
.ringbase{fill:none;stroke:var(--rule2);stroke-width:1}
.arc{fill:none;stroke-width:8;stroke-linecap:butt;opacity:.26;
  transition:opacity .14s ease,stroke-width .14s ease}
.a-established{stroke:var(--ink)}
.a-single{stroke:var(--dim)}
.a-disputed{stroke:var(--rust);stroke-dasharray:5 4;opacity:.4}
.a-unknown{stroke:var(--cold);stroke-dasharray:1 6;stroke-width:6;opacity:.35}
.arc.act{opacity:1;stroke-width:14}
.arc.a-unknown.act{opacity:.85;stroke-width:7;stroke-dasharray:1.5 5}
.hand{stroke:var(--gold);stroke-width:1.2;transform-origin:96px 96px}
.hub{fill:var(--gold)}
.mtick{fill:var(--faint);font-family:var(--sans);font-size:8px;text-anchor:middle;letter-spacing:.06em}
.scrub{width:200px;margin:.6rem 0 0;accent-color:var(--gold)}
.ringread{margin:.5rem 0 0;color:var(--dim);line-height:1.5;min-height:2.6em}
.ringread .rm{color:var(--gold);display:block}
.ringread .rl{text-transform:none;letter-spacing:0;font-family:var(--serif);font-size:.92rem}
.ringnote{margin:1rem 0 0;color:var(--faint);font-size:.88rem;line-height:1.5;
  border-top:1px solid var(--rule);padding-top:.8rem}

/* host links — a species name is a link everywhere it appears, but quietly: the
   binomial is already italic, so it gets a hairline underline that warms on hover
   rather than a colour of its own. */
.hl{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule2);
  transition:border-color .15s ease,color .15s ease}
.hl:hover,.hl:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}
.cath .hl{border-bottom-color:transparent}
.cath .hl:hover,.cath .hl:focus-visible{border-bottom-color:var(--gold)}
.mh .hl{border-bottom:0}
.mrow:hover .mhl,.mrow:focus-within .mhl{color:var(--gold)}

/* the plants themselves, on a deep station */
/* the plant beside its name, so the line still reads as a list of hosts */
.hostgrid{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:.55rem}
.hostcard{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  padding:.2rem .5rem .2rem .2rem;border:1px solid transparent;transition:border-color .15s ease}
.hostcard:hover,.hostcard:focus-visible{border-color:var(--rule2)}
.hostcard img,.hostcard .hostnopic{width:34px;height:34px;flex:none;display:block;
  object-fit:cover;border:1px solid var(--rule2);background:var(--deep);
  filter:saturate(.86) brightness(.94);transition:filter .18s ease,border-color .18s ease}
.hostcard:hover img,.hostcard:focus-visible img{filter:none;border-color:var(--gold)}
.hostcard i{font-size:.88rem;line-height:1.2;color:var(--dim);white-space:nowrap}
.hostcard:hover i,.hostcard:focus-visible i{color:var(--gold)}
.hostnopic{border-style:dashed !important;border-color:var(--rule) !important;opacity:.5}

/* Hover card. A host name is a link in prose, in the catalogue and in the matrix, and
   an inline thumbnail would wreck all three — so the picture arrives on hover instead. */
.hostpop{position:absolute;z-index:40;width:210px;padding:.7rem;pointer-events:none;
  background:var(--deep);border:1px solid var(--rule2);
  box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;transform:translateY(4px);
  transition:opacity .13s ease,transform .13s ease}
.hostpop.on{opacity:1;transform:none}
.hostpop img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  border:1px solid var(--rule2);background:var(--ground);filter:saturate(.9)}
.hostpop .hp-n{display:block;font-style:italic;margin-top:.5rem;color:var(--ink);font-size:.94rem}
.hostpop .hp-c{display:block;color:var(--dim);font-size:.82rem}
.hostpop .hp-m{display:block;margin-top:.4rem;font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.09em;font-size:.56rem;color:var(--faint)}
@media (prefers-reduced-motion:reduce){.hostpop{transition:none}}

/* glossary — quiet enough to ignore, present enough to notice on the word you
   did not know. Native <abbr title> so touch and screen readers get it too. */
/* The underline is the only sign a word carries a definition, and on touch there is no
   hover to discover it by. It was drawn in --rule2 at 1.5:1 against the ground — below the
   3:1 a non-text indicator needs, and effectively invisible. --faint is the quietest token
   the palette guarantees against both grounds (4.8:1 dark, 5.7:1 light). */
.term{text-decoration:none;border-bottom:1px dotted var(--faint);cursor:help;
  -webkit-tap-highlight-color:transparent}
.term:hover,.term:focus-visible{border-bottom-color:var(--gold);color:var(--gold)}
/* the open term stays lit while its card is up, so a thumb can see what it tapped */
.term.lit{border-bottom-color:var(--gold);color:var(--gold)}
/* 270px overflows a narrow phone once the 8px edge clamp is applied, so cap on viewport */
.termpop{position:absolute;z-index:41;max-width:min(270px,calc(100vw - 2rem));
  padding:.65rem .8rem;pointer-events:none;
  background:var(--deep);border:1px solid var(--rule2);box-shadow:0 10px 30px rgba(0,0,0,.5);
  color:var(--dim);font-size:.88rem;line-height:1.5;opacity:0;transform:translateY(4px);
  transition:opacity .13s ease,transform .13s ease}
.termpop.on{opacity:1;transform:none}
.termpop b{display:block;color:var(--ink);font-weight:400;font-style:italic;margin-bottom:.2rem}
@media (prefers-reduced-motion:reduce){.termpop{transition:none}}
/* ---------- site footer ---------- */
/* On every page. The guide is one project on ppr3.com and had no way back to it. */
.sitefoot{border-top:1px solid var(--rule);margin-top:4rem;padding:1.6rem 0 2.6rem}
.sitefoot .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .6rem;
  font-family:var(--sans);letter-spacing:.09em;text-transform:uppercase;font-size:.66rem;
  color:var(--faint)}
.sitefoot a{color:var(--faint);text-decoration:none;border-bottom:1px solid var(--rule2)}
.sitefoot a:hover,.sitefoot a:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}
.sf-up{color:var(--dim)!important}
.sf-sep{opacity:.45}
@media (max-width:520px){ .sitefoot .sf-sep{display:none} .sitefoot .wrap{flex-direction:column} }

.glosslist{margin:0;padding:0}
.glossrow{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:.4rem 1.4rem;
  padding:.65rem 0;border-top:1px solid var(--rule)}
.glosslist dt{color:var(--ink);font-style:italic}
.glosslist dd{margin:0;color:var(--dim);font-size:.92rem;max-width:56ch}
@media (max-width:640px){.glossrow{grid-template-columns:1fr;gap:.1rem}}

/* ---------- photographs ----------
   Somebody else's photograph, on this page's ground. A hairline frame and a slight
   pull-back in the dark theme so it sits in the vitrine instead of glaring out of it;
   full strength on hover, because the picture is the point. */
.gpic{margin:1.4rem 0 0;border-top:1px solid var(--rule);padding-top:1rem}
/* Sized by the img's own width/height attributes, which the browser turns into an
   aspect-ratio and reserves before the file lands — so lazy loading still cannot
   shift the page, and nothing is cropped. A fixed 4:3 cover box did prevent the
   shift, but it centre-cropped every photo, and most of these are portrait with the
   gall at the top of the frame. */
.gpic img{width:100%;height:auto;display:block;
  border:1px solid var(--rule2);background:var(--deep);
  filter:saturate(.86) brightness(.94);transition:filter .18s ease}
.gpic a:hover img,.gpic a:focus-visible img{filter:none}
.gpic figcaption{font-family:var(--sans);letter-spacing:.09em;text-transform:uppercase;
  font-size:.6rem;color:var(--faint);margin-top:.5rem;line-height:1.7}
.gpic .pcred{display:block;text-transform:none;letter-spacing:0;font-family:var(--serif);
  font-size:.82rem;color:var(--dim)}
.gpic .pcred a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.gpic .pcred a:hover{color:var(--gold)}

/* catalogue thumbnail */
.catpic{display:block;width:46px;height:46px;flex:none}
.catpic img{width:46px;height:46px;object-fit:cover;display:block;
  border:1px solid var(--rule2);filter:saturate(.86) brightness(.92);
  transition:filter .18s ease,border-color .18s ease}
.catpic:hover img,.catpic:focus-visible img{filter:none;border-color:var(--gold)}
/* the form's own reference shot, not a stand-in from the species */
.catpic.own img{border-color:var(--cold)}
.catpic.own:hover img{border-color:var(--gold)}
.nopic{display:block;width:46px;height:46px;border:1px dashed var(--rule);opacity:.5}

/* credits */
.credbox{margin-top:1.4rem}
.credlist{list-style:none;margin:0;padding:0 1.4rem 1.4rem;display:grid;gap:.6rem;
  font-size:.86rem;color:var(--dim)}
.credlist b{color:var(--ink);font-weight:400}
.credlist a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.credlist a:hover{color:var(--gold)}
.clic{font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;
  font-size:.58rem;color:var(--faint)}

/* status chips */
.chip{display:inline-block;padding:.2em .55em;border:1px solid var(--rule2);color:var(--dim);
  border-radius:1px;white-space:nowrap;line-height:1.5}
.s-established{border-color:var(--rule2)}
.s-single{border-color:var(--rule2);color:var(--faint)}
.s-disputed,.s-unverified{border-color:var(--rust);color:var(--rust)}
.s-unknown,.s-open{border-color:var(--cold);color:var(--cold)}
.s-resolved{border-color:var(--gold);color:var(--gold)}
.s-superseded{border-color:var(--rule2);color:var(--dim)}

/* margin pieces */
.margin{margin:0 0 3rem;padding:1.5rem 1.6rem;border:1px solid var(--rule);background:var(--deep)}
.margin h4{font-size:1.18rem;color:var(--gold);margin-bottom:.6rem}
.margin p{margin:0 0 .9rem;max-width:58ch;color:var(--dim)}
.margin p em,.margin p i{color:var(--ink)}

/* stratum */
.stratum{border-top:1px solid var(--rule);margin-top:1rem}
.stratum>summary{cursor:pointer;padding:1rem 0;display:flex;justify-content:space-between;
  align-items:center;list-style:none;color:var(--dim)}
.stratum>summary::-webkit-details-marker{display:none}
.stratum>summary:hover{color:var(--ink)}
.sumhint{color:var(--faint);border:1px solid var(--rule2);padding:.2em .6em}
.stratum[open]>summary .sumhint::after{content:" ▲"}
.stratum:not([open])>summary .sumhint::after{content:" ▼"}
/* The catalogue carries 95 of the 106 forms. It reaches into the right margin,
   because at reading-column width every row wrapped to four or five lines. */
.catlist{list-style:none;margin:0 0 1.5rem;padding:0;margin-right:calc(-1 * var(--spill))}
.cat{display:grid;
  grid-template-columns:46px minmax(0,1.15fr) minmax(0,1.5fr) minmax(0,.85fr) minmax(4.5rem,auto);
  gap:.15rem 1.2rem;padding:.7rem 0;border-top:1px solid var(--rule);align-items:baseline;font-size:.9rem}
.cat>.catpic,.cat>.nopic{align-self:start;margin-top:.1rem}
.cat:hover{background:var(--deep)}
.catn{color:var(--ink);text-wrap:pretty}
.catt,.cath{color:var(--dim);font-size:.84rem;text-wrap:pretty}
.cath{font-style:italic}
.catt .k{color:var(--ink)}          /* shape — the one trait that discriminates */
.catt .sep{opacity:.45}
.catm{display:flex;gap:.7rem;align-items:baseline;justify-content:flex-end;white-space:nowrap}
.cat .obs{color:var(--faint)}
.cat .none{color:var(--faint);font-style:italic}
/* The evidence trail: every form's Gallformers record and the published sources
   behind it, so a catalogue row is never a bare assertion. */
.cate{grid-column:2/-1;margin-top:.4rem;font-size:.76rem;color:var(--dim);text-wrap:pretty;line-height:1.5}
.ev{color:var(--dim);border-bottom:1px solid var(--faint)}
.ev:hover,.ev:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}
.cate .sep{opacity:.4;margin:0 .4rem}
.gen{color:var(--faint);font-size:.82rem}
.phrase{color:var(--dim);display:block;font-size:.86rem;line-height:1.45}
/* fly / moth / midge / fungus, on every catalogue row — set apart from the name so it
   reads as a label rather than as part of it */
.kind{display:block;margin-top:.2rem;color:var(--faint);font-family:var(--sans);
  letter-spacing:.09em;text-transform:uppercase;font-size:.63rem}
.deepcard .kind{margin-top:.25rem}
.cat.u .catn i{color:var(--dim)}
.cat.hide{display:none}

/* An undescribed gall is written "Genus sp.", the abbreviation set apart in a
   quieter colour as the provisional stand-in it is. Keep the two on one line. */
.binom{white-space:nowrap}
.sp{font-style:normal;color:var(--dim)}
.noname{display:inline-block;width:4.2em;border-bottom:1px solid var(--cold);
  vertical-align:.05em;opacity:.7}
/* Row-level status: the same four words, without the box. At 95 repetitions the
   bordered chip stopped reading as information. Boxes stay where they are rare. */
.st{font-family:var(--sans);letter-spacing:.09em;text-transform:uppercase;font-size:.62rem;
  color:var(--dim);border-bottom:1px solid currentColor;padding-bottom:.15em;text-decoration:none}
.st-single{color:var(--faint)}
.st-unknown{color:var(--cold)}
.st-disputed{color:var(--rust)}

/* ---------- soil line ---------- */
.soil{position:relative;margin:5.5rem 0 0;padding:0 0 1.6rem}
.soil .rulebar{height:1px;background:var(--ink);opacity:.6}
.soil .rulebar+.rulebar{margin-top:5px;opacity:.28}
.soil .rulebar+.rulebar+.rulebar{margin-top:9px;opacity:.12}
.soil p{font-family:var(--sans);text-transform:uppercase;letter-spacing:.26em;font-size:.62rem;
  color:var(--dim);margin:1.1rem 0 0;text-align:center}
.underground{background:var(--soil);margin-top:0;padding:1px 0 3.5rem;position:relative}
.underground::before{content:"";position:absolute;left:0;right:0;top:0;height:220px;
  background:linear-gradient(180deg,var(--soilshade),transparent);pointer-events:none}
.underground>*{position:relative}
.underground .descent::before{background:linear-gradient(180deg,var(--rule2),transparent 92%)}
.underground .glyph{opacity:.7}

/* ---------- generic section ---------- */
.sec{padding:4.5rem 0;border-top:1px solid var(--rule)}
.sec>h2{font-size:1.8rem;margin-bottom:.5rem}
.sec>.intro{color:var(--dim);max-width:58ch;margin:0 0 2.2rem}

/* inhabitants — what emerges is often not what moved in, so show the faces */
.inhlist{list-style:none;padding:0;margin:0;display:grid;gap:2rem}
.inh{border-left:2px solid var(--rule2);padding-left:1.2rem;
  display:grid;grid-template-columns:104px minmax(0,1fr);gap:1.3rem;align-items:start}
.inhpic{display:block;width:104px}
.inhpic img{width:104px;height:104px;object-fit:cover;display:block;
  border:1px solid var(--rule2);background:var(--deep);
  filter:saturate(.86) brightness(.94);transition:filter .18s ease,border-color .18s ease}
.inhpic:hover img,.inhpic:focus-visible img{filter:none;border-color:var(--gold)}
.inhnopic{width:104px;height:104px;border:1px dashed var(--rule);opacity:.5}
.inh h4{font-size:1.12rem}
.inhsci{margin:.1rem 0 0!important;color:var(--faint);font-size:.88rem}
.inh .role{color:var(--gold);margin:.3rem 0 .6rem}
.inh p{margin:0 0 .7rem;color:var(--dim);max-width:58ch}

/* matrix — the widest thing on the page, so it takes both margins */
.mxbox{overflow-x:auto;border:1px solid var(--rule);padding:1rem;background:var(--deep);
  margin:0 calc(-1 * var(--spill))}
.mrow{display:flex;align-items:center;gap:.8rem;height:15px;outline-offset:2px}
.mh{width:190px;flex:none;display:flex;justify-content:space-between;gap:.5rem;
  font-size:.68rem;font-style:italic;color:var(--dim);white-space:nowrap;overflow:hidden;
  font-family:var(--serif);text-transform:none;letter-spacing:0}
.mh b{color:var(--faint);font-variant-numeric:tabular-nums}
.mcells{display:flex;gap:1px}
.mc{width:var(--mcw);height:11px;background:var(--rule);flex:none}
.mc.on{background:var(--ink)}
.mc.on.u{background:var(--cold);opacity:.85}
.mrow:hover .mh,.mrow:focus-within .mh{color:var(--gold)}
.mrow:hover .mc.on,.mrow:focus-within .mc.on{background:var(--gold)}
/* zone bands: the columns run down the plant, so the axis says which part you are in.
   Flower and rhizome are only 7 and 6 columns wide, so labels alternate between two
   rows — otherwise the narrow ones collide with their neighbours. */
.mxaxis{display:flex;align-items:flex-end;gap:.8rem;margin-bottom:.45rem}
.mzones{display:flex;gap:1px;height:2.6rem;align-items:flex-end;overflow:visible}
.mzone{flex:none;width:calc(var(--n) * (var(--mcw) + 1px) - 1px);height:100%;position:relative;
  border-bottom:1px solid var(--rule2)}
.mzone+.mzone{border-left:1px solid var(--rule2)}
.mzlab{position:absolute;left:.4em;bottom:.3rem;white-space:nowrap;
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;font-size:.58rem;
  color:var(--faint)}
.mzone:nth-child(even) .mzlab{bottom:1.45rem}
/* a filled cell is a record, and a record is somewhere you can go */
.mxrows{position:relative}
.mc.on{cursor:pointer;display:block;text-decoration:none}
.mc.on:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.mrow.hot .mh{color:var(--gold)}
.mrow.hot .mc.on{background:var(--gold)}
/* the column rule: with 106 columns there is otherwise no way to tell which one
   you are in, and the zone band alone is too coarse */
.mxcross{position:absolute;top:0;bottom:0;pointer-events:none;display:none;
  background:color-mix(in srgb,var(--gold) 16%,transparent);
  border-left:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
  border-right:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.mxread{font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;font-size:.62rem;
  color:var(--dim);min-height:1.4em;margin:.7rem 0 0}
.mxread b{color:var(--gold);font-weight:400}
.mxread .go{color:var(--faint);text-transform:none;letter-spacing:0;font-family:var(--serif);
  font-size:.82rem;font-style:italic}

/* where a matrix cell lands you */
@keyframes flashin{from{background:color-mix(in srgb,var(--gold) 26%,transparent)}
                   to{background:transparent}}
.flash{animation:flashin 1.6s ease-out}
.cat.flash{outline:1px solid var(--gold);outline-offset:4px}
.deep.flash{outline:1px solid var(--gold);outline-offset:10px}
.mxkey{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:.6rem;color:var(--faint);
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;font-size:.62rem}
.mxkey i{display:inline-block;width:9px;height:9px;margin-right:.4rem;vertical-align:-1px}
.mxhint{margin-left:auto;font-style:normal}

/* comparison */
.cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.8rem;margin-top:1rem}
.cmpcard{border:1px solid var(--rule);padding:1.4rem;background:var(--deep)}
.cmpcard svg{width:64px;height:104px;fill:none;stroke:var(--ink);stroke-width:1.6;
  stroke-linecap:round;display:block;margin:0 auto 1rem}
.cmpcard h4{font-size:1rem;text-align:center;margin-bottom:.15rem}
.cmpcard .who{text-align:center;color:var(--gold);font-size:.82rem;font-style:italic;margin:0 0 .9rem}
.cmpcard .who a{text-decoration:none;border-bottom:1px solid transparent}
.cmpcard .who a:hover,.cmpcard .who a:focus-visible{border-bottom-color:var(--gold)}
.cmpcard p{margin:0;color:var(--dim);font-size:.88rem}
.cmpcard .tell{color:var(--ink);border-top:1px solid var(--rule);margin-top:.9rem;padding-top:.7rem}
.cmpcard .tell b{color:var(--gold);font-weight:400}

/* key */
.keybox{border:1px solid var(--rule);background:var(--deep)}
.keybox>summary{cursor:pointer;padding:1.1rem 1.4rem;list-style:none;color:var(--dim);
  display:flex;justify-content:space-between;align-items:center}
.keybox>summary::-webkit-details-marker{display:none}
.keybox>summary:hover{color:var(--ink)}
.keyin{padding:0 1.4rem 1.4rem;display:flex;gap:1rem;flex-wrap:wrap}
.keyin label{display:flex;flex-direction:column;gap:.35rem;flex:1 1 150px;
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;font-size:.62rem;color:var(--faint)}
/* the OS control is the one place the page stops being designed; draw our own
   chevron and keep the native menu behaviour underneath */
.keyin select{appearance:none;-webkit-appearance:none;
  background:var(--ground);color:var(--ink);border:0;border-bottom:1px solid var(--rule2);
  padding:.45rem 1.6rem .45rem .1rem;font-family:var(--serif);font-size:.95rem;
  border-radius:0;width:100%;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 10px) calc(50% + 1px),calc(100% - 5px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.keyin select:hover{border-bottom-color:var(--gold)}
.keyin select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#keyout{padding:0 1.4rem 1.4rem;margin:0;color:var(--dim);font-size:.9rem}
#keyout li{margin:.15rem 0}
#keyout i{color:var(--ink)}
/* a result is a door: it opens the entry, expanding its stratum on the way */
.keyres{display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap;text-decoration:none;
  padding:.4rem .5rem;margin-left:-.5rem;border-radius:1px;
  border-bottom:1px solid transparent;transition:background .14s ease}
.keyres:hover,.keyres:focus-visible{background:var(--ground)}
.keyres:hover i,.keyres:focus-visible i{color:var(--gold)}
.kun{font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;
  font-size:.58rem;color:var(--cold)}
.kmeta{margin-left:auto;font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.09em;font-size:.58rem;color:var(--faint);white-space:nowrap}
.kmore{color:var(--faint);font-style:italic;padding-left:.5rem}

/* closures */
.clolist{list-style:none;padding:0;margin:0;display:grid;gap:2.2rem}
.qnote{font-size:.88rem;color:var(--faint);margin-top:-1.4rem!important}
.clo{border-top:1px solid var(--rule);padding-top:1.1rem}
.clohead{display:flex;gap:.8rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.5rem}
.clo h4{font-size:1.14rem}
.clo p{margin:0;color:var(--dim);max-width:58ch}
.clo p strong{color:var(--ink);font-weight:400}
/* what they actually said, before the answer */
.said{display:block;font-size:1.06rem;line-height:1.55;color:var(--ink);
  border-left:2px solid var(--gold);padding-left:1rem;margin:0 0 .9rem;max-width:54ch}

/* refs */
.reflist{list-style:none;padding:0;margin:0;display:grid;gap:.7rem;font-size:.86rem}
.reflist li{display:flex;gap:.9rem;color:var(--dim)}
.rn{color:var(--gold);flex:none;width:1.6rem;text-align:right;font-family:var(--mono);
  text-transform:none;letter-spacing:0;font-size:.72rem;padding-top:.25em}
.rt b{color:var(--ink);font-weight:400}
.rt a{color:var(--gold)}

.colophon{padding:3.5rem 0 5rem;border-top:1px solid var(--rule);color:var(--faint);font-size:.86rem}
.colophon p{max-width:60ch;margin:0 0 .9rem}
.colophon a{color:var(--dim)}
/* the scope point the prose makes, made visible: two plants, one common name */
.genusfig{margin:2rem 0 1.6rem;padding:0}
.gplates{display:flex;gap:2.4rem;align-items:flex-end;flex-wrap:wrap}
.gplate{display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:.86rem;color:var(--dim);font-style:italic}
.gp{display:block;width:150px;background:var(--ink);opacity:.9;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:bottom center;mask-position:bottom center}
.gp-a{aspect-ratio:620/796;-webkit-mask-image:var(--plate-a);mask-image:var(--plate-a)}
.gp-e{aspect-ratio:426/520;-webkit-mask-image:var(--plate-e);mask-image:var(--plate-e)}
.genusfig figcaption{margin-top:1.3rem;max-width:60ch;color:var(--faint);font-size:.86rem;
  line-height:1.62}
.genusfig figcaption b{color:var(--dim);font-weight:400}
@media (max-width:520px){.gplates{gap:1.4rem}.gp{width:118px}}

.legend{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 2rem}
.hero .legend{justify-content:center}
/* a citation you can come back from — the page is 22,000px tall */
.backref{font-family:var(--mono);font-size:.7rem;color:var(--gold);text-decoration:none;
  padding:0 .15em;opacity:.75}
.backref:hover,.backref:focus-visible{opacity:1;text-decoration:underline}
.cite:target,.reflist li:target{outline:2px solid var(--gold);outline-offset:4px}

@media (max-width:640px){
  .inh{grid-template-columns:1fr;gap:.9rem}
  .inhpic,.inhpic img,.inhnopic{width:100%;max-width:220px;height:auto;aspect-ratio:1}
}
@media (max-width:760px){
  :root{--railx:16px;--pad:34px}
  body{font-size:16px}
  .wrap{padding:0 1.5rem 0 2.4rem}   /* room for the rail inside the viewport */
  .deepbody{grid-template-columns:1fr;margin-right:0}
  .deepside{position:static;justify-self:center}
  .catlist{margin-right:0}
  /* name and status share the first line; traits and hosts stack under them.
     No item may span both tracks — a spanning nowrap name inflates the auto
     track past the viewport, because track 1 is allowed to shrink to zero. */
  .cat{grid-template-columns:40px minmax(0,1fr) minmax(0,auto);gap:.2rem .8rem;padding:.8rem 0}
  .cat>.catpic,.cat>.nopic{grid-column:1;grid-row:1/span 3;width:40px;height:40px}
  .catpic img{width:40px;height:40px}
  .catn{grid-column:2;grid-row:1;min-width:0}
  .catm{grid-column:3;grid-row:1;justify-content:flex-end;align-self:baseline}
  .catt{grid-column:2/-1;grid-row:2}
  .cath{grid-column:2/-1;grid-row:3}
  .cate{grid-column:2/-1;grid-row:4}
  .noname{width:3.4em}
  .gpic{max-width:330px;margin-left:auto;margin-right:auto}
  .mh{width:112px;font-size:.6rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- multi-page furniture ----------
   Added when the guide stopped being one 25,000px scroll and became a descent, eight
   stations and a reference shelf. */
.topnav{border-bottom:1px solid var(--rule);background:var(--ground);
  position:sticky;top:0;z-index:30}
.topnav .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-top:.7rem;padding-bottom:.7rem}
.tn-home{font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;
  font-size:.66rem;color:var(--dim);text-decoration:none;white-space:nowrap}
.tn-home:hover{color:var(--gold)}
.tn-links{display:flex;gap:1.2rem}
.tn-links a{font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;
  font-size:.62rem;color:var(--faint);text-decoration:none;white-space:nowrap}
.tn-links a:hover{color:var(--gold)}
.tn-links a[aria-current]{color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:.2em}
/* site search box in the nav, and its type-ahead results */
.tn-right{display:flex;align-items:baseline;gap:1.2rem}
.tn-search{position:relative}
.tn-q{font-family:var(--sans);font-size:.72rem;letter-spacing:.03em;color:var(--ink);
  background:var(--deep);border:1px solid var(--rule);border-radius:2px;padding:.4em .65em;
  width:15rem;max-width:38vw}
.tn-q::placeholder{color:var(--faint)}
.tn-q:focus{outline:none;border-color:var(--gold)}
.qout{position:absolute;right:0;top:calc(100% + .45rem);z-index:40;margin:0;padding:.3rem 0;
  list-style:none;width:min(27rem,92vw);max-height:min(70vh,32rem);overflow-y:auto;
  background:var(--ground);border:1px solid var(--rule);border-radius:3px;
  box-shadow:0 10px 34px rgba(0,0,0,.55)}
.qres{display:flex;align-items:baseline;gap:.7rem;padding:.42rem .8rem;cursor:pointer}
.qres[aria-selected="true"],.qres:hover{background:var(--deep)}
.qtype{flex:none;font-family:var(--sans);text-transform:uppercase;letter-spacing:.07em;
  font-size:.56rem;min-width:3.1em}
.qt-plant{color:var(--gold)}
.qt-gall{color:var(--cold)}
.qt-word,.qt-shape{color:var(--dim)}
.qtx{min-width:0}
.qn{color:var(--ink);display:block;font-size:.88rem;text-wrap:pretty}
.qs{color:var(--dim);font-size:.76rem}
.qnone{padding:.5rem .8rem;color:var(--faint);font-style:italic;list-style:none}
/* search and cross-links land on these; keep the target clear of the sticky nav */
.sprow,.glossrow,.ifgroup,.lepcard,.adultlist>li{scroll-margin-top:5rem}

.pagehead{padding:3rem 0 1.4rem}
.pagehead .eyebrow{margin-bottom:.9rem}
.pagehead .eyebrow a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--rule2)}
.pagehead .eyebrow a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.pagehead h1{font-size:clamp(2rem,5vw,2.9rem);line-height:1.06;letter-spacing:-.015em}
.pagehead .thesis{margin-left:0;text-align:left;max-width:56ch}

/* a station, seen from the descent */
.deepcard{display:grid;grid-template-columns:40px minmax(0,1fr) 64px;gap:1.2rem;
  align-items:start;text-decoration:none;margin:0 0 1.6rem;padding:1.3rem 1.4rem 1.3rem 1.2rem;
  border:1px solid var(--rule);background:var(--deep);
  transition:border-color .16s ease}
.deepcard:hover,.deepcard:focus-visible{border-color:var(--gold)}
.deepcard .glyph{margin-top:.15rem}
.dc-t h3{font-size:1.24rem;line-height:1.2;color:var(--ink)}
.deepcard .common{font-size:.94rem}
.dc-lede{margin:.5rem 0 0;color:var(--dim);font-size:.96rem;max-width:56ch;line-height:1.55}
.dc-go{color:var(--gold)}
.deepcard:hover .dc-go{text-decoration:underline}
.deepcard img{width:64px;height:64px;object-fit:cover;border:1px solid var(--rule2);
  filter:saturate(.86) brightness(.92)}
.deepcard:hover img{filter:none}

/* forward and back along the descent */
.steps{display:flex;gap:1.4rem;justify-content:space-between;flex-wrap:wrap;
  margin:3rem 0 4rem;padding-top:1.6rem;border-top:1px solid var(--rule)}
.steps a{display:flex;flex-direction:column;gap:.25rem;text-decoration:none;max-width:22rem}
.steps span{font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;
  font-size:.62rem;color:var(--faint)}
.steps i{color:var(--ink);font-size:1.02rem}
.steps a:hover i{color:var(--gold)}
.st-next{margin-left:auto;text-align:right}

/* where the rest of it is */
.onward{padding:3.5rem 0 1rem;border-top:1px solid var(--rule)}
.onward h2{font-size:1.5rem;margin-bottom:1.2rem}
.onward ul{list-style:none;margin:0;padding:0}
.onward a{display:block;padding:1.2rem 1.4rem;border:1px solid var(--rule);
  background:var(--deep);text-decoration:none;transition:border-color .16s ease}
.onward a:hover{border-color:var(--gold)}
.onward b{display:block;color:var(--ink);font-weight:400;font-size:1.1rem}
.onward span{display:block;margin-top:.3rem;color:var(--dim);font-size:.94rem}

@media (max-width:620px){
  .deepcard{grid-template-columns:32px minmax(0,1fr);gap:.9rem}
  .deepcard img{display:none}
  .topnav .wrap{flex-direction:column;align-items:flex-start;gap:.3rem}
  /* five destinations no longer fit on one line at 360px; wrapping is the whole fix */
  .tn-links{flex-wrap:wrap;gap:.25rem .9rem}
  .tn-right{flex-direction:column;align-items:stretch;width:100%;gap:.4rem}
  .tn-q{width:100%;max-width:none}
  .qout{width:100%;left:0;right:auto}
  /* the stacked nav with the search row is taller; keep jump targets clear of it */
  .cat,.sprow,.glossrow,.ifgroup,.lepcard,.adultlist>li{scroll-margin-top:8.5rem}
  .st-next{margin-left:0;text-align:left}
}

/* a glossary term inside a heading keeps its definition but loses the dotted rule —
   at 1.9rem the mark reads as an underlined title rather than an annotated word */
h1 .term,h2 .term,h3 .term,h4 .term,.pagehead .term{border-bottom:0}

/* the reference itself, on hover — the jump to /reference/ is the fallback, not the
   first resort, now that the bibliography is on another page */
.cite{cursor:help}

/* Where a square thumbnail crops from. Sampled across eight portrait gall photos: a
   centre crop lost the gall in most of them, a crop centred 28% down caught it in all
   eight. Galls sit at or near the apex; the bottom of a portrait frame is usually stem,
   hand or ground. */
.catpic img,.deepcard img,.hostcard img{object-position:center 28%}

/* Where a reference is used. On one page a bare arrow was enough; across ten it has
   to name the destination, or it tells you nothing about where you are going. */
.usedin{display:block;margin-top:.35rem;font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.09em;font-size:.58rem;color:var(--faint)}
.usedin .ui-l{margin-right:.5em}
.usedin .ui-p{color:var(--gold);margin-right:.4em;font-family:var(--serif);font-size:.8rem}
.usedin a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--rule2)}
.usedin a:hover,.usedin a:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}

/* ---------- the plant ---------- */
.plantsec .pbody{max-width:var(--col)}
.plantsec .pbody p{margin:0 0 1.1rem}
.plantsec .pbody p+.chip{margin:-.4rem 0 1.4rem}

/* a goldenrod head in section. Line work only, so it re-tints with the theme. */
.capwrap{margin:2.4rem 0 0;max-width:34rem}
.capfig{width:100%;height:auto;display:block}
.capfig .cp-line{fill:none;stroke:var(--ink);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:.88}
.capfig .cp-lead{fill:none;stroke:var(--rule2);stroke-width:1}
.capfig .cp-lab{font-family:var(--sans);font-size:6.6px;letter-spacing:.09em;
  text-transform:uppercase;fill:var(--dim)}
.capwrap figcaption{color:var(--faint);font-size:.82rem;margin-top:.7rem;max-width:44ch}

/* the five flowering shapes */
.ifgroups{display:grid;gap:3.2rem}
.ifgroup{scroll-margin-top:4rem}
.ifg-top{display:flex;gap:1.3rem;align-items:flex-start}
.ifg{width:62px;flex:0 0 62px;height:auto;margin-top:.2rem}
.ifg .ifg-line{fill:none;stroke:var(--ink);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.72}
.ifg .ifg-head{fill:var(--gold)}
.ifg-hd h3{font-size:1.32rem;line-height:1.2}
.ifg-tell{color:var(--dim);margin:.35rem 0 0;max-width:48ch}
.ifg-count{font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;
  font-size:.66rem;color:var(--faint);margin:.6rem 0 0}
.ifg-count b{color:var(--ink);font-weight:400;font-variant-numeric:tabular-nums}
.ifg-note{color:var(--faint);font-size:.9rem;margin:1rem 0 1.3rem;max-width:60ch}
/* the shape jump index, and the collapsible group headers */
.shapenav{display:flex;flex-wrap:wrap;gap:.5rem .7rem;margin:0 0 2.6rem}
.shapenav a{font-family:var(--sans);text-transform:uppercase;letter-spacing:.07em;font-size:.64rem;
  color:var(--dim);text-decoration:none;display:inline-flex;align-items:baseline;gap:.45rem;
  border:1px solid var(--rule);border-radius:2px;padding:.4em .7em}
.shapenav a:hover,.shapenav a:focus-visible{color:var(--gold);border-color:var(--gold)}
.shapenav a b{color:var(--ink);font-weight:400;font-variant-numeric:tabular-nums}
.ifgroup>summary{cursor:pointer;list-style:none;position:relative;padding-right:1.8rem}
.ifgroup>summary::-webkit-details-marker{display:none}
.ifgroup>summary::after{content:"\25B8";position:absolute;right:.2rem;top:.15rem;
  color:var(--gold);font-size:.85rem;transition:transform .15s}
.ifgroup[open]>summary::after{transform:rotate(90deg)}
.ifgroup>summary:hover .ifg-hd h3{color:var(--gold)}
.ifg-body{margin-top:1.1rem}

.splist{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.sprow{display:flex;gap:.85rem;align-items:baseline;
  padding-bottom:.55rem;border-bottom:1px solid var(--rule)}
.sprow:last-child{border-bottom:0}
/* the plant's photograph, top-aligned so it does not ride the text baseline */
.sprow>.catpic,.sprow>.nopic{align-self:flex-start;margin-top:.15rem}
.spn{flex:0 0 2.1rem;text-align:right;font-family:var(--serif);
  font-variant-numeric:tabular-nums;font-size:.95rem;color:var(--gold)}
.spn0{color:var(--rule2)}
.spmain{min-width:0}
.spname{margin:0;display:flex;flex-wrap:wrap;gap:.55rem;align-items:baseline}
.spc{color:var(--dim);font-size:.88rem}
.xls{display:inline-flex;gap:.4rem}
.xl{font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;font-size:.58rem;
  color:var(--faint);text-decoration:none;border:1px solid var(--rule2);
  border-radius:2px;padding:.12em .38em;line-height:1.5}
.xl:hover,.xl:focus-visible{color:var(--gold);border-color:var(--gold)}
.spev{margin:.3rem 0 0;color:var(--faint);font-size:.8rem;line-height:1.5;max-width:72ch}
.spev-l{font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;
  font-size:.58rem;color:var(--rule2);margin-right:.6em}
@media (prefers-color-scheme:light){ .spev-l,.rg-l{color:var(--dim)} }
:root[data-theme="light"] .spev-l,:root[data-theme="light"] .rg-l{color:var(--dim)}
:root[data-theme="dark"] .spev-l,:root[data-theme="dark"] .rg-l{color:var(--rule2)}

/* "what lives on it": a goldenrod's galls and caterpillars, opened per species */
.assoc{margin-top:.5rem}
.assoc>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:baseline;gap:.5rem}
.assoc>summary::-webkit-details-marker{display:none}
.assoc>summary::before{content:"\25B8";color:var(--gold);font-size:.66rem;transition:transform .15s}
.assoc[open]>summary::before{transform:rotate(90deg)}
.assoc-open{font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;
  font-size:.6rem;color:var(--faint)}
.assoc>summary:hover .assoc-open{color:var(--gold)}
.assoc-n{color:var(--dim);font-size:.82rem}
.assoc-body{margin:.55rem 0 .2rem;padding-left:.9rem;border-left:1px solid var(--rule);
  display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.8rem}
.assoc-l{margin:0 0 .35rem;font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;
  font-size:.58rem;color:var(--faint);font-weight:normal}
.assoc-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.22rem}
.assoc-col li{font-size:.82rem;color:var(--dim);text-wrap:pretty}
.assoc-col a{color:var(--ink)}
.assoc-col a:hover{color:var(--gold)}
.assoc-co,.assoc-ph{color:var(--faint);font-size:.94em}
.lp-t{font-family:var(--sans);text-transform:uppercase;letter-spacing:.05em;font-size:.52rem;
  padding:.05em .35em;border-radius:2px;white-space:nowrap}
.lp-larva{color:var(--ground);background:var(--gold)}
.lp-adult{color:var(--faint);border:1px solid var(--rule)}
.lp-uns{color:var(--faint)}
.assoc-inat{font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;font-size:.52rem;
  color:var(--faint);border-bottom:1px solid var(--faint);white-space:nowrap}
.assoc-inat:hover{color:var(--gold);border-bottom-color:var(--gold)}
.assoc-note{grid-column:1/-1;margin:.35rem 0 0;font-size:.7rem;color:var(--faint);max-width:70ch}
@media (max-width:620px){ .assoc-body{grid-template-columns:1fr} }

.unplaced{margin-top:3.4rem;padding-top:2rem;border-top:1px solid var(--rule)}
.unplaced h3{font-size:1.2rem;margin-bottom:.6rem}
.unplaced .intro{color:var(--dim);max-width:58ch;margin:0 0 1.6rem;font-size:.94rem}

/* range maps */
.rangegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:2.4rem 1.8rem}
.rgcard{margin:0}
.tilemap{width:100%;height:auto;display:block;margin-bottom:.7rem}
.tilemap .tm-off{fill:var(--rule)}
.tilemap .tm-on{fill:var(--gold)}
.rgcard figcaption{font-size:.88rem}
.rgcard figcaption b{font-weight:400}
.rg-n{font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;
  font-size:.6rem;color:var(--faint);margin:.3rem 0 0}
.rg-dist{color:var(--faint);font-size:.78rem;line-height:1.5;margin:.5rem 0 0}
.rg-l{display:block;font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;
  font-size:.56rem;color:var(--rule2);margin-bottom:.1rem}
.rg-none{font-style:italic}

/* the whole list */
.ptabwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ptab{border-collapse:collapse;width:100%;min-width:40rem;font-size:.88rem}
.ptab th{font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;
  font-size:.6rem;color:var(--dim);text-align:left;font-weight:400;
  padding:0 .8rem .6rem 0;border-bottom:1px solid var(--rule2)}
.ptab td{padding:.5rem .8rem .5rem 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.ptab .num{text-align:right;font-variant-numeric:tabular-nums;padding-right:1.2rem}
.ptab th.num{text-align:right}
.ptab .tpic{width:36px;padding-right:.9rem;vertical-align:top}
.ptab .tpic .catpic,.ptab .tpic .catpic img,.ptab .tpic .nopic{width:36px;height:36px}
.ptab .tsp{white-space:nowrap}
.ptab .tph{color:var(--dim);white-space:nowrap}
.ptab .tdim{color:var(--rule2)}
.ptab td a{color:inherit}
.ptab tbody tr:hover{background:color-mix(in srgb,var(--rule) 45%,transparent)}

/* the caterpillars stub */
.stubsec{border-top:0;padding-top:1rem}
.stubblock{max-width:var(--col);padding-bottom:2.2rem;margin-bottom:2.2rem;
  border-bottom:1px solid var(--rule)}
.stubblock:last-child{border-bottom:0}
.stubblock h3{font-size:1.24rem;margin-bottom:.6rem}
.stubblock p{margin:0 0 .9rem}

@media (max-width:640px){
  .ifg-top{gap:.9rem}
  .ifg{width:46px;flex-basis:46px}
  .rangegrid{grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:2rem 1.2rem}
}
/* the plant page's header is left-aligned prose, so its tally is too */
.plantheadb .tally{justify-content:flex-start;gap:0 2.6rem;margin-left:0;max-width:none}

/* ---------- the front door opens on the drawings ---------- */
.shapesec{border-top:0;padding-top:1rem}
.shapelede{max-width:58ch;margin:0 auto 2.6rem;text-align:center}
.shapestrip{display:flex;flex-wrap:wrap;justify-content:center;gap:1.6rem 2.4rem;
  padding:1rem 0 1.4rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.shapecell{display:flex;flex-direction:column;align-items:center;gap:.55rem;
  text-decoration:none;width:6.2rem}
.shapecell .ifg{width:76px}
.shapecell span{font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;
  font-size:.58rem;color:var(--dim);text-align:center;line-height:1.35}
.shapecell:hover .ifg-line,.shapecell:focus-visible .ifg-line{opacity:1;stroke:var(--gold)}
.shapecell:hover span,.shapecell:focus-visible span{color:var(--gold)}
.shapecap{max-width:54ch;margin:1.4rem auto 0;text-align:center;
  color:var(--faint);font-size:.86rem}
.shapecap a{color:var(--dim)}
.shapecap a:hover{color:var(--gold)}

/* ---------- the galls page wears its silhouettes ---------- */
.gallhead{text-align:center;padding-top:2.4rem}
.gallhead .thesis{margin-left:auto;margin-right:auto;text-align:center}
.gallhead h1{font-size:clamp(2.2rem,6vw,3.3rem)}
.gallstrip{display:flex;justify-content:center;align-items:flex-end;gap:1.3rem;
  margin:1.6rem 0 2rem;opacity:.5}
.gallcell .glyph{width:26px;height:auto;display:block}
@media (max-width:520px){ .gallstrip{gap:.85rem} .gallcell .glyph{width:20px} }

/* The 1895 wood engraving of the ball gall, painted through as a mask like the
   botanical plates. Comstock cut it in section and in habit on one block, which is
   the same comparison the entries below make. */
.gallplate{width:min(230px,52vw);margin:0 auto 1.6rem;display:block;
  -webkit-mask-image:var(--plate-g);mask-image:var(--plate-g);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  background:var(--ink);aspect-ratio:1062/800;opacity:.9}
.platecred{font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;
  font-size:.56rem;color:var(--faint);margin:-1rem 0 .7rem}
/* the legend proper: what the engraving shows and what the insect was called in 1895 */
.platenote{max-width:48ch;margin:0 auto 2rem;color:var(--dim);font-size:.86rem;
  line-height:1.55;text-wrap:pretty}

/* ---------- the caterpillars ----------
   Photographs are the point of this page, so they get the room and they are never
   cropped: a masonry column layout lets every one keep the shape it was taken in.
   Cropping cost this guide two rounds of "you can't see the actual thing". */
.lephead{text-align:center}
.lephead .thesis{margin-left:auto;margin-right:auto;text-align:center}
.lephead .tally{justify-content:center}
.galleryband{background:var(--deep);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:4.5rem 0}
.wrap.wide{max-width:min(1180px,94vw);padding:0 1.5rem}
.leplegend{font-size:.9rem;color:var(--faint)}

.lepgrid{columns:3 300px;column-gap:1.6rem}
.lepgrid-tight{columns:4 200px;column-gap:1.2rem}
.lepcard{margin:0 0 1.9rem;break-inside:avoid;-webkit-column-break-inside:avoid;
  display:inline-block;width:100%}
.lep-pic{display:block;text-decoration:none;position:relative}
.lep-pic img{width:100%;height:auto;display:block;background:var(--rule)}
.lep-nopic{display:block;width:100%;aspect-ratio:4/3;background:var(--rule);opacity:.5}
.lep-cap{display:block;font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.08em;font-size:.55rem;color:var(--faint);margin-top:.4rem;line-height:1.5}
.lep-pic:hover .lep-cap,.lep-pic:focus-visible .lep-cap{color:var(--gold)}
.lepcard figcaption{padding-top:.5rem}
.lepcard h3{font-size:1.06rem;line-height:1.25}
.lepcard h3 a{text-decoration:none;border-bottom:1px solid var(--rule2)}
.lepcard h3 a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.lep-common{display:block;color:var(--dim);font-size:.85rem;margin-top:.1rem}
.lep-meta{margin:.45rem 0 0;font-size:.82rem;color:var(--faint)}
.lep-ev{font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;
  font-size:.58rem;color:var(--gold)}
.lep-ev b{font-weight:400}
.lep-ev0{color:var(--faint)}
.lep-more{font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;
  font-size:.56rem;color:var(--rule2)}
.lep-br{margin:.4rem 0 0;font-size:.78rem;color:var(--faint);line-height:1.5}
.lep-brl{display:block;font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.09em;font-size:.55rem;color:var(--rule2)}
.lepcard.small h3{font-size:.94rem}
.lepcard.small .lep-cap{font-size:.5rem}

.adultlist{list-style:none;margin:0;padding:0;
  columns:3 220px;column-gap:1.6rem;font-size:.9rem;color:var(--dim)}
.adultlist li{padding:.3rem 0;break-inside:avoid}

@media (prefers-color-scheme:light){ .lep-brl,.lep-more{color:var(--dim)} }
:root[data-theme="light"] .lep-brl,:root[data-theme="light"] .lep-more{color:var(--dim)}
@media (max-width:640px){
  .lepgrid{columns:1}
  .lepgrid-tight{columns:2 140px}
  .galleryband{padding:3rem 0}
}
/* the shortlist: prominent, but hedged in its own words */
.narrowbox{border:1px solid var(--rule2);padding:1.6rem 1.7rem;margin:0 0 3rem;
  max-width:var(--col)}
.narrowbox h3{font-size:1.16rem;margin-bottom:.6rem}
.narrowbox p{color:var(--faint);font-size:.9rem;margin:0 0 1.1rem}
.narrowlist{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.narrowlist li{display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap;
  padding-bottom:.5rem;border-bottom:1px solid var(--rule)}
.narrowlist li:last-child{border-bottom:0;padding-bottom:0}
.narrowlist a{text-decoration:none;border-bottom:1px solid var(--rule2)}
.narrowlist a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.nw-n{margin-left:auto;font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.08em;font-size:.58rem;color:var(--gold);white-space:nowrap}
/* A historical figure beside an entry. Tonal plates keep their midtones, so this
   sits at a slightly lower opacity than the engravings — a lithograph that reads
   as solid ink looks like a printing fault. */
.histplate{margin:1.6rem 0 0}
.histplate .hp{display:block;width:100%;background:var(--ink);opacity:.82;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
.histplate .hp-gallmoth{-webkit-mask-image:url(/plate-gallmoth.3288aa653f.png);
  mask-image:url(/plate-gallmoth.3288aa653f.png);aspect-ratio:1107/800}
.histplate figcaption{color:var(--faint);font-size:.78rem;line-height:1.55;margin-top:.6rem}

/* ---------- the five, chased ---------- */
.chased{display:grid;gap:2.6rem;max-width:var(--col)}
.chase h3{font-size:1.14rem;line-height:1.3}
.chase h3 .auth{font-family:var(--sans);text-transform:none;letter-spacing:0;
  font-size:.8rem;color:var(--dim);font-style:normal}
.chq{margin:.8rem 0 0;padding:0 0 0 1.1rem;border-left:2px solid var(--gold);
  color:var(--ink);font-size:1rem;line-height:1.6}
.chq cite{display:block;font-style:normal;margin-top:.3rem}
.chgloss{margin:.8rem 0 0;color:var(--faint);font-size:.9rem}
.chours{margin:.7rem 0 .7rem;font-size:.9rem}
.ch-l{display:block;font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.09em;font-size:.56rem;color:var(--dim);margin-bottom:.15rem}
.chasedclose{margin-top:2.8rem;padding-top:1.6rem;border-top:1px solid var(--rule);
  color:var(--ink)}

/* ---------- the colophon ---------- */
.colhead .thesis{max-width:58ch}
.colnav{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:2.4rem;
  padding-top:1.4rem;border-top:1px solid var(--rule)}
.colnav a{font-family:var(--sans);text-transform:uppercase;letter-spacing:.09em;
  font-size:.62rem;color:var(--dim);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px}
.colnav a:hover,.colnav a:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}

.colsec{scroll-margin-top:3rem}
.colsec .pbody{max-width:var(--col)}
.colsec .pbody p{margin:0 0 1.1rem}
.colsec .pbody p+.chip{margin:-.4rem 0 1.4rem}
.colsec .pbody b{font-weight:400;color:var(--ink)}
.colsec code{font-family:var(--mono);font-size:.84em;color:var(--ink);
  background:color-mix(in srgb,var(--rule) 55%,transparent);
  padding:.1em .35em;border-radius:2px}

/* where the data came from */
.srctab{border-collapse:collapse;width:100%;min-width:34rem;margin-top:.4rem}
.srctab th{text-align:left;font-weight:400;vertical-align:baseline;
  padding:.9rem 1.4rem .9rem 0;border-bottom:1px solid var(--rule);width:13rem}
.srctab th b{display:block;font-weight:400;font-size:1.02rem}
.srcwhat{display:block;font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.09em;font-size:.58rem;color:var(--faint);margin-top:.3rem;line-height:1.5}
.srctab td{padding:.9rem 0;border-bottom:1px solid var(--rule);
  color:var(--dim);font-size:.92rem;vertical-align:baseline}
.srctab tr:last-child th,.srctab tr:last-child td{border-bottom:0}

/* what went wrong */

.colfoot{border-top:1px solid var(--rule);padding-top:3rem;margin-top:4.5rem}
.colstub .colpoint{margin-top:1.1rem}
.colstub .colpoint a{color:var(--gold);text-decoration:none;
  border-bottom:1px solid var(--rule2)}
.colstub .colpoint a:hover{border-bottom-color:var(--gold)}

@media (max-width:640px){
  .srctab{min-width:0}
  .srctab,.srctab tbody,.srctab tr,.srctab th,.srctab td{display:block;width:auto}
  .srctab th{border-bottom:0;padding:1.2rem 0 .3rem}
  .srctab td{padding-top:0}
  .ptabwrap:has(.srctab){overflow-x:visible}
}