/* Zenith Journal — the site is the app's sky: the year's path, stars above it, and the escritoire for reading. */
:root{
  color-scheme: dark;
  --space:#030306;
  --ink:#E8E8E6;
  --ink-2:rgba(232,232,230,.72);
  --ink-3:rgba(232,232,230,.5);
  --glass-a:rgba(14,18,28,.95);
  --glass-b:rgba(8,11,18,.97);
  --rim:#222A38;
  --rim-hi:#56657F;
  --etch:#5A6A86;
  --etch-dot:#8A9BB8;
  --orb:rgba(12,12,18,.88);
  --orb-rim:rgba(232,232,230,.16);
  --gutter:clamp(20px,3.6vw,52px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--space);color:var(--ink);font:300 15px/1.6 'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;overflow:hidden}
a{color:var(--ink-2);text-decoration:none}
a:hover{color:var(--ink)}
button{font:inherit;color:inherit}
:focus-visible{outline:1px dotted rgba(232,232,230,.75);outline-offset:3px}

.zj-skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--glass-a);padding:10px 14px;border:1px solid var(--rim)}
.zj-skip:focus{left:8px}

.zj{position:fixed;inset:0;overflow:hidden}
.zj-ground{position:absolute;inset:0;background:radial-gradient(ellipse 75% 50% at 22% 100%,rgba(22,40,74,.42),transparent 72%),radial-gradient(ellipse 60% 40% at 80% 0%,rgba(18,22,40,.35),transparent 70%)}
.zj-sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;font-family:'Roboto',system-ui,sans-serif;font-weight:300}
.zj-band{position:absolute;left:0;right:0;cursor:grab;touch-action:none}
.zj-band:active{cursor:grabbing}
.zj-hits{position:absolute;inset:0;pointer-events:none}

.zj-hit{position:absolute;left:0;top:0;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;pointer-events:auto}
.zj-hit .ttl{position:absolute;left:22px;top:46px;transform:translateX(-50%);white-space:nowrap;font-size:13px;letter-spacing:1.2px;color:rgba(232,232,230,.92);opacity:0;transition:opacity .25s;pointer-events:none}
.zj-hit:hover .ttl,.zj-hit:focus-visible .ttl{opacity:1}
.zj-hit:focus-visible{outline-offset:0}

/* header, like the app's top left */
.zj-head{position:absolute;left:var(--gutter);top:calc(env(safe-area-inset-top,0px) + 40px);display:flex;flex-direction:column;gap:6px;z-index:5}
.zj-title{font-size:30px;letter-spacing:4px;color:rgba(232,232,230,.94);line-height:1.2}
.zj-count{font-size:14px;letter-spacing:1.8px;color:rgba(232,232,230,.58)}
.zj-views{display:flex;gap:22px;margin-top:18px;font-size:15px;letter-spacing:2px;color:rgba(232,232,230,.55)}
.zj-views .on{color:rgba(232,232,230,.95)}

/* round buttons with words, where the app keeps them */
.zj-orb{width:58px;height:58px;flex-shrink:0;border-radius:50%;background:var(--orb);border:1px solid var(--orb-rim);display:flex;align-items:center;justify-content:center;transition:border-color .2s}
.zj-top{position:absolute;right:var(--gutter);top:calc(env(safe-area-inset-top,0px) + 40px);display:flex;gap:26px;z-index:5}
.zj-orbcol{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;letter-spacing:1.6px;color:var(--ink-2)}
.zj-orbcol:hover .zj-orb,.zj-orbrow:hover .zj-orb{border-color:rgba(232,232,230,.45)}
.zj-orbrow{display:flex;align-items:center;gap:16px;background:transparent;border:0;padding:0;cursor:pointer;color:var(--ink-2);font-size:13px;letter-spacing:1.6px}
.zj-orbrow:hover{color:var(--ink)}
.zj-play{position:absolute;left:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 52px);z-index:5}
.zj-play .i-pause{display:none}
.zj-play[aria-pressed="true"] .i-pause{display:block}
.zj-play[aria-pressed="true"] .i-play{display:none}
.zj-right{position:absolute;right:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 52px);display:flex;flex-direction:column;align-items:flex-end;gap:22px;z-index:5}

