/* Dev log index. brand.css (/assets/v2/brand.css) holds the palette and fonts.
   This page: a ridgeline hero on the tilted plane, then the entries as large cards. */

/* ---------- Hero: the ridgeline plane (same device as the landing page) ---------- */
.hero { position: relative; height: clamp(620px, 88vh, 900px); overflow: hidden; isolation: isolate; }
.plane { position: absolute; inset: 0; cursor: none; touch-action: pan-y; }
.plane canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#plane-blur { filter: blur(5px); opacity: .85; }
#plane-sharp {
  -webkit-mask-image: linear-gradient(to bottom, transparent 4%, black 30%, black 72%, transparent 97%);
  mask-image: linear-gradient(to bottom, transparent 4%, black 30%, black 72%, transparent 97%);
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 140px; pointer-events: none;
  background: linear-gradient(rgb(var(--bg) / 0), rgb(var(--bg)));
}
.hero-copy {
  position: absolute; z-index: 5; left: var(--gut); bottom: clamp(28px, 6vh, 64px);
  width: min(600px, calc(100% - 2 * var(--gut)));
  padding: clamp(18px, 2.4vw, 28px);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: grid; gap: 14px;
  --c: rgb(var(--ink) / .8);
}
.lede { margin: 0; color: rgb(var(--ink-2)); max-width: 52ch; }
.hero-tags {
  position: absolute; z-index: 5; right: var(--gut); top: 92px;
  display: grid; gap: 6px; width: 228px; pointer-events: none;
  font: 500 10.5px/1.3 var(--f-data); letter-spacing: .1em; text-transform: uppercase;
}
.tag {
  display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px;
  border-left: 2px solid rgb(var(--signal)); background: rgb(var(--bg) / .66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tag span { color: rgb(var(--ink-2)); }
.tag b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tag.is-lock { background: rgb(var(--signal)); color: rgb(var(--on-signal)); }
.tag.is-lock span { color: inherit; opacity: .75; }
.hint {
  position: absolute; z-index: 5; right: var(--gut); bottom: 22px; margin: 0;
  display: flex; align-items: center; gap: 8px; pointer-events: none;
  font: 500 10.5px/1 var(--f-data); letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--ink-2));
}
.hint i { width: 6px; height: 6px; background: rgb(var(--signal)); animation: blink 1.1s steps(2, jump-none) infinite; }
@media (max-width: 760px) { .hero-tags, .hint { display: none; } }
#top.is-static .plane { display: none; }

/* ---------- Head ---------- */
.log { max-width: 1080px; padding-top: clamp(40px, 6vw, 72px); padding-bottom: 80px; display: grid; gap: clamp(28px, 4vw, 44px); }
.log-head { display: grid; gap: 14px; max-width: 780px; }
.log-head p { margin: 0; color: rgb(var(--ink-2)); max-width: 66ch; }
.log-head .disclosure { color: rgb(var(--ink)); padding: 10px 14px; border-left: 2px solid rgb(var(--signal)); background: rgb(var(--signal) / .08); font-size: 15.5px; }

/* ---------- Entry cards ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.card a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 280px); gap: clamp(16px, 3vw, 36px); align-items: center;
  padding: clamp(20px, 3vw, 34px); text-decoration: none; position: relative;
}
.card { --c: rgb(var(--ink) / .7); }
.card:hover { --c: rgb(var(--signal)); }
.c-no { font: 400 clamp(44px, 7vw, 88px)/.9 var(--f-display); letter-spacing: -.02em; color: rgb(var(--ink) / .16); font-variant-numeric: tabular-nums; transition: color .25s; }
.card:hover .c-no { color: rgb(var(--signal)); }
.c-body { display: grid; gap: 10px; min-width: 0; }
.c-tag { justify-self: start; font: 500 10.5px/1 var(--f-data); letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; background: rgb(var(--signal)); color: rgb(var(--on-signal)); }
.c-title { font: 400 clamp(18px, 2.2vw, 26px)/1.25 var(--f-display); text-wrap: balance; }
.c-sum { color: rgb(var(--ink-2)); font-size: 15.5px; max-width: 60ch; }
.c-stats { font: 500 11px/1.6 var(--f-data); letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--ink-2)); }
.c-stats b { font-weight: 500; color: rgb(var(--ink)); font-size: 13px; }
.c-spark { display: grid; gap: 6px; align-self: stretch; align-content: center; border-left: 1px solid rgb(var(--ink) / .2); padding-left: clamp(14px, 2vw, 24px); }
.spark { display: block; width: 100%; height: auto; overflow: visible; }
.sp-area { fill: rgb(var(--ink) / .1); }
.sp-line { fill: none; stroke: rgb(var(--ink)); stroke-width: 1.5; stroke-linejoin: round; }
.card:hover .sp-line { stroke: rgb(var(--signal)); }
.sp-peak { fill: rgb(var(--signal)); }
.sp-t { font: 500 10px var(--f-data); fill: rgb(var(--ink)); letter-spacing: .06em; }
@media (max-width: 820px) {
  .card a { grid-template-columns: auto minmax(0, 1fr); }
  .c-spark { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid rgb(var(--ink) / .2); padding-top: 14px; }
}

/* Cards arrive when seen (js-anim is set by index.js, never under reduced motion). */
.js-anim .card { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.js-anim .card.is-seen { opacity: 1; transform: none; }
.js-anim .card.is-seen .sp-line { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 1.6s .2s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hint i { animation: none; } }