/* Teaching (God's Word): a calm reading app, scoped to .section-teaching.
   References (Mobbin): Atoms daily lesson card, Medium article + author grid, Apple Books Themes & Settings,
   Insight Timer reflections, Readwise Reader progress. Motion: transitions.dev (sliding tabs, icon swap,
   text swap, accordion), Arc UI (segmented-control overflow fades, toast-like confirmation),
   Amicro (copy button success state), Emil/better-ui (press scale .96, hover gating, exits faster). */
.section-teaching {
  --reader-ease: cubic-bezier(.22, 1, .36, 1); /* transitions.dev --ease-smooth-out */
  --swap-ease: cubic-bezier(.2, 0, 0, 1);      /* better-ui contextual icon cross-fade */
  --r-bar-top: 68px;                           /* height of the site top bar */
}

/* ---------- Shared meta row (Medium: topic · reading time · date) ---------- */
.w-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: var(--text-sm); color: var(--text-3); }
.w-meta .fig { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; }
.w-meta i { font-size: 1rem; }
.w-topic { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: rgb(7 29 58 / .06); color: var(--ink-3); font-size: .8125rem; font-weight: 500; text-decoration: none; transition: background-color var(--d-fast) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { a.w-topic:hover { background: rgb(7 29 58 / .1); } }

/* ---------- Head ---------- */
.w-head { padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 2.4vw, 28px); }
.w-head .crumbs { margin-bottom: 12px; }
.w-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.w-date { margin: 0; color: var(--text-3); font-size: var(--text-sm); }

/* ---------- Today's Word (Atoms daily card + YouVersion verse of the day) ---------- */
.w-today { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; padding: 12px; border-radius: 28px; background: linear-gradient(160deg, var(--ink-2), var(--ink) 70%); color: #fff; box-shadow: var(--shadow-raised); }
.w-today-verse { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: clamp(20px, 3vw, 40px); min-height: 360px; }
.w-today-label { margin: 0; font-size: var(--text-sm); font-weight: 500; color: rgb(255 255 255 / .72); }
.w-today-quote { margin: 0; max-width: 28ch; font: 500 clamp(1.5rem, 1.1rem + 1.5vw, 2.375rem)/1.24 var(--f-display); letter-spacing: -.02em; text-wrap: pretty; }
.w-today-ref { margin: 0; font-size: var(--text-sm); color: rgb(255 255 255 / .65); }
/* inner panel: radius 16 = 28 outer - 12 padding (concentric, better-ui) */
.w-today-read { display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 2.2vw, 28px); border-radius: 16px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
/* photo bleeds 8px towards the panel edge so its radius sits inside the 16px panel; 1px image outline per better-ui */
.w-today-photo { margin: -8px -8px 6px; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: var(--ink-3); }
.w-today-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; outline: 1px solid rgb(255 255 255 / .1); outline-offset: -1px; border-radius: inherit; }
.w-today-read .w-meta { color: rgb(255 255 255 / .7); }
.w-today-read .w-topic { background: rgb(255 255 255 / .12); color: #fff; }
.w-today-read h2 { font-size: var(--h3); }
.w-today-excerpt { margin: 0; color: rgb(255 255 255 / .78); line-height: 1.65; }
.w-today-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
@media (max-width: 900px) {
  .w-today { grid-template-columns: 1fr; border-radius: 24px; }
  .w-today-read { border-radius: 12px; }
  .w-today-verse { min-height: 0; gap: 24px; }
}
@media (max-width: 640px) { .w-today-photo { display: none; } }
@media (max-width: 480px) { .w-today-actions .btn { flex: 1 1 100%; } }
main:has(> .w-foundation) + .footer { margin-top: 0; }

/* ---------- Library ---------- */
.w-library { padding-top: clamp(48px, 6vw, 88px); }
.w-lib-head { display: flex; align-items: end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 24px; }
.w-lib-head h2 { font-size: var(--h2); }
.w-lib-head p { margin: 6px 0 0; }

/* Topic filter: Arc segmented-control (track scrolls inside itself, edges fade only where there is more)
   + transitions.dev 16 "Tabs sliding" pill. Links work without JS via ?topic=. */
.w-tabs-scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.w-tabs-scroll::-webkit-scrollbar { display: none; }
.w-tabs-scroll[data-fade-start] { mask-image: linear-gradient(to right, transparent, #000 28px); }
.w-tabs-scroll[data-fade-end] { mask-image: linear-gradient(to left, transparent, #000 28px); }
.w-tabs-scroll[data-fade-start][data-fade-end] { mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.w-tabs { position: relative; display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--surface-muted); box-shadow: inset 0 0 0 1px var(--border); }
.w-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 10px; color: var(--text-3); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; text-decoration: none; transition: color 250ms var(--reader-ease); -webkit-tap-highlight-color: transparent; }
.w-tab[aria-current="true"] { color: var(--ink); }
.w-tab:focus-visible { outline-offset: -2px; }
html:not(.js) .w-tab[aria-current="true"], .w-tabs:not(.is-ready) .w-tab[aria-current="true"] { background: #fff; box-shadow: 0 1px 2px rgb(7 29 58 / .1), 0 0 0 1px var(--border); }
.w-tabs-pill { position: absolute; top: 4px; left: 0; z-index: 0; height: 36px; width: 0; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgb(7 29 58 / .1), 0 0 0 1px var(--border); transition: transform 250ms var(--reader-ease), width 250ms var(--reader-ease); pointer-events: none; }
.w-tabs:not(.is-ready) .w-tabs-pill { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .w-tab:not([aria-current="true"]):hover { color: var(--text); } }

/* List: Medium author grid, hairline rows, whole row is the link */
.w-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(20px, 3vw, 40px); border-top: 1px solid var(--border); }
.w-item { border-bottom: 1px solid var(--border); }
.w-item a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px 16px 24px; margin: 0 -16px; border-radius: 16px; text-decoration: none; transition: background-color var(--d-fast) var(--ease-standard), box-shadow var(--d-fast) var(--ease-standard); }
.w-item-ref { margin: 0; font-size: .8125rem; color: var(--text-3); }
.w-item h3 { font-size: 1.25rem; letter-spacing: -.015em; }
.w-item-text { margin: 0 0 4px; color: var(--text-2); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-item .w-meta { margin-top: auto; }
.w-item-day { margin-left: auto; }
.w-item a:active { background: #fff; }
@media (hover: hover) and (pointer: fine) {
  .w-item a:hover { background: #fff; box-shadow: 0 1px 2px rgb(7 29 58 / .05), 0 0 0 1px var(--border); }
  .w-item a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}
/* Filtered rows re-enter with a short staggered rise (transitions.dev 18 "Texts reveal", shortened for UI) */
.w-item.is-entering { animation: w-in 280ms var(--reader-ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes w-in { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 1000px) { .w-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .w-list { grid-template-columns: 1fr; }
  .w-item a { margin: 0 -12px; padding-inline: 12px; }
}

.w-empty { display: grid; justify-items: center; gap: 8px; padding: 48px 20px; text-align: center; border: 1px dashed var(--border-strong); border-radius: 20px; color: var(--text-3); }
.w-empty > i { font-size: 2rem; color: var(--ink-3); }
.w-empty h2, .w-empty h3 { color: var(--text); font-size: var(--h4); }
.w-empty p { margin: 0 0 8px; max-width: 46ch; }
.w-library .w-empty { margin-top: 24px; }

/* ---------- Foundation + core scriptures ---------- */
.w-foundation { margin-top: clamp(56px, 7vw, 104px); padding-block: clamp(48px, 6vw, 88px); background: #fff; border-block: 1px solid var(--border); }
.w-found-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.w-found-copy { position: sticky; top: 100px; display: grid; gap: 16px; }
.w-found-copy h2 { font-size: var(--h2); }
.w-found-copy .prose p:last-child { margin-bottom: 0; }
.w-core-title { font-size: var(--h4); margin-bottom: 8px; }
.w-core { border-top: 1px solid var(--border); }
.w-core-item { border-bottom: 1px solid var(--border); }
.w-core-item summary { list-style: none; display: grid; grid-template-columns: 11rem 1fr auto; align-items: center; gap: 16px; min-height: 60px; padding: 12px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.w-core-item summary::-webkit-details-marker { display: none; }
.w-core-ref { font-size: var(--text-sm); color: var(--ink-3); }
.w-core-found { font-weight: 500; }
.w-core-caret { color: var(--text-3); transition: transform 250ms var(--reader-ease); }
.w-core-item[open] .w-core-caret { transform: rotate(180deg); }
.w-core-body { display: grid; justify-items: start; gap: 10px; padding: 0 40px 20px 0; padding-left: calc(11rem + 16px); }
.w-core-verse { margin: 0; font: 500 1.125rem/1.5 var(--f-display); letter-spacing: -.01em; color: var(--text); max-width: 56ch; }
@media (hover: hover) and (pointer: fine) { .w-core-item summary:hover .w-core-found { text-decoration: underline; text-underline-offset: 4px; } .w-core-item summary:hover .w-core-caret { color: var(--ink); } }
/* transitions.dev 21 "Accordion": height via interpolate-size where supported, content fades in from a 2px blur */
.w-core { interpolate-size: allow-keywords; }
.w-core-item::details-content { block-size: 0; overflow: hidden; transition: block-size 260ms var(--reader-ease), content-visibility 260ms allow-discrete; }
.w-core-item[open]::details-content { block-size: auto; }
.w-core-item .w-core-body { opacity: 0; filter: blur(2px); transition: opacity 200ms var(--reader-ease), filter 200ms var(--reader-ease); }
.w-core-item[open] .w-core-body { opacity: 1; filter: blur(0); transition-duration: 260ms; }
@media (max-width: 900px) { .w-found-grid { grid-template-columns: 1fr; } .w-found-copy { position: static; } }
@media (max-width: 640px) {
  .w-core-item summary { grid-template-columns: 1fr auto; gap: 2px 12px; }
  .w-core-ref { grid-column: 1; grid-row: 1; }
  .w-core-found { grid-column: 1; grid-row: 2; }
  .w-core-caret { grid-column: 2; grid-row: 1 / 3; }
  .w-core-body { padding: 0 0 20px; }
}

/* ================= Reading view ================= */
html:not(.js) [data-needs-js] { display: none !important; }
.section-teaching .footer { margin-top: clamp(64px, 8vw, 112px); }

/* Reader bar under the site top bar (Readwise Reader / Medium). Progress is gold: the page's one highlight. */
.r-bar { position: sticky; top: var(--r-bar-top); z-index: 40; background: var(--paper); border-bottom: 1px solid var(--border); }
.r-bar-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; height: 56px; }
.r-back { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 8px; margin-left: -8px; border-radius: 10px; color: var(--text-2); font-size: var(--text-sm); font-weight: 500; text-decoration: none; transition: background-color var(--d-fast), color var(--d-fast); }
.r-back i { transition: transform 200ms var(--reader-ease); }
@media (hover: hover) and (pointer: fine) { .r-back:hover { background: var(--surface-muted); color: var(--text); } .r-back:hover i { transform: translateX(-2px); } }
.r-bar-title { margin: 0; justify-self: center; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 var(--text-sm)/1 var(--f-display); opacity: 0; transform: translateY(4px); transition: opacity 200ms var(--reader-ease), transform 200ms var(--reader-ease); }
.r-bar.is-titled .r-bar-title { opacity: 1; transform: none; }
.r-tools { display: flex; align-items: center; gap: 8px; }
/* Apple Books "A | A" text size pair */
.r-size { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-muted); box-shadow: inset 0 0 0 1px var(--border); }
.r-size button, .r-tool { display: inline-grid; place-items: center; width: 40px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--d-fast) var(--ease-standard), transform 120ms var(--ease-standard), opacity var(--d-fast); }
.r-size button + button { box-shadow: -1px 0 0 var(--border); border-radius: 0 9px 9px 0; }
.r-size button:first-child { border-radius: 9px 0 0 9px; }
.r-size button:disabled { opacity: .35; cursor: default; }
.r-a { font: 600 1rem/1 var(--f-display); }
.r-a-sm { font-size: .8125rem; }
.r-a-lg { font-size: 1.1875rem; }
.r-tool { width: 40px; height: 40px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgb(7 29 58 / .06), 0 0 0 1px var(--border); font-size: 1.125rem; }
.r-size button:active:not(:disabled), .r-tool:active, .r-copy:active { transform: scale(.96); } /* better-ui press scale */
@media (hover: hover) and (pointer: fine) { .r-size button:hover:not(:disabled) { background: #fff; } .r-tool:hover { background: var(--paper); } }
.r-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.r-progress span { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left center; }

/* transitions.dev 09 "Icon swap" (both icons in one cell; scale .25, blur, cross-fade) */
.r-swap { display: inline-grid; }
.r-swap .r-ic { grid-area: 1 / 1; transition: opacity 250ms var(--swap-ease), filter 250ms var(--swap-ease), transform 250ms var(--swap-ease); }
.r-swap[data-state="a"] .r-ic:last-child, .r-swap[data-state="b"] .r-ic:first-child { opacity: 0; filter: blur(2px); transform: scale(.25); }
.r-tool.is-done, .r-copy.is-done { color: var(--success); }

/* Article: 66ch measure, size follows --reader-scale */
.r-article { --s: var(--reader-scale, 1); width: min(100% - 2 * var(--gutter), 42rem); margin: clamp(32px, 5vw, 64px) auto 0; }
.r-head { display: grid; gap: 16px; margin-bottom: clamp(24px, 3vw, 36px); }
.r-head h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); max-width: 18ch; }
.r-verse { margin: 0 0 clamp(28px, 4vw, 40px); padding: clamp(24px, 3.4vw, 36px); border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgb(7 29 58 / .05), 0 0 0 1px var(--border); }
.r-verse blockquote { margin: 0; font: 500 calc(clamp(1.3125rem, 1.15rem + .7vw, 1.625rem) * var(--s))/1.42 var(--f-display); letter-spacing: -.015em; text-wrap: pretty; }
.r-verse figcaption > .fig { white-space: nowrap; }
.r-verse figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-3); }
/* Copy verse: Amicro copy button (neutral pill, success green) with icon swap + transitions.dev 04 text swap */
.r-copy { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border: 0; border-radius: 10px; background: var(--surface-muted); color: var(--ink); font-size: var(--text-sm); font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--d-fast) var(--ease-standard), color var(--d-fast), transform 120ms var(--ease-standard); }
.r-copy .r-ic { font-size: 1rem; }
.r-copy.is-done { background: color-mix(in oklab, var(--success) 12%, #fff); }
@media (hover: hover) and (pointer: fine) { .r-copy:hover:not(.is-done) { background: #e4e7e4; } }
.r-copy-label { display: inline-block; min-width: 5.5em; text-align: left; transition: opacity 150ms var(--swap-ease), transform 150ms var(--swap-ease), filter 150ms var(--swap-ease); }
.r-copy-label.is-exit { opacity: 0; transform: translateY(-4px); filter: blur(2px); }
.r-copy-label.is-enter-start { opacity: 0; transform: translateY(4px); filter: blur(2px); transition: none; }

.r-body { font-size: calc(1.1875rem * var(--s)); line-height: 1.75; color: var(--text-2); }
.r-body p { margin: 0 0 1.15em; }
.r-body p:first-child { color: var(--text); }

.r-pray { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: clamp(36px, 5vw, 56px); padding: clamp(22px, 3vw, 32px); border-radius: 20px; background: var(--ink); color: #fff; }
.r-pray h2 { font-size: var(--h3); }
.r-pray p { margin: 8px 0 0; max-width: 46ch; color: rgb(255 255 255 / .76); }
.r-pray .btn { flex: none; }
@media (max-width: 640px) { .r-pray { flex-direction: column; align-items: stretch; } }

.r-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.r-page { display: grid; align-content: start; gap: 6px; padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgb(7 29 58 / .05), 0 0 0 1px var(--border); text-decoration: none; transition: box-shadow var(--d-fast) var(--ease-standard), transform 200ms var(--reader-ease); }
.r-page-dir { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--text-3); }
.r-page b { font: 600 1.0625rem/1.3 var(--f-display); letter-spacing: -.01em; }
.r-page .fig { font-size: .8125rem; color: var(--text-3); }
.r-page-next { grid-column: 2; text-align: right; justify-items: end; }
.r-page i { transition: transform 200ms var(--reader-ease); }
.r-page:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
  .r-page:hover { box-shadow: 0 6px 18px -8px rgb(7 29 58 / .2), 0 0 0 1px var(--border-strong); }
  .r-page-prev:hover i { transform: translateX(-2px); }
  .r-page-next:hover i { transform: translateX(2px); }
}
@media (max-width: 640px) {
  .r-bar-in { grid-template-columns: auto 1fr; }
  .r-bar-title { display: none; }
  .r-tools { justify-self: end; }
  .r-pager { grid-template-columns: 1fr; }
  .r-page-next { grid-column: 1; text-align: left; justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .w-tabs-pill, .w-tab, .r-swap .r-ic, .r-copy-label, .r-bar-title, .w-core-item::details-content, .w-core-item .w-core-body { transition: none !important; }
  .w-item.is-entering { animation: none; }
}

/* Rhapsody of Realities (daily devotional by Pastor Chris Oyakhilome) */
.rh-wrap { padding-bottom: 0; }
.rh-audio { width: 100%; height: 40px; margin: 4px 0 8px; }
.rh-earlier { margin-top: 20px; }
.rh-earlier h3, .rh-more h2 { font-size: var(--h4); margin-bottom: 10px; }
.rh-earlier ul, .rh-more ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.rh-earlier a, .rh-more a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--border); text-decoration: none; transition: box-shadow 150ms ease-out; }
.rh-earlier .fig, .rh-more .fig { font-size: var(--text-xs); color: var(--text-3); }
@media (hover: hover) and (pointer: fine) { .rh-earlier a:hover, .rh-more a:hover { box-shadow: 0 0 0 1px var(--border-strong), 0 6px 16px -8px rgb(7 29 58 / .2); } }
.rh-byline { margin: 8px 0 0; color: var(--text-2); }
.rh-photo { margin: 0 0 24px; aspect-ratio: 16 / 9; }
.rh-listen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 28px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--border); font-weight: 500; }
.rh-listen audio { flex: 1; min-width: 220px; height: 36px; }
.rh-body strong, .rh-body b { color: var(--ink); }
.rh-box { margin: 32px 0 20px; padding: 22px 24px; border-radius: 16px; background: var(--ink); color: #fff; }
.rh-box h2 { font-size: var(--h4); margin-bottom: 8px; color: var(--gold); }
.rh-box p { margin: 0; line-height: 1.65; color: rgb(255 255 255 / .9); }
.rh-study { margin: 0 0 24px; display: grid; gap: 0; border-top: 1px solid var(--border); }
.rh-study div { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.rh-study dt { font-weight: 600; font-size: var(--text-sm); }
.rh-study dd { margin: 0; color: var(--text-2); }
@media (max-width: 560px) { .rh-study div { grid-template-columns: 1fr; gap: 2px; } }
.rh-credit { font-size: var(--text-sm); color: var(--text-3); margin: 0 0 28px; }
.rh-more { margin-top: 32px; }

/* ---------- Rhapsody search: Jev ranks the archive, Praxiom explains why ---------- */
.rh-find { padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); }
.rh-find-head { margin-bottom: 24px; }
.rh-find-head h2 { margin: 0 0 10px; }
.rh-find-head p { margin: 0; max-width: 60ch; color: var(--text-2); line-height: 1.6; }
.rh-form { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--border-strong), 0 10px 30px -14px rgb(7 29 58 / .25); transition: box-shadow 150ms ease-out; }
.rh-form:focus-within { box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px rgb(242 183 5 / .3), 0 10px 30px -14px rgb(7 29 58 / .25); }
.rh-form > i { font-size: 1.25rem; color: var(--text-3); }
.rh-input { flex: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; font-size: 1.125rem; color: var(--ink); }
.rh-chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rh-chips a { display: inline-block; padding: 8px 13px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink); text-decoration: none; font-size: var(--text-sm); font-weight: 500; transition-property: box-shadow, background-color; transition-duration: 150ms; transition-timing-function: ease-out; }
.rh-chips a[aria-current="true"] { background: var(--ink); color: #fff; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .rh-chips a:not([aria-current]):hover { background: #fff; box-shadow: inset 0 0 0 1px var(--border-strong); } }
.rh-results { margin-top: 36px; }
.rh-why { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 18px 20px; margin-bottom: 20px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--border); }
.rh-why img { border-radius: 8px; }
.rh-why-label { margin: 0 0 4px; font-size: var(--text-xs); font-weight: 600; color: var(--text-3); }
.rh-why-text { margin: 0; color: var(--ink); line-height: 1.6; max-width: 72ch; }
.rh-why.is-empty { display: none; }
.rh-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rh-card a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 20px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--border); color: var(--ink); text-decoration: none; transition-property: box-shadow, transform; transition-duration: 180ms; transition-timing-function: var(--ease-standard, ease-out); }
.rh-card h3 { margin: 0; font-size: 1.1875rem; letter-spacing: -.015em; line-height: 1.25; }
.rh-card blockquote { margin: 0; padding: 0; color: var(--text-2); line-height: 1.55; font-size: var(--text-sm); }
.rh-card-date { margin: 0; font-size: var(--text-xs); color: var(--text-3); }
.rh-card-text { margin: 0; color: rgb(255 255 255 / .82); line-height: 1.6; }
.rh-card-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600; }
.rh-card-go i { transition: transform 150ms ease-out; }
.rh-card.is-best { grid-column: 1 / -1; }
.rh-card.is-best a { padding: clamp(22px, 3vw, 36px); background: var(--ink); color: #fff; box-shadow: none; }
.rh-card.is-best h3 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); max-width: 24ch; }
.rh-card.is-best blockquote { color: #fff; font-size: 1.125rem; font-weight: 500; max-width: 62ch; }
.rh-card.is-best .rh-card-date { color: var(--gold); }
.rh-card.is-best .rh-card-text { max-width: 68ch; }
@media (hover: hover) and (pointer: fine) {
  .rh-card a:hover { box-shadow: 0 0 0 1px var(--border-strong), 0 12px 28px -16px rgb(7 29 58 / .35); transform: translateY(-2px); }
  .rh-card.is-best a:hover { box-shadow: 0 16px 36px -18px rgb(7 29 58 / .6); }
  .rh-card a:hover .rh-card-go i { transform: translateX(3px); }
}
.rh-card a:active { transform: scale(.99); }
.rh-meta { margin: 16px 0 0; font-size: var(--text-sm); color: var(--text-3); }
.rh-none { padding: 32px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--border); text-align: center; }
.rh-none h3 { margin: 0 0 6px; }
.rh-none p { margin: 0 0 16px; color: var(--text-2); }
.rh-none .row { justify-content: center; }
@media (max-width: 900px) { .rh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .rh-grid { grid-template-columns: 1fr; }
  .rh-form { flex-wrap: wrap; padding: 8px; }
  .rh-form > i { display: none; }
  .rh-input { flex-basis: 100%; padding: 0 10px; }
  .rh-form .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .rh-shimmer { animation: none; color: var(--text-2); } .rh-card a, .rh-card-go i { transition: none; } }