/* ---------------------------------------------------------------------
   Чөлөөт цагаараа / Freetime Learning (freetime.html)

   A listings page, not a tool: five level bands, each with one thing to watch, one to listen to
   and one to follow. Laid out as a guide -- a header row of columns and a row per level -- rather
   than as cards, because that is what it is, and because every other page on this site already
   uses a grid of panels. Nothing here is interactive except the links.

   The level colours are the shared JLPT spectrum from style.css (--jlpt-n5 ... --jlpt-n1), the
   same green-to-wine run used by every level badge on the site, so a band reads as the same N3
   the rest of the site means. --ft-lv is the per-band alias; the bands set it and everything
   inside them reads it.

   Palette: a cool paper and near-black ink with one indigo for links. Deliberately the quietest
   page on the site -- the colour here is carried by the five level edges, and the reading matter
   is a list of names, which wants to look like a printed guide rather than a product page.
   --------------------------------------------------------------------- */

/* The token block is declared on the body:has() selector AND on the wrapper: body is an ancestor
   and cannot read a descendant's custom properties, and without the first one the shared light
   --bg-page shows as margins outside .container's 1200px cap on a wide screen. */
body:has(.freetime-main),
.freetime-main {
    --ft-paper: #f4f2ed;
    --ft-paper: light-dark(#f4f2ed, #15161a);
    --ft-surface: #fbfaf7;
    --ft-surface: light-dark(#fbfaf7, #1d1f24);
    --ft-ink: #191715;
    --ft-ink: light-dark(#191715, #eee9e0);
    --ft-ink-soft: #625c54;
    --ft-ink-soft: light-dark(#625c54, #a9a297);
    --ft-ink-faint: #8d867c;
    --ft-ink-faint: light-dark(#8d867c, #7d766c);
    --ft-rule: #d8d2c7;
    --ft-rule: light-dark(#d8d2c7, #33363d);
    --ft-rule-strong: #191715;
    --ft-rule-strong: light-dark(#191715, #eee9e0);
    --ft-link: #2f4a8c;
    --ft-link: light-dark(#2f4a8c, #9db4ee);
    /* The JLPT spectrum is authored as ink on a light ground; on the dark theme each one is
       lifted until it reads against #15161a. Same five hues, same order, still distinguishable
       from each other -- which is the one property that rule in style.css asks for. */
    --ft-n5: light-dark(#1f8f6b, #46c79b);
    --ft-n4: light-dark(#d1a01f, #e7bd47);
    --ft-n3: light-dark(#c85a1f, #ef8c4d);
    --ft-n2: light-dark(#9c3520, #d9664a);
    --ft-n1: light-dark(#82304a, #cc6f8d);
}

body:has(.freetime-main) {
    background: var(--ft-paper);
}

.freetime-main {
    background: var(--ft-paper);
    color: var(--ft-ink);
    padding: 130px 20px 90px;
    max-width: 1120px;
    margin: 0 auto;
}

/* ---- head ---------------------------------------------------------------------------------- */
.ft-head {
    border-bottom: 2px solid var(--ft-rule-strong);
    padding-bottom: 16px;
    margin-bottom: 4px;
}

.ft-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ft-ink-faint);
    margin: 0 0 10px;
}

.freetime-main h1 {
    margin: 0;
    font-size: clamp(2rem, 5.4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.02;
    text-wrap: balance;
    /* Not --font-display: Fraunces has no Cyrillic subset, so a Mongolian heading set in it
       silently falls back to a system serif and stops matching the rest of the page. */
    font-family: var(--font-body);
}

.ft-lede {
    margin: 14px 0 0;
    max-width: 70ch;
    color: var(--ft-ink-soft);
}

/* ---- the guide ------------------------------------------------------------------------------ */
.ft-guide-head {
    display: grid;
    grid-template-columns: 116px repeat(3, 1fr);
    gap: 0 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ft-rule-strong);
}

.ft-guide-head span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ft-ink-faint);
}

.ft-band {
    display: grid;
    grid-template-columns: 116px repeat(3, 1fr);
    gap: 0 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--ft-rule);
    align-items: start;
    /* Arrives with the rest of the page -- keyframes in style.css. Applied to the band and not to
       .ft-guide, because a transform on an ancestor of a fixed element makes it the containing
       block and the masthead would stop being fixed while it ran. */
    animation: khanjpRiseIn 0.38s var(--ease-out) backwards;
}

.ft-band:nth-child(3) { animation-delay: 0.05s; }
.ft-band:nth-child(4) { animation-delay: 0.1s; }
.ft-band:nth-child(n+5) { animation-delay: 0.15s; }

.ft-n5 { --ft-lv: var(--ft-n5); }
.ft-n4 { --ft-lv: var(--ft-n4); }
.ft-n3 { --ft-lv: var(--ft-n3); }
.ft-n2 { --ft-lv: var(--ft-n2); }
.ft-n1 { --ft-lv: var(--ft-n1); }

.ft-band-level {
    border-left: 4px solid var(--ft-lv);
    padding-left: 13px;
}

.ft-band-level b {
    display: block;
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ft-lv);
}

.ft-band-level small {
    display: block;
    margin-top: 7px;
    font-size: 0.76rem;
    color: var(--ft-ink-faint);
}

.ft-band-note {
    grid-column: 2 / -1;
    margin: 0 0 18px;
    max-width: 78ch;
    font-size: 0.9rem;
    color: var(--ft-ink-soft);
}

/* The band is a four-column grid whose first column belongs to the level. The note spans the
   three content columns, and without this the first pick flows back into column one and sits under
   the level mark -- which is exactly what it did, squeezing every anime title into 116px.
   Counted from the END: nth-of-type counts elements of the same tag, not of the same class, so
   counting forwards makes .ft-band-level the first div and shifts every pick one column over. The
   three picks are the last three divs in the band whatever else is added above them. */
.ft-pick:nth-last-of-type(3) { grid-column: 2; }
.ft-pick:nth-last-of-type(2) { grid-column: 3; }
.ft-pick:nth-last-of-type(1) { grid-column: 4; }

.ft-pick-kind {
    /* The column headings say this above 820px; below it the columns become a stack and each pick
       has to say for itself which of the three it is. */
    display: none;
    margin: 0 0 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ft-ink-faint);
}

.ft-pick-title {
    margin: 0 0 3px;
    font-family: var(--font-jp);
    font-weight: 700;
    font-size: 1.08rem;
    line-height: 1.3;
}

.ft-pick-title a {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid var(--ft-lv);
    transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.ft-pick-title a:hover,
.ft-pick-title a:focus-visible {
    color: var(--ft-link);
    border-color: var(--ft-link);
}

.ft-pick-sub {
    margin: 0 0 8px;
    font-size: 0.78rem;
    color: var(--ft-ink-faint);
}

.ft-pick-why {
    margin: 0;
    font-size: 0.88rem;
    color: var(--ft-ink-soft);
}

.ft-foot-note {
    margin: 26px 0 0;
    font-size: 0.82rem;
    color: var(--ft-ink-faint);
    max-width: 70ch;
}

/* ---- phones --------------------------------------------------------------------------------- */
@media (max-width: 968px) {
    .freetime-main {
        /* 56px mobile masthead plus the same ~25px clearance the other pages use. */
        padding: 81px 20px 90px;
    }
}

@media (max-width: 820px) {
    /* Four columns cannot survive a phone, so the guide becomes what it really is: five level
       sections, each with three entries under it. The column headings go with the columns. */
    .ft-guide-head {
        display: none;
    }

    .ft-band {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 26px 0;
    }

    .ft-band-note,
    .ft-pick:nth-last-of-type(3),
    .ft-pick:nth-last-of-type(2),
    .ft-pick:nth-last-of-type(1) {
        grid-column: 1;
    }

    .ft-band-note {
        margin-bottom: 0;
    }

    .ft-pick-kind {
        display: block;
    }
}