.matrix-page .numerology-heading__lead { max-width: 62ch; }
.matrix-save { display: flex; flex-wrap: wrap; align-items: center; gap: var(--home-space-4) var(--home-space-6); }
.matrix-save[hidden], .matrix-save [hidden] { display: none; }
.matrix-save p { flex-basis: 100%; margin: 0; color: var(--home-text-soft); }
.matrix-result { gap: var(--home-space-12); }
/* A chapter's heading and its note stay together; its parts keep the distance parts have everywhere. */
.matrix-chapter { gap: var(--home-space-6); }
.matrix-chapter > :is(.numerology-part, .matrix-details) { margin-top: var(--home-space-10); }
.matrix-details > .numerology-method__summary { cursor: default; }
.matrix-details > .numerology-method__body { gap: var(--home-space-16); }
/* The line of relationships and money is one of the matrix's own lines, drawn a little stronger. */
.numerology-scene__figure .numerology-scene__plot .matrix-scene__wellbeing > .matrix-scene__wellbeing-line:not(.is-lit) { stroke: rgb(224 230 238 / 0.55); }
/* A piece of the matrix names its point and the points it is made of; the others stay as rings. */
.numerology-scene__figure--matrix[data-focus] .numerology-orb:not(.is-focus, .is-source) .numerology-orb__value { opacity: 0; }

/* The age circle is a dial: one line along the edges of the octagon and a tick for
   every year pointing away from the matrix, longer on every fifth year, with the
   decades written by the outer points. A mouse may choose a year: an unseen dot
   under its tick answers the pointer, the tick turns warm and the year's number
   stands beside it. A finger only reads the dial; the years' numbers are listed in
   the chapter at the end of the reading. */
.numerology-scene__plot .matrix-age__line { fill: none; stroke: rgb(224 230 238 / 0.3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.numerology-scene__plot .matrix-age__tick { fill: none; stroke: rgb(224 230 238 / 0.5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.numerology-scene__plot .matrix-age__tick--five { stroke: rgb(224 230 238 / 0.78); stroke-width: 1.5; }
.numerology-scene__plot .matrix-age__tick:is(.is-hover, .is-chosen) { stroke: var(--home-amber); stroke-width: 2.2; }
.numerology-scene__plot .matrix-age__dot { display: none; }
.numerology-orb--age { --orb-min: 0.5rem; --orb-max: 0.5rem; }
.numerology-orb--age .numerology-orb__value { opacity: 0; }
/* The years stand close together, so a year's reach stops short of its neighbours. */
button.numerology-orb--age::after { inset: -0.3rem; }
.numerology-scene__age { font-size: clamp(0.6rem, calc(var(--u) * 18), 0.78rem); letter-spacing: 0.04em; color: var(--home-text-muted); }
.numerology-scene__age-tip {
    position: absolute;
    z-index: 4;
    translate: -50% -50%;
    white-space: nowrap;
    pointer-events: none;
    padding: 0.15rem 0.5rem;
    border-radius: var(--home-radius-control);
    background: color-mix(in srgb, var(--home-canvas) 86%, transparent);
    color: var(--home-amber);
    font-size: 0.75rem;
    font-variant-numeric: lining-nums;
    letter-spacing: 0.02em;
}
.numerology-scene__age-tip[hidden] { display: none; }
@media (hover: none), (pointer: coarse) {
    .numerology-orb--age, .numerology-scene__age-tip { display: none; }
    .numerology-scene__age { font-size: clamp(0.7rem, calc(var(--u) * 22), 0.9rem); }
}

/* The chapter of the age circle: what it is, where today falls, and every year's
   number, a decade to a row. Today is marked as the line of a life marks it. */
.matrix-age-circle__text { display: grid; gap: var(--home-space-4); max-width: 62ch; color: var(--home-text-soft); }
.matrix-age-circle__text p, .matrix-age-circle__now { margin: 0; }
.matrix-age-circle__now { color: var(--home-text); }
.matrix-age-circle__table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: lining-nums tabular-nums; }
.matrix-age-circle__table th {
    width: 6.5rem;
    padding: var(--home-space-2) var(--home-space-3) var(--home-space-2) 0;
    border-top: 1px solid var(--color-line);
    color: var(--home-text-faint);
    font-size: var(--home-type-caption);
    font-weight: 400;
    letter-spacing: var(--home-track-label);
    text-align: left;
    text-transform: uppercase;
}
.matrix-age-circle__year { padding: var(--home-space-2) 0; border-top: 1px solid var(--color-line); text-align: center; }
.matrix-age-circle__age { display: block; color: var(--home-text-faint); font-size: var(--home-type-micro); }
.matrix-age-circle__value { display: block; color: var(--home-text-soft); font-size: var(--home-type-lead); font-weight: 400; }
.matrix-age-circle__year.is-main .matrix-age-circle__value { color: var(--home-text); }
.matrix-age-circle__year.is-now { border-radius: 0.4rem; background: color-mix(in srgb, var(--home-silver-strong) 9%, transparent); }
.matrix-age-circle__year.is-now .matrix-age-circle__value { color: var(--home-silver-strong); }
@container answer (max-width: 36rem) {
    .matrix-age-circle__table tr { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .matrix-age-circle__table th { grid-column: 1 / -1; width: auto; padding-bottom: 0; }
    .matrix-age-circle__year { border-top: 0; }
}