* {
  box-sizing:border-box;
}

html {
  background:#fff;
}

body {
  margin:0;
  background:var(--paper,#fff);
  color:var(--ink,#152534);
  font-family:var(--font-body,system-ui,sans-serif);
  line-height:1.5;
}

body.loading #app,
body.loading footer {
  visibility:hidden;
}

body.failed #app,
body.failed footer,
body.failed nav {
  display:none;
}

a {
  color:inherit;
}

.topbar {
  position:sticky;
  top:0;
  z-index:20;

  min-height:72px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;

  padding:
    0 max(
      24px,
      calc((100vw - 1240px) / 2)
    );

  background:
    rgba(255,255,255,.96);

  border-bottom:
    1px solid rgba(7,26,43,.13);

  backdrop-filter:
    blur(16px);
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;

  font-family:
    var(--font-heading,system-ui,sans-serif);

  text-decoration:none;
}

.mark {
  width:18px;
  height:18px;

  border-radius:50%;

  background:
    var(--orange);
}

nav {
  display:flex;
  gap:24px;

  font-size:14px;
}

nav a {
  color:#62707d;
  text-decoration:none;
}

nav a:hover,
nav a:focus {
  color:
    var(--navy);
}

main {
  width:
    min(
      1500px,
      calc(100% - 32px)
    );

  margin:
    0 auto;

  padding:
    56px 0 48px;
}

.hero {
  margin-bottom:42px;
}

.eyebrow,
.card-type {
  margin:
    0 0 12px;

  color:
    var(--orange-dark);

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    .14em;
}

.hero h1,
.lane h2,
.card h3 {
  font-family:
    var(--font-heading,system-ui,sans-serif);

  color:
    var(--navy);
}

.hero h1 {
  margin:0;

  font-size:
    clamp(
      58px,
      8vw,
      104px
    );

  line-height:
    .9;

  letter-spacing:
    -.045em;
}

.hero p:last-child {
  margin:
    22px 0 0;

  color:
    #62707d;

  font-size:
    21px;
}

.board {
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(245px,1fr)
    );

  gap:14px;

  align-items:start;

  overflow-x:auto;

  padding-bottom:12px;
}

.lane {
  min-height:420px;

  padding:12px;

  background:
    rgba(7,26,43,.045);

  border:
    1px solid rgba(7,26,43,.13);

  border-radius:20px;
}

.lane-heading {
  min-height:42px;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;

  padding:
    4px 5px 12px;
}

.lane-heading h2 {
  margin:0;
  font-size:17px;
}

.lane-heading span {
  min-width:28px;

  padding:
    4px 8px;

  border-radius:999px;

  background:
    rgba(7,26,43,.08);

  color:
    #53616c;

  text-align:center;

  font-size:12px;
  font-weight:700;
}

.cards {
  display:grid;
  gap:9px;
}

.card {
  padding:17px;

  background:#fff;

  border:
    1px solid rgba(7,26,43,.13);

  border-radius:16px;

  box-shadow:
    0 6px 18px rgba(7,26,43,.045);
}

.card-type {
  margin-bottom:8px;
  text-transform:uppercase;
}

.card h3 {
  margin:0;

  font-size:19px;

  letter-spacing:
    -.02em;
}

.card-instance {
  margin-top:9px;

  color:#62707d;

  font-size:12px;
}

.empty {
  margin:4px;

  padding:
    22px 8px;

  color:#8a949c;

  text-align:center;

  font-size:13px;
}

.status {
  margin-top:16px;

  color:#62707d;

  font-size:12px;
}

footer {
  width:
    min(
      1500px,
      calc(100% - 32px)
    );

  margin:
    0 auto;

  display:flex;
  justify-content:space-between;
  gap:20px;

  padding:
    24px 0 36px;

  border-top:
    1px solid rgba(7,26,43,.13);

  color:#62707d;

  font-size:12px;
}

.fatal {
  width:
    min(
      720px,
      calc(100% - 32px)
    );

  margin:
    60px auto;

  padding:
    20px;

  background:#fff;

  border:
    1px solid #d7dde2;

  border-radius:16px;

  color:#152534;
}

@media(max-width:980px) {

  .board {
    grid-template-columns:
      repeat(
        4,
        minmax(270px,1fr)
      );
  }
}

@media(max-width:620px) {

  .topbar {
    min-height:auto;

    align-items:flex-start;
    flex-direction:column;

    padding:
      14px 20px;
  }

  main {
    width:
      calc(100% - 20px);

    padding-top:
      38px;
  }

  footer {
    width:
      calc(100% - 20px);

    flex-direction:column;
  }
}