/* Minimal, fast, SEO-friendly styling (no frameworks) */
:root { --max: 1100px; }

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.55;
  color: #111;
  background: #fff;
}

a { color: inherit; text-decoration: underline; }
a:hover { text-decoration-thickness: 3px; }

header { border-bottom: 1px solid #eee; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 16px;
}

/* Logo-only brand */
.brand { display: flex; align-items: center; }
.brand img { height: 64px; width: auto; display: block; }

nav { margin-top: 12px; }
nav a { margin-right: 14px; text-decoration: none; font-weight: 600; }
nav a[aria-current="page"] { text-decoration: underline; }

main h1 { font-size: 1.8rem; margin: 18px 0 8px; }
main h2 { font-size: 1.25rem; margin: 26px 0 8px; }

small, .muted { color: #555; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

/* Card (grey box) */
.card {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 12px;
  background: #fafafa;
}

/* Space between stacked cards (About page etc.) */
main > .card,
main section.card {
  margin: 0 0 16px 0;
}

/* Avoid double spacing inside grid (grid already uses gap) */
.grid .card { margin-bottom: 0; }

/* Dots -> ticks (only for list-clean lists) */
.list-clean {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.list-clean li {
  position: relative;
  padding-left: 26px;
  margin: 6px 0;
}

.list-clean li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
}

/* Model index columns */
.anchor-index { columns: 2; column-gap: 22px; }
@media (max-width: 640px) { .anchor-index { columns: 1; } }

footer { border-top: 1px solid #eee; margin-top: 28px; }

/* OPTIONAL: For bigger “TOVIS” and higher position inside a card.
   Use in about.html: <h2 class="section-title">TOVIS</h2> */
.section-title {
  font-size: 1.6rem;
  margin: 0 0 10px 0; /* remove top margin so it sits higher */
}