/* =============================================================================
   The research hub: /research/, /research/trending/, /research/library/ and
   the History / Bookmarks / Liked lists.

   A 1:1 port of the MM Carz insights section (owner's request, 2026-09-27):
   its live stylesheet's insights rules, value for value, renamed mm-yt -> rh
   and put in this site's colours. The token mapping, so the next port lines up:
     MM --ink        -> --ink          MM --muted      -> --ink-3
     MM --bg-soft    -> --bg-2         MM --line/cream -> --hair
     MM --brand-blue -> --spark (text) / --navy (filled buttons)
     MM --label-ls   -> .14em          MM #e2683b flame stays
   What is this site's own, not MM Carz's: the 52px header (theirs is 58),
   the Sozou mark in the sticky bar and drawer, the Kikuemon launcher lifted
   over the bottom tab bar (theirs is the Michi orb), and forms.js's
   .form-msg for the subscribe result.
   Loaded only on these pages (rh_head() in build.py).
   ============================================================================= */

/* The site footer goes, as on MM Carz: the sidebar carries the socials and
   the copyright line. */
body.rh-page .foot { display: none; }

/* The header's burger sits left of the mark (bar_lead in page()), its icon
   directly over the collapsed rail's own icon column (MM Carz's own rule:
   the 38px button's centre sits on the rail's 38px icon centre — 76px rail,
   62px item, 22px icon, all centred), which is what actually needs it to
   line up, since the burger's whole job is to fold the sidebar down to that
   rail. Owner first had this matched to the flame in the Trending widget
   instead (2026-09-28) — right in the wide sidebar, but 15px off once
   collapsed, since the rail centres its icons wider than the widget indents
   its own. The widget's heading (and its Daily/Weekly/Monthly tabs row) are
   now shifted over to that same 38px spot too (owner, 2026-09-28, final
   call after trying it both ways) — see .rh-trend__head below for the
   shift itself and why it needs its own scoped rule. */
.bar-lead { justify-self: start; display: flex; align-items: center; gap: 6px; min-width: 0; }
.bar .rh-burger { color: var(--ink); margin-left: calc(19px - clamp(16px, 2.4vw, 30px)); }
.bar .rh-burger:hover { background: var(--bg-2); }
@media (max-width: 760px) { .bar-in > .bar-lead { grid-area: mark; } }

/* Headings and sections come in with this site's display serif and its
   118px section padding; the hub is set in Manrope like MM Carz's. */
.rh { font-size: 15px; line-height: 1.65; }
.rh :is(h1, h2, h3), .rh-stick :is(h1, h2, h3) {
  font-family: var(--sans); font-weight: 400; line-height: 1.18; letter-spacing: -.02em; margin: 0 0 .5em;
}
.rh section { padding: 0; }
.rh-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.rh {
  --rh-h: 52px;          /* the site header */
  --rh-side: 248px;      /* expanded sidebar */
  --rh-rail: 76px;       /* collapsed icon rail */
  display: grid;
  grid-template-columns: var(--rh-side) minmax(0, 1fr);
  align-items: start;
}
.rh.is-rail { grid-template-columns: var(--rh-rail) minmax(0, 1fr); }

.rh-burger {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; padding: 0; border: 0; background: none; color: var(--ink);
  cursor: pointer; border-radius: 50%; transition: background .2s ease;
}
.rh-burger:hover { background: var(--bg-2); }
.rh-burger[hidden] { display: none; }
.rh-burger svg { width: 22px; height: 22px; }

/* --- sidebar --- */
.rh__side {
  position: sticky; top: var(--rh-h); align-self: start;
  height: calc(100vh - var(--rh-h));
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.rh__side:hover { scrollbar-color: rgba(20, 22, 24, .25) transparent; }
.rh__side::-webkit-scrollbar { width: 4px; }
.rh__side::-webkit-scrollbar-track { background: transparent; }
.rh__side::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.rh__side:hover::-webkit-scrollbar-thumb { background: rgba(20, 22, 24, .25); }
.rh__side-inner { flex: 1; padding: clamp(14px, 1.8vw, 22px) 14px 14px; display: flex; flex-direction: column; gap: 22px; }
.rh__fineprint { margin-top: auto; padding-top: 16px; font-size: 11px; color: var(--ink-3); line-height: 1.5; }

/* the collapsed icon rail, only in .is-rail */
.rh__rail { display: none; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px; }
.rh.is-rail .rh__rail { display: flex; }
.rh.is-rail .rh__side-inner { display: none; }
.rh__railitem {
  display: flex; flex-direction: column; align-items: center; gap: 5px; width: 62px; padding: 11px 2px;
  border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 12px;
  font-family: var(--sans); font-size: 10px; font-weight: 500; line-height: 1.3; text-decoration: none;
  transition: background .18s ease;
}
.rh__railitem:hover { background: var(--bg-2); }
.rh__railitem svg { width: 22px; height: 22px; }
.rh__railitem.is-active { color: var(--ink); }
.rh__railitem.is-active svg { color: #e2683b; }

/* Trending widget: vertical mini-cards with a rank in a left gutter. CSS
   counters follow DOM order, so the ranks renumber when the list re-sorts. */
.rh-trend__head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); margin: 0 0 12px; }
/* The heading and the Daily/Weekly/Monthly tabs both shifted right 15px
   (owner, 2026-09-28) so the flame lands on the same 38px spot the header
   burger and the collapsed rail's icons already share — see the burger's
   own comment above. The ranked list below is deliberately left where it
   was; only asked for the heading and the tabs. Scoped to `.rh-trend`: a
   PLAIN `.rh-trend__head` rule loses this margin silently, because it is an
   <h2> and `.rh :is(h1, h2, h3)`'s two-class-equivalent specificity beats a
   single class regardless of source order — the margin shorthand there
   resets margin-left to 0 along with it, not just the sides it looks like
   it's touching. `.rh-trend__tabs` is a plain <div>, so it needs no such
   scoping, but is written the same way here for one obvious rule to read
   next to the other. */
