/* Content-led adaptation based on Material compact/medium/expanded widths.
   CSS pixels are used for the web; Android dp values are guidance, not device detection. */
body.about-mobile-story{--about-gutter:clamp(24px,4vw,48px);--about-card-space:32px}
.about-mobile-story .inner-page.wrap{width:100%;max-width:1280px;box-sizing:border-box;padding-inline:max(var(--about-gutter),env(safe-area-inset-left)) max(var(--about-gutter),env(safe-area-inset-right));margin-inline:auto}
.about-mobile-story .professional-status{margin-left:auto;text-align:right;max-width:300px;font-size:13px;line-height:1.5}
.about-mobile-story .about-top-row{justify-content:flex-end;gap:16px;margin-bottom:32px}
.about-mobile-story .about-opening{font-size:clamp(36px,4.8vw,64px);line-height:1.12;letter-spacing:-.055em;overflow-wrap:normal;margin-block:0 36px}
.about-mobile-story .intro-tile{min-width:0;box-sizing:border-box}
.about-mobile-story .intro-tile-copy h2{font-size:clamp(22px,2.2vw,28px);line-height:1.25;letter-spacing:-.035em;text-wrap:balance}
.about-mobile-story .bento-details{font-size:16px;line-height:1.65;max-width:60ch;margin-inline:auto}
.about-mobile-story .bento-details p{overflow-wrap:break-word}
.about-mobile-story .wrapped-autoplay-toggle{min-width:48px;min-height:48px;padding:12px;box-sizing:border-box;font-size:12px;margin:4px auto 0}
.about-mobile-story .wrapped-instruction{margin-top:4px;font-size:12px;line-height:1.5}
.about-mobile-story .career-story{max-width:380px;width:100%;scroll-margin-top:112px;touch-action:pan-y}
.about-mobile-story .boston-color-card{touch-action:pan-y;min-width:48px;min-height:48px}
.about-mobile-story :is(button,[role=button]):focus-visible{outline:2px solid #002fa7;outline-offset:4px}
.about-mobile-story .wrapped-tap-zones button:focus-visible{outline-color:#fff;outline-offset:-6px}
.about-mobile-story .trades-list{gap:10px 16px;font-size:14px;line-height:1.4}
.about-mobile-story .trades-letters{font-size:clamp(17px,2.2vw,22px)}
.about-mobile-story .tile-color .intro-tile-copy,.about-mobile-story .tile-light .intro-tile-copy{padding-inline:0}
.about-mobile-story .intro-tile .intro-tile-copy{max-width:100%;box-sizing:border-box}
.about-mobile-story .portfolio-nav{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));box-sizing:border-box}
/* Medium windows need a readable single column, rather than cramped half panes. */
@media(max-width:839px){
body.about-mobile-story{--about-gutter:32px;--about-card-space:32px}
.about-mobile-story .inner-page.wrap{max-width:704px}
.about-mobile-story .intro-bento.intro-bento-lead,.about-mobile-story .about-mosaic-grid{display:grid;grid-template-columns:minmax(0,1fr);border:0!important;gap:0;margin-block:0}
.about-mobile-story .intro-bento-lead>.bento-story-column,.about-mobile-story .about-mosaic-column{display:contents}
.about-mobile-story .about-mosaic-column>.tile-color{order:1}.about-mobile-story .about-mosaic-column>.tile-trades{order:2}.about-mobile-story .about-mosaic-column>.career-wrapped-section{order:3}.about-mobile-story .about-mosaic-column>.tile-light{order:4}
.about-mobile-story .intro-tile{grid-column:1!important;border:0!important;background:transparent;box-shadow:none;flex:none!important;min-height:0!important;padding:32px 0!important;margin:0}
.about-mobile-story .intro-tile::before,.about-mobile-story .intro-tile::after,.about-mobile-story .bento-corners{display:none!important}
.about-mobile-story .intro-tile.soft-disclosure .bento-details{height:auto!important;opacity:1!important;max-height:none!important;overflow:visible!important;padding:0 0 8px!important;transition:none}
.about-mobile-story .intro-tile>summary{cursor:default}
.about-mobile-story .intro-tile .intro-tile-copy{padding:24px 0 16px!important}
.about-mobile-story .intro-tile .intro-tile-copy h2{font-size:26px;line-height:1.3}
.about-mobile-story .intj-dictionary{padding-inline:8px!important}
.about-mobile-story .intj-entry{max-width:460px}
.about-mobile-story .birthday-translate{gap:20px}
.about-mobile-story .birthday-source{min-height:0;padding-inline:12px}
.about-mobile-story .birthday-translate-body .birthday-source p,.about-mobile-story .birthday-translate-body .birthday-translation{font-size:22px;line-height:1.4;min-height:0}
.about-mobile-story .trades-sheet{max-width:440px}
.about-mobile-story .trades-puzzle{max-width:340px}
.about-mobile-story .trades-letters{font-size:22px}
.about-mobile-story .career-wrapped-section>h2{font-size:28px;margin-bottom:24px}
.about-mobile-story .tile-light .intro-tile-art,.about-mobile-story .tile-color .intro-tile-art{padding:20px 12px 8px!important;overflow:visible;height:auto!important}
.about-mobile-story .tile-paint .intro-tile-art{padding:16px 4px 0!important}
.about-mobile-story .about-top-row{margin-bottom:28px}
.about-mobile-story .professional-experience{margin-bottom:32px}
}
@media(max-width:599px){
body.about-mobile-story{--about-gutter:20px}
.about-mobile-story .professional-status{max-width:260px;font-size:12px}
.about-mobile-story .professional-status span{font-size:18px;line-height:1.4}
.about-mobile-story .about-opening{font-size:clamp(32px,8.5vw,46px);margin-bottom:20px;line-height:1.15}
.about-mobile-story .intro-tile{padding-block:28px!important}
.about-mobile-story .intro-tile .intro-tile-copy h2{font-size:23px}
.about-mobile-story .intro-tile.tile-graduation .intro-tile-art{padding:16px 16px 8px!important}
.about-mobile-story .intro-tile.tile-graduation .bento-photo-frame{width:min(240px,85%)}
.about-mobile-story .intro-tile .intro-tile-art:has(.bento-photo-frame){max-width:100%;box-sizing:border-box}
.about-mobile-story .trades-letters{font-size:clamp(15px,4.8vw,21px)}
.about-mobile-story .trades-list{font-size:13px;column-gap:12px}
.about-mobile-story .intj-dictionary{padding-inline:0!important}
.about-mobile-story .intj-dictionary .intj-entry{padding:24px 20px}
.about-mobile-story .intj-pronunciation{gap:6px 10px;line-height:1.6;font-size:12px}
.about-mobile-story .intj-dictionary .intj-entry p,.about-mobile-story .intj-dictionary .intj-entry .intj-example{font-size:16px;line-height:1.6}
.about-mobile-story .birthday-translate-head{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:8px}
.about-mobile-story .birthday-translate-head>span{font-size:16px;padding:12px}
.about-mobile-story .birthday-translate-body .birthday-source p,.about-mobile-story .birthday-translate-body .birthday-translation{font-size:20px}
.about-mobile-story .portfolio-nav .mobile-menu{min-width:48px;min-height:48px}
}
@media(max-width:359px){body.about-mobile-story{--about-gutter:16px}.about-mobile-story .about-opening{font-size:32px}.about-mobile-story .boston-color-surround{width:min(210px,100%)}.about-mobile-story .streak-pack{max-width:100%}}
/* Browser-provided segments keep the two columns on opposite sides of a hinge. */
@media(horizontal-viewport-segments:2){
.about-mobile-story .inner-page.wrap{width:100%;max-width:none;padding-inline:0}
.about-mobile-story .intro-bento.intro-bento-lead,.about-mobile-story .about-mosaic-grid{display:grid;grid-template-columns:minmax(0,env(viewport-segment-width 0 0)) minmax(0,env(viewport-segment-width 1 0));column-gap:calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));border:0!important}
.about-mobile-story .intro-bento-lead>.bento-story-column,.about-mobile-story .about-mosaic-column{display:flex;flex-direction:column;min-width:0}
.about-mobile-story .intro-tile{width:100%;padding:24px 16px!important;min-width:0;grid-column:auto!important}
.about-mobile-story .about-top-row,.about-mobile-story .about-opening{max-width:env(viewport-segment-width 0 0);box-sizing:border-box;padding-inline:20px}
.about-mobile-story .portfolio-nav{position:relative;max-width:env(viewport-segment-width 0 0)}
.about-mobile-story .career-story{max-width:100%}
}