/* about.css: the about page as a plain explainer (owner 2026-11-11: "explains nothing").
   The words up top (one sentence that says what Tafseela is), three numbered steps with a
   drawing each, four things she gets, then the wine band. The drawings use the home page's
   room tokens (site.css), so they follow the night remap. Tokens only; no motion. */

/* ---------- the hero: the defining sentence reads a little wider than a one-liner ---------- */
.ab-hero .ab-lede{max-width:44ch}
.ab-hero .q-acts{margin-top:24px}

/* ---------- a section and its headline (Rakkas in Arabic, Anton caps in English) ---------- */
.ab-sec{max-width:1160px;margin:0 auto;padding:clamp(24px,4vw,56px) var(--gut)}
.ab-h2{margin:0 0 clamp(20px,3vw,34px);text-align:center;font-family:var(--d-ar);font-weight:400;font-style:normal;
  font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1.25;color:var(--ink);text-wrap:balance}
.site-quiet :lang(en) .ab-h2{font-family:var(--d-en);text-transform:uppercase;line-height:.98;letter-spacing:0;font-size:clamp(2.25rem,4.4vw,4rem)}
#how{scroll-margin-top:96px}

/* ---------- the steps ---------- */
.ab-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.ab-step{display:flex;flex-direction:column;background:var(--panel);border:2px solid var(--panel-line);border-radius:24px;overflow:hidden}
.ab-art{background:var(--wall);border-bottom:2px solid var(--panel-line);padding:14px 14px 0}
.ab-svg{display:block;width:100%;height:auto;aspect-ratio:4/3;overflow:visible}
.ab-step-t{padding:clamp(18px,2.4vw,26px)}
.ab-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:var(--btn);color:var(--btn-ink);font-family:var(--sm);font-weight:600;font-size:1rem;line-height:1}
.ab-step h3,.ab-get h3{margin:12px 0 6px;font-family:var(--sm);font-weight:600;font-style:normal;font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.5;color:var(--ink)}
.ab-step p,.ab-get p{margin:0;font-family:var(--sm);font-weight:400;font-size:clamp(1rem,1.2vw,1.0625rem);line-height:1.85;color:var(--copy)}
.ab-note{margin:clamp(18px,2.4vw,26px) auto 0;max-width:60ch;text-align:center;font-family:var(--sm);font-weight:400;font-size:1rem;line-height:1.7;color:var(--magenta-text)}

/* ---------- what she gets ---------- */
.ab-gets{list-style:none;margin:0 auto;padding:0;max-width:980px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.ab-get{display:flex;align-items:flex-start;gap:16px;background:var(--panel);border:2px solid var(--panel-line);border-radius:24px;padding:clamp(18px,2.4vw,26px)}
.ab-ico{flex:none;width:44px;height:44px;overflow:visible}
.ab-get h3{margin-top:4px}

/* ---------- the closing band: Instagram under the button ---------- */
.ab-ig{margin-top:10px}
.q-band .ab-ig .q-link{color:var(--band-ink);font-size:1.0625rem}
.q-band .ab-ig .q-link:focus-visible{outline-color:var(--band-ink)}

/* ---------- the drawings' parts (the room tokens of the home page) ---------- */
.ab-svg .il-floor{fill:var(--floor)}
.ab-svg .il-edge{stroke:var(--floor-edge);stroke-width:2}
.il-line{fill:none;stroke:var(--room-line);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.il-lit{fill:var(--room-in);stroke:var(--room-line);stroke-width:2.6;stroke-linejoin:round}
.il-wine{fill:var(--curtain-a);stroke:var(--room-line);stroke-width:2.4;stroke-linejoin:round}
.il-wine2{fill:var(--curtain-b);stroke:var(--room-line);stroke-width:2.4;stroke-linejoin:round}
.il-pink{fill:var(--candy-2);stroke:var(--room-line);stroke-width:2.4;stroke-linejoin:round}
.il-card{fill:var(--panel);stroke:var(--room-line);stroke-width:2.4}
.il-dot{fill:var(--curtain-a)}
.il-pole{fill:none;stroke:var(--curtain-a);stroke-width:4;stroke-linecap:round}
.il-rail{stroke:var(--room-rail);stroke-width:4;stroke-linecap:round}
.il-tape{fill:none;stroke:var(--candy-2);stroke-width:9;stroke-linecap:round}
.il-ticks{fill:none;stroke:var(--room-line);stroke-width:9;stroke-dasharray:1.6 5}
.il-waist{fill:none;stroke:var(--curtain-fold);stroke-width:2;stroke-linecap:round}
.il-shadow{fill:none;stroke:var(--room-line);stroke-width:2;stroke-linecap:round;stroke-opacity:.35}

/* ---------- tablets and phones ---------- */
@media (max-width:960px){
  .ab-steps{grid-template-columns:minmax(0,1fr);max-width:560px;margin:0 auto}
}
@media (max-width:760px){
  .ab-sec{padding:20px 20px 28px}
  .ab-gets{grid-template-columns:minmax(0,1fr)}
  .ab-art{padding:10px 10px 0}
  .ab-svg{max-width:300px;margin:0 auto}
  .site-quiet :lang(en) .ab-h2{font-size:clamp(2.125rem,10vw,2.75rem)}
}

@media print{
  .ab-art,.ab-ico{display:none}
  .ab-step,.ab-get{border:1px solid var(--wine);break-inside:avoid}
}