.rh-trend .rh-trend__head, .rh-trend .rh-trend__tabs { margin-left: 15px; }
.rh-trend__head a { color: inherit; }
.rh-trend__head a:hover { color: var(--spark); }
.rh-trend__flame { display: inline-flex; color: #e2683b; }
.rh-trend__flame svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.rh-trend__tabs { display: flex; gap: 16px; margin: 0 0 16px; border-bottom: 1px solid var(--hair); }
.rh-trend__tabs[hidden] { display: none; }
.rh-trend__tab {
  background: none; border: 0; padding: 0 0 9px; margin-bottom: -1px; font-family: var(--sans);
  font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent;
}
.rh-trend__tab:hover { color: var(--ink); }
.rh-trend__tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.rh-trend__list { display: flex; flex-direction: column; gap: 16px; counter-reset: rhtrend; }
.rh-trend__item { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 9px; color: var(--ink); counter-increment: rhtrend; }
.rh-trend__item:nth-child(n + 5) { display: none; }   /* the top four */
.rh-trend__item::before {
  content: counter(rhtrend); grid-column: 1; grid-row: 1; align-self: center; justify-self: center;
  font-size: 14px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.rh-trend__item > * { grid-column: 2; }
.rh-trend__item:hover .rh-trend__title { color: var(--spark); }
.rh-trend__thumb { position: relative; grid-row: 1; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.rh-trend__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.rh-trend__item:hover .rh-trend__thumb img { transform: scale(1.04); }
.rh-trend__badge { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 5px; background: rgba(20, 22, 24, .82); color: #fff; font-size: 10px; font-weight: 600; line-height: 1.5; }
.rh-trend__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 1.34; font-weight: 600; margin-top: 8px; }
.rh-trend__views { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.rh-trend__views[hidden] { display: none; }

/* Library widget: "LIBRARY", then History / Bookmarks / Liked with counts. */
.rh-lib { border-top: 1px solid var(--hair); padding-top: 16px; }
.rh-lib__head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); margin: 0 0 6px; }
.rh-lib__row { display: flex; align-items: center; gap: 12px; padding: 9px 8px; margin: 0 -8px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink); transition: background .15s ease; }
.rh-lib__row:hover { background: var(--bg-2); }
.rh-lib__ic { display: inline-flex; flex: 0 0 auto; color: var(--ink-3); }
.rh-lib__ic svg { width: 17px; height: 17px; }
.rh-lib__label { flex: 1; min-width: 0; }
.rh-lib__badge { flex: 0 0 auto; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 10px; background: var(--bg-2); color: var(--ink-3); font-size: 11px; font-weight: 700; line-height: 1.6; font-variant-numeric: tabular-nums; }
.rh-lib__badge[hidden] { display: none; }
.rh-lib__badge.is-zero { opacity: .55; }

/* subscribe */
.rh-sub { border-top: 1px solid var(--hair); padding-top: 20px; }
.rh-sub__title { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.rh-sub__sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin: 0 0 14px; }
.rh-subform { display: flex; flex-direction: column; }
.rh-subform-input, .rh-drawer__subform-input {
  width: 100%; border: 0; border-bottom: 1px solid var(--hair-2); border-radius: 0; background: none; padding: 8px 2px;
  font-family: var(--sans); font-size: 16px; color: var(--ink); margin-bottom: 10px;
}
.rh-subform-input:focus, .rh-drawer__subform-input:focus { outline: none; border-bottom-color: var(--ink); }
.rh .rh-subform-input:focus-visible, .rh-drawer .rh-drawer__subform-input:focus-visible { outline: none; }
.rh-subform-btn, .rh-drawer__subform-btn {
  align-self: flex-start; font-family: var(--sans); font-size: 11px; font-weight: 600; line-height: 1;
  text-transform: uppercase; letter-spacing: .14em; color: #fff; background: var(--navy);
  border: 0; border-radius: 8px; padding: 11px 22px; cursor: pointer; transition: opacity .2s ease;
}
.rh-subform-btn:hover, .rh-drawer__subform-btn:hover { opacity: .88; }
.rh-subform-btn:disabled, .rh-drawer__subform-btn:disabled { opacity: .5; cursor: default; }
.rh-subform .form-msg, .rh-drawer__subform .form-msg { font-size: 12.5px; margin: 12px 0 0; min-height: 0; }
.rh-subform .form-msg:empty, .rh-drawer__subform .form-msg:empty { display: none; }

.rh-soc { border-top: 1px solid var(--hair); padding-top: 18px; }
.rh-soc__head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); margin: 0 0 12px; text-align: center; }
.rh-soc__row { display: flex; flex-wrap: wrap; gap: 18px 26px; justify-content: center; }
.rh-soc__row a { display: inline-flex; }
.rh-soc__row a:hover { opacity: .7; }
.rh-soc__row svg { width: 14px; height: 14px; display: block; }

/* --- content --- */
.rh__content { min-width: 0; padding: clamp(14px, 1.8vw, 22px) clamp(12px, 1.4vw, 22px) clamp(60px, 8vw, 110px); }
@media (orientation: portrait) and (max-width: 599px) {
  .rh__content { padding-top: 20px; }
}

/* top-left category pills */
.rh__pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.rh__pills[hidden] { display: none; }
.rh__pill {
  font-family: var(--sans); font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--ink);
  background: var(--bg-2); border: 1px solid transparent; border-radius: 999px; padding: 7px 14px;
  cursor: pointer; transition: background .18s ease, color .18s ease; white-space: nowrap;
}
.rh__pill:hover { background: var(--hair); }
.rh__pill.is-active { background: var(--ink); color: #fff; }

.rh__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 16px; }
.rh.is-rail .rh__grid { grid-template-columns: repeat(4, 1fr); }
.rh__grid[hidden] { display: none; }

