/* ------------------------------------------------------------------
   The node's journal: timeline, daily chronicles and their illustration
   ------------------------------------------------------------------ */

.journal {
  display: grid;
  grid-template-columns: minmax(14rem, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  padding-bottom: clamp(4rem, 10vw, 8rem);
}

.journal__aside {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: grid;
  gap: 2rem;
}

.journal-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--rule); border-block: 1px solid var(--rule-strong); }
.journal-stats > div { padding: 1rem 1rem 1.1rem 0; background: var(--paper); }
.journal-stats > div:nth-child(even) { padding-left: 1rem; }
.journal-stats dt { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.journal-stats dd {
  display: grid;
  margin: 0.3rem 0 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 330;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--moss);
}
.journal-stats dd small { margin-top: 0.3rem; font-family: var(--font-sans); font-size: var(--step--2); letter-spacing: normal; color: var(--muted); overflow-wrap: anywhere; }
.journal-stats dd small a { color: var(--ink-2); }

.journal-legend summary { cursor: pointer; list-style: none; color: var(--ink-2); font-size: var(--step--1); }
.journal-legend summary::-webkit-details-marker { display: none; }
.journal-legend summary::before { content: "+ "; color: var(--signal); }
.journal-legend[open] summary::before { content: "− "; }
.journal-legend dl { display: grid; gap: 0.55rem; margin: 1.1rem 0 1rem; }
.journal-legend__row { display: grid; grid-template-columns: 2rem 1fr; gap: 0.7rem; align-items: center; }
.journal-legend__row dd { margin: 0; font-size: var(--step--1); color: var(--ink-2); line-height: 1.4; }
.journal-legend .event__symbol { align-self: center; }

.journal__aside .journal-feed { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; color: var(--muted); }

.journal__filters { margin: 0 0 1rem; }
.chip__count { opacity: 0.6; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .journal { grid-template-columns: 1fr; }
  .journal__aside { position: static; }
}

/* Days ---------------------------------------------------------- */

.journal-day { margin-top: 2.5rem; }
.journal-day__title {
  position: sticky;
  top: var(--header-h);
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin: 0 0 1.2rem;
  padding: 0.7rem 0 0.6rem;
  border-bottom: 1px solid var(--rule-strong);
  background: var(--paper);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  font-weight: 360;
  letter-spacing: -0.01em;
}
.journal-day__date { font-family: var(--font-mono); font-size: var(--step--2); font-style: normal; letter-spacing: 0.06em; }

/* A thread runs down the symbols, like a logbook's margin. */
.events--full .event { position: relative; }
.events--full .event::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(0.85rem - 0.5px);
  width: 1px;
  background: var(--rule);
  z-index: -1;
}
.events--full .event:first-child::before { top: 0.85rem; }
.events--full .event:last-child::before { bottom: auto; height: 0.85rem; }
.events--full .event:first-child { padding-top: 0.95rem; }
.events--full .event__symbol { background: var(--paper); }
.event__more { margin-top: 0.45rem; }
.event__more a { color: var(--signal-text); text-decoration: none; }
.event__more a:hover { text-decoration: underline; }
a.event__time { text-decoration: none; }
a.event__time:hover { color: var(--signal-text); }

.event--neighbor-lost .event__symbol { color: var(--muted); }
.event--neighbor-returned .event__symbol, .event--milestone .event__symbol { border-color: var(--moss-2); }
.event--neighbors-record .event__symbol { border-color: var(--signal); color: var(--signal-text); }
.event--daily-digest .event__symbol { border-color: var(--ink-2); color: var(--ink-2); }

.journal__pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; }
.journal__pager a:not(.link-arrow) { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-2); }

/* A day's chronicle in the timeline ----------------------------- */

