:root {
  color-scheme: dark;
  --background: #090909;
  --text: #eeeae1;
  --gold: #c7a76a;
  --muted: #a39a88;
  --line: #29251d;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  background: radial-gradient(ellipse at 85% 0, #b28b4310, transparent 48%), var(--background);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: #c7a76a; color: #090909; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid var(--gold); outline-offset: 8px; }
.page-shell { max-width: 1280px; margin: 0 auto; padding: 0 64px 100px; }
.site-header { height: 108px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 15px; color: var(--gold); }
.brand-mark { width: 31px; height: 31px; }
.brand span { font-size: 10px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; }
main { padding-top: 67px; }
.list-heading { margin-bottom: 46px; }
h1 {
  display: flex; align-items: center; gap: 19px; margin: 0;
  font-family: var(--serif); font-size: 48px; font-weight: 400;
  line-height: 1.1; letter-spacing: -1.8px;
}
.people-count {
  align-self: center; padding: 6px 9px; border: 1px solid #655234;
  border-radius: 3px; color: var(--gold); font-family: var(--sans);
  font-size: 10px; font-weight: 400; line-height: 1; letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.column-headings, .person-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 240px) 190px;
  column-gap: 36px; padding-left: 43px; padding-right: 43px;
}
.column-headings {
  padding-bottom: 17px; color: var(--muted); font-size: 9px;
  font-weight: 400; letter-spacing: 2px; text-transform: uppercase;
}
.column-headings > :last-child { padding-left: 32px; }
.people-list { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; }
.person-card {
  position: relative; align-items: center; min-height: 188px;
  padding-top: 33px; padding-bottom: 33px;
  border: 1px solid #383022; border-radius: 5px;
  background: linear-gradient(110deg, #191712, #131311 52%, #111110);
  box-shadow: inset 0 1px 0 #f5d69a08, 0 8px 32px #00000016;
  transition: border-color .2s;
}
.person-card::before {
  content: ''; position: absolute; top: 43px; bottom: 43px; left: -1px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(transparent, #bf9c60 25%, #bf9c60 75%, transparent);
}
.person-card:hover { border-color: #78603a; }
.person-name {
  min-width: 0; margin: 0; font-family: var(--serif); font-size: 42px;
  font-weight: 400; line-height: 1.2; letter-spacing: -1.2px;
  overflow-wrap: anywhere;
}
.person-duration { min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.day-count {
  color: #dfc28b; font-family: var(--serif); font-size: 68px; font-weight: 400;
  line-height: 1; letter-spacing: -2.5px;
  font-variant-numeric: lining-nums tabular-nums;
}
.day-label { color: var(--muted); font-size: 11px; font-weight: 400; }
.person-date {
  padding: 13px 0 13px 32px; border-left: 1px solid #332d21;
  color: #c0b6a3; font-size: 13px; font-weight: 400;
  letter-spacing: .3px; white-space: nowrap;
}
.date-label { display: none; }
.empty-state { padding: 46px; border: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 12px; background: var(--gold); color: #090909; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
@media (max-width: 1000px) {
  .page-shell { padding-left: 40px; padding-right: 40px; }
  .column-headings, .person-card { grid-template-columns: minmax(0, 1fr) 180px 165px; column-gap: 24px; padding-left: 32px; padding-right: 32px; }
  .day-count { font-size: 60px; }
  .person-name { font-size: 38px; }
  .person-date, .column-headings > :last-child { padding-left: 25px; }
}
@media (max-width: 740px) {
  .page-shell { padding: 0 25px 60px; }
  .site-header { height: 86px; }
  main { padding-top: 42px; }
  .list-heading { margin-bottom: 30px; }
  h1 { font-size: 40px; }
  .column-headings { display: none; }
  .person-card { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 13px; min-height: 177px; padding: 34px 29px; }
  .person-name { align-self: end; font-size: 37px; }
  .person-duration { grid-column: 2; grid-row: 1 / 3; align-items: flex-end; flex-direction: column; gap: 8px; }
  .day-count { font-size: 62px; }
  .day-label { padding-right: 3px; font-size: 10px; }
  .person-date { grid-column: 1; align-self: start; border: 0; padding: 0; font-size: 11px; letter-spacing: .1px; }
  .date-label { display: inline; margin-right: 5px; color: var(--muted); }
  .person-card::before { top: 32px; bottom: 32px; }
}
@media (max-width: 400px) {
  .page-shell { padding-left: 18px; padding-right: 18px; }
  .person-card { column-gap: 15px; padding: 30px 22px; min-height: 164px; }
  .person-name { font-size: 32px; }
  .day-count { font-size: 53px; }
  .person-date { font-size: 10px; }
  .brand span { font-size: 9px; letter-spacing: 2.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}