/* Soccer Mom Linux — soccermomlinux.com */
:root {
    --magenta: #c2287d;
    --magenta-dark: #9c1f64;
    --plum: #571945;
    --plum-deep: #3d1231;
    --ink: #24222b;
    --ink-soft: #524f5e;
    --paper: #faf7f5;
    --card: #ffffff;
    --line: #e8e2df;
    --term-bg: #1b1a22;
    --term-green: #9ece6a;
    --term-text: #dcd7e0;
    --gold: #e8b931;
    --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --mono: "SF Mono", "Cascadia Code", Consolas, "DejaVu Sans Mono", monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.65;
}
a { color: var(--magenta); }
a:hover { color: var(--magenta-dark); }
.container { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }

/* ── Header ─────────────────────────────────────────────── */
header.site {
    background: var(--card);
    border-top: 4px solid var(--magenta);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 50;
}
header.site .container {
    display: flex; align-items: center; gap: 1.5rem;
    height: 64px;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand img, .brand svg { height: 36px; width: 36px; }
.brand b { font-size: 1.12rem; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }
.brand small { color: var(--magenta); font-weight: 700; }
nav.main { margin-left: auto; display: flex; gap: .25rem; flex-wrap: wrap; }
nav.main a {
    text-decoration: none; color: var(--ink-soft); font-weight: 600;
    padding: .45rem .8rem; border-radius: 7px; font-size: .95rem;
}
nav.main a:hover { background: var(--paper); color: var(--magenta-dark); }
nav.main a.active { color: var(--magenta); }
nav.main a.cta {
    background: var(--magenta); color: #fff;
}
nav.main a.cta:hover { background: var(--magenta-dark); color: #fff; }

/* ── Announcement ribbon ────────────────────────────────── */
.ribbon {
    background: var(--plum-deep); color: #f5e9f1; text-align: center;
    padding: .5rem 1rem; font-size: .92rem;
}
.ribbon a { color: var(--gold); font-weight: 700; text-decoration: none; }
.ribbon a:hover { text-decoration: underline; }

/* ── Hero ───────────────────────────────────────────────── */
.hero {
    background: linear-gradient(135deg, var(--plum-deep) 0%, var(--plum) 45%, var(--magenta-dark) 100%);
    color: #fff; padding: 4.5rem 0 5rem;
}
.hero .container { display: flex; gap: 3rem; align-items: center; flex-wrap: wrap; }
.hero .pitch { flex: 1 1 380px; }
.hero h1 { font-size: 2.7rem; line-height: 1.15; letter-spacing: -.02em; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero p.sub { margin: 1.1rem 0 1.8rem; font-size: 1.18rem; color: #ecdce8; max-width: 34rem; }
.btn {
    display: inline-block; text-decoration: none; font-weight: 700;
    padding: .8rem 1.5rem; border-radius: 9px; font-size: 1.02rem;
    transition: transform .08s ease;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--gold); color: var(--plum-deep); }
.btn.primary:hover { background: #f6c73f; color: var(--plum-deep); }
.btn.ghost { border: 2px solid rgba(255,255,255,.75); color: #fff; margin-left: .6rem; }
.btn.ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn.solid { background: var(--magenta); color: #fff; }
.btn.solid:hover { background: var(--magenta-dark); color: #fff; }

/* ── Terminal card ──────────────────────────────────────── */
.term {
    flex: 1 1 420px; background: var(--term-bg); border-radius: 12px;
    box-shadow: 0 18px 50px rgba(20,8,20,.45);
    overflow: hidden; font-family: var(--mono); font-size: .84rem;
}
.term .bar {
    background: #2a2833; padding: .5rem .9rem; display: flex; gap: .4rem; align-items: center;
    color: #8d8899; font-size: .78rem;
}
.term .bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.term .bar i:nth-child(1) { background: #f26b6b; }
.term .bar i:nth-child(2) { background: #e8b931; }
.term .bar i:nth-child(3) { background: #71c837; }
.term pre {
    padding: 1rem 1.1rem 1.2rem; color: var(--term-text);
    white-space: pre-wrap; word-break: break-word; line-height: 1.5;
}
.term .p { color: var(--magenta); font-weight: 700; }
.term .g { color: var(--term-green); }
.term .y { color: var(--gold); }
.term .dim { color: #8d8899; }

/* ── Sections / cards ───────────────────────────────────── */
section.strip { padding: 3.6rem 0; }
section.strip.alt { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
h2.title { font-size: 1.9rem; letter-spacing: -.01em; margin-bottom: .4rem; }
p.lede { color: var(--ink-soft); font-size: 1.08rem; max-width: 46rem; margin-bottom: 2rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.1rem; }
.card {
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 1.4rem 1.4rem 1.3rem;
}
.card h3 { font-size: 1.08rem; margin-bottom: .45rem; color: var(--plum); }
.card p { font-size: .95rem; color: var(--ink-soft); }
.card code { font-family: var(--mono); font-size: .84em; background: var(--paper); border: 1px solid var(--line); border-radius: 5px; padding: .08em .35em; }

/* ── Download cards ─────────────────────────────────────── */
.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 1.2rem; }
.dl .card { display: flex; flex-direction: column; }
.dl .card .meta { font-size: .85rem; color: var(--ink-soft); font-family: var(--mono); margin: .5rem 0 1rem; word-break: break-all; }
.dl .card .btn { margin-top: auto; text-align: center; }
.badge {
    display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: #fff; background: var(--magenta);
    border-radius: 99px; padding: .18rem .6rem; margin-bottom: .5rem;
}
.badge.alt { background: var(--plum); }
.badge.gold { background: var(--gold); color: var(--plum-deep); }

/* ── Docs layout ────────────────────────────────────────── */
.docs { display: flex; gap: 2.5rem; padding: 2.5rem 0 4rem; align-items: flex-start; }
.docs aside {
    flex: 0 0 230px; position: sticky; top: 84px;
    font-size: .92rem;
}
.docs aside b { display: block; text-transform: uppercase; font-size: .74rem; letter-spacing: .08em; color: var(--ink-soft); margin: 1rem 0 .3rem; }
.docs aside a { display: block; text-decoration: none; color: var(--ink-soft); padding: .18rem 0; }
.docs aside a:hover { color: var(--magenta); }
.docs main { flex: 1; min-width: 0; }
.docs main h1 { font-size: 2.2rem; letter-spacing: -.02em; margin-bottom: .4rem; }
.docs main h2 { font-size: 1.5rem; margin: 2.6rem 0 .7rem; padding-top: .8rem; border-top: 1px solid var(--line); letter-spacing: -.01em; }
.docs main h3 { font-size: 1.12rem; margin: 1.6rem 0 .5rem; color: var(--plum); }
.docs main p, .docs main li { color: #3a3744; }
.docs main ul, .docs main ol { padding-left: 1.4rem; margin: .6rem 0 1rem; }
.docs main pre {
    background: var(--term-bg); color: var(--term-text); font-family: var(--mono);
    font-size: .86rem; border-radius: 9px; padding: .95rem 1.1rem; overflow-x: auto; margin: .8rem 0 1.2rem;
    line-height: 1.5;
}
.docs main code { font-family: var(--mono); font-size: .86em; background: #f1ebe8; border: 1px solid var(--line); border-radius: 5px; padding: .08em .35em; }
.docs main pre code { background: none; border: none; padding: 0; }
table.ref { width: 100%; border-collapse: collapse; margin: .8rem 0 1.4rem; font-size: .92rem; }
table.ref th, table.ref td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.ref th { background: var(--card); color: var(--plum); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
table.ref code { white-space: nowrap; }
table.ref td:first-child { white-space: nowrap; }
.note {
    border-left: 4px solid var(--gold); background: #fdf6e2; border-radius: 0 8px 8px 0;
    padding: .8rem 1rem; margin: 1rem 0; font-size: .94rem;
}
.note.policy { border-color: var(--magenta); background: #fbeaf3; }

/* ── News ───────────────────────────────────────────────── */
article.news { max-width: 760px; margin: 0 auto; padding: 3rem 1.25rem 4.5rem; }
article.news .date { color: var(--ink-soft); font-size: .9rem; text-transform: uppercase; letter-spacing: .07em; }
article.news h1 { font-size: 2.3rem; line-height: 1.2; margin: .5rem 0 1.4rem; letter-spacing: -.02em; }
article.news p { margin: 0 0 1.1rem; color: #3a3744; font-size: 1.04rem; }
article.news blockquote {
    border-left: 4px solid var(--magenta); padding: .4rem 0 .4rem 1.2rem; margin: 1.4rem 0;
    font-size: 1.12rem; color: var(--plum); font-style: italic;
}
article.news blockquote footer { font-style: normal; font-size: .9rem; color: var(--ink-soft); margin-top: .4rem; }
article.news h2 { margin: 2rem 0 .7rem; font-size: 1.4rem; }
article.news ul { padding-left: 1.4rem; margin-bottom: 1.1rem; }
article.news li { margin: .35rem 0; }
article.news code { font-family: var(--mono); font-size: .88em; background: #f1ebe8; border: 1px solid var(--line); border-radius: 5px; padding: .08em .35em; }

/* ── Try page ───────────────────────────────────────────── */
.vm-wrap { padding: 2.2rem 0 4rem; }
#screen_container {
    background: #000; border-radius: 10px; margin: 1.2rem auto;
    box-shadow: 0 16px 46px rgba(20,8,20,.4);
    display: inline-block; padding: 12px;
    max-width: 100%; overflow: auto;
}
#screen_container div {
    white-space: pre; font: 15px/1.18 var(--mono); color: #ddd;
}
#screen_container canvas { display: none; }
.vm-status {
    font-family: var(--mono); font-size: .9rem; color: var(--plum);
    background: var(--card); border: 1px solid var(--line); border-radius: 8px;
    padding: .6rem .9rem; margin: .8rem 0;
}
.vm-controls { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin: 1rem 0; }
.vm-center { text-align: center; }

/* ── Footer ─────────────────────────────────────────────── */
footer.site {
    background: var(--plum-deep); color: #cbb3c4; padding: 2.6rem 0 2.8rem; margin-top: 0;
    font-size: .92rem;
}
footer.site .cols { display: flex; gap: 3rem; flex-wrap: wrap; }
footer.site b { color: #fff; display: block; margin-bottom: .5rem; }
footer.site a { color: #f0cfe3; text-decoration: none; display: block; padding: .12rem 0; }
footer.site a:hover { color: var(--gold); }
footer.site .fine { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .84rem; }
footer.site .fine a { display: inline; color: var(--gold); }

@media (max-width: 760px) {
    .hero h1 { font-size: 2.1rem; }
    .docs { flex-direction: column; }
    .docs aside { position: static; flex: none; width: 100%; }
    header.site .container { height: auto; padding: .6rem 1.25rem; flex-wrap: wrap; }
    nav.main { margin-left: 0; }
}