/* fleet-sites shared design system — high-contrast dark, self-contained, no external fonts */
:root{
  --bg:#0a0c10; --panel:#11151c; --panel-2:#161b23;
  --ink:#e9eef5; --muted:#9fb0c3; --faint:#6b7c91;
  --line:#222b37; --line-2:#2c3848;
  --accent:#5ad1ff; --accent-2:#7ef0c0; --warn:#ffd479; --rose:#ff9ecb;
  --max:64rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
.mono{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace}
.wrap{max-width:var(--max); margin:0 auto; padding:0 1.4rem}

header{border-bottom:1px solid var(--line); background:linear-gradient(180deg,#0b0e13,transparent)}
.top{display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; padding:2.4rem 0 .3rem}
.mark{font-family:ui-monospace,Menlo,monospace; font-size:1.4rem; font-weight:600; letter-spacing:-.02em}
.mark .sigil{color:var(--accent-2)}
.top .dom{color:var(--faint); font-size:.95rem}
nav.crumbs{margin-left:auto; font-size:.85rem; color:var(--faint)}
nav.crumbs a{color:var(--muted)}
.lede{font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.25; font-weight:600; letter-spacing:-.02em; margin:.6rem 0 1rem; max-width:44ch}
.lede em{color:var(--accent-2); font-style:normal}
.sub{color:var(--muted); max-width:60ch; margin:0 0 2.2rem}

.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:2.2rem 0}
.grid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:640px){.grid,.grid.three{grid-template-columns:1fr}}
.card{background:var(--panel); padding:1.4rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; transition:background .15s}
.card:hover{background:var(--panel-2)}
.card .tag{font-family:ui-monospace,Menlo,monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.card h3{margin:.1rem 0 0; font-size:1.12rem; letter-spacing:-.01em}
.card p{margin:0; color:var(--muted); font-size:.94rem}
.card .go{margin-top:auto; padding-top:.6rem; font-size:.88rem}

section.block{margin:2.8rem 0}
h2{font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); font-weight:600; margin:0 0 1rem; padding-bottom:.5rem; border-bottom:1px solid var(--line)}
.work{display:grid; gap:.1rem}
.row{display:grid; grid-template-columns:11rem 1fr; gap:1rem; padding:.65rem 0; border-bottom:1px solid var(--line); align-items:baseline}
@media(max-width:640px){.row{grid-template-columns:1fr; gap:.1rem}}
.row .name{font-family:ui-monospace,Menlo,monospace; color:var(--ink); font-size:.95rem}
.row .desc{color:var(--muted); font-size:.92rem}
.stack{color:var(--faint); font-size:.8rem}
p.body{color:var(--muted); max-width:62ch}

.cta{background:var(--panel); border:1px solid var(--line-2); border-radius:14px; padding:1.5rem 1.6rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin:2.8rem 0}
.cta .t{font-size:1.05rem; font-weight:600}
.cta .s{color:var(--muted); font-size:.9rem; margin-top:.2rem}
.btn{display:inline-block; background:var(--accent); color:#04222e; font-weight:650; padding:.55rem 1.05rem; border-radius:9px; font-size:.93rem}
.btn:hover{text-decoration:none; filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--line-2)}

footer{border-top:1px solid var(--line); margin-top:3.2rem; padding:1.5rem 0 3rem; color:var(--faint); font-size:.82rem}
footer .links{display:flex; flex-wrap:wrap; gap:1.1rem; margin-bottom:.9rem}
details.prov{margin-top:.8rem}
details.prov summary{cursor:pointer; color:var(--faint); font-family:ui-monospace,Menlo,monospace; font-size:.78rem}
details.prov summary:hover{color:var(--muted)}
.provtbl{margin-top:.7rem; border:1px solid var(--line); border-radius:8px; overflow:hidden; max-width:42rem}
.provtbl div{display:grid; grid-template-columns:9rem 1fr; gap:.5rem; padding:.32rem .7rem; border-bottom:1px solid var(--line); font-family:ui-monospace,Menlo,monospace; font-size:.73rem}
.provtbl div:last-child{border-bottom:0}
.provtbl .k{color:var(--faint)}
.provtbl .v{color:var(--muted); word-break:break-all}
.badge{display:inline-block; font-family:ui-monospace,Menlo,monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2); border:1px solid var(--line-2); border-radius:999px; padding:.15rem .6rem}
