/* Atlas style: a specimen catalogue. Off-white paper, 1px ink rules, a strict grid, uppercase mono statements,
   natural-history plates on square tiles, labelled data. Plex Mono for text and data, Instrument Serif only for names. */
@font-face{font-family:'IBM Plex Mono';src:url(assets/fonts/plex-mono-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(assets/fonts/plex-mono-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(assets/fonts/instrument-serif-normal.woff2) format('woff2');font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(assets/fonts/instrument-serif-italic.woff2) format('woff2');font-style:italic;font-display:swap}
:root{--mono:'IBM Plex Mono','Courier New','Noto Sans SC',monospace;--a-paper:#f5f4f0;--a-ink:#161616;--a-muted:#a5a29a;--a-soft:#5b5b57;--a-rule:#d8d5cd;--a-tile:#ede6d9;--a-serif:'Instrument Serif',Georgia,serif}

html body{background:var(--a-paper);color:var(--a-ink)}
html body .film-opening,html body .film-sticky,html body .film-screen,html body .film-controls,html body .film-status,
html body .observatory,html body .field-letter,html body .field-cabinet,html body .photo-collection,html body .phylogeny-room,
html body .evolution-controls,html body .evidence-section,html body .cat-planet{background:transparent}
html body .cat-planet{--pl-paper:transparent}
html body .envelope-back,html body .envelope-front{mix-blend-mode:multiply}
html body .envelope-stage{background:var(--a-paper)}
.cabinet-footer,.lineage-bridge{background:transparent!important;box-shadow:none!important;clip-path:none!important;border-top:1px solid var(--a-ink)!important}
.evidence-strip details{background:var(--a-tile)!important;border:0!important}

/* ---------- part openers ---------- */
.atlas-part{margin-top:120px;padding-top:18px;border-top:1px solid var(--a-ink);scroll-margin-top:90px}
.ap-kicker,.af-kicker{display:flex;justify-content:space-between;gap:24px;font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.ap-kicker span+span,.af-kicker span+span{color:var(--a-muted)}
.ap-statement{margin:52px 0 0;max-width:1240px;font:500 clamp(26px,3.35vw,50px)/1.07 var(--mono);letter-spacing:.005em;text-transform:uppercase}
.ap-statement em{font:italic 400 1.14em/1 var(--a-serif);text-transform:none;letter-spacing:0}
.ap-zh{margin:26px 0 0;max-width:640px;font:15px/1.95 var(--sans);color:var(--a-soft)}
.ap-plates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:68px;padding-top:44px;border-top:1px solid var(--a-ink)}
.ap-plate{display:block;color:inherit}
.ap-img{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--a-tile)}
.ap-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.ap-plate:hover .ap-img img{transform:scale(1.04)}
.ap-img b{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font:400 clamp(22px,2.7vw,40px)/1.02 var(--mono);letter-spacing:.02em;text-transform:uppercase;color:#fff;text-shadow:0 1px 20px #0005;transition:letter-spacing .5s}
.ap-plate:hover .ap-img b{letter-spacing:.08em}
.ap-plate.is-light .ap-img img{mix-blend-mode:multiply}
.ap-plate.is-figure .ap-img img{object-fit:contain;padding:9%;transform:none!important}
.ap-plate.is-figure .ap-img b{top:auto;bottom:7%;left:9%;right:auto;inset-inline-end:auto;display:block;text-align:left;font-size:clamp(16px,1.6vw,22px)}
.ap-plate.is-light .ap-img b{color:var(--a-ink);text-shadow:0 0 18px #f5f4f0,0 0 6px #f5f4f0cc}
.ap-cap{display:grid;grid-template-columns:28px 1fr;gap:10px;margin-top:12px;font:13px/1.55 var(--mono)}
.ap-cap i{font-style:normal;color:var(--a-muted)}
.ap-cap span{text-align:right}

/* part III: specimen tiles, like a plate index */
.ap-specimens{display:grid;grid-template-columns:1.7fr repeat(4,minmax(0,1fr));gap:44px 18px;margin-top:68px;padding-top:44px;border-top:1px solid var(--a-ink)}
.ap-specimens-note{grid-row:1/3;margin:0;max-width:300px;font:14px/1.55 var(--mono);color:var(--a-muted)}
.ap-specimens-note i{font-family:var(--a-serif);font-size:1.1em}
.ap-spec{display:block;color:inherit}
.ap-spec-img{display:block;aspect-ratio:1;overflow:hidden;background:var(--a-tile)}
.ap-spec-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.ap-spec:hover .ap-spec-img img{transform:scale(1.06)}
.ap-spec b{display:block;margin-top:12px;font:500 12.5px/1.35 var(--mono);letter-spacing:.02em;text-transform:uppercase}
.ap-spec span{display:block;margin-top:2px;font:12px/1.5 var(--sans)}
.ap-spec small{display:block;margin-top:2px;font:11px var(--mono);color:var(--a-muted)}

/* ---------- species file: a specimen sheet ---------- */
.atlas-file{padding:36px 0 10px;scroll-margin-top:90px}
.af-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:start;margin-top:30px}
.af-photo{margin:0}
.af-photo button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.af-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.af-photo figcaption{margin-top:12px;font:12px/1.6 var(--mono);color:var(--a-soft)}
.af-photo figcaption b{font-weight:500;color:var(--a-ink);margin-right:6px}
.af-sheet h2{margin:-10px 0 0;font:400 clamp(72px,8vw,124px)/.9 var(--a-serif);letter-spacing:-2px}
.af-binomial{margin:12px 0 0;font:italic 24px/1.2 var(--a-serif)}
.af-binomial span{font:12px var(--mono);font-style:normal;color:var(--a-muted);margin-left:8px}
.af-lede{margin:24px 0 0;font:15px/1.95 var(--sans)}
.af-data{margin:28px 0 0;border-top:1px solid var(--a-ink)}
.af-data>div{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--a-rule)}
.af-data dt{font:600 12px/1.6 var(--sans)}
.af-data dd{margin:0;font:14px/1.6 var(--sans)}
.af-data i{font-family:var(--a-serif);font-size:1.08em}
.af-facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 40px;margin:80px 0 0;padding:44px 0 0;border-top:1px solid var(--a-ink)}
.af-facts li{font:14px/1.8 var(--sans)}
.af-facts b{display:block;margin-bottom:6px;font:400 13px var(--mono);color:var(--a-muted)}
.af-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:72px;padding-top:44px;border-top:1px solid var(--a-ink)}
.af-figs figure{margin:0}
.af-fig{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#fff}
.af-fig>img{width:100%;height:100%;object-fit:contain;display:block}
.af-fig-map .sf-mini-inner{transform:translate(-12.8%,-34.8%)}
.af-figs figcaption{margin-top:12px;font:12px/1.65 var(--sans);color:var(--a-soft)}
.af-figs figcaption b{display:block;font:500 12px var(--mono);letter-spacing:.04em;color:var(--a-ink)}

@media (max-width:1000px){
 .af-top{grid-template-columns:1fr;gap:34px}
 .ap-specimens{grid-template-columns:repeat(4,minmax(0,1fr))}
 .ap-specimens-note{grid-column:1/-1;grid-row:auto;max-width:none}
}
@media (max-width:700px){
 .atlas-part{margin-top:80px}
 .ap-statement{margin-top:34px;font-size:clamp(22px,6.6vw,30px)}
 .ap-plates,.af-figs{grid-template-columns:1fr;gap:34px}
 .ap-specimens{grid-template-columns:1fr 1fr;gap:30px 14px}
 .af-facts{grid-template-columns:1fr;gap:26px}
 .ap-cap span{text-align:left}
}

/* ---------- illustration edges meet the text ---------- */
body{overflow-x:clip}
.atlas-part{position:relative}
.ap-float{display:block;height:auto;shape-image-threshold:.2;pointer-events:none}
/* Part I: a cloud-forest branch; the statement wraps its leaves, its stem slips behind the plates and off the page */
.ap-branch{float:right;width:clamp(210px,25vw,370px);margin:10px calc(-1 * clamp(24px,5vw,90px)) calc(-1 * clamp(220px,26vw,400px)) 12px;shape-outside:url(assets/cutouts/branch.webp);shape-margin:14px;position:relative;z-index:2;filter:drop-shadow(0 10px 14px #1616161f)}
.atlas-part .ap-plates{position:relative;z-index:1;clear:none}
/* Part II: the 1883 specimen with its label, text flows along its right edge */
.ap-specimen-float{float:left;clear:left;width:clamp(210px,30vw,420px);margin:34px 34px 0 -8px;shape-outside:url(assets/cutouts/elliot-tigrina.webp);shape-margin:16px}
.ap-label{margin:10px 0 0;font:13px/1.45 var(--a-serif);text-align:center;color:var(--a-ink)}
.ap-specimen-float+.ap-label{float:left;clear:left;width:clamp(210px,30vw,420px);margin:6px 34px 18px -8px}
.ap-label i{display:block;font-size:17px}
.ap-label span{display:block;font:11px var(--mono);color:var(--a-muted);margin-top:2px}
.ap-label small{display:block;font:12px var(--sans);color:var(--a-soft);margin-top:2px}
#part-2 .ap-plates{clear:both}
#part-2 .ap-zh{max-width:calc(640px + clamp(210px,30vw,420px) + 26px)}
/* Part III: a vignette under the note fills the quiet column */
.ap-specimens-note img{display:block;width:100%;max-width:300px;margin-top:26px}
.ap-specimens-note>p:first-child{margin:0}

/* ---------- clouds and plants drifting through the page ---------- */
.drift{position:absolute;z-index:0;pointer-events:none;height:auto;max-width:none}
.letter-air{position:relative;isolation:isolate}
.drift-cloud-letter{z-index:-1;left:-6%;top:-6%;width:min(62vw,820px);opacity:.95}
#cat-planet{position:relative}
#cat-planet>*:not(.drift){position:relative;z-index:1}
#cat-planet .planet-stage{z-index:1}
.drift-cloud-planet-a{right:-8%;top:120px;width:min(58vw,760px);opacity:.9}
.drift-cloud-planet-b{left:-10%;top:48%;width:min(40vw,520px);opacity:.8}
#discovery{position:relative}
#discovery>*:not(.drift){position:relative;z-index:1}
.drift-sprig{left:39%;top:-34px;width:clamp(96px,9vw,140px);transform:scaleX(-1) rotate(-14deg);transform-origin:50% 0;opacity:.95}

/* ---------- a little English inside the Chinese ---------- */
.en{font-family:var(--a-serif);font-style:italic;font-size:1.12em;color:var(--a-ink)}
.en-mono{font:.82em/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--a-ink)}
.af-lede .en-mono{display:block;margin-bottom:6px}
.en-key{display:block;margin:0 0 6px;font:500 12px var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--a-ink)}

@media (max-width:700px){
 .ap-branch{width:120px;margin-right:-18px;margin-bottom:-120px}
 .ap-specimen-float,.ap-specimen-float+.ap-label{float:none;width:72%;margin:26px auto 0}
 .drift-cloud-letter{width:120vw;left:-20%}
 .drift-sprig{width:70px;top:-20px;left:auto;right:30%}
}