/* Rolling Fun — investments page. Uses tokens and components from site.css.
   The portfolio is drawn as a hash-chained ledger: one block per quarter, rows of
   real entries, logos in grayscale (true colour on hover). */

/* ---------- Page head ---------- */

.inv-head { padding-bottom: clamp(48px, 6vw, 96px); }
.inv-head__grid { align-items: end; row-gap: clamp(40px, 5vw, 64px); }
.inv-head__main { grid-column: 1 / span 9; }
.inv-head__h1 { margin-bottom: clamp(36px, 5vw, 72px); }
.inv-total { display: block; }
.inv-total__asof { display: block; margin-bottom: clamp(14px, 1.6vw, 22px); }
.inv-total__fig {
  display: block;
  font-size: clamp(46px, 7.6vw, 132px);
  font-weight: var(--w-display);
  line-height: 0.96;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.inv-total__amt { display: block; white-space: nowrap; }
.inv-total__amt .odo { letter-spacing: -0.045em; }
.inv-total__fig .tone { display: block; margin-top: 0.06em; }

.inv-head__meta { grid-column: 10 / span 3; border-top: 1px solid var(--line); }
.inv-head__meta > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.inv-head__meta dt { font-size: 14px; color: var(--muted); }
.inv-head__meta dd { font-size: 14px; color: var(--ink); text-align: right; white-space: nowrap; }
.inv-tip.hash { font-size: 13px; color: var(--ink); }

/* The chain at a glance: one column per quarter, one square per ledger entry. */
.strip {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  margin-top: clamp(56px, 7vw, 104px);
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
  pointer-events: none;
}
.strip a { pointer-events: auto; }
.strip__col { position: relative; display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; padding-bottom: 10px; }
.strip__col::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 1px; height: 6px; background: var(--line-2); }
.strip__sq { display: block; width: clamp(6px, 0.7vw, 10px); aspect-ratio: 1; background: var(--ink); border-radius: 1px; }
.strip__sq--x { background: transparent; box-shadow: inset 0 0 0 1px var(--muted); }
.strip__col.is-tip .strip__sq:last-child { background: var(--signal); }
.strip__y {
  position: absolute;
  z-index: 1;
  top: calc(100% + 12px);
  left: 50%;
  font-size: 13px;
  font-variant-numeric: lining-nums proportional-nums;
  color: var(--muted);
  white-space: nowrap;
  transform: translateX(-50%);
  transition: color 0.3s var(--ease);
}
a.strip__y::before { content: ""; position: absolute; inset: -14px -12px; } /* >= 44px tap target */
@media (hover: hover) { a.strip__y:hover { color: var(--ink); } }
.motion .strip__sq { transform: scale(0); transition: transform 0.7s var(--ease); transition-delay: calc(var(--s, 0) * 22ms); }
.motion .strip.is-in .strip__sq { transform: none; }
/* The newest entry lands in ink, then turns green as the chain tip resolves. */
.motion .strip__col.is-tip .strip__sq:last-child { background: var(--ink); transition: transform 0.7s var(--ease) calc(var(--s, 0) * 22ms), background-color 0.5s var(--ease) calc(var(--s, 0) * 22ms + 0.9s); }
.motion .strip.is-in .strip__col.is-tip .strip__sq:last-child { background: var(--signal); }
.motion .strip__y { opacity: 0; transition: opacity 0.6s var(--ease), color 0.3s var(--ease); transition-delay: calc(var(--s, 0) * 22ms + 0.2s), 0s; }
.motion .strip.is-in .strip__y { opacity: 1; }

/* Page head entrance: h1 words rise (0s), the figure rolls, the companies line rises,
   the meta rows follow, then the strip builds oldest to newest and the tip resolves. */
