.search-intro{align-items:center;gap:24px;margin-bottom:24px}
.search-intro>div:first-child{flex:0 0 300px;padding:0}
.search-intro h1{font-size:clamp(32px,4vw,48px);margin:0}
.quote-panel{flex:1;min-width:0;min-height:200px;margin:0;padding:20px 24px;background:#172344;border:1px solid #344978;border-radius:20px;box-shadow:4px 5px 0 #d9f45b;display:flex;align-items:center;color:#f2f5ff}
.quote-content{width:100%;opacity:1;transition:opacity .45s ease,transform .45s ease;transform:translateY(0)}
.quote-content.quote-fading{opacity:0;transform:translateY(5px)}
.quote-panel blockquote{margin:0;font-size:clamp(26px,2.6vw,32px);font-weight:600;line-height:1.45;letter-spacing:-.3px;overflow-wrap:anywhere}
.quote-panel figcaption{margin-top:12px;font-size:14px;color:#d9f45b;font-weight:700}
[data-theme="dark"] .quote-panel{background:#1d2945;border-color:#53648e;color:#f2f5ff}
main:has(.search-intro) .layout{grid-template-columns:minmax(0,1fr)}
main:has(.search-intro) .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1120px){main:has(.search-intro) .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.search-intro{flex-direction:column;align-items:stretch;gap:22px}.quote-panel{flex:auto;min-width:0;min-height:190px;padding:18px 20px}.search-intro h1{font-size:32px}.quote-panel blockquote{font-size:25px}main:has(.search-intro) .cards{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.quote-content{transition:none;transform:none!important}}

.search-intro>div>.text-link{margin-top:18px}

.quote-author{display:block}

@media(max-width:900px){.search-intro{flex-direction:column;align-items:stretch;gap:16px}.search-intro>div:first-child{flex:auto}.quote-panel{flex:auto}}

.search-intro>div:first-child{display:flex;align-items:center;gap:12px}.search-intro>div>.refresh-directory{margin:0;padding:5px 10px;font-size:25px;line-height:1.3}.search-intro h1{font-size:clamp(30px,3.5vw,42px)}.search-query{margin:0 0 16px}.search-query span{margin-left:8px}

/* Hidden overlapping samples reserve space for every quote at any viewport width. */
.search-intro .quote-panel{display:grid;grid-template-columns:minmax(0,1fr)}
.quote-panel>.quote-content,.quote-size-reserve{grid-area:1/1;min-width:0}
.quote-size-reserve{display:grid;grid-template-columns:minmax(0,1fr);visibility:hidden;pointer-events:none;user-select:none}
.quote-size-sample{grid-area:1/1;min-width:0;align-self:center}