/* A day in the park: each part of the story has the light of its time of day, from dawn gold to bright midday, warm
   afternoon, dusk and night, and its place over its heading, with the sun on its arc or the moon. Where a part's light
   ends the next one's begins, so the page moves through the day as it is read. How to use puts the same places over
   its topics (how-to.css), with a bag for packing and a plane for heading home, on its usual light. */
:root {
  --dawn: #f6e8cf; --morning: #f4efe6; --midday: #fbf8f2; --afternoon: #f2e1c4; --sunset: #b04a2e; --night: #10150f; --late: #080b07;
  --sun: #d9902a; --sun-low: #c8642a; --moon: #e9e2cf; --arc: rgba(99, 87, 72, 0.5); --arc-dark: rgba(244, 239, 230, 0.4);
  --kicker-dark: #e7c48a; --link-dark: #a9d39a; --star-dim: rgba(233, 226, 207, 0.5);
}
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ochre); }
/* The sun's rays reach past the sky's box where the sun stands low at its ends. */
.sky { width: 56px; height: 30px; flex: none; overflow: visible; }
.sky .arc { fill: none; stroke: var(--arc); stroke-width: 1.5; stroke-dasharray: 2 3; }
.sky .sun { fill: var(--sun); color: var(--sun); }
.sky .sun.low { fill: var(--sun-low); color: var(--sun-low); }
.sky .moon { fill: var(--muted); }
.day-night .sky .moon, .day-late .sky .moon { fill: var(--moon); }
.sky .trip { fill: none; stroke: var(--ochre); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.day-dawn { background: linear-gradient(var(--dawn), var(--morning)); }
.day-morning { background: var(--morning); }
.day-midday { background: linear-gradient(var(--morning), var(--midday)); }
.day-afternoon { background: linear-gradient(var(--midday), var(--afternoon)); }
/* Back at camp opens on a red sunset between the afternoon and the dusk. The fade ends within the section's own
   padding, at every width, before the kicker, whose light words need the dark under them. */
.day-dusk { background: linear-gradient(var(--afternoon), var(--sunset) calc(var(--section-pad) * 0.4), var(--dusk) calc(var(--section-pad) - 4px)); }
.day-night { background: linear-gradient(var(--dusk), var(--night)); color: var(--dusk-ink); }
/* Lights out's sky holds a few stars, some bright and some faint, in the room above the words and below them, never
   behind a line: each star is placed within a band as tall as the section's own padding at the top or the bottom. */
.day-late {
  background:
    radial-gradient(circle at 6% 35%, var(--moon) 0 1.1px, transparent 1.7px) top / 100% var(--section-pad) no-repeat,
    radial-gradient(circle at 17% 70%, var(--star-dim) 0 0.8px, transparent 1.4px) top / 100% var(--section-pad) no-repeat,
    radial-gradient(circle at 29% 25%, var(--moon) 0 1.3px, transparent 1.9px) top / 100% var(--section-pad) no-repeat,
    radial-gradient(circle at 44% 58%, var(--star-dim) 0 0.9px, transparent 1.5px) top / 100% var(--section-pad) no-repeat,
    radial-gradient(circle at 58% 20%, var(--moon) 0 1.1px, transparent 1.7px) top / 100% var(--section-pad) no-repeat,
    radial-gradient(circle at 71% 65%, var(--moon) 0 1.4px, transparent 2px) top / 100% var(--section-pad) no-repeat,
    radial-gradient(circle at 84% 30%, var(--star-dim) 0 0.9px, transparent 1.5px) top / 100% var(--section-pad) no-repeat,
    radial-gradient(circle at 93% 62%, var(--moon) 0 1.2px, transparent 1.8px) top / 100% var(--section-pad) no-repeat,
    radial-gradient(circle at 12% 45%, var(--star-dim) 0 1px, transparent 1.6px) bottom / 100% var(--section-pad) no-repeat,
    radial-gradient(circle at 76% 35%, var(--moon) 0 1.2px, transparent 1.8px) bottom / 100% var(--section-pad) no-repeat,
    radial-gradient(circle at 90% 70%, var(--star-dim) 0 0.8px, transparent 1.4px) bottom / 100% var(--section-pad) no-repeat,
    linear-gradient(var(--night), var(--late));
  color: var(--dusk-ink);
}
.day-dusk .kicker, .day-night .kicker, .day-late .kicker { color: var(--kicker-dark); }
.day-dusk .sky .arc, .day-night .sky .arc, .day-late .sky .arc { stroke: var(--arc-dark); }
.day-night h2, .day-late h2 { color: var(--dusk-ink); }
.day-dusk a, .day-night a, .day-late a { color: var(--link-dark); }
.day-night .phone { box-shadow: var(--phone-shadow-dusk); }