/*
 * stamboom (mimosa-tenuiflora.nl)
 * 1. Concept: de site als navigeerbaar cladogram, van vlinderbloemenfamilie naar één soort en zijn synoniemen; elke pagina hangt aan een knoop.
 * 2. Typografie: Gentium Book Plus (lopende tekst, koppen, echte cursief voor Latijnse namen) + Asap (labels, knopen, interface). Zelf gehost.
 * 3. Palet: lichttafel #f1f3f6, vel #ffffff, inkt #121a24, takgrijs #8792a2, nodusblauw #1f5aa6, bastrood #a8361b, stuifmeel #e3b21c.
 * 4. Layout-signatuur: interactieve SVG-stamboom met pill-knopen en kamlijnen naast een soortkaartpaneel; artikelen met een takje als kruimelpad en een rail met bladschema.
 * 5. Detail: bladschema's per soort, getekend uit het aantal veertjes en blaadjes in de bron; producten hangen als ronde blaadjes aan de knoop van jurema preta.
 */
@font-face{font-family:"Gentium";src:url(fonts/gentium-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Gentium";src:url(fonts/gentium-400-latin-ext.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Gentium";src:url(fonts/gentium-700-latin.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Gentium";src:url(fonts/gentium-700-latin-ext.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Gentium";src:url(fonts/gentium-italic-latin.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Gentium";src:url(fonts/gentium-italic-latin-ext.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Asap";src:url(fonts/asap-latin.woff2) format("woff2");font-weight:400 650;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Asap";src:url(fonts/asap-latin-ext.woff2) format("woff2");font-weight:400 650;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{--bg:#f1f3f6;--sheet:#fff;--ink:#121a24;--muted:#4f5a69;--line:#8792a2;--hair:#dde2ea;--blue:#1f5aa6;--rust:#a8361b;--pollen:#e3b21c;--serif:"Gentium",Georgia,serif;--sans:"Asap",system-ui,sans-serif;--r:14px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.125rem/1.62 var(--serif);text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:var(--blue);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--pollen);outline-offset:2px;border-radius:4px}
i,em{font-style:italic}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.5rem 1rem;z-index:20}
.skip:focus{left:1rem}

/* header */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:1rem;padding:.6rem clamp(1rem,3vw,2rem);background:rgba(241,243,246,.94);border-bottom:1px solid var(--hair);backdrop-filter:saturate(1.2)}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;margin-right:auto}
.brand img{width:40px;height:40px}
.brand-name{display:flex;flex-direction:column;line-height:1.05;font-size:1.2rem}
.brand-name small{font:500 .72rem/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:.2rem}
.menu summary{list-style:none;cursor:pointer;font:600 .9rem var(--sans);padding:.45rem .8rem;border:1px solid var(--hair);border-radius:99px;background:var(--sheet)}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;right:1rem;top:calc(100% + .3rem);background:var(--sheet);border:1px solid var(--hair);border-radius:var(--r);padding:.6rem;box-shadow:0 12px 30px rgba(18,26,36,.12);min-width:240px}
.menu ol{list-style:none;margin:0;padding:0}
.menu a{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:8px;color:var(--ink);text-decoration:none;font:500 .95rem var(--sans)}
.menu a:hover,.menu a[aria-current]{background:var(--bg)}
.m-dot{width:9px;height:9px;border-radius:50%;border:2px solid var(--line)}
.menu a[aria-current] .m-dot{background:var(--rust);border-color:var(--rust)}
.top-cta{display:none;font:600 .88rem var(--sans);color:#fff;background:var(--ink);padding:.5rem .95rem;border-radius:99px;text-decoration:none;white-space:nowrap}
.top-cta:hover{background:var(--rust)}
.mainnav{display:none}
.mainnav ol{display:flex;gap:.1rem;list-style:none;margin:0;padding:0}
.mainnav a{display:flex;align-items:center;gap:.45rem;padding:.4rem .55rem;border-radius:8px;color:var(--ink);text-decoration:none;font:500 .88rem var(--sans)}
.mainnav a:hover,.mainnav a[aria-current]{background:var(--sheet)}
.mainnav a[aria-current] .m-dot{background:var(--rust);border-color:var(--rust)}
@media (min-width:1120px){.mainnav{display:block}.menu{display:none}.top-cta{display:inline-block}}

/* home stage */
.stage{padding:clamp(1.2rem,3vw,2.4rem) clamp(1rem,3vw,2rem) 0;max-width:1480px;margin:0 auto}
.eyebrow{font:600 .78rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem}
.stage h1{font:400 clamp(2rem,3.6vw,3rem)/1.06 var(--serif);margin:0;max-width:20ch;letter-spacing:-.01em}
.stage-head{display:grid;gap:.8rem;margin-bottom:1.2rem}
.stage-lead{font:400 1rem/1.5 var(--sans);color:var(--muted);margin:0;max-width:60ch}
.kbd{display:inline-block;min-width:1.4em;text-align:center;border:1px solid var(--line);border-radius:5px;font:600 .85em var(--sans);line-height:1.3}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;list-style:none;margin:0;padding:0;font:500 .8rem var(--sans);color:var(--muted)}
.legend li{display:flex;align-items:center;gap:.4rem}
.legend li::before{content:"";width:10px;height:10px;border:2px solid var(--ink);background:var(--sheet)}
.legend .lg-sub::before{transform:rotate(45deg);width:9px;height:9px}
.legend .lg-gen::before{border-radius:50%;background:var(--ink)}
.legend .lg-sp::before{border-radius:50%}
.legend .lg-names::before{border:0;height:8px;background:repeating-linear-gradient(var(--ink) 0 2px,transparent 2px 3px)}
.legend .lg-prod::before{border-radius:50%;border-color:var(--pollen);background:var(--pollen)}
@media (min-width:900px){.stage-head{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:end}.stage-head .eyebrow,.stage-head h1{grid-column:1}.stage-lead,.legend{grid-column:2}.stage-lead{grid-row:2}.legend{grid-row:3}.stage h1{grid-row:2/4}}

