/* Black-and-white home and quote pages. Loaded only on those two templates (see inc/redesign.php).
   Full width with no gutters. Quote type uses Montserrat (the font on the quote images), everything else system sans-serif. */

:root{--mq-gap:clamp(12px,1.3vw,22px);--mq-card:#000807;--mq-card-ink:#efefef;--mq-ink:#1a1a1a;--mq-paper:#fff;--mq-grey:#efefef;--mq-mid:#666;--mq-line:#e8e8e8;--mq-soft:#f5f5f5;
  --mq-quote:"Montserrat",sans-serif;--mq-pad:clamp(16px,3vw,40px)}

/* Full width: drop the theme's side padding and content margins on these templates. */
body.mq-rd-page #wrapper{padding:0;max-width:none;width:100%}
body.mq-rd-page #content{margin-top:0;padding-bottom:0;overflow:visible}
body.mq-rd-page #wrapper #content section.main{padding:0;margin:0;width:auto;float:none}
body.mq-rd-page #wrapper{margin:55px 0 0}
body.single-post #content section{padding-top:0}

.mq-rd{font-family:sans-serif;color:var(--mq-ink);background:var(--mq-paper)}
.mq-rd *{box-sizing:border-box}
.mq-rd a{color:inherit;text-decoration:none}
@media (hover:hover){.mq-rd a:hover{text-decoration:underline;text-underline-offset:3px}}
.mq-rd ul{list-style:none;margin:0;padding:0}
.mq-rd h1,.mq-rd h2,.mq-rd h3{padding:0}
/* the theme styles every blockquote (Georgia italic, icon, dotted rules): undo it here */
.mq-rd blockquote{margin:0;padding:0;border:0;background:none;font-style:normal;color:inherit;quotes:none}
.mq-rd blockquote::before,.mq-rd blockquote::after{content:none}
.mq-rd .mq-btn--light{color:var(--mq-ink)}
.mq-rd .mq-btn--ink{color:var(--mq-paper)}
.mq-label{font:700 11px/1.3 sans-serif;letter-spacing:.14em;text-transform:uppercase;margin:0}

/* buttons */
.mq-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid currentColor;
  background:transparent;color:inherit;font:700 12px sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-radius:0}
@media (hover:hover){.mq-rd .mq-btn:hover{text-decoration:none;background:var(--mq-ink);color:var(--mq-paper);border-color:var(--mq-ink)}}
.mq-btn--light{background:var(--mq-paper);color:var(--mq-ink);border-color:var(--mq-paper)}
.mq-btn--ink{background:var(--mq-ink);color:var(--mq-paper);border-color:var(--mq-ink)}

