/* Accessibility pass from the web interface guidelines review. Loaded last so it can raise text sizes,
   touch targets and contrast without touching the artwork rules in the other files. */

.skip-link{position:fixed;left:12px;top:-64px;z-index:10000;padding:15px 20px;background:var(--cobalt);color:#fff;font:600 13px var(--font-sans);letter-spacing:.01em;transition:top .15s}
.skip-link:focus{top:12px}
main:focus{outline:none}

/* Text is never smaller than 11px. */
body.monochrome .personal-brand small,body.monochrome .edition,body.monochrome .hero-bottom button,body.monochrome .hero-bottom a,
body.monochrome .hero-location,body.monochrome .identity-strip span,body.monochrome .personal-statement>p,body.monochrome .coaching-kicker,
body.monochrome .moment figcaption b,body.monochrome .coaching-cta,body.monochrome .eyebrow,body.monochrome .shelf-heading,
body.monochrome .shelf-caption,body.monochrome .pass-cta,body.monochrome .ask-or,body.monochrome .contact-place,body.monochrome footer,
body.monochrome .coaching-areas li>span,body.monochrome .rep-label,.book-select-label,
.reader-meta,.reader-hint,.page-number,.lp-eyebrow,.lp-main button small,.select-label{font-size:11px}

/* Engraved labels on the artwork stay small but no longer shrink below 9px. */
.pass-card small,.board span{font-size:9px}

/* Small text on the cream sections reaches 4.5:1. */
.monochrome .library-introduction p:not(.eyebrow){color:#555}
.monochrome .ask-or,.monochrome .contact-place{color:#595959}
.monochrome .shelf-heading i{color:#6b6350}
.shelf-caption,.reader-hint,.select-label{color:#5f5d55}

/* Counters keep their width as the digits change. */
#full-status,.page-number,.group-item .num,.rep-label,.moment figcaption b,.lp-times{font-variant-numeric:tabular-nums}

/* Touch targets of at least 44px. Links keep their layout by taking the padding back as margin. */
body.monochrome header nav a,body.monochrome header nav button,body.monochrome footer a{padding-block:14px;margin-block:-14px}
body.monochrome footer a{padding-block:16px;margin-block:-16px}
body .close{width:44px;height:44px}
.lp-vol button{width:44px;height:44px}
.lp-main button{padding:12px}
#lp-rate{height:44px}
.lp-parts button{padding:13px 10px}
.tabs button{padding:14px 0}

/* Visible field labels in the Ask form. */
.ask-label{display:block;margin:4px 6px -4px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#444}

/* The larger header text needs the room the tagline was using. */
@media(max-width:1100px){body.monochrome .edition{display:none}}

/* Phone: the narrow-screen rules in editorial.css set text to 9 and 10px and controls to about 40px. */
@media(max-width:700px){
 body.monochrome header nav{font-size:11px;gap:9px}
 body.monochrome header nav a,body.monochrome header nav button{font-size:11px;padding-block:16px;margin-block:-16px}
 body.monochrome .hero-kicker{font-size:11px}
 body.monochrome .hero-bottom p{font-size:11px;max-width:140px}
 body.monochrome .hero-bottom button,body.monochrome .hero-bottom a{white-space:nowrap;padding-inline:12px}
 body.monochrome .hero-bottom button,body.monochrome .hero-bottom a{min-height:44px}
 .ask-topics span{padding-block:13px}
 .contact-mail{padding-block:12px 9px}
 body.monochrome .personal-statement button:not(:where(.letter-paper)),body.monochrome .contact .author-link{min-height:44px}
 /* The printed spine is 12px wide on a phone: an invisible 44px target around it (it stops at the next book). */
 .collection-spine .spine-hit{position:absolute;top:0;bottom:0;left:-22px;right:-10px}
}

/* While a book dialog is open the page behind it does not scroll; the dialog scrolls on its own and does not pass the scroll on. */
html:has(dialog[open]){overflow:hidden;scrollbar-gutter:stable}
dialog{overscroll-behavior:contain}