/* ============================================================================
   TRAMÉ ENGINEERING — The Hangar
   ========================================================================== */
:root{
  --navy:#0B1A33; --abyss:#060F1F; --deck:#040A14;
  --bronze:#B8923A; --bronze-hi:#D9B562;
  --ivory:#F5F1E6; --steel:#5E7392; --mist:rgba(245,241,230,.56);
  --hair:rgba(184,146,58,.24); --hair-soft:rgba(245,241,230,.09);
  --serif:'Hoefler Text','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',system-ui,Arial,sans-serif;
  --mono:'SF Mono',ui-monospace,Menlo,Consolas,'Courier New',monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--deck);color:var(--ivory);
  font-family:var(--sans);-webkit-font-smoothing:antialiased}
body{
  background:
    radial-gradient(110% 78% at 56% 34%,rgba(20,42,78,.80),transparent 62%),
    radial-gradient(80% 60% at 16% 92%,rgba(184,146,58,.09),transparent 60%),
    linear-gradient(180deg,#050B16,#060F1F 52%,#04090F);
}
.serif{font-family:var(--serif)}
:focus-visible{outline:2px solid var(--bronze-hi);outline-offset:3px}

#stage{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab;z-index:1}
#stage.dragging{cursor:grabbing}

/* faint hangar deck grid behind the aircraft */
body::before{
  content:'';position:fixed;inset:auto 0 0 0;height:46%;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(94,115,146,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(94,115,146,.07) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg,transparent,rgba(0,0,0,.85) 55%,transparent);
  mask-image:linear-gradient(180deg,transparent,rgba(0,0,0,.85) 55%,transparent);
}

/* ------------------------------------------------------------------ HUD --- */
.hud{position:fixed;inset:0;z-index:10;pointer-events:none;display:flex;
  flex-direction:column;justify-content:space-between;padding:clamp(16px,3.2vw,42px)}
.hud>*{pointer-events:auto}

header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.brand{display:flex;align-items:center;gap:15px}
.brand svg{width:50px;height:50px;flex-shrink:0}
.brand h1{font-size:clamp(18px,2.4vw,28px);font-weight:500;letter-spacing:.32em;text-transform:uppercase}
.brand h1 sup{color:var(--bronze);font-size:.45em;letter-spacing:.08em}
.brand p{font-size:9.5px;letter-spacing:.40em;text-transform:uppercase;color:var(--bronze);margin-top:5px}
.year-tag{border:1px solid var(--hair);padding:10px 18px;text-align:right;
  background:rgba(11,26,51,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.year-tag b{display:block;font-size:21px;letter-spacing:.22em;color:var(--bronze-hi);font-weight:500}
.year-tag span{font-size:8.5px;letter-spacing:.30em;text-transform:uppercase;color:var(--mist)}

footer{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.hint{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--steel)}
.hint b{color:var(--bronze);font-weight:700}
.dock{display:flex;gap:10px;flex-wrap:wrap}
.dock .grp{display:flex;border:1px solid var(--hair);background:rgba(6,15,31,.72);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.dock button{border:none;background:transparent;color:var(--mist);font-family:inherit;
  font-size:9.5px;font-weight:700;letter-spacing:.20em;text-transform:uppercase;
  padding:13px 17px;cursor:pointer;transition:all .28s var(--ease);white-space:nowrap}
.dock button:hover{color:var(--ivory);background:rgba(184,146,58,.10)}
.dock button.on{background:linear-gradient(112deg,var(--bronze),var(--bronze-hi));color:#0B1A33}

/* ------------------------------------------------------------ assemblies -- */
.systems{position:fixed;left:clamp(16px,3.2vw,42px);top:50%;transform:translateY(-50%);
  z-index:10;display:flex;flex-direction:column;gap:2px;max-width:264px}
.systems>h2{font-size:9px;letter-spacing:.40em;text-transform:uppercase;
  color:var(--steel);margin-bottom:14px}
.sys{display:block;width:100%;text-align:left;background:transparent;cursor:pointer;
  border:none;border-left:2px solid rgba(94,115,146,.30);padding:12px 14px 12px 16px;
  opacity:.5;transition:all .35s var(--ease);font-family:inherit;color:inherit}
.sys:hover{opacity:.85;border-left-color:var(--bronze)}
.sys.on{opacity:1;border-left-color:var(--bronze);
  background:linear-gradient(90deg,rgba(184,146,58,.13),transparent)}
.sys code{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.20em;
  color:var(--bronze);margin-bottom:4px}
.sys h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.sys p{font-size:11px;color:var(--mist);line-height:1.55;margin-top:4px}

/* ----------------------------------------------------------- measurements -- */
.telemetry{position:fixed;right:clamp(16px,3.2vw,42px);top:50%;transform:translateY(-50%);
  z-index:10;width:min(286px,80vw)}
.telemetry h2{font-size:9px;letter-spacing:.30em;text-transform:uppercase;color:var(--steel);
  padding-bottom:12px;border-bottom:1px solid var(--hair)}
.tstat{padding:12px 0;border-bottom:1px solid var(--hair-soft);display:flex;
  justify-content:space-between;align-items:baseline;gap:12px}
.tstat span{font-size:9.5px;letter-spacing:.20em;text-transform:uppercase;color:var(--mist)}
.tstat b{font-size:clamp(16px,1.7vw,20px);font-weight:500;font-variant-numeric:tabular-nums;
  white-space:nowrap;font-family:var(--serif)}
.tstat b i{font-style:normal;color:var(--bronze);font-size:.6em;margin-left:3px}
.tstat.mesh b{font-family:var(--mono);font-size:13px;color:var(--steel)}
.telemetry .note{font-size:10.5px;line-height:1.7;color:var(--steel);margin-top:14px}
.telemetry .note code{font-family:var(--mono);color:var(--bronze-hi);font-size:10px}

/* --------------------------------------------------------------- markers -- */
.markers{position:fixed;inset:0;z-index:9;pointer-events:none}
.mk{position:absolute;transform:translate(-50%,-50%);will-change:transform;opacity:0;
  transition:opacity .5s var(--ease)}
.mk.vis{opacity:1}
.mk .dot{position:absolute;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border:1px solid var(--bronze-hi);border-radius:50%;background:rgba(217,181,98,.22)}
.mk .dot::after{content:'';position:absolute;inset:2px;border-radius:50%;background:var(--bronze-hi)}
.mk .lead{position:absolute;left:0;top:0;height:1px;width:64px;
  background:linear-gradient(90deg,var(--bronze),rgba(184,146,58,.15));transform-origin:0 50%}
.mk .lab{position:absolute;left:64px;top:0;transform:translateY(-50%);
  white-space:nowrap;padding-left:10px;border-left:1px solid var(--hair)}
.mk .lab b{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory)}
.mk .lab span{display:block;font-size:10px;color:var(--mist);margin-top:2px;letter-spacing:.02em}

/* ------------------------------------------------------------------ veil -- */
#veil{position:fixed;inset:0;z-index:40;background:var(--deck);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:20px;
  transition:opacity 1s ease .3s}
#veil.gone{opacity:0;pointer-events:none}
#veil svg{width:112px;height:112px}
#veil h2{font-size:clamp(19px,3vw,24px);letter-spacing:.42em;font-weight:500;
  text-transform:uppercase;margin-left:.42em}
#veil p{font-size:9.5px;letter-spacing:.36em;text-transform:uppercase;color:var(--bronze)}
.loadbar{width:170px;height:1px;background:rgba(245,241,230,.14);overflow:hidden}
.loadbar i{display:block;height:100%;width:38%;background:var(--bronze);
  animation:load 1.2s ease infinite}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(440%)}}