.digest {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  margin-bottom: 1.2rem;
  padding: clamp(0.8rem, 2vw, 1.1rem);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
}
.digest:target { border-color: var(--signal); }
.digest__art { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.digest__art .art { display: block; width: 100%; height: auto; transition: transform 0.6s var(--ease-out); }
.digest:hover .digest__art .art { transform: scale(1.04) rotate(-2deg); }
.digest__body .eyebrow { margin-bottom: 0.5rem; }
.digest__title { margin: 0; font-family: var(--font-display); font-size: var(--step-2); font-weight: 340; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.digest__title a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--signal), var(--signal)) 0 100% / 0 1px no-repeat; transition: background-size 0.4s var(--ease-out); }
.digest__title a:hover { background-size: 100% 1px; }
.digest__title a::after { content: ""; position: absolute; inset: 0; } /* the whole card opens the chronicle */
.digest { position: relative; }
.digest__excerpt { margin-top: 0.6rem; color: var(--ink-2); line-height: 1.5; font-size: var(--step--1); }
.digest__facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin: 0.9rem 0 0; font-size: var(--step--2); }
.digest__facts dt { color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.digest__facts dd { margin: 0.15rem 0 0; font-size: var(--step--1); color: var(--ink); }
.digest__change { font-size: var(--step--2); }
.digest__change.is-up { color: var(--moss-2); }
.digest__change.is-down { color: var(--danger); }

@media (max-width: 560px) {
  .digest { grid-template-columns: 1fr; }
  .digest__art { max-width: 15rem; }
}

/* Today, until tonight's chronicle ------------------------------ */

.today { margin-bottom: 1.2rem; padding: 1rem 1.1rem 1.1rem; border: 1px dashed var(--rule-strong); border-radius: var(--radius); }
.today .eyebrow { margin-bottom: 0.2rem; gap: 0.2rem; }
.today__grid { display: grid; grid-template-columns: auto minmax(8rem, 1fr); gap: 1rem 2rem; align-items: end; }
.today__grid .digest__facts { margin-top: 0.6rem; }
.today__bars { width: 100%; height: 3rem; }
.today .small { margin-top: 0.8rem; }
.today__bar { fill: color-mix(in srgb, var(--moss) 70%, transparent); }
.today__bar--later { fill: var(--rule); }
.today__bar--peak { fill: var(--signal); }
@media (max-width: 560px) { .today__grid { grid-template-columns: 1fr; } }

/* The illustration ---------------------------------------------- */

.art { display: block; width: 100%; height: auto; }
.art__bg { fill: var(--paper-2); }
.art__grain circle { fill: var(--ink-2); }
.art__grain { opacity: 0.35; }
.art__contour { fill: none; stroke: var(--moss); stroke-width: 1; opacity: 0.22; }
.art__contour--major { stroke-width: 1.6; opacity: 0.32; }
.art__contours--broken .art__contour { stroke-dasharray: 3 9; }
.art__rim { fill: var(--paper); fill-opacity: 0.55; stroke: var(--rule-strong); stroke-dasharray: 2 6; }
.art__hour { stroke: var(--moss-2); stroke-width: 9; stroke-linecap: round; opacity: 0.85; }
.art__hour--peak { stroke: var(--signal); opacity: 1; }
.art__tick { fill: var(--muted); font-family: var(--font-mono); font-size: 15px; text-anchor: middle; }
.art__link { stroke: var(--moss); stroke-width: 1.2; }
.art__node { fill: var(--moss); stroke: var(--paper-2); stroke-width: 1.5; }
.art__node--new { fill: var(--signal); }
.art__halo { fill: none; stroke: var(--signal); stroke-width: 1.5; opacity: 0.6; }
.art__wave { fill: none; stroke: var(--signal); stroke-width: 3.5; stroke-linecap: round; }
.art__origin { fill: var(--ink); }
.art__label { fill: var(--ink-2); font-family: var(--font-mono); font-size: 15px; paint-order: stroke; stroke: var(--paper-2); stroke-width: 4px; stroke-linejoin: round; }

@media (prefers-reduced-motion: no-preference) {
  .chronicle__figure .art__hour { animation: art-grow 1.1s var(--ease-out) both; transform-origin: 400px 400px; }
  .chronicle__figure .art__nodes { animation: art-fade 1.4s 0.3s var(--ease-out) both; }
  .chronicle__figure .art__halo { animation: art-pulse 2.8s 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes art-grow { from { opacity: 0; transform: scale(0.92); } }
@keyframes art-fade { from { opacity: 0; } }
@keyframes art-pulse { 50% { transform: scale(1.35); opacity: 0.15; } }

/* The chronicle page -------------------------------------------- */

.chronicle__title { max-width: 18ch; text-wrap: balance; }
.chronicle__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.chronicle__grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(3rem, 7vw, 5rem); }
@media (max-width: 900px) { .chronicle__grid, .chronicle__grid--even { grid-template-columns: 1fr; } }

.chronicle__story p {
  max-width: 36rem;
  margin: 0 0 1.2em;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 340;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.chronicle__story p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.1em 0 0;
  font-size: 3.4em;
  line-height: 0.8;
  font-weight: 320;
  color: var(--moss);
}
.chronicle__story strong { font-weight: 500; color: var(--ink); }
.chronicle__credit { max-width: 36rem; font-size: var(--step--2); }
.chronicle__pending { font-family: var(--font-display); font-size: var(--step-1); font-style: italic; color: var(--muted); }

.chronicle__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 2.5rem 0 0; background: var(--rule); border-block: 1px solid var(--rule-strong); }
.chronicle__facts > div { padding: 1rem 1rem 1.1rem 0; background: var(--paper); }
.chronicle__facts > div:not(:nth-child(3n + 1)) { padding-left: 1rem; }
.chronicle__facts dt { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.chronicle__facts dd { margin: 0.3rem 0 0; font-family: var(--font-display); font-size: var(--step-2); font-weight: 330; letter-spacing: -0.03em; color: var(--moss); font-variant-numeric: lining-nums tabular-nums; }
.chronicle__facts dd small { margin-left: 0.15em; font-size: 0.5em; letter-spacing: 0; color: var(--muted); }
.chronicle__facts .chronicle__note { margin-top: 0.3rem; font-family: var(--font-sans); font-size: var(--step--2); letter-spacing: normal; color: var(--muted); }
@media (max-width: 560px) {
  .chronicle__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chronicle__facts > div, .chronicle__facts > div:not(:nth-child(3n + 1)) { padding-left: 0; }
  .chronicle__facts > div:nth-child(even) { padding-left: 1rem; }
}

.chronicle__figure { position: sticky; top: calc(var(--header-h) + 1.5rem); margin: 0; }
.chronicle__figure .art { border-radius: var(--radius); }
.chronicle__figure figcaption { margin-top: 1rem; line-height: 1.5; }
@media (max-width: 900px) { .chronicle__figure { position: static; max-width: 34rem; } }

.chronicle__section { margin-top: clamp(3rem, 7vw, 5rem); }
.chronicle__section > .eyebrow { margin-bottom: 1.2rem; }
.chronicle__grid--even .chronicle__section { margin-top: 0; }
.chronicle__bars { width: 100%; height: clamp(90px, 12vw, 150px); }
.chronicle__section .history__axis { display: flex; justify-content: space-between; }

.chronicle__nav {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-block: 1.5rem clamp(4rem, 10vw, 7rem);
  border-top: 1px solid var(--rule-strong);
}
.chronicle__nav-link { display: inline-flex; align-items: center; gap: 0.8rem; max-width: 22rem; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: var(--step-0); }
.chronicle__nav-link span { display: grid; gap: 0.2rem; }
.chronicle__nav-link small { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.chronicle__nav-link--next { margin-left: auto; text-align: right; }
.chronicle__nav-link:hover { color: var(--signal-text); }

/* The neighbours page row a journal line links to. */
.neighbors__table tr:target { background: color-mix(in srgb, var(--signal) 12%, transparent); }

/* The latest chronicle, featured on the node page. */
.node-chronicle { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.node-chronicle > .eyebrow { margin-bottom: 1rem; }
.digest--feature { grid-template-columns: minmax(10rem, 22rem) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3.5rem); padding: clamp(0.9rem, 2.5vw, 1.5rem); }
.digest--feature .digest__title { font-size: var(--step-3); }
.digest--feature .digest__excerpt { max-width: 40rem; font-size: var(--step-0); }
.digest__more { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.2rem; font-size: var(--step--1); color: var(--signal-text); }
.digest:hover .digest__more { gap: 0.85rem; }
.digest__more .icon { width: 1em; height: 1em; transition: transform 0.3s var(--ease-out); }
@media (max-width: 640px) { .digest--feature { grid-template-columns: 1fr; } .digest--feature .digest__art { max-width: 18rem; } }