/* ============================================================
   ACTIVITIES — activities.html (js/activities.js)
   ============================================================
   Loaded after galaxy.css, which gives the page its night
   (body.page), the bar and the tokens (--accent*). The header is
   posts.html's (a very large title, a line, the numbers beside it,
   chips under it); the body is the career timeline's language (the
   home page's .tl): a hairline of light down the side, a mark per
   row, the day in tracked capitals, the title in bold.

     .acts-years > .acts-year (a year: its figure, a rule, the count)
       > .acts-items > .act   one row: mark, day + kind, title, who
                              it was with, first lines, picture
     .acts-also               what has no post (data.js activities)
   The title's link stretches over the whole row (::after). The
   phone's own touches are in phone.css (:root.is-phone). */

.acts [hidden] { display: none !important; }
.acts {
  --a-ink: #F2F5FB;
  --a-soft: #AEB6C6;
  --a-mute: #7C869A;
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(110px, 16vh, 150px) clamp(16px, 3.4vw, 44px) 96px;
}

/* ── The header (posts.html's) ── */
.acts-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title stats" "lead stats" "kinds kinds";
  column-gap: 48px;
  align-items: end;
  margin-bottom: clamp(26px, 5vh, 48px);
}
.acts-title {
  grid-area: title;
  margin: 0;
  font-size: clamp(2.8rem, 8vw, 6.4rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: #FFFFFF;
}
.acts-lead {
  grid-area: lead;
  max-width: 36em;
  margin: 1.1rem 0 0;
  font-size: 1.06rem;
  line-height: 1.7;
  color: #9AA3B8;
}
.acts-stats { grid-area: stats; display: flex; margin: 0 0 4px; }
.acts-stats .stat {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  min-width: 104px;
  padding: 0 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}
.acts-stats .stat:last-child { padding-right: 0; }
.acts-stats dd {
  margin: 0;
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}
.acts-stats .stat:first-child dd { color: var(--accent-pale); }
.acts-stats dt {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--a-mute);
}
.acts-kinds { grid-area: kinds; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.kind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: none;
  font: 500 0.88rem 'Space Grotesk', system-ui, sans-serif;
  color: #9AA3B8;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.kind-n { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.66rem; color: #7C869A; transition: color 0.2s ease; }
.kind-mark { display: grid; place-items: center; width: 12px; height: 12px; }
.kind:hover { color: var(--a-ink); border-color: rgba(255, 255, 255, 0.24); }
.kind[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #0A0D14; }
.kind[aria-pressed="true"] .kind-n { color: #34455F; }   /* 5.4:1 on the accent */
.kind:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: 2px; }
@media (max-width: 900px) {
  .acts-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "lead" "stats" "kinds"; }
  .acts-stats { margin: 26px 0 0; }
  .acts-stats .stat { min-width: 0; flex: 1; padding: 0 16px; }
  .acts-stats .stat:first-child { padding-left: 0; border-left: 0; }
}

/* ── The marks: an event a filled dot, a talk a ring, a milestone the
   site's star. The same in the chips. ── */
.act-dot, .act-ring { display: block; width: 11px; height: 11px; border-radius: 50%; }
.act-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14), 0 0 14px rgba(var(--accent-rgb), 0.6); }
.act-ring { border: 2px solid var(--accent); background: #07090E; box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.45); }
.act-star { display: block; width: 15px; height: 15px; fill: var(--accent-pale); filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.85)); }
.kind .act-dot, .kind .act-ring { width: 8px; height: 8px; box-shadow: none; }
.kind .act-ring { border-width: 1.5px; background: none; }
.kind .act-star { width: 11px; height: 11px; filter: none; }
.kind[aria-pressed="true"] .act-dot { background: #0A0D14; }
.kind[aria-pressed="true"] .act-ring { border-color: #0A0D14; }
.kind[aria-pressed="true"] .act-star { fill: #0A0D14; }

/* ── The years ── */
.acts-years { margin: 0; padding: 0; list-style: none; }
.acts-year + .acts-year { margin-top: clamp(38px, 7vh, 72px); }
.acts-y {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 6px;
}
.acts-y span {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}
.acts-y i { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.09); }
.acts-y small {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--a-mute);
}

/* ── A row ── */
.acts-items { position: relative; margin: 0; padding: 0; list-style: none; }
/* The line of light the marks sit on (the career timeline's). */
.acts-items::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 0.4) 5%, rgba(var(--accent-rgb), 0.4) 92%, transparent);
}
.act {
  position: relative;
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) 236px;
  grid-template-areas: "when main pic";
  column-gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding: 30px 0 30px 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.6s ease, translate 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.act.is-in { opacity: 1; translate: 0 0; }