.motion .inv-total__amt:not([aria-label]) { opacity: 0; }
.motion .inv-total__asof { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 0.7s var(--ease) 0.18s, transform 0.9s var(--ease) 0.18s; }
.motion .inv-total__fig .tone { clip-path: inset(0 0 100% 0); transform: translate3d(0, 0.3em, 0); transition: clip-path 1s var(--ease) 0.55s, transform 1.1s var(--ease) 0.55s; }
.motion .inv-head__meta > div { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 0.6s var(--ease), transform 0.9s var(--ease); transition-delay: calc(0.7s + var(--m, 0) * 80ms); }
.motion .inv-head__meta { border-top-color: transparent; transition: border-color 0.8s var(--ease) 0.62s; }
.motion .inv-head.is-go .inv-head__meta { border-top-color: var(--line); }
.motion .inv-head.is-go .inv-total__asof,
.motion .inv-head.is-go .inv-head__meta > div { opacity: 1; transform: none; }
.motion .inv-head.is-go .inv-total__fig .tone { clip-path: inset(-0.1em -0.1em -0.3em -0.1em); transform: none; }
/* Soft top and bottom edges on the digit windows while the figure rolls. */
.inv-total__amt .odo.is-rolling .odo__d { -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }

/* ---------- Ledger ---------- */

.ledger { padding-top: clamp(56px, 7vw, 104px); }
.ledger .index { margin-bottom: clamp(48px, 6vw, 96px); }
.ledger__grid { align-items: start; }
.chain { grid-column: 3 / -1; min-width: 0; }

/* Sticky quarter rail (desktop) */
.rail {
  grid-column: 1 / span 2;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  max-height: calc(100vh - var(--nav-h) - 48px);
  overflow-y: auto;
  scrollbar-width: none;
  padding-left: 16px;
}
.rail::-webkit-scrollbar { display: none; }
.rail__h { margin-bottom: 14px; }
.rail__list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  min-height: 28px;
  padding: 3px 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--muted);
  transition: color 0.35s var(--ease);
}
.rail__list a:focus-visible { outline-offset: 1px; }
.rail__q { color: var(--muted); transition: color 0.35s var(--ease); }
.rail__c { color: var(--muted); font-size: 13px; }
.rail__list a.is-on { color: var(--ink); }
.rail__list a.is-on .rail__q { color: var(--ink); }
.rail__list a.is-on .rail__c { color: var(--signal); }
@media (hover: hover) {
  .rail__list a:hover .rail__q { color: var(--ink); }
}
.rail__track { position: absolute; top: 34px; bottom: 3px; left: 0; width: 1px; background: var(--line); }
.rail__fill { position: absolute; inset: 0; background: var(--ink); transform: scaleY(0); transform-origin: 50% 0; will-change: transform; }

/* Blocks */
.blk { position: relative; scroll-margin-top: calc(var(--nav-h) + 24px); }
.blk + .blk { margin-top: clamp(64px, 7vw, 112px); }
.blk__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "q meta" "q hash";
  align-items: end;
  column-gap: var(--gap);
  row-gap: 8px;
  padding-top: 20px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.blk__rule { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-2); }
.blk__q {
  grid-area: q;
  font-size: clamp(34px, 3.4vw, 56px);
  font-weight: var(--w-display);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums proportional-nums;
  white-space: nowrap;
}
.blk__q[tabindex="-1"]:focus { outline: none; } /* focused by the rail jump for screen readers, not a control */
.blk__meta { grid-area: meta; display: flex; justify-content: flex-end; gap: 18px; margin: 0; font-size: 14px; color: var(--muted); }
.blk__meta b { font-weight: 400; color: var(--ink); }
.blk__hash { grid-area: hash; display: flex; justify-content: flex-end; margin: 0; line-height: 1.5; }
.blk__hash .hash { font-size: 12.5px; }
.blk__hash .hash:empty::before { content: "\00a0"; }
.no-hash .blk__hash { display: none; }

/* Block arrival: the rule draws, the quarter rises out of its mask, the meta settles,
   the entries print in order 70ms apart and each logo opens. One sequence per block. */
.motion .blk__rule { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease); }
.motion .blk__q { clip-path: inset(0 0 100% 0); transform: translate3d(0, 0.32em, 0); transition: clip-path 0.9s var(--ease) 0.06s, transform 1s var(--ease) 0.06s; }
.motion .blk__meta, .motion .blk__hash { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 0.6s var(--ease) 0.2s, transform 0.8s var(--ease) 0.2s; }
.motion .blk__hash { transition-delay: 0.28s; }
.motion .chain .row { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); transition-delay: calc(0.16s + var(--k, 0) * 70ms); }
.motion .chain .rows { border-top-color: transparent; transition: border-color 0.6s var(--ease) 0.12s; }
.motion .blk.is-in .blk__rule,
.motion .blk.is-in .blk__q,
.motion .blk.is-in .blk__meta,
.motion .blk.is-in .blk__hash,
.motion .blk.is-in .row { transform: none; }
.motion .blk.is-in .blk__q { clip-path: inset(-0.1em -0.1em -0.25em -0.1em); }
.motion .blk.is-in .blk__meta,
.motion .blk.is-in .blk__hash,
.motion .blk.is-in .row { opacity: 1; }
.motion .blk.is-in .rows { border-top-color: var(--line); }
/* Flicked past or landed on directly: finished at once, no holes, no offscreen animation. */
.motion .blk.is-past,
.motion .blk.is-past * { transition: none !important; }

