/* Design layer, loaded last on every page.
   Visual language follows Halo 5's menus: square glassy slabs, a bright bar marks the
   selected item, an offset frame glows around focus, tiny yellow flags call out NEW or FEATURED, labels
   sit above values. */
:root{
  --amber:#f5c542;--amber-ink:#2a1f00;
  --text:#eaf4fc;--muted:#a7bccd;--dim:#7d93a6;
  --glass:linear-gradient(180deg,rgba(26,52,74,.55),rgba(9,22,35,.78));
  --glass-hi:linear-gradient(180deg,rgba(46,92,124,.55),rgba(14,34,52,.85));
  --edge:rgba(139,220,255,.22);--edge-hi:rgba(139,220,255,.7);
  --header-h:76px;
}
html{scroll-padding-top:calc(var(--header-h) + 16px)}
body{background:radial-gradient(1200px 600px at 85% -10%,#12304a55,transparent 60%),radial-gradient(900px 500px at -10% 40%,#0f2a4033,transparent 60%),var(--bg)}
body:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;background-image:linear-gradient(#8bdcff08 1px,transparent 1px),linear-gradient(90deg,#8bdcff08 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.muted{color:var(--dim)}

/* Header: fixed, transparent over the hero, glass once scrolled. */
.site-header{position:fixed;height:var(--header-h);background:linear-gradient(180deg,#050c16cc,#050c1600);border-bottom-color:transparent;transition:background .25s,border-color .25s,backdrop-filter .25s}
.site-header.is-scrolled{background:#07111ddd;backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
.site-header nav a{letter-spacing:1.4px}
.site-header nav a:after{height:2px;bottom:18px;left:0;right:auto;width:100%;box-shadow:0 0 10px #8bdcffaa}
.menu-toggle{display:none;align-items:center;gap:10px;background:#0f2234cc;border:1px solid var(--edge);color:var(--text);padding:9px 12px;font:11px var(--label);letter-spacing:1.5px}
.menu-bars{width:16px;height:10px;position:relative;border-block:1.5px solid currentColor}
.menu-bars:after{content:'';position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transform:translateY(-50%)}
.site-header.menu-open .menu-bars{border-color:transparent}
.site-header.menu-open .menu-bars:before,.site-header.menu-open .menu-bars:after{content:'';position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transform:rotate(45deg)}
.site-header.menu-open .menu-bars:before{transform:rotate(-45deg)}
@media(max-width:1180px){.site-header .nav-extra{display:none}}
@media(max-width:960px){
  .menu-toggle{display:inline-flex;margin-left:auto}
  .site-header nav{position:fixed;top:var(--header-h);left:0;right:0;height:auto;display:none;flex-direction:column;align-items:stretch;gap:2px;padding:14px 20px 22px;background:#07111df5;backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .site-header.menu-open nav{display:flex}
  .site-header nav a,.site-header nav a.nav-shots,.site-header nav a.nav-extra,.site-header nav a.discord-nav{display:flex!important;height:auto;padding:14px 16px;font-size:13px;background:var(--glass);border-left:2px solid transparent}
  .site-header nav a:after{display:none}
  .site-header nav a[aria-current=page],.site-header nav a:hover{border-left-color:var(--cyan);background:var(--glass-hi)}
  .site-header{background:#07111de6;backdrop-filter:blur(12px)}
}
@media(max-width:760px){:root{--header-h:68px}.site-header{height:var(--header-h)}}

/* Buttons. */
.button{position:relative;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.button-primary:hover{box-shadow:0 0 28px #8bdcff44}
.button-secondary{background:#0e2131b3;backdrop-filter:blur(6px)}
.button>span{font:inherit}
.text-link{gap:14px}
.flag{display:inline-block;font:9px/1 var(--label);font-style:normal;letter-spacing:1.4px;color:var(--amber-ink);background:var(--amber);padding:4px 7px;vertical-align:middle;box-shadow:0 0 14px #f5c54255}

/* Typography rhythm. */
.section-title{font-size:clamp(34px,4vw,60px);letter-spacing:2px}
.eyebrow{letter-spacing:2.4px}
.section{padding-block:110px}
@media(max-width:760px){.section{padding-block:72px}.section-title{font-size:34px;letter-spacing:1px}}

/* Reveal on scroll (only when JS is running, never for reduced motion). */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

/* Notched section edge, like the Halo menus' tab dividers. */
.notched{position:relative;border-top:1px solid var(--line)}
.notched:before{content:'';position:absolute;top:-1px;left:max(60px,calc((100% - 1280px)/2));width:180px;height:6px;background:var(--cyan);clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,6px 100%);box-shadow:0 0 18px #8bdcff;opacity:.85}
@media(max-width:760px){.notched:before{left:20px;width:110px}}

/* ---------- Home ---------- */
.home .hero{height:min(960px,100svh);min-height:760px}
.home .hero-backdrop{animation:arrival 2s ease-out both,drift 40s ease-in-out 2s infinite alternate}
@keyframes drift{from{transform:scale(1.035) translate3d(0,0,0)}to{transform:scale(1.09) translate3d(-1.5%,-1%,0)}}
.hero-scan{position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px),radial-gradient(ellipse at 30% 50%,transparent 40%,#020810aa 100%)}
.home .hero-content{padding-top:170px;padding-bottom:200px}
.hero-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.hero-kicker .flag+.flag{margin-left:-8px}
.home .hero-logo{width:min(470px,90%);margin-bottom:30px}
.home .hero h2{font-size:clamp(38px,4.2vw,56px);letter-spacing:.5px}
.home .hero-description{max-width:520px;font-size:18px;color:#c6d8e6}
.hero-actions{flex-wrap:wrap}
.home .hero-caption{bottom:210px}
@media(max-width:760px){.home .hero{height:auto;min-height:0}.home .hero-content{padding-top:150px;padding-bottom:150px}.hero-actions .button{width:100%}}

.status-rail{position:relative;z-index:2;margin-top:-130px}
.status-inner{background:linear-gradient(180deg,rgba(14,32,48,.86),rgba(7,17,29,.94));backdrop-filter:blur(10px);border:1px solid var(--edge);padding:22px 26px;display:grid;grid-template-columns:1fr;gap:18px;box-shadow:0 30px 80px #0008}
.status-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px}
.status-head .eyebrow{margin:0;font-size:11px}
.status-latest{display:flex;align-items:center;gap:14px;padding:8px 14px;border-left:2px solid var(--amber);background:#f5c54212;transition:background .2s}
.status-latest:hover{background:#f5c54226}
.status-latest small{font:10px var(--label);letter-spacing:1.5px;color:var(--amber);margin-right:4px}
.status-latest strong{font-weight:400;font-size:15px}
.status-latest>span{color:var(--amber)}
.status-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin:0}
.status-stats>div{background:var(--glass);padding:16px 18px;border-left:2px solid #8bdcff55;transition:border-color .2s,background .2s}
.status-stats>div:hover{border-left-color:var(--cyan);background:var(--glass-hi)}
.status-stats>div.is-next{border-left-color:var(--amber)}
.status-stats dt{font:10px var(--label);letter-spacing:1.6px;color:var(--dim);display:flex;align-items:center;gap:8px}
.status-stats dd{margin:6px 0 2px;font-size:38px;font-weight:300;line-height:1;letter-spacing:1px}
.status-stats dd small{font-size:18px;color:var(--dim);margin-left:2px}
.status-stats>div>span{color:var(--muted);font-size:13px}
.status-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;border-top:1px solid var(--line);padding-top:14px}
.status-foot p{margin:0;color:var(--muted);font-size:14px}
.status-foot .text-link{padding:0}
@media(max-width:900px){.status-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.status-rail{margin-top:-80px}.status-inner{padding:16px}.status-stats dd{font-size:30px}.status-latest{width:100%}}

.project-band{position:relative;overflow:hidden;padding-top:140px}
.band-art{position:absolute;inset:0 0 0 38%;background:var(--art) center/cover no-repeat;opacity:.38;mask-image:linear-gradient(90deg,transparent,#000 45%),linear-gradient(0deg,transparent,#000 25%,#000 75%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in;filter:saturate(.8)}
.project-inner{position:relative;display:grid;gap:44px}
.project-main{max-width:680px}
.project-main .lead{font-size:30px;line-height:1.3;color:#f1f8fd;margin:26px 0 18px}
.project-main p:not(.eyebrow):not(.lead){color:var(--muted);font-size:18px;line-height:1.8;margin:0}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pillar{background:var(--glass);border:1px solid var(--edge);padding:24px 24px 26px;backdrop-filter:blur(6px);transition:border-color .2s,background .2s}
.pillar:hover{border-color:var(--edge-hi);background:var(--glass-hi)}
.pillar-num{font:11px var(--label);color:var(--cyan);letter-spacing:1.5px}
.pillar h3{margin:14px 0 10px;font-size:23px;font-weight:300;letter-spacing:.6px}
.pillar p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.7}
.how-it-works{position:relative;background:var(--glass);border:1px solid var(--edge);padding:28px 30px 30px;backdrop-filter:blur(6px)}
.how-it-works:before{content:'';position:absolute;inset:-1px auto auto -1px;width:48px;height:2px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.how-title{margin:0 0 18px;font-size:23px;font-weight:300;letter-spacing:.6px}
.how-body{columns:2;column-gap:44px}
.how-body p{color:var(--muted);font-size:15.5px;line-height:1.8;margin:0 0 14px;break-inside:avoid}
@media(max-width:900px){.how-body{columns:1}.how-it-works{padding:22px 20px}}
.how-body p:last-child{margin-bottom:0}
@media(max-width:900px){.band-art{inset:0;opacity:.18}.pillars{grid-template-columns:1fr}.project-main .lead{font-size:25px}}

/* Experience console: Halo 5 list items with an offset focus frame. */
.experience-section{padding-top:110px}
.experience-console{border:1px solid var(--edge);background:#091826}
.mode-menu{background:linear-gradient(130deg,#132a3dee,#081522f2);padding:22px 14px;gap:8px}
.mode-tab{background:#0e2131aa;border-left:3px solid transparent;min-height:76px;transition:background .2s,border-color .2s}
.mode-tab:hover{background:#163049}
.mode-tab[aria-selected=true]{background:linear-gradient(90deg,#2b5b7ccc,#14304899);border-left-color:var(--cyan);box-shadow:inset 0 0 0 1px #8bdcff88,0 0 24px #8bdcff22}
.mode-panel{min-height:520px}
.mode-panel:after{background:linear-gradient(0deg,#050e19f5,rgba(5,14,25,.55) 34%,transparent 70%),linear-gradient(90deg,#050e19aa,transparent 30%)}
.mode-content h3{font-size:42px;letter-spacing:1.5px}
#mode-status{color:var(--amber)}
#mode-status:before{content:'';width:6px;height:6px;background:var(--amber);box-shadow:0 0 10px var(--amber);display:inline-block}

@media(max-width:760px){.mode-menu{padding:8px;gap:6px}.mode-tab{min-height:54px;border-left:0;border-bottom:2px solid transparent}.mode-tab[aria-selected=true]{border-bottom-color:var(--cyan)}.mode-content h3{font-size:30px}}

/* Gallery tiles. */
.screenshots-section{background:linear-gradient(180deg,#0b1826,#08131f)}
.screenshot{border-color:var(--edge);background:#0c1a28}
.screenshot>img{color:transparent;background:#0c1a28}
.screenshot:hover{border-color:var(--edge-hi)}
.screenshot:focus-visible{outline-offset:-3px}
.expand-icon{background:#06111d99}

/* Latest from the devlog: Waypoint-style news cards. */
.latest-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:16px}
.news-card{display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--edge);transition:border-color .2s,background .2s,transform .25s}
.news-card:hover{border-color:var(--edge-hi);background:var(--glass-hi);transform:translateY(-3px)}
.news-media{display:block;aspect-ratio:16/9;overflow:hidden;background:#0c1a28}
.news-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s;color:transparent}
.news-card:hover .news-media img{transform:scale(1.04)}
.news-body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 24px}
.news-meta{font:10px var(--label);letter-spacing:1.5px;color:var(--cyan);display:flex;align-items:center;gap:10px}
.news-body strong{font-weight:300;font-size:23px;line-height:1.25;letter-spacing:.4px}
.news-card-lead .news-body strong{font-size:30px}
.news-body>span:last-child{color:var(--muted);font-size:15px;line-height:1.65}
.latest-section .section-heading .button{flex:none}
@media(max-width:1000px){.latest-grid{grid-template-columns:1fr 1fr}.news-card-lead{grid-column:1/-1}}
@media(max-width:760px){.latest-grid{grid-template-columns:1fr}.latest-section .section-heading .button{margin-top:22px}}

/* Community calls to action. */
.community-section{background:linear-gradient(180deg,#08131f,#0b1a29)}
.community-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
.cta-card{position:relative;overflow:hidden;min-height:340px;display:flex;align-items:flex-end;border:1px solid var(--edge);background:#0b1a29;transition:border-color .2s}
.cta-card:hover{border-color:var(--edge-hi)}
.cta-art{position:absolute;inset:0;background:var(--art) center/cover;opacity:.55;transition:transform .6s,opacity .3s}
.cta-card:hover .cta-art{transform:scale(1.04);opacity:.7}
.cta-art:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#06111df5 10%,#06111d88 55%,#06111d33)}
.cta-body{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:30px 32px}
.cta-body .eyebrow{margin:0;font-size:11px;gap:10px}
.cta-body strong{font-size:32px;font-weight:300;line-height:1.2;letter-spacing:.4px;max-width:18ch}
.cta-body>span:not(.eyebrow):not(.button){color:var(--muted);font-size:16px}
.cta-body .button{margin-top:8px}
.cta-emblem{background:radial-gradient(circle at 75% 35%,#1d4766,#0b1a29 60%)}
.cta-emblem-art{position:absolute;right:-30px;top:-20px;width:300px;opacity:.85;filter:drop-shadow(0 0 40px #8bdcff44);transition:transform .6s}
.cta-emblem:hover .cta-emblem-art{transform:rotate(-4deg) scale(1.04)}
.credits-strip{margin:26px 0 0;color:var(--dim);font-size:14px}
@media(max-width:900px){.community-grid{grid-template-columns:1fr}.cta-body strong{font-size:26px}.cta-emblem-art{width:200px;opacity:.35}}

/* Project policy: every term stays visible, in a card grid. */
.legal-section{background:#07111d}
.legal-card{position:relative;background:var(--glass);border:1px solid var(--edge);padding:26px 28px}
.legal-card:before{content:'';position:absolute;inset:-1px auto auto -1px;width:48px;height:2px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.legal-card h3{font-size:23px}
.legal-card p{color:var(--muted);font-size:15.5px}
.legal-contact{font-size:14px;color:var(--dim)}

/* Footer. */
.back-top,.footer-credits,.discord-footer{white-space:nowrap}
.site-footer{border-top:0;position:relative}
.site-footer:before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.5}

/* ---------- Shared subpage polish ---------- */
.page-hero{padding-top:calc(var(--header-h) + 96px)}
.page-hero:after{inset:auto 0 0 0;height:1px;border:0;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.45}
.page-hero h1{letter-spacing:2px}

.devlog-filters button{background:var(--glass);border-color:var(--edge)}
.devlog-filters button[aria-pressed=true]{background:#9bdeff;border-color:#9bdeff}
.log-card,.area,.canvas-card,.project-card,.person,.origin-card{background:var(--glass);border-color:var(--edge)}
.log-card:hover,.project-card:hover,.person:hover{border-color:var(--edge-hi)}
.log-card.is-milestone{background:var(--glass-hi);border-color:#8bdcff77}
.state-new{background:var(--amber)!important;color:var(--amber-ink)!important}
.area:before,.log-card.is-milestone:before,.canvas-card:before,.person-lead:before{box-shadow:0 0 12px var(--cyan)}
.items li[data-status=progress]:after{color:var(--amber)}
.timeline:before{box-shadow:0 0 8px #8bdcff55}
@media(max-width:760px){.page-hero{padding-top:calc(var(--header-h) + 64px)}}
.cta-emblem .cta-body{max-width:62%}
.cta-emblem-art{right:6%;top:50%;width:min(240px,34%);transform:translateY(-55%)}
.cta-emblem:hover .cta-emblem-art{transform:translateY(-55%) rotate(-4deg) scale(1.04)}
@media(max-width:900px){.cta-emblem .cta-body{max-width:none}.cta-emblem-art{top:24px;right:16px;width:150px;transform:none;opacity:.4}.cta-emblem:hover .cta-emblem-art{transform:none}}
.cta-emblem-art img{color:transparent}
@media(max-width:1100px) and (min-width:901px){.cta-emblem .cta-body{max-width:none}.cta-emblem-art{top:24px;right:20px;width:140px;transform:none;opacity:.35}.cta-emblem:hover .cta-emblem-art{transform:none}}