:root { color-scheme: light; font-family: Georgia, 'Times New Roman', serif; color: #17324d; background: #eff4f6; }
@font-face { font-family: "Stardos Stencil"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/stardos-stencil-700.ttf") format("truetype"); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; overflow-x: clip; background-color: #eef5f7; background-image: linear-gradient(rgba(49, 93, 117, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(49, 93, 117, .05) 1px, transparent 1px), radial-gradient(circle at 20% 10%, #fff 0, #eff4f6 42%, #dce9ed 100%); background-size: 1.6rem 1.6rem, 1.6rem 1.6rem, auto; }
main { isolation: isolate; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: clamp(1.5rem, 4.5vh, 3.25rem); overflow: visible; padding: clamp(1rem, 3.5vh, 2rem) 2rem 2rem; position: relative; }
.construction-scene { animation: sceneFloat 7s ease-in-out infinite alternate; bottom: -1.5rem; height: auto; left: 50%; max-width: none; pointer-events: none; position: absolute; transform: translateX(-50%); width: min(94rem, 112vw); z-index: -1; }
.mission-banner { position: relative; z-index: 0; flex: none; width: min(90vw, 40rem); margin: 0; padding: .78rem 1.35rem .86rem; background-color: #f6d57a; background-image: linear-gradient(115deg, rgba(255, 255, 255, .3), transparent 42%), linear-gradient(0deg, rgba(135, 84, 21, .07), transparent 46%, rgba(255, 255, 255, .13)); border: .12rem solid #8e642c; border-radius: .07rem; box-shadow: .22rem .3rem 0 rgba(23, 50, 77, .16), 0 .55rem 1.1rem rgba(23, 50, 77, .16); color: #17324d; font: 700 clamp(1.05rem, 3.25vw, 1.6rem)/1.12 "Stardos Stencil", "Stencil Std", Impact, sans-serif; letter-spacing: .075em; text-align: center; text-shadow: .03em .03em 0 rgba(115, 72, 21, .15); text-transform: uppercase; transform: rotate(-1.25deg); }
.mission-banner span { display: inline-block; white-space: nowrap; }
.mission-banner span:first-child { transform: rotate(-.35deg); }
.mission-banner span:last-child { transform: rotate(.45deg); }
.mission-banner::before, .mission-banner::after { position: absolute; top: -.48rem; width: 4.6rem; height: .9rem; background: rgba(215, 184, 111, .75); content: ""; }
.mission-banner::before { left: 7%; transform: rotate(-6deg); }
.mission-banner::after { right: 7%; transform: rotate(5deg); }
.card { position: relative; z-index: 1; width: min(100%, 42rem); padding: clamp(2rem, 8vw, 4.5rem); background: rgba(255, 255, 255, .95); border: 1px solid #c1d3db; border-radius: 1rem; box-shadow: 0 1.25rem 4rem rgba(23, 50, 77, .13); text-align: center; }
.eyebrow { margin: 0 0 1rem; color: #55768c; font: 700 .78rem/1.2 system-ui, sans-serif; letter-spacing: .17em; text-transform: uppercase; }
h1 { margin: 0; color: #1f446b; font-size: clamp(2.5rem, 9vw, 4.6rem); line-height: .98; text-shadow: 0 .08rem 0 #f3be3b; }
.subtitle { margin: 1.4rem 0 .7rem; font: 600 1.2rem/1.4 system-ui, sans-serif; color: #315d75; }
p:not(.eyebrow):not(.mission-banner) { max-width: 35rem; margin: .7rem auto; font-size: 1.08rem; line-height: 1.65; }
nav { display: grid; gap: .75rem; margin-top: 2rem; }
a { display: block; padding: .85rem 1rem; border: 1px solid #6c99ab; border-radius: .45rem; color: #17324d; font: 600 .96rem/1.35 system-ui, sans-serif; text-decoration: none; }
a:hover, a:focus-visible { background: #1f446b; border-color: #1f446b; color: #fff; outline: none; }
@keyframes sceneFloat { from { margin-bottom: 0; } to { margin-bottom: .45rem; } }
@media (prefers-reduced-motion: reduce) { .construction-scene { animation: none; } }
@media (max-height: 34rem) { main { justify-content: flex-start; gap: 1.5rem; padding-block: 1.5rem; } }
@media (max-width: 50rem) { .construction-scene { bottom: -1rem; width: 70rem; } }
@media (max-width: 32rem) { main { gap: clamp(1.5rem, 5vh, 2.25rem); padding: 1rem; } .card { padding: 2.25rem 1.5rem; } .construction-scene { bottom: -.25rem; width: 49rem; } }