/* --- the card (Hanamaru hover: a soft wash of the category colour and a glow
   that grows into the gap) --- */
.rh-card { display: flex; flex-direction: column; min-width: 0; padding: 8px; border-radius: 16px; transition: background-color .2s ease, box-shadow .2s ease, padding .2s ease, margin .2s ease; }
.rh-card[hidden] { display: none; }
.rh-card:hover { position: relative; z-index: 1; padding: 14px; margin: -6px; background-color: color-mix(in srgb, var(--cat, var(--ink)) 13%, #fff); box-shadow: 0 18px 42px -18px color-mix(in srgb, var(--cat, var(--ink)) 66%, transparent); }
.rh-card__thumb { position: relative; display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 9; background: var(--bg-2); }
/* Feature images are always 16:9 here (the build insists), so the photo
   covers the tile; MM Carz's contain-and-blur for odd shapes is not needed. */
.rh-card__thumb img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.rh-card:hover .rh-card__thumb img { transform: scale(1.05); }
.rh-card__badge { position: absolute; right: 8px; bottom: 8px; z-index: 3; padding: 3px 7px; border-radius: 6px; background: rgba(20, 22, 24, .82); color: #fff; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .02em; transition: opacity .3s ease; }
.rh-card__thumb:hover .rh-card__badge,
.rh--feed .rh-card.is-previewing .rh-card__badge { opacity: 0; }
.rh-card__veil { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; padding: 14px; background: linear-gradient(to top, rgba(20, 22, 24, .86), rgba(20, 22, 24, .18) 62%, transparent); opacity: 0; transition: opacity .28s ease; }
.rh-card__thumb:hover .rh-card__veil { opacity: 1; }
.rh-card__veil-text { color: #fff; font-size: 12.5px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.rh-card__foot { position: relative; display: flex; gap: 12px; padding: 12px 2px 2px; }
.rh-card__av { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--cat, var(--ink)); color: #fff; }
.rh-card__av svg { width: 19px; height: 19px; stroke-width: 1.7; }
.rh-card__info { min-width: 0; flex: 1; }
.rh .rh-card__title { font-size: 14.5px; font-weight: 600; line-height: 1.34; letter-spacing: 0; margin: 0 0 5px; }
.rh-card__title a { color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.rh-card__title a:hover { color: var(--spark); }
.rh-card__meta { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.rh-card__meta span[aria-hidden] { opacity: .55; margin: 0 5px; }
.rh-card__meta [hidden] { display: none; }
.rh-card__kebab { flex: 0 0 auto; width: 30px; height: 30px; margin: -3px -4px 0 0; border: 0; background: none; color: var(--ink-3); cursor: pointer; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background .18s ease, color .18s ease; }
.rh-card__kebab[hidden] { display: none; }
.rh-card__kebab:hover { background: var(--bg-2); color: var(--ink); }
.rh-card__kebab svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
/* research.js opens the menu position:fixed on <body>, above the header and
   the sticky bar, so nothing can clip it. */
.rh-card__menu { position: absolute; right: 0; top: 40px; z-index: 200; min-width: 168px; padding: 6px; background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; box-shadow: 0 12px 30px -10px rgba(20, 22, 24, .28); }
.rh-card__menu[hidden] { display: none; }
.rh-card__menu-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 9px 11px; border-radius: 7px; font-family: var(--sans); font-size: 13px; line-height: 1.4; text-align: left; color: var(--ink); cursor: pointer; }
.rh-card__menu-item:hover { background: var(--bg-2); }
.rh-card__menu-item svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ink-3); }
.rh-card__menu-item.is-on, .rh-card__menu-item.is-on svg { color: var(--spark); }

.rh__empty, .rh__none { text-align: center; padding: clamp(50px, 9vw, 120px) 0; color: var(--ink-3); }
.rh__empty h2 { font-weight: 400; margin-bottom: .4em; color: var(--ink); }
.rh__none[hidden] { display: none; }

@media (max-width: 1200px) {
  .rh__grid { grid-template-columns: repeat(2, 1fr); }
  .rh.is-rail .rh__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .rh, .rh.is-rail { grid-template-columns: 1fr; }
  .rh__side { display: none; }
  .rh-burger { display: none; }
  .rh__pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .rh__pills::-webkit-scrollbar { display: none; }
  .rh__grid, .rh.is-rail .rh__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Bottom tab bar (fixed, frosted, icon + tiny label): where the sidebar is
   hidden (touch screens up to 1440px, tablet landscape, portrait up to 1024px,
   short landscape phones), Home / Trending / Library move down here. */
.rh-bottnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: none; align-items: stretch;
  height: calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(20, 22, 24, .07);
}
.rh-bottnav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-3); font-size: 10px; font-weight: 500; line-height: 1.2; letter-spacing: .02em; text-decoration: none; }
.rh-bottnav a svg { width: 22px; height: 22px; }
.rh-bottnav a.is-active { color: var(--spark); }

@media (any-pointer: coarse) and (max-width: 1440px),
       (min-width: 901px) and (max-width: 1366px) and (orientation: landscape) and (max-aspect-ratio: 3/2),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: landscape) and (max-height: 500px) {
  .rh-bottnav { display: flex; }
  .rh__side { display: none; }
  .rh, .rh.is-rail { grid-template-columns: 1fr; }
  .rh { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .bar .rh-burger { display: none; }
  /* Kikuemon's launcher sits over the bar's right end otherwise. */
  body.rh-page .kk-launch { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 560px) {
  .rh__grid, .rh.is-rail .rh__grid { grid-template-columns: 1fr; gap: 26px; }
  /* The full-bleed feed (hub + Trending): edge-to-edge cards, and the
     excerpt veil shown by SCROLL, not hover (research.js .is-previewing). */
  .rh--feed .rh__content { padding-left: 0; padding-right: 0; }
  .rh--feed .rh__pills, .rh--feed .rh-ttabs { margin-left: 16px; margin-right: 16px; }
  .rh--feed .rh__grid { gap: 14px; }
  .rh--feed .rh-card { padding: 0; border-radius: 0; }
  .rh--feed .rh-card:hover { padding: 0; margin: 0; background: none; box-shadow: none; }
  .rh--feed .rh-card__thumb { border-radius: 0; aspect-ratio: auto; }
  .rh--feed .rh-card__thumb img { height: auto; }
  .rh--feed .rh-card__veil { transition: opacity .4s ease; }
  .rh--feed .rh-card.is-previewing .rh-card__veil { opacity: 1; }
  .rh--feed .rh-card__foot { padding: 13px 16px 6px; }
}
@media (max-width: 560px) and (orientation: portrait) {
  .rh-libpage__grid {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: calc((100% - 16px) / 2); grid-template-columns: none;
    gap: 16px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 8px; scrollbar-width: none;
  }
  .rh-libpage__grid::-webkit-scrollbar { display: none; }
  .rh-libpage__grid .rh-card { scroll-snap-align: start; min-width: 0; }
}

/* --- the slide-in drawer (tablets and phones) --- */
html.rh-drawer-open { overflow: hidden; }
html.rh-drawer-open .kk-launch { display: none !important; }
.rh-drawer { position: fixed; inset: 0; z-index: 1100; visibility: hidden; font-size: 15px; line-height: 1.65; }
.rh-drawer.is-open { visibility: visible; }
.rh-drawer__scrim { position: absolute; inset: 0; background: rgba(10, 12, 15, .4); backdrop-filter: blur(2px); opacity: 0; transition: opacity .3s ease; }
.rh-drawer.is-open .rh-drawer__scrim { opacity: 1; }
.rh-drawer__panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(310px, 85vw); display: flex; flex-direction: column; gap: 20px; padding: 7px 16px 16px 12px; background: var(--bg); box-shadow: 0 0 60px rgba(10, 12, 15, .28); overflow-y: auto; transform: translateX(-100%); transition: transform .32s cubic-bezier(.4, 0, .2, 1); }
.rh-drawer.is-open .rh-drawer__panel { transform: none; }
.rh-drawer__head { display: flex; align-items: center; gap: 10px; }
.rh-drawer .rh-burger { display: inline-flex; }
.rh-drawer__logo, .rh-stick__logo { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.rh-drawer__logo img, .rh-stick__logo img { width: 22px; height: 22px; }
.rh-drawer__logo b, .rh-stick__logo b { font-family: var(--display); font-size: 1.3rem; font-weight: 400; letter-spacing: .005em; line-height: 1; }
.rh-drawer__nav { display: flex; flex-direction: column; }
.rh-drawer__nav a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--ink); transition: background .15s ease; }
.rh-drawer__nav a:hover { background: var(--bg-2); }
.rh-drawer__nav a > svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--ink-3); }
.rh-drawer__catdot { display: inline-flex; flex: 0 0 auto; color: var(--pillar, var(--spark)); }
.rh-drawer__catdot svg { width: 18px; height: 18px; }
.rh-drawer__divider { margin: 8px 0; border: 0; border-top: 1px solid var(--hair); }
.rh-drawer__sub { border-top: 1px solid var(--hair); padding-top: 18px; }
.rh-drawer__sub-title { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.rh-drawer__sub-sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin: 0 0 14px; }
.rh-drawer__subform { display: flex; flex-direction: column; }
/* MM Carz stretches this one; the owner wants every subscribe button tight
   and left (2026-09-27), so it matches the sidebar's. */
