/* Approved portrait, career history and selected brand experience. */
.about-page .biography>.type-band,.about-page .collabs>.type-band,.about-page .recognition>.type-band{max-width:calc(1440px - var(--gap) * 2);width:calc(100% - var(--gap) * 2);margin-inline:auto;border-inline:1px solid var(--line);contain:paint}
.profile-portrait{grid-column:1/-1;align-self:start;min-width:0;margin-top:var(--gap);background:#111;aspect-ratio:1084/1451}
.profile-portrait img{width:100%;height:auto;display:block;object-fit:contain;aspect-ratio:1084/1451}
.about-page .experience{min-width:0;min-height:0}
.experience .record-head{align-items:center}
.experience .record-head h3{font:inherit;letter-spacing:inherit}
.career-intro{font-size:14px;line-height:1.4;padding:18px var(--gap);border-bottom:1px solid var(--line)}
.career-timeline{list-style:none;margin:0;padding:0}
.career-timeline .record-row{min-height:76px;align-items:center;padding:14px 8px}
.career-dates{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:4px;row-gap:2px;font-size:9px;line-height:1.4}
.career-dates time{white-space:nowrap}
.career-position strong{display:block;font-weight:400;font-size:15px;line-height:1.25}
.career-position span{font-size:12px;line-height:1.4;margin-top:5px;color:var(--muted)}
.career-timeline .record-row:last-child{border-bottom:0}
.brand-grid{padding-block:var(--gap)}
.brand-grid .brand-intro{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;gap:24px;padding:20px}
.brand-intro p{font-size:20px;line-height:1.15;letter-spacing:-.03em}
.brand-intro>span{font-size:12px;line-height:1.4;color:var(--muted)}
.brand-mark{margin:0;display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--line);min-width:0;position:relative;background:var(--paper)}
.brand-mark img{display:block;width:55%;height:34%;max-width:180px;object-fit:contain}
.brand-mark--compact img{width:32%;height:32%;max-width:108px}
.brand-mark--padded img{width:85%;height:85%;max-width:290px}
.brand-mark--white{background:#db1e2b}
.brand-mark[data-brand=caltex] img{max-width:158px}
@media(min-width:834px){
 .about-page .bio-assembly{grid-template-columns:repeat(8,minmax(0,1fr))}
 .profile-portrait{grid-column:1/span 4;grid-row:1;align-self:start}
 .about-page .location-panel{display:none}
 .about-page .experience{grid-column:5/span 4;grid-row:1;margin-top:var(--gap)}
 .career-timeline .record-row{grid-template-columns:35% minmax(0,1fr);gap:12px;min-height:76px}
 .career-position strong{font-size:14px}
 .career-dates{font-size:9px}
 .brand-intro p{font-size:24px}
 .brand-intro>span{font-size:14px}
}
@media(min-width:1440px){
 .about-page .bio-assembly{grid-template-columns:repeat(12,minmax(0,1fr))}
 .profile-portrait{grid-column:1/span 6;grid-row:1/span 2}
 .about-page .location-panel{display:flex;grid-column:7/span 6;grid-row:1;min-height:280px;padding:18px;align-self:stretch}
 .about-page .location-panel img{max-height:230px}
 .about-page .location-panel p{margin:0 20px 8px}
 .about-page .experience{grid-column:7/span 6;grid-row:2;margin-top:0;align-self:stretch}
 .career-timeline .record-row{grid-template-columns:30% minmax(0,1fr);gap:var(--gap)}
 .career-dates{font-size:10px}
 .career-position strong{font-size:15px}
}
@media(max-width:833px){
 .about-page .record-head,.career-timeline .record-row{grid-template-columns:32% minmax(0,1fr);gap:14px}
 .career-timeline .record-row{min-height:82px;padding-inline:8px}
 .career-position strong{font-size:14px}
 .brand-grid .brand-intro{padding:14px;gap:16px}
 .brand-intro p{font-size:19px}
 .brand-intro>span{font-size:11px}
}
