:root{--orange:#f7a36a;--white:#f4efe9;--bg:#0a0b10}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--white);font-family:"Courier New",monospace;letter-spacing:.12em}a{color:inherit;text-decoration:none}header{position:absolute;z-index:10;inset:0 0 auto;height:7.2vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 5.5vw;background:linear-gradient(#06070bd9,transparent)}
.brand{display:flex;align-items:center;gap:1.3vw;letter-spacing:.5em}.brand img{width:4.2vw;height:4.2vw;object-fit:contain}nav{display:flex;gap:3vw;font-size:.7cqw;text-transform:uppercase}header>p{text-align:right;font-size:.7cqw;letter-spacing:.4em}
.hero {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;

    background-image: url('spaceport-background-hires.jpg');
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;

    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 45%;

    background: linear-gradient(
        to bottom,
        rgba(10, 11, 16, 0) 0%,
        rgba(10, 11, 16, 0.15) 25%,
        rgba(10, 11, 16, 0.45) 55%,
        rgba(10, 11, 16, 0.85) 82%,
        #0a0b10 100%
    );

    pointer-events: none;
    z-index: 1;
}
.copy{position:absolute;z-index:2;left:12%;top:24%;text-shadow:0 3px 15px #000}.copy h1{font-size:4.2cqw;font-weight:400;line-height:.9;letter-spacing:.36em}
.copy p{font-size:.8vw;line-height:1.8}.copy>a{display:inline-block;margin-top:1vw;padding:.9vw 1.2vw;background:#f58d54;color:#171014;font-size:.7cqw}
/* The map is locked to the exact background coordinate system. The inner plane carries the perspective. */
.board-map{position:absolute;z-index:4;left:69.0%;top:11.8%;width:27.0%;height:19.7%;pointer-events:none;perspective:1200px;transform-style:preserve-3d}
.board-plane{position:absolute;inset:0;padding:8.8% 8.4% 6.5% 7.4%;pointer-events:auto;transform-origin:0 0;transform:translate(13px,0) perspective(900px) rotateZ(-4deg) rotateY(-3deg) rotateX(.6deg) skewX(-4deg) skewY(-.88deg) scaleX(.99);color:#f2a16c;text-shadow:0 0 .3vw #ed7a3a25;font-size:clamp(7px,.62vw,13px);letter-spacing:.12em}
.board-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:3%;border-bottom:1px solid #a35b323f}
.board-head b{font-size:1.12em;font-weight:400}.board-head time{font-size:.9em}.board-plane ol{padding:0;margin:2.2% 0 0;list-style:none}
.board-plane li{border-bottom:1px solid #ffffff0d}.board-plane li a{height:2.35em;display:grid;grid-template-columns:.75em 1fr auto;gap:.9em;align-items:center}
.board-plane i{width:.52em;height:.52em;border-radius:50%;background:#786863}
.board-plane .hot i{background:#ffad58;box-shadow:0 0 .7em #ff773c}
.board-plane em{font-style:normal}
.board-plane .hot em{color:#ffb16c}
.archive{display:flex;justify-content:space-between;margin-top:4%;font-size:.9em}
.archive span{font-size:1.35em}.board-plane a:hover{color:#ffd0ac}.content{max-width:1200px;margin:auto;padding:7vw 6vw;border-top:1px solid #ffffff24}
.content small{color:var(--orange)}.content h2{font-size:3vw;font-weight:400;text-transform:uppercase}.content p{color:#c9c1bc;line-height:1.8}
.links{display:flex;gap:2vw}.links a{color:var(--white)}
@media(max-width:700px){header{height:70px;padding:0 20px;grid-template-columns:1fr auto}.brand img{width:44px;height:44px}.brand span{font-size:11px}header>p{display:none}nav{font-size:9px;gap:12px}.hero{aspect-ratio:auto;min-height:900px;background-size:auto 100%;background-position:58% center}.copy{left:22px;top:130px}.copy h1{font-size:50px}.copy p{font-size:12px}.copy>a{font-size:10px;padding:12px}.board-map{left:20px;right:20px;top:auto;bottom:70px;width:auto;height:225px;perspective:none;background:#0b0b0fe8;border:1px solid #5a372a}.board-plane{inset:0;padding:18px;transform:none;font-size:10px}.content{padding:70px 25px}.content h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}