.zj-intro{position:absolute;left:50%;transform:translateX(-50%);top:83vh;width:min(600px,80vw);text-align:center;pointer-events:none;z-index:4}
.zj-intro p{margin:0}
.zj-intro-a{font-size:20px;letter-spacing:2.5px;color:rgba(232,232,230,.9);text-wrap:balance}
.zj-intro-b{margin-top:6px!important;font-size:12px;letter-spacing:1.6px;color:var(--ink-3)}
.zj-readout{position:absolute;left:50%;transform:translateX(-50%);top:78vh;width:min(600px,80vw);text-align:center;font-size:12px;letter-spacing:1.8px;color:var(--ink-3);pointer-events:none;z-index:4}

/* the escritoire's glass */
.zj-glass{border:1px solid var(--rim);border-top-color:var(--rim-hi);border-radius:4px;background:linear-gradient(165deg,var(--glass-a),var(--glass-b));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 70px rgba(0,0,0,.75)}
.zj-plate{position:absolute;z-index:10;right:max(var(--gutter),calc(50vw - 660px));top:max(130px,16vh);width:min(700px,calc(100vw - 2 * var(--gutter)));max-height:min(470px,64vh);padding:34px 38px 20px;display:flex;gap:36px;outline:none}
.zj-p-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.zj-p-meta{display:flex;flex-wrap:wrap;column-gap:18px;row-gap:4px;font-size:12px;letter-spacing:1.8px;color:rgba(232,232,230,.55)}
.zj-p-title{margin:0;font-size:28px;font-weight:300;letter-spacing:1.5px;line-height:1.25;text-wrap:balance}
.zj-p-body{margin:0;font-size:15px;line-height:1.75;letter-spacing:.3px;color:rgba(232,232,230,.82);max-width:46ch}
.zj-p-cta{align-self:flex-start;padding:10px 0;font-size:13px;letter-spacing:2px;border-bottom:1px solid rgba(232,232,230,.4);color:var(--ink)}
.zj-etch{width:180px;height:80px;margin-top:auto}
.zj-etch path{fill:none;stroke:var(--etch);stroke-width:1.2;marker-start:url(#zj-etch-dot);marker-mid:url(#zj-etch-dot);marker-end:url(#zj-etch-dot)}
.zj-p-nav{display:flex;justify-content:space-between;border-top:1px solid var(--rim)}
.zj-word{background:transparent;border:0;color:var(--ink-2);font-size:13px;letter-spacing:2px;cursor:pointer;padding:12px 4px;min-height:44px}
.zj-word:hover{color:var(--ink)}
.zj-p-media{width:200px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.zj-p-media[hidden]{display:none}
.zj-frame{border:1px dashed rgba(232,232,230,.28);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;text-align:center;background:rgba(1,1,4,.7);max-width:100%}
.zj-f-kind{font-size:11px;letter-spacing:1.6px;color:rgba(232,232,230,.6)}
.zj-f-label{font-size:14px;letter-spacing:.8px;color:rgba(232,232,230,.85)}
.zj-f-aspect{font-size:11px;letter-spacing:1.2px;color:rgba(232,232,230,.45)}

.zj-desk{position:absolute;z-index:10;left:0;right:0;margin-inline:auto;top:max(130px,16vh);width:min(1080px,calc(100vw - 2 * var(--gutter)));max-height:min(520px,66vh);overflow:auto;padding:28px 34px;display:flex;flex-direction:column;gap:20px;outline:none}
.zj-desk-top{display:flex;justify-content:space-between;align-items:center}
.zj-desk-title{margin:0;font-size:15px;font-weight:300;letter-spacing:2.5px;color:rgba(232,232,230,.85)}
.zj-plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
.zj-plate-btn{display:flex;flex-direction:column;gap:10px;padding:18px;text-align:left;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.zj-plate-btn:hover{border-color:var(--etch-dot)}
.zj-plate-btn svg{width:100%;height:auto;aspect-ratio:2/1}
.zj-plate-btn path{fill:none;stroke:var(--etch);stroke-width:1.4;marker-start:url(#zj-etch-dot);marker-mid:url(#zj-etch-dot);marker-end:url(#zj-etch-dot)}
.zj-plate-name{font-size:15px;letter-spacing:1.4px}
.zj-plate-count{font-size:12px;letter-spacing:1.6px;color:rgba(232,232,230,.55)}

/* the plain-text sky: every star for search engines, screen readers, and anyone without scripts */
.zj-text{position:relative;z-index:20;max-width:68ch;margin:0 auto;padding:48px 24px;background:var(--space);min-height:100%;overflow:auto}
.zj-text h1{font-weight:300;letter-spacing:3px}
.zj-text h2{font-weight:300;letter-spacing:2px;font-size:18px;margin-top:32px}
.zj-text h3{font-weight:400;font-size:15px;margin:0}
.zj-text li{margin-bottom:12px}
.zj-text p{color:var(--ink-2)}
/* shown in full only without scripts (a <noscript> style in the page flips this) */
.zj-text.zj-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;min-height:0}

/* phones: the app's own proportions */
@media (max-width:760px){
  .zj-title{font-size:22px;letter-spacing:3px}
  .zj-count{font-size:12px}
  .zj-views{margin-top:12px;gap:16px;font-size:13px}
  .zj-orb{width:48px;height:48px}
  .zj-top{gap:14px;top:calc(env(safe-area-inset-top,0px) + 32px)}
  .zj-head{top:calc(env(safe-area-inset-top,0px) + 32px)}
  .zj-orbcol{font-size:11px}
  .zj-intro{top:calc(env(safe-area-inset-top,0px) + 150px);left:var(--gutter);transform:none;width:calc(100vw - 2 * var(--gutter));text-align:left}
  .zj-intro-a{font-size:16px;letter-spacing:1.8px}
  .zj-play{bottom:calc(env(safe-area-inset-bottom,0px) + 24px)}
  .zj-play .zj-orblabel{display:none}
  .zj-sound{position:fixed;left:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 86px);flex-direction:row;gap:12px;font-size:11px}
  .zj-right{bottom:calc(env(safe-area-inset-bottom,0px) + 24px);gap:14px}
  .zj-readout{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 150px)}
  .zj-plate{left:0;right:0;top:auto;bottom:0;width:100%;max-height:62vh;overflow:auto;border-radius:12px 12px 0 0;padding:24px 22px calc(env(safe-area-inset-bottom,0px) + 12px);flex-direction:column;gap:18px}
  .zj-p-media{width:100%;order:2}
  .zj-etch{display:none}
  .zj-desk{top:auto;bottom:0;left:0;right:0;width:100%;max-height:70vh;border-radius:12px 12px 0 0;padding:22px 20px calc(env(safe-area-inset-bottom,0px) + 16px)}
  .zj-plates{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
/* sound switch */
.zj-sound{background:transparent;border:0;padding:0;cursor:pointer;font:inherit;font-size:13px;letter-spacing:1.6px;color:var(--ink-2)}
.zj-sound .i-on{display:none}
.zj-sound[aria-pressed="true"] .i-on{display:block}
.zj-sound[aria-pressed="true"] .i-off{display:none}
.zj-sound[aria-pressed="true"] .zj-orb{border-color:rgba(232,232,230,.4)}

/* movement */
.zj-sky .zj-star{opacity:0;transition:opacity .9s ease}
.zj-sky.is-in .zj-star{opacity:1}
.zj-sky .zj-decor,.zj-sky .zj-months,.zj-sky .zj-path{opacity:0;transition:opacity 1.4s ease .1s}
.zj-sky.is-in .zj-decor,.zj-sky.is-in .zj-months,.zj-sky.is-in .zj-path{opacity:1}
.zj-swell{transform-box:fill-box;transform-origin:center;transition:transform .28s cubic-bezier(.2,.9,.3,1.3)}
.zj-star.is-hover .zj-swell{transform:scale(1.22)}
.zj-tw{animation:zj-twinkle var(--d,5s) ease-in-out var(--p,0s) infinite}
@keyframes zj-twinkle{0%,100%{opacity:1}50%{opacity:.6}}
.zj-echo-ring{transform-box:fill-box;transform-origin:center;animation:zj-spin 48s linear infinite}
@keyframes zj-spin{to{transform:rotate(360deg)}}
.zj-sel-ring{transition:stroke-opacity .3s}
.zj-today-dot{animation:zj-breathe 3.2s ease-in-out infinite}
@keyframes zj-breathe{0%,100%{fill-opacity:.8}50%{fill-opacity:.35}}
.zj-enter{animation:zj-rise .5s cubic-bezier(.16,1,.3,1)}
@keyframes zj-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.zj-turn .zj-p-text,.zj-turn .zj-p-media{animation:zj-fade .4s ease}
@keyframes zj-fade{from{opacity:.15}to{opacity:1}}
.zj-intro:not([hidden]){animation:zj-fade 1.2s ease}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important}
  .zj-tw,.zj-echo-ring,.zj-today-dot,.zj-enter,.zj-turn .zj-p-text,.zj-turn .zj-p-media,.zj-intro{animation:none!important}
}