:root {
  --lobby-ink: #172039;
  --lobby-paper: #fffbed;
  --lobby-rule: #35465f;
  --lobby-live: #1c6653;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--lobby-ink);
  background: #dce4ed;
  font-family: Tahoma, Verdana, sans-serif;
}

a { color: #214c98; }

.instrument-lobby {
  width: min(1120px, calc(100% - 32px));
  margin: 24px auto;
  background: var(--lobby-paper);
  border: 1px solid var(--lobby-rule);
  box-shadow: 8px 10px 0 rgba(23, 32, 57, .18);
}

.lobby-fresco {
  padding: clamp(30px, 6vw, 72px);
  color: white;
  background: linear-gradient(125deg, #153879, #3772ad 58%, #77a071);
  border-bottom: 8px solid #f2bd76;
}

.lobby-fresco a { color: white; }
.lobby-kicker, .lobby-eyebrow { margin: 0 0 12px; font-size: 11px; font-weight: bold; letter-spacing: .16em; text-transform: uppercase; }
.lobby-fresco h1 { margin: 30px 0 16px; max-width: 850px; font: bold clamp(44px, 8vw, 88px)/.96 Arial, sans-serif; letter-spacing: -.05em; }
.lobby-deck { max-width: 800px; margin: 0; font: 22px/1.45 Georgia, serif; }

.lobby-floor { padding: clamp(26px, 5vw, 56px); }
.lobby-heading { display: grid; grid-template-columns: 1fr minmax(260px, .7fr); gap: 26px; align-items: end; margin-bottom: 28px; }
.lobby-heading h2 { margin: 0; font: bold clamp(28px, 4vw, 46px)/1 Arial, sans-serif; letter-spacing: -.035em; }
.lobby-heading > p { margin: 0; font: 16px/1.55 Georgia, serif; }

.instrument-register { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.instrument-record { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(220px, .65fr); gap: 22px; padding: 24px; background: white; border: 1px solid var(--lobby-rule); box-shadow: 4px 5px 0 rgba(23, 32, 57, .12); }
.instrument-state { align-self: start; display: inline-block; padding: 7px 9px; color: white; background: var(--lobby-live); border: 1px solid var(--lobby-rule); font-size: 10px; font-weight: bold; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.instrument-copy h3 { margin: 0 0 8px; font: bold 24px/1.12 Arial, sans-serif; }
.instrument-invitation { margin: 0 0 12px; font: italic 18px/1.4 Georgia, serif; }
.instrument-experience, .instrument-fact, .instrument-relationship { margin: 0; font: 15px/1.5 Georgia, serif; }
.instrument-meta { display: grid; align-content: start; gap: 14px; padding-left: 20px; border-left: 1px solid var(--lobby-rule); }
.instrument-meta strong { display: block; margin-bottom: 4px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.instrument-command { display: inline-block; justify-self: start; padding: 11px 14px; color: white; background: var(--lobby-live); border: 1px solid var(--lobby-rule); font-weight: bold; text-decoration: none; }
.resident-register { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; margin-top: 34px; padding: 24px; background: #e9eef7; border: 1px solid var(--lobby-rule); }
.resident-register img { width: 160px; height: 160px; object-fit: contain; }
.resident-register h2 { margin: 0 0 10px; font: bold 28px/1.1 Arial, sans-serif; }
.resident-register p { margin: 0 0 12px; font: 16px/1.5 Georgia, serif; }
.resident-register ul { margin: 0; padding-left: 20px; columns: 2; }
.resident-register li { margin-bottom: 8px; break-inside: avoid; }

.lobby-status { display: flex; justify-content: space-between; gap: 18px; padding: 13px 17px; color: white; background: #172039; font-size: 11px; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; }
.lobby-status a { color: white; }

@media (max-width: 760px) {
  .instrument-lobby { width: 100%; margin: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .lobby-heading, .instrument-record, .resident-register { grid-template-columns: 1fr; }
  .instrument-meta { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--lobby-rule); }
  .instrument-state { justify-self: start; }
  .resident-register ul { columns: 1; }
  .lobby-status { flex-direction: column; }
}