@font-face { font-family: "Display"; src: url("/fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Body"; src: url("/fonts/inter-latin-100-normal.woff2") format("woff2"); font-weight: 100; font-display: swap; }
@font-face { font-family: "Body"; src: url("/fonts/inter-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Mono"; src: url("/fonts/jetbrains-mono-latin-100-normal.woff2") format("woff2"); font-weight: 100; font-display: swap; }

:root {
  --canvas: #000000;
  --ink: #e5e5e5;
  --primary: #f1f2f2;
  --muted: #959595;
  --border: #1b1b1b;
  --hover-fg: rgb(43, 51, 63);
  --s-xxs: 16px; --s-xs: 24px; --s-sm: 32px; --s-md: 68px;
  --container: 1308px;
  --tracking: -0.0224em; /* -0.89px @ 39.67px */
}

* { box-sizing: border-box; margin: 0; border-radius: 0; }
html, body { background: var(--canvas); }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  color: var(--ink); font: 100 16px/1.5 "Body", sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }

.mono { font-family: "Mono", monospace; font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 17px; }

.bar { border-bottom: 1px solid var(--border); }
.bar-inner { display: flex; justify-content: space-between; align-items: center; height: 68px; }
.brand { font-weight: 300; color: var(--primary); }
.clock { color: var(--muted); }

.hero {
  font: 400 clamp(64px, 23vw, 328px)/1.11 "Display", sans-serif;
  letter-spacing: var(--tracking); color: var(--primary);
  margin-block: var(--s-sm); white-space: nowrap;
}
.dim { color: var(--muted); }

.index { border-top: 1px solid var(--border); }
.row {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--s-xs);
  align-items: center; min-height: 84px; padding-inline: var(--s-xxs);
  border-bottom: 1px solid var(--border);
}
.num { grid-column: 1; color: var(--muted); }
.name { grid-column: 2 / span 2; font: 400 39.67px/1.11 "Display", sans-serif; letter-spacing: var(--tracking); }
.note { grid-column: 4 / span 3; color: var(--muted); }
.arrow { grid-column: 7; justify-self: end; font-size: 24px; }

a.row:hover { background: #fff; color: var(--hover-fg); }
a.row:hover .num, a.row:hover .note { color: var(--hover-fg); }
.row-off { opacity: 0.25; }

.foot {
  display: flex; justify-content: space-between;
  padding: 33.06px 66.12px; font-weight: 300; color: var(--ink);
}

@media (max-width: 767px) {
  .row { grid-template-columns: 32px minmax(0, 1fr) 24px; column-gap: var(--s-xxs); min-height: 84px; padding-block: var(--s-xxs); padding-inline: 0; }
  .num { grid-column: 1; grid-row: 1; }
  .name { grid-column: 2; grid-row: 1; font-size: 28px; }
  .note { grid-column: 2; grid-row: 2; }
  .arrow { grid-column: 3; grid-row: 1; }
  .foot { padding: var(--s-sm) 17px; }
}

@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: reveal 400ms ease-out backwards; }
  .d2 { animation-delay: 80ms; } .d3 { animation-delay: 160ms; } .d4 { animation-delay: 240ms; }
  .d5 { animation-delay: 320ms; } .d6 { animation-delay: 400ms; }
  @keyframes reveal { from { opacity: 0; transform: translateY(8px); } }
  .row-off.reveal { animation-name: reveal-off; }
  @keyframes reveal-off { from { opacity: 0; transform: translateY(8px); } to { opacity: 0.25; } }
}