/* 01. Design tokens */
:root{--ink:#202224;--blue:#385DA8;--cyan:#4D9298;--orange:#D36F4C;--sand:#E5BD6A;--paper:#FAF7EE;--mist:#E7ECEC;--graphite:#34383A;--zinc:#727A7D;--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;--container:1200px;--space:clamp(3.5rem,8vw,8rem);--radius:3px;--border:1px solid rgba(32,34,36,.18);--shadow:0 12px 28px rgba(32,34,36,.08);--transition:180ms ease}
/* 02. Reset */
*{box-sizing:border-box}html{scroll-behavior:smooth}body,h1,h2,h3,p,ul,ol{margin:0}ul,ol{padding:0;list-style:none}button,input{font:inherit}img{max-width:100%;display:block}a{color:inherit}
/* 03. Base */
body{background:var(--paper);color:var(--ink);font:16px/1.65 var(--font-sans)}.container{width:min(calc(100% - 3rem),var(--container));margin:auto}.section{padding:var(--space) 0}.cool{background:var(--mist)}.eyebrow,.marker{font:700 .69rem/1.2 var(--font-mono);letter-spacing:.13em;color:var(--cyan)}.section h2,.pattern-strip h2,.final-cta h2{font:400 clamp(2rem,4vw,3.7rem)/1.08 var(--font-editorial);max-width:850px;letter-spacing:-.035em;margin:1rem 0 1.2rem}.section-intro{max-width:700px;color:var(--graphite);font-size:1.08rem}.button{display:inline-block;padding:.8rem 1.15rem;background:var(--ink);color:var(--white);text-decoration:none;border:1px solid var(--ink);font-weight:700}.button:hover{background:var(--blue);border-color:var(--blue)}.text-link{font-weight:700;text-decoration-thickness:1px;text-underline-offset:4px}.actions{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
/* 04. Accessibility */
.skip-link{position:fixed;z-index:99;top:-5rem;left:1rem;background:var(--sand);padding:.7rem;color:var(--ink);font-weight:700}.skip-link:focus{top:1rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
/* 05. Typography */
h3{font:400 1.45rem/1.16 var(--font-editorial);letter-spacing:-.02em}.micro{font:700 .7rem var(--font-mono);letter-spacing:.1em;color:var(--zinc);margin-top:3rem}
/* 06. Layout */
.section-intro+.lens-grid,.section-intro+.contact-note{margin-top:3rem}
/* 07. Header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(250,247,238,.95);border-bottom:var(--border);backdrop-filter:blur(8px)}.header-inner{height:75px;display:flex;align-items:center;justify-content:space-between;gap:1rem}.brand{width:270px}.site-header nav{display:flex;align-items:center;gap:1.15rem;font-size:.84rem}.site-header nav a{text-decoration:none}.nav-cta{border:1px solid var(--ink);padding:.5rem .7rem;font-weight:700}.menu-toggle{display:none;border:0;background:transparent;width:42px;padding:8px}.menu-toggle span{display:block;height:2px;background:var(--ink);margin:5px}
/* 08. Hero */
.hero{padding:clamp(4rem,8vw,8rem) 0 4rem}.hero-grid{display:grid;grid-template-columns:48% 52%;gap:2rem;align-items:center}.hero h1{font:400 clamp(2.8rem,5vw,5.3rem)/.98 var(--font-editorial);letter-spacing:-.055em;margin:1rem 0 1.6rem}.hero h1 em{font-style:normal;color:var(--blue);text-decoration:underline;text-decoration-color:var(--sand);text-underline-offset:.12em}.lede{max-width:620px;font-size:1.13rem;margin-bottom:2rem}
/* 09. Pattern columns */
.pattern-composition{padding:1rem}.composition-title{font:700 .67rem var(--font-mono);letter-spacing:.13em;margin-bottom:1rem}.pattern-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.p-column{min-height:360px;padding:1rem;border:var(--border);background:var(--white);position:relative;overflow:hidden}.p-column h2{font:400 1.25rem var(--font-editorial);margin:.8rem 0}.p-column>p{position:absolute;bottom:1rem;font-size:.77rem;line-height:1.4}.word-grid{display:grid;gap:6px}.word-grid b{font:500 .7rem var(--font-mono);background:var(--mist);padding:.45rem}.word-grid b:nth-child(2),.word-grid b:nth-child(4){margin-left:12px;background:#dcecef}.peaks{height:100px;display:flex;align-items:end;border-bottom:1px solid var(--zinc);gap:7px}.peaks i{width:16%;background:var(--cyan);clip-path:polygon(0 100%,40% 38%,55% 13%,70% 38%,100% 100%)}.peaks i:nth-child(2){height:75%}.peaks i:nth-child(3){height:45%;background:var(--orange)}.peaks i:nth-child(4){height:90%;background:var(--blue)}.peaks i:nth-child(5){height:55%}.p-column ul{margin-top:1rem;font:.65rem/1.85 var(--font-mono);color:var(--zinc)}.node-map{height:110px;position:relative;background:linear-gradient(145deg,transparent 48%,var(--zinc) 49%,var(--zinc) 50%,transparent 51%)}.node-map i{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--blue);border:2px solid var(--white)}.node-map i:nth-child(1){top:18px;left:12px}.node-map i:nth-child(2){top:42px;left:44px;background:var(--cyan)}.node-map i:nth-child(3){top:16px;right:15px;background:var(--orange)}.node-map i:nth-child(4){bottom:15px;right:25px}.node-map i:nth-child(5){bottom:28px;left:18px;background:var(--sand)}.pattern-footer{margin-top:10px;display:flex;align-items:center;gap:.7rem;font:.64rem var(--font-mono);letter-spacing:.08em}.pattern-footer img{width:35px}.pattern-footer span{color:var(--zinc)}
/* 10. Pattern strip */
.pattern-strip{background:var(--ink);color:var(--white);padding:3rem 0}.pattern-strip .eyebrow{color:var(--sand)}.pattern-strip>div>div{display:grid;grid-template-columns:1.15fr 1fr;gap:3rem;align-items:end}.pattern-strip h2{margin:0}.pattern-strip ul{display:grid;grid-template-columns:1fr 1fr;gap:1px}.pattern-strip li{padding:.7rem;border-top:1px solid #555;font:.72rem var(--font-mono);color:#d9dfdf}
/* 11. Pattern lenses */
.lens-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:3rem;background:var(--zinc)}.lens{background:var(--paper);padding:1.25rem;min-height:360px}.lens>span,.principles span{font:.75rem var(--font-mono);color:var(--orange)}.lens h3{margin:3.5rem 0 1rem}.lens p{font-size:.91rem}.lens ul{margin-top:1.4rem}.lens li{border-top:var(--border);padding:.35rem 0;font:.69rem var(--font-mono)}
/* 12. Translations */
.translations{margin-top:3rem;border-top:var(--border)}.translation{display:grid;grid-template-columns:250px 1fr 270px;gap:2rem;align-items:center;padding:2rem 0;border-bottom:var(--border)}.translation div{display:flex;align-items:center;gap:.5rem;font:.75rem var(--font-mono);letter-spacing:.08em}.translation div span:last-child{color:var(--blue)}.translation div b{font-size:1.6rem;color:var(--orange)}.translation h3{font-size:1.5rem}.translation p{font:.7rem/1.6 var(--font-mono);color:var(--zinc)}
/* 13. Study method */
.method-wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:5rem}.method{margin-top:3rem;border-left:1px solid var(--zinc)}.method li{display:flex;gap:1.2rem;width:72%;padding:0 0 2.3rem 2rem;position:relative}.method li:nth-child(even){margin-left:auto}.method li>span{font:.72rem var(--font-mono);color:var(--orange)}.method b{font:.75rem var(--font-mono);letter-spacing:.1em}.method p{margin-top:.35rem}.checklist{align-self:center;background:var(--mist);padding:2rem;border-top:4px solid var(--cyan)}.checklist h3{margin:1rem 0}.checklist li{padding:.55rem 0;border-top:var(--border);font-size:.87rem}
/* 14. Researchers */
.contact-note{padding:1rem;border-left:3px solid var(--sand);background:var(--paper);max-width:900px}.researcher-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--zinc);margin-top:3rem}.researcher{background:var(--white);padding:1.3rem;font-size:.86rem}.identity{display:flex;justify-content:space-between;align-items:center}.identity span{display:grid;place-items:center;width:44px;height:44px;background:var(--ink);color:var(--sand);font:700 .8rem var(--font-mono)}.identity small{font:.67rem var(--font-mono);color:var(--zinc)}.status{font:700 .65rem var(--font-mono);letter-spacing:.08em;color:var(--blue);margin:1.3rem 0 .5rem}.status.reference{color:var(--cyan)}.researcher h3{margin-bottom:.7rem}.institution{color:var(--zinc);font-size:.8rem}.researcher p{margin-top:.9rem}.researcher .tags,.orcid{font:.66rem/1.55 var(--font-mono);color:var(--zinc)}.researcher a{display:block;margin-top:1.2rem;color:var(--blue);font-size:.75rem;overflow-wrap:anywhere}.copy-email{margin-top:.5rem;padding:.4rem .6rem;border:1px solid var(--ink);background:transparent;font-size:.72rem;font-weight:700;cursor:pointer}
/* 15. Independence note */
.boundary{background:var(--ink);color:var(--white)}.boundary .eyebrow{color:var(--sand)}.boundary-copy{max-width:810px;columns:3;gap:2rem}.boundary-copy p{break-inside:avoid;margin-bottom:1rem}
/* 16. Pattern cards */
.cards-section{background:var(--paper)}.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}.pattern-card{background:var(--white);border:var(--border);padding:1.25rem}.pattern-card summary{cursor:pointer;list-style:none}.pattern-card summary::-webkit-details-marker{display:none}.pattern-card summary span{font:.67rem var(--font-mono);color:var(--cyan);letter-spacing:.08em}.pattern-card h3{margin:.55rem 0}.pattern-card summary p{color:var(--graphite);font-size:.9rem}.pattern-card details>p{margin-top:1rem;font-size:.9rem}.pattern-card .tags{font:.68rem var(--font-mono);color:var(--zinc)}
/* 17. Search */
.search-row{margin-top:2.2rem;display:grid;grid-template-columns:180px 1fr auto;align-items:center;gap:1rem;padding:1.2rem 0;border-top:var(--border);border-bottom:var(--border)}.search-row label{font-weight:700}.search-row div{display:flex;gap:.5rem}.search-row input{width:100%;border:1px solid var(--zinc);padding:.75rem;background:var(--white)}.search-row button{border:1px solid var(--ink);background:transparent;padding:.5rem .7rem;white-space:nowrap;cursor:pointer}.search-row p{font:.72rem var(--font-mono);white-space:nowrap}#no-results{padding:2rem 0;font:1.2rem var(--font-editorial)}
/* 18. About */
.about-text{max-width:850px;font-size:1.05rem}.about-text p{margin-top:1rem}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:4rem}.principles article{border-top:3px solid var(--blue);padding-top:1rem}.principles h3{margin:.8rem 0}
/* 19. Final CTA */
.final-cta{padding:var(--space) 0;background:var(--sand)}.final-cta h2{max-width:700px}.final-cta>div>p:not(.eyebrow){max-width:650px;margin-bottom:2rem}
/* 20. Footer */
footer{background:var(--ink);color:var(--white);padding:3rem 0}footer img{width:45px}footer h2{font:400 1.7rem var(--font-editorial);margin-top:.8rem}footer p,footer small{color:#c6cdce;font-size:.8rem}footer nav{display:grid;grid-template-columns:repeat(2,auto);gap:.5rem 2rem}footer nav a,#back-top{font-size:.8rem}#back-top{color:var(--sand);display:inline-block;margin-bottom:2rem}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:2rem}
/* 21. Reveal states */
.reveal{opacity:1;transform:none}.js-enabled .reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.js-enabled .reveal.is-visible{opacity:1;transform:none}
/* 22. Responsive */
@media(max-width:900px){.hero-grid,.method-wrap{grid-template-columns:1fr}.lens-grid{grid-template-columns:1fr 1fr}.researcher-grid{grid-template-columns:1fr 1fr}.translation{grid-template-columns:1fr;gap:.8rem}.boundary-copy{columns:1}.method-wrap{gap:2rem}.checklist{max-width:600px}.site-header nav{position:absolute;top:75px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;background:var(--paper);border-bottom:var(--border);padding:1rem 1.5rem}.site-header nav.open{display:flex}.menu-toggle{display:block}.site-header nav a{padding:.4rem}.nav-cta{text-align:center;margin-top:.4rem}.hero{padding-top:4rem}.pattern-columns{max-width:650px}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.container{width:min(calc(100% - 2rem),var(--container))}.brand{width:205px}.hero h1{font-size:2.7rem}.pattern-columns{grid-template-columns:1fr}.p-column{min-height:250px}.pattern-strip>div>div,.card-grid,.principles,.footer-grid{grid-template-columns:1fr}.pattern-strip ul{grid-template-columns:1fr}.lens-grid,.researcher-grid{grid-template-columns:1fr}.lens{min-height:0}.translation{padding:1.5rem 0}.method li,.method li:nth-child(even){width:100%;margin-left:0;padding-left:1rem}.search-row{grid-template-columns:1fr}.search-row div{flex-direction:column}.section h2,.pattern-strip h2,.final-cta h2{font-size:2.25rem}footer nav{grid-template-columns:1fr}.pattern-footer{flex-wrap:wrap}}
/* 23. Reduced motion */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js-enabled .reveal{opacity:1;transform:none;transition:none}}