/* faq.css: the FAQ (src\pages\faq.mjs). A still photo band with the search and the topics on its shaded left; the
   questions by topic on the paper; a close with Walter on the ink. */

/* ---------- the header: the photo band, the words on its shaded left ---------- */
.faq-hero { display: grid; overflow: hidden; padding: 0; min-height: clamp(540px, 44vw, 640px); }
.faq-hero > * { grid-area: 1 / 1; }
.faq-hero__media { position: relative; overflow: hidden; }
/* the photo reaches 12% past the right edge, so the owner stands right of the words and her rail of clothes still shows */
.faq-hero__img { position: absolute; top: 0; left: 0; width: 112%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; filter: saturate(0.9) contrast(1.03); }
.faq-hero__shade { pointer-events: none; z-index: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 92%, transparent) 0%, color-mix(in srgb, var(--c-ink) 86%, transparent) 32%, color-mix(in srgb, var(--c-ink) 44%, transparent) 44%, transparent 54%); }
.faq-hero__in { z-index: 2; width: 100%; align-self: center; padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
.faq-hero__words { max-width: 520px; }
.faq-hero__title { max-width: 12ch; font-size: var(--fs-h1); }
.faq-hero__line { margin-top: var(--space-3); font-size: 1.1875rem; line-height: 1.55; color: var(--c-on-ink-soft); }
.faq-search { position: relative; max-width: 460px; margin-top: var(--space-5); }
.faq-search__icon { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--c-ink-soft); pointer-events: none; }
.faq-search__input { box-sizing: border-box; width: 100%; height: 56px; padding: 0 20px 0 50px; border: 0; border-radius: 999px; background: var(--c-paper); color: var(--c-ink); font: 500 1.0625rem/1 var(--font-ui); box-shadow: var(--shadow-m); -webkit-appearance: none; appearance: none; }
.faq-search__input::placeholder { color: var(--c-ink-soft); opacity: 1; }
.faq-search__input:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.faq-search__status { min-height: 1.5em; margin-top: 10px; font-size: var(--fs-small); color: var(--c-on-ink-soft); }
.faq-topics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-2); }
.faq-topic { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--c-on-ink) 34%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--c-ink) 46%, transparent); color: var(--c-on-ink); font: 600 0.9375rem/1 var(--font-ui); text-decoration: none; transition: background var(--dur-fast) var(--ease-out); }
.faq-topic:hover { background: color-mix(in srgb, var(--c-on-ink) 14%, var(--c-ink)); }
.faq-topic:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }

/* ---------- the questions: by topic, on the paper ---------- */
.faq-list { padding-top: clamp(56px, 6vw, 96px); scroll-margin-top: 64px; }
.faq-list__in { max-width: calc(1040px + 2 * var(--gutter)); }
.faq-group { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: var(--space-3) var(--space-6); padding: var(--space-6) 0; border-top: 1px solid var(--c-line); scroll-margin-top: 80px; }
.faq-group:first-child { padding-top: 0; border-top: 0; }
.faq-group__title { position: sticky; top: 104px; align-self: start; font-size: var(--fs-h3); }
.faq-none { padding: var(--space-5) 0; font-size: 1.125rem; line-height: 1.55; }
.faq-none__title { margin-bottom: 8px; font: var(--display-weight) 1.5rem/1.2 var(--font-display); font-stretch: var(--display-stretch); }
.faq-none a { color: var(--c-brand-text); font-weight: 600; }

/* ---------- the close: Walter, and the two ways on ---------- */
.lattice--faq-close { right: 0; top: 0; width: 46%; height: 80%; opacity: 0.1; -webkit-mask-image: radial-gradient(100% 100% at 100% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(100% 100% at 100% 0%, #000 0%, transparent 70%); }
.faq-close__in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 4.4vw, 72px); align-items: center; max-width: calc(1040px + 2 * var(--gutter)); }
.faq-close__who { display: grid; justify-items: center; gap: 14px; margin: 0; text-align: center; }
.faq-close__photo { display: block; width: 160px; height: 160px; border-radius: 50%; object-fit: cover; object-position: 50% 28%; box-shadow: 0 0 0 4px var(--c-ink), 0 0 0 5px var(--c-ink-line); }
.faq-close__who b { display: block; font: var(--display-weight) 1.375rem/1.1 var(--font-display); font-stretch: var(--display-stretch); }
.faq-close__who span { display: block; margin-top: 3px; font-size: var(--fs-small); color: var(--c-on-ink-soft); }
.faq-close__title { max-width: 18ch; }
.faq-close__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-5); }

/* ---------- narrower ---------- */
@media (max-width: 900px) {
  .faq-group { grid-template-columns: minmax(0, 1fr); }
  .faq-group__title { position: static; }
}
@media (max-width: 760px) {
  /* the photo on top, the words under it on the ink */
  .faq-hero { display: block; min-height: 0; }
  .faq-hero__media { height: 340px; }
  .faq-hero__img { width: calc(100% + 2px); left: -1px; object-position: 56% 22%; }
  .faq-hero__shade { display: none; }
  .faq-hero__in { position: relative; padding-top: var(--space-5); padding-bottom: var(--space-6); }
  .faq-close__in { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .faq-close__who { grid-template-columns: auto auto; align-items: center; justify-items: start; text-align: left; }
  .faq-close__photo { width: 96px; height: 96px; }
}