/* ------------------------------------------------------------------ *
   Fanisi — About page.

   Four narrative sections, four different compositions. The page opens
   as a portrait, moves to the maker at work, widens into the creative
   philosophy, and closes on a quiet typographic note. Nothing here
   introduces a new colour, typeface or card style: it is the existing
   palette and the existing display faces, given more air.

   The workshop photographs are used as brand imagery only. Captions
   describe the craft; they do not assert who is pictured.
 * ------------------------------------------------------------------ */

/* --- Shared rhythm ------------------------------------------------ */

.story-opening,
.story-founder{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,72px);align-items:center;
}
.story-copy{min-width:0;max-width:57ch}
.story-copy p{font-size:clamp(16px,1.3vw,18px);line-height:1.8;color:#3f3c35;margin:0 0 20px}
.story-copy p:last-child{margin-bottom:0}
.story-copy .eyebrow{font-size:11px;line-height:1.5;color:var(--muted);margin-bottom:18px}

.story-title{font-size:clamp(38px,4.7vw,68px);line-height:1.04;max-width:15ch;text-wrap:balance;margin:0 0 20px}
.story-support{font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--ink);line-height:1.6;margin:0 0 28px}
.story-heading{font-size:clamp(28px,3.3vw,46px);line-height:1.08;max-width:20ch;margin:0 0 26px;text-wrap:balance}
.story-role{
  margin:0 0 26px;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}

.story-photo{margin:0;min-width:0;align-self:start}
.story-photo img{display:block;width:100%;height:auto;border-radius:var(--radius);background:var(--sand)}
.story-photo figcaption{font-size:12px;line-height:1.6;color:#6b685f;margin-top:12px;max-width:38ch}

/* --- 1. Our story ------------------------------------------------- */

.story-opening{padding-block:clamp(40px,6vw,88px)}

/* The name's origin, set as a footnote rather than a section. */
.story-aside{
  margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.7;color:#6b685f;max-width:46ch;
}
.story-aside strong{color:var(--ink);font-weight:700}

/* --- 2. Meet the founder ------------------------------------------ */

.story-founder{padding-block:clamp(64px,9vw,120px)}
/* Photograph leads; the copy follows. The mirror of the opening. */
.story-founder .story-photo{order:1}
.story-founder .story-copy{order:2}

/* --- 3. Creative philosophy --------------------------------------- */

.story-philosophy{padding-block:clamp(64px,9vw,120px)}
/* Centre-set text, then a wide photograph beneath it. */
.story-philosophy .story-copy{max-width:52ch;margin-inline:auto;text-align:center}
.story-philosophy .story-heading{max-width:none;margin-bottom:24px}
/* The three short lines open the section like a stanza. */
.story-philosophy .story-lead-in{
  font-family:"Manrope",sans-serif;font-weight:800;
  font-size:clamp(19px,2.2vw,27px);line-height:1.28;letter-spacing:-.03em;
  color:var(--ink);margin:0 0 26px;text-wrap:balance;
}
.story-wide-photo{margin:clamp(38px,5vw,64px) 0 0}
.story-wide-photo img{display:block;width:100%;height:clamp(240px,38vw,520px);object-fit:cover;border-radius:var(--radius);background:#cec7b9}
.story-wide-photo figcaption{font-size:12px;line-height:1.6;color:#6b685f;margin-top:12px}

/* --- 4. Stitches of love — the quiet close ------------------------ */

.story-love{border-top:1px solid var(--line)}
.story-close{padding-block:clamp(52px,7vw,96px);text-align:center}
.story-close .story-copy{max-width:50ch;margin-inline:auto}
.story-close .story-heading{max-width:none;margin-bottom:24px}
/* "This is not just an outfit." — the page's last, smallest emphasis. */
.story-close .story-statement{
  font-family:"Manrope",sans-serif;font-weight:800;
  font-size:clamp(21px,2.5vw,32px);line-height:1.14;letter-spacing:-.035em;
  color:var(--ink);margin:30px 0 0;text-wrap:balance;
}
.story-close .btn{margin-top:34px}

/* --- Mobile: composed, not stacked -------------------------------- */

@media(max-width:820px){
  .story-opening,.story-founder{grid-template-columns:minmax(0,1fr);gap:32px}
  .story-copy{max-width:none}
  .story-title{max-width:19ch}
  .story-heading{max-width:none;margin-bottom:20px}
  .story-opening .story-photo{order:-1;margin-bottom:4px}
  /* On a phone the founder's words come before the photograph. */
  .story-founder .story-copy{order:0}
  .story-founder .story-photo{order:0}
  .story-philosophy .story-copy{text-align:left}
  .story-close{text-align:left}
  .story-close .story-copy{max-width:none}
}