/* The reading column keeps time with the evening on the left: each chapter opens on the hour the sky shows,
   its title takes light once as it arrives, prints develop, and at night the column's rules and marks warm like the lamps. */

/* the opener: the hour, the title, a hairline, one line in italic. The hour names the time on the scene, so it is set as text, not as a label */
.opener { margin-bottom: 2rem; }
.opener__hour { font-family: var(--font-text); font-style: italic; font-size: 1.05rem; color: var(--ink-2); margin-bottom: 0.35rem; }
.opener h2 { margin: 0; }
.opener h2::after { content: ""; display: block; height: 1px; margin-top: 1.1rem; background: var(--hairline); transform-origin: left center; }
.opener__stand { margin-top: 0.9rem; font-family: var(--font-text); font-style: italic; font-size: 1.2rem; line-height: 1.45; color: var(--ink-2); max-width: 44ch; }

/* arrival: a title waits unlit, narrow and at a quarter of the ink, with its rule undrawn; it takes light once, the way a word on the sign does.
   The unlit state exists only once column.js has run, so a failed script never hides a title */
@property --arrive { syntax: "<number>"; inherits: true; initial-value: 1; }
.opener { --arrive: 1; }
.motion-ok .opener { transition: --arrive 1100ms var(--ease-out); }
.motion-ok .opener:not(.is-lit) { --arrive: 0; }
.opener h2 { color: color-mix(in oklab, color-mix(in oklab, var(--ink), var(--accent) calc((1 - var(--arrive)) * 14%)) calc((26 + 74 * var(--arrive)) * 1%), transparent); font-variation-settings: "wdth" calc(86 + 14 * var(--arrive)); }
.opener h2::after { transform: scaleX(var(--arrive)); }
.opener h2:dir(rtl)::after { transform-origin: right center; }
.opener__stand { opacity: calc(0.35 + 0.65 * var(--arrive)); }

/* prints develop: they arrive flat and pale, as a print does in the tray, and come up to full contrast once */
@property --dev { syntax: "<number>"; inherits: true; initial-value: 1; }
.print, .shot, .pile, .screen { --dev: 1; }
.motion-ok .print, .motion-ok .shot, .motion-ok .pile, .motion-ok .screen { transition: --dev 1400ms var(--ease-out); }
.motion-ok .print:not(.is-developed), .motion-ok .shot:not(.is-developed), .motion-ok .pile:not(.is-developed), .motion-ok .screen:not(.is-developed) { --dev: 0; }
.print img, .shot img, .pile img, .screen img { opacity: calc(0.45 + 0.55 * var(--dev)); }
.print img, .pile img, .screen img { filter: brightness(calc((1 - var(--night) * 0.18) * (1 + (1 - var(--dev)) * 0.25))) contrast(calc(0.6 + 0.4 * var(--dev))) saturate(calc((1 - var(--night) * 0.25) * var(--dev))); }
.shot img { filter: brightness(calc((1 - var(--night) * 0.22) * (1 + (1 - var(--dev)) * 0.2))) contrast(calc(0.6 + 0.4 * var(--dev))) saturate(calc((1 - var(--night) * 0.15) * var(--dev))); }
.print.is-lifted img, .pile__photo.is-lifted img { opacity: 0; }

/* night in the column: the rules, the hanging quotation marks and link underlines take a little of the lamps' orange as the sky goes dark */
:root { --warm: color-mix(in oklab, var(--ink), var(--accent) calc(var(--night) * 45%)); --hairline: color-mix(in oklab, var(--warm) calc(18% + var(--night) * 6%), transparent); }
a { text-decoration-color: color-mix(in oklab, currentColor calc(45% - var(--night) * 15%), color-mix(in oklab, var(--accent) calc(var(--night) * 55%), transparent)); }
.letter__text p:first-of-type::before { color: color-mix(in oklab, var(--warm) 32%, transparent); }

/* the nav: one underline that slides to the chapter under way, and a hairline beneath the bar that fills as the evening goes on */
.nav__rail { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; }
.nav__rail span { position: absolute; inset: 0; background: color-mix(in oklab, var(--accent) 70%, transparent); transform-origin: left center; transform: scaleX(var(--t)); }
.nav__rail span:dir(rtl) { transform-origin: right center; }
.nav__mark { position: absolute; left: 0; bottom: 0.9rem; width: 100px; height: 1px; background: var(--accent); transform-origin: left center; opacity: 0; transition: transform 450ms var(--ease-out), opacity 250ms ease; pointer-events: none; }
.nav.has-mark .nav__mark.is-on { opacity: 1; }
.nav.has-mark a[aria-current] { text-decoration-color: transparent; }

@media (max-width: 900px) {
  .opener { margin-bottom: 1.6rem; }
  .opener__stand { font-size: 1.1rem; }
  .nav__mark { bottom: 0.6rem; height: 2px; }
  .nav__rail { height: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .opener, .print, .shot { transition: none; }
  .nav__mark { transition: opacity 150ms ease; }
}

/* the smooth-scroll experiment (smooth.js): Lenis drives the scroll itself, so the browser's own smoothing steps aside */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }