/* 01. Design tokens */
:root{--night:#202936;--cyan:#316D73;--rose:#A76472;--copper:#B77B55;--moss:#788563;--iris:#706D91;--steel:#6B7C88;--soft-cyan:#DDEBEA;--rose-mist:#EFE2E6;--moss-wash:#E7EBDD;--copper-wash:#F1E4DA;--paper:#F8F3E9;--cool:#EEF1F1;--graphite:#363D42;--muted:#747C80;--white:#FFFFFF;--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(.76rem,.72rem + .18vw,.88rem);--step-0:clamp(.96rem,.9rem + .25vw,1.1rem);--step-1:clamp(1.25rem,1.08rem + .7vw,1.7rem);--step-2:clamp(1.8rem,1.45rem + 1.5vw,2.8rem);--step-3:clamp(2.7rem,2rem + 3vw,5.25rem);--space:clamp(1rem,.7rem + 1.2vw,2rem);--section:clamp(4.5rem,8vw,8.5rem);--container:1200px;--border:1px solid rgba(32,41,54,.18);--radius:14px;--shadow:0 16px 45px rgba(32,41,54,.08);--transition:220ms ease}
/* 02. Reset */
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:auto}body,h1,h2,h3,h4,p{margin:0}img,svg{display:block;max-width:100%}button,input{font:inherit}a{color:inherit}ul{padding-left:1.2rem}
/* 03. Base */
body{background:var(--paper);color:var(--graphite);font-family:var(--font-sans);font-size:var(--step-0);line-height:1.68;overflow-x:hidden}section{scroll-margin-top:6rem}.container{width:min(calc(100% - 2rem),var(--container));margin-inline:auto}.narrow{max-width:850px}.section{padding-block:var(--section)}
/* 04. Accessibility */
.skip-link{position:fixed;z-index:999;top:1rem;left:1rem;padding:.7rem 1rem;background:var(--white);color:var(--night);transform:translateY(-200%)}.skip-link:focus{transform:none}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--moss);outline-offset:4px}
/* 05. Typography */
h1,h2,h3,h4{color:var(--night);font-family:var(--font-editorial);font-weight:500;line-height:1.08}h1{font-size:var(--step-3);letter-spacing:-.045em}h2{max-width:900px;font-size:var(--step-2);letter-spacing:-.025em}h3{font-size:var(--step-1)}h4{font-size:1.2rem}.eyebrow,.micro,.scale-mark,.scale>span,.pattern span,.method-list span,.principles span,.profile small,.note summary>span,.note small{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase}.eyebrow{color:var(--cyan);font-weight:700;margin-bottom:1rem}.lead{font-size:1.12rem;max-width:690px}.section>.container>h2{margin-bottom:2.5rem}
/* 06. Layout */
.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-block:2rem}.button{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.05rem;border:1px solid var(--night);border-radius:2px;text-decoration:none;font-size:.88rem;font-weight:650}.button.primary{background:var(--night);color:var(--white)}.button.secondary{background:transparent}.button:hover{transform:translateY(-2px)}
/* 07. Header */
.site-header{position:sticky;z-index:50;top:0;background:rgba(248,243,233,.96);border-bottom:var(--border)}.header-inner{min-height:78px;display:flex;align-items:center;gap:1.5rem}.brand{width:260px;margin-right:auto}.site-header nav{display:flex;align-items:center;gap:1.1rem}.site-header nav a{font-size:.75rem;text-decoration:none;white-space:nowrap}.site-header nav a:hover{color:var(--cyan)}.site-header .nav-cta{padding:.5rem .65rem;border:1px solid var(--night)}.menu-toggle{display:none;width:44px;height:44px;border:0;background:transparent}.menu-toggle span{display:block;width:24px;height:2px;background:var(--night);margin:5px auto}
/* 08. Hero */
.hero{padding-block:clamp(4rem,7vw,7rem);min-height:800px}.hero-grid{display:grid;grid-template-columns:52fr 48fr;gap:clamp(2rem,5vw,5rem);align-items:center}.hero h1 em{color:var(--copper);font-style:normal}.hero .lead{margin-top:1.7rem}.micro{color:var(--muted)}
/* 09. Focus Planes */
.focus-composition{position:relative;min-height:690px}.plane{position:absolute;width:72%;padding:2rem;border:1px solid currentColor;border-radius:42% 12% 30% 16%;background:var(--paper);box-shadow:var(--shadow)}.plane::before,.plane::after{content:"";position:absolute;border:2px solid currentColor;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%}.plane::before{width:68px;height:68px;right:22px;top:18px}.plane::after{width:44px;height:44px;right:34px;top:30px}.plane i{position:absolute;width:12px;height:12px;border-radius:50%;right:50px;top:46px;background:var(--moss)}.plane b{position:absolute;width:5px;height:5px;border-radius:50%;right:23px;bottom:24px;background:currentColor}.plane h2{font-size:1.55rem;margin:.75rem 0}.plane p{font-size:.78rem;line-height:1.55}.plane p strong{display:block;font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em}.plane.social{color:var(--copper);top:0;left:0}.plane.neural{color:var(--iris);top:205px;right:0}.plane.material{color:var(--cyan);top:410px;left:4%}.plane h2,.plane p{color:var(--night)}.plane-caption{position:absolute;bottom:-12px;right:0;width:58%;font-size:.8rem;border-left:2px solid var(--moss);padding-left:1rem}
/* 10. Scale Marks */
.scale-mark{display:inline-block;color:currentColor;border-left:18px solid;padding-left:.55rem}
/* 11. Observation Band */
.observation-band{padding-block:4rem;background:var(--night);color:var(--cool)}.observation-band .eyebrow{color:var(--copper)}.observation-band h2{color:var(--white);max-width:800px}.band-points{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:3rem;border-top:1px solid #ffffff38}.band-points p{padding:1rem;border-right:1px solid #ffffff38;font-family:var(--font-editorial);font-size:1.15rem}
/* 12. Study Scales */
.scales{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#20293625}.scale{background:var(--paper);padding:2rem 1.5rem;border-top:5px solid}.scale.social{border-color:var(--copper)}.scale.neural{border-color:var(--iris)}.scale.material{border-color:var(--cyan)}.scale h3{margin:.7rem 0 1rem}.scale p{font-size:.9rem}.scale ul{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;padding:0;margin-top:1.5rem}.scale li,.tags{font-size:.72rem;padding:.2rem .45rem;background:var(--cool)}
/* 13. Reading Patterns */
.patterns{background:var(--cool)}.pattern{display:grid;grid-template-columns:1fr 2fr;gap:3rem;padding:2.5rem 0;border-top:2px solid}.pattern.social{border-color:var(--copper)}.pattern.neural{border-color:var(--iris);margin-left:7%}.pattern.material{border-color:var(--cyan);margin-left:14%}.pattern h3{font-size:2.5rem;margin:.4rem 0}.pattern h4{margin-bottom:1rem}.pattern p{margin-bottom:.7rem}.limit{padding:.65rem 1rem;background:var(--white);border-left:3px solid currentColor;font-size:.88rem}
/* 14. Observation Method */
.method-list{max-width:940px;margin:3rem auto;display:grid;gap:1rem}.method-list article{display:grid;grid-template-columns:70px 1fr 1.7fr;align-items:start;gap:1.5rem;padding:1.4rem;border-top:var(--border)}.method-list article:nth-child(even){margin-left:8%}.method-list span{color:var(--moss);font-size:1rem}
/* 15. Observation Checklist */
.checklist{margin-top:6rem;padding:clamp(2rem,5vw,4rem);background:var(--night);color:var(--white);display:grid;grid-template-columns:1fr 2fr;gap:3rem}.checklist h2{color:var(--white)}.checklist .eyebrow{color:var(--copper)}.checklist ul{columns:2;gap:2rem;margin:0}.checklist li{break-inside:avoid;margin-bottom:.5rem}
/* 16. Academic References */
.references{background:var(--white)}.references>.container>p:not(.eyebrow){max-width:840px}.contact-note{margin-top:1rem;padding:1rem;border-left:3px solid var(--moss);background:var(--moss-wash)}.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3rem}.profile{position:relative;padding:1.6rem;background:var(--paper);border:var(--border);border-top:5px solid}.profile.social{border-top-color:var(--copper)}.profile.neural{border-top-color:var(--iris)}.profile.material{border-top-color:var(--cyan)}.profile.offset{margin-top:1.5rem}.profile-head{display:flex;justify-content:space-between;align-items:center}.avatar{display:grid;place-items:center;width:56px;height:56px;border-radius:46% 54% 36% 64%;background:var(--night);color:var(--white);font-family:var(--font-mono);font-size:.8rem}.profile h3{margin:1.2rem 0}.profile p{font-size:.83rem;margin:.8rem 0}.profile .tags{display:inline-block}.contact{display:grid;gap:.45rem;margin-top:1.2rem;padding-top:1rem;border-top:var(--border)}.contact a{overflow-wrap:anywhere;font-size:.8rem}.contact button{width:max-content;padding:.35rem .6rem;background:transparent;border:1px solid var(--night);cursor:pointer}
/* 17. Independence Note */
.independence{padding-block:5rem;background:var(--copper-wash);border-block:var(--border)}.independence h2{margin-bottom:1.5rem}.independence p{margin-top:.8rem}
/* 18. Observation Notes */
.notes{background:var(--paper)}.note-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.note{background:var(--white);border:var(--border)}.note[hidden]{display:none}.note summary{padding:1.5rem;cursor:pointer;list-style:none}.note summary::-webkit-details-marker{display:none}.note summary::after{content:"+";float:right;font-size:1.5rem}.note details[open] summary::after{content:"−"}.note h3{margin:.5rem 0}.note summary p,.note details>p,.note small{font-size:.84rem}.note details>p{padding:0 1.5rem 1rem}.note small{display:block;padding:1rem 1.5rem;border-top:var(--border);color:var(--cyan)}#no-results{text-align:center;padding:3rem;border:var(--border)}
/* 19. Search */
.search{margin:2.5rem 0;display:grid;grid-template-columns:1fr 2fr auto;align-items:end;gap:1rem}.search label{font-weight:700}.search>div{display:flex}.search input{width:100%;padding:.8rem;border:1px solid var(--steel);background:var(--white)}.search button{border:1px solid var(--steel);background:var(--night);color:var(--white);padding:.7rem}.search p{font-family:var(--font-mono);font-size:.8rem}
/* 20. About */
.about{background:var(--moss-wash)}.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(3rem,8vw,7rem)}.about h2{margin-bottom:2rem}.about p{margin-top:1rem}.principles article{padding:1rem 0;border-top:var(--border)}.principles span{color:var(--moss)}.principles h3{margin:.4rem 0}.principles p{font-size:.85rem;margin:0}
/* 21. Final CTA */
.final-cta{padding-block:var(--section);background:var(--rose-mist)}.cta-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:5rem;align-items:center}.marker-diagram{min-height:430px;display:grid;place-items:center;grid-template-columns:1fr 1fr 1fr;grid-template-rows:repeat(3,1fr);font-family:var(--font-mono);font-size:.72rem;border:var(--border)}.marker-diagram b{writing-mode:vertical-rl;letter-spacing:.16em}.marker-diagram i{color:var(--moss);font-style:normal}.marker-diagram strong{grid-column:2;grid-row:2;background:var(--night);color:var(--white);padding:1rem;transform:rotate(-4deg)}
/* 22. Footer */
footer{padding:4rem 0 1.5rem;background:var(--night);color:var(--cool)}.footer-grid{display:grid;grid-template-columns:2fr 1fr auto;gap:3rem}.footer-grid img{width:50px}.footer-grid h2{color:var(--white);font-size:1.6rem;margin-top:1rem}.footer-grid nav{display:grid;gap:.3rem}.footer-grid a{font-size:.82rem;text-decoration:none}.copyright{margin-top:3rem;padding-top:1rem;border-top:1px solid #ffffff30;font-size:.75rem}
/* 23. Reveal */
.js-enabled .reveal{opacity:0;transform:translateY(20px);transition:opacity 650ms ease,transform 650ms ease}.js-enabled .reveal.is-visible{opacity:1;transform:none}
/* 24. Responsive */
@media(max-width:1050px){.menu-toggle{display:block}.site-header nav{position:absolute;left:0;right:0;top:78px;display:none;flex-direction:column;align-items:stretch;padding:1.5rem;background:var(--paper);border-bottom:var(--border)}.site-header nav.is-open{display:flex}.site-header nav a{padding:.35rem}.hero-grid{grid-template-columns:1fr}.hero{min-height:auto}.focus-composition{max-width:650px;margin:auto;width:100%}.scales,.profile-grid{grid-template-columns:repeat(2,1fr)}.profile.offset{margin-top:0}.references .profile:last-child{grid-column:span 2}.about-grid{grid-template-columns:1fr}.cta-grid{gap:2rem}}
@media(max-width:700px){.container{width:min(calc(100% - 1.25rem),var(--container))}.brand{width:210px}.band-points,.scales,.profile-grid,.note-grid,.cta-grid{grid-template-columns:1fr}.band-points p{border-right:0;border-bottom:1px solid #ffffff38}.focus-composition{min-height:auto;display:grid;gap:1rem}.plane{position:relative!important;inset:auto!important;width:100%}.plane-caption{position:relative;inset:auto;width:100%;margin-top:1rem}.pattern,.method-list article,.checklist,.search{grid-template-columns:1fr}.pattern.neural,.pattern.material,.method-list article:nth-child(even){margin-left:0}.checklist ul{columns:1}.references .profile:last-child{grid-column:auto}.search{align-items:start}.search>div{min-width:0}.footer-grid{grid-template-columns:1fr}.marker-diagram{min-height:330px}.site-header{position:sticky}.hero h1{font-size:clamp(2.5rem,12vw,4rem)}}
@media(max-width:380px){.brand{width:175px}.menu-toggle{width:38px}.button{width:100%}.search>div{flex-direction:column}.profile{padding:1.15rem}}
/* 25. Reduced Motion */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.js-enabled .reveal{opacity:1;transform:none}}