/* Content-sized cards; portrait anchored at the face, independent of CMS offsets. */
.bento{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) minmax(0,1fr);grid-template-areas:"portrait brief brief" "music experience sidebar" "education education education" "gallery gallery gallery";align-items:start;gap:20px}
.bento>.tile{grid-column:auto;grid-row:auto;min-width:0}
.bento .t-portrait{grid-area:portrait;min-height:clamp(320px,25vw,460px);aspect-ratio:auto;width:100%;align-self:stretch;height:auto;margin:0;overflow:hidden;clip-path:inset(0)!important}
.portrait-img{left:50%!important;top:50%;bottom:auto!important;height:124%!important;width:auto;max-width:none;translate:-52% -35%;object-fit:contain}
.bento .t-brief{grid-area:brief;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.t-brief p{max-width:75ch;overflow-wrap:anywhere}
.bento .t-music{grid-area:music;align-self:stretch}
.t-music>.media{aspect-ratio:1;width:100%;height:auto;min-height:0;flex:0 0 auto;background-size:cover;background-position:center}
.t-music>.label,.t-music>.music-meta,.t-music>.progress,.t-music>.music-note,.t-music>.music-status,.t-music>.music-lyrics{flex-shrink:0}
.bento .t-exp{grid-area:experience;align-self:stretch}
.about-sidebar{grid-area:sidebar;display:grid;grid-template-rows:auto minmax(min-content,1fr);gap:20px;min-width:0;align-self:stretch;align-content:stretch}
.about-sidebar .tile{min-width:0;grid-column:auto;grid-row:auto}
.bento .t-education{grid-area:education;align-self:start}
.bento .t-gallery{grid-area:gallery}
.facts li{display:grid;grid-template-columns:76px minmax(0,1fr);overflow-wrap:anywhere;line-height:1.6}
.facts li span{min-width:0}
.pills span{max-width:100%;overflow-wrap:anywhere}
.timeline li{grid-template-columns:minmax(0,1fr) auto}
.timeline strong,.timeline p{overflow-wrap:anywhere}
.bento .t-gallery{height:95vh;height:95dvh;min-height:0}
.t-gallery .gallery-head{flex:none}
.t-gallery .roll{height:auto;min-height:0;flex:1}
.t-gallery .roll-col{min-height:0;overflow:hidden}
@media(min-width:1800px){.bento{grid-template-columns:minmax(0,1fr) minmax(0,1.65fr) minmax(0,1fr)}.bento .t-portrait{aspect-ratio:auto}.tile{padding:clamp(28px,2vw,40px)}}
@media(max-width:1100px){.bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"portrait brief" "experience experience" "music sidebar" "education education" "gallery gallery"}.bento .t-portrait{aspect-ratio:auto;min-height:340px}.timeline li{gap:6px 12px}}
@media(max-width:700px){.bento{grid-template-columns:minmax(0,1fr);grid-template-areas:"portrait" "brief" "sidebar" "experience" "music" "education" "gallery";gap:16px}.bento .t-portrait{height:340px;min-height:0;max-height:none;margin:0}.tile{padding:24px}.t-brief p{font-size:17px}.about-sidebar{gap:16px}.timeline li{grid-template-columns:minmax(0,1fr)}.timeline time{grid-column:1;white-space:normal}.facts li{grid-template-columns:70px minmax(0,1fr)}.pills span{padding:8px 12px}.t-music>.media{flex:none;aspect-ratio:1;height:auto}.t-gallery .roll-strip{flex:1;min-height:0;height:auto;margin-inline:-24px}.t-gallery .roll-strip-track,.t-gallery .roll-strip .media{height:100%}.t-gallery .roll-strip .media img{height:100%;width:auto}}

/* Let each row stretch to its tallest content; keep album art compact. */
.bento .t-music{width:100%;height:auto;align-self:stretch;overflow:hidden}
.t-music>.media{width:min(78%,220px);height:auto;aspect-ratio:1;flex:none;align-self:center}
.t-music .music-lyrics{margin-top:0}
.bento .t-exp{align-self:stretch}
.about-sidebar{height:auto;align-self:stretch;grid-template-rows:auto minmax(min-content,1fr)}
.about-sidebar .t-skills{overflow:visible}
.t-exp .timeline li{padding-block:22px}
.t-exp .timeline li:first-child{padding-top:4px}
/* Music width is 84% of the portrait; experience takes the remaining space. */
@media(min-width:1281px){
 .bento{grid-template-columns:calc((100% - 40px)*.21) calc((100% - 40px)*.04 - 20px) minmax(0,1.7fr) minmax(0,1fr);grid-template-areas:none}
 .bento .t-portrait{grid-area:1 / 1 / 2 / 3}
 .bento .t-brief{grid-area:1 / 3 / 2 / 5}
 .bento .t-music{grid-area:2 / 1 / 3 / 2}
 .bento .t-exp{grid-area:2 / 2 / 3 / 4}
 .about-sidebar{grid-area:2 / 4 / 3 / 5}
 .bento .t-education{grid-area:3 / 1 / 4 / 5}
 .bento .t-gallery{grid-area:4 / 1 / 5 / 5}
 .bento .t-music{padding:clamp(16px,1.4vw,28px)}
}
@media(min-width:701px) and (max-width:1280px){
 .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"portrait brief" "experience experience" "music sidebar" "education education" "gallery gallery"}
 .bento .t-portrait{min-height:340px}
 .bento .t-music{width:84%;max-width:100%;justify-self:start;padding:20px}
 .timeline li{gap:6px 12px}
}
.t-music>.media{width:100%;align-self:flex-start}
.t-music .music-meta,.t-music .track{min-width:0;width:100%}.t-music .track strong,.t-music .track small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media(max-width:700px){
 .bento{padding-inline:clamp(16px,4vw,28px)}
 .bento .t-music{width:84%;max-width:100%;justify-self:center;align-self:start;padding:20px}
 .timeline li{gap:6px 12px}
}
/* Reference portrait: outlined frame, head above its top, face anchored at 52% of the image. */
.bento{padding-top:80px}
.bento .t-portrait{padding:0;background:transparent;border-color:rgba(255,255,255,.85);overflow:visible;clip-path:inset(var(--portrait-clip-top,-200%) var(--portrait-clip-right,0px) var(--portrait-clip-bottom,0px) var(--portrait-clip-left,0px) round var(--portrait-round-tl,0px) var(--portrait-round-tr,0px) var(--portrait-round-br,28px) var(--portrait-round-bl,28px))!important}
.portrait-img{left:50%!important;top:auto!important;bottom:var(--portrait-bottom,-2%)!important;height:min(var(--portrait-scale,129%),calc(100% + 110px))!important;width:auto;max-width:none;translate:calc(-1 * var(--portrait-face-x,52%)) 0;object-fit:contain}