/* 01. Design tokens */
:root{--ink:#1f2b38;--cobalt:#426c9a;--viridian:#3f7c70;--madder:#a9575e;--amber:#d5a642;--ivory:#faf6ec;--blue-paper:#e5edf3;--mint:#e3eeea;--blush:#f0e4e3;--charcoal:#343a40;--slate:#788087;--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;--step--1:clamp(.78rem,.74rem + .15vw,.88rem);--step-0:clamp(.98rem,.93rem + .2vw,1.08rem);--step-1:clamp(1.25rem,1.08rem + .7vw,1.65rem);--step-2:clamp(1.8rem,1.4rem + 1.5vw,2.7rem);--step-3:clamp(2.55rem,1.85rem + 2.6vw,4.4rem);--space-1:.5rem;--space-2:1rem;--space-3:1.5rem;--space-4:2.25rem;--space-5:clamp(3.5rem,7vw,7rem);--container:1200px;--border:1px solid rgba(31,43,56,.18);--radius:12px;--shadow:0 16px 40px rgba(31,43,56,.08);--transition:220ms ease}
/* 02. Reset */
*,*::before,*::after{box-sizing:border-box}html{scroll-padding-top:80px}body,h1,h2,h3,p,ul{margin:0}body{min-width:320px}img,svg{display:block;max-width:100%}button,input{font:inherit}a{color:inherit}ul{padding:0;list-style:none}
/* 03. Base */
body{background:var(--ivory);color:var(--charcoal);font-family:var(--font-sans);font-size:var(--step-0);line-height:1.65}::selection{background:var(--amber);color:var(--ink)}
/* 04. Accessibility */
.skip-link{position:fixed;z-index:1000;top:.5rem;left:.5rem;transform:translateY(-150%);padding:.75rem 1rem;background:var(--white);color:var(--ink)}.skip-link:focus{transform:none}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
/* 05. Typography */
h1,h2,h3{color:var(--ink);font-family:var(--font-editorial);font-weight:400;line-height:1.08}h1{font-size:var(--step-3);letter-spacing:-.035em}h2{font-size:var(--step-2);letter-spacing:-.02em}h3{font-size:var(--step-1)}h1 em{color:var(--madder);font-style:italic}.eyebrow,.micro,.mode>span,.mapping-row span,.profile-top>span:last-child,.case-entry>span{font:700 var(--step--1)/1.2 var(--font-mono);letter-spacing:.12em}.eyebrow{color:var(--viridian);margin-bottom:1rem}.lead{font-size:1.12rem;max-width:58ch}.tags,.keywords,.orcid{font-family:var(--font-mono);font-size:.76rem}
/* 06. Global layout */
.container{width:min(calc(100% - 2rem),var(--container));margin-inline:auto}.section{padding-block:var(--space-5)}.section-head{display:grid;gap:1.25rem;max-width:820px;margin-bottom:3.25rem}.section-head>p:not(.eyebrow){max-width:72ch}.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-block:2rem}.button{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.1rem;border:1px solid var(--ink);text-decoration:none;font-size:.88rem;font-weight:700;transition:var(--transition)}.button.primary{background:var(--ink);color:var(--white)}.button.secondary{background:transparent}.button:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
/* 07. Header */
.site-header{position:sticky;z-index:100;top:0;background:rgba(250,246,236,.96);border-bottom:var(--border);backdrop-filter:blur(8px)}.header-inner{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:1rem}.brand{width:270px}.primary-nav{display:flex;align-items:center;gap:clamp(.7rem,1.4vw,1.4rem)}.primary-nav a{text-decoration:none;font-size:.78rem;font-weight:650}.primary-nav a:hover{color:var(--cobalt)}.nav-cta{padding:.55rem .75rem;border:1px solid var(--ink)}.menu-toggle{display:none;border:0;background:none;padding:.5rem}.menu-toggle span{display:block;width:24px;height:2px;margin:5px;background:var(--ink)}
/* 08. Hero */
.hero{padding-block:clamp(3.5rem,7vw,7.5rem)}.hero-grid{display:grid;grid-template-columns:44fr 56fr;gap:clamp(2rem,5vw,5rem);align-items:center}.hero-copy{max-width:580px}.hero-copy .lead{margin-top:1.5rem}.micro{color:var(--slate)}
/* 09. Reading surface */
.reading-surface{background:var(--white);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.surface-head,.reading-surface>footer{padding:.85rem 1rem;font:700 .68rem/1 var(--font-mono);letter-spacing:.12em;display:flex;justify-content:space-between;align-items:center}.surface-head{border-bottom:var(--border)}.surface-head img{width:28px}.surface-visual{position:relative;min-height:235px;background:linear-gradient(90deg,var(--mint) 0 31%,var(--blue-paper) 31% 66%,var(--blush) 66%);overflow:hidden}.surface-visual svg{position:absolute;inset:42px 4% auto;width:92%;height:160px}.surface-visual strong{position:absolute;inset:48% auto auto 50%;transform:translate(-50%,-50%);padding:.4rem;background:var(--ivory);font:700 .68rem var(--font-mono);letter-spacing:.12em}.surface-notes{display:grid;grid-template-columns:repeat(3,1fr)}.surface-notes>div{padding:1rem;border-right:var(--border)}.surface-notes>div:last-child{border:0}.surface-notes b{font:700 .68rem var(--font-mono);letter-spacing:.1em}.surface-notes p{margin:.65rem 0;font-family:var(--font-editorial);line-height:1.25}.surface-notes small{display:block;color:var(--slate);line-height:1.35}.reading-surface>footer{border-top:var(--border);color:var(--slate)}
/* 10. Text mode */
.text-lines{position:absolute;left:5%;top:43px;width:28%}.text-lines i{display:block;height:2px;background:var(--viridian);margin:13px 0}.text-lines i:nth-child(2){width:75%}.text-lines i:nth-child(3){width:88%}.text-lines i:nth-child(4){width:55%}.text-lines i:nth-child(5){width:80%}.text-lines i:nth-child(6){width:94%}.text-lines .marked::before{content:"";display:block;width:5px;height:8px;background:var(--viridian);transform:translate(-9px,-3px)}
/* 11. Layout mode */
.flow{fill:none;stroke:var(--cobalt);stroke-width:3}.nodes circle{fill:var(--ivory);stroke:var(--cobalt);stroke-width:3}
/* 12. Signal mode */
.baseline{stroke:var(--madder);stroke-width:1.5}.excite{stroke:var(--amber);stroke-width:3}.point{fill:var(--amber);stroke:var(--ivory);stroke-width:3}
/* 13. Legibility strip */
.legibility-strip{padding-block:2.5rem;background:var(--ink);color:var(--white)}.legibility-strip .container{display:grid;grid-template-columns:1fr 1.4fr;gap:3rem}.legibility-strip h2{color:var(--white);font-size:var(--step-1)}.legibility-strip .eyebrow{color:var(--amber)}.strip-points{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.strip-points p{border-left:2px solid var(--amber);padding-left:.8rem}
/* 14. Reading modes */
.modes-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--border);border-bottom:var(--border)}.mode{position:relative;padding:2rem 1.4rem;border-right:var(--border)}.mode:last-child{border:0}.mode::before{content:"";position:absolute;top:-1px;left:0;width:45%;height:4px;background:var(--viridian)}.mode.map::before{background:var(--cobalt)}.mode.light::before{background:var(--madder)}.mode h3{margin:1.25rem 0}.mode li{display:inline-block;margin:.7rem .25rem 0 0;padding:.15rem .45rem;border:var(--border);font-size:.72rem}
/* 15. Mappings */
.mappings{background:var(--white)}.mapping-row{display:grid;grid-template-columns:1.5fr 1fr;gap:1.5rem;padding:2.5rem 0;border-top:var(--border)}.mapping-row h3{margin:.65rem 0}.mapping-flow{align-self:center;display:flex;align-items:center;justify-content:space-between;padding:1rem;background:var(--mint);font:700 .66rem var(--font-mono)}.mapping-flow i{color:var(--viridian)}.nodes-flow{background:var(--blue-paper)}.signal-flow{background:var(--blush)}.keywords{grid-column:1/-1;color:var(--slate)}
/* 16. Reading method */
.method{background:var(--mint)}.method-steps{display:grid;grid-template-columns:repeat(5,1fr);align-items:start;margin-bottom:4rem}.method-steps article{min-height:210px;padding:1.2rem;border-top:3px solid var(--viridian);background:rgba(255,255,255,.5)}.method-steps article:nth-child(2){margin-top:25px}.method-steps article:nth-child(3){margin-top:50px}.method-steps article:nth-child(4){margin-top:75px}.method-steps article:nth-child(5){margin-top:100px}.method-steps h3{margin:.8rem 0;font-family:var(--font-mono);font-size:1rem}.checklist{display:grid;grid-template-columns:1fr 2fr;gap:2rem;padding:2rem;background:var(--ink);color:var(--white)}.checklist h3{color:var(--white)}.checklist ul{columns:2;column-gap:2rem}.checklist li{break-inside:avoid;margin:0 0 .7rem;padding-left:1.2rem;position:relative}.checklist li::before{content:"□";position:absolute;left:0;color:var(--amber)}
/* 17. Researchers */
.profiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}.profile{padding:1.5rem;border:var(--border);border-top:4px solid var(--viridian);background:var(--white)}.profile.map{border-top-color:var(--cobalt)}.profile.light{border-top-color:var(--madder)}.profile:nth-child(even){transform:translateY(1rem)}.profile-top{display:flex;justify-content:space-between;align-items:center}.avatar{display:grid;place-items:center;width:52px;height:52px;border-radius:50% 50% 12% 50%;background:var(--mint);font:700 .85rem var(--font-mono)}.map .avatar{background:var(--blue-paper);border-radius:12%}.light .avatar{background:var(--blush);border-radius:50% 12% 50% 50%}.profile small{display:block;margin-top:1rem;color:var(--slate)}.profile h3{margin:.3rem 0 1rem}.profile p{margin:.7rem 0;font-size:.88rem}.contact{display:grid;gap:.5rem;margin-top:1.25rem;padding-top:1rem;border-top:var(--border);overflow-wrap:anywhere}.contact a{font-size:.78rem}.contact button{justify-self:start;padding:.45rem .75rem;background:var(--ink);border:0;color:var(--white);cursor:pointer}.status{display:inline-block;margin-top:1rem;padding:.35rem .55rem;background:var(--ivory);font-size:.75rem}
/* 18. Independence note */
.independence{padding-block:3rem;background:var(--ink);color:var(--white)}.independence .container{max-width:900px}.independence h2{color:var(--white);margin-bottom:1.25rem}.independence p:not(.eyebrow){margin-top:.8rem}.independence .eyebrow{color:var(--amber)}
/* 19. Casebook */
.casebook{background:var(--blue-paper)}.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.case-entry{padding:1.5rem;background:var(--white);border-left:3px solid var(--cobalt)}.case-entry h3{margin:.65rem 0}.case-entry details{margin:1rem 0;padding-top:.8rem;border-top:var(--border)}.case-entry summary{cursor:pointer;font-weight:700;color:var(--cobalt)}.case-entry details p{margin-top:.8rem}.case-entry[hidden]{display:none}
/* 20. Search */
.search{display:grid;grid-template-columns:1fr auto;gap:.6rem;margin-bottom:2rem;padding:1.25rem;background:var(--ink);color:var(--white)}.search label{grid-column:1/-1;font-weight:700}.search>div{display:flex}.search input{width:100%;min-height:48px;padding:.7rem;border:0}.search button{border:0;border-left:var(--border);background:var(--amber);padding:.6rem;cursor:pointer}.search output{align-self:center;min-width:70px;text-align:right}.no-results{padding:3rem;text-align:center;background:var(--white);margin-bottom:1rem}
/* 21. About */
.about .section-head{max-width:900px}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;border-top:var(--border)}.principles article{padding-top:1.5rem}.principles h3{margin:.6rem 0}
/* 22. Final CTA */
.final-cta{padding-block:var(--space-5);background:var(--blush)}.transform-line{display:flex;align-items:center;margin-bottom:3rem;font:700 .68rem var(--font-mono)}.transform-line i{height:2px;flex:1;background:linear-gradient(90deg,var(--viridian),var(--cobalt),var(--madder))}.transform-line span{padding:.5rem}.transform-line b{width:12px;height:12px;border-radius:50%;background:var(--amber)}.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem}.cta-grid h2{max-width:650px}
/* 23. Footer */
.site-footer{padding-block:3rem;background:var(--ink);color:var(--white)}.footer-grid{display:grid;grid-template-columns:1.2fr .7fr 1fr;gap:3rem}.site-footer img{width:56px}.site-footer h2{margin:.8rem 0;color:var(--white);font-size:var(--step-1)}.site-footer p{color:#c8cdd1;font-size:.82rem}.site-footer nav{display:grid;gap:.3rem;align-content:start}.site-footer a{font-size:.85rem}.back-to-top{display:inline-block;margin-bottom:1rem;opacity:.45;transition:var(--transition)}.back-to-top.is-visible{opacity:1}
/* 24. Reveal states */
.reveal{opacity:1;transform:none}.js-enabled .reveal{opacity:0;transform:translateY(18px);transition:opacity 600ms ease,transform 600ms ease}.js-enabled .reveal.is-visible{opacity:1;transform:none}
/* 25. Responsive */
@media(max-width:1020px){.brand{width:220px}.primary-nav{gap:.65rem}.primary-nav a{font-size:.7rem}.hero-grid{grid-template-columns:45fr 55fr;gap:2rem}.surface-notes{grid-template-columns:1fr}.surface-notes>div{border-right:0;border-bottom:var(--border)}.modes-grid{grid-template-columns:repeat(2,1fr)}.mode:nth-child(2){border-right:0}.profiles{grid-template-columns:repeat(2,1fr)}.profile:nth-child(even){transform:none}}
@media(max-width:760px){.menu-toggle{display:block}.primary-nav{display:none;position:absolute;top:72px;left:0;right:0;padding:1rem;background:var(--ivory);border-bottom:var(--border);box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.primary-nav.is-open{display:flex}.primary-nav a{padding:.55rem;font-size:.9rem}.hero-grid,.legibility-strip .container,.cta-grid,.footer-grid{grid-template-columns:1fr}.surface-visual{min-height:210px}.strip-points{grid-template-columns:1fr}.mapping-row{grid-template-columns:1fr}.method-steps{grid-template-columns:1fr;gap:.6rem}.method-steps article,.method-steps article:nth-child(n){min-height:0;margin:0}.checklist{grid-template-columns:1fr}.checklist ul{columns:1}.profiles,.case-grid{grid-template-columns:1fr}.principles{grid-template-columns:1fr}.footer-grid{gap:2rem}}
@media(max-width:520px){.container{width:min(calc(100% - 1.25rem),var(--container))}.brand{width:190px}.modes-grid{grid-template-columns:1fr}.mode{border-right:0;border-bottom:var(--border)}.mapping-flow{align-items:flex-start;flex-direction:column;gap:.5rem}.mapping-flow i{transform:rotate(90deg)}.search{grid-template-columns:1fr}.search>div{flex-direction:column}.search button{border-left:0}.search output{text-align:left}.surface-notes p{font-size:.95rem}.surface-visual svg{inset:38px 0 auto;width:100%}.text-lines{left:4%;width:30%}}
/* 26. Reduced motion */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.js-enabled .reveal{opacity:1;transform:none}}