/* Vimera Lighting landing. One dark world on purpose: a lighting desk lives in a dark room. */

:root {
  color-scheme: dark;

  --ground: #0a0b0c;
  --surface: #111315;
  --raise: #171a1d;
  --line: #22262b;
  --line2: #333941;
  --text: #dde2e7;
  --text2: #b3bac2;
  --dim: #7f8791;
  --beam: #8fdfff;
  --arc: #17456d;
  --live: #e0a334;
  --cue-on: #1d3557;
  --cue-time: #1b4632;

  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-xs: 12px;
  --t-sm: 14px;
  --t-md: 16px;
  --t-lg: 18px;
  --t-xl: clamp(28px, 4vw, 46px);
  --t-2xl: clamp(34px, 5.4vw, 64px);

  --gutter: clamp(16px, 4vw, 44px);
  --max: 1200px;
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 var(--t-md)/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }
a { color: inherit; }

h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }

:focus-visible { outline: 2px solid var(--beam); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mono { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.02em; }

.kicker {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--beam);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 20;
  padding: 8px 12px;
  background: var(--beam);
  color: #06202b;
  border-radius: var(--radius);
  text-decoration: none;
}
.skip:focus { left: 16px; }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* one screen: the words in the middle, the cue list along the bottom edge */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}

/* the rig behind the words: eight heads running the cue list below them */
.stage {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
}

.scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 11, 12, 0.94) 0%, rgba(10, 11, 12, 0.72) 36%, rgba(10, 11, 12, 0) 66%),
    linear-gradient(0deg, rgba(10, 11, 12, 0.96) 0%, rgba(10, 11, 12, 0) 34%);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  padding-block: 18px;
}

.brand { display: block; line-height: 0; }
.brand img { height: 30px; width: auto; }

.nav-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
  font-size: var(--t-sm);
  font-weight: 500;
}
.nav-links a { color: var(--text2); text-decoration: none; }
.nav-links a:hover { color: var(--text); }

.lang { display: flex; border: 1px solid var(--line2); border-radius: 200px; overflow: hidden; }
/* `display: flex` beats the plain `hidden` attribute, so say it again */
.lang[hidden] { display: none; }
.lang button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--dim);
  font: 500 var(--t-xs)/1 var(--f-mono);
  letter-spacing: 0.08em;
  padding: 9px 11px;
  cursor: pointer;
}
.lang button + button { border-left: 1px solid var(--line2); }
.lang button[aria-pressed="true"] { background: var(--raise); color: var(--text); }
.lang button:hover { color: var(--text); }

.hero-body {
  flex: 1;
  display: grid;
  align-content: center;
  gap: clamp(14px, 2.2vh, 22px);
  padding-block: clamp(24px, 5vh, 72px);
}

.hero h1 {
  max-width: 11ch;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: min(var(--t-2xl), 8.4vh);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.lede { max-width: 46ch; font-size: var(--t-lg); color: var(--text2); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 10px;
}

.btn-dl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border: 1px solid var(--beam);
  border-radius: 200px;
  background: var(--beam);
  color: #06202b;
  font: 500 15px/1.2 var(--f-body);
  cursor: pointer;
}
.btn-dl:disabled {
  background: rgba(143, 223, 255, 0.08);
  border-color: rgba(143, 223, 255, 0.28);
  color: rgba(143, 223, 255, 0.6);
  cursor: not-allowed;
}
.btn-dl svg { flex: none; }

.soon {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
}

/* ── signal path ───────────────────────────────────────────── */

.chain { display: grid; gap: 28px; padding-top: clamp(56px, 8vw, 96px); padding-bottom: 0; }
.chain h2 + .chain-list { margin-top: 26px; }

/*
 * Three boxes and two arrows. It was a hairline with a dot travelling along
 * it, which is a lot of motion to say "the signal goes this way" — an arrow
 * says it standing still.
 */