/* hero: centred search over the typographic collage, darkened so the search reads clearly */
.mq-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mq-hero2{position:relative;isolation:isolate;overflow:hidden;background:#141414;color:#fff;min-height:clamp(380px,62vh,600px);display:grid;place-items:center}
.mq-hero2__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.mq-hero2::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 62% 60% at 50% 50%,rgba(20,20,20,.9),rgba(20,20,20,.72) 72%,rgba(20,20,20,.82))}
.mq-hero2__in{width:100%;max-width:820px;padding:48px var(--mq-gap);text-align:center}
.mq-front__search{display:flex;margin:0 auto;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.3),0 20px 60px rgba(0,0,0,.5)}
.mq-front__search input{flex:1;min-width:0;border:0;background:#fff;color:#000;font:500 clamp(16px,1.5vw,20px) sans-serif;padding:0 22px;min-height:66px;border-radius:0;-webkit-appearance:none}
.mq-front__search input:focus{outline:3px solid #fff;outline-offset:4px}
.mq-front__search button{border:0;border-left:1px solid #e0e0e0;background:#fff;color:#1a1a1a;font:700 13px sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:0 28px;cursor:pointer}
@media (hover:hover){.mq-front__search button:hover{background:#000807;color:#fff}}
.mq-front__hot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 18px;margin:20px 0 0;font-size:15px}
.mq-front__hot span{font:700 11px sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#bbb}
.mq-rd .mq-front__hot a{border-bottom:1px solid #777}
@media (hover:hover){.mq-rd .mq-front__hot a:hover{border-color:#fff;text-decoration:none}}

/* KPIs */
.mq-rd .mq-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:var(--mq-soft);padding:clamp(8px,1.4vw,18px) var(--mq-gap)}
.mq-kpis li{margin:0}
.mq-kpis a,.mq-kpis div{display:flex;flex-direction:column;align-items:center;gap:6px;padding:clamp(20px,2.6vw,34px) 10px;text-align:center}
@media (hover:hover){.mq-rd .mq-kpis a:hover{text-decoration:none}}
@media (hover:hover){.mq-rd .mq-kpis a:hover span{color:var(--mq-ink)}}
.mq-kpis strong{font:700 clamp(30px,3.6vw,54px)/1 var(--mq-quote);letter-spacing:-.02em;color:var(--mq-ink)}
.mq-kpis span{font:700 11px sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--mq-mid)}
@media (max-width:860px){.mq-rd .mq-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Editor's choice: one lead card beside a grid. Column counts keep both sides about
   the same height (lead 1/2 + 2 cols; 1/3 + 4 cols; 1/4 + 6 cols, two rows each). */
.mq-ec{display:grid;gap:calc(var(--mq-gap)*1.4) var(--mq-gap);padding:0 var(--mq-gap);grid-template-columns:1fr;align-items:start}
.mq-ec__lead{position:relative}
.mq-ec__tag{position:absolute;z-index:1;top:0;left:0;background:#fff;color:var(--mq-ink);font:700 11px sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:8px 12px}
.mq-ec__lead .mq-card__t{font-size:8cqw}
.mq-rd .mq-ec__rest{--c:2;display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:calc(var(--mq-gap)*1.4) var(--mq-gap)}
.mq-ec__rest>:nth-child(n+5){display:none}
@media (min-width:880px){.mq-ec{grid-template-columns:1fr 1fr}}
@media (min-width:1180px){.mq-ec{grid-template-columns:1fr 2fr}.mq-rd .mq-ec__rest{--c:4}.mq-ec__rest>:nth-child(-n+8){display:block}}
@media (min-width:1820px){.mq-ec{grid-template-columns:1fr 3fr}.mq-rd .mq-ec__rest{--c:6}.mq-ec__rest>:nth-child(-n+12){display:block}}

/* Shared most this week: ranked strip that scrolls sideways */
.mq-rd .mq-rank{list-style:none;margin:0;display:flex;gap:var(--mq-gap);overflow-x:auto;scroll-snap-type:x proximity;padding:0 var(--mq-gap) 14px;scrollbar-width:thin;scrollbar-color:#000 #eee}
.mq-rank__item{flex:0 0 clamp(170px,17vw,250px);scroll-snap-align:start;margin:0}
.mq-rank__n{display:block;font:700 clamp(40px,4.4vw,64px)/1 var(--mq-quote);letter-spacing:-.04em;margin:0 0 8px;color:var(--mq-ink)}
.mq-rank__item:nth-child(n+4) .mq-rank__n{color:#b5b5b5}

/* Famous authors: featured author, then a portrait row */
.mq-fa{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;padding:0 var(--mq-gap)}
.mq-fa__photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#eee;filter:contrast(1.05)}
.mq-fa__photo{max-width:520px}
.mq-fa__text .mq-label{color:var(--mq-mid)}
.mq-fa__name{margin:10px 0 0;font:700 clamp(36px,5vw,76px)/1 var(--mq-quote);letter-spacing:-.03em}
.mq-fa__count{margin:10px 0 0;font:700 12px sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mq-mid)}
.mq-rd .mq-fa__quotes{margin:28px 0 30px;border-top:1px solid #d6d6d6}
.mq-fa__quotes li{margin:0;padding:16px 0;border-bottom:1px solid #d6d6d6;color:var(--mq-ink);font:500 clamp(17px,1.5vw,21px)/1.45 var(--mq-quote)}
.mq-rd .mq-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:calc(var(--mq-gap)*1.4) var(--mq-gap);padding:clamp(32px,4vw,56px) var(--mq-gap) 0}
.mq-people li{margin:0}
.mq-people img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#e6e6e6;margin-bottom:10px;transition:filter .2s}
@media (hover:hover){.mq-rd .mq-people a:hover{text-decoration:none}}
@media (hover:hover){.mq-people a:hover img{filter:contrast(1.2)}}
.mq-people strong{display:block;font:700 15px/1.25 var(--mq-quote)}
.mq-people span{font-size:13px;color:var(--mq-mid)}
@media (max-width:860px){.mq-fa{grid-template-columns:1fr}.mq-fa__photo{max-width:none}}

/* quote page: author portrait */
.mq-authorbox__photo{width:64px;height:80px;object-fit:cover;flex:none}

/* sections */
.mq-sec{margin-top:clamp(56px,7vw,104px)}
.mq-sec--band{background:var(--mq-soft);padding:clamp(48px,6vw,88px) 0}
.mq-sec__head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 20px;padding:0 var(--mq-gap) 20px}
.mq-sec__head h2{margin:0;font:700 clamp(26px,2.8vw,40px)/1.1 var(--mq-quote);letter-spacing:-.02em;color:var(--mq-ink)}
.mq-sec__head p{margin:0;color:var(--mq-mid);font-size:15px}
.mq-sec--pad .mq-chips{padding:0 var(--mq-gap)}

/* Card grid: gaps between cards, more columns on wider screens. Each section shows whole
   rows only (mq-rows-1 / mq-rows-2), so extra cards are hidden rather than left dangling. */
.mq-rd .mq-grid{--cols:2;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:calc(var(--mq-gap)*1.4) var(--mq-gap);padding:0 var(--mq-gap);align-items:start}
.mq-cell{min-width:0}
.mq-quote{margin:0}
.mq-rows-1>:nth-child(n+3),.mq-rows-2>:nth-child(n+5){display:none}
@media (min-width:680px){.mq-rd .mq-grid{--cols:3}.mq-rows-1>:nth-child(n+3){display:block}.mq-rows-1>:nth-child(n+4),.mq-rows-2>:nth-child(n+5){display:none}.mq-rows-2>:nth-child(-n+6){display:block}.mq-rows-2>:nth-child(n+7){display:none}}
@media (min-width:880px){.mq-rd .mq-grid{--cols:4}.mq-rows-1>:nth-child(-n+4),.mq-rows-2>:nth-child(-n+8){display:block}.mq-rows-1>:nth-child(n+5),.mq-rows-2>:nth-child(n+9){display:none}}
@media (min-width:1180px){.mq-rd .mq-grid{--cols:5}.mq-rows-1>:nth-child(-n+5),.mq-rows-2>:nth-child(-n+10){display:block}.mq-rows-1>:nth-child(n+6),.mq-rows-2>:nth-child(n+11){display:none}}
@media (min-width:1500px){.mq-rd .mq-grid{--cols:6}.mq-rows-1>:nth-child(-n+6),.mq-rows-2>:nth-child(-n+12){display:block}.mq-rows-1>:nth-child(n+7),.mq-rows-2>:nth-child(n+13){display:none}}
@media (min-width:1820px){.mq-rd .mq-grid{--cols:7}.mq-rows-1>:nth-child(-n+7),.mq-rows-2>:nth-child(-n+14){display:block}.mq-rows-1>:nth-child(n+8),.mq-rows-2>:nth-child(n+15){display:none}}
@media (min-width:2140px){.mq-rd .mq-grid{--cols:8}.mq-rows-1>:nth-child(-n+8),.mq-rows-2>:nth-child(-n+16){display:block}}

/* Quote card = the generated quote image, drawn in HTML. Proportions measured from the
   1000x1500 image: 10% side margins, 80px line pitch, author two lines below, site name
   bottom right. cqw = 1% of the card's inner width (800 of 1000). Grows taller for long
   quotes, as the generated image does. */
.mq-rd .mq-card{container-type:inline-size;position:relative;display:flex;flex-direction:column;justify-content:center;
  aspect-ratio:2/3;padding:0 10% 9.4%;background:var(--mq-card);color:var(--mq-card-ink);text-decoration:none}
@media (hover:hover){.mq-rd .mq-card:hover{text-decoration:none;outline:2px solid var(--mq-ink);outline-offset:3px}}
.mq-card__t{margin:0;font:700 7.5cqw/10cqw var(--mq-quote);letter-spacing:0}
.mq-card__a{display:block;margin-top:10.9cqw;font:500 5cqw/10cqw var(--mq-quote);letter-spacing:.03em;text-transform:uppercase}
.mq-card__s{position:absolute;right:10.5cqw;bottom:6.7cqw;font:500 2.75cqw/1 var(--mq-quote);text-transform:uppercase}
.mq-card--author .mq-card__a{text-transform:none;letter-spacing:0;opacity:.8}
.mq-cap{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0 0;font-size:14px;margin:0}
.mq-cap__who{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mq-cap--quote{display:block;color:var(--mq-mid);font-size:13px;line-height:1.45}
.mq-cap__share{display:flex;gap:0;flex:none;margin-right:-8px}
.mq-cap__share a,.mq-cap__share button{width:34px;height:34px;display:grid;place-items:center;border:0;background:none;cursor:pointer;color:var(--mq-ink);padding:0}
.mq-cap__share svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}

/* topic chips */
.mq-chips{display:flex;flex-wrap:wrap;gap:8px}
.mq-chips a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid #cfcfcf;color:var(--mq-ink);border-radius:999px;font:600 14px sans-serif;background:var(--mq-paper)}
@media (hover:hover){.mq-rd .mq-chips a:hover{background:var(--mq-ink);color:var(--mq-paper);text-decoration:none}}

/* quote page */
.mq-crumbs{padding:12px var(--mq-pad);font-size:13px;color:var(--mq-mid);border-bottom:1px solid var(--mq-line)}
.mq-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mq-crumbs li{margin:0}
.mq-crumbs li+li::before{content:"/";margin-right:8px}
.mq-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mq-split__art{background:var(--mq-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:clamp(24px,4vw,56px)}
.mq-art{width:100%;max-width:520px}
.mq-art img.quoteImg{display:block;width:100%;height:auto}
.mq-rd .mq-art .downloadImg{display:none!important}
.mq-art .quoteImg.quoteText{font-family:var(--mq-quote);font-size:clamp(22px,2.4vw,32px);aspect-ratio:2/3;display:flex;flex-direction:column;justify-content:center}
.mq-split__info{padding:clamp(24px,4vw,56px) var(--mq-pad)}
.mq-single__quote{margin:14px 0 0}
.mq-single__quote blockquote{margin:0}
.mq-single__quote h1{margin:0;font:700 clamp(30px,3.4vw,52px)/1.15 var(--mq-quote);letter-spacing:-.01em}
.mq-single__by{margin-top:16px;font:500 15px var(--mq-quote);letter-spacing:.12em;text-transform:uppercase}
.mq-single__by a{border-bottom:1px solid currentColor}
.mq-share{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.mq-authorbox{display:flex;align-items:center;gap:16px;margin-top:30px;padding:16px 0;border-top:1px solid var(--mq-ink);border-bottom:1px solid var(--mq-line)}
.mq-authorbox__mark{width:64px;height:64px;flex:none;display:grid;place-items:center;background:var(--mq-ink);color:var(--mq-paper);font:700 28px var(--mq-quote)}
.mq-authorbox h2{margin:0;font:700 22px/1.2 var(--mq-quote)}
.mq-authorbox p{margin:4px 0 0;color:var(--mq-mid);font-size:14px}
.mq-topics{margin-top:24px}
.mq-topics .mq-label{margin-bottom:10px;color:var(--mq-mid)}
.mq-ad--side{margin-top:28px;min-height:600px}
.mq-ad--row{padding:24px var(--mq-gap) 0;min-height:120px}
.mq-support{margin-top:20px;font-size:14px}
.mq-support a{border-bottom:1px solid currentColor}
.mq-prevnext{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--mq-ink);border-bottom:1px solid var(--mq-ink)}
.mq-prevnext a{padding:20px var(--mq-pad);font:700 17px/1.4 var(--mq-quote)}
.mq-prevnext a+a,.mq-prevnext span+a{border-left:1px solid var(--mq-line);text-align:right}
.mq-prevnext .mq-label{display:block;margin-bottom:6px;color:var(--mq-mid);font-family:sans-serif}

@media (max-width:860px){
  body.mq-rd-page #wrapper{margin-top:var(--mq-stack)}
  .mq-split{grid-template-columns:1fr}
  .mq-prevnext{grid-template-columns:1fr}
  .mq-prevnext a+a,.mq-prevnext span+a{border-left:0;border-top:1px solid var(--mq-line);text-align:left}
  .mq-ad--side{min-height:0}
}
@media (max-width:520px){
  .mq-cap{padding:8px 10px 10px}
}

.mq-rank__item::marker{content:none}

/* ===== Listing pages: topic, author, wishes, search, directories, content ===== */

/* page header band */
.mq-head{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end;background:var(--mq-soft);padding:clamp(28px,4vw,56px) var(--mq-gap) clamp(32px,4.5vw,60px)}
.mq-head--portrait{grid-template-columns:minmax(0,1fr) clamp(150px,18vw,260px)}
.mq-head__text{max-width:860px}
.mq-head__crumbs ol{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--mq-mid)}
.mq-head__crumbs li{margin:0}
.mq-head__crumbs li+li::before{content:"/";margin-right:6px;color:#b5b5b5}
.mq-head__eyebrow{color:var(--mq-mid);margin-bottom:10px}
.mq-head__title{margin:0;font:700 clamp(36px,5.4vw,80px)/1 var(--mq-quote);letter-spacing:-.03em;color:var(--mq-ink)}
.mq-head__count{margin:14px 0 0;font:700 12px sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mq-mid)}
.mq-head__desc{margin-top:18px;max-width:720px;font-size:17px;line-height:1.65;color:#333}
.mq-head__desc p{margin:0 0 10px}
.mq-head__desc a{text-decoration:underline;text-underline-offset:3px}
.mq-head__desc img{display:none}
.mq-head__portrait{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.mq-head .mq-chipset{margin-top:24px}
.mq-head .mq-front__search{margin:26px 0 0;max-width:640px}
.mq-front__search--light{box-shadow:none;border:1px solid #cfcfcf}
.mq-archive__body{padding:clamp(28px,3.5vw,48px) 0 0}
.mq-archive__body>.mq-chipset,.mq-archive__body>.mq-empty{padding:0 var(--mq-gap)}
.mq-chipset--block{margin-top:clamp(40px,5vw,64px)}
.mq-empty{font-size:17px;color:#333}
@media (max-width:640px){.mq-head--portrait{grid-template-columns:minmax(0,1fr) 110px;align-items:start}}

/* chips: one pill style everywhere */
.mq-chipset .mq-label{color:var(--mq-mid);margin-bottom:10px}
.mq-rd .mq-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.mq-chips li{margin:0}
.mq-rd .mq-chips a{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 15px;border:1px solid #d4d4d4;border-radius:999px;background:#fff;color:var(--mq-ink);font:600 14px sans-serif;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
@media (hover:hover){.mq-rd .mq-chips a:hover{background:var(--mq-ink);border-color:var(--mq-ink);color:#fff}}
.mq-chips a span{font-weight:500;font-size:12px;color:var(--mq-mid)}
@media (hover:hover){.mq-chips a:hover span{color:#ccc}}

/* list grid: all cards shown (no row limit), ads span the row */
.mq-grid--list{align-items:start;grid-auto-flow:row dense}
.mq-rd .mq-grid__ad{grid-column:1/-1;min-height:100px;display:block}

/* pagination */
.mq-pager{padding:clamp(36px,4vw,56px) var(--mq-gap) 0}
.mq-rd .mq-pager ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.mq-pager li{margin:0}
.mq-pager a,.mq-pager span{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 14px;border-radius:999px;border:1px solid #d4d4d4;font:600 14px sans-serif;color:var(--mq-ink);text-decoration:none}
@media (hover:hover){.mq-rd .mq-pager a:hover{background:var(--mq-ink);color:#fff;border-color:var(--mq-ink);text-decoration:none}}
.mq-pager .current{background:var(--mq-ink);border-color:var(--mq-ink);color:#fff}
.mq-pager .dots{border:0;min-width:24px;padding:0}

/* A-Z directory */
.mq-az{position:sticky;top:var(--mq-stack);z-index:5;background:#fff;transition:top .2s ease-in-out;border-bottom:1px solid var(--mq-line);padding:10px var(--mq-gap)}
.mq-rd .mq-az ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px}
.mq-az li{margin:0}
.mq-az a,.mq-az span{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;font:700 14px var(--mq-quote)}
.mq-rd .mq-az a{color:var(--mq-ink)}
@media (hover:hover){.mq-rd .mq-az a:hover{background:var(--mq-ink);color:#fff;text-decoration:none}}
.mq-az span{color:#c4c4c4}
.mq-dir{padding:8px var(--mq-gap) 0}
.mq-dir__group{display:grid;grid-template-columns:clamp(56px,7vw,110px) minmax(0,1fr);gap:16px;padding:28px 0;border-bottom:1px solid var(--mq-line);scroll-margin-top:calc(var(--mq-stack) + var(--mq-az,64px) + 8px)}
.mq-dir__letter{margin:0;font:700 clamp(36px,4vw,60px)/1 var(--mq-quote);color:var(--mq-ink)}
.mq-rd .mq-dir ul{list-style:none;margin:0;padding:0;columns:4 200px;column-gap:28px}
.mq-dir li{margin:0;padding:5px 0;break-inside:avoid;display:flex;justify-content:space-between;gap:10px;font-size:15px}
.mq-rd .mq-dir li a{color:var(--mq-ink)}
.mq-dir li span{font-size:12px;color:#9a9a9a;flex:none}
.mq-people--dir{padding-top:clamp(28px,3.5vw,48px)}

/* collection tiles (wishes, proverbs) */
.mq-rd .mq-tiles{list-style:none;margin:0;padding:0 var(--mq-gap);display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.mq-tiles li{margin:0}
.mq-rd .mq-tiles a{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:58px;padding:0 18px;background:var(--mq-soft);border-radius:12px;color:var(--mq-ink);text-decoration:none;transition:background .15s,color .15s}
@media (hover:hover){.mq-rd .mq-tiles a:hover{background:var(--mq-ink);color:#fff}}
.mq-tiles strong{font:700 15px/1.2 var(--mq-quote)}
.mq-tiles span{font-size:12px;color:var(--mq-mid)}
@media (hover:hover){.mq-tiles a:hover span{color:#ccc}}

/* content pages */
.mq-prose{max-width:760px;margin:0 auto;padding:clamp(32px,4vw,56px) var(--mq-gap) 0;font-size:17px;line-height:1.7;color:#2a2a2a}
.mq-prose h2,.mq-prose h3{font-family:var(--mq-quote);color:var(--mq-ink);letter-spacing:-.01em;line-height:1.2;margin:1.8em 0 .5em}
.mq-prose h2{font-size:28px}.mq-prose h3{font-size:21px}
.mq-prose a{text-decoration:underline;text-underline-offset:3px}
.mq-prose img{max-width:100%;height:auto}
.mq-prose [class*="p-t-100"],.mq-prose [class*="p-tb-100"]{padding-top:24px!important;padding-bottom:24px!important}
.mq-prose .darkBG{background:none;color:inherit}

/* the old theme styles h1 on topic pages as a 100px grey banner; undo it for the new header */
body .mq-rd .mq-head h1.mq-head__title{height:auto;line-height:1;background:none;-webkit-filter:none;filter:none;text-transform:none;text-align:left;border-radius:0;color:var(--mq-ink);font:700 clamp(36px,5.4vw,80px)/1 var(--mq-quote);letter-spacing:-.03em;margin:0;padding:0}
.mq-prose .headingSub,.mq-prose .AdditionalText,.mq-prose p{font-size:17px!important;line-height:1.7!important;font-weight:400!important;color:#2a2a2a!important;max-width:none!important;margin:0 0 1em!important}
.mq-prose>div>div,.mq-prose [class*="whoWeAre"],.mq-prose [class*="whatWeDo"],.mq-prose [class*="ourValues"],.mq-prose [class*="whyImages"]{padding:0!important;margin:0!important;background:none!important;width:auto!important;float:none!important}
.mq-prose .valueCards,.mq-prose .cards{display:none}

/* header with something on the right (Authors: a grid of faces) */
.mq-head--aside{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center}
.mq-rd .mq-faces{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mq-faces li{margin:0}
.mq-faces a{position:relative;display:block;overflow:hidden}
.mq-faces img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .3s}
.mq-faces span{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font:700 13px/1.2 var(--mq-quote)}
@media (hover:hover){.mq-rd .mq-faces a:hover{text-decoration:none}}
@media (hover:hover){.mq-faces a:hover img{transform:scale(1.04)}}
@media (max-width:860px){.mq-head--aside{grid-template-columns:1fr}}

/* ===== Quote page ===== */
.mq-qhero{background:var(--mq-soft);padding:clamp(20px,3vw,36px) var(--mq-gap) clamp(40px,5vw,72px)}
.mq-qhero__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center;max-width:1240px;margin:0 auto}
.mq-qhero__art{margin:0;justify-self:end;width:100%;max-width:440px}
.mq-qhero__art .mq-art{max-width:none;box-shadow:0 24px 60px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.08)}
.mq-qhero__art .quoteImg{display:block;width:100%;height:auto}
.mq-qhero__text{max-width:640px}
.mq-qhero .mq-head__crumbs{max-width:1240px;margin:0 auto}
.mq-qhero .mq-head__crumbs ol{margin-bottom:clamp(20px,3vw,36px)}
.mq-rd .mq-qhero__quote{margin:12px 0 0}
.mq-qhero__quote h1{margin:0;font:700 clamp(28px,3.4vw,50px)/1.15 var(--mq-quote);letter-spacing:-.02em;color:var(--mq-ink)}
.mq-byline{display:inline-flex;align-items:center;gap:14px;margin:26px 0 0;color:var(--mq-ink)}
@media (hover:hover){.mq-rd a.mq-byline:hover{text-decoration:none}}
@media (hover:hover){.mq-rd a.mq-byline:hover strong{text-decoration:underline;text-underline-offset:3px}}
.mq-byline img,.mq-byline__mark{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none}
.mq-byline__mark{display:grid;place-items:center;background:var(--mq-ink);color:#fff;font:700 22px var(--mq-quote)}
.mq-byline strong{display:block;font:700 18px/1.2 var(--mq-quote)}
.mq-byline em{display:block;font-style:normal;font-size:13px;color:var(--mq-mid);margin-top:3px}
.mq-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.mq-btn--lg{min-height:52px;padding:0 24px;font-size:13px;gap:10px;border-radius:999px}
.mq-btn--lg .mq-icon{width:18px;height:18px}
.mq-rd .mq-btn.mq-copy.mq-btn--lg{border-color:#cfcfcf;background:#fff;color:var(--mq-ink)}
@media (hover:hover){.mq-rd .mq-btn.mq-copy.mq-btn--lg:hover{border-color:var(--mq-ink);background:var(--mq-ink);color:#fff}}
.mq-share-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.mq-share-row .mq-label{color:var(--mq-mid);margin-right:6px}
.mq-rd .mq-share-row__btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #d9d9d9;color:var(--mq-ink);transition:background .15s,color .15s,border-color .15s}
@media (hover:hover){.mq-rd .mq-share-row__btn:hover{background:var(--mq-ink);color:#fff;border-color:var(--mq-ink);text-decoration:none}}
.mq-qhero .mq-chipset{margin-top:28px;padding-top:22px;border-top:1px solid #e1e1e1}
.mq-ad--wide{max-width:1000px;margin:clamp(28px,3vw,44px) auto 0;padding:0 var(--mq-gap);min-height:100px}
.mq-pn{display:grid;grid-template-columns:1fr 1fr;gap:var(--mq-gap);max-width:1240px;margin:clamp(40px,5vw,64px) auto 0;padding:0 var(--mq-gap)}
.mq-rd .mq-pn__item{display:flex;flex-direction:column;gap:10px;padding:22px 24px;border:1px solid #e1e1e1;border-radius:16px;color:var(--mq-ink);transition:border-color .15s,box-shadow .15s}
@media (hover:hover){.mq-rd .mq-pn__item:hover{text-decoration:none;border-color:var(--mq-ink);box-shadow:0 8px 24px rgba(0,0,0,.06)}}
.mq-pn__item--next{text-align:right}
.mq-pn__item .mq-label{color:var(--mq-mid)}
.mq-pn__q{font:600 17px/1.45 var(--mq-quote)}
.mq-single .mq-support{text-align:center;margin:clamp(40px,5vw,64px) 0 0;font-size:14px;color:var(--mq-mid)}
.mq-single .mq-support a{border-bottom:1px solid currentColor}
@media (max-width:860px){
  .mq-qhero__grid{grid-template-columns:minmax(0,1fr)}
  .mq-qhero__art{justify-self:center;max-width:340px}
  .mq-pn{grid-template-columns:1fr}.mq-pn__item--next{text-align:left}
}
body.single.single-post.mq-rd-page #wrapper{padding:0}
.mq-head__desc ins,.mq-head__desc .adDiv,.mq-head__desc div:empty{display:none!important}

/* ===== Ads =====
   Desktop >=1180: 300x600 sticky column in the quote hero (first screen).
   Tablet/phone: responsive unit under the quote's buttons (first screen).
   Everywhere: full-width rows between sections and every 12 cards in lists.
   Space is reserved so the page doesn't jump when an ad loads. */
.mq-ad{display:block;text-align:center}
.mq-ad__label{display:block;font:600 10px sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#9a9a9a;margin-bottom:6px}
.mq-ad--row{max-width:1000px;margin:0 auto;padding:0 var(--mq-gap)}
.mq-ad--row ins{min-height:90px}
.mq-ad--between{margin-top:clamp(40px,5vw,64px)}
.mq-grid__ad .mq-ad--row{padding:6px 0}
.mq-ad--hero{margin-top:26px;padding-top:4px}
.mq-ad--hero ins{min-height:100px}
.mq-ad--rail ins{width:300px;height:600px;background:transparent}
@media (max-width:599px){.mq-ad--row ins{min-height:250px}.mq-ad--hero ins{min-height:250px}}

/* quote hero gets a third column for the rail ad on wide screens */
.mq-qhero__rail{display:none}
@media (min-width:1180px){
  .mq-qhero__grid{grid-template-columns:minmax(0,4fr) minmax(0,6fr) 300px;max-width:1440px;gap:clamp(28px,3.5vw,56px);align-items:start}
  .mq-qhero .mq-head__crumbs{max-width:1440px}
  .mq-qhero__art{justify-self:stretch;max-width:420px}
  .mq-qhero__rail{display:block;position:sticky;top:70px}
  .mq-ad--hero-sm{display:none}
}

/* community writers: on a soft band, with a call to action */
.mq-community{background:var(--mq-soft);padding:clamp(40px,5vw,72px) 0}
.mq-community .mq-sec__head .mq-label{color:var(--mq-mid);margin-bottom:6px}
.mq-btn--pill{border-radius:999px;min-height:44px;padding:0 20px}
.mq-community__writers{padding:clamp(24px,3vw,36px) var(--mq-gap) 0}
.mq-community__all{padding:14px var(--mq-gap) 0;margin:0;font-size:14px}
.mq-rd .mq-community__all a{text-decoration:underline;text-underline-offset:3px}
.mq-explore .mq-chipset{padding:0 var(--mq-gap);margin-bottom:24px}

/* breadcrumbs */
.mq-crumbs2{margin:0 0 clamp(18px,2.4vw,30px)}
.mq-crumbs2 ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font:500 13px/1.4 sans-serif}
.mq-crumbs2 li{margin:0;display:inline-flex;align-items:center;min-width:0}
.mq-crumbs2 li+li::before{content:"";width:6px;height:6px;margin:0 10px 0 8px;border-right:1.5px solid #b0b0b0;border-top:1.5px solid #b0b0b0;transform:rotate(45deg)}
.mq-rd .mq-crumbs2 a{color:var(--mq-ink);text-decoration:none;padding:4px 0}
@media (hover:hover){.mq-rd .mq-crumbs2 a:hover{text-decoration:underline;text-underline-offset:3px}}
.mq-crumbs2 [aria-current] span{color:#8a8a8a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
.mq-qhero .mq-crumbs2{max-width:1440px;margin-left:auto;margin-right:auto;padding-top:clamp(6px,1vw,14px)}
.mq-head{padding-top:clamp(22px,3vw,40px)}

/* header asides on landing pages */
.mq-aside-card{max-width:360px;justify-self:end;width:100%}
.mq-aside-card .mq-label,.mq-ranked .mq-label{color:var(--mq-mid);margin-bottom:12px}
.mq-rd .mq-aside-card ul{list-style:none;margin:0;padding:0}
.mq-aside-card .mq-card{box-shadow:0 18px 44px rgba(0,0,0,.16)}
.mq-aside-card__stats{margin:16px 0 0;font-size:14px;color:var(--mq-mid)}
.mq-aside-card__stats strong{color:var(--mq-ink);font-family:var(--mq-quote)}
.mq-cta{display:flex;flex-direction:column;gap:8px;margin-top:18px;padding:18px;background:#fff;border-radius:16px;border:1px solid #e3e3e3}
.mq-cta strong{font:700 17px var(--mq-quote)}
.mq-cta span{font-size:14px;color:#555;line-height:1.5}
.mq-cta .mq-btn{align-self:flex-start;margin-top:6px}
.mq-ranked{max-width:420px;justify-self:end;width:100%}
.mq-rd .mq-ranked ol{list-style:none;margin:0;padding:0;border-top:1px solid #dcdcdc}
.mq-ranked li{margin:0;border-bottom:1px solid #dcdcdc}
.mq-rd .mq-ranked a{display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;gap:10px;padding:11px 2px;color:var(--mq-ink);text-decoration:none}
.mq-ranked__n{font:700 15px var(--mq-quote);color:#a8a8a8}
.mq-ranked strong{font:700 17px var(--mq-quote)}
.mq-ranked em{font-style:normal;font-size:12px;color:var(--mq-mid)}
@media (hover:hover){.mq-rd .mq-ranked a:hover strong{text-decoration:underline;text-underline-offset:3px}}
.mq-ranked li:nth-child(-n+3) .mq-ranked__n{color:var(--mq-ink)}
@media (max-width:860px){.mq-aside-card,.mq-ranked{justify-self:start;max-width:none}.mq-aside-card .mq-card{max-width:260px}}

/* home portrait rows: two rows on laptops; capped on small screens */
.mq-home .mq-people{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
@media (max-width:599px){.mq-home .mq-people>:nth-child(n+7){display:none}}
@media (min-width:600px) and (max-width:979px){.mq-home .mq-people>:nth-child(n+13){display:none}}
.mq-aside-card{max-width:270px}
.mq-head--aside .mq-head__text{align-self:center}
/* aside column sizes to its content so the text column gets the room */
.mq-head--aside{grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,80px)}
.mq-head--aside .mq-head__text{max-width:760px}
.mq-faces{width:min(560px,42vw)}
.mq-ranked{width:min(400px,34vw)}
.mq-aside-card{width:250px;max-width:250px}
.mq-aside-card:has(.mq-cta){display:grid;grid-template-columns:250px 260px;column-gap:20px;width:auto;max-width:none;align-items:end}
.mq-aside-card:has(.mq-cta)>.mq-label{grid-column:1/-1}
.mq-aside-card:has(.mq-cta)>ul{grid-column:1}
.mq-aside-card:has(.mq-cta) .mq-cta{grid-column:2;grid-row:2;margin:0 0 44px}
@media (max-width:1100px){.mq-aside-card:has(.mq-cta){grid-template-columns:220px;}.mq-aside-card:has(.mq-cta) .mq-cta{grid-column:1;grid-row:auto;margin:16px 0 0}}
@media (max-width:860px){.mq-head--aside{grid-template-columns:1fr}.mq-faces,.mq-ranked{width:100%}}

/* Listing pages show 10 quotes (WordPress setting, kept so indexed /page/N/ URLs don't change).
   Columns stay responsive (2-8, as on the home page); up to 6 community quotes (.mq-fill)
   complete the last row. Needed per column count: 2:0 3:2 4:2 5:0 6:2 7:4 8:6.
   Fillers are the last items, so hide the surplus from the end with nth-last-child. */
.mq-fill .mq-card::before{content:"Community";position:absolute;top:10px;left:10px;z-index:1;background:#fff;color:#1a1a1a;font:700 9px/1 sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:5px 7px;border-radius:999px}
.mq-grid--list>.mq-fill{display:none}
@media (min-width:680px){.mq-grid--list>.mq-fill{display:block}.mq-grid--list>.mq-fill:nth-last-child(-n+4){display:none}}
@media (min-width:1180px){.mq-grid--list>.mq-fill{display:none}}
@media (min-width:1500px){.mq-grid--list>.mq-fill{display:block}.mq-grid--list>.mq-fill:nth-last-child(-n+4){display:none}}
@media (min-width:1820px){.mq-grid--list>.mq-fill,.mq-grid--list>.mq-fill:nth-last-child(-n+4){display:block}.mq-grid--list>.mq-fill:nth-last-child(-n+2){display:none}}
@media (min-width:2140px){.mq-grid--list>.mq-fill,.mq-grid--list>.mq-fill:nth-last-child(-n+4),.mq-grid--list>.mq-fill:nth-last-child(-n+2){display:block}}

/* Card text scales with the card (like the image), but never below a readable size:
   a narrow card grows taller instead of its text shrinking to nothing. */
.mq-card__t{font-size:max(13px,7.5cqw);line-height:max(19px,10cqw)}
.mq-card__a{font-size:max(10px,5cqw);line-height:max(16px,10cqw);margin-top:max(12px,10.9cqw)}
.mq-card__s{font-size:max(7px,2.75cqw)}
.mq-ec__lead .mq-card__t{font-size:max(16px,8cqw)}
@media (max-width:599px){.mq-cap__share{display:none}.mq-cap{padding-top:6px}}

/* Wishes / Proverbs: feature cards for the biggest collections */
.mq-colls .mq-sec__head{padding-top:0}
.mq-rd .mq-colls__grid{list-style:none;margin:0;padding:0 var(--mq-gap);display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--mq-gap)}
.mq-colls__grid li{margin:0}
.mq-rd .mq-coll{display:flex;flex-direction:column;gap:12px;height:100%;min-height:230px;padding:24px;background:var(--mq-card);color:var(--mq-card-ink);border-radius:4px;text-decoration:none;transition:transform .2s,box-shadow .2s}
@media (hover:hover){.mq-rd .mq-coll:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.18)}}
.mq-coll__count{font:700 11px sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9a9a9a}
.mq-coll__name{font:700 clamp(24px,2.2vw,32px)/1.1 var(--mq-quote);letter-spacing:-.01em}
.mq-coll__line{flex:1;font:500 15px/1.5 var(--mq-quote);color:#cfcfcf}
.mq-coll__more{font:700 11px sans-serif;letter-spacing:.12em;text-transform:uppercase}

/* quote layout on wish/proverb pages: text card when the image is lost */
.mq-art .mq-card--hero{box-shadow:none}
body.single.mq-rd-page #wrapper{padding:0}
.mq-rd .mq-colls__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1000px){.mq-rd .mq-colls__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* author without a portrait: initial on a dark tile, same shape */
.mq-initial{display:grid;place-items:center;width:100%;aspect-ratio:4/5;background:var(--mq-card);color:var(--mq-card-ink);font:700 clamp(40px,6vw,96px)/1 var(--mq-quote);margin-bottom:10px}
.mq-fa__photo .mq-initial{margin:0;font-size:clamp(80px,12vw,180px)}

/* ---- Touch and press feedback ----
   Hover styles above only apply on devices that really hover (@media (hover:hover)), so
   nothing stays highlighted after a tap. Taps get their own :active styles instead of the
   browser's grey flash. */
.mq-rd a,.mq-rd button,.mq-rd input{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mq-btn,.mq-cap__share a,.mq-cap__share button,.mq-front__search button{transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .1s ease}
.mq-rd .mq-card{transition:transform .18s cubic-bezier(.2,.7,.3,1)}

.mq-rd .mq-btn:active{transform:translateY(1px)}
.mq-rd .mq-btn--ink:active{background:#3a3a3a;border-color:#3a3a3a}
.mq-rd .mq-btn.mq-copy.mq-btn--lg:active,.mq-rd .mq-share-native:active{background:#ececec;border-color:#bdbdbd}
.mq-rd a.mq-card:active{transform:scale(.975);transition-duration:.06s}
.mq-rd .mq-chips a:active,.mq-rd .mq-pager a:active,.mq-rd .mq-az a:active,.mq-rd .mq-tiles a:active{background:var(--mq-ink);border-color:var(--mq-ink);color:#fff}
.mq-rd .mq-share-row__btn:active{background:#e6e6e6}
.mq-cap__share a,.mq-cap__share button{border-radius:50%}
.mq-cap__share a:active,.mq-cap__share button:active{background:#e6e6e6}
.mq-rd .mq-pn__item:active{border-color:var(--mq-ink)}
.mq-rd .mq-coll:active{transform:scale(.98)}
.mq-front__search button:active{background:#d6d6d6}
.mq-rd .mq-cap__who:active,.mq-rd .mq-crumbs2 a:active,.mq-rd .mq-byline:active,.mq-rd .mq-sec__head p a:active,
.mq-rd .mq-people a:active,.mq-rd .mq-faces a:active,.mq-rd .mq-ranked a:active,.mq-rd .mq-front__hot a:active,.mq-rd .mq-kpis a:active{opacity:.55}

/* keyboard focus: a plain ring */
.mq-rd :focus:not(:focus-visible){outline:none}
.mq-rd :focus-visible{outline:2px solid var(--mq-ink);outline-offset:2px}
.mq-rd .mq-card:focus-visible{outline-offset:3px}

/* native share: only where the phone has a share sheet */
.mq-share-native{display:none}
.mq-rd .mq-btn.mq-share-native{border-color:#cfcfcf;background:#fff;color:var(--mq-ink)}
.mq-can-share .mq-share-native{display:inline-flex}
@media (max-width:599px){
  .mq-can-share .mq-actions .mq-copy,.mq-can-share .mq-actions .mq-share-native{flex:1 1 0}
  .mq-actions .downloadBtn{flex:1 0 100%;display:flex}
  .mq-actions .downloadBtn .mq-btn{flex:1}
}

/* copy: the big button swaps its label in place (both labels share one grid cell, so the width never changes) */
.mq-swap{display:grid}
.mq-swap>span{grid-area:1/1;transition:opacity .15s ease}
.mq-swap>span+span,.mq-copy.is-done .mq-swap>span:first-child{opacity:0}
.mq-copy.is-done .mq-swap>span+span{opacity:1}
/* the card icon turns into a check */
.mq-cap__share svg{stroke-linecap:round;stroke-linejoin:round}
.mq-copy__b{opacity:0}
.mq-copy.is-done .mq-copy__a{opacity:0}
.mq-copy.is-done .mq-copy__b{opacity:1;stroke-width:2.2}

/* short note at the bottom of the screen, where the thumb is */
.mq-note{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:9999;
  transform:translate(-50%,10px);opacity:0;pointer-events:none;max-width:calc(100vw - 32px);
  padding:13px 20px;border-radius:999px;background:#000;color:#fff;font:600 14px/1.3 sans-serif;
  transition:opacity .16s ease,transform .2s cubic-bezier(.2,.7,.3,1)}
.mq-note.is-on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .mq-rd *,.mq-note{transition:none!important}
  .mq-rd a.mq-card:active,.mq-rd .mq-btn:active,.mq-rd .mq-coll:active{transform:none}
}
.mq-can-share .mq-share-row .mq-label{display:none}

/* ---- Fixed header stack ----
   --mq-stack = height of what is fixed at the top: the header, plus the search bar under it
   on phones (not on the home page, which has its own search). Content starts below it and
   the A-Z bar sticks right under it. The footer script measures the real value.
   On phones the header slides away when scrolling down; the A-Z bar then moves to the top. */
:root{--mq-stack:55px}
/* never shorter than the space left for it: a header that renders at 54.9px left a hairline gap */
@media (min-width:601px){header{min-height:55px;box-sizing:border-box}}
@media (max-width:600px){
  :root{--mq-stack:154px}
  body.home{--mq-stack:95px}
  body:has(header.nav-up) .mq-az{top:0}
  /* one swipeable row of letters instead of three rows */
  .mq-rd .mq-az{padding-left:0;padding-right:0}
  .mq-rd .mq-az ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:0 var(--mq-gap);-webkit-overflow-scrolling:touch}
  .mq-rd .mq-az ul::-webkit-scrollbar{display:none}
  .mq-az li{flex:none}
  .mq-az a,.mq-az span{width:40px;height:40px}
}

/* ---- Logged in: the WordPress admin bar ----
   WordPress pushes the page down (html margin-top) to make room for its bar, but the fixed
   header sat at top:0 over it, leaving an empty gap under the header. Put the header (and
   everything that sticks under it) below the bar instead. Visitors are not affected. */
body.admin-bar{--mq-bar:var(--wp-admin--admin-bar--height,32px)}
body.admin-bar header{top:var(--mq-bar)}
body.admin-bar .innerForm{top:calc(8px + var(--mq-bar))}
body.admin-bar .mq-az{top:calc(var(--mq-stack) + var(--mq-bar))}
body.admin-bar .mq-dir__group{scroll-margin-top:calc(var(--mq-stack) + var(--mq-az,64px) + var(--mq-bar) + 8px)}
@media (min-width:1180px){body.admin-bar .mq-qhero__rail{top:calc(70px + var(--mq-bar))}}
@media (max-width:600px){
  #wpadminbar{position:fixed}
  body.admin-bar header.nav-up{top:-100px}
  body.admin-bar .innerForm{top:calc(93px + var(--mq-bar))}
  body.admin-bar #searchform.nav-up{top:-93px}
  body.admin-bar:has(header.nav-up) .mq-az{top:var(--mq-bar)}
}

/* ---- Effect: a quote card grows into the quote page ----
   Cross-document view transitions (Chrome/Edge 126+, Safari 18.2+). Other browsers just
   navigate as before. The tapped card and the quote image on the next page share one name,
   so the browser morphs one into the other; the rest of the page crossfades quickly and
   the header stays put. The footer script names the tapped card (and, going back, the card
   you came from). */
@view-transition{navigation:auto}
header{view-transition-name:mq-header}
html:not(.mq-leaving) .mq-qhero__art .mq-art{view-transition-name:mq-quote}
::view-transition-group(mq-quote){animation-duration:.38s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(mq-quote),::view-transition-new(mq-quote){animation-duration:.38s;height:100%;object-fit:cover}
::view-transition-group(root){animation-duration:.22s}
::view-transition-new(root){animation-delay:.06s}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---- Effect: swipe between quotes (phones), arrow keys (desktop) ----
   The quote image follows the thumb (footer script). Past the threshold it goes to the
   previous/next quote by the same author: the old image leaves on the side it was pushed,
   the new one comes in from the other side. --mq-dx/--mq-rot hold where the finger left it. */
@keyframes mq-out-l{from{transform:translateX(var(--mq-dx,0)) rotate(var(--mq-rot,0deg))}to{transform:translateX(-105vw) rotate(-5deg);opacity:.4}}
@keyframes mq-out-r{from{transform:translateX(var(--mq-dx,0)) rotate(var(--mq-rot,0deg))}to{transform:translateX(105vw) rotate(5deg);opacity:.4}}
@keyframes mq-in-r{from{transform:translateX(40vw);opacity:0}}
@keyframes mq-in-l{from{transform:translateX(-40vw);opacity:0}}
html.mq-swipe-next::view-transition-group(mq-quote),html.mq-swipe-prev::view-transition-group(mq-quote){animation:none}
html.mq-swipe-next::view-transition-old(mq-quote){animation:mq-out-l .34s cubic-bezier(.4,0,.2,1) both}
html.mq-swipe-next::view-transition-new(mq-quote){animation:mq-in-r .4s cubic-bezier(.2,.7,.2,1) .08s both}
html.mq-swipe-prev::view-transition-old(mq-quote){animation:mq-out-r .34s cubic-bezier(.4,0,.2,1) both}
html.mq-swipe-prev::view-transition-new(mq-quote){animation:mq-in-l .4s cubic-bezier(.2,.7,.2,1) .08s both}
.mq-qhero__art .mq-art{will-change:transform}
@media (pointer:coarse){.mq-qhero__art .mq-art{touch-action:pan-y;-webkit-user-select:none;user-select:none}}

/* ---- Effect: cards rise in as they first come into view ----
   The footer script marks cards that start below the screen with .mq-pre and removes it
   (with a small stagger) the first time each one scrolls into view. Cards visible on load
   are never hidden; without the script nothing is hidden. Transform/opacity: no layout shift. */
.mq-pre{opacity:0;transform:translateY(40px)}
.mq-rise{transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.mq-pre{opacity:1;transform:none}.mq-rise{transition:none}}

/* ---- Effect: small details ---- */
/* copy: the check draws itself */
.mq-copy__b{stroke-dasharray:22;stroke-dashoffset:22}
.mq-copy.is-done .mq-copy__b{stroke-dashoffset:0;transition:stroke-dashoffset .26s cubic-bezier(.4,0,.2,1) .05s}
/* download: the arrow drops into the tray */
@keyframes mq-drop{0%{transform:none}45%{transform:translateY(4px)}100%{transform:none}}
.mq-i-arrow{transform-box:fill-box}
.downloadBtn .mq-btn.is-dropping .mq-i-arrow{animation:mq-drop .42s cubic-bezier(.4,0,.2,1)}
/* desktop: quiet links draw their underline from the left */
@media (hover:hover){
  .mq-rd .mq-sec__head p a:not(.mq-btn),.mq-rd .mq-cap__who,.mq-rd .mq-crumbs2 a,.mq-rd .mq-community__all a,.mq-rd .mq-byline strong{
    text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .28s cubic-bezier(.4,0,.2,1)}
  .mq-rd .mq-sec__head p a:not(.mq-btn):hover,.mq-rd a.mq-cap__who:hover,.mq-rd .mq-crumbs2 a:hover,.mq-rd .mq-community__all a:hover,.mq-rd a.mq-byline:hover strong{
    text-decoration:none;background-size:100% 1px}
}
/* A-Z: the letter being read */
.mq-rd .mq-az a{transition:background-color .2s ease,color .2s ease}
.mq-rd .mq-az a.is-current{background:var(--mq-ink);color:#fff}
@media (prefers-reduced-motion:reduce){.mq-copy.is-done .mq-copy__b{transition:none}.downloadBtn .mq-btn.is-dropping .mq-i-arrow{animation:none}}

/* Wishes with a photo image (inc/wish-images.php) */
.mq-rd .mq-card--img{padding:0;overflow:hidden}
.mq-rd .mq-card--img img{display:block;width:100%;height:100%;object-fit:cover}