/*
 * Home notes component
 *
 * A column of small note cards beside the homepage sheet: the site intro,
 * a "New here? Start with" list, and the Fairhaven line. The frosted-glass
 * surface lives in components/glass.css; this file owns layout, typography,
 * and the resting tilt per note that straightens on hover.
 *
 * Layout: on wide screens the notes occupy the right-hand grid column of
 * .home (row 1, beside the sheet — see layout.css for the grid). On
 * narrower screens the intro note sits above the sheet and the remaining
 * notes below it (flex order; DOM order unchanged).
 */

.home-notes {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

@media (min-width: 1000px) {
    .home > .home-notes {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        margin-bottom: 0;
    }

    .home > .sheet {
        grid-row: 1;
    }
}

/* Below the wide breakpoint: the intro note sits above the sheet, the
   start-here and Fairhaven notes below it. The aside dissolves
   (display: contents) so the notes and the sheet participate in one flex
   column and can be reordered; DOM order (screen readers, tab order) is
   unchanged. */
@media (max-width: 999px) {
    .home {
        display: flex;
        flex-direction: column;
    }

    .home-notes {
        display: contents;
    }

    .home-note-intro {
        order: -1;
        margin-bottom: var(--space-lg);
    }

    .home-note-start {
        order: 1;
        margin-top: var(--space-lg);
        margin-bottom: var(--space-md);
    }

    .home-note-about {
        order: 2;
    }
}

/* Mid band only: notes cap at reading width. On phones the cap is the
   card sizing in glass.css (85%), which this must not override. */
@media (min-width: 721px) and (max-width: 999px) {
    .home-note {
        max-width: var(--reading-width);
    }
}

/* The note card — surface (glass material) in glass.css. */
.home-note {
    padding: 0.85rem 1rem;
    font-family: var(--font-serif);
    font-size: 0.96rem;
    line-height: 1.52;
    color: var(--color-ink);
}

.home-note p {
    margin-bottom: 0.5rem;
}

.home-note p:last-child {
    margin-bottom: 0;
}

/* Label — same register as the marginalia label: small caps, sans
   against the serif note text. */
.home-note-label {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-ink-muted);
    font-weight: 600;
    margin-bottom: 0.45rem;
}

.home-note-links {
    list-style: none;
}

.home-note-links li {
    margin-bottom: 0.4rem;
    line-height: 1.35;
}

.home-note-links li:last-child {
    margin-bottom: 0;
}

.home-note-links a {
    font-size: 0.92rem;
    color: var(--color-primary);
    text-decoration: none;
}

.home-note-links a:hover {
    text-decoration: underline;
    color: var(--color-primary-hover);
}

/* Other-stuff card — label keeps its sentence case (no small caps). */
.home-note-about .home-note-label {
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.78rem;
}

/* Resting tilt — hand-placed, wide screens only (matches the marginalia
   behaviour: slow settle back, quicker straighten on hover). */
@media (min-width: 1000px) {
    .home-note {
        transform: rotate(var(--home-note-tilt, -0.6deg));
        transition: transform 0.45s ease;
    }

    .home-note:nth-child(2) {
        --home-note-tilt: 0.5deg;
    }

    .home-note:nth-child(3) {
        --home-note-tilt: -0.35deg;
    }

    .home-note:hover {
        transform: rotate(0deg);
        transition: transform 0.25s ease-out;
    }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .home-note,
    .home-note:hover {
        transition: none;
    }
}