:root {
    color-scheme: dark;
    --bg: #09090d;
    --surface: #111218;
    --surface-light: #171820;
    --line: rgba(255,255,255,.1);
    --muted: #a2a3af;
    --text: #f4f2f4;
    --red: #fa4052;
    --blue: #69c8f4;
    --mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    --sans: Inter, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
    margin: 0;
    min-width: 320px;
    background:
        radial-gradient(ellipse at 83% 12%, rgba(250,64,82,.09), transparent 32rem),
        var(--bg);
    color: var(--text);
    font-family: var(--sans);
    line-height: 1.6;
}
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
img { max-width: 100%; }
.wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--line);
    background: rgba(9,9,13,.82);
    backdrop-filter: blur(18px);
}
.nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 850; letter-spacing: .07em; font-size: .9rem; }
.brand img { width: 35px; height: 35px; object-fit: contain; border-radius: 6px; }
.brand-muted { color: #9b9ba5; font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 25px; }
.nav-links a { color: #c4c2cc; text-decoration: none; font-size: .82rem; transition: color .2s; }
.nav-links a:hover { color: white; }
.nav-links .nav-cta { padding: 8px 14px; border: 1px solid rgba(250,64,82,.46); border-radius: 5px; color: white; background: rgba(250,64,82,.13); }
.language-switch { display: inline-flex; align-items: center; gap: 5px; color: #777680; font: 700 .7rem var(--mono); white-space: nowrap; }
.language-switch button { padding: 4px 2px; border: 0; background: transparent; color: #a2a3af; cursor: pointer; font: inherit; }
.language-switch button[aria-pressed="true"] { color: var(--text); }
.language-switch button:hover { color: white; }
.language-switch button:focus-visible { outline: 1px solid var(--red); outline-offset: 2px; }
.home-hero { position: relative; min-height: 630px; display: grid; align-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.home-hero::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(9,9,13,.2), rgba(9,9,13,.88) 74%), radial-gradient(ellipse at 24% 48%, rgba(250,64,82,.16), transparent 29rem);
    content: "";
    pointer-events: none;
}
.hero-layout { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 55px; padding-block: 45px; }
.hero-art { position: relative; min-height: 435px; display: grid; place-items: center; }
.hero-orbit { position: absolute; width: min(34vw, 400px); aspect-ratio: 1; border: 1px solid rgba(250,64,82,.18); border-radius: 50%; box-shadow: 0 0 90px rgba(250,64,82,.1), inset 0 0 75px rgba(250,64,82,.06); animation: orbit-pulse 5s ease-in-out infinite; }
.hero-orbit::before, .hero-orbit::after { position: absolute; inset: 10%; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; content: ""; }
.hero-orbit::after { inset: 21%; border-color: rgba(250,64,82,.12); }
.hero-logo { position: relative; z-index: 1; width: min(30vw, 360px); height: 360px; object-fit: contain; filter: drop-shadow(0 16px 40px rgba(0,0,0,.55)); opacity: 1; transform: scale(1); transition: opacity .45s ease, transform .45s ease; }
.hero-logo.is-changing { opacity: 0; transform: scale(.94); }
.eyebrow { color: #ff6572; font: 700 .7rem var(--mono); letter-spacing: .15em; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 14px var(--red); }
.hero-copy h1 { margin: 15px 0 17px; font-size: clamp(3.7rem, 7vw, 6.7rem); line-height: .94; letter-spacing: -.075em; }
.hero-copy h1 span { color: var(--red); }
.hero-copy > p { max-width: 520px; color: #b8b5c0; font-size: 1.04rem; }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 11px; padding: 0 18px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; font-size: .85rem; font-weight: 750; transition: transform .2s, border-color .2s, background .2s; }
.button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
.button-primary { margin-top: 13px; border-color: var(--red); background: var(--red); color: white; box-shadow: 0 8px 25px rgba(250,64,82,.2); }
.button-primary:hover { border-color: #ff7c88; background: #ff5263; }
.hero-meta { display: flex; align-items: center; gap: 13px; margin-top: 38px; color: #888792; font: .62rem var(--mono); letter-spacing: .08em; }
.hero-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--red); }
.scroll-cue { position: absolute; bottom: 22px; left: 50%; width: 22px; height: 29px; display: grid; justify-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 12px; }
.scroll-cue span { width: 3px; height: 7px; margin-top: 5px; border-radius: 3px; background: var(--red); animation: scroll-nudge 1.6s ease-in-out infinite; }
.systems-section { padding: 91px 0 104px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 25px; }
.section-heading h2 { margin: 10px 0 0; font-size: clamp(2.4rem, 4.5vw, 4rem); line-height: 1.02; letter-spacing: -.065em; }
.section-heading > p { margin: 0 0 5px; color: var(--muted); font-size: .9rem; }
.systems-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); align-items: end; gap: 22px; padding-top: 28px; }
.system-card {
    --glow: rgba(250,64,82,.27);
    position: relative;
    height: 360px;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: visible;
    padding: 19px 20px 16px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    background: linear-gradient(155deg, rgba(255,255,255,.055), transparent 53%), var(--surface);
    box-shadow: 0 18px 45px rgba(0,0,0,.3);
    text-decoration: none;
    transition: transform .3s, border-color .3s, box-shadow .3s;
}
.system-card::after { position: absolute; z-index: -1; inset: 15% -4% -8%; border-radius: 50%; background: var(--glow); filter: blur(50px); opacity: .24; content: ""; transition: opacity .3s; }
.system-card:hover { z-index: 2; transform: translateY(-9px); border-color: var(--card-color); box-shadow: 0 24px 55px rgba(0,0,0,.4), 0 0 28px var(--glow); }
.system-card:hover::after { opacity: .55; }
.alpine-card { --card-color: #73c7ee; --glow: rgba(77,176,226,.28); }
.arch-card { --card-color: #fa4052; --glow: rgba(250,64,82,.3); }
.tempest-card { --card-color: #5ccbf2; --glow: rgba(67,174,219,.3); }
.card-kicker { position: relative; z-index: 2; color: #b4b1bd; font: 700 .61rem var(--mono); letter-spacing: .1em; }
.card-kicker b { color: var(--card-color); font-weight: 700; }
.card-logo { position: absolute; z-index: 2; top: 48%; left: 50%; width: 112px; height: 112px; object-fit: contain; opacity: .88; pointer-events: none; transform: translate(-50%,-50%); transition: opacity .25s, scale .25s; }
.system-card:hover .card-logo { opacity: 1; scale: 1.08; }
.alpine-logo { width: 104px; height: 104px; }
.arch-logo { width: 112px; height: 112px; }
.tempest-logo { width: 110px; height: 110px; }
.card-bottom { position: relative; z-index: 2; display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 188px; }
.card-bottom strong { font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.04; letter-spacing: -.04em; }
.card-arrow { display: grid; width: 35px; height: 35px; flex: 0 0 35px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--card-color); transition: background .2s, transform .2s; }
.system-card:hover .card-arrow { background: rgba(255,255,255,.07); transform: rotate(45deg); }
.card-note { position: relative; z-index: 2; margin-top: 12px; color: #82818d; font: .57rem var(--mono); letter-spacing: .08em; }
.coming-row { display: flex; justify-content: center; margin-top: 34px; }
.coming-card { display: flex; min-width: min(100%, 360px); min-height: 80px; align-items: center; gap: 14px; padding: 14px 20px; border: 1px dashed rgba(255,255,255,.17); border-radius: 8px; background: rgba(255,255,255,.018); color: #b2b0ba; }
.coming-mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: #85838d; font-size: 1.2rem; }
.coming-card b { display: block; font: 700 .71rem var(--mono); letter-spacing: .1em; }
.coming-card small { display: block; margin-top: 3px; color: #777680; font-size: .74rem; }
.coming-signal { margin-left: auto; color: #777680; font-size: .48rem; letter-spacing: .25em; }
.site-footer { border-top: 1px solid var(--line); background: rgba(0,0,0,.15); }
.footer-inner { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #888792; font: .62rem var(--mono); letter-spacing: .06em; }
.footer-brand { color: var(--text); font: 800 .76rem var(--sans); }
.footer-brand img { width: 29px; height: 29px; }
.footer-inner > a:last-child { text-decoration: none; }

/* Shared detail pages */
.detail-page { --page-accent: var(--red); --page-glow: rgba(250,64,82,.12); }
.detail-page.alpine-theme { --page-accent: #71c7ef; --page-glow: rgba(86,187,231,.13); }
.detail-page.tempest-theme { --page-accent: #62c8ef; --page-glow: rgba(78,187,226,.13); }
.detail-page { background-image: radial-gradient(ellipse at 82% 8%, var(--page-glow), transparent 34rem); }
.detail-hero { position: relative; overflow: hidden; padding: 76px 0 65px; border-bottom: 1px solid var(--line); }
.detail-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 35px; }
.detail-title h1 { margin: 13px 0; font-size: clamp(3rem, 7vw, 5.6rem); line-height: .97; letter-spacing: -.07em; }
.detail-title h1 span { color: var(--page-accent); }
.detail-title p { max-width: 580px; color: #b4b2bd; }
.detail-art { position: relative; height: 330px; display: grid; place-items: center; }
.detail-art::before { position: absolute; width: 280px; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--page-accent) 38%, transparent); border-radius: 50%; box-shadow: 0 0 70px var(--page-glow), inset 0 0 50px var(--page-glow); content: ""; }
.detail-art .detail-logo { position: absolute; z-index: 2; right: 0; bottom: 5px; width: 82px; height: 82px; border: 1px solid var(--line); border-radius: 50%; background: #0e0f14; object-fit: contain; animation: none; }
.detail-art .detail-logo { top: 50%; right: auto; bottom: auto; left: 50%; width: 220px; height: 220px; border: 0; border-radius: 0; background: transparent; filter: drop-shadow(0 15px 30px rgba(0,0,0,.48)); transform: translate(-50%,-50%); }
.page-section { padding: 73px 0; border-bottom: 1px solid var(--line); }
.page-heading { margin-bottom: 25px; }
.page-heading h2 { margin: 8px 0 0; font-size: clamp(2rem, 4.5vw, 3.3rem); line-height: 1.05; letter-spacing: -.06em; }
.page-heading p { max-width: 630px; margin: 12px 0 0; color: var(--muted); }
.release-feature { width: min(590px,100%); margin: 0 auto 22px; padding: 24px; border: 1px solid color-mix(in srgb, var(--page-accent) 50%, transparent); border-radius: 9px; background: linear-gradient(145deg, var(--page-glow), transparent 65%), var(--surface); text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.22); }
.release-feature .release-logo { width: 88px; height: 88px; object-fit: contain; }
.release-feature h3 { margin: 4px 0 5px; color: var(--page-accent); font-size: 1.5rem; }
.release-feature p { margin: 0 auto; max-width: 440px; color: var(--muted); font-size: .87rem; }
.release-label { display: inline-block; margin-top: 13px; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--page-accent) 44%, transparent); border-radius: 4px; color: var(--page-accent); font: 700 .62rem var(--mono); letter-spacing: .1em; }
.release-link { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; margin-top: 14px; padding: 0 13px; border: 1px solid var(--page-accent); border-radius: 5px; color: var(--text); background: color-mix(in srgb, var(--page-accent) 13%, transparent); text-decoration: none; font-size: .78rem; font-weight: 700; }
.release-link:hover { background: color-mix(in srgb, var(--page-accent) 25%, transparent); }
.old-releases { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.old-release { min-height: 175px; display: flex; flex-direction: column; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); transition: transform .2s, border-color .2s; }
.old-release:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.24); }
.old-release .release-label { margin: 0; color: #aaa8b2; border-color: var(--line); }
.old-release h3 { margin: 16px 0 3px; font-size: 1.1rem; }
.old-release p { margin: 0; color: var(--muted); font-size: .79rem; }
.old-release .release-link { margin-top: auto; }
.story-list { display: grid; gap: 18px; }
.story-card { display: grid; grid-template-columns: minmax(190px,.72fr) 1.28fr; align-items: center; gap: 30px; min-height: 270px; padding: 22px 30px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(115deg, var(--page-glow), transparent 47%), var(--surface); }
.story-card:nth-child(even) { grid-template-columns: 1.28fr minmax(190px,.72fr); }
.story-card:nth-child(even) .story-art { order: 2; }
.story-art { position: relative; height: 220px; display: grid; place-items: center; }
.story-art::before { position: absolute; width: 185px; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--page-accent) 30%, transparent); border-radius: 50%; content: ""; }
.story-art img { position: relative; width: 180px; height: 210px; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(0,0,0,.5)); }
.story-copy .eyebrow { color: var(--page-accent); font-size: .64rem; }
.story-copy h3 { margin: 8px 0; font-size: 1.6rem; line-height: 1.12; letter-spacing: -.04em; }
.story-copy p { margin: 0; color: #aaa8b2; font-size: .9rem; }
.story-copy p + p { margin-top: 9px; }
.faq-list { display: grid; gap: 9px; }
.faq-list details { padding: 17px 19px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.faq-list summary { cursor: pointer; font-weight: 700; }
.faq-list summary::marker { color: var(--page-accent); }
.faq-list details p { margin: 10px 0 0; color: var(--muted); font-size: .87rem; }
.single-card { position: relative; min-height: 300px; display: grid; grid-template-columns: .65fr 1.35fr; align-items: center; gap: 30px; padding: 27px 34px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--page-accent) 45%, transparent); border-radius: 10px; background: linear-gradient(120deg, var(--page-glow), transparent 70%), var(--surface); }
.single-card-art { position: relative; height: 250px; display: grid; place-items: center; }
.single-card-art img { position: relative; z-index: 1; width: auto; height: 250px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 12px 26px rgba(0,0,0,.45)); }
.single-card-copy h2 { margin: 8px 0; color: var(--page-accent); font-size: 1.8rem; line-height: 1.1; }
.single-card-copy p { max-width: 580px; color: #aaa8b2; }
.info-grid, .mode-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.mode-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.info-card { min-height: 190px; padding: 21px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg,var(--page-glow),transparent 70%),var(--surface); }
.info-index { display: block; color: var(--page-accent); font: 700 .64rem var(--mono); letter-spacing: .09em; }
.info-card h3 { margin: 13px 0 7px; font-size: 1.08rem; line-height: 1.2; }
.info-card p { margin: 0; color: var(--muted); font-size: .84rem; }
.info-card code, .boot-step code { color: var(--page-accent); font: .78rem var(--mono); overflow-wrap: anywhere; }
.spec-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.spec-card { min-height: 116px; padding: 17px 18px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg,var(--page-glow),transparent 75%),var(--surface); }
.spec-card h3 { margin: 9px 0 2px; font-size: .98rem; }
.spec-card p { margin: 0; color: var(--muted); font-size: .78rem; }
.category-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.category-chip { display: flex; min-height: 47px; align-items: center; padding: 10px 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: #c7c5cf; font-size: .78rem; }
.info-callout { display: flex; align-items: center; gap: 21px; margin-top: 18px; padding: 20px 24px; border: 1px solid color-mix(in srgb,var(--page-accent) 35%,transparent); border-radius: 8px; background: var(--surface); }
.callout-logo { width: 66px; height: 66px; flex: 0 0 66px; object-fit: contain; }
.info-callout h3 { margin: 4px 0; font-size: 1.1rem; }
.info-callout p { margin: 0; color: var(--muted); font-size: .84rem; }
.closing-line { margin: 28px 0 4px; color: var(--page-accent); font-weight: 750; }
.terminal-note { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 7px; background: #0c0d12; }
.terminal-note code { display: block; margin-top: 7px; color: var(--green); font: .78rem var(--mono); overflow-wrap: anywhere; }
.terminal-note p { max-width: 520px; margin: 0; color: var(--muted); font-size: .78rem; }
.boot-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.boot-step { padding: 19px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.boot-step > span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid color-mix(in srgb,var(--page-accent) 45%,transparent); border-radius: 50%; color: var(--page-accent); font: .7rem var(--mono); }
.boot-step h3 { margin: 13px 0 5px; font-size: .98rem; }
.boot-step p { margin: 0; color: var(--muted); font-size: .82rem; }
.issue-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.issue-card { padding: 22px; border: 1px solid rgba(255,185,87,.22); border-radius: 8px; background: linear-gradient(145deg,rgba(255,185,87,.055),transparent 60%),var(--surface); }
.issue-status { display: inline-flex; padding: 5px 8px; border: 1px solid rgba(255,185,87,.3); border-radius: 4px; color: #ffc16b; font: 700 .59rem var(--mono); letter-spacing: .06em; }
.issue-card h3 { margin: 14px 0 7px; font-size: 1.13rem; line-height: 1.25; }
.issue-card h4 { margin: 18px 0 7px; color: #dedbe2; font-size: .82rem; }
.issue-card p { color: var(--muted); font-size: .82rem; }
.issue-card code { color: #ffd08f; font: .76rem var(--mono); overflow-wrap: anywhere; }
.issue-card pre { overflow-x: auto; margin: 15px 0; padding: 13px; border: 1px solid var(--line); border-radius: 5px; background: #090a0d; }
.issue-card ul { margin: 0; padding-left: 19px; color: var(--muted); font-size: .8rem; }
.issue-card li + li { margin-top: 5px; }
.roadmap-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.roadmap-item { display: flex; align-items: flex-start; gap: 13px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.roadmap-item span { color: var(--page-accent); font: 700 .7rem var(--mono); }
.roadmap-item p { margin: 0; color: #c5c2cc; font-size: .82rem; }
.tempest-motto { color: var(--page-accent) !important; font-weight: 750; }
.detail-back { display: inline-flex; margin-top: 14px; color: var(--page-accent); text-decoration: none; font-size: .85rem; font-weight: 700; }
.detail-back:hover { text-decoration: underline; }

.reveal { opacity: 1; transform: none; }
.has-motion .reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
.has-motion .reveal.is-visible { opacity: 1; transform: translateY(0); }
.has-motion .systems-grid .reveal:nth-child(2) { transition-delay: .1s; }
.has-motion .systems-grid .reveal:nth-child(3) { transition-delay: .2s; }
@keyframes orbit-pulse { 0%,100% { scale: .98; opacity: .72; } 50% { scale: 1.03; opacity: 1; } }
@keyframes scroll-nudge { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(8px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .has-motion .reveal { opacity: 1; transform: none; }
}
@media (max-width: 850px) {
    .nav-links { gap: 14px; }
    .hero-layout { gap: 25px; }
    .hero-art { min-height: 365px; }
    .hero-logo { width: min(34vw, 325px); height: 360px; }
    .systems-grid { gap: 14px; padding-top: 28px; }
    .system-card { padding-inline: 15px; }
    .card-bottom strong { font-size: 1.35rem; }
    .story-card { gap: 17px; padding-inline: 20px; }
    .mode-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .spec-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .category-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 680px) {
    .wrap { width: calc(100% - 32px); }
    .nav { min-height: 64px; gap: 10px; }
    .brand { gap: 7px; font-size: .78rem; }
    .brand img { width: 30px; height: 30px; }
    .nav-links { justify-content: flex-end; gap: 8px 12px; }
    .nav-links a { font-size: .7rem; }
    .nav-links a:nth-child(2), .nav-links a:nth-child(3) { display: none; }
    .language-switch { gap: 3px; font-size: .65rem; }
    .nav-links .nav-cta { padding: 6px 9px; }
    .home-hero { min-height: unset; }
    .hero-layout { grid-template-columns: .75fr 1.25fr; gap: 12px; padding-block: 45px 58px; }
    .hero-art { min-height: 300px; }
    .hero-orbit { width: 52vw; }
    .hero-logo { width: 48vw; height: 300px; }
    .hero-copy h1 { font-size: clamp(3rem, 10vw, 4.4rem); }
    .hero-copy > p { font-size: .87rem; }
    .hero-meta { flex-wrap: wrap; gap: 7px; margin-top: 22px; font-size: .52rem; }
    .systems-section { padding: 65px 0 74px; }
    .section-heading { align-items: flex-start; flex-direction: column; gap: 11px; }
    .section-heading h2 { font-size: 2.8rem; }
    .systems-grid { grid-template-columns: 1fr; gap: 18px; padding-top: 28px; }
    .system-card { width: min(100%, 420px); height: 320px; min-height: 320px; justify-self: center; }
    .card-logo { width: 100px; height: 100px; top: 47%; }
    .alpine-logo { width: 96px; height: 96px; }
    .arch-logo, .tempest-logo { width: 102px; height: 102px; }
    .card-bottom { padding-top: 126px; }
    .coming-row { margin-top: 22px; }
    .footer-inner { min-height: 95px; flex-wrap: wrap; padding-block: 16px; }
    .footer-inner > span { order: 3; width: 100%; }
    .detail-hero { padding: 48px 0 35px; }
    .detail-hero-grid { grid-template-columns: 1fr .65fr; gap: 6px; }
    .detail-title h1 { font-size: clamp(2.7rem, 11vw, 4.2rem); }
    .detail-title p { font-size: .87rem; }
    .detail-art { height: 250px; }
    .detail-art::before { width: 180px; }
    .detail-art img { width: 175px; height: 245px; }
    .detail-art .detail-logo { width: 145px; height: 145px; }
    .page-section { padding: 52px 0; }
    .old-releases { grid-template-columns: 1fr; }
    .info-grid, .mode-grid, .boot-flow, .issue-grid, .roadmap-grid { grid-template-columns: 1fr; }
    .spec-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .info-card { min-height: unset; }
    .info-callout, .terminal-note { align-items: flex-start; flex-direction: column; }
    .old-release { min-height: 145px; }
    .story-card, .story-card:nth-child(even) { grid-template-columns: 1fr; gap: 8px; padding: 16px 20px 22px; }
    .story-card:nth-child(even) .story-art { order: 0; }
    .story-art { height: 190px; }
    .story-art img { height: 180px; }
    .story-copy h3 { font-size: 1.4rem; }
    .single-card { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
    .single-card-art { height: 205px; }
    .single-card-art img { height: 205px; }
}
@media (max-width: 420px) {
    .wrap { width: calc(100% - 26px); }
    .brand-muted { display: none; }
    .nav-links { gap: 9px; }
    .hero-layout { grid-template-columns: .55fr 1.45fr; }
    .hero-art { min-height: 250px; }
    .hero-logo { height: 260px; width: 54vw; }
    .hero-copy h1 { font-size: 2.9rem; }
    .hero-copy > p { font-size: .8rem; }
    .hero-copy .button { min-height: 40px; padding-inline: 11px; font-size: .75rem; }
    .hero-meta { font-size: .46rem; }
    .detail-hero-grid { grid-template-columns: 1fr .5fr; }
    .detail-art { height: 205px; }
    .detail-art::before { width: 140px; }
    .detail-art img { width: 145px; height: 200px; }
    .detail-art .detail-logo { width: 120px; height: 120px; }
}

.project-logo { display: block; }
.story-art .project-logo { width: 145px; height: 145px; }
.single-card-art .project-logo { width: 150px; height: 150px; }