:root {
  --year-done: #6d8f00;
  --year-done-soft: #e5f3b8;
  --year-future: #9d9a91;
  --orbit-surface: #f5f2e8;
  --orbit-copy: #11120f;
  --orbit-muted: #6c6a63;
  --orbit-line: #c9c5ba;
  --orbit-photo-filter: grayscale(1) contrast(1.04);
}

:root[data-theme="dark"] {
  --year-done: #ceff00;
  --year-done-soft: #2b330d;
  --year-future: #74756f;
  --orbit-surface: #0d0f0e;
  --orbit-copy: #f2eee4;
  --orbit-muted: #aaa69d;
  --orbit-line: #363832;
  --orbit-photo-filter: grayscale(1) contrast(1.13) brightness(.72);
}

.brand > .brand-yearline {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  letter-spacing: 0;
}

.brand-yearline svg { width: 100%; height: 100%; }
.brand-yearline .yearline-past { stroke: var(--volt); }
.brand-yearline .yearline-today { stroke: #f3f0e7; }
.brand-yearline .yearline-future { stroke: #a9a59b; }
.brand-yearline .yearline-tick { stroke: var(--signal-bright); }

.orbit-hero {
  --year-progress: 195deg;
  --today-angle: 195deg;
  overflow: hidden;
  padding: clamp(2.5rem, 5vw, 5.5rem) 0 0;
  border-bottom: 1px solid var(--orbit-line);
  background: var(--orbit-surface);
  color: var(--orbit-copy);
  transition: background-color .2s ease, color .2s ease;
}

.orbit-hero__main {
  display: grid;
  grid-template-columns: minmax(28rem, 1.02fr) minmax(27rem, .98fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 7rem);
  min-height: min(46rem, calc(100vh - 9rem));
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
}

.orbit-visual { display: grid; place-items: center; min-width: 0; }

.year-orbit {
  position: relative;
  width: min(41rem, 46vw);
  aspect-ratio: 1;
  isolation: isolate;
}

.orbit-ticks,
.orbit-ticks::before,
.orbit-ticks::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.orbit-ticks::before,
.orbit-ticks::after {
  content: "";
  background: repeating-conic-gradient(from 0deg, currentColor 0 .34deg, transparent .34deg .9863deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
}

.orbit-ticks::before { color: var(--year-future); opacity: .78; }
.orbit-ticks::after {
  color: var(--volt);
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)),
    conic-gradient(#000 0 var(--year-progress), transparent var(--year-progress) 360deg);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)),
    conic-gradient(#000 0 var(--year-progress), transparent var(--year-progress) 360deg);
  mask-composite: intersect;
}

.orbit-photo {
  position: absolute;
  inset: 7.5%;
  z-index: -1;
  overflow: hidden;
  border-radius: 50%;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--orbit-surface) 68%, transparent), transparent 35% 72%, color-mix(in srgb, var(--orbit-surface) 74%, transparent)),
    url('/images/runner-city.jpg') center 36% / cover no-repeat;
  filter: var(--orbit-photo-filter);
}

.orbit-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 5rem 2rem var(--orbit-surface);
}

