/* klarhimmel.com — numbered signals homepage.
   One flat sky colour per session, dark ink, serif type. Everything on the
   page is a numbered line; the mechanism is the list, not a layout. */

:root {
  /* Skies. Each is a flat colour plus an ink that reads on it. */
  --sky: #d9e9f8;
  --rgb-ink: 11, 37, 69;

  --font-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
  --font-size: calc(1.0625em + 0.55vw);
  --line: 1.35;
  --gap: 0.85em;
  --edge: 1.25rem;
  --num-w: 2.9ch;
  --measure: 46ch;
  --dim: 0.42;
  --t: 0.2s ease;
}

html[data-sky="morning"] { --sky: #dbe9f7; --rgb-ink: 11, 37, 69; }
html[data-sky="noon"]    { --sky: #bcd8f4; --rgb-ink: 9, 30, 58; }
html[data-sky="haze"]    { --sky: #e8ecf0; --rgb-ink: 26, 33, 46; }
html[data-sky="dusk"]    { --sky: #f2dccb; --rgb-ink: 60, 31, 20; }
html[data-sky="evening"] { --sky: #c6cde6; --rgb-ink: 25, 26, 62; }
html[data-sky="night"]   { --sky: #0c1a2c; --rgb-ink: 233, 240, 248; }

@media (min-width: 64em) {
  :root {
    --font-size: calc(1.15em + 0.7vw);
    --edge: 1.6rem;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-padding-top: 7em;
}

@media (min-width: 64em) {
  html { scroll-padding-top: max(24vh, 6em); }
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--sky);
  color: rgba(var(--rgb-ink), 0.86);
  font-family: var(--font-serif);
  font-size: var(--font-size);
  line-height: var(--line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: rgba(var(--rgb-ink), 0.14); }

a {
  color: rgb(var(--rgb-ink));
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
  transition: color var(--t), opacity var(--t);
}

strong { color: rgb(var(--rgb-ink)); }

/* Header: wordmark right, links left, fixed, fading into the sky. */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  padding: var(--edge);
  pointer-events: none;
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky) 45%, transparent 100%);
}

.header__mark {
  order: 2;
  pointer-events: auto;
  font-weight: 700;
  font-size: 0.72em;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.header__links {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.1em;
  list-style: none;
  pointer-events: auto;
  font-size: 0.72em;
  font-weight: 700;
}

.header__links a { text-decoration: none; }
.header__links a:hover,
.header__links a:focus-visible { text-decoration: underline; }

/* Main: pushed down so the list starts well below the fold's top edge. */
main {
  flex: 1;
  padding: 7em var(--edge) 5em;
}

@media (min-width: 64em) {
  main { padding-top: max(24vh, 6em); padding-bottom: 40vh; }
}

/* The list. */
.signals {
  list-style: none;
}

.signal__line {
  display: flex;
  align-items: baseline;
  padding: 0.12em 0;
  font-size: 1em;
  font-weight: 700;
  color: rgb(var(--rgb-ink));
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color var(--t);
}

.signal__num {
  flex: 0 0 var(--num-w);
  font-variant-numeric: tabular-nums;
}

.signal__title {
  transition: opacity var(--t);
}

/* Index: hovering one line dims every other line. */
@media (hover: hover) and (pointer: fine) {
  .is-index .signals:hover .signal__line:not(:hover),
  .is-index .signals:focus-within .signal__line:not(:focus-visible) {
    color: rgba(var(--rgb-ink), var(--dim));
  }
}

/* Signal page: the chosen line opens in place, its text under its number... */
.signal__body {
  margin: 0.45em 0 1.1em var(--num-w);
  max-width: var(--measure);
}

.signal__body > * + * { margin-top: 0.55em; }

.signal__body p { color: rgba(var(--rgb-ink), 0.86); }

/* ...and every other line shows its number only; the title returns on hover.
   On touch there is no hover, so titles stay visible there. */
.is-signal .signal:not(.signal--selected) .signal__line { color: rgba(var(--rgb-ink), var(--dim)); }

@media (hover: hover) and (pointer: fine) {
  .is-signal .signal:not(.signal--selected) .signal__title { opacity: 0; }
  .is-signal .signal__line:hover,
  .is-signal .signal__line:focus-visible { color: rgb(var(--rgb-ink)); }
  .is-signal .signal__line:hover .signal__title,
  .is-signal .signal__line:focus-visible .signal__title { opacity: 1; }
}

/* Next: a small disc in the corner. Arrow keys and swipes do the same. */
.next {
  position: fixed;
  right: var(--edge);
  bottom: var(--edge);
  z-index: 11;
  display: block;
  padding: 0.4em;
  line-height: 0;
  opacity: 0;
  transition: opacity var(--t), transform var(--t);
}

.next span {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: rgb(var(--rgb-ink));
  box-shadow: 0 0 1.2em 0.2em var(--sky);
}

.next:hover { transform: scale(1.15); }
.is-ready .next { opacity: 1; }
@media (hover: none) { .next { display: none; } }

/* Footer: a link row that sits under the fade. */
.footer {
  position: relative;
  z-index: 2;
  padding: 0 var(--edge) var(--edge);
  font-size: 0.72em;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 1.1em;
  list-style: none;
  font-weight: 700;
}

.footer__links a { text-decoration: none; }
.footer__links a:hover { text-decoration: underline; }

.footer__note {
  margin-top: 0.8em;
  color: rgba(var(--rgb-ink), 0.55);
  font-size: 0.85em;
}

/* Fading edges so the list dissolves into the sky at top and bottom. */
body::after {
  content: '';
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 5em;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(0deg, var(--sky) 0%, transparent 100%);
}

@media (min-width: 64em) {
  body::after { height: 28vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}