/* /resources: curated library in the Harley.Digital style (white page, ink accents). Loaded after style.css + guides.css, used only by guides.html. */
.rs-main { max-width: none; margin: 0; padding: 0; }
.rs-wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.rs-main [hidden] { display: none !important; }
.rs-main :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 12px; }
.rs-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* hero */
.rs-hero { padding: 64px 0 0; text-align: center; }
.rs-hero .hero-badge { margin-bottom: 22px; }
.rs-title { font-size: clamp(2.5rem, 6vw, 4.1rem); font-weight: 900; line-height: 1.04; letter-spacing: -0.035em; color: var(--ink); }
.rs-lede { max-width: 580px; margin: 18px auto 0; font-size: 1.05rem; line-height: 1.6; color: var(--muted); }

/* section label pill (same as the homepage) */
.rs-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border: 1px solid rgba(10, 10, 11, .26); border-radius: 999px; background: linear-gradient(90deg, rgba(10, 10, 11, .06), rgba(10, 10, 11, .08)); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-strong); }
.rs-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.rs-h2 { margin-top: 16px; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.08; font-weight: 900; letter-spacing: -0.03em; color: var(--ink); }
.rs-sub { margin-top: 10px; font-size: 1rem; color: var(--muted-strong); }

/* featured + list cards: same card treatment as the guide cards */
.rs-featured { padding: 64px 0 0; }
.rs-feat-grid, .rs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rs-feat-grid { margin-top: 26px; }
.rs-card { display: flex; flex-direction: column; padding: 24px 24px 20px; border: 1.5px solid var(--border); border-radius: 20px; background: #fff; color: var(--ink); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.rs-card:hover, .rs-card:focus-visible { transform: translateY(-3px); border-color: rgba(10, 10, 11, .45); box-shadow: 0 22px 40px -28px rgba(10, 10, 11, .55); }
.rs-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.guide-tag.is-type { color: var(--muted-strong); background: #f5f5f5; }
.rs-new { padding: 3px 9px; border-radius: 999px; background: var(--ink); font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.rs-card h3 { margin-top: 14px; font-size: 1.15rem; line-height: 1.25; font-weight: 800; letter-spacing: -0.015em; transition: color .2s ease; }
.rs-card:hover h3, .rs-card:focus-visible h3 { color: var(--ink); }
.rs-card p { margin-top: 8px; font-size: .92rem; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rs-go { margin-top: auto; padding-top: 18px; font-size: .9rem; font-weight: 700; color: var(--ink); }
.rs-go span { display: inline-block; transition: transform .22s ease; }
.rs-card:hover .rs-go span, .rs-card:focus-visible .rs-go span { transform: translateX(4px); }
.rs-card.is-feat { padding: 28px 26px 22px; }
.rs-card.is-feat h3 { font-size: 1.32rem; }

/* filters: two labelled rows (as before) + search */
.rs-browse { padding: 60px 0 100px; }
.rs-filter { display: flex; align-items: center; gap: 16px; max-width: 900px; margin: 14px auto 0; }
.rs-filter:first-child { margin-top: 0; }
.rs-label { flex: 0 0 150px; text-align: right; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-pill[aria-pressed="true"] { color: #fff; border-color: transparent; background: var(--ink); }
.rs-search { max-width: 900px; margin: 22px auto 0; }
.rs-input { display: block; width: 100%; height: 56px; padding: 0 24px; border: 2px solid transparent; border-radius: 999px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(#e2e2e4, #e2e2e4) border-box; font: inherit; font-size: 1rem; color: var(--ink); transition: box-shadow .2s ease; }
.rs-input::placeholder { color: var(--muted); }
.rs-input:focus { outline: 0; background: linear-gradient(#fff, #fff) padding-box, var(--ink) border-box; box-shadow: 0 0 0 5px rgba(10, 10, 11, .12); }

.rs-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 48px; }
.rs-h3 { font-size: 1.2rem; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); }
.rs-count { margin-left: 8px; font-weight: 700; color: var(--muted); }
.rs-clear { padding: 4px 0; border: 0; background: none; font: inherit; font-size: .88rem; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rs-clear:hover { color: var(--ink); }
.rs-grid { margin-top: 18px; }

.rs-empty { max-width: 420px; margin: 48px auto 0; text-align: center; }
.rs-empty h3 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
.rs-empty p { margin-top: 8px; color: var(--muted-strong); }
.rs-empty button { margin-top: 20px; padding: 11px 24px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; font: inherit; font-size: .9rem; font-weight: 700; color: var(--ink); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.rs-empty button:hover { background: var(--ink); color: #fff; }
.rs-nojs { max-width: 720px; margin: 32px auto 0; }
.rs-nojs li { margin: 6px 0 6px 20px; }

@media (max-width: 1000px) {
  .rs-feat-grid, .rs-grid { grid-template-columns: repeat(2, 1fr); }
  .rs-feat-grid .rs-card:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .rs-wrap { padding: 0 20px; }
  .rs-hero { padding-top: 34px; }
  .rs-featured { padding-top: 48px; }
  .rs-feat-grid, .rs-grid { grid-template-columns: 1fr; gap: 14px; }
  .rs-card, .rs-card.is-feat { padding: 22px 20px 18px; }
  .rs-filter { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rs-label { flex: none; text-align: left; }
  .rs-browse { padding: 44px 0 72px; }
  .rs-input { height: 52px; padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) { .rs-card, .rs-go span { transition: none; } .rs-card:hover { transform: none; } }

/* "saving." sits on a rounded block, like the Websites title */
.rs-title .accent-text { display: inline-block; padding: .04em .22em .1em; border-radius: 16px; background: var(--winter); color: #fff; }