/* ============================================================
   ZENITH NEWS — the news sky (home orbit, /news/, each announcement)
   Announcements are planets around a sun: newest closest in, each
   in its app's glow. An announcement reads as a transmission, not a
   post: one planet, one signal, one action. Pages are generated by
   tools/build-news.mjs; behaviour is /js/news.js.
   ============================================================ */

/* ---------- the system ---------- */

.zn-sky {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center; gap: clamp(24px, 5vw, 70px);
  max-width: 1080px; margin: 0 auto;
}
@media (max-width: 820px) {
  .zn-sky { grid-template-columns: 1fr; gap: 26px; }
}

.zn-system {
  position: relative; width: min(100%, 560px); aspect-ratio: 1;
  margin: 0 auto;
  container-type: inline-size;
}

/* the sun: the zenith mark, burning */
.zn-sun {
  position: absolute; left: 50%; top: 50%;
  width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 226, .95) 0 18%, rgba(255, 214, 140, .42) 34%, rgba(255, 207, 110, .1) 58%, rgba(255, 207, 110, 0) 72%);
  display: grid; place-items: center;
  animation: znSunBreathe 7s ease-in-out infinite;
}
.zn-sun-mark { width: 46%; height: 46%; color: #FFF6E2; filter: drop-shadow(0 0 10px rgba(255, 230, 176, .9)); }
@keyframes znSunBreathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.06); } }

/* each orbit is a ring that turns; its planet rides the top of it */
.zn-orbit {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--r) * 2); aspect-ratio: 1;
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border-radius: 50%;
  border: 1px solid rgba(232, 232, 230, .09);
  transform: rotate(var(--a));
  animation: znSpin var(--p) linear infinite;
  pointer-events: none;
}
@keyframes znSpin { from { transform: rotate(var(--a)); } to { transform: rotate(calc(var(--a) + 360deg)); } }

.zn-planet {
  position: absolute; left: 50%; top: 0;
  width: clamp(30px, 9.5cqw, 56px);
  aspect-ratio: 1; transform: translate(-50%, -50%);
  pointer-events: auto; border-radius: 50%;
  outline: none;
}
/* keep the icon upright while the ring turns */
.zn-planet-body {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 30%, #000) 0, #050507 72%);
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--c) 35%, transparent);
  transform: rotate(calc(var(--a) * -1));
  animation: znUnspin var(--p) linear infinite;
  transition: box-shadow .35s, border-color .35s;
  position: relative;
}
@keyframes znUnspin { from { transform: rotate(calc(var(--a) * -1)); } to { transform: rotate(calc(var(--a) * -1 - 360deg)); } }
.zn-planet-body img { width: 62%; height: 62%; display: block; opacity: .92; }

/* a new app wears a ring */
.zn-planet-body--new::after {
  content: ""; position: absolute; left: -26%; right: -26%; top: 38%; bottom: 38%;
  border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
  border-radius: 50%; transform: rotate(-18deg); pointer-events: none;
}

.zn-planet:hover .zn-planet-body,
.zn-planet:focus-visible .zn-planet-body,
.zn-planet.is-lit .zn-planet-body {
  border-color: var(--c);
  box-shadow: 0 0 30px color-mix(in srgb, var(--c) 70%, transparent), 0 0 4px var(--c);
}
.zn-planet:focus-visible .zn-planet-body { outline: 1px solid var(--c); outline-offset: 5px; }

/* the sky holds still while you are reading it */
.zn-system:hover .zn-orbit, .zn-system:hover .zn-planet-body,
.zn-system:focus-within .zn-orbit, .zn-system:focus-within .zn-planet-body {
  animation-play-state: paused;
}
.zn-orbit:has(.is-lit) { border-color: color-mix(in srgb, var(--c) 32%, transparent); }

/* ---------- the readout (the instrument beside the sky) ---------- */

