.q-wrap{padding:0 var(--gutter) 6rem}
#quotes{position:relative}
.q{--a:#b595c8;position:absolute;margin:0;color:var(--ink);opacity:0;transition:opacity .6s ease,color .25s;cursor:default}
.q[data-c="1"]{--a:#6fb3b8}
.q[data-c="2"]{--a:#9cb77a}
.q[data-c="3"]{--a:#d6a45c}
.q.in{opacity:1}
.q.in:focus-visible{color:var(--a);z-index:2;outline:0}
@media (hover:hover){.q.in:hover{color:var(--a);z-index:2}#quotes:has(.q:hover) .q.in:not(:hover){opacity:.25}}
.q blockquote{margin:0;font-family:var(--serif);line-height:1.25}
.q .qm{color:var(--a)}
.q figcaption{margin-top:.8rem;font:italic 400 1.1rem var(--sans);color:var(--muted);opacity:0;transition:opacity .25s}
.q:hover figcaption,.q:focus-visible figcaption{opacity:1}
.q.xl{width:min(520px,100%)}
.q.xl blockquote{font-size:clamp(2.4rem,4vw,3.8rem);letter-spacing:-.01em}
.q.l{width:min(400px,100%)}
.q.l blockquote{font-size:clamp(1.7rem,2.5vw,2.3rem)}
.q.m{width:min(340px,100%)}
.q.m blockquote{font-size:1.35rem;line-height:1.38}
.q.s{width:min(340px,100%)}
.q.s blockquote{font-size:1.1rem;line-height:1.55}
.q.v1 blockquote{font-style:italic}
.q.v2 blockquote{font-weight:700}
.q.v3 blockquote{font-family:var(--sans);font-size:1.15rem;line-height:1.55}
@media (hover:none){.q{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.q figcaption{opacity:1}}
@media (max-width:760px){.q-wrap{padding:0 1.25rem 3rem}
#quotes{height:auto!important}
.q{position:static;width:auto!important;margin:0 0 2.6rem}}
@media (prefers-reduced-motion:reduce){.q{transition:none}}