/* TUUYA — FAQ hub (/faq/): search filter + clustered Q&A.
   Reuses the site design system: paper/ink/brass tokens, hairlines, no radii/shadows. */

.faqhub .silo-hero { margin-bottom: clamp(1.6rem, 4vh, 2.4rem); }


/* Read more / read less: lead paragraph always visible, detail collapses. Text stays in the DOM.
   Same divider style as the pillar read-more (.readmore-btn in silo.css), here on all viewports. */
.faq-toggle { display: flex; align-items: center; gap: 0.85rem; width: 100%; max-width: 62ch; margin: 0.2rem 0 0.9rem;
  padding: 0.15rem 0; background: none; border: 0; cursor: pointer; color: var(--brass-dark);
  font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.03em; }
.faq-toggle::before, .faq-toggle::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.faq-toggle .rm-in { display: inline-flex; align-items: center; gap: 0.45rem; }
.faq-toggle .rm-caret { width: 0.46rem; height: 0.46rem; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.25s; }
.faq-toggle.is-open .rm-caret { transform: translateY(1px) rotate(-135deg); }
.faq-toggle:hover { color: var(--ink); }
.faq-searching .faq-extra[hidden] { display: block; }

.faq-tools { padding: 0.2rem 0 1.2rem; border-bottom: 1px solid var(--hairline-strong); margin-bottom: clamp(2rem, 5vh, 3rem); }
.faq-search-label { display: block; font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.5rem; }
.faq-search { width: min(34rem, 100%); font: inherit; color: var(--ink); background: rgba(255, 255, 255, 0.55); border: 1px solid var(--hairline-strong); padding: 0.65rem 0.9rem; border-radius: 0; }
.faq-search:focus { outline: none; border-color: var(--brass); }
.faq-count { margin-top: 0.55rem; font-size: 0.82rem; letter-spacing: 0.06em; color: var(--ink-soft); }
.faq-toc { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-top: 1rem; }
.faq-toc a { color: var(--brass-dark); text-decoration: none; font-size: 0.9rem; border-bottom: 1px solid transparent; }
.faq-toc a:hover { color: var(--ink); border-bottom-color: var(--brass); }

.faq-cluster { margin-bottom: clamp(2.4rem, 6vh, 3.6rem); scroll-margin-top: 6.5rem; }
.faq-cluster-kick { border-top: 1px solid var(--hairline-strong); padding-top: 1rem; }
.faq-item { max-width: 62ch; padding: 1.1rem 0 0.3rem; border-top: 1px solid var(--hairline); }
.faq-item:first-of-type { border-top: 0; }
.faq-item h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.2; margin-bottom: 0.6rem; }
.faq-item p { color: var(--ink); margin-bottom: 0.8rem; }
.faq-item p + p { color: var(--ink-soft); }
.faq-more a { color: var(--brass-dark); text-decoration: none; border-bottom: 1px solid var(--brass); }
.faq-more a:hover { color: var(--ink); }

.faq-empty, .faq-outro { border: 1px solid var(--hairline-strong); border-top: 2px solid var(--brass); background: rgba(255, 255, 255, 0.4); padding: clamp(1.4rem, 3vw, 2rem); max-width: 42rem; margin-bottom: clamp(2rem, 5vh, 3rem); }
.faq-outro { margin-top: 1rem; }
.faq-empty h2, .faq-outro h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin-bottom: 0.6rem; }
.faq-empty p, .faq-outro p { color: var(--ink-soft); max-width: 52ch; margin-bottom: 0.9rem; }