.chain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.6fr) minmax(0, 1fr) minmax(110px, 0.6fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}

.station {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.station-name { font-family: var(--f-display); font-weight: 400; font-size: var(--t-md); letter-spacing: 0.01em; }
.station-sub { font-size: var(--t-sm); color: var(--dim); max-width: 28ch; }

/* the arrow between two boxes, with the protocol written over it */
.link {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 0 14px;
}
.link-label { color: var(--beam); white-space: nowrap; }
.link-arrow {
  position: relative;
  width: 100%;
  height: 1px;
  background: var(--line2);
}
.link-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--line2);
  border-right: 1px solid var(--line2);
  transform: translate(1px, -50%) rotate(45deg);
}

/* ── sections ──────────────────────────────────────────────── */

.sec { padding-block: clamp(72px, 10vw, 136px); }

.sec-head { display: grid; gap: 18px; max-width: 780px; }
.sec-head h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-xl);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.sec-head p:not(.kicker) { max-width: 58ch; font-size: var(--t-lg); color: var(--text2); }

.shots {
  margin-top: clamp(40px, 6vw, 64px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
  align-items: start;
}

/* The two windows in the bottom row are different shapes — one wide console,
   one taller 3D view. They share a frame of one ratio and fill it, so the row
   reads as a pair rather than two pictures of whatever size they happened to
   be saved at. The wide shot above keeps its own proportions. */
.shots .shot:not(.shot-wide) .slot {
  aspect-ratio: 16 / 10;
  place-items: center;
  background: transparent;
}
/* contain, not cover: a screenshot with its edge cut off is a screenshot of
   the wrong thing. The frame is the same height either way. */
.shots .shot:not(.shot-wide) .slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.shot { margin: 0; display: grid; gap: 10px; align-content: start; }
/* the main window gets the full width; the other two share the row below */
.shot-wide { grid-column: 1 / -1; }
.shot figcaption { color: var(--dim); }

.slot {
  position: relative;
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #000;
  overflow: hidden;
}
.slot img { display: block; width: 100%; height: auto; }
.slot-note { display: none; color: var(--dim); }
/* nothing at that path yet: say which file the frame is waiting for */
.slot.empty {
  aspect-ratio: 16 / 10;
  place-items: center;
  border-style: dashed;
  background: var(--surface);
}
.slot.empty img { display: none; }
.slot.empty .slot-note { display: block; }
.slot-square.empty { aspect-ratio: 4 / 3; }

.groups { margin-top: clamp(56px, 8vw, 96px); }

.group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 24px 48px;
  padding-block: 40px;
  border-top: 1px solid var(--line);
}
.group h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.25;
}

.entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 36px; }
.entry { display: grid; gap: 8px; align-content: start; }
.entry h4 { font: 600 15px/1.3 var(--f-body); color: var(--text); }
.entry p { font-size: 15px; line-height: 1.62; color: var(--text2); }

/* the two models, side by side */
.models {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.model {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 26px 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ground);
}
/* The render sits on the card's own dark, so the shadow under it lands right.
   Both pictures are cropped to one frame, so the two boxes are to scale
   against each other and the headings below them line up. */
.model img { display: block; width: 100%; height: auto; margin-bottom: 8px; }
.model h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-lg);
  letter-spacing: 0.01em;
}
.model-sub { font-size: var(--t-sm); color: var(--dim); }
.model .actions { margin-top: 8px; }

/* the two sides of the licence, side by side */
.licence {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
}
.lic-col {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.lic-col h3 {
  font: 600 15px/1.3 var(--f-body);
  margin-bottom: 14px;
}
.lic-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.lic-col li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text2);
}
.lic-col li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--line2);
}
/* the side you pay for reads as the live one */
.lic-col + .lic-col h3 { color: var(--live); }
.lic-col + .lic-col li::before { background: var(--live); }

/* ── node ──────────────────────────────────────────────────── */

.node {
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.specs { margin: 10px 0 0; display: grid; }
.specs-wide { margin-top: clamp(36px, 5vw, 56px); }
.specs-wide div { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
.specs div {
  display: grid;
  grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
  gap: 16px;
  padding-block: 12px;
  border-top: 1px solid var(--line);
}
.specs div:last-child { border-bottom: 1px solid var(--line); }
.specs dt {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  padding-top: 2px;
}
.specs dd { margin: 0; font-size: 15px; }

/* ── download ──────────────────────────────────────────────── */

.dl-band { display: grid; gap: 20px; justify-items: start; }
.dl-band h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-2xl);
  line-height: 1.04;
  letter-spacing: -0.015em;
  max-width: 22ch;
}
.dl-band p:not(.kicker) { max-width: 50ch; font-size: var(--t-lg); color: var(--text2); }

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 28px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 13px;
}
.foot img { height: 24px; width: auto; display: block; }

/* ── shorter screens ───────────────────────────────────────── */

/* A laptop screen is short: the headline and the spacing come down a size so
   the hero stays one screen tall without crowding what is in it. */
@media (max-height: 800px) {
  .nav { padding-block: 12px; }
  .hero-body { gap: 12px; padding-block: clamp(12px, 3vh, 28px); }
  .hero h1 { font-size: min(var(--t-2xl), 7.2vh); }
  .lede { font-size: var(--t-md); }
  .actions { margin-top: 2px; }
  .btn-dl { padding: 11px 18px; }
}

/* ── narrower screens ──────────────────────────────────────── */

@media (max-width: 1024px) {
  .licence { grid-template-columns: minmax(0, 1fr); }
  .models { grid-template-columns: minmax(0, 1fr); }
  .group { grid-template-columns: minmax(0, 1fr); }
  .entries { grid-template-columns: minmax(0, 1fr); max-width: 62ch; }
}

@media (max-width: 760px) {
  .nav-links { display: none; }
  .shots { grid-template-columns: minmax(0, 1fr); }
  .hero-body { gap: 10px; padding-block: 14px; }
  .scrim {
    background:
      linear-gradient(180deg, rgba(10, 11, 12, 0.55) 0%, rgba(10, 11, 12, 0.82) 45%, rgba(10, 11, 12, 0.96) 100%);
  }

  .chain-list { grid-template-columns: minmax(0, 1fr); }
  /* stacked: the arrow turns down the page, with its label beside it */
  .link {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: start;
    align-items: center;
    gap: 14px;
    padding: 12px 0 12px 22px;
  }
  .link-arrow { width: 1px; height: 34px; order: -1; }
  .link-arrow::after {
    right: 50%;
    top: auto;
    bottom: 0;
    transform: translate(50%, 1px) rotate(135deg);
  }

  .specs div { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  /*
   * One type scale for the phone.
   *
   * Every block had grown its own size — 13, 14, 15 and 18 px of body text
   * and headings at 16, 18, 20, 24, 28 and 34 — which on a 390 px screen
   * reads as the page changing its mind every section. Four sizes: the
   * headline, a section head, a block head, and the text.
   */
  .hero h1 { font-size: 32px; }
  .chain h2,
  .sec-head h2,
  .dl-band h2 { font-size: 26px; }
  .group h3 { font-size: 18px; }
  .station-name,
  .model h3 { font-size: 17px; }
  .entry h4,
  .lic-col h3 { font-size: 16px; }

  .lede,
  .hero .lede,
  .sec-head p:not(.kicker),
  .dl-band p:not(.kicker),
  .entry p,
  .lic-col li,
  .specs dd,
  .node-copy > p:not(.kicker),
  .btn-dl { font-size: 15px; }

  .station-sub,
  .model-sub,
  .shot figcaption,
  .foot { font-size: 13px; }

  /* the mono labels stay at the small size they are set in: 12px */
}