.zn-readout {
  border-left: 1px solid var(--zx-line);
  padding: 6px 0 6px clamp(18px, 3vw, 30px);
  min-height: 210px;
}
@media (max-width: 820px) {
  .zn-readout { border-left: none; border-top: 1px solid var(--zx-line); padding: 22px 4px 0; text-align: center; min-height: 0; }
}
.zn-readout-meta, .zn-t-meta {
  font: 300 11.5px/1.4 var(--zx-sans); letter-spacing: .18em; color: var(--zx-t-50);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
@media (max-width: 820px) { .zn-readout-meta { justify-content: center; } }
.zn-readout-meta .zx-sep, .zn-t-meta .zx-sep { color: var(--zx-t-26); }
.zn-readout-title {
  font: 200 clamp(24px, 3.2vw, 34px)/1.12 var(--zx-sans); letter-spacing: -.01em;
  color: #E8E8E6; margin: 14px 0 10px; text-wrap: balance;
}
.zn-readout-line { font: 300 15px/1.6 var(--zx-sans); color: var(--zx-t-60); margin: 0 0 18px; text-wrap: pretty; }
.zn-readout-open { font: 400 13px/1 var(--zx-sans); letter-spacing: .06em; color: #F6E7B9; }
.zn-readout-open:hover { color: #fff; }
.zn-readout-hint { font: 300 11px/1.6 var(--zx-sans); letter-spacing: .12em; color: var(--zx-t-32); margin: 26px 0 0; }
.zn-readout-hint a { color: var(--zx-t-55); }
.zn-readout-hint a:hover { color: #E8E8E6; }
.zn-readout.is-changing > * { opacity: .25; }
.zn-readout > * { transition: opacity .25s; }

/* ---------- on the home page ---------- */

.zs-news {
  position: relative; z-index: 2;
  padding: clamp(70px, 12vh, 140px) clamp(18px, 4vw, 44px) clamp(40px, 8vh, 90px);
  text-align: center;
}
.zs-news .zn-sky { text-align: left; }
.zs-news-title {
  font: 200 clamp(28px, 4.6vw, 48px)/1.08 var(--zx-sans); letter-spacing: -.02em;
  margin: 0 0 clamp(26px, 5vh, 50px); color: #E8E8E6;
}

/* ---------- /news/ ---------- */

.zn-main { position: relative; z-index: 2; padding: clamp(110px, 16vh, 160px) clamp(18px, 4vw, 44px) clamp(50px, 8vh, 90px); }
.zn-index { text-align: center; }
.zn-index .zn-sky { text-align: left; }
.zn-index-title { font: 100 clamp(36px, 7vw, 76px)/1 var(--zx-sans); letter-spacing: -.03em; margin: 0 0 clamp(30px, 6vh, 60px); color: #E8E8E6; text-shadow: 0 0 44px rgba(232, 232, 230, .16); }
.zn-empty { color: var(--zx-t-50); }

/* ---------- one announcement: the transmission ---------- */

.zn-transmission { max-width: 720px; margin: 0 auto; }
.zn-t-head { text-align: center; }
.zn-t-planet {
  position: relative; width: 92px; height: 92px; margin: 0 auto 28px;
  --a: 0deg; --p: 1s;
}
.zn-t-planet .zn-planet-body { animation: none; transform: none; }
.zn-t-ring {
  position: absolute; inset: -38px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c) 26%, transparent);
  animation: znMoon 14s linear infinite;   /* the ring turns, carrying its moon */
}
.zn-t-ring::after {
  content: ""; position: absolute; left: 50%; top: -3px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c);
}
@keyframes znMoon { to { transform: rotate(360deg); } }
.zn-t-meta { justify-content: center; }
.zn-t-title {
  font: 100 clamp(38px, 7.4vw, 78px)/1 var(--zx-sans); letter-spacing: -.03em;
  color: #E8E8E6; margin: 22px 0 18px; text-wrap: balance;
  text-shadow: 0 0 44px color-mix(in srgb, var(--c) 22%, transparent);
}
.zn-t-line { font: 300 clamp(16px, 2.2vw, 20px)/1.55 var(--zx-sans); color: var(--zx-t-66); margin: 0 auto; max-width: 34em; text-wrap: pretty; }

.zn-t-body {
  margin: clamp(36px, 6vh, 56px) auto 0; max-width: 34em;
  font: 300 16px/1.75 var(--zx-sans); color: var(--zx-t-72);
}
.zn-t-body p { margin: 0 0 1.1em; text-wrap: pretty; }
.zn-t-body strong { font-weight: 400; color: #E8E8E6; }
.zn-t-body a { color: var(--c); border-bottom: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.zn-t-body a:hover { color: #fff; }
.zn-list { list-style: none; padding: 0; margin: 0 0 1.3em; }
.zn-list li { position: relative; padding-left: 26px; margin: 0 0 .55em; }
.zn-list li::before { content: "✦"; position: absolute; left: 2px; top: 0; font-size: 11px; color: var(--c); }

.zn-t-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin: clamp(30px, 5vh, 46px) 0 0; }

/* the video */
.zn-video { margin: clamp(34px, 6vh, 54px) auto 0; }
.zn-video-frame {
  position: relative; margin: 0 auto; overflow: hidden; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  background: #050507;
  box-shadow: 0 0 60px color-mix(in srgb, var(--c) 12%, transparent);
}
.zn-video--short .zn-video-frame { width: min(100%, 340px); aspect-ratio: 9 / 16; }
.zn-video--wide .zn-video-frame { width: 100%; aspect-ratio: 16 / 9; }
.zn-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.zn-video-wait {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px;
  font: 300 11.5px/1 var(--zx-sans); letter-spacing: .2em; color: var(--zx-t-50);
}
.zn-video-mark { width: 40px; height: 40px; color: var(--c); opacity: .75; animation: zxBreathe 3.4s ease-in-out infinite; }

/* older · the news sky · newer */
.zn-t-nav {
  max-width: 900px; margin: clamp(60px, 10vh, 100px) auto 0;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: start;
  border-top: 1px solid var(--zx-line); padding-top: 24px;
  font: 300 14px/1.5 var(--zx-sans);
}
.zn-t-nav a { color: var(--zx-t-62); }
.zn-t-nav a:hover { color: #E8E8E6; }
.zn-t-nav span { display: block; font-size: 11px; letter-spacing: .18em; color: var(--zx-t-35); margin-bottom: 6px; }
.zn-t-nav-newer { text-align: right; }
.zn-t-nav-sky { font-size: 12px; letter-spacing: .18em; padding-top: 2px; }
@media (max-width: 600px) {
  .zn-t-nav { grid-template-columns: 1fr 1fr; }
  .zn-t-nav-sky { grid-column: 1 / -1; grid-row: 2; text-align: center; }
}

.zn-company { position: relative; z-index: 2; padding: 30px clamp(18px, 4vw, 44px) 40px; }

/* ---------- the open-in-place panel (home and /news/) ---------- */

.zn-dialog {
  width: min(860px, 100vw); max-height: min(92vh, 100%); margin: auto;
  padding: 0; border: 1px solid var(--zx-line-card); border-radius: 8px;
  background: rgba(4, 4, 7, .96); color: #E8E8E6;
  box-shadow: 0 0 120px rgba(0, 0, 0, .9);
  overflow: hidden;
}
.zn-dialog::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(3px); }
.zn-dialog[open] { animation: zxFloatUp .45s var(--zx-ease); display: flex; flex-direction: column; }
.zn-dialog-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--zx-line-soft);
  font: 300 12px/1 var(--zx-sans); letter-spacing: .14em;
}
.zn-dialog-bar a { color: var(--zx-t-55); }
.zn-dialog-bar a:hover { color: #E8E8E6; }
.zn-dialog-close { background: none; border: 1px solid var(--zx-line-card); color: var(--zx-t-72); border-radius: 3px; padding: 8px 12px; cursor: pointer; font: inherit; letter-spacing: .14em; }
.zn-dialog-close:hover { border-color: rgba(232, 232, 230, .6); color: #fff; }
.zn-dialog-body { overflow-y: auto; padding: clamp(30px, 5vh, 50px) clamp(18px, 4vw, 48px) clamp(34px, 6vh, 56px); overscroll-behavior: contain; }
.zn-dialog-body .zn-t-title { font-size: clamp(32px, 5.4vw, 56px); }
@media (max-width: 600px) { .zn-dialog { max-height: 100%; height: 100%; border-radius: 0; border: 0; } }

/* ---------- still sky for people who asked for less motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .zn-orbit, .zn-planet-body, .zn-sun, .zn-t-ring, .zn-video-mark { animation: none; }
  .zn-dialog[open] { animation: none; }
}