/* 01. Design tokens */
:root {
  --graphite:#24262a; --indigo:#4c5b82; --turquoise:#558b88; --terracotta:#b86752; --gold:#c4a257;
  --porcelain:#f8f5ec; --fog:#e6ebee; --rose:#eee3df; --charcoal:#35383c; --steel:#737a80; --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;
  --text-xs:.72rem; --text-sm:.88rem; --text-base:1rem; --text-lg:clamp(1.12rem,1.5vw,1.32rem); --text-xl:clamp(2rem,4vw,4rem);
  --space-1:.4rem; --space-2:.75rem; --space-3:1.15rem; --space-4:1.75rem; --space-5:2.5rem; --space-6:4rem; --space-7:clamp(5rem,9vw,8rem);
  --container:1200px; --border:1px solid rgba(36,38,42,.18); --radius:12px; --shadow:0 18px 50px rgba(36,38,42,.09); --transition:220ms ease;
}

/* 02. Reset */
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:auto}body,h1,h2,h3,p,ul,ol{margin:0}ul,ol{padding:0}img{display:block;max-width:100%}button,input{font:inherit}a{color:inherit}button{cursor:pointer}

/* 03. Base */
html{scroll-padding-top:88px}body{background:var(--porcelain);color:var(--charcoal);font-family:var(--font-sans);line-height:1.65;overflow-x:hidden}::selection{background:var(--gold);color:var(--graphite)}

/* 04. Accessibility */
.skip-link{position:fixed;z-index:1000;top:8px;left:8px;padding:.7rem 1rem;background:var(--white);color:var(--graphite);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:3px}

/* 05. Typography */
h1,h2,h3{font-family:var(--font-editorial);font-weight:400;line-height:1.08;color:var(--graphite)}h1{font-size:var(--text-xl);letter-spacing:-.035em}h1 em{color:var(--indigo);font-style:italic}h2{font-size:clamp(1.9rem,3.5vw,3.15rem);letter-spacing:-.025em}h3{font-size:clamp(1.25rem,2vw,1.65rem)}.eyebrow,.level-label,.micro-label,.note-category{font:700 var(--text-xs)/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}.eyebrow{color:var(--terracotta);margin-bottom:var(--space-3)}

/* 06. Global layout */
.container{width:min(calc(100% - 2.5rem),var(--container));margin-inline:auto}.section{padding-block:var(--space-7)}.section-intro{max-width:770px;margin-bottom:var(--space-5)}.section-intro>p:last-child{max-width:650px;margin-top:var(--space-3);font-size:var(--text-lg);color:var(--steel)}.button-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:var(--space-4)}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.15rem;border:1px solid;text-decoration:none;font-size:.86rem;font-weight:700}.button.primary{background:var(--graphite);color:var(--white);border-color:var(--graphite)}.button.secondary{border-color:var(--graphite)}.button:hover{transform:translateY(-2px)}

/* 07. Header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(248,245,236,.96);border-bottom:var(--border);backdrop-filter:blur(10px)}.header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:1rem}.brand{width:245px}.primary-nav{display:flex;align-items:center;gap:clamp(.6rem,1.5vw,1.35rem)}.primary-nav a{text-decoration:none;font-size:.78rem;font-weight:650;white-space:nowrap}.primary-nav a:not(.nav-cta):hover{color:var(--indigo)}.nav-cta{padding:.55rem .8rem;color:var(--white);background:var(--graphite)}.menu-toggle{display:none;border:0;background:none;width:44px;height:44px;padding:10px}.menu-toggle span{display:block;height:2px;background:var(--graphite);margin:5px 0;transition:var(--transition)}

/* 08. Hero */
.hero{padding:clamp(3.5rem,7vw,6.5rem) 0 var(--space-7);background:linear-gradient(115deg,var(--porcelain) 70%,rgba(230,235,238,.6) 70%)}.hero-grid{display:grid;grid-template-columns:46fr 54fr;gap:clamp(2rem,5vw,5rem);align-items:center}.hero-lead{font-size:var(--text-lg);color:var(--steel);max-width:590px;margin-top:var(--space-4)}.micro-label{display:flex;align-items:center;gap:.6rem;color:var(--steel);margin-top:var(--space-5)}.micro-label span{width:30px;height:1px;background:var(--gold)}

/* 09. Nested scale visualization */
.observation{position:relative;min-height:620px;border:1px solid rgba(76,91,130,.35);padding:1rem;background:rgba(255,255,255,.36);box-shadow:var(--shadow)}.observation::before,.observation::after{content:"";position:absolute;width:14px;height:14px;border-color:var(--gold)}.observation::before{top:-1px;left:-1px;border-top:2px solid var(--gold);border-left:2px solid var(--gold)}.observation::after{right:-1px;bottom:-1px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold)}.observation-head,.observation-foot{display:flex;justify-content:space-between;align-items:center;font:var(--text-xs) var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.observation-head img{width:42px}.window{position:absolute;padding:1.25rem;border:1px solid;background:var(--white);overflow:hidden}.window h2{font-size:1.45rem;margin:.3rem 0 .55rem}.window p:not(.level-label){font-size:.85rem;max-width:340px}.window ul{display:flex;flex-wrap:wrap;gap:.3rem .65rem;list-style:none;margin-top:.7rem;color:var(--steel);font:var(--text-xs) var(--font-mono)}.scale-cue{float:right;color:var(--steel);font:var(--text-xs) var(--font-mono)}.outer{inset:78px 32px 76px 45px;border-color:var(--indigo);background:var(--fog);padding-right:46%}.middle{inset:220px 58px 48px 170px;border-color:var(--turquoise);background:#edf3f0;padding-right:28%}.inner{inset:355px 20px 22px 275px;border-color:var(--terracotta);background:var(--rose)}.outer .level-label{color:var(--indigo)}.middle .level-label{color:var(--turquoise)}.inner .level-label{color:var(--terracotta)}.observation-foot{position:absolute;bottom:-32px;left:0;right:0;color:var(--steel)}.observation-foot small{text-transform:none;letter-spacing:0}

/* 10. Scale bar */
.scale-bar{background:var(--graphite);color:var(--white);padding:var(--space-5) 0}.scale-bar h2{color:var(--white);max-width:850px;font-size:clamp(1.65rem,3vw,2.6rem)}.scale-bar .eyebrow{color:var(--gold)}.claims{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:var(--space-5);border-top:1px solid rgba(255,255,255,.2);padding-top:1rem}.claims p{font-size:.85rem;color:#c9cacc}.claims strong{display:block;color:var(--white)}

/* 11. Scale levels */
.scale-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--border);border-left:var(--border)}.scale-block{min-height:430px;padding:var(--space-4);border-right:var(--border);border-bottom:var(--border);display:flex;flex-direction:column}.scale-block>span{font:var(--text-xs) var(--font-mono);color:var(--steel)}.scale-block h3{margin:var(--space-5) 0 var(--space-3)}.scale-block p{font-size:.91rem}.scale-block ul{list-style:none;margin-top:auto;padding-top:var(--space-4);font:var(--text-xs) var(--font-mono)}.scale-block li{padding:.4rem 0;border-top:1px solid rgba(36,38,42,.12)}.scale-block.physics{background:var(--fog)}.scale-block.molecule,.scale-block.biology{background:#edf2ed}.scale-block.population{background:var(--rose)}

/* 12. Transitions */
.transitions{background:var(--white)}.transition-list{border-top:2px solid var(--graphite)}.transition-band{display:grid;grid-template-columns:1.1fr .45fr 2fr;gap:var(--space-4);align-items:center;padding:var(--space-5) 0;border-bottom:var(--border)}.transition-code span{display:block;color:var(--terracotta);font:var(--text-xs) var(--font-mono);text-transform:uppercase;letter-spacing:.1em}.transition-code strong{font:1rem var(--font-mono)}.translation{display:flex;flex-direction:column;align-items:center;color:var(--steel);font:var(--text-xs) var(--font-mono);text-transform:uppercase}.translation i{color:var(--gold);font-style:normal}.transition-band h3{font-size:clamp(1.25rem,2.2vw,1.9rem)}.transition-band>div:last-child p{margin-top:.7rem;color:var(--steel);font:var(--text-xs) var(--font-mono)}

/* 13. Scale method */
.method{background:var(--fog)}.method-layout{display:grid;grid-template-columns:1.5fr .8fr;gap:var(--space-6)}.method-sequence{list-style:none}.method-sequence li{display:grid;grid-template-columns:110px 1fr;gap:var(--space-4);align-items:center;margin-bottom:1.2rem}.method-sequence li>span{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;border:1px solid var(--indigo);font:var(--text-sm) var(--font-mono);background:var(--porcelain)}.method-sequence li:nth-child(2)>span{width:92px}.method-sequence li:nth-child(3)>span{width:76px}.method-sequence li:nth-child(4)>span{width:62px}.method-sequence li:nth-child(5)>span{width:50px}.method-sequence h3{text-transform:uppercase;font:700 var(--text-sm) var(--font-mono);letter-spacing:.08em}.method-sequence p{color:var(--steel);margin-top:.35rem}.checklist{padding:var(--space-4);background:var(--graphite);color:var(--white);align-self:start}.checklist h3{color:var(--white);margin-bottom:1rem}.checklist ul{list-style:none}.checklist li{padding:.6rem 0 .6rem 1.2rem;border-top:1px solid rgba(255,255,255,.15);font-size:.85rem;position:relative}.checklist li::before{content:"○";position:absolute;left:0;color:var(--gold)}

/* 14. References */
.references{background:var(--porcelain)}.contact-note{display:grid;grid-template-columns:200px 1fr;gap:1rem;border-block:var(--border);padding:1rem 0;margin-bottom:var(--space-5);font-size:.85rem}.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.profile{padding:var(--space-4);background:var(--white);border:var(--border);display:flex;flex-direction:column;min-width:0}.profile.contact{border-top:4px solid var(--gold)}.profile.reference{border-top:4px solid var(--indigo)}.profile-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.avatar{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--graphite);color:var(--white);font:var(--text-sm) var(--font-mono)}.status{color:var(--steel);font:var(--text-xs) var(--font-mono);text-align:right}.profile>small{margin-top:var(--space-3);color:var(--terracotta);font:var(--text-xs) var(--font-mono);text-transform:uppercase}.profile h3{margin:.3rem 0 1rem}.profile p{font-size:.86rem;margin-bottom:.8rem}.institution{color:var(--steel)}.tags{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;margin-top:auto}.tags li{padding:.25rem .45rem;background:var(--fog);font:var(--text-xs) var(--font-mono)}.identifier{color:var(--steel);margin-top:1rem;font-family:var(--font-mono)}.email-row{border-top:var(--border);padding-top:1rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem}.email-row a{font-size:.78rem;overflow-wrap:anywhere}.email-row button{border:1px solid var(--graphite);background:transparent;padding:.35rem .55rem;font-size:.72rem}

/* 15. Independence note */
.independence{background:var(--rose);padding:var(--space-6) 0}.independence-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--space-6)}.independence-grid p+p{margin-top:1rem}

