/* ==========================================================================
   Sanctuary v2, page-scoped styles: faq.html (catalog revamp, 2026-07-11).
   Loads AFTER styles.css and only extends it. Every value traces to
   design/brands/sanctuary.md (the kit), to a locked value in styles.css,
   or to a catalog component's extracted motion values. Catalog placements
   on this page: 008 FAQs-Accordion (measured height, one open, plus-circle
   icon), 011 Tilt Card (download cards), 013-style arrow slide (download
   links), 027-style reading progress (top bar). Inner pages are CALM:
   static world-light, no world flips, no pinned stacks.
   House rule: no em or en dashes anywhere in this file.
   ========================================================================== */

/* ---- catalog 027-style reading progress: 3px scroll-driven bar at the top
        edge, kit accent fill; sits under the nav's z-100, invisible at 0 ---- */
.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 99;
  pointer-events: none;
}
.page-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent-cta);   /* kit: accent-cta carries the progress role */
  transform: scaleX(0);
  transform-origin: 0 50%;         /* fills left to right with real scroll */
}

/* ---- Page hero (system vocabulary from the home hero) ---- */
.page-hero {
  padding: 96px 48px 64px;   /* kit: section pads {76, 96, 128}; page gutter 48 */
  text-align: center;
}
.page-eyebrow {
  font-size: 24px;           /* locked system: hero eyebrow 24px (styles.css .hero-eyebrow) */
  font-weight: 400;
  opacity: .82;              /* locked system: eyebrow sits quieter than the h1 */
}
.page-h1 {
  font-size: 80px;           /* kit: hero h1 80px (ref typeScale) */
  line-height: 1.1;          /* kit: ref h1 88px at 80 = 1.1 */
  letter-spacing: -2px;      /* kit: ref h1 letter-spacing -2px */
  font-weight: 400;          /* kit: hierarchy by SIZE at weight 400 */
  margin: 20px auto 0;
}
.page-lead {
  max-width: 760px;          /* derived: calm lead measure inside the ref 1344 content box */
  margin: 32px auto 0;
  font-size: 20px;           /* derived: one step over body 16 (locked sheet-row 20 is the same step) */
  line-height: 1.6;
}

/* ---- Accordion group (catalog 008, re-tokened) ---- */
.faq-sec {
  padding: 32px 48px 0;      /* kit: page gutter 48; hero already carries the top rhythm */
}
.faq-wrap {
  max-width: 900px;          /* derived: single reading column inside the ref 1344 content box */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;                 /* kit: spacing base 16 between cards */
}
.faq-group-head { margin-bottom: 16px; } /* kit: spacing base 16 */

/* accordion card: locked card vocabulary, flat cream fill, radius 32 */
.qa {
  border-radius: 32px;       /* kit: cards flat filled, radius 32, border NONE, shadow NONE */
  overflow: hidden;          /* clips the collapsing answer to the card radius */
}
.qa-h { font-weight: 400; }  /* kit: hierarchy by SIZE at weight 400; the button carries the size */
.qa-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;                 /* kit: radius scale member 24 as the text-to-icon gap */
  padding: 28px 32px;        /* locked system: card pad 32, tightened vertically */
  font-size: 20px;           /* locked system: sheet-row scale 20 (styles.css .sheet-row) */
  text-align: left;
  line-height: 1.35;
}
.qa-btn:hover { background: rgba(250, 222, 222, .35); } /* kit line at 35 percent as the hover wash */

/* plus-circle icon (catalog 008): 28px circle, two 12px bars; choreography
   exact from the export: H bar -90deg -> 90deg, V bar -180deg -> 90deg,
   0.25s cubic-bezier(0.4, 0, 0.2, 1); fills re-tokened to the kit */
