/* ═════════════════════════════════════════════════════════════════════════
   styles-append-home-v0.1.0.css  —  sport-picker landing page (home.html)
   ═════════════════════════════════════════════════════════════════════════
   v0.1.0 — 2026-09-04 — NBA v0.16.73 / §10.252. Served at the domain root
   by nginx conf v2.7 (`location = /` → try_files home.html) and at /home via
   the generic pretty regex. Self-contained on purpose: everything is scoped
   under .home-* and reads only the base tokens from styles.css (--bg-*,
   --text-*, --accent-*, --border*, --font-display via the Outfit append,
   --font-mono). No dependency on the slate-command or flow-shell appends —
   the brand block is re-declared here (same values as .sc-brand) so this
   page cannot be broken by a slate-command CSS retirement.
   Version-named per the CACHE-BUST rule: bucket (1) immutable at the edge;
   the next change ships as v0.1.1 and retires this name (rule 10).
   ═════════════════════════════════════════════════════════════════════════ */

.home-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.home-mark{width:40px;height:40px;flex:0 0 40px;display:block}
.home-mark img{display:block;width:100%;height:100%}
.home-brand-copy{display:flex;flex-direction:column;line-height:1}
.home-brand-copy strong{font:800 14px var(--font-display);letter-spacing:.18em;color:var(--text-primary)}
.home-brand-copy span{margin-top:5px;font:400 9px var(--font-mono);letter-spacing:.26em;color:var(--text-tertiary)}
.home-topbar-date{font:500 11px var(--font-mono);letter-spacing:.11em;color:var(--text-secondary)}

.home{max-width:1400px;margin:0 auto;padding:56px 28px 72px}
.home-title{margin:0;font:900 clamp(40px,5.2vw,64px)/1.02 var(--font-display);letter-spacing:-.025em;color:var(--text-primary)}
.home-sub{margin:14px 0 0;max-width:54ch;font:400 15px/1.5 var(--font-display);color:var(--text-secondary)}

.home-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:40px}

.home-tile{
    position:relative;display:flex;flex-direction:column;justify-content:space-between;
    min-height:320px;padding:28px 26px 24px;
    background:var(--bg-elev-1);border:1px solid var(--border);border-radius:14px;
    color:inherit;text-decoration:none;
    transition:border-color .15s ease,background-color .15s ease;
}
.home-tile:hover{border-color:var(--border-strong);background:var(--bg-elev-2)}
.home-tile:focus-visible{outline:2px solid var(--accent-pos);outline-offset:3px;border-color:var(--accent-pos-border)}
.home-tile:active{background:var(--bg-elev-3)}

.home-tile-sport{
    display:block;
    font:900 clamp(56px,7vw,92px)/.92 var(--font-display);letter-spacing:-.035em;
    color:var(--text-primary);
}
.home-tile-meta{display:flex;flex-direction:column;gap:9px;margin-top:28px}
.home-tile-state{
    display:inline-flex;align-items:center;gap:8px;
    font:600 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent-pos);
}
.home-tile-state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-pos);flex:0 0 7px}
.home-tile-dest{font:500 15px/1.3 var(--font-display);color:var(--text-primary)}
.home-tile-built{font:400 11px var(--font-mono);letter-spacing:.06em;color:var(--text-tertiary);min-height:14px}

/* Offseason: the type itself carries the state — dimmed name, no live dot. */
.home-tile--off .home-tile-sport{color:var(--text-tertiary)}
.home-tile--off .home-tile-state{color:var(--text-tertiary)}
.home-tile--off .home-tile-state::before{background:var(--text-muted)}
.home-tile--off:hover .home-tile-sport{color:var(--text-secondary)}

.home-aside{margin:36px 0 0;font:400 13px var(--font-display);color:var(--text-tertiary)}
.home-aside a{color:var(--text-secondary);text-decoration:none;border-bottom:1px solid var(--border-strong);padding-bottom:1px}
.home-aside a:hover{color:var(--text-primary);border-bottom-color:var(--text-secondary)}
.home-aside a:focus-visible{outline:2px solid var(--accent-pos);outline-offset:3px}

@media (max-width:640px){
    .home{padding:36px 18px 56px}
    .home-tile{min-height:220px;padding:22px 20px 20px}
    .home-tile-sport{font-size:clamp(48px,16vw,72px)}
    .home-tiles{margin-top:28px}
}
@media (prefers-reduced-motion:reduce){
    .home-tile{transition:none}
}