/* 16. Study notes */
.notes{background:var(--white)}.notes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.note{border:var(--border);background:var(--porcelain);padding:var(--space-4)}.note[hidden]{display:none}.note-category{color:var(--terracotta);margin-bottom:1rem}.note details>p{color:var(--steel);margin-top:1rem}.note summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}.note summary::-webkit-details-marker{display:none}.note summary::after{content:"+";font:1.4rem var(--font-mono);color:var(--indigo)}.note details[open] summary::after{content:"−"}.note summary span{font:1.45rem/1.15 var(--font-editorial);color:var(--graphite)}.expanded{border-top:var(--border);margin-top:1rem;padding-top:1rem;font-size:.9rem}.note .tags{margin-top:1rem}.no-results{padding:var(--space-5);border:1px dashed var(--terracotta);text-align:center}

/* 17. Search */
.search-panel{display:grid;grid-template-columns:170px 1fr 80px;gap:1rem;align-items:center;padding:1rem 0;margin-bottom:var(--space-4);border-block:var(--border)}.search-panel label{font-weight:700}.search-control{display:flex}.search-control input{width:100%;min-height:48px;border:1px solid var(--steel);background:var(--white);padding:.7rem 1rem}.search-control button{border:1px solid var(--graphite);background:var(--graphite);color:var(--white);white-space:nowrap}.search-panel>p{font:var(--text-sm) var(--font-mono);text-align:right}

