.about .ab-n { display: inline-flex; align-items: center; gap: 10px; font: 600 var(--t-label)/1 var(--f-cond); letter-spacing: var(--track-label); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.about .ab-n::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .5; }
.about .ab-idea { padding: clamp(18px, 2.6vw, 44px) 0 var(--section); }
.about .ab-idea__label { display: flex; align-items: center; gap: 12px; margin-top: clamp(18px, 2vw, 28px); }
.about .ab-h1 { display: block; margin-top: clamp(12px, 1.4vw, 22px); }
.about .ab-h1 .fit { line-height: .9; }
.about .ab-h1__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .5fr); gap: clamp(10px, 1.6vw, 28px); align-items: stretch; }
@media (min-width: 768px) { .about .ab-h1__row { grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); } }
.about .ab-h1__runner {
display: block; margin: .1em 0 .12em; min-height: 40px;
background: var(--nap), var(--red); background-blend-mode: multiply;
clip-path: polygon(2% 0, 24% 0, 100% 100%, 38% 100%);
animation: ab-unroll var(--d-unroll) var(--ease) .25s both;
}
@keyframes ab-unroll { from { clip-path: polygon(2% 0, 24% 0, 24% 0, 2% 0); } to { clip-path: polygon(2% 0, 24% 0, 100% 100%, 38% 100%); } }
.about .ab-idea__more { display: grid; gap: clamp(40px, 5vw, 56px); margin-top: clamp(36px, 5.4vw, 88px); }
.about .ab-idea__text { display: flex; flex-direction: column; gap: clamp(26px, 3vw, 40px); }
.about .ab-s2, .about .ab-s3 { display: flex; flex-direction: column; gap: 12px; }
.about .ab-s2__t { display: block; font-size: clamp(40px, 22px + 4.1vw, 96px); line-height: .92; }
.about .ab-s3 > span:last-child { font: 400 clamp(19px, 16.4px + .55vw, 24px)/1.4 var(--f-sans); max-width: 30ch; text-wrap: pretty; }
.about .ab-idea__p { margin-top: -6px; font-size: var(--t-body); line-height: 1.6; max-width: 52ch; color: var(--fg); text-wrap: pretty; }
.about .ab-idea__cta { --gap: 12px 28px; }
.about .ab-idea__photo { justify-self: end; }
@media (min-width: 768px) and (max-width: 1023.98px) {
.about .ab-idea__more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: end; }
}
@media (min-width: 1024px) {
.about .ab-idea__more { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 24px; align-items: start; }
.about .ab-idea__photo { margin-top: clamp(0px, 2vw, 32px); }
}
.about .ab-people { padding-top: 0; }
.about .ab-people__list { display: grid; gap: clamp(80px, 9vw, 150px); margin-top: clamp(56px, 7vw, 112px); }
.about .ab-p { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.about .ab-p__print .print { width: min(100%, 360px); }
.about .ab-p__role { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--fg-2); }
.about .ab-p__n { color: var(--fg); font-variant-numeric: tabular-nums; }
.about .ab-p__name { margin-top: 14px; font-size: clamp(64px, 30px + 8.6vw, 172px); line-height: .82; }
.about .ab-p__name .w { display: block; }
.about .ab-p__bio { margin-top: clamp(20px, 2.2vw, 30px); font-size: var(--t-lede); line-height: 1.5; max-width: 44ch; text-wrap: pretty; }
.about .ab-fact { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--hair); }
.about .ab-fact__t { font: 400 var(--t-ui)/1.3 var(--f-cond); color: var(--fg-2); }
.about .ab-fact__t b { display: block; font: 700 var(--t-h3)/1.1 var(--f-cond); color: var(--fg); }
.about .ab-fact__t--tags { display: flex; flex-wrap: wrap; gap: 4px 0; font: 700 var(--t-h3)/1.2 var(--f-cond); color: var(--fg); }
.about .ab-fact__t--tags span { white-space: nowrap; }
.about .ab-fact__t--tags span:not(:last-child)::after { content: "·"; margin: 0 .45em; color: var(--fg-2); font-weight: 400; }
@media (min-width: 768px) {
.about .ab-p { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; }
.about .ab-p--flip .ab-p__print { order: 2; }
.about .ab-p__print .print { width: 100%; }
}
@media (min-width: 1024px) {
.about .ab-p { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.about .ab-p__print { grid-column: 1 / span 4; }
.about .ab-p__body { grid-column: 6 / span 7; }
.about .ab-p--flip .ab-p__print { grid-column: 9 / span 4; grid-row: 1; }
.about .ab-p--flip .ab-p__body { grid-column: 1 / span 7; grid-row: 1; }
}
.about .ab-years__list { margin-top: clamp(44px, 5.6vw, 88px); border-bottom: 1px solid var(--hair); }
.about .ab-y { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 20px; padding: 28px 0 34px; border-top: 1px solid var(--hair); }
.about .ab-y__mark { padding-top: 4px; }
.about .ab-y__side { grid-column: 1 / -1; margin-top: 8px; }
.about .ab-y__who { display: flex; flex-wrap: wrap; font: italic 600 var(--t-meta)/1.35 var(--f-cond); color: var(--fg-2); }
.about .ab-y__amp { white-space: pre; }
.about .ab-y__t { margin-top: 10px; font: 900 clamp(32px, 21px + 2.6vw, 66px)/.9 var(--f-display); text-transform: uppercase; text-wrap: balance; }
.about .ab-y__x { margin-top: 16px; font-size: var(--t-body); line-height: 1.55; max-width: 52ch; text-wrap: pretty; }
.about .ab-y__lh { color: var(--fg-2); margin-bottom: 8px; }
.about .ab-y__list { border-bottom: 1px solid var(--hair); }
.about .ab-y__list li { border-top: 1px solid var(--hair); }
.about .ab-y__list a { display: flex; flex-direction: column; gap: 3px; padding: 11px 28px 12px 0; position: relative; text-decoration: none; }
.about .ab-y__list a::after { content: "→"; position: absolute; right: 2px; top: 12px; color: var(--fg-2); transition: transform .35s var(--ease), color .3s; }
.about .ab-y__list a:hover::after, .about .ab-y__list a:focus-visible::after { transform: translateX(4px); color: var(--fg); }
.about .ab-y__en { font: italic 700 clamp(17px, 15.6px + .35vw, 20px)/1.2 var(--f-cond); }
.about .ab-y__pl { font-size: var(--t-meta); line-height: 1.35; color: var(--fg-2); }
.about .ab-y__photo { width: min(100%, 460px); margin-top: clamp(28px, 3vw, 40px); }
.about .ab-y--next .ab-y__t { font-size: clamp(40px, 24px + 4vw, 104px); }
@media (min-width: 1024px) {
.about .ab-y { grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) minmax(0, 4fr); gap: 24px; padding: 40px 0 46px; align-items: start; }
.about .ab-y__side { grid-column: 3; }
.about .ab-y--next .ab-y__main { grid-column: 2 / span 2; }
}
.rc .about .ab-y[data-reveal], .rc .about .ab-roll__r[data-reveal] { transition: opacity .7s var(--ease), transform .8s var(--ease); }
.rc .about .ab-y[data-reveal]:not(.is-in), .rc .about .ab-roll__r[data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 28px, 0); }
.about .ab-rec__list { margin-top: clamp(44px, 5.6vw, 88px); border-bottom: 1px solid var(--hair); }
.about .ab-rec__i { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 24px; padding: 24px 0 30px; border-top: 1px solid var(--hair); }
.about .ab-rec__t { font-size: clamp(44px, 27px + 3.4vw, 88px); line-height: .88; }
.about .ab-rec__by { font-size: var(--t-meta); line-height: 1.45; color: var(--fg-2); max-width: 30ch; }
.about .ab-rec__every { display: inline-block; padding: 9px 0; color: var(--fg); }
@media (min-width: 1024px) {
.about .ab-rec__i { grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 3fr); align-items: center; padding: 30px 0 34px; }
.about .ab-rec__by { padding-top: .3em; }
}
.about .ab-cause { overflow-x: clip; }
.about .ab-cause__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; padding-top: 14px; border-top: 2px solid var(--hair-strong); }
.about .ab-cause__label { color: var(--fg); }
.about .ab-cause__h { margin-top: clamp(16px, 1.8vw, 28px); }
.about .ab-cause__h .fit { line-height: .86; }
.about .ab-cause__lede { margin-top: clamp(22px, 2.4vw, 32px); font-size: var(--t-lede); line-height: 1.45; max-width: 42ch; text-wrap: pretty; }
.about .ab-cause__lh { margin: clamp(36px, 4vw, 56px) 0 4px; color: var(--fg-2); }
.about .ab-cause__sash { display: flex; justify-content: center; align-items: center; padding: 24px 0; }
.about .ab-cause__sash .sash__band { font-size: clamp(17px, 9px + 1.9vw, 34px); }
.about .ab-cause__sash .sash { max-width: none; }
.rc .about .ab-cause__sash[data-reveal] .sash__band { transition: clip-path 1s var(--ease) .1s; }
.rc .about .ab-cause__sash[data-reveal]:not(.is-in) .sash__band { clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%, 1.1em 50%); }
@media (min-width: 1024px) {
.about .ab-cause__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: center; }
.about .ab-cause__sash { margin-right: calc(var(--m) * -1 - 40px); justify-content: flex-start; padding-left: 12px; }
}
.about .ab-finale { position: relative; padding-top: var(--section); overflow-x: clip; }
.about .ab-quote { position: relative; max-width: 1240px; }
.about .ab-quote::before {
content: ""; position: absolute; z-index: 0; left: -12%; top: -30%; width: 90%; height: 160%; pointer-events: none;
background: radial-gradient(closest-side, rgba(255, 230, 179, .075), rgba(255, 230, 179, 0));
}
.about .ab-quote__q { position: relative; margin: 0; }
.about .ab-quote__t { display: block; font-size: clamp(44px, 22px + 4.9vw, 112px); line-height: .9; text-wrap: balance; }
.about .ab-quote__by { position: relative; display: flex; align-items: center; gap: 14px; margin-top: clamp(24px, 3vw, 40px); font: 400 var(--t-meta)/1.4 var(--f-sans); color: var(--fg-2); }
.about .ab-quote__by b { display: block; font: italic 700 var(--t-h3)/1.1 var(--f-cond); color: var(--fg); }
.about .ab-quote__role { display: block; margin-top: 4px; }
.about .ab-roll { max-width: 1120px; margin: clamp(120px, 15vw, 240px) auto 0; padding-bottom: clamp(96px, 11vw, 168px); }
.about .ab-roll__h { text-align: center; color: var(--fg-2); margin-bottom: clamp(28px, 3vw, 44px); }
.about .ab-roll__dl .credits__r { border-top: 0; padding: 16px 0; }
.about .ab-roll__dl .credits__role { color: var(--fg-2); }
.about .ab-roll__many ul { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 2px; }
.about .ab-roll__many li { white-space: nowrap; font: italic 700 clamp(18px, 16px + .5vw, 24px)/1.35 var(--f-cond); }
.about .ab-roll__many li:not(:last-child)::after { content: "·"; margin: 0 .5em; font-style: normal; font-weight: 400; color: var(--fg-2); }
@media (min-width: 768px) {
.about .ab-roll__dl .credits__r { padding: 14px 0; }
.about .ab-roll__many ul { justify-content: flex-start; }
}
.about .ab-end { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: clamp(88px, 11vw, 176px); text-align: center; }
.about .ab-end__l { color: var(--fg-2); }
.about .ab-end__logo { display: block; width: min(100%, 760px); padding: 0 4%; color: var(--fg); }
.about .ab-end__logo .logo { width: 100%; height: auto; transform: skewX(var(--skew)); transform-origin: 50% 100%; }
.rc .about .ab-end .logo { transition: transform var(--d-lean) var(--ease); }
.rc .about .ab-end:not(.is-called) .logo { transform: none; }
.about .ab-end__logo:focus-visible { outline-offset: 10px; }
.about .ab-end__flash { position: absolute; z-index: 1; left: 50%; top: 40%; width: 80%; height: 120%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); }
.about .ab-end.is-flash .ab-end__flash { animation: rc-flash .5s ease-out 1 both; }
.about .ab-end__s { font: 400 var(--t-meta)/1.4 var(--f-sans); color: var(--fg-2); }