/* Keep family learning context legible and controls usable at narrow widths. */
.family-workspace { max-width: 76rem; }
.family-auth { max-width: 38rem; }
.family-auth h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.family-auth input { width: 100%; }
.family-navigation { display: flex; flex-wrap: wrap; gap: .6rem; }
.family-navigation a { color: #153766; background: #edf2f8; padding: .6rem 1rem;
    border-radius: 2rem; font-weight: 800; }
.family-context { margin-top: 1.25rem; padding: 1rem; background: #fff4cf;
    color: #172434; border-radius: .75rem; overflow-wrap: anywhere; }
.family-heading { padding: 1.5rem 0; }
.family-eyebrow { text-transform: uppercase; letter-spacing: .07em;
    font-size: .8rem; font-weight: 800; color: #536780; }
.family-shortcuts { display: grid; gap: 1rem; margin-block: 1.5rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.family-shortcuts a { padding: 1.25rem; border-radius: .75rem;
    background: #153766; color: #fff; font-weight: 800; }
.family-feedback { max-width: 54rem; }
.family-feedback h2:not(:first-child) { margin-top: 1.75rem; }
.family-workspace a:focus-visible, .family-auth a:focus-visible {
    outline: 3px solid #ae5200; outline-offset: 4px; }