/* Coverslip — glass slide, iodine and methylene blue. Own work. */
@font-face{font-family:"Newsreader";src:url(/static/fonts/newsreader-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/static/fonts/newsreader-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/static/fonts/newsreader-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/static/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/static/fonts/atkinson-hyperlegible-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/static/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/static/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --paper:#f3efe4; --glass:#fbfaf5; --ink:#1f2a2b; --soft:#5b6661; --line:#d9d2bf;
  --blue:#2c5d8f; --blue2:#1d4570; --iodine:#a8611f; --green:#4d7a3a; --ring:#2a3133;
  --serif:"Newsreader",Georgia,serif; --sans:"Atkinson Hyperlegible",system-ui,sans-serif; --mono:"Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans);min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1 0 auto;width:100%}
a{color:var(--blue)} a:hover{color:var(--blue2)}
img,video,svg{max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4vw,2.7rem);margin:.3em 0 .35em}
h2{font-size:1.45rem;margin:1.6em 0 .5em}
code,.mono{font-family:var(--mono);font-size:.9em}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.4em .8em}
.skip:focus{left:8px;z-index:9}

.top{background:var(--glass);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:1.4rem;min-height:64px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);font:600 1.45rem/1 var(--serif)}
.mark .slide{fill:#e7efe9;stroke:var(--ink);stroke-width:1.4}.mark .cover{fill:#fff;fill-opacity:.65;stroke:var(--blue);stroke-width:1.2}
.mark .cell{fill:#c9dfc0;stroke:var(--green);stroke-width:1.2}.mark .nuc{fill:var(--iodine)}
.menu{display:flex;gap:1.1rem;flex-wrap:wrap}
.menu a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.97rem;padding:.2em 0;border-bottom:2px solid transparent}
.menu a:hover{border-bottom-color:var(--iodine)}

main{padding-bottom:3rem;min-height:60vh}
.crumbs{font-size:.88rem;color:var(--soft);margin:1.2rem 0 0}
.crumbs a{color:var(--soft)}
.sub{color:var(--soft);max-width:46em}
.lead{font-size:1.15rem;max-width:40em}
.meta{color:var(--soft);font-size:.9rem;margin-top:2rem}
.kicker{text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--iodine);font-weight:700;margin:1.5rem 0 0}
.taxon{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--soft);margin:-.3em 0 .8em}
.n{font:400 .85rem var(--mono);color:var(--soft);vertical-align:middle}

.btn{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;font-weight:700;padding:.65em 1.2em;border-radius:999px;margin:.2em .4em .2em 0}
.btn:hover{background:var(--blue2);color:#fff}
.btn.ghost{background:transparent;color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue)}

