/*
 * "One naira of debt service" — the landing page's one interactive moment.
 *
 * A hundred strokes, counted in tens. A tally rather than a dot grid,
 * because the subject is counting money and a tally is what counting
 * looked like before anyone owned a spreadsheet. It is also the one place
 * on this platform where the design is allowed to be a picture rather
 * than a document.
 *
 * All the boldness is spent here. Everything around it stays quiet.
 */

.naira {
    background: #0A0E27;
    padding: var(--s-7) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.naira-kicker {
    margin: 0 0 var(--s-2);
    font-family: 'Inter', sans-serif;
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
    color: #94A3B8;
}

.naira-heading {
    /* Set explicitly rather than relying on the shared `serif` class,
       which something further up the cascade was beating. */
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    margin: 0 0 var(--s-6);
    max-width: 20ch;
    font-size: clamp(1.9rem, 5vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: #F1F5F9;
}

.naira-stage {
    display: grid;
    gap: var(--s-6);
    align-items: center;
}

@media (min-width: 900px) {
    .naira-stage { grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 1fr); gap: var(--s-7); }
}

/* ---------- the tally ---------- */

.naira-tally {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    /* The gap between tens is wider than between ones, so the eye counts
       in tens without being told to. */
    gap: 0.55rem 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 560px) {
    .naira-tally { grid-template-columns: repeat(20, 1fr); gap: 0.6rem 0.35rem; }
}

.naira-kobo {
    height: clamp(2.1rem, 5vw, 3.4rem);
    border-radius: 1px;
    background: #34D399;
    /* Each stroke leans, like a mark made by hand. The transform is also
       what the entrance animates, so it costs nothing extra. */
    transform: skewX(-9deg);
    transition: background-color 420ms ease, opacity 420ms ease;
}

.naira-kobo.is-interest {
    background: #F59E0B;
}

/*
 * The one orchestrated moment on the site: the hundred strokes are
 * counted out, left to right, once. Not a fade-up on every section —
 * this is counting money, and watching it counted is the point.
 *
 * --i is set per stroke from its index, so the stagger is one rule
 * rather than a hundred.
 */
@media (prefers-reduced-motion: no-preference) {
    .naira-stage[data-counting] .naira-kobo {
        opacity: 0;
        animation: naira-count 360ms ease-out forwards;
        animation-delay: calc(var(--i, 0) * 9ms);
    }
}

@keyframes naira-count {
    from { opacity: 0; transform: skewX(-9deg) scaleY(0.2); }
    to   { opacity: 1; transform: skewX(-9deg) scaleY(1); }
}

/* ---------- the readout ---------- */

.naira-split {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.6rem;
    margin: 0 0 var(--s-3);
}

.naira-figure {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(3.4rem, 11vw, 5.6rem);
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.03em;
    color: #F59E0B;
    font-variant-numeric: tabular-nums;
}

.naira-unit {
    font-family: 'Inter', sans-serif;
    font-size: var(--t-md);
    line-height: 1.4;
    color: #F1F5F9;
    max-width: 18ch;
}

.naira-rest {
    margin: 0 0 var(--s-4);
    font-family: 'Inter', sans-serif;
    font-size: var(--t-base);
    line-height: 1.6;
    color: #CBD5E1;
    max-width: var(--measure-narrow);
}

.naira-rest span {
    color: #34D399;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.naira-total {
    margin: 0;
    padding-top: var(--s-3);
    border-top: var(--rule);
    font-family: 'Inter', sans-serif;
    font-size: var(--t-sm);
    color: #94A3B8;
    font-variant-numeric: tabular-nums;
}

.naira-total span { color: #F1F5F9; }

/* ---------- years ---------- */

.naira-years {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: var(--s-6);
}

.naira-year {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-control);
    font-family: 'Inter', sans-serif;
    font-size: var(--t-base);
    font-variant-numeric: tabular-nums;
    color: #CBD5E1;
    text-decoration: none;
    transition: border-color 160ms ease, color 160ms ease;
}

.naira-year:hover { border-color: #94A3B8; color: #F1F5F9; }

.naira-year.is-current {
    background: #F59E0B;
    border-color: #F59E0B;
    color: #1A1203;
    font-weight: 600;
}

.naira-year:focus-visible {
    outline: 2px solid #34D399;
    outline-offset: 2px;
}

.naira-source {
    margin: var(--s-5) 0 0;
    max-width: var(--measure);
    font-family: 'Inter', sans-serif;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: #94A3B8;
}

.naira-source a { color: #34D399; text-underline-offset: 3px; }

@media (pointer: coarse) {
    .naira-year { min-height: 44px; }
}