body {
  line-height: 1.5;
  margin: 2rem;
  background-color: #fff8ea;
}

p {
  margin: 0;
}

/* .container {
  max-width: 900px;
  margin: 0 auto;
} */

.link-source {
  color: #000;
  text-decoration: none;
  font-weight: 300;
}
.link-source:hover {
  text-decoration: underline;
}

.page-columns {
  column-count: 1;         /* default: single column on mobile */
      /* space between columns when desktop */
}

.header-bar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
}

/* Logo must never exceed 50% viewport width */
.header-bar .license {
  height: auto;
  width: 200px;
  max-width: 45vw; /* min 100px, scale with viewport, max 200px */
}

/* Title */
.header-bar h1 {
  font-size: clamp(1.25rem, 5vw, 2rem);
  margin: 0;
  flex: 1;
}

/* Mobile: stack vertically */
@media (max-width: 600px) {
  .header-bar {
    flex-direction: column;   /* stack logo on top of title */
    align-items: center;      /* center both */
    text-align: center;
  }

  .header-bar h1 {
    white-space: normal;      /* allow wrapping */
  }
}




/* Desktop layout: two columns */
@media (min-width: 1024px) {
  .page-columns {
    column-count: 2;
    column-gap: 20px;
  }

  .page-columns > div,
  .page-columns > table {
    display: block; 
    break-inside: avoid;     /* prevent splitting across columns */
    width: 100%;             /* fill the column */
  }
}