/* veyisor.com. All values come from design.md section 5, set A (locked). */
:root{
  --rail:#1C1D1F; --plate:#C8CACB; --engrave:#16181A; --engrave-2:#4A4E52; --lamp:#A04500; --loss:#8E1F17;
  --f:'Anybody', sans-serif;
  --s-display:3rem; --lh-display:1.05; --s-h2:1.5rem; --s-body:1rem; --s-label:.875rem; --s-small:.75rem;
  --u:8px; --U:auto; --pad-tight:24px; --pad-base:48px; --pad-wide:88px; --rail-w:8px; --radius:2px; --lamp-d:10px;
  --control:44px; --focus:2px; --measure:34em; --page:1360px; --underline:4px;
  --ease:cubic-bezier(.3,.7,.3,1); --t-fast:120ms;
}
@media (min-width:800px){ :root{ --s-display:4.5rem; --lh-display:.95; --U:88px; --rail-w:40px; } }

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--rail);color:var(--engrave);font:400 var(--s-body)/1.5 var(--f);font-stretch:100%;font-synthesis:none}
a{color:inherit}
:focus-visible{outline:var(--focus) solid var(--engrave);outline-offset:var(--focus)}
.skip-link{position:absolute;left:var(--rail-w);top:calc(-1 * var(--pad-wide));background:var(--plate);padding:var(--u);font:500 var(--s-label)/1.35 var(--f)}
.skip-link:focus{top:var(--u)}

/* The rack: dark rails left and right (rule 1), plates in between, gaps not lines. */
.rack{max-width:var(--page);margin:0 auto;padding:var(--pad-tight) var(--rail-w) var(--pad-wide);display:grid;gap:var(--u)}
.unit{background:var(--plate);border-radius:var(--radius);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--pad-tight);padding:var(--pad-tight)}
@media (min-width:800px){
  .unit{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch;overflow:hidden}
  .u1{grid-template-columns:1fr auto;align-items:center;height:var(--U);padding-block:0}
  .u3{height:calc(var(--U) * 3)}
  .u4{height:calc(var(--U) * 4)}
  .unit .screen{order:2;min-height:0}
}

.name{font:600 var(--s-h2)/1.15 var(--f);font-stretch:150%;letter-spacing:.08em;text-transform:uppercase}
.title-line{color:var(--engrave-2)}
.face{display:flex;flex-direction:column;gap:var(--u);min-width:0}
.status{display:flex;align-items:center;gap:var(--u);min-height:1.35em;font:500 var(--s-label)/1.35 var(--f);font-stretch:125%;letter-spacing:.1em;text-transform:uppercase}
.lamp{flex:none;width:var(--lamp-d);height:var(--lamp-d);border-radius:50%;background:var(--lamp)}
.readout{font:300 var(--s-display)/var(--lh-display) var(--f);font-stretch:150%;letter-spacing:.06em;margin-top:var(--u);font-variant-numeric:tabular-nums}
.unit-of{font:500 var(--s-label)/1.35 var(--f);font-stretch:125%;letter-spacing:.1em;text-transform:uppercase;color:var(--engrave-2)}
.desc{max-width:var(--measure);color:var(--engrave-2);text-wrap:pretty}
.desc b{font-weight:600;color:var(--engrave)}
.open{margin-top:auto;font:500 var(--s-label)/1.35 var(--f);font-stretch:125%;letter-spacing:.1em;text-transform:uppercase;min-height:var(--control);display:inline-flex;align-items:center;align-self:flex-start;text-decoration:underline;text-underline-offset:var(--underline);transition:color var(--t-fast) var(--ease)}
.open:hover{color:var(--engrave-2)}

.screen{min-width:0;display:flex;flex-direction:column;justify-content:flex-end;order:-1}
.screen picture{display:block;height:100%;min-height:0}
.screen img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.screen img.pixel{image-rendering:pixelated}
.screen img.top{object-position:top}
.screen svg{display:block;width:100%;height:auto}
.c-bot{stroke:var(--engrave);stroke-width:2}
.c-hold{stroke:var(--engrave-2);stroke-width:1.5;stroke-dasharray:5 4}
.c-label{fill:var(--engrave-2);font:400 var(--s-small) var(--f)}
.key{font-size:var(--s-small);line-height:1.4;color:var(--engrave-2);margin-top:var(--u)}
.neg{color:var(--loss)}

.foot{color:var(--engrave-2);font-size:var(--s-small);line-height:1.4}
@media (min-width:800px){ .foot{grid-template-columns:1fr auto} }