:root {
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --content-max: 1000px;
}

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; line-height: 1.6; }

h1 { margin: 0; font-weight: bold; font-size: clamp(1.5rem, 3vw, 2.25rem); }
h2 { margin: 0; font-weight: bold; font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h3 { margin: 0; font-weight: bold; font-size: clamp(1.1rem, 2vw, 1.4rem); }
h4 { margin: 0; font-weight: bold; font-size: clamp(1rem, 1.8vw, 1.2rem); }

img { max-width: 100%; height: auto; }
table { width: 100%; table-layout: auto; border-collapse: collapse; }

.container { width: min(100%, var(--content-max)); margin: 0 auto; padding: var(--space-2); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.brand { font-weight: bold; }
.nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.nav a { text-decoration: none; }
.hero { padding: var(--space-3) 0; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.grid-full { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
.section { margin: var(--space-3) 0; }
.footer { margin-top: var(--space-3); padding: var(--space-2) 0; }

.imgLeft  { float: left;   margin-right: 10px;  margin-bottom: 10px; }
.imgRight { float: right;  margin-left: 10px;   margin-bottom: 10px; }

@media (max-width: 768px) {
  body { font-size: 15px; }
  .grid { grid-template-columns: 1fr; }
  .imgLeft, .imgRight { float: none; margin: 0 0 10px 0; display: block; }
}