/* A dark, warm instrument panel gives v2 a more specific Cybertron character. */
:root {
  color-scheme: dark;
  --coal: #111311;
  --panel: #191c18;
  --paper: #e8dfcf;
  --dim: #9e9b8e;
  --amber: #f1a33b;
  --acid: #c9d866;
  --line: #3a3c34;
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  color: var(--paper);
  background: var(--coal);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--coal); }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--amber); outline-offset: 6px; }
.page { max-width: 1480px; margin: auto; padding: 0 clamp(22px, 5vw, 80px); }
.skip-link { position: absolute; top: -80px; left: 24px; padding: 12px; background: var(--amber); color: var(--coal); z-index: 2; }
.skip-link:focus { top: 12px; }

/* The header reads like a field notebook rather than a product navbar. */
.header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 11px; color: var(--paper); font-size: 21px; font-weight: 750; letter-spacing: -.7px; text-decoration: none; }
.wordmark svg { color: var(--amber); }
.preview { display: inline-flex; align-items: center; gap: 9px; color: var(--acid); font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.preview > span { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px var(--acid); }

/* A hard vertical seam and oversized index create the page's memorable move. */
.hero { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); align-items: end; gap: clamp(35px, 8vw, 145px); padding: clamp(54px, 9vw, 135px) 0 100px; }
.intro { position: relative; }
.intro::before { content: "02 / 05"; display: block; margin-bottom: 30px; color: var(--amber); font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
h1 { max-width: 540px; margin: 0 0 29px; font-size: clamp(51px, 6.2vw, 90px); line-height: .94; font-weight: 600; letter-spacing: -.075em; }
.lede { max-width: 390px; color: var(--dim); font-size: 17px; line-height: 1.7; margin: 0 0 31px; }
.preview-note { max-width: 280px; color: var(--dim); font: 11px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 22px 0 0; }
.lab { position: relative; margin: 0; padding: 11px 11px 0; background: var(--panel); border: 1px solid var(--line); }
.lab::before, .lab::after { position: absolute; color: var(--amber); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.lab::before { content: "LIVE / PRIVATE / LOCAL"; top: -25px; left: 0; letter-spacing: .14em; }
.lab::after { content: "EAT 06:42:17"; right: 11px; bottom: 15px; color: var(--acid); }
.lab img { display: block; width: 100%; height: clamp(280px, 39vw, 520px); object-fit: cover; object-position: 64% center; filter: saturate(.7) contrast(1.08); }
.lab figcaption { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; min-height: 126px; padding: 21px 17px 15px; }
.lab figcaption > span:first-child { color: var(--dim); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.version { color: var(--amber); font-size: clamp(95px, 13vw, 180px); line-height: .68; font-weight: 600; letter-spacing: -.11em; }
.version > span { color: var(--acid); }

/* These are operating principles, arranged like small readouts below the masthead. */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.principles p { min-height: 122px; margin: 0; padding: 23px 25px 22px 0; border-right: 1px solid var(--line); }
.principles p + p { padding-left: 25px; }
.principles p:last-child { border-right: 0; }
.principles strong { display: block; color: var(--paper); font-size: 15px; font-weight: 650; margin-bottom: 9px; }
.principles span { display: block; max-width: 270px; color: var(--dim); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.footer { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0 28px; color: var(--dim); font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; text-transform: uppercase; }
.footer span[aria-hidden] { margin: 0 7px; color: var(--amber); }

@media (max-width: 760px) {
  .header { padding: 22px 0; }
  .hero { grid-template-columns: 1fr; gap: 70px; padding: 64px 0 68px; }
  h1 { font-size: clamp(51px, 14vw, 78px); }
  .lede { max-width: 510px; }
  .lab img { height: 310px; }
  .lab figcaption { min-height: 112px; }
  .principles { grid-template-columns: 1fr; }
  .principles p, .principles p + p { min-height: auto; padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .principles p:last-child { border-bottom: 0; }
  .principles span { max-width: none; }
  .footer { flex-wrap: wrap; gap: 7px; }
}

@media (max-width: 380px) {
  .wordmark { font-size: 18px; }
  .wordmark svg { width: 26px; }
  .preview { font-size: 9px; }
  .lab img { height: 240px; }
}