.hero{display:grid;grid-template-columns:minmax(180px,300px) 1fr;gap:2.5rem;align-items:center;padding:2.5rem 0 1rem}
.eyepiece{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,#eef3e6 0,#e2ead6 52%,#c8d3b9 66%,var(--ring) 68.5%,var(--ring) 100%);position:relative;overflow:hidden}
.eyepiece span{position:absolute;inset:18%;border-radius:50%;background:
  radial-gradient(ellipse 17% 8% at 38% 42%,#9fbf86 0 60%,transparent 62%),
  radial-gradient(ellipse 4.5% 4.5% at 62% 58%,#b8803f 0 60%,transparent 64%),
  radial-gradient(ellipse 9% 3% at 55% 30%,#7c9fc0 0 60%,transparent 64%),
  radial-gradient(ellipse 2.6% 2.6% at 30% 66%,#6f8d58 0 60%,transparent 64%);
  animation:drift 14s ease-in-out infinite alternate}
.eyepiece.small{width:160px;margin:1.5rem 0 0}
@keyframes drift{to{transform:translate(6%,-4%) rotate(14deg)}}
@media (prefers-reduced-motion:reduce){.eyepiece span{animation:none}}

/* cards: circular field of view */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1.6rem 1.2rem;margin:1rem 0}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.4rem 1.2rem;margin:1rem 0}
.card,.gcard{display:block;text-decoration:none;color:var(--ink)}
.ph{display:block;position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#dfe6d6;box-shadow:0 0 0 5px var(--ring),0 2px 0 6px var(--line)}
.ph img,.ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph .blank{position:absolute;inset:0;width:100%;height:100%}
.blank circle{fill:#e8eedf;stroke:#c3cdb3;stroke-width:1.5;stroke-dasharray:3 4}
.blank text{font:600 34px var(--serif);fill:#9aa98a;text-anchor:middle}
.dur{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);font:400 .75rem var(--mono);background:rgba(31,42,43,.78);color:#fff;padding:.1em .45em;border-radius:3px}
.cap{display:block;margin-top:.85rem;font-weight:700;line-height:1.3;text-align:center}
.cap small{display:block;font-weight:400;color:var(--soft);font-size:.86rem}
.cap em{display:block;font:400 .78rem var(--mono);color:var(--iodine);font-style:normal;margin-top:.15rem}
.card:hover .cap,.gcard:hover .cap{color:var(--blue)}
.empty{background:var(--glass);border:1px dashed var(--line);padding:1rem 1.2rem;border-radius:6px;color:var(--soft)}

/* key */
.keystep{max-width:860px}
.trail{list-style:none;padding:0;margin:1rem 0 0;font-size:.9rem;color:var(--soft)}
.trail li{padding-left:1.1em;position:relative}
.trail li:before{content:"";position:absolute;left:0;top:.62em;width:.5em;height:.5em;border-radius:50%;background:var(--iodine)}
.trail span{color:var(--ink)}
.opts{list-style:none;padding:0;margin:1.4rem 0;counter-reset:o}
.opts li{counter-increment:o;margin:.6rem 0}
.opt{display:grid;grid-template-columns:2.4rem 1fr auto;gap:.2rem 1rem;align-items:center;text-decoration:none;color:var(--ink);background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:.85rem 1rem}
.opt:before{content:counter(o);font:400 1rem var(--mono);color:var(--blue);width:2rem;height:2rem;border-radius:50%;box-shadow:inset 0 0 0 2px var(--blue);display:flex;align-items:center;justify-content:center}
.opt.has{grid-template-columns:2.4rem 1fr auto 64px}
.opt .ph{grid-column:4;grid-row:1;width:64px;box-shadow:0 0 0 3px var(--ring)}
.opt .t{font-size:1.04rem}
.opt .to{font-size:.85rem;color:var(--iodine);white-space:nowrap}
.opt:hover,.opt:focus{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.opts.compact{display:flex;flex-wrap:wrap;gap:.5rem}
.opts.compact li{margin:0}
.opts.compact li a{display:block;padding:.45rem .9rem;background:var(--glass);border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:.95rem}
.opts.compact li a:hover{border-color:var(--blue)}
.opts.compact{counter-reset:none}

/* group / clip */
.twocol{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:2.5rem}
.twocol aside h2:first-child,.twocol section h2:first-child{margin-top:.6em}
.check{padding-left:1.2em}.check li{margin:.35em 0}
.check li::marker{content:"◦  ";color:var(--green)}
.conf{padding-left:1.1em}.conf li{margin:.4em 0}
.facts{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;background:var(--glass);border:1px solid var(--line);border-radius:8px;padding:1rem 1.1rem;margin:1.4rem 0 0}
.facts dt{font-weight:700;color:var(--soft);font-size:.9rem}
.facts dd{margin:0}
.video{margin:1.2rem 0;background:#0e1213;border-radius:10px;overflow:hidden}
.video video{display:block;width:100%;height:auto;max-height:72vh;background:#0e1213}
.video figcaption{color:#cfd6d2;font-size:.85rem;padding:.55rem .9rem}
.video figcaption a{color:#e6d2b4}
.tech{border-collapse:collapse;width:100%;font-size:.95rem;margin-top:.6rem}
.tech th{text-align:left;color:var(--soft);font-weight:700;padding:.45rem 1rem .45rem 0;vertical-align:top;white-space:nowrap}
.tech td{padding:.45rem 0;border-bottom:1px solid var(--line);word-break:break-word}
.credit code{background:var(--glass);border:1px solid var(--line);padding:.35em .6em;border-radius:5px;display:inline-block}
.copy{font:inherit;font-size:.85rem;border:1px solid var(--blue);background:transparent;color:var(--blue);border-radius:999px;padding:.2em .8em;cursor:pointer}
.dls{display:flex;gap:.6rem;flex-wrap:wrap}
.dl{border:1px solid var(--line);background:var(--glass);border-radius:6px;padding:.4em .8em;text-decoration:none;font-weight:700}
.dl small{font:400 .78rem var(--mono);color:var(--soft)}
.pn{display:flex;justify-content:space-between;gap:1rem;margin-top:2.5rem;border-top:1px solid var(--line);padding-top:1rem}

/* filters */
.filters{background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:.6rem 1rem;margin:1rem 0}
.filters fieldset{border:0;padding:.3rem 0;margin:0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.filters legend{float:left;font-weight:700;font-size:.85rem;color:var(--soft);margin-right:.6rem;padding:0}
.filters button{font:inherit;font-size:.85rem;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.2em .75em;cursor:pointer;color:var(--ink)}
.filters button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.gcard.off,.card.off{display:none}
.kind.off{display:none}

/* text */
.text{max-width:740px}
.text ul{padding-left:1.2em}
.notes{list-style:none;padding:0;max-width:760px}
.notes li{padding:.8rem 0;border-bottom:1px solid var(--line)}
.notes a{font:600 1.2rem var(--serif);display:block}
.notes span{color:var(--soft)}
.plain{list-style:none;padding:0}.plain li{margin:.35em 0}
.plain span{color:var(--soft);display:block;font-size:.92rem}
.cols{columns:2 220px}
.gloss{max-width:760px}
.gloss dt{font:600 1.15rem var(--serif);margin-top:1.1rem}
.gloss dd{margin:.15rem 0 0}
.calc{display:grid;gap:.8rem;background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;max-width:520px}
.calc output{font-family:var(--mono);color:var(--blue2)}
.mailform{display:grid;gap:1rem;max-width:620px;margin-top:1.4rem}
.mailform label{display:grid;gap:.3rem;font-weight:700;font-size:.95rem}
.mailform input,.mailform select,.mailform textarea,.calc input,.calc select{font:inherit;font-weight:400;padding:.55em .7em;border:1px solid #c7bfa9;border-radius:6px;background:#fff;width:100%}
.mailform .chk{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}
.mailform .chk input{width:auto;margin-top:.35em}
.mailform button{justify-self:start;font:inherit;font-weight:700;background:var(--blue);color:#fff;border:0;border-radius:999px;padding:.65em 1.6em;cursor:pointer}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.pages{display:flex;gap:.5rem;flex-wrap:wrap;margin:2rem 0}
.pages a,.pages span{padding:.25em .65em;border-radius:5px}
.pages span[aria-current]{background:var(--ink);color:#fff}
.nf{padding:2rem 0}

.bottom{border-top:1px solid var(--line);background:var(--glass);font-size:.9rem;color:var(--soft);padding:1.6rem 0 2.2rem}
.bottom a{color:var(--soft)}
.scale{font:400 .78rem var(--mono);display:flex;align-items:center;gap:.6rem}
.scale span{display:inline-block;width:72px;height:6px;background:var(--ink);border-radius:1px}
.mail{margin-top:.6rem}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;gap:1.2rem;padding-top:1.5rem}
  .hero .eyepiece{width:150px}
  .twocol{grid-template-columns:1fr;gap:0}
  .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:1.2rem .9rem}
  .ggrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .opt,.opt.has{grid-template-columns:2.2rem 1fr}
  .opt .to{grid-column:2}
  .opt .ph{display:none}
  .top .wrap{gap:.4rem 1rem;padding-top:.6rem;padding-bottom:.6rem}
  body{font-size:16px}
}