/* ==========================================================================
   OFFCUT — Thread Theme · FAQ page
   ========================================================================== */

/* ==========================================================================
   01 · HERO
   ========================================================================== */
.fhero { position: relative; overflow: hidden; background: var(--sw-sand); padding: calc(var(--bar-h) + var(--head-h) + 20px) 0 clamp(40px, 5vw, 72px); }
.fhero__mark {
  position: absolute; right: 7vw; top: 50%; transform: translateY(-42%) rotate(8deg);
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(18rem, 40vw, 44rem); line-height: .8;
  color: transparent; -webkit-text-stroke: 1.5px rgba(13, 13, 12, .16);
  pointer-events: none;
  animation: markIn 1.6s var(--ease) both;
}
@keyframes markIn { from { opacity: 0; transform: translateY(-36%) rotate(18deg); } }
.fhero__in { position: relative; display: grid; gap: clamp(22px, 3vw, 36px); }
.fhero .crumbs { display: flex; gap: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.fhero .crumbs a { opacity: .6; }
.fhero .crumbs span[aria-hidden] { opacity: .35; }
.fhero__title { font-weight: 500; font-size: clamp(3.4rem, 9.6vw, 10.5rem); line-height: .84; letter-spacing: -.065em; }
.fhero__title .serif { font-size: 1.04em; letter-spacing: -.035em; }

.fsearch { display: grid; gap: 10px; max-width: 820px; }
.fsearch__field {
  display: flex; align-items: center; gap: 14px;
  height: 72px; padding: 0 14px 0 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .8);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 20px 50px -30px rgba(13, 13, 12, .4);
  transition: box-shadow .4s var(--ease), background-color .4s;
}
.fsearch__field:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--ink), 0 24px 60px -30px rgba(13, 13, 12, .5); }
.fsearch__field .i { width: 24px; height: 24px; }
.fsearch__field input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: clamp(16px, 1.6vw, 20px); letter-spacing: -.02em; }
.fsearch__field input::placeholder { color: var(--mute); }
.fsearch__field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.fsearch__field kbd { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; color: var(--mute); }
.fsearch__meta { color: var(--ink-3); font-size: 10.5px; padding-left: 26px; }
.fhero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fhero__chips .mono { color: var(--ink-3); margin-right: 6px; font-size: 10.5px; }
.fhero__chips .chip { background: rgba(255, 255, 255, .5); border-color: rgba(13, 13, 12, .12); }

/* ==========================================================================
   02 · BODY
   ========================================================================== */
.fbody { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); padding-block: clamp(48px, 6vw, 96px) clamp(72px, 8vw, 120px); align-items: start; }
.fnav { align-self: stretch; }
.fnav__in { position: sticky; top: calc(var(--bar-h) + var(--head-h) + 28px); display: grid; gap: 14px; transition: top .6s var(--ease); }
.bar-hidden .fnav__in { top: calc(var(--head-h) + 28px); }
.fnav__label { color: var(--mute); font-size: 10.5px; }
.fnav__list { display: grid; gap: 2px; border-left: 1px solid var(--line); }
.fnav__list a {
  position: relative;
  display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px 10px 18px;
  font-size: 14px; color: var(--ink-3);
  transition: color .3s, background-color .3s;
  border-radius: 0 var(--r-s) var(--r-s) 0;
}
.fnav__list a::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px; background: var(--ink); transform: scaleY(0); transition: transform .45s var(--ease); }
.fnav__list a:hover { color: var(--ink); background: rgba(13, 13, 12, .03); }
.fnav__list a.is-on { color: var(--ink); font-weight: 500; }
.fnav__list a.is-on::before { transform: none; }
.fnav__list .i { width: 17px; height: 17px; }
.fnav__list small { font-family: var(--f-mono); font-size: 10px; color: var(--mute); font-weight: 400; }
.fnav__list a.is-empty { opacity: .35; pointer-events: none; }
.fnav__toggle { display: inline-flex; align-items: center; gap: 8px; justify-self: start; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; transition: border-color .3s; }
.fnav__toggle:hover { border-color: var(--ink); }
.fnav__toggle .i { transition: transform .45s var(--ease); }
.fnav__toggle[aria-pressed="true"] .i { transform: rotate(45deg); }

.fmain { display: grid; gap: clamp(48px, 5vw, 72px); min-width: 0; }
.qgroup { scroll-margin-top: calc(var(--bar-h) + var(--head-h) + 24px); }
.qgroup[hidden] { display: none; }
.qgroup__head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.qgroup__ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--white); }
.qgroup__ico .i { width: 18px; height: 18px; }
.qgroup__head h2 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; letter-spacing: -.04em; }
.qgroup__n { margin-left: auto; color: var(--mute); font-size: 11px; }

