:root { color-scheme: light; --bg:#f6f4ed; --ink:#29352e; --muted:#6c746b; --line:#dedfd5; --accent:#c87250; --panel:#eeeee2; --button:#314b3b; --button-ink:#faf9f1; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Arial, Helvetica, sans-serif; -webkit-font-smoothing:antialiased; transition:background .25s,color .25s; }
body.dark { color-scheme:dark; --bg:#1d2721; --ink:#f0eee4; --muted:#acb6a7; --line:#3c473c; --accent:#e8a17d; --panel:#e5e6d7; --button:#c1d0b7; --button-ink:#223028; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
[hidden] { display:none !important; }
a:focus-visible,button:focus-visible { outline:3px solid var(--accent); outline-offset:6px; }
::selection { background:#e8b695; color:#29352e; }
.skip-link { position:absolute; top:-100px; left:24px; padding:14px 20px; background:var(--button); color:var(--button-ink); border-radius:8px; z-index:5; }
.skip-link:focus { top:12px; }
.page-shell { width:min(1240px,calc(100% - 112px)); margin:0 auto; }
.site-header { min-height:118px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.wordmark { display:inline-flex; align-items:center; gap:13px; font-size:24px; letter-spacing:-1px; font-weight:700; }
.wordmark-light { font-weight:400; color:var(--muted); }
.brand-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:var(--accent); }
.brand-icon svg { width:30px; fill:var(--bg); }
.site-header nav { display:flex; align-items:center; gap:30px; }
.about-link { font-size:13px; font-weight:600; }
.about-link span { padding-left:14px; color:var(--accent); font-size:18px; }
.theme-button { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:50%; cursor:pointer; transition:background .2s; }
.theme-button:hover { background:var(--line); }
.theme-button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.4; }
.hero { display:grid; grid-template-columns:1fr 1.06fr; align-items:center; gap:54px; padding:72px 0 74px; }
.eyebrow { display:flex; align-items:center; gap:10px; font-size:10px; font-weight:600; letter-spacing:2.6px; margin:0 0 30px; color:var(--muted); }
.welcome-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px #c8725014; }
h1 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(48px,5.25vw,74px); line-height:1.06; letter-spacing:-3.6px; font-weight:400; margin:0; }
h1 em { color:var(--accent); font-weight:400; }
.hero-description { font-size:16px; line-height:1.85; color:var(--muted); margin:28px 0 29px; }
.primary-link { display:inline-flex; align-items:center; justify-content:space-between; gap:38px; padding:8px 8px 8px 23px; min-height:52px; border-radius:28px; background:var(--button); color:var(--button-ink); font-size:13px; font-weight:600; transition:transform .2s,box-shadow .2s; }
.primary-link:hover { transform:translateY(-3px); box-shadow:0 6px 20px #29352e1c; }
.button-arrow { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; border:1px solid #b9c5ad55; font-size:21px; font-weight:400; }
.hero-note { display:flex; align-items:center; gap:12px; font-size:8px; letter-spacing:1.4px; color:var(--muted); margin-top:40px; }
.note-line { width:24px; height:1px; background:var(--muted); opacity:.6; }
.hero-art { position:relative; width:100%; background:var(--panel); border-radius:160px 160px 22px 22px; padding:46px 0 0; color:#51614d; }
.art-label { display:flex; align-items:center; justify-content:center; gap:7px; font-size:8px; letter-spacing:2px; }
.art-label-dot { width:4px; height:4px; background:#75856c; border-radius:50%; }
.architecture { display:block; width:100%; height:auto; margin-top:-6px; }
.art-caption { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #87967c30; padding:18px 28px; margin:0 20px; font-size:8px; letter-spacing:1.7px; }
.caption-arrow { font-size:21px; letter-spacing:0; }
.orbit-note { position:absolute; right:-19px; top:52%; font-size:9px; writing-mode:vertical-rl; letter-spacing:1.1px; color:var(--muted); }
.about-section { display:grid; grid-template-columns:1fr 1.06fr auto; align-items:center; column-gap:54px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:33px 0; scroll-margin-top:30px; }
.about-title { display:flex; align-items:center; gap:24px; }
.section-number { font-size:10px; color:var(--accent); align-self:flex-start; padding-top:7px; }
h2 { font-family:Georgia,'Times New Roman',serif; font-size:25px; line-height:1.3; letter-spacing:-.5px; font-weight:400; margin:0; }
.about-section p { max-width:395px; margin:0; font-size:12px; line-height:1.9; color:var(--muted); }
.back-to-top { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font-size:17px; transition:background .2s; }
.back-to-top:hover { background:var(--line); }
.site-footer { display:flex; align-items:center; justify-content:space-between; padding:27px 0 32px; color:var(--muted); font-size:11px; }
.site-footer > span:last-child { font-size:8px; letter-spacing:1px; }
.site-footer > span:last-child span { color:var(--accent); font-size:19px; padding-left:13px; vertical-align:middle; }
@media (min-width:1500px) { .hero { padding-top:88px; padding-bottom:88px; } }
@media (max-width:1050px) { .page-shell { width:calc(100% - 72px); } .hero { gap:30px; padding:55px 0; } h1 { font-size:clamp(42px,5.7vw,64px); letter-spacing:-2.7px; } .hero-art { border-radius:120px 120px 20px 20px; padding-top:35px; } .about-section { column-gap:30px; } .about-title { gap:17px; } }
@media (max-width:760px) { .page-shell { width:calc(100% - 40px); max-width:520px; } .site-header { min-height:89px; } .wordmark { font-size:21px; gap:9px; } .brand-icon { width:33px; height:33px; border-radius:9px; } .brand-icon svg { width:25px; } .site-header nav { gap:15px; } .about-link { font-size:11px; } .about-link span { padding-left:7px; } .theme-button { width:32px; height:32px; } .hero { grid-template-columns:1fr; gap:42px; padding:46px 0 39px; } .eyebrow { font-size:9px; margin-bottom:25px; } h1 { font-size:clamp(44px,10.4vw,62px); letter-spacing:-2.8px; } .hero-description { font-size:14px; margin-top:22px; } .hero-note { margin-top:28px; } .hero-art { width:calc(100% - 8px); margin:0 auto; border-radius:120px 120px 18px 18px; } .art-caption { padding:13px 12px; margin:0 16px; } .orbit-note { right:-14px; font-size:8px; } .about-section { grid-template-columns:1fr auto; gap:23px 15px; padding:29px 0; } .about-title { grid-column:1; } h2 { font-size:25px; } .about-section p { grid-column:1; grid-row:2; padding-left:32px; max-width:370px; } .back-to-top { grid-column:2; grid-row:1; } .site-footer { gap:15px; align-items:flex-start; padding-top:24px; font-size:10px; } .site-footer > span:last-child { max-width:170px; text-align:right; line-height:1.8; font-size:7px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }