/* 6 · Instrument — an aerospace panel. Condensed caps, amber and green channels,
   bracket corners, hard rules between systems. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Barlow:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg: #0a0c0b; --fg: #dfe6e2; --muted: #93a29c; --accent: #ffb000; --accent-2: #55e0a0;
  --line: #2b3330; --card-bg: transparent;
  --font-display: 'Barlow Condensed', system-ui, sans-serif;
  --font-body: 'Barlow Condensed', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius: 0px;
}
body { background: #0a0c0b; font-size: 17px; }
.scene { background: linear-gradient(180deg, #121514 0%, #0a0c0b 100%); }

.frame { padding-top: 0; }
.hero { gap: 6px; border-bottom: 1px solid var(--line); padding: 10px 0 12px; }
.kicker { color: var(--accent); letter-spacing: .18em; font-size: .68rem; }
.title { font-weight: 700; letter-spacing: .02em; font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: .96; color: #ffffff; }
.sub { color: var(--accent); letter-spacing: .3em; font-size: .72rem; }
.lede { color: var(--muted); font-size: 1.15rem; max-width: 60ch; }

.cmd { color: #ffffff; letter-spacing: .24em; }
/* Card copy is set in plain Barlow, not the condensed display face — condensed
   type is hard work at paragraph length. */
.tagline, .desc { font-family: 'Barlow', system-ui, sans-serif; letter-spacing: 0; }
.tagline { font-size: 1.06rem; font-weight: 600; }
.desc { font-size: 1rem; line-height: 1.6; }
.app-list { gap: 0; }
/* Two columns with a rule down the middle. Keyed to column position, not to
   :last-child - that only worked while there were exactly two apps, and with a
   third it put the divider and the inset on the wrong cards. */
.card { border: 0; padding: 0 26px 0 0; gap: 9px; }
.card:nth-child(odd) { border-right: 1px solid var(--line); }
.card:nth-child(even) { padding: 0 0 0 26px; }
/* An odd card with nothing beside it fills the whole row instead of sitting
   half-width with dead space on both sides: screenshot on the left, copy on the
   right, so the bottom row carries the same weight as the two above it. */
.app-list > .card:last-child:nth-child(odd) {
  grid-column: 1 / -1; width: auto; margin: 30px 0 0;
  padding: 30px 0 0; border-right: 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 52px; align-items: start;
}
@media (max-width: 839px) {
  .card, .card:nth-child(odd), .card:nth-child(even) {
    border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 26px;
  }
  .app-list > .card:last-child:nth-child(odd) {
    width: auto; margin: 0; padding: 0 0 26px; border-top: 0;
    display: flex; column-gap: 0;
  }
  .card-body { gap: 9px; }
  .card:last-child { border-bottom: 0; }
}
.shot { border: 1px solid var(--line); background: #060807; padding: 0; border-radius: 0; }
.shot::before, .shot::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--accent); border-style: solid; z-index: 2; }
.shot::before { top: 0; left: 0; border-width: 2px 0 0 2px; }
.shot::after { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
.card:nth-child(even) .shot::before, .card:nth-child(even) .shot::after { border-color: var(--accent-2); }
.card-head { align-items: baseline; }
.card-name { font-weight: 700; font-size: 1.4rem; letter-spacing: .06em; text-transform: uppercase; color: #ffffff; }
.card-tag { order: 3; margin-left: auto; color: var(--accent); font-size: .62rem; letter-spacing: .14em; }
.card:nth-child(even) .card-tag, .card:nth-child(even) .host, .card:nth-child(even) .open { color: var(--accent-2); }
.status { display: none; }
.host { color: var(--accent); letter-spacing: .18em; font-size: .68rem; }
.tagline { color: #ffffff; }
.desc { color: #b6c4bf; font-size: 1rem; }
.tags li { border-color: var(--line); color: var(--muted); font-size: .62rem; }
.card-foot { color: var(--muted); }
.more { color: var(--muted); letter-spacing: .18em; }
.foot { border-top: 1px solid var(--line); color: var(--muted); letter-spacing: .16em; }
.switcher-btn, .switcher-panel { background: #060807; border-color: var(--line); }