@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root { --ink:#183f38; --ink-soft:#47665e; --paper:#f8f7f1; --cream:#f0efe7; --line:#dbe4dc; --mint:#b6d7c4; --mint-deep:#90bea6; --yellow:#f5bf55; --white:#fffefa; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.section-shell { width:min(1180px, calc(100% - 64px)); margin-inline:auto; }
.site-header { height:88px; width:min(1240px, calc(100% - 64px)); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:700; letter-spacing:-.04em; }
.brand-mark { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; color:var(--paper); background:var(--ink); font-size:14px; }
.brand-accent { color:#d69a29; }
.main-nav { display:flex; gap:31px; margin-left:auto; color:var(--ink-soft); font-size:13px; }
.main-nav a:hover, .source-links a:hover { color:#bb7b19; }
.nav-pill { border:1px solid var(--ink); padding:10px 15px; border-radius:99px; font-size:12px; font-weight:600; transition:.2s ease; }
.nav-pill:hover { background:var(--ink); color:var(--paper); }
.hero { min-height:530px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:62px 0 78px; }
.eyebrow { margin:0 0 20px; color:#658278; font-family:'DM Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.13em; }
.eyebrow-dot { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--yellow); }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-weight:500; letter-spacing:-.055em; line-height:1.03; }
h1 { max-width:620px; margin-bottom:24px; font-size:clamp(48px, 6vw, 77px); }
h1 em, h2 em { color:#ae7624; font-family:'Playfair Display',serif; font-weight:500; }
.hero-text { max-width:510px; color:var(--ink-soft); font-size:18px; line-height:1.6; }
.hero-actions { display:flex; align-items:center; gap:20px; margin-top:34px; }
.button { display:inline-flex; gap:18px; align-items:center; padding:14px 18px; border-radius:2px; font-size:13px; font-weight:600; }
.button-primary { background:var(--ink); color:var(--paper); }
.button-primary:hover { background:#2d6256; }
.quiet-note { color:#758d84; font-family:'DM Mono',monospace; font-size:10px; }
.hero-art { position:relative; height:400px; overflow:hidden; border-radius:2px; background:var(--mint); }
.sun-disc { position:absolute; width:260px; height:260px; right:-34px; top:-49px; border-radius:50%; background:#d7e5cf; }
.orbit { position:absolute; border:1px solid rgba(24,63,56,.18); border-radius:50%; transform:rotate(-29deg); }
.orbit-one { width:470px; height:184px; top:43px; left:-82px; }
.orbit-two { width:500px; height:210px; top:18px; left:-43px; }
.chart-card { position:absolute; z-index:2; right:51px; top:75px; width:330px; padding:18px 19px 15px; background:var(--white); box-shadow:0 19px 45px rgba(24,63,56,.12); }
.chart-card-top, .chart-labels { display:flex; justify-content:space-between; align-items:center; color:#789188; font-family:'DM Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.chart-dot { width:7px; height:7px; border-radius:50%; background:var(--yellow); }
.chart-card svg { display:block; width:100%; margin-top:11px; }
.compass { position:absolute; z-index:3; bottom:48px; left:55px; width:128px; height:128px; border:1px solid rgba(24,63,56,.45); border-radius:50%; background:rgba(248,247,241,.63); box-shadow:0 12px 28px rgba(24,63,56,.08); }
.compass:before, .compass:after { position:absolute; content:''; background:rgba(24,63,56,.25); }
.compass:before { width:1px; height:100%; left:50%; top:0; } .compass:after { width:100%; height:1px; left:0; top:50%; }
.compass i { position:absolute; left:45px; top:17px; width:38px; height:90px; background:var(--ink); clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transform:rotate(37deg); }
.compass i:after { content:''; position:absolute; left:7px; top:46px; width:24px; height:45px; background:var(--yellow); clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.compass-n,.compass-s,.compass-e,.compass-w { position:absolute; z-index:2; font:500 9px 'DM Mono',monospace; } .compass-n {top:10px;left:59px}.compass-s{bottom:10px;left:59px}.compass-e{right:10px;top:58px}.compass-w{left:10px;top:58px}
.art-tag { position:absolute; z-index:4; padding:6px 9px; border:1px solid rgba(24,63,56,.4); border-radius:99px; background:var(--paper); font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }
.tag-one { top:44px; left:52px; transform:rotate(-8deg); }.tag-two { right:39px; bottom:38px; transform:rotate(5deg); background:var(--yellow); border-color:var(--yellow); }
.trust-strip { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; }
.trust-strip > div { display:flex; align-items:center; gap:15px; padding:0 26px; border-right:1px solid var(--line); }.trust-strip > div:first-child {padding-left:0}.trust-strip > div:last-child {border:0}
.strip-icon { display:grid; place-items:center; width:37px; height:37px; color:#ad772a; border:1px solid #e0bd77; border-radius:50%; font-size:18px; }.trust-strip p { margin:0; color:#7b9289; font-size:12px; line-height:1.45; }.trust-strip strong { color:var(--ink); font-size:13px; }
.fundamentals { padding:120px 0 135px; }.section-intro { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:80px; margin-bottom:43px; }.section-intro .eyebrow { margin-bottom:15px; }.section-intro h2 { max-width:530px; margin:0; font-size:clamp(37px, 4vw, 56px); }.section-intro > p { max-width:450px; margin:0 0 4px; color:var(--ink-soft); font-size:16px; }
.topic-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }.topic-card { min-height:360px; padding:24px 21px; border:1px solid var(--line); background:var(--white); }.topic-featured { background:var(--ink); color:var(--paper); border-color:var(--ink); }.card-number { color:#9aafa5; font:10px 'DM Mono',monospace; }.topic-featured .card-number {color:#a8c9b7}.topic-icon { margin:26px 0 20px; color:#bb7f26; font-size:29px; line-height:1; }.topic-featured .topic-icon{color:var(--yellow)}.topic-card h3 { margin-bottom:11px; font-size:20px; letter-spacing:-.04em; }.topic-card > p { color:var(--ink-soft); font-size:13px; line-height:1.55; }.topic-featured > p { color:#c2d5ca; }
details { margin-top:19px; border-top:1px solid var(--line); padding-top:13px; } .topic-featured details {border-color:#426c60} summary { cursor:pointer; list-style:none; color:#a5722a; font:10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.07em; } summary::-webkit-details-marker {display:none} summary:after { content:' +'; } details[open] summary:after{content:' −'} details p { margin:10px 0 0; color:var(--ink-soft); font-size:12px; }.topic-featured details p{color:#c2d5ca}
.route { display:grid; grid-template-columns:.82fr 1.18fr; gap:100px; padding:96px 0; background:var(--cream); }.route:before {content:'';position:absolute}.route-heading h2 { margin:0; font-size:clamp(39px,4.5vw,62px); }.route-list { border-top:1px solid #cfdad2; }.route-step { display:grid; grid-template-columns:44px 1fr 25px; gap:14px; align-items:start; padding:27px 0; border-bottom:1px solid #cfdad2; }.route-step > span { color:#a5722a; font:11px 'DM Mono',monospace; }.route-step h3 { margin-bottom:6px; font-size:18px; letter-spacing:-.035em; }.route-step p { margin:0; color:var(--ink-soft); font-size:13px; }.route-step b { font-weight:400; color:#a5722a; font-size:22px; }
.vocabulary { padding:125px 0 110px; display:grid; grid-template-columns:.75fr 1.25fr; gap:90px; }.vocab-intro h2, .sources-copy h2 { margin:0 0 18px; font-size:clamp(38px,4vw,55px); }.vocab-intro > p:last-child, .sources-copy > p:last-child { color:var(--ink-soft); max-width:340px; font-size:15px; }.vocab-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 40px; border-top:1px solid var(--line); }.term { padding:22px 0 19px; border-bottom:1px solid var(--line); }.term h3 { margin-bottom:7px; font-size:16px; }.term p { margin:0; color:var(--ink-soft); font-size:13px; line-height:1.5; }
.notice { display:flex; gap:22px; padding:29px 35px; border:1px solid #dfc47f; background:#fbf4df; }.notice-symbol { display:grid; place-items:center; flex:none; width:30px; height:30px; border:1px solid #b7862d; border-radius:50%; color:#9c6b1e; font-family:Georgia,serif; font-style:italic; }.notice h2 { margin-bottom:8px; font-size:18px; letter-spacing:-.03em; }.notice p { max-width:960px; margin:0; color:#6f6750; font-size:13px; }
.sources { display:grid; grid-template-columns:1fr 1fr; gap:100px; padding:110px 0 125px; }.source-links { border-top:1px solid var(--line); }.source-links a { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); font-size:14px; font-weight:600; }.source-links small { color:#7e958b; font:10px 'DM Mono',monospace; text-align:right; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:25px 0 35px; border-top:1px solid var(--line); }.site-footer p, .footer-note { margin:0; color:#7e958b; font:10px 'DM Mono',monospace; }.site-footer .brand {font-size:16px}.site-footer .brand-mark{width:23px;height:23px;font-size:11px}
@media (max-width:900px) { .main-nav{display:none}.hero{grid-template-columns:1fr;gap:30px;padding-top:55px}.hero-art{height:360px}.topic-grid{grid-template-columns:1fr 1fr}.section-intro,.vocabulary,.sources{grid-template-columns:1fr;gap:32px}.route{grid-template-columns:1fr;gap:45px}.vocabulary{padding-top:90px}.sources{padding-top:90px} }
@media (max-width:600px) { .section-shell,.site-header{width:min(100% - 36px,1180px)}.site-header{height:72px}.nav-pill{padding:8px 11px;font-size:10px}.hero{padding:48px 0 55px;min-height:0}.hero-text{font-size:16px}.hero-actions{align-items:flex-start;flex-direction:column;gap:13px}.hero-art{height:310px}.chart-card{right:21px;top:58px;width:270px}.compass{bottom:22px;left:25px;transform:scale(.8);transform-origin:bottom left}.tag-one{top:25px;left:27px}.tag-two{right:17px;bottom:19px}.trust-strip{grid-template-columns:1fr;gap:16px;padding:20px 0}.trust-strip>div{border:0;padding:0}.fundamentals{padding:82px 0}.topic-grid{grid-template-columns:1fr}.topic-card{min-height:0}.route{padding:70px 0}.vocab-grid{grid-template-columns:1fr}.notice{padding:23px 19px;gap:14px}.sources{padding:75px 0 85px;gap:35px}.source-links a{align-items:flex-start;flex-direction:column;gap:5px}.source-links small{text-align:left}.site-footer{align-items:flex-start;flex-direction:column;gap:13px;padding-bottom:25px}.footer-note{font-size:9px} }