/* about.html (contra-01). Uses system.css tokens. Motion: transform + opacity only, no loops. */
.abp{--sv-acc:var(--sign);--sv-bg:var(--ink);--sv-red:var(--oxide);overflow-x:clip}
.abp section{position:relative;overflow-x:clip}
.abp svg *{transform-box:fill-box;transform-origin:center}
/* hero */
.ab-hero{padding:calc(var(--hdr,72px) + clamp(28px,6vh,80px)) 0 clamp(48px,8vh,110px)}
.ab-hero__in{align-items:end;row-gap:36px}
.ab-hero__txt{grid-column:1/-1;display:flex;flex-direction:column;gap:22px}
.ab-k{color:var(--sign)}
.ab-hero h1{font-size:clamp(4.2rem,21vw,17rem);line-height:.82;margin:0 0 0 -.05em}
.ab-hero__art{grid-column:1/-1;margin:0}
.ab-front{display:block;width:100%;height:auto}
.ab-hero__art figcaption{margin-top:12px}
@media(min-width:900px){
 .ab-hero__txt{grid-column:1/6;padding-bottom:4vh}
 .ab-hero__art{grid-column:6/-1;margin-right:calc(var(--edge)*-1)}
 .ab-hero h1{font-size:clamp(5rem,9vw,11rem)}
}
.js:not(.rm) .fe-shutter{animation:ab-shut 1.8s var(--ease-ramp) .5s both}
.js:not(.rm) .fe-letters,.js:not(.rm) .fe-letters2{transform-origin:left center;animation:ab-letters 1.1s var(--ease-ramp) 1.6s both}
.js:not(.rm) .fe-hall{animation:ab-fade 1.4s var(--ease-ramp) .9s both}
.fe-shutter{transform:translateY(-100%)}
@keyframes ab-shut{from{transform:none}to{transform:translateY(-100%)}}
@keyframes ab-letters{from{transform:scaleX(0)}to{transform:none}}
@keyframes ab-fade{from{opacity:.25}to{opacity:1}}
/* photo */
.ab-photo{padding:0 0 clamp(56px,9vh,120px)}
.ab-photo__f{width:100%;aspect-ratio:16/9;max-height:92svh}
@media(max-width:700px){.ab-photo__f{aspect-ratio:4/3}}
.ab-photo__c{margin-top:14px;max-width:70ch}
/* owner's words */
.ab-own{padding:clamp(72px,12vh,160px) 0}
.ab-own__h{grid-column:1/-1;color:var(--sign);margin:0 0 22px}
.ab-own__q{grid-column:1/-1;margin:0;font-size:clamp(1.9rem,5.6vw,6rem);line-height:.96}
.ab-own__q p{margin:0}.ab-own__q span{display:block}
.ab-own__q span:nth-child(2){padding-left:min(12vw,180px)}
.ab-own__q span:nth-child(3){color:var(--sign)}
.ab-own__c{grid-column:1/-1;margin-top:22px;opacity:.8}
.ab-veh{grid-column:1/-1;list-style:none;margin:clamp(40px,7vh,90px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
@media(min-width:900px){.ab-veh{grid-template-columns:repeat(5,minmax(0,1fr))}}
.ab-own{--sv-bg:var(--fascia)}
.veh{display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:1px solid rgba(236,233,225,.3)}
.veh svg{width:100%;height:auto;margin-bottom:8px;overflow:visible;color:var(--brick)}
.veh .vl{font-weight:600;line-height:1.25}
.veh .vs{font-stretch:75%;font-weight:650;text-transform:uppercase;letter-spacing:.06em;font-size:.8125rem;color:var(--sign)}
.veh.nope .vs{color:var(--brick);text-decoration:line-through 2px var(--oxide)}
.veh.nope .vb{opacity:.45;stroke-dasharray:5 6}
.vm path{stroke-width:3.4}
/* depth: much bigger than it looks */
.ab-big{padding:clamp(60px,10vh,140px) 0;min-height:max(110svh,900px);display:flex;flex-direction:column;justify-content:flex-end;
 --a:clamp(0,(var(--p,1) - .12)/.5,1)}
.ab-big__art{position:absolute;inset:0 0 auto 0;height:62%;display:flex;align-items:center;justify-content:center;pointer-events:none}
.ab-depth{width:110%;height:auto;max-height:100%;flex:none}
.dp-hall{transform-box:view-box;transform-origin:800px 330px;transform:scale(calc(.32 + .68*var(--a)))}
.dp-f{opacity:clamp(.08,calc(var(--a)*7 - var(--i)),1)}
.dp-door{opacity:calc(1 - var(--a)*.85)}
.dp-rays{opacity:calc(.08 + .25*var(--a))}
.ab-big__in{position:relative}
.ab-big .label{color:var(--sign)}
.ab-bigq{margin:18px 0 0}
.ab-bigq .quote{font-size:clamp(2.6rem,8vw,9rem);line-height:.98;max-width:12ch}
.ab-bigq figcaption,.ab-q figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:16px}
.ab-q figcaption cite,.ab-bigq figcaption cite{margin:0}
.ab-q{margin:0}
/* people: staggered oversized quotes */
.ab-ppl{padding:clamp(72px,12vh,160px) 0}
.ab-ppl__k{margin:10px 0 clamp(36px,6vh,72px)}
.ab-ppl__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(40px,8vh,96px)}
.ab-pp .quote{font-size:clamp(1.9rem,5vw,5.2rem)}
.ab-pp--1{align-self:flex-end;text-align:right}.ab-pp--1 figcaption{justify-content:flex-end}
.ab-pp--2{padding-left:min(18vw,260px)}
.ab-pp--2 .quote{color:var(--sign)}
@media(max-width:600px){.ab-pp--2{padding-left:0}}
.ab-ppl .rail{margin-top:clamp(60px,10vh,120px)}
/* regulars */
.ab-reg{padding:clamp(72px,12vh,160px) 0}
.ab-reg__hd{grid-column:1/-1;margin-bottom:36px}
.ab-reg__hd h2{margin:0 0 12px}
.ab-reg__list{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;gap:0 clamp(24px,4vw,64px)}
@media(min-width:900px){.ab-reg__hd{grid-column:1/8}.ab-reg__list{grid-column:4/-1;grid-template-columns:1fr 1fr}}
.ab-reg__list li{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--line-l)}
.ab-reg__n{font-size:clamp(2rem,3.4vw,3.4rem);line-height:.9;color:var(--fascia)}
.ab-reg .quote-body{margin:0;font-size:clamp(1.125rem,1.4vw,1.4rem)}
/* rating */
.ab-rate{padding:clamp(72px,12vh,160px) 0;--a:clamp(0,(var(--p,1) - .15)/.4,1)}
.ab-rate__big{grid-column:1/-1}
.ab-rate__big h2{color:var(--sign);margin:0}
.ab-rate__n{font-size:clamp(7rem,34vw,26rem);line-height:.8;margin:12px 0 18px -.04em}
.ab-rate__s{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ab-rate__s .stars{--s:26px}
.ab-rate__bd{grid-column:1/-1;margin-top:40px;display:flex;flex-direction:column;gap:22px}
@media(min-width:900px){.ab-rate__big{grid-column:1/8}.ab-rate__bd{grid-column:8/-1;align-self:end}}
.ab-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ab-bars li{display:grid;grid-template-columns:4.5em 1fr 2.5em;align-items:center;gap:12px}
.ab-bar{height:14px;background:var(--line-d)}
.ab-bar i{display:block;height:100%;background:var(--sign);transform-origin:left;transform:scaleX(calc(var(--v)*var(--a)))}
/* building */
.ab-bld{padding:clamp(72px,12vh,160px) 0}
.ab-bld__in{row-gap:36px;align-items:start}
.ab-bld__ph,.ab-bld__txt,.ab-bld__ph2{grid-column:1/-1}
.ab-bld__ph{aspect-ratio:3/4}
.ab-bld__ph2{aspect-ratio:16/9}.ab-bld__ph2 img{object-position:50% 12%}
@media(min-width:900px){.ab-bld__ph{grid-column:1/6;grid-row:1/3}.ab-bld__txt{grid-column:7/-1;padding-top:6vh}.ab-bld__ph2{grid-column:8/-1}}
.ab-bld__txt h2{margin:0 0 20px}
.ab-bld__txt p{max-width:46ch}
.ab-acc__h{margin:32px 0 12px;color:var(--sign)}
.ab-acc{list-style:none;margin:0;padding:0}
.ab-acc li{padding:14px 0 14px 34px;border-top:1px solid var(--line-d);position:relative}
.ab-acc li::before{content:"";position:absolute;left:0;top:50%;width:14px;height:8px;border-left:3px solid var(--sign);border-bottom:3px solid var(--sign);transform:translateY(-70%) rotate(-45deg)}
/* listing */
.ab-list{padding:clamp(72px,12vh,160px) 0}
.ab-list__hd{grid-column:1/-1;display:flex;flex-direction:column;gap:16px;margin-bottom:32px}
.ab-list__hd h2{margin:0}
@media(min-width:900px){.ab-list__hd{grid-column:1/5}.ab-led{grid-column:6/-1}}
.ab-led{grid-column:1/-1;margin:0}
.ab-led__row{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;border-top:1px solid var(--line-l)}
@media(min-width:700px){.ab-led__row{grid-template-columns:10em 1fr auto;align-items:baseline;gap:16px}}
.ab-led dd{margin:0}
.ab-led__src{color:var(--fascia)}
.ab-led .call{display:inline-flex;align-items:center;min-height:48px;padding-block:2px}
@media(prefers-reduced-motion:reduce){.fe-shutter{animation:none!important}.abp [data-scene]{--p:1!important}}
.rm .fe-shutter,.rm .fe-letters,.rm .fe-letters2,.rm .fe-hall{animation:none!important}
.rm .ab-big,.rm .ab-rate{--p:1!important}
@media(max-width:899px){.ab-big{min-height:100svh}.ab-big__art{height:58%}.ab-depth{width:230%;max-height:none;max-width:none}.ab-big{min-height:88svh}}