/* ==========================================================================
   Dāstān ABOUT page (/about): hero (title + slogan), the owner's story text with the pattern, the farm-to-cup journey as a vertical timeline,
   "Our coffees" (three links), "Work with us". Loaded after chrome.css, menu.css, listing.css (tokens, hero, page switch, footer) and
   home-sections.css (the .hs-* section grammar, story pattern, cooperation steps). Time-based motion only; off under prefers-reduced-motion.
   Sections: 1 hero, 2 story, 3 timeline, 4 our coffees, 5 Persian + phones.
   ========================================================================== */

/* 1. hero ---------------------------------------------------------------------- */
.ab-hero{padding-bottom:clamp(32px,4.4vw,64px)}
.ab-slogan{font-family:var(--mc);font-size:clamp(16px,1.9vw,26px);line-height:1.2;letter-spacing:.04em;text-transform:uppercase;color:var(--th-hl2)}

/* 2. story: the owner's text on the cream band, the pattern beside it (under it on phones) ---------------- */
.ab-story .hs-story-grid{align-items:start}
.ab-story .hs-h,html[lang=fa] .ab-story .hs-h{font-size:clamp(22px,3.4vw,48px);line-height:1.15}
.ab-story .hs-lead{margin-top:clamp(8px,1vw,14px)}
.ab-story .hs-p{max-width:38em}
.ab-story .hs-pattern{position:sticky;top:calc(var(--hdh) + clamp(16px,4vw,64px))}

/* 3. journey timeline: a rail with one square badge per step, the photo and the caption beside it ------------- */
.ab-tl{--bw:clamp(44px,5vw,72px);list-style:none;margin:0;padding:0;position:relative}
.ab-step{position:relative;display:grid;grid-template-columns:var(--bw) minmax(0,1fr);column-gap:clamp(14px,2.4vw,36px);padding-bottom:clamp(32px,4.4vw,64px)}
.ab-step:last-child{padding-bottom:0}
/* the rail: a thin line from badge to badge */
.ab-step:before{content:"";position:absolute;inset-inline-start:calc(var(--bw) / 2 - 1px);top:0;bottom:0;width:2px;background:rgb(var(--th-fg-rgb) / .28)}
.ab-step:first-child:before{top:calc(var(--bw) / 2)}
.ab-step:last-child:before{bottom:auto;height:calc(var(--bw) / 2)}
.ab-n{position:relative;z-index:1;grid-row:1 / span 2;grid-column:1;align-self:start;display:grid;place-items:center;width:var(--bw);aspect-ratio:1;background:var(--c);color:#000;font-size:clamp(17px,2vw,28px);line-height:1}
.ab-step figure{grid-column:2;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--green)}
.ab-step img{display:block;width:100%;height:100%;object-fit:cover}
.ab-step-txt{grid-column:2}
.ab-step .hj-t{margin:16px 0 6px}
.ab-step .hj-p{max-width:30em}
@media (min-width:760px){
  .ab-step{grid-template-columns:var(--bw) minmax(0,480px) minmax(0,1fr);align-items:center}
  .ab-step figure{grid-column:2;grid-row:1}
  .ab-step-txt{grid-column:3;grid-row:1;padding-inline-start:clamp(8px,1vw,16px)}
  .ab-n{grid-row:1;align-self:center}
  .ab-step:first-child:before{top:50%}
  .ab-step:last-child:before{height:50%}
}

/* 4. our coffees: three flat panels ---------------------------------------------------------------------- */
.ab-coffees{background:var(--green);color:var(--cream);--tag:var(--cream)}
.ab-coffees .hs-h{color:var(--cream)}
.ab-coffees .hs-head{margin-bottom:clamp(28px,4vw,56px)}
.ab-cf-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,1.6vw,24px)}
@media (min-width:900px){.ab-cf-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ab-cf{--c:var(--coral);--ink:#000;--focus:#000;position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;gap:clamp(10px,1.2vw,16px);min-width:0;padding:clamp(20px,2.4vw,36px);background:var(--c);color:var(--ink)}
.ab-cf-coral{--c:var(--coral)}
.ab-cf-mint{--c:var(--mint)}
.ab-cf-cream{--c:var(--cream);--ink:var(--green)}
.ab-cf img,.ab-cf-shape{justify-self:center;display:block;height:clamp(150px,18vw,260px);width:auto;max-width:100%;object-fit:contain}
.ab-cf img{transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.ab-cf:hover img{translate:0 -8px}
.ab-cf-shape{aspect-ratio:1;background:currentColor;opacity:.16;border-radius:100% 0 0 0}
html[dir=rtl] .ab-cf-shape{border-radius:0 100% 0 0}
.ab-cf-k{margin:0;font-size:clamp(20px,2vw,30px);line-height:1.05;overflow-wrap:anywhere}
.ab-cf-t{margin:0;font:400 clamp(16px,1.4vw,20px)/1.5 var(--nian);max-width:20em;align-self:start}
.ab-cf-go{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding-top:14px;border-top:2px solid currentColor;font-size:clamp(14px,1.25vw,18px);letter-spacing:.04em}
.ab-cf-go:after{content:"";position:absolute;inset:0;z-index:1}
.ab-cf:hover .ab-cf-go .hs-ar{translate:5px 0}
html[dir=rtl] .ab-cf:hover .ab-cf-go .hs-ar{translate:-5px 0}
.ab-cf :focus-visible{outline-offset:-6px}

/* 5. Persian + phones ----------------------------------------------------------------------------------- */
html[lang=fa] .ab-slogan{font-family:var(--nian);font-weight:900;letter-spacing:0;text-transform:none;line-height:1.5}
html[lang=fa] .ab-cf-k,html[lang=fa] .ab-cf-go{font-family:var(--nian);font-weight:900;letter-spacing:0;text-transform:none}
html[lang=fa] .ab-cf-t{line-height:1.8}
html[lang=fa] .ab-n{font-family:var(--mc)}
@media (max-width:899px){
  .ab-story .hs-pattern{position:static}
}
@media (max-width:520px){
  .ab-step .hj-t{font-size:20px;margin-top:12px}
}
@media (prefers-reduced-motion:reduce){.ab-cf img,.ab-cf-go .hs-ar{transition:none}}

/* LIGHT THEME (tokens: theme.css): the cream story band follows the cream hero, a green rule tells them apart */
html[data-theme=light] .ab-story{border-top:2px solid var(--green)}