@charset "UTF-8";
/* ==========================================================================
   RIYADUS UI — shared Neumorphic (soft UI) design system
   --------------------------------------------------------------------------
   One stylesheet for every hadith collection. Rules are either:
     • scoped to body.ry-ui (tokens, The7 chrome reset), or
     • namespaced with the .ry-* prefix and nested under .ry-riyadus / .ry-archive
       / .ry-single so they cannot leak into the rest of the theme.

   `ry-ui` is added to <body> by genfa_ry_body_class() (inc/riyadus.php) for
   exactly the views this file styles, using the same genfa_ry_ui_context()
   predicate that wp_enqueue_scripts checks — so the class and the stylesheet
   always arrive together. The token block carries .ry-riyadus as well, which
   keeps the two shared renderers self-contained wherever they are used.

   Tokens mirror archive-riyadus.php / single-riyadus.php (which still carry
   their own inline copy). Retune here and every other collection follows.

   Cards are rendered by template-parts/riyadus-card.php, so any card appended
   by the AJAX load-more inherits the exact same look with zero extra CSS.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS + PAGE CHROME  (body.ry-ui)
   ========================================================================== */
body.ry-ui,
.ry-riyadus {
    /* palette -------------------------------------------------------------- */
    --ry-bg:            #e7eaf1;
    --ry-surface:       #e7eaf1;
    --ry-shadow-dark:   #c4cbd9;
    --ry-shadow-light:  #ffffff;
    --ry-ink:           #2a2f3d;
    --ry-ink-soft:      #5d657a;
    --ry-accent:        #d24a4a;
    --ry-accent-deep:   #a92f2f;
    --ry-accent-grad:   linear-gradient(145deg, #e0575f 0%, #c62f3d 100%);
    --ry-hairline:      rgba(163, 177, 198, .55);

    /* icon artwork — pure #fff on transparency, painted through a mask so it
       can take currentColor (an <img> is invisible on these light surfaces) */
    --ry-icon-src: url("https://genfa.co/wp-content/uploads/2024/02/hadith_icon2_huge.png");

    /* geometry ------------------------------------------------------------- */
    --ry-r:       24px;
    --ry-r-sm:    16px;
    --ry-r-pill:  999px;
    --ry-pad:     clamp(16px, 4.2vw, 30px);

    /* neumorphic elevation -------------------------------------------------- */
    --ry-e1: 5px 5px 12px var(--ry-shadow-dark), -5px -5px 12px var(--ry-shadow-light);
    --ry-e2: 10px 10px 24px var(--ry-shadow-dark), -10px -10px 24px var(--ry-shadow-light);
    --ry-e3: 16px 16px 38px var(--ry-shadow-dark), -16px -16px 38px var(--ry-shadow-light);
    --ry-in: inset 4px 4px 9px var(--ry-shadow-dark), inset -4px -4px 9px var(--ry-shadow-light);
    /* red chip shadow — a grey neumorphic shadow under a red block looks dirty */
    --ry-e-accent:  6px 6px 14px rgba(140, 40, 44, .32), -4px -4px 10px rgba(255, 255, 255, .9);
    --ry-in-accent: inset 3px 3px 7px rgba(120, 28, 34, .45), inset -3px -3px 7px rgba(255, 255, 255, .22);

    background: var(--ry-bg) !important;
    background-image: none !important;
    color: var(--ry-ink);
}

/* kill the The7 arabesque pattern / page chrome on these views only */
body.ry-ui #page,
body.ry-ui #page:after,
body.ry-ui .page-inner {
    background: var(--ry-bg) !important;
    background-image: none !important;
}

body.ry-ui #main {
    padding: clamp(18px, 4vw, 46px) 0 clamp(44px, 8vw, 84px);
    background: none;
}

body.ry-ui .main-gradient { display: none; }

body.ry-ui .wf-container-main { background: none; }

body.ry-ui .page-title { display: none; }

/* accessibility helpers --------------------------------------------------- */
.ry-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.ry-riyadus :focus-visible {
    outline: 3px solid rgba(210, 74, 74, .55);
    outline-offset: 3px;
    border-radius: 10px;
}

/* --------------------------------------------------------------------------
   icon — painted through a mask so it can take currentColor.
   No background is set unless masking is supported, so an unsupported browser
   shows nothing rather than a solid coloured block.
   -------------------------------------------------------------------------- */
.ry-icon {
    display: inline-block;
    flex: 0 0 auto;
    background-color: transparent;
}
@supports ((mask-image: url("x")) or (-webkit-mask-image: url("x"))) {
    .ry-icon {
        background-color: currentColor;
        -webkit-mask-image: var(--ry-icon-src);
                mask-image: var(--ry-icon-src);
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: contain;
                mask-size: contain;
    }
}

/* ==========================================================================
   2. LAYOUT
   ========================================================================== */
.ry-riyadus {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0;
}

/* Desktop: The7 already sizes the content area for us. The 1040px cap above
   kept the list narrow on wide screens — the theme container is the real
   limit, so mirror it (plus a small gutter) once there is room. */
@media (min-width: 1200px) {
    body.ry-ui #main > .wf-wrap {
        width: calc(var(--the7-content-width, 1460px) + 40px);
        padding-left: 20px;
        padding-right: 20px;
    }
    .ry-riyadus {
        max-width: var(--the7-content-width, 1460px);
    }
}

/* ==========================================================================
   3. HERO
   ========================================================================== */
.ry-hero { margin-bottom: clamp(18px, 4vw, 32px); }

.ry-hero__plate {
    position: relative;
    overflow: hidden;
    background: var(--ry-surface);
    border-radius: var(--ry-r);
    box-shadow: var(--ry-e3);
    padding: clamp(22px, 5.5vw, 46px) var(--ry-pad);
    text-align: center;
}
/* soft top sheen — sells the "extruded from the surface" look */
.ry-hero__plate::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 60% at 50% -12%, rgba(255,255,255,.9), rgba(255,255,255,0) 62%);
    pointer-events: none;
}

.ry-hero__icon {
    position: relative;
    width: clamp(70px, 19vw, 100px);
    height: clamp(70px, 19vw, 100px);
    margin: 0 auto clamp(12px, 3vw, 20px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ry-surface);
    box-shadow: var(--ry-e2);
}
.ry-hero__mark {
    width: 56%;
    height: 56%;
    color: var(--ry-accent);
    animation: ry-spin 6s linear infinite;
}

.ry-hero__kicker {
    position: relative;
    margin: 0;
    font-size: clamp(.7rem, 2.4vw, .84rem);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--ry-ink-soft);
}
.ry-hero__kicker a { color: inherit; text-decoration: none; }
.ry-hero__kicker a:hover { color: var(--ry-accent); }

.ry-hero__title {
    position: relative;
    margin: .35em 0 .1em;
    font-size: clamp(1.55rem, 6.6vw, 2.7rem);
    line-height: 1.25;
    color: var(--ry-ink);
    text-shadow: 1px 1px 1px rgba(255,255,255,.85);
}

.ry-hero__arabic {
    position: relative;
    margin: .15em 0 clamp(14px, 3.4vw, 22px);
    font-size: clamp(1rem, 3.8vw, 1.4rem);
    line-height: 1.9;
    color: var(--ry-accent-deep);
}

/* red number chip — the same chip the archive cards carry ---------------- */
.ry-hero__shot {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: .6em;
    margin: 0 0 clamp(16px, 3.6vw, 24px);
    padding: .5em 1.4em;
    border-radius: var(--ry-r-pill);
    background:
        linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 58%),
        var(--ry-accent-grad);
    box-shadow: var(--ry-e-accent);
    color: #fff;
}
.ry-hero__shot-label {
    font-size: .76rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
}
.ry-hero__shot-num {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(120, 25, 30, .35);
}

/* stat pill ---------------------------------------------------------------- */
.ry-hero__stats {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: clamp(16px, 3.6vw, 24px);
}
.ry-stat {
    display: inline-flex;
    align-items: baseline;
    gap: .45em;
    padding: .5em 1.1em;
    border-radius: var(--ry-r-pill);
    background: var(--ry-surface);
    box-shadow: var(--ry-in);
    color: var(--ry-ink-soft);
    font-size: .95rem;
    white-space: nowrap;
}
.ry-stat__num {
    font-size: 1.4em;
    font-weight: 800;
    line-height: 1;
    color: var(--ry-accent);
    font-variant-numeric: tabular-nums;
}
.ry-stat strong { color: var(--ry-ink); font-weight: 700; }
.ry-stat a { color: inherit; text-decoration: none; }
.ry-stat a:hover { color: var(--ry-accent); }

/* search ------------------------------------------------------------------- */
.ry-search {
    position: relative;
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto clamp(14px, 3.2vw, 20px);
}
.ry-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .85em 1.15em;
    border: 0;
    outline: 0;
    border-radius: var(--ry-r-pill);
    background: var(--ry-surface);
    box-shadow: var(--ry-in);
    color: var(--ry-ink);
    font: inherit;
    font-size: 1rem;              /* >=16px: stops iOS zoom-on-focus */
    -webkit-appearance: none;
    appearance: none;
    transition: box-shadow .25s ease;
}
.ry-search__input::placeholder { color: var(--ry-ink-soft); opacity: .85; }
.ry-search__input:focus       { box-shadow: var(--ry-in), 0 0 0 3px rgba(210,74,74,.22); }

.ry-search__btn {
    flex: 0 0 auto;
    width: 3.15rem;
    height: 3.15rem;
    display: grid;
    place-items: center;
    border: 0;
    cursor: pointer;
    border-radius: 50%;
    background: var(--ry-surface);
    box-shadow: var(--ry-e1);
    color: var(--ry-accent);
    font-size: 1.05rem;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .18s ease, transform .18s ease, color .18s ease;
}
.ry-search__btn:hover  { color: var(--ry-accent-deep); }
.ry-search__btn:active { box-shadow: var(--ry-in); transform: translateY(1px); }

/* live in-page search (hisnulmuslim) --------------------------------------- */
/* Cards hidden by the search box. A class, not [hidden]: the card layout sets
   its own display, which would beat the attribute's UA rule. */
.ry-card.ry-hide { display: none !important; }

.ry-search__empty {
    margin: clamp(12px, 2.6vw, 18px) auto 0;
    padding: 1em 1.25em;
    max-width: 520px;
    text-align: center;
    border-radius: var(--ry-r);
    background: var(--ry-surface);
    box-shadow: var(--ry-in);
    color: var(--ry-ink-soft);
    font-size: .95rem;
}
.ry-search__empty a {
    color: var(--ry-accent);
    font-weight: 600;
    text-decoration: none;
}
.ry-search__empty a:hover { text-decoration: underline; }

/* links (back / archive) --------------------------------------------------- */
.ry-hero__links {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.ry-hero__back {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .55em 1.25em;
    border-radius: var(--ry-r-pill);
    background: var(--ry-surface);
    box-shadow: var(--ry-e1);
    color: var(--ry-ink-soft);
    font-size: .92rem;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .18s ease, transform .18s ease, color .18s ease;
}
.ry-hero__back:hover  { color: var(--ry-accent); box-shadow: var(--ry-e2); }
.ry-hero__back:active { box-shadow: var(--ry-in); transform: translateY(1px); }

/* optional extra (e.g. an ajax-search plugin shortcode) -------------------- */
.ry-hero__extra {
    position: relative;
    margin: 0 auto clamp(14px, 3.2vw, 20px);
    max-width: 640px;
}

/* ==========================================================================
   4. TOOLBAR
   ========================================================================== */
.ry-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    margin: 0 clamp(10px, 2.4vw, 18px) clamp(14px, 3vw, 22px);
    color: var(--ry-ink-soft);
    font-size: .95rem;
}
.ry-bar__count { margin: 0; }
.ry-bar__count strong { color: var(--ry-ink); }
.ry-bar__count #ry-shown { color: var(--ry-accent); font-weight: 700; }
.ry-bar__hint {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .4em 1em;
    border-radius: var(--ry-r-pill);
    background: var(--ry-surface);
    box-shadow: var(--ry-e1);
    font-size: .88rem;
}

/* chapter / category filter select ---------------------------------------- */
.ry-filter {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    color: var(--ry-ink-soft);
    font-size: .9rem;
}
.ry-filter__select {
    padding: .6em 2.4em .6em 1.1em;
    border: 0;
    border-radius: var(--ry-r-pill);
    background-color: var(--ry-surface);
    box-shadow: var(--ry-in);
    color: var(--ry-ink);
    font: inherit;
    font-size: .95rem;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    /* chevron drawn inline so no icon font is needed inside the control */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d24a4a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}
.ry-filter__select:focus { outline: 0; box-shadow: var(--ry-in), 0 0 0 3px rgba(210,74,74,.22); }

/* ==========================================================================
   5. CARD LIST  (markup: template-parts/riyadus-card.php)
   ========================================================================== */
.ry-list { display: grid; gap: clamp(16px, 3.4vw, 28px); }

.ry-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;          /* mobile: single column */
    gap: clamp(14px, 3vw, 22px);
    padding: var(--ry-pad);
    background: var(--ry-surface);
    border-radius: var(--ry-r);
    box-shadow: var(--ry-e2);
    overflow: hidden;
}
.ry-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 55% at 0% 0%, rgba(255,255,255,.65), rgba(255,255,255,0) 58%);
    pointer-events: none;
}

/* number medallion --------------------------------------------------------- */
.ry-card__badge {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .85rem 1.05rem;
    border-radius: var(--ry-r-sm);
    background: var(--ry-accent-grad);
    box-shadow: var(--ry-e-accent);
    color: #fff;
}
.ry-card__badge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 58%);
    pointer-events: none;
}
.ry-card__badge-icon {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    color: #fff;              /* mask fill — the artwork itself is white */
    animation: ry-spin 7s linear infinite;
}
.ry-card__badge-label {
    position: relative;
    z-index: 1;
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    white-space: nowrap;
}
.ry-card__num {
    position: relative;
    z-index: 1;
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(120, 25, 30, .35);
}

/* card body ---------------------------------------------------------------- */
.ry-card__body { position: relative; z-index: 1; min-width: 0; }

.ry-card__thumb { display: block; margin-bottom: 1rem; }
.ry-card__thumb img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ry-r-sm);
    box-shadow: var(--ry-e1);
}

.ry-card__title {
    margin: 0 0 .7rem;
    font-size: clamp(1.05rem, 3.7vw, 1.35rem);
    line-height: 1.5;
}
.ry-card__title a {
    display: inline-flex;
    align-items: flex-start;
    gap: .55em;
    color: var(--ry-ink);
    text-decoration: none;
    transition: color .18s ease;
}
.ry-card__title a:hover { color: var(--ry-accent); }
.ry-card__title-icon {
    width: 1.1em;
    height: 1.1em;
    margin-top: .18em;
    color: var(--ry-accent);   /* mask fill */
}

.ry-card__arabic {
    /* ------------------------------------------------------------------
       PREVIEW CLAMP
       One matn can run 2,000–3,000 characters; unfiltered cards made every
       archive roughly 40 screens tall on a phone. The full text is always in
       the DOM and on the single post — this caps rendered height and fades
       it out so the card reads as a preview.

       TO SHOW THE FULL TEXT: add the class `ry-no-clamp` to <body>.
       ------------------------------------------------------------------ */
    direction: rtl;
    text-align: right;
    margin-bottom: .85rem;
    padding: .95rem 1.05rem;
    border-radius: var(--ry-r-sm);
    background: var(--ry-surface);
    box-shadow: var(--ry-in);
    color: var(--ry-ink);
    font-size: clamp(1.02rem, 3.5vw, 1.16rem);
    line-height: 2.05;
    word-break: break-word;
}

/* Archive cards clip the matn to a preview. Related cards on a single do too;
   the article itself never clips (overridden in section 9). */
body:not(.ry-no-clamp) .ry-archive .ry-card__arabic,
body:not(.ry-no-clamp) .ry-single .ry-related__grid .ry-card__arabic {
    max-height: calc(2.05em * 7);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 74%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(180deg, #000 74%, rgba(0, 0, 0, 0) 100%);
}
body.ry-no-clamp .ry-card__arabic { max-height: none; }

@media (min-width: 720px) {
    body:not(.ry-no-clamp) .ry-archive .ry-card__arabic,
    body:not(.ry-no-clamp) .ry-single .ry-related__grid .ry-card__arabic {
        max-height: calc(2.05em * 10);
    }
}

/* highlight markup is emitted by genfa_ry_highlight() */
.ry-card__arabic .ry-hl,
.ry-card__thai .ry-hl { color: var(--ry-accent); font-weight: 600; }

.ry-card__thai {
    margin-bottom: 1rem;
    color: var(--ry-ink-soft);
    font-size: clamp(.96rem, 3.1vw, 1.02rem);
    line-height: 1.95;
}

.ry-card__more {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .62em 1.2em;
    border-radius: var(--ry-r-pill);
    background: var(--ry-surface);
    box-shadow: var(--ry-e1);
    color: var(--ry-accent);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .18s ease, transform .18s ease, color .18s ease;
}
.ry-card__more:hover  { color: var(--ry-accent-deep); box-shadow: var(--ry-e2); }
.ry-card__more:active { box-shadow: var(--ry-in); transform: translateY(1px); }

/* chapter footer ----------------------------------------------------------- */
.ry-card__chapter {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    display: grid;
    gap: .55rem;
    padding-top: clamp(14px, 3vw, 20px);
    border-top: 1px solid var(--ry-hairline);
}
.ry-card__chapter-label {
    display: inline-flex;
    align-items: flex-start;
    gap: .55em;
    color: var(--ry-accent-deep);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.65;
}
.ry-card__chapter-label a { color: inherit; text-decoration: none; }
.ry-card__chapter-label a:hover { text-decoration: underline; }
.ry-card__chapter-desc {
    color: var(--ry-ink-soft);
    font-size: .92rem;
    line-height: 1.8;
}
.ry-card__chapter-desc:empty { display: none; }

/* empty state -------------------------------------------------------------- */
.ry-empty { text-align: center; }
.ry-empty .ry-card__thai { margin-bottom: 0; }

/* ==========================================================================
   6. SPINNER + LOAD MORE  (ids/classes consumed by js/load-more.js)
   ========================================================================== */
.ry-riyadus #loading-spinner {
    display: none;
    margin: clamp(22px, 4.5vw, 34px) 0;
    text-align: center;
}
.ry-spinner {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--ry-surface);
    box-shadow: var(--ry-e1);
}
.ry-spinner::before {
    content: "";
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(210, 74, 74, .22);
    border-top-color: var(--ry-accent);
    animation: ry-spin .9s linear infinite;
}

