.day-outer {
  --sky-morning: oklch(97% 0.014 95);
  --sky-day: var(--bg);
  --sky-golden: oklch(92% 0.045 78);
  --sky-dusk: oklch(34% 0.035 45);
  --sky-night: oklch(17% 0.02 265);
  --runway-per: 45vh;
  --count: 8;
  height: calc(100svh + var(--runway-per) * var(--count));
  background: var(--sky, var(--sky-day));
  color: var(--fg);
  transition: background-color 1.2s var(--ease-out), color 1.2s var(--ease-out);
}
.day-outer[data-phase="morning"] { --sky: var(--sky-morning); }
.day-outer[data-phase="golden"] { --sky: var(--sky-golden); }
.day-outer[data-phase="dusk"] { --sky: var(--sky-dusk); }
.day-outer[data-phase="night"] { --sky: var(--sky-night); }
.day-outer.is-dark { color: var(--bg); }
.day-outer.is-dark .eyebrow, .day-outer.is-dark .day-text p, .day-outer.is-dark .day-ticks button { color: var(--ink-muted); }
.day-outer.is-dark .eyebrow .num, .day-outer.is-dark .day-ticks button.is-on { color: var(--bg); }

.day-stage {
  position: sticky; top: 0; height: 100svh;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-5);
  max-width: var(--max-w); margin-inline: auto; padding: calc(var(--nav-h) + var(--space-5)) var(--gutter) var(--space-6);
}
.day-main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--space-6), 5vw, var(--space-9)); align-items: center; min-height: 0; }
.day-time { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--fs-mega); line-height: 0.9; font-variant-numeric: tabular-nums; }
.day-text { display: grid; gap: var(--space-4); }
.day-text h3 { font-family: var(--font-display); font-weight: var(--weight-regular); font-style: italic; font-size: var(--fs-h2); line-height: var(--lh-snug); }
.day-text p { font-size: var(--fs-lead); color: var(--muted); max-width: 26rem; }
.day-text > * { transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.day-text.is-swapping > * { opacity: 0; transform: translateY(10px); }

.day-photos { position: relative; height: 100%; max-height: 62vh; min-height: 0; }
.day-photo { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity 900ms var(--ease-out), transform 1.6s var(--ease-out); }
.day-photo img { width: 100%; height: 100%; object-fit: cover; }
.day-photo.is-on { opacity: 1; transform: none; }

.day-arc { position: relative; }
.day-arc svg { display: block; width: 100%; height: 70px; overflow: visible; }
.day-arc path { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 6; opacity: 0.5; }
.day-sun { position: absolute; width: 18px; height: 18px; border-radius: 50%; translate: -50% -50%; background: var(--accent); transition: background-color 1.2s; }
.day-outer.is-dark .day-sun { background: var(--bg); box-shadow: inset -5px -2px 0 0 var(--sky-night); }
.day-ticks { display: flex; justify-content: space-between; margin-top: var(--space-2); }
.day-ticks button {
  min-height: var(--tap); min-width: var(--tap); padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.04em; color: var(--muted);
  transition: color var(--dur-fast);
}
.day-ticks button.is-on { color: var(--fg); text-decoration: underline; text-underline-offset: 6px; }

@media (max-width: 860px) {
  .day-outer { --runway-per: 35vh; }
  .day-main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .day-photos { order: -1; max-height: 34vh; }
  .day-time { font-size: var(--fs-h1); }
  .day-text h3 { font-size: var(--fs-h3); }
  .day-text p { font-size: var(--fs-body); }
  .day-ticks button:nth-child(even) { visibility: hidden; }
}
@media (max-width: 400px) { .day-ticks button { flex: 1 1 0; min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .day-outer, .day-photo, .day-text > * { transition: none; } }