.acc-ico {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 100px;
  background: var(--line);   /* component icon fill role -> kit secondary fill */
  position: relative;
  overflow: hidden;
}
.acc-ico i {
  position: absolute;
  width: 1.5px;
  height: 12px;
  background: var(--ink);    /* component bar color role -> kit ink */
  left: calc(50% - 0.75px);
  top: calc(50% - 6px);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.acc-ico .b1 { transform: rotate(-90deg); }
.acc-ico .b2 { transform: rotate(-180deg); }
.qa.open .acc-ico .b1 { transform: rotate(90deg); }
.qa.open .acc-ico .b2 { transform: rotate(90deg); }

/* answer reveal: catalog 008 measured-height pattern; faq.js writes the
   measured pixel height, CSS owns the curve (kit house ease) and the
   reduced-motion kill; noscript forces height auto (head override) */
.qa-a {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height .35s var(--ease-house), opacity .25s ease;
}
.qa.open .qa-a { opacity: 1; }
.qa-a-inner { min-height: 0; }
.qa-a p {
  padding: 0 32px 28px;      /* locked system: card pad 32; matches the button pad */
  font-size: 16px;           /* kit: body 16 */
  line-height: 1.6;          /* derived: answer leading, one step over body 1.5 */
  max-width: 720px;          /* derived: calm answer measure inside the card */
}

/* ---- Downloads: real published documents as pastel cards with catalog 011
        tilt (fine pointers, JS-gated) and a 013-style arrow slide ---- */
.dl-sec {
  padding: 128px 48px 32px;  /* kit: section pad 128 */
}
.dl-sec .display { margin-bottom: 48px; } /* kit: head-to-grid step 48 */
.dl-wrap {
  max-width: 1100px;         /* derived: two-column row grid inside the ref 1344 content box */
  margin: 0 auto;
}
.dl-group {
  font-size: 16px;           /* kit: body 16 */
  color: var(--muted-ink);   /* locked system: muted labels (styles.css .col-head) */
  margin: 32px 0 16px;       /* locked system: card gap 32 above, base 16 below */
}
.dl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;                 /* kit: spacing base 16 */
}
.dl-card {
  position: relative;        /* tilt glare + arrow anchor */
  overflow: hidden;          /* clips the injected glare and the sliding arrow */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 128px;
  border-radius: 24px;       /* kit: radius scale member 24 (locked footer card, sheet, dropdown) */
  padding: 24px 28px;        /* derived: card-scale padding under the card pad 32 */
  color: var(--ink);
}
.dl-kind {
  font-size: 13px;           /* derived: one step under the 14 legal-row scale for the tiny format tag */
  color: var(--muted-ink);
}
.dl-name {
  margin-top: auto;
  font-size: 20px;           /* locked system: sheet-row scale 20 */
  line-height: 1.3;
  max-width: 85%;            /* keeps the name clear of the arrow corner */
}
/* catalog 013-style arrow slide: the resting arrow exits up-right while its
   twin slides in from down-left; pure transform, overflow clipped */
.dl-arrow {
  position: absolute;
  top: 22px;
  right: 24px;
  width: 20px;
  height: 20px;
  overflow: hidden;
}
.dl-arrow svg {
  position: absolute;
  inset: 2px;
  transition: transform .3s var(--ease-house); /* kit house ease at the micro scale */
}
.dl-arrow .a2 { transform: translate(-120%, 120%); }
.dl-card:hover .dl-arrow .a1,
.dl-card:focus-visible .dl-arrow .a1 { transform: translate(120%, -120%); }
.dl-card:hover .dl-arrow .a2,
.dl-card:focus-visible .dl-arrow .a2 { transform: translate(0, 0); }
/* catalog 011 tilt: transform set by faq.js on fine pointers; the card only
   declares the settle transition (component's extracted 0.2s ease-out) */
.dl-card[data-tilt] { transition: transform .2s ease-out; transform-style: preserve-3d; }
.tilt-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 80%);
  transition: opacity .2s ease-out;
}
.dl-card:hover .tilt-glare { opacity: 1; }

/* ---- Staggered scroll reveals (JS-gated via html.js-reveal; no-JS never hides) ---- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}
.js-reveal [data-reveal].in {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease-house), transform .6s var(--ease-house);
  transition-delay: var(--rd, 0s);
}

/* ---- Mobile (locked breakpoint 820; kit: mobile gutter 20, h1 28) ---- */
@media (max-width: 820px) {
  .page-hero { padding: 56px 20px 32px; } /* kit: mobile gutter 20 */
  .page-eyebrow { font-size: 16px; }      /* locked system: mobile eyebrow 16 */
  .page-h1 {
    font-size: 28px;         /* kit: mobile h1 28px */
    letter-spacing: -0.7px;  /* locked system: mobile h1 tracking fingerprint, rounded */
  }
  .page-lead { font-size: 16px; margin-top: 20px; }
  .faq-sec { padding: 16px 20px 0; }
  .qa-btn { padding: 20px 24px; font-size: 16px; } /* kit: body 16 on mobile rows */
  .qa-a p { padding: 0 24px 20px; }
  .dl-sec { padding: 76px 20px 16px; }    /* kit: section pad 76 on mobile */
  .dl-sec .display { margin-bottom: 32px; }
  .dl-grid { grid-template-columns: 1fr; }
  .dl-card { padding: 20px 22px; min-height: 108px; }
  .dl-name { font-size: 16px; }           /* kit: body 16 on mobile rows */
  .dl-arrow { top: 18px; right: 20px; }
}

/* ---- Reduced motion: every animation on this page dies here (build law) ---- */
@media (prefers-reduced-motion: reduce) {
  .qa-a, .acc-ico i { transition: none; }
  .dl-arrow svg { transition: none; }
  .dl-card[data-tilt] { transition: none; transform: none !important; }
  .tilt-glare { display: none; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  .page-progress i { transition: none; }
}