/* Why we exist: its own rules, so a new concept swaps in with why.php and why.js. Loads after page.css. */
/* 2. why we exist: the problem in ink, the answer inking in */
.ab-why{background:var(--soft)}
.ab-why .ab-stage{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(40px,5vw,96px);align-items:center;padding:var(--headh) 0 0 var(--gut)}
.ab-why-q{width:100%;max-width:1180px}
.ab-why-q{padding-bottom:4vh}
.ab-why-q p{font:400 clamp(28px,2.75vw,46px)/1.24 var(--disp);color:var(--ink);letter-spacing:-.01em;text-wrap:pretty}
.ab-why-a{color:var(--text)!important}
.ab-why-a .wa{display:inline-block;transition:opacity .6s ease,transform .9s var(--ease);transition-delay:calc(var(--i) * 24ms)}
.js .ab-why:not(.is-in) .ab-why-a .wa{opacity:0;transform:translateY(.38em)}

.ab-why-b::before{content:"";display:block;width:56px;height:3px;margin-bottom:clamp(16px,2.8vh,30px);background:var(--red);transform-origin:0 50%;transition:transform .9s var(--ease) .9s}
.js .ab-why:not(.is-in) .ab-why-b::before{transform:scaleX(0);transition:none}
.ab-why-b{margin-top:clamp(16px,2.8vh,30px)!important}
.ab-why-b em{font-style:normal;color:var(--red)}
.ab-why-b .w{opacity:0;transition:opacity .25s linear}
.ab-why-b .w.is-hl{color:var(--red)}
html:not(.js) .ab-why-b .w,.ab-still .ab-why-b .w{opacity:1}

@media (max-width:760px){

  .ab-why .ab-stage{padding:var(--headh) var(--gut) 20px}

  .ab-why-q p{font-size:clamp(22px,6.3vw,26px);line-height:1.28}}

/* 2. why we exist: Hong Kong beside the words, wiping in from the right and settling */
.ab-why-ph{position:relative;align-self:stretch;margin:0;overflow:hidden;background:var(--line);clip-path:inset(0 0 0 0);transition:clip-path 1.5s var(--ease) .15s}
.js .ab-why:not(.is-in) .ab-why-ph{clip-path:inset(0 0 0 100%);transition-delay:0s}
.ab-why-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;transition:transform 7s cubic-bezier(.2,.6,.2,1)}
.js .ab-why:not(.is-in) .ab-why-ph img{transform:scale(1.14);transition:none}
.ab-why-ph::after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent,rgba(0,0,0,.45));pointer-events:none}
.ab-why-ph figcaption{position:absolute;z-index:1;left:clamp(16px,1.8vw,26px);bottom:clamp(14px,2.4vh,24px);font:500 12.5px/1.3 var(--sans);color:#fff}
.ab-still .ab-why-ph,.ab-still .ab-why-ph img{transition:none!important}
@media (max-width:760px){
  .ab-why .ab-stage{display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:var(--headh) 0 16px}
  .ab-why-ph{order:-1;flex:none;height:30%;min-height:150px}
  .ab-why-q{padding:22px var(--gut) 0}
  .ab-why-b::before{margin-bottom:14px}
  .ab-why-b{margin-top:14px!important}}

/* ---------- Why we exist (default): Hong Kong in pieces that lock together as the answer inks in ---------- */
.ab-why.v-m .ab-why-ph{background:transparent;clip-path:none!important;transition:none}
.ab-why.v-m .ab-why-ph img{opacity:0;transform:none!important;transition:none}
.ab-why-mo{position:absolute;inset:0;width:100%;height:100%;display:block}
.ab-why.v-m .ab-why-ph::after{opacity:0;transition:opacity 1s ease}
.ab-why.v-m .ab-why-ph figcaption{opacity:0;transform:translateY(6px);transition:opacity .8s ease,transform .8s var(--ease)}
.ab-why.v-m.is-whole .ab-why-ph::after,.ab-why.v-m.is-whole .ab-why-ph figcaption{opacity:1;transform:none}
.ab-why.v-m .ab-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ab-why.v-m .ab-why-q{max-width:760px}