/* =====================================================================
   ABOUT. The opening (hook + photo + the hospital story), "It was never
   just her." and "So that's what I build now." keep the previous static
   layout with the site-wide fade-in. ONLY the hairstylist story is told as
   S-curve scrollytelling (ABOUT-SCROLLYTELLING-SPEC.md, scoped by Juliette
   to that segment): `.tale` = three blocks along a drawn spine — the words
   and a line-drawn scene, alternating sides, the scene sitting a little
   lower than its text so every row reads as a diagonal. Each block is ONE
   reveal target (.reveal → .rv/.is-in from motion.js) so the paragraph
   fades-and-rises and its scene starts in the same moment; scenes are
   time-based CSS animations with finite iteration counts, so they play
   through and settle. Fire-once. The spine is an SVG path built in
   about.html's script from the real block geometry and drawn with scroll.
   Reduced motion / no JS: text visible, scenes at their FINAL frame, spine
   fully drawn — the base rules ARE the final frames; the "before" states
   are gated behind html.js:not(.reduce).
   Palette only: slate strokes, paper fills, ivory tints. Spacing rem/clamp,
   never bare vh. Class names checked against every other stylesheet.
   ===================================================================== */

/* ---------- the opening: the previous layout — photo beside the hospital story, plain fade-in ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:44px;align-items:start;margin-top:46px}
.portrait{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--ivory-2);box-shadow:0 22px 50px -38px rgba(33,63,120,.5)}
.portrait img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.about-body p{margin-bottom:18px;max-width:58ch;font-size:clamp(17px,1.05vw,19px)}
.about-body p.mission{font-weight:700;color:var(--ink);margin-top:22px}
@media (max-width:860px){.about-grid{grid-template-columns:1fr;gap:28px}.portrait{max-width:min(100%,360px)}}
/* ---------- the two closing sections: previous layout ---------- */
.about-sec{max-width:62ch;margin:64px auto 0}
.about-sec h2{font-size:clamp(24px,3.2vw,34px);margin-bottom:18px}
.about-sec p{font-size:17px;margin-bottom:16px}
.about-now{max-width:70ch;margin:88px auto 0;padding:56px 0 24px;border-top:1px solid var(--line);text-align:center}
.about-now .now{font-size:clamp(22px,2.8vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}

/* ---------- the tale: rows along the spine ---------- */
.tale{position:relative;margin-top:clamp(2.5rem,5vw,4.5rem)}
.spine{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.spine path{fill:none;stroke:var(--indigo);stroke-opacity:.26;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tale-blk{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) clamp(7rem,13vw,10rem) minmax(0,1fr);
  align-items:start;padding:clamp(1.5rem,3vw,2.5rem) 0}
.tale-txt{grid-column:1;grid-row:1;max-width:42ch}
.tale-art{grid-column:3;grid-row:1;justify-self:end;width:100%;max-width:clamp(400px,34vw,600px);margin-top:clamp(2.5rem,5vw,4.5rem)}
/* short paragraphs get a slightly smaller frame so the pair stays balanced */
/* even rows swap sides: text right, art left */
.tale-blk.swap .tale-txt{grid-column:3;justify-self:end}
.tale-blk.swap .tale-art{grid-column:1;justify-self:start}
.tale-txt p{margin-bottom:16px;font-size:clamp(17px,1.05vw,19px);line-height:1.6}
.tale-txt p:last-child{margin-bottom:0}
.tale-txt h2{font-size:clamp(24px,2.6vw,36px);margin-bottom:16px}
.tale-txt .mission{font-weight:700;color:var(--ink);margin-top:22px}
.tale-txt .now{font-size:clamp(20px,1.7vw,27px);font-weight:700;letter-spacing:-.02em;line-height:1.32;color:var(--ink)}
.tale-txt .btn{margin-top:26px}
/* the centrepiece gets the room: a wider, taller frame and a display-size sentence */
.tale-blk.big{grid-template-columns:minmax(0,1fr) clamp(2.5rem,4vw,3.5rem) minmax(0,2fr);padding:clamp(2rem,4vw,3.5rem) 0}
.tale-blk.big.swap{grid-template-columns:minmax(0,2fr) clamp(2.5rem,4vw,3.5rem) minmax(0,1fr)}
.tale-blk.big .tale-txt{max-width:26ch;padding-top:clamp(.5rem,2vw,2rem)}
.tale-blk.big .tale-txt p{font-size:clamp(22px,2.1vw,31px);font-weight:800;letter-spacing:-.025em;line-height:1.18;color:var(--ink)}
.tale-blk.big .tale-art{max-width:none;margin-top:0}
.tale-art svg{display:block;width:100%;height:auto;overflow:visible;
  stroke:var(--slate);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none}
.tale-art .fill{fill:var(--slate);stroke:none}
.tale-art .soft{stroke:var(--muted);opacity:.55}
.tale-art .paper{fill:#fff}
.tale-art .tint{fill:#E9EEF5}
.tale-art .tint2{fill:#F4F1EA}
.tale-art .dark{fill:var(--dark);stroke:var(--dark)}
.tale-art .thin{stroke-width:2}
.tale-art .t-shop{overflow:hidden}   /* the passers-by wait off-frame */
/* the closing line */
.tale-close{text-align:center;color:var(--muted);max-width:52ch;margin:clamp(2rem,4vw,3rem) auto 0;font-size:clamp(16px,1.05vw,18px)}
.tale-close a{color:var(--slate);text-decoration:none;font-weight:700;font-size:1.25em;display:inline-block;padding:0 .2em;transition:transform .3s}
.tale-close a:hover{transform:translateY(3px)}
/* mobile / portrait tablet: one column, scene above its paragraph, spine down the left edge */
@media (max-width:860px){
  .tale-blk,.tale-blk.big{grid-template-columns:1fr;padding:1.6rem 0 1.6rem 34px}
  .tale-blk .tale-txt,.tale-blk.swap .tale-txt,.tale-blk.big .tale-txt{grid-column:1;grid-row:2;justify-self:start;max-width:none;padding-top:0}
  .tale-blk .tale-art,.tale-blk.swap .tale-art{grid-column:1;grid-row:1;justify-self:start;margin:0 0 1.2rem;max-width:min(100%,460px)}
  .tale-blk.big .tale-art{max-width:none}
  .tale-close{padding-left:34px}
}

/* ---------- pause anything not near the viewport (motion.js-free: about.html's observer toggles .live) ---------- */
html.js .tale-blk.is-in:not(.live) .tale-art *{animation-play-state:paused!important}

/* =====================================================================
   THE SCENES. Base = final frame. html.js:not(.reduce) = the "before" state,
   .tale-blk.is-in = play. Everything that moves in one scene starts at 0s;
   only the passers-by in scene 3 are sequential by nature.
   ===================================================================== */
@keyframes typeIn{to{stroke-dashoffset:0}}
@keyframes drawIn{to{stroke-dashoffset:0}}

/* limbs pivot at the hip/shoulder: l1/a1 are drawn towards -x (pivot = top-right of their box), l2/a2 towards +x */
.tale-art .leg,.tale-art .arm{transform-box:fill-box}
.tale-art .l1,.tale-art .a1{transform-origin:100% 0}
.tale-art .l2,.tale-art .a2{transform-origin:0 0}
@keyframes stride{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}

/* 1 · the salon: the scissors work at the head; the mirror shows the same motion. */
.t-salon .snip{transform-origin:303px 148px}
.t-salon .snip2{transform-origin:113px 148px}
.tale-blk.is-in .t-salon .snip,.tale-blk.is-in .t-salon .snip2{animation:snip .42s ease-in-out 14 alternate}
@keyframes snip{from{transform:rotate(-14deg)}to{transform:rotate(10deg)}}

/* 2 · ⭐ the one-woman army: four of her, all at once. Every animation here
   starts at 0s and runs 8.8s — SIMULTANEOUS, never staggered. */
.tale-blk.is-in .t-army .air{animation:air 1.1s ease-in-out 8}
.tale-blk.is-in .t-army .air path:nth-child(2){animation-delay:0s}
.tale-blk.is-in .t-army .buzz{animation:buzz .55s ease-in-out 16;transform-box:fill-box;transform-origin:50% 100%}
.tale-blk.is-in .t-army .talk{animation:blink 1.1s steps(2) 8}
.tale-blk.is-in .t-army .pen{animation:scribble .55s ease-in-out 16 alternate;transform-box:fill-box;transform-origin:20% 90%}
.tale-blk.is-in .t-army .sig{animation:drawIn 8.8s linear forwards}
.tale-blk.is-in .t-army .keys{animation:typeHands .55s ease-in-out 16 alternate;transform-box:fill-box;transform-origin:50% 100%}
.tale-blk.is-in .t-army .code{animation:typeIn 2.9s steps(14) forwards}   /* the lines type one after another — that's typing; her hands start at 0s with everyone else */
.tale-blk.is-in .t-army .code:nth-child(2){animation-delay:2.9s}.tale-blk.is-in .t-army .code:nth-child(3){animation-delay:5.8s}
html.js:not(.reduce) .t-army .sig{stroke-dasharray:140;stroke-dashoffset:140}
html.js:not(.reduce) .t-army .code{stroke-dasharray:60;stroke-dashoffset:60}
@keyframes air{0%,100%{opacity:.25;transform:translateX(0)}50%{opacity:.85;transform:translateX(-5px)}}
@keyframes buzz{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes blink{50%{opacity:.15}}
@keyframes scribble{from{transform:rotate(-8deg) translateX(0)}to{transform:rotate(6deg) translateX(3px)}}
@keyframes typeHands{from{transform:translateY(0)}to{transform:translateY(-3px)}}

/* 3 · the best-kept secret: three people walk past the shop; none turn in. Then quiet. */
html.js:not(.reduce) .t-shop .walker{opacity:1}
.t-shop .walker{opacity:0}                    /* final frame: the street is empty */
.tale-blk.is-in .t-shop .walker{animation:pass 4.2s linear forwards}
.tale-blk.is-in .t-shop .walker.w2{animation-duration:4.8s;animation-delay:1.7s}
.tale-blk.is-in .t-shop .walker.w3{animation-duration:3.9s;animation-delay:3.6s}
.tale-blk.is-in .t-shop .walker .leg.l1{animation:stride .45s ease-in-out 12 alternate}
.tale-blk.is-in .t-shop .walker .leg.l2{animation:stride .45s ease-in-out 12 alternate-reverse}
.tale-blk.is-in .t-shop .walker.w2 .leg{animation-delay:1.7s}
.tale-blk.is-in .t-shop .walker.w3 .leg{animation-delay:3.6s}
@keyframes pass{0%{transform:translateX(0);opacity:1}97%{opacity:1}100%{transform:translateX(560px);opacity:0}}