/* Rows */
.rows { border-top: 1px solid var(--line); }
.row {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 0.8fr) 18px;
  align-items: center;
  column-gap: clamp(16px, 1.8vw, 28px);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
.row::before {
  content: "";
  position: absolute;
  inset: -1px calc(var(--gap) * -0.75);
  z-index: -1;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.row__name { font-size: 18px; font-weight: 400; line-height: 1.25; letter-spacing: -0.015em; }
.row__a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--r-sm); }
.row__a:focus-visible { outline: none; }
.row__a:focus-visible::after { outline: 2px solid var(--signal); outline-offset: 2px; }
.row__body { font-size: 15px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.row__extra { display: block; margin-top: 2px; }
.row__line + .row__extra { margin-top: 4px; }
.row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.row__x { position: relative; z-index: 3; }
.row__more {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: 14px;
  color: var(--ink);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 85%;
  background-repeat: no-repeat;
  transition: background-size 0.5s var(--ease), color 0.3s var(--ease);
}
.row__more:focus-visible { outline-offset: 2px; }
@media (pointer: coarse) { .row__more { position: relative; } .row__more::before { content: ""; position: absolute; inset: -10px -6px; } }
.row__go { font-size: 16px; color: var(--dim); transition: transform 0.45s var(--ease), color 0.35s var(--ease); }
@media (hover: hover) {
  .row__more:hover { background-size: 0% 1px; background-position: 100% 85%; }
  .row--link:hover::before { opacity: 1; }
  .row--link:hover .row__go { color: var(--ink); transform: translate3d(2px, -2px, 0); }
  .row:hover .logo__img { filter: none; opacity: 1; }
  .row:hover .logo { box-shadow: inset 0 0 0 1px var(--line-2); }
}
.row:focus-within::before { opacity: 1; }
.row:focus-within .logo__img { filter: none; opacity: 1; }

/* Logo tiles: the real logo, crisp, in grayscale; true colour on row hover / focus. */
.logo {
  position: relative;
  display: block;
  width: 56px;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
  transition: box-shadow 0.4s var(--ease);
}
.logo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: circle(48% at 50% 50%);
  filter: grayscale(1);
  opacity: 0.85;
  transition: filter 0.45s var(--ease), opacity 0.45s var(--ease);
}
.logo.is-raw .logo__img { opacity: 0; }
/* Each logo opens like an iris once its row has printed. */
.motion .chain .logo__img,
.motion .rows--prior .logo__img { clip-path: circle(0% at 50% 50%); transition: clip-path 0.9s var(--ease) calc(0.32s + var(--k, 0) * 70ms), filter 0.45s var(--ease), opacity 0.45s var(--ease); }
.motion .blk.is-in .logo__img,
.motion .rows--prior.is-in .logo__img { clip-path: circle(48% at 50% 50%); }
.logo--none { display: grid; place-items: center; font-size: 14px; font-weight: 450; color: var(--muted); }

