/*
 * Hydari theme — quotes (P33): a quote's page (the quote is the page's title, set as a quotation; its speaker, source and date; its picture
 * cards with download and sharing) and the list of every quote. Palette tokens only, logical directions, the script's own line height.
 */

/* ---- a quote's page ---------------------------------------------------------------------------------------------------------- */
.hy-quote-page .hy-item__head { text-align: center; }
.hy-quote-page .hy-item__title { position: relative; max-inline-size: 38ch; margin-inline: auto; padding-block-start: 2.6rem; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem); line-height: 1.5; }
.hy-quote-page .hy-item__title::before { content: "\201C"; position: absolute; inset-block-start: -.6rem; inset-inline-start: 50%; transform: translateX(-50%); font-size: 4.5rem; line-height: 1; color: var(--color-accent, var(--color-primary)); font-family: Georgia, serif; }
.hy-quote-page [dir="rtl"] .hy-item__title::before, .hy-quote-page .hy-item__title:dir(rtl)::before { transform: translateX(50%); }
.hy-quote-page .hy-item__title:lang(ur) { line-height: 2.2; }
.hy-quote-by { margin-block: 0 1.5rem; text-align: center; }
.hy-quote-by__speaker { display: inline-flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.15rem; font-weight: 700; }
.hy-quote-by__speaker cite { font-style: normal; }
.hy-quote-by__dash { inline-size: 2rem; block-size: 2px; background: var(--color-accent, var(--color-primary)); }
.hy-quote-by__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1rem; margin: .5rem 0 0; color: var(--text-muted); font-size: .9rem; }
.hy-quote-by__meta a, .hy-quote-by__meta > span { display: inline-flex; align-items: center; gap: .35rem; }
.hy-quote-by__meta svg { inline-size: 1em; block-size: 1em; }

