/* A scroll-controlled light study. The article stays on a readable surface. */
:root {
  --sky-top: #85c4e7;
  --sky-bottom: #edf4f5;
  --sky-paper: 237, 245, 249;
  --sky-ink: #213445;
  --sky-muted: #536774;
  --sky-line: rgba(33, 52, 69, .2);
  --sun-x: 30vw;
  --sun-y: 25vh;
  --sun-size: 108px;
  --sun-opacity: .9;
  --sun-heat: 0;
  --sunset-opacity: 0;
  --star-opacity: 0;
  --star-drift: 0px;
  --star-turn: -5deg;
  --horizon-shift: 0px;
  --city-presence: 0;
  --city-west: 0;
  --city-east: 0;
  --city-center: 0;
  --city-rise: 22px;
  --city-scale: 1.025;
  --paper: rgb(var(--sky-paper));
  --ink: var(--sky-ink);
  --muted: var(--sky-muted);
  --line: var(--sky-line);
  --green: var(--sky-ink);
}
body.notes-page { background: var(--sky-top); isolation: isolate; }
.day-sky {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  pointer-events: none; contain: strict;
  background: linear-gradient(175deg, var(--sky-top), var(--sky-bottom));
}
.sky-wash {
  position: absolute; inset: -15%; opacity: .6;
  background: radial-gradient(ellipse at 25% 25%, #ffffff3b, transparent 60%);
  transform: translateY(var(--horizon-shift));
}
.sky-sunset {
  position: absolute; inset: -15%;
  background: url('/assets/images/chrono/sunset-horizon.jpg') center 50% / cover;
  opacity: var(--sunset-opacity);
  transform: translateY(var(--horizon-shift)) scale(1.08);
}
.sky-light {
  position: absolute; inset: -25%;
  background: radial-gradient(ellipse at 65% 25%, #fff8d37a, transparent 45%);
  opacity: var(--sun-opacity);
  transform: translate(calc(var(--sun-x) - 60vw), calc(var(--sun-y) - 30vh));
}
.sky-sun {
  position: absolute; top: 0; left: 0; width: var(--sun-size); height: var(--sun-size);
  transform: translate(var(--sun-x), var(--sun-y));
  border-radius: 50%; opacity: var(--sun-opacity);
  background: radial-gradient(circle at 40% 40%, #fffdf0 0%, #fff2c9 55%, #ffe5a3 82%, #ffe0a300 100%);
  box-shadow: 0 0 45px 14px #fff0bf4d, 0 0 130px 65px #ffe5a326;
  will-change: transform;
}
.sky-sun i {
  display: block; width: 100%; height: 100%; border-radius: inherit;
  background: radial-gradient(circle, #ffdc9c, #ffab61 65%, transparent 75%);
  opacity: var(--sun-heat);
}
.sky-stars {
  position: absolute; inset: -12%; opacity: var(--star-opacity);
  transform: translateY(var(--star-drift)) rotate(var(--star-turn));
  transform-origin: 70% 20%; will-change: transform;
}
.sky-stars i {
  position: absolute; display: block; width: var(--star-size); height: var(--star-size);
  border-radius: 50%; background: #e3ecff; opacity: var(--star-alpha);
  box-shadow: 0 0 7px #b7cfff66;
}
.sky-stars i:nth-child(7n) {
  animation: star-breathe 8s ease-in-out infinite alternate;
  animation-delay: var(--star-delay);
}
.sky-horizon {
  position: absolute; inset: 50% -15% -20%;
  background: radial-gradient(ellipse at 50% 100%, var(--sky-bottom), transparent 70%);
  transform: translateY(var(--horizon-shift));
}
/* The architecture and its window light are raster artwork, not CSS drawings.
   Three disjoint districts reveal the same registered image at different times. */
.city-atmosphere {
  position: absolute; inset: 40% 0 0; opacity: var(--city-presence);
  background: radial-gradient(ellipse at 52% 100%, #dfa16b26, transparent 66%);
}
.city-panorama {
  position: absolute; bottom: -2px; left: 50%; width: max(100%, 1100px);
  aspect-ratio: 3 / 2; opacity: var(--city-presence);
  transform: translate(-50%, var(--city-rise)) scale(var(--city-scale));
  transform-origin: 50% 100%;
}
.city-panorama img { position: absolute; inset: 0; width: 100%; height: 100%; }
.city-silhouette { filter: brightness(.22) saturate(.45); }
.city-lights--west { mask-image: linear-gradient(90deg, #000 25%, transparent 42%); opacity: var(--city-west); }
.city-lights--east { mask-image: linear-gradient(90deg, transparent 60%, #000 78%); opacity: var(--city-east); }
.city-lights--center { mask-image: linear-gradient(90deg, transparent 23%, #000 40%, #000 65%, transparent 80%); opacity: var(--city-center); }
.city-vignette {
  position: absolute; inset: 0; opacity: var(--city-presence);
  background: linear-gradient(0deg, #030c1c4d, transparent 35%),
    linear-gradient(90deg, #030c1c1a, transparent 30%, transparent 75%, #030c1c33);
}
.city-interlude {
  position: relative; min-height: 88svh; margin: -35px -32px 135px;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 90px 32px 50px; color: #fff5e9;
}
.interlude-copy {
  position: relative; isolation: isolate; align-self: flex-start;
  padding: 10px 20px; color: var(--sky-ink);
}
.interlude-copy::before { content: ''; position: absolute; z-index: -1; inset: -90px -100px; background: radial-gradient(ellipse, rgba(var(--sky-paper), .97) 25%, rgba(var(--sky-paper), .85) 38%, transparent 72%); pointer-events: none; }
.interlude-copy>.mono { font-size: 9px; letter-spacing: .2em; }
.note-body .interlude-copy>p { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: clamp(32px, 4.8vw, 54px); line-height: 1.65; letter-spacing: .04em; margin: 24px 0; font-weight: 500; }
.interlude-foot { font-size: 12px; }
.interlude-cue { display: flex; align-items: center; align-self: flex-start; gap: 18px; margin: 35px 20px 0; padding: 8px 10px; font: 9px ui-monospace, monospace; letter-spacing: .18em; color: #fff5e9; background: #101c2a; }
.interlude-cue i { display: block; width: 55px; height: 1px; background: currentColor; }
.note-toc { transition: opacity .35s; }
.scene-open .note-toc { opacity: 0; visibility: hidden; }
@keyframes star-breathe { from { opacity: .3; } to { opacity: .85; } }
.notes-header, .reading-bar {
  background: rgb(var(--sky-paper)); color: var(--sky-ink);
  border-color: var(--sky-line);
}
.day-clock { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.clock-caption { font: 10px ui-monospace, monospace; letter-spacing: .12em; color: var(--muted); }
.clock-digits { font: 27px ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.05em; }
.clock-phase { font-size: 11px; border-left: 1px solid var(--line); padding-left: 12px; min-width: 36px; }
.day-hint { color: #355369; font-size: 12px; margin: 18px 0 -18px; letter-spacing: .08em; }
.note-hero { padding-bottom: 85px; }
.hero-copy { position: relative; }
.hero-copy::before {
  content: ''; position: absolute; z-index: -1; inset: -30px;
  background: radial-gradient(ellipse at 30% 45%, rgba(var(--sky-paper), .93), rgba(var(--sky-paper), 0) 75%);
}
.hero-lead { color: var(--sky-ink); }
.hero-figure { --ink: #272d28; color: #272d28; }
.note-layout { padding-top: 115px; }
.note-toc {
  border: 1px solid var(--line); padding: 24px;
  margin-left: -24px; background: rgb(var(--sky-paper));
}
.note-body { position: relative; }
.chapter, .note-sources {
  position: relative; isolation: isolate;
  margin-bottom: 160px;
}
.chapter::before, .note-sources::before {
  content: ''; position: absolute; z-index: -1; inset: -35px -32px;
  background: rgb(var(--sky-paper));
  border: 1px solid var(--sky-line); border-radius: 2px;
  box-shadow: 0 24px 70px -45px #06122566;
}
.note-sources { margin-bottom: 0; border: 0; }
.note-sources::before { inset-block: -15px; }
.section-label, .section-label .mono { color: var(--muted); }
.note-body p { font-size: 16px; }
.note-toc a[aria-current] span { color: #273421; }
.time-lab {
  --ink: #272d28;
  color: #f2f5eb; border: 1px solid #657758;
  box-shadow: 0 14px 40px -25px #030d1a80;
}
.review-notebook, .margin-note, .note-cta {
  --ink: #272d28; --green: #486041; --paper: #f3f1e9; color: #272d28;
}
.step-number { border-color: var(--muted); }
.example-tag { background: var(--sky-line); color: var(--sky-ink); }
.privacy-checklist input { accent-color: var(--sky-ink); }
.note-cta { box-shadow: 0 30px 90px -50px #0009; }
.related-notes, .notes-footer {
  position: relative; isolation: isolate;
}
.related-notes::before, .notes-footer::before {
  content: ''; position: absolute; inset: -20px -25px; z-index: -1;
  background: rgb(var(--sky-paper)); border-radius: 3px;
}
.notes-footer { margin-top: 65px; margin-bottom: 35px; }
.notes-footer::before { inset-block: 0; }
.brand-divider { color: var(--muted); }
@media (hover:hover) {
  .related-notes nav>a:hover { background: var(--sky-line); }
}
@media (max-width: 1100px) {
  .note-toc { padding: 18px; margin-left: -18px; }
  .note-layout { gap: 55px; }
  .chapter::before { inset-inline: -24px; }
  .clock-caption { display: none; }
}
@media (max-width: 800px) {
  .city-panorama { width: max(150%, 850px); left: 54%; }
  .city-interlude { min-height: 92svh; margin: -20px 0 100px; padding: 55px 0 35px; }
  .interlude-copy { padding: 16px 4px; }
  .note-body .interlude-copy>p { font-size: clamp(27px, 8vw, 36px); }
  .interlude-copy::before { inset: -70px -30px; }
  .interlude-cue { margin-left: 4px; }
  .interlude-foot { font-size: 11px; }
  .notes-header { gap: 15px; }
  .notes-header nav { display: none; }
  .day-clock { margin-left: auto; gap: 8px; }
  .clock-digits { font-size: 24px; }
  .clock-phase { font-size: 10px; padding-left: 8px; min-width: 28px; }
  .note-layout { padding-top: 10px; }
  .note-toc { padding: 22px; margin: 28px 0; }
  .note-body { padding-top: 75px; }
  .chapter::before, .note-sources::before { inset-inline: -13px; }
  .chapter { margin-bottom: 130px; }
  .related-notes::before, .notes-footer::before { inset-inline: -13px; }
  .note-hero { padding-bottom: 55px; }
  .day-hint { font-size: 11px; margin-bottom: -14px; }
  .sky-sunset { background-position: 60% 50%; }
}
@media (max-width: 560px) {
  .brand-notes, .brand-divider { display: none; }
  .day-clock { gap: 8px; }
  .clock-digits { font-size: 23px; }
  .clock-phase { font-size: 10px; }
  .note-body p { font-size: 16px; }
  .note-body .section-label { font-size: 10px !important; }
  .note-body .lab-caption, .review-notebook .notebook-caption,
  .note-body .check-status, .note-sources p { font-size: 11px; }
  .note-body .note-label { font-size: 12px; }
  .note-body .closing-line { font-size: 23px; }
  .note-body .notebook-top { margin-bottom: 20px; }
  .note-toc a { font-size: 13px; }
  .hero-copy::before { inset: -15px; }
  .day-hint { font-size: 11px; }
  .hero-figure { width: 100%; }
  .chapter::before { inset-block: -27px; }
  .note-body #reflection-text { font-size: 23px; }
}
.motion-paused .sky-stars i { animation-play-state: paused; }
.sky-tab-hidden .sky-stars i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .sky-stars i { animation: none; }
  .city-interlude { min-height: 35svh; }
}