.rh-drawer__subform-btn { margin-top: 4px; }
.rh-drawer__socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 18px; padding-top: 4px; }
.rh-drawer__socials a { display: inline-flex; }
.rh-drawer__socials a:hover { opacity: .7; }
.rh-drawer__socials svg { width: 15px; height: 15px; display: block; }
.rh-drawer__copy { margin-top: auto; font-size: 11px; color: var(--ink-3); }

/* --- the sticky bar: takes the header's place on scroll-down --- */
.rh-stick { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: var(--bg); transform: translateY(-100%); transition: transform .35s ease; will-change: transform; font-size: 15px; line-height: 1.65; }
.rh-stick.is-shown { transform: none; }
/* 19px left puts the 38px burger's centre over the rail's icons (38px), the
   same spot the header's own burger sits at, so it doesn't jump when the two
   bars swap. */
.rh-stick__inner { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); height: 52px; padding: 0 clamp(14px, 2.5vw, 24px) 0 19px; }
.rh-stick__lead { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.rh-stick__logo { flex: 0 0 auto; }
.rh-stick__pills { display: flex; gap: 8px; overflow-x: auto; min-width: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.rh-stick__pills::-webkit-scrollbar { display: none; }
.rh-stick__pills .rh__pill { flex: 0 0 auto; }
/* Trending: the period tabs dead-centre */
.rh-stick--trend .rh-stick__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
.rh-stick--trend .rh-stick__lead { justify-self: start; }
.rh-stick--trend .rh-ttabs--stick { justify-self: center; }
/* Library and lists: the mark centred */
.rh-stick--plain .rh-stick__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
@media (max-width: 600px) {
  .rh-stick__logo { display: none; }
  .rh-stick--plain .rh-stick__logo { display: flex; }
}
/* The sticky bar's burger opens the drawer where the sidebar is hidden. */
@media (max-width: 1024px),
       (min-width: 901px) and (max-width: 1366px) and (orientation: landscape) and (max-aspect-ratio: 3/2),
       (min-width: 901px) and (max-width: 1440px) and (orientation: landscape) and (any-pointer: coarse) {
  .rh-stick .rh-burger { display: inline-flex; }
}

/* =============================================================================
   Trending (/research/trending/): underline Daily / Weekly / Monthly tabs over
   three panels of ranked cards, one column denser than the hub.
   ============================================================================= */
.rh--trend .rh__grid, .rh--trend.is-rail .rh__grid { grid-template-columns: repeat(4, 1fr); }
.rh-ttabs { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--hair); margin: 0 0 clamp(18px, 2.4vw, 28px); }
.rh-ttab { margin-bottom: -1px; padding: 9px 14px; border: 0; border-bottom: 2px solid transparent; background: none; font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--ink-3); cursor: pointer; transition: color .18s ease, border-color .18s ease; }
.rh-ttab:hover { color: var(--ink); }
.rh-ttab.is-active { color: var(--ink); font-weight: 700; border-bottom-color: #e2683b; }
.rh-ttab:focus-visible { outline: 2px solid #e2683b; outline-offset: 2px; border-radius: 4px; }
.rh-ttabs--stick { flex: 1 1 auto; min-width: 0; margin: 0; border-bottom: 0; overflow-x: auto; scrollbar-width: none; }
.rh-ttabs--stick::-webkit-scrollbar { display: none; }
.rh-ttabs--stick .rh-ttab { flex: 0 0 auto; padding: 8px 12px; }
.rh-tpanel[hidden] { display: none; }
.rh-tpanel .rh__grid { counter-reset: rhrank; }
.rh-tpanel .rh-card { counter-increment: rhrank; }
.rh-card__rank { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 800; line-height: 1; box-shadow: 0 2px 8px rgba(10, 12, 15, .2); }
.rh-card__rank::before { content: counter(rhrank); }
@media (max-width: 1200px) {
  .rh--trend .rh__grid, .rh--trend.is-rail .rh__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .rh--trend .rh__grid, .rh--trend.is-rail .rh__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .rh--trend .rh__grid, .rh--trend.is-rail .rh__grid { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape) and (max-aspect-ratio: 3/2),
       (min-width: 901px) and (max-width: 1440px) and (orientation: landscape) and (any-pointer: coarse) {
  .rh--trend .rh__grid, .rh--trend.is-rail .rh__grid { grid-template-columns: repeat(3, 1fr); }
  .rh .rh-libpage__grid, .rh.is-rail .rh-libpage__grid { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================================
   Library (/research/library/)
   ============================================================================= */
.rh-libpage__head { margin-bottom: clamp(22px, 3vw, 38px); }
.rh .rh-libpage__title { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 400; letter-spacing: -.02em; margin: 0 0 .3em; }
.rh-libpage__lead { color: var(--ink-3); font-size: 15px; line-height: 1.6; margin: 0; max-width: 620px; }
.rh-libpage__sec { margin-bottom: clamp(34px, 5vw, 60px); scroll-margin-top: 80px; }
.rh-libpage__sechead { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.rh-libpage__icon { display: inline-flex; color: var(--ink-3); }
.rh-libpage__icon svg { width: 20px; height: 20px; }
.rh .rh-libpage__sectitle { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 500; margin: 0; }
.rh-libpage__count { font-size: 13px; color: var(--ink-3); margin-right: auto; }
.rh-libpage__viewall { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--spark); white-space: nowrap; }
.rh-libpage__viewall:hover { text-decoration: underline; text-underline-offset: 3px; }
.rh-libpage__viewall[hidden], .rh-libpage__clear[hidden] { display: none; }
.rh-libpage__clear { margin-left: 14px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); background: none; border: 0; cursor: pointer; }
.rh-libpage__clear:hover { color: #9C4A2C; }
.rh-libpage__clear svg { width: 15px; height: 15px; }
.rh-libpage__emptytext { color: var(--ink-3); font-size: 14px; padding: 6px 0 4px; margin: 0; }

/* =============================================================================
   The lists (/research/history/, /bookmarks/, /liked/): a centred column and
   a right mini-rail, a back link, the title and "N articles", then the cards
   as rows, grouped Today / Yesterday / This week / Earlier.
   ============================================================================= */
.rh-list__back { display: inline-flex; align-items: center; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--ink-3); margin: 0 0 clamp(14px, 2vw, 24px); transition: color .18s ease; }
.rh-list__back:hover { color: var(--ink); }
.rh-list { display: grid; grid-template-columns: minmax(0, 860px) 200px; gap: clamp(28px, 4vw, 56px); justify-content: center; align-items: start; }
.rh-list__main { min-width: 0; }
.rh-list__head { margin-bottom: clamp(24px, 3.5vw, 40px); }
.rh-list__titlerow { display: flex; align-items: center; gap: 10px; }
.rh-list__ic { display: inline-flex; color: var(--ink-3); }
.rh-list__ic svg { width: 22px; height: 22px; }
.rh .rh-list__title { font-weight: 400; font-size: clamp(1.55rem, 2.6vw, 2rem); letter-spacing: -.02em; margin: 0; }
.rh-list__count { font-size: 13px; color: var(--ink-3); margin: 7px 0 0; }
.rh-list__count:empty { display: none; }
.rh-list__group { margin-bottom: clamp(30px, 4.5vw, 50px); }
.rh-list__group:last-child { margin-bottom: 0; }
.rh .rh-list__grouplabel { font-family: var(--sans); font-size: 11px; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin: 0 0 clamp(14px, 2vw, 18px); }
.rh-list__emptytext { color: var(--ink-3); font-size: 14px; }
.rh-list .rh__grid { display: flex; flex-direction: column; gap: 0; }
.rh-list .rh-card { flex-direction: row; align-items: flex-start; gap: 16px; padding: 16px 0; margin: 0; border-radius: 0; }
.rh-list .rh-card:hover { padding: 16px 0; margin: 0; background: none; box-shadow: none; }
.rh-list .rh-card + .rh-card { border-top: 1px solid var(--hair); }
.rh-list .rh-card__thumb { flex: 0 0 200px; width: 200px; aspect-ratio: 16 / 9; border-radius: 12px; }
.rh-list .rh-card__foot { flex: 1 1 auto; min-width: 0; padding: 2px 0 0; }
.rh-list .rh-card__av { display: none; }
.rh .rh-list .rh-card__title { font-size: 15.5px; margin-bottom: 6px; }
@media (max-width: 560px) {
  .rh-list .rh-card { gap: 12px; }
  .rh-list .rh-card__thumb { flex-basis: 130px; width: 130px; }
  .rh .rh-list .rh-card__title { font-size: 14px; }
}
.rh-list__rail { position: sticky; top: 76px; align-self: start; display: flex; flex-direction: column; gap: 18px; padding-top: 46px; }
.rh-list__raillink { display: inline-flex; align-items: center; gap: 9px; border: 0; background: none; padding: 0; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.rh-list__raillink:hover { color: var(--spark); }
.rh-list__raillink svg { width: 17px; height: 17px; color: var(--ink-3); }
.rh-list__raillink[hidden] { display: none; }
.rh-list__actions { display: none; justify-content: flex-end; margin-bottom: clamp(20px, 3vw, 32px); }
.rh-list.is-empty .rh-list__actions { display: none; }
.rh-list__clearpill { font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--ink); background: var(--bg-2); border: 1px solid transparent; border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: background .18s ease, color .18s ease; }
.rh-list__clearpill:hover { background: var(--hair); }
.rh-list__clearpill[hidden] { display: none; }
@media (max-width: 1024px) {
  .rh-list { grid-template-columns: 1fr; }
  .rh-list__rail { display: none; }
  .rh-list__actions { display: flex; }
}
@media (min-width: 1025px) {
  .rh-list.is-empty { grid-template-columns: minmax(0, 860px); }
  .rh-list.is-empty .rh-list__rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rh-card, .rh-card__thumb img, .rh-trend__thumb img, .rh-stick, .rh-drawer__panel, .rh-drawer__scrim { transition: none; }
  .rh-card:hover .rh-card__thumb img, .rh-trend__item:hover .rh-trend__thumb img { transform: none; }
}