.orbit-start,
.orbit-finish,
.orbit-count {
  position: absolute;
  color: var(--orbit-muted);
  font: 700 .58rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.orbit-start { top: -1.15rem; left: 50%; transform: translateX(-50%); }
.orbit-finish { bottom: -1.7rem; left: 50%; transform: translateX(-50%); }
.orbit-count { top: 50%; left: -2.8rem; transform: translateY(-50%) rotate(-90deg); color: var(--year-done); }

.orbit-today-track {
  position: absolute;
  inset: -.15rem;
  z-index: 3;
  transform: rotate(var(--today-angle));
  pointer-events: none;
}

.orbit-today {
  position: absolute;
  top: -.75rem;
  left: 50%;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .28rem .42rem;
  border-radius: 999px;
  background: var(--orbit-surface);
  box-shadow: 0 0 0 .28rem var(--orbit-surface);
  transform: translateX(-50%) rotate(calc(-1 * var(--today-angle)));
  transform-origin: center;
  white-space: nowrap;
}

.orbit-today i {
  width: 2.45rem;
  height: 2.45rem;
  border: 4px solid var(--signal);
  border-radius: 50%;
  background: var(--orbit-surface);
}

.orbit-today strong { color: var(--signal); font: 800 1.7rem/.86 var(--sans); letter-spacing: -.06em; }
.orbit-today span { display: grid; gap: .18rem; }
.orbit-today b { color: var(--signal); font: 800 .62rem/1 var(--sans); text-transform: uppercase; }
.orbit-today small { color: var(--orbit-muted); font: 750 .58rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.orbit-hero.is-second-half .orbit-today { flex-direction: row-reverse; }
.orbit-hero.is-second-half .orbit-today span { text-align: right; }

.orbit-copy { align-self: center; padding-top: 1rem; }
.orbit-copy .eyebrow { color: var(--year-done); }
.orbit-copy h1 {
  margin: 0;
  color: var(--orbit-copy);
  font: 820 clamp(4.2rem, 8.3vw, 8.8rem)/.77 var(--sans);
  letter-spacing: -.087em;
  text-transform: uppercase;
}
.orbit-copy h1 em { color: var(--signal); font-style: normal; }
.orbit-dek {
  position: relative;
  max-width: 34rem;
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
  padding-top: 1.5rem;
  color: var(--orbit-copy);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.28;
}
.orbit-dek::before { content: ""; position: absolute; top: 0; left: 0; width: 2.8rem; border-top: 1px solid var(--orbit-muted); }
.orbit-facts { display: flex; gap: 2.4rem; margin: 2rem 0 0; }
.orbit-facts div { display: grid; grid-template-columns: auto auto; align-items: end; gap: .5rem; }
.orbit-facts div + div { padding-left: 2.4rem; border-left: 1px solid var(--orbit-line); }
.orbit-facts dt { color: var(--year-done); font: 780 clamp(2.1rem, 4vw, 3.2rem)/.8 var(--sans); letter-spacing: -.06em; }
.orbit-facts dd { margin: 0; color: var(--orbit-muted); font: 750 .7rem/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.button.button-volt { border-color: var(--volt); background: var(--volt); color: #111; }
.orbit-download { color: var(--orbit-muted); font: 700 .72rem/1 var(--sans); text-underline-offset: .25em; }

.orbit-calendar { padding-bottom: 1.3rem; }
.orbit-days,
.orbit-months { margin: 0; padding: 0; list-style: none; }

.orbit-days {
  display: grid;
  grid-template-columns: repeat(15, minmax(3.9rem, 1fr));
  border-top: 1px solid var(--orbit-line);
  border-bottom: 1px solid var(--orbit-line);
}

.orbit-day {
  position: relative;
  display: grid;
  grid-template-rows: 1rem 3.4rem 1rem;
  justify-items: center;
  gap: .35rem;
  min-width: 0;
  padding: .75rem .15rem;
  color: var(--orbit-muted);
  font-family: var(--sans);
}
.orbit-day::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; }
.orbit-day.is-past::before { background: var(--volt); }
.orbit-weekday,
.orbit-status { overflow: hidden; max-width: 100%; font: 750 .53rem/1 var(--sans); letter-spacing: .05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.orbit-date {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border: 1px solid transparent;
  border-radius: 50%;
}
.orbit-date strong { font: 760 1.15rem/.85 var(--sans); letter-spacing: -.04em; }
.orbit-date small { font: 700 .47rem/1 var(--sans); text-transform: uppercase; }
.orbit-day.is-past .orbit-date { background: color-mix(in srgb, var(--volt) 18%, var(--orbit-surface)); color: var(--year-done); }
.orbit-day.is-past .orbit-status { color: var(--year-done); }
.orbit-day.is-today .orbit-date { border: 2px solid var(--signal); color: var(--orbit-copy); }
.orbit-day.is-today .orbit-status { color: var(--signal); }
.orbit-day.is-future .orbit-date { border-color: var(--year-future); border-style: dashed; color: var(--year-future); }

.orbit-months {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  border-bottom: 1px solid var(--orbit-line);
}
.orbit-months li {
  position: relative;
  display: grid;
  gap: .25rem;
  min-height: 6.9rem;
  padding: 1rem .75rem;
  border-right: 1px solid var(--orbit-line);
}
.orbit-months li:first-child { border-left: 1px solid var(--orbit-line); }
.orbit-months strong { color: var(--orbit-copy); font: 750 1rem/1 var(--sans); }
.orbit-months span { color: var(--orbit-muted); font: 700 .51rem/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.orbit-months i { position: absolute; left: .75rem; right: 0; bottom: 0; height: 3.2rem; overflow: hidden; }
.orbit-months i::before,
.orbit-months i::after { content: ""; position: absolute; width: 6rem; height: 6rem; border: 1px solid var(--orbit-line); border-radius: 50%; left: 0; top: .7rem; }
.orbit-months i::after { width: 4.4rem; height: 4.4rem; top: 1.5rem; }
.orbit-months li.is-current strong,
.orbit-months li.is-current span { color: var(--signal); }
.orbit-months li.is-current i::before,
.orbit-months li.is-current i::after { border-color: var(--signal); }

@media (max-width: 1100px) {
  .orbit-hero__main { grid-template-columns: minmax(24rem, 1fr) minmax(23rem, .9fr); }
  .year-orbit { width: min(36rem, 48vw); }
  .orbit-count { left: -2.45rem; }
  .orbit-copy h1 { font-size: clamp(4.3rem, 8.6vw, 7rem); }
  .orbit-days { grid-template-columns: repeat(15, 4.5rem); overflow-x: auto; scrollbar-width: thin; }
  .orbit-months { grid-template-columns: repeat(12, minmax(7rem, 1fr)); overflow-x: auto; scrollbar-width: thin; }
}

@media (max-width: 820px) {
  .orbit-hero { padding-top: 3.2rem; }
  .orbit-hero__main { grid-template-columns: 1fr; gap: 4rem; min-height: 0; }
  .year-orbit { width: min(37rem, 88vw); }
  .orbit-copy { width: min(40rem, 100%); padding-top: 0; }
  .orbit-copy h1 { font-size: clamp(4.6rem, 17vw, 8rem); }
  .orbit-calendar { width: 100%; }
  .orbit-days,
  .orbit-months { padding-inline: .625rem; }
}

@media (max-width: 520px) {
  .brand > .brand-yearline { width: 2.15rem; height: 2.15rem; }
  .orbit-hero { padding-top: 2.1rem; }
  .orbit-hero__main { gap: 3rem; padding-bottom: 2.8rem; }
  .year-orbit { width: min(31rem, 88vw); }
  .orbit-count { left: -2.15rem; font-size: .49rem; }
  .orbit-today { gap: .35rem; }
  .orbit-today i { width: 1.75rem; height: 1.75rem; border-width: 3px; }
  .orbit-today strong { font-size: 1.25rem; }
  .orbit-today b,
  .orbit-today small { font-size: .48rem; }
  .orbit-copy .eyebrow { font-size: .57rem; }
  .orbit-copy h1 { font-size: clamp(4rem, 21vw, 6rem); }
  .orbit-dek { font-size: 1.35rem; }
  .orbit-facts { gap: 1.2rem; }
  .orbit-facts div + div { padding-left: 1.2rem; }
  .orbit-copy .button-row { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-hero,
  .theme-switch::before { transition: none; }
}