.stage-body{display:grid;gap:1rem}
.tree-wrap{position:relative;background:var(--sheet);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
.tree-tools{display:flex;flex-wrap:wrap;gap:.4rem;padding:.7rem .8rem;border-bottom:1px solid var(--hair);background:linear-gradient(var(--sheet),var(--sheet))}
.tree-tools button{font:600 .8rem var(--sans);color:var(--ink);background:var(--bg);border:1px solid var(--hair);border-radius:99px;padding:.35rem .8rem;cursor:pointer}
.tree-tools button:hover{border-color:var(--ink)}
.tree-svg{display:none;overflow:auto;padding:.4rem 0;background-image:radial-gradient(var(--hair) 1px,transparent 1.2px);background-size:22px 22px}
.tree-svg svg{display:block;max-width:none}
.panel{background:var(--sheet);border:1px solid var(--hair);border-radius:var(--r);padding:1.1rem 1.2rem 1.3rem}
.panel[hidden]{display:none}
.panel-kicker{font:600 .72rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .3rem}
@media (max-width:899px){.tree-tools,.panel,.tree-svg{display:none!important}}
@media (min-width:900px){
  .stage-body{grid-template-columns:minmax(0,1fr) 350px;align-items:start}
  .js .tree-svg{display:block;height:calc(100vh - 150px);min-height:600px;max-height:980px}
  .js .tree-list{display:none}
  .panel{position:sticky;top:76px;max-height:calc(100vh - 92px);overflow:auto}
}

/* svg cladogram */
.clado{font-family:var(--sans)}
.clado .link{fill:none;stroke:var(--line);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.clado .link.on{stroke:var(--rust);stroke-width:2.6}
.clado .link-prod{stroke:var(--pollen);stroke-dasharray:3 4;stroke-width:1.6}
.clado .node{cursor:pointer;outline:none}
.clado .pill{fill:var(--bg);stroke:var(--hair)}
.clado .hit{fill:transparent}
.clado .node:hover .pill,.clado .node:hover .hit{fill:#e6ebf2}
.clado .node:focus-visible .pill,.clado .node:focus-visible .hit{stroke:var(--pollen);stroke-width:3}
.clado .shape{fill:var(--sheet);stroke:var(--ink);stroke-width:2}
.clado .rank-geslacht .shape{fill:var(--ink)}
.clado .shape-line{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.clado .lb-main{font-size:14px;font-weight:600;fill:var(--ink)}
.clado .lb-main.it{font-family:var(--serif);font-style:italic;font-weight:400;font-size:16px}
.clado .lb-sub{font-size:11.5px;fill:var(--muted)}
.clado .lb-count{font-size:11px;fill:var(--blue);font-weight:600}
.clado .on .pill{stroke:var(--rust)}
.clado .is-sel .pill,.clado .is-sel .hit{fill:var(--ink);stroke:var(--ink)}
.clado .is-sel .lb-main,.clado .is-sel .lb-sub{fill:#fff}
.clado .is-sel .shape{stroke:#fff;fill:var(--ink)}
.clado .is-sel .shape-line{stroke:#fff}
.clado .is-focus .pill{fill:#f8ece8;stroke:var(--rust)}
.clado .is-focus .shape{fill:var(--rust);stroke:var(--rust)}
.clado .is-focus.is-sel .pill{fill:var(--rust);stroke:var(--rust)}
.clado .is-focus.is-sel .shape{fill:#fff;stroke:#fff}
.clado .tog{cursor:pointer}
.clado .tog circle{fill:var(--sheet);stroke:var(--line);stroke-width:1.4}
.clado .tog line{stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}
.clado .tog:hover circle,.clado .tog:focus-visible circle{stroke:var(--ink);fill:var(--pollen)}
.clado .tog.is-closed circle{fill:var(--pollen);stroke:var(--ink)}
.clado .pleaf-ring{fill:var(--sheet);stroke:var(--pollen);stroke-width:3}
.clado .pl-name{font-size:12.5px;font-weight:600;fill:var(--ink)}
.clado .pl-price{font-size:11.5px;fill:var(--muted)}
.clado .pleaf:hover .pl-name,.clado .pleaf:focus .pl-name{fill:var(--blue);text-decoration:underline}
@media (prefers-reduced-motion:no-preference){
  .clado.anim .link{stroke-dasharray:1;stroke-dashoffset:1;animation:grow .7s ease-out forwards}
  .clado.anim .link-prod{stroke-dasharray:none;stroke-dashoffset:0;opacity:0;animation:fade .4s .5s forwards}
  .clado.anim .node,.clado.anim .pleaf{opacity:0;animation:fade .45s ease-out forwards}
  .clado.settled .link,.clado.settled .node,.clado.settled .pleaf{animation:none;opacity:1;stroke-dashoffset:0}
}
@keyframes grow{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}

/* nested list (no JS, mobile) */
.tree-list,.tl-kids{list-style:none;margin:0;padding:0}
.tree-list{padding:1rem .8rem 1rem .6rem}
.tl-kids{margin-left:1.05rem;padding-left:.9rem;border-left:2px solid var(--hair)}
.tl-item{position:relative;margin:.25rem 0}
.tl-kids>.tl-item::before{content:"";position:absolute;left:-.9rem;top:1.15rem;width:.75rem;border-top:2px solid var(--hair)}
.tl-node>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .5rem;padding:.45rem .7rem;border-radius:10px;font:600 .98rem/1.3 var(--sans)}
.tl-node>summary::-webkit-details-marker{display:none}
.tl-node>summary:hover{background:var(--bg)}
.tl-node[open]>summary{background:var(--bg)}
.tl-dot{width:11px;height:11px;border:2px solid var(--ink);border-radius:50%;background:var(--sheet);align-self:center}
.rank-familie>.tl-node .tl-dot{border-radius:2px}
.rank-onderfamilie>.tl-node .tl-dot,.rank-clade>.tl-node .tl-dot,.rank-groep>.tl-node .tl-dot,.rank-onderfamilies>.tl-node .tl-dot{transform:rotate(45deg);border-radius:1px}
.rank-geslacht>.tl-node .tl-dot{background:var(--ink)}
.is-focus>.tl-node .tl-dot{background:var(--rust);border-color:var(--rust)}
.is-focus>.tl-node>summary{color:var(--rust)}
.tl-latin{font:italic 400 .98rem var(--serif);color:var(--muted)}
.tl-node .card{margin:.4rem 0 .8rem .4rem;padding:1rem;border:1px solid var(--hair);border-radius:12px;background:var(--sheet)}

/* species card */
.card{font-size:1rem;line-height:1.55}
.card-rank{font:600 .72rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--rust);margin:0}
.card-title{font:400 1.7rem/1.1 var(--serif);margin:.15rem 0 .1rem}
.card-latin{font:italic 400 1.15rem var(--serif);color:var(--muted);margin:0}
.card-path{font:500 .78rem var(--sans);color:var(--muted);margin:.5rem 0 0}
.card-path span{color:var(--line);margin:0 .15rem}
.card-plate{margin:.9rem -.2rem .2rem;border-radius:10px;overflow:hidden;background:var(--bg)}
.card-plate img{display:block;width:100%}
.card-main{display:grid;grid-template-columns:96px minmax(0,1fr);gap:.9rem;margin-top:.9rem;align-items:start}
.card-main:not(:has(.card-leaf)){grid-template-columns:1fr}
.card-leaf{margin:0;text-align:center}
.card-leaf figcaption{font:500 .66rem/1.2 var(--sans);color:var(--muted);margin-top:.2rem}
.card-text p{margin:0 0 .7rem}
.card-facts{margin:0;display:grid;gap:.3rem}
.card-facts div{display:grid;grid-template-columns:5.6rem 1fr;gap:.6rem;border-top:1px solid var(--hair);padding-top:.3rem;font:400 .88rem/1.35 var(--sans)}
.card-facts dt{color:var(--muted)}
.card-facts dd{margin:0;font-weight:500}
.card-names{list-style:none;margin:1rem 0 0;padding:0;counter-reset:n}
.card-names li{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-top:1px dashed var(--hair)}
.card-names .nm{font:italic 1rem var(--serif)}
.card-names .nt{font:500 .8rem var(--sans);color:var(--muted);white-space:nowrap}
.card-label{font:600 .76rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:1.1rem 0 .5rem}
.card-foot{display:flex;flex-wrap:wrap;gap:.4rem 1rem;justify-content:space-between;margin:1rem 0 0;padding-top:.7rem;border-top:1px solid var(--hair);font:500 .82rem var(--sans);color:var(--muted)}
.card-more{font-weight:600}
.leafschema{width:96px;height:auto;overflow:visible}
.leafschema .ls-rachis{stroke:#3d5a3a;stroke-width:1.6;stroke-linecap:round}
.leafschema .ls-leaflet{fill:#6c8f5c}
.leafschema .ls-blade{fill:#6c8f5c;stroke:#3d5a3a;stroke-width:1.2}
.leafschema .ls-vein{fill:none;stroke:#e9efe4;stroke-width:1}

/* product leaf cards */
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin:1.6rem 0}
.products--panel{grid-template-columns:1fr;gap:1.2rem;margin:1.2rem 0 0}
.product-feature{margin:1.6rem 0}
.leafcard{position:relative;display:grid;grid-template-columns:84px minmax(0,1fr);gap:.8rem;align-items:center;padding:.7rem;background:var(--sheet);border:1px solid var(--hair);border-radius:16px 16px 16px 4px;color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s}
.leafcard:hover{border-color:var(--ink);transform:translateY(-2px)}
.leafcard-twig{position:absolute;left:-1px;top:-14px;width:22px;height:14px;border-left:2px solid var(--pollen);border-top:2px solid var(--pollen);border-radius:8px 0 0 0}
.leafcard-img{display:block;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--bg);border:3px solid var(--pollen)}
.leafcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.leafcard-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.leafcard-shop{font:600 .7rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.leafcard-name{font:600 .98rem/1.25 var(--sans)}
.leafcard-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem;margin-top:.25rem}
.leafcard-price{font:700 1.05rem var(--sans)}
.leafcard-go{font:600 .8rem var(--sans);color:#fff;background:var(--rust);padding:.3rem .7rem;border-radius:99px}
.leafcard:hover .leafcard-go{background:var(--ink)}
.leafcard--wide{grid-template-columns:112px minmax(0,1fr);padding:1rem;gap:1.1rem}
.leafcard--wide .leafcard-name{font-size:1.15rem}
.leafcard--wide .leafcard-go{font-size:.9rem;padding:.45rem .9rem}

/* home: branches + text */
.branches,.home-text{max-width:1480px;margin:0 auto;padding:clamp(2rem,5vw,3.5rem) clamp(1rem,3vw,2rem) 0}
.branches h2{font:400 clamp(1.6rem,3vw,2.2rem)/1.1 var(--serif);margin:0 0 1.2rem}
.branch-grid{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.branch-grid a{display:flex;flex-direction:column;gap:.45rem;height:100%;padding:1rem 1.1rem 1.15rem;background:var(--sheet);border:1px solid var(--hair);border-radius:var(--r);color:var(--ink);text-decoration:none;transition:border-color .2s}
.branch-grid a:hover{border-color:var(--ink)}
.bg-path{display:flex;flex-wrap:wrap;align-items:center;font:500 .74rem var(--sans);color:var(--muted)}
.bg-path span{display:inline-flex;align-items:center}
.bg-path span+span::before{content:"";width:18px;height:2px;background:var(--line);margin:0 .3rem}
.bg-path span:last-child{color:var(--rust);font-weight:650}
.bg-title{font:400 1.3rem/1.2 var(--serif)}
.bg-desc{font:400 .9rem/1.45 var(--sans);color:var(--muted)}
.home-text{display:grid;gap:2rem;padding-bottom:3rem}
@media (min-width:1000px){.home-text{grid-template-columns:minmax(0,1fr) 380px;align-items:start}.feature{position:sticky;top:90px}}
.feature{background:var(--ink);color:#fff;border-radius:var(--r);padding:1.2rem}
.feature-kicker{font:600 .74rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--pollen);margin:0 0 .8rem}
.feature .leafcard{grid-template-columns:110px minmax(0,1fr)}
.feature-note{font:400 .88rem/1.45 var(--sans);color:#d5dbe4;margin:.9rem 0 0}

/* prose */
.prose{max-width:70ch}
.prose h2{font:400 clamp(1.5rem,2.6vw,1.95rem)/1.18 var(--serif);margin:2.4rem 0 .7rem;scroll-margin-top:90px}
.prose h3{font:600 1.1rem var(--sans);margin:1.8rem 0 .5rem}
.prose p,.prose ul,.prose ol{margin:0 0 1.05rem}
.prose li{margin:.3rem 0}
.prose ul{padding-left:1.2rem}
.prose ul li::marker{color:var(--rust)}
.prose strong{font-weight:700}
.prose blockquote{margin:1.4rem 0;padding:.2rem 0 .2rem 1rem;border-left:3px solid var(--pollen)}
.prose figure{margin:1.6rem 0}
.prose figure img{border-radius:12px}
.table{overflow-x:auto;margin:1.4rem 0;background:var(--sheet);border:1px solid var(--hair);border-radius:12px}
.table table{border-collapse:collapse;width:100%;font:400 .9rem/1.4 var(--sans)}
.table th{text-align:left;font-weight:650;background:var(--bg);padding:.6rem .75rem;border-bottom:1px solid var(--hair);white-space:nowrap}
.table td{padding:.55rem .75rem;border-top:1px solid var(--hair);vertical-align:top}
.table td em{font-family:var(--serif);font-size:1.02rem}

/* article */
.article{max-width:1160px;margin:0 auto;padding:1.2rem clamp(1rem,3vw,2rem) 3rem}
.branch{overflow-x:auto;margin:0 0 1.6rem;padding:.9rem 1rem;background:var(--sheet);border:1px solid var(--hair);border-radius:var(--r)}
.branch ol{display:flex;align-items:flex-end;list-style:none;margin:0;padding:0;min-width:max-content}
.branch li{display:flex;align-items:flex-end}
.branch li+li::before{content:"";width:28px;height:2px;background:var(--line);margin:0 .2rem 9px}
.branch a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.45rem;align-items:center;text-decoration:none;color:var(--ink);padding:.15rem .3rem;border-radius:8px}
.branch a:hover{background:var(--bg)}
.b-dot{grid-row:2;width:12px;height:12px;border:2px solid var(--ink);border-radius:50%;background:var(--sheet)}
.branch .rank-familie .b-dot{border-radius:2px}
.branch .rank-onderfamilie .b-dot,.branch .rank-clade .b-dot,.branch .rank-groep .b-dot{transform:rotate(45deg);border-radius:1px}
.branch .rank-geslacht .b-dot{background:var(--ink)}
.b-rank{grid-column:2;font:600 .62rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.b-name{grid-column:2;grid-row:2;font:italic .98rem/1.2 var(--serif);white-space:nowrap}
.branch .is-here .b-dot{background:var(--rust);border-color:var(--rust);box-shadow:0 0 0 4px #f3d9d2}
.branch .is-here .b-name{color:var(--rust)}
.art-head{max-width:900px;margin-bottom:1.6rem}
.art-head h1{font:400 clamp(2rem,4.6vw,3.2rem)/1.08 var(--serif);margin:0 0 .8rem;letter-spacing:-.01em}
.art-lead{font:400 1.12rem/1.5 var(--sans);color:var(--muted);margin:0 0 .5rem;max-width:62ch}
.art-date{font:500 .82rem var(--sans);color:var(--muted);margin:0}
.art-grid{display:grid;gap:1.6rem}
.rail{display:grid;gap:1rem;align-content:start}
.rail-toc{background:var(--sheet);border:1px solid var(--hair);border-radius:var(--r);padding:.8rem 1rem}
.rail-toc summary{cursor:pointer;font:600 .76rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rail-toc ol{margin:.6rem 0 0;padding:0;list-style:none;border-left:2px solid var(--hair)}
.rail-toc li{margin:0}
.rail-toc a{display:block;padding:.3rem .7rem;font:500 .88rem/1.35 var(--sans);color:var(--ink);text-decoration:none;margin-left:-2px;border-left:2px solid transparent}
.rail-toc a:hover{border-left-color:var(--rust);color:var(--rust)}
.rail-node{background:var(--sheet);border:1px solid var(--hair);border-radius:var(--r);padding:1rem;display:grid;justify-items:start;gap:.2rem}
.rail-name{font:400 1.35rem/1.15 var(--serif);margin:0}
.leafschema--rail{width:110px;margin:.6rem 0}
.rail-link{font:600 .86rem var(--sans)}
@media (min-width:1000px){
  .art-grid{grid-template-columns:minmax(0,1fr) 290px;column-gap:3.5rem}
  .rail{position:sticky;top:84px;grid-row:1;grid-column:2}
  .prose{grid-column:1}
}
@media (max-width:999px){.rail{order:-1}.rail-node{display:none}.rail-toc:not([open]){padding-bottom:.8rem}}

/* footer */
.foot{margin-top:3rem;background:var(--ink);color:#d5dbe4}
.foot-inner{max-width:1480px;margin:0 auto;padding:2.2rem clamp(1rem,3vw,2rem) 2.6rem;display:grid;gap:1.4rem;font:400 .9rem/1.55 var(--sans)}
.foot-pub{display:flex;gap:1rem;align-items:center}
.foot-pub img{width:72px;height:auto;flex:none}
.foot-pub p{margin:0;color:#fff;font-size:1rem}
.foot a{color:#fff}
.foot-disc{margin:0;max-width:85ch}
.foot-nav{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;padding-top:1rem;border-top:1px solid #2a3542}
.foot-nav a{color:#d5dbe4;text-decoration:none}
.foot-nav a:hover{color:#fff;text-decoration:underline}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:599px){
  .tl-kids{margin-left:.55rem;padding-left:.55rem}
  .tl-kids>.tl-item::before{left:-.55rem;width:.45rem}
  .tree-list{padding:.6rem .4rem}
  .tl-node .card{margin-left:0;padding:.85rem}
  .card-main{grid-template-columns:1fr}
  .card-leaf{display:flex;align-items:center;gap:.6rem;text-align:left}
  .card-leaf .leafschema{width:70px}
  .card-title{font-size:1.45rem}
  .card-facts div{grid-template-columns:5rem 1fr}
  .leafcard{grid-template-columns:64px minmax(0,1fr)}
  .leafcard--wide{grid-template-columns:96px minmax(0,1fr)}
}
.prose figure img[src*="mascot"]{max-width:220px}
.art-grid>*,.home-text>*,.stage-body>*{min-width:0}