/* Instrumentenpaneel — antraciet, amber, ivoor. Eén stijl voor landings- en statuspagina. */
:root{
  --panel:#23262b; --panel-deep:#1a1c20; --panel-light:#2c3036; --seam:#3a3f47;
  --ivory:#efe6d6; --copper:#a89684; --amber:#f2b25a; --amber-glow:rgba(242,178,90,.55);
  --ember:#e0684e; --ember-glow:rgba(224,104,78,.5); --cold:#7f8b99;
}
*{box-sizing:border-box;margin:0}
html{background:var(--panel-deep)}
body{
  min-height:100svh;color:var(--ivory);
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:400;font-size:1.125rem;line-height:1.6;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--panel-light), var(--panel) 60%, var(--panel-deep) 100%);
}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(242,178,90,.4);padding-bottom:.08em}
a:hover,a:focus-visible{border-color:var(--amber)}
:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:2px}

/* het paneel: geborsteld vlak met naden en schroeven */
.panel{
  position:relative;max-width:66rem;margin:clamp(1.5rem,5vh,4rem) auto;padding:clamp(1.6rem,4vw,3.2rem);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,var(--panel-light),var(--panel) 30%,var(--panel) 70%,var(--panel-deep));
  border:1px solid var(--seam);border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 0 rgba(0,0,0,.4), 0 30px 60px -30px rgba(0,0,0,.8);
}
.panel::before,.panel::after,.panel .screw{position:absolute;width:.55rem;height:.55rem;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#555b64,#1a1c20);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.panel::before{content:"";left:1rem;top:1rem}.panel::after{content:"";right:1rem;top:1rem}
.panel .screw.bl{left:1rem;bottom:1rem}.panel .screw.br{right:1rem;bottom:1rem}

h1{font-weight:300;font-size:clamp(2.2rem,5.4vmin,3.6rem);line-height:1.1;letter-spacing:-.01em;text-wrap:balance;color:var(--ivory)}
p{max-width:36rem}
.copper{color:var(--copper)}
.small{font-size:.95rem;line-height:1.5}

/* lampje: glazen kap met gloed */
.lamp{width:1.15rem;height:1.15rem;border-radius:50%;flex:none;
  background:radial-gradient(circle at 40% 35%,#6a707a,#2a2e34 70%);
  box-shadow:inset 0 0 0 2px #15171a, inset 0 2px 3px rgba(255,255,255,.15), 0 0 0 3px var(--panel-deep), 0 0 0 4px var(--seam);
  transition:background .8s,box-shadow .8s}
.lamp.up{background:radial-gradient(circle at 40% 35%,#ffe1ad,var(--amber) 45%,#a8661a 100%);
  box-shadow:inset 0 0 0 2px #15171a, 0 0 0 3px var(--panel-deep), 0 0 0 4px var(--seam), 0 0 18px 4px var(--amber-glow)}
.lamp.down{background:radial-gradient(circle at 40% 35%,#ffb9a6,var(--ember) 45%,#8c3624 100%);
  box-shadow:inset 0 0 0 2px #15171a, 0 0 0 3px var(--panel-deep), 0 0 0 4px var(--seam), 0 0 18px 4px var(--ember-glow);
  animation:blink 1.6s steps(2,end) infinite}
.lamp.pending{background:radial-gradient(circle at 40% 35%,#fff3d6,#f7d9a3 45%,#b58a4a 100%);
  box-shadow:inset 0 0 0 2px #15171a, 0 0 0 3px var(--panel-deep), 0 0 0 4px var(--seam), 0 0 12px 2px rgba(247,217,163,.45)}
@keyframes blink{50%{filter:brightness(.55)}}

/* gegraveerde tekst */
.engraved{color:var(--copper);text-shadow:0 1px 0 rgba(0,0,0,.6),0 -1px 0 rgba(255,255,255,.05)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}