:root { --ink:#153b3d; --green:#5f8f72; --cream:#f8f3e7; --sand:#e9c66e; --water:#287388; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Arial, Helvetica, sans-serif; }
.hero { min-height:100vh; padding:clamp(2rem,5vw,4rem) 1.5rem 2.5rem; display:flex; flex-direction:column; align-items:center; text-align:center; overflow:hidden; background:linear-gradient(rgba(248,243,231,.62),rgba(248,243,231,.67)), url('assets/hero-background.svg') center/cover no-repeat; }
.compass-mark { color:var(--sand); font-size:1.4rem; line-height:1; }
.eyebrow { margin:1rem 0 .55rem; color:var(--green); font-size:.74rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
h1,h2 { margin:0; font-family:Georgia, 'Times New Roman', serif; font-weight:500; line-height:1.06; }
h1 { max-width:850px; font-size:clamp(2.5rem,7vw,5.8rem); }
.intro { margin:.9rem 0 1rem; font-size:clamp(1rem,2vw,1.25rem); }
.emblem { width:min(88vw,790px); max-width:100%; max-height:65vh; margin:0.25rem auto .8rem; object-fit:contain; filter:drop-shadow(0 18px 18px rgba(21,59,61,.16)); }
.scroll-link { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--green); padding:.3rem .1rem; font-size:.95rem; transition:color .2s,border-color .2s; }
.scroll-link:hover { color:var(--water); border-color:var(--water); }
.scroll-link span { margin-left:.35rem; font-size:1.2rem; }
.more { min-height:48vh; padding:clamp(4rem,10vw,8rem) max(1.5rem,10vw); display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:center; background:var(--ink); color:var(--cream); }
.more .eyebrow { color:var(--sand); margin-top:0; }
h2 { font-size:clamp(2.2rem,5vw,4.4rem); }
.note { max-width:28ch; margin:0; padding-left:2rem; border-left:2px solid var(--sand); font-family:Georgia, 'Times New Roman', serif; font-size:clamp(1.25rem,2.2vw,1.7rem); line-height:1.45; }
footer { padding:1.4rem; text-align:center; color:#e3eee9; background:#0e292a; font-size:.82rem; }
@media (max-width:650px) { .hero { min-height:auto; } .emblem { width:100%; max-width:100%; height:auto; max-height:none; } .more { grid-template-columns:1fr; gap:2rem; } .note { padding-left:1.3rem; } }