.fq { border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--bar-h) + var(--head-h) + 24px); }
.fq[hidden] { display: none; }
.fq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; }
.fq summary::-webkit-details-marker { display: none; }
.fq__q { font-size: clamp(16px, 1.35vw, 19px); font-weight: 500; letter-spacing: -.02em; transition: transform .45s var(--ease); }
.fq summary:hover .fq__q { transform: translateX(6px); }
.fq__ico { position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--line); transition: background-color .35s, border-color .35s, transform .5s var(--ease); }
.fq__ico::before, .fq__ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; transition: transform .45s var(--ease); }
.fq__ico::after { transform: rotate(90deg); }
.fq[open] .fq__ico { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fq[open] .fq__ico::after { transform: rotate(0); }
.fq__a { padding: 0 64px 26px 0; animation: qIn .5s var(--ease) both; }
@keyframes qIn { from { opacity: 0; transform: translateY(-6px); } }
.fq__body { color: var(--ink-3); line-height: 1.65; font-size: 15px; display: grid; gap: 14px; max-width: 68ch; }
.fq__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 500; }
.fq__body mark, .fq__q mark { background: var(--sw-butter); color: var(--ink); border-radius: 3px; padding: 0 2px; box-shadow: 0 0 0 1px var(--sw-butter); }
.fq__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; font-size: 12.5px; color: var(--mute); }
.fq__help { display: inline-flex; align-items: center; gap: 6px; }
.fq__help button { height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-3); transition: background-color .25s, color .25s, border-color .25s; }
.fq__help button:hover { border-color: var(--ink); color: var(--ink); }
.fq__help button.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fq__help .thanks { color: var(--ok); }
.fq__help .thanks a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fq__link { display: inline-flex; align-items: center; gap: 6px; color: var(--mute); transition: color .25s; }
.fq__link:hover { color: var(--ink); }
.fq.is-target { animation: flash 1.8s var(--ease); }
@keyframes flash { 0%, 40% { background: var(--sw-butter); } 100% { background: transparent; } }

/* answer furniture */
.qt { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; background: var(--white); border-radius: var(--r-s); overflow: hidden; }
.qt th { text-align: left; font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding: 12px 14px; border-bottom: 1px solid var(--line); }
.qt td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.qt tr:last-child td { border-bottom: 0; }
.qsteps { counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.qsteps li { counter-increment: s; display: grid; gap: 4px; padding: 14px; border-radius: var(--r-s); background: var(--white); font-size: 13px; }
.qsteps li::before { content: "0" counter(s); font-family: var(--f-mono); font-size: 10px; color: var(--mute); }
.qsteps b { color: var(--ink); font-weight: 500; }
.qcare { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.qcare li { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 14px 8px; border-radius: var(--r-s); background: var(--white); font-size: 12.5px; }
.qcare span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ink); font-family: var(--f-mono); font-size: 12px; color: var(--ink); }

.fempty { display: grid; gap: 16px; justify-items: start; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-l); background: var(--white); }
.fempty[hidden] { display: none; }
.fempty__ctas { display: flex; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   03 · STILL STUCK
   ========================================================================== */
.stuck { border-top: 1px solid var(--line); }
.stuck__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.status { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 12px; border-radius: 999px; background: var(--white); font-size: 13px; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mute-2); }
.status.is-on .dot { background: var(--ok); animation: openPulse 2s infinite; }
@keyframes openPulse { 0% { box-shadow: 0 0 0 0 rgba(47, 125, 79, .5); } 70% { box-shadow: 0 0 0 7px rgba(47, 125, 79, 0); } 100% { box-shadow: none; } }
.status b { font-weight: 500; }
.stuck__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stuck__card { display: grid; gap: 10px; align-content: start; min-height: 240px; padding: 24px; border-radius: var(--r-l); background: var(--white); transition: transform .5s var(--ease); }
.stuck__card:hover { transform: translateY(-4px); }
.stuck__card .i { width: 26px; height: 26px; margin-bottom: auto; }
.stuck__card b { font-size: 22px; font-weight: 500; letter-spacing: -.04em; margin-top: 40px; }
.stuck__card span { color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.stuck__card i { font-style: normal; font-size: 10.5px; margin-top: 8px; }
.stuck__card--ink { background: var(--ink); color: #fff; }
.stuck__card--ink span { color: rgba(255, 255, 255, .65); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .fbody { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .fnav { position: sticky; top: calc(var(--bar-h) + var(--head-h)); z-index: 30; margin-inline: calc(var(--gutter) * -1); transition: top .6s var(--ease); }
  .bar-hidden .fnav { top: var(--head-h); }
  .fnav__in { position: static; padding: 10px var(--gutter); background: rgba(244, 242, 238, .86); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-bottom: 1px solid var(--line); grid-template-columns: minmax(0, 1fr); }
  .fnav__label, .fnav__toggle { display: none; }
  .fnav__list { display: flex; gap: 6px; overflow-x: auto; border: 0; scrollbar-width: none; }
  .fnav__list::-webkit-scrollbar { display: none; }
  .fnav__list a { grid-template-columns: auto auto; padding: 0 14px; height: 36px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; background: var(--white); }
  .fnav__list a .i { display: none; }
  .fnav__list a::before { display: none; }
  .fnav__list a.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .fnav__list a.is-on small { color: rgba(255, 255, 255, .6); }
  .qgroup, .fq { scroll-margin-top: calc(var(--head-h) + 80px); }
  .stuck__grid { grid-template-columns: minmax(0, 1fr); }
  .stuck__card { min-height: 0; }
  .stuck__card b { margin-top: 18px; }
}
@media (max-width: 640px) {
  .fsearch__field { height: 60px; padding-left: 18px; }
  .fsearch__field kbd { display: none; }
  .fhero__mark { right: -10vw; font-size: 80vw; opacity: .7; }
  .fhero__chips .mono { width: 100%; }
  .fq__a { padding-right: 0; }
  .qsteps, .qcare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qt { font-size: 13px; }
  .qt th, .qt td { padding: 10px; }
}