/* FULL STOP: compare the written forms without inserting an equality. */
#mathematical-record .notation-example { margin: 2rem 0; padding: 1.5rem 0; border-block: 1px solid var(--line); }
#mathematical-record .notation-example .eyebrow { margin-bottom: 1rem; }
#mathematical-record .notation-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: 0 0 1.5rem; }
#mathematical-record .notation-line { margin: 0; font: 450 clamp(2rem, 4.5vw, 3rem)/1.2 var(--font); letter-spacing: -.025em; white-space: pre-wrap; overflow-wrap: anywhere; }
#mathematical-record .notation-example h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.35; margin: 0 0 1rem; overflow-wrap: anywhere; }
#mathematical-record .notation-example p { overflow-wrap: anywhere; }
#mathematical-record .notation-example .statement { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.4; margin-bottom: 0; }
@media (max-width: 560px) { #mathematical-record .notation-pair { grid-template-columns: minmax(0, 1fr); gap: .65rem; } }
@media print { #mathematical-record .notation-example { break-inside: avoid; } }

/* Keep the surrounding page readable when text is enlarged. */
body { overflow-wrap: anywhere; }
.header-nav { min-width: 0; flex-wrap: wrap; justify-content: flex-end; column-gap: .75rem; row-gap: .2rem; }

/* Distinguish the supplied lines from a reading and its explanation. */
#mathematical-record .notation-reading { display: grid; gap: 1rem; margin: 1.25rem 0; }
#mathematical-record .notation-reading > div { padding-left: .9rem; border-left: 1px solid var(--line); min-width: 0; }
#mathematical-record .notation-reading dt { font-size: .875rem; line-height: 1.4; color: var(--muted); }
#mathematical-record .notation-reading dd { margin: .3rem 0 0; font-size: 1.0625rem; line-height: 1.5; }