/* 18. About */
.about{background:var(--porcelain)}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}.about-copy p+p{margin-top:1rem}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(36,38,42,.18);margin-top:var(--space-6)}.principles article{background:var(--porcelain);padding:var(--space-4)}.principles span{color:var(--terracotta);font:var(--text-xs) var(--font-mono)}.principles h3{margin:var(--space-3) 0}

/* 19. Final CTA */
.final-cta{padding:var(--space-7) 0;background:var(--indigo);color:var(--white);position:relative}.final-cta::after{content:"";position:absolute;right:7%;top:15%;width:160px;height:160px;border:1px solid rgba(255,255,255,.16);border-radius:50%}.cta-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-6);position:relative;z-index:1}.final-cta h2{color:var(--white)}.final-cta .eyebrow{color:var(--gold)}.button.light{background:var(--white);color:var(--graphite);border-color:var(--white)}.button.outline-light{border-color:var(--white);color:var(--white)}

/* 20. Footer */
.site-footer{background:var(--graphite);color:#cacbcd;padding:var(--space-5) 0 1rem}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr auto;gap:var(--space-5);align-items:start}.footer-brand{display:flex;gap:1rem}.footer-brand img{width:62px}.footer-brand strong{font:1.4rem var(--font-editorial);color:var(--white)}.footer-brand p{font-size:.8rem}.site-footer nav{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1rem}.site-footer a{font-size:.8rem;text-decoration:none}.site-footer a:hover{color:var(--gold)}.back-top{padding:.5rem;border:1px solid rgba(255,255,255,.3)}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.15);margin-top:var(--space-5);padding-top:1rem;font:var(--text-xs) var(--font-mono)}

/* 21. Reveal states */
.reveal{opacity:1;transform:none}.js-enabled .reveal{opacity:0;transform:translateY(20px);transition:opacity 650ms ease,transform 650ms ease}.js-enabled .reveal.is-visible{opacity:1;transform:none}

/* 22. Responsive */
@media (max-width:1024px){.primary-nav{gap:.65rem}.primary-nav a{font-size:.7rem}.brand{width:205px}.hero-grid{grid-template-columns:1fr}.observation{max-width:720px;width:100%;margin:auto}.scale-grid{grid-template-columns:repeat(2,1fr)}.profile-grid{grid-template-columns:repeat(2,1fr)}.method-layout{gap:2rem}}
@media (max-width:760px){.container{width:min(calc(100% - 1.5rem),var(--container))}.menu-toggle{display:block}.primary-nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;background:var(--porcelain);padding:1rem;border-bottom:1px solid var(--graphite)}.primary-nav.is-open{display:flex}.primary-nav a{font-size:.9rem;padding:.6rem}.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.hero{background:var(--porcelain)}.observation{min-height:auto;padding:1rem}.window{position:relative;inset:auto;margin-top:1rem;padding:1rem}.observation-foot{position:relative;bottom:auto;margin-top:1rem;align-items:flex-start;gap:.5rem}.observation-foot small{text-align:right}.claims,.scale-grid,.notes-grid,.profile-grid,.principles{grid-template-columns:1fr}.scale-block{min-height:340px}.transition-band{grid-template-columns:1fr}.translation{flex-direction:row;justify-content:flex-start;gap:.5rem}.translation i{transform:rotate(-90deg)}.method-layout,.independence-grid,.about-grid,.cta-grid{grid-template-columns:1fr}.method-sequence li{grid-template-columns:70px 1fr}.method-sequence li>span,.method-sequence li:nth-child(n)>span{width:60px}.contact-note{grid-template-columns:1fr}.search-panel{grid-template-columns:1fr}.search-panel>p{text-align:left}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:.4rem}.final-cta::after{display:none}}
@media (max-width:380px){.brand{width:190px}.button-row{flex-direction:column}.button{width:100%}.observation-head{font-size:.62rem}.observation-foot{flex-direction:column}.email-row{align-items:flex-start;flex-direction:column}.search-control{flex-direction:column}}

/* 23. Reduced motion */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}.js-enabled .reveal{opacity:1;transform:none}}