.ry-riyadus #load-more {
    position: relative;
    overflow: hidden;
    display: block;
    width: min(100%, 340px);
    margin: clamp(24px, 5vw, 42px) auto 0;
    padding: .95em 1.5em;
    border: 0;
    border-radius: var(--ry-r-pill);
    background: var(--ry-surface);
    box-shadow: var(--ry-e2);
    color: var(--ry-accent);
    font: inherit;
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .2s ease, transform .2s ease, color .2s ease;
}
.ry-riyadus #load-more:hover  { color: var(--ry-accent-deep); box-shadow: var(--ry-e3); transform: translateY(-2px); }
.ry-riyadus #load-more:active { box-shadow: var(--ry-in); transform: translateY(0); }
/* `loading` + `disabled` are set by js/load-more.js */
.ry-riyadus #load-more.loading  { opacity: .6; pointer-events: none; box-shadow: var(--ry-in); }
.ry-riyadus #load-more:disabled { opacity: .55; cursor: default; box-shadow: var(--ry-in); pointer-events: none; }

.ry-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: radial-gradient(circle, rgba(210,74,74,.38), rgba(210,74,74,0) 70%);
    pointer-events: none;
}

/* ==========================================================================
   7. PAGINATION  (paginate_links markup, neumorphic)
   ========================================================================== */
.ry-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: clamp(24px, 5vw, 42px) 0 0;
}
.ry-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.9rem;
    height: 2.9rem;
    padding: 0 .9em;
    border-radius: var(--ry-r-pill);
    background: var(--ry-surface);
    box-shadow: var(--ry-e1);
    color: var(--ry-ink-soft);
    font-size: .98rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .18s ease, transform .18s ease, color .18s ease;
}
.ry-pagination .page-numbers:hover { color: var(--ry-accent); box-shadow: var(--ry-e2); }
.ry-pagination .page-numbers:active { box-shadow: var(--ry-in); transform: translateY(1px); }
.ry-pagination .page-numbers.current {
    background:
        linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 58%),
        var(--ry-accent-grad);
    color: #fff;
    box-shadow: var(--ry-e-accent);
}
.ry-pagination .page-numbers.dots { box-shadow: none; background: none; color: var(--ry-ink-soft); }

/* ==========================================================================
   8. ACTION BUTTONS + TOAST  (single)
   ========================================================================== */
.ry-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: clamp(6px, 1.6vw, 12px);
}
.ry-btn {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .68em 1.3em;
    border: 0;
    cursor: pointer;
    border-radius: var(--ry-r-pill);
    background: var(--ry-surface);
    box-shadow: var(--ry-e1);
    color: var(--ry-accent);
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .18s ease, transform .18s ease, color .18s ease;
}
.ry-btn:hover  { color: var(--ry-accent-deep); box-shadow: var(--ry-e2); }
.ry-btn:active { box-shadow: var(--ry-in); transform: translateY(1px); }

.ry-btn--solid {
    background:
        linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 58%),
        var(--ry-accent-grad);
    color: #fff;
    box-shadow: var(--ry-e-accent);
}
.ry-btn--solid:hover  { color: #fff; box-shadow: var(--ry-e-accent); transform: translateY(-2px); }
.ry-btn--solid:active { transform: translateY(0); box-shadow: var(--ry-in); }

.ry-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: .6em;
    max-width: min(92vw, 460px);
    padding: .8em 1.35em;
    border-radius: var(--ry-r-pill);
    background:
        linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 58%),
        var(--ry-accent-grad);
    box-shadow: 0 14px 34px rgba(140, 40, 44, .34);
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    opacity: 0;
    transform: translate(-50%, 18px);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
}
.ry-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   9. SINGLE ARTICLE + PREV/NEXT + RELATED
   ========================================================================== */
/* section kickers */
.ry-single__label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    margin: 0 0 .6rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ry-ink-soft);
}
.ry-single__label i { color: var(--ry-accent); }

/* the article gets its own reading sizes */
.ry-single .ry-single__article .ry-card__arabic {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
    padding: clamp(16px, 3.6vw, 26px);
    font-size: clamp(1.15rem, 3.9vw, 1.5rem);
    line-height: 2.15;
}
.ry-single .ry-single__article .ry-card__thai {
    color: var(--ry-ink);
    font-size: clamp(1rem, 3.2vw, 1.12rem);
    line-height: 2.05;
    margin-bottom: 1.4rem;
}
.ry-single .ry-single__article .ry-card__thumb { margin: 0 0 1.2rem; }

