/* Minimal, readable defaults */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  color: #111;
  background: #fff;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.container {
  max-width: 46rem;
  margin: 10vh auto 4rem;
  padding: 0 1rem;
}

.title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0 0 .5rem;
  font-weight: 650;
}

.lead { font-size: clamp(1rem, 2vw, 1.125rem); }

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}

/* Plain links */
a { color: inherit; }
a:hover { text-decoration: underline; }

/* Make the nav links just normal links */
.link-button {
  text-decoration: underline;
  border: 0;
  padding: 0;
  background: none;
}

/* Clickable accents kept simple */
.glow-text {
  cursor: pointer;
  text-decoration: underline dotted;
  color:orange;
}

/* Zoom-on-click word */
.zoomable {
  display: inline-block;
  cursor: zoom-in;
  transition: transform .15s ease; /* tiny motion for clarity */
  color:blue;
}
.zoomable.zoomed {
  transform: scale(2);
  cursor: zoom-out;
}

/* Footer */
.foot {
  max-width: 46rem;
  margin: 0 auto 2rem;
  padding: 0 1rem;
  color: #555;
}


/* Focus ring for keyboard users */
:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
  border-radius: .2rem;
}