/* S2 / B3 «Asset». Source: Paper 1UL-0 (desktop 1440×1807) and 395-0
   (mobile 390×2356), get_jsx / get_children. Mobile-first; desktop from 1024px.
   Rules: 1px ink at 30% (column tops) and 15% (index tops). */

.asset {
  --rule-30: color-mix(in srgb, var(--color-ink) 30%, transparent);
  --rule-15: color-mix(in srgb, var(--color-ink) 15%, transparent);
  /* 2026-09-09, human: air above the cap of «A» equals the air under the
     block (ink to edge): 104 on mobile, 94 on desktop (frame line = 128 below). */
  padding-top: 104px;
}

/* Giant «Asset» (1UN-0 / 397-0): Inter 500, tracking -0.03em, line-height 90%.
   The word always spans the lane: measured width / font-size = 2.3736 at any
   size; 1200 / 505 (canvas) = 2.3762 gives exactly 505px at 1440. */
.asset__giant-wrap {
  container-type: inline-size;
}
.asset__giant {
  width: max-content;
  font-size: calc(100cqi / 2.3762 * 0.8); /* 2026-09-09, human: 20% smaller than the lane-filling size */
  font-weight: var(--font-weight-medium);
  line-height: 90%;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* Head (398-0 / 1UO-0): display + lead, flush left. */
.asset__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-top: 48px;
}
.asset__title {
  font-size: 28px;
  font-weight: var(--font-weight-medium); /* audit 2026-10-24: section titles are 500 (was 600) */
  line-height: 115%;
  letter-spacing: var(--tracking-tight);
}
.asset__lead {
  font-size: 16px; /* audit 2026-10-24: one mobile body size (was 17) */
  line-height: var(--leading-body);
  opacity: 0.78; /* audit 2026-10-24: the lead is a second-level text like every sub */
}

/* Three ruled columns (39B-0 / 2IS-0): stacked with gap 48 on mobile,
   a row with gap 32 and equal flex columns from 1024px. */
.asset__form {
  padding-top: 64px;
  padding-bottom: 96px;
}
.asset__grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
/* Column = <details>: open on desktop (JS keeps it so), a closed accordion
   on mobile with a «+» / «−» mark; without JS everything is open. */
.asset__col {
  border-top: 1px solid var(--rule-30);
}
.asset__col-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
  list-style: none;
  cursor: pointer;
}
.asset__col-summary::-webkit-details-marker {
  display: none;
}
/* Hover feedback where the summary is clickable (mobile composition). */
.asset__col-summary:hover .asset__col-title {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.asset__col[open] > .asset__col-summary {
  padding-bottom: 0;
}
.asset__mark {
  flex: 0 0 24px;
  padding-top: 16px;
  text-align: center;
  font-size: 24px;
  line-height: var(--leading-tight);
}
.asset__mark::before {
  content: "+";
}
.asset__col[open] > .asset__col-summary .asset__mark::before {
  content: "−";
}
.asset__col-title {
  padding-top: 16px;
  font-size: 22px; /* audit 2026-10-24: the subhead size of the page (was 24) */
  font-weight: var(--font-weight-medium); /* 2026-09-09 hierarchy pass: item titles are 500 everywhere (was 400) */
  line-height: 125%;
  letter-spacing: -0.01em;
}
.asset__col-para {
  padding-top: 12px;
  font-size: 16px;
  line-height: var(--leading-body);
  opacity: 0.78;
}

/* Index (ol): rule, then rows «NN  item»; the number is a CSS counter in a
   32px slot, Inter 13/145% tabular at .62 (mono until 2026-10-24); item Inter 16/145%. */
.asset__index {
  margin-top: 20px;
  border-top: 1px solid var(--rule-15);
  list-style: none;
  counter-reset: idx;
}
.asset__index li {
  display: flex;
  gap: 12px;
  padding-block: 7px;
  font-size: 16px;
  line-height: var(--leading-body);
  /* 2026-10-24, human: the items must sit at the same level as the column
     paragraph (.78). Alpha on the colour instead of opacity, so the mobile
     number below keeps its own .62 instead of compounding to .48. */
  color: color-mix(in srgb, var(--color-ink) 78%, transparent);
  counter-increment: idx;
}
.asset__index li::before {
  content: counter(idx, decimal-leading-zero);
  flex: 0 0 32px;
  font-family: var(--font-sans); /* 2026-10-24: mono retired from the page */
  font-variant-numeric: tabular-nums;
  font-size: var(--text-label);
  line-height: var(--leading-body);
  color: var(--color-ink); /* opaque base, so the .62 below is absolute */
  opacity: 0.62; /* hierarchy pass: tertiary level .62 (was .55, 3.84:1) */
}

@media (min-width: 1024px) {
  .asset {
    padding-top: 94px;
  }
  /* 2026-09-09, human: the giant + head must fit one screen with room to
     spare; head padding 72 -> 56, gap 32 -> 24, h2 in three lines. */
  .asset__head {
    gap: 24px;
    padding-top: 56px;
  }
  .asset__title {
    font-size: var(--text-h2); /* audit 2026-10-24: a section title, 40/115% like the others (was 52/110%) */
    line-height: 115%;
  }
  .asset__lead {
    max-width: 676px;
    font-size: 20px;
    line-height: 140%;
  }
  /* 2026-09-09, human (second pass, replaces the compartment grid): two
     full-bleed rules, edge to edge of the page: at the top of the block and
     above the index lists (title cell 112 + paragraph cell 176 = 288 below);
     no line between title and paragraph, none between items, no frame.
     Vertical hairlines only between the columns, from the top rule down to
     the end of the section. Index rows carry no marker on desktop. */
  .asset__form {
    position: relative;
    padding-top: 96px;
    padding-bottom: 128px;
  }
  .asset__form::before,
  .asset__form::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--rule-30);
  }
  .asset__form::before {
    top: 96px;
  }
  .asset__form::after {
    top: calc(96px + 288px);
  }
  .asset__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
  .asset__col {
    position: relative;
    display: flex;
    flex-direction: column;
    border-top: 0;
  }
  .asset__col + .asset__col::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: -128px;
    left: -16px;
    width: 1px;
    background: var(--rule-30);
  }
  .asset__col-summary {
    height: 112px;
    padding: 16px 0;
    pointer-events: none;
    cursor: default;
  }
  .asset__col[open] > .asset__col-summary {
    padding-bottom: 16px;
  }
  .asset__mark {
    display: none;
  }
  .asset__col-title {
    padding-top: 0;
    font-size: var(--text-h3); /* audit 2026-10-24: 28/125% like every subhead (was 32/40px) */
    line-height: 125%;
  }
  .asset__col-body {
    display: contents;
  }
  .asset__col-para {
    height: 176px;
    padding: 16px 0;
    font-size: var(--text-body);
  }
  .asset__index {
    margin-top: 0;
    border-top: 0;
  }
  .asset__index li {
    height: 38px;
    padding: 7px 0;
    line-height: var(--leading-body); /* audit 2026-10-24: 145% like all text (was 24px) */
  }
  /* 2026-10-24, human: no markers at all on desktop (the 12px dash of
     2026-09-09 removed); the item text sits flush with the column. */
  .asset__index li::before {
    content: none;
  }
}