/* ---------------------------------------------------------------------------
 * FAQ chapter — "Ask the bottle."
 * A chalkboard (left ~55% on desktop, top ~55% on phones) with the questions
 * as big chalk buttons. Picking one (or scrolling) erases the last answer with
 * a felt eraser and "writes" the new one left-to-right (Arabic right-to-left).
 * The 3D bottle beside it wears glasses and waves a pointer (js/faq.js).
 * ------------------------------------------------------------------------- */
.chapter-faq{
  --chalk:#f3eee4; --chalk-dim:#f3eee4b8; --chalk-amber:#ffcf8a; --chalk-red:#ff8a7a;
  --slate:#1d2822; --slate-deep:#111814; --wood:#7b4a25; --wood-dark:#4e2c14;
  min-height:380svh;
}
.faq-defs{position:absolute;width:0;height:0;overflow:hidden}
.faq-stage{position:sticky;top:0;height:100svh;pointer-events:none}

/* ---- the board ---- */
.faq-board{
  position:absolute;left:var(--gutter);top:calc(var(--top) + 60px);bottom:calc(var(--bottom) + 52px);
  width:min(calc(55vw - var(--gutter)), 920px);
  display:flex;pointer-events:auto;
  padding:clamp(10px, 1.1vw, 16px);border-radius:8px;
  /* wooden frame: grain + a soft top light */
  background:
    linear-gradient(180deg, #ffffff1f, transparent 18%, transparent 82%, #0000004d),
    repeating-linear-gradient(92deg, #0000 0 5px, #00000014 5px 6px, #0000 6px 13px, #ffffff0d 13px 14px),
    repeating-linear-gradient(88deg, #8a5430 0 22px, #74431f 22px 31px, #83502b 31px 47px, #6c3d1b 47px 52px);
  box-shadow:0 34px 70px -20px #000000b3, 0 10px 24px #0000004d, inset 0 0 0 1px #ffffff1a, inset 0 -2px 0 #0000004d;
  opacity:0;transform:translateY(26px) rotate(-.4deg);
  transition:opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
}
.chapter-faq.is-in .faq-board,.chapter-faq.faq-in .faq-board{opacity:1;transform:rotate(-.4deg)}

.faq-slate{
  position:relative;flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;
  padding:clamp(18px, 2.2vw, 34px) clamp(18px, 2.4vw, 38px) clamp(16px, 2vw, 28px);
  border-radius:3px;color:var(--chalk);overflow:hidden;isolation:isolate;
  background:
    /* old eraser swipes */
    linear-gradient(97deg, transparent 12%, #ffffff09 20%, #ffffff05 34%, transparent 42%),
    linear-gradient(83deg, transparent 52%, #ffffff07 60%, #ffffff0a 70%, transparent 80%),
    /* chalk dust clouds */
    radial-gradient(38% 20% at 26% 78%, #f3eee412, transparent 70%),
    radial-gradient(30% 18% at 78% 22%, #f3eee40f, transparent 70%),
    radial-gradient(24% 14% at 62% 92%, #f3eee40d, transparent 70%),
    /* grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 45% 35%, #26342b 0%, var(--slate) 55%, var(--slate-deep) 100%);
  box-shadow:inset 0 0 50px #000000a6, inset 0 0 0 2px #00000059;
}
/* a faint ghost of yesterday's lesson */
.faq-slate::before{
  content:"H₂O  ·  C₆H₈O₆";position:absolute;right:6%;bottom:9%;z-index:-1;
  font-stretch:125%;font-weight:900;font-size:clamp(26px, 3vw, 48px);letter-spacing:.04em;color:#f3eee40a;
  transform:rotate(-4deg);pointer-events:none;filter:blur(1.5px)
}

/* ---- chalk type ---- */
.faq-head,.faq-q,.faq-a{filter:url(#faq-chalk-soft)}
.faq-title,.faq-title-ar{filter:url(#faq-chalk)}
.faq-head{flex:none;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:clamp(12px, 1.4vw, 22px);margin-bottom:clamp(10px, 1.8svh, 22px)}
.faq-eyebrow{width:100%;margin:0 0 10px;font-size:15px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--chalk-amber)}
.faq-eyebrow [lang="ar"]{font-family:var(--arabic);letter-spacing:0;font-size:16px;margin-inline-start:.6em}
.faq-title{margin:0;font-stretch:125%;font-weight:900;font-size:clamp(36px, 3.6vw, 64px);line-height:.95;letter-spacing:-.01em;text-transform:uppercase;
  color:var(--chalk);text-shadow:0 0 1px #f3eee499, 0 0 12px #f3eee41f}
.faq-title-ar{margin:0;font-family:var(--arabic);font-weight:800;font-size:clamp(26px, 2.4vw, 42px);line-height:1.25;text-align:left;
  color:var(--chalk);text-shadow:0 0 1px #f3eee499}

/* ---- body: questions | answer ---- */
.faq-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);gap:clamp(14px, 1.8vw, 30px)}

.faq-qs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(0px, .3svh, 4px);min-height:0;overflow:auto;scrollbar-width:none}
.faq-qs::-webkit-scrollbar{display:none}
.faq-q{
  position:relative;width:100%;display:grid;grid-template-columns:2.1em minmax(0, 1fr);align-items:baseline;column-gap:8px;row-gap:0;
  padding:clamp(3px, .45svh, 6px) 12px;border:0;border-radius:6px;background:transparent;text-align:left;cursor:pointer;
  color:var(--chalk-dim);font-size:clamp(18px, 1.3vw, 20px);font-weight:700;line-height:1.12;
  transition:color 200ms ease, background-color 200ms ease, transform 160ms var(--ease-out)
}
.faq-q:active{transform:scale(0.98)}
.faq-q-num{font-stretch:125%;font-weight:900;color:var(--chalk-amber);opacity:.8}
.faq-q-num{grid-row:1 / span 2}
.faq-q-en{grid-column:2}
.faq-q-ar{grid-column:2;font-family:var(--arabic);font-weight:700;font-size:.95em;line-height:1.25;text-align:left;opacity:.8}
@media (hover:hover) and (pointer:fine){.faq-q:hover{color:var(--chalk);background:#f3eee40d}}
.faq-q[aria-expanded="true"]{color:var(--chalk);background:#f3eee414}
.faq-q[aria-expanded="true"] .faq-q-num{opacity:1}
/* a hand-drawn chalk box around the active question */
.faq-q::after{content:"";position:absolute;inset:1px;border:2px solid var(--chalk);border-radius:10px 4px 12px 5px / 6px 12px 4px 10px;
  opacity:0;transform:scale(.97) rotate(-.6deg);transition:opacity 220ms ease, transform 300ms var(--ease-out);pointer-events:none}
.faq-q[aria-expanded="true"]::after{opacity:.75;transform:rotate(-.6deg)}
.faq-q:focus-visible{outline:2px dashed var(--chalk-amber);outline-offset:2px}

/* ---- answers ---- */
.faq-answers{position:relative;display:grid;align-content:start;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#f3eee433 transparent;
  padding:4px 4px 12px 0}
.faq-a{grid-area:1/1;min-width:0}
.faq-a[hidden]{display:none !important}
.faq-a p{margin:0}
.faq-a-q{font-stretch:125%;font-weight:900;font-size:clamp(20px, 1.7vw, 28px);line-height:1.1;text-transform:uppercase;letter-spacing:-.005em;color:var(--chalk-amber)}
.faq-a-q-ar{margin-top:6px !important;font-family:var(--arabic);font-weight:800;font-size:clamp(19px, 1.5vw, 24px);line-height:1.35;color:var(--chalk-amber);opacity:.92;text-align:left}
.faq-a-en{margin-top:clamp(12px, 2svh, 22px) !important;font-size:clamp(19px, 1.55vw, 24px);font-weight:600;line-height:1.35;color:var(--chalk)}
.faq-a-ar{margin-top:10px !important;font-family:var(--arabic);font-weight:700;font-size:clamp(19px, 1.5vw, 23px);line-height:1.6;color:var(--chalk);opacity:.92;text-align:left}
[dir="rtl"].faq-a-ar,[dir="rtl"].faq-a-q-ar{text-align:left}

.faq-scribble{display:block;width:min(70%, 260px);height:14px;margin:6px 0 2px;overflow:visible}
.faq-scribble path{fill:none;stroke:var(--chalk-red);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke;opacity:.9}

/* writing: every .w line wipes in (English → from the left, Arabic → from the right) */
.faq-a.is-writing .w{animation:faq-write-ltr var(--w-dur, 460ms) cubic-bezier(.45, .05, .35, 1) both;animation-delay:calc(var(--d, 0) * 150ms)}
.faq-a.is-writing .w[dir="rtl"]{animation-name:faq-write-rtl}
.faq-a.is-writing .faq-scribble path{animation:faq-scribble 420ms cubic-bezier(.5, 0, .3, 1) 620ms both}
@keyframes faq-write-ltr{from{clip-path:inset(-20% 100% -20% -4%)}to{clip-path:inset(-20% -4% -20% -4%)}}
@keyframes faq-write-rtl{from{clip-path:inset(-20% -4% -20% 100%)}to{clip-path:inset(-20% -4% -20% -4%)}}
@keyframes faq-scribble{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* erasing: the old answer is wiped away behind the eraser, leaving a smear */
.faq-a.is-erasing{animation:faq-erase 420ms cubic-bezier(.55, 0, .45, 1) both}
@keyframes faq-erase{
  0%{clip-path:inset(-10% -4% -10% -4%);opacity:1;filter:url(#faq-chalk-soft)}
  100%{clip-path:inset(-10% -4% -10% 100%);opacity:.2;filter:url(#faq-chalk-soft) blur(3px)}
}
.faq-answers::after{content:"";position:absolute;inset:0 0 auto;height:100%;pointer-events:none;opacity:0;
  background:linear-gradient(94deg, transparent, #f3eee414 30%, #f3eee40c 70%, transparent);filter:blur(6px)}
.faq-answers.is-erasing::after{animation:faq-smear 900ms ease-out both}
@keyframes faq-smear{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

/* the felt eraser */
.faq-eraser{position:absolute;top:8px;left:0;z-index:2;width:clamp(96px, 9vw, 132px);height:clamp(40px, 3.6vw, 52px);pointer-events:none;opacity:0;
  border-radius:6px;transform:translateX(-120%) rotate(-8deg);
  background:linear-gradient(180deg, #a86a3c 0 52%, #5a3417 52% 58%, #d9d2c6 58%);
  box-shadow:0 10px 18px #0000008c, inset 0 1px 0 #ffffff40}
.faq-eraser i{position:absolute;left:10%;right:10%;top:18%;height:18%;border-radius:3px;background:#e0201b;box-shadow:inset 0 -1px 0 #0000004d}
.faq-eraser.is-on{animation:faq-eraser 440ms cubic-bezier(.55, 0, .45, 1) both}
@keyframes faq-eraser{
  0%{opacity:0;transform:translate(-110%, 10%) rotate(-8deg)}
  10%{opacity:1}
  30%{transform:translate(calc(var(--ew, 400px) * .3), 110%) rotate(-3deg)}
  55%{transform:translate(calc(var(--ew, 400px) * .5), 20%) rotate(-10deg)}
  80%{transform:translate(calc(var(--ew, 400px) * .78), 160%) rotate(-4deg)}
  92%{opacity:1}
  100%{opacity:0;transform:translate(var(--ew, 400px), 60%) rotate(-6deg)}
}

/* ---- the chalk ledge ---- */
.faq-ledge{position:absolute;left:-6px;right:-6px;bottom:-12px;height:18px;border-radius:3px;pointer-events:none;
  background:linear-gradient(180deg, #9a6236, var(--wood) 40%, var(--wood-dark));box-shadow:0 8px 14px #00000073}
.faq-ledge .chalk{position:absolute;bottom:13px;left:14%;width:46px;height:9px;border-radius:5px;background:linear-gradient(180deg, #fffaf0, #d8d0c2);box-shadow:0 1px 1px #0006;transform:rotate(-3deg)}
.faq-ledge .chalk-amber{left:calc(14% + 58px);width:30px;background:linear-gradient(180deg, #ffe0ad, #e3a860);transform:rotate(4deg)}
.faq-ledge .rest-eraser{position:absolute;bottom:13px;right:12%;width:88px;height:26px;border-radius:5px;
  background:linear-gradient(180deg, #a86a3c 0 55%, #5a3417 55% 62%, #d9d2c6 62%);box-shadow:0 2px 3px #0008;transition:opacity 150ms ease}
.chapter-faq.is-erasing .rest-eraser{opacity:0}

/* ---- phones: board in the top ~55%, questions become a swipeable row ---- */
@media (max-width:760px), (max-aspect-ratio:4/5){
  .chapter-faq{min-height:400svh}
  .faq-board{left:12px;right:12px;width:auto;top:calc(var(--top) + 64px);bottom:auto;height:min(52svh, 540px);padding:8px}
  .faq-slate{padding:14px 14px 10px}
  .faq-head{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;margin-bottom:10px}
  .faq-eyebrow{display:none}
  .faq-title{font-size:clamp(26px, 8vw, 34px)}
  .faq-title-ar{margin:0;font-size:clamp(22px, 6.4vw, 28px)}
  .faq-body{display:flex;flex-direction:column;gap:10px}
  .faq-qs{flex:none;flex-direction:row;gap:6px;overflow-x:auto;overflow-y:hidden;margin:0 -14px;padding:2px 14px 4px;
    scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .faq-qs li{flex:none;scroll-snap-align:center}
  .faq-q{width:auto;grid-template-columns:auto auto auto;column-gap:8px;padding:9px 12px;font-size:18px;background:#f3eee40a;white-space:nowrap}
  .faq-q-num{grid-row:auto}
  .faq-q-en,.faq-q-ar{grid-column:auto}
  .faq-q-ar{font-size:1em}
  .faq-answers{flex:1;padding-right:2px}
  .faq-a-q{font-size:20px}
  .faq-a-q-ar{font-size:19px}
  .faq-a-en{margin-top:10px !important;font-size:19px;line-height:1.3}
  .faq-a-ar{margin-top:6px !important;font-size:19px;line-height:1.5}
  .faq-slate::before{display:none}
  .faq-ledge{bottom:-10px;height:14px}
  .faq-ledge .chalk,.faq-ledge .rest-eraser{bottom:9px}
  .faq-ledge .rest-eraser{width:64px;height:20px}
}

/* short laptop screens: the Arabic label moves off the button (it's still written with each answer) */
@media (min-width:761px) and (min-aspect-ratio:4/5) and (max-height:780px){
  .faq-q-ar{display:none}
  .faq-q-num{grid-row:auto}
  .faq-eyebrow{margin-bottom:4px}
}

@media (prefers-reduced-motion:reduce){
  .faq-board{transition:opacity 300ms ease;transform:none}
  .chapter-faq.is-in .faq-board,.chapter-faq.faq-in .faq-board{transform:none}
  .faq-a.is-writing .w,.faq-a.is-writing .faq-scribble path,.faq-a.is-erasing,.faq-eraser.is-on,.faq-answers.is-erasing::after{animation:none}
  .faq-eraser{display:none}
  .faq-q,.faq-q::after{transition:none}
}