/* GraphiWeb Avenue — infrastructure site.
   Deliberately one stylesheet, no framework, no JavaScript, no build step.
   A hosting company's own site should be the least interesting thing on the
   server to attack. */

:root{
  --ink:#15181d;
  --ink-soft:#5a616b;
  --line:#e4e7ec;
  --bg:#ffffff;
  --bg-alt:#f7f8fa;
  --accent:#1b5fbe;
  --accent-soft:#eaf1fc;
  --ok:#1a6b3c;
  --warn-bg:#fff6e6;
  --warn-line:#f0c98a;
  --radius:10px;
  --wrap:min(1060px, 100% - 40px);
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:#e7eaef; --ink-soft:#a3abb6; --line:#2a2f38;
    --bg:#14171c; --bg-alt:#1a1e24; --accent:#6ca4f5; --accent-soft:#182740;
    --ok:#7ed3a4; --warn-bg:#2b2317; --warn-line:#5b4626;
  }
}

*{box-sizing:border-box}
html{color-scheme:light dark; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.75 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust:100%;
}
.wrap{width:var(--wrap); margin-inline:auto}

/* header ------------------------------------------------------------ */
header.site{border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:10}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:16px; flex-wrap:wrap}
.brand{font-weight:700; font-size:1.08rem; letter-spacing:-.01em; text-decoration:none; color:var(--ink)}
.brand span{color:var(--accent)}
nav.site a{
  text-decoration:none; color:var(--ink-soft); font-size:.93rem;
  margin-left:22px; padding-block:4px; border-bottom:2px solid transparent;
}
nav.site a:hover, nav.site a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent)}
@media (max-width:640px){
  nav.site{width:100%}
  nav.site a{margin-left:0; margin-right:18px}
}

/* hero --------------------------------------------------------------- */
.hero{padding-block:72px 56px; border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(1.8rem, 4.5vw, 2.7rem); line-height:1.22; margin:0 0 16px; letter-spacing:-.02em; max-width:20ch}
.hero p.lead{font-size:1.09rem; color:var(--ink-soft); max-width:62ch; margin:0 0 28px}
.cta{display:inline-block; background:var(--accent); color:#fff; text-decoration:none;
     padding:11px 22px; border-radius:8px; font-weight:600; font-size:.95rem}
.cta.secondary{background:transparent; color:var(--accent); border:1px solid var(--accent); margin-left:10px}

/* sections ----------------------------------------------------------- */
section{padding-block:56px; border-bottom:1px solid var(--line)}
section.alt{background:var(--bg-alt)}
h2{font-size:1.45rem; letter-spacing:-.015em; margin:0 0 10px}
h3{font-size:1.02rem; margin:0 0 6px}
p{margin:0 0 14px}
.sub{color:var(--ink-soft); max-width:64ch; margin-bottom:30px}

.grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(250px,1fr))}
.card{border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:var(--bg)}
.card p{color:var(--ink-soft); font-size:.94rem; margin:0}

dl.specs{display:grid; grid-template-columns:max-content 1fr; gap:10px 22px; margin:0}
dl.specs dt{color:var(--ink-soft); font-size:.9rem}
dl.specs dd{margin:0; font-size:.94rem}
@media (max-width:560px){ dl.specs{grid-template-columns:1fr; gap:2px 0} dl.specs dd{margin-bottom:12px} }

/* legal pages -------------------------------------------------------- */
.legal{padding-block:48px 64px}
.legal h1{font-size:1.7rem; margin:0 0 6px; letter-spacing:-.02em}
.legal .updated{color:var(--ink-soft); font-size:.88rem; margin-bottom:32px}
.legal h2{font-size:1.12rem; margin:34px 0 8px; padding-top:20px; border-top:1px solid var(--line)}
.legal h2:first-of-type{border-top:0; padding-top:0}
.legal ul, .legal ol{margin:0 0 14px; padding-left:22px}
.legal li{margin-bottom:6px}
.legal p, .legal li{max-width:76ch}

.todo{
  background:var(--warn-bg); border:1px solid var(--warn-line);
  border-radius:8px; padding:12px 16px; margin:18px 0; font-size:.92rem;
}
.todo strong{display:block; margin-bottom:3px}

table{width:100%; border-collapse:collapse; margin:14px 0; font-size:.93rem}
th,td{border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top}
th{background:var(--bg-alt); font-weight:600}

code{font-family:ui-monospace, Consolas, monospace; font-size:.88em;
     background:var(--accent-soft); color:var(--accent); padding:1px 6px; border-radius:5px}

/* footer ------------------------------------------------------------- */
footer.site{padding-block:40px 56px; color:var(--ink-soft); font-size:.9rem}
footer.site .cols{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-bottom:26px}
footer.site a{color:var(--ink-soft)}
footer.site a:hover{color:var(--ink)}
footer.site ul{list-style:none; margin:0; padding:0}
footer.site li{margin-bottom:5px}
footer.site .legalline{border-top:1px solid var(--line); padding-top:20px; font-size:.85rem}