/* About · origin story (patterns/gioi-thieu-story.php): sticky side (heading, split-flap chapter number, chapter links)
   beside three chapters. assets/js/sections/ab-story.js adds the number, lights up the chapter in view (Scrollspy) and
   types chapter one's search phrase (Text Type). Without the script every chapter shows at full strength. */
.ab-story{
  --ab-story-dim:.35;
  --ab-story-line:2px;
  --ab-story-flip-from:.15;
  --ab-story-search-w:calc(var(--s-9) * 4);
  --ab-story-caret-w:calc(var(--s-1) / 2);
  --ab-story-tile-w:.7em;
  --ab-story-tile-h:1.2em;
  --ab-story-tile-pad:.06em;
  --ab-story-hair:1px;
}
.ab-story .page > *,.ab-story__side > *,.ab-chs > *,.ab-ch > *{margin:0}
.ab-story__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap-col)}
.ab-story__side{position:sticky;top:calc(var(--admin-h) + var(--nav-h) + var(--s-6));align-self:start;display:grid;justify-items:start;gap:var(--s-5)}
.ab-story h2{font-size:var(--t-2xl)}
.ab-story h2 strong{font-weight:inherit;color:var(--accent)}

/* chapter number: split-flap tiles built by the script */
.ab-story__no{display:flex;align-items:flex-end;gap:var(--s-3)}
.ab-story__flap{display:inline-flex;gap:calc(var(--s-1) / 2);font:700 var(--t-hero)/1 var(--font-display);font-variant-numeric:tabular-nums}
.ab-story__tile{position:relative;display:grid;place-items:center;min-width:var(--ab-story-tile-w);height:var(--ab-story-tile-h);padding-inline:var(--ab-story-tile-pad);border-radius:var(--r);background:var(--ink);color:var(--paper);overflow:hidden}
.ab-story__tile::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--ab-story-hair);background:var(--paper);opacity:.25}
.ab-story__tile span{display:block}
.ab-story__tile.is-flip span{animation:ab-story-flip var(--dur) ease-in both}
@keyframes ab-story-flip{from{transform:scaleY(var(--ab-story-flip-from));opacity:var(--ab-story-dim)}}
.ab-story__of{font:500 var(--t-l)/1 var(--font-mono);color:var(--ink-3)}

/* chapter links */
.ab-story__nav{list-style:none;padding:0;display:grid;gap:var(--s-1);border-left:1px solid var(--rule)}
.ab-story__nav li{margin:0}
.ab-story__nav a{display:block;margin-left:calc(var(--ab-story-hair) * -1);padding:var(--s-1) var(--s-4);border-left:var(--ab-story-line) solid transparent;color:var(--ink-3);text-decoration:none;transition:color var(--dur),border-color var(--dur)}
.ab-story__nav a:hover{color:var(--ink)}
.ab-story__nav a[aria-current="true"]{border-left-color:var(--accent-fill);color:var(--ink)}

/* chapters */
.ab-chs{display:grid;gap:var(--s-9);padding-block:var(--s-7)}
.ab-ch{display:grid;justify-items:start;gap:var(--gap-text)}
.ab-ch h3{transition:color var(--dur-m) var(--ease-out)}
.ab-chs.is-live .ab-ch:not(.is-on) h3{color:var(--ink-2)} /* the chapter in view stands out; the others stay readable (4.5:1) */
.ab-ch h3{font-size:var(--t-xl)}
.ab-ch > p:not(.mono, .ab-search, .ab-search__res){max-width:var(--measure);font-size:var(--t-l);color:var(--ink-2)}

/* chapter one: a search box that types its phrase */
.ab-search{box-sizing:border-box;display:flex;align-items:center;gap:var(--s-3);width:min(100%, var(--ab-story-search-w));min-height:var(--ctl);margin-top:var(--s-2);padding:0 var(--s-4);border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--card);font-size:var(--t-m);color:var(--ink)}
.ab-search::before{content:"";flex:none;width:var(--s-4);height:var(--s-4);background:var(--ink-3);-webkit-mask:url(../../../icons/search.svg?ver=9e9653d9) center / contain no-repeat;mask:url(../../../icons/search.svg?ver=9e9653d9) center / contain no-repeat}
.ab-search::after{content:"";flex:none;width:var(--ab-story-caret-w);height:var(--s-5);background:var(--accent-fill);animation:ab-story-blink calc(var(--dur-morph) * 2) steps(1) infinite}
@keyframes ab-story-blink{50%{opacity:0}}
.ab-search__res{font-size:var(--t-2xs);color:var(--ink-3);transition:opacity var(--dur-m)}
.ab-search__res.is-wait{opacity:0}

/* the closing line, with a down arrow */
.ab-bridge{display:flex;align-items:flex-start;gap:var(--s-3);max-width:var(--measure);font:600 var(--t-xl)/1.35 var(--font-display);color:var(--ink)}
.ab-bridge::before{content:"";flex:none;width:var(--s-5);height:var(--s-5);margin-top:calc(var(--s-1) / 2);background:var(--accent-fill);-webkit-mask:url(../../../icons/down.svg?ver=c31c17cc) center / contain no-repeat;mask:url(../../../icons/down.svg?ver=c31c17cc) center / contain no-repeat}

@media (max-width: 991px){
  .ab-story__in{grid-template-columns:minmax(0,1fr)}
  .ab-story__side{position:static}
  .ab-story__no,.ab-story__nav{display:none}
  .ab-chs{gap:var(--s-7);padding-block:0}
}
@media (prefers-reduced-motion: reduce){
  .ab-story__tile.is-flip span,.ab-search::after{animation:none}
  .ab-ch{transition:none}
}
.editor-styles-wrapper .ab-story__side{position:static}