/* 01. Design tokens */
:root{--forest:#20312d;--blue:#496d85;--orchid:#786989;--moss:#73865f;--red:#b85c55;--gold:#c9a653;--shell:#fbf7ee;--water:#e5eef0;--moss-mist:#e8ede3;--orchid-mist:#ece8ef;--red-mist:#f2e5e2;--graphite:#343a3a;--muted:#777e7c;--white:#fff;--font-editorial:Georgia,Cambria,"Times New Roman",Times,serif;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;--fs-sm:clamp(.75rem,.7rem + .2vw,.86rem);--fs-body:clamp(.97rem,.92rem + .2vw,1.08rem);--fs-h3:clamp(1.25rem,1.05rem + .7vw,1.7rem);--fs-h2:clamp(2rem,1.55rem + 2vw,3.5rem);--fs-h1:clamp(3rem,2rem + 4.2vw,6.5rem);--space-1:.5rem;--space-2:1rem;--space-3:1.5rem;--space-4:2rem;--space-5:3rem;--space-6:clamp(4.5rem,8vw,8rem);--container:1200px;--border:1px solid rgba(32,49,45,.19);--radius:10px;--radius-lg:22px;--shadow:0 18px 45px rgba(32,49,45,.09);--transition:220ms ease}
/* 02. Reset */
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:auto}body,h1,h2,h3,p,ul{margin:0}ul{padding:0}img{display:block;max-width:100%}button,input{font:inherit}a{color:inherit}
/* 03. Base */
html{background:var(--shell);scroll-padding-top:90px}body{background:var(--shell);color:var(--graphite);font:var(--fs-body)/1.65 var(--font-sans);overflow-x:hidden}::selection{background:var(--gold);color:var(--forest)}
/* 04. Accessibility */
.skip-link{position:fixed;z-index:1000;top:.5rem;left:.5rem;padding:.75rem 1rem;background:var(--gold);color:var(--forest);transform:translateY(-150%)}.skip-link:focus{transform:none}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
/* 05. Typography */
h1,h2,h3{color:var(--forest);font-family:var(--font-editorial);font-weight:400;line-height:1.08;text-wrap:balance}h1{font-size:var(--fs-h1);letter-spacing:-.045em}h1 em{color:var(--orchid);font-weight:400}h2{font-size:var(--fs-h2);letter-spacing:-.025em}h3{font-size:var(--fs-h3)}p{max-width:72ch}.eyebrow,.technical,.number,.micro-label,.orcid{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:700;letter-spacing:.11em;text-transform:uppercase}.eyebrow{color:var(--orchid);margin-bottom:var(--space-2)}.lead{font-size:clamp(1.08rem,1rem + .4vw,1.3rem)}
/* 06. Global layout */
.container{width:min(calc(100% - 2.5rem),var(--container));margin-inline:auto}.section{padding:var(--space-6) 0}.section-heading{display:grid;gap:var(--space-2);max-width:850px;margin-bottom:var(--space-5)}.button-row{display:flex;align-items:center;flex-wrap:wrap;gap:1.5rem}.button{display:inline-flex;justify-content:center;align-items:center;padding:.85rem 1.25rem;border:1px solid var(--forest);border-radius:3rem;background:var(--forest);color:var(--white);font-size:.9rem;font-weight:700;text-decoration:none;transition:background var(--transition),transform var(--transition)}.button:hover{background:var(--orchid);transform:translateY(-2px)}.button-small{padding:.62rem 1rem}.text-link{font-weight:700;text-underline-offset:.3em}.tags{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none}.tags li{border:1px solid currentColor;border-radius:2rem;padding:.2rem .55rem;font-family:var(--font-mono);font-size:.69rem;text-transform:uppercase}
/* 07. Header */
.site-header{position:sticky;z-index:100;top:0;border-bottom:1px solid rgba(32,49,45,.15);background:rgba(251,247,238,.96)}.header-inner{display:flex;min-height:78px;align-items:center;justify-content:space-between;gap:2rem}.brand{flex:0 0 225px}.primary-nav{display:flex;align-items:center;gap:clamp(.7rem,1.4vw,1.4rem)}.primary-nav>a:not(.button){font-size:.81rem;font-weight:700;text-decoration:none}.primary-nav>a:hover:not(.button){color:var(--orchid)}.menu-toggle{display:none;width:44px;height:44px;border:0;background:transparent}.menu-toggle span{display:block;width:24px;height:2px;margin:5px auto;background:var(--forest)}
/* 08. Hero */
.hero{padding:clamp(3.5rem,7vw,7rem) 0;background-image:linear-gradient(rgba(32,49,45,.055) 1px,transparent 1px);background-size:100% 44px}.hero-grid{display:grid;grid-template-columns:1.13fr .87fr;align-items:center;gap:clamp(2rem,6vw,6rem)}.hero-copy{display:grid;gap:1.7rem}.hero-copy .micro-label{padding-top:1.5rem;border-top:var(--border);color:var(--muted)}
/* 09. Sectional layers */
.section-view{position:relative;border:1px solid var(--forest);border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow);overflow:hidden}.section-view-head,.section-view-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;background:var(--forest);color:var(--white);font:700 .68rem var(--font-mono);letter-spacing:.1em}.section-view-foot{display:block}.section-view-foot small{display:block;margin-top:.4rem;color:#cbd3d0;font-family:var(--font-sans);font-weight:400;letter-spacing:0}.section-layer{position:relative;min-height:220px;padding:1.2rem 2.5rem 1.2rem 5.3rem;border-bottom:1px solid rgba(32,49,45,.18);overflow:hidden}.section-layer h2{position:relative;margin-top:4.6rem;font-size:1.04rem;font-family:var(--font-sans);font-weight:700;line-height:1.35}.section-layer p{position:relative;margin-top:.45rem;font-size:.79rem;line-height:1.45}.community-layer{background:var(--moss-mist)}.image-layer{background:var(--water)}.current-layer{background:var(--red-mist)}.scale-line{position:absolute;z-index:4;top:58px;bottom:90px;left:2.2rem;display:flex;flex-direction:column;align-items:center}.scale-line i{height:100%;border-left:1px dashed var(--forest)}.scale-line span{writing-mode:vertical-rl;font:700 .55rem var(--font-mono);letter-spacing:.1em}.scale-line b{position:absolute;left:-.8rem;writing-mode:vertical-rl;font:700 .5rem var(--font-mono);color:var(--muted)}.scale-line b:nth-of-type(1){top:15%}.scale-line b:nth-of-type(2){top:49%}.scale-line b:nth-of-type(3){top:82%}.interface-label{position:absolute;z-index:5;right:0;padding:.2rem .45rem;background:var(--forest);color:white;font:700 .52rem var(--font-mono);letter-spacing:.08em}.i-one{top:35%}.i-two{top:65%}
.root-visual,.contour-visual,.membrane-visual{position:absolute;inset:2.8rem 1.2rem auto 4.8rem;height:85px;opacity:.7}.root-visual i{position:absolute;top:4px;left:var(--x,20%);width:2px;height:70px;background:var(--moss);transform:rotate(var(--r,18deg));transform-origin:top}.root-visual i::after{content:"";position:absolute;top:28px;left:0;width:28px;border-top:2px solid var(--moss);transform:rotate(35deg)}.root-visual i:nth-child(2){--x:38%;--r:-15deg}.root-visual i:nth-child(3){--x:57%;--r:27deg}.root-visual i:nth-child(4){--x:73%;--r:-22deg}.root-visual i:nth-child(5){--x:86%;--r:9deg}.root-visual i::before{content:"";position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--gold)}.contour-visual i{position:absolute;inset:5px 20%;border:2px solid var(--blue);border-radius:45% 55% 40% 60%}.contour-visual i:nth-child(2){inset:17px 28%;border-radius:60% 40%}.contour-visual i:nth-child(3){inset:29px 38%;background:rgba(73,109,133,.24)}.membrane-visual i{position:absolute;left:3%;right:3%;top:25px;border-top:5px double var(--red)}.membrane-visual i:nth-child(2){top:55px}.membrane-visual b{position:absolute;left:38%;top:16px;width:22px;height:50px;border:4px solid var(--forest);border-block:0}.membrane-visual b:nth-of-type(2){left:68%}.particle{position:absolute;left:45%;width:6px;height:6px;border-radius:50%;background:var(--gold)}.p1{top:5px}.p2{top:35px}.p3{top:71px}.layer-window{position:absolute;right:2%;top:5px;border:2px solid currentColor;padding:.25rem .4rem;background:var(--shell);font:700 .55rem var(--font-mono);letter-spacing:.1em}
/* 10. Layer windows */
.view-block,.profile,.sheet{position:relative;border-top:3px solid var(--accent);background:var(--white)}.ecology{--accent:var(--moss)}.imaging{--accent:var(--blue)}.current{--accent:var(--red)}.method{--accent:var(--orchid)}
/* 11. Cross-scale band */
.cross-band{padding:var(--space-5) 0;background:var(--forest);color:var(--white)}.cross-band .eyebrow{color:var(--gold)}.cross-band h2{max-width:850px;color:var(--white)}.statements{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:var(--space-4);border-block:1px solid rgba(255,255,255,.25)}.statements p{padding:1.2rem;border-right:1px solid rgba(255,255,255,.25);font-family:var(--font-editorial);font-size:1.1rem}.statements p:last-child{border-right:0}
/* 12. Layer views */
.view-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(32,49,45,.2);border:var(--border)}.view-block{min-height:430px;padding:1.6rem}.view-block .number{display:block;color:var(--accent)}.view-block .technical{display:block;margin:4.5rem 0 .6rem;color:var(--accent)}.view-block p{margin:1rem 0}.view-block ul{display:grid;gap:.35rem;padding-left:1.1rem;font-size:.82rem}
/* 13. Interfaces */
.interfaces{background:var(--white)}.interface-study{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;gap:2rem;padding:2.4rem 0;border-top:3px solid var(--accent)}.interface-study h3{margin:.4rem 0 1rem}.question{font-weight:700}.interface-map{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-align:center;font:700 .67rem var(--font-mono);letter-spacing:.08em}.interface-map b{z-index:1;padding:.85rem .65rem;border:2px solid var(--accent);background:var(--white);color:var(--accent)}.interface-map span{padding:.8rem;border-block:1px solid var(--accent)}.interface-study .tags{margin-top:1rem;color:var(--accent)}
/* 14. Scale method */
.scale-method{background:var(--orchid-mist)}.method-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(120,105,137,.35)}.method-grid::after{content:"SCALE";position:absolute;top:0;bottom:0;left:50%;border-left:1px dashed var(--orchid);writing-mode:vertical-rl;font:700 .6rem var(--font-mono);letter-spacing:.15em}.method-grid article{min-height:210px;padding:2rem 2.5rem;background:var(--shell)}.method-grid article span{font:700 .75rem var(--font-mono);color:var(--orchid)}.method-grid h3{margin:2rem 0 .5rem;font-family:var(--font-sans);font-size:1rem;font-weight:800;letter-spacing:.08em}
/* 15. Scale checklist */
.checklist{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;margin-top:var(--space-5);padding:clamp(2rem,5vw,4rem);border:1px solid var(--orchid);background:var(--white)}.checklist h3{margin-top:1rem}.checklist ul{columns:2;column-gap:3rem;padding-left:1.2rem}.checklist li{break-inside:avoid;margin-bottom:.7rem}
/* 16. Researchers */
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}.profile{display:flex;flex-direction:column;padding:1.5rem;border-inline:var(--border);border-bottom:var(--border)}.profile:nth-child(even){background:color-mix(in srgb,var(--accent) 8%,white)}.profile header{display:flex;gap:1rem;align-items:flex-start}.avatar{display:grid;flex:0 0 52px;aspect-ratio:1;place-items:center;background:var(--accent);color:white;font:700 .85rem var(--font-mono)}.profile header p{font-size:.73rem;line-height:1.4}.profile .role{margin:1.3rem 0 .7rem;font-weight:800}.profile>p:not(.role,.orcid,.reference-label){font-size:.88rem}.profile .tags{margin:1rem 0;color:var(--accent)}.orcid{margin-top:auto;padding-top:1rem;color:var(--muted)}.contact{display:grid;gap:.5rem;margin-top:1rem;padding:1rem;border:1px solid var(--accent);font-size:.8rem}.contact>span:first-child,.reference-label{font:700 .68rem var(--font-mono);letter-spacing:.09em;text-transform:uppercase}.contact a{overflow-wrap:anywhere}.copy-email{justify-self:start;border:0;border-bottom:1px solid currentColor;background:none;padding:.2rem 0;cursor:pointer;font-weight:700}.copy-status{min-height:1em;color:var(--moss)}.reference-label{margin-top:1rem;padding:1rem;background:var(--accent);color:white}
/* 17. Independence note */
.independence{padding:var(--space-5) 0;background:var(--forest);color:#dbe1df}.independence .container{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem}.independence .eyebrow{grid-column:1/-1;color:var(--gold)}.independence h2{color:white}
/* 18. Study sheets */
.study-sheets{background:var(--water)}.sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.sheet{border-inline:var(--border);border-bottom:var(--border)}.sheet details{height:100%}.sheet summary{display:grid;gap:.75rem;min-height:230px;padding:1.5rem;cursor:pointer;list-style:none}.sheet summary::-webkit-details-marker{display:none}.sheet summary::after{content:"+";position:absolute;top:1rem;right:1rem;color:var(--accent);font-size:1.6rem}.sheet details[open] summary::after{content:"−"}.sheet summary span{color:var(--accent);font:700 .7rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.sheet summary strong{max-width:28ch;color:var(--forest);font:400 var(--fs-h3)/1.15 var(--font-editorial)}.sheet summary small{align-self:end;font-size:.88rem}.sheet details>div{padding:0 1.5rem 1.5rem}.sheet .tags{margin-top:1rem;color:var(--accent)}
/* 19. Search */
.search-panel{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.5rem;margin-bottom:2rem;padding:1.3rem;border-block:1px solid var(--blue)}.search-panel label{font-weight:800}.search-row{display:flex}.search-row input{width:100%;border:1px solid var(--forest);border-radius:0;background:white;padding:.8rem}.search-row button{border:1px solid var(--forest);border-left:0;background:var(--forest);color:white;padding:.8rem;cursor:pointer}.search-panel>p{font-family:var(--font-mono);white-space:nowrap}.no-results{padding:3rem;text-align:center;font-family:var(--editorial);font-size:1.4rem}.sheet[hidden]{display:none}
/* 20. About */
.about-copy{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem 3rem;max-width:920px}.principles{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--space-5);border-block:var(--border)}.principles article{padding:2rem;border-right:var(--border)}.principles article:last-child{border-right:0}.principles span{font:700 .75rem var(--font-mono);color:var(--orchid)}.principles h3{margin:3rem 0 1rem}
/* 21. Final CTA */
.final-cta{position:relative;display:grid;min-height:650px;place-items:center;padding:5rem 1.25rem;overflow:hidden}.wide-layer{position:absolute;left:-8%;width:116%;height:28%;transform:rotate(-2deg)}.l1{top:9%;background:var(--moss-mist)}.l2{top:36%;left:-4%;background:var(--water);transform:rotate(1.5deg)}.l3{top:64%;left:-10%;background:var(--red-mist);transform:rotate(-1deg)}.cta-window{z-index:2;width:min(700px,100%);padding:clamp(2rem,5vw,4rem);border:2px solid var(--forest);background:var(--shell);box-shadow:var(--shadow)}.cta-window h2{margin-bottom:1.5rem}.cta-window .button-row{margin-top:2rem}
/* 22. Footer */
.site-footer{padding:4rem 0 1rem;background:var(--forest);color:#d5ddda}.footer-grid{display:grid;grid-template-columns:2fr 1fr auto;gap:3rem}.site-footer h2{margin:.8rem 0;color:white;font-size:2rem}.site-footer nav{display:grid;gap:.45rem}.site-footer a{color:white;text-underline-offset:.3em}.back-top{align-self:start}.copyright{margin-top:3rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.2);font-size:.8rem}
/* 23. Reveal states */
.reveal{opacity:1;transform:none}.js-enabled .reveal{opacity:0;transform:translateY(22px);transition:opacity 650ms ease,transform 650ms ease}.js-enabled .reveal.is-visible{opacity:1;transform:none}.back-top{opacity:.55;transition:opacity var(--transition)}.back-top.is-prominent{opacity:1}
/* 24. Responsive */
@media(max-width:1050px){.menu-toggle{display:block}.primary-nav{position:absolute;top:100%;left:0;right:0;display:none;align-items:stretch;padding:1.2rem;background:var(--shell);border-bottom:1px solid var(--forest);box-shadow:var(--shadow)}.primary-nav.is-open{display:grid}.primary-nav a{padding:.45rem}.hero-grid{grid-template-columns:1fr 1fr;gap:2rem}.section-layer{padding-right:1.5rem}.view-grid{grid-template-columns:1fr 1fr}.profile-grid{grid-template-columns:1fr 1fr}.interface-study{grid-template-columns:1fr 1fr}.interface-study>div:last-child{grid-column:1/-1}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.container{width:min(calc(100% - 2rem),var(--container))}.brand{flex-basis:205px}.hero-grid{grid-template-columns:1fr}.section-view{margin-top:1rem}.statements{grid-template-columns:1fr}.statements p{border-right:0;border-bottom:1px solid rgba(255,255,255,.25)}.view-grid,.profile-grid,.sheet-grid{grid-template-columns:1fr}.interface-study{grid-template-columns:1fr;padding-block:2rem}.interface-study>div:last-child{grid-column:auto}.method-grid{grid-template-columns:1fr}.method-grid::after{display:none}.checklist{grid-template-columns:1fr}.checklist ul{columns:1}.independence .container{grid-template-columns:1fr}.search-panel{grid-template-columns:1fr;gap:.7rem}.about-copy,.principles{grid-template-columns:1fr}.principles article{border-right:0;border-bottom:var(--border)}.footer-grid{grid-template-columns:1fr}.final-cta{min-height:580px}}
@media(max-width:420px){.header-inner{min-height:68px}.brand{flex-basis:175px}.hero{padding-top:3rem}.section-layer{min-height:245px;padding-left:4rem}.root-visual,.contour-visual,.membrane-visual{left:-1rem}.scale-line{left:1.3rem}.section-layer h2{margin-top:4.7rem}.interface-map{grid-template-columns:1fr}.interface-map span{border:1px solid var(--accent)}.view-grid{border:0}.view-block{min-height:auto}.view-block .technical{margin-top:2rem}.search-row{display:grid}.search-row button{border:1px solid var(--forest);border-top:0}.cta-window{padding:1.5rem}}
/* 25. Reduced motion */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.js-enabled .reveal{opacity:1;transform:none}}