/* =====================================================================
   CTFY · Midnight Theta · FAQ (/faq/) — page layer
   Spec: docs/redesign/pages/37-faq.md. Builds on css/site.css (foundation) and css/modules.css (M01–M33).
   A calm page: no scroll-linked motion, no film, no WebGL (the finale uses the static field still).
   Chapters: I ask (H6 paper subhero) · II answers (M15 tabs + M30 bridge, porcelain) · III close (M17 compact)
   ===================================================================== */

/* Deep links from other pages (#youth #corporate #individual) land with the dock clear of the tablist */
#faq,#youth,#corporate,#individual,#ask{scroll-margin-top:96px}

/* ---------- I · Paper subhero: the lit canopy, faint, under the aurora ---------- */
.faq-hero__media{margin:0}
.faq-hero__media img{width:100%;height:100%;object-fit:cover;object-position:72% 50%;opacity:.3;
  -webkit-mask-image:linear-gradient(90deg,transparent 10%,#000 85%),linear-gradient(to bottom,#000 55%,transparent);-webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 10%,#000 85%),linear-gradient(to bottom,#000 55%,transparent);mask-composite:intersect}
@media (max-width:767px){.faq-hero__media img{object-position:62% 50%;opacity:.22}}

/* ---------- II · Answers ---------- */
.faq-answers{padding-top:calc(160px + var(--section-y-tight))}
.faq-answers .tabs__list{margin-bottom:0}
@media (max-width:599px){
  .faq-answers .tabs__list{scroll-snap-type:x proximity;scroll-padding-inline:4px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);border-radius:0;border-inline:0;width:auto}
  .faq-answers .tabs__tab{scroll-snap-align:center;white-space:nowrap}
}
/* panels: intro + photo (sticky) on the left, the five answers on the right */
.faq-panel:not([hidden]){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-panel>.m-tab-heading{grid-column:1/-1}
.faq-panel__side{position:sticky;top:112px;display:grid;gap:clamp(24px,3vw,36px)}
.faq-panel__side .m-faq__intro{margin:0;color:var(--fg-1)}
.faq-panel__photo{margin:0;aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;background:var(--paper-1);box-shadow:var(--lift-paper)}
.faq-panel__photo picture,.faq-panel__photo img{display:block;width:100%;height:100%}
.faq-panel__photo img{object-fit:cover;object-position:var(--pos,50% 50%)}
.faq-panel__list{min-width:0}
.faq-panel__list .acc__body{max-width:62ch}
@media (max-width:1023px){
  .faq-panel:not([hidden]){grid-template-columns:minmax(0,1fr);gap:28px}
  .faq-panel__side{position:static;gap:20px}
  .faq-panel__photo{aspect-ratio:16/10;max-width:520px}
  .faq-panel__side .m-faq__intro{font-size:calc(var(--t-body) * var(--k-text))}
}
.faq-answers .acc__body a{color:var(--fg-link);text-decoration:underline;text-underline-offset:3px}

/* ---------- II · Own-a-Chamber bridge: a small midnight card at the foot of the porcelain ---------- */
.faq-bridge{margin-top:clamp(64px,8vw,112px);background:none}
.faq-bridge .m-bridge__product{max-width:300px}

/* ---------- III · Close: compact finale ---------- */
.faq-finale .m-finale__inner h2{max-width:20ch}
@media (max-width:767px){.faq-hero__media{display:none}}   /* phones: aurora only (the 2400px canopy still is not fetched) */
.faq-panel:target{outline:none}   /* a deep link (#youth …) focuses the panel: no ring around the whole block */