/* Floating logo preview (fine pointers only; transform + opacity) */
.peek {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 45;
  width: 176px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
  will-change: transform;
}
.peek.is-on { opacity: 1; visibility: visible; transition: opacity 0.3s var(--ease), visibility 0s; }
.peek__in {
  padding: 12px;
  border-radius: var(--r);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transform: scale(0.94);
  transform-origin: 0 0;
  transition: transform 0.45s var(--ease);
}
.peek.is-on .peek__in { transform: none; }
.peek__img { width: 100%; aspect-ratio: 1; border-radius: 50%; clip-path: circle(48% at 50% 50%); background: #fff; }
.peek__cap {
  display: grid;
  gap: 2px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.peek__cap span:first-child { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek__cap span:last-child { white-space: nowrap; color: var(--muted); }

/* ---------- Prior investments + terms (paper chapter) ---------- */

.prior__head { align-items: end; row-gap: 28px; margin-bottom: clamp(48px, 6vw, 88px); }
.prior__h { grid-column: 1 / span 5; }
.prior__lede { grid-column: 7 / span 6; margin: 0; color: var(--ink); }
.rows--prior { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 72px); border-top: 0; }
.rows--prior .row {
  grid-template-columns: 56px minmax(0, 1fr) 18px;
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "logo name go" "logo body go" "logo meta go";
  align-items: start;
  row-gap: 4px;
  padding: 18px 0;
}
.rows--prior .row:nth-child(-n + 2) { border-top: 1px solid var(--line); }
.rows--prior .logo { grid-area: logo; width: 56px; }
.rows--prior .row__name { grid-area: name; }
.rows--prior .row__body { grid-area: body; }
.rows--prior .row__meta { grid-area: meta; }
.rows--prior .row__meta:empty { display: none; }
.rows--prior .row__go { grid-area: go; }
.plain .logo { background: var(--bg-2); }

/* Prior rows arrive as one group, printed in order (left column first, in pairs). */
.motion .rows--prior .row { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); transition-delay: calc(0.1s + var(--k, 0) * 70ms); }
.motion .rows--prior.is-in .row { opacity: 1; transform: none; }

.terms__index { margin-top: var(--sec); }
.terms { row-gap: 48px; align-items: start; }
.terms__a { grid-column: 1 / span 7; }
.terms__broad { margin-top: clamp(24px, 3vw, 40px); color: var(--muted); }
.terms__b { grid-column: 9 / span 4; padding-top: 10px; }
.terms__fig {
  margin: 14px 0 22px;
  font-size: clamp(40px, 4.6vw, 76px);
  font-weight: var(--w-display);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums proportional-nums;
  white-space: nowrap;
}
.motion .terms__fig { clip-path: inset(0 0 100% 0); transform: translate3d(0, 0.28em, 0); transition: clip-path 1s var(--ease) 0.18s, transform 1.1s var(--ease) 0.18s; }
.motion .terms__b.is-in .terms__fig { clip-path: inset(-0.1em -0.1em -0.2em -0.1em); transform: none; }
.terms__body + .terms__body { margin-top: 12px; }
.terms__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(28px, 3vw, 40px); }

/* ---------- Responsive ---------- */

@media (max-width: 1099px) {
  .rail { display: none; }
  .chain { grid-column: 1 / -1; }
  .row { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.4fr) 18px; grid-template-areas: "logo name body go" "logo meta meta go"; grid-template-rows: auto 1fr; align-items: start; row-gap: 6px; }
  .row .logo { grid-area: logo; width: 56px; align-self: start; }
  .row__name, .row__body { padding-top: 2px; }
  .row__name { grid-area: name; }
  .row__body { grid-area: body; }
  .row__meta { grid-area: meta; }
  .row__meta:empty { display: none; }
  .row__go { grid-area: go; align-self: start; padding-top: 4px; }
}
@media (max-width: 900px) {
  .inv-head__main, .inv-head__meta { grid-column: 1 / -1; }
  .prior__h, .prior__lede { grid-column: 1 / -1; }
  .terms__a, .terms__b { grid-column: 1 / -1; }
  .rows--prior { grid-template-columns: minmax(0, 1fr); }
  .rows--prior .row:nth-child(2) { border-top: 0; }
}
@media (max-width: 760px) {
  .row { grid-template-columns: 44px minmax(0, 1fr) 14px; grid-template-areas: "logo name go" "logo body go" "logo meta go"; align-items: start; row-gap: 4px; padding: 16px 0; }
  .row .logo, .rows--prior .logo { width: 44px; align-self: start; }
  .rows--prior .row { grid-template-columns: 44px minmax(0, 1fr) 14px; }
  .row__name { font-size: 17px; }
  .row__body { font-size: 14.5px; }
  .row__go { align-self: start; padding-top: 2px; }
  .strip__y { font-size: 12px; }
  .strip__y--minor { display: none; }
}
@media (max-width: 420px) {
  .inv-head__meta dd { font-size: 13px; }
  .blk__head { row-gap: 4px; }
  .blk__meta { font-size: 13px; }
  .blk__hash .hash { font-size: 11.5px; }
}
@media (max-width: 560px) {
  .inv-sm-hide { display: none; }
}