.nogl{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;text-align:center;padding:8vw;
  background:var(--deck)}
.nogl h2{font-size:clamp(20px,3vw,28px);font-weight:500}
.nogl p{max-width:52ch;font-size:13.5px;line-height:1.8;color:var(--mist)}
.nogl a{color:var(--bronze-hi);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  border:1px solid var(--hair);padding:13px 22px;text-decoration:none}

/* --------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .systems{max-width:210px}
  .telemetry{width:236px}
  .tstat{padding:9px 0}
}
@media (max-width:840px){
  .systems{top:auto;bottom:120px;left:0;right:0;transform:none;max-width:none;
    flex-direction:row;gap:8px;padding:0 14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .systems>h2{display:none}
  .sys{min-width:150px;padding:9px 11px;border-left:none;border-top:2px solid rgba(94,115,146,.3)}
  .sys.on{background:linear-gradient(180deg,rgba(184,146,58,.14),transparent);border-top-color:var(--bronze)}
  .sys p{display:none}
  .telemetry{left:0;right:0;top:auto;bottom:56px;transform:none;width:auto;
    display:flex;gap:6px;padding:0 14px;overflow-x:auto}
  .telemetry h2,.telemetry .note{display:none}
  .tstat{flex:0 0 auto;flex-direction:column;align-items:flex-start;gap:3px;
    border-bottom:none;padding:6px 10px 6px 0}
  .tstat b{font-size:15px}
  .tstat span{font-size:8px;letter-spacing:.10em}
  .markers{display:none}
  .hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .loadbar i{animation:none}
  .mk{transition:none}
}