:root {
  --bg: #050303;
}

html,
body {
  margin: 0;
  height: 100%;
  background-color: var(--bg);
}

/* The Sea of Recombination fills the screen behind everything; it never takes the pointer. */
.page-sea {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The sky now, in the top-left corner. Informational only, so it never takes the pointer.
   Sizes are in em so the whole panel scales with its font size. */
.sky-panel {
  --corner: clamp(16px, 4vw, 72px);
  position: fixed;
  /* Phones that draw the page under the status bar or a notch report it as a safe-area inset. */
  top: calc(var(--corner) + env(safe-area-inset-top, 0px));
  left: calc(var(--corner) + env(safe-area-inset-left, 0px));
  z-index: 1;
  width: 19.2em;
  color: #8a7558;
  font: clamp(10.5px, 0.68vw, 13px)/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.4s ease;
}

.sky-panel.is-ready {
  opacity: 1;
}

.sky-panel__title {
  margin: 0 0 0.45em;
  color: #b4925f;
  font-size: 0.85em;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.sky-panel__time {
  margin: 0 0 1.4em;
  color: #5f5242;
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
}

.sky-panel__rows {
  display: grid;
  gap: 0.7em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sky-panel__row {
  display: grid;
  grid-template-columns: 1.4em 6.3em 3.1em 1fr;
  align-items: baseline;
  transition: color 1.6s ease;
}

.sky-panel__symbol {
  color: #a3875e;
  font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", ui-serif, serif;
  font-size: 1.23em;
}

.sky-panel__gate {
  color: #c8a26b;
  font-variant-numeric: tabular-nums;
  transition: color 1.6s ease, text-shadow 1.6s ease;
}

.sky-panel__sign {
  color: #5f5242;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The body whose gate is the hexagram in the cube right now. */
.sky-panel__row.is-active {
  color: #d9bd8f;
}

.sky-panel__row.is-active .sky-panel__gate {
  color: #f1d29d;
  text-shadow: 0 0 10px rgba(233, 189, 130, 0.55);
}

.sky-panel__row.is-active .sky-panel__sign {
  color: #9a8466;
}

/* The market now, in the bottom-right corner, under today's reading: the index strip, the
   S&P 500's biggest movers, breadth and the next major release. Sized in em like the sky. */
.market-panel {
  --corner: clamp(16px, 4vw, 72px);
  position: fixed;
  right: calc(var(--corner) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--corner) + env(safe-area-inset-bottom, 0px));
  z-index: 1;
  width: 19.2em;
  color: #8a7558;
  font: clamp(10.5px, 0.68vw, 13px)/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.4s ease;
}

.market-panel.is-ready {
  opacity: 1;
}

.market-panel__title {
  margin: 0 0 0.45em;
  color: #b4925f;
  font-size: 0.85em;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.market-panel__time,
.market-panel__note {
  margin: 0 0 1.4em;
  color: #5f5242;
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.market-panel__note {
  margin: 0.9em 0 0;
}

.market-panel__body {
  display: grid;
  gap: 1.4em;
}

.market-panel__subtitle {
  margin: 0 0 0.7em;
  color: #6b5c48;
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.market-panel__rows {
  display: grid;
  gap: 0.7em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.market-panel__rows + .market-panel__rows {
  margin-top: 0.7em;
}

.market-panel__row {
  display: grid;
  grid-template-columns: 6.3em 5.4em 1fr;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}

.market-panel__mover {
  grid-template-columns: 1.4em 4.3em 4.2em 1fr;
}

.market-panel__label {
  color: #8a7558;
}

.market-panel__price,
.market-panel__symbol {
  color: #c8a26b;
}

.market-panel__change {
  color: #5f5242;
  white-space: nowrap;
}

.market-panel__name {
  overflow: hidden;
  color: #4f4436;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.market-panel__arrow {
  color: #4f4436;
  font-size: 0.75em;
}

/* Up is the warm gold of the lit trigrams; down is a cooled ember. */
.market-panel__row.is-up .market-panel__change,
.market-panel__row.is-up .market-panel__arrow {
  color: #d9b77e;
}

.market-panel__row.is-down .market-panel__change,
.market-panel__row.is-down .market-panel__arrow {
  color: #9c6f5c;
}

/* The word: today's Proverbs and Psalms in the top-right corner, mirroring the sky. It stops
   above the market (main.js sets --word-max) and scrolls; only the reading takes the pointer. */
.word-panel {
  --corner: clamp(16px, 4vw, 72px);
  position: fixed;
  top: calc(var(--corner) + env(safe-area-inset-top, 0px));
  right: calc(var(--corner) + env(safe-area-inset-right, 0px));
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 19.2em;
  max-height: var(--word-max, calc(100vh - 2 * var(--corner)));
  color: #8a7558;
  font: clamp(10.5px, 0.68vw, 13px)/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.4s ease;
}

.word-panel.is-ready {
  opacity: 1;
}

.word-panel__title {
  margin: 0 0 0.45em;
  color: #b4925f;
  font-size: 0.85em;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.word-panel__time {
  margin: 0 0 1.1em;
  color: #5f5242;
  font-size: 0.85em;
}

/* The title folds the reading away and back; with the scroll, the panel's only controls. */
.word-panel__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin: -0.4em -0.5em;
  padding: 0.4em 0.5em;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.word-panel__toggle::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: 0.7;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 0.4s ease;
}

.word-panel.is-collapsed .word-panel__toggle::after {
  transform: rotate(-45deg);
}

.word-panel__toggle:hover {
  color: #d9bd8f;
}

.word-panel__toggle:focus-visible {
  outline: 1px solid rgba(180, 146, 95, 0.6);
  outline-offset: 2px;
}

.word-panel.is-collapsed .word-panel__time {
  margin-bottom: 0;
}

.word-panel.is-collapsed .word-panel__scroll {
  display: none;
}

.word-panel__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.6em;
  pointer-events: auto;
  scrollbar-color: rgba(180, 146, 95, 0.3) transparent;
  scrollbar-width: thin;
}

.word-panel__scroll:focus-visible {
  outline: 1px solid rgba(180, 146, 95, 0.4);
  outline-offset: 4px;
}

/* More to read below: the text fades out at the bottom edge. */
.word-panel.is-clipped .word-panel__scroll {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3em), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 3em), transparent);
}

.word-panel__part + .word-panel__part {
  margin-top: 1.8em;
}

.word-panel__heading {
  margin: 0 0 0.9em;
  color: #6b5c48;
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.word-panel__passage + .word-panel__passage {
  margin-top: 1.3em;
}

.word-panel__ref {
  margin: 0 0 0.6em;
  color: #c8a26b;
  font: 500 1.08em/1.2 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
}

.word-panel__verses {
  display: grid;
  gap: 0.45em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.word-panel__verse {
  display: grid;
  grid-template-columns: 1.9em 1fr;
  color: #a88e66;
  font: 1.08em/1.45 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
}

.word-panel__num {
  padding-top: 0.25em;
  color: #5f5242;
  font: 0.68em/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}

/* The digest switcher appears only where one digest shows at a time (see below). */
.digest-tabs {
  display: none;
}

/* Squarish windows: the ring comes closest to the corners, so the panels tuck in tighter. */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 5/4) {
  .sky-panel,
  .market-panel,
  .word-panel {
    --corner: 16px;
    font-size: 10px;
  }

}

/* Up to 7:5 the ring comes close to the corner: the market tucks in, with tighter lines that
   keep its top below the East trigram. */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 7/5) {
  .market-panel {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .market-panel__rows {
    gap: 0.5em;
  }

  .market-panel__rows + .market-panel__rows {
    margin-top: 0.5em;
  }

  .market-panel__time {
    margin-bottom: 1em;
  }

  .market-panel__body {
    gap: 1em;
  }
}

/* Portrait screens: the ring fills the width, so the sky becomes a compact block across the
   top, in two columns. The glyph names each body; the name stays for screen readers. */
@media (max-aspect-ratio: 1/1) {
  .sky-panel {
    --corner: 16px;
    /* Full width on phones; on wider portrait screens, stay left of the North trigram. */
    width: max(calc(50vw - 100px), min(calc(100vw - 32px), 360px));
    font-size: clamp(10px, 2.9vw, 12px);
  }

  .sky-panel__time {
    margin-bottom: 0.9em;
  }

  .sky-panel__rows {
    grid-auto-flow: column;
    grid-template-rows: repeat(7, auto);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.6em;
    row-gap: 0.55em;
  }

  .sky-panel__row {
    grid-template-columns: 1.5em 3.1em 1fr;
  }

  /* About the sky's height, so the ring keeps its room; the rest scrolls. */
  .word-panel {
    width: min(calc(100vw - 32px), 420px);
    max-height: min(34vh, 320px);
    font-size: clamp(10px, 2.9vw, 12px);
  }

  .sky-panel__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

}

/* Portrait screens and phones on their side: one digest at a time, picked with the tabs.
   The tab names the digest, so its own title goes. */
@media (max-aspect-ratio: 1/1), (min-aspect-ratio: 1/1) and (max-height: 560px) {
  .digest-tabs {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: calc(16px + env(safe-area-inset-left, 0px));
    z-index: 2;
    display: flex;
    gap: 6px;
    pointer-events: auto;
  }

  .digest-tabs__tab {
    padding: 6px 10px 5px;
    border: 0;
    border-bottom: 1px solid transparent;
    background: none;
    color: #5f5242;
    font: 500 11px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .digest-tabs__tab:first-child {
    padding-left: 0;
  }

  .digest-tabs__tab[aria-pressed="true"] {
    border-bottom-color: rgba(180, 146, 95, 0.6);
    color: #b4925f;
  }

  .digest-tabs__tab:focus-visible {
    outline: 1px solid rgba(180, 146, 95, 0.6);
    outline-offset: 2px;
  }

  .digest:not(.is-current) {
    display: none;
  }

  .sky-panel,
  .market-panel {
    top: calc(44px + env(safe-area-inset-top, 0px));
  }

  .sky-panel__title,
  .market-panel__title,
  .word-panel__title {
    display: none;
  }

  .word-panel {
    right: auto;
    left: calc(16px + env(safe-area-inset-left, 0px));
    top: calc(44px + env(safe-area-inset-top, 0px));
  }

  /* The tabs already show one digest at a time, so the reading never folds here. */
  .word-panel.is-collapsed .word-panel__scroll {
    display: block;
  }

  .word-panel.is-collapsed .word-panel__time {
    margin-bottom: 1.1em;
  }

  .market-panel {
    right: auto;
    /* A 1:1 screen also matches the corner rule above; the panel hangs from the top here. */
    bottom: auto;
    left: calc(16px + env(safe-area-inset-left, 0px));
    width: min(calc(100vw - 32px), 420px);
    font-size: clamp(10px, 2.9vw, 12px);
  }

  .market-panel__time {
    margin-bottom: 0.9em;
  }

  /* The index strip and the movers side by side. */
  .market-panel__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 1.6em;
  }

  .market-panel__row {
    grid-template-columns: 4.6em minmax(0, 1fr) auto;
    column-gap: 0.4em;
  }

  .market-panel__mover {
    grid-template-columns: 1.2em 3.6em minmax(0, 1fr);
  }

  .market-panel__mover .market-panel__name {
    display: none;
  }

  .market-panel__rows,
  .market-panel__rows + .market-panel__rows {
    row-gap: 0.55em;
  }

  .market-panel__rows + .market-panel__rows {
    margin-top: 0.55em;
  }

  .market-panel__subtitle {
    margin-bottom: 0.55em;
  }
}


/* The words with the hexagram in the cube: a verse above K'an, the I Ching Image at the bottom.
   They scale with the viewport height, as the composition does on landscape screens. */
.hex-verse,
.hex-image {
  --caption-size: clamp(10px, 1.3vh, 15px);
  position: fixed;
  left: 50%;
  z-index: 1;
  width: min(60vh, 64vw, 40em);
  margin: 0;
  transform: translateX(-50%);
  font: var(--caption-size)/1.45 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.2s ease;
}

.hex-verse.is-visible,
.hex-image.is-visible {
  opacity: 1;
}

.hex-verse {
  top: calc(clamp(12px, 2.4vh, 30px) + env(safe-area-inset-top, 0px));
  color: #a88e66;
}

.hex-verse__text {
  margin: 0;
  font-style: italic;
}

.hex-verse__ref {
  margin-top: 0.45em;
  color: #6b5c48;
  font: 0.72em/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.hex-image {
  bottom: calc(clamp(12px, 2.4vh, 30px) + env(safe-area-inset-bottom, 0px));
  color: #8a7558;
}

.hex-image__scene,
.hex-image__teaching {
  margin: 0;
}

.hex-image__teaching {
  color: #a3875e;
}

/* Portrait screens: the verse sits under the sky (main.js sets its top), and both captions keep
   a steady height so the composition does not resize with every hexagram. */
@media (max-aspect-ratio: 1/1) {
  .hex-verse,
  .hex-image {
    --caption-size: clamp(10px, 2.9vw, 13px);
    width: calc(100vw - 32px);
  }

  /* Room for four lines and the reference; the reference always follows the verse directly. */
  .hex-verse {
    min-height: 7em;
  }

  .hex-image {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: calc(4 * 1.45em);
  }
}

/* Short landscape screens (phones on their side): the sky fills the left edge, so the captions
   centre in the space to its right, and main.js keeps the composition clear of them. */
@media (min-aspect-ratio: 1/1) and (max-height: 560px) {
  .word-panel {
    max-height: calc(100vh - 60px - env(safe-area-inset-top, 0px));
  }

  .hex-verse,
  .hex-image {
    --sky-right: calc(clamp(16px, 4vw, 72px) + env(safe-area-inset-left, 0px) + 19.2 * clamp(10.5px, 0.68vw, 13px));
    left: calc(var(--sky-right) + 16px);
    right: calc(16px + env(safe-area-inset-right, 0px));
    width: auto;
    transform: none;
  }
}

/* Tuning panel, only present with ?controls. */
.sea-controls {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10;
  display: grid;
  gap: 8px;
  width: min(340px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid rgba(178, 142, 93, 0.35);
  border-radius: 10px;
  background: rgba(10, 8, 6, 0.86);
  color: #d8c3a2;
  font: 12px/1.4 ui-sans-serif, system-ui, sans-serif;
}

.sea-controls__row {
  display: grid;
  grid-template-columns: 96px 1fr 40px;
  align-items: center;
  gap: 8px;
}

.sea-controls__row:has(button, select) {
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}

.sea-controls button,
.sea-controls select {
  padding: 6px 10px;
  border: 1px solid rgba(178, 142, 93, 0.5);
  border-radius: 6px;
  background: #15110d;
  color: inherit;
  font: inherit;
}

.sea-controls input[type="range"] {
  accent-color: #c99d66;
}

.sea-controls__status {
  margin: 0;
  color: #9c8768;
  font-variant-numeric: tabular-nums;
}