* { box-sizing: border-box; }
:root { color-scheme: light dark; }
body {
  margin: 0;
  font: 400 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.composition {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  grid-template-areas: "text image";
  align-items: center;
  gap: clamp(1.5rem, 4vw, 5rem);
  padding: clamp(1.25rem, 3vw, 4rem);
}
.definition {
  grid-area: text;
  font-size: clamp(1rem, 1.8vw, 2.75rem);
  overflow-wrap: break-word;
}
h1 { font-size: 1.5em; font-weight: 650; letter-spacing: .2px; line-height: 1.2; margin: 0 0 1.15em; }
.entry-heading { margin-bottom: .7em; }
.term { font-size: 1.25em; font-weight: 650; line-height: 1.3; }
.part-of-speech { font-size: .8em; font-weight: 400; opacity: .65; }
p { margin: 0; }
.meaning { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: .25em; font-weight: 400; }
.lead { font-weight: 600; }
.note { margin-top: 1.25em; font-size: 1em; font-weight: 400; opacity: .85; }
.collage { grid-area: image; display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .composition { grid-template-columns: minmax(0, 1fr); grid-template-areas: "image" "text"; min-height: auto; gap: 1.75rem; }
  .definition { font-size: clamp(1rem, 3.4vw, 1.4rem); }
}

.pron { margin: .35em 0 0; font-size: .85em; font-weight: 400; opacity: .65; }