/* prev / next -------------------------------------------------------------- */
.ry-nav {
    display: grid;
    gap: clamp(14px, 3vw, 20px);
    grid-template-columns: 1fr;
    margin-top: clamp(20px, 4.4vw, 34px);
}
.ry-nav__link {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: clamp(14px, 3vw, 20px);
    border-radius: var(--ry-r);
    background: var(--ry-surface);
    box-shadow: var(--ry-e2);
    color: var(--ry-ink);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .2s ease, transform .2s ease, color .2s ease;
}
.ry-nav__link:hover  { color: var(--ry-accent); box-shadow: var(--ry-e3); transform: translateY(-2px); }
.ry-nav__link:active { transform: translateY(0); box-shadow: var(--ry-in); }

.ry-nav__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--ry-surface);
    box-shadow: var(--ry-e1);
    color: var(--ry-accent);
    font-size: .95rem;
}
.ry-nav__text { min-width: 0; }
.ry-nav__meta {
    display: block;
    font-size: .76rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ry-ink-soft);
}
.ry-nav__title {
    display: block;
    font-size: clamp(.98rem, 3.1vw, 1.1rem);
    font-weight: 600;
    line-height: 1.5;
}
.ry-nav__link--next { flex-direction: row-reverse; text-align: right; }

@media (min-width: 720px) {
    .ry-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* related ------------------------------------------------------------------ */
.ry-related { margin-top: clamp(28px, 5.5vw, 46px); }
.ry-section__head {
    display: flex;
    align-items: center;
    gap: .7em;
    margin: 0 clamp(10px, 2.4vw, 18px) clamp(14px, 3vw, 20px);
}
.ry-section__head i { color: var(--ry-accent); font-size: 1.1rem; }
.ry-section__title {
    margin: 0;
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    color: var(--ry-ink);
    text-shadow: 1px 1px 1px rgba(255,255,255,.85);
}
.ry-related__grid {
    display: grid;
    gap: clamp(16px, 3.4vw, 24px);
    grid-template-columns: 1fr;
}
@media (min-width: 1100px) {
    .ry-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   10. MOTION  (progressive enhancement — html.ry-motion is added by JS)
   ========================================================================== */
@keyframes ry-spin { to { transform: rotate(360deg); } }
@keyframes ry-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

@media (prefers-reduced-motion: no-preference) {
    .ry-hero__icon { animation: ry-float 5s ease-in-out infinite; }

    html.ry-motion .ry-archive .ry-card,
    html.ry-motion .ry-single .ry-related__grid .ry-card {
        opacity: 0;
        transform: translateY(22px);
    }
    html.ry-motion .ry-archive .ry-card.ry-in,
    html.ry-motion .ry-single .ry-related__grid .ry-card.ry-in {
        opacity: 1;
        transform: none;
        transition:
            opacity .6s cubic-bezier(.22, 1, .36, 1),
            transform .6s cubic-bezier(.22, 1, .36, 1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .ry-hero__mark,
    .ry-card__badge-icon,
    .ry-spinner::before { animation: none; }
}

/* ==========================================================================
   11. BREAKPOINT: tablet / desktop
   ========================================================================== */
@media (min-width: 720px) {
    .ry-card { grid-template-columns: clamp(124px, 15vw, 152px) 1fr; }

    .ry-card__badge {
        flex-direction: column;
        align-self: start;
        min-height: clamp(124px, 15vw, 152px);
        gap: .4rem;
        padding: 1.1rem .8rem;
    }
    .ry-card__badge-icon { width: 46px; height: 46px; }

    .ry-card__chapter {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1.2rem;
        align-items: start;
    }
}

@media (min-width: 900px) {
    .ry-bar { font-size: 1rem; }
}