:root{--paper:#f4f0e8;--ink:#14212c;--muted:#52605e;--fire:#e36445;--water:#4167a1;--earth:#5b8363;--air:#9a79b8;--line:#c9cec5}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,sans-serif}
a{color:inherit}
a:focus-visible{outline:3px solid var(--fire);outline-offset:4px}
.skip{position:absolute;top:-5rem;left:1rem;z-index:10;background:var(--ink);color:#fff;padding:.8rem 1rem}
.skip:focus{top:1rem}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 6vw;border-bottom:1px solid var(--line)}
.topbar .brand{font-size:1.4rem;font-weight:900;letter-spacing:-.06em;text-decoration:none}
.topbar span,.eyebrow{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:800}
.topbar>a:last-child{font-size:.85rem;font-weight:700}
.hero{min-height:740px;padding:7rem 7vw 6rem;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);align-items:center;gap:3rem;overflow:hidden}
.hero-copy{position:relative;z-index:1}
.hero h1{font-size:clamp(3.7rem,7vw,7.5rem);line-height:.93;letter-spacing:-.075em;margin:1.8rem 0 2rem;max-width:1100px;overflow-wrap:break-word}
.hero h1 em,.statement h2 em{font-style:normal;color:var(--earth)}
.lead{font-size:clamp(1.1rem,1.5vw,1.45rem);line-height:1.6;max-width:700px}
.text-link{display:inline-flex;align-items:center;gap:1rem;margin-top:2rem;font-weight:800;text-decoration-thickness:2px;text-underline-offset:.3rem}
.micro{font-size:.8rem;color:var(--muted);margin-top:2rem}
.hero-art{position:relative;width:min(100%,480px);aspect-ratio:1;margin:auto}
.hero-art .ring{position:absolute;inset:4%;border:1px solid #14212c55;border-radius:50%}
.hero-art i{position:absolute;width:43%;height:43%;display:block;border-radius:47% 53% 53% 47%;opacity:.92;mix-blend-mode:multiply}
.hero-art .fire{left:8%;top:5%;background:var(--fire);transform:rotate(-28deg)}
.hero-art .water{right:4%;top:17%;background:var(--water);border-radius:60% 40% 50% 50%;transform:rotate(23deg)}
.hero-art .earth{left:17%;bottom:3%;background:var(--earth);border-radius:33% 44% 45% 40%;transform:rotate(12deg)}
.hero-art .air{right:6%;bottom:8%;background:var(--air);border-radius:54% 46% 60% 40%;transform:rotate(-20deg)}
.hero-art b{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink);font-size:clamp(2rem,4vw,4.3rem);letter-spacing:-.1em}
.statement{padding:7rem 7vw;background:var(--ink);color:#fff}
.statement h2{font-size:clamp(2.5rem,5.4vw,5.6rem);line-height:1.05;letter-spacing:-.06em;max-width:1150px;margin:2rem 0;overflow-wrap:break-word}
.statement h2 em{color:#b5d2b7}
.statement>p:last-child{font-size:1.15rem;line-height:1.6;max-width:750px;color:#e6e9e4}
.elements,.principles{padding:7rem 7vw}
.section-head{max-width:900px;margin-bottom:3rem}
.section-head h2{font-size:clamp(2.6rem,5vw,5rem);line-height:1;letter-spacing:-.06em;margin:1.6rem 0;overflow-wrap:break-word}
.section-head>p:last-child{font-size:1.1rem;line-height:1.6}
.element-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.element{min-width:0;min-height:340px;display:flex;flex-direction:column;padding:2rem;background:#fff;border-top:5px solid var(--fire)}
.element.water{border-color:var(--water)}.element.earth{border-color:var(--earth)}.element.air{border-color:var(--air)}
.element span{font-size:.72rem;letter-spacing:.13em;font-weight:800}
.element h3{font-size:clamp(1.7rem,2.2vw,2.4rem);line-height:1.12;letter-spacing:-.05em;margin:3rem 0 1rem;overflow-wrap:break-word}
.element p{line-height:1.6;margin:0}
.principles{background:#e3e9e0}
.principle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.principle-grid article{border-top:1px solid var(--ink);padding:1.5rem 1rem 1rem 0;min-width:0}
.principle-grid b{font-size:.75rem;letter-spacing:.12em}.principle-grid h3{font-size:clamp(1.7rem,2.4vw,2.6rem);letter-spacing:-.05em;line-height:1.15;margin:2rem 0 1rem;overflow-wrap:break-word}.principle-grid p{line-height:1.6;max-width:430px}
.evidence{display:grid;grid-template-columns:1fr 1fr;gap:3rem;padding:7rem 7vw;background:#dce4e7}
.evidence h2,.next h2{font-size:clamp(2.6rem,5vw,5.2rem);line-height:1.03;letter-spacing:-.06em;margin:1.6rem 0;overflow-wrap:break-word}
.evidence>div:last-child{align-self:end;max-width:600px;font-size:1.1rem;line-height:1.6}
.gate{display:inline-block;border:1px solid var(--ink);border-radius:2rem;padding:.8rem 1rem;font-size:.82rem;font-weight:800}
.next{padding:7rem 7vw}.next>p:not(.eyebrow){max-width:720px;font-size:1.15rem;line-height:1.6}
.links{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}.links a{padding:1rem 1.2rem;border:1px solid var(--ink);border-radius:2rem;font-size:.9rem;font-weight:800;text-decoration:none}.links a:hover{background:var(--ink);color:#fff}
footer{display:flex;justify-content:space-between;gap:1rem;padding:2rem 7vw;border-top:1px solid var(--line);font-size:.8rem}
@media(max-width:1000px){.hero{grid-template-columns:1fr}.hero-art{width:min(65%,440px)}.element-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.principle-grid{grid-template-columns:1fr}.principle-grid article{padding-top:1rem}.evidence{grid-template-columns:1fr}}
@media(max-width:650px){.topbar span{display:none}.hero{padding:5rem 6vw;min-height:auto}.hero h1{font-size:clamp(2.75rem,11vw,4.7rem);line-height:1}.hero-art{width:min(78%,350px);margin-top:1rem}.statement,.elements,.principles,.evidence,.next{padding:5rem 6vw}.element-grid{grid-template-columns:1fr}.element{min-height:260px}.element h3{margin-top:2rem}footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}