/* WordPress theme resets and desktop/tablet logo refinement. */
#beaux-material-index .intro{width:100%;max-width:none;margin:0}
#beaux-material-index .intro-mark{width:min(32vw,480px);transform:translateY(clamp(70px,12vh,160px))}
@media(max-width:1024px) and (min-width:701px){#beaux-material-index .intro-mark{width:min(34vw,380px)}}
@media(max-width:700px){#beaux-material-index .intro-mark{width:70vw;transform:translateY(14vh)}}
#beaux-material-index .tox-field .field-after::after{position:absolute;inset:0;background:linear-gradient(90deg,rgb(0 0 0/.40) 0%,rgb(0 0 0/.17) 42%,transparent 74%);content:''}
#beaux-material-index .chapter-word{text-decoration:none}

/* Shared, quiet utility footer used across the material index. */
#beaux-material-index .material-footer{align-items:center;justify-content:center;flex-wrap:wrap;gap:9px;padding:18px 28px 20px}
#beaux-material-index .material-footer a{color:inherit;text-decoration:none}
#beaux-material-index .material-footer a:hover{color:#fff}
#beaux-material-index .material-footer i{font-style:normal;opacity:.5}

/* Compact wordmark revealed once the landing mark leaves the frame. */
#beaux-material-index .compact-logo{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:110px;font-family:Georgia,'Times New Roman',serif}
#beaux-material-index .compact-logo span{font-size:inherit;line-height:.72}
#beaux-material-index .compact-logo i,#beaux-material-index .intro-rule{display:none!important}
#beaux-material-index .compact-logo small{font:700 5px/1 Arial,Helvetica,sans-serif;letter-spacing:.17em;white-space:nowrap}
@media(max-width:700px){#beaux-material-index .compact-logo{min-width:82px;gap:3px}#beaux-material-index .compact-logo small{font-size:3.8px;letter-spacing:.15em}}

/* Slightly stronger supporting type without competing with the chapter titles. */
#beaux-material-index .chapter-word small{font-size:clamp(16px,1.6vw,26px)}
#beaux-material-index .masthead p{font-size:9px}
@media(max-width:700px){#beaux-material-index .chapter-word small{font-size:15px}#beaux-material-index .masthead p{font-size:8.5px}}
@media(max-width:700px){#beaux-material-index .scroll-cue{font-size:13px}}

/* Use an explicit exit animation: iOS can otherwise collapse a transition as its browser chrome responds to the first scroll. */
#beaux-material-index .scroll-cue.is-fading{animation:mi-scroll-cue-exit 1.35s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes mi-scroll-cue-exit{from{opacity:1}to{opacity:0}}

/* Slightly richer contrast on the warm material reveals. */
#beaux-material-index .skin-field .field-after::after,#beaux-material-index .book-field .field-after::after{background:linear-gradient(90deg,rgb(0 0 0/.28) 0%,rgb(0 0 0/.12) 38%,transparent 72%)}