.hy-qcards { margin-block: 2rem 0; }
.hy-qcards .hy-section-title { display: flex; align-items: center; gap: .5rem; }
.hy-qcards__list { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; align-items: start; }
.hy-qcard { margin: 0; display: grid; gap: .5rem; }
.hy-qcard__pic { position: relative; overflow: hidden; border-radius: 10px; background: var(--bg-quote, var(--bg-card)); border: 1px solid var(--border-light); }
.hy-qcard__pic img, .hy-qcard__pic canvas { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.hy-qcard__wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-muted); }
.hy-qcard__wait svg { inline-size: 2rem; block-size: 2rem; opacity: .5; }
.hy-qcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; }
.hy-qcard__name { font-weight: 600; font-size: .9rem; }
.hy-qcard__name small { color: var(--text-muted); font-weight: 400; }
.hy-qcard__tools { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.hy-qcards__nets { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1rem 0 0; color: var(--text-muted); }

/* ---- every quote ----------------------------------------------------------------------------------------------------------------- */
/* (2026-10-29, round 8) Every quote as a portfolio: each quote is set on a designed card of one of the three card sizes (story 9:16,
   square, landscape 1.9:1) and one of six tones, in a masonry of three columns. The text is sized by the card's own width (container
   units) and its length, so a short saying is large and a long one still fits; the opening mark sits in a medallion inside the frame,
   never against the edge. The speakers are a strip of links (face with the initial, name, count). */
.hy-quotes .hy-list-head--quotes .hy-list-head__mark { background: linear-gradient(145deg, color-mix(in srgb, var(--color-danger, #a8443c) 58%, #2a0a12), color-mix(in srgb, var(--color-danger, #a8443c) 40%, #120406)); }
.hy-quotes { --q-gold: var(--color-accent, #a98b4f); --q-maroon: color-mix(in srgb, var(--color-danger, #a8443c) 58%, #2a0a12); --q-ground: color-mix(in srgb, var(--color-dark, #2b4732) 72%, #060a08); }

/* The speakers. */
.hy-qspeakers { display: flex; align-items: center; gap: .75rem; margin-block: 0 1.4rem; padding: .45rem; border-radius: 999px; background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--hy-line) 70%, transparent); box-shadow: 0 1px 2px color-mix(in srgb, var(--hy-text) 5%, transparent); }
.hy-qspeakers__label { display: inline-flex; flex: none; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 999px; background: var(--q-maroon); color: var(--q-gold); font-size: .8rem; font-weight: 800; letter-spacing: .02em; }
.hy-qspeakers__label .hy-icon { inline-size: 15px; block-size: 15px; }
.hy-qspeakers__strip { position: relative; flex: 1; min-inline-size: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 1.2rem, #000 calc(100% - 2.4rem), transparent); mask-image: linear-gradient(to right, transparent, #000 1.2rem, #000 calc(100% - 2.4rem), transparent); }
.hy-qspeakers__strip::-webkit-scrollbar { display: none; }
.hy-qspeakers__list { display: flex; gap: .35rem; margin: 0; padding: 0 1.2rem 0 .4rem; list-style: none; inline-size: max-content; }
.hy-qspeakers__list li { scroll-snap-align: start; }
.hy-qspeaker { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .8rem .25rem .25rem; border-radius: 999px; color: var(--hy-text); font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: background .25s var(--hy-ease), color .25s var(--hy-ease); }
[dir="rtl"] .hy-qspeaker { padding: .25rem .25rem .25rem .8rem; }
.hy-qspeaker:hover { background: color-mix(in srgb, var(--q-gold) 14%, transparent); }
.hy-qspeaker__face { display: grid; place-items: center; flex: none; inline-size: 30px; block-size: 30px; border-radius: 50%; background: color-mix(in srgb, var(--q-gold) 18%, var(--bg-card));
    color: var(--q-maroon); font-size: .8rem; font-weight: 800; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q-gold) 40%, transparent); }
.hy-qspeaker__face .hy-icon { inline-size: 14px; block-size: 14px; }
.hy-qspeaker__count { display: grid; place-items: center; min-inline-size: 1.4rem; block-size: 1.4rem; padding-inline: .35rem; border-radius: 999px; background: color-mix(in srgb, var(--hy-text) 7%, transparent); color: var(--hy-muted); font-size: .7rem; font-weight: 700; }
.hy-qspeaker.is-on { background: var(--q-ground); color: rgb(255 255 255); }
.hy-qspeaker.is-on .hy-qspeaker__face { background: var(--q-gold); color: var(--q-ground); box-shadow: none; }
.hy-qspeaker.is-on .hy-qspeaker__count { background: rgb(255 255 255 / .14); color: rgb(255 255 255 / .85); }
.hy-qspeaker:focus-visible { outline: 2px solid var(--q-gold); outline-offset: 2px; }

/* The wall. */
.hy-qwall { columns: 3 17rem; column-gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.hy-qwall__item { break-inside: avoid; margin-block-end: 1.25rem; }
.hy-qposter { --qp-bg: var(--q-ground); --qp-fg: rgb(255 255 255); --qp-accent: var(--q-gold); --qp-line: color-mix(in srgb, var(--q-gold) 45%, transparent); --qp-soft: rgb(255 255 255 / .72);
    position: relative; isolation: isolate; container-type: inline-size; overflow: hidden; margin: 0; border-radius: 22px; background: var(--qp-bg); color: var(--qp-fg);
    box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 18px 34px -26px rgb(0 0 0 / .35); transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s var(--hy-ease); }
.hy-qposter--story { aspect-ratio: 9 / 16; }
.hy-qposter--square { aspect-ratio: 1; }
.hy-qposter--wide { aspect-ratio: 1.9; }
.hy-qposter:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 30px 46px -28px rgb(0 0 0 / .42); }
/* Tones: the green stage, warm paper, maroon leather, sage, deep ink, linen with a gold frame. */
.hy-qposter--stage { background: radial-gradient(80% 60% at 0% 100%, color-mix(in srgb, var(--q-maroon) 70%, transparent), transparent 70%), radial-gradient(70% 55% at 100% 0%, color-mix(in srgb, var(--q-gold) 26%, transparent), transparent 65%), linear-gradient(160deg, var(--q-ground), color-mix(in srgb, var(--q-ground) 70%, #000)); }
.hy-qposter--paper { --qp-bg: color-mix(in srgb, var(--q-gold) 10%, #fbf7ee); --qp-fg: #2a241a; --qp-accent: var(--q-maroon); --qp-line: color-mix(in srgb, var(--q-gold) 55%, transparent); --qp-soft: color-mix(in srgb, #2a241a 65%, transparent);
    background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--q-gold) 16%, transparent), transparent 70%), var(--qp-bg); }
.hy-qposter--maroon { background: radial-gradient(70% 60% at 100% 100%, color-mix(in srgb, var(--q-gold) 22%, transparent), transparent 70%), linear-gradient(150deg, color-mix(in srgb, var(--q-maroon) 92%, #fff 3%), color-mix(in srgb, var(--q-maroon) 75%, #000)); }
.hy-qposter--sage { --qp-bg: color-mix(in srgb, var(--color-primary, #46704f) 22%, #f4f1e6); --qp-fg: color-mix(in srgb, var(--color-dark, #223829) 92%, #000); --qp-accent: color-mix(in srgb, var(--color-primary, #46704f) 85%, #000); --qp-line: color-mix(in srgb, var(--color-primary, #46704f) 35%, transparent); --qp-soft: color-mix(in srgb, var(--color-dark, #223829) 70%, transparent);
    background: radial-gradient(80% 60% at 0% 0%, rgb(255 255 255 / .55), transparent 70%), var(--qp-bg); }
.hy-qposter--ink { background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--q-gold) 20%, transparent), transparent 70%), linear-gradient(180deg, #17191a, #0d0f0e); }
.hy-qposter--linen { --qp-bg: #f7f3ea; --qp-fg: var(--q-ground); --qp-accent: var(--q-gold); --qp-line: color-mix(in srgb, var(--q-gold) 70%, transparent); --qp-soft: color-mix(in srgb, var(--q-ground) 65%, transparent);
    background: repeating-linear-gradient(45deg, rgb(0 0 0 / .018) 0 2px, transparent 2px 6px), var(--qp-bg); }
/* A faint lozenge pattern on the dark tones, a thin inner frame on every card. */
.hy-qposter:is(.hy-qposter--stage, .hy-qposter--maroon, .hy-qposter--ink)::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .08; pointer-events: none; background-size: 36px 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23d9bf86' stroke-width='.8'%3E%3Cpath d='M20 2l18 18-18 18L2 20z'/%3E%3Cpath d='M20 12l8 8-8 8-8-8z'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-image: radial-gradient(circle at 50% 45%, transparent 30%, #000 85%); mask-image: radial-gradient(circle at 50% 45%, transparent 30%, #000 85%); }
.hy-qposter__frame { position: absolute; inset: clamp(.55rem, 3.4cqi, .95rem); display: flex; flex-direction: column; gap: clamp(.5rem, 4cqi, 1.1rem); padding: clamp(.9rem, 7cqi, 2rem) clamp(.9rem, 7cqi, 1.9rem);
    border: 1px solid var(--qp-line); border-radius: 15px; }
.hy-qposter--linen .hy-qposter__frame { border-width: 2px; box-shadow: inset 0 0 0 4px var(--qp-bg), inset 0 0 0 5px color-mix(in srgb, var(--q-gold) 40%, transparent); }
.hy-qposter__mark { display: grid; place-items: center; flex: none; inline-size: clamp(2.1rem, 13cqi, 3.2rem); block-size: clamp(2.1rem, 13cqi, 3.2rem); border-radius: 50%; color: var(--qp-accent);
    background: color-mix(in srgb, var(--qp-accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qp-accent) 40%, transparent); }
.hy-qposter__mark .hy-icon { inline-size: 45%; block-size: 45%; }
.hy-qposter--story .hy-qposter__mark, .hy-qposter--square .hy-qposter__mark { align-self: center; }
.hy-qposter__text { flex: 1; display: flex; align-items: center; min-block-size: 0; margin: 0; }
.hy-qposter--story .hy-qposter__text, .hy-qposter--square .hy-qposter__text { justify-content: center; text-align: center; }
.hy-qposter__text p { margin: 0; font-family: var(--font-text, var(--font-heading, inherit)); font-weight: 700; line-height: 1.38; text-wrap: balance; font-size: var(--qp-size); }
.hy-qposter__text:lang(ur) p, .hy-qposter:lang(ur) .hy-qposter__text p { line-height: 2.15; }
.hy-qposter__text a { color: inherit; text-decoration: none; background: none; }
.hy-qposter__text a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 22px; }
.hy-qposter__text a:focus-visible { outline: none; }
.hy-qposter:has(a:focus-visible) { outline: 3px solid var(--q-gold); outline-offset: 3px; }
/* Size by the card's width and the saying's length. */
.hy-qposter--story.hy-qposter--tl { --qp-size: clamp(1.4rem, 12cqi, 2.6rem); }
.hy-qposter--story.hy-qposter--tm { --qp-size: clamp(1.2rem, 9.5cqi, 2.1rem); }
.hy-qposter--story.hy-qposter--ts { --qp-size: clamp(1.05rem, 7.6cqi, 1.7rem); }
.hy-qposter--story.hy-qposter--txs { --qp-size: clamp(.95rem, 6.2cqi, 1.4rem); }
.hy-qposter--square.hy-qposter--tl { --qp-size: clamp(1.25rem, 9cqi, 2.1rem); }
.hy-qposter--square.hy-qposter--tm { --qp-size: clamp(1.05rem, 6.8cqi, 1.6rem); }
.hy-qposter--square.hy-qposter--ts { --qp-size: clamp(.92rem, 5.3cqi, 1.25rem); }
.hy-qposter--square.hy-qposter--txs { --qp-size: clamp(.85rem, 4.4cqi, 1.05rem); }
.hy-qposter--wide.hy-qposter--tl { --qp-size: clamp(1.05rem, 6.4cqi, 1.6rem); }
.hy-qposter--wide.hy-qposter--tm { --qp-size: clamp(.95rem, 5cqi, 1.3rem); }
.hy-qposter--wide.hy-qposter--ts { --qp-size: clamp(.85rem, 4cqi, 1.05rem); }
.hy-qposter--wide.hy-qposter--txs { --qp-size: clamp(.8rem, 3.4cqi, .95rem); }
/* The landscape card: the mark beside the words. */
.hy-qposter--wide .hy-qposter__frame { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: clamp(.7rem, 4cqi, 1.3rem); row-gap: .5rem; padding-block: clamp(.7rem, 4.5cqi, 1.3rem); }
.hy-qposter--wide .hy-qposter__mark { inline-size: clamp(1.9rem, 8cqi, 2.8rem); block-size: clamp(1.9rem, 8cqi, 2.8rem); align-self: start; }
.hy-qposter--wide .hy-qposter__text { grid-column: 2; }
.hy-qposter--wide .hy-qposter__foot { grid-column: 1 / -1; }
/* The foot: the speaker as a face and name, the site's name small at the other end. */
.hy-qposter__foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-block-start: clamp(.45rem, 3cqi, .8rem); border-block-start: 1px solid var(--qp-line); pointer-events: none; }
.hy-qposter--story .hy-qposter__foot, .hy-qposter--square .hy-qposter__foot { flex-direction: column; justify-content: center; text-align: center; gap: .35rem; }
.hy-qposter__by { display: inline-flex; align-items: center; gap: .5rem; min-inline-size: 0; font-size: clamp(.78rem, 4.2cqi, .95rem); font-weight: 700; }
.hy-qposter__by cite { overflow: hidden; color: var(--qp-fg); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.hy-qposter__face { display: grid; place-items: center; flex: none; inline-size: clamp(1.6rem, 9cqi, 2rem); block-size: clamp(1.6rem, 9cqi, 2rem); border-radius: 50%; background: var(--qp-accent); color: var(--qp-bg); font-size: .78em; font-weight: 800; }
.hy-qposter:is(.hy-qposter--stage, .hy-qposter--ink) .hy-qposter__face { background: var(--q-maroon); color: var(--q-gold); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--q-gold) 55%, transparent); }
.hy-qposter--maroon .hy-qposter__face { background: var(--q-gold); color: var(--q-maroon); }
.hy-qposter__site { color: var(--qp-soft); font-size: clamp(.6rem, 3cqi, .7rem); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.hy-qposter:is(.hy-qposter--story, .hy-qposter--square) .hy-qposter__site::before, .hy-qposter:is(.hy-qposter--story, .hy-qposter--square) .hy-qposter__site::after { content: "\2014"; margin-inline: .45em; opacity: .6; }
@media (max-width: 575.98px) { .hy-qwall { columns: 1; } .hy-qposter--story { aspect-ratio: 4 / 5; } .hy-qspeakers { border-radius: 18px; flex-direction: column; align-items: stretch; } .hy-qspeakers__label { align-self: flex-start; } }
@media (prefers-reduced-motion: reduce) { .hy-qposter, .hy-qposter:hover { transition: none; transform: none; } }

.hy-quotes .hb-quote-today { position: relative; isolation: isolate; overflow: hidden; margin-block-end: 1.25rem; padding: clamp(1.2rem, 3vw, 2rem); border: 0; border-radius: 22px; color: rgb(255 255 255);
    background: radial-gradient(60% 120% at 0% 100%, color-mix(in srgb, color-mix(in srgb, var(--color-danger, #a8443c) 58%, #2a0a12) 75%, transparent), transparent 65%),
        radial-gradient(50% 100% at 100% 0%, color-mix(in srgb, var(--color-accent, #a98b4f) 30%, transparent), transparent 62%),
        linear-gradient(160deg, color-mix(in srgb, var(--color-dark, #2b4732) 75%, #000), color-mix(in srgb, var(--color-dark, #2b4732) 55%, #000)); }
.hy-quotes .hb-quote-today::after { content: "\201D"; position: absolute; z-index: -1; inset-block-end: -3rem; inset-inline-end: 1rem; color: color-mix(in srgb, var(--color-accent, #a98b4f) 30%, transparent); font-family: Georgia, serif; font-size: 11rem; line-height: 1; }
.hy-quotes .hb-quote-today :is(.hb-quote-today__title, .hb-quote-today__by) { color: var(--color-accent, #a98b4f); }
.hy-quotes .hb-quote-today__text a { color: rgb(255 255 255); font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); font-weight: 800; }

/* ---- a quote's page, grand (2026-10-29) --------------------------------------------------------------------------------------
   The saying stands on a deep green stage: a large gold opening mark that grows in, its closing twin at the other corner, a faint
   lozenge pattern, a maroon glow; the words rise in; a gold-and-maroon rule under them. The speaker is a medallion with the source and
   date as chips; the picture cards hang as a small gallery that tilts towards the pointer. */
.hy-quote-page { --hy-q-gold: var(--color-accent, #a98b4f); --hy-q-maroon: color-mix(in srgb, var(--color-danger, #a8443c) 58%, #2a0a12); --hy-q-ground: color-mix(in srgb, var(--color-dark, #2b4732) 70%, #060a08); }
.hy-quote-page .hy-post__head { isolation: isolate; padding: clamp(2.6rem, 6vw, 4.5rem) clamp(1.2rem, 6vw, 5rem) clamp(2.2rem, 5vw, 3.6rem); border: 0; color: rgb(255 255 255);
    background: radial-gradient(60% 90% at 0% 100%, color-mix(in srgb, var(--hy-q-maroon) 75%, transparent), transparent 65%),
        radial-gradient(55% 80% at 100% 0%, color-mix(in srgb, var(--hy-q-gold) 30%, transparent), transparent 62%),
        linear-gradient(160deg, var(--hy-q-ground), color-mix(in srgb, var(--hy-q-ground) 72%, #000)); }
.hy-quote-page .hy-post__head::after { inset: 0; inline-size: auto; opacity: .1; -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 30%, #000 80%); mask-image: radial-gradient(circle at 50% 50%, transparent 30%, #000 80%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23d9bf86' stroke-width='.7'%3E%3Cpath d='M20 2l18 18-18 18L2 20z'/%3E%3Cpath d='M20 12l8 8-8 8-8-8z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 40px 40px; }
.hy-quote-page .hy-post__head::before { content: "\201D"; position: absolute; z-index: -1; inset-block-end: -2.6rem; inset-inline-end: clamp(.5rem, 3vw, 2rem); color: color-mix(in srgb, var(--hy-q-gold) 35%, transparent);
    font-family: Georgia, 'Times New Roman', serif; font-size: clamp(8rem, 14vw, 13rem); line-height: 1; pointer-events: none; }
.hy-quote-page .hy-post .hy-item__title { max-inline-size: 30ch; margin-inline: auto; padding-block-start: clamp(3.2rem, 6vw, 4.4rem); color: rgb(255 255 255); font-size: clamp(1.55rem, 1rem + 2.4vw, 2.75rem); font-weight: 800; line-height: 1.45;
    text-shadow: 0 2px 20px rgb(0 0 0 / .3); animation: hy-q-rise .9s cubic-bezier(.2, .8, .2, 1) .1s both; }
.hy-quote-page .hy-item__title::before { inset-block-start: -.4rem; inline-size: 4.6rem; block-size: 4.6rem; display: grid; place-items: center; padding-block-start: 1.6rem; border-radius: 50%;
    background: color-mix(in srgb, var(--hy-q-gold) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hy-q-gold) 45%, transparent);
    color: var(--hy-q-gold); font-size: 5rem; animation: hy-q-mark .9s cubic-bezier(.34, 1.56, .64, 1) both; }
.hy-quote-page .hy-post__head .hy-item__title::after { inline-size: 80px; block-size: 3px; margin-block-start: 1.3rem; background: linear-gradient(90deg, var(--hy-q-maroon), var(--hy-q-gold), var(--hy-q-maroon)); }
.hy-quote-page .hy-post__head .hy-item__lead { color: rgb(255 255 255 / .75); }
@keyframes hy-q-rise { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes hy-q-mark { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
/* The speaker: a medallion with the initial, the name, the source and date as chips. */
.hy-quote-page .hy-quote-by { display: grid; justify-items: center; gap: .65rem; margin-block: .25rem 2rem; }
.hy-quote-page .hy-quote-by__speaker { display: inline-flex; align-items: center; gap: .75rem; padding: .35rem 1.2rem .35rem .35rem; border-radius: 999px; background: var(--bg-card);
    border: 1px solid color-mix(in srgb, var(--hy-q-gold) 35%, transparent); box-shadow: 0 14px 28px -20px rgb(0 0 0 / .32); font-size: 1.12rem; }
[dir="rtl"] .hy-quote-page .hy-quote-by__speaker { padding: .35rem .35rem .35rem 1.2rem; }
.hy-quote-page .hy-quote-by__dash { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--hy-q-maroon); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--hy-q-gold) 50%, transparent); }
.hy-quote-page .hy-quote-by__dash::after { content: "\201C"; color: var(--hy-q-gold); font-family: Georgia, serif; font-size: 1.9rem; line-height: 1; padding-block-start: .55rem; }
.hy-quote-page .hy-quote-by__meta { gap: .4rem; margin: 0; }
.hy-quote-page .hy-quote-by__meta a, .hy-quote-page .hy-quote-by__meta > span { padding: .25rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--hy-q-gold) 13%, transparent); color: var(--hy-text); font-size: .84rem; font-weight: 600; }
.hy-quote-page .hy-quote-by__meta a:hover { background: var(--hy-q-gold); color: var(--color-dark, #1a2a1e); }
.hy-quote-page .hy-quote-by__meta svg { color: var(--hy-q-maroon); }
/* The picture cards: a gallery block; each card lifts and tilts a little on hover. */
.hy-quote-page .hy-qcards { margin-block: 2.2rem 0; padding: clamp(1rem, 2.4vw, 1.5rem); border-radius: 22px; border: 1px solid color-mix(in srgb, var(--hy-q-gold) 25%, transparent);
    background: radial-gradient(70% 100% at 100% 0%, color-mix(in srgb, var(--hy-q-gold) 10%, transparent), transparent 60%), var(--bg-sunken, var(--bg-app)); }
.hy-quote-page .hy-qcards .hy-section-title { margin-block-end: 1.1rem; font-size: 1.1rem; font-weight: 800; }
.hy-quote-page .hy-qcards .hy-section-title > svg { inline-size: 38px; block-size: 38px; padding: 9px; border-radius: 12px; background: var(--hy-q-maroon); color: var(--hy-q-gold); }
.hy-quote-page .hy-qcards__list { gap: 1.2rem; perspective: 1400px; }
.hy-quote-page .hy-qcard { padding: .6rem; border-radius: 18px; background: var(--bg-card); box-shadow: 0 1px 2px color-mix(in srgb, var(--hy-text) 6%, transparent);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s var(--hy-ease); }
.hy-quote-page .hy-qcard:hover { transform: translateY(-5px) rotateX(3deg) rotateY(calc(-3deg * var(--hy-flip))); box-shadow: 0 26px 40px -26px rgb(0 0 0 / .32); }
.hy-quote-page .hy-qcard__pic { border: 0; border-radius: 12px; }
.hy-quote-page .hy-qcard__tools .hy-btn { min-block-size: 34px; border-radius: 999px; }
.hy-quote-page .hy-qcard__tools .hy-btn--solid { background: var(--hy-q-maroon); border-color: transparent; }
.hy-quote-page .hy-qcards__nets { padding-block-start: .9rem; border-block-start: 1px dashed color-mix(in srgb, var(--hy-q-gold) 35%, transparent); }
.hy-quote-page .hy-qcards__nets .hy-chip { border: 0; background: var(--bg-card); box-shadow: 0 1px 2px color-mix(in srgb, var(--hy-text) 8%, transparent); font-weight: 600; }
.hy-quote-page .hy-qcards__nets .hy-chip:hover { background: var(--hy-q-maroon); color: rgb(255 255 255); }
@media (prefers-reduced-motion: reduce) { .hy-quote-page .hy-item__title, .hy-quote-page .hy-item__title::before { animation: none; } }

@media (max-width: 767.98px) {
    .hy-qcards__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hy-qcard--landscape { grid-column: 1 / -1; }
}
@media print { .hy-qcards { display: none; } }

/* ---- the quote of the day at the top of every quote (2026-10-29, round 9): a deep stage — a framed poster card tilted a little at one
   side, the label with the day, the saying large in the reading face, the speaker's medallion and two pill buttons at the other. */
.hy-quotes .hb-quote-today--feature { padding: 0; border: 0; border-radius: 26px; background: none; overflow: hidden; color: rgb(255 255 255); }
.hy-quotes .hb-quote-today--feature::after { display: none; }
.hb-qf { --q-gold: var(--color-accent, #a98b4f); --q-maroon: color-mix(in srgb, var(--color-danger, #a8443c) 58%, #2a0a12); --q-ground: color-mix(in srgb, var(--color-dark, #2b4732) 72%, #060a08);
    position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr); align-items: center; gap: clamp(1.4rem, 4vw, 3.2rem); padding: clamp(1.4rem, 3.4vw, 2.6rem) clamp(1.2rem, 4vw, 3rem);
    background: radial-gradient(50% 90% at 0% 100%, color-mix(in srgb, var(--q-maroon) 80%, transparent), transparent 68%), radial-gradient(45% 80% at 100% 0%, color-mix(in srgb, var(--q-gold) 26%, transparent), transparent 62%),
        linear-gradient(160deg, var(--q-ground), color-mix(in srgb, var(--q-ground) 68%, #000)); }
.hb-qf::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .09; pointer-events: none; background-size: 40px 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23d9bf86' stroke-width='.7'%3E%3Cpath d='M20 2l18 18-18 18L2 20z'/%3E%3Cpath d='M20 12l8 8-8 8-8-8z'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
[dir="rtl"] .hb-qf::before { -webkit-mask-image: linear-gradient(-90deg, transparent, #000 60%); mask-image: linear-gradient(-90deg, transparent, #000 60%); }
/* the poster */
.hb-qf__poster { position: relative; display: flex; flex-direction: column; justify-content: center; gap: .7rem; aspect-ratio: 4 / 5; margin: 0; padding: 1.2rem 1.1rem; border-radius: 16px; text-align: center;
    background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--q-gold) 16%, transparent), transparent 70%), color-mix(in srgb, var(--q-gold) 10%, #fbf7ee); color: rgb(42 36 26);
    box-shadow: 0 30px 50px -28px rgb(0 0 0 / .8), inset 0 0 0 6px color-mix(in srgb, var(--q-gold) 10%, #fbf7ee), inset 0 0 0 7px color-mix(in srgb, var(--q-gold) 55%, transparent);
    transform: rotate(-4deg); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
[dir="rtl"] .hb-qf__poster { transform: rotate(4deg); }
.hb-qf:hover .hb-qf__poster { transform: rotate(-1deg) translateY(-4px); }
[dir="rtl"] .hb-qf:hover .hb-qf__poster { transform: rotate(1deg) translateY(-4px); }
.hb-qf__poster-mark { display: grid; place-items: center; align-self: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; color: var(--q-maroon); background: color-mix(in srgb, var(--q-maroon) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q-maroon) 35%, transparent); }
.hb-qf__poster-mark .hy-icon { inline-size: 1rem; block-size: 1rem; }
.hb-qf__poster-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; font-family: var(--font-text, inherit); font-size: 1.05rem; font-weight: 700; line-height: 1.35; text-wrap: balance; }
.hb-qf__poster-by { padding-block-start: .5rem; border-block-start: 1px solid color-mix(in srgb, var(--q-gold) 50%, transparent); color: var(--q-maroon); font-size: .76rem; font-weight: 800; }
.hb-qf__poster-site { color: color-mix(in srgb, #2a241a 55%, transparent); font-size: .58rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
/* the words */
.hb-qf__main { display: grid; justify-items: start; gap: 1rem; min-inline-size: 0; }
.hb-qf__label { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: 0; color: var(--q-gold); font-size: .9rem; font-weight: 800; }
.hb-qf__badge { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 11px; background: linear-gradient(145deg, var(--q-gold), color-mix(in srgb, var(--q-gold) 70%, #000)); color: var(--q-ground); }
.hb-qf__badge .hy-icon { inline-size: 17px; block-size: 17px; }
.hb-qf__day { padding: .15rem .65rem; border-radius: 999px; background: rgb(255 255 255 / .08); color: rgb(255 255 255 / .75); font-size: .74rem; font-weight: 600; }
.hb-qf__text { margin: 0; }
.hb-qf__text p { margin: 0; font-family: var(--font-text, inherit); font-weight: 700; line-height: 1.35; text-wrap: balance; text-shadow: 0 2px 18px rgb(0 0 0 / .3); }
.hb-qf--tl .hb-qf__text p { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); }
.hb-qf--tm .hb-qf__text p { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); }
.hb-qf--ts .hb-qf__text p { font-size: clamp(1.15rem, .95rem + 1vw, 1.6rem); }
.hb-qf__text:lang(ur) p { line-height: 2.1; }
.hb-qf__text a { color: inherit; text-decoration: none; background: none; }
.hb-qf__text a:hover { color: color-mix(in srgb, var(--q-gold) 55%, #fff); }
.hb-qf__by { display: inline-flex; align-items: center; gap: .65rem; margin: 0; padding: .3rem 1.1rem .3rem .3rem; border-radius: 999px; background: rgb(255 255 255 / .07); border: 1px solid color-mix(in srgb, var(--q-gold) 30%, transparent); font-weight: 700; }
[dir="rtl"] .hb-qf__by { padding: .3rem .3rem .3rem 1.1rem; }
.hb-qf__by cite { color: rgb(255 255 255 / .92); font-style: normal; }
.hb-qf__face { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%; background: var(--q-maroon); color: var(--q-gold); font-size: .9rem; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--q-gold) 50%, transparent); }
.hb-qf__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.hb-qf__btn { display: inline-flex; align-items: center; gap: .45rem; min-block-size: 38px; padding: .35rem 1rem; border: 1px solid color-mix(in srgb, var(--q-gold) 45%, transparent); border-radius: 999px; background: rgb(255 255 255 / .05);
    color: rgb(255 255 255); font: inherit; font-size: .84rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .25s ease, color .25s ease, transform .25s ease; }
.hb-qf__btn .hy-icon { inline-size: 16px; block-size: 16px; }
.hb-qf__btn:hover { background: var(--q-gold); color: var(--q-ground); transform: translateY(-1px); }
.hb-qf__btn--solid { border-color: transparent; background: var(--q-gold); color: var(--q-ground); }
.hb-qf__btn--solid:hover { background: color-mix(in srgb, var(--q-gold) 85%, #fff); }
.hb-qf__btn:focus-visible { outline: 2px solid var(--q-gold); outline-offset: 2px; }
@media (max-width: 639.98px) { .hb-qf { grid-template-columns: minmax(0, 1fr); } .hb-qf__poster { display: none; } }
@media (prefers-reduced-motion: reduce) { .hb-qf__poster { transition: none; } }