/* Keep artwork aligned to its own grid track. */
.site-header{padding-inline:max(var(--gutter),calc((100% - 1600px)/2 + var(--gutter)))}
.desktop-nav>a,.desktop-nav .more-menu>summary{min-height:44px;display:inline-flex;align-items:center}
.profile-inner .chapter-art,
.profile-inner .inner-hero-art{justify-self:center}

/* A visible keyboard ring on both light and dark brand surfaces. */
:where(a,button,summary,input,textarea,select):focus-visible{outline-color:#87612e}
:is(.surface-navy,.surface-deep,.site-footer) :focus-visible{outline-color:#d2a963}

/* The existing 700px two-column override must not undo the tablet stack. */
@media(min-width:700px) and (max-width:850px){
 .profile-inner .inner-hero-grid{grid-template-columns:minmax(0,1fr);gap:32px}
 .profile-inner .inner-hero-art{width:100%;max-width:560px;margin-inline:auto}
 .profile-inner .inner-hero-art img{height:auto;max-height:none;object-fit:contain}
}

/* Intrinsic SVG proportions stay intact as the picture source changes. */
@media(min-width:601px) and (max-width:850px){
 .profile-inner .inner-hero-art>.lgi-picture img{height:auto;max-height:none}
}

/* WebKit includes the arrow in this link's box only when it is a flex item. */
.site-footer .footer-bottom>a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0;min-height:32px}

/* Match the first link baselines when one mobile footer heading wraps. */
.site-footer .footer-links h2{line-height:1.6}
.site-footer .footer-links :is(a,button){min-height:44px;display:inline-flex;align-items:center}
@media(max-width:550px){
 .site-footer .footer-links h2{min-height:3.6em;min-block-size:2lh}
}