.act:last-child { border-bottom: 0; }
.act-mark {
  position: absolute;
  left: 0;
  top: 33px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
}
.act-when {
  grid-area: when;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding-top: 0.3em;
}
.act-when time {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.act-kind {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--a-mute);
}
.act-main { grid-area: main; min-width: 0; }
.act-title {
  margin: 0;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: #FFFFFF;
}
.act-title a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
/* The title's link is the whole row. */
.act-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 20px; }
.act-title a:focus-visible { outline: none; }
.act-title a:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 4px; }
.act-with {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #C3CAD8;
}
.act-with i { font-style: normal; color: #5E677A; }
.act-brief { max-width: 38em; margin: 0.65rem 0 0; font-size: 0.97rem; line-height: 1.68; color: #9AA3B8; }
.act-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.act-go span { transition: translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.act-pic {
  grid-area: pic;
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #0B0E15;
  overflow: hidden;
}
.act-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.act-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(5, 7, 13, 0.74);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: #C3CAD8;
}
@media (hover: hover) {
  .act.has-link:hover .act-title a { color: var(--accent-pale); }
  .act.has-link:hover .act-go span { translate: 4px 0; }
  .act.has-link:hover .act-pic img { scale: 1.045; }
  .act.has-link:hover .act-pic { border-color: rgba(var(--accent-rgb), 0.35); }
}
.acts-note { margin: 18px 0 0; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.84rem; color: #9AA3B8; }

/* ── Also: what has no post ── */
.acts-also { margin-top: clamp(48px, 8vh, 88px); padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.acts-also-title {
  margin: 0 0 18px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--a-mute);
}
.acts-also-list { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.acts-also-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 14px 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(6, 8, 14, 0.5);
}
.acts-also-list b { font-size: 1rem; font-weight: 600; color: #FFFFFF; }
.acts-also-list span { font-size: 0.9rem; color: #C3CAD8; }
.acts-also-list small {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--a-mute);
}

.acts-empty { margin: 28px 0 0; font-size: 1rem; line-height: 1.7; color: #9AA3B8; }
.acts-empty a { color: var(--accent); }
.acts-foot { margin: clamp(48px, 8vh, 80px) 0 0; text-align: center; }
.acts-foot-link {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 4px;
  transition: background-size 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.acts-foot-link:hover, .acts-foot-link:focus-visible { background-size: 100% 1px; outline: none; }

/* Narrow: the picture beside the words, smaller; the day over them. */
@media (max-width: 860px) {
  .act {
    grid-template-columns: minmax(0, 1fr) clamp(92px, 26vw, 150px);
    grid-template-areas: "when when" "main pic";
    row-gap: 10px;
    padding: 24px 0 24px 34px;
  }
  .act-mark { top: 26px; }
  .act-when { flex-direction: row; align-items: baseline; gap: 12px; padding-top: 0; }
  .act-pic { aspect-ratio: 1; border-radius: 13px; }
  .act-brief { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .act { opacity: 1; translate: none; transition: none; }
  .act-pic img, .act-go span, .kind, .kind-n, .acts-foot-link { transition: none; }
}