/* ============================================================================================================
   THE HOME PAGE (2026-10-03). Source of truth: Code/home/assets/css/home.css → the theme's assets/css/home.css.
   Manual: Code/home/README.md. Only the home's own parts live here (.llh-*). The hero carousel, the rows, the tiles,
   the buttons and the pills are LL-UI's (ll-ui.css, loaded first; Code/ui/README.md is its contract, the video
   session owns it), and the shared tokens (--ll-ease-settle, --ll-glass-*, ...) come from head.css on every page.
   The design system holds (design-system.md): dark; #ef4444 the accent and the seam; blood red only as fill; every number
   white; drop-shadow for the seam's glow; Plus Jakarta Sans, display at 800 / -0.035em; drawn icons; no eyebrows.
   The art (site-art.md): approved free files, shown whole, nothing over or fading a picture's bottom-right corner.
   ============================================================================================================ */

.llh { background: var(--ll-black, #0a0a0a); }

/* ---- THE ROWS' HEAD: the home's own, a display title with one line under it (the rows themselves are LL-UI's) -------- */
.llh-row .llui-row__title {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
}
.llh-row__line { margin: 0.45rem 0 0; max-width: 62ch; color: rgba(255, 255, 255, 0.66); font-size: 0.98rem; line-height: 1.55; }

/* ---- 6. THE WORLDS --------------------------------------------------------------------------------------------------- */
.llh-world {
    position: relative;
    isolation: isolate;
    margin-top: clamp(3rem, 6vw, 4.5rem);
    min-height: clamp(380px, 52vh, 560px);
    display: flex;
    align-items: center;
    overflow: hidden;
}
.llh-world__art { position: absolute; inset: 0; z-index: -1; }
.llh-world__art img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
/* A painting lit by day is graded down, so the city reads at dusk (the Stories page's rule). */
.llh-world--day .llh-world__art img { filter: brightness(0.5) saturate(1.1) hue-rotate(-8deg); }
.llh-world--night .llh-world__art img { filter: brightness(0.7); }
.llh-world__art::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.55) 45%, rgba(10, 10, 10, 0.1) 100%),
        linear-gradient(to bottom, #0a0a0a 0%, rgba(10, 10, 10, 0) 18%, rgba(10, 10, 10, 0) 82%, #0a0a0a 100%);
}
/* The words start where the rows' titles do (LL-UI's gutter). */
.llh-world__text { width: 100%; padding: 3rem var(--llui-gutter, 2rem); }
.llh-world__name {
    margin: 0;
    color: #fff;
    font-size: clamp(2.6rem, 5vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
}
.llh-world__name::after {
    content: '';
    display: block;
    width: 104px;
    height: 2px;
    margin: 1.1rem 0 0;
    background: var(--ll-neon-line);
    filter: var(--ll-neon-glow-lg);
}
.llh-world__line { max-width: 46ch; margin: 1.2rem 0 0; color: rgba(255, 255, 255, 0.8); font-size: 1.08rem; line-height: 1.6; }
.llh-world__counts { margin: 0.9rem 0 1.6rem; color: rgba(255, 255, 255, 0.6); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.llh-world__counts b { color: #fff; }

/* ---- 7. THE OFFER sits in style.css's .hp-membership; only its spacing here ------------------------------------------ */
.llh-offer { margin-top: 1rem; }

/* ---- 8. NEXT --------------------------------------------------------------------------------------------------------- */
.llh-next { padding: 4rem 16px 5rem; text-align: center; }
.llh-next__line { margin: 0; color: rgba(255, 255, 255, 0.62); font-size: 1rem; }
.llh-next__when { margin: 0.5rem 0 1.6rem; color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.03em; }

/* ---- PHONES (LL-UI's own break, 700 px) ------------------------------------------------------------------------------ */
@media (max-width: 699px) {
    .llh-row .llui-row__head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .llh-world__art::after { background: linear-gradient(to bottom, #0a0a0a 0%, rgba(10, 10, 10, 0.5) 30%, rgba(10, 10, 10, 0.75) 100%); }
}

/* The proof's own line (admin only; never on the live page). */
.llh-proofbar { padding: 14px 16px; border-top: 1px solid #2a2a2a; background: #0b0b0c; color: #b0b0b0; font-size: 13px; text-align: center; }
.llh-proofbar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.llh-proofbar b { color: #ef4444; }