/* Local, system-font design. Layout is fluid; no remote assets or script required. */
:root{color-scheme:light;--paper:#f3f0e7;--ink:#20382e;--muted:#526257;--accent:#d9ef81;--line:#cbd0c3}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit}a:focus-visible{outline:3px solid #805217;outline-offset:6px}::selection{background:var(--accent);color:var(--ink)}
/* The skip link remains available to keyboard users above all artwork. */
.skip-link{position:fixed;top:12px;left:12px;z-index:10;padding:12px;background:var(--ink);color:white;transform:translateY(-180%)}.skip-link:focus{transform:translateY(0)}
.site-header,main,footer{max-width:1440px;margin:auto}.site-header{padding:32px 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{text-decoration:none;font-size:24px;font-weight:900;letter-spacing:-1.2px}.wordmark span{font-weight:400;font-size:14px;letter-spacing:0}.site-header nav a{font-size:13px;text-decoration:none;padding:12px 0}.site-header nav span{margin-left:22px}
/* Desktop hero pairs oversized editorial type with a self-contained geometric illustration. */
.hero{padding:70px 6% 0;display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:1.7px;font-weight:700;line-height:1.7}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ink);margin-right:10px}h1{font-size:clamp(58px,7.7vw,110px);line-height:.98;letter-spacing:-6px;font-weight:500;margin:30px 0}em{font-family:Georgia,'Times New Roman',serif;font-weight:400}.intro{max-width:380px;font-size:16px;line-height:1.7;color:var(--muted)}.button{display:inline-flex;gap:45px;align-items:center;background:var(--ink);color:var(--paper);padding:18px 22px;margin-top:22px;text-decoration:none;font-size:13px}.button:hover{background:#3d5545}
.art{position:relative;min-height:440px;background:var(--accent);overflow:hidden;display:flex;align-items:center;justify-content:center}.art-grid{position:absolute;inset:0;background-image:linear-gradient(#20382e12 1px,transparent 1px),linear-gradient(90deg,#20382e12 1px,transparent 1px);background-size:44px 44px}.portal{width:60%;height:310px;border-radius:160px 160px 0 0;background:var(--ink);position:relative;overflow:hidden;box-shadow:16px 16px 0 #20382e22}.sun{position:absolute;top:70px;left:calc(50% - 48px);width:96px;height:96px;background:var(--paper);border-radius:50%}.horizon{position:absolute;bottom:-110px;left:-50%;width:200%;height:240px;background:#73936b;border-radius:50%;border-top:1px solid var(--accent)}.horizon:after{content:'';position:absolute;top:35px;left:0;width:100%;height:240px;border-radius:50%;border-top:1px solid #d9ef8170}.art-label,.art-coordinate{position:absolute;bottom:20px;font-size:9px;letter-spacing:1.5px}.art-label{left:20px}.art-coordinate{right:20px}.hero-bottom{grid-column:1/-1;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:35px 0 25px;font-size:11px;color:var(--muted)}.hero-bottom span span{margin-left:18px}
.perspective{padding:90px 6% 60px;display:grid;grid-template-columns:1.15fr 1fr;gap:40px}h2{font-size:clamp(34px,4vw,54px);line-height:1.1;font-weight:400;letter-spacing:-2px;margin:20px 0}.perspective-copy{padding-top:27px;max-width:410px;font-size:16px;line-height:1.8;color:var(--muted)}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;padding:0 6% 90px}.principles article{border-top:1px solid var(--line);padding-top:20px}.number{font-size:11px;color:var(--muted)}h3{font-weight:400;font-size:23px;letter-spacing:-.6px;margin:30px 0 12px}.principles p{font-size:14px;line-height:1.7;color:var(--muted);max-width:280px}.closing{margin:0 6%;padding:60px;text-align:center;background:var(--ink);color:var(--paper)}.closing h2{font-size:clamp(40px,5vw,68px);margin:25px 0 35px}.closing a{font-size:12px;text-underline-offset:5px}.closing a span{margin-left:20px}.closing a:focus-visible{outline-color:var(--accent)}footer{padding:35px 6%;display:flex;align-items:center;justify-content:space-between}footer p{font-size:11px;color:var(--muted)}
/* Stack at narrow widths, preserving reading order and comfortable touch targets. */
@media(max-width:760px){.site-header{padding:22px 6%}.hero{padding-top:40px;grid-template-columns:1fr;gap:32px}h1{letter-spacing:-3px;font-size:clamp(58px,12vw,88px)}.art{min-height:370px}.portal{max-width:250px;height:270px}.hero-bottom{padding-top:0;gap:20px;line-height:1.6}.perspective{grid-template-columns:1fr;padding-top:55px;gap:5px}.perspective-copy{padding-top:0}.principles{grid-template-columns:1fr;gap:25px;padding-bottom:50px}h3{margin-top:18px}.principles p{max-width:100%}.closing{padding:40px 20px}footer{gap:25px;align-items:flex-start}footer p{text-align:right;line-height:1.6;margin:0}.site-header nav a{display:inline-block;min-height:44px}.site-header nav span{margin-left:8px}}
/* Respect visitors who prefer reduced movement. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}