/* YourJustinTime Software — shared styles
   Archivo (OFL) is self-hosted so the site makes no third-party requests. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-standard-normal.woff2") format("woff2-variations"),
       url("fonts/archivo-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0f1c35;
  --bg-deep: #0b162b;
  --line: #1e2d4b;
  --rail: #26314d;
  --rail-hole: #0a1120;
  --plate: #172744;
  --plate-hi: #1d3053;
  --plate-edge: #2c4372;
  --plate-shadow: #08101f;
  --ink: #eaf0f8;
  --muted: #9baac6;
  --faint: #7586a6;
  --soon: #e5392f;
  --soon-glow: rgba(229, 57, 47, .55);
  --next: #f2a73b;
  --next-glow: rgba(242, 167, 59, .35);
  --off: #0b1324;
  --off-ring: #3d4f74;
  --focus: #f2a73b;
  --sans: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --max: 72rem;
}

* { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.top { border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; min-height: 4rem; flex-wrap: wrap; padding-top: .6rem; padding-bottom: .6rem; }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; font-stretch: 118%; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.brand span { font-weight: 400; color: var(--muted); }
.mark { display: grid; gap: 3px; width: 24px; }
.mark i { display: block; height: 5px; border-radius: 1px; background: var(--plate-edge); position: relative; }
.mark i::after { content: ""; position: absolute; right: 2px; top: 1px; width: 3px; height: 3px; border-radius: 50%; }
.mark i:nth-child(1)::after { background: var(--soon); }
.mark i:nth-child(2)::after { background: var(--next); }
.mark i:nth-child(3)::after { background: var(--off); box-shadow: inset 0 0 0 1px var(--off-ring); }
.nav { display: flex; gap: 1.25rem; font-size: .93rem; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover { color: var(--ink); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.hero h1 {
  font-stretch: 125%;
  font-weight: 850;
  font-size: clamp(2.3rem, 6vw, 4.6rem);
  line-height: .98;
  letter-spacing: -.028em;
  margin: 0 0 1.5rem;
}
.hero h1 span { display: block; }
.lede { max-width: 40rem; color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.2rem); margin: 0 0 2.25rem; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem 2.25rem; }
.legend a { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--muted); font-size: .97rem; }
.legend a:hover { color: var(--ink); }
.legend strong { color: var(--ink); font-stretch: 112%; font-weight: 750; }

/* ---------- Status LEDs ---------- */
.led { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; transition: background-color .2s ease, box-shadow .2s ease; }
.led--soon { background: var(--soon); box-shadow: 0 0 0 2px rgba(229, 57, 47, .18), 0 0 10px var(--soon-glow); }
.led--next { background: var(--next); box-shadow: 0 0 0 2px rgba(242, 167, 59, .15), 0 0 8px var(--next-glow); }
.led--later { background: var(--off); box-shadow: inset 0 0 0 1.5px var(--off-ring); }
.booting .rack .led:not(.on) { background: var(--off); box-shadow: inset 0 0 0 1.5px var(--off-ring); }

/* ---------- The rack ---------- */
.rack { position: relative; padding: 0 30px; margin: 0 0 4.5rem; }
.rack::before,
.rack::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  background-color: var(--rail);
  background-image: repeating-linear-gradient(to bottom, transparent 0 7px, var(--rail-hole) 7px 12px, transparent 12px 19px);
  background-size: 8px 100%;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 0;
}
.bay-head, .unit, .faceplate { z-index: 1; }
.rack::before { left: 0; border-right: 1px solid var(--plate-shadow); }
.rack::after { right: 0; border-left: 1px solid var(--plate-shadow); }

/* Blanking panel that heads each bay */
.bay-head {
  position: relative;
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.9rem 1.5rem 1.6rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem 2rem;
  align-items: end;
  scroll-margin-top: 1rem;
}
.bay + .bay .bay-head { margin-top: 2px; }
.bay-head h2 { display: flex; align-items: center; gap: .8rem; margin: 0; font-stretch: 125%; font-weight: 820; font-size: clamp(1.45rem, 2.7vw, 2.05rem); line-height: 1.05; letter-spacing: -.015em; }
.bay-head h2 .led { width: 13px; height: 13px; }
.bay-head p { margin: .45rem 0 0; color: var(--muted); max-width: 48ch; }
.vents {
  width: 132px;
  height: 30px;
  background-image: repeating-linear-gradient(90deg, #1a2747 0 4px, transparent 4px 11px);
  border-radius: 2px;
}
.bay-side { display: grid; justify-items: end; gap: .55rem; }
.bay-count { color: var(--faint); font-size: .9rem; }

/* One rack unit per project */
.unit {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(9.5rem, 14.5rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem 1.25rem;
  padding: 1rem 1.25rem;
  margin-top: 2px;
  background: linear-gradient(180deg, var(--plate-hi), var(--plate));
  border-top: 1px solid var(--plate-edge);
  border-bottom: 1px solid var(--plate-shadow);
  text-decoration: none;
  color: var(--ink);
}
.unit::before,
.unit::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 43%, #1a2238 43% 57%, transparent 57%),
    radial-gradient(circle at 35% 35%, #95a1ba, #4b5876 72%);
}
.unit::before { left: -20px; }
.unit::after { right: -20px; }
.unit:hover { background: linear-gradient(180deg, #23395f, #1b2d4e); }
.unit:hover .unit-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.unit-name { font-stretch: 115%; font-weight: 760; font-size: 1.08rem; letter-spacing: -.005em; line-height: 1.25; }
.unit-line { color: var(--muted); font-size: .98rem; line-height: 1.45; }
.unit-meta { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.chip { font-size: .78rem; line-height: 1; padding: .42rem .55rem; border: 1px solid #33497a; border-radius: 3px; color: #b9c5dc; white-space: nowrap; }

/* ---------- Promises ---------- */
.promises { border-top: 1px solid var(--line); padding-top: 3.5rem; padding-bottom: 3.75rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem 3.5rem; }
.promises h2 { font-stretch: 122%; font-weight: 820; font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.08; letter-spacing: -.015em; margin: 0; max-width: 12ch; }
.promises dl { margin: 0; display: grid; gap: 1.5rem; }
.promises dt { font-weight: 720; font-stretch: 108%; }
.promises dd { margin: .3rem 0 0; color: var(--muted); max-width: 60ch; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 2rem 0 3rem; color: var(--faint); font-size: .9rem; }
.foot .wrap { display: flex; justify-content: space-between; gap: .75rem 2rem; flex-wrap: wrap; }
.foot p { margin: 0; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--ink); }

/* ---------- Product pages ---------- */
.back { display: inline-block; margin: 2rem 0 1.25rem; color: var(--muted); text-decoration: none; font-size: .95rem; }
.back:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.rack--single { margin-bottom: 2.75rem; }
.faceplate {
  position: relative;
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.25rem, 3vw, 2.25rem);
  background: linear-gradient(180deg, var(--plate-hi), var(--plate));
  border-top: 1px solid var(--plate-edge);
  border-bottom: 1px solid var(--plate-shadow);
}
.faceplate::before,
.faceplate::after {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  width: 10px;
  background:
    radial-gradient(circle at 50% 50%, #95a1ba 0 2px, #4b5876 3.5px 4.5px, transparent 5px) top / 10px 10px no-repeat,
    radial-gradient(circle at 50% 50%, #95a1ba 0 2px, #4b5876 3.5px 4.5px, transparent 5px) bottom / 10px 10px no-repeat;
}
.faceplate::before { left: -20px; }
.faceplate::after { right: -20px; }
.status { display: flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; color: var(--muted); font-size: .95rem; }
.faceplate h1 { margin: 0 0 .8rem; font-stretch: 125%; font-weight: 850; font-size: clamp(2.2rem, 5.6vw, 4rem); line-height: 1; letter-spacing: -.028em; }
.faceplate .tagline { margin: 0; color: var(--muted); font-size: clamp(1.05rem, 1.9vw, 1.3rem); max-width: 46ch; }

.pgrid { display: grid; grid-template-columns: minmax(0, 1fr) 19.5rem; gap: 2.5rem 3.5rem; align-items: start; margin-bottom: 3.5rem; }
.prose .summary { font-size: 1.2rem; line-height: 1.5; margin: 0 0 2rem; max-width: 62ch; }
.prose h2 { font-stretch: 115%; font-weight: 780; font-size: 1.28rem; margin: 2.4rem 0 .8rem; letter-spacing: -.01em; }
.prose h2:first-of-type { margin-top: 0; }
.prose p { max-width: 62ch; margin: 0 0 1rem; }
.features { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; max-width: 62ch; }
.features li { position: relative; padding-left: 1.4rem; }
.features li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--off-ring); }
.is-soon .features li::before { background: var(--soon); }
.is-next .features li::before { background: var(--next); }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 0 0 1.25rem; max-width: 62ch; }
.plans div { border: 1px solid #2e4470; border-radius: 4px; padding: 1rem 1.1rem; background: #13213d; }
.plans dt { font-stretch: 118%; font-weight: 800; font-size: 1.1rem; margin: 0 0 .35rem; }
.plans dd { margin: 0; color: var(--muted); font-size: .97rem; }

/* Equipment data plate */
.plate {
  position: relative;
  border: 1px solid #2e4470;
  border-radius: 4px;
  padding: 1.4rem 1.35rem 1.2rem;
  background:
    radial-gradient(circle at 9px 9px, #55627f 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 9px) 9px, #55627f 0 2.5px, transparent 3px),
    radial-gradient(circle at 9px calc(100% - 9px), #55627f 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #55627f 0 2.5px, transparent 3px),
    #13213d;
}
.plate dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem 1rem; font-size: .95rem; }
.plate dt { color: var(--faint); }
.plate dd { margin: 0; }
.plate .note { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px dashed #2e4470; color: var(--muted); font-size: .92rem; }

.siblings { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-top: 1px solid var(--line); padding: 1.25rem 0 3rem; }
.siblings a { display: block; padding: .75rem 0; text-decoration: none; }
.siblings a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.siblings small { display: block; color: var(--faint); font-size: .84rem; margin-bottom: .15rem; }
.siblings span { font-stretch: 112%; font-weight: 720; }
.siblings .nx { text-align: right; grid-column: 2; }

/* 404 */
.lost { padding-top: clamp(4rem, 12vw, 8rem); padding-bottom: clamp(4rem, 12vw, 8rem); }
.lost h1 { font-stretch: 125%; font-weight: 850; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1; letter-spacing: -.028em; margin: 0 0 1rem; }
.lost p { color: var(--muted); max-width: 44ch; margin: 0 0 1.5rem; }
.button { display: inline-block; padding: .8rem 1.15rem; border-radius: 4px; background: var(--soon); color: #fff; text-decoration: none; font-weight: 700; font-stretch: 110%; }
.button:hover { background: #c92e25; }

/* ---------- Small screens ---------- */
@media (max-width: 800px) {
  .unit { grid-template-columns: 12px minmax(0, 1fr); gap: .3rem .8rem; padding: .95rem 1rem; }
  .unit-line, .unit-meta { grid-column: 2; }
  .unit-meta { justify-content: flex-start; margin-top: .4rem; }
  .pgrid { grid-template-columns: minmax(0, 1fr); }
  .promises { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .rack { padding: 0 16px; }
  .rack::before, .rack::after { width: 16px; background-size: 6px 100%; }
  .unit::before, .unit::after { width: 8px; height: 8px; margin-top: -4px; }
  .unit::before { left: -12px; }
  .unit::after { right: -12px; }
  .faceplate::before, .faceplate::after { width: 8px; background-size: 8px 8px; }
  .faceplate::before { left: -12px; }
  .faceplate::after { right: -12px; }
  .bay-head { grid-template-columns: minmax(0, 1fr); padding: 1.5rem 1.1rem 1.3rem; }
  .vents { display: none; }
  .nav .ext { display: none; }
  .bay-side { justify-items: start; }
  .siblings { grid-template-columns: minmax(0, 1fr); }
  .siblings .nx { grid-column: 1; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .led { transition: none; }
}