/* home — landing: intro prose + featured grid */
.home-intro { max-width: 46rem; margin-bottom: 1.6rem; color: var(--fg); line-height: 1.7; white-space: pre-line; }
.home-top { display: flex; gap: 1.6rem; align-items: flex-start; margin-bottom: 1.6rem; }
.home-top .home-intro { flex: 1 1 auto; margin-bottom: 0; }
.home-hero { flex: 0 0 auto; width: 20rem; max-width: 42%; height: auto; display: block; border: 1px solid var(--line); }
@media (max-width: 700px) { .home-top { flex-direction: column; } .home-hero { width: 100%; max-width: none; } }

.home-feat-head {
    color: var(--accent); font-size: 0.85rem; letter-spacing: 0.06em;
    border-top: 1px solid var(--line); padding-top: 0.9rem; margin-bottom: 0.8rem;
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.home-feat-all { color: var(--dim); font-size: 0.78rem; letter-spacing: 0; text-decoration: none; transition: color 0.12s ease; }
.home-feat-all:hover { color: var(--accent); text-decoration: none; }

.home-feat { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; }

.home-card {
    display: block; border: 1px solid var(--line); background: var(--panel);
    color: var(--fg); text-decoration: none; overflow: hidden; position: relative;
}
.home-card:hover { border-color: var(--accent); }
.home-card-rm {
    position: absolute; top: 5px; right: 5px; width: 1.5rem; height: 1.5rem;
    display: flex; align-items: center; justify-content: center; line-height: 1;
    background: rgba(10, 10, 10, 0.82); border: 1px solid var(--line); color: var(--fg);
    font-size: 1rem; cursor: pointer; opacity: 0; transition: opacity 0.12s;
}
.home-card:hover .home-card-rm { opacity: 1; }
.home-card-rm:hover { border-color: var(--c-orange); color: var(--c-orange); }
.home-thumb {
    aspect-ratio: 16 / 9; background-color: var(--bg);
    background-position: center; background-size: cover; background-repeat: no-repeat;
}
.home-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 1.6rem; }
.home-card-b { padding: 0.5rem 0.6rem 0.6rem; }
.home-card-t { font-size: 0.9rem; overflow: hidden; }
.home-card-tt { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--fg); }
.home-card-tt.is-scroll { max-width: none; overflow: visible; text-overflow: clip; animation: home-marq linear forwards; }
@keyframes home-marq { from { transform: translateX(0); } to { transform: translateX(var(--sc, 0)); } }
.home-card-c { color: var(--accent); font-size: 0.8rem; margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-empty { color: var(--dim); font-size: 0.85rem; }

@media (max-width: 700px) {
    .home-feat { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ── flagship showcase (one highlighted build under the intro) ── */
.home-showcase {
    display: grid; grid-template-columns: 1.65fr 1fr; gap: 1.1rem;
    border: 1px solid var(--line); background: var(--panel);
    margin-bottom: 1.6rem; overflow: hidden;
    transition: border-color 0.12s ease;
}
.home-showcase:hover { border-color: var(--accent); }
.home-sc-media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden; }
.home-sc-vid { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-sc-empty { display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 2rem; }
.home-sc-play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #fff; opacity: 0; transition: opacity 0.15s ease;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); pointer-events: none;
}
.home-showcase:hover .home-sc-play { opacity: 0.92; }
.home-sc-body { padding: 1rem 1.1rem 1.1rem 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.home-sc-kicker { color: var(--accent); font-size: 0.78rem; letter-spacing: 0.08em; }
.home-sc-line { color: var(--fg); font-size: 0.95rem; line-height: 1.6; max-width: 28rem; }
.home-sc-cta { color: var(--accent); font-size: 0.85rem; margin-top: auto; }
.home-sc-cta:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 700px) {
    .home-showcase { grid-template-columns: 1fr; }
    .home-sc-body { padding: 0 1rem 1.1rem; }
}