/* Never Too Far -- FAQ page, ticket T08.
   Renders the operator's own reference (a calm list: a hairline rule above
   each item, the question in a large serif, a small open/close mark at the
   right, the answer beneath in a quieter serif with generous line height and
   a measure near 70 characters) in this site's own tokens: paper ground and
   grain come from body::before in site.css, no markup needed on this page;
   every word is --serif; --sans is reserved for the chrome this page shares
   with every other inner page; --hand is never used here (T08 must-not).
   Disclosure state is native <details>/<summary> only -- no script, no icon
   font, no image download; the mark is two CSS pseudo-elements that rotate
   from a plus to a minus, purely by the details[open] attribute selector. */

main.faq{max-width:760px;margin:0 auto;
  padding:clamp(120px,18vh,168px) clamp(20px,5vw,60px) clamp(90px,14vh,150px)}

main.faq h1{font-weight:300;font-size:clamp(30px,4.4vw,54px);line-height:1.14;
  margin:0 0 clamp(46px,7vh,72px);text-align:center;text-wrap:balance}

.faq-list{text-align:left}

/* the hairline: one rule above every item, including the first -- the
   operator's own reference names a rule above each item, so the list opens
   on one too rather than starting bare against the page. */
.faq-item{border-top:1px solid rgba(43,42,38,.16);padding:clamp(26px,3.6vh,34px) 0}

.faq-item summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(16px,3vw,28px);min-height:44px;
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(19px,2.2vw,26px);line-height:1.32}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary:focus-visible{outline:2px solid var(--indigo);outline-offset:4px}

.faq-item .q-text{padding-top:.16em}

/* the mark: a plain plus that becomes a minus on open, drawn with two bars
   on one empty, aria-hidden span -- no icon font, no image, no inline SVG
   needed for a shape this simple. */
.faq-item .mark{flex:0 0 auto;position:relative;width:18px;height:18px;margin-top:.46em}
.faq-item .mark::before,.faq-item .mark::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--ink);transform:translate(-50%,-50%)}
.faq-item .mark::before{width:100%;height:1.5px}
.faq-item .mark::after{width:1.5px;height:100%;
  transition:transform .3s ease,opacity .3s ease}
.faq-item[open] summary .mark::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
@media(prefers-reduced-motion:reduce){
  .faq-item .mark::after{transition:none}
}

.faq-answer{margin:clamp(16px,2.4vh,22px) 0 0;max-width:28em;
  font-family:var(--serif);font-weight:400;color:#3b3934;
  font-size:clamp(15.5px,1.55vw,18px);line-height:1.78}

/* the one inline link on this page (answer four, "packages page"): quiet ink
   colour, a soft vermillion underline at rest -- the same accent token the
   nav/footer already use for their own hover strikes -- brightening to the
   full token on hover/focus rather than introducing a new link-blue. */
.faq-answer a{color:inherit;text-decoration-line:underline;
  text-decoration-color:rgba(198,58,43,.55);text-decoration-thickness:1px;
  text-underline-offset:3px;transition:text-decoration-color .3s ease}
@media(hover:hover){
  .faq-answer a:hover{text-decoration-color:var(--verm)}
}
.faq-answer a:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;
  text-decoration-color:var(--verm)}
@media(prefers-reduced-motion:reduce){
  .faq-answer a{transition:none}
}

@media(max-width:640px){
  main.faq{padding-top:clamp(96px,16vh,140px)}
}