/* About page, new look (live for everyone since 2026-10-17; ?v=1 shows the old page). The same texts, links and headings as the old page; only the look:
   the language of the partners / investors / contacts pages (a red rule over light headings, hairline sections with the heading
   on the left, a dark band for the client portal), the founder beside his story; the title and the stats as the owner chose (blog H1, old stats). Scoped to #main.ab-v2. */
#main.ab-v2{--ab-gap:clamp(56px,7vw,112px);color:var(--page-ink)}
/* key phrases stay bold (the owner's wish for the whole site): Semibold in ink */
#main.ab-v2 strong,#main.ab-v2 b{font-weight:600!important;color:var(--page-ink)}

/* headings: a red rule, light weight, sentence case (stored in mixed case in the three languages) */
#main.ab-v2 #philosophy>.head>h2,
#main.ab-v2 .portfolio-content>.head>h2,
#main.ab-v2 #founder-heading,
#main.ab-v2 #author-articles-block>.head>h2{position:relative;padding-top:26px;font-weight:400!important;text-transform:lowercase!important;letter-spacing:-.025em;color:var(--page-ink);background:linear-gradient(var(--red),var(--red)) no-repeat 0 0/28px 1px}
#main.ab-v2 .vacancy-page .hero h1::first-letter,
#main.ab-v2 #philosophy>.head>h2::first-letter,
#main.ab-v2 .portfolio-content>.head>h2::first-letter,
#main.ab-v2 #founder-heading::first-letter,
#main.ab-v2 #author-articles-block>.head>h2 a::first-letter{text-transform:uppercase}
#main.ab-v2 #philosophy>.head>h2,
#main.ab-v2 .portfolio-content>.head>h2,
#main.ab-v2 #founder-heading,
#main.ab-v2 #author-articles-block>.head>h2{margin:0!important;font-size:clamp(28px,2.8vw,44px)!important;line-height:1.08!important}
#main.ab-v2 #author-articles-block>.head>h2 a{display:inline-block}
#main.ab-v2 #author-articles-block>.head>h2{text-align:left!important}

/* ---------- the first screen: a large light title, the first paragraph as the lead (the photo keeps the page's own opening) ---------- */
/* the page title: the site's one H1 (ultralight, no rule, the contacts size) */
#main.ab-v2 .vacancy-page .hero h1{margin:0 0 clamp(22px,2.4vw,34px)!important;padding-top:0!important;background:none!important;font-weight:100!important;font-size:clamp(40px,5vw,84px)!important;line-height:.95!important;letter-spacing:-.035em;text-transform:lowercase!important;color:var(--page-ink)}
#main.ab-v2 .vacancy-page .hero .text p{font-size:clamp(15px,1.1vw,17px)!important;line-height:1.65!important;color:var(--page-soft)}
#main.ab-v2 .vacancy-page .hero .text p:first-child{font-size:clamp(18px,1.45vw,22px)!important;line-height:1.5!important;color:var(--page-ink);margin-bottom:18px}


/* ---------- philosophy: the heading held on the left, the text on the right; the portal as a dark band ---------- */
#main.ab-v2 #philosophy{display:block!important;padding-top:var(--ab-gap)!important;padding-bottom:0!important}
#main.ab-v2 #philosophy>.head{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:24px 64px;align-items:start;margin:0!important;width:auto!important;max-width:none!important}
#main.ab-v2 #philosophy>.head>h2{position:sticky;top:110px;max-width:none!important;width:auto!important}
#main.ab-v2 .philosophy-intro-text{max-width:none!important;width:auto!important;margin:0!important}
#main.ab-v2 .philosophy-intro-text p{margin:0 0 18px;max-width:64ch;font-size:clamp(15px,1.1vw,17px);line-height:1.68;color:var(--page-soft)}
#main.ab-v2 .philosophy-intro-text>p:first-child{font-size:clamp(18px,1.45vw,22px);line-height:1.5;color:var(--page-ink)}
#main.ab-v2 .ab-portal{position:relative;margin:34px 0 34px;padding:clamp(28px,3.4vw,48px) clamp(24px,3.4vw,52px) clamp(28px,3.4vw,44px);color:#EFE8DC;
  background:radial-gradient(60% 120% at 10% 100%,rgba(190,46,36,.24),rgba(190,46,36,0) 70%),linear-gradient(160deg,#2A1C20,#120C0F)}
#main.ab-v2 .ab-portal::before{content:"";display:block;width:22px;height:24px;margin-bottom:22px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.4 1.4 15.2 17.7' fill='none'%3E%3Crect x='3.5' y='8.5' width='13' height='9.5' rx='2' stroke='%23E0574A' stroke-width='1.6'/%3E%3Cpath d='M6.5 8.5V6a3.5 3.5 0 0 1 7 0v2.5' stroke='%23E0574A' stroke-width='1.6'/%3E%3C/svg%3E")}
#main.ab-v2 .ab-portal p{color:rgba(239,232,220,.78)!important;max-width:60ch;font-size:clamp(15px,1.05vw,16px)!important}
#main.ab-v2 .ab-portal p:last-child{margin-bottom:0}
#main.ab-v2 .ab-portal strong{color:#FFF7EE}

/* the four principles: a hairline grid of cards with large red numbers */
#main.ab-v2 #philosophy>ul.links{width:auto!important;max-width:none!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:clamp(36px,4vw,60px) 0 0!important;padding:0;background:var(--page-line);border:1px solid var(--page-line)}
#main.ab-v2 #philosophy>ul.links>li{margin:0!important;padding:0!important;border:0!important;background:var(--paper)}
#main.ab-v2 #philosophy>ul.links .link{position:relative;text-align:left!important;align-items:flex-start!important;display:flex!important;flex-direction:column;gap:18px;height:100%;padding:clamp(28px,3vw,44px) clamp(24px,2.8vw,40px)!important;border:0!important;opacity:1!important;transform:none!important;transition:background-color .8s cubic-bezier(.25,.1,.25,1)}
#main.ab-v2 #philosophy>ul.links .link::before,#main.ab-v2 #philosophy>ul.links .link::after{display:none!important}
#main.ab-v2 #philosophy>ul.links .link:hover{background:#FCFAF6}
#main.ab-v2 #philosophy>ul.links .link .ab-line{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--red-hi),var(--red-deep));transform:scaleX(0);transform-origin:0 0;transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
#main.ab-v2 #philosophy>ul.links .link:hover .ab-line{transform:none}
#main.ab-v2 #philosophy>ul.links .number{position:static!important;margin:0!important;width:auto!important;font-weight:400!important;font-size:clamp(34px,3vw,48px)!important;line-height:1!important;letter-spacing:-.04em;color:var(--red)!important;opacity:1!important}
#main.ab-v2 #philosophy>ul.links .content{display:block!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important}
#main.ab-v2 #philosophy>ul.links h4{margin:0 0 14px!important;width:auto!important;max-width:none!important;font-weight:400!important;font-size:clamp(20px,1.7vw,26px)!important;line-height:1.2!important;letter-spacing:-.015em;text-transform:none!important;color:var(--page-ink)!important}
#main.ab-v2 #philosophy>ul.links .text{width:auto!important;max-width:none!important;margin:0!important;padding:0!important}
#main.ab-v2 #philosophy>ul.links .text p{-webkit-hyphens:none!important;hyphens:none!important;margin:0;font-size:15px!important;line-height:1.68!important;color:var(--page-soft)!important;text-align:left!important}

/* the team video over the studio photo: it fades in once it plays (the photo stays underneath for the first paint and its alt) */
#main.ab-v2 .vacancy-page .hero .img-holder{position:relative}
#main.ab-v2 .ab-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity 1.6s cubic-bezier(.25,.1,.25,1)}
#main.ab-v2 .ab-hero-video.is-on{opacity:1}

/* ---------- selected work: calmer tiles, the second picture still opens in a circle on hover ---------- */
#main.ab-v2 .portfolio-content{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:end;row-gap:clamp(26px,3vw,44px);padding-top:var(--ab-gap)!important;padding-bottom:0!important}
#main.ab-v2 .portfolio-content>.head{display:block!important;grid-column:1;grid-row:1;margin:0!important;width:auto!important}
#main.ab-v2 .portfolio-content>.row{grid-column:1/-1;grid-row:2}
#main.ab-v2 .portfolio-content>.button-holder{grid-column:2;grid-row:1;margin:0!important}
#main.ab-v2 .portfolio-content>.row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.4vw,36px) clamp(16px,1.8vw,28px);margin:0!important}
#main.ab-v2 .portfolio-content .portfolio-item{width:auto!important;margin:0!important;padding:0!important}
#main.ab-v2 .portfolio-content .portfolio-item .img-holder{height:auto!important;padding:0!important;aspect-ratio:4/3;overflow:hidden}
#main.ab-v2 .portfolio-content .portfolio-item .anim-holder{position:relative;height:100%!important}
#main.ab-v2 .portfolio-content .portfolio-item .text{margin-top:14px!important}
#main.ab-v2 .portfolio-content .portfolio-item h3{margin:0!important;font-weight:400!important;font-size:13px!important;letter-spacing:.16em!important;line-height:1.4!important;text-transform:uppercase;color:var(--page-ink);transition:color .5s}
#main.ab-v2 .portfolio-content .portfolio-item:hover h3{color:var(--red)}

/* ---------- the founder: his photo, name, links and the call held on the left, the story on the right ---------- */
#main.ab-v2 .about-bio-block{padding-top:var(--ab-gap)!important;padding-bottom:0!important;margin:0!important}
#main.ab-v2 #founder-heading{display:block!important;margin-left:auto!important;margin-right:auto!important;background-origin:content-box!important;background-position:0 -26px!important}
#main.ab-v2 .about-bio-block .author-info{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);grid-template-rows:auto 1fr;gap:28px 64px;margin-top:clamp(28px,3vw,44px)!important;padding-top:0!important;align-items:start}
#main.ab-v2 .about-bio-block .author-desc{display:contents!important}
#main.ab-v2 .about-bio-block .author-title{grid-column:1;grid-row:1;display:block!important;width:auto!important;margin:0!important;padding:0!important}
#main.ab-v2 .about-bio-block .author-photo{width:100%!important;max-width:380px;height:auto!important;aspect-ratio:4/5;border-radius:0!important;margin:0 0 20px!important}
#main.ab-v2 .about-bio-block .author-title .right{margin:0!important;text-align:left!important}
#main.ab-v2 .about-bio-block .author-title .name{font-weight:400!important;font-size:24px!important;letter-spacing:-.015em;color:var(--page-ink)!important}
#main.ab-v2 .about-bio-block .author-title a:hover .name{color:var(--red)!important}
/* under the photo: the networks as round buttons, the e-mail and phone as a hairline list with icons, the call as a red pill */
#main.ab-v2 .about-bio-block .bottom{grid-column:1;grid-row:2;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;max-width:380px;margin:0!important;padding:24px 0 0!important;border-top:1px solid var(--page-line)}
#main.ab-v2 .about-bio-block .bottom .social{display:flex!important;gap:10px;margin:0 0 22px!important;padding:0!important}
#main.ab-v2 .about-bio-block .bottom .social li{margin:0!important;padding:0!important}
#main.ab-v2 .about-bio-block .bottom .social a{display:flex!important;align-items:center;justify-content:center;width:44px!important;height:44px!important;border:1px solid var(--page-line);border-radius:50%;transition:border-color .4s,background-color .4s}
#main.ab-v2 .about-bio-block .bottom .social a:hover{border-color:var(--red);background:#FCFAF6}
#main.ab-v2 .about-bio-block .bottom .social img{width:16px!important;height:16px!important;object-fit:contain}
#main.ab-v2 .about-bio-block .bottom .contacts{width:100%!important;max-width:none!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;margin:0!important;border-top:1px solid var(--page-line)}
#main.ab-v2 .about-bio-block .bottom .contacts .link{width:100%!important;display:flex!important;align-items:center;gap:14px;margin:0!important;padding:15px 0!important;border-bottom:1px solid var(--page-line);font-size:15px!important;font-weight:400!important;letter-spacing:0!important;text-transform:none!important;color:var(--page-ink)!important;white-space:nowrap;transition:color .4s,padding-left .6s cubic-bezier(.19,1,.22,1)}
#main.ab-v2 .about-bio-block .bottom .contacts .link::before{content:"";position:static!important;inset:auto!important;transform:none!important;opacity:1!important;flex:none;width:16px!important;height:16px!important;background:var(--red);-webkit-mask:no-repeat center/contain var(--ab-ic);mask:no-repeat center/contain var(--ab-ic)}
#main.ab-v2 .about-bio-block .bottom .contacts .link::after{display:none!important}
#main.ab-v2 .about-bio-block .bottom .contacts .link[href^="mailto"]{--ab-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E")}
#main.ab-v2 .about-bio-block .bottom .contacts .link[href^="tel"]{--ab-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h3.5l1.8 4.6-2.3 1.5a11 11 0 0 0 6.4 6.4l1.5-2.3 4.6 1.8V19a1.5 1.5 0 0 1-1.6 1.5A16.5 16.5 0 0 1 3.5 5.1 1.5 1.5 0 0 1 5 3.5z'/%3E%3C/svg%3E")}
#main.ab-v2 .about-bio-block .bottom .contacts .link:hover{color:var(--red)!important;padding-left:6px!important}
#main.ab-v2 .about-bio-block .author-desc>.text{grid-column:2;grid-row:1/3;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;columns:auto!important}
#main.ab-v2 .about-bio-block .author-desc>.text>p{margin:0 0 18px!important;max-width:64ch;font-size:clamp(15px,1.1vw,17px)!important;line-height:1.68!important;color:var(--page-soft)!important}
#main.ab-v2 .about-bio-block .author-desc>.text>p:first-child{font-size:clamp(18px,1.45vw,22px)!important;line-height:1.5!important;color:var(--page-ink)!important}
/* the strategic session: a night card with the price large */
#main.ab-v2 .strategic-session-block{position:relative;margin:34px 0 0!important;padding:clamp(28px,3.4vw,48px) clamp(24px,3.4vw,52px)!important;border:0!important;border-radius:0!important;color:#EFE8DC;
  background:radial-gradient(60% 120% at 90% 0%,rgba(190,46,36,.26),rgba(190,46,36,0) 70%),linear-gradient(160deg,#2A1C20,#120C0F)!important;box-shadow:none!important}
#main.ab-v2 .strategic-session-block h4{margin:0 0 12px!important;font-weight:400!important;font-size:clamp(28px,2.6vw,40px)!important;line-height:1.05!important;letter-spacing:-.025em;text-transform:none!important;color:#FFF7EE!important}
#main.ab-v2 .strategic-session-block h4 a:hover{color:#E0574A!important}
#main.ab-v2 .strategic-session-block p{margin:0 0 10px!important;font-size:15px!important;line-height:1.6!important;color:rgba(239,232,220,.75)!important;max-width:56ch}
#main.ab-v2 .strategic-session-block strong{color:#FFF7EE}
#main.ab-v2 .strategic-session-block .ssb-tagline{font-size:clamp(17px,1.35vw,20px)!important;line-height:1.45!important}
#main.ab-v2 .strategic-session-block .ssb-subhead{margin-top:24px!important;font-size:10px!important;letter-spacing:.24em;text-transform:uppercase}
#main.ab-v2 .strategic-session-block .ssb-subhead strong{color:rgba(239,232,220,.6)}
#main.ab-v2 .strategic-session-block .ssb-list{list-style:none!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:6px 0 24px!important;padding:0!important;border-top:1px solid rgba(239,232,220,.14)}
#main.ab-v2 .strategic-session-block .ssb-list li{position:relative;margin:0!important;padding:13px 0 13px 24px!important;border-bottom:1px solid rgba(239,232,220,.14);font-size:15px;color:#EFE8DC}
#main.ab-v2 .strategic-session-block .ssb-list li::before{content:"";position:absolute;left:0;top:50%;width:12px;height:1px;background:#E0574A}
#main.ab-v2 .strategic-session-block .ssb-list li::marker{content:none}
#main.ab-v2 .strategic-session-block p:nth-last-child(2) strong{display:inline-block;margin-top:6px;font-size:clamp(26px,2.4vw,36px);font-weight:400;letter-spacing:-.02em}

/* ---------- the author's column: the heading and its words on the left, the articles on the right ---------- */
#main.ab-v2 .blogs-page{padding-top:var(--ab-gap)!important;padding-bottom:0!important;margin:0 auto!important}
#main.ab-v2 #author-articles-block{margin:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:24px 64px;align-items:start;padding:0!important;width:auto!important;max-width:none!important}
#main.ab-v2 #author-articles-block>.head{grid-column:1;grid-row:1/3;display:block!important;margin:0!important;width:auto!important;position:sticky;top:110px}
#main.ab-v2 .author-column-intro{margin-top:22px!important;max-width:none!important;width:auto!important}
#main.ab-v2 .author-column-intro p{margin:0 0 14px!important;font-size:14px!important;line-height:1.65!important;color:var(--page-soft)!important}
#main.ab-v2 #author-articles-block>ul.links{grid-column:2;margin:0!important;border-top:1px solid var(--page-line)}
#main.ab-v2 #author-articles-block>ul.links .name{font-weight:400!important;font-size:clamp(17px,1.35vw,21px)!important;letter-spacing:-.01em;text-transform:none!important}
#main.ab-v2 #author-articles-block>.pagination{grid-column:2;margin-top:28px!important}
/* the column's articles as in the blog list (blog-v2.css): on phones a card (the date in red and the arrow, the wide picture,
   the title), from tablets up the picture on the left with the date and the title beside it; the hover preview stays */
#main.ab-v2 #author-articles-block .links-item .link{display:grid!important;grid-template-columns:1fr auto;grid-template-areas:"num icon" "thumb thumb" "name name";align-items:center;gap:12px 16px;width:auto!important;height:auto!important;margin:0!important;padding:24px 0!important;border-bottom:1px solid #BFB8A8!important}
#main.ab-v2 #author-articles-block .links-item .link .left{grid-area:num;display:block!important;position:static!important;width:auto!important;margin:0!important;padding:0!important}
#main.ab-v2 #author-articles-block .links-item .link .left .img-holder{display:none!important}
#main.ab-v2 #author-articles-block .links-item .link .number{display:block!important;position:static!important;margin:0!important;font-size:11px!important;font-weight:400!important;line-height:1.4!important;letter-spacing:.18em!important;color:#CE1414!important;opacity:1!important;transform:none!important}
#main.ab-v2 #author-articles-block .links-item .link .icon{grid-area:icon;position:relative!important;inset:auto!important;margin:0!important}
#main.ab-v2 #author-articles-block .ab-thumb{grid-area:thumb;display:block;aspect-ratio:720/349;overflow:hidden;background:#EDE7DE}
#main.ab-v2 #author-articles-block .ab-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
#main.ab-v2 #author-articles-block .links-item .link:hover .ab-thumb img{transform:scale(1.04)}
/* the card reacts like the blog cards (2026-10-18, no cursor preview here any more): the picture zooms a little, a fine
   passe-partout line is drawn inside it, and the title fills with our red */
#main.ab-v2 #author-articles-block .ab-thumb{position:relative}
#main.ab-v2 #author-articles-block .ab-thumb::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.75);opacity:0;transform:scale(1.03);transition:opacity .9s cubic-bezier(.25,.1,.25,1),transform 1.2s cubic-bezier(.19,1,.22,1);pointer-events:none}
#main.ab-v2 #author-articles-block .links-item .link:hover .ab-thumb::after{opacity:1;transform:none}
#main.ab-v2 #author-articles-block .hover-reveal{display:none!important}
@media (hover:hover){
  #main.ab-v2 #author-articles-block .links-item .link .name{background-image:linear-gradient(90deg,#C8392D,#BE2E24 16%,#9A241C 34%,var(--page-ink,#2D2D2D) 66.6%,var(--page-ink,#2D2D2D));background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:background-position 1.1s cubic-bezier(.25,.1,.25,1)}
  #main.ab-v2 #author-articles-block .links-item .link:hover .name{background-position:0 0}
}
#main.ab-v2 #author-articles-block .links-item .link .name{grid-area:name;margin:0!important;padding:0!important;width:auto!important;max-width:none!important;font-size:19px!important;font-weight:400!important;line-height:1.2!important;letter-spacing:-.01em!important;text-transform:none!important}
@media (min-width:768px){
  #main.ab-v2 #author-articles-block .links-item .link{grid-template-columns:clamp(180px,17vw,240px) 1fr auto;grid-template-areas:"thumb num icon" "thumb name name";gap:6px 28px;align-items:start}
  #main.ab-v2 #author-articles-block .links-item .link .left,#main.ab-v2 #author-articles-block .links-item .link .icon{align-self:end}
  #main.ab-v2 #author-articles-block .links-item .link .name{align-self:start;font-size:clamp(17px,1.35vw,21px)!important}
}

/* ---------- the form: the compact one of the contacts page (contact-v2.css, .c-v2) with room above it ---------- */
#main.ab-v2 .contacts-page.c-v2{margin-top:0;padding:0!important}
#main.ab-v2 .contacts-page.c-v2 .contacts-form{padding-top:var(--ab-gap)!important;padding-bottom:var(--ab-gap)!important}

/* ---------- the buttons: exactly the footer's pills (footer.css .pf-pill): a red pill with a slow sheen passing on hover,
   or an outline pill whose red fill fades in; the arrow (<i>, v2 only) steps right ---------- */
#main.ab-v2 .about-bio-block .bottom .author-cta,#main.ab-v2 .portfolio-content .button-holder .btn-primary,#main.ab-v2 .ab-portal a{position:relative!important;overflow:hidden!important;isolation:isolate;display:inline-flex!important;align-items:center;justify-content:center;gap:14px!important;width:auto;max-width:100%;height:auto!important;min-height:56px;min-width:0!important;margin:0!important;padding:14px 30px!important;border-radius:999px!important;border:1px solid var(--red)!important;font:400 11px/1.35 var(--sans)!important;letter-spacing:.22em!important;text-transform:uppercase!important;text-align:center;color:#FFF7EE!important;background:linear-gradient(100deg,#A8281F,var(--red) 50%,#AD2A20)!important;box-shadow:none!important;filter:none!important;transform:none;transition:transform .6s var(--e-out),color .9s var(--e-fill),border-color .9s var(--e-fill)!important}
#main.ab-v2 .about-bio-block .bottom .author-cta svg,#main.ab-v2 .portfolio-content .button-holder .btn-primary svg{display:none!important}
#main.ab-v2 .about-bio-block .bottom .author-cta::before,#main.ab-v2 .portfolio-content .button-holder .btn-primary::before,#main.ab-v2 .ab-portal a::before{content:""!important;display:block!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;z-index:-1;border:0!important;border-radius:0!important;opacity:1!important;transform:none!important;background:var(--sheen) 100% center/200% auto no-repeat!important;transition:background-position 2.4s var(--e-fill)!important}
#main.ab-v2 .about-bio-block .bottom .author-cta:hover::before,#main.ab-v2 .portfolio-content .button-holder .btn-primary:hover::before,#main.ab-v2 .ab-portal a:hover::before{background-position:0 center!important}
#main.ab-v2 .about-bio-block .bottom .author-cta:hover,#main.ab-v2 .portfolio-content .button-holder .btn-primary:hover,#main.ab-v2 .ab-portal a:hover{filter:none!important;transform:none!important}
#main.ab-v2 .about-bio-block .bottom .author-cta i,#main.ab-v2 .portfolio-content .button-holder .btn-primary i,#main.ab-v2 .ab-portal a i{font-style:normal;letter-spacing:0;font-size:14px;transition:transform .9s var(--e-out)}
/* the arrow is drawn here, so the button texts stay exactly the old page's */
#main.ab-v2 .about-bio-block .bottom .author-cta i::before,#main.ab-v2 .portfolio-content .button-holder .btn-primary i::before,#main.ab-v2 .ab-portal a i::before{content:"\2192"}
#main.ab-v2 .about-bio-block .bottom .author-cta:hover i,#main.ab-v2 .portfolio-content .button-holder .btn-primary:hover i,#main.ab-v2 .ab-portal a:hover i{transform:translateX(5px)}
/* outline pills: View all projects on the cream page, the portal on the dark band */
#main.ab-v2 .portfolio-content .button-holder .btn-primary,#main.ab-v2 .ab-portal a{background:transparent!important;border-color:rgba(45,45,45,.24)!important;color:var(--page-ink)!important}
#main.ab-v2 .ab-portal a{display:inline-flex!important;width:max-content;margin-top:26px!important;border-color:rgba(239,232,220,.3)!important;color:#FFF7EE!important}
#main.ab-v2 .portfolio-content .button-holder .btn-primary::after,#main.ab-v2 .ab-portal a::after{content:""!important;display:block!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;z-index:-2;opacity:0;border:0!important;transform:none!important;background:linear-gradient(100deg,#A8281F,var(--red) 50%,#AD2A20)!important;transition:opacity 1.2s var(--e-fill)!important}
#main.ab-v2 .portfolio-content .button-holder .btn-primary:hover,#main.ab-v2 .ab-portal a:hover{color:#FFF7EE!important;border-color:var(--red)!important}
#main.ab-v2 .portfolio-content .button-holder .btn-primary:hover::after,#main.ab-v2 .ab-portal a:hover::after{opacity:1}
/* on the cream page the sheen would read as a stain: hidden at rest, it passes only over the red fill */
#main.ab-v2 .portfolio-content .button-holder .btn-primary::before{opacity:0!important;transition:background-position 2.4s var(--e-fill),opacity .9s var(--e-fill)!important}
#main.ab-v2 .portfolio-content .button-holder .btn-primary:hover::before{opacity:1!important}
#main.ab-v2 .about-bio-block .bottom .author-cta{width:100%!important;margin-top:24px!important}
#main.ab-v2 .about-bio-block .bottom .author-cta::after{display:none!important}

/* sections reveal as they come into view (about-v2.js adds .ab-in; without JS everything is simply shown) */
html.ab-js #main.ab-v2 .ab-rv{opacity:0;transform:translateY(28px);transition:opacity 1.1s cubic-bezier(.19,1,.22,1),transform 1.4s cubic-bezier(.19,1,.22,1)}
html.ab-js #main.ab-v2 .ab-rv.ab-in{opacity:1;transform:none}

/* ---------- tablets and phones: one column, the held parts let go ---------- */
@media (max-width:900px){
  #main.ab-v2 #philosophy>.head,#main.ab-v2 .about-bio-block .author-info,#main.ab-v2 #author-articles-block{grid-template-columns:1fr;gap:22px}
  #main.ab-v2 #philosophy>.head>h2,#main.ab-v2 #author-articles-block>.head,#main.ab-v2 .about-bio-block .bottom{position:static}
  #main.ab-v2 .about-bio-block .author-title{display:flex!important;align-items:center;gap:20px}
  #main.ab-v2 .about-bio-block .author-photo{width:120px!important;margin:0!important}
  #main.ab-v2 .about-bio-block .author-desc>.text{grid-column:1;grid-row:2}
  #main.ab-v2 .about-bio-block .bottom{grid-row:3}
  #main.ab-v2 #author-articles-block>.head,#main.ab-v2 #author-articles-block>ul.links,#main.ab-v2 #author-articles-block>.pagination{grid-column:1;grid-row:auto}
  #main.ab-v2 #philosophy>ul.links{grid-template-columns:1fr}
  #main.ab-v2 .portfolio-content>.row{grid-template-columns:repeat(2,minmax(0,1fr))}
  #main.ab-v2 .portfolio-content>.button-holder{grid-column:1/-1;grid-row:3}
}
@media (max-width:640px){
  #main.ab-v2 .strategic-session-block .ssb-list{grid-template-columns:1fr}
  #main.ab-v2 .portfolio-content>.row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html.ab-js #main.ab-v2 .ab-rv{opacity:1;transform:none;transition:none}
}
