.solar-day {
  background: #f7f4ec;
  padding-block: clamp(54px, 6vw, 96px);
}
.day-intro { display: flex; justify-content: space-between; align-items: end; gap: 5%; margin-bottom: 32px; }
.day-intro h2 { margin-top: 12px; font-size: clamp(36px, 4.6vw, 72px); letter-spacing: -.06em; font-weight: 610; line-height: 1.05; color: var(--navy); }
.day-label { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.day-label::before { content: ""; width: 32px; height: 2px; background: var(--gold); }
.day-intro > p { width: min(39%, 460px); color: var(--muted); }
.day-board { display: grid; grid-template-columns: 1.2fr 1fr; border: 1px solid #d9ded8; border-radius: 9px; overflow: hidden; background: white; }
.day-art { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; background: linear-gradient(to bottom,var(--sky-top) 0% 28%,var(--sky-low) 52%, var(--ground) 68%); }
.solar-day .day-scene { display: block; width: 100%; height: auto; flex: 1; }
.solar-day {
  --sky-top: #b0d7e8; --sky-low: #ffebc3; --arc: #a58b5e; --hill-far: #adc8bd; --hill: #93b0a4;
  --sea: #81b7be; --ground: #ded5b3; --patio: #e9e1c7; --wall-top: #f7f0d9; --wall-shade: #c4bdab;
  --wall-light: #f0ead8; --glass: #557a82; --ledge: #cec3a6; --cypress: #526f62; --line-flow: #ffc04d;
  --sun-x: 102px; --sun-y: 116px;
}
.solar-day[data-moment="1"] {
  --sky-top: #82c0df; --sky-low: #e3f5f3; --hill-far: #a0c1b7; --hill: #83a79f; --sea: #6fb9c1;
  --ground: #d8d0a7; --wall-light: #fffbec; --sun-x: 289px; --sun-y: 51px;
}
.solar-day[data-moment="2"] {
  --sky-top: #b4c7d9; --sky-low: #ffdbac; --hill-far: #b0b9ae; --hill: #95a99a; --sea: #88b5b4;
  --ground: #d8c2a0; --wall-light: #fce5c6; --sun-x: 469px; --sun-y: 94px;
}
.solar-day[data-moment="3"] {
  --sky-top: #163550; --sky-low: #637486; --arc: #849294; --hill-far: #527182; --hill: #466475;
  --sea: #496f81; --ground: #4a5d62; --patio: #65706b; --wall-top: #b5b9ae; --wall-shade: #687b7b;
  --wall-light: #929e93; --glass: #e8c676; --ledge: #81938b; --cypress: #344e4d; --sun-x: 583px; --sun-y: 170px;
}
.day-sky-top { stop-color: var(--sky-top); }
.day-sky-bottom { stop-color: var(--sky-low); }
.day-sun { transform: translate(var(--sun-x),var(--sun-y)); }
.day-night-sky,.day-path { opacity: 0; }
.solar-day[data-moment="3"] .day-sun { opacity: 0; }
.solar-day[data-moment="3"] .day-night-sky,
.solar-day[data-moment="0"] .path-0,.solar-day[data-moment="1"] .path-1,
.solar-day[data-moment="2"] .path-2,.solar-day[data-moment="3"] .path-3 { opacity: 1; }
.day-reading { min-width: 0; padding: clamp(22px,3vw,45px); align-self: center; }
.day-tabs { display: none; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; border-bottom: 1px solid #d7dedb; margin-bottom: 24px; }
.solar-day.is-interactive .day-tabs { display: grid; }
.day-tabs button { position: relative; appearance: none; border: 0; background: transparent; padding: 6px 0 12px; text-align: left; color: #5a6d75; }
.day-tabs button b,.day-tabs button span { display: block; }
.day-tabs button span { font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.day-tabs button b { font-size: clamp(.73rem,.9vw,.9rem); font-weight: 640; }
.day-tabs button[aria-selected="true"] { color: var(--navy); }
.day-tabs button[aria-selected="true"]::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 3px; border-radius: 1px; background: #eead2e; }
.day-tabs button:hover b { text-decoration: underline; text-underline-offset: 3px; }
.day-panel { padding-block: 9px; }
.day-panel:not([hidden]) + .day-panel:not([hidden]) { border-top: 1px solid #ddd; }
.day-panel[hidden] { display: none; }
.day-panel:focus-visible { outline: 3px solid #0786c1; outline-offset: 4px; }
.day-moment { color: #496775; font-size: .73rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.is-interactive .day-moment { display:none; }
.day-panel h3 { margin-top: 7px; color: var(--navy); font-size: clamp(25px,2.6vw,42px); letter-spacing: -.05em; font-weight: 610; line-height: 1.1; }
.day-panel p { margin-top: 12px; color: var(--muted); max-width: 44ch; font-size: 15px; }
.day-flow { margin-top: 20px; padding: 7px 11px; display: inline-flex; gap: 8px; align-items: center; color: #36536a; font-size: .77rem; font-weight: 660; background:#f5f4ec; border-radius: 4px; }
.day-flow i { width: 8px; height: 8px; border-radius: 50%; background: #ffbc36; box-shadow: 0 0 0 1px #da9c26; }
.day-note { color:#556a72; margin-top: 13px; font-size: 12px; }
@media (prefers-reduced-motion:no-preference) {
  .day-sun { transition: transform .55s ease, opacity .35s; }
  .day-path,.day-night-sky { transition: opacity .3s; }
}
@media (max-width: 870px) {
  .day-board { grid-template-columns: 1fr 1fr; }
  .day-intro { display:block; }
  .day-intro > p { margin-top: 15px; width: min(100%,580px); }
}
@media (max-width: 680px) {
  .day-board { grid-template-columns: 1fr; }
  .day-intro { margin-bottom: 23px; }
  .day-reading { padding: 18px 19px 24px; }
  .day-tabs { margin-bottom: 12px; }
  .day-panel { padding: 0; }
  .day-tabs button b { font-size: .78rem; }